2264 lines
81 KiB
TypeScript
2264 lines
81 KiB
TypeScript
type Role = 'admin' | 'user';
|
||
type View = 'steam' | 'chat' | 'users' | 'steamAccounts' | 'audit' | 'account';
|
||
type Tone = 'muted' | 'ok' | 'warn' | 'error';
|
||
type ChatListTab = 'recent' | 'friends' | 'groups';
|
||
type ChatPanel = 'list' | 'thread';
|
||
type ChatIconName = 'arrow-left' | 'image' | 'link' | 'paperclip' | 'plus' | 'search' | 'send' | 'smile' | 'x';
|
||
type Permission =
|
||
| 'user.manage'
|
||
| 'session.manage'
|
||
| 'audit.view'
|
||
| 'steam.manage'
|
||
| 'steam.account.manage'
|
||
| 'chat.use'
|
||
| 'self.password.change';
|
||
|
||
type User = {
|
||
id: number;
|
||
username: string;
|
||
displayName: string;
|
||
note: string;
|
||
role: Role;
|
||
disabled: boolean;
|
||
forcePasswordChange: boolean;
|
||
sessionVersion: number;
|
||
createdAt: string;
|
||
updatedAt: string;
|
||
lastLoginAt: string | null;
|
||
lastLoginIp: string | null;
|
||
lastSeenAt: string | null;
|
||
passwordChangedAt: string | null;
|
||
failedLoginCount: number;
|
||
lockedUntil: string | null;
|
||
locked: boolean;
|
||
steamAccountCount: number;
|
||
};
|
||
|
||
type UserSession = {
|
||
id: string;
|
||
userId: number;
|
||
createdAt: string;
|
||
lastSeenAt: string;
|
||
expiresAt: string;
|
||
ip: string | null;
|
||
userAgent: string | null;
|
||
};
|
||
|
||
type SteamAccount = {
|
||
id: number;
|
||
steamId: string;
|
||
label: string;
|
||
accountNameHint: string;
|
||
enabled: boolean;
|
||
createdAt: string;
|
||
updatedAt: string;
|
||
lastLoginAt: string | null;
|
||
lastActiveAt: string | null;
|
||
refreshTokenUpdatedAt: string | null;
|
||
authorizedUserCount: number;
|
||
active: boolean;
|
||
};
|
||
|
||
type AuditLog = {
|
||
id: number;
|
||
actorUserId: number | null;
|
||
actorUsername: string | null;
|
||
action: string;
|
||
targetType: string;
|
||
targetId: string;
|
||
detail: Record<string, unknown>;
|
||
ip: string | null;
|
||
createdAt: string;
|
||
};
|
||
|
||
type SteamStatus = {
|
||
status: string;
|
||
requiresGuard: boolean;
|
||
guardType: 'email' | 'device' | null;
|
||
domain: string | null;
|
||
lastCodeWrong: boolean;
|
||
error: string | null;
|
||
steamId: string | null;
|
||
activeAccount?: Pick<SteamAccount, 'id' | 'steamId' | 'label'> | null;
|
||
accessAllowed?: boolean;
|
||
};
|
||
|
||
type MeResponse = {
|
||
needsSetup: boolean;
|
||
user: User | null;
|
||
permissions: Permission[];
|
||
steam: SteamStatus;
|
||
};
|
||
|
||
type ListEntry = Record<string, unknown> & {
|
||
id: string;
|
||
name?: string;
|
||
avatar?: string;
|
||
preview?: string;
|
||
updatedAt?: string;
|
||
gameName?: string;
|
||
online?: boolean;
|
||
clanId?: string;
|
||
clanid?: string;
|
||
};
|
||
|
||
type MessageItem = ListEntry & {
|
||
type?: string;
|
||
echo?: boolean;
|
||
date?: string;
|
||
sentAt?: string;
|
||
message?: string;
|
||
ordinal?: string | number | null;
|
||
};
|
||
|
||
type OpenGraphPreview = {
|
||
url: string;
|
||
imageUrl: string;
|
||
title: string;
|
||
description: string;
|
||
};
|
||
|
||
const supportedBbcodeTags = ['og', 'url', 'img', 'emoticon', 'sticker'] as const;
|
||
type SupportedBbcodeTag = (typeof supportedBbcodeTags)[number];
|
||
const supportedBbcodeTagSet = new Set<string>(supportedBbcodeTags);
|
||
const supportedBbcodePattern = new RegExp(`\\[(${supportedBbcodeTags.join('|')})(?=[\\s=\\]])`, 'gi');
|
||
|
||
type SteamImagePreview = {
|
||
sourceUrl: string;
|
||
displayUrl: string;
|
||
sourceSet: string;
|
||
width: number;
|
||
height: number;
|
||
};
|
||
|
||
type InventoryItem = Record<string, unknown> & {
|
||
name?: string;
|
||
use_count?: number | string;
|
||
};
|
||
|
||
type WsPayload = Record<string, unknown> & {
|
||
type?: string;
|
||
id?: string;
|
||
name?: string;
|
||
message?: string;
|
||
ordinal?: string | number | null;
|
||
echo?: boolean;
|
||
date?: string;
|
||
sentAt?: string;
|
||
error?: string;
|
||
};
|
||
|
||
type AppState = {
|
||
me: User | null;
|
||
needsSetup: boolean;
|
||
permissions: Permission[];
|
||
steam: SteamStatus;
|
||
view: View;
|
||
users: User[];
|
||
userSessions: Record<number, UserSession[]>;
|
||
userSteamAccounts: Record<number, SteamAccount[]>;
|
||
steamAccounts: SteamAccount[];
|
||
auditLogs: AuditLog[];
|
||
conversations: ListEntry[];
|
||
friends: ListEntry[];
|
||
groups: ListEntry[];
|
||
emoticons: InventoryItem[];
|
||
stickers: InventoryItem[];
|
||
activeId: string;
|
||
activeName: string;
|
||
chatListTab: ChatListTab;
|
||
chatQuery: string;
|
||
chatPanel: ChatPanel;
|
||
historyLimit: number;
|
||
wsPath: string;
|
||
ws: WebSocket | null;
|
||
reconnectTimer: ReturnType<typeof setTimeout> | null;
|
||
statusTimer: ReturnType<typeof setInterval> | null;
|
||
userQuery: string;
|
||
userRole: string;
|
||
userStatus: string;
|
||
auditAction: string;
|
||
auditTargetType: string;
|
||
feedback: string;
|
||
feedbackTone: Tone;
|
||
};
|
||
|
||
const defaultSteamStatus: SteamStatus = {
|
||
status: 'logged_out',
|
||
requiresGuard: false,
|
||
guardType: null,
|
||
domain: null,
|
||
lastCodeWrong: false,
|
||
error: null,
|
||
steamId: null,
|
||
activeAccount: null,
|
||
accessAllowed: false
|
||
};
|
||
|
||
const root = document.querySelector<HTMLElement>('#app');
|
||
if (!root) throw new Error('Missing app root');
|
||
let feedbackTimer: ReturnType<typeof setTimeout> | null = null;
|
||
|
||
const state: AppState = {
|
||
me: null,
|
||
needsSetup: false,
|
||
permissions: [],
|
||
steam: defaultSteamStatus,
|
||
view: normalizeView(localStorage.getItem('steam-chat.view')),
|
||
users: [],
|
||
userSessions: {},
|
||
userSteamAccounts: {},
|
||
steamAccounts: [],
|
||
auditLogs: [],
|
||
conversations: [],
|
||
friends: [],
|
||
groups: [],
|
||
emoticons: [],
|
||
stickers: [],
|
||
activeId: localStorage.getItem('steam-chat.target') || '',
|
||
activeName: '',
|
||
chatListTab: 'recent',
|
||
chatQuery: '',
|
||
chatPanel: 'list',
|
||
historyLimit: clampLimit(localStorage.getItem('steam-chat.history-limit') || 100),
|
||
wsPath: '/ws',
|
||
ws: null,
|
||
reconnectTimer: null,
|
||
statusTimer: null,
|
||
userQuery: '',
|
||
userRole: '',
|
||
userStatus: '',
|
||
auditAction: '',
|
||
auditTargetType: '',
|
||
feedback: '就绪',
|
||
feedbackTone: 'muted'
|
||
};
|
||
|
||
function isRecord(value: unknown): value is Record<string, unknown> {
|
||
return value !== null && typeof value === 'object';
|
||
}
|
||
|
||
function create<K extends keyof HTMLElementTagNameMap>(tag: K, className = '', text = ''): HTMLElementTagNameMap[K] {
|
||
const node = document.createElement(tag);
|
||
if (className) node.className = className;
|
||
if (text) node.textContent = text;
|
||
return node;
|
||
}
|
||
|
||
function chatIcon(name: ChatIconName) {
|
||
const node = create('span', `ui-icon icon-${name}`);
|
||
node.setAttribute('aria-hidden', 'true');
|
||
return node;
|
||
}
|
||
|
||
function chatIconButton(name: ChatIconName, label: string, className = 'icon-btn') {
|
||
const button = create('button', className);
|
||
button.type = 'button';
|
||
button.title = label;
|
||
button.setAttribute('aria-label', label);
|
||
button.append(chatIcon(name));
|
||
return button;
|
||
}
|
||
|
||
function clear(node: HTMLElement) {
|
||
node.replaceChildren();
|
||
}
|
||
|
||
function errorMessage(error: unknown): string {
|
||
return error instanceof Error ? error.message : String(error || '');
|
||
}
|
||
|
||
function clampLimit(value: unknown): number {
|
||
const parsed = Number.parseInt(String(value), 10);
|
||
if (!Number.isFinite(parsed) || parsed <= 0) return 100;
|
||
return Math.min(parsed, 500);
|
||
}
|
||
|
||
function normalizeView(value: unknown): View {
|
||
const view = String(value || '');
|
||
return view === 'steam' || view === 'chat' || view === 'users' || view === 'steamAccounts' || view === 'audit' || view === 'account' ? view : 'steam';
|
||
}
|
||
|
||
function asListEntries(value: unknown): ListEntry[] {
|
||
return Array.isArray(value) ? value.filter(isRecord).map((item) => ({ ...item, id: String(item.id || '') })) : [];
|
||
}
|
||
|
||
function asMessages(value: unknown): MessageItem[] {
|
||
return Array.isArray(value) ? value.filter(isRecord).map((item) => ({ ...item, id: String(item.id || '') })) : [];
|
||
}
|
||
|
||
function asInventory(value: unknown): InventoryItem[] {
|
||
return Array.isArray(value) ? value.filter(isRecord) : [];
|
||
}
|
||
|
||
function setFeedback(text: string, tone: Tone = 'muted') {
|
||
if (feedbackTimer) clearTimeout(feedbackTimer);
|
||
feedbackTimer = null;
|
||
state.feedback = text;
|
||
state.feedbackTone = tone;
|
||
const node = document.querySelector<HTMLElement>('#feedback');
|
||
if (node) {
|
||
const content = node.querySelector<HTMLElement>('#feedbackText');
|
||
if (content) content.textContent = text;
|
||
else node.textContent = text;
|
||
node.dataset.tone = tone;
|
||
node.setAttribute('aria-live', tone === 'error' ? 'assertive' : 'polite');
|
||
if (state.view === 'chat') presentChatFeedback(node, tone);
|
||
}
|
||
}
|
||
|
||
function presentChatFeedback(node: HTMLElement, tone: Tone) {
|
||
node.hidden = tone === 'muted';
|
||
if (tone === 'muted' || tone === 'error') return;
|
||
feedbackTimer = setTimeout(() => dismissChatFeedback(node), tone === 'warn' ? 4000 : 2400);
|
||
}
|
||
|
||
function dismissChatFeedback(node = document.querySelector<HTMLElement>('#feedback')) {
|
||
if (feedbackTimer) clearTimeout(feedbackTimer);
|
||
feedbackTimer = null;
|
||
state.feedback = '就绪';
|
||
state.feedbackTone = 'muted';
|
||
if (node) node.hidden = true;
|
||
}
|
||
|
||
function steamLabel(status = state.steam.status): string {
|
||
const labels: Record<string, string> = {
|
||
logged_out: '未连接',
|
||
logging_in: '登录中',
|
||
waiting_guard: '等待验证',
|
||
online: '在线',
|
||
error: '异常',
|
||
reconnecting: '重连中'
|
||
};
|
||
return labels[status] || status;
|
||
}
|
||
|
||
function steamOnline() {
|
||
return state.steam.status === 'online';
|
||
}
|
||
|
||
function steamAccessAllowed() {
|
||
return state.steam.accessAllowed !== false;
|
||
}
|
||
|
||
function hasPermission(permission: Permission) {
|
||
return state.permissions.includes(permission);
|
||
}
|
||
|
||
function displayName(user: User) {
|
||
return user.displayName || user.username;
|
||
}
|
||
|
||
function dateTime(value: unknown): string {
|
||
if (!value) return '无';
|
||
const date = new Date(String(value));
|
||
if (Number.isNaN(date.getTime())) return String(value);
|
||
return date.toLocaleString('zh-CN', {
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
});
|
||
}
|
||
|
||
function compactJson(value: unknown): string {
|
||
if (!isRecord(value) || !Object.keys(value).length) return '{}';
|
||
return JSON.stringify(value);
|
||
}
|
||
|
||
function steamStatusSignature(status = state.steam) {
|
||
return [
|
||
status.status,
|
||
status.requiresGuard,
|
||
status.guardType || '',
|
||
status.domain || '',
|
||
status.lastCodeWrong,
|
||
status.error || '',
|
||
status.steamId || '',
|
||
status.activeAccount?.id || '',
|
||
status.accessAllowed
|
||
].join('|');
|
||
}
|
||
|
||
function updateSteamStatus(status: SteamStatus) {
|
||
state.steam = { ...defaultSteamStatus, ...status };
|
||
const badge = document.querySelector<HTMLElement>('#steamBadge');
|
||
if (badge) {
|
||
badge.textContent = steamLabel();
|
||
badge.dataset.status = state.steam.status;
|
||
}
|
||
const hint = document.querySelector<HTMLElement>('#steamHint');
|
||
if (hint) hint.textContent = state.steam.error || (state.steam.steamId ? `SteamID ${state.steam.steamId}` : '后台服务已启动');
|
||
const subtitle = document.querySelector<HTMLElement>('#pageSubtitle');
|
||
if (subtitle) subtitle.textContent = pageSubtitle();
|
||
updateChatAvailability();
|
||
}
|
||
|
||
async function api(path: string, options: RequestInit = {}): Promise<unknown> {
|
||
const headers = new Headers(options.headers || {});
|
||
headers.set('Accept', 'application/json');
|
||
if (options.body && !headers.has('Content-Type')) headers.set('Content-Type', 'application/json');
|
||
const response = await fetch(path, {
|
||
...options,
|
||
headers,
|
||
credentials: 'same-origin'
|
||
});
|
||
const payload: unknown = await response.json().catch((): null => null);
|
||
if (!response.ok) {
|
||
if (response.status === 401 && !path.startsWith('/api/auth/me') && !path.startsWith('/api/auth/login')) {
|
||
stopWebSocket();
|
||
state.me = null;
|
||
state.permissions = [];
|
||
state.needsSetup = false;
|
||
renderLogin();
|
||
}
|
||
throw new Error(isRecord(payload) && typeof payload.error === 'string' ? payload.error : `HTTP ${response.status}`);
|
||
}
|
||
return payload;
|
||
}
|
||
|
||
function jsonBody(body: Record<string, unknown>): RequestInit {
|
||
return {
|
||
method: 'POST',
|
||
body: JSON.stringify(body)
|
||
};
|
||
}
|
||
|
||
function formValue(form: HTMLFormElement, name: string): string {
|
||
const value = new FormData(form).get(name);
|
||
return typeof value === 'string' ? value : '';
|
||
}
|
||
|
||
function authPage(title: string, subtitle: string, form: HTMLElement) {
|
||
stopStatusPolling();
|
||
stopWebSocket();
|
||
clear(root);
|
||
const page = create('main', 'auth-page');
|
||
const panel = create('section', 'auth-panel');
|
||
panel.append(create('h1', '', title), create('p', 'muted', subtitle), form);
|
||
page.append(panel);
|
||
root.append(page);
|
||
}
|
||
|
||
function renderSetup() {
|
||
const form = create('form', 'stack-form') as HTMLFormElement;
|
||
form.innerHTML = `
|
||
<label>管理员账号<input name="username" autocomplete="username" minlength="3" maxlength="64" required></label>
|
||
<label>后台密码<input name="password" type="password" autocomplete="new-password" minlength="8" required></label>
|
||
<button type="submit">初始化后台</button>
|
||
<p class="form-error" id="setupError"></p>
|
||
`;
|
||
form.addEventListener('submit', async (event) => {
|
||
event.preventDefault();
|
||
const errorNode = form.querySelector<HTMLElement>('#setupError');
|
||
try {
|
||
await api('/api/auth/setup', jsonBody({
|
||
username: formValue(form, 'username'),
|
||
password: formValue(form, 'password')
|
||
}));
|
||
await bootstrap();
|
||
} catch (error) {
|
||
if (errorNode) errorNode.textContent = errorMessage(error);
|
||
}
|
||
});
|
||
authPage('初始化 Steam Chat 后台', '创建第一个管理员后，再进入工作台连接 Steam。', form);
|
||
}
|
||
|
||
function renderLogin() {
|
||
const form = create('form', 'stack-form') as HTMLFormElement;
|
||
form.innerHTML = `
|
||
<label>账号<input name="username" autocomplete="username" required></label>
|
||
<label>密码<input name="password" type="password" autocomplete="current-password" required></label>
|
||
<button type="submit">登录后台</button>
|
||
<p class="form-error" id="loginError"></p>
|
||
`;
|
||
form.addEventListener('submit', async (event) => {
|
||
event.preventDefault();
|
||
const errorNode = form.querySelector<HTMLElement>('#loginError');
|
||
try {
|
||
await api('/api/auth/login', jsonBody({
|
||
username: formValue(form, 'username'),
|
||
password: formValue(form, 'password')
|
||
}));
|
||
await bootstrap();
|
||
} catch (error) {
|
||
if (errorNode) errorNode.textContent = errorMessage(error);
|
||
}
|
||
});
|
||
authPage('Steam Chat 后台登录', '登录后可使用已连接的 Steam 会话聊天，管理员可管理用户和 Steam 登录。', form);
|
||
}
|
||
|
||
function navButton(view: View, label: string) {
|
||
const button = create('button', state.view === view ? 'is-active' : '', label);
|
||
button.type = 'button';
|
||
button.addEventListener('click', () => {
|
||
state.view = view;
|
||
localStorage.setItem('steam-chat.view', view);
|
||
renderShell();
|
||
});
|
||
return button;
|
||
}
|
||
|
||
function panel(title: string, className = '') {
|
||
const section = create('section', `panel${className ? ` ${className}` : ''}`);
|
||
section.append(create('h2', 'panel-title', title));
|
||
return section;
|
||
}
|
||
|
||
function renderShell() {
|
||
if (!state.me) {
|
||
renderLogin();
|
||
return;
|
||
}
|
||
if (state.me.role !== 'admin' && ['users', 'steamAccounts', 'audit'].includes(state.view)) state.view = 'steam';
|
||
clear(root);
|
||
const shell = create('div', `admin-shell${state.view === 'chat' ? ' is-chat' : ''}`);
|
||
const sidebar = create('aside', 'admin-sidebar');
|
||
const brand = create('div', 'brand');
|
||
brand.append(create('strong', '', 'Steam Chat'), create('span', '', state.me.username));
|
||
const nav = create('nav');
|
||
nav.append(navButton('steam', 'Steam 连接'), navButton('chat', '聊天'));
|
||
if (hasPermission('user.manage')) nav.append(navButton('users', '用户管理'));
|
||
if (hasPermission('steam.account.manage')) nav.append(navButton('steamAccounts', 'Steam 账户'));
|
||
if (hasPermission('audit.view')) nav.append(navButton('audit', '审计日志'));
|
||
nav.append(navButton('account', '账号'));
|
||
sidebar.append(brand, nav);
|
||
|
||
const main = create('main', 'workspace');
|
||
const top = create('header', 'topbar');
|
||
const title = create('div');
|
||
const heading = create('h1', '', pageTitle());
|
||
const subtitle = create('p', 'muted', pageSubtitle());
|
||
subtitle.id = 'pageSubtitle';
|
||
title.append(heading, subtitle);
|
||
const status = create('div', 'top-actions');
|
||
const badge = create('span', 'steam-badge', steamLabel());
|
||
badge.id = 'steamBadge';
|
||
badge.dataset.status = state.steam.status;
|
||
const hint = create('span', 'top-hint', state.steam.error || (state.steam.steamId ? `SteamID ${state.steam.steamId}` : '后台服务已启动'));
|
||
hint.id = 'steamHint';
|
||
const logout = create('button', 'ghost-btn', '退出后台');
|
||
logout.type = 'button';
|
||
logout.addEventListener('click', () => logoutApp());
|
||
status.append(badge, hint, logout);
|
||
top.append(title, status);
|
||
const content = create('section', `content${state.view === 'chat' ? ' chat-content' : ''}`);
|
||
content.append(renderCurrentView());
|
||
const feedback = create('div', `feedback${state.view === 'chat' ? ' chat-toast' : ''}`);
|
||
feedback.id = 'feedback';
|
||
feedback.dataset.tone = state.feedbackTone;
|
||
feedback.setAttribute('aria-live', state.feedbackTone === 'error' ? 'assertive' : 'polite');
|
||
const feedbackText = create('span', '', state.feedback);
|
||
feedbackText.id = 'feedbackText';
|
||
feedback.append(feedbackText);
|
||
if (state.view === 'chat') {
|
||
const dismiss = chatIconButton('x', '关闭提示', 'toast-close');
|
||
dismiss.addEventListener('click', () => dismissChatFeedback(feedback));
|
||
feedback.append(dismiss);
|
||
feedback.hidden = state.feedbackTone === 'muted';
|
||
}
|
||
main.append(top, content, feedback);
|
||
shell.append(sidebar, main);
|
||
root.append(shell);
|
||
if (state.view === 'chat') void refreshChatData();
|
||
if (state.view === 'users' && hasPermission('user.manage')) {
|
||
void loadSteamAccounts();
|
||
void loadUsers();
|
||
}
|
||
if (state.view === 'steamAccounts') void loadSteamAccounts();
|
||
if (state.view === 'audit') void loadAuditLogs();
|
||
ensureWebSocket();
|
||
startStatusPolling();
|
||
}
|
||
|
||
function pageTitle() {
|
||
if (state.view === 'chat') return '聊天';
|
||
if (state.view === 'users') return '用户管理';
|
||
if (state.view === 'steamAccounts') return 'Steam 账户';
|
||
if (state.view === 'audit') return '审计日志';
|
||
if (state.view === 'account') return '账号';
|
||
return 'Steam 连接';
|
||
}
|
||
|
||
function pageSubtitle() {
|
||
if (state.view === 'chat') {
|
||
if (!steamAccessAllowed()) return '当前后台用户未被授权访问活动 Steam 账户';
|
||
return steamOnline() ? '好友、群组、历史和实时消息' : 'Steam 未在线，聊天操作已禁用';
|
||
}
|
||
if (state.view === 'users') return '后台用户、会话、角色、资料和 Steam 授权';
|
||
if (state.view === 'steamAccounts') return 'Steam 账户资料、连接状态和授权计数';
|
||
if (state.view === 'audit') return '关键管理动作和敏感字段脱敏记录';
|
||
if (state.view === 'account') return '修改当前后台账号密码';
|
||
return state.me?.role === 'admin' ? '管理员在这里完成 Steam 登录和 Guard 验证' : '等待管理员连接 Steam';
|
||
}
|
||
|
||
function renderCurrentView() {
|
||
if (state.view === 'chat') return renderChatView();
|
||
if (state.view === 'users' && hasPermission('user.manage')) return renderUsersView();
|
||
if (state.view === 'steamAccounts' && hasPermission('steam.account.manage')) return renderSteamAccountsView();
|
||
if (state.view === 'audit' && hasPermission('audit.view')) return renderAuditView();
|
||
if (state.view === 'account') return renderAccountView();
|
||
return renderSteamView();
|
||
}
|
||
|
||
function renderSteamView() {
|
||
const view = create('div', 'steam-view');
|
||
const summary = create('section', 'status-panel');
|
||
const statusText = create('strong', '', steamLabel());
|
||
const activeLabel = state.steam.activeAccount
|
||
? `${state.steam.activeAccount.label || state.steam.activeAccount.steamId} · ${state.steam.activeAccount.steamId}`
|
||
: state.steam.steamId ? `当前 SteamID：${state.steam.steamId}` : '当前没有可用的 Steam 会话';
|
||
const detail = create('p', 'muted', state.steam.error || activeLabel);
|
||
summary.append(statusText, detail);
|
||
view.append(summary);
|
||
|
||
if (state.me?.role !== 'admin') {
|
||
const access = panel('访问状态', 'status-note-panel');
|
||
access.append(create('p', state.steam.accessAllowed === false ? 'warn-text' : 'muted', state.steam.accessAllowed === false ? '当前账号未被授权访问活动 Steam 账户。' : '普通用户只能在 Steam 在线且被授权后使用聊天。'));
|
||
view.append(access);
|
||
return view;
|
||
}
|
||
|
||
if (state.steam.requiresGuard) {
|
||
const guardPanel = panel('Steam Guard', 'form-panel');
|
||
const guardForm = create('form', 'inline-form') as HTMLFormElement;
|
||
const guardText = state.steam.guardType === 'email'
|
||
? `邮箱验证码${state.steam.domain ? `：${state.steam.domain}` : ''}`
|
||
: '手机 2FA 验证码';
|
||
const codeLabel = create('label', '', guardText);
|
||
const codeInput = create('input') as HTMLInputElement;
|
||
codeInput.name = 'code';
|
||
codeInput.autocomplete = 'one-time-code';
|
||
codeInput.required = true;
|
||
const submit = create('button', '', '提交验证');
|
||
submit.type = 'submit';
|
||
codeLabel.append(codeInput);
|
||
guardForm.append(codeLabel, submit);
|
||
if (state.steam.lastCodeWrong) guardForm.prepend(create('p', 'warn-text', '上一次验证码被拒绝，请等待新的验证码后再提交。'));
|
||
guardForm.addEventListener('submit', async (event) => {
|
||
event.preventDefault();
|
||
try {
|
||
const result = await api('/api/steam/guard', jsonBody({ code: formValue(guardForm, 'code') }));
|
||
updateSteamStatus(result as SteamStatus);
|
||
renderShell();
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
});
|
||
guardPanel.append(guardForm);
|
||
view.append(guardPanel);
|
||
} else if (!['logging_in', 'online', 'reconnecting'].includes(state.steam.status)) {
|
||
const loginPanel = panel('登录 Steam', 'form-panel');
|
||
const loginForm = create('form', 'stack-form narrow-form') as HTMLFormElement;
|
||
loginForm.innerHTML = `
|
||
<label>显示名称<input name="label" autocomplete="off" placeholder="例如：客服一号"></label>
|
||
<label>Steam 账号<input name="accountName" autocomplete="username" required></label>
|
||
<label>Steam 密码<input name="password" type="password" autocomplete="current-password" required></label>
|
||
<label>Logon ID<input name="logonID" inputmode="numeric" placeholder="留空使用后台固定值"></label>
|
||
<button type="submit">登录 Steam</button>
|
||
`;
|
||
loginForm.addEventListener('submit', async (event) => {
|
||
event.preventDefault();
|
||
const rawLogonID = formValue(loginForm, 'logonID').trim();
|
||
try {
|
||
const result = await api('/api/steam/login', jsonBody({
|
||
accountName: formValue(loginForm, 'accountName'),
|
||
password: formValue(loginForm, 'password'),
|
||
label: formValue(loginForm, 'label'),
|
||
...(rawLogonID ? { logonID: Number(rawLogonID) } : {})
|
||
}));
|
||
updateSteamStatus(result as SteamStatus);
|
||
renderShell();
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
});
|
||
loginPanel.append(loginForm);
|
||
view.append(loginPanel);
|
||
}
|
||
|
||
const actions = create('div', 'page-actions');
|
||
const logout = create('button', 'danger-btn', '退出 Steam 并删除 token');
|
||
logout.type = 'button';
|
||
logout.disabled = state.steam.status === 'logged_out';
|
||
logout.addEventListener('click', async () => {
|
||
try {
|
||
const result = await api('/api/steam/logout', { method: 'POST' });
|
||
updateSteamStatus(result as SteamStatus);
|
||
renderShell();
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
});
|
||
actions.append(logout);
|
||
view.append(actions);
|
||
return view;
|
||
}
|
||
|
||
function renderUsersView() {
|
||
const view = create('div', 'users-view');
|
||
const filterPanel = panel('筛选', 'toolbar-panel');
|
||
const filters = create('form', 'inline-form user-filters') as HTMLFormElement;
|
||
filters.innerHTML = `
|
||
<label>搜索<input name="query" value="${state.userQuery}" placeholder="账号、昵称、备注"></label>
|
||
<label>角色<select name="role"><option value="">全部</option><option value="admin">管理员</option><option value="user">普通用户</option></select></label>
|
||
<label>状态<select name="status"><option value="">全部</option><option value="enabled">启用</option><option value="disabled">禁用</option><option value="locked">锁定</option></select></label>
|
||
<button type="submit">筛选</button>
|
||
`;
|
||
(filters.elements.namedItem('role') as HTMLSelectElement).value = state.userRole;
|
||
(filters.elements.namedItem('status') as HTMLSelectElement).value = state.userStatus;
|
||
filters.addEventListener('submit', async (event) => {
|
||
event.preventDefault();
|
||
state.userQuery = formValue(filters, 'query');
|
||
state.userRole = formValue(filters, 'role');
|
||
state.userStatus = formValue(filters, 'status');
|
||
await loadUsers();
|
||
});
|
||
filterPanel.append(filters);
|
||
const createPanel = panel('新增用户', 'toolbar-panel');
|
||
const form = create('form', 'inline-form user-create') as HTMLFormElement;
|
||
form.innerHTML = `
|
||
<label>账号<input name="username" minlength="3" maxlength="64" required></label>
|
||
<label>昵称<input name="displayName" maxlength="80"></label>
|
||
<label>密码<input name="password" type="password" minlength="8" required></label>
|
||
<label>角色<select name="role"><option value="user">普通用户</option><option value="admin">管理员</option></select></label>
|
||
<label>备注<input name="note" maxlength="500"></label>
|
||
<button type="submit">新增用户</button>
|
||
`;
|
||
form.addEventListener('submit', async (event) => {
|
||
event.preventDefault();
|
||
try {
|
||
await api('/api/users', jsonBody({
|
||
username: formValue(form, 'username'),
|
||
displayName: formValue(form, 'displayName'),
|
||
password: formValue(form, 'password'),
|
||
role: formValue(form, 'role') || 'user',
|
||
note: formValue(form, 'note')
|
||
}));
|
||
form.reset();
|
||
await loadUsers();
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
});
|
||
createPanel.append(form);
|
||
const listPanel = panel('用户列表', 'list-panel');
|
||
const table = create('div', 'user-table');
|
||
table.id = 'userTable';
|
||
listPanel.append(table);
|
||
view.append(filterPanel, createPanel, listPanel);
|
||
renderUserTable(table);
|
||
return view;
|
||
}
|
||
|
||
function renderUserTable(container: HTMLElement) {
|
||
clear(container);
|
||
if (!state.users.length) {
|
||
container.append(create('div', 'empty', '暂无用户'));
|
||
return;
|
||
}
|
||
for (const user of state.users) {
|
||
const row = create('article', 'user-row');
|
||
const info = create('div');
|
||
const status = user.locked ? '锁定' : user.disabled ? '已禁用' : '启用';
|
||
info.append(
|
||
create('strong', '', `${displayName(user)} (${user.username})`),
|
||
create('span', 'muted', `${user.role === 'admin' ? '管理员' : '普通用户'} · ${status} · 授权 ${user.steamAccountCount || 0} 个 Steam 账户`),
|
||
create('span', 'muted', `最近登录 ${dateTime(user.lastLoginAt)} · IP ${user.lastLoginIp || '无'} · 活跃 ${dateTime(user.lastSeenAt)}`),
|
||
create('span', 'muted', user.note ? `备注：${user.note}` : '无备注')
|
||
);
|
||
const actions = create('div', 'row-actions');
|
||
const profile = create('button', 'ghost-btn', '编辑资料');
|
||
profile.type = 'button';
|
||
profile.addEventListener('click', () => editUserProfile(user));
|
||
const role = create('button', 'ghost-btn', user.role === 'admin' ? '降为用户' : '设为管理员');
|
||
role.type = 'button';
|
||
role.disabled = user.id === state.me?.id;
|
||
role.addEventListener('click', () => patchUser(user.id, { role: user.role === 'admin' ? 'user' : 'admin' }));
|
||
const disabled = create('button', 'ghost-btn', user.disabled ? '启用' : '禁用');
|
||
disabled.type = 'button';
|
||
disabled.disabled = user.id === state.me?.id;
|
||
disabled.addEventListener('click', () => patchUser(user.id, { disabled: !user.disabled }));
|
||
const password = create('button', 'ghost-btn', '重置密码');
|
||
password.type = 'button';
|
||
password.addEventListener('click', () => resetUserPassword(user.id));
|
||
const forcePassword = create('button', 'ghost-btn', user.forcePasswordChange ? '取消强制改密' : '要求改密');
|
||
forcePassword.type = 'button';
|
||
forcePassword.addEventListener('click', () => patchUser(user.id, { forcePasswordChange: !user.forcePasswordChange }));
|
||
const sessions = create('button', 'ghost-btn', '会话');
|
||
sessions.type = 'button';
|
||
sessions.addEventListener('click', () => loadUserSessions(user.id));
|
||
const grants = create('button', 'ghost-btn', '授权');
|
||
grants.type = 'button';
|
||
grants.addEventListener('click', () => loadUserSteamAccounts(user.id));
|
||
const remove = create('button', 'danger-btn', '删除');
|
||
remove.type = 'button';
|
||
remove.disabled = user.id === state.me?.id;
|
||
remove.addEventListener('click', () => deleteUser(user.id));
|
||
actions.append(profile, role, disabled, password, forcePassword, sessions, grants, remove);
|
||
row.append(info, actions);
|
||
const detail = renderUserDetail(user);
|
||
if (detail) row.append(detail);
|
||
container.append(row);
|
||
}
|
||
}
|
||
|
||
function renderUserDetail(user: User): HTMLElement | null {
|
||
const sessions = state.userSessions[user.id];
|
||
const grants = state.userSteamAccounts[user.id];
|
||
if (!sessions && !grants) return null;
|
||
const detail = create('div', 'user-detail');
|
||
if (sessions) {
|
||
const block = create('section', 'detail-block');
|
||
const revokeAll = create('button', 'danger-btn', '踢下线全部会话');
|
||
revokeAll.type = 'button';
|
||
revokeAll.addEventListener('click', () => revokeUserSessions(user.id));
|
||
block.append(create('h3', '', '会话'), revokeAll);
|
||
if (!sessions.length) block.append(create('div', 'empty small', '暂无活动会话'));
|
||
for (const session of sessions) {
|
||
const row = create('div', 'session-row');
|
||
row.append(create('span', '', `${dateTime(session.lastSeenAt)} · ${session.ip || '未知 IP'}`), create('span', 'muted', session.userAgent || '无 User-Agent'));
|
||
const revoke = create('button', 'danger-btn', '踢下线');
|
||
revoke.type = 'button';
|
||
revoke.addEventListener('click', () => revokeSession(user.id, session.id));
|
||
row.append(revoke);
|
||
block.append(row);
|
||
}
|
||
detail.append(block);
|
||
}
|
||
if (grants) {
|
||
const form = create('form', 'grant-grid') as HTMLFormElement;
|
||
form.append(create('h3', '', 'Steam 授权'));
|
||
if (!state.steamAccounts.length) form.append(create('div', 'empty small', '暂无 Steam 账户'));
|
||
for (const account of state.steamAccounts) {
|
||
const label = create('label', 'check-row');
|
||
const input = create('input') as HTMLInputElement;
|
||
input.type = 'checkbox';
|
||
input.name = 'steamAccountIds';
|
||
input.value = String(account.id);
|
||
input.checked = grants.some((item) => item.id === account.id);
|
||
label.append(input, create('span', '', `${account.label || account.steamId} · ${account.enabled ? '启用' : '禁用'}`));
|
||
form.append(label);
|
||
}
|
||
const save = create('button', 'primary-btn', '保存授权');
|
||
save.type = 'submit';
|
||
form.append(save);
|
||
form.addEventListener('submit', async (event) => {
|
||
event.preventDefault();
|
||
const ids = [...form.querySelectorAll<HTMLInputElement>('input[name="steamAccountIds"]:checked')].map((input) => Number(input.value));
|
||
await saveUserSteamAccounts(user.id, ids);
|
||
});
|
||
detail.append(form);
|
||
}
|
||
return detail;
|
||
}
|
||
|
||
async function loadUsers() {
|
||
if (!hasPermission('user.manage')) return;
|
||
try {
|
||
const params = new URLSearchParams();
|
||
if (state.userQuery) params.set('query', state.userQuery);
|
||
if (state.userRole) params.set('role', state.userRole);
|
||
if (state.userStatus) params.set('status', state.userStatus);
|
||
const payload = await api(`/api/users${params.size ? `?${params}` : ''}`);
|
||
state.users = isRecord(payload) && Array.isArray(payload.users) ? payload.users as User[] : [];
|
||
const table = document.querySelector<HTMLElement>('#userTable');
|
||
if (table) renderUserTable(table);
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
async function editUserProfile(user: User) {
|
||
const display = window.prompt('昵称', user.displayName);
|
||
if (display === null) return;
|
||
const note = window.prompt('备注', user.note);
|
||
if (note === null) return;
|
||
await patchUser(user.id, { displayName: display, note });
|
||
}
|
||
|
||
async function patchUser(id: number, patch: Record<string, unknown>) {
|
||
try {
|
||
await api(`/api/users/${id}`, {
|
||
method: 'PATCH',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(patch)
|
||
});
|
||
await loadUsers();
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
async function resetUserPassword(id: number) {
|
||
const password = window.prompt('输入新密码，至少 8 位');
|
||
if (!password) return;
|
||
const forcePasswordChange = window.confirm('要求该用户下次登录后修改密码？');
|
||
try {
|
||
await api(`/api/users/${id}/password`, jsonBody({ password, forcePasswordChange }));
|
||
setFeedback('密码已重置', 'ok');
|
||
await loadUsers();
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
async function loadUserSessions(id: number) {
|
||
try {
|
||
const payload = await api(`/api/users/${id}/sessions`);
|
||
state.userSessions[id] = isRecord(payload) && Array.isArray(payload.sessions) ? payload.sessions as UserSession[] : [];
|
||
renderShell();
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
async function revokeSession(userId: number, sessionId: string) {
|
||
try {
|
||
await api(`/api/users/${userId}/sessions/${encodeURIComponent(sessionId)}`, { method: 'DELETE' });
|
||
await loadUserSessions(userId);
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
async function revokeUserSessions(userId: number) {
|
||
try {
|
||
await api(`/api/users/${userId}/sessions`, { method: 'DELETE' });
|
||
await loadUserSessions(userId);
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
async function loadUserSteamAccounts(id: number) {
|
||
try {
|
||
await loadSteamAccounts();
|
||
const payload = await api(`/api/users/${id}/steam-accounts`);
|
||
state.userSteamAccounts[id] = isRecord(payload) && Array.isArray(payload.steamAccounts) ? payload.steamAccounts as SteamAccount[] : [];
|
||
renderShell();
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
async function saveUserSteamAccounts(id: number, steamAccountIds: number[]) {
|
||
try {
|
||
const payload = await api(`/api/users/${id}/steam-accounts`, {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ steamAccountIds })
|
||
});
|
||
state.userSteamAccounts[id] = isRecord(payload) && Array.isArray(payload.steamAccounts) ? payload.steamAccounts as SteamAccount[] : [];
|
||
setFeedback('授权已保存', 'ok');
|
||
await loadUsers();
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
async function deleteUser(id: number) {
|
||
if (!window.confirm('确认删除该后台用户？')) return;
|
||
try {
|
||
await api(`/api/users/${id}`, { method: 'DELETE' });
|
||
await loadUsers();
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
function renderSteamAccountsView() {
|
||
const view = create('div', 'steam-accounts-view');
|
||
if (hasPermission('steam.manage')) {
|
||
const loginPanel = panel('登录新账户', 'toolbar-panel');
|
||
const loginForm = create('form', 'inline-form steam-account-login') as HTMLFormElement;
|
||
loginForm.innerHTML = `
|
||
<label>显示名称<input name="label" maxlength="80"></label>
|
||
<label>Steam 账号<input name="accountName" autocomplete="username" required></label>
|
||
<label>Steam 密码<input name="password" type="password" autocomplete="current-password" required></label>
|
||
<label>Logon ID<input name="logonID" inputmode="numeric"></label>
|
||
<button type="submit">登录新账户</button>
|
||
`;
|
||
loginForm.addEventListener('submit', async (event) => {
|
||
event.preventDefault();
|
||
const rawLogonID = formValue(loginForm, 'logonID').trim();
|
||
try {
|
||
const status = await api('/api/steam/accounts/login', jsonBody({
|
||
label: formValue(loginForm, 'label'),
|
||
accountName: formValue(loginForm, 'accountName'),
|
||
password: formValue(loginForm, 'password'),
|
||
...(rawLogonID ? { logonID: Number(rawLogonID) } : {})
|
||
}));
|
||
updateSteamStatus(status as SteamStatus);
|
||
loginForm.reset();
|
||
await loadSteamAccounts();
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
});
|
||
loginPanel.append(loginForm);
|
||
view.append(loginPanel);
|
||
}
|
||
const listPanel = panel('账户列表', 'list-panel');
|
||
const list = create('div', 'account-table');
|
||
list.id = 'steamAccountTable';
|
||
listPanel.append(list);
|
||
view.append(listPanel);
|
||
renderSteamAccountTable(list);
|
||
return view;
|
||
}
|
||
|
||
function renderSteamAccountTable(container: HTMLElement) {
|
||
clear(container);
|
||
if (!state.steamAccounts.length) {
|
||
container.append(create('div', 'empty', '暂无 Steam 账户'));
|
||
return;
|
||
}
|
||
for (const account of state.steamAccounts) {
|
||
const row = create('article', 'account-row');
|
||
const info = create('div');
|
||
info.append(
|
||
create('strong', '', account.label || account.steamId),
|
||
create('span', 'muted', `${account.steamId} · ${account.active ? '当前活动' : '未连接'} · ${account.enabled ? '启用' : '禁用'} · 授权 ${account.authorizedUserCount || 0} 人`),
|
||
create('span', 'muted', `最近登录 ${dateTime(account.lastLoginAt)} · 活跃 ${dateTime(account.lastActiveAt)} · token ${dateTime(account.refreshTokenUpdatedAt)}`),
|
||
create('span', 'muted', account.accountNameHint ? `账号提示：${account.accountNameHint}` : '无账号提示')
|
||
);
|
||
const actions = create('div', 'row-actions');
|
||
const connect = create('button', 'ghost-btn', '连接');
|
||
connect.type = 'button';
|
||
connect.disabled = account.active || !account.enabled;
|
||
connect.addEventListener('click', () => connectSteamAccount(account.id));
|
||
const edit = create('button', 'ghost-btn', '编辑');
|
||
edit.type = 'button';
|
||
edit.addEventListener('click', () => editSteamAccount(account));
|
||
const toggle = create('button', 'ghost-btn', account.enabled ? '禁用' : '启用');
|
||
toggle.type = 'button';
|
||
toggle.addEventListener('click', () => patchSteamAccount(account.id, { enabled: !account.enabled }));
|
||
const logout = create('button', 'ghost-btn', '退出');
|
||
logout.type = 'button';
|
||
logout.disabled = !account.active;
|
||
logout.addEventListener('click', () => logoutSteamAccount(account.id));
|
||
const remove = create('button', 'danger-btn', '删除');
|
||
remove.type = 'button';
|
||
remove.addEventListener('click', () => deleteSteamAccount(account.id));
|
||
actions.append(connect, edit, toggle, logout, remove);
|
||
row.append(info, actions);
|
||
container.append(row);
|
||
}
|
||
}
|
||
|
||
async function loadSteamAccounts() {
|
||
try {
|
||
const payload = await api('/api/steam/accounts');
|
||
state.steamAccounts = isRecord(payload) && Array.isArray(payload.steamAccounts) ? payload.steamAccounts as SteamAccount[] : [];
|
||
const table = document.querySelector<HTMLElement>('#steamAccountTable');
|
||
if (table) renderSteamAccountTable(table);
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
async function connectSteamAccount(id: number) {
|
||
try {
|
||
const status = await api(`/api/steam/accounts/${id}/connect`, { method: 'POST' });
|
||
updateSteamStatus(status as SteamStatus);
|
||
await loadSteamAccounts();
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
async function editSteamAccount(account: SteamAccount) {
|
||
const label = window.prompt('显示名称', account.label);
|
||
if (label === null) return;
|
||
const accountNameHint = window.prompt('账号提示', account.accountNameHint);
|
||
if (accountNameHint === null) return;
|
||
await patchSteamAccount(account.id, { label, accountNameHint });
|
||
}
|
||
|
||
async function patchSteamAccount(id: number, patch: Record<string, unknown>) {
|
||
try {
|
||
await api(`/api/steam/accounts/${id}`, {
|
||
method: 'PATCH',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(patch)
|
||
});
|
||
await loadSteamAccounts();
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
async function logoutSteamAccount(id: number) {
|
||
try {
|
||
const status = await api(`/api/steam/accounts/${id}/logout`, { method: 'POST' });
|
||
updateSteamStatus(status as SteamStatus);
|
||
await loadSteamAccounts();
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
async function deleteSteamAccount(id: number) {
|
||
if (!window.confirm('确认删除该 Steam 账户资料和授权关系？')) return;
|
||
try {
|
||
await api(`/api/steam/accounts/${id}`, { method: 'DELETE' });
|
||
await loadSteamAccounts();
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
function renderAuditView() {
|
||
const view = create('div', 'audit-view');
|
||
const filterPanel = panel('筛选', 'toolbar-panel');
|
||
const filters = create('form', 'inline-form audit-filters') as HTMLFormElement;
|
||
filters.innerHTML = `
|
||
<label>动作<input name="action" value="${state.auditAction}" placeholder="例如 user.update"></label>
|
||
<label>目标类型<input name="targetType" value="${state.auditTargetType}" placeholder="user / steam_account"></label>
|
||
<button type="submit">筛选</button>
|
||
`;
|
||
filters.addEventListener('submit', async (event) => {
|
||
event.preventDefault();
|
||
state.auditAction = formValue(filters, 'action');
|
||
state.auditTargetType = formValue(filters, 'targetType');
|
||
await loadAuditLogs();
|
||
});
|
||
filterPanel.append(filters);
|
||
const listPanel = panel('日志列表', 'list-panel');
|
||
const table = create('div', 'audit-table');
|
||
table.id = 'auditTable';
|
||
listPanel.append(table);
|
||
view.append(filterPanel, listPanel);
|
||
renderAuditTable(table);
|
||
return view;
|
||
}
|
||
|
||
function renderAuditTable(container: HTMLElement) {
|
||
clear(container);
|
||
if (!state.auditLogs.length) {
|
||
container.append(create('div', 'empty', '暂无审计日志'));
|
||
return;
|
||
}
|
||
for (const item of state.auditLogs) {
|
||
const row = create('article', 'audit-row');
|
||
row.append(
|
||
create('strong', '', `${dateTime(item.createdAt)} · ${item.action}`),
|
||
create('span', 'muted', `操作者 ${item.actorUsername || item.actorUserId || '系统'} · ${item.targetType}:${item.targetId} · ${item.ip || '无 IP'}`),
|
||
create('code', '', compactJson(item.detail))
|
||
);
|
||
container.append(row);
|
||
}
|
||
}
|
||
|
||
async function loadAuditLogs() {
|
||
try {
|
||
const params = new URLSearchParams();
|
||
if (state.auditAction) params.set('action', state.auditAction);
|
||
if (state.auditTargetType) params.set('targetType', state.auditTargetType);
|
||
const payload = await api(`/api/audit-logs${params.size ? `?${params}` : ''}`);
|
||
state.auditLogs = isRecord(payload) && Array.isArray(payload.auditLogs) ? payload.auditLogs as AuditLog[] : [];
|
||
const table = document.querySelector<HTMLElement>('#auditTable');
|
||
if (table) renderAuditTable(table);
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
function renderAccountView() {
|
||
const view = create('div', 'account-view');
|
||
const accountPanel = panel('修改密码', 'form-panel');
|
||
const form = create('form', 'stack-form narrow-form') as HTMLFormElement;
|
||
form.innerHTML = `
|
||
<label>当前密码<input name="oldPassword" type="password" autocomplete="current-password" required></label>
|
||
<label>新密码<input name="newPassword" type="password" autocomplete="new-password" minlength="8" required></label>
|
||
<button type="submit">修改密码</button>
|
||
`;
|
||
form.addEventListener('submit', async (event) => {
|
||
event.preventDefault();
|
||
try {
|
||
await api('/api/auth/password', jsonBody({
|
||
oldPassword: formValue(form, 'oldPassword'),
|
||
newPassword: formValue(form, 'newPassword')
|
||
}));
|
||
form.reset();
|
||
setFeedback('密码已修改', 'ok');
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
});
|
||
accountPanel.append(form);
|
||
view.append(accountPanel);
|
||
return view;
|
||
}
|
||
|
||
function renderChatView() {
|
||
const view = create('div', 'chat-layout');
|
||
view.id = 'chatLayout';
|
||
view.dataset.mobilePanel = state.chatPanel;
|
||
const lists = create('aside', 'chat-lists');
|
||
lists.setAttribute('aria-label', '会话列表');
|
||
|
||
const listHead = create('header', 'chat-list-head');
|
||
const titleRow = create('div', 'chat-list-title');
|
||
titleRow.append(create('h2', '', '会话'));
|
||
const newConversation = create('button', 'new-chat-btn');
|
||
newConversation.type = 'button';
|
||
newConversation.append(chatIcon('plus'), create('span', '', '新建'));
|
||
titleRow.append(newConversation);
|
||
|
||
const search = create('label', 'chat-search');
|
||
search.append(chatIcon('search'));
|
||
const searchInput = create('input') as HTMLInputElement;
|
||
searchInput.type = 'search';
|
||
searchInput.placeholder = '搜索会话';
|
||
searchInput.value = state.chatQuery;
|
||
searchInput.setAttribute('aria-label', '搜索当前分类');
|
||
searchInput.addEventListener('input', () => {
|
||
state.chatQuery = searchInput.value;
|
||
updateChatLists();
|
||
});
|
||
search.append(searchInput);
|
||
|
||
const tabList = create('div', 'chat-tabs');
|
||
tabList.setAttribute('role', 'tablist');
|
||
const tabLabels: Array<[ChatListTab, string]> = [['recent', '最近'], ['friends', '好友'], ['groups', '群组']];
|
||
for (const [tab, label] of tabLabels) {
|
||
const button = create('button', state.chatListTab === tab ? 'is-active' : '', label);
|
||
button.type = 'button';
|
||
button.dataset.chatTab = tab;
|
||
button.setAttribute('role', 'tab');
|
||
button.setAttribute('aria-controls', 'chatListSections');
|
||
button.setAttribute('aria-selected', String(state.chatListTab === tab));
|
||
button.addEventListener('click', () => {
|
||
state.chatListTab = tab;
|
||
updateChatTabs();
|
||
updateChatLists();
|
||
});
|
||
tabList.append(button);
|
||
}
|
||
listHead.append(titleRow, search, tabList);
|
||
|
||
const listBody = create('div', 'conversation-list');
|
||
listBody.id = 'chatListSections';
|
||
listBody.setAttribute('role', 'tabpanel');
|
||
renderChatListSections(listBody);
|
||
|
||
const dialog = create('dialog', 'new-chat-dialog') as HTMLDialogElement;
|
||
const targetInput = create('input') as HTMLInputElement;
|
||
targetInput.name = 'target';
|
||
targetInput.inputMode = 'numeric';
|
||
targetInput.autocomplete = 'off';
|
||
targetInput.placeholder = 'SteamID64';
|
||
targetInput.pattern = '[0-9]+';
|
||
targetInput.required = true;
|
||
const dialogHead = create('div', 'dialog-head');
|
||
dialogHead.append(create('h2', '', '新建会话'));
|
||
const closeDialog = chatIconButton('x', '关闭', 'dialog-close');
|
||
closeDialog.addEventListener('click', () => dialog.close());
|
||
dialogHead.append(closeDialog);
|
||
const openForm = create('form', 'new-chat-form') as HTMLFormElement;
|
||
const targetLabel = create('label', '', 'SteamID64');
|
||
targetLabel.append(targetInput);
|
||
const openButton = create('button', 'primary-btn', '打开会话');
|
||
openButton.type = 'submit';
|
||
openForm.append(targetLabel, openButton);
|
||
openForm.addEventListener('submit', (event) => {
|
||
event.preventDefault();
|
||
dialog.close();
|
||
openConversation(formValue(openForm, 'target'));
|
||
});
|
||
dialog.append(dialogHead, openForm);
|
||
dialog.addEventListener('click', (event) => {
|
||
if (event.target === dialog) dialog.close();
|
||
});
|
||
newConversation.addEventListener('click', () => {
|
||
targetInput.value = '';
|
||
dialog.showModal();
|
||
targetInput.focus();
|
||
});
|
||
lists.append(listHead, listBody, dialog);
|
||
|
||
const thread = create('section', 'thread');
|
||
const head = create('header', 'thread-head');
|
||
head.id = 'threadHead';
|
||
renderThreadHeader(head);
|
||
const messages = create('div', 'messages');
|
||
messages.id = 'messages';
|
||
messages.setAttribute('aria-live', 'polite');
|
||
const composer = renderComposer();
|
||
thread.append(head, messages, composer);
|
||
view.append(lists, thread);
|
||
setTimeout(() => {
|
||
if (state.activeId) void loadHistory();
|
||
else renderHistory([]);
|
||
updateChatAvailability();
|
||
}, 0);
|
||
return view;
|
||
}
|
||
|
||
function renderChatListSections(container: HTMLElement) {
|
||
clear(container);
|
||
const items = filterChatEntries(chatEntriesForActiveTab(), state.chatQuery);
|
||
if (!items.length) {
|
||
container.append(create('div', 'conversation-empty', state.chatQuery.trim() ? '没有匹配的会话' : '暂无会话'));
|
||
return;
|
||
}
|
||
for (const item of items) container.append(renderListItem(item));
|
||
}
|
||
|
||
function filterChatEntries(items: ListEntry[], query: string): ListEntry[] {
|
||
const normalized = query.trim().toLocaleLowerCase('zh-CN');
|
||
if (!normalized) return items;
|
||
return items.filter((item) => [item.name, item.id, item.preview]
|
||
.some((value) => String(value || '').toLocaleLowerCase('zh-CN').includes(normalized)));
|
||
}
|
||
|
||
function chatEntriesForActiveTab() {
|
||
if (state.chatListTab === 'friends') return state.friends;
|
||
if (state.chatListTab === 'groups') return state.groups;
|
||
return state.conversations;
|
||
}
|
||
|
||
function updateChatTabs() {
|
||
document.querySelectorAll<HTMLButtonElement>('[data-chat-tab]').forEach((button) => {
|
||
const active = button.dataset.chatTab === state.chatListTab;
|
||
button.classList.toggle('is-active', active);
|
||
button.setAttribute('aria-selected', String(active));
|
||
});
|
||
}
|
||
|
||
function updateChatLists() {
|
||
const list = document.querySelector<HTMLElement>('#chatListSections');
|
||
if (list) renderChatListSections(list);
|
||
}
|
||
|
||
function renderAvatar(item: ListEntry | null, name: string, className = 'avatar') {
|
||
const avatar = create('span', className, String(name || '?').slice(0, 1).toUpperCase());
|
||
if (item?.avatar) {
|
||
const image = document.createElement('img');
|
||
image.src = item.avatar;
|
||
image.alt = '';
|
||
avatar.replaceChildren(image);
|
||
}
|
||
if (item?.online) avatar.append(create('span', 'online-dot'));
|
||
return avatar;
|
||
}
|
||
|
||
function activeChatEntry() {
|
||
return [...state.conversations, ...state.friends, ...state.groups].find((item) => item.id === state.activeId) || null;
|
||
}
|
||
|
||
function renderThreadHeader(container: HTMLElement) {
|
||
clear(container);
|
||
const back = chatIconButton('arrow-left', '返回会话列表', 'thread-back');
|
||
back.addEventListener('click', showChatList);
|
||
const item = activeChatEntry();
|
||
const name = state.activeName || item?.name || state.activeId || '未选择会话';
|
||
const identity = create('div', 'thread-identity');
|
||
identity.append(create('strong', '', name), create('span', 'muted', state.activeId || 'Steam Chat'));
|
||
container.append(back, renderAvatar(item, name, 'thread-avatar'), identity);
|
||
}
|
||
|
||
function formatConversationTime(value: unknown) {
|
||
if (!value) return '';
|
||
const date = new Date(String(value));
|
||
if (Number.isNaN(date.getTime())) return '';
|
||
const now = new Date();
|
||
if (date.toDateString() === now.toDateString()) {
|
||
return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
|
||
}
|
||
return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' });
|
||
}
|
||
|
||
function renderListItem(item: ListEntry) {
|
||
const button = create('button', `list-item${item.id === state.activeId ? ' is-active' : ''}`);
|
||
button.type = 'button';
|
||
button.setAttribute('aria-current', item.id === state.activeId ? 'true' : 'false');
|
||
const name = item.name || item.id;
|
||
const body = create('span', 'item-body');
|
||
const title = create('span', 'item-title');
|
||
title.append(create('strong', '', name), create('time', '', formatConversationTime(item.updatedAt)));
|
||
body.append(title, create('span', 'item-preview', item.preview || item.gameName || item.clanId || item.clanid || item.id));
|
||
button.append(renderAvatar(item, name), body);
|
||
button.addEventListener('click', () => openConversation(item.id, item.name || item.id));
|
||
return button;
|
||
}
|
||
|
||
function renderComposer() {
|
||
const shell = create('footer', 'composer');
|
||
const disabledNote = create('div', 'offline-note', 'Steam 未在线，聊天发送和素材操作不可用。');
|
||
disabledNote.id = 'offlineNote';
|
||
const picker = create('div', 'picker');
|
||
picker.id = 'picker';
|
||
picker.hidden = true;
|
||
picker.setAttribute('role', 'dialog');
|
||
picker.setAttribute('aria-label', '表情和贴纸');
|
||
const row = create('div', 'compose-row');
|
||
const pickerButton = chatIconButton('smile', '表情和贴纸', 'composer-tool');
|
||
pickerButton.id = 'pickerToggle';
|
||
const pickerControls = bindFloatingPanel(pickerButton, picker);
|
||
pickerButton.addEventListener('click', () => {
|
||
attachmentControls.close();
|
||
if (picker.hidden) renderPicker(picker);
|
||
pickerControls.toggle();
|
||
});
|
||
|
||
const attachment = create('div', 'attachment-shell');
|
||
const attachmentButton = chatIconButton('paperclip', '添加图片', 'composer-tool');
|
||
attachmentButton.id = 'attachmentToggle';
|
||
const attachmentMenu = create('div', 'attachment-menu');
|
||
attachmentMenu.id = 'attachmentMenu';
|
||
attachmentMenu.hidden = true;
|
||
attachmentMenu.setAttribute('role', 'dialog');
|
||
attachmentMenu.setAttribute('aria-label', '添加图片');
|
||
const fileInput = create('input') as HTMLInputElement;
|
||
fileInput.type = 'file';
|
||
fileInput.accept = 'image/*';
|
||
fileInput.multiple = true;
|
||
fileInput.hidden = true;
|
||
const uploadButton = create('button', 'attachment-action');
|
||
uploadButton.type = 'button';
|
||
uploadButton.append(chatIcon('image'), create('span', '', '上传图片'));
|
||
const urlButton = create('button', 'attachment-action');
|
||
urlButton.type = 'button';
|
||
urlButton.append(chatIcon('link'), create('span', '', '图片 URL'));
|
||
const imageForm = create('form', 'image-url-form') as HTMLFormElement;
|
||
imageForm.hidden = true;
|
||
imageForm.innerHTML = '<input name="url" type="url" placeholder="https://..." aria-label="图片 URL" required><button type="submit">发送</button>';
|
||
const attachmentControls = bindFloatingPanel(attachmentButton, attachmentMenu);
|
||
attachmentButton.addEventListener('click', () => {
|
||
pickerControls.close();
|
||
if (attachmentMenu.hidden) imageForm.hidden = true;
|
||
attachmentControls.toggle();
|
||
});
|
||
uploadButton.addEventListener('click', () => {
|
||
attachmentControls.close();
|
||
fileInput.click();
|
||
});
|
||
urlButton.addEventListener('click', () => {
|
||
imageForm.hidden = !imageForm.hidden;
|
||
if (!imageForm.hidden) imageForm.querySelector<HTMLInputElement>('input')?.focus();
|
||
});
|
||
fileInput.addEventListener('change', () => {
|
||
sendFiles(fileInput.files);
|
||
fileInput.value = '';
|
||
});
|
||
imageForm.addEventListener('submit', (event) => {
|
||
event.preventDefault();
|
||
const url = formValue(imageForm, 'url').trim();
|
||
if (!url) return;
|
||
imageForm.reset();
|
||
attachmentControls.close();
|
||
void sendImage({ url });
|
||
});
|
||
attachmentMenu.append(uploadButton, urlButton, imageForm);
|
||
attachment.append(attachmentButton, attachmentMenu, fileInput);
|
||
|
||
const input = create('textarea') as HTMLTextAreaElement;
|
||
input.id = 'messageInput';
|
||
input.rows = 1;
|
||
input.placeholder = '发送消息';
|
||
input.setAttribute('aria-label', '消息');
|
||
input.addEventListener('input', () => resizeComposerInput(input));
|
||
input.addEventListener('keydown', (event) => {
|
||
if (event.key === 'Enter' && !event.shiftKey) {
|
||
event.preventDefault();
|
||
void sendText();
|
||
}
|
||
});
|
||
const send = chatIconButton('send', '发送消息', 'send-btn');
|
||
send.id = 'sendButton';
|
||
send.addEventListener('click', () => sendText());
|
||
row.append(pickerButton, attachment, input, send);
|
||
shell.append(disabledNote, picker, row);
|
||
shell.querySelectorAll<HTMLInputElement | HTMLButtonElement | HTMLTextAreaElement>('button, input, textarea').forEach((node) => {
|
||
node.dataset.chatControl = '';
|
||
});
|
||
return shell;
|
||
}
|
||
|
||
function bindFloatingPanel(trigger: HTMLButtonElement, panel: HTMLElement) {
|
||
const close = () => {
|
||
panel.hidden = true;
|
||
trigger.setAttribute('aria-expanded', 'false');
|
||
document.removeEventListener('pointerdown', handlePointerDown);
|
||
document.removeEventListener('keydown', handleKeyDown);
|
||
};
|
||
const handlePointerDown = (event: PointerEvent) => {
|
||
if (event.target instanceof Node && !panel.contains(event.target) && !trigger.contains(event.target)) close();
|
||
};
|
||
const handleKeyDown = (event: KeyboardEvent) => {
|
||
if (event.key === 'Escape') {
|
||
close();
|
||
trigger.focus();
|
||
}
|
||
};
|
||
const toggle = () => {
|
||
if (!panel.hidden) {
|
||
close();
|
||
return;
|
||
}
|
||
panel.hidden = false;
|
||
trigger.setAttribute('aria-expanded', 'true');
|
||
document.addEventListener('pointerdown', handlePointerDown);
|
||
document.addEventListener('keydown', handleKeyDown);
|
||
};
|
||
trigger.setAttribute('aria-haspopup', 'dialog');
|
||
trigger.setAttribute('aria-expanded', 'false');
|
||
return { close, toggle };
|
||
}
|
||
|
||
function resizeComposerInput(input: HTMLTextAreaElement) {
|
||
input.style.height = 'auto';
|
||
input.style.height = `${Math.min(input.scrollHeight, 160)}px`;
|
||
}
|
||
|
||
function updateChatAvailability() {
|
||
const unavailable = !steamOnline() || !steamAccessAllowed();
|
||
const disabled = unavailable || !state.activeId;
|
||
document.querySelectorAll<HTMLInputElement | HTMLButtonElement | HTMLTextAreaElement>('[data-chat-control]').forEach((node) => {
|
||
node.disabled = disabled;
|
||
});
|
||
const note = document.querySelector<HTMLElement>('#offlineNote');
|
||
if (note) {
|
||
note.textContent = !steamAccessAllowed() ? '当前账号未被授权访问活动 Steam 账户。' : 'Steam 未在线，聊天发送和素材操作不可用。';
|
||
note.hidden = !unavailable;
|
||
}
|
||
}
|
||
|
||
async function refreshChatData() {
|
||
if (!state.me) return;
|
||
if (!steamAccessAllowed()) {
|
||
state.conversations = [];
|
||
state.friends = [];
|
||
state.groups = [];
|
||
state.emoticons = [];
|
||
state.stickers = [];
|
||
updateChatLists();
|
||
updateChatAvailability();
|
||
return;
|
||
}
|
||
try {
|
||
const conversations = await api(`/conversations?limit=${state.historyLimit}`);
|
||
state.conversations = asListEntries(conversations);
|
||
if (steamOnline()) {
|
||
const [friends, groups, inventory] = await Promise.all([
|
||
api('/api/friends'),
|
||
api('/api/groups'),
|
||
api('/api/emoticons')
|
||
]);
|
||
state.friends = asListEntries(friends);
|
||
state.groups = asListEntries(groups);
|
||
state.emoticons = isRecord(inventory) ? asInventory(inventory.emoticons) : [];
|
||
state.stickers = isRecord(inventory) ? asInventory(inventory.stickers) : [];
|
||
} else {
|
||
state.friends = [];
|
||
state.groups = [];
|
||
state.emoticons = [];
|
||
state.stickers = [];
|
||
}
|
||
if (state.view === 'chat') {
|
||
updateChatLists();
|
||
if (!state.activeName) state.activeName = activeChatEntry()?.name || '';
|
||
const head = document.querySelector<HTMLElement>('#threadHead');
|
||
if (head) renderThreadHeader(head);
|
||
updateChatAvailability();
|
||
}
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
function openConversation(id: unknown, name = '') {
|
||
const target = String(id || '').trim();
|
||
if (!target) {
|
||
setFeedback('请输入 SteamID64', 'warn');
|
||
return;
|
||
}
|
||
const alreadyActive = target === state.activeId;
|
||
state.activeId = target;
|
||
state.activeName = name || target;
|
||
state.chatPanel = 'thread';
|
||
localStorage.setItem('steam-chat.target', state.activeId);
|
||
if (state.view !== 'chat') return;
|
||
const layout = document.querySelector<HTMLElement>('#chatLayout');
|
||
if (!layout) {
|
||
renderShell();
|
||
return;
|
||
}
|
||
syncChatPanel();
|
||
updateChatLists();
|
||
const head = document.querySelector<HTMLElement>('#threadHead');
|
||
if (head) renderThreadHeader(head);
|
||
updateChatAvailability();
|
||
if (!alreadyActive) void loadHistory();
|
||
}
|
||
|
||
function showChatList() {
|
||
state.chatPanel = 'list';
|
||
syncChatPanel();
|
||
}
|
||
|
||
function syncChatPanel() {
|
||
const layout = document.querySelector<HTMLElement>('#chatLayout');
|
||
if (layout) layout.dataset.mobilePanel = state.chatPanel;
|
||
}
|
||
|
||
async function loadHistory() {
|
||
const messages = document.querySelector<HTMLElement>('#messages');
|
||
if (!messages) return;
|
||
if (!state.activeId) {
|
||
renderHistory([]);
|
||
return;
|
||
}
|
||
const target = state.activeId;
|
||
try {
|
||
const history = await api(`/history?id=${encodeURIComponent(target)}&limit=${state.historyLimit}`);
|
||
if (target !== state.activeId) return;
|
||
renderHistory(asMessages(history));
|
||
} catch (error) {
|
||
if (target !== state.activeId) return;
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
function renderHistory(items: MessageItem[]) {
|
||
const messages = document.querySelector<HTMLElement>('#messages');
|
||
if (!messages) return;
|
||
clear(messages);
|
||
if (!items.length) {
|
||
const empty = create('div', 'thread-empty');
|
||
empty.append(create('strong', '', state.activeId ? '暂无消息' : '未选择会话'));
|
||
messages.append(empty);
|
||
return;
|
||
}
|
||
for (const item of items) messages.append(renderMessage(item));
|
||
messages.scrollTop = messages.scrollHeight;
|
||
}
|
||
|
||
function renderMessage(item: MessageItem) {
|
||
const row = create('article', `msg-row${item.echo ? ' is-self' : ''}`);
|
||
const bubble = create('div', 'bubble');
|
||
const meta = create('div', 'meta');
|
||
meta.append(create('span', '', item.name || (item.echo ? '我' : item.id)), create('span', '', formatTime(item.sentAt || item.date)));
|
||
const content = create('div', 'message-content');
|
||
const message = item.message || '';
|
||
if (item.type === 'image') {
|
||
if (isRemoteImageSource(message)) content.append(imageNode(message));
|
||
else appendMessageText(content, message || '[图片]');
|
||
} else {
|
||
appendMessageText(content, message);
|
||
}
|
||
bubble.append(meta, content);
|
||
row.append(bubble);
|
||
return row;
|
||
}
|
||
|
||
function appendMessageText(container: HTMLElement, text: string) {
|
||
const lowerText = text.toLowerCase();
|
||
let lastIndex = 0;
|
||
while (lastIndex < text.length) {
|
||
const block = findSupportedBbcodeStart(text, lastIndex);
|
||
if (!block) break;
|
||
const { start, tag } = block;
|
||
if (start > lastIndex) appendInlineMessageText(container, text.slice(lastIndex, start));
|
||
|
||
const openEnd = findBbcodeTagEnd(text, start + tag.length + 1);
|
||
if (openEnd < 0) {
|
||
appendInlineMessageText(container, text.slice(start));
|
||
return;
|
||
}
|
||
const closeTag = `[/${tag}]`;
|
||
const closeStart = lowerText.indexOf(closeTag, openEnd + 1);
|
||
if (closeStart < 0) {
|
||
appendInlineMessageText(container, text.slice(start));
|
||
return;
|
||
}
|
||
|
||
const blockEnd = closeStart + closeTag.length;
|
||
const attributes = text.slice(start + tag.length + 1, openEnd);
|
||
const body = text.slice(openEnd + 1, closeStart);
|
||
if (!appendSupportedBbcode(container, tag, attributes, body)) {
|
||
appendInlineMessageText(container, text.slice(start, blockEnd));
|
||
}
|
||
lastIndex = blockEnd;
|
||
}
|
||
if (lastIndex < text.length) appendInlineMessageText(container, text.slice(lastIndex));
|
||
}
|
||
|
||
function findSupportedBbcodeStart(text: string, fromIndex: number): { start: number; tag: SupportedBbcodeTag } | null {
|
||
supportedBbcodePattern.lastIndex = fromIndex;
|
||
const match = supportedBbcodePattern.exec(text);
|
||
const tag = match?.[1].toLowerCase() || '';
|
||
return match && isSupportedBbcodeTag(tag) ? { start: match.index, tag } : null;
|
||
}
|
||
|
||
function isSupportedBbcodeTag(value: string): value is SupportedBbcodeTag {
|
||
return supportedBbcodeTagSet.has(value);
|
||
}
|
||
|
||
function findBbcodeTagEnd(text: string, fromIndex: number): number {
|
||
let quote = '';
|
||
for (let index = fromIndex; index < text.length; index += 1) {
|
||
const character = text[index];
|
||
if (quote) {
|
||
if (character === '\\' && index + 1 < text.length) index += 1;
|
||
else if (character === quote) quote = '';
|
||
} else if (character === '"' || character === "'") {
|
||
quote = character;
|
||
} else if (character === ']') {
|
||
return index;
|
||
}
|
||
}
|
||
return -1;
|
||
}
|
||
|
||
function appendSupportedBbcode(
|
||
container: HTMLElement,
|
||
tag: SupportedBbcodeTag,
|
||
attributes: string,
|
||
body: string
|
||
): boolean {
|
||
if (tag === 'og') {
|
||
const preview = parseOpenGraphPreview(attributes);
|
||
if (!preview) return false;
|
||
container.append(openGraphNode(preview));
|
||
if (body.trim() !== preview.url) appendInlineMessageText(container, body);
|
||
return true;
|
||
}
|
||
|
||
if (tag === 'url') {
|
||
const url = parseUrlTarget(attributes, body);
|
||
if (!url) return false;
|
||
container.append(externalLink('', url, body.trim() ? body : url));
|
||
return true;
|
||
}
|
||
|
||
if (tag === 'emoticon') {
|
||
const name = body.trim();
|
||
if (attributes.trim() || !/^[A-Za-z0-9_+\-.]+$/.test(name)) return false;
|
||
container.append(emoticonNode(name));
|
||
return true;
|
||
}
|
||
|
||
if (tag === 'sticker') {
|
||
const values = parseBbcodeAttributes(attributes, new Set(['type', 'limit']));
|
||
const type = values?.type?.trim() || '';
|
||
if (!values || !type || body.trim()) return false;
|
||
container.append(stickerNode(type));
|
||
return true;
|
||
}
|
||
|
||
const preview = parseSteamImagePreview(attributes, body);
|
||
if (!preview) return false;
|
||
container.append(steamImageNode(preview));
|
||
return true;
|
||
}
|
||
|
||
function parseUrlTarget(attributes: string, body: string): string {
|
||
if (!attributes.trim()) return httpUrl(body);
|
||
const values = parseBbcodeAttributes(`href${attributes}`, new Set(['href']));
|
||
return values ? httpUrl(values.href) : '';
|
||
}
|
||
|
||
function parseOpenGraphPreview(attributes: string): OpenGraphPreview | null {
|
||
const values = parseBbcodeAttributes(attributes, new Set(['url', 'img', 'title', 'desc']), true);
|
||
if (!values) return null;
|
||
const url = httpUrl(values.url);
|
||
if (!url) return null;
|
||
return {
|
||
url,
|
||
imageUrl: httpUrl(values.img),
|
||
title: values.title || '',
|
||
description: values.desc || ''
|
||
};
|
||
}
|
||
|
||
function parseBbcodeAttributes(source: string, allowed: Set<string>, requireQuoted = false): Record<string, string> | null {
|
||
const values: Record<string, string> = {};
|
||
let index = 0;
|
||
while (index < source.length) {
|
||
while (index < source.length && /\s/.test(source[index])) index += 1;
|
||
if (index >= source.length) break;
|
||
if (!/[a-z_]/i.test(source[index])) return null;
|
||
|
||
const nameStart = index;
|
||
index += 1;
|
||
while (index < source.length && /[a-z0-9_-]/i.test(source[index])) index += 1;
|
||
const name = source.slice(nameStart, index).toLowerCase();
|
||
if (!allowed.has(name) || Object.hasOwn(values, name)) return null;
|
||
|
||
while (index < source.length && /\s/.test(source[index])) index += 1;
|
||
if (source[index] !== '=') return null;
|
||
index += 1;
|
||
while (index < source.length && /\s/.test(source[index])) index += 1;
|
||
const quote = source[index];
|
||
if (requireQuoted && quote !== '"' && quote !== "'") return null;
|
||
|
||
let value = '';
|
||
const quoted = quote === '"' || quote === "'";
|
||
if (quoted) {
|
||
index += 1;
|
||
let closed = false;
|
||
while (index < source.length) {
|
||
const character = source[index];
|
||
if (character === quote) {
|
||
closed = true;
|
||
index += 1;
|
||
break;
|
||
}
|
||
if (character === '\\' && index + 1 < source.length && (source[index + 1] === quote || source[index + 1] === '\\')) {
|
||
value += source[index + 1];
|
||
index += 2;
|
||
} else {
|
||
value += character;
|
||
index += 1;
|
||
}
|
||
}
|
||
if (!closed) return null;
|
||
} else {
|
||
const valueStart = index;
|
||
while (index < source.length && !/\s/.test(source[index])) index += 1;
|
||
value = source.slice(valueStart, index);
|
||
}
|
||
if (!value && !quoted) return null;
|
||
values[name] = value;
|
||
}
|
||
return values;
|
||
}
|
||
|
||
function parseSteamImagePreview(attributes: string, body: string): SteamImagePreview | null {
|
||
const values = parseBbcodeAttributes(attributes, new Set(['src', 'thumbnail_src', 'srcset', 'width', 'height']));
|
||
if (!values) return null;
|
||
const sourceUrl = httpUrl(values.src);
|
||
if (!sourceUrl || !imageBodyMatchesSource(body, sourceUrl)) return null;
|
||
return {
|
||
sourceUrl,
|
||
displayUrl: httpUrl(values.thumbnail_src) || sourceUrl,
|
||
sourceSet: proxyImageSourceSet(values.srcset),
|
||
width: positiveInteger(values.width),
|
||
height: positiveInteger(values.height)
|
||
};
|
||
}
|
||
|
||
function imageBodyMatchesSource(body: string, sourceUrl: string): boolean {
|
||
const trimmed = body.trim();
|
||
if (!/^\[url(?=[=\]])/i.test(trimmed)) return false;
|
||
const openEnd = findBbcodeTagEnd(trimmed, 4);
|
||
if (openEnd < 0) return false;
|
||
const closeStart = trimmed.toLowerCase().indexOf('[/url]', openEnd + 1);
|
||
if (closeStart < 0 || closeStart + '[/url]'.length !== trimmed.length) return false;
|
||
const linkBody = trimmed.slice(openEnd + 1, closeStart);
|
||
const target = parseUrlTarget(trimmed.slice(4, openEnd), linkBody);
|
||
return target === sourceUrl && linkBody.trim() === sourceUrl;
|
||
}
|
||
|
||
function positiveInteger(value: unknown): number {
|
||
const source = typeof value === 'string' ? value.trim() : '';
|
||
if (!/^[1-9]\d*$/.test(source)) return 0;
|
||
const parsed = Number(source);
|
||
return Number.isSafeInteger(parsed) ? parsed : 0;
|
||
}
|
||
|
||
function proxyImageSourceSet(value: unknown): string {
|
||
const source = typeof value === 'string' ? value.trim() : '';
|
||
if (!source) return '';
|
||
const candidates: string[] = [];
|
||
for (const candidate of source.split(',')) {
|
||
const parts = candidate.trim().split(/\s+/);
|
||
if (!parts[0] || parts.length > 2) return '';
|
||
const url = httpUrl(parts[0]);
|
||
const descriptor = parts[1] || '';
|
||
if (!url || (descriptor && !validSourceSetDescriptor(descriptor))) return '';
|
||
candidates.push(`${proxiedImageUrl(url)}${descriptor ? ` ${descriptor}` : ''}`);
|
||
}
|
||
return candidates.join(', ');
|
||
}
|
||
|
||
function validSourceSetDescriptor(value: string): boolean {
|
||
if (/^[1-9]\d*w$/.test(value)) return true;
|
||
const match = value.match(/^(\d+(?:\.\d+)?|\.\d+)x$/);
|
||
return Boolean(match && Number(match[1]) > 0);
|
||
}
|
||
|
||
function httpUrl(value: unknown): string {
|
||
const source = typeof value === 'string' ? value.trim() : '';
|
||
if (!source) return '';
|
||
try {
|
||
const parsed = new URL(source);
|
||
return parsed.protocol === 'http:' || parsed.protocol === 'https:' ? source : '';
|
||
} catch (_) {
|
||
return '';
|
||
}
|
||
}
|
||
|
||
function proxiedImageUrl(url: string): string {
|
||
return `/proxy/image?url=${encodeURIComponent(url)}`;
|
||
}
|
||
|
||
function externalLink(className: string, url: string, text = '') {
|
||
const link = create('a', className, text);
|
||
link.href = url;
|
||
link.target = '_blank';
|
||
link.rel = 'noopener noreferrer';
|
||
return link;
|
||
}
|
||
|
||
function openGraphNode(preview: OpenGraphPreview) {
|
||
const card = create('section', 'og-card');
|
||
const main = create('div', 'og-main');
|
||
|
||
if (preview.imageUrl) {
|
||
const imageLink = externalLink('og-image-link', preview.url);
|
||
const image = document.createElement('img');
|
||
image.className = 'og-image';
|
||
image.src = proxiedImageUrl(preview.imageUrl);
|
||
image.alt = preview.title || '链接预览';
|
||
image.loading = 'lazy';
|
||
image.addEventListener('error', () => {
|
||
imageLink.hidden = true;
|
||
});
|
||
imageLink.append(image);
|
||
main.append(imageLink);
|
||
}
|
||
|
||
const body = create('div', 'og-body');
|
||
if (preview.title) body.append(externalLink('og-title', preview.url, preview.title));
|
||
if (preview.description) body.append(create('p', 'og-description', preview.description));
|
||
main.append(body);
|
||
|
||
const footer = create('div', 'og-footer');
|
||
const domain = externalLink('og-domain', preview.url, new URL(preview.url).hostname.replace(/^www\./i, '').toUpperCase());
|
||
domain.title = preview.url;
|
||
const copyButton = create('button', 'og-copy-button');
|
||
copyButton.type = 'button';
|
||
copyButton.title = '复制链接';
|
||
copyButton.setAttribute('aria-label', '复制链接');
|
||
copyButton.append(create('span', 'og-copy-icon'));
|
||
copyButton.addEventListener('click', async () => {
|
||
try {
|
||
await navigator.clipboard.writeText(preview.url);
|
||
copyButton.title = '已复制';
|
||
setTimeout(() => {
|
||
copyButton.title = '复制链接';
|
||
}, 1500);
|
||
} catch (_) {
|
||
setFeedback('复制链接失败', 'error');
|
||
}
|
||
});
|
||
footer.append(domain, copyButton);
|
||
card.append(main, footer);
|
||
return card;
|
||
}
|
||
|
||
function emoticonNode(name: string) {
|
||
const image = document.createElement('img');
|
||
image.className = 'emoticon';
|
||
image.src = `https://community.cloudflare.steamstatic.com/economy/emoticon/${encodeURIComponent(name)}`;
|
||
image.alt = `:${name}:`;
|
||
return image;
|
||
}
|
||
|
||
function stickerNode(type: string) {
|
||
const image = document.createElement('img');
|
||
image.className = 'sticker';
|
||
image.src = `/proxy/sticker/${encodeURIComponent(type)}`;
|
||
image.alt = type;
|
||
return image;
|
||
}
|
||
|
||
function steamImageNode(preview: SteamImagePreview) {
|
||
const shell = create('span', 'bbcode-image-shell');
|
||
const button = create('button', 'image-button bbcode-image-button');
|
||
button.type = 'button';
|
||
button.title = '查看大图';
|
||
button.setAttribute('aria-label', '查看大图');
|
||
if (preview.width && preview.height) {
|
||
button.style.aspectRatio = `${preview.width} / ${preview.height}`;
|
||
button.style.width = `${Math.max(1, Math.min(420, Math.floor((420 * preview.width) / preview.height)))}px`;
|
||
}
|
||
|
||
const image = document.createElement('img');
|
||
image.className = 'bbcode-image';
|
||
image.src = proxiedImageUrl(preview.displayUrl);
|
||
if (preview.sourceSet) image.srcset = preview.sourceSet;
|
||
image.alt = '图片';
|
||
image.loading = 'lazy';
|
||
image.addEventListener('error', () => {
|
||
const fallback = externalLink('bbcode-image-fallback', preview.sourceUrl, preview.sourceUrl);
|
||
fallback.title = '图片加载失败';
|
||
shell.replaceChildren(fallback);
|
||
});
|
||
button.addEventListener('click', () => openLightbox(proxiedImageUrl(preview.sourceUrl)));
|
||
button.append(image);
|
||
shell.append(button);
|
||
return shell;
|
||
}
|
||
|
||
function appendInlineMessageText(container: HTMLElement, text: string) {
|
||
const pattern = /:([A-Za-z0-9_+\-.]+):|(https?:\/\/[^\s<>"'\[\]]+)/gi;
|
||
let lastIndex = 0;
|
||
for (const match of text.matchAll(pattern)) {
|
||
if (match.index > lastIndex) container.append(document.createTextNode(text.slice(lastIndex, match.index)));
|
||
if (match[1]) {
|
||
container.append(emoticonNode(match[1]));
|
||
} else if (match[2]) {
|
||
container.append(externalLink('', match[2], match[2]));
|
||
}
|
||
lastIndex = match.index + match[0].length;
|
||
}
|
||
if (lastIndex < text.length) container.append(document.createTextNode(text.slice(lastIndex)));
|
||
}
|
||
|
||
function imageNode(sourceUrl: string) {
|
||
const shell = create('button', 'image-button', '加载图片');
|
||
shell.type = 'button';
|
||
const image = document.createElement('img');
|
||
image.src = proxiedImageUrl(sourceUrl);
|
||
image.alt = '图片';
|
||
image.onload = () => shell.replaceChildren(image);
|
||
image.onerror = () => shell.textContent = '图片加载失败';
|
||
shell.addEventListener('click', () => openLightbox(image.src));
|
||
return shell;
|
||
}
|
||
|
||
function isRemoteImageSource(value: unknown): value is string {
|
||
return typeof value === 'string' && /^https?:\/\//i.test(value);
|
||
}
|
||
|
||
function formatTime(value: unknown): string {
|
||
if (!value) return '';
|
||
const date = new Date(String(value).replace(' ', 'T'));
|
||
if (Number.isNaN(date.getTime())) return String(value);
|
||
return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
|
||
}
|
||
|
||
function activeIdOrWarn() {
|
||
if (state.activeId) return state.activeId;
|
||
setFeedback('请选择会话', 'warn');
|
||
return '';
|
||
}
|
||
|
||
async function sendText() {
|
||
const id = activeIdOrWarn();
|
||
const input = document.querySelector<HTMLTextAreaElement>('#messageInput');
|
||
const msg = input?.value.trim() || '';
|
||
if (!id || !msg) return;
|
||
try {
|
||
await api('/message', jsonBody({ id, msg }));
|
||
if (input) {
|
||
input.value = '';
|
||
resizeComposerInput(input);
|
||
}
|
||
await loadHistory();
|
||
setFeedback('已发送', 'ok');
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
async function sendImage(payload: Record<string, string>) {
|
||
const id = activeIdOrWarn();
|
||
if (!id) return;
|
||
try {
|
||
await api('/image', jsonBody({ id, ...payload }));
|
||
await loadHistory();
|
||
setFeedback('图片已发送', 'ok');
|
||
} catch (error) {
|
||
setFeedback(errorMessage(error), 'error');
|
||
}
|
||
}
|
||
|
||
function sendFiles(files: FileList | null) {
|
||
if (!files) return;
|
||
[...files].filter((file) => file.type.startsWith('image/')).forEach((file) => {
|
||
const reader = new FileReader();
|
||
reader.onload = () => {
|
||
if (typeof reader.result === 'string') void sendImage({ img: reader.result });
|
||
};
|
||
reader.onerror = () => setFeedback('读取图片失败', 'error');
|
||
reader.readAsDataURL(file);
|
||
});
|
||
}
|
||
|
||
function renderPicker(container: HTMLElement) {
|
||
clear(container);
|
||
const tabs = create('div', 'picker-tabs');
|
||
const emoticons = create('button', '', '表情');
|
||
const stickers = create('button', '', '贴纸');
|
||
const grid = create('div', 'picker-grid');
|
||
function fill(type: 'emoticons' | 'stickers') {
|
||
clear(grid);
|
||
const source = (type === 'emoticons' ? state.emoticons : state.stickers).slice(0, 160);
|
||
if (!source.length) {
|
||
grid.append(create('div', 'empty small', '暂无素材'));
|
||
return;
|
||
}
|
||
for (const item of source) {
|
||
const name = String(item.name || '');
|
||
if (!name) continue;
|
||
const button = create('button');
|
||
button.type = 'button';
|
||
const image = document.createElement('img');
|
||
image.src = type === 'emoticons'
|
||
? `https://community.cloudflare.steamstatic.com/economy/emoticon/${encodeURIComponent(name)}`
|
||
: `/proxy/sticker/${encodeURIComponent(name)}`;
|
||
image.alt = name;
|
||
button.append(image, create('span', '', name));
|
||
button.addEventListener('click', () => {
|
||
const input = document.querySelector<HTMLTextAreaElement>('#messageInput');
|
||
if (!input) return;
|
||
input.value += type === 'emoticons' ? `:${name}:` : `[sticker type="${name}" limit="0"][/sticker]`;
|
||
input.focus();
|
||
});
|
||
grid.append(button);
|
||
}
|
||
}
|
||
emoticons.type = 'button';
|
||
stickers.type = 'button';
|
||
emoticons.addEventListener('click', () => fill('emoticons'));
|
||
stickers.addEventListener('click', () => fill('stickers'));
|
||
tabs.append(emoticons, stickers);
|
||
container.append(tabs, grid);
|
||
fill('emoticons');
|
||
}
|
||
|
||
function ensureWebSocket() {
|
||
if (!state.me || !steamAccessAllowed() || state.ws || state.reconnectTimer) return;
|
||
const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||
const ws = new WebSocket(`${protocol}//${location.host}${state.wsPath}`);
|
||
state.ws = ws;
|
||
ws.addEventListener('message', (event) => {
|
||
let payload: WsPayload;
|
||
try {
|
||
const parsed: unknown = JSON.parse(String(event.data));
|
||
payload = isRecord(parsed) ? parsed : {};
|
||
} catch {
|
||
return;
|
||
}
|
||
if (payload.type === 'message' || payload.type === 'image') {
|
||
const item: MessageItem = {
|
||
...payload,
|
||
id: String(payload.id || ''),
|
||
name: typeof payload.name === 'string' ? payload.name : undefined,
|
||
message: typeof payload.message === 'string' ? payload.message : undefined,
|
||
ordinal: typeof payload.ordinal === 'string' || typeof payload.ordinal === 'number' ? payload.ordinal : 0,
|
||
echo: Boolean(payload.echo),
|
||
date: typeof payload.date === 'string' ? payload.date : undefined,
|
||
sentAt: typeof payload.sentAt === 'string' ? payload.sentAt : undefined
|
||
};
|
||
if (item.id === state.activeId) {
|
||
const messages = document.querySelector<HTMLElement>('#messages');
|
||
messages?.querySelector('.thread-empty')?.remove();
|
||
messages?.append(renderMessage(item));
|
||
if (messages) messages.scrollTop = messages.scrollHeight;
|
||
}
|
||
}
|
||
});
|
||
ws.addEventListener('close', () => {
|
||
state.ws = null;
|
||
if (state.me) {
|
||
state.reconnectTimer = setTimeout(() => {
|
||
state.reconnectTimer = null;
|
||
ensureWebSocket();
|
||
}, 1500);
|
||
}
|
||
});
|
||
}
|
||
|
||
function stopWebSocket() {
|
||
if (state.reconnectTimer) clearTimeout(state.reconnectTimer);
|
||
state.reconnectTimer = null;
|
||
if (state.ws) state.ws.close();
|
||
state.ws = null;
|
||
}
|
||
|
||
function startStatusPolling() {
|
||
if (state.statusTimer || !state.me) return;
|
||
state.statusTimer = setInterval(async () => {
|
||
try {
|
||
const status = await api('/api/steam/status');
|
||
const previousSignature = steamStatusSignature();
|
||
const wasOnline = steamOnline();
|
||
updateSteamStatus(status as SteamStatus);
|
||
if (state.view === 'steam' && steamStatusSignature() !== previousSignature) {
|
||
renderShell();
|
||
return;
|
||
}
|
||
if (state.view === 'chat' && steamOnline() !== wasOnline) await refreshChatData();
|
||
} catch (_) {
|
||
// Authentication errors are handled by api().
|
||
}
|
||
}, 3000);
|
||
}
|
||
|
||
function stopStatusPolling() {
|
||
if (state.statusTimer) clearInterval(state.statusTimer);
|
||
state.statusTimer = null;
|
||
}
|
||
|
||
async function logoutApp() {
|
||
await api('/api/auth/logout', { method: 'POST' }).catch((): null => null);
|
||
stopStatusPolling();
|
||
stopWebSocket();
|
||
state.me = null;
|
||
state.permissions = [];
|
||
renderLogin();
|
||
}
|
||
|
||
async function bootstrap() {
|
||
const mePayload = await api('/api/auth/me') as MeResponse;
|
||
state.needsSetup = Boolean(mePayload.needsSetup);
|
||
state.me = mePayload.user || null;
|
||
state.permissions = Array.isArray(mePayload.permissions) ? mePayload.permissions : [];
|
||
updateSteamStatus(mePayload.steam || defaultSteamStatus);
|
||
if (state.needsSetup) {
|
||
renderSetup();
|
||
return;
|
||
}
|
||
if (!state.me) {
|
||
renderLogin();
|
||
return;
|
||
}
|
||
const [status, config] = await Promise.all([
|
||
api('/api/steam/status').catch((): SteamStatus => state.steam),
|
||
api('/api/config').catch(() => ({ wsPath: '/ws' }))
|
||
]);
|
||
if (isRecord(status)) updateSteamStatus(status as SteamStatus);
|
||
if (isRecord(config) && typeof config.wsPath === 'string') state.wsPath = config.wsPath;
|
||
renderShell();
|
||
}
|
||
|
||
function openLightbox(src: string) {
|
||
const box = document.querySelector<HTMLElement>('#lightbox');
|
||
const image = document.querySelector<HTMLImageElement>('#lightboxImage');
|
||
if (!box || !image) return;
|
||
image.src = src;
|
||
box.hidden = false;
|
||
}
|
||
|
||
document.querySelector('#lightboxClose')?.addEventListener('click', () => {
|
||
const box = document.querySelector<HTMLElement>('#lightbox');
|
||
const image = document.querySelector<HTMLImageElement>('#lightboxImage');
|
||
if (box) box.hidden = true;
|
||
if (image) image.src = '';
|
||
});
|
||
|
||
document.addEventListener('dragover', (event) => {
|
||
if (state.view === 'chat' && steamOnline() && steamAccessAllowed() && state.activeId) event.preventDefault();
|
||
});
|
||
|
||
document.addEventListener('drop', (event) => {
|
||
if (state.view !== 'chat' || !steamOnline() || !steamAccessAllowed() || !state.activeId) return;
|
||
const files = event.dataTransfer?.files || null;
|
||
if (files && files.length) {
|
||
event.preventDefault();
|
||
sendFiles(files);
|
||
}
|
||
});
|
||
|
||
bootstrap().catch((error) => {
|
||
authPage('启动失败', errorMessage(error), create('div'));
|
||
});
|