Simon
44e77dcb0e
**重构前**（旧编号 02-11）： - docs/02-产品需求/ → 00 产品规划/PRD - docs/03-技术架构/ → 01-05 子目录散落 - docs/04-原型设计/ → 01-02 产品设计（HTML 原型） - docs/05-原型设计/ → screens/ - docs/06-测试素材/ → 02-E2E / 03-功能 / 04-版本测试 - docs/07-项目管理/ → 任务说明书/日报/计划 - docs/08-安全审计/ → 审计报告 - docs/09-堡垒运维/ → toolbox / deploy - docs/10-项目管理/ → 任务说明书（重复） - docs/11-历史归档/ → deploy-nas-archived **重构后**（新编号 00-07，语义化）： - docs/00-产品开发流程与文档管理规范.md - docs/00-版本迭代总览.md - docs/01-产品文档/ （PRD/原型/认证/会话/AI 服务/坐席/集成） - docs/02-技术文档/ （技术方案/架构图/重构记录/前端改造/实现配置） - docs/03-测试文档/ （E2E/功能用例/版本报告/缺陷单） - docs/04-运维文档/ （部署运维/运维指南） - docs/05-运营文档/ （品牌推广/用户手册） - docs/06-安全审计/ （审计报告） - docs/07-项目管理/ （任务说明书/日报/计划/看板） **净收益**： - 目录编号与产品文档管理规范对齐（按文档阶段 01-07 编号） - 消除 02-产品需求 与 10-项目管理 的编号重叠 - 子目录按文档类型分组（如 01-产品文档/00-产品规划、01-产品文档/01-认证与登录） - 把运维/安全/项目管理从 0X 散落改为 04/06/07 合计 494 文件 + 78495 行 / - 14076 行
1900 lines
132 KiB
HTML
1900 lines
132 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>IT智能服务台 — 管理后台 v1.1 (5组导航重构)</title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||
<style>
|
||
:root {
|
||
--bg-primary: #0f172a;
|
||
--bg-secondary: #1e293b;
|
||
--bg-tertiary: #334155;
|
||
--bg-card: #1e293b;
|
||
--bg-hover: #334155;
|
||
--bg-active: #3b82f6;
|
||
--text-primary: #f1f5f9;
|
||
--text-secondary: #94a3b8;
|
||
--text-muted: #64748b;
|
||
--accent: #3b82f6;
|
||
--accent-hover: #2563eb;
|
||
--accent-light: rgba(59,130,246,0.15);
|
||
--success: #10b981;
|
||
--success-bg: rgba(16,185,129,0.12);
|
||
--warning: #f59e0b;
|
||
--warning-bg: rgba(245,158,11,0.12);
|
||
--danger: #ef4444;
|
||
--danger-bg: rgba(239,68,68,0.12);
|
||
--border: rgba(148,163,184,0.12);
|
||
--border-hover: rgba(148,163,184,0.25);
|
||
--radius: 8px;
|
||
--radius-lg: 12px;
|
||
--shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg-primary); color: var(--text-primary); height: 100vh; overflow: hidden; }
|
||
|
||
/* 布局 */
|
||
.layout { display: flex; height: 100vh; }
|
||
.sidebar { width: 220px; background: var(--bg-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
|
||
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
||
.header { height: 56px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
|
||
.content { flex: 1; overflow-y: auto; padding: 24px; }
|
||
|
||
/* 侧边栏 */
|
||
.logo { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
|
||
.logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
|
||
.logo-text { font-size: 15px; font-weight: 600; }
|
||
.logo-sub { font-size: 10px; color: var(--text-muted); }
|
||
|
||
.nav-section { padding: 12px 0; }
|
||
.nav-section-title { padding: 0 20px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
|
||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; cursor: pointer; color: var(--text-secondary); transition: all 0.2s; font-size: 13px; border-left: 3px solid transparent; }
|
||
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
|
||
.nav-item.active { background: var(--accent-light); color: var(--accent); border-left-color: var(--accent); }
|
||
.nav-item i { width: 18px; text-align: center; font-size: 14px; }
|
||
.nav-badge { margin-left: auto; background: var(--danger); color: white; font-size: 10px; padding: 1px 6px; border-radius: 10px; }
|
||
.nav-priority { font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
|
||
.p0 { background: rgba(239,68,68,0.15); color: #f87171; }
|
||
.p1 { background: rgba(245,158,11,0.15); color: #fbbf24; }
|
||
.p2 { background: rgba(16,185,129,0.15); color: #34d399; }
|
||
|
||
/* 头部 */
|
||
.header-left { display: flex; align-items: center; gap: 16px; }
|
||
.breadcrumb { font-size: 13px; color: var(--text-secondary); }
|
||
.breadcrumb span { color: var(--text-primary); }
|
||
.header-right { display: flex; align-items: center; gap: 16px; }
|
||
.header-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||
|
||
/* 页面内容 */
|
||
.page-title { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
|
||
.page-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; }
|
||
|
||
/* 统计卡片 */
|
||
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
|
||
.stat-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
|
||
.stat-value { font-size: 28px; font-weight: 700; }
|
||
.stat-change { font-size: 11px; margin-top: 4px; }
|
||
.stat-up { color: var(--success); }
|
||
.stat-down { color: var(--danger); }
|
||
|
||
/* 表格 */
|
||
.table-wrapper { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
|
||
.table-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
|
||
.table-title { font-size: 15px; font-weight: 600; }
|
||
table { width: 100%; border-collapse: collapse; }
|
||
th { padding: 12px 16px; text-align: left; font-size: 12px; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border); background: var(--bg-tertiary); }
|
||
td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--border); }
|
||
tr:hover td { background: var(--bg-hover); }
|
||
|
||
/* 按钮 */
|
||
.btn { padding: 8px 16px; border-radius: var(--radius); font-size: 13px; cursor: pointer; border: none; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; }
|
||
.btn-primary { background: var(--accent); color: white; }
|
||
.btn-primary:hover { background: var(--accent-hover); }
|
||
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
|
||
.btn-ghost:hover { border-color: var(--border-hover); color: var(--text-primary); }
|
||
.btn-sm { padding: 4px 10px; font-size: 12px; }
|
||
|
||
/* 标签/徽章 */
|
||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
|
||
.tag-success { background: var(--success-bg); color: var(--success); }
|
||
.tag-warning { background: var(--warning-bg); color: var(--warning); }
|
||
.tag-danger { background: var(--danger-bg); color: var(--danger); }
|
||
.tag-info { background: var(--accent-light); color: var(--accent); }
|
||
|
||
/* 开关 */
|
||
.switch { width: 40px; height: 22px; background: var(--bg-tertiary); border-radius: 11px; position: relative; cursor: pointer; transition: background 0.2s; }
|
||
.switch.on { background: var(--success); }
|
||
.switch::after { content: ''; width: 18px; height: 18px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.2s; }
|
||
.switch.on::after { transform: translateX(18px); }
|
||
|
||
/* 功能开关页面 */
|
||
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
||
.feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
|
||
.feature-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||
.feature-card-title { font-size: 14px; font-weight: 600; }
|
||
.feature-card-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
|
||
.feature-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); }
|
||
.feature-item-name { font-size: 13px; }
|
||
.feature-item-stage { font-size: 11px; color: var(--text-muted); }
|
||
|
||
/* 快速回复管理 */
|
||
.category-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
|
||
.category-tab { padding: 6px 14px; border-radius: 20px; font-size: 12px; cursor: pointer; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid transparent; transition: all 0.2s; }
|
||
.category-tab.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
|
||
.category-tab:hover { border-color: var(--border-hover); color: var(--text-primary); }
|
||
|
||
/* 子 tab（用于 quick-rules 页 6 个 tab 等） */
|
||
.tab-link { padding: 8px 14px; font-size: 13px; cursor: pointer; border-radius: 6px; color: var(--text-secondary); transition: all 0.2s; border: 1px solid transparent; }
|
||
.tab-link:hover { color: var(--text-primary); background: var(--bg-tertiary); }
|
||
.tab-link.active { color: var(--accent); background: var(--accent-light); border-color: var(--accent); font-weight: 500; }
|
||
.tab-pane { animation: fadeIn 0.2s ease; }
|
||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||
|
||
.reply-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
|
||
.reply-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||
.reply-card-title { font-size: 13px; font-weight: 600; }
|
||
.reply-card-content { font-size: 12px; color: var(--text-secondary); line-height: 1.6; background: var(--bg-primary); padding: 10px; border-radius: 6px; }
|
||
.reply-actions { display: flex; gap: 8px; }
|
||
|
||
/* 搜索框 */
|
||
.search-box { display: flex; align-items: center; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 12px; }
|
||
.search-box input { background: transparent; border: none; color: var(--text-primary); padding: 8px; font-size: 13px; outline: none; width: 200px; }
|
||
.search-box i { color: var(--text-muted); font-size: 13px; }
|
||
|
||
/* 页面容器（用于切换） */
|
||
.page { display: none; }
|
||
.page.active { display: block; }
|
||
|
||
/* 集成卡片 */
|
||
.integration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||
.integration-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; text-align: center; }
|
||
.integration-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 12px; }
|
||
.integration-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
|
||
.integration-status { font-size: 12px; margin-bottom: 12px; }
|
||
.integration-detail { font-size: 11px; color: var(--text-muted); }
|
||
|
||
/* 分配模式（v1.2 收编至坐席管理页 Tab 2，原独立页样式保留供坐席管理页复用） */
|
||
.mode-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 12px; display: flex; align-items: center; gap: 16px; }
|
||
.mode-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||
.mode-radio.selected { border-color: var(--accent); }
|
||
.mode-radio.selected::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
|
||
.mode-info { flex: 1; }
|
||
.mode-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
|
||
.mode-desc { font-size: 12px; color: var(--text-secondary); }
|
||
.mode-badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; }
|
||
.mode-locked { opacity: 0.5; pointer-events: none; }
|
||
.mode-lock-text { font-size: 11px; color: var(--text-muted); font-style: italic; }
|
||
|
||
/* 坐席管理 Tab 切换（v1.2 新增） */
|
||
.agents-tab { padding: 10px 16px; cursor: pointer; color: var(--text-secondary); border-bottom: 2px solid transparent; transition: all 0.2s; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; }
|
||
.agents-tab:hover { color: var(--text-primary); }
|
||
.agents-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||
.agents-tab-pane[data-tab="agents-assignment"] .mode-card { background: var(--bg-secondary); }
|
||
|
||
/* 滚动条 */
|
||
::-webkit-scrollbar { width: 6px; }
|
||
::-webkit-scrollbar-track { background: transparent; }
|
||
::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 3px; }
|
||
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="layout">
|
||
<!-- 侧边栏 -->
|
||
<div class="sidebar">
|
||
<div class="logo">
|
||
<div class="logo-icon"><i class="fas fa-headset"></i></div>
|
||
<div>
|
||
<div class="logo-text">IT智能服务台</div>
|
||
<div class="logo-sub">管理后台 v1.0</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav-section">
|
||
<div class="nav-section-title">🟦 运营中心</div>
|
||
<div class="nav-item active" onclick="switchPage('dashboard')">
|
||
<i class="fas fa-chart-line"></i> 运营总览
|
||
<span class="nav-priority p0">P0</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('monitor')">
|
||
<i class="fas fa-desktop"></i> 会话监控
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('agents')">
|
||
<i class="fas fa-users"></i> 坐席管理
|
||
<span class="nav-priority p0">P0</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('roles')">
|
||
<i class="fas fa-user-tag"></i> 角色管理
|
||
<span class="nav-priority p0">P0</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('permissions-matrix')">
|
||
<i class="fas fa-th"></i> 权限矩阵
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('mfa-manage')">
|
||
<i class="fas fa-key"></i> OTP 管理
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('features')">
|
||
<i class="fas fa-toggle-on"></i> 功能开关
|
||
<span class="nav-priority p0">P0</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav-section">
|
||
<div class="nav-section-title" style="color: #a78bfa">🟪 数据与监控</div>
|
||
<div class="nav-item" onclick="switchPage('session-audit')">
|
||
<i class="fas fa-file-alt"></i> 会话审计
|
||
<span class="nav-priority p0">P0</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('agent-performance')">
|
||
<i class="fas fa-chart-bar"></i> 坐席绩效
|
||
<span class="nav-priority p0">P0</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('evaluation-stats')">
|
||
<i class="fas fa-star"></i> 满意度评价
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('automation-metrics')">
|
||
<i class="fas fa-magic"></i> 自动化指标
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav-section">
|
||
<div class="nav-section-title" style="color: #fca5a5">🟥 安全审计</div>
|
||
<div class="nav-item" onclick="switchPage('system-logs')">
|
||
<i class="fas fa-history"></i> 配置变更历史
|
||
<span class="nav-priority p0">P0</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('runtime-logs')">
|
||
<i class="fas fa-exclamation-triangle"></i> 运行期日志
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('audit-logs')">
|
||
<i class="fas fa-shield-alt"></i> 安全审计日志
|
||
<span class="nav-priority p0">P0</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('terminal-security')">
|
||
<i class="fas fa-laptop"></i> 终端安全
|
||
<span class="nav-priority p0">P0</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('quick-rules-audit')">
|
||
<i class="fas fa-clipboard-list"></i> 快速回复审计日志
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav-section">
|
||
<div class="nav-section-title" style="color: #6ee7b7">🟩 系统与集成</div>
|
||
<div class="nav-item" onclick="switchPage('integrations')">
|
||
<i class="fas fa-plug"></i> 系统集成
|
||
<span class="nav-priority p0">P0</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('welcome-config')">
|
||
<i class="fas fa-hand-paper"></i> 欢迎与引导
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('automation-scenarios')">
|
||
<i class="fas fa-magic"></i> 自动化场景
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('automation-versions')">
|
||
<i class="fas fa-code-branch"></i> 规则版本
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav-section">
|
||
<div class="nav-section-title" style="color: #f9a8d4">🟪 知识与 AI</div>
|
||
<div class="nav-item" onclick="switchPage('quick-rules')">
|
||
<i class="fas fa-reply-all"></i> 快速回复规则
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('flowchart')">
|
||
<i class="fas fa-project-diagram"></i> 排查流程图
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('exclusion-rules')">
|
||
<i class="fas fa-filter"></i> 代答排除
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('knowledge-iteration')">
|
||
<i class="fas fa-book-open"></i> 知识迭代管理
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('ragflow-ingestion')">
|
||
<i class="fas fa-upload"></i> RAGFlow 文档导入
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('topology-preview')">
|
||
<i class="fas fa-network-wired"></i> 拓扑预览
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
<div class="nav-item" onclick="switchPage('knowledge-suggestions')">
|
||
<i class="fas fa-lightbulb"></i> 知识库建议
|
||
<span class="nav-priority p1">P1</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav-section" style="border-top: 1px solid var(--border); padding-top: 12px;">
|
||
<div class="nav-section-title" style="color: var(--text-muted)">折叠区 · 占位</div>
|
||
<div class="nav-item" style="opacity:0.4">
|
||
<i class="fas fa-palette"></i> 主题模板
|
||
<span class="nav-priority p2">P2</span>
|
||
</div>
|
||
<div class="nav-item" style="opacity:0.4">
|
||
<i class="fas fa-chart-area"></i> 数据看板
|
||
<span class="nav-priority p2">P2</span>
|
||
</div>
|
||
<div class="nav-item" style="opacity:0.4">
|
||
<i class="fas fa-book"></i> 知识库
|
||
<span class="nav-priority p2">P2</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主内容区 -->
|
||
<div class="main">
|
||
<div class="header">
|
||
<div class="header-left">
|
||
<div class="breadcrumb">管理后台 / <span id="header-title">运营总览</span></div>
|
||
</div>
|
||
<div class="header-right">
|
||
<div class="search-box">
|
||
<i class="fas fa-search"></i>
|
||
<input type="text" placeholder="搜索功能或配置...">
|
||
</div>
|
||
<i class="fas fa-bell" style="color:var(--text-secondary);cursor:pointer"></i>
|
||
<div class="header-avatar">宋</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<!-- ==================== 运营总览 (v1.1: 嵌入会话监控 widget) ==================== -->
|
||
<div class="page active" id="page-dashboard">
|
||
<div class="page-title">运营总览</div>
|
||
<div class="page-desc">v1.1 · 7 张 KPI 卡 + 实时会话 Top 5 widget + 待处理 + 系统健康</div>
|
||
|
||
<!-- 第一行：4 张核心 KPI -->
|
||
<div class="stats-row">
|
||
<div class="stat-card">
|
||
<div class="stat-label">在线坐席</div>
|
||
<div class="stat-value" style="color:var(--success)">2 <span style="font-size:14px;color:var(--text-muted)">/3</span></div>
|
||
<div class="stat-change stat-up"><i class="fas fa-circle" style="font-size:8px"></i> 运行正常</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">今日会话</div>
|
||
<div class="stat-value">47</div>
|
||
<div class="stat-change stat-up"><i class="fas fa-arrow-up"></i> +12% 较昨日</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">平均响应时间</div>
|
||
<div class="stat-value">1.8<span style="font-size:14px;color:var(--text-muted)">s</span></div>
|
||
<div class="stat-change stat-down"><i class="fas fa-arrow-down"></i> -0.3s 改善</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">AI 命中率</div>
|
||
<div class="stat-value">68<span style="font-size:14px;color:var(--text-muted)">%</span></div>
|
||
<div class="stat-change stat-up"><i class="fas fa-arrow-up"></i> +5% 本周</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二行：3 张副卡（v1.1 新增：会话监控 widget 数据源） -->
|
||
<div class="stats-row" style="margin-top:-8px">
|
||
<div class="stat-card" style="border-left:3px solid var(--success)">
|
||
<div class="stat-label">进行中会话</div>
|
||
<div class="stat-value" style="color:var(--success)">8</div>
|
||
<div class="stat-change"><i class="fas fa-circle" style="font-size:6px;color:var(--success)"></i> 实时</div>
|
||
</div>
|
||
<div class="stat-card" style="border-left:3px solid var(--warning)">
|
||
<div class="stat-label">等待中会话</div>
|
||
<div class="stat-value" style="color:var(--warning)">3</div>
|
||
<div class="stat-change"><i class="fas fa-clock"></i> 平均等待 47s</div>
|
||
</div>
|
||
<div class="stat-card" style="border-left:3px solid var(--danger)">
|
||
<div class="stat-label">异常告警</div>
|
||
<div class="stat-value" style="color:var(--danger)">1</div>
|
||
<div class="stat-change stat-down"><i class="fas fa-exclamation-triangle"></i> 坐席超时</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第三行：实时会话 Top 5 widget + 待处理 -->
|
||
<div style="display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:8px">
|
||
<div class="table-wrapper">
|
||
<div class="table-header">
|
||
<div class="table-title">
|
||
<i class="fas fa-bolt" style="color:var(--warning);margin-right:6px"></i>
|
||
实时会话 Top 5
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<span class="tag" style="background:var(--success);color:white"><i class="fas fa-circle" style="font-size:6px;margin-right:4px"></i>实时刷新</span>
|
||
<span class="btn btn-sm btn-ghost" style="cursor:pointer" onclick="switchPage('monitor')">查看更多 →</span>
|
||
</div>
|
||
</div>
|
||
<table>
|
||
<thead><tr><th width="80">会话ID</th><th>员工</th><th>坐席</th><th>当前状态</th><th>等待时长</th></tr></thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code style="font-size:11px">#S-8921</code></td>
|
||
<td>张敏（财务）</td>
|
||
<td><span class="tag tag-info">宋献</span></td>
|
||
<td><span class="tag tag-success"><i class="fas fa-circle" style="font-size:6px;margin-right:4px"></i>进行中</span></td>
|
||
<td>02:15</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code style="font-size:11px">#S-8920</code></td>
|
||
<td>李宁（研发）</td>
|
||
<td><span class="tag tag-info">王丽</span></td>
|
||
<td><span class="tag tag-success"><i class="fas fa-circle" style="font-size:6px;margin-right:4px"></i>进行中</span></td>
|
||
<td>05:42</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code style="font-size:11px">#S-8919</code></td>
|
||
<td>陈芳（HR）</td>
|
||
<td><span class="tag tag-info">宋献</span></td>
|
||
<td><span class="tag" style="background:var(--warning);color:white"><i class="fas fa-clock" style="font-size:10px;margin-right:4px"></i>等待中</span></td>
|
||
<td>01:23</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code style="font-size:11px">#S-8918</code></td>
|
||
<td>赵凯（销售）</td>
|
||
<td><span class="tag tag-info">张伟</span></td>
|
||
<td><span class="tag tag-success"><i class="fas fa-circle" style="font-size:6px;margin-right:4px"></i>进行中</span></td>
|
||
<td>08:11</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code style="font-size:11px">#S-8915</code></td>
|
||
<td>周明（运营）</td>
|
||
<td><span class="tag tag-info">宋献</span></td>
|
||
<td><span class="tag" style="background:var(--danger);color:white"><i class="fas fa-exclamation-triangle" style="font-size:10px;margin-right:4px"></i>异常</span></td>
|
||
<td>15:38</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="table-wrapper">
|
||
<div class="table-header">
|
||
<div class="table-title">待处理事项</div>
|
||
<span class="tag tag-warning">3 项待审</span>
|
||
</div>
|
||
<table>
|
||
<thead><tr><th>类型</th><th>内容</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><span class="tag tag-info">快速回复</span></td><td>VPN连接失败排查话术</td><td><button class="btn btn-sm btn-ghost">审核</button></td></tr>
|
||
<tr><td><span class="tag tag-warning">知识推荐</span></td><td>打印机脱机问题（同类18次）</td><td><button class="btn btn-sm btn-ghost">处理</button></td></tr>
|
||
<tr><td><span class="tag tag-danger">异常告警</span></td><td>坐席王丽会话超时未响应</td><td><button class="btn btn-sm btn-ghost">查看</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第四行：系统健康保持 -->
|
||
<div class="table-wrapper" style="margin-top:16px">
|
||
<div class="table-header">
|
||
<div class="table-title">系统健康</div>
|
||
</div>
|
||
<div style="padding:16px;display:grid;grid-template-columns:repeat(5,1fr);gap:16px">
|
||
<div style="display:flex;justify-content:space-between;align-items:center"><span style="font-size:13px">Dify AI 引擎</span><span class="tag tag-success"><i class="fas fa-circle" style="font-size:6px"></i> 正常</span></div>
|
||
<div style="display:flex;justify-content:space-between;align-items:center"><span style="font-size:13px">RAGFlow 知识库</span><span class="tag tag-success"><i class="fas fa-circle" style="font-size:6px"></i> 正常</span></div>
|
||
<div style="display:flex;justify-content:space-between;align-items:center"><span style="font-size:13px">Redis 缓存</span><span class="tag tag-success"><i class="fas fa-circle" style="font-size:6px"></i> 正常</span></div>
|
||
<div style="display:flex;justify-content:space-between;align-items:center"><span style="font-size:13px">PostgreSQL</span><span class="tag tag-success"><i class="fas fa-circle" style="font-size:6px"></i> 正常</span></div>
|
||
<div style="display:flex;justify-content:space-between;align-items:center"><span style="font-size:13px">WebSocket</span><span class="tag tag-warning"><i class="fas fa-circle" style="font-size:6px"></i> 2连接抖动</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 功能开关 ==================== -->
|
||
<div class="page" id="page-features">
|
||
<div class="page-title">功能开关 / 参数</div>
|
||
<div class="page-desc">按阶段控制功能开放，运行时切换无需改代码。配置变更即时生效，支持回滚。</div>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-card-header">
|
||
<div class="feature-card-title"><i class="fas fa-robot" style="color:var(--accent);margin-right:6px"></i> AI 对话引擎</div>
|
||
<span class="tag tag-success">已启用</span>
|
||
</div>
|
||
<div class="feature-card-desc">Dify Agent + RAGFlow 检索增强，员工自助咨询</div>
|
||
<div class="feature-item"><span class="feature-item-name">AI 自动回复</span><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
|
||
<div class="feature-item"><span class="feature-item-name">转人工关键词触发</span><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
|
||
<div class="feature-item"><span class="feature-item-name">AI 命中阈值 <code style="color:var(--accent);font-size:11px">3次</code></span><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-card-header">
|
||
<div class="feature-card-title"><i class="fas fa-headset" style="color:var(--success);margin-right:6px"></i> 人工服务</div>
|
||
<span class="tag tag-success">已启用</span>
|
||
</div>
|
||
<div class="feature-card-desc">员工可摇铃呼叫坐席，坐席手动接单</div>
|
||
<div class="feature-item"><span class="feature-item-name">摇铃呼叫坐席</span><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
|
||
<div class="feature-item"><span class="feature-item-name">手动接单模式</span><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
|
||
<div class="feature-item"><span class="feature-item-name">邀请员工加入会话</span><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-card-header">
|
||
<div class="feature-card-title"><i class="fas fa-clock" style="color:var(--warning);margin-right:6px"></i> 排队系统</div>
|
||
<span class="tag tag-warning">阶段二</span>
|
||
</div>
|
||
<div class="feature-card-desc">坐席全忙时排队等待，支持优先级排序</div>
|
||
<div class="feature-item"><span class="feature-item-name">排队等待 <span class="feature-item-stage">阶段二</span></span><div class="switch" onclick="this.classList.toggle('on')"></div></div>
|
||
<div class="feature-item"><span class="feature-item-name">优先级排序 <span class="feature-item-stage">阶段二</span></span><div class="switch" onclick="this.classList.toggle('on')"></div></div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-card-header">
|
||
<div class="feature-card-title"><i class="fas fa-star" style="color:#fbbf24;margin-right:6px"></i> 满意度评价</div>
|
||
<span class="tag tag-warning">阶段二</span>
|
||
</div>
|
||
<div class="feature-card-desc">会话结束后推送评价，统计满意度趋势</div>
|
||
<div class="feature-item"><span class="feature-item-name">评价推送 <span class="feature-item-stage">阶段二</span></span><div class="switch" onclick="this.classList.toggle('on')"></div></div>
|
||
<div class="feature-item"><span class="feature-item-name">评价统计 <span class="feature-item-stage">阶段二</span></span><div class="switch" onclick="this.classList.toggle('on')"></div></div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-card-header">
|
||
<div class="feature-card-title"><i class="fas fa-shield-alt" style="color:var(--danger);margin-right:6px"></i> 应急模式</div>
|
||
<span class="tag tag-danger">当前关闭</span>
|
||
</div>
|
||
<div class="feature-card-desc">系统维护时降级，引导员工走企微原生通道</div>
|
||
<div class="feature-item"><span class="feature-item-name">应急模式开关</span><div class="switch" onclick="this.classList.toggle('on');updateEmergency(this)"></div></div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-card-header">
|
||
<div class="feature-card-title"><i class="fas fa-key" style="color:var(--accent);margin-right:6px"></i> 关键词管理</div>
|
||
<span class="tag tag-success">已启用</span>
|
||
</div>
|
||
<div class="feature-card-desc">转人工/情绪关键词，JSON 格式存储</div>
|
||
<div class="feature-item"><span class="feature-item-name">转人工关键词 <code style="color:var(--accent);font-size:11px">转人工/人工/人工服务</code></span><button class="btn btn-sm btn-ghost">编辑</button></div>
|
||
<div class="feature-item"><span class="feature-item-name">情绪关键词 <code style="color:var(--accent);font-size:11px">投诉/差评/不满</code></span><button class="btn btn-sm btn-ghost">编辑</button></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 坐席管理（含「分配策略」Tab，v1.2 收编原独立页） ==================== -->
|
||
<div class="page" id="page-agents">
|
||
<div class="page-title">坐席人员管理</div>
|
||
<div class="page-desc">坐席状态、技能标签、权限分级管理。技能标签与快速回复7大类对齐。</div>
|
||
|
||
<!-- Tab 切换（v1.2 新增） -->
|
||
<div style="display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px">
|
||
<div class="agents-tab active" data-tab="agents-list" onclick="switchAgentsTab(this,'agents-list')">
|
||
<i class="fas fa-users" style="margin-right:6px"></i>坐席列表
|
||
</div>
|
||
<div class="agents-tab" data-tab="agents-assignment" onclick="switchAgentsTab(this,'agents-assignment')">
|
||
<i class="fas fa-random" style="margin-right:6px"></i>分配策略
|
||
<span class="nav-priority p1" style="margin-left:6px">P1</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab 1：坐席列表（原页面内容） -->
|
||
<div class="agents-tab-pane" data-tab="agents-list">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
|
||
<div style="display:flex;gap:8px">
|
||
<div class="category-tab active" onclick="filterAgents(this,'all')">全部 (3)</div>
|
||
<div class="category-tab" onclick="filterAgents(this,'online')">在线 (2)</div>
|
||
<div class="category-tab" onclick="filterAgents(this,'busy')">忙碌 (0)</div>
|
||
<div class="category-tab" onclick="filterAgents(this,'offline')">离线 (1)</div>
|
||
</div>
|
||
<button class="btn btn-primary"><i class="fas fa-plus"></i> 添加坐席</button>
|
||
</div>
|
||
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>坐席</th><th>状态</th><th>技能标签</th><th>角色</th><th>当前/最大负载</th><th>今日结单</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><div style="display:flex;align-items:center;gap:10px"><div style="width:32px;height:32px;border-radius:50%;background:var(--accent-light);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:12px;font-weight:600">宋</div><div><div style="font-weight:500">宋献</div><div style="font-size:11px;color:var(--text-muted)">EMP001</div></div></div></td>
|
||
<td><span class="tag tag-success"><i class="fas fa-circle" style="font-size:6px"></i> 在线</span></td>
|
||
<td><span class="tag tag-info" style="margin:1px">电脑</span><span class="tag tag-info" style="margin:1px">网络</span><span class="tag tag-info" style="margin:1px">软件</span></td>
|
||
<td><span class="tag tag-warning">组长</span></td>
|
||
<td>3 / 5</td>
|
||
<td>12</td>
|
||
<td><button class="btn btn-sm btn-ghost">编辑</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div style="display:flex;align-items:center;gap:10px"><div style="width:32px;height:32px;border-radius:50%;background:rgba(16,185,129,0.12);display:flex;align-items:center;justify-content:center;color:var(--success);font-size:12px;font-weight:600">王</div><div><div style="font-weight:500">王丽</div><div style="font-size:11px;color:var(--text-muted)">EMP002</div></div></div></td>
|
||
<td><span class="tag tag-success"><i class="fas fa-circle" style="font-size:6px"></i> 在线</span></td>
|
||
<td><span class="tag tag-info" style="margin:1px">外设</span><span class="tag tag-info" style="margin:1px">安全</span></td>
|
||
<td><span class="tag tag-info">坐席</span></td>
|
||
<td>2 / 5</td>
|
||
<td>8</td>
|
||
<td><button class="btn btn-sm btn-ghost">编辑</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div style="display:flex;align-items:center;gap:10px"><div style="width:32px;height:32px;border-radius:50%;background:rgba(100,116,139,0.12);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:12px;font-weight:600">张</div><div><div style="font-weight:500">张伟</div><div style="font-size:11px;color:var(--text-muted)">EMP003</div></div></div></td>
|
||
<td><span class="tag" style="background:var(--bg-tertiary);color:var(--text-muted)"><i class="fas fa-circle" style="font-size:6px"></i> 离线</span></td>
|
||
<td><span class="tag tag-info" style="margin:1px">资产</span><span class="tag tag-info" style="margin:1px">其他</span></td>
|
||
<td><span class="tag tag-info">坐席</span></td>
|
||
<td>0 / 5</td>
|
||
<td>0</td>
|
||
<td><button class="btn btn-sm btn-ghost">编辑</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab 2：分配策略（v1.2 从原 page-assignment 收编嵌入） -->
|
||
<div class="agents-tab-pane" data-tab="agents-assignment" style="display:none">
|
||
<div class="page-desc" style="margin-bottom:16px">
|
||
<i class="fas fa-info-circle" style="color:var(--accent);margin-right:6px"></i>
|
||
当前坐席 <strong>1</strong> 人足以承担，手动接单完全满足。后续模式按坐席规模自动解锁。
|
||
</div>
|
||
|
||
<div class="mode-card" style="border-color:var(--accent)">
|
||
<div class="mode-radio selected"></div>
|
||
<div class="mode-info">
|
||
<div class="mode-title">手动接单 <span class="mode-badge tag tag-success">当前启用</span></div>
|
||
<div class="mode-desc">坐席在待办列表中自行选择接单。AB 角色冗余设计，1 人即可承担。</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mode-card mode-locked">
|
||
<div class="mode-radio"></div>
|
||
<div class="mode-info">
|
||
<div class="mode-title">轮询分配 <span class="mode-badge tag tag-info">P2</span></div>
|
||
<div class="mode-desc">按坐席列表顺序依次分配，循环往复。</div>
|
||
<div class="mode-lock-text"><i class="fas fa-lock" style="margin-right:4px"></i> 坐席人数不足3人，暂不需要</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mode-card mode-locked">
|
||
<div class="mode-radio"></div>
|
||
<div class="mode-info">
|
||
<div class="mode-title">最少活跃优先 <span class="mode-badge tag tag-info">P2</span></div>
|
||
<div class="mode-desc">自动分配给当前活跃会话数最少的坐席。</div>
|
||
<div class="mode-lock-text"><i class="fas fa-lock" style="margin-right:4px"></i> 坐席人数不足3人，暂不需要</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mode-card mode-locked">
|
||
<div class="mode-radio"></div>
|
||
<div class="mode-info">
|
||
<div class="mode-title">加权比例分配 <span class="mode-badge" style="background:var(--bg-tertiary);color:var(--text-muted)">P3</span></div>
|
||
<div class="mode-desc">按坐席权重分配（如高级权重2、初级权重1）。</div>
|
||
<div class="mode-lock-text"><i class="fas fa-lock" style="margin-right:4px"></i> 坐席人数不足5人，暂不需要</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mode-card mode-locked">
|
||
<div class="mode-radio"></div>
|
||
<div class="mode-info">
|
||
<div class="mode-title">技能匹配分配 <span class="mode-badge" style="background:var(--bg-tertiary);color:var(--text-muted)">P3</span></div>
|
||
<div class="mode-desc">根据问题类别匹配坐席技能标签。</div>
|
||
<div class="mode-lock-text"><i class="fas fa-lock" style="margin-right:4px"></i> 需坐席≥5人 + 技能标签体系成熟</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mode-card mode-locked">
|
||
<div class="mode-radio"></div>
|
||
<div class="mode-info">
|
||
<div class="mode-title">优先队列 <span class="mode-badge" style="background:var(--bg-tertiary);color:var(--text-muted)">P3</span></div>
|
||
<div class="mode-desc">紧急/阻断性问题优先路由到高级坐席/组长。</div>
|
||
<div class="mode-lock-text"><i class="fas fa-lock" style="margin-right:4px"></i> 需坐席≥5人 + 紧急度评分上线</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 系统集成 ==================== -->
|
||
<div class="page" id="page-integrations">
|
||
<div class="page-title">外部系统集成</div>
|
||
<div class="page-desc">管理后台管「配置和参数」，Dify 网页管「Workflow 逻辑」，两者边界明确。</div>
|
||
|
||
<div class="integration-grid">
|
||
<div class="integration-card">
|
||
<div class="integration-icon" style="background:var(--accent-light);color:var(--accent)"><i class="fas fa-brain"></i></div>
|
||
<div class="integration-name">Dify AI</div>
|
||
<div class="integration-status"><span class="tag tag-success">已连接</span></div>
|
||
<div class="integration-detail">Agent URL/Key · 连接测试<br>Agent 状态查看</div>
|
||
<div style="margin-top:12px"><button class="btn btn-sm btn-ghost">配置</button> <button class="btn btn-sm btn-ghost">测试</button></div>
|
||
</div>
|
||
|
||
<div class="integration-card">
|
||
<div class="integration-icon" style="background:var(--success-bg);color:var(--success)"><i class="fas fa-database"></i></div>
|
||
<div class="integration-name">RAGFlow</div>
|
||
<div class="integration-status"><span class="tag tag-warning">部分集成</span></div>
|
||
<div class="integration-detail">API URL/Key · 知识库列表<br>同步状态查看</div>
|
||
<div style="margin-top:12px"><button class="btn btn-sm btn-ghost">配置</button></div>
|
||
</div>
|
||
|
||
<div class="integration-card">
|
||
<div class="integration-icon" style="background:var(--warning-bg);color:var(--warning)"><i class="fas fa-chart-line"></i></div>
|
||
<div class="integration-name">数据平台</div>
|
||
<div class="integration-status"><span class="tag" style="background:var(--bg-tertiary);color:var(--text-muted)">未连接</span></div>
|
||
<div class="integration-detail">数据库连接 · 看板 URL<br>同步状态</div>
|
||
<div style="margin-top:12px"><button class="btn btn-sm btn-ghost">配置</button></div>
|
||
</div>
|
||
|
||
<div class="integration-card">
|
||
<div class="integration-icon" style="background:rgba(139,92,246,0.12);color:#8b5cf6"><i class="fas fa-id-card"></i></div>
|
||
<div class="integration-name">北森 eHR</div>
|
||
<div class="integration-status"><span class="tag" style="background:var(--bg-tertiary);color:var(--text-muted)">未连接</span></div>
|
||
<div class="integration-detail">OAuth2 · 员工信息<br>任职信息 API</div>
|
||
<div style="margin-top:12px"><button class="btn btn-sm btn-ghost">配置</button></div>
|
||
</div>
|
||
|
||
<div class="integration-card">
|
||
<div class="integration-icon" style="background:var(--danger-bg);color:var(--danger)"><i class="fas fa-shield-virus"></i></div>
|
||
<div class="integration-name">火绒安全</div>
|
||
<div class="integration-status"><span class="tag" style="background:var(--bg-tertiary);color:var(--text-muted)">未连接</span></div>
|
||
<div class="integration-detail">AccessKey · 终端查询<br>病毒库/漏洞状态</div>
|
||
<div style="margin-top:12px"><button class="btn btn-sm btn-ghost">配置</button></div>
|
||
</div>
|
||
|
||
<div class="integration-card">
|
||
<div class="integration-icon" style="background:rgba(236,72,153,0.12);color:#ec4899"><i class="fas fa-laptop-code"></i></div>
|
||
<div class="integration-name">联软安全</div>
|
||
<div class="integration-status"><span class="tag" style="background:var(--bg-tertiary);color:var(--text-muted)">待确认</span></div>
|
||
<div class="integration-detail">API 开放性待确认<br>需联系终端安全团队</div>
|
||
<div style="margin-top:12px"><button class="btn btn-sm btn-ghost">申请</button></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 分配模式（v1.2 已收编为 page-agents 第 2 Tab「分配策略」，独立页删除） ==================== -->
|
||
<!-- (原 page-assignment 整页内容已迁移至上方 page-agents → Tab 2「分配策略」) -->
|
||
|
||
<!-- ==================== 快速回复管理 ==================== -->
|
||
<div class="page" id="page-quickreply">
|
||
<div class="page-title">快速回复管理</div>
|
||
<div class="page-desc">分类管理 + 版本历史 + 审核发布流程。坐席提交→组长审核→全员可见。</div>
|
||
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
|
||
<div class="category-tabs">
|
||
<div class="category-tab active" onclick="filterCategory(this)">全部 (28)</div>
|
||
<div class="category-tab" onclick="filterCategory(this)">电脑 (6)</div>
|
||
<div class="category-tab" onclick="filterCategory(this)">软件 (5)</div>
|
||
<div class="category-tab" onclick="filterCategory(this)">外设 (4)</div>
|
||
<div class="category-tab" onclick="filterCategory(this)">网络 (5)</div>
|
||
<div class="category-tab" onclick="filterCategory(this)">安全 (3)</div>
|
||
<div class="category-tab" onclick="filterCategory(this)">资产 (3)</div>
|
||
<div class="category-tab" onclick="filterCategory(this)">其他 (2)</div>
|
||
</div>
|
||
<button class="btn btn-primary"><i class="fas fa-plus"></i> 新增模板</button>
|
||
</div>
|
||
|
||
<div class="reply-card">
|
||
<div class="reply-card-header">
|
||
<div class="reply-card-title"><span class="tag tag-info" style="margin-right:8px">网络</span> VPN连接失败排查</div>
|
||
<div class="reply-actions">
|
||
<span class="tag tag-success">已审核</span>
|
||
<button class="btn btn-sm btn-ghost"><i class="fas fa-edit"></i></button>
|
||
<button class="btn btn-sm btn-ghost"><i class="fas fa-history"></i></button>
|
||
</div>
|
||
</div>
|
||
<div class="reply-card-content">您好{employee_name}，VPN连接失败请按以下步骤排查：<br>1. 确认网络连接正常<br>2. 检查VPN客户端是否最新版本<br>3. 尝试重新输入密码<br>4. 如仍无法连接，请提供错误截图</div>
|
||
<div style="font-size:11px;color:var(--text-muted);margin-top:8px">变量: employee_name · 最后更新: 2026-06-10 · 版本 v3</div>
|
||
</div>
|
||
|
||
<div class="reply-card">
|
||
<div class="reply-card-header">
|
||
<div class="reply-card-title"><span class="tag tag-info" style="margin-right:8px">电脑</span> 电脑蓝屏处理话术</div>
|
||
<div class="reply-actions">
|
||
<span class="tag tag-success">已审核</span>
|
||
<button class="btn btn-sm btn-ghost"><i class="fas fa-edit"></i></button>
|
||
<button class="btn btn-sm btn-ghost"><i class="fas fa-history"></i></button>
|
||
</div>
|
||
</div>
|
||
<div class="reply-card-content">您好，电脑蓝屏请不要慌张，请尝试以下操作：<br>1. 长按电源键10秒强制关机，再重新开机<br>2. 如频繁蓝屏，请记录错误代码（如 IRQL_NOT_LESS_OR_EQUAL）<br>3. 联系IT支持获取进一步帮助</div>
|
||
<div style="font-size:11px;color:var(--text-muted);margin-top:8px">最后更新: 2026-06-08 · 版本 v2</div>
|
||
</div>
|
||
|
||
<div class="reply-card" style="border-color:var(--warning)">
|
||
<div class="reply-card-header">
|
||
<div class="reply-card-title"><span class="tag tag-info" style="margin-right:8px">安全</span> 密码重置引导（新）</div>
|
||
<div class="reply-actions">
|
||
<span class="tag tag-warning">待审核</span>
|
||
<button class="btn btn-sm btn-primary">通过</button>
|
||
<button class="btn btn-sm btn-ghost">驳回</button>
|
||
</div>
|
||
</div>
|
||
<div class="reply-card-content">您好{employee_name}，密码重置请按以下操作：<br>1. 访问自助密码重置门户<br>2. 输入工号验证身份<br>3. 设置新密码（需包含大小写+数字+特殊字符）<br>4. 等待5分钟同步生效</div>
|
||
<div style="font-size:11px;color:var(--text-muted);margin-top:8px">提交人: 张伟 · 提交时间: 2026-06-11 · 仅提交人可用</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 会话监控 ==================== -->
|
||
<div class="page" id="page-monitor">
|
||
<div class="page-title">会话监控</div>
|
||
<div class="page-desc">实时查看坐席工作状态、会话队列、异常告警。阶段二功能，当前为 Demo 预览。</div>
|
||
|
||
<div class="stats-row">
|
||
<div class="stat-card">
|
||
<div class="stat-label">进行中会话</div>
|
||
<div class="stat-value" style="color:var(--accent)">5</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">等待中</div>
|
||
<div class="stat-value" style="color:var(--warning)">0</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">今日已结单</div>
|
||
<div class="stat-value" style="color:var(--success)">42</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">异常告警</div>
|
||
<div class="stat-value" style="color:var(--danger)">1</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-wrapper">
|
||
<div class="table-header">
|
||
<div class="table-title">实时会话</div>
|
||
<span class="tag tag-info">Demo 预览</span>
|
||
</div>
|
||
<table>
|
||
<thead><tr><th>会话ID</th><th>员工</th><th>坐席</th><th>持续时长</th><th>消息数</th><th>状态</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>#C042</td><td>李明 (EMP101)</td><td>宋献</td><td>5分32秒</td><td>8</td><td><span class="tag tag-success">进行中</span></td></tr>
|
||
<tr><td>#C041</td><td>赵刚 (EMP205)</td><td>宋献</td><td>12分08秒</td><td>14</td><td><span class="tag tag-success">进行中</span></td></tr>
|
||
<tr><td>#C040</td><td>孙芳 (EMP312)</td><td>王丽</td><td>8分45秒</td><td>6</td><td><span class="tag tag-warning">超时未响应</span></td></tr>
|
||
<tr><td>#C039</td><td>周磊 (EMP088)</td><td>宋献</td><td>3分12秒</td><td>4</td><td><span class="tag tag-success">进行中</span></td></tr>
|
||
<tr><td>#C038</td><td>吴婷 (EMP156)</td><td>王丽</td><td>1分56秒</td><td>2</td><td><span class="tag tag-info">AI 对话中</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 排查流程图 ==================== -->
|
||
<div class="page" id="page-flowchart">
|
||
<div class="page-title">排查流程图管理</div>
|
||
<div class="page-desc">JSON 导入导出 + 预览 + 版本管理。阶段三开始实现，后续升级为可视化拖拽编辑。</div>
|
||
|
||
<div style="display:flex;gap:12px;margin-bottom:20px">
|
||
<button class="btn btn-primary"><i class="fas fa-file-import"></i> 导入 JSON</button>
|
||
<button class="btn btn-ghost"><i class="fas fa-file-export"></i> 导出全部</button>
|
||
<button class="btn btn-ghost"><i class="fas fa-plus"></i> 新建流程图</button>
|
||
</div>
|
||
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>流程图名称</th><th>分类</th><th>节点数</th><th>版本</th><th>最后更新</th><th>状态</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><i class="fas fa-project-diagram" style="color:var(--accent);margin-right:6px"></i>VPN连接故障排查</td><td><span class="tag tag-info">网络</span></td><td>12</td><td>v2.1</td><td>2026-06-10</td><td><span class="tag tag-success">已发布</span></td><td><button class="btn btn-sm btn-ghost">预览</button> <button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td><i class="fas fa-project-diagram" style="color:var(--accent);margin-right:6px"></i>打印机脱机排查</td><td><span class="tag tag-info">外设</span></td><td>8</td><td>v1.3</td><td>2026-06-08</td><td><span class="tag tag-success">已发布</span></td><td><button class="btn btn-sm btn-ghost">预览</button> <button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td><i class="fas fa-project-diagram" style="color:var(--accent);margin-right:6px"></i>邮箱登录失败排查</td><td><span class="tag tag-info">软件</span></td><td>10</td><td>v1.0</td><td>2026-06-06</td><td><span class="tag tag-warning">草稿</span></td><td><button class="btn btn-sm btn-ghost">预览</button> <button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div style="margin-top:24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px">
|
||
<div style="font-size:14px;font-weight:600;margin-bottom:12px"><i class="fas fa-road" style="color:var(--accent);margin-right:6px"></i> 实现路径</div>
|
||
<div style="display:flex;gap:12px;align-items:center">
|
||
<div style="background:var(--accent-light);border:1px solid var(--accent);border-radius:var(--radius);padding:12px 16px;flex:1;text-align:center">
|
||
<div style="font-size:12px;color:var(--accent);font-weight:500">Step 1</div>
|
||
<div style="font-size:13px;margin-top:4px">JSON 导入导出 + 预览</div>
|
||
<div style="font-size:11px;color:var(--text-muted)">阶段三 3B</div>
|
||
</div>
|
||
<i class="fas fa-arrow-right" style="color:var(--text-muted)"></i>
|
||
<div style="background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;flex:1;text-align:center">
|
||
<div style="font-size:12px;color:var(--text-muted);font-weight:500">Step 2</div>
|
||
<div style="font-size:13px;margin-top:4px">导出为 Dify 变量</div>
|
||
<div style="font-size:11px;color:var(--text-muted)">阶段四 4A</div>
|
||
</div>
|
||
<i class="fas fa-arrow-right" style="color:var(--text-muted)"></i>
|
||
<div style="background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;flex:1;text-align:center">
|
||
<div style="font-size:12px;color:var(--text-muted);font-weight:500">Step 3</div>
|
||
<div style="font-size:13px;margin-top:4px">Dify HTTP 回调</div>
|
||
<div style="font-size:11px;color:var(--text-muted)">阶段四</div>
|
||
</div>
|
||
<i class="fas fa-arrow-right" style="color:var(--text-muted)"></i>
|
||
<div style="background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;flex:1;text-align:center">
|
||
<div style="font-size:12px;color:var(--text-muted);font-weight:500">Step 4</div>
|
||
<div style="font-size:13px;margin-top:4px">可视化拖拽编辑</div>
|
||
<div style="font-size:11px;color:var(--text-muted)">远景</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 通用占位页面（缺失页面 fallback） ==================== -->
|
||
<div class="page" id="page-fallback">
|
||
<div class="page-title">🚧 页面原型待补全</div>
|
||
<div class="page-desc">该菜单项对应的页面原型尚未补全，<code class="fallback-name"></code>。等待 designer 输出。</div>
|
||
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:48px 24px;text-align:center">
|
||
<i class="fas fa-pencil-ruler" style="font-size:48px;color:var(--text-muted);margin-bottom:16px"></i>
|
||
<div style="font-size:16px;color:var(--text-primary);margin-bottom:8px">原型设计中</div>
|
||
<div style="font-size:13px;color:var(--text-secondary)">请参考 PRD §4 对应功能章节 + §5 页面映射</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 角色管理 ==================== -->
|
||
<div class="page" id="page-roles">
|
||
<div class="page-title">角色管理</div>
|
||
<div class="page-desc">定义管理员 / 组长 / 坐席 / 主管 等角色，分配权限组，支持新建/编辑/删除角色</div>
|
||
<div style="display:flex;gap:12px;margin-bottom:20px">
|
||
<button class="btn btn-primary"><i class="fas fa-plus"></i> 新建角色</button>
|
||
<button class="btn btn-ghost"><i class="fas fa-file-export"></i> 导出</button>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>角色名</th><th>标识</th><th>权限组</th><th>成员数</th><th>最后更新</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><i class="fas fa-crown" style="color:#f59e0b;margin-right:6px"></i>超级管理员</td><td><code>super_admin</code></td><td><span class="tag tag-danger">所有权限</span></td><td>1</td><td>2026-07-20</td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td><i class="fas fa-user-tie" style="color:#3b82f6;margin-right:6px"></i>坐席组长</td><td><code>team_lead</code></td><td><span class="tag tag-warning">人员/回复/规则</span></td><td>3</td><td>2026-07-18</td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td><i class="fas fa-user-shield" style="color:#10b981;margin-right:6px"></i>安全审计员</td><td><code>auditor</code></td><td><span class="tag tag-info">审计/合规</span></td><td>2</td><td>2026-07-15</td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td><i class="fas fa-user" style="color:var(--text-secondary);margin-right:6px"></i>普通坐席</td><td><code>agent</code></td><td><span class="tag">仅坐席端</span></td><td>15</td><td>2026-07-10</td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 权限矩阵 (v1.1: 视图切换+权限图例+影响提示) ==================== -->
|
||
<div class="page" id="page-permissions-matrix">
|
||
<div class="page-title">权限矩阵可视化 <span class="tag tag-info">v1.1</span></div>
|
||
<div class="page-desc">角色 × 资源的 RBAC 权限矩阵，单元格显示权限点（读 R / 写 W / 审批 A）</div>
|
||
|
||
<!-- 视图切换 + 工具栏 -->
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
|
||
<div style="display:flex;gap:8px;align-items:center">
|
||
<span class="category-tab active">角色视图</span>
|
||
<span class="category-tab">资源视图</span>
|
||
<span class="category-tab">用户视图</span>
|
||
<span style="border-left:1px solid var(--border);height:20px;margin:0 4px"></span>
|
||
<span class="tag tag-success"><i class="fas fa-circle" style="font-size:6px;margin-right:4px"></i>R 读</span>
|
||
<span class="tag tag-warning"><i class="fas fa-edit" style="font-size:8px;margin-right:4px"></i>W 写</span>
|
||
<span class="tag tag-danger"><i class="fas fa-check" style="font-size:8px;margin-right:4px"></i>A 审批</span>
|
||
</div>
|
||
<div style="display:flex;gap:8px">
|
||
<button class="btn btn-ghost btn-sm"><i class="fas fa-filter"></i> 仅显示差异</button>
|
||
<button class="btn btn-ghost btn-sm" onclick="switchPage('quick-rules-audit')"><i class="fas fa-history"></i> 变更审计</button>
|
||
<button class="btn btn-primary btn-sm"><i class="fas fa-save"></i> 保存修改</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-wrapper" style="overflow-x:auto">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>资源</th>
|
||
<th style="text-align:center;color:var(--accent)">超管</th>
|
||
<th style="text-align:center">组长</th>
|
||
<th style="text-align:center;color:var(--success)">审计</th>
|
||
<th style="text-align:center">坐席</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><strong>运营总览</strong></td><td style="text-align:center"><span class="tag tag-success">R</span></td><td style="text-align:center"><span class="tag tag-success">R</span></td><td style="text-align:center"><span class="tag tag-success">R</span></td><td style="text-align:center"><span class="tag">-</span></td></tr>
|
||
<tr style="background:var(--bg-tertiary)"><td><strong>坐席管理</strong></td><td style="text-align:center"><span class="tag tag-success">R</span> <span class="tag tag-warning">W</span></td><td style="text-align:center"><span class="tag tag-success">R</span></td><td style="text-align:center"><span class="tag">-</span></td><td style="text-align:center"><span class="tag">-</span></td></tr>
|
||
<tr><td><strong>角色管理</strong></td><td style="text-align:center"><span class="tag tag-success">R</span> <span class="tag tag-warning">W</span></td><td style="text-align:center"><span class="tag">-</span></td><td style="text-align:center"><span class="tag">-</span></td><td style="text-align:center"><span class="tag">-</span></td></tr>
|
||
<tr style="background:var(--bg-tertiary)"><td><strong>会话监控</strong></td><td style="text-align:center"><span class="tag tag-success">R</span> <span class="tag tag-danger">A</span></td><td style="text-align:center"><span class="tag tag-success">R</span></td><td style="text-align:center"><span class="tag">-</span></td><td style="text-align:center"><span class="tag">-</span></td></tr>
|
||
<tr><td><strong>配置变更历史</strong></td><td style="text-align:center"><span class="tag tag-success">R</span></td><td style="text-align:center"><span class="tag tag-success">R</span></td><td style="text-align:center"><span class="tag tag-success">R</span></td><td style="text-align:center"><span class="tag">-</span></td></tr>
|
||
<tr style="background:var(--bg-tertiary)"><td style="color:var(--danger)"><strong>安全审计日志</strong></td><td style="text-align:center"><span class="tag tag-success">R</span></td><td style="text-align:center"><span class="tag">-</span></td><td style="text-align:center"><span class="tag tag-success">R</span> <span class="tag tag-danger">A</span></td><td style="text-align:center"><span class="tag">-</span></td></tr>
|
||
<tr><td><strong>终端安全</strong></td><td style="text-align:center"><span class="tag tag-success">R</span> <span class="tag tag-warning">W</span></td><td style="text-align:center"><span class="tag">-</span></td><td style="text-align:center"><span class="tag tag-success">R</span></td><td style="text-align:center"><span class="tag">-</span></td></tr>
|
||
<tr style="background:var(--bg-tertiary)"><td><strong>快速回复规则</strong></td><td style="text-align:center"><span class="tag tag-success">R</span> <span class="tag tag-warning">W</span> <span class="tag tag-danger">A</span></td><td style="text-align:center"><span class="tag tag-success">R</span> <span class="tag tag-warning">W</span></td><td style="text-align:center"><span class="tag tag-success">R</span></td><td style="text-align:center"><span class="tag">-</span></td></tr>
|
||
<tr><td><strong>知识库迭代</strong></td><td style="text-align:center"><span class="tag tag-success">R</span> <span class="tag tag-warning">W</span></td><td style="text-align:center"><span class="tag tag-success">R</span></td><td style="text-align:center"><span class="tag">-</span></td><td style="text-align:center"><span class="tag">-</span></td></tr>
|
||
<tr style="background:var(--bg-tertiary)"><td><strong>终端安全（合规）</strong></td><td style="text-align:center"><span class="tag tag-success">R</span></td><td style="text-align:center"><span class="tag">-</span></td><td style="text-align:center"><span class="tag tag-success">R</span></td><td style="text-align:center"><span class="tag">-</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 影响说明 -->
|
||
<div style="padding:12px 16px;background:var(--warning);color:white;border-radius:var(--radius);margin-top:12px;display:flex;align-items:center;gap:8px">
|
||
<i class="fas fa-info-circle"></i>
|
||
<span style="font-size:13px"><strong>变更审计：</strong>每次权限变更记录到 <a style="color:white;font-weight:600;text-decoration:underline;margin:0 4px;cursor:pointer" onclick="switchPage('quick-rules-audit')">快速回复审计日志</a>，支持回滚最近 5 次变更</span>
|
||
</div>
|
||
|
||
<!-- 关联跳转 -->
|
||
<div style="padding:12px 16px;background:var(--bg-tertiary);border-radius:var(--radius);margin-top:12px;display:flex;align-items:center;gap:8px">
|
||
<i class="fas fa-link" style="color:var(--text-muted)"></i>
|
||
<span style="font-size:12px;color:var(--text-muted)">关联视图：</span>
|
||
<span class="btn btn-sm btn-ghost" onclick="switchPage('roles')"><i class="fas fa-user-shield"></i> 角色管理</span>
|
||
<span class="btn btn-sm btn-ghost" onclick="switchPage('mfa-manage')"><i class="fas fa-key"></i> OTP 管理</span>
|
||
<span class="btn btn-sm btn-ghost" onclick="switchPage('audit-logs')"><i class="fas fa-shield-alt"></i> 安全审计日志</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== OTP 管理 ==================== -->
|
||
<div class="page" id="page-mfa-manage">
|
||
<div class="page-title">OTP 管理</div>
|
||
<div class="page-desc">管理员重置员工 MFA 绑定、查看 OTP 状态、导出未绑定列表</div>
|
||
<div style="display:flex;gap:12px;margin-bottom:20px">
|
||
<button class="btn btn-primary"><i class="fas fa-file-export"></i> 导出未绑定名单</button>
|
||
<button class="btn btn-ghost"><i class="fas fa-redo"></i> 刷新</button>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px">
|
||
<div class="stat-card"><div class="stat-label">已绑定用户</div><div class="stat-value">236</div></div>
|
||
<div class="stat-card"><div class="stat-label">未绑定用户</div><div class="stat-value" style="color:var(--warning)">28</div></div>
|
||
<div class="stat-card"><div class="stat-label">锁定账户</div><div class="stat-value" style="color:var(--danger)">3</div></div>
|
||
<div class="stat-card"><div class="stat-label">今日重置次数</div><div class="stat-value">5</div></div>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>姓名</th><th>工号</th><th>部门</th><th>OTP 状态</th><th>绑定时间</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>王丽</td><td>EMP0234</td><td>财务部</td><td><span class="tag tag-success">已绑定</span></td><td>2026-03-15</td><td><button class="btn btn-sm btn-ghost">重置</button> <button class="btn btn-sm btn-ghost">解锁</button></td></tr>
|
||
<tr><td>张敏</td><td>EMP0567</td><td>人事部</td><td><span class="tag tag-warning">未绑定</span></td><td>-</td><td><button class="btn btn-sm btn-primary">发送邀请</button></td></tr>
|
||
<tr><td>陈强</td><td>EMP0891</td><td>技术部</td><td><span class="tag tag-danger">锁定</span></td><td>2026-06-20</td><td><button class="btn btn-sm btn-primary">解锁</button></td></tr>
|
||
<tr><td>李娜</td><td>EMP0123</td><td>运营部</td><td><span class="tag tag-success">已绑定</span></td><td>2026-05-10</td><td><button class="btn btn-sm btn-ghost">重置</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 会话审计 ==================== -->
|
||
<div class="page" id="page-session-audit">
|
||
<div class="page-title">会话审计</div>
|
||
<div class="page-desc">回溯历史会话内容、转接记录、AI 干预节点，定位客诉或合规问题</div>
|
||
<div style="display:flex;gap:12px;margin-bottom:20px">
|
||
<input type="text" class="form-input" placeholder="搜索员工/坐席/会话ID" style="flex:1;max-width:280px">
|
||
<select class="form-input" style="max-width:160px">
|
||
<option>状态: 全部</option>
|
||
<option>已结单</option>
|
||
<option>转人工</option>
|
||
<option>超时</option>
|
||
</select>
|
||
<input type="date" class="form-input" style="max-width:160px">
|
||
<button class="btn btn-primary"><i class="fas fa-search"></i> 检索</button>
|
||
<button class="btn btn-ghost"><i class="fas fa-file-export"></i> 导出</button>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>会话ID</th><th>员工</th><th>坐席</th><th>AI 介入次数</th><th>消息数</th><th>状态</th><th>开始时间</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>S-2026-0728-001</code></td><td>张三</td><td>李四</td><td>3</td><td>12</td><td><span class="tag tag-success">已结单</span></td><td>10:23</td><td><button class="btn btn-sm btn-ghost">详情</button> <button class="btn btn-sm btn-ghost">导出</button></td></tr>
|
||
<tr><td><code>S-2026-0728-002</code></td><td>王五</td><td>张敏</td><td>0</td><td>8</td><td><span class="tag tag-warning">转人工</span></td><td>11:45</td><td><button class="btn btn-sm btn-ghost">详情</button></td></tr>
|
||
<tr><td><code>S-2026-0728-003</code></td><td>赵六</td><td>王芳</td><td>5</td><td>20</td><td><span class="tag tag-danger">超时</span></td><td>12:08</td><td><button class="btn btn-sm btn-primary">复盘</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 坐席绩效 ==================== -->
|
||
<div class="page" id="page-agent-performance">
|
||
<div class="page-title">坐席绩效</div>
|
||
<div class="page-desc">坐席工作量、响应速度、满意度、AI 接管率等多维分析，支持按部门/角色筛选</div>
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px">
|
||
<div class="stat-card"><div class="stat-label">平均响应</div><div class="stat-value">1.8<span style="font-size:14px;color:var(--text-muted)">s</span></div></div>
|
||
<div class="stat-card"><div class="stat-label">平均满意度</div><div class="stat-value">4.6<span style="font-size:14px;color:var(--text-muted)">/5</span></div></div>
|
||
<div class="stat-card"><div class="stat-label">AI 接管率</div><div class="stat-value">68<span style="font-size:14px;color:var(--text-muted)">%</span></div></div>
|
||
<div class="stat-card"><div class="stat-label">人均结单</div><div class="stat-value">32</div></div>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<div class="table-header">
|
||
<div class="table-title">坐席排行（本月）</div>
|
||
<div style="display:flex;gap:12px">
|
||
<select class="form-input" style="max-width:140px"><option>本月</option><option>本周</option></select>
|
||
</div>
|
||
</div>
|
||
<table>
|
||
<thead><tr><th>排名</th><th>坐席</th><th>结单数</th><th>平均响应</th><th>满意度</th><th>AI 接管率</th><th>趋势</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>🥇 1</td><td>张敏</td><td>182</td><td>1.2s</td><td>4.8</td><td>72%</td><td style="color:var(--success)">↑</td></tr>
|
||
<tr><td>🥈 2</td><td>李四</td><td>165</td><td>1.5s</td><td>4.7</td><td>68%</td><td style="color:var(--success)">↑</td></tr>
|
||
<tr><td>🥉 3</td><td>王芳</td><td>148</td><td>1.9s</td><td>4.5</td><td>64%</td><td style="color:var(--success)">↑</td></tr>
|
||
<tr><td>4</td><td>陈丽</td><td>132</td><td>2.1s</td><td>4.4</td><td>61%</td><td style="color:var(--text-muted)">-</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 满意度评价 ==================== -->
|
||
<div class="page" id="page-evaluation-stats">
|
||
<div class="page-title">满意度评价</div>
|
||
<div class="page-desc">员工对每次会话的星级评分，1-5 星分布，差评自动转入"待处理事项"</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px">
|
||
<div class="stat-card"><div class="stat-label">平均评分</div><div class="stat-value">4.6<span style="font-size:14px;color:var(--text-muted)">/5</span></div></div>
|
||
<div class="stat-card"><div class="stat-label">评分人数</div><div class="stat-value">187</div></div>
|
||
<div class="stat-card"><div class="stat-label">差评数（≤2 星）</div><div class="stat-value" style="color:var(--danger)">8</div></div>
|
||
</div>
|
||
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:20px">
|
||
<div style="font-size:14px;font-weight:600;margin-bottom:16px">评分分布</div>
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:8px">
|
||
<span style="width:60px;font-size:13px">⭐⭐⭐⭐⭐</span>
|
||
<div style="flex:1;background:var(--bg-tertiary);height:24px;border-radius:4px;overflow:hidden">
|
||
<div style="background:var(--success);height:100%;width:72%"></div>
|
||
</div>
|
||
<span style="width:60px;text-align:right;font-size:13px;color:var(--text-muted)">134 (72%)</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:8px">
|
||
<span style="width:60px;font-size:13px">⭐⭐⭐⭐</span>
|
||
<div style="flex:1;background:var(--bg-tertiary);height:24px;border-radius:4px;overflow:hidden">
|
||
<div style="background:var(--accent);height:100%;width:18%"></div>
|
||
</div>
|
||
<span style="width:60px;text-align:right;font-size:13px;color:var(--text-muted)">34 (18%)</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:8px">
|
||
<span style="width:60px;font-size:13px">⭐⭐⭐</span>
|
||
<div style="flex:1;background:var(--bg-tertiary);height:24px;border-radius:4px;overflow:hidden">
|
||
<div style="background:var(--warning);height:100%;width:6%"></div>
|
||
</div>
|
||
<span style="width:60px;text-align:right;font-size:13px;color:var(--text-muted)">11 (6%)</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:8px">
|
||
<span style="width:60px;font-size:13px">⭐⭐</span>
|
||
<div style="flex:1;background:var(--bg-tertiary);height:24px;border-radius:4px;overflow:hidden">
|
||
<div style="background:var(--danger);height:100%;width:3%"></div>
|
||
</div>
|
||
<span style="width:60px;text-align:right;font-size:13px;color:var(--text-muted)">5 (3%)</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<span style="width:60px;font-size:13px">⭐</span>
|
||
<div style="flex:1;background:var(--bg-tertiary);height:24px;border-radius:4px;overflow:hidden">
|
||
<div style="background:var(--danger);height:100%;width:1.5%"></div>
|
||
</div>
|
||
<span style="width:60px;text-align:right;font-size:13px;color:var(--text-muted)">3 (1.5%)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 自动化指标 ==================== -->
|
||
<div class="page" id="page-automation-metrics">
|
||
<div class="page-title">自动化运营指标</div>
|
||
<div class="page-desc">阶段5 自动化闭环核心指标：会话量、解决率、转人工、异常、自动执行动作数</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px">
|
||
<div class="stat-card"><div class="stat-label">自动化会话</div><div class="stat-value">389</div></div>
|
||
<div class="stat-card"><div class="stat-label">已解决率</div><div class="stat-value" style="color:var(--success)">86%</div></div>
|
||
<div class="stat-card"><div class="stat-label">转人工率</div><div class="stat-value" style="color:var(--warning)">12%</div></div>
|
||
<div class="stat-card"><div class="stat-label">异常率</div><div class="stat-value" style="color:var(--danger)">2%</div></div>
|
||
<div class="stat-card"><div class="stat-label">自动动作</div><div class="stat-value">1247</div></div>
|
||
<div class="stat-card"><div class="stat-label">需审批动作</div><div class="stat-value">38</div></div>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<div class="table-header"><div class="table-title">按场景分布</div></div>
|
||
<table>
|
||
<thead><tr><th>场景</th><th>会话数</th><th>占比</th><th>解决率</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>VPN 连接失败</td><td>89</td><td>23%</td><td><span class="tag tag-success">91%</span></td></tr>
|
||
<tr><td>打印机脱机</td><td>76</td><td>20%</td><td><span class="tag tag-success">88%</span></td></tr>
|
||
<tr><td>账号解锁</td><td>68</td><td>17%</td><td><span class="tag tag-success">85%</span></td></tr>
|
||
<tr><td>邮箱密码重置</td><td>52</td><td>13%</td><td><span class="tag tag-warning">74%</span></td></tr>
|
||
<tr><td>软件安装指导</td><td>104</td><td>27%</td><td><span class="tag tag-success">89%</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 配置变更历史 ==================== -->
|
||
<div class="page" id="page-system-logs">
|
||
<div class="page-title">配置变更历史</div>
|
||
<div class="page-desc">记录 system_configs 表中所有变更（谁改了哪个 key、改前值、改后值、时间）</div>
|
||
<div style="display:flex;gap:12px;margin-bottom:20px">
|
||
<input type="text" class="form-input" placeholder="搜索配置键" style="max-width:240px">
|
||
<input type="date" class="form-input" style="max-width:160px"> - <input type="date" class="form-input" style="max-width:160px">
|
||
<button class="btn btn-primary"><i class="fas fa-search"></i></button>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>时间</th><th>配置键</th><th>旧值</th><th>新值</th><th>操作人</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>2026-07-28 10:42</td><td><code>hand_raise_keywords</code></td><td><code>["帮忙", "人工"]</code></td><td><code>["帮忙", "人工", "人工服务"]</code></td><td>宋献</td><td><button class="btn btn-sm btn-ghost">回滚</button></td></tr>
|
||
<tr><td>2026-07-27 16:18</td><td><code>emergency_mode</code></td><td><code>false</code></td><td><code>true</code></td><td>宋献</td><td><button class="btn btn-sm btn-ghost">回滚</button></td></tr>
|
||
<tr><td>2026-07-26 09:30</td><td><code>ai_auto_reply</code></td><td><code>false</code></td><td><code>true</code></td><td>张敏</td><td><button class="btn btn-sm btn-ghost">回滚</button></td></tr>
|
||
<tr><td>2026-07-25 14:22</td><td><code>intervene_round_threshold</code></td><td><code>5</code></td><td><code>3</code></td><td>宋献</td><td><button class="btn btn-sm btn-ghost">回滚</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 运行期日志 ==================== -->
|
||
<div class="page" id="page-runtime-logs">
|
||
<div class="page-title">运行期日志</div>
|
||
<div class="page-desc">后端服务实时日志（INFO / WARN / ERROR），支持过滤、搜索、导出</div>
|
||
<div style="display:flex;gap:12px;margin-bottom:16px;align-items:center">
|
||
<span class="tag tag-success">INFO 1247</span>
|
||
<span class="tag tag-warning">WARN 38</span>
|
||
<span class="tag tag-danger">ERROR 5</span>
|
||
<select class="form-input" style="margin-left:auto;max-width:160px">
|
||
<option>级别: 全部</option><option>ERROR</option><option>WARN</option>
|
||
</select>
|
||
<button class="btn btn-ghost btn-sm"><i class="fas fa-file-export"></i> 导出</button>
|
||
<button class="btn btn-ghost btn-sm"><i class="fas fa-redo"></i> 自动刷新</button>
|
||
</div>
|
||
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;font-family:monospace;font-size:12px;max-height:480px;overflow-y:auto">
|
||
<div><span style="color:var(--text-muted)">10:42:31</span> <span class="tag tag-success" style="font-size:10px">INFO</span> [uvicorn.access] 200 GET /itadmin/api/admin/dashboard/overview</div>
|
||
<div><span style="color:var(--text-muted)">10:42:18</span> <span class="tag tag-warning" style="font-size:10px">WARN</span> [wechat.ws] WebSocket connection slow (3.2s)</div>
|
||
<div><span style="color:var(--text-muted)">10:41:55</span> <span class="tag tag-success" style="font-size:10px">INFO</span> [routing] 关键词 "打印机" 命中 → 路由到 打印机分类</div>
|
||
<div><span style="color:var(--text-muted)">10:41:30</span> <span class="tag tag-danger" style="font-size:10px">ERROR</span> [dify.api] 超时 30s, retry 1/3</div>
|
||
<div><span style="color:var(--text-muted)">10:41:15</span> <span class="tag tag-success" style="font-size:10px">INFO</span> [agent.session] 新会话 S-2026-0728-003 创建</div>
|
||
<div><span style="color:var(--text-muted)">10:40:58</span> <span class="tag tag-warning" style="font-size:10px">WARN</span> [db.pool] 连接池使用率 78%</div>
|
||
<div><span style="color:var(--text-muted)">10:40:42</span> <span class="tag tag-success" style="font-size:10px">INFO</span> [ws.broadcast] 坐席会话广播成功，共 5 个连接</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 安全审计日志 ==================== -->
|
||
<div class="page" id="page-audit-logs">
|
||
<div class="page-title">安全审计日志</div>
|
||
<div class="page-desc">敏感操作审计：登录、MFA 验证、权限变更、角色调整等</div>
|
||
<div style="display:flex;gap:12px;margin-bottom:20px">
|
||
<select class="form-input" style="max-width:160px"><option>事件类型: 全部</option><option>登录</option><option>MFA 验证</option><option>权限变更</option></select>
|
||
<input type="date" class="form-input" style="max-width:160px">
|
||
<button class="btn btn-primary"><i class="fas fa-search"></i></button>
|
||
<button class="btn btn-ghost"><i class="fas fa-file-export"></i> 导出</button>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>时间</th><th>用户</th><th>事件</th><th>详情</th><th>IP</th><th>结果</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>10:42:31</td><td>宋献</td><td>权限变更</td><td>角色：张敏 新增 主管</td><td>10.240.1.18</td><td><span class="tag tag-success">成功</span></td></tr>
|
||
<tr><td>10:30:15</td><td>李四</td><td>登录失败</td><td>MFA 验证错误 5 次，账户锁定 5 分钟</td><td>10.240.1.45</td><td><span class="tag tag-danger">失败</span></td></tr>
|
||
<tr><td>10:15:08</td><td>张敏</td><td>登录</td><td>MFA 验证成功</td><td>10.240.1.78</td><td><span class="tag tag-success">成功</span></td></tr>
|
||
<tr><td>09:48:22</td><td>宋献</td><td>权限变更</td><td>角色：陈强 解锁</td><td>10.240.1.18</td><td><span class="tag tag-success">成功</span></td></tr>
|
||
<tr><td>09:30:00</td><td>未知</td><td>登录失败</td><td>密码错误 3 次</td><td>114.55.32.7</td><td><span class="tag tag-danger">失败</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 终端安全 ==================== -->
|
||
<div class="page" id="page-terminal-security">
|
||
<div class="page-title">终端安全</div>
|
||
<div class="page-desc">联软 LV7000 + 火绒企业版 集中管控，外联管控、违规外联告警、策略下发</div>
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px">
|
||
<div class="stat-card"><div class="stat-label">在线终端</div><div class="stat-value">328</div></div>
|
||
<div class="stat-card"><div class="stat-label">合规率</div><div class="stat-value" style="color:var(--success)">96.7%</div></div>
|
||
<div class="stat-card"><div class="stat-label">违规外联</div><div class="stat-value" style="color:var(--danger)">11</div></div>
|
||
<div class="stat-card"><div class="stat-label">策略版本</div><div class="stat-value">v3.2</div></div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px">
|
||
<div class="table-wrapper">
|
||
<div class="table-header"><div class="table-title">火绒企业版 状态</div></div>
|
||
<div style="padding:16px">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:12px"><span>终端数</span><span>328 / 350</span></div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:12px"><span>病毒库版本</span><span>v2026.07.28</span></div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:12px"><span>实时防护</span><span class="tag tag-success">已开启</span></div>
|
||
<div style="display:flex;justify-content:space-between"><span>威胁处置</span><span>0 待处理</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<div class="table-header"><div class="table-title">联软 LV7000 状态</div></div>
|
||
<div style="padding:16px">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:12px"><span>在线终端</span><span>315 / 350</span></div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:12px"><span>外联管控策略</span><span>严格</span></div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:12px"><span>违规告警</span><span class="tag tag-warning">11 起</span></div>
|
||
<div style="display:flex;justify-content:space-between"><span>策略同步</td><span class="tag tag-success">已同步</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<div class="table-header"><div class="table-title">违规外联事件</div></div>
|
||
<table>
|
||
<thead><tr><th>终端</th><th>部门</th><th>违规类型</th><th>目标</th><th>时间</th><th>处置</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>PC-1187</td><td>市场部</td><td>USB 设备</td><td>U 盘 未注册</td><td>10:38</td><td><button class="btn btn-sm btn-ghost">阻断</button></td></tr>
|
||
<tr><td>PC-0934</td><td>财务部</td><td>外网 IP</td><td>114.55.32.7</td><td>10:25</td><td><span class="tag tag-warning">已告警</span></td></tr>
|
||
<tr><td>PC-1056</td><td>研发部</td><td>USB 设备</td><td>移动硬盘</td><td>09:48</td><td><button class="btn btn-sm btn-ghost">阻断</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 快速回复审计日志 ==================== -->
|
||
<div class="page" id="page-quick-rules-audit">
|
||
<div class="page-title">快速回复审计日志</div>
|
||
<div class="page-desc">所有快速回复规则（greeting / contacts / routing / targets）的变更审计，按时间倒序</div>
|
||
<div style="display:flex;gap:12px;margin-bottom:20px">
|
||
<select class="form-input" style="max-width:180px">
|
||
<option>规则类型: 全部</option>
|
||
<option>greeting</option>
|
||
<option>contacts</option>
|
||
<option>routing</option>
|
||
<option>targets</option>
|
||
</select>
|
||
<select class="form-input" style="max-width:140px"><option>操作: 全部</option><option>新建</option><option>编辑</option><option>删除</option></select>
|
||
<button class="btn btn-primary"><i class="fas fa-search"></i></button>
|
||
<button class="btn btn-ghost"><i class="fas fa-file-export"></i> 导出</button>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>时间</th><th>操作人</th><th>规则类型</th><th>规则标识</th><th>操作</th><th>变更摘要</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>10:42:18</td><td>宋献</td><td><code>routing</code></td><td><code>k-0091</code></td><td><span class="tag tag-success">编辑</span></td><td>优先级 5 → 3，权重 +10</td></tr>
|
||
<tr><td>10:30:55</td><td>张敏</td><td><code>contacts</code></td><td><code>c-0042</code></td><td><span class="tag tag-warning">新建</span></td><td>姓名：陈丽，部门：技术</td></tr>
|
||
<tr><td>10:18:03</td><td>宋献</td><td><code>targets</code></td><td><code>t-0023</code></td><td><span class="tag tag-info">删除</span></td><td>规则 "已废弃的备份目标" 软删除</td></tr>
|
||
<tr><td>09:55:42</td><td>宋献</td><td><code>greeting</code></td><td><code>g-0001</code></td><td><span class="tag tag-success">编辑</span></td><td>欢迎语更新为新版本</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 欢迎与引导 ==================== -->
|
||
<div class="page" id="page-welcome-config">
|
||
<div class="page-title">欢迎与引导</div>
|
||
<div class="page-desc">员工首次进入 H5 时的欢迎文案、引导卡片、问题分类导航等配置</div>
|
||
<div style="display:flex;gap:12px;margin-bottom:20px">
|
||
<button class="btn btn-primary"><i class="fas fa-save"></i> 保存</button>
|
||
<button class="btn btn-ghost"><i class="fas fa-eye"></i> 预览</button>
|
||
</div>
|
||
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-bottom:16px">
|
||
<div style="font-size:14px;font-weight:600;margin-bottom:16px">欢迎语</div>
|
||
<textarea class="form-input" rows="3" style="width:100%;font-size:13px">你好，我是税友IT智能助手！可以问我关于电脑、网络、软件、账号等问题 😊</textarea>
|
||
</div>
|
||
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-bottom:16px">
|
||
<div style="font-size:14px;font-weight:600;margin-bottom:16px">引导卡片（拖拽排序）</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px">
|
||
<div style="border:1px dashed var(--accent);border-radius:var(--radius);padding:12px;background:var(--accent-light)">
|
||
<i class="fas fa-laptop" style="color:var(--accent)"></i> 电脑问题
|
||
</div>
|
||
<div style="border:1px dashed var(--border);border-radius:var(--radius);padding:12px;background:var(--bg-primary)">
|
||
<i class="fas fa-network-wired"></i> 网络问题
|
||
</div>
|
||
<div style="border:1px dashed var(--border);border-radius:var(--radius);padding:12px;background:var(--bg-primary)">
|
||
<i class="fas fa-key"></i> 账号解锁
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 自动化场景 ==================== -->
|
||
<div class="page" id="page-automation-scenarios">
|
||
<div class="page-title">自动化场景配置</div>
|
||
<div class="page-desc">按场景控制自动化处置的开关与策略，运行时切换即时生效。高危动作需员工/H5 二次确认。</div>
|
||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:16px">
|
||
<div class="table-wrapper">
|
||
<div class="table-header">
|
||
<div class="table-title">VPN 场景</div>
|
||
<span class="tag tag-success">已启用</span>
|
||
</div>
|
||
<div style="padding:16px">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:8px"><span>关键词</span><span>VPN / 连接不上</span></div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:8px"><span>动作</span><span>推送重启指引</span></div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:8px"><span>审批</span><span>不需要</span></div>
|
||
<div style="display:flex;gap:8px;margin-top:12px">
|
||
<button class="btn btn-sm btn-primary">编辑策略</button>
|
||
<button class="btn btn-sm btn-ghost">版本管理</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<div class="table-header">
|
||
<div class="table-title">账号解锁</div>
|
||
<span class="tag tag-success">已启用</span>
|
||
</div>
|
||
<div style="padding:16px">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:8px"><span>关键词</span><span>解锁 / 锁定</span></div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:8px"><span>动作</span><span>推送工单链接</span></div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:8px"><span>审批</span><span>需要员工确认</span></div>
|
||
<div style="display:flex;gap:8px;margin-top:12px">
|
||
<button class="btn btn-sm btn-primary">编辑策略</button>
|
||
<button class="btn btn-sm btn-ghost">版本管理</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 规则版本 ==================== -->
|
||
<div class="page" id="page-automation-versions">
|
||
<div class="page-title">规则版本管理 / 灰度</div>
|
||
<div class="page-desc">管理各场景自动化规则的版本与灰度放量，新版本先小流量验证再全量</div>
|
||
<div style="display:flex;gap:12px;margin-bottom:20px">
|
||
<select class="form-input" style="max-width:240px">
|
||
<option>选择场景: VPN 场景</option>
|
||
<option>账号解锁</option>
|
||
</select>
|
||
<button class="btn btn-primary"><i class="fas fa-plus"></i> 发布新版本</button>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>版本</th><th>状态</th><th>灰度比例</th><th>备注</th><th>发布人</th><th>发布时间</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>v3.2</td><td><span class="tag tag-success">已发布</span></td><td>100%</td><td>优化动作路径</td><td>宋献</td><td>2026-07-15</td><td><button class="btn btn-sm btn-ghost">回滚</button></td></tr>
|
||
<tr><td>v3.1.2</td><td><span class="tag tag-warning">灰度中</span></td><td>30%</td><td>加入新关键词</td><td>张敏</td><td>2026-07-22</td><td><button class="btn btn-sm btn-ghost">调整</button></td></tr>
|
||
<tr><td>v3.1.1</td><td><span class="tag tag-info">已废弃</span></td><td>0%</td><td>修复 bug</td><td>宋献</td><td>2026-07-05</td><td>—</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 快速回复规则（核心子菜单页：6 tab） ==================== -->
|
||
<div class="page" id="page-quick-rules">
|
||
<div class="page-title">快速回复规则</div>
|
||
<div class="page-desc">管理 AI 回复规则（打招呼 / 联系人 / 路由关键词 / 路由目标）+ 模板审核（v5 收编自原快速回复管理）</div>
|
||
|
||
<div style="display:flex;gap:12px;margin-bottom:16px;align-items:center;border-bottom:1px solid var(--border);padding-bottom:8px">
|
||
<span class="tab-link active" data-tab-group="quick-rules" id="quick-rules--greeting" onclick="switchTab('quick-rules','greeting')">👋 打招呼</span>
|
||
<span class="tab-link" data-tab-group="quick-rules" id="quick-rules--contacts" onclick="switchTab('quick-rules','contacts')">👥 联系人</span>
|
||
<span class="tab-link" data-tab-group="quick-rules" id="quick-rules--routing" onclick="switchTab('quick-rules','routing')">🎯 路由关键词</span>
|
||
<span class="tab-link" data-tab-group="quick-rules" id="quick-rules--targets" onclick="switchTab('quick-rules','targets')">📍 路由目标</span>
|
||
<span class="tab-link" data-tab-group="quick-rules" id="quick-rules--template" onclick="switchTab('quick-rules','template')" style="background:var(--success-bg);color:var(--success);font-weight:500">
|
||
📝 模板 <span style="background:var(--success);color:white;padding:1px 6px;border-radius:8px;font-size:10px;margin-left:4px">v5 收编</span>
|
||
</span>
|
||
<span style="margin-left:auto">
|
||
<button class="btn btn-ghost btn-sm"><i class="fas fa-upload"></i> 导入</button>
|
||
<button class="btn btn-ghost btn-sm"><i class="fas fa-download"></i> 导出</button>
|
||
<button class="btn btn-ghost btn-sm"><i class="fas fa-refresh"></i> 刷新缓存</button>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- 子 tab：greeting 打招呼 -->
|
||
<div class="tab-pane active" id="pane-quick-rules--greeting">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:16px">
|
||
<div style="font-size:14px;color:var(--text-secondary)">员工首次进入会话时，AI 自动打招呼语。</div>
|
||
<button class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> 新增</button>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>标识</th><th>名称</th><th>时段</th><th>模板</th><th>优先级</th><th>状态</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>g-0001</code></td><td>工作日白天</td><td>09:00-18:00</td><td>你好，我是税友IT智能助手...</td><td>1</td><td><span class="tag tag-success">启用</span></td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td><code>g-0002</code></td><td>工作日夜间</td><td>18:00-22:00</td><td>晚上好，IT 助手在线...</td><td>2</td><td><span class="tag tag-success">启用</span></td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td><code>g-0003</code></td><td>周末</td><td>全时段</td><td>周末好，IT 服务台 24h...</td><td>3</td><td><span class="tag tag-warning">禁用</span></td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 子 tab：contacts 联系人 -->
|
||
<div class="tab-pane" id="pane-quick-rules--contacts" style="display:none">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:16px">
|
||
<div style="font-size:14px;color:var(--text-secondary)">业务联系人字典，供"找对人"功能使用。</div>
|
||
<button class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> 新增</button>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>标识</th><th>姓名</th><th>部门</th><th>职责</th><th>联系群</th><th>状态</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>c-0001</code></td><td>宋献</td><td>IT 部</td><td>终端安全</td><td>IT-终端组</td><td><span class="tag tag-success">在岗</span></td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td><code>c-0002</code></td><td>张敏</td><td>人事部</td><td>入职</td><td>HR-服务组</td><td><span class="tag tag-success">在岗</span></td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td><code>c-0003</code></td><td>陈丽</td><td>财务部</td><td>报销系统</td><td>财务-IT</td><td><span class="tag tag-warning">休假</span></td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td><code>c-0004</code></td><td>王芳</td><td>行政部</td><td>门禁/物业</td><td>行政服务</td><td><span class="tag tag-success">在岗</span></td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 子 tab：routing 路由关键词 -->
|
||
<div class="tab-pane" id="pane-quick-rules--routing" style="display:none">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:16px">
|
||
<div style="font-size:14px;color:var(--text-secondary)">AI 自动匹配员工问题关键词 → 路由到对应分类或坐席</div>
|
||
<button class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> 新增</button>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>关键词</th><th>分类</th><th>优先级</th><th>置信度阈值</th><th>状态</th><th>更新时间</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>VPN / 连接不上 / 客户端</code></td><td><span class="tag tag-info">网络</span></td><td>1</td><td>≥0.85</td><td><span class="tag tag-success">启</span></td><td>10 分钟前</td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td><code>打印机 / 脱机 / 不打印</code></td><td><span class="tag tag-info">外设</span></td><td>2</td><td>≥0.85</td><td><span class="tag tag-success">启</span></td><td>1 小时前</td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td><code>账号 / 解锁 / 密码忘记</code></td><td><span class="tag tag-info">账号</span></td><td>1</td><td>≥0.85</td><td><span class="tag tag-success">启</span></td><td>3 小时前</td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td><code>邮箱 / 收不到 / 登录失败</code></td><td><span class="tag tag-info">邮箱</span></td><td>2</td><td>≥0.85</td><td><span class="tag tag-success">启</span></td><td>2 天前</td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 子 tab：targets 路由目标 -->
|
||
<div class="tab-pane" id="pane-quick-rules--targets" style="display:none">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:16px">
|
||
<div style="font-size:14px;color:var(--text-secondary)">把分类映射到坐席组 / 联系人 / 工单系统</div>
|
||
<button class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> 新增</button>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>目标分类</th><th>坐席组/联系人</th><th>工单系统</th><th>优先级</th><th>状态</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>网络</td><td>李四 + 张敏</td><td>ITSM (默认)</td><td>1</td><td><span class="tag tag-success">启</span></td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td>外设</td><td>王芳</td><td>ITSM (默认)</td><td>1</td><td><span class="tag tag-success">启</span></td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td>账号</td><td>宋献</td><td>AD 自助</td><td>2</td><td><span class="tag tag-success">启</span></td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td>财务</td><td>陈丽</td><td>报销系统</td><td>1</td><td><span class="tag tag-success">启</span></td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td>法务</td><td>外部律师</td><td>—</td><td>3</td><td><span class="tag tag-warning">禁</span></td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 子 tab：template 模板审核（v5 从快速回复管理收编） -->
|
||
<div class="tab-pane" id="pane-quick-rules--template" style="display:none">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:16px">
|
||
<div style="font-size:14px;color:var(--text-secondary)">坐席提交回复模板 → 组长审核 → 全员可见（v5 收编自原"快速回复管理"）</div>
|
||
<div>
|
||
<span class="tag tag-warning" style="margin-right:8px">3 项待审</span>
|
||
<button class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> 新增模板</button>
|
||
</div>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>分类</th><th>标题</th><th>内容预览</th><th>提交人</th><th>状态</th><th>提交时间</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><span class="tag tag-info">VPN</span></td><td>VPN 连接失败排查</td><td>请尝试以下步骤：1. 检查网络...</td><td>张伟</td><td><span class="tag tag-warning">待审</span></td><td>10 分钟前</td><td><button class="btn btn-sm btn-primary">审核</button></td></tr>
|
||
<tr><td><span class="tag tag-info">打印机</span></td><td>打印机脱机处理</td><td>请尝试重启打印服务...</td><td>李娜</td><td><span class="tag tag-success">通过</span></td><td>1 小时前</td><td><button class="btn btn-sm btn-ghost">查看</button></td></tr>
|
||
<tr><td><span class="tag tag-info">账号</span></td><td>账号解锁流程</td><td>请提交工单申请...</td><td>王强</td><td><span class="tag tag-warning">待审</span></td><td>2 小时前</td><td><button class="btn btn-sm btn-primary">审核</button></td></tr>
|
||
<tr><td><span class="tag tag-info">邮箱</span></td><td>邮箱密码重置</td><td>访问自助平台...</td><td>陈丽</td><td><span class="tag tag-success">通过</span></td><td>昨天</td><td><button class="btn btn-sm btn-ghost">查看</button></td></tr>
|
||
<tr><td><span class="tag tag-info">软件</span></td><td>Office 激活</td><td>通过 KMS 激活...</td><td>赵敏</td><td><span class="tag tag-danger">驳回</span></td><td>2 天前</td><td><button class="btn btn-sm btn-ghost">查看</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 代答排除 ==================== -->
|
||
<div class="page" id="page-exclusion-rules">
|
||
<div class="page-title">代答排除规则</div>
|
||
<div class="page-desc">明确 AI 不应介入的场景（如敏感词、特定分类、特定坐席），遇到时直接转人工</div>
|
||
<div style="display:flex;gap:12px;margin-bottom:20px">
|
||
<button class="btn btn-primary"><i class="fas fa-plus"></i> 新增规则</button>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>规则名</th><th>匹配条件</th><th>动作</th><th>优先级</th><th>状态</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>敏感词转移人工</td><td>关键词: 投诉 / 离职 / 离职证明 / 仲裁</td><td>直接转人工</td><td>1</td><td><span class="tag tag-success">启</span></td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td>财务敏感问题</td><td>分类: 财务 · 含关键词: 工资 / 个人所得税</td><td>仅路由到指定坐席</td><td>2</td><td><span class="tag tag-success">启</span></td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td>紧急问题直通</td><td>分类: 系统故障 / 大面积</td><td>立即转值班组长</td><td>1</td><td><span class="tag tag-success">启</span></td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 知识迭代管理 ==================== -->
|
||
<div class="page" id="page-knowledge-iteration">
|
||
<div class="page-title">知识迭代管理</div>
|
||
<div class="page-desc">Tier1 知识库迭代提案管理：未覆盖问题汇总 → 提案 → 审核入库</div>
|
||
<div style="display:flex;gap:12px;margin-bottom:20px">
|
||
<button class="btn btn-primary"><i class="fas fa-plus"></i> 新建提案</button>
|
||
<button class="btn btn-ghost"><i class="fas fa-filter"></i> 筛选</button>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead><tr><th>提案ID</th><th>标题</th><th>触发次数</th><th>分类</th><th>状态</th><th>提交人</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>K-2026-0091</code></td><td>"VPN 连接失败 5 种场景" 知识条目</td><td>23 / 周</td><td><span class="tag tag-info">网络</span></td><td><span class="tag tag-warning">审核中</span></td><td>系统</td><td><button class="btn btn-sm btn-primary">审批</button></td></tr>
|
||
<tr><td><code>K-2026-0090</code></td><td>"打印机脱机排查" 详化版本</td><td>18 / 周</td><td><span class="tag tag-info">外设</span></td><td><span class="tag tag-info">草稿</span></td><td>张敏</td><td><button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||
<tr><td><code>K-2026-0089</code></td><td>"账号自助重置" SOP 文档</td><td>12 / 周</td><td><span class="tag tag-info">账号</span></td><td><span class="tag tag-success">已入库</span></td><td>宋献</td><td><button class="btn btn-sm btn-ghost">查看</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== RAGFlow 文档导入 ==================== -->
|
||
<div class="page" id="page-ragflow-ingestion">
|
||
<div class="page-title">RAGFlow 文档导入</div>
|
||
<div class="page-desc">将 Markdown / PDF / Word 文档批量导入 RAGFlow 知识库，自动解析分块供 AI 检索</div>
|
||
<div style="display:grid;grid-template-columns:2fr 1fr;gap:16px">
|
||
<div>
|
||
<div style="border:2px dashed var(--border);border-radius:var(--radius-lg);padding:48px;text-align:center;margin-bottom:20px;background:var(--bg-card)">
|
||
<i class="fas fa-cloud-upload-alt" style="font-size:48px;color:var(--accent);margin-bottom:12px"></i>
|
||
<div style="font-size:14px;color:var(--text-secondary);margin-bottom:12px">拖拽文件到此处，或点击选择</div>
|
||
<div style="font-size:12px;color:var(--text-muted)">支持 .md / .pdf / .docx · 单文件最大 50MB · 批量无限制</div>
|
||
<button class="btn btn-primary" style="margin-top:16px"><i class="fas fa-folder-open"></i> 选择文件</button>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<div class="table-header"><div class="table-title">本次任务</div></div>
|
||
<table>
|
||
<thead><tr><th>文件</th><th>大小</th><th>解析进度</th><th>分块数</th><th>状态</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>VPN排查指南.md</td><td>2.3 MB</td><td><div style="background:var(--bg-tertiary);height:8px;border-radius:4px;width:100px"><div style="background:var(--success);height:100%;width:80%"></div></div></td><td>82 / 102</td><td><span class="tag tag-success">解析中</span></td></tr>
|
||
<tr><td>账号自助手册.pdf</td><td>5.1 MB</td><td><div style="background:var(--bg-tertiary);height:8px;border-radius:4px;width:100px"><div style="background:var(--success);height:100%;width:100%"></div></div></td><td>156</td><td><span class="tag tag-success">已入库</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<div class="table-header"><div class="table-title">RAGFlow 状态</div></div>
|
||
<div style="padding:16px">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:12px"><span>连接</span><span class="tag tag-success">正常</span></div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:12px"><span>数据集</span><span>3 个</span></div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:12px"><span>总文档</span><span>87</span></div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:12px"><span>总分块</span><span>3,247</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 拓扑预览 ==================== -->
|
||
<div class="page" id="page-topology-preview">
|
||
<div class="page-title">知识拓扑预览</div>
|
||
<div class="page-desc">知识条目关联图谱可视化（Neo4j），帮助理解知识结构、发现孤岛节点</div>
|
||
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);height:480px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden">
|
||
<svg viewBox="0 0 600 400" style="width:100%;height:100%">
|
||
<defs>
|
||
<marker id="topo-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||
<path d="M2 1L8 5L2 9" fill="none" stroke="#378ADD" stroke-width="1.5" stroke-linecap="round"/>
|
||
</marker>
|
||
</defs>
|
||
<!-- 中心节点 -->
|
||
<circle cx="300" cy="200" r="36" fill="#3b82f6"/>
|
||
<text x="300" y="200" fill="white" font-size="14" text-anchor="middle" dominant-baseline="central" font-weight="500">IT服务台</text>
|
||
<text x="300" y="220" fill="white" font-size="10" text-anchor="middle" dominant-baseline="central">核心</text>
|
||
<!-- 一级节点 -->
|
||
<circle cx="120" cy="100" r="24" fill="#10b981"/><text x="120" y="100" fill="white" font-size="12" text-anchor="middle" dominant-baseline="central">电脑</text>
|
||
<circle cx="480" cy="100" r="24" fill="#10b981"/><text x="480" y="100" fill="white" font-size="12" text-anchor="middle" dominant-baseline="central">网络</text>
|
||
<circle cx="120" cy="320" r="24" fill="#f59e0b"/><text x="120" y="320" fill="white" font-size="12" text-anchor="middle" dominant-baseline="central">账号</text>
|
||
<circle cx="480" cy="320" r="24" fill="#f59e0b"/><text x="480" y="320" fill="white" font-size="12" text-anchor="middle" dominant-baseline="central">软件</text>
|
||
<circle cx="300" cy="60" r="20" fill="#8b5cf6"/><text x="300" y="60" fill="white" font-size="11" text-anchor="middle" dominant-baseline="central">资产</text>
|
||
<circle cx="300" cy="360" r="20" fill="#8b5cf6"/><text x="300" y="360" fill="white" font-size="11" text-anchor="middle" dominant-baseline="central">外设</text>
|
||
<!-- 二级节点 -->
|
||
<circle cx="60" cy="50" r="14" fill="#475569"/><text x="60" y="50" fill="white" font-size="9" text-anchor="middle" dominant-baseline="central">VPN</text>
|
||
<circle cx="60" cy="80" r="14" fill="#475569"/><text x="60" y="80" fill="white" font-size="9" text-anchor="middle" dominant-baseline="central">打印机</text>
|
||
<circle cx="540" cy="50" r="14" fill="#475569"/><text x="540" y="50" fill="white" font-size="9" text-anchor="middle" dominant-baseline="central">邮箱</text>
|
||
<!-- 边 -->
|
||
<line x1="300" y1="200" x2="120" y2="100" stroke="#3b82f6" stroke-width="1" opacity="0.4" marker-end="url(#topo-arrow)"/>
|
||
<line x1="300" y1="200" x2="480" y2="100" stroke="#3b82f6" stroke-width="1" opacity="0.4" marker-end="url(#topo-arrow)"/>
|
||
<line x1="300" y1="200" x2="120" y2="320" stroke="#3b82f6" stroke-width="1" opacity="0.4" marker-end="url(#topo-arrow)"/>
|
||
<line x1="300" y1="200" x2="480" y2="320" stroke="#3b82f6" stroke-width="1" opacity="0.4" marker-end="url(#topo-arrow)"/>
|
||
<line x1="300" y1="200" x2="300" y2="60" stroke="#3b82f6" stroke-width="1" opacity="0.4"/>
|
||
<line x1="300" y1="200" x2="300" y2="360" stroke="#3b82f6" stroke-width="1" opacity="0.4"/>
|
||
<line x1="120" y1="100" x2="60" y2="50" stroke="#10b981" stroke-width="0.5" opacity="0.3"/>
|
||
<line x1="120" y1="100" x2="60" y2="80" stroke="#10b981" stroke-width="0.5" opacity="0.3"/>
|
||
</svg>
|
||
<div style="position:absolute;top:12px;right:12px;display:flex;gap:8px">
|
||
<button class="btn btn-ghost btn-sm"><i class="fas fa-search-plus"></i></button>
|
||
<button class="btn btn-ghost btn-sm"><i class="fas fa-search-minus"></i></button>
|
||
<button class="btn btn-ghost btn-sm"><i class="fas fa-redo"></i></button>
|
||
</div>
|
||
<div style="position:absolute;bottom:12px;left:12px;right:12px;display:flex;gap:12px;font-size:11px;color:var(--text-muted)">
|
||
<span><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#3b82f6;margin-right:4px"></span>核心</span>
|
||
<span><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#10b981;margin-right:4px"></span>一级</span>
|
||
<span><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#f59e0b;margin-right:4px"></span>维护类</span>
|
||
<span><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#8b5cf6;margin-right:4px"></span>次级</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 知识库建议 (v1.1: AI 置信度+趋势分析) ==================== -->
|
||
<div class="page" id="page-knowledge-suggestions">
|
||
<div class="page-title">知识库建议 <span class="tag tag-info">v1.1 · AI 驱动</span></div>
|
||
<div class="page-desc">AI 分析近期未覆盖问题后给出的知识补全建议，按置信度排序</div>
|
||
|
||
<!-- 4 卡指标 -->
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px">
|
||
<div class="stat-card"><div class="stat-label">未覆盖问题</div><div class="stat-value">47</div><div class="stat-change"><i class="fas fa-arrow-up" style="color:var(--warning)"></i> 较上周 +8</div></div>
|
||
<div class="stat-card"><div class="stat-label">建议新增</div><div class="stat-value" style="color:var(--warning)">12</div><div class="stat-change">高置信度 8 条</div></div>
|
||
<div class="stat-card"><div class="stat-label">建议优化</div><div class="stat-value" style="color:var(--accent)">8</div><div class="stat-change">含 2 条高频</div></div>
|
||
<div class="stat-card"><div class="stat-label">已采纳率</div><div class="stat-value" style="color:var(--success)">73%</div><div class="stat-change stat-up"><i class="fas fa-arrow-up"></i> +12%</div></div>
|
||
</div>
|
||
|
||
<!-- AI 置信度分布 -->
|
||
<div class="table-wrapper" style="margin-bottom:16px">
|
||
<div class="table-header">
|
||
<div class="table-title">AI 置信度分布（按建议类型）</div>
|
||
</div>
|
||
<div style="padding:20px">
|
||
<!-- 行级置信度条 -->
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
|
||
<div style="width:100px;font-size:13px"><strong>拆分知识</strong></div>
|
||
<div style="flex:1;background:var(--bg-tertiary);border-radius:4px;height:24px;overflow:hidden;position:relative">
|
||
<div style="width:92%;height:100%;background:linear-gradient(90deg, var(--success), var(--accent));display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:white;font-size:11px;font-weight:500">92%</div>
|
||
</div>
|
||
<div style="width:60px;font-size:11px;color:var(--text-muted)">12 条</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
|
||
<div style="width:100px;font-size:13px"><strong>补充型号</strong></div>
|
||
<div style="flex:1;background:var(--bg-tertiary);border-radius:4px;height:24px;overflow:hidden">
|
||
<div style="width:78%;height:100%;background:linear-gradient(90deg, var(--success), var(--accent));display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:white;font-size:11px;font-weight:500">78%</div>
|
||
</div>
|
||
<div style="width:60px;font-size:11px;color:var(--text-muted)">8 条</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
|
||
<div style="width:100px;font-size:13px"><strong>新建分类</strong></div>
|
||
<div style="flex:1;background:var(--bg-tertiary);border-radius:4px;height:24px;overflow:hidden">
|
||
<div style="width:62%;height:100%;background:linear-gradient(90deg, var(--warning), var(--accent));display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:white;font-size:11px;font-weight:500">62%</div>
|
||
</div>
|
||
<div style="width:60px;font-size:11px;color:var(--text-muted)">5 条</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<div style="width:100px;font-size:13px"><strong>优化排版</strong></div>
|
||
<div style="flex:1;background:var(--bg-tertiary);border-radius:4px;height:24px;overflow:hidden">
|
||
<div style="width:45%;height:100%;background:linear-gradient(90deg, var(--warning), var(--warning));display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:white;font-size:11px;font-weight:500">45%</div>
|
||
</div>
|
||
<div style="width:60px;font-size:11px;color:var(--text-muted)">3 条</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI 智能建议表 -->
|
||
<div class="table-wrapper">
|
||
<div class="table-header">
|
||
<div class="table-title">AI 智能建议（按置信度排序）</div>
|
||
<div style="display:flex;gap:8px">
|
||
<button class="btn btn-ghost btn-sm"><i class="fas fa-filter"></i> 高置信度优先</button>
|
||
<button class="btn btn-primary btn-sm" onclick="switchPage('quick-rules--template')"><i class="fas fa-magic"></i> 一键采纳并生成模板</button>
|
||
</div>
|
||
</div>
|
||
<table>
|
||
<thead><tr><th>优先级</th><th>置信度</th><th>建议类型</th><th>问题摘要</th><th>触发频次</th><th>建议动作</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><span class="tag tag-danger">高</span></td>
|
||
<td><div style="display:flex;align-items:center;gap:4px"><div style="width:40px;background:var(--bg-tertiary);border-radius:3px;height:8px"><div style="width:92%;height:100%;background:var(--success);border-radius:3px"></div></div><span style="font-size:11px">92%</span></div></td>
|
||
<td>拆分知识</td>
|
||
<td>"VPN 连接失败" 有 5 种不同原因，但知识库只有 1 条</td>
|
||
<td>23 / 周</td>
|
||
<td>拆分 5 个细分子条目</td>
|
||
<td><button class="btn btn-sm btn-primary">采纳</button> <button class="btn btn-sm btn-ghost">忽略</button></td>
|
||
</tr>
|
||
<tr style="background:var(--bg-tertiary)">
|
||
<td><span class="tag tag-danger">高</span></td>
|
||
<td><div style="display:flex;align-items:center;gap:4px"><div style="width:40px;background:var(--bg-tertiary);border-radius:3px;height:8px"><div style="width:88%;height:100%;background:var(--success);border-radius:3px"></div></div><span style="font-size:11px">88%</span></div></td>
|
||
<td>补充型号</td>
|
||
<td>"打印机脱机排查" 缺少 HP M404 / Brother 7190 等 3 种新型号</td>
|
||
<td>18 / 周</td>
|
||
<td>补充型号清单</td>
|
||
<td><button class="btn btn-sm btn-primary">采纳</button> <button class="btn btn-sm btn-ghost">忽略</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="tag tag-warning">中</span></td>
|
||
<td><div style="display:flex;align-items:center;gap:4px"><div style="width:40px;background:var(--bg-tertiary);border-radius:3px;height:8px"><div style="width:74%;height:100%;background:var(--warning);border-radius:3px"></div></div><span style="font-size:11px">74%</span></div></td>
|
||
<td>补充场景</td>
|
||
<td>"代理软件" 未涵盖 Clash / Surge / Quantumult 三方客户端</td>
|
||
<td>11 / 周</td>
|
||
<td>新增三方客户端说明</td>
|
||
<td><button class="btn btn-sm btn-primary">采纳</button> <button class="btn btn-sm btn-ghost">忽略</button></td>
|
||
</tr>
|
||
<tr style="background:var(--bg-tertiary)">
|
||
<td><span class="tag tag-warning">中</span></td>
|
||
<td><div style="display:flex;align-items:center;gap:4px"><div style="width:40px;background:var(--bg-tertiary);border-radius:3px;height:8px"><div style="width:62%;height:100%;background:var(--warning);border-radius:3px"></div></div><span style="font-size:11px">62%</span></div></td>
|
||
<td>新建分类</td>
|
||
<td>"钉钉打卡问题" 被错误归到账号类，应独立为"考勤类"</td>
|
||
<td>5 / 周</td>
|
||
<td>新建分类</td>
|
||
<td><button class="btn btn-sm btn-primary">采纳</button> <button class="btn btn-sm btn-ghost">忽略</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="tag tag-info">低</span></td>
|
||
<td><div style="display:flex;align-items:center;gap:4px"><div style="width:40px;background:var(--bg-tertiary);border-radius:3px;height:8px"><div style="width:45%;height:100%;background:var(--text-muted);border-radius:3px"></div></div><span style="font-size:11px">45%</span></div></td>
|
||
<td>优化排版</td>
|
||
<td>"VPN 安装步骤" 第 3 步图片为 3 年前截图，建议更新</td>
|
||
<td>2 / 周</td>
|
||
<td>替换截图</td>
|
||
<td><button class="btn btn-sm btn-primary">采纳</button> <button class="btn btn-sm btn-ghost">忽略</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 跨功能关联 -->
|
||
<div style="padding:12px 16px;background:var(--bg-tertiary);border-radius:var(--radius);margin-top:12px;display:flex;align-items:center;gap:8px">
|
||
<i class="fas fa-link" style="color:var(--text-muted)"></i>
|
||
<span style="font-size:12px;color:var(--text-muted)">采纳后可联动：</span>
|
||
<span class="btn btn-sm btn-ghost" onclick="switchPage('knowledge-iteration')"><i class="fas fa-sync-alt"></i> 知识迭代管理</span>
|
||
<span class="btn btn-sm btn-ghost" onclick="switchPage('quick-rules--template')"><i class="fas fa-comment-dots"></i> 同步到快速回复模板</span>
|
||
<span class="btn btn-sm btn-ghost" onclick="switchPage('flowcharts')"><i class="fas fa-project-diagram"></i> 同步到排查流程图</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function switchPage(pageId) {
|
||
// 兼容子菜单：pageId 可能为 'quick-rules' 或 'quick-rules--greeting' 等
|
||
var realPageId = pageId.split('--')[0];
|
||
var subKey = pageId.split('--')[1] || null;
|
||
|
||
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
||
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
||
|
||
var pageEl = document.getElementById('page-' + realPageId);
|
||
if (!pageEl) {
|
||
// 缺失页面 fallback：显示通用占位
|
||
var fallback = document.getElementById('page-fallback');
|
||
if (!fallback) return;
|
||
fallback.classList.add('active');
|
||
var fb = fallback.querySelector('.fallback-name');
|
||
if (fb) fb.textContent = realPageId;
|
||
} else {
|
||
pageEl.classList.add('active');
|
||
// 处理子 tab 切换
|
||
if (subKey) {
|
||
var prefix = realPageId + '--';
|
||
pageEl.querySelectorAll('[data-tab-group="' + realPageId + '"]').forEach(function(t) {
|
||
t.classList.remove('active');
|
||
});
|
||
pageEl.querySelectorAll('.tab-pane').forEach(function(p) {
|
||
p.classList.remove('active');
|
||
});
|
||
var tab = document.getElementById(prefix + subKey);
|
||
var pane = document.getElementById('pane-' + prefix + subKey);
|
||
if (tab) tab.classList.add('active');
|
||
if (pane) pane.classList.add('active');
|
||
} else {
|
||
// 切到第一个 tab
|
||
var firstTab = pageEl.querySelector('[data-tab-group="' + realPageId + '"]');
|
||
if (firstTab) firstTab.classList.add('active');
|
||
var firstPane = pageEl.querySelector('.tab-pane');
|
||
if (firstPane) firstPane.classList.add('active');
|
||
}
|
||
}
|
||
|
||
if (event && event.currentTarget) event.currentTarget.classList.add('active');
|
||
|
||
var titles = {
|
||
dashboard: '运营总览',
|
||
monitor: '会话监控',
|
||
agents: '坐席人员管理',
|
||
roles: '角色管理',
|
||
'permissions-matrix': '权限矩阵可视化',
|
||
'mfa-manage': 'OTP 管理',
|
||
features: '功能开关/参数',
|
||
'session-audit': '会话审计',
|
||
'agent-performance': '坐席绩效',
|
||
'evaluation-stats': '满意度评价',
|
||
'automation-metrics': '自动化运营指标',
|
||
'system-logs': '配置变更历史',
|
||
'runtime-logs': '运行期日志',
|
||
'audit-logs': '安全审计日志',
|
||
'terminal-security': '终端安全',
|
||
'quick-rules-audit': '快速回复审计日志',
|
||
integrations: '外部系统集成',
|
||
'welcome-config': '欢迎与引导',
|
||
'automation-scenarios': '自动化场景',
|
||
'automation-versions': '规则版本 / 灰度',
|
||
'quick-rules': '快速回复规则',
|
||
flowchart: '排查流程图管理',
|
||
'exclusion-rules': '代答排除规则',
|
||
'knowledge-iteration': '知识迭代管理',
|
||
'ragflow-ingestion': 'RAGFlow 文档导入',
|
||
'topology-preview': '拓扑预览',
|
||
'knowledge-suggestions': '知识库建议',
|
||
quickreply: '快速回复管理（旧入口）',
|
||
};
|
||
var sub = subKey ? ' · ' + ({
|
||
greeting: '打招呼', contacts: '联系人', routing: '路由关键词',
|
||
targets: '路由目标', template: '模板审核', audit: '审计（旧）'
|
||
}[subKey] || subKey) : '';
|
||
document.getElementById('header-title').textContent = (titles[realPageId] || realPageId) + sub;
|
||
}
|
||
|
||
// 子 tab 切换（点击 tab 标题）
|
||
function switchTab(parentId, key) {
|
||
var prefix = parentId + '--';
|
||
document.querySelectorAll('[data-tab-group="' + parentId + '"]').forEach(function(t) {
|
||
t.classList.remove('active');
|
||
});
|
||
document.querySelectorAll('.tab-pane').forEach(function(p) {
|
||
p.classList.remove('active');
|
||
});
|
||
var tab = document.getElementById(prefix + key);
|
||
var pane = document.getElementById('pane-' + prefix + key);
|
||
if (tab) tab.classList.add('active');
|
||
if (pane) pane.classList.add('active');
|
||
var titleMap = {
|
||
'quick-rules': {
|
||
greeting: '快速回复规则 · 打招呼',
|
||
contacts: '快速回复规则 · 联系人',
|
||
routing: '快速回复规则 · 路由关键词',
|
||
targets: '快速回复规则 · 路由目标',
|
||
template: '快速回复规则 · 模板审核',
|
||
}
|
||
};
|
||
if (titleMap[parentId] && titleMap[parentId][key]) {
|
||
document.getElementById('header-title').textContent = titleMap[parentId][key];
|
||
}
|
||
}
|
||
|
||
function filterAgents(el, status) {
|
||
el.parentElement.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
|
||
el.classList.add('active');
|
||
}
|
||
|
||
// v1.2 新增：坐席管理页 Tab 切换（坐席列表 / 分配策略）
|
||
function switchAgentsTab(el, tabName) {
|
||
// 切换 tab 标签高亮
|
||
const tabs = el.parentElement.querySelectorAll('.agents-tab');
|
||
tabs.forEach(t => t.classList.remove('active'));
|
||
el.classList.add('active');
|
||
// 切换 tab pane 显隐
|
||
const page = el.closest('.page');
|
||
page.querySelectorAll('.agents-tab-pane').forEach(p => {
|
||
p.style.display = p.dataset.tab === tabName ? '' : 'none';
|
||
});
|
||
}
|
||
|
||
function filterCategory(el) {
|
||
el.parentElement.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
|
||
el.classList.add('active');
|
||
}
|
||
|
||
function updateEmergency(sw) {
|
||
var card = sw.closest('.feature-card');
|
||
var badge = card.querySelector('.feature-card-header .tag');
|
||
if (sw.classList.contains('on')) {
|
||
badge.className = 'tag tag-danger';
|
||
badge.textContent = '已启用';
|
||
} else {
|
||
badge.className = 'tag tag-danger';
|
||
badge.textContent = '当前关闭';
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |