Bairan.Zhang/TalkingQ_Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
“yuanmengy”
2026-06-10 17:31:01 +08:00
parent a2e7fbdba3
commit 69785c214f
14 changed files with 20262 additions and 5121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

862
scripts/privacy.js
View File

@@ -3,22 +3,139 @@
*/
registerPage('privacy', function(container) {
container.innerHTML = `
<div class="page-header">
<div>
<div class="page-title">隐私保护 (PII)</div>
<div class="page-desc">个人信息脱敏、COPPA/GDPR 合规配置与数据保留策略</div>
const DEFAULT_PRIVACY_STATE = {
activeTab: 'pii',
piiGlobalEnabled: true,
piiRules: [
{ id: 'name', name: '姓名', type: 'person_name', mask: '***', example: '张三 → ***', enabled: true, system: true },
{ id: 'phone', name: '手机号', type: 'phone', mask: '138****8888', example: '13812348888 → 138****8888', enabled: true, system: true },
{ id: 'ip', name: 'IP 地址', type: 'ip', mask: '192.168.x.x', example: '192.168.1.10 → 192.168.x.x', enabled: true, system: true },
{ id: 'idcard', name: '身份证号', type: 'id_card', mask: '330102****1234', example: '330102199001011234 → 330102****1234', enabled: true, system: true },
{ id: 'address', name: '家庭住址', type: 'address', mask: '[地址已脱敏]', example: '北京市朝阳区某小区 → [地址已脱敏]', enabled: true, system: true },
{ id: 'bankcard', name: '银行卡号', type: 'bank_card', mask: '6222****1234', example: '6222020202021234 → 6222****1234', enabled: false, system: true },
],
coppaItems: [
{ id: 'age', label: '用户年龄验证', enabled: true },
{ id: 'parent-consent', label: '家长知情同意收集', enabled: true },
{ id: 'location', label: '禁止收集13岁以下精确位置', enabled: true },
{ id: 'tracking', label: '行为追踪限制', enabled: true },
{ id: 'minimize', label: '数据最小化原则', enabled: true },
],
gdprItems: [
{ id: 'notice', label: '知情权（提供隐私政策）', enabled: true },
{ id: 'access', label: '访问权（数据导出）', enabled: true },
{ id: 'rectify', label: '更正权', enabled: true },
{ id: 'erase', label: '删除权（被遗忘权）', enabled: true },
{ id: 'portable', label: '数据可携带权', enabled: false },
],
dataRequests: [
{ id: 'DSR-2026-001', subject: 'parent-a@example.com', company: '智慧星科技', type: '访问数据', status: 'pending', createdAt: '2026-05-12 13:20', result: '' },
{ id: 'DSR-2026-002', subject: 'child-user-003', company: '未来玩具厂', type: '删除数据', status: 'processed', createdAt: '2026-05-11 10:05', result: '已删除关联会话与设备行为数据' },
{ id: 'DSR-2026-003', subject: 'privacy@partner.com', company: '童趣电子', type: '更正数据', status: 'rejected', createdAt: '2026-05-10 16:45', result: '未能验证请求人身份' },
],
retentionPolicies: [
{ id: 'sessions', type: '对话记录 (Sessions)', period: 180, unit: '天' },
{ id: 'device-logs', type: '设备日志 (Device Logs)', period: 90, unit: '天' },
{ id: 'badcase', type: 'Bad Case 数据', period: 365, unit: '天' },
{ id: 'ota', type: 'OTA 升级记录', period: 365, unit: '天' },
{ id: 'audit', type: '审计日志 (Audit Logs)', period: 730, unit: '天' },
{ id: 'pii-logs', type: 'PII 脱敏日志', period: 30, unit: '天' },
],
lastCleanup: '',
};
const state = window.__privacyState || clonePrivacyState(DEFAULT_PRIVACY_STATE);
window.__privacyState = state;
function clonePrivacyState(value) {
return JSON.parse(JSON.stringify(value));
}
function escapeHtml(value) {
return String(value ?? '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
function getNowText() {
const now = new Date();
const pad = value => String(value).padStart(2, '0');
return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}`;
}
async function callPrivacyApi(method, ...args) {
try {
if (typeof API !== 'undefined' && API.privacy?.[method]) {
await API.privacy[method](...args);
}
} catch (error) {
console.warn(`Mock privacy API ${method} failed:`, error);
}
}
function getRequestStatusMeta(status) {
if (status === 'processed') return { label: '已处理', badge: 'badge-success' };
if (status === 'rejected') return { label: '已拒绝', badge: 'badge-danger' };
return { label: '待处理', badge: 'badge-warning' };
}
function getComplianceStatus(items) {
return items.every(item => item.enabled)
? { label: '已合规', badge: 'badge-success', text: '所有必要控制项均已开启' }
: { label: '需关注', badge: 'badge-warning', text: '仍有控制项处于关闭状态' };
}
function maskText(text) {
let result = String(text || '');
const enabledRules = state.piiGlobalEnabled ? state.piiRules.filter(rule => rule.enabled) : [];
enabledRules.forEach(rule => {
if (rule.type === 'phone') result = result.replace(/1[3-9]\d{9}/g, '1**********');
if (rule.type === 'ip') result = result.replace(/\b(?:\d{1,3}\.){3}\d{1,3}\b/g, '***.***.x.x');
if (rule.type === 'id_card') result = result.replace(/\b\d{6}(?:19|20)\d{2}\d{2}\d{2}\d{3}[\dXx]\b/g, '****** ******** ****');
if (rule.type === 'bank_card') result = result.replace(/\b\d{12,19}\b/g, '**** **** **** ****');
if (rule.type === 'email') result = result.replace(/[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/gi, '[邮箱已脱敏]');
if (rule.type === 'address') result = result.replace(/[\u4e00-\u9fa5]{2,}(省|市|区|县|镇|街道|小区)[\u4e00-\u9fa5\d号栋单元室-]*/g, '[地址已脱敏]');
if (rule.type === 'person_name') result = result.replace(/([\u4e00-\u9fa5]{2,4})(?=说|的|，|,|。|\s|$)/g, '***');
if (rule.type === 'custom' && rule.pattern) {
try {
result = result.replace(new RegExp(rule.pattern, 'g'), rule.mask || '[已脱敏]');
} catch (error) {
console.warn('Invalid custom PII pattern', error);
}
}
});
return result;
}
function renderPage() {
container.innerHTML = `
<div class="page-header">
<div>
<div class="page-title">隐私保护 (PII)</div>
<div class="page-desc">个人信息脱敏、COPPA/GDPR 合规配置与数据保留策略</div>
</div>
</div>
</div>
<div class="tabs" id="privacyTabs">
<div class="tab-item active" data-tab="pii">PII 脱敏规则</div>
<div class="tab-item" data-tab="gdpr">GDPR/COPPA</div>
<div class="tab-item" data-tab="retention">数据保留</div>
</div>
<div class="tabs" id="privacyTabs">
<div class="tab-item ${state.activeTab === 'pii' ? 'active' : ''}" data-tab="pii">PII 脱敏规则</div>
<div class="tab-item ${state.activeTab === 'gdpr' ? 'active' : ''}" data-tab="gdpr">GDPR/COPPA</div>
<div class="tab-item ${state.activeTab === 'retention' ? 'active' : ''}" data-tab="retention">数据保留</div>
</div>
<!-- PII Tab -->
<div class="tab-content active" id="tab-pii">
<div class="tab-content ${state.activeTab === 'pii' ? 'active' : ''}" id="tab-pii">${renderPiiTab()}</div>
<div class="tab-content ${state.activeTab === 'gdpr' ? 'active' : ''}" id="tab-gdpr">${renderComplianceTab()}</div>
<div class="tab-content ${state.activeTab === 'retention' ? 'active' : ''}" id="tab-retention">${renderRetentionTab()}</div>
`;
bindEvents();
lucide.createIcons({ elements: [container] });
}
function renderPiiTab() {
return `
<div class="card" style="margin-bottom:16px">
<div class="card-header">
<div>
@@ -28,29 +145,34 @@ registerPage('privacy', function(container) {
<div style="display:flex;align-items:center;gap:8px">
<span style="font-size:13px;color:var(--text-muted)">全局启用</span>
<label class="toggle-switch">
<input type="checkbox" checked>
<input type="checkbox" id="piiGlobalToggle" ${state.piiGlobalEnabled ? 'checked' : ''}>
<span class="toggle-track"></span>
</label>
</div>
</div>
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px">
${[
{ name: '姓名', example: '张三 → ***', enabled: true },
{ name: '手机号', example: '138****8888', enabled: true },
{ name: 'IP 地址', example: '192.168.x.x', enabled: true },
{ name: '身份证号', example: '330102****1234', enabled: true },
{ name: '家庭住址', example: '北京市朝阳区*** → [地址已脱敏]', enabled: true },
{ name: '银行卡号', example: '6222****1234', enabled: false },
].map(r => `
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm)">
<div>
<div style="font-weight:500;font-size:13px">${r.name}</div>
<div style="font-size:12px;color:var(--text-muted);font-family:monospace">${r.example}</div>
<div style="display:flex;justify-content:flex-end;gap:8px;margin-bottom:14px">
<button class="btn btn-outline btn-sm" id="testPiiBtn"><i data-lucide="scan-text"></i> 测试脱敏</button>
<button class="btn btn-outline btn-sm" id="addPiiRuleBtn"><i data-lucide="plus"></i> 新增规则</button>
<button class="btn btn-primary btn-sm" id="savePiiBtn"><i data-lucide="save"></i> 保存配置</button>
</div>
<div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px">
${state.piiRules.map(rule => `
<div style="display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm)">
<div style="min-width:0">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
<span style="font-weight:600;font-size:13px">${escapeHtml(rule.name)}</span>
${rule.system ? '<span class="badge badge-default" style="font-size:11px">系统</span>' : '<span class="badge badge-info" style="font-size:11px">自定义</span>'}
</div>
<div style="font-size:12px;color:var(--text-muted);font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${escapeHtml(rule.example)}</div>
</div>
<div style="display:flex;align-items:center;gap:6px">
<label class="toggle-switch">
<input type="checkbox" class="pii-rule-toggle" data-rule-id="${escapeHtml(rule.id)}" ${rule.enabled ? 'checked' : ''}>
<span class="toggle-track"></span>
</label>
<button class="btn btn-ghost btn-sm" data-tooltip="编辑规则" onclick="editPiiRule('${escapeHtml(rule.id)}')"><i data-lucide="edit-2"></i></button>
<button class="btn btn-ghost btn-sm" style="color:var(--danger)" data-tooltip="删除规则" onclick="deletePiiRule('${escapeHtml(rule.id)}')"><i data-lucide="trash-2"></i></button>
</div>
<label class="toggle-switch">
<input type="checkbox" ${r.enabled ? 'checked' : ''}>
<span class="toggle-track"></span>
</label>
</div>
`).join('')}
</div>
@@ -58,256 +180,506 @@ registerPage('privacy', function(container) {
<div class="api-note">
<i data-lucide="info"></i>
<div>PII 规则接口：<code>GET /api/v1/privacy/pii-rules</code> · <code>PUT /api/v1/privacy/pii-rules/{id}</code>。
脱敏事件通过 <code>pii_detected</code> / <code>pii_masked</code> 事件上报。</div>
<div>PII 规则接口预留：<code>GET /api/v1/privacy/pii-rules</code> · <code>POST /api/v1/privacy/pii-rules</code> · <code>PUT /api/v1/privacy/pii-rules/{id}</code> · <code>DELETE /api/v1/privacy/pii-rules/{id}</code>。</div>
</div>
</div>
`;
}
<!-- GDPR Tab -->
<div class="tab-content" id="tab-gdpr">
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:16px">
function renderComplianceToggleList(items, group) {
return items.map(item => `
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
<span style="font-size:13px">${escapeHtml(item.label)}</span>
<label class="toggle-switch">
<input type="checkbox" class="compliance-toggle" data-group="${group}" data-item-id="${escapeHtml(item.id)}" ${item.enabled ? 'checked' : ''}>
<span class="toggle-track"></span>
</label>
</div>
`).join('');
}
function renderComplianceTab() {
const coppaStatus = getComplianceStatus(state.coppaItems);
const gdprStatus = getComplianceStatus(state.gdprItems);
return `
<div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px">
<div class="card">
<div class="card-title" style="margin-bottom:12px">COPPA 合规（儿童隐私保护）</div>
${[
{ label: '用户年龄验证', enabled: true },
{ label: '家长知情同意收集', enabled: true },
{ label: '禁止收集13岁以下精确位置', enabled: true },
{ label: '行为追踪限制', enabled: true },
{ label: '数据最小化原则', enabled: true },
].map(i => `
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
<span style="font-size:13px">${i.label}</span>
<label class="toggle-switch"><input type="checkbox" ${i.enabled ? 'checked' : ''}><span class="toggle-track"></span></label>
</div>
`).join('')}
<div style="margin-top:12px;padding:10px;background:var(--primary-bg);border-radius:var(--radius-sm);font-size:12px;color:var(--primary)">
✅ COPPA 合规状态：已合规
${renderComplianceToggleList(state.coppaItems, 'coppa')}
<div style="margin-top:12px;padding:10px;border-radius:var(--radius-sm);font-size:12px" class="badge ${coppaStatus.badge}">
COPPA 合规状态：${coppaStatus.label} · ${coppaStatus.text}
</div>
</div>
<div class="card">
<div class="card-title" style="margin-bottom:12px">GDPR 数据权利</div>
${[
{ label: '知情权（提供隐私政策）', enabled: true },
{ label: '访问权（数据导出）', enabled: true },
{ label: '更正权', enabled: true },
{ label: '删除权（被遗忘权）', enabled: true },
{ label: '数据可携带权', enabled: false },
].map(i => `
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
<span style="font-size:13px">${i.label}</span>
<label class="toggle-switch"><input type="checkbox" ${i.enabled ? 'checked' : ''}><span class="toggle-track"></span></label>
</div>
`).join('')}
<div style="margin-top:12px;padding:10px;background:#fffbe6;border-radius:var(--radius-sm);font-size:12px;color:var(--warning)">
⚠️ 数据可携带权尚未完整实现
${renderComplianceToggleList(state.gdprItems, 'gdpr')}
<div style="margin-top:12px;padding:10px;border-radius:var(--radius-sm);font-size:12px" class="badge ${gdprStatus.badge}">
GDPR 合规状态：${gdprStatus.label} · ${gdprStatus.text}
</div>
</div>
</div>
</div>
<!-- Retention Tab -->
<div class="tab-content" id="tab-retention">
<div class="card">
<div class="card-title" style="margin-bottom:16px">数据保留策略</div>
${[
{ type: '对话记录 (Sessions)', period: '180', unit: '天' },
{ type: '设备日志 (Device Logs)', period: '90', unit: '天' },
{ type: 'Bad Case 数据', period: '365', unit: '天' },
{ type: 'OTA 升级记录', period: '365', unit: '天' },
{ type: '审计日志 (Audit Logs)', period: '730', unit: '天' },
{ type: 'PII 脱敏日志', period: '30', unit: '天' },
].map(p => `
<div style="display:flex;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--border)">
<span style="flex:1;font-size:13px">${p.type}</span>
<input type="number" class="form-control" value="${p.period}" style="width:80px">
<span style="font-size:13px;color:var(--text-muted)">${p.unit}</span>
</div>
`).join('')}
<button class="btn btn-primary" style="margin-top:16px" onclick="Toast.success('数据保留策略已保存')">
<i data-lucide="save"></i> 保存策略
</button>
<div style="display:flex;justify-content:flex-end;gap:8px;margin-bottom:16px">
<button class="btn btn-outline btn-sm" id="runComplianceCheckBtn"><i data-lucide="shield-check"></i> 运行合规检查</button>
<button class="btn btn-primary btn-sm" id="saveComplianceBtn"><i data-lucide="save"></i> 保存合规配置</button>
</div>
</div>
`;
lucide.createIcons({ elements: [container] });
container.querySelectorAll('#privacyTabs .tab-item').forEach(tab => {
tab.addEventListener('click', () => {
container.querySelectorAll('#privacyTabs .tab-item').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
container.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
container.querySelector(`#tab-${tab.dataset.tab}`)?.classList.add('active');
});
});
});
/**
* TalkingQ Platform - Settings Page
*/
registerPage('settings', function(container) {
container.innerHTML = `
<div class="page-header">
<div class="page-title">系统设置</div>
<div class="page-desc">租户信息、API Key 管理、通知配置与集成</div>
</div>
<div class="tabs" id="settingsTabs">
<div class="tab-item active" data-tab="tenant">租户信息</div>
<div class="tab-item" data-tab="apikeys">API Keys</div>
<div class="tab-item" data-tab="notify">通知配置</div>
<div class="tab-item" data-tab="integrations">集成</div>
</div>
<div class="tab-content active" id="stab-tenant">
<div class="card" style="max-width:600px">
<div class="card-title" style="margin-bottom:20px">租户基本信息</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">租户名称</label>
<input type="text" class="form-control" value="TalkingQ 默认租户">
<div class="card" style="padding:0;overflow:hidden">
<div style="padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px">
<div>
<div class="card-title">数据主体请求</div>
<div class="card-subtitle">处理访问、更正、删除等 GDPR 数据权利请求</div>
</div>
<div class="form-group">
<label class="form-label">租户 ID</label>
<input type="text" class="form-control" value="tenant-20240501" readonly style="background:#fafafa;color:var(--text-muted)">
</div>
</div>
<div class="form-group">
<label class="form-label">联系邮箱</label>
<input type="email" class="form-control" value="admin@talkingq.com">
</div>
<div class="form-group">
<label class="form-label">时区</label>
<select class="form-control">
<option selected>Asia/Shanghai (UTC+8)</option>
<option>UTC</option>
</select>
</div>
<button class="btn btn-primary" onclick="Toast.success('租户信息已保存')">
<i data-lucide="save"></i> 保存
</button>
</div>
</div>
<div class="tab-content" id="stab-apikeys">
<div class="card">
<div style="display:flex;justify-content:space-between;margin-bottom:16px">
<div class="card-title">API Keys</div>
<button class="btn btn-primary btn-sm" id="createKeyBtn">
<i data-lucide="plus"></i> 创建 API Key
</button>
<button class="btn btn-outline btn-sm" id="addDataRequestBtn"><i data-lucide="plus"></i> 新增请求</button>
</div>
<div class="table-wrapper">
<table>
<thead><tr><th>名称</th><th>Key（部分）</th><th>权限</th><th>创建时间</th><th>最后使用</th><th>操作</th></tr></thead>
<thead><tr><th>请求 ID</th><th>请求人</th><th>公司</th><th>类型</th><th>状态</th><th>创建时间</th><th>操作</th></tr></thead>
<tbody>
${[
{ name: 'Backend Service Key', key: 'tq_live_****a3f2', scope: '全部权限', created: '2026-01-01', used: '2分钟前' },
{ name: 'Analytics Read-only', key: 'tq_ro_****c8e1', scope: '只读', created: '2026-03-15', used: '今天' },
].map(k => `
<tr>
<td style="font-weight:500">${k.name}</td>
<td style="font-family:monospace;font-size:12px">${k.key}</td>
<td><span class="badge badge-info">${k.scope}</span></td>
<td style="font-size:12px;color:var(--text-muted)">${k.created}</td>
<td style="font-size:12px;color:var(--text-muted)">${k.used}</td>
<td>
<button class="btn btn-ghost btn-sm" data-tooltip="复制 Key" onclick="Toast.info('Key 已复制到剪贴板')"><i data-lucide="copy"></i></button>
<button class="btn btn-ghost btn-sm" style="color:var(--danger)" data-tooltip="撤销 Key" onclick="Toast.warning('Key 已撤销')"><i data-lucide="trash-2"></i></button>
</td>
</tr>
`).join('')}
${state.dataRequests.map(request => {
const meta = getRequestStatusMeta(request.status);
return `
<tr>
<td style="font-family:monospace;font-size:12px;color:var(--primary)">${escapeHtml(request.id)}</td>
<td>${escapeHtml(request.subject)}</td>
<td style="font-size:12px;color:var(--text-secondary)">${escapeHtml(request.company)}</td>
<td>${escapeHtml(request.type)}</td>
<td><span class="badge ${meta.badge}">${meta.label}</span></td>
<td style="font-size:12px;color:var(--text-muted)">${escapeHtml(request.createdAt)}</td>
<td>
${request.status === 'pending'
? `<button class="btn btn-outline btn-sm" onclick="processDataRequest('${escapeHtml(request.id)}')">处理</button>`
: `<button class="btn btn-ghost btn-sm" onclick="viewDataRequestResult('${escapeHtml(request.id)}')">查看结果</button>`}
</td>
</tr>
`;
}).join('')}
</tbody>
</table>
</div>
<div class="api-note" style="margin-top:12px">
</div>
`;
}
function renderRetentionTab() {
return `
<div class="card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px">
<div>
<div class="card-title">数据保留策略</div>
<div class="card-subtitle">设置不同数据类型的自动保留周期</div>
</div>
${state.lastCleanup ? `<span class="badge badge-default">最近清理：${escapeHtml(state.lastCleanup)}</span>` : ''}
</div>
${state.retentionPolicies.map(policy => `
<div style="display:flex;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--border)">
<span style="flex:1;font-size:13px">${escapeHtml(policy.type)}</span>
<input type="number" min="1" max="3650" class="form-control retention-input" data-policy-id="${escapeHtml(policy.id)}" value="${policy.period}" style="width:96px">
<span style="font-size:13px;color:var(--text-muted)">${escapeHtml(policy.unit)}</span>
</div>
`).join('')}
<div style="display:flex;gap:8px;margin-top:16px">
<button class="btn btn-primary" id="saveRetentionBtn"><i data-lucide="save"></i> 保存策略</button>
<button class="btn btn-outline" id="resetRetentionBtn"><i data-lucide="rotate-ccw"></i> 恢复默认</button>
<button class="btn btn-outline" id="cleanupExpiredBtn"><i data-lucide="trash-2"></i> 清理过期数据</button>
</div>
<div class="api-note" style="margin-top:14px">
<i data-lucide="info"></i>
<span>API Key 接口：<code>GET /api/v1/settings/api-keys</code> · <code>POST /api/v1/settings/api-keys</code></span>
<span>后端接口预留：<code>GET /api/v1/privacy/retention-policies</code> · <code>PUT /api/v1/privacy/retention-policies/{id}</code> · <code>POST /api/v1/privacy/cleanup-expired</code></span>
</div>
</div>
</div>
`;
}
<div class="tab-content" id="stab-notify">
<div class="card" style="max-width:600px">
<div class="card-title" style="margin-bottom:16px">通知配置</div>
${[
{ label: '设备离线告警', enabled: true },
{ label: 'OTA 升级失败告警', enabled: true },
{ label: 'Bad Case 严重问题告警', enabled: true },
{ label: 'API 超时告警', enabled: false },
{ label: '每日数据报告', enabled: true },
].map(n => `
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)">
<span style="font-size:13px">${n.label}</span>
<label class="toggle-switch"><input type="checkbox" ${n.enabled ? 'checked' : ''}><span class="toggle-track"></span></label>
</div>
`).join('')}
<div class="form-group" style="margin-top:16px">
<label class="form-label">Webhook URL</label>
<input type="text" class="form-control" placeholder="https://your-webhook.com/alerts">
</div>
<button class="btn btn-outline btn-sm" onclick="Toast.info('Webhook 测试请求已发送')">
<i data-lucide="send"></i> 测试 Webhook
</button>
</div>
</div>
<div class="tab-content" id="stab-integrations">
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px">
${[
{ name: '腾讯云 ASR', icon: '🔵', status: 'connected' },
{ name: '腾讯云 TTS', icon: '🔵', status: 'connected' },
{ name: 'OpenAI', icon: '⚫', status: 'disconnected' },
{ name: '阿里云 OSS', icon: '🟠', status: 'connected' },
{ name: 'Kafka', icon: '🟡', status: 'connected' },
{ name: 'ClickHouse', icon: '🔴', status: 'disconnected' },
].map(i => `
<div class="card" style="display:flex;align-items:center;gap:12px">
<span style="font-size:24px">${i.icon}</span>
<div style="flex:1">
<div style="font-weight:600;font-size:13.5px">${i.name}</div>
<span class="status-dot ${i.status === 'connected' ? 'online' : 'offline'}" style="font-size:12px">${i.status === 'connected' ? '已连接' : '未连接'}</span>
</div>
<button class="btn btn-outline btn-sm" onclick="Toast.info('配置 ${i.name} 集成')">配置</button>
</div>
`).join('')}
</div>
</div>
`;
lucide.createIcons({ elements: [container] });
container.querySelectorAll('#settingsTabs .tab-item').forEach(tab => {
tab.addEventListener('click', () => {
container.querySelectorAll('#settingsTabs .tab-item').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
container.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
container.querySelector(`#stab-${tab.dataset.tab}`)?.classList.add('active');
function bindEvents() {
container.querySelectorAll('#privacyTabs .tab-item').forEach(tab => {
tab.addEventListener('click', () => {
state.activeTab = tab.dataset.tab;
renderPage();
});
});
});
container.querySelector('#createKeyBtn')?.addEventListener('click', () => {
container.querySelector('#piiGlobalToggle')?.addEventListener('change', event => {
state.piiGlobalEnabled = event.target.checked;
Toast.info(state.piiGlobalEnabled ? 'PII 全局脱敏已开启' : 'PII 全局脱敏已关闭', 1000);
});
container.querySelectorAll('.pii-rule-toggle').forEach(input => {
input.addEventListener('change', event => {
const rule = state.piiRules.find(item => item.id === event.target.dataset.ruleId);
if (rule) rule.enabled = event.target.checked;
});
});
container.querySelector('#addPiiRuleBtn')?.addEventListener('click', openPiiRuleModal);
container.querySelector('#testPiiBtn')?.addEventListener('click', openPiiTestModal);
container.querySelector('#savePiiBtn')?.addEventListener('click', savePiiConfig);
container.querySelectorAll('.compliance-toggle').forEach(input => {
input.addEventListener('change', event => {
const list = event.target.dataset.group === 'coppa' ? state.coppaItems : state.gdprItems;
const target = list.find(item => item.id === event.target.dataset.itemId);
if (target) target.enabled = event.target.checked;
});
});
container.querySelector('#saveComplianceBtn')?.addEventListener('click', saveComplianceConfig);
container.querySelector('#runComplianceCheckBtn')?.addEventListener('click', runComplianceCheck);
container.querySelector('#addDataRequestBtn')?.addEventListener('click', openDataRequestModal);
container.querySelector('#saveRetentionBtn')?.addEventListener('click', saveRetentionPolicies);
container.querySelector('#resetRetentionBtn')?.addEventListener('click', resetRetentionPolicies);
container.querySelector('#cleanupExpiredBtn')?.addEventListener('click', cleanupExpiredData);
}
function openPiiRuleModal(ruleId = '') {
const editingRule = state.piiRules.find(rule => rule.id === ruleId);
const modal = createModal({
title: editingRule ? '编辑脱敏规则' : '新增脱敏规则',
content: `
<div class="form-row">
<div class="form-group">
<label class="form-label">规则名称<span class="required">*</span></label>
<input type="text" class="form-control" id="piiRuleName" value="${escapeHtml(editingRule?.name || '')}" placeholder="例如：邮箱">
</div>
<div class="form-group">
<label class="form-label">识别类型</label>
<select class="form-control" id="piiRuleType">
${[
['person_name', '姓名'],
['phone', '手机号'],
['email', '邮箱'],
['ip', 'IP 地址'],
['id_card', '身份证号'],
['address', '地址'],
['bank_card', '银行卡号'],
['custom', '自定义正则'],
].map(([value, label]) => `<option value="${value}" ${editingRule?.type === value ? 'selected' : ''}>${label}</option>`).join('')}
</select>
</div>
</div>
<div class="form-group" id="customPatternGroup" style="${editingRule?.type === 'custom' ? '' : 'display:none'}">
<label class="form-label">自定义正则</label>
<input type="text" class="form-control" id="piiRulePattern" value="${escapeHtml(editingRule?.pattern || '')}" placeholder="例如：[A-Z]{2}\\d{6}">
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">脱敏展示<span class="required">*</span></label>
<input type="text" class="form-control" id="piiRuleMask" value="${escapeHtml(editingRule?.mask || '[已脱敏]')}" placeholder="[已脱敏]">
</div>
<div class="form-group">
<label class="form-label">示例</label>
<input type="text" class="form-control" id="piiRuleExample" value="${escapeHtml(editingRule?.example || '')}" placeholder="原始文本 → 脱敏文本">
</div>
</div>
<label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer">
<input type="checkbox" id="piiRuleEnabled" ${editingRule?.enabled !== false ? 'checked' : ''} style="accent-color:var(--primary)">
<span>启用该规则</span>
</label>`,
onConfirm: async () => {
const name = modal.overlay.querySelector('#piiRuleName')?.value.trim();
const type = modal.overlay.querySelector('#piiRuleType')?.value || 'custom';
const pattern = modal.overlay.querySelector('#piiRulePattern')?.value.trim();
const mask = modal.overlay.querySelector('#piiRuleMask')?.value.trim();
const example = modal.overlay.querySelector('#piiRuleExample')?.value.trim();
const enabled = modal.overlay.querySelector('#piiRuleEnabled')?.checked;
if (!name || !mask) {
Toast.warning('请填写规则名称和脱敏展示');
return false;
}
if (type === 'custom' && !pattern) {
Toast.warning('自定义规则需要填写正则表达式');
return false;
}
if (type === 'custom') {
try {
new RegExp(pattern);
} catch (error) {
Toast.warning('自定义正则格式不正确');
return false;
}
}
if (editingRule) {
Object.assign(editingRule, { name, type, pattern, mask, example: example || `${name} → ${mask}`, enabled });
await callPrivacyApi('updateRule', editingRule.id, editingRule);
Toast.success('脱敏规则已更新');
} else {
const newRule = {
id: `custom-${Date.now()}`,
name,
type,
pattern,
mask,
example: example || `${name} → ${mask}`,
enabled,
system: false,
};
state.piiRules.push(newRule);
await callPrivacyApi('createRule', newRule);
Toast.success('脱敏规则已创建');
}
renderPage();
},
confirmText: editingRule ? '保存' : '创建',
});
modal.overlay.querySelector('#piiRuleType')?.addEventListener('change', event => {
const group = modal.overlay.querySelector('#customPatternGroup');
if (group) group.style.display = event.target.value === 'custom' ? '' : 'none';
});
}
window.editPiiRule = function(ruleId) {
openPiiRuleModal(ruleId);
};
window.deletePiiRule = function(ruleId) {
const rule = state.piiRules.find(item => item.id === ruleId);
if (!rule) return;
createModal({
title: '创建 API Key',
title: '删除脱敏规则',
content: `
<div style="text-align:center;padding:18px 0">
<i data-lucide="alert-triangle" style="width:44px;height:44px;color:var(--warning);margin-bottom:12px"></i>
<p style="font-size:15px;font-weight:600;margin-bottom:8px">确认删除规则「${escapeHtml(rule.name)}」？</p>
<p style="font-size:13px;color:var(--text-muted)">删除后该类型信息将不再被此规则脱敏。</p>
</div>`,
onConfirm: async () => {
state.piiRules = state.piiRules.filter(item => item.id !== rule.id);
await callPrivacyApi('deleteRule', rule.id);
Toast.success('脱敏规则已删除');
renderPage();
},
confirmText: '确认删除',
});
lucide.createIcons();
};
function openPiiTestModal() {
const sample = '张三说他的手机号是13812348888，家庭住址是北京市朝阳区星河小区，登录 IP 是 192.168.1.10。';
const modal = createModal({
title: '测试 PII 脱敏',
size: 'modal-lg',
content: `
<div class="form-group">
<label class="form-label">Key 名称<span class="required">*</span></label>
<input type="text" class="form-control" placeholder="例：Backend Service Key">
<label class="form-label">测试文本</label>
<textarea class="form-control" rows="5" id="piiTestInput">${escapeHtml(sample)}</textarea>
</div>
<button class="btn btn-outline btn-sm" id="runPiiMaskBtn" style="margin-bottom:12px"><i data-lucide="scan-text"></i> 生成脱敏预览</button>
<div>
<label class="form-label">脱敏结果</label>
<div id="piiTestOutput" style="min-height:92px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#f7f8fc;font-size:13px;line-height:1.7"></div>
</div>`,
onConfirm: () => true,
confirmText: '关闭',
showCancel: false,
});
const run = () => {
const input = modal.overlay.querySelector('#piiTestInput')?.value || '';
const output = modal.overlay.querySelector('#piiTestOutput');
if (output) output.textContent = maskText(input);
};
modal.overlay.querySelector('#runPiiMaskBtn')?.addEventListener('click', run);
run();
lucide.createIcons({ elements: [modal.overlay] });
}
async function savePiiConfig() {
await callPrivacyApi('updateConfig', {
piiGlobalEnabled: state.piiGlobalEnabled,
piiRules: state.piiRules,
});
Toast.success('PII 脱敏配置已保存');
}
async function saveComplianceConfig() {
await callPrivacyApi('updateConfig', {
coppaItems: state.coppaItems,
gdprItems: state.gdprItems,
});
Toast.success('合规配置已保存');
renderPage();
}
function runComplianceCheck() {
const disabled = [...state.coppaItems, ...state.gdprItems].filter(item => !item.enabled);
createModal({
title: '合规检查结果',
content: disabled.length ? `
<div style="font-size:14px;margin-bottom:12px">发现 ${disabled.length} 个待关注项：</div>
<div style="display:grid;gap:8px">
${disabled.map(item => `<div style="padding:10px 12px;background:#fffbe6;border:1px solid #ffe58f;border-radius:var(--radius-sm);font-size:13px">${escapeHtml(item.label)}</div>`).join('')}
</div>
` : `
<div style="text-align:center;padding:24px 0">
<i data-lucide="shield-check" style="width:46px;height:46px;color:var(--success);margin-bottom:12px"></i>
<div style="font-weight:700;margin-bottom:6px">检查通过</div>
<div style="font-size:13px;color:var(--text-muted)">COPPA / GDPR 控制项均已开启。</div>
</div>
`,
onConfirm: () => true,
confirmText: '关闭',
showCancel: false,
});
lucide.createIcons();
}
function openDataRequestModal() {
const modal = createModal({
title: '新增数据主体请求',
content: `
<div class="form-row">
<div class="form-group">
<label class="form-label">请求人<span class="required">*</span></label>
<input type="text" class="form-control" id="dsrSubject" placeholder="邮箱 / 用户 ID">
</div>
<div class="form-group">
<label class="form-label">请求类型</label>
<select class="form-control" id="dsrType">
<option>访问数据</option>
<option>删除数据</option>
<option>更正数据</option>
<option>导出数据</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label">权限范围</label>
<select class="form-control">
<option>全部权限</option>
<option>只读</option>
<option>设备管理</option>
<option>OTA 管理</option>
<label class="form-label">所属公司</label>
<select class="form-control" id="dsrCompany">
${(window.companies || []).filter(company => company.id !== 'all').map(company => `<option>${escapeHtml(company.name)}</option>`).join('')}
</select>
</div>`,
onConfirm: async () => {
await API.settings.createApiKey({ name: '新 API Key' });
Toast.success('API Key 创建成功，请妥善保存');
const subject = modal.overlay.querySelector('#dsrSubject')?.value.trim();
if (!subject) {
Toast.warning('请填写请求人');
return false;
}
const request = {
id: `DSR-${new Date().getFullYear()}-${String(state.dataRequests.length + 1).padStart(3, '0')}`,
subject,
company: modal.overlay.querySelector('#dsrCompany')?.value || '默认公司',
type: modal.overlay.querySelector('#dsrType')?.value || '访问数据',
status: 'pending',
createdAt: getNowText(),
result: '',
};
state.dataRequests.unshift(request);
await callPrivacyApi('getDataRequests', { mockCreated: request.id });
Toast.success('数据主体请求已创建');
renderPage();
},
confirmText: '创建',
confirmText: '创建请求',
});
});
}
window.processDataRequest = function(requestId) {
const request = state.dataRequests.find(item => item.id === requestId);
if (!request) return;
const modal = createModal({
title: `处理数据请求 - ${escapeHtml(request.id)}`,
content: `
<div style="padding:10px 12px;background:#f7f8fc;border-radius:var(--radius-sm);font-size:13px;line-height:1.7;margin-bottom:12px">
<div>请求人：${escapeHtml(request.subject)}</div>
<div>请求类型：${escapeHtml(request.type)}</div>
<div>所属公司：${escapeHtml(request.company)}</div>
</div>
<div class="form-group">
<label class="form-label">处理结果</label>
<select class="form-control" id="dsrAction">
<option value="processed">通过并处理</option>
<option value="rejected">拒绝请求</option>
</select>
</div>
<div class="form-group">
<label class="form-label">处理说明<span class="required">*</span></label>
<textarea class="form-control" rows="3" id="dsrResult" placeholder="说明处理结果或拒绝原因"></textarea>
</div>`,
onConfirm: async () => {
const action = modal.overlay.querySelector('#dsrAction')?.value || 'processed';
const result = modal.overlay.querySelector('#dsrResult')?.value.trim();
if (!result) {
Toast.warning('请填写处理说明');
return false;
}
request.status = action;
request.result = result;
request.processedAt = getNowText();
await callPrivacyApi('processDataRequest', request.id, action);
Toast.success(action === 'processed' ? '数据请求已处理' : '数据请求已拒绝');
renderPage();
},
confirmText: '确认处理',
});
};
window.viewDataRequestResult = function(requestId) {
const request = state.dataRequests.find(item => item.id === requestId);
if (!request) return;
const meta = getRequestStatusMeta(request.status);
createModal({
title: `请求结果 - ${escapeHtml(request.id)}`,
content: `
<div style="display:grid;gap:10px;font-size:13px">
<div><strong>请求人：</strong>${escapeHtml(request.subject)}</div>
<div><strong>请求类型：</strong>${escapeHtml(request.type)}</div>
<div><strong>状态：</strong><span class="badge ${meta.badge}">${meta.label}</span></div>
<div><strong>处理说明：</strong>${escapeHtml(request.result || '暂无')}</div>
${request.processedAt ? `<div><strong>处理时间：</strong>${escapeHtml(request.processedAt)}</div>` : ''}
</div>`,
onConfirm: () => true,
confirmText: '关闭',
showCancel: false,
});
};
async function saveRetentionPolicies() {
const nextPolicies = state.retentionPolicies.map(policy => {
const value = Number(container.querySelector(`.retention-input[data-policy-id="${policy.id}"]`)?.value);
return { ...policy, period: value };
});
const invalid = nextPolicies.find(policy => !Number.isFinite(policy.period) || policy.period < 1 || policy.period > 3650);
if (invalid) {
Toast.warning(`${invalid.type} 的保留周期需在 1 到 3650 天之间`);
return;
}
state.retentionPolicies = nextPolicies;
await Promise.all(nextPolicies.map(policy => callPrivacyApi('updateRetentionPolicy', policy.id, policy)));
Toast.success('数据保留策略已保存');
renderPage();
}
function resetRetentionPolicies() {
createModal({
title: '恢复默认保留策略',
content: '<p style="font-size:14px">确认将所有数据保留周期恢复为默认值？</p>',
onConfirm: () => {
state.retentionPolicies = clonePrivacyState(DEFAULT_PRIVACY_STATE.retentionPolicies);
Toast.success('数据保留策略已恢复默认');
renderPage();
},
confirmText: '确认恢复',
});
}
function cleanupExpiredData() {
createModal({
title: '清理过期数据',
content: `
<div style="text-align:center;padding:18px 0">
<i data-lucide="trash-2" style="width:44px;height:44px;color:var(--warning);margin-bottom:12px"></i>
<p style="font-size:15px;font-weight:600;margin-bottom:8px">确认执行过期数据清理？</p>
<p style="font-size:13px;color:var(--text-muted)">前端将模拟提交清理任务，真实删除由后端异步任务完成。</p>
</div>`,
onConfirm: async () => {
state.lastCleanup = getNowText();
await callPrivacyApi('updateConfig', { cleanupExpired: true, at: state.lastCleanup });
Toast.success('过期数据清理任务已提交');
renderPage();
},
confirmText: '提交清理',
});
lucide.createIcons();
}
renderPage();
});