314 lines
14 KiB
JavaScript
314 lines
14 KiB
JavaScript
/**
|
||
* TalkingQ Platform - Privacy (PII) Page
|
||
*/
|
||
|
||
registerPage('privacy', function(container) {
|
||
container.innerHTML = `
|
||
<div class="page-header">
|
||
<div>
|
||
<div class="page-title">隐私保护 (PII)</div>
|
||
<div class="page-desc">个人信息脱敏、COPPA/GDPR 合规配置与数据保留策略</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>
|
||
|
||
<!-- PII Tab -->
|
||
<div class="tab-content active" id="tab-pii">
|
||
<div class="card" style="margin-bottom:16px">
|
||
<div class="card-header">
|
||
<div>
|
||
<div class="card-title">PII 自动脱敏配置</div>
|
||
<div class="card-subtitle">自动识别并脱敏对话中的个人敏感信息</div>
|
||
</div>
|
||
<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>
|
||
<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>
|
||
<label class="toggle-switch">
|
||
<input type="checkbox" ${r.enabled ? 'checked' : ''}>
|
||
<span class="toggle-track"></span>
|
||
</label>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
</div>
|
||
|
||
<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>
|
||
</div>
|
||
|
||
<!-- GDPR Tab -->
|
||
<div class="tab-content" id="tab-gdpr">
|
||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap: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 合规状态：已合规
|
||
</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)">
|
||
⚠️ 数据可携带权尚未完整实现
|
||
</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>
|
||
</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>
|
||
<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>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>名称</th><th>Key（部分）</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('')}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="api-note" style="margin-top:12px">
|
||
<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>
|
||
</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');
|
||
});
|
||
});
|
||
|
||
container.querySelector('#createKeyBtn')?.addEventListener('click', () => {
|
||
createModal({
|
||
title: '创建 API Key',
|
||
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">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">权限范围</label>
|
||
<select class="form-control">
|
||
<option>全部权限</option>
|
||
<option>只读</option>
|
||
<option>设备管理</option>
|
||
<option>OTA 管理</option>
|
||
</select>
|
||
</div>`,
|
||
onConfirm: async () => {
|
||
await API.settings.createApiKey({ name: '新 API Key' });
|
||
Toast.success('API Key 创建成功，请妥善保存');
|
||
},
|
||
confirmText: '创建',
|
||
});
|
||
});
|
||
});
|