3721 lines
260 KiB
HTML
3721 lines
260 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.7（会话条目操作菜单 + v1.4~v1.6 演进合并）</title>
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--bg-primary: #f5f7fa;
|
|||
|
|
--bg-secondary: #ffffff;
|
|||
|
|
--bg-tertiary: #f0f2f5;
|
|||
|
|
--bg-hover: #e8ecf1;
|
|||
|
|
--bg-active: #dce3ec;
|
|||
|
|
--border: #e2e8f0;
|
|||
|
|
--border-light: #cbd5e1;
|
|||
|
|
--text-primary: #1e293b;
|
|||
|
|
--text-secondary: #64748b;
|
|||
|
|
--text-muted: #94a3b8;
|
|||
|
|
--accent: #3b82f6;
|
|||
|
|
--accent-soft: #dbeafe;
|
|||
|
|
--success: #22c55e;
|
|||
|
|
--success-soft: #dcfce7;
|
|||
|
|
--warning: #f59e0b;
|
|||
|
|
--warning-soft: #fef3c7;
|
|||
|
|
--danger: #ef4444;
|
|||
|
|
--danger-soft: #fee2e2;
|
|||
|
|
--info: #60a5fa;
|
|||
|
|
--purple: #8b5cf6;
|
|||
|
|
--purple-soft: #ede9fe;
|
|||
|
|
--orange: #f97316;
|
|||
|
|
--orange-soft: #fff7ed;
|
|||
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
|||
|
|
--shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|||
|
|
--radius: 6px;
|
|||
|
|
--radius-lg: 10px;
|
|||
|
|
--transition: 0.25s cubic-bezier(0.4,0,0.2,1);
|
|||
|
|
|
|||
|
|
/* 快速回复 L1 主类颜色 */
|
|||
|
|
--qr-c0: #3b82f6; /* 电脑 - 蓝 */
|
|||
|
|
--qr-c1: #22c55e; /* 软件 - 绿 */
|
|||
|
|
--qr-c2: #f97316; /* 外设 - 橙 */
|
|||
|
|
--qr-c3: #8b5cf6; /* 网络 - 紫 */
|
|||
|
|
--qr-c4: #ef4444; /* 安全 - 红 */
|
|||
|
|
--qr-c5: #0ea5e9; /* 资产 - 青 */
|
|||
|
|
--qr-c6: #6b7280; /* 其他 - 灰 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[data-theme="dark"] {
|
|||
|
|
--bg-primary: #0f1923;
|
|||
|
|
--bg-secondary: #151f2b;
|
|||
|
|
--bg-tertiary: #1a2736;
|
|||
|
|
--bg-hover: #1e3044;
|
|||
|
|
--bg-active: #243b52;
|
|||
|
|
--border: #1e3044;
|
|||
|
|
--border-light: #2a3f56;
|
|||
|
|
--text-primary: #e8edf2;
|
|||
|
|
--text-secondary: #8ba1b7;
|
|||
|
|
--text-muted: #5c7185;
|
|||
|
|
--accent: #4da6ff;
|
|||
|
|
--accent-soft: #2b5f8a;
|
|||
|
|
--success: #34d399;
|
|||
|
|
--success-soft: #1a3a2a;
|
|||
|
|
--warning: #fbbf24;
|
|||
|
|
--warning-soft: #3a2f10;
|
|||
|
|
--danger: #f87171;
|
|||
|
|
--danger-soft: #3a1a1a;
|
|||
|
|
--info: #60a5fa;
|
|||
|
|
--purple: #a78bfa;
|
|||
|
|
--purple-soft: #2d2060;
|
|||
|
|
--orange: #fb923c;
|
|||
|
|
--orange-soft: #3d1f08;
|
|||
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
|
|||
|
|
--shadow: 0 2px 8px rgba(0,0,0,0.3);
|
|||
|
|
|
|||
|
|
/* 快速回复 L1 主类颜色（深色主题：同色系稍亮版本） */
|
|||
|
|
--qr-c0: #60a5fa;
|
|||
|
|
--qr-c1: #4ade80;
|
|||
|
|
--qr-c2: #fb923c;
|
|||
|
|
--qr-c3: #a78bfa;
|
|||
|
|
--qr-c4: #f87171;
|
|||
|
|
--qr-c5: #22d3ee;
|
|||
|
|
--qr-c6: #9ca3af;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|||
|
|
body {
|
|||
|
|
font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
|
|||
|
|
background: var(--bg-primary);
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
height: 100vh;
|
|||
|
|
overflow: hidden;
|
|||
|
|
font-size: 13px;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
transition: background 0.3s, color 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ========== TOP BAR ========== */
|
|||
|
|
.theme-toggle-bar {
|
|||
|
|
position: fixed; top: 0; left: 0; right: 0;
|
|||
|
|
height: 40px;
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
border-bottom: 1px solid var(--border);
|
|||
|
|
display: flex; align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 0 16px;
|
|||
|
|
z-index: 100;
|
|||
|
|
box-shadow: var(--shadow-sm);
|
|||
|
|
}
|
|||
|
|
.bar-left { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
|
|||
|
|
.bar-left .logo-sm {
|
|||
|
|
width: 26px; height: 26px;
|
|||
|
|
background: linear-gradient(135deg, var(--accent), var(--purple));
|
|||
|
|
border-radius: 6px; display: flex; align-items: center; justify-content: center;
|
|||
|
|
font-weight: 700; font-size: 10px; color: #fff;
|
|||
|
|
}
|
|||
|
|
.bar-left .sys-name {
|
|||
|
|
font-size: 13px; font-weight: 700;
|
|||
|
|
background: linear-gradient(135deg, var(--accent), var(--purple));
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
-webkit-text-fill-color: transparent;
|
|||
|
|
background-clip: text;
|
|||
|
|
}
|
|||
|
|
.bar-left .sys-tagline {
|
|||
|
|
font-size: 10px; color: var(--text-muted);
|
|||
|
|
font-weight: 400; margin-left: 4px;
|
|||
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|||
|
|
max-width: 280px;
|
|||
|
|
}
|
|||
|
|
/* v1.7：版本标签 */
|
|||
|
|
.bar-left .v-tag {
|
|||
|
|
font-size: 10px; font-weight: 700; color: #fff;
|
|||
|
|
background: linear-gradient(135deg, var(--accent), var(--purple));
|
|||
|
|
padding: 1px 8px; border-radius: 9px; letter-spacing: 0.3px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.bar-right { display: flex; align-items: center; gap: 14px; }
|
|||
|
|
.theme-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
|
|||
|
|
.theme-switch .switch-icon { font-size: 15px; }
|
|||
|
|
.theme-switch .switch-track {
|
|||
|
|
width: 40px; height: 22px;
|
|||
|
|
background: var(--border-light); border-radius: 11px;
|
|||
|
|
position: relative; transition: background 0.3s;
|
|||
|
|
}
|
|||
|
|
[data-theme="dark"] .theme-switch .switch-track { background: var(--accent); }
|
|||
|
|
.theme-switch .switch-thumb {
|
|||
|
|
width: 18px; height: 18px; background: #fff;
|
|||
|
|
border-radius: 50%; position: absolute;
|
|||
|
|
top: 2px; left: 2px; transition: transform 0.3s;
|
|||
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|||
|
|
}
|
|||
|
|
[data-theme="dark"] .theme-switch .switch-thumb { transform: translateX(18px); }
|
|||
|
|
.bar-user-info { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
|
|||
|
|
.bar-user-avatar {
|
|||
|
|
width: 28px; height: 28px; border-radius: 50%;
|
|||
|
|
background: #f3f4f6; color: #374151;
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
font-size: 11px; font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ========== LAYOUT (3 columns) ==========
|
|||
|
|
v1.7 · 改动组 A1（回填 v1.4~v1.6 演进）：B 方案分栏
|
|||
|
|
左栏 260px 固定 / 中栏 flex:1.5 / 右栏 flex:1 → 中右恒 6:4，右栏无 max 上限
|
|||
|
|
*/
|
|||
|
|
.workspace {
|
|||
|
|
display: flex; height: calc(100vh - 40px); margin-top: 40px;
|
|||
|
|
width: 100%; transition: var(--transition);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 列宽标注徽标（原型示意，便于评审直观看到 260px / 60:40） */
|
|||
|
|
.col-badge {
|
|||
|
|
font-size: 9px; color: var(--text-muted);
|
|||
|
|
background: var(--bg-tertiary); border: 1px dashed var(--border-light);
|
|||
|
|
padding: 1px 6px; border-radius: 8px; white-space: nowrap;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ========== LEFT SIDEBAR ========== */
|
|||
|
|
/* v1.7-A1：260px 固定、flex-shrink:0（原 280px 可伸缩） */
|
|||
|
|
.sidebar-left {
|
|||
|
|
width: 260px; min-width: 200px; flex-shrink: 0;
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
border-right: none;
|
|||
|
|
display: flex; flex-direction: column; overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Search */
|
|||
|
|
.conv-search { padding: 10px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
|
|||
|
|
|
|||
|
|
/* ===== v5.4: 拖拽调整边框手柄 ===== */
|
|||
|
|
.resize-handle {
|
|||
|
|
width: 6px; cursor: col-resize;
|
|||
|
|
background: var(--border);
|
|||
|
|
position: relative; flex-shrink: 0;
|
|||
|
|
transition: background 0.2s;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
.resize-handle:hover,
|
|||
|
|
.resize-handle.dragging {
|
|||
|
|
background: var(--accent);
|
|||
|
|
}
|
|||
|
|
/* 手柄中间的拖拽指示纹 */
|
|||
|
|
.resize-handle::after {
|
|||
|
|
content: '⋮';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%; left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: opacity 0.2s;
|
|||
|
|
}
|
|||
|
|
.resize-handle:hover::after,
|
|||
|
|
.resize-handle.dragging::after {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
.conv-search-input-wrap { position: relative; }
|
|||
|
|
.conv-search-input {
|
|||
|
|
width: 100%; background: var(--bg-tertiary);
|
|||
|
|
border: 1px solid var(--border); border-radius: var(--radius);
|
|||
|
|
padding: 7px 10px 7px 30px;
|
|||
|
|
color: var(--text-primary); font-size: 12px; font-family: inherit;
|
|||
|
|
outline: none; transition: border-color var(--transition);
|
|||
|
|
}
|
|||
|
|
.conv-search-input:focus { border-color: var(--accent); }
|
|||
|
|
.conv-search-input::placeholder { color: var(--text-muted); }
|
|||
|
|
.conv-search-icon {
|
|||
|
|
position: absolute; left: 10px; top: 50%;
|
|||
|
|
transform: translateY(-50%); font-size: 12px;
|
|||
|
|
color: var(--text-muted); pointer-events: none;
|
|||
|
|
}
|
|||
|
|
.conv-search-tabs { display: flex; gap: 2px; margin-top: 6px; }
|
|||
|
|
.conv-search-tab {
|
|||
|
|
font-size: 11px; padding: 3px 10px; border-radius: 10px;
|
|||
|
|
cursor: pointer; transition: var(--transition);
|
|||
|
|
color: var(--text-muted); background: transparent;
|
|||
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|||
|
|
}
|
|||
|
|
.conv-search-tab:hover { color: var(--text-secondary); background: var(--bg-hover); }
|
|||
|
|
.conv-search-tab.active { color: var(--accent); background: var(--accent-soft); font-weight: 500; }
|
|||
|
|
/* v1.2: tab 内数字徽章 */
|
|||
|
|
.conv-search-tab .cs-pill {
|
|||
|
|
font-size: 9px; padding: 0 5px; border-radius: 8px;
|
|||
|
|
background: var(--bg-tertiary); color: var(--text-muted);
|
|||
|
|
min-width: 14px; text-align: center;
|
|||
|
|
}
|
|||
|
|
.conv-search-tab.active .cs-pill {
|
|||
|
|
background: var(--accent); color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Sections */
|
|||
|
|
.conv-sections { flex: 1; overflow-y: auto; padding: 0; }
|
|||
|
|
.conv-sections::-webkit-scrollbar { width: 4px; }
|
|||
|
|
.conv-sections::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
|||
|
|
|
|||
|
|
/* v1.2: 按状态筛选会话项 — 默认激活 tab 决定可见性 */
|
|||
|
|
#convSections[data-active-status="pending"] .conv-item:not([data-status="pending"]) { display: none; }
|
|||
|
|
#convSections[data-active-status="pending"] [data-section="colleague"],
|
|||
|
|
#convSections[data-active-status="pending"] [data-section="history"] { display: none; }
|
|||
|
|
|
|||
|
|
#convSections[data-active-status="in-progress"] .conv-item:not([data-status="in-progress"]) { display: none; }
|
|||
|
|
#convSections[data-active-status="in-progress"] [data-section="colleague"],
|
|||
|
|
#convSections[data-active-status="in-progress"] [data-section="history"] { display: none; }
|
|||
|
|
|
|||
|
|
#convSections[data-active-status="done"] .conv-item:not([data-status="done"]) { display: none; }
|
|||
|
|
#convSections[data-active-status="done"] [data-section="colleague"] { display: none; }
|
|||
|
|
/* data-active-status="all" 不写规则：默认全部可见 */
|
|||
|
|
|
|||
|
|
/* v1.2: 空状态 — 默认隐藏，由 JS 按当前可见 conv-item 数量动态显隐 */
|
|||
|
|
.conv-empty {
|
|||
|
|
padding: 30px 12px; text-align: center; color: var(--text-muted);
|
|||
|
|
font-size: 12px; display: none;
|
|||
|
|
}
|
|||
|
|
.conv-empty.show { display: block; }
|
|||
|
|
.conv-empty .ce-icon { font-size: 28px; margin-bottom: 8px; opacity: 0.5; }
|
|||
|
|
.conv-empty .ce-tip { font-size: 10px; margin-top: 6px; color: var(--text-muted); }
|
|||
|
|
|
|||
|
|
.conv-section-header {
|
|||
|
|
padding: 7px 12px; font-size: 11px; font-weight: 600;
|
|||
|
|
color: var(--text-muted); text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.5px; display: flex; align-items: center;
|
|||
|
|
justify-content: space-between; user-select: none;
|
|||
|
|
background: var(--bg-tertiary);
|
|||
|
|
border-top: 1px solid var(--border);
|
|||
|
|
border-bottom: 1px solid var(--border);
|
|||
|
|
transition: var(--transition);
|
|||
|
|
}
|
|||
|
|
.conv-section-header .cs-count {
|
|||
|
|
font-weight: 400; color: var(--text-muted);
|
|||
|
|
background: var(--bg-secondary); padding: 1px 7px;
|
|||
|
|
border-radius: 8px; font-size: 10px;
|
|||
|
|
}
|
|||
|
|
.conv-section-body { overflow: hidden; }
|
|||
|
|
|
|||
|
|
/* Priority icons on conv item (NO IT level badge) */
|
|||
|
|
/* conv-item 样式已移至 v5.4 头像区块中 */
|
|||
|
|
|
|||
|
|
.conv-item .conv-top {
|
|||
|
|
display: flex; align-items: center; justify-content: space-between;
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
}
|
|||
|
|
.conv-item .conv-name-row { display: flex; align-items: center; gap: 5px; }
|
|||
|
|
.conv-item .conv-name { font-size: 12px; font-weight: 500; color: var(--text-primary); }
|
|||
|
|
|
|||
|
|
.priority-icons {
|
|||
|
|
display: flex; align-items: center; gap: 3px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.pi-icon {
|
|||
|
|
width: 16px; height: 16px; border-radius: 3px;
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
font-size: 8px; flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.pi-blocked { background: var(--danger-soft); color: var(--danger); }
|
|||
|
|
.pi-block { background: var(--danger-soft); color: var(--danger); }
|
|||
|
|
.pi-impact { background: var(--warning-soft); color: var(--warning); }
|
|||
|
|
.pi-impact.high { background: var(--danger-soft); color: var(--danger); }
|
|||
|
|
.pi-role { background: var(--purple-soft); color: var(--purple); }
|
|||
|
|
.pi-repeat { background: var(--orange-soft); color: var(--orange); }
|
|||
|
|
.pi-confused { background: #e0e7ff; color: #6366f1; }
|
|||
|
|
.pi-angry { background: #fee2e2; color: #ef4444; }
|
|||
|
|
|
|||
|
|
/* 会话标签 */
|
|||
|
|
.conv-tag-warn, .conv-tag-new, .conv-tag-vip, .conv-tag-urgent {
|
|||
|
|
font-size: 9px; padding: 1px 5px; border-radius: 4px; flex-shrink: 0; font-weight: 500;
|
|||
|
|
}
|
|||
|
|
.conv-tag-warn { background: #fef3c7; color: #d97706; }
|
|||
|
|
.conv-tag-new { background: #dbeafe; color: #2563eb; }
|
|||
|
|
.conv-tag-vip { background: #fce7f3; color: #db2777; }
|
|||
|
|
.conv-tag-urgent{ background: #fee2e2; color: #ef4444; }
|
|||
|
|
.conv-pin-badge { font-size: 9px; color: #ef4444; flex-shrink: 0; }
|
|||
|
|
|
|||
|
|
.conv-item .conv-time { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
|
|||
|
|
.conv-item .conv-preview {
|
|||
|
|
font-size: 11px; color: var(--text-secondary);
|
|||
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
.conv-item .conv-waiting {
|
|||
|
|
font-size: 10px;
|
|||
|
|
background: var(--danger); color: #fff;
|
|||
|
|
padding: 1px 6px; border-radius: 8px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.conv-item .conv-agent-tag {
|
|||
|
|
font-size: 10px; color: var(--text-muted);
|
|||
|
|
background: var(--bg-tertiary); padding: 1px 6px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== v5.4: 会话头像 + 新消息圆点 + 处理对象缩略头像 ===== */
|
|||
|
|
/* ─────────────────────────────────────────────────────────────
|
|||
|
|
v1.7 · 改动组 B：左栏条目回填真实字段（对齐 ConversationItem.vue:11-149）
|
|||
|
|
真实尺寸约束（架构核查 §1.3.2）：
|
|||
|
|
左栏 260px − margin 6×2 − padding 10×2 = 条目内可用 228px
|
|||
|
|
头像 48 + gap 8 = 56px │ 缩略头像 28 + gap 8 = 36px │ 信息区仅剩 ~136px
|
|||
|
|
原型如实还原这个拥挤度，供评审判断三点按钮落位的真实可行性
|
|||
|
|
───────────────────────────────────────────────────────────── */
|
|||
|
|
.conv-item {
|
|||
|
|
display: flex; align-items: center; gap: 8px;
|
|||
|
|
padding: 8px 10px; margin: 1px 6px;
|
|||
|
|
border-radius: var(--radius); cursor: pointer;
|
|||
|
|
transition: var(--transition);
|
|||
|
|
border: 1px solid transparent; position: relative;
|
|||
|
|
}
|
|||
|
|
.conv-item:hover { background: var(--bg-hover); }
|
|||
|
|
.conv-item.active { background: var(--accent-soft); border-color: var(--accent); }
|
|||
|
|
/* 菜单打开期间条目保持 hover 视觉，且三点按钮强制常显 */
|
|||
|
|
.conv-item.is-menu-open { background: var(--bg-hover); border-color: var(--border-light); }
|
|||
|
|
/* 他人服务中的会话：整体降透明度（对齐 .conversation-item.other-agent） */
|
|||
|
|
.conv-item.other-agent { opacity: 0.8; }
|
|||
|
|
/* 待确认结单：琥珀色左边框（对齐 .conversation-item.pending-close） */
|
|||
|
|
.conv-item.pending-close { border-left: 3px solid var(--warning); }
|
|||
|
|
|
|||
|
|
/* 头像容器（含圆点） */
|
|||
|
|
.conv-avatar-wrap {
|
|||
|
|
position: relative; flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
/* 头像圆形 — 浅色主题：浅底+深色字 */
|
|||
|
|
/* v1.7-B：34px → 48px，对齐真实代码 .conv-avatar-wrap 48×48 */
|
|||
|
|
.conv-avatar {
|
|||
|
|
width: 48px; height: 48px; border-radius: 8px;
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
font-size: 16px; font-weight: 600;
|
|||
|
|
color: #1e293b;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
/* 浅色主题：各头像色系用浅底色 */
|
|||
|
|
.conv-avatar.av-blue { background: #dbeafe; color: #1e40af; }
|
|||
|
|
.conv-avatar.av-green { background: #dcfce7; color: #166534; }
|
|||
|
|
.conv-avatar.av-orange { background: #fff7ed; color: #9a3412; }
|
|||
|
|
.conv-avatar.av-purple { background: #ede9fe; color: #5b21b6; }
|
|||
|
|
.conv-avatar.av-red { background: #fee2e2; color: #991b1b; }
|
|||
|
|
.conv-avatar.av-teal { background: #f0fdfa; color: #115e59; }
|
|||
|
|
.conv-avatar.av-pink { background: #fce7f3; color: #9d174d; }
|
|||
|
|
|
|||
|
|
/* 新消息圆点（在头像右上角） */
|
|||
|
|
.new-msg-dot {
|
|||
|
|
position: absolute; top: -1px; right: -1px;
|
|||
|
|
width: 10px; height: 10px; border-radius: 50%;
|
|||
|
|
border: 2px solid var(--bg-secondary);
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
.new-msg-dot.dot-urgent { background: var(--danger); } /* 紧急：红色 */
|
|||
|
|
.new-msg-dot.dot-normal { background: var(--accent); } /* 普通：蓝色 */
|
|||
|
|
.new-msg-dot.dot-muted { background: var(--text-muted); }/* 低优：灰色 */
|
|||
|
|
|
|||
|
|
/* 会话内容区（姓名+预览+标签，夹在头像和右侧缩略头像之间） */
|
|||
|
|
.conv-content {
|
|||
|
|
flex: 1; min-width: 0; /* 允许文字截断 */
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== v1.7-B：条目第一行 — 置顶/代办图标 + 姓名 + 6类tag + 优先级图标 ===== */
|
|||
|
|
.conv-name-line {
|
|||
|
|
display: flex; align-items: center; gap: 3px;
|
|||
|
|
min-width: 0; line-height: 1.3;
|
|||
|
|
}
|
|||
|
|
.conv-name-line .conv-flag { font-size: 10px; flex-shrink: 0; }
|
|||
|
|
.conv-name-line .conv-name {
|
|||
|
|
font-size: 12px; font-weight: 500; color: var(--text-primary);
|
|||
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|||
|
|
min-width: 0; max-width: 62px;
|
|||
|
|
}
|
|||
|
|
/* 6 类 tag-badge（对齐 ConversationItem.vue:56-82） */
|
|||
|
|
.tag-badge {
|
|||
|
|
font-size: 9px; padding: 0 3px; border-radius: 3px;
|
|||
|
|
flex-shrink: 0; line-height: 14px; font-weight: 500;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
.tag-badge-vip { background: #fce7f3; color: #9d174d; }
|
|||
|
|
.tag-badge-hand-raise { background: #fee2e2; color: #b91c1c; }
|
|||
|
|
.tag-badge-need-intervene { background: #fef3c7; color: #b45309; }
|
|||
|
|
.tag-badge-emotion-urgent { background: #fee2e2; color: #dc2626; }
|
|||
|
|
.tag-badge-emotion-angry { background: #fee2e2; color: #991b1b; }
|
|||
|
|
.tag-badge-emotion-worried{ background: #e0e7ff; color: #4338ca; }
|
|||
|
|
.tag-badge-agent { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); }
|
|||
|
|
.tag-badge-pending-close { background: var(--warning-soft); color: #b45309; border: 1px solid var(--warning); }
|
|||
|
|
|
|||
|
|
/* ===== v1.7-B：条目第二行 — 摘要 + 时间 ===== */
|
|||
|
|
.conv-summary-row {
|
|||
|
|
display: flex; align-items: center; gap: 6px; margin-top: 2px;
|
|||
|
|
}
|
|||
|
|
.conv-summary-row .conv-summary {
|
|||
|
|
flex: 1; min-width: 0;
|
|||
|
|
font-size: 11px; color: var(--text-secondary);
|
|||
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
.conv-summary-row .conv-time-2 {
|
|||
|
|
flex-shrink: 0; font-size: 10px; color: var(--text-muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== v1.7-B：条目第三行 — 5星紧急度 + 接手/退出 link ===== */
|
|||
|
|
.conv-meta-row {
|
|||
|
|
display: flex; align-items: center; gap: 6px; margin-top: 2px;
|
|||
|
|
}
|
|||
|
|
.urgency-stars { display: inline-flex; gap: 0; line-height: 1; }
|
|||
|
|
.urgency-star { font-size: 9px; color: var(--warning); }
|
|||
|
|
.urgency-star.empty { color: var(--border-light); }
|
|||
|
|
.grab-btn, .leave-btn {
|
|||
|
|
font-size: 11px; padding: 0 4px; margin-left: auto;
|
|||
|
|
white-space: nowrap; background: none; border: none;
|
|||
|
|
cursor: pointer; flex-shrink: 0; font-family: inherit;
|
|||
|
|
}
|
|||
|
|
.grab-btn { color: var(--accent); }
|
|||
|
|
.leave-btn { color: var(--danger); }
|
|||
|
|
.grab-btn:hover, .leave-btn:hover { text-decoration: underline; }
|
|||
|
|
|
|||
|
|
/* ─────────────────────────────────────────────────────────────
|
|||
|
|
v1.7 · 改动组 C：三点操作按钮（决策 D-5 / 架构 §4.3）
|
|||
|
|
落位＝【替换】.conv-target-avatar（§1.3.2 方案 b）
|
|||
|
|
· 同一栅格位：两者叠放在同一个 28×28 容器内，绝对定位互相覆盖
|
|||
|
|
· hover 时缩略头像 opacity:0 淡出、三点 opacity:1 淡入
|
|||
|
|
· 布局盒模型不变 → 零布局抖动（规避风险 R-7）
|
|||
|
|
· 命中区 24×24，图标 MoreFilled 等价字符 14px
|
|||
|
|
· 默认隐藏；:hover / .is-menu-open / :focus-visible 时显示（保证键盘可达）
|
|||
|
|
───────────────────────────────────────────────────────────── */
|
|||
|
|
.conv-right-slot {
|
|||
|
|
position: relative; width: 28px; height: 28px;
|
|||
|
|
flex-shrink: 0; margin-left: auto;
|
|||
|
|
}
|
|||
|
|
/* 历史分区无缩略头像，三点按钮直接占该位（架构 §4.3 末条） */
|
|||
|
|
.conv-right-slot.slot-history .conv-target-avatar { display: none; }
|
|||
|
|
|
|||
|
|
/* C-5 决策（v1.7 主理人补 — 2026-08-09 13:00+）：
|
|||
|
|
宋献字面要求"历史会话三点按钮不渲染"，v1.7 主体基于 §4.4 可见性矩阵放宽为
|
|||
|
|
"任何分区、只要该条目菜单项全 hidden → 按钮不显示"，更通用（可覆盖赵敏那种
|
|||
|
|
"他人会话置顶代办不可用、菜单空"的边角）。落地：DOM 标 data-menu-empty="1"
|
|||
|
|
→ CSS 一律隐藏。备选"按分区一刀切隐藏"用 .conv-right-slot.slot-history .conv-menu-btn { display: none }
|
|||
|
|
一行替换即可，但前者更稳，留给 §4.4 矩阵驱动。 */
|
|||
|
|
.conv-menu-btn[data-menu-empty="1"] { display: none; }
|
|||
|
|
|
|||
|
|
/* 处理对象缩略头像（右侧小头像）— 浅色主题：浅底+深色字 */
|
|||
|
|
.conv-target-avatar {
|
|||
|
|
position: absolute; inset: 3px;
|
|||
|
|
width: 22px; height: 22px; border-radius: 50%;
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
font-size: 9px; font-weight: 600;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
color: #1e293b;
|
|||
|
|
opacity: 1; transition: opacity 0.18s ease;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
/* 三点按钮 */
|
|||
|
|
.conv-menu-btn {
|
|||
|
|
position: absolute; top: 2px; left: 2px;
|
|||
|
|
width: 24px; height: 24px; padding: 0;
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
border: none; border-radius: 5px; cursor: pointer;
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
color: var(--text-secondary); font-size: 14px; line-height: 1;
|
|||
|
|
box-shadow: 0 0 0 1px var(--border);
|
|||
|
|
opacity: 0; transition: opacity 0.18s ease, background 0.18s ease;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
.conv-menu-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
|
|||
|
|
/* hover / 菜单打开 / 键盘聚焦 → 三点淡入、缩略头像淡出 */
|
|||
|
|
.conv-item:hover .conv-menu-btn,
|
|||
|
|
.conv-item.is-menu-open .conv-menu-btn,
|
|||
|
|
.conv-menu-btn:focus-visible {
|
|||
|
|
opacity: 1; pointer-events: auto;
|
|||
|
|
}
|
|||
|
|
.conv-item:hover .conv-target-avatar,
|
|||
|
|
.conv-item.is-menu-open .conv-target-avatar {
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
.conv-target-avatar.ta-blue { background: #dbeafe; color: #1e40af; }
|
|||
|
|
.conv-target-avatar.ta-green { background: #dcfce7; color: #166534; }
|
|||
|
|
.conv-target-avatar.ta-orange { background: #fff7ed; color: #9a3412; }
|
|||
|
|
.conv-target-avatar.ta-purple { background: #ede9fe; color: #5b21b6; }
|
|||
|
|
.conv-target-avatar.ta-red { background: #fee2e2; color: #991b1b; }
|
|||
|
|
.conv-target-avatar.ta-teal { background: #f0fdfa; color: #115e59; }
|
|||
|
|
.conv-target-avatar.ta-pink { background: #fce7f3; color: #9d174d; }
|
|||
|
|
|
|||
|
|
/* 待办事项缩略头像 — 浅色主题：浅底+深色字 */
|
|||
|
|
.kanban-item .ki-avatar {
|
|||
|
|
width: 20px; height: 20px; border-radius: 50%;
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
font-size: 9px; font-weight: 600;
|
|||
|
|
flex-shrink: 0; margin-left: auto;
|
|||
|
|
color: #1e293b;
|
|||
|
|
}
|
|||
|
|
.ki-avatar.ka-blue { background: #dbeafe; color: #1e40af; }
|
|||
|
|
.ki-avatar.ka-green { background: #dcfce7; color: #166534; }
|
|||
|
|
.ki-avatar.ka-orange { background: #fff7ed; color: #9a3412; }
|
|||
|
|
.ki-avatar.ka-purple { background: #ede9fe; color: #5b21b6; }
|
|||
|
|
.ki-avatar.ka-red { background: #fee2e2; color: #991b1b; }
|
|||
|
|
|
|||
|
|
/* 深色主题：头像恢复渐变亮色 */
|
|||
|
|
[data-theme="dark"] .conv-avatar {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
[data-theme="dark"] .conv-avatar.av-blue { background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; }
|
|||
|
|
[data-theme="dark"] .conv-avatar.av-green { background: linear-gradient(135deg, #22c55e, #14b8a6); color: #fff; }
|
|||
|
|
[data-theme="dark"] .conv-avatar.av-orange { background: linear-gradient(135deg, #f97316, #eab308); color: #fff; }
|
|||
|
|
[data-theme="dark"] .conv-avatar.av-purple { background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff; }
|
|||
|
|
[data-theme="dark"] .conv-avatar.av-red { background: linear-gradient(135deg, #ef4444, #f97316); color: #fff; }
|
|||
|
|
[data-theme="dark"] .conv-avatar.av-teal { background: linear-gradient(135deg, #0ea5e9, #6366f1); color: #fff; }
|
|||
|
|
[data-theme="dark"] .conv-avatar.av-pink { background: linear-gradient(135deg, #ec4899, #f43f5e); color: #fff; }
|
|||
|
|
|
|||
|
|
[data-theme="dark"] .conv-target-avatar.ta-blue { background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; }
|
|||
|
|
[data-theme="dark"] .conv-target-avatar.ta-green { background: linear-gradient(135deg, #22c55e, #14b8a6); color: #fff; }
|
|||
|
|
[data-theme="dark"] .conv-target-avatar.ta-orange { background: linear-gradient(135deg, #f97316, #eab308); color: #fff; }
|
|||
|
|
[data-theme="dark"] .conv-target-avatar.ta-purple { background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff; }
|
|||
|
|
[data-theme="dark"] .conv-target-avatar.ta-red { background: linear-gradient(135deg, #ef4444, #f97316); color: #fff; }
|
|||
|
|
[data-theme="dark"] .conv-target-avatar.ta-teal { background: linear-gradient(135deg, #0ea5e9, #6366f1); color: #fff; }
|
|||
|
|
[data-theme="dark"] .conv-target-avatar.ta-pink { background: linear-gradient(135deg, #ec4899, #f43f5e); color: #fff; }
|
|||
|
|
|
|||
|
|
/* v1.7-B：优先级图标组右对齐（对齐真实代码 .priority-icons{margin-left:auto}） */
|
|||
|
|
.conv-name-line .priority-icons { margin-left: auto; }
|
|||
|
|
|
|||
|
|
/* ─────────────────────────────────────────────────────────────
|
|||
|
|
v1.7 · 改动组 C：会话条目操作菜单（单例浮层）
|
|||
|
|
🔴 开发硬约束（架构 §1.3.4 / 决策 D-4、D-6）：
|
|||
|
|
1) 菜单 DOM 必须【脱离左栏容器】。左栏存在双重裁剪：
|
|||
|
|
.workspace-sidebar{overflow:hidden} + .conversation-list-scroll{overflow-x:hidden}
|
|||
|
|
任何挂在 .conversation-item 内的 position:absolute 菜单【横向必被裁掉】
|
|||
|
|
2) 因此只有两条合规路径：position:fixed + 视口坐标，或 Teleport 到 body
|
|||
|
|
本原型采用 position:fixed 单节点 #convMenu，直接挂在 body 下
|
|||
|
|
3) 菜单为【全局单例】，挂 ConversationList 层而非条目内
|
|||
|
|
原因：PRD-011 U-5 虚拟滚动会回收并复用条目 DOM，
|
|||
|
|
菜单实例若挂条目内，滚动时 reference 元素被销毁 → 菜单错位或残留
|
|||
|
|
4) placement=bottom-end；视口下缘不足时自动翻转 top-end
|
|||
|
|
5) z-index 取 2000 对齐 Element Plus popper 基线
|
|||
|
|
（不可沿用 MessageItem.vue 的 1000 — 会被 EP 组件盖住，风险 R-3）
|
|||
|
|
───────────────────────────────────────────────────────────── */
|
|||
|
|
.conv-menu {
|
|||
|
|
position: fixed; z-index: 2000;
|
|||
|
|
width: 140px;
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.14);
|
|||
|
|
padding: 4px; display: none;
|
|||
|
|
animation: cm-in 0.12s ease;
|
|||
|
|
}
|
|||
|
|
.conv-menu.open { display: block; }
|
|||
|
|
@keyframes cm-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
|
|||
|
|
.conv-menu-item {
|
|||
|
|
display: flex; align-items: center; gap: 7px;
|
|||
|
|
padding: 6px 9px; border-radius: 4px;
|
|||
|
|
font-size: 12px; color: var(--text-primary);
|
|||
|
|
cursor: pointer; user-select: none; white-space: nowrap;
|
|||
|
|
transition: background 0.15s;
|
|||
|
|
}
|
|||
|
|
.conv-menu-item:hover { background: var(--accent-soft); color: var(--accent); }
|
|||
|
|
.conv-menu-item.is-disabled {
|
|||
|
|
color: var(--text-muted); cursor: not-allowed; opacity: 0.6;
|
|||
|
|
}
|
|||
|
|
.conv-menu-item.is-disabled:hover { background: transparent; color: var(--text-muted); }
|
|||
|
|
.conv-menu-item .cmi-icon { font-size: 12px; width: 14px; text-align: center; flex-shrink: 0; }
|
|||
|
|
.conv-menu-item .cmi-arrow { margin-left: auto; font-size: 10px; color: var(--text-muted); }
|
|||
|
|
.conv-menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }
|
|||
|
|
.conv-menu-empty { padding: 8px 9px; font-size: 11px; color: var(--text-muted); text-align: center; }
|
|||
|
|
/* 菜单头部：标明当前作用的会话，避免右键后不知道操作的是哪条 */
|
|||
|
|
.conv-menu-head {
|
|||
|
|
padding: 5px 9px 6px; font-size: 10px; color: var(--text-muted);
|
|||
|
|
border-bottom: 1px solid var(--border); margin-bottom: 4px;
|
|||
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* v1.7-C：转接坐席选择 Dialog（Q-3 决策：独立 Dialog，不做二级菜单） */
|
|||
|
|
.transfer-mask {
|
|||
|
|
position: fixed; inset: 0; background: rgba(0,0,0,0.4);
|
|||
|
|
z-index: 3000; display: none; align-items: center; justify-content: center;
|
|||
|
|
}
|
|||
|
|
.transfer-mask.open { display: flex; }
|
|||
|
|
.transfer-box {
|
|||
|
|
width: 340px; max-width: 92vw; background: var(--bg-secondary);
|
|||
|
|
border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 16px 18px;
|
|||
|
|
}
|
|||
|
|
.transfer-box h4 { font-size: 14px; margin-bottom: 4px; }
|
|||
|
|
.transfer-box .tf-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
|
|||
|
|
.tf-search {
|
|||
|
|
width: 100%; background: var(--bg-tertiary); border: 1px solid var(--border);
|
|||
|
|
border-radius: var(--radius); padding: 6px 10px; font-size: 12px;
|
|||
|
|
color: var(--text-primary); outline: none; font-family: inherit; margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
.tf-list { max-height: 220px; overflow-y: auto; }
|
|||
|
|
.tf-agent {
|
|||
|
|
display: flex; align-items: center; gap: 8px; padding: 7px 8px;
|
|||
|
|
border-radius: var(--radius); cursor: pointer; font-size: 12px;
|
|||
|
|
transition: background 0.15s;
|
|||
|
|
}
|
|||
|
|
.tf-agent:hover { background: var(--bg-hover); }
|
|||
|
|
.tf-agent .tf-av {
|
|||
|
|
width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
font-size: 10px; font-weight: 600; background: #dbeafe; color: #1e40af;
|
|||
|
|
}
|
|||
|
|
.tf-agent .tf-load { margin-left: auto; font-size: 10px; color: var(--text-muted); }
|
|||
|
|
.tf-agent .tf-load.busy { color: var(--warning); }
|
|||
|
|
.tf-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
|
|||
|
|
|
|||
|
|
[data-theme="dark"] .bar-user-avatar {
|
|||
|
|
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[data-theme="dark"] .user-avatar {
|
|||
|
|
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[data-theme="dark"] .ki-avatar.ka-blue { background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; }
|
|||
|
|
[data-theme="dark"] .ki-avatar.ka-green { background: linear-gradient(135deg, #22c55e, #14b8a6); color: #fff; }
|
|||
|
|
[data-theme="dark"] .ki-avatar.ka-orange { background: linear-gradient(135deg, #f97316, #eab308); color: #fff; }
|
|||
|
|
[data-theme="dark"] .ki-avatar.ka-purple { background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff; }
|
|||
|
|
[data-theme="dark"] .ki-avatar.ka-red { background: linear-gradient(135deg, #ef4444, #f97316); color: #fff; }
|
|||
|
|
|
|||
|
|
/* ===== 待办事项 ===== */
|
|||
|
|
.kanban { flex-shrink: 0; border-top: 1px solid var(--border); padding: 8px 12px; max-height: 220px; overflow-y: auto; }
|
|||
|
|
.kanban::-webkit-scrollbar { width: 4px; }
|
|||
|
|
.kanban::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
|||
|
|
.kanban-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; }
|
|||
|
|
.kanban-title .count { font-size: 10px; color: var(--danger); }
|
|||
|
|
.kanban-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius); font-size: 11px; margin-bottom: 3px; cursor: pointer; transition: var(--transition); }
|
|||
|
|
.kanban-item:hover { background: var(--bg-hover); }
|
|||
|
|
.kanban-item.active { background: var(--accent-soft); border: 1px solid var(--accent); }
|
|||
|
|
.kanban-item .ki-priority { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }
|
|||
|
|
.ki-priority.urgent { background: var(--danger); }
|
|||
|
|
.ki-priority.high { background: var(--warning); }
|
|||
|
|
.ki-priority.normal { background: var(--accent); }
|
|||
|
|
.ki-priority.done { background: var(--success); }
|
|||
|
|
.kanban-item.resolved { opacity: 0.6; }
|
|||
|
|
.kanban-item .ki-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
|
|||
|
|
.kanban-item .ki-type {
|
|||
|
|
font-size: 9px; padding: 1px 5px; border-radius: 4px;
|
|||
|
|
flex-shrink: 0; font-weight: 500;
|
|||
|
|
}
|
|||
|
|
.ki-type.ticket { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
|
|||
|
|
.ki-type.approval { background: var(--purple-soft); color: var(--purple); border: 1px solid var(--purple); }
|
|||
|
|
.ki-type.device { background: var(--orange-soft); color: var(--orange); border: 1px solid var(--orange); }
|
|||
|
|
.kanban-item .ki-time { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
|
|||
|
|
.kanban-stats { display: flex; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text-muted); }
|
|||
|
|
.kanban-stats span { display: flex; align-items: center; gap: 4px; }
|
|||
|
|
.kanban-stats .dot { width: 6px; height: 6px; border-radius: 50%; }
|
|||
|
|
.dot-online { background: var(--success); }
|
|||
|
|
.dot-busy { background: var(--warning); }
|
|||
|
|
.dot-offline { background: var(--text-muted); }
|
|||
|
|
|
|||
|
|
/* ========== CENTER COLUMN ========== */
|
|||
|
|
/* v1.7-A1：flex:1.5（配合右栏 flex:1 → 中右恒 6:4） */
|
|||
|
|
.center-column {
|
|||
|
|
flex: 1.5; min-width: 340px;
|
|||
|
|
display: flex; flex-direction: column;
|
|||
|
|
background: var(--bg-primary); overflow: hidden;
|
|||
|
|
transition: var(--transition);
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* --- Chat View (default) --- */
|
|||
|
|
.chat-view { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
|
|||
|
|
.chat-view.hidden { display: none; }
|
|||
|
|
|
|||
|
|
/* IT Level Badge */
|
|||
|
|
.it-level-badge {
|
|||
|
|
display: inline-flex; align-items: center; gap: 3px;
|
|||
|
|
padding: 2px 7px; border-radius: 10px;
|
|||
|
|
font-size: 10px; font-weight: 600;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
position: relative; cursor: help;
|
|||
|
|
}
|
|||
|
|
.it-level-badge.bronze { background: linear-gradient(135deg, #78350f, #92400e); color: #fef3c7; border: 1px solid #b45309; }
|
|||
|
|
.it-level-badge.silver { background: linear-gradient(135deg, #374151, #6b7280); color: #f3f4f6; border: 1px solid #9ca3af; }
|
|||
|
|
.it-level-badge.gold { background: linear-gradient(135deg, #92400e, #d97706); color: #fffbeb; border: 1px solid #f59e0b; }
|
|||
|
|
.it-level-badge.platinum { background: linear-gradient(135deg, #164e63, #0e7490); color: #cffafe; border: 1px solid #22d3ee; }
|
|||
|
|
.it-level-badge.diamond { background: linear-gradient(135deg, #312e81, #4338ca); color: #e0e7ff; border: 1px solid #818cf8; }
|
|||
|
|
.it-level-badge.star { background: linear-gradient(135deg, #831843, #be185d); color: #fce7f3; border: 1px solid #ec4899; }
|
|||
|
|
.it-level-badge.king { background: linear-gradient(135deg, #7c2d12, #c2410c); color: #ffedd5; border: 1px solid #f97316;
|
|||
|
|
animation: king-glow 2s ease-in-out infinite alternate;
|
|||
|
|
}
|
|||
|
|
@keyframes king-glow {
|
|||
|
|
from { box-shadow: 0 0 4px rgba(249,115,22,0.3); }
|
|||
|
|
to { box-shadow: 0 0 10px rgba(249,115,22,0.6); }
|
|||
|
|
}
|
|||
|
|
.it-level-badge .level-icon { font-size: 11px; }
|
|||
|
|
.it-level-badge .level-num { font-size: 9px; opacity: 0.8; }
|
|||
|
|
|
|||
|
|
/* User info bar */
|
|||
|
|
.user-info-bar {
|
|||
|
|
padding: 10px 16px; background: var(--bg-secondary);
|
|||
|
|
border-bottom: 1px solid var(--border);
|
|||
|
|
display: flex; align-items: center; gap: 10px;
|
|||
|
|
flex-shrink: 0; flex-wrap: wrap; cursor: pointer;
|
|||
|
|
transition: var(--transition); position: relative;
|
|||
|
|
box-shadow: var(--shadow-sm);
|
|||
|
|
}
|
|||
|
|
.user-info-bar:hover { background: var(--bg-hover); }
|
|||
|
|
.user-avatar {
|
|||
|
|
width: 36px; height: 36px; border-radius: 50%;
|
|||
|
|
background: #f3f4f6; color: #374151;
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
font-size: 14px; font-weight: 600; flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.user-name-section { display: flex; flex-direction: column; gap: 1px; }
|
|||
|
|
.user-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
|
|||
|
|
.user-dept { font-size: 11px; color: var(--text-secondary); }
|
|||
|
|
.info-chips { display: flex; gap: 5px; flex-wrap: wrap; }
|
|||
|
|
.info-chip { font-size: 11px; padding: 2px 8px; border-radius: 10px; display: flex; align-items: center; gap: 4px; }
|
|||
|
|
.info-chip.emotion { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning); }
|
|||
|
|
.info-chip.default { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); }
|
|||
|
|
.info-chip.repeat { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); }
|
|||
|
|
.info-chip.remark { background: var(--purple-soft); color: var(--purple); border: 1px solid var(--purple); }
|
|||
|
|
|
|||
|
|
/* Device status icons row */
|
|||
|
|
.device-status-row {
|
|||
|
|
display: flex; align-items: center; gap: 8px;
|
|||
|
|
margin-left: 6px; padding-left: 8px;
|
|||
|
|
border-left: 1px solid var(--border);
|
|||
|
|
}
|
|||
|
|
.dev-icon {
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
width: 26px; height: 26px; border-radius: 6px;
|
|||
|
|
font-size: 14px; cursor: default; position: relative;
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
background: var(--bg-tertiary); border: 1px solid var(--border);
|
|||
|
|
}
|
|||
|
|
.dev-icon:hover { transform: scale(1.15); }
|
|||
|
|
.dev-icon .dev-tooltip {
|
|||
|
|
display: none; position: absolute; bottom: calc(100% + 6px); left: 50%;
|
|||
|
|
transform: translateX(-50%); white-space: nowrap;
|
|||
|
|
background: var(--bg-primary); color: var(--text-primary);
|
|||
|
|
border: 1px solid var(--border); border-radius: 6px;
|
|||
|
|
padding: 4px 8px; font-size: 10px; z-index: 99;
|
|||
|
|
box-shadow: var(--shadow-sm);
|
|||
|
|
}
|
|||
|
|
.dev-icon:hover .dev-tooltip { display: block; }
|
|||
|
|
.dev-icon .dev-tooltip::after {
|
|||
|
|
content: ''; position: absolute; top: 100%; left: 50%;
|
|||
|
|
transform: translateX(-50%); border: 4px solid transparent;
|
|||
|
|
border-top-color: var(--border);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Device icon status variants */
|
|||
|
|
.dev-icon.online { color: #22c55e; border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.08); }
|
|||
|
|
.dev-icon.offline { color: var(--text-muted); opacity: 0.5; }
|
|||
|
|
.dev-icon.safe { color: #22c55e; border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.08); }
|
|||
|
|
.dev-icon.risk { color: var(--danger); border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.08); animation: pulse-risk 2s infinite; }
|
|||
|
|
.dev-icon.warn { color: var(--warning); border-color: rgba(234,179,8,0.3); background: rgba(234,179,8,0.08); }
|
|||
|
|
.dev-icon.certified { color: var(--accent); border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.08); }
|
|||
|
|
|
|||
|
|
@keyframes pulse-risk {
|
|||
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
|
|||
|
|
50% { box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Device badge (small superscript indicator) */
|
|||
|
|
.dev-icon .dev-badge {
|
|||
|
|
position: absolute; top: -3px; right: -3px;
|
|||
|
|
width: 8px; height: 8px; border-radius: 50%;
|
|||
|
|
border: 1.5px solid var(--bg-secondary);
|
|||
|
|
}
|
|||
|
|
.dev-icon .dev-badge.green { background: #22c55e; }
|
|||
|
|
.dev-icon .dev-badge.red { background: #ef4444; }
|
|||
|
|
.dev-icon .dev-badge.yellow { background: #eab308; }
|
|||
|
|
.dev-icon .dev-badge.gray { background: var(--text-muted); }
|
|||
|
|
|
|||
|
|
[data-theme="dark"] .dev-icon.online { background: rgba(34,197,94,0.15); }
|
|||
|
|
[data-theme="dark"] .dev-icon.safe { background: rgba(34,197,94,0.15); }
|
|||
|
|
[data-theme="dark"] .dev-icon.risk { background: rgba(239,68,68,0.15); }
|
|||
|
|
[data-theme="dark"] .dev-icon.warn { background: rgba(234,179,8,0.15); }
|
|||
|
|
[data-theme="dark"] .dev-icon.certified { background: rgba(59,130,246,0.15); }
|
|||
|
|
|
|||
|
|
.user-info-bar .expand-icon { margin-left: auto; color: var(--text-muted); font-size: 11px; transition: transform 0.3s; }
|
|||
|
|
.user-info-bar.expanded .expand-icon { transform: rotate(90deg); }
|
|||
|
|
|
|||
|
|
/* User detail panel */
|
|||
|
|
.user-detail-panel {
|
|||
|
|
max-height: 0; overflow: hidden;
|
|||
|
|
transition: max-height 0.35s ease, padding 0.35s ease;
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
border-bottom: 0px solid var(--border);
|
|||
|
|
padding: 0 16px; display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr 1fr; gap: 8px; font-size: 12px;
|
|||
|
|
}
|
|||
|
|
.user-info-bar.expanded + .user-detail-panel {
|
|||
|
|
max-height: 320px; padding: 12px 16px; border-bottom-width: 1px;
|
|||
|
|
}
|
|||
|
|
.detail-card { background: var(--bg-tertiary); border-radius: var(--radius); padding: 8px 10px; border: 1px solid var(--border); }
|
|||
|
|
.detail-card .dc-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
|
|||
|
|
.detail-card .dc-value { font-size: 12px; font-weight: 500; color: var(--text-primary); }
|
|||
|
|
.detail-card .dc-value.warn { color: var(--warning); }
|
|||
|
|
|
|||
|
|
/* Chat messages */
|
|||
|
|
.chat-messages {
|
|||
|
|
flex: 1; overflow-y: auto; padding: 16px 20px;
|
|||
|
|
display: flex; flex-direction: column; gap: 10px;
|
|||
|
|
min-height: 0; /* allow shrink */
|
|||
|
|
}
|
|||
|
|
.chat-messages::-webkit-scrollbar { width: 4px; }
|
|||
|
|
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
|||
|
|
.msg-bubble {
|
|||
|
|
max-width: 72%; padding: 10px 14px; border-radius: var(--radius-lg);
|
|||
|
|
font-size: 13px; line-height: 1.6; word-break: break-word;
|
|||
|
|
box-shadow: var(--shadow-sm);
|
|||
|
|
}
|
|||
|
|
.msg-user {
|
|||
|
|
align-self: flex-start; background: var(--bg-secondary);
|
|||
|
|
border: 1px solid var(--border); color: var(--text-primary);
|
|||
|
|
border-bottom-left-radius: 2px;
|
|||
|
|
}
|
|||
|
|
.msg-agent {
|
|||
|
|
align-self: flex-end; background: var(--accent); color: #fff;
|
|||
|
|
border-bottom-right-radius: 2px;
|
|||
|
|
}
|
|||
|
|
[data-theme="dark"] .msg-agent { background: #1e5a9e; }
|
|||
|
|
.msg-system {
|
|||
|
|
align-self: center; font-size: 11px; color: var(--text-muted);
|
|||
|
|
padding: 3px 12px; background: var(--bg-tertiary); border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* AI recommend inline */
|
|||
|
|
.ai-recommend-inline {
|
|||
|
|
align-self: stretch; background: var(--accent-soft);
|
|||
|
|
border: 1px dashed var(--accent); border-radius: var(--radius-lg);
|
|||
|
|
padding: 10px 14px; margin: 4px 0;
|
|||
|
|
}
|
|||
|
|
[data-theme="dark"] .ai-recommend-inline { background: rgba(77,166,255,0.06); border-color: rgba(77,166,255,0.3); }
|
|||
|
|
.ai-recommend-inline .ari-label {
|
|||
|
|
font-size: 10px; color: var(--accent); text-transform: uppercase;
|
|||
|
|
letter-spacing: 1px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
|
|||
|
|
}
|
|||
|
|
.ari-options { display: flex; gap: 8px; }
|
|||
|
|
.ari-opt {
|
|||
|
|
flex: 1; padding: 8px 12px; background: var(--bg-secondary);
|
|||
|
|
border: 1px solid var(--border-light); border-radius: var(--radius);
|
|||
|
|
font-size: 12px; color: var(--text-primary); cursor: pointer;
|
|||
|
|
transition: var(--transition); text-align: left; line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
.ari-opt:hover { border-color: var(--accent); background: var(--bg-hover); }
|
|||
|
|
.ari-opt .ari-shortcut { font-size: 10px; color: var(--text-muted); float: right; margin-left: 8px; background: var(--bg-tertiary); padding: 1px 5px; border-radius: 3px; }
|
|||
|
|
|
|||
|
|
/* Chat input — v5.4: 上边框可拖拽调整高度 */
|
|||
|
|
.chat-input-area {
|
|||
|
|
padding: 0 12px 8px 12px;
|
|||
|
|
background: var(--bg-primary);
|
|||
|
|
border-top: none;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
position: relative;
|
|||
|
|
min-height: 50px;
|
|||
|
|
display: flex; flex-direction: column;
|
|||
|
|
}
|
|||
|
|
/* 输入框上方的拖拽手柄 */
|
|||
|
|
.chat-input-area .input-resize-handle {
|
|||
|
|
position: absolute; top: 0; left: 0; right: 0;
|
|||
|
|
height: 4px; cursor: row-resize;
|
|||
|
|
background: var(--border);
|
|||
|
|
transition: background 0.2s;
|
|||
|
|
z-index: 5;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.chat-input-area .input-resize-handle:hover,
|
|||
|
|
.chat-input-area .input-resize-handle.dragging {
|
|||
|
|
background: var(--accent);
|
|||
|
|
}
|
|||
|
|
.chat-input-area .input-resize-handle::after {
|
|||
|
|
content: '···';
|
|||
|
|
position: absolute; top: 50%; left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
font-size: 10px; letter-spacing: 2px;
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
opacity: 0; transition: opacity 0.2s;
|
|||
|
|
}
|
|||
|
|
.chat-input-area .input-resize-handle:hover::after,
|
|||
|
|
.chat-input-area .input-resize-handle.dragging::after {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 快捷工具栏 — 整合圆角卡片风格 */
|
|||
|
|
/* v1.7 · 改动组 A4：工具栏重组 + 图标统一
|
|||
|
|
· 工具栏整体上移左对齐，紧贴消息输入框左上角
|
|||
|
|
· 常规工具组 ✂️截图/📷拍照/😊表情/📎文件/👥邀请
|
|||
|
|
· AI 工具组 💡自动补齐/🎚️语气/🖌️润色/🔄改写（纯 emoji，无文字标签）
|
|||
|
|
· 两组间一条分隔线；AI 组【不带高亮底色】——已移除 .toolbar-right{background:var(--accent-soft)}
|
|||
|
|
理由：原浅蓝胶囊底色使 AI 组呈现被单独强调的视觉权重落差，与常规按钮不对等
|
|||
|
|
· AI 按钮与常规按钮共用同一 .tb-btn 样式（同尺寸/圆角/悬停态/透明度），仅用原生 title 悬浮提示 */
|
|||
|
|
.chat-toolbar {
|
|||
|
|
display: flex; align-items: center; gap: 2px;
|
|||
|
|
padding: 8px 0 4px 0;
|
|||
|
|
flex-shrink: 0; flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
.toolbar-left, .toolbar-right {
|
|||
|
|
display: flex; align-items: center; gap: 1px;
|
|||
|
|
padding: 3px 6px; border-radius: var(--radius);
|
|||
|
|
}
|
|||
|
|
/* 常规组保留中性 group 背景仅作分组提示，非高亮强调 */
|
|||
|
|
.toolbar-left { background: var(--bg-tertiary); }
|
|||
|
|
/* v1.7-A4：.toolbar-right 无 background —— AI 组不带高亮底色 */
|
|||
|
|
.chat-toolbar .tb-btn {
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
width: 32px; height: 28px;
|
|||
|
|
border: none; background: transparent;
|
|||
|
|
border-radius: var(--radius); cursor: pointer;
|
|||
|
|
font-size: 14px; color: var(--text-muted);
|
|||
|
|
transition: all var(--transition);
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.chat-toolbar .tb-btn:hover {
|
|||
|
|
background: var(--accent-soft);
|
|||
|
|
color: var(--accent);
|
|||
|
|
}
|
|||
|
|
.chat-toolbar .tb-btn:active {
|
|||
|
|
transform: scale(0.92);
|
|||
|
|
}
|
|||
|
|
.chat-toolbar .tb-btn .tb-tip {
|
|||
|
|
display: none; position: absolute; bottom: 100%; left: 50%;
|
|||
|
|
transform: translateX(-50%); margin-bottom: 6px;
|
|||
|
|
background: var(--text-primary); color: var(--bg-secondary);
|
|||
|
|
font-size: 10px; padding: 3px 8px; border-radius: 4px;
|
|||
|
|
white-space: nowrap; pointer-events: none;
|
|||
|
|
box-shadow: var(--shadow);
|
|||
|
|
}
|
|||
|
|
.chat-toolbar .tb-btn .tb-tip::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute; top: 100%; left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
border: 4px solid transparent;
|
|||
|
|
border-top-color: var(--text-primary);
|
|||
|
|
}
|
|||
|
|
.chat-toolbar .tb-btn:hover .tb-tip { display: block; }
|
|||
|
|
.chat-toolbar .tb-sep {
|
|||
|
|
width: 1px; height: 14px; background: var(--border);
|
|||
|
|
margin: 0 6px; flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 输入行 — 整合为圆角卡片 */
|
|||
|
|
.chat-input-row {
|
|||
|
|
display: flex; gap: 8px; align-items: stretch; flex: 1; min-height: 0;
|
|||
|
|
}
|
|||
|
|
/* 输入框容器（含textarea + 发送按钮，统一圆角卡片） */
|
|||
|
|
.chat-input-card {
|
|||
|
|
flex: 1; display: flex; align-items: flex-end;
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
border-radius: var(--radius-lg);
|
|||
|
|
overflow: hidden;
|
|||
|
|
transition: border-color var(--transition), box-shadow var(--transition);
|
|||
|
|
box-shadow: var(--shadow-sm);
|
|||
|
|
}
|
|||
|
|
.chat-input-card:focus-within {
|
|||
|
|
border-color: var(--accent);
|
|||
|
|
box-shadow: 0 0 0 2px var(--accent-soft);
|
|||
|
|
}
|
|||
|
|
.chat-input {
|
|||
|
|
flex: 1; background: transparent; border: none;
|
|||
|
|
padding: 10px 0 10px 14px;
|
|||
|
|
color: var(--text-primary); font-size: 13px; font-family: inherit;
|
|||
|
|
resize: none; min-height: 60px; max-height: 300px; outline: none;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
.chat-input:focus { outline: none; }
|
|||
|
|
.chat-input::placeholder { color: var(--text-muted); }
|
|||
|
|
/* 发送按钮 — 内嵌于卡片右侧 */
|
|||
|
|
.btn-send {
|
|||
|
|
padding: 8px 18px; margin: 4px 6px 4px 0;
|
|||
|
|
background: var(--accent);
|
|||
|
|
color: #fff; border: none; border-radius: var(--radius);
|
|||
|
|
font-size: 12px; font-weight: 600; cursor: pointer;
|
|||
|
|
transition: all var(--transition); flex-shrink: 0;
|
|||
|
|
letter-spacing: 0.5px;
|
|||
|
|
}
|
|||
|
|
.btn-send:hover {
|
|||
|
|
opacity: 0.9;
|
|||
|
|
box-shadow: 0 2px 8px rgba(59,130,246,0.3);
|
|||
|
|
}
|
|||
|
|
.btn-send:active {
|
|||
|
|
transform: scale(0.95);
|
|||
|
|
}
|
|||
|
|
[data-theme="dark"] .btn-send {
|
|||
|
|
background: linear-gradient(135deg, var(--accent), var(--purple));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ========== TROUBLESHOOT BAR (always visible, flowchart collapsible) ========== */
|
|||
|
|
.troubleshoot-bar {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
border-top: 1px solid var(--border);
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
display: flex; flex-direction: column;
|
|||
|
|
transition: var(--transition);
|
|||
|
|
max-height: 400px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
/* Bar is ALWAYS expanded — no .collapsed class used for the bar itself */
|
|||
|
|
|
|||
|
|
.ts-header {
|
|||
|
|
display: flex; align-items: center; gap: 0;
|
|||
|
|
padding: 6px 12px; flex-shrink: 0;
|
|||
|
|
min-height: 36px;
|
|||
|
|
background: var(--bg-tertiary);
|
|||
|
|
border-bottom: 1px solid var(--border);
|
|||
|
|
cursor: default;
|
|||
|
|
}
|
|||
|
|
.ts-header:hover { background: var(--bg-hover); }
|
|||
|
|
.ts-title {
|
|||
|
|
font-size: 13px; font-weight: 600;
|
|||
|
|
display: flex; align-items: center; gap: 6px;
|
|||
|
|
flex-shrink: 0; margin-right: 10px;
|
|||
|
|
}
|
|||
|
|
/* Inline path steps inside header */
|
|||
|
|
.ts-path-inline {
|
|||
|
|
display: flex; align-items: center; gap: 0;
|
|||
|
|
flex: 1; overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.path-step {
|
|||
|
|
padding: 2px 7px;
|
|||
|
|
background: var(--bg-tertiary);
|
|||
|
|
border: 1px solid var(--border-light);
|
|||
|
|
border-radius: 3px;
|
|||
|
|
font-size: 11px; color: var(--text-secondary);
|
|||
|
|
white-space: nowrap; flex-shrink: 0;
|
|||
|
|
cursor: pointer; transition: var(--transition);
|
|||
|
|
}
|
|||
|
|
.path-step:hover { border-color: var(--accent); color: var(--accent); }
|
|||
|
|
.path-step.done { background: var(--success-soft); border-color: var(--success); color: var(--success); }
|
|||
|
|
.path-step.current { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
|
|||
|
|
.path-arrow-inline { display: flex; align-items: center; color: var(--text-muted); font-size: 10px; padding: 0 3px; flex-shrink: 0; }
|
|||
|
|
/* Flowchart toggle — triangle icon only */
|
|||
|
|
.ts-flowchart-toggle {
|
|||
|
|
font-size: 12px; color: var(--accent);
|
|||
|
|
cursor: pointer; padding: 4px 6px;
|
|||
|
|
border-radius: 3px; transition: var(--transition);
|
|||
|
|
user-select: none; flex-shrink: 0; line-height: 1;
|
|||
|
|
}
|
|||
|
|
.ts-flowchart-toggle:hover { background: var(--accent-soft); }
|
|||
|
|
|
|||
|
|
/* Full flowchart (collapsed by default — toggled via .show-flow on bar) */
|
|||
|
|
.ts-flowchart {
|
|||
|
|
padding: 10px 16px 14px;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
max-height: 0;
|
|||
|
|
transition: max-height 0.35s ease, padding 0.35s ease;
|
|||
|
|
padding-top: 0;
|
|||
|
|
padding-bottom: 0;
|
|||
|
|
}
|
|||
|
|
.troubleshoot-bar.show-flow .ts-flowchart {
|
|||
|
|
max-height: 300px;
|
|||
|
|
padding: 10px 16px 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flow-step {
|
|||
|
|
display: flex; align-items: flex-start; gap: 10px;
|
|||
|
|
margin-bottom: 4px; position: relative;
|
|||
|
|
}
|
|||
|
|
.flow-step:last-child { margin-bottom: 0; }
|
|||
|
|
.flow-step-connector {
|
|||
|
|
position: absolute; left: 10px; top: 26px; bottom: -12px;
|
|||
|
|
width: 2px; background: var(--border);
|
|||
|
|
}
|
|||
|
|
.flow-step:last-child .flow-step-connector { display: none; }
|
|||
|
|
.flow-node {
|
|||
|
|
width: 22px; height: 22px; border-radius: 50%;
|
|||
|
|
background: var(--accent-soft); color: var(--accent);
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
font-size: 10px; font-weight: 600; flex-shrink: 0;
|
|||
|
|
z-index: 1; border: 1px solid var(--accent);
|
|||
|
|
}
|
|||
|
|
.flow-node.done { background: var(--success-soft); color: var(--success); border-color: var(--success); }
|
|||
|
|
.flow-node.judge {
|
|||
|
|
width: auto; height: auto; border-radius: var(--radius);
|
|||
|
|
padding: 3px 8px; font-size: 10px; font-weight: 500;
|
|||
|
|
background: var(--warning-soft); color: var(--warning); border-color: var(--warning);
|
|||
|
|
}
|
|||
|
|
.flow-content { flex: 1; }
|
|||
|
|
.flow-title { font-size: 12px; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
|
|||
|
|
.flow-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }
|
|||
|
|
.flow-branch {
|
|||
|
|
margin-left: 20px; margin-top: 4px;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
border-left: 2px dashed var(--border-light);
|
|||
|
|
}
|
|||
|
|
.flow-branch-item {
|
|||
|
|
font-size: 11px; color: var(--text-muted);
|
|||
|
|
padding: 2px 0;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: var(--transition);
|
|||
|
|
}
|
|||
|
|
.flow-branch-item:hover { color: var(--accent); }
|
|||
|
|
.flow-branch-item.active { color: var(--success); font-weight: 500; }
|
|||
|
|
|
|||
|
|
/* ========== TASK DETAIL VIEW ========== */
|
|||
|
|
.task-detail-view {
|
|||
|
|
display: none;
|
|||
|
|
flex-direction: column;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.task-detail-view.active { display: flex; }
|
|||
|
|
.task-detail-header {
|
|||
|
|
padding: 10px 16px; background: var(--bg-secondary);
|
|||
|
|
border-bottom: 1px solid var(--border);
|
|||
|
|
display: flex; align-items: center; gap: 10px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
box-shadow: var(--shadow-sm);
|
|||
|
|
}
|
|||
|
|
.btn-back {
|
|||
|
|
padding: 4px 10px; background: var(--bg-tertiary);
|
|||
|
|
border: 1px solid var(--border); border-radius: var(--radius);
|
|||
|
|
cursor: pointer; font-size: 12px; color: var(--text-secondary);
|
|||
|
|
transition: var(--transition);
|
|||
|
|
}
|
|||
|
|
.btn-back:hover { background: var(--bg-hover); color: var(--text-primary); }
|
|||
|
|
.task-detail-header .task-title { font-size: 14px; font-weight: 600; flex: 1; }
|
|||
|
|
.task-detail-header .task-type-badge {
|
|||
|
|
font-size: 10px; padding: 2px 8px; border-radius: 10px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-detail-body {
|
|||
|
|
flex: 1; overflow-y: auto; padding: 16px;
|
|||
|
|
display: flex; flex-direction: column; gap: 12px;
|
|||
|
|
}
|
|||
|
|
.task-detail-body::-webkit-scrollbar { width: 4px; }
|
|||
|
|
.task-detail-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
|||
|
|
|
|||
|
|
.task-info-card {
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
border-radius: var(--radius-lg);
|
|||
|
|
padding: 14px 16px;
|
|||
|
|
}
|
|||
|
|
.task-info-card .tic-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
|
|||
|
|
.task-info-card .tic-row { display: flex; gap: 12px; margin-bottom: 4px; font-size: 12px; }
|
|||
|
|
.task-info-card .tic-label { color: var(--text-muted); min-width: 70px; }
|
|||
|
|
.task-info-card .tic-value { color: var(--text-primary); font-weight: 500; }
|
|||
|
|
.task-info-card .tic-desc {
|
|||
|
|
margin-top: 8px; padding-top: 8px;
|
|||
|
|
border-top: 1px solid var(--border);
|
|||
|
|
font-size: 12px; color: var(--text-secondary); line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-actions {
|
|||
|
|
display: flex; gap: 8px; flex-shrink: 0;
|
|||
|
|
padding: 10px 16px; background: var(--bg-secondary);
|
|||
|
|
border-top: 1px solid var(--border);
|
|||
|
|
}
|
|||
|
|
.btn-action {
|
|||
|
|
padding: 8px 18px; border-radius: var(--radius);
|
|||
|
|
font-size: 12px; font-weight: 500; cursor: pointer;
|
|||
|
|
transition: var(--transition); border: 1px solid transparent;
|
|||
|
|
}
|
|||
|
|
.btn-action.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
|
|||
|
|
.btn-action.primary:hover { opacity: 0.9; }
|
|||
|
|
.btn-action.success { background: var(--success); color: #fff; border-color: var(--success); }
|
|||
|
|
.btn-action.success:hover { opacity: 0.9; }
|
|||
|
|
.btn-action.warning { background: var(--warning); color: #fff; border-color: var(--warning); }
|
|||
|
|
.btn-action.warning:hover { opacity: 0.9; }
|
|||
|
|
.btn-action.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
|
|||
|
|
.btn-action.danger:hover { opacity: 0.9; }
|
|||
|
|
.btn-action.default { background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border); }
|
|||
|
|
.btn-action.default:hover { background: var(--bg-hover); color: var(--text-primary); }
|
|||
|
|
|
|||
|
|
/* Approval comment */
|
|||
|
|
.approval-section {
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
border-radius: var(--radius-lg);
|
|||
|
|
padding: 14px 16px;
|
|||
|
|
}
|
|||
|
|
.approval-section .as-title { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
|
|||
|
|
.approval-textarea {
|
|||
|
|
width: 100%; min-height: 80px; resize: vertical;
|
|||
|
|
background: var(--bg-tertiary); border: 1px solid var(--border);
|
|||
|
|
border-radius: var(--radius); padding: 8px 10px;
|
|||
|
|
color: var(--text-primary); font-size: 12px; font-family: inherit;
|
|||
|
|
outline: none; transition: border-color var(--transition);
|
|||
|
|
}
|
|||
|
|
.approval-textarea:focus { border-color: var(--accent); }
|
|||
|
|
.approval-textarea::placeholder { color: var(--text-muted); }
|
|||
|
|
|
|||
|
|
.device-status-grid {
|
|||
|
|
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
|
|||
|
|
}
|
|||
|
|
.device-status-item {
|
|||
|
|
background: var(--bg-tertiary); border: 1px solid var(--border);
|
|||
|
|
border-radius: var(--radius); padding: 8px 10px;
|
|||
|
|
}
|
|||
|
|
.device-status-item .dsi-label { font-size: 10px; color: var(--text-muted); margin-bottom: 2px; }
|
|||
|
|
.device-status-item .dsi-value { font-size: 12px; font-weight: 500; }
|
|||
|
|
.dsi-value.normal { color: var(--success); }
|
|||
|
|
.dsi-value.warning { color: var(--warning); }
|
|||
|
|
.dsi-value.danger { color: var(--danger); }
|
|||
|
|
|
|||
|
|
/* ========== RIGHT SIDEBAR ========== */
|
|||
|
|
/* v1.7-A1：flex:1（与中栏 flex:1.5 构成恒定 4:6），无 max-width 上限 */
|
|||
|
|
.sidebar-right {
|
|||
|
|
flex: 1; min-width: 320px;
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
border-left: none;
|
|||
|
|
display: flex; flex-direction: column;
|
|||
|
|
overflow: hidden; transition: var(--transition);
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* AI Recommend */
|
|||
|
|
/* v1.7 · 改动组 A3：右栏 AI 智能推荐改【纵向堆叠】
|
|||
|
|
v1.3/v1.4 为横向滚动卡片行（display:flex; overflow-x:auto），一屏仅见 1-3 条需横滑；
|
|||
|
|
此处改为 flex-direction:column，每条占满右栏宽度，自上而下依次排列。
|
|||
|
|
保留原信息密度：数字快捷键徽标 + 方案标题 + 置信度药丸 + 两行截断正文，点击回填输入框 */
|
|||
|
|
.ai-recommend-section { flex-shrink: 0; padding: 10px 12px; border-bottom: 1px solid var(--border); }
|
|||
|
|
.ai-recommend-section .ars-title {
|
|||
|
|
font-size: 12px; font-weight: 600; color: var(--accent);
|
|||
|
|
margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
|
|||
|
|
}
|
|||
|
|
.ai-recommend-section .ars-title::before {
|
|||
|
|
content: ''; width: 3px; height: 12px;
|
|||
|
|
background: var(--accent); border-radius: 2px; display: inline-block;
|
|||
|
|
}
|
|||
|
|
.ars-refresh { margin-left: auto; cursor: pointer; font-size: 12px; opacity: 0.7; transition: var(--transition); }
|
|||
|
|
.ars-refresh:hover { opacity: 1; transform: rotate(90deg); }
|
|||
|
|
/* v1.7-A3：纵向列表容器（原为横向滚动行） */
|
|||
|
|
.ars-list { display: flex; flex-direction: column; gap: 6px; }
|
|||
|
|
.ars-card {
|
|||
|
|
background: var(--bg-tertiary); border: 1px solid var(--border);
|
|||
|
|
border-radius: var(--radius); padding: 7px 9px;
|
|||
|
|
cursor: pointer; transition: var(--transition);
|
|||
|
|
display: flex; flex-direction: column; gap: 3px;
|
|||
|
|
}
|
|||
|
|
.ars-card:hover { border-color: var(--accent); background: var(--bg-hover); }
|
|||
|
|
.ars-card .ars-card-header { display: flex; align-items: center; gap: 6px; }
|
|||
|
|
/* 数字快捷键徽标 */
|
|||
|
|
.ars-shortcut {
|
|||
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|||
|
|
width: 16px; height: 16px; font-size: 10px; font-family: monospace; font-weight: 600;
|
|||
|
|
color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent);
|
|||
|
|
border-radius: 3px; line-height: 1; flex-shrink: 0; transition: var(--transition);
|
|||
|
|
}
|
|||
|
|
.ars-card:hover .ars-shortcut { background: var(--accent); color: #fff; }
|
|||
|
|
.ars-card-title { font-size: 12px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|||
|
|
.ars-card .ars-confidence { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--success-soft); color: var(--success); flex-shrink: 0; }
|
|||
|
|
.ars-card .ars-card-text { font-size: 11px; color: var(--text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|||
|
|
.ars-card .ars-shortcut-hint { font-size: 10px; color: var(--text-muted); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
|
|||
|
|
.key-badge {
|
|||
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|||
|
|
font-size: 10px; padding: 1px 5px; background: var(--bg-hover);
|
|||
|
|
border: 1px solid var(--border); border-radius: 3px;
|
|||
|
|
color: var(--text-muted); min-width: 18px; font-family: monospace;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Quick Reply — 三层渐进式导航 */
|
|||
|
|
.quick-reply-section { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
|
|||
|
|
|
|||
|
|
/* 搜索栏 */
|
|||
|
|
.qr-search { padding: 8px 12px; flex-shrink: 0; position: relative; }
|
|||
|
|
.qr-search-input {
|
|||
|
|
width: 100%; background: var(--bg-tertiary); border: 1px solid var(--border);
|
|||
|
|
border-radius: var(--radius); padding: 7px 10px 7px 28px;
|
|||
|
|
color: var(--text-primary); font-size: 12px; font-family: inherit;
|
|||
|
|
outline: none; transition: border-color var(--transition);
|
|||
|
|
}
|
|||
|
|
.qr-search-input:focus { border-color: var(--accent); }
|
|||
|
|
.qr-search-input::placeholder { color: var(--text-muted); font-size: 11px; }
|
|||
|
|
.qr-search-icon { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 12px; }
|
|||
|
|
|
|||
|
|
/* 面包屑导航：显示当前路径 L1 > L2 */
|
|||
|
|
.qr-breadcrumb {
|
|||
|
|
padding: 6px 12px; flex-shrink: 0;
|
|||
|
|
font-size: 11px; color: var(--text-secondary);
|
|||
|
|
display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
|
|||
|
|
border-bottom: 1px solid var(--border);
|
|||
|
|
background: var(--bg-tertiary);
|
|||
|
|
min-height: 28px;
|
|||
|
|
}
|
|||
|
|
.qr-breadcrumb .bc-back {
|
|||
|
|
cursor: pointer; color: var(--accent); font-weight: 500;
|
|||
|
|
padding: 1px 6px; border-radius: 3px;
|
|||
|
|
transition: var(--transition);
|
|||
|
|
}
|
|||
|
|
.qr-breadcrumb .bc-back:hover { background: var(--accent-soft); }
|
|||
|
|
.qr-breadcrumb .bc-sep { color: var(--text-muted); }
|
|||
|
|
.qr-breadcrumb .bc-current { font-weight: 600; color: var(--text-primary); }
|
|||
|
|
.qr-breadcrumb .bc-hint {
|
|||
|
|
margin-left: auto; font-size: 10px; color: var(--text-muted);
|
|||
|
|
display: flex; align-items: center; gap: 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== L1 一级目录：7列网格，强制一行，按钮内上下排列 ===== */
|
|||
|
|
.qr-l1-grid {
|
|||
|
|
padding: 4px 6px 6px; flex-shrink: 0;
|
|||
|
|
border-bottom: 1px solid var(--border);
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(7, 1fr);
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
.qr-l1-grid.hidden { display: none; }
|
|||
|
|
.qr-l1-btn {
|
|||
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|||
|
|
gap: 2px;
|
|||
|
|
padding: 5px 2px;
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
cursor: pointer; transition: var(--transition);
|
|||
|
|
font-size: 10px; color: var(--text-secondary);
|
|||
|
|
background: transparent;
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
min-width: 0; overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.qr-l1-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-light); }
|
|||
|
|
.qr-l1-btn.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 600; }
|
|||
|
|
/* L1 按钮颜色 — 7个主类（nth-child） */
|
|||
|
|
.qr-l1-btn:nth-child(1).active { background: #dbeafe; color: #1e40af; border-color: #3b82f6; }
|
|||
|
|
.qr-l1-btn:nth-child(1).active .l1-num { background: #3b82f6; color: #fff; }
|
|||
|
|
.qr-l1-btn:nth-child(2).active { background: #dcfce7; color: #166534; border-color: #22c55e; }
|
|||
|
|
.qr-l1-btn:nth-child(2).active .l1-num { background: #22c55e; color: #fff; }
|
|||
|
|
.qr-l1-btn:nth-child(3).active { background: #fff7ed; color: #9a3412; border-color: #f97316; }
|
|||
|
|
.qr-l1-btn:nth-child(3).active .l1-num { background: #f97316; color: #fff; }
|
|||
|
|
.qr-l1-btn:nth-child(4).active { background: #ede9fe; color: #5b21b6; border-color: #8b5cf6; }
|
|||
|
|
.qr-l1-btn:nth-child(4).active .l1-num { background: #8b5cf6; color: #fff; }
|
|||
|
|
.qr-l1-btn:nth-child(5).active { background: #fee2e2; color: #991b1b; border-color: #ef4444; }
|
|||
|
|
.qr-l1-btn:nth-child(5).active .l1-num { background: #ef4444; color: #fff; }
|
|||
|
|
.qr-l1-btn:nth-child(6).active { background: #f0fdfa; color: #115e59; border-color: #0ea5e9; }
|
|||
|
|
.qr-l1-btn:nth-child(6).active .l1-num { background: #0ea5e9; color: #fff; }
|
|||
|
|
.qr-l1-btn:nth-child(7).active { background: #f3f4f6; color: #374151; border-color: #6b7280; }
|
|||
|
|
.qr-l1-btn:nth-child(7).active .l1-num { background: #6b7280; color: #fff; }
|
|||
|
|
.qr-l1-btn .l1-num {
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
width: 18px; height: 18px; border-radius: 4px;
|
|||
|
|
background: var(--bg-tertiary); color: var(--text-muted);
|
|||
|
|
font-size: 10px; font-weight: 700; flex-shrink: 0;
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
}
|
|||
|
|
.qr-l1-btn .l1-name {
|
|||
|
|
font-size: 10px; line-height: 1.2;
|
|||
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|||
|
|
max-width: 100%;
|
|||
|
|
}
|
|||
|
|
.qr-l1-btn.active .l1-num { background: var(--accent); color: #fff; border-color: var(--accent); }
|
|||
|
|
|
|||
|
|
/* ===== L2 二级目录：横向流式，1-2行 ===== */
|
|||
|
|
.qr-l2-row {
|
|||
|
|
padding: 6px 10px; flex-shrink: 0;
|
|||
|
|
border-bottom: 1px solid var(--border);
|
|||
|
|
display: flex; flex-wrap: wrap; gap: 4px;
|
|||
|
|
}
|
|||
|
|
.qr-l2-row.hidden { display: none; }
|
|||
|
|
.qr-l2-chip {
|
|||
|
|
display: flex; align-items: center; gap: 4px;
|
|||
|
|
padding: 4px 10px; border-radius: 12px;
|
|||
|
|
cursor: pointer; transition: var(--transition);
|
|||
|
|
font-size: 11px; color: var(--text-secondary);
|
|||
|
|
background: var(--bg-tertiary);
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
.qr-l2-chip:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-light); }
|
|||
|
|
.qr-l2-chip.selected { background: var(--qr-active-light, var(--accent-soft)); color: var(--qr-active-color, var(--accent)); border-color: var(--qr-active-color, var(--accent)); font-weight: 600; }
|
|||
|
|
.qr-l2-chip .l2-num {
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
width: 16px; height: 16px; border-radius: 50%;
|
|||
|
|
background: var(--bg-hover); color: var(--text-muted);
|
|||
|
|
font-size: 9px; font-weight: 700; flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.qr-l2-chip.selected .l2-num { background: var(--qr-active-color, var(--accent)); color: #fff; }
|
|||
|
|
|
|||
|
|
/* ===== L3 回复列表 ===== */
|
|||
|
|
.qr-l3-list {
|
|||
|
|
flex: 1; overflow-y: auto; padding: 4px;
|
|||
|
|
}
|
|||
|
|
.qr-l3-list::-webkit-scrollbar { width: 4px; }
|
|||
|
|
.qr-l3-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
|||
|
|
.qr-l3-item {
|
|||
|
|
display: flex; align-items: flex-start; gap: 8px;
|
|||
|
|
padding: 8px 10px; margin: 2px 4px;
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
cursor: pointer; transition: var(--transition);
|
|||
|
|
font-size: 12px; color: var(--text-secondary);
|
|||
|
|
border: 1px solid transparent;
|
|||
|
|
}
|
|||
|
|
.qr-l3-item:hover { background: var(--bg-hover); color: var(--text-primary); }
|
|||
|
|
.qr-l3-item.selected { background: var(--qr-active-light, var(--accent-soft)); border-color: var(--qr-active-color, var(--accent)); color: var(--text-primary); }
|
|||
|
|
.qr-l3-item .l3-num {
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
width: 20px; height: 20px; border-radius: 4px;
|
|||
|
|
background: var(--bg-tertiary); color: var(--text-muted);
|
|||
|
|
font-size: 10px; font-weight: 700; flex-shrink: 0;
|
|||
|
|
border: 1px solid var(--border); margin-top: 1px;
|
|||
|
|
}
|
|||
|
|
.qr-l3-item.selected .l3-num { background: var(--qr-active-color, var(--accent)); color: #fff; border-color: var(--qr-active-color, var(--accent)); }
|
|||
|
|
.qr-l3-item .l3-content { flex: 1; line-height: 1.5; }
|
|||
|
|
.qr-l3-item .l3-title { font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
|
|||
|
|
.qr-l3-item .l3-preview { font-size: 11px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|||
|
|
.qr-l3-empty {
|
|||
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|||
|
|
height: 100%; color: var(--text-muted); font-size: 12px;
|
|||
|
|
gap: 6px; padding: 20px;
|
|||
|
|
}
|
|||
|
|
.qr-l3-empty .empty-icon { font-size: 28px; opacity: 0.4; }
|
|||
|
|
.qr-l3-empty .empty-hint { font-size: 11px; text-align: center; line-height: 1.6; }
|
|||
|
|
|
|||
|
|
/* 已选中的回复预览条 */
|
|||
|
|
.qr-selected-bar {
|
|||
|
|
padding: 6px 12px; flex-shrink: 0;
|
|||
|
|
border-top: 1px solid var(--border);
|
|||
|
|
background: var(--success-soft);
|
|||
|
|
font-size: 11px; color: var(--success);
|
|||
|
|
display: flex; align-items: center; gap: 6px;
|
|||
|
|
}
|
|||
|
|
.qr-selected-bar.hidden { display: none; }
|
|||
|
|
.qr-selected-bar .sel-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|||
|
|
.qr-selected-bar .sel-hint { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
|
|||
|
|
|
|||
|
|
/* 键盘指南 */
|
|||
|
|
.keyboard-guide { padding: 6px 12px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text-muted); display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
|
|||
|
|
.keyboard-guide span { display: flex; align-items: center; gap: 3px; }
|
|||
|
|
|
|||
|
|
/* ========== v1.3: 会话状态演示开关（顶栏） ========== */
|
|||
|
|
.session-state-switch {
|
|||
|
|
display: flex; align-items: center; gap: 6px;
|
|||
|
|
padding: 4px 10px; border-radius: 14px; cursor: pointer;
|
|||
|
|
background: var(--bg-tertiary); border: 1px solid var(--border);
|
|||
|
|
font-size: 11px; color: var(--text-secondary); transition: var(--transition);
|
|||
|
|
user-select: none;
|
|||
|
|
}
|
|||
|
|
.session-state-switch:hover { background: var(--bg-hover); }
|
|||
|
|
.session-state-switch .ss-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
|
|||
|
|
.session-state-switch .ss-label { font-weight: 600; color: var(--text-primary); }
|
|||
|
|
.session-state-switch .ss-hint { font-size: 10px; color: var(--text-muted); }
|
|||
|
|
body.session-ended .session-state-switch { background: var(--purple-soft); border-color: var(--purple); }
|
|||
|
|
body.session-ended .session-state-switch .ss-dot { background: var(--purple); }
|
|||
|
|
body.session-ended .session-state-switch .ss-label { color: var(--purple); }
|
|||
|
|
body.session-ended .session-state-switch .ss-hint { display: none; }
|
|||
|
|
|
|||
|
|
/* ========== v1.3: 右栏整体可滚动（容纳更多模块） ========== */
|
|||
|
|
.sidebar-right { overflow-y: auto; }
|
|||
|
|
.sidebar-right::-webkit-scrollbar { width: 5px; }
|
|||
|
|
.sidebar-right::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
|||
|
|
/* 快速回复：移至中栏消息框工具栏上方（固定高度面板，不挤压对话区） */
|
|||
|
|
.quick-reply-section { flex-shrink: 0; height: 240px; min-height: 0; border-top: 1px solid var(--border); }
|
|||
|
|
|
|||
|
|
/* ========== v1.3: 排查步骤面板（右栏顶部，默认展开） ========== */
|
|||
|
|
.ts-panel { flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
|
|||
|
|
.ts-panel-head {
|
|||
|
|
display: flex; align-items: center; gap: 6px; padding: 8px 12px;
|
|||
|
|
cursor: pointer; background: var(--bg-tertiary); border-bottom: 1px solid var(--border);
|
|||
|
|
}
|
|||
|
|
.ts-panel-head:hover { background: var(--bg-hover); }
|
|||
|
|
.ts-panel-title { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
|
|||
|
|
.ts-panel-collapse { margin-left: auto; font-size: 12px; color: var(--text-muted); transition: transform 0.2s; }
|
|||
|
|
.ts-panel.collapsed .ts-panel-collapse { transform: rotate(-90deg); }
|
|||
|
|
.ts-panel-body { overflow: hidden; transition: max-height 0.3s ease; max-height: 1400px; }
|
|||
|
|
.ts-panel.collapsed .ts-panel-body { max-height: 0; }
|
|||
|
|
.ts-path-inline { display: flex; align-items: center; gap: 0; flex-wrap: wrap; padding: 8px 12px 4px; }
|
|||
|
|
.ts-flowchart-toggle {
|
|||
|
|
font-size: 11px; color: var(--accent); cursor: pointer; padding: 2px 6px;
|
|||
|
|
border-radius: 3px; margin: 2px 0 6px 12px; display: inline-block; user-select: none;
|
|||
|
|
}
|
|||
|
|
.ts-flowchart-toggle:hover { background: var(--accent-soft); }
|
|||
|
|
.ts-flowchart { padding: 0 12px 10px; overflow-y: auto; max-height: 600px; transition: max-height 0.35s ease, padding 0.35s ease; }
|
|||
|
|
.ts-flowchart.collapsed-flow { max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
|
|||
|
|
|
|||
|
|
/* ========== v1.3: 会话进行中占位提示 ========== */
|
|||
|
|
.post-session-hint {
|
|||
|
|
flex-shrink: 0; margin: 8px 12px; padding: 10px 12px;
|
|||
|
|
border: 1px dashed var(--border-light); border-radius: var(--radius);
|
|||
|
|
background: var(--bg-tertiary); font-size: 11px; color: var(--text-muted); line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
.post-session-hint b { color: var(--text-secondary); }
|
|||
|
|
body.session-ended .post-session-hint { display: none; }
|
|||
|
|
|
|||
|
|
/* ========== v1.3: 复盘类模块（智能标注/质量反馈/知识共享），仅会话结束后显示 ========== */
|
|||
|
|
.hidden-until-ended { display: none; }
|
|||
|
|
body.session-ended .hidden-until-ended { display: block; }
|
|||
|
|
|
|||
|
|
.post-session-card { flex-shrink: 0; border-top: 1px solid var(--border); padding: 10px 12px; }
|
|||
|
|
.post-session-card .psc-title {
|
|||
|
|
font-size: 12px; font-weight: 600; color: var(--purple);
|
|||
|
|
margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
|
|||
|
|
}
|
|||
|
|
.post-session-card .psc-title::before { content: ''; width: 3px; height: 12px; background: var(--purple); border-radius: 2px; display: inline-block; }
|
|||
|
|
.psc-field { margin-bottom: 8px; }
|
|||
|
|
.psc-field-label { font-size: 10px; color: var(--text-muted); margin-bottom: 3px; }
|
|||
|
|
.psc-field-value { font-size: 12px; color: var(--text-primary); line-height: 1.5; }
|
|||
|
|
.psc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
|
|||
|
|
.psc-tag { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
|
|||
|
|
.psc-tag.auto { background: var(--purple-soft); color: var(--purple); border-color: var(--purple); }
|
|||
|
|
.psc-stars { font-size: 16px; letter-spacing: 2px; color: var(--warning); }
|
|||
|
|
.psc-stars .star-off { color: var(--border-light); }
|
|||
|
|
.psc-row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; border-bottom: 1px dashed var(--border); }
|
|||
|
|
.psc-row:last-child { border-bottom: none; }
|
|||
|
|
.psc-row .psc-k { color: var(--text-muted); }
|
|||
|
|
.psc-row .psc-v { font-weight: 500; }
|
|||
|
|
.psc-check { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
|
|||
|
|
.psc-check input { width: 14px; height: 14px; accent-color: var(--success); }
|
|||
|
|
.psc-textarea { width: 100%; min-height: 54px; resize: vertical; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; color: var(--text-primary); font-size: 11px; font-family: inherit; outline: none; }
|
|||
|
|
.psc-textarea:focus { border-color: var(--accent); }
|
|||
|
|
|
|||
|
|
/* ========== v1.7 · 改动组 A2：全屏流程图浮层 ==========
|
|||
|
|
排查步骤可全屏研读完整决策树；关闭后回到右栏原状态（展开/收起态保留） */
|
|||
|
|
.ts-fullscreen-btn {
|
|||
|
|
margin-left: 6px; font-size: 11px; color: var(--accent); cursor: pointer;
|
|||
|
|
padding: 2px 8px; border: 1px solid var(--border); border-radius: 4px;
|
|||
|
|
background: var(--bg-tertiary); transition: var(--transition); flex-shrink: 0;
|
|||
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|||
|
|
}
|
|||
|
|
.ts-fullscreen-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
|
|||
|
|
.flowchart-fullscreen {
|
|||
|
|
position: fixed; inset: 0; z-index: 2500;
|
|||
|
|
background: var(--bg-primary);
|
|||
|
|
display: none; flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.flowchart-fullscreen.open { display: flex; }
|
|||
|
|
.ff-topbar {
|
|||
|
|
height: 48px; flex-shrink: 0; display: flex; align-items: center; gap: 12px;
|
|||
|
|
padding: 0 18px; background: var(--bg-secondary); border-bottom: 1px solid var(--border);
|
|||
|
|
box-shadow: var(--shadow-sm);
|
|||
|
|
}
|
|||
|
|
.ff-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
|
|||
|
|
.ff-subtitle { font-size: 11px; color: var(--text-muted); }
|
|||
|
|
.ff-close {
|
|||
|
|
margin-left: auto; cursor: pointer; font-size: 13px; color: var(--text-secondary);
|
|||
|
|
padding: 6px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-tertiary);
|
|||
|
|
transition: var(--transition);
|
|||
|
|
}
|
|||
|
|
.ff-close:hover { border-color: var(--danger); color: var(--danger); }
|
|||
|
|
.ff-stage { flex: 1; overflow: auto; padding: 28px 40px; }
|
|||
|
|
.ff-tree { max-width: 920px; margin: 0 auto; }
|
|||
|
|
.ff-tree .flow-step { margin-bottom: 14px; }
|
|||
|
|
.ff-tree .flow-node { width: 28px; height: 28px; font-size: 12px; }
|
|||
|
|
.ff-tree .flow-title { font-size: 14px; }
|
|||
|
|
.ff-tree .flow-desc { font-size: 12.5px; }
|
|||
|
|
.ff-tree .flow-branch-item { font-size: 12.5px; }
|
|||
|
|
.ff-hint { text-align: center; font-size: 11px; color: var(--text-muted); padding: 8px; flex-shrink: 0; }
|
|||
|
|
|
|||
|
|
/* ========== v1.7：原型说明对话框 ========== */
|
|||
|
|
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 2600; display: none; align-items: center; justify-content: center; }
|
|||
|
|
.modal-mask.open { display: flex; }
|
|||
|
|
.modal-box { width: 720px; max-width: 92vw; max-height: 84vh; overflow-y: auto; background: var(--bg-secondary); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 20px 22px; }
|
|||
|
|
.modal-box h3 { font-size: 15px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
|
|||
|
|
.modal-box h4 { font-size: 13px; margin: 14px 0 6px; color: var(--accent); }
|
|||
|
|
.modal-box ul { padding-left: 18px; }
|
|||
|
|
.modal-box li { font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; line-height: 1.6; }
|
|||
|
|
.modal-box p { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
|
|||
|
|
.modal-box .kbd { font-family: monospace; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px; font-size: 11px; color: var(--text-primary); }
|
|||
|
|
.modal-box .close-x { float: right; cursor: pointer; color: var(--text-muted); font-size: 18px; line-height: 1; }
|
|||
|
|
.modal-box .close-x:hover { color: var(--danger); }
|
|||
|
|
.modal-box table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
|
|||
|
|
.modal-box th, .modal-box td { border: 1px solid var(--border); padding: 4px 7px; font-size: 11px; text-align: left; }
|
|||
|
|
.modal-box th { background: var(--bg-tertiary); color: var(--text-primary); font-weight: 600; }
|
|||
|
|
.modal-box td { color: var(--text-secondary); }
|
|||
|
|
.proto-btn {
|
|||
|
|
position: fixed; right: 16px; bottom: 16px; z-index: 2400;
|
|||
|
|
background: var(--purple); color: #fff; border: none; border-radius: 20px;
|
|||
|
|
padding: 9px 16px; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow);
|
|||
|
|
transition: var(--transition);
|
|||
|
|
}
|
|||
|
|
.proto-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
|
|||
|
|
</style>
|
|||
|
|
<script>
|
|||
|
|
// Auto-generated from IT支持知识库2026-4-24.docx
|
|||
|
|
// 7大类 28子类 180条快速回复模板
|
|||
|
|
const qrData = [{"name": "电脑", "subs": [{"name": "硬件设备", "items": [{"title": "笔记本电脑电池续航异常", "content": "健康评估标准：剩余容量<70%或循环次数>500次。\n获取报告步骤：：\nWindows：cmd中输入 powercfg /batteryreport，查看报告中的“CYCLE COUNT”。\nMac：按住Option键点击苹果菜单→系统信息→电源→查看“循环计数”。\n将报告留言分享，等待人工坐席进一步评估。"}, {"title": "办公电脑常见问题处理（黑屏、警报）", "content": "排查步骤\n1. 观察电源指示灯：确认电脑的电源指示灯是否亮起或闪烁。\n2. 强制关机重启：长按电源键约15-20秒，直到电源指示灯完全熄灭，等待几秒钟后，再次按下电源键尝试开机。"}, {"title": "办公电脑常见问题处理（死机、卡顿）", "content": "排查步骤：\n1. 检查系统资源：按Ctrl+Shift+Esc打开任务管理器，结束占用高的非必要进程。\n2. 强制重启：长按电源键15-20秒至指示灯熄灭，等待后重新开机。"}]}, {"name": "Windows系统", "items": [{"title": "Windows本地账户密码修改", "content": "路径：设置→帐户→登录选项→密码→更改，按提示完成。"}, {"title": "办公电脑功能异常（无声音、屏幕显示、键盘热键）", "content": "排查步骤：\n1. 检查驱动：设备管理器查看是否有异常设备（黄色/红色标志）。\n2. 重装驱动：联想电脑使用官方工具；其他品牌从官网下载最新驱动。"}, {"title": "办公电脑麦克风无声音", "content": "排查步骤：\n1. 设置默认设备：右键任务栏扬声器图标→声音设置，确保麦克风设为默认输入设备。\n2. 授予权限：在Windows搜索“麦克风隐私设置”，开启麦克风访问权限及对应应用（如企业微信、小鱼）的权限。\n3. 调整属性：在设备属性中调整音量和麦克风增强，禁用独占模式。"}, {"title": "Windows电脑和Office许可证过期|激活|即将到期", "content": "适用场景：激活过期/失败/即将到期。\n操作步骤：\n1. 下载工具：https://drive.weixin.qq.com/s?k=AAoA1wcYAAcmKeQnWG\n2. 运行工具，按需取消选项（如不需激活Office）。\n3. 点击“开始”处理。"}, {"title": "电脑C盘空间不足", "content": "操作步骤：\n1. 打开企业微信，进入【设置】→【文档/文件管理】→【文件储存位置】。\n2. 点击【更改】，选择其他盘符的目录作为新存储路径。"}, {"title": "U盘、移动硬盘无法弹出报错“弹出USB大容量存储设备时出问题”", "content": "故障现象：\n弹出U盘提示“该设备正在使用中、请关闭可能使用该设备的所有程序或窗口，然后重试”\n解决方法：\n将电脑关机后再拔出硬盘"}, {"title": "办公电脑系统初始密码", "content": "总部新电脑：Windows系统无密码（直接回车）\n电脑开机密码是独立的，不与内部统一员工账密一致。"}, {"title": "电脑开机密码重置", "content": "重置电脑开机需使用专用工具由IT支持人员进行现场处理，总部员工请携带设备前往121室，区域同事请联系本地兼职网络协助处理"}]}, {"name": "鸿蒙系统", "items": [{"title": "公司办公IT环境不支持鸿蒙系统的软硬件清单", "content": "软件功能类：\n火绒安全、税友安全助手、企业微信-同事吧（发帖、回复）"}]}]}, {"name": "软件", "subs": [{"name": "常用工具", "items": [{"title": "常用办公软件下载地址", "content": "常用办公软件下载地址：https://drive.weixin.qq.com/s?k=AAoA1wcYAAcVScZYR4"}, {"title": "压缩工具", "content": "7-Zip是一款免费开源高压缩比的压缩软件，支持7z、ZIP、RAR、CAB、GZIP、BZIP2和TAR等格式。此软件压缩的压缩比要比普通ZIP文件高30-50%。\n7-Zip 客户端下载地址：https://sparanoid.com/lab/7z/download.html"}]}, {"name": "企业微信", "items": [{"title": "企业微信综合信息", "content
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
<body data-theme="light">
|
|||
|
|
|
|||
|
|
<!-- Top bar -->
|
|||
|
|
<div class="theme-toggle-bar">
|
|||
|
|
<div class="bar-left">
|
|||
|
|
<div class="logo-sm">IT</div>
|
|||
|
|
<span class="sys-name">IT智能服务台</span>
|
|||
|
|
<span class="v-tag">v1.7</span>
|
|||
|
|
<span class="sys-tagline">· 坐席工作台 — 会话条目操作菜单 + v1.4~v1.6 演进合并</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="bar-right">
|
|||
|
|
<!-- ========== v1.3: 会话状态演示开关（用于验证"仅会话结束后显示"三条复盘模块） ========== -->
|
|||
|
|
<div class="session-state-switch" id="sessionStateSwitch" onclick="toggleSessionState()" title="点击切换中栏会话状态，验证右栏复盘模块显隐">
|
|||
|
|
<span class="ss-dot ss-active"></span>
|
|||
|
|
<span class="ss-label" id="sessionStateLabel">会话进行中</span>
|
|||
|
|
<span class="ss-hint">点此模拟「会话结束」</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="theme-switch" onclick="toggleTheme()">
|
|||
|
|
<span class="switch-icon">☀️</span>
|
|||
|
|
<div class="switch-track"><div class="switch-thumb"></div></div>
|
|||
|
|
<span class="switch-icon">🌙</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="bar-user-info">
|
|||
|
|
<span>坐席: 陈思远</span>
|
|||
|
|
<div class="bar-user-avatar">陈</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="workspace">
|
|||
|
|
|
|||
|
|
<!-- ===== LEFT: Conversation List ===== -->
|
|||
|
|
<div class="sidebar-left">
|
|||
|
|
<div class="conv-search">
|
|||
|
|
<div class="conv-search-input-wrap">
|
|||
|
|
<span class="conv-search-icon">🔍</span>
|
|||
|
|
<input class="conv-search-input" placeholder="搜索用户、关键词..." />
|
|||
|
|
</div>
|
|||
|
|
<!-- v1.2 调整：'全部' 移至 '已完成' 之后；默认显示 '待处理' -->
|
|||
|
|
<div class="conv-search-tabs">
|
|||
|
|
<span class="conv-search-tab active" data-status="pending">待处理 <span class="cs-pill">3</span></span>
|
|||
|
|
<span class="conv-search-tab" data-status="in-progress">进行中 <span class="cs-pill">3</span></span>
|
|||
|
|
<span class="conv-search-tab" data-status="done">已完成 <span class="cs-pill">1</span></span>
|
|||
|
|
<span class="conv-search-tab" data-status="all">全部 <span class="cs-pill">10</span></span>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top:6px;display:flex;align-items:center;gap:5px;">
|
|||
|
|
<span class="col-badge">左栏 260px 固定</span>
|
|||
|
|
<span class="col-badge" title="260 − margin 6×2 − padding 10×2">条目可用 228px</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|||
|
|
v1.7 · 改动组 B + C：左栏会话条目
|
|||
|
|
B — 回填真实字段，逐项对齐 ConversationItem.vue:11-149
|
|||
|
|
① 48×48 头像 + 新消息圆点
|
|||
|
|
② 第一行：📌置顶 / 📋代办 图标 + 姓名(省略) + 6类 tag-badge + 优先级图标(≤4)
|
|||
|
|
③ 第二行：摘要(flex:1) + 时间(flex-shrink:0)
|
|||
|
|
④ 第三行：5 星紧急度 + 「接手」/「退出」link 按钮
|
|||
|
|
⑤ 右侧：处理对象缩略头像（section!=='history' 时恒显示）
|
|||
|
|
C — 三点按钮替换缩略头像（hover 淡入淡出，同栅格位零抖动）
|
|||
|
|
+ 右键 @contextmenu 唤起同一单例菜单
|
|||
|
|
每条 data-* 即菜单可见性矩阵的输入：
|
|||
|
|
data-conv-status queued / serving / pending_close / resolved
|
|||
|
|
data-mine 是否本人会话（is_mine）
|
|||
|
|
data-collab 是否协作者（is_collaborator）
|
|||
|
|
data-pinned/-todo 当前置顶/代办态 → 决定「置顶」还是「取消置顶」
|
|||
|
|
data-cangrab can_grab
|
|||
|
|
data-agents 可用坐席数 → 0 时转接禁用并提示「暂无可用坐席」
|
|||
|
|
═══════════════════════════════════════════════════════════════ -->
|
|||
|
|
<div class="conv-sections" id="convSections" data-active-status="pending">
|
|||
|
|
<!-- My conversations -->
|
|||
|
|
<div class="conv-section-body" data-section="mine" style="max-height:640px;">
|
|||
|
|
|
|||
|
|
<!-- ① 张伟 — status=queued 待接单（非本人）→ 菜单仅「接单」 -->
|
|||
|
|
<div class="conv-item active" data-status="pending"
|
|||
|
|
data-name="张伟" data-conv-status="queued"
|
|||
|
|
data-mine="0" data-collab="0" data-pinned="0" data-todo="0" data-cangrab="0" data-agents="3">
|
|||
|
|
<div class="conv-avatar-wrap">
|
|||
|
|
<div class="conv-avatar av-blue">张</div>
|
|||
|
|
<span class="new-msg-dot dot-urgent" title="紧急新消息"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-content">
|
|||
|
|
<div class="conv-name-line">
|
|||
|
|
<span class="conv-name" title="张伟">张伟</span>
|
|||
|
|
<span class="tag-badge tag-badge-need-intervene">🔔需介入</span>
|
|||
|
|
<span class="priority-icons">
|
|||
|
|
<span class="pi-icon pi-blocked" title="阻断性问题">⛔</span>
|
|||
|
|
<span class="pi-icon pi-impact high" title="影响范围: 12人">👥</span>
|
|||
|
|
<span class="pi-icon pi-role" title="高角色等级">⭐</span>
|
|||
|
|
<span class="pi-icon pi-repeat" title="重复追问: 3次">🔁</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-summary-row">
|
|||
|
|
<span class="conv-summary">VPN 连接失败，无法访问内网系统…</span>
|
|||
|
|
<span class="conv-time-2">10:25</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-meta-row">
|
|||
|
|
<div class="urgency-stars" title="紧急度 5/5">
|
|||
|
|
<span class="urgency-star">★</span><span class="urgency-star">★</span><span class="urgency-star">★</span><span class="urgency-star">★</span><span class="urgency-star">★</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-right-slot">
|
|||
|
|
<div class="conv-target-avatar ta-blue" title="张伟">张</div>
|
|||
|
|
<button class="conv-menu-btn" title="更多操作" aria-haspopup="menu" aria-label="更多操作">⋯</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ② 陈芳 — status=serving 本人 · 未置顶未代办 → 菜单「置顶 / 代办 / 转接」 -->
|
|||
|
|
<div class="conv-item" data-status="in-progress"
|
|||
|
|
data-name="陈芳" data-conv-status="serving"
|
|||
|
|
data-mine="1" data-collab="0" data-pinned="0" data-todo="0" data-cangrab="0" data-agents="3">
|
|||
|
|
<div class="conv-avatar-wrap">
|
|||
|
|
<div class="conv-avatar av-purple">陈</div>
|
|||
|
|
<span class="new-msg-dot dot-normal" title="有新消息"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-content">
|
|||
|
|
<div class="conv-name-line">
|
|||
|
|
<span class="conv-name" title="陈芳">陈芳</span>
|
|||
|
|
<span class="tag-badge tag-badge-emotion-worried">😟担忧</span>
|
|||
|
|
<span class="priority-icons">
|
|||
|
|
<span class="pi-icon pi-impact" title="影响范围: 3人">👥</span>
|
|||
|
|
<span class="pi-icon pi-role" title="高角色等级">⭐</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-summary-row">
|
|||
|
|
<span class="conv-summary">系统卡顿严重影响工作…</span>
|
|||
|
|
<span class="conv-time-2">09:42</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-meta-row">
|
|||
|
|
<div class="urgency-stars" title="紧急度 3/5">
|
|||
|
|
<span class="urgency-star">★</span><span class="urgency-star">★</span><span class="urgency-star">★</span><span class="urgency-star empty">★</span><span class="urgency-star empty">★</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-right-slot">
|
|||
|
|
<div class="conv-target-avatar ta-purple" title="陈芳">陈</div>
|
|||
|
|
<button class="conv-menu-btn" title="更多操作" aria-haspopup="menu" aria-label="更多操作">⋯</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ③ 李娜 — status=serving 本人 · 已置顶 + 已代办 → 菜单文案变「取消置顶 / 取消代办」 -->
|
|||
|
|
<div class="conv-item" data-status="in-progress"
|
|||
|
|
data-name="李娜" data-conv-status="serving"
|
|||
|
|
data-mine="1" data-collab="0" data-pinned="1" data-todo="1" data-cangrab="0" data-agents="3">
|
|||
|
|
<div class="conv-avatar-wrap">
|
|||
|
|
<div class="conv-avatar av-green">李</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-content">
|
|||
|
|
<div class="conv-name-line">
|
|||
|
|
<span class="conv-flag" title="已置顶">📌</span>
|
|||
|
|
<span class="conv-flag" title="代办">📋</span>
|
|||
|
|
<span class="conv-name" title="李娜">李娜</span>
|
|||
|
|
<span class="priority-icons">
|
|||
|
|
<span class="pi-icon pi-role" title="高角色等级">⭐</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-summary-row">
|
|||
|
|
<span class="conv-summary">邮箱签名设置问题</span>
|
|||
|
|
<span class="conv-time-2">10:18</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-meta-row">
|
|||
|
|
<div class="urgency-stars" title="紧急度 2/5">
|
|||
|
|
<span class="urgency-star">★</span><span class="urgency-star">★</span><span class="urgency-star empty">★</span><span class="urgency-star empty">★</span><span class="urgency-star empty">★</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-right-slot">
|
|||
|
|
<div class="conv-target-avatar ta-green" title="李娜">李</div>
|
|||
|
|
<button class="conv-menu-btn" title="更多操作" aria-haspopup="menu" aria-label="更多操作">⋯</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- === 不同状态会话展示（供菜单可见性矩阵评审） === -->
|
|||
|
|
|
|||
|
|
<!-- ④ 王磊 — status=queued 招手+需介入 → 菜单仅「接单」 -->
|
|||
|
|
<div class="conv-item" data-conv="conv-004" data-status="pending" style="border-left:2px solid #f59e0b"
|
|||
|
|
data-name="王磊" data-conv-status="queued"
|
|||
|
|
data-mine="0" data-collab="0" data-pinned="0" data-todo="0" data-cangrab="0" data-agents="3">
|
|||
|
|
<div class="conv-avatar-wrap">
|
|||
|
|
<div class="conv-avatar av-orange">王</div>
|
|||
|
|
<span class="new-msg-dot dot-urgent" title="紧急新消息"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-content">
|
|||
|
|
<div class="conv-name-line">
|
|||
|
|
<span class="conv-name" title="王磊">王磊</span>
|
|||
|
|
<span class="tag-badge tag-badge-hand-raise">招手</span>
|
|||
|
|
<span class="tag-badge tag-badge-need-intervene">🔔需介入</span>
|
|||
|
|
<span class="priority-icons">
|
|||
|
|
<span class="pi-icon pi-blocked" title="阻断性问题">⛔</span>
|
|||
|
|
<span class="pi-icon pi-impact" title="影响范围: 8人">👥</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-summary-row">
|
|||
|
|
<span class="conv-summary">税控系统还是登录不上，下午3点前要报税</span>
|
|||
|
|
<span class="conv-time-2">10:25</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-meta-row">
|
|||
|
|
<div class="urgency-stars" title="紧急度 5/5">
|
|||
|
|
<span class="urgency-star">★</span><span class="urgency-star">★</span><span class="urgency-star">★</span><span class="urgency-star">★</span><span class="urgency-star">★</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-right-slot">
|
|||
|
|
<div class="conv-target-avatar ta-orange" title="王磊">王</div>
|
|||
|
|
<button class="conv-menu-btn" title="更多操作" aria-haspopup="menu" aria-label="更多操作">⋯</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ⑤ 孙丽 — status=queued 刚分派 → 菜单仅「接单」 -->
|
|||
|
|
<div class="conv-item" data-conv="conv-005" data-status="pending" style="opacity:0.7; border-left:2px solid var(--border)"
|
|||
|
|
data-name="孙丽" data-conv-status="queued"
|
|||
|
|
data-mine="0" data-collab="0" data-pinned="0" data-todo="0" data-cangrab="0" data-agents="3">
|
|||
|
|
<div class="conv-avatar-wrap">
|
|||
|
|
<div class="conv-avatar av-teal">孙</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-content">
|
|||
|
|
<div class="conv-name-line">
|
|||
|
|
<span class="conv-name" title="孙丽">孙丽</span>
|
|||
|
|
<span class="priority-icons">
|
|||
|
|
<span class="pi-icon pi-confused" title="困惑">😕</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-summary-row">
|
|||
|
|
<span class="conv-summary">合同管理系统看不到审批列表，不知道怎么操作</span>
|
|||
|
|
<span class="conv-time-2">10:10</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-meta-row">
|
|||
|
|
<div class="urgency-stars" title="紧急度 1/5">
|
|||
|
|
<span class="urgency-star">★</span><span class="urgency-star empty">★</span><span class="urgency-star empty">★</span><span class="urgency-star empty">★</span><span class="urgency-star empty">★</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-right-slot">
|
|||
|
|
<div class="conv-target-avatar ta-teal" title="孙丽">孙</div>
|
|||
|
|
<button class="conv-menu-btn" title="更多操作" aria-haspopup="menu" aria-label="更多操作">⋯</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ⑥ 刘洋 — status=serving 本人 · 已置顶 · VIP · 【无可用坐席】→ 转接项禁用并提示「暂无可用坐席」 -->
|
|||
|
|
<div class="conv-item" data-conv="conv-006" data-status="in-progress" style="border-left:2px solid #ef4444"
|
|||
|
|
data-name="刘洋" data-conv-status="serving"
|
|||
|
|
data-mine="1" data-collab="0" data-pinned="1" data-todo="0" data-cangrab="0" data-agents="0">
|
|||
|
|
<div class="conv-avatar-wrap">
|
|||
|
|
<div class="conv-avatar av-red">刘</div>
|
|||
|
|
<span class="new-msg-dot dot-urgent" title="紧急新消息"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-content">
|
|||
|
|
<div class="conv-name-line">
|
|||
|
|
<span class="conv-flag" title="已置顶">📌</span>
|
|||
|
|
<span class="conv-name" title="刘洋">刘洋</span>
|
|||
|
|
<span class="tag-badge tag-badge-vip">VIP</span>
|
|||
|
|
<span class="tag-badge tag-badge-emotion-angry">😡愤怒</span>
|
|||
|
|
<span class="priority-icons">
|
|||
|
|
<span class="pi-icon pi-blocked" title="阻断性问题">⛔</span>
|
|||
|
|
<span class="pi-icon pi-impact high" title="影响范围: 20人">👥</span>
|
|||
|
|
<span class="pi-icon pi-repeat" title="重复追问: 5次">🔁</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-summary-row">
|
|||
|
|
<span class="conv-summary">这个问题已经拖了三天了，请尽快解决！</span>
|
|||
|
|
<span class="conv-time-2">10:27</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-meta-row">
|
|||
|
|
<div class="urgency-stars" title="紧急度 5/5">
|
|||
|
|
<span class="urgency-star">★</span><span class="urgency-star">★</span><span class="urgency-star">★</span><span class="urgency-star">★</span><span class="urgency-star">★</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-right-slot">
|
|||
|
|
<div class="conv-target-avatar ta-red" title="刘洋">刘</div>
|
|||
|
|
<button class="conv-menu-btn" title="更多操作" aria-haspopup="menu" aria-label="更多操作">⋯</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Colleague sessions (仅「全部」可见；其他 tab 隐藏) -->
|
|||
|
|
<div class="conv-section-body" data-section="colleague" style="max-height:420px;">
|
|||
|
|
|
|||
|
|
<!-- ⑦ 赵敏 — serving·他人会话，非本人非协作 → 🔴 置顶/代办【不出现】（后端 update:own，出现即 403）
|
|||
|
|
菜单实际为空 → 三点按钮整体不显示；第三行显示「接手」link -->
|
|||
|
|
<div class="conv-item other-agent" data-status="colleague"
|
|||
|
|
data-name="赵敏" data-conv-status="serving"
|
|||
|
|
data-mine="0" data-collab="0" data-pinned="0" data-todo="0" data-cangrab="1" data-agents="3">
|
|||
|
|
<div class="conv-avatar-wrap">
|
|||
|
|
<div class="conv-avatar av-pink">赵</div>
|
|||
|
|
<span class="new-msg-dot dot-normal" title="有新消息"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-content">
|
|||
|
|
<div class="conv-name-line">
|
|||
|
|
<span class="conv-name" title="赵敏">赵敏</span>
|
|||
|
|
<span class="tag-badge tag-badge-agent">刘明</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-summary-row">
|
|||
|
|
<span class="conv-summary">OA 审批流程报错</span>
|
|||
|
|
<span class="conv-time-2">10:02</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-meta-row">
|
|||
|
|
<div class="urgency-stars" title="紧急度 3/5">
|
|||
|
|
<span class="urgency-star">★</span><span class="urgency-star">★</span><span class="urgency-star">★</span><span class="urgency-star empty">★</span><span class="urgency-star empty">★</span>
|
|||
|
|
</div>
|
|||
|
|
<button class="grab-btn" onclick="event.stopPropagation();alert('接手（原型示意）— 与菜单项「接手」共用同一 handler');">接手</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-right-slot">
|
|||
|
|
<div class="conv-target-avatar ta-blue" title="坐席：刘明">刘</div>
|
|||
|
|
<button class="conv-menu-btn" title="更多操作" aria-haspopup="menu" aria-label="更多操作">⋯</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ⑧ 周芳 — serving·他人主理，但【我是协作者】→ 置顶/代办【可用】；转接不可用（需 is_mine）
|
|||
|
|
第三行显示「退出」link -->
|
|||
|
|
<div class="conv-item other-agent" data-status="colleague"
|
|||
|
|
data-name="周芳" data-conv-status="serving"
|
|||
|
|
data-mine="0" data-collab="1" data-pinned="0" data-todo="1" data-cangrab="0" data-agents="3">
|
|||
|
|
<div class="conv-avatar-wrap">
|
|||
|
|
<div class="conv-avatar av-green">周</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-content">
|
|||
|
|
<div class="conv-name-line">
|
|||
|
|
<span class="conv-flag" title="代办">📋</span>
|
|||
|
|
<span class="conv-name" title="周芳">周芳</span>
|
|||
|
|
<span class="tag-badge tag-badge-agent">王强</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-summary-row">
|
|||
|
|
<span class="conv-summary">打印机无法连接</span>
|
|||
|
|
<span class="conv-time-2">09:58</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-meta-row">
|
|||
|
|
<div class="urgency-stars" title="紧急度 2/5">
|
|||
|
|
<span class="urgency-star">★</span><span class="urgency-star">★</span><span class="urgency-star empty">★</span><span class="urgency-star empty">★</span><span class="urgency-star empty">★</span>
|
|||
|
|
</div>
|
|||
|
|
<button class="leave-btn" onclick="event.stopPropagation();alert('退出协作（原型示意）— 与菜单项「退出协作」共用同一 handler');">退出</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-right-slot">
|
|||
|
|
<div class="conv-target-avatar ta-green" title="坐席：王强">王</div>
|
|||
|
|
<button class="conv-menu-btn" title="更多操作" aria-haspopup="menu" aria-label="更多操作">⋯</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ⑨ 吴明 — serving·他人会话，pending_close 待确认 → 演示 ⏳待确认 tag + 琥珀左边框 -->
|
|||
|
|
<div class="conv-item other-agent pending-close" data-status="colleague"
|
|||
|
|
data-name="吴明" data-conv-status="pending_close"
|
|||
|
|
data-mine="0" data-collab="0" data-pinned="0" data-todo="0" data-cangrab="1" data-agents="3">
|
|||
|
|
<div class="conv-avatar-wrap">
|
|||
|
|
<div class="conv-avatar av-orange">吴</div>
|
|||
|
|
<span class="new-msg-dot dot-muted" title="低优先新消息"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-content">
|
|||
|
|
<div class="conv-name-line">
|
|||
|
|
<span class="conv-name" title="吴明">吴明</span>
|
|||
|
|
<span class="tag-badge tag-badge-pending-close">⏳待确认</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-summary-row">
|
|||
|
|
<span class="conv-summary">新电脑开机配置</span>
|
|||
|
|
<span class="conv-time-2">09:31</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-meta-row">
|
|||
|
|
<div class="urgency-stars" title="紧急度 1/5">
|
|||
|
|
<span class="urgency-star">★</span><span class="urgency-star empty">★</span><span class="urgency-star empty">★</span><span class="urgency-star empty">★</span><span class="urgency-star empty">★</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-right-slot">
|
|||
|
|
<div class="conv-target-avatar ta-purple" title="坐席：李静">李</div>
|
|||
|
|
<button class="conv-menu-btn" title="更多操作" aria-haspopup="menu" aria-label="更多操作">⋯</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- History (「全部」+「已完成」可见；其他 tab 隐藏) -->
|
|||
|
|
<div class="conv-section-body" data-section="history" style="max-height:400px;">
|
|||
|
|
<!-- ⑩ 周杰 — section=history：无缩略头像，三点按钮直接占该位（架构 §4.3 末条）
|
|||
|
|
status=resolved → 菜单为空 → 三点按钮 data-menu-empty="1" → CSS display:none -->
|
|||
|
|
<div class="conv-item" data-status="done"
|
|||
|
|
data-name="周杰" data-conv-status="resolved"
|
|||
|
|
data-mine="0" data-collab="0" data-pinned="0" data-todo="0" data-cangrab="0" data-agents="3">
|
|||
|
|
<div class="conv-avatar-wrap">
|
|||
|
|
<div class="conv-avatar av-teal">周</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-content">
|
|||
|
|
<div class="conv-name-line">
|
|||
|
|
<span class="conv-name" title="周杰">周杰</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-summary-row">
|
|||
|
|
<span class="conv-summary">VPN 证书过期 — 已解决</span>
|
|||
|
|
<span class="conv-time-2">昨天</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-meta-row">
|
|||
|
|
<div class="urgency-stars" title="紧急度 1/5">
|
|||
|
|
<span class="urgency-star">★</span><span class="urgency-star empty">★</span><span class="urgency-star empty">★</span><span class="urgency-star empty">★</span><span class="urgency-star empty">★</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- section === 'history' → 缩略头像不渲染；status=resolved → 菜单为空 → 按钮 data-menu-empty="1" → CSS 隐藏
|
|||
|
|
（这是 §4.4 矩阵驱动的动态隐藏，非按分区一刀切，详见 CSS 注释） -->
|
|||
|
|
<div class="conv-right-slot slot-history">
|
|||
|
|
<button class="conv-menu-btn" data-menu-empty="1" title="更多操作" aria-haspopup="menu" aria-label="更多操作">⋯</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- v1.2: 空状态（默认隐藏，由 CSS / JS 按当前 tab 决定显隐） -->
|
|||
|
|
<div class="conv-empty" data-for="pending">
|
|||
|
|
<div class="ce-icon">✨</div>
|
|||
|
|
暂无待处理会话
|
|||
|
|
<div class="ce-tip">所有新会话都会出现在这里，及时接单跟进</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-empty" data-for="in-progress">
|
|||
|
|
<div class="ce-icon">💬</div>
|
|||
|
|
暂无进行中会话
|
|||
|
|
<div class="ce-tip">已回复用户、等待用户反馈的会话会出现在这里</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="conv-empty" data-for="done">
|
|||
|
|
<div class="ce-icon">📋</div>
|
|||
|
|
暂无已完成会话
|
|||
|
|
<div class="ce-tip">已解决并归档的会话会出现在这里</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|||
|
|
v1.7 · 改动组 C：会话条目操作菜单【单例】
|
|||
|
|
归属层级：ConversationList（本节点在 .sidebar-left 内、在 .conv-sections 之外）
|
|||
|
|
定位方式：position:fixed + 视口坐标（等价于 Teleport 到 body）
|
|||
|
|
🔴 开发硬约束（不可用 absolute 挂条目内）：
|
|||
|
|
.workspace-sidebar{overflow:hidden} + .conversation-list-scroll{overflow-x:hidden}
|
|||
|
|
双重裁剪 → 260px 窄栏内 absolute 菜单横向必被裁、列表首尾纵向被裁
|
|||
|
|
🔴 单例的第二个理由：PRD-011 U-5 虚拟滚动会回收复用条目 DOM，
|
|||
|
|
菜单实例挂条目内会随 reference 销毁而错位/残留
|
|||
|
|
条目只负责 emit('open-menu', { id, x, y })，不含任何菜单 DOM
|
|||
|
|
═══════════════════════════════════════════════════════════════ -->
|
|||
|
|
<div class="conv-menu" id="convMenu" role="menu" aria-label="会话操作菜单"></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 拖拽手柄：左栏↔中间栏 -->
|
|||
|
|
<div class="resize-handle" id="resizeLeft" title="拖拽调整左栏宽度"></div>
|
|||
|
|
|
|||
|
|
<!-- ===== CENTER: Chat View (default) + Task Detail View ===== -->
|
|||
|
|
<div class="center-column">
|
|||
|
|
|
|||
|
|
<!-- ===== Chat View (default) ===== -->
|
|||
|
|
<div class="chat-view" id="chatView">
|
|||
|
|
<!-- User info bar -->
|
|||
|
|
<div class="user-info-bar" id="userInfoBar" onclick="toggleUserDetail()">
|
|||
|
|
<div class="user-avatar">张</div>
|
|||
|
|
<div class="user-name-section">
|
|||
|
|
<span class="user-name">
|
|||
|
|
张伟 · 研发一部 高级工程师
|
|||
|
|
<span class="it-level-badge gold" title="IT技能等级：黄金 — 熟练使用，高级操作需指导">
|
|||
|
|
🥇 黄金
|
|||
|
|
<span class="level-num">Lv.3</span>
|
|||
|
|
</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-chips">
|
|||
|
|
<span class="info-chip emotion">😟 焦虑</span>
|
|||
|
|
<span class="info-chip default">⏱ 8分32秒</span>
|
|||
|
|
<span class="info-chip default">💬 6轮</span>
|
|||
|
|
<span class="info-chip repeat">🔁 重复</span>
|
|||
|
|
<span class="info-chip remark">📝 备注</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Device status icons -->
|
|||
|
|
<div class="device-status-row">
|
|||
|
|
<!-- OS Type: Windows (online) -->
|
|||
|
|
<div class="dev-icon online" title="Windows 11 · 在线">
|
|||
|
|
<span>🪟</span>
|
|||
|
|
<span class="dev-badge green"></span>
|
|||
|
|
<span class="dev-tooltip">Windows 11 · 在线联网</span>
|
|||
|
|
</div>
|
|||
|
|
<!-- Antivirus: Huorong installed & up-to-date -->
|
|||
|
|
<div class="dev-icon safe" title="火绒 · 已安装 · 病毒库最新">
|
|||
|
|
<span>🛡️</span>
|
|||
|
|
<span class="dev-badge green"></span>
|
|||
|
|
<span class="dev-tooltip">火绒杀毒 · 已安装 · 病毒库最新</span>
|
|||
|
|
</div>
|
|||
|
|
<!-- Adobe: Certified/Licensed -->
|
|||
|
|
<div class="dev-icon certified" title="Adobe · 已授权">
|
|||
|
|
<span style="font-size:11px;font-weight:700;letter-spacing:-0.5px;">Ai</span>
|
|||
|
|
<span class="dev-badge green"></span>
|
|||
|
|
<span class="dev-tooltip">Adobe Illustrator · ✅ 已授权</span>
|
|||
|
|
</div>
|
|||
|
|
<!-- Office: Certified -->
|
|||
|
|
<div class="dev-icon certified" title="Office 365 · 已授权">
|
|||
|
|
<span style="font-size:11px;font-weight:700;">O</span>
|
|||
|
|
<span class="dev-badge green"></span>
|
|||
|
|
<span class="dev-tooltip">Microsoft 365 · ✅ 已授权</span>
|
|||
|
|
</div>
|
|||
|
|
<!-- Patch: Warning - 2 pending -->
|
|||
|
|
<div class="dev-icon warn" title="系统补丁 · 2个待更新">
|
|||
|
|
<span>🔄</span>
|
|||
|
|
<span class="dev-badge yellow"></span>
|
|||
|
|
<span class="dev-tooltip">系统补丁 · ⚠️ 2个待更新</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ═══════════════════════════════════════════════════════════
|
|||
|
|
v1.7 · 改动组 D：中栏 UserInfoBar 操作区调整
|
|||
|
|
❌ 已删除：「📥 接单」「📌 置顶」「📋 代办」3 个按钮
|
|||
|
|
→ 全部下沉至左栏会话条目的三点/右键菜单
|
|||
|
|
· 接单：本就发生在「打开会话之前」，左栏是其自然场所；
|
|||
|
|
且原按钮在 status!=='queued' 时恒为 disabled 的「已接单」，
|
|||
|
|
长期占位却不可点，删除是净收益
|
|||
|
|
· 置顶/代办：属【列表组织行为】，其效果（条目上浮）只在左栏可见，
|
|||
|
|
操作与反馈同处一栏，语义更内聚
|
|||
|
|
✅ 保留：「🔄 转接」——与既有的「🤝 摇人」「✅ 结单」构成语义一致的
|
|||
|
|
【对话过程动作组】：转接=把这件事交出去 / 摇人=把人拉进来 / 结单=做完了
|
|||
|
|
这三者都在坐席读完描述、注意力与鼠标都在中栏的那一刻触发。
|
|||
|
|
若把转接赶到左栏，交互步数从 3 步涨到 6 步，且第 2 步「在会滚动、
|
|||
|
|
会因置顶/紧急度动态重排的三分区列表里定位当前会话」本身就有成本。
|
|||
|
|
⚠️ 后人请勿误以为「转接」是漏删——这是明确保留项（决策 D-2）。
|
|||
|
|
左栏菜单同时也提供转接，两入口共用同一 handler 与同一 Dialog。
|
|||
|
|
═══════════════════════════════════════════════════════════ -->
|
|||
|
|
<div style="display:flex;align-items:center;gap:6px;margin-left:auto;">
|
|||
|
|
<button class="btn-action default" style="font-size:12px;padding:4px 10px;"
|
|||
|
|
onclick="event.stopPropagation(); openTransferDialog('张伟', 3);">🔄 转接</button>
|
|||
|
|
<button class="btn-action default" style="font-size:12px;padding:4px 10px;"
|
|||
|
|
onclick="event.stopPropagation(); alert('摇人：邀请协作坐席（原型示意）');">🤝 摇人</button>
|
|||
|
|
<button class="btn-action danger" style="font-size:12px;padding:4px 10px;"
|
|||
|
|
onclick="event.stopPropagation(); alert('结单：需走摘要确认 Dialog（原型示意）');">✅ 结单</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<span class="expand-icon">▶</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 2026-07-24 更新：根据线上实际情况，右侧详情栏6个卡片 -->
|
|||
|
|
<div class="user-detail-panel" style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px 16px;">
|
|||
|
|
<!-- 卡片1：情绪状态 -->
|
|||
|
|
<div class="detail-card" style="background:var(--bg-tertiary);border-radius:8px;padding:12px;">
|
|||
|
|
<div class="dc-label" style="font-size:11px;color:var(--text-secondary);margin-bottom:6px;">情绪状态</div>
|
|||
|
|
<div class="dc-value" style="font-size:13px;">😟 担忧</div>
|
|||
|
|
<div style="font-size:11px;color:var(--text-muted);margin-top:4px;">语气急促，连续追问进度</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 卡片2：会话详情 -->
|
|||
|
|
<div class="detail-card" style="background:var(--bg-tertiary);border-radius:8px;padding:12px;">
|
|||
|
|
<div class="dc-label" style="font-size:11px;color:var(--text-secondary);margin-bottom:6px;">会话详情</div>
|
|||
|
|
<div class="dc-value" style="font-size:13px;">⏱ 等待时长：<strong>8分钟</strong></div>
|
|||
|
|
<div class="dc-value" style="font-size:13px;margin-top:4px;">💬 对话轮次：<strong>6轮</strong></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 卡片3：问题分析 -->
|
|||
|
|
<div class="detail-card" style="background:var(--bg-tertiary);border-radius:8px;padding:12px;">
|
|||
|
|
<div class="dc-label" style="font-size:11px;color:var(--text-secondary);margin-bottom:6px;">问题分析</div>
|
|||
|
|
<div class="dc-value" style="font-size:13px;">🔁 重复问题</div>
|
|||
|
|
<div style="font-size:11px;color:var(--text-muted);margin-top:4px;">7天内反馈：<strong>3次</strong></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 卡片4：IT技能等级 -->
|
|||
|
|
<div class="detail-card" style="background:var(--bg-tertiary);border-radius:8px;padding:12px;">
|
|||
|
|
<div class="dc-label" style="font-size:11px;color:var(--text-secondary);margin-bottom:6px;">IT技能等级</div>
|
|||
|
|
<div style="display:flex;align-items:center;gap:6px;">
|
|||
|
|
<span class="it-level-badge gold">🥇 黄金 Lv.3</span>
|
|||
|
|
<span style="font-size:12px;font-weight:600;">黄金</span>
|
|||
|
|
</div>
|
|||
|
|
<div style="font-size:11px;color:var(--text-muted);margin-top:4px;">熟悉常见操作，可独立解决一般问题</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 卡片5：历史工单 -->
|
|||
|
|
<div class="detail-card" style="background:var(--bg-tertiary);border-radius:8px;padding:12px;">
|
|||
|
|
<div class="dc-label" style="font-size:11px;color:var(--text-secondary);margin-bottom:6px;">历史工单</div>
|
|||
|
|
<div style="font-size:13px;">30天内工单：<strong>3次</strong></div>
|
|||
|
|
<div style="font-size:11px;color:var(--text-muted);margin-top:4px;">类型分布：VPN(2次) 邮箱(1次)</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 卡片6：其他备注 -->
|
|||
|
|
<div class="detail-card" style="background:var(--bg-tertiary);border-radius:8px;padding:12px;">
|
|||
|
|
<div class="dc-label" style="font-size:11px;color:var(--text-secondary);margin-bottom:6px;">其他备注</div>
|
|||
|
|
<div style="font-size:12px;color:var(--text-secondary);">暂无备注</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ===== v1.3: 排查步骤已移至右栏顶部（.ts-panel），此处不再保留 ===== -->
|
|||
|
|
|
|||
|
|
<!-- Chat -->
|
|||
|
|
<div class="chat-messages">
|
|||
|
|
<div class="msg-system">—— 2026年6月6日 10:25 ——</div>
|
|||
|
|
<div class="msg-bubble msg-user">VPN 连接一直失败，提示"无法建立安全连接"，重启了好几次都不行，急需访问内网代码仓库…</div>
|
|||
|
|
<div class="msg-bubble msg-agent">张工您好，先帮您排查一下：请问您是使用的 AnyConnect 客户端还是 SSL VPN 网页版？</div>
|
|||
|
|
<div class="msg-bubble msg-user">AnyConnect 客户端，版本是 4.10。刚才又试了一次，还是同样的错误。</div>
|
|||
|
|
<div class="msg-bubble msg-agent">收到。建议您先清除缓存配置：1）退出客户端；2）删除 XML 文件；3）重新连接。如果还不行，可以远程协助。</div>
|
|||
|
|
<div class="msg-bubble msg-user">按你说的试了，还是不行。能远程看下吗？</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ===== v1.3: 快速回复（移至中栏，位于消息框工具栏上方，贴合线上实际） ===== -->
|
|||
|
|
<div class="quick-reply-section" id="qrSection">
|
|||
|
|
<!-- 搜索栏 -->
|
|||
|
|
<div class="qr-search">
|
|||
|
|
<span class="qr-search-icon">🔍</span>
|
|||
|
|
<input class="qr-search-input" id="qrSearchInput" placeholder="搜索快速回复 / Alt+目录数字" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 面包屑导航 -->
|
|||
|
|
<div class="qr-breadcrumb" id="qrBreadcrumb">
|
|||
|
|
<span class="bc-back hidden" id="qrBackBtn" onclick="qrGoBack()">← 返回上级</span>
|
|||
|
|
<span class="bc-current" id="qrPathLabel">请选择分类</span>
|
|||
|
|
<span class="bc-hint hidden" id="qrPathHint">
|
|||
|
|
<span class="key-badge">Alt</span>+数字切换一级
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- L1 一级目录：网格 2 列 × 4 行 -->
|
|||
|
|
<div class="qr-l1-grid" id="qrL1Grid"></div>
|
|||
|
|
|
|||
|
|
<!-- L2 二级目录：流式 chip -->
|
|||
|
|
<div class="qr-l2-row hidden" id="qrL2Row"></div>
|
|||
|
|
|
|||
|
|
<!-- L3 回复列表 -->
|
|||
|
|
<div class="qr-l3-list" id="qrL3List">
|
|||
|
|
<div class="qr-l3-empty">
|
|||
|
|
<span class="empty-icon">💬</span>
|
|||
|
|
<span class="empty-hint">按 <span class="key-badge">Alt</span>+数字 选择一级分类<br>进入后按数字键逐层筛选<br>选中回复后按 <span class="key-badge">Enter</span> 填入输入框</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 已选中回复预览条 -->
|
|||
|
|
<div class="qr-selected-bar hidden" id="qrSelectedBar">
|
|||
|
|
<span>✅</span>
|
|||
|
|
<span class="sel-text" id="qrSelectedText"></span>
|
|||
|
|
<span class="sel-hint">Enter 填入</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 键盘指南 -->
|
|||
|
|
<div class="keyboard-guide" id="qrKeyboardGuide">
|
|||
|
|
<span><span class="key-badge">Alt</span>+<span class="key-badge">1-7</span> 一级分类</span>
|
|||
|
|
<span><span class="key-badge">数字</span> 选子项</span>
|
|||
|
|
<span><span class="key-badge">Enter</span> 填入</span>
|
|||
|
|
<span><span class="key-badge">←</span> 返回</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Chat input -->
|
|||
|
|
<div class="chat-input-area" id="chatInputArea">
|
|||
|
|
<div class="input-resize-handle" id="inputResizeHandle" title="拖拽调整输入框高度"></div>
|
|||
|
|
<!-- v1.7 · 改动组 A4：工具栏重组 + 图标统一
|
|||
|
|
常规工具组 ｜ 分隔线 ｜ AI 工具组；整体左对齐紧贴输入框左上角
|
|||
|
|
AI 组纯 emoji 无文字标签、无高亮底色，仅用原生 title 悬浮提示 -->
|
|||
|
|
<div class="chat-toolbar">
|
|||
|
|
<!-- 常规工具（左组）：仅 title 悬浮提示，无 tb-tip 文字 span -->
|
|||
|
|
<div class="toolbar-left">
|
|||
|
|
<button class="tb-btn" title="截图">✂️</button>
|
|||
|
|
<button class="tb-btn" title="拍照">📷</button>
|
|||
|
|
<span class="tb-sep"></span>
|
|||
|
|
<button class="tb-btn" title="表情">😊</button>
|
|||
|
|
<button class="tb-btn" title="文件">📎</button>
|
|||
|
|
<span class="tb-sep"></span>
|
|||
|
|
<button class="tb-btn" title="邀请员工/部门">👥</button>
|
|||
|
|
</div>
|
|||
|
|
<!-- 分组分隔（常规工具 与 AI 工具 之间） -->
|
|||
|
|
<span class="tb-sep"></span>
|
|||
|
|
<!-- AI 工具（右组）：纯 emoji、无文字标签、无高亮底色、同款 .tb-btn -->
|
|||
|
|
<div class="toolbar-right">
|
|||
|
|
<button class="tb-btn" title="AI 自动补齐">💡</button>
|
|||
|
|
<button class="tb-btn" title="AI 语气调整">🎚️</button>
|
|||
|
|
<button class="tb-btn" title="AI 文字润色">🖌️</button>
|
|||
|
|
<button class="tb-btn" title="AI 智能改写">🔄</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-input-row">
|
|||
|
|
<div class="chat-input-card">
|
|||
|
|
<textarea class="chat-input" id="chatInput" placeholder="输入回复内容... (Enter 发送，Shift+Enter 换行)" rows="3"></textarea>
|
|||
|
|
<button class="btn-send">发 送</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- ===== Task Detail View (hidden by default) ===== -->
|
|||
|
|
<div class="task-detail-view" id="taskDetailView">
|
|||
|
|
<div class="task-detail-header">
|
|||
|
|
<button class="btn-back" onclick="showChatView()">← 返回会话</button>
|
|||
|
|
<span class="task-title" id="taskDetailTitle">工单详情</span>
|
|||
|
|
<span class="task-type-badge" id="taskTypeBadge">工单</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="task-detail-body" id="taskDetailBody">
|
|||
|
|
<!-- Dynamic content inserted by JS -->
|
|||
|
|
</div>
|
|||
|
|
<div class="task-actions" id="taskActions">
|
|||
|
|
<!-- Dynamic buttons inserted by JS -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 拖拽手柄：中间栏↔右栏 -->
|
|||
|
|
<div class="resize-handle" id="resizeRight" title="拖拽调整右栏宽度"></div>
|
|||
|
|
|
|||
|
|
<!-- ===== RIGHT SIDEBAR ===== -->
|
|||
|
|
<div class="sidebar-right">
|
|||
|
|
|
|||
|
|
<!-- ===== v1.3: 排查步骤（右栏顶部，默认展开，可折叠） ===== -->
|
|||
|
|
<div class="ts-panel" id="tsPanel">
|
|||
|
|
<div class="ts-panel-head" onclick="toggleTsPanel()" title="点击折叠/展开排查步骤">
|
|||
|
|
<span class="ts-panel-title">🔧 排查步骤</span>
|
|||
|
|
<span class="col-badge" style="margin-left:8px;">右栏 ≈ 40%</span>
|
|||
|
|
<!-- v1.7 · 改动组 A2：全屏查看完整决策树 -->
|
|||
|
|
<span class="ts-fullscreen-btn" onclick="event.stopPropagation(); openFlowFullscreen()" title="全屏查看完整决策树">⛶ 全屏查看</span>
|
|||
|
|
<span class="ts-panel-collapse">▼</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="ts-panel-body">
|
|||
|
|
<div class="ts-path-inline" id="tsPathView">
|
|||
|
|
<span class="path-step done">① 确认版本</span>
|
|||
|
|
<span class="path-arrow-inline">→</span>
|
|||
|
|
<span class="path-step done">② 清除缓存</span>
|
|||
|
|
<span class="path-arrow-inline">→</span>
|
|||
|
|
<span class="path-step current">③ 远程排查</span>
|
|||
|
|
<span class="path-arrow-inline">→</span>
|
|||
|
|
<span class="path-step">④ 升级客户端</span>
|
|||
|
|
<span class="path-arrow-inline">→</span>
|
|||
|
|
<span class="path-step">⑤ 回访确认</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="ts-flowchart-toggle" id="tsFlowBtn" onclick="toggleTsFlow()">▼ 收起完整排查决策树</span>
|
|||
|
|
<div class="ts-flowchart" id="tsFlowchart">
|
|||
|
|
<div style="font-size:11px;color:var(--text-muted);margin-bottom:8px;">🔀 VPN 连接失败 — 完整排查决策树</div>
|
|||
|
|
|
|||
|
|
<div class="flow-step">
|
|||
|
|
<div class="flow-node done">1</div>
|
|||
|
|
<div class="flow-step-connector"></div>
|
|||
|
|
<div class="flow-content">
|
|||
|
|
<div class="flow-title">确认 VPN 客户端版本</div>
|
|||
|
|
<div class="flow-desc">询问用户使用 AnyConnect 或 SSL VPN，记录版本号</div>
|
|||
|
|
<div class="flow-branch">
|
|||
|
|
<div class="flow-branch-item active">→ AnyConnect 4.10 及以下：进入兼容性问题分支</div>
|
|||
|
|
<div class="flow-branch-item">→ SSL VPN 网页版：进入浏览器兼容分支</div>
|
|||
|
|
<div class="flow-branch-item">→ 其他版本：进入通用排查</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="flow-step">
|
|||
|
|
<div class="flow-node judge">❓ 判断</div>
|
|||
|
|
<div class="flow-step-connector"></div>
|
|||
|
|
<div class="flow-content">
|
|||
|
|
<div class="flow-title">版本 < 4.14？</div>
|
|||
|
|
<div class="flow-desc">AnyConnect 4.10 及更早版本存在已知兼容性问题</div>
|
|||
|
|
<div class="flow-branch">
|
|||
|
|
<div class="flow-branch-item active">是 → 执行步骤②清除缓存，若仍失败直接进入步骤④升级</div>
|
|||
|
|
<div class="flow-branch-item">否 → 进入网络配置排查分支</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="flow-step">
|
|||
|
|
<div class="flow-node done">2</div>
|
|||
|
|
<div class="flow-step-connector"></div>
|
|||
|
|
<div class="flow-content">
|
|||
|
|
<div class="flow-title">清除缓存配置文件</div>
|
|||
|
|
<div class="flow-desc">指导用户删除 C:\ProgramData\Cisco\ 下 XML 文件，重启客户端</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="flow-step">
|
|||
|
|
<div class="flow-node judge">❓ 判断</div>
|
|||
|
|
<div class="flow-step-connector"></div>
|
|||
|
|
<div class="flow-content">
|
|||
|
|
<div class="flow-title">清除缓存后能否连接？</div>
|
|||
|
|
<div class="flow-branch">
|
|||
|
|
<div class="flow-branch-item active">能 → 标记为"已解决"，进入步骤⑤回访</div>
|
|||
|
|
<div class="flow-branch-item">不能 → 进入步骤③远程排查</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="flow-step">
|
|||
|
|
<div class="flow-node current">3</div>
|
|||
|
|
<div class="flow-step-connector"></div>
|
|||
|
|
<div class="flow-content">
|
|||
|
|
<div class="flow-title">远程桌面排查</div>
|
|||
|
|
<div class="flow-desc">通过内网远程桌面连接用户电脑，检查网络适配器、防火墙、hosts 文件</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="flow-step">
|
|||
|
|
<div class="flow-node">4</div>
|
|||
|
|
<div class="flow-step-connector"></div>
|
|||
|
|
<div class="flow-content">
|
|||
|
|
<div class="flow-title">升级客户端至 4.14</div>
|
|||
|
|
<div class="flow-desc">发送下载链接，指导用户卸载旧版并安装新版，重新配置连接</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="flow-step">
|
|||
|
|
<div class="flow-node">5</div>
|
|||
|
|
<div class="flow-content">
|
|||
|
|
<div class="flow-title">24H 后回访确认</div>
|
|||
|
|
<div class="flow-desc">创建提醒任务，24小时后通过企业微信确认 VPN 使用正常</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- AI Recommend -->
|
|||
|
|
<!-- v1.7 · 改动组 A3：纵向堆叠（原横向滚动卡片行，一屏仅见 1-3 条需横滑）
|
|||
|
|
每条占满右栏宽度；保留数字快捷键徽标 + 方案标题 + 置信度药丸 + 两行截断正文 -->
|
|||
|
|
<div class="ai-recommend-section">
|
|||
|
|
<div class="ars-title">🤖 AI 智能推荐 <span class="ars-refresh" title="刷新推荐">🔄</span></div>
|
|||
|
|
<div class="ars-list">
|
|||
|
|
<div class="ars-card" onclick="fillInput(this)">
|
|||
|
|
<div class="ars-card-header">
|
|||
|
|
<span class="ars-shortcut">1</span>
|
|||
|
|
<span class="ars-card-title">远程协助方案</span>
|
|||
|
|
<span class="ars-confidence">92%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="ars-card-text">可以远程，请先安装 TeamViewer 或允许内网远程桌面。您的电脑名是什么？</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="ars-card" onclick="fillInput(this)">
|
|||
|
|
<div class="ars-card-header">
|
|||
|
|
<span class="ars-shortcut">2</span>
|
|||
|
|
<span class="ars-card-title">备用方案</span>
|
|||
|
|
<span class="ars-confidence">85%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="ars-card-text">临时使用 SSL VPN 网页版：https://sslvpn.servyou-it.com 企业微信扫码登录</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="ars-card" onclick="fillInput(this)">
|
|||
|
|
<div class="ars-card-header">
|
|||
|
|
<span class="ars-shortcut">3</span>
|
|||
|
|
<span class="ars-card-title">客户端升级指引</span>
|
|||
|
|
<span class="ars-confidence">78%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="ars-card-text">AnyConnect 4.10 存在已知兼容性问题，建议升级至 4.10.07061 后重试连接。</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- v1.3: 快速回复已移至中栏消息框工具栏上方 -->
|
|||
|
|
|
|||
|
|
<!-- ===== 待办事项（已移至右栏底部） ===== -->
|
|||
|
|
<div class="kanban">
|
|||
|
|
<div class="kanban-title">待办事项 <span class="count">6</span></div>
|
|||
|
|
|
|||
|
|
<div class="kanban-item active" onclick="showTaskDetail('ticket')">
|
|||
|
|
<span class="ki-priority urgent"></span>
|
|||
|
|
<span class="ki-text">CEO办公室 - 投屏设备故障</span>
|
|||
|
|
<span class="ki-type ticket">工单</span>
|
|||
|
|
<span class="ki-time">5m</span>
|
|||
|
|
<div class="ki-avatar ka-red" title="王莉">王</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="kanban-item" onclick="showTaskDetail('ticket')">
|
|||
|
|
<span class="ki-priority urgent"></span>
|
|||
|
|
<span class="ki-text">财务部 - 税控系统无法登录</span>
|
|||
|
|
<span class="ki-type ticket">工单</span>
|
|||
|
|
<span class="ki-time">12m</span>
|
|||
|
|
<div class="ki-avatar ka-orange" title="王磊">王</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="kanban-item" onclick="showTaskDetail('approval')">
|
|||
|
|
<span class="ki-priority high"></span>
|
|||
|
|
<span class="ki-text">IT采购申请 - 研发部笔记本电脑</span>
|
|||
|
|
<span class="ki-type approval">审批</span>
|
|||
|
|
<span class="ki-time">28m</span>
|
|||
|
|
<div class="ki-avatar ka-blue" title="李研发">李</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="kanban-item" onclick="showTaskDetail('device')">
|
|||
|
|
<span class="ki-priority high"></span>
|
|||
|
|
<span class="ki-text">会议室 A - 投影仪离线</span>
|
|||
|
|
<span class="ki-type device">设备</span>
|
|||
|
|
<span class="ki-time">45m</span>
|
|||
|
|
<div class="ki-avatar ka-green" title="行政部">行</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="kanban-item" onclick="showTaskDetail('approval')">
|
|||
|
|
<span class="ki-priority normal"></span>
|
|||
|
|
<span class="ki-text">新员工入职 - 设备申领审批</span>
|
|||
|
|
<span class="ki-type approval">审批</span>
|
|||
|
|
<span class="ki-time">32m</span>
|
|||
|
|
<div class="ki-avatar ka-purple" title="HR部">H</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="kanban-item resolved" onclick="showTaskDetail('ticket')">
|
|||
|
|
<span class="ki-priority done"></span>
|
|||
|
|
<span class="ki-text">客服部 - 耳机无声（驱动重装）</span>
|
|||
|
|
<span class="ki-type ticket">工单</span>
|
|||
|
|
<span class="ki-time">1h</span>
|
|||
|
|
<div class="ki-avatar ka-blue" title="客服部">客</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="kanban-stats"><span><span class="dot dot-online"></span> 在线 4</span><span><span class="dot dot-busy"></span> 忙碌 2</span><span><span class="dot dot-offline"></span> 离线 1</span></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ===== v1.3: 会话进行中占位提示（点击顶栏「会话已结束」后消失，下方复盘模块显现） ===== -->
|
|||
|
|
<div class="post-session-hint">
|
|||
|
|
📌 <b>复盘模块待激活</b>：以下模块将在 <b>中栏会话结束后</b> 自动显示——<br>
|
|||
|
|
🏷️ 智能标注 · ⭐ 质量反馈 · 📚 知识共享
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ===== v1.3: 智能标注（仅会话结束后显示；由「问题分析/会话详情」卡片演化） ===== -->
|
|||
|
|
<div class="post-session-card hidden-until-ended">
|
|||
|
|
<div class="psc-title">🏷️ 智能标注</div>
|
|||
|
|
<div class="psc-field">
|
|||
|
|
<div class="psc-field-label">AI 推荐分类（可修改）</div>
|
|||
|
|
<div class="psc-field-value">VPN 连接故障 / 客户端兼容性</div>
|
|||
|
|
<div class="psc-tags">
|
|||
|
|
<span class="psc-tag auto">AnyConnect</span>
|
|||
|
|
<span class="psc-tag auto">缓存清理</span>
|
|||
|
|
<span class="psc-tag auto">远程排查</span>
|
|||
|
|
<span class="psc-tag">重复问题</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="psc-field">
|
|||
|
|
<div class="psc-field-label">优先级（由会话指标推导）</div>
|
|||
|
|
<div class="psc-field-value">🔴 紧急 · 影响 12 人 · 核心研发</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="psc-field">
|
|||
|
|
<div class="psc-field-label">解决方案摘要（自动提取）</div>
|
|||
|
|
<div class="psc-field-value">清除 Cisco 缓存配置 → 无效 → 远程桌面排查网络适配器/防火墙 → 升级至 4.14。</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ===== v1.3: 质量反馈（仅会话结束后显示；由「会话详情/情绪状态」卡片演化） ===== -->
|
|||
|
|
<div class="post-session-card hidden-until-ended">
|
|||
|
|
<div class="psc-title">⭐ 质量反馈</div>
|
|||
|
|
<div class="psc-field">
|
|||
|
|
<div class="psc-field-label">本次服务评分</div>
|
|||
|
|
<div class="psc-stars">★★★★<span class="star-off">★</span> <span style="font-size:11px;color:var(--text-muted);">4.0 / 5</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="psc-row"><span class="psc-k">解决时长</span><span class="psc-v">18 分钟</span></div>
|
|||
|
|
<div class="psc-row"><span class="psc-k">一次解决率</span><span class="psc-v">是（无需二次进线）</span></div>
|
|||
|
|
<div class="psc-row"><span class="psc-k">用户情绪走向</span><span class="psc-v">😟 焦虑 → 🙂 满意</span></div>
|
|||
|
|
<div class="psc-field" style="margin-top:8px;">
|
|||
|
|
<div class="psc-field-label">改进建议（可填写）</div>
|
|||
|
|
<textarea class="psc-textarea" placeholder="记录本次可优化点，如：提前推送缓存清理自助文档…"></textarea>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ===== v1.3: 知识共享（仅会话结束后显示；由「其他备注/历史工单」卡片演化） ===== -->
|
|||
|
|
<div class="post-session-card hidden-until-ended">
|
|||
|
|
<div class="psc-title">📚 知识共享</div>
|
|||
|
|
<div class="psc-field">
|
|||
|
|
<div class="psc-field-label">沉淀为知识库条目</div>
|
|||
|
|
<div class="psc-field-value">《AnyConnect 4.10 缓存清理后仍无法连接 → 远程排查与升级指引》</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="psc-field">
|
|||
|
|
<div class="psc-field-label">可见范围</div>
|
|||
|
|
<div class="psc-tags">
|
|||
|
|
<span class="psc-tag">全员自助</span>
|
|||
|
|
<span class="psc-tag">坐席知识库</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<label class="psc-check"><input type="checkbox"> 已加入知识库（去重校验通过）</label>
|
|||
|
|
<div class="psc-field" style="margin-top:8px;">
|
|||
|
|
<div class="psc-field-label">补充备注</div>
|
|||
|
|
<textarea class="psc-textarea" placeholder="补充适用场景、关联工单号等…"></textarea>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/* ========== 主题切换 ========== */
|
|||
|
|
function toggleTheme() {
|
|||
|
|
const body = document.body;
|
|||
|
|
body.setAttribute('data-theme', body.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
|
|||
|
|
}
|
|||
|
|
function toggleUserDetail() {
|
|||
|
|
document.getElementById('userInfoBar').classList.toggle('expanded');
|
|||
|
|
}
|
|||
|
|
function toggleSection(header) {
|
|||
|
|
header.classList.toggle('collapsed');
|
|||
|
|
header.nextElementSibling.classList.toggle('collapsed');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== v1.3: 排查步骤面板折叠/展开（默认展开） ===== */
|
|||
|
|
function toggleTsPanel() {
|
|||
|
|
document.getElementById('tsPanel').classList.toggle('collapsed');
|
|||
|
|
}
|
|||
|
|
/* ===== v1.3: 完整排查决策树 展开/收起 ===== */
|
|||
|
|
function toggleTsFlow() {
|
|||
|
|
var fc = document.getElementById('tsFlowchart');
|
|||
|
|
var btn = document.getElementById('tsFlowBtn');
|
|||
|
|
var collapsed = fc.classList.toggle('collapsed-flow');
|
|||
|
|
btn.textContent = collapsed ? '▶ 展开完整排查决策树' : '▼ 收起完整排查决策树';
|
|||
|
|
}
|
|||
|
|
/* ===== v1.3: 顶部「会话状态」开关 —— 验证「仅会话结束后显示」三条复盘模块 ===== */
|
|||
|
|
function toggleSessionState() {
|
|||
|
|
var ended = document.body.classList.toggle('session-ended');
|
|||
|
|
var label = document.getElementById('sessionStateLabel');
|
|||
|
|
if (label) label.textContent = ended ? '会话已结束' : '会话进行中';
|
|||
|
|
// 会话结束后，右栏自动滚动到复盘模块位置，便于坐席直接操作
|
|||
|
|
if (ended) {
|
|||
|
|
var hint = document.querySelector('.post-session-hint');
|
|||
|
|
var firstCard = document.querySelector('.post-session-card.hidden-until-ended');
|
|||
|
|
if (firstCard && firstCard.scrollIntoView) {
|
|||
|
|
setTimeout(function(){ firstCard.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 60);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function fillInput(el) {
|
|||
|
|
const text = el.textContent.replace(/Ctrl\s*\+\s*\d/g, '').replace(/快速填入|执行操作/g, '').trim();
|
|||
|
|
document.getElementById('chatInput').value = text;
|
|||
|
|
autoResize(document.getElementById('chatInput'));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 输入框自动高度（最小3行约60px，最大300px） */
|
|||
|
|
function autoResize(textarea) {
|
|||
|
|
textarea.style.height = 'auto';
|
|||
|
|
textarea.style.height = Math.max(60, Math.min(textarea.scrollHeight, 300)) + 'px';
|
|||
|
|
}
|
|||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|||
|
|
var chatInput = document.getElementById('chatInput');
|
|||
|
|
if (chatInput) {
|
|||
|
|
chatInput.addEventListener('input', function() { autoResize(this); });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/* ========== Task Detail View Logic ========== */
|
|||
|
|
function showTaskDetail(type) {
|
|||
|
|
document.getElementById('chatView').classList.add('hidden');
|
|||
|
|
const detailView = document.getElementById('taskDetailView');
|
|||
|
|
detailView.classList.add('active');
|
|||
|
|
|
|||
|
|
const titleEl = document.getElementById('taskDetailTitle');
|
|||
|
|
const badgeEl = document.getElementById('taskTypeBadge');
|
|||
|
|
const bodyEl = document.getElementById('taskDetailBody');
|
|||
|
|
const actionsEl = document.getElementById('taskActions');
|
|||
|
|
|
|||
|
|
if (type === 'ticket') {
|
|||
|
|
titleEl.textContent = '工单 #20240606001';
|
|||
|
|
badgeEl.textContent = '运维工单';
|
|||
|
|
badgeEl.style.background = 'var(--accent-soft)';
|
|||
|
|
badgeEl.style.color = 'var(--accent)';
|
|||
|
|
badgeEl.style.border = '1px solid var(--accent)';
|
|||
|
|
|
|||
|
|
bodyEl.innerHTML = `
|
|||
|
|
<div class="task-info-card">
|
|||
|
|
<div class="tic-title">📋 工单描述</div>
|
|||
|
|
<div class="tic-row"><span class="tic-label">标题</span><span class="tic-value">CEO办公室 - 投屏设备故障</span></div>
|
|||
|
|
<div class="tic-row"><span class="tic-label">类型</span><span class="tic-value">硬件故障</span></div>
|
|||
|
|
<div class="tic-row"><span class="tic-label">优先级</span><span class="tic-value" style="color:var(--danger);">🔴 紧急</span></div>
|
|||
|
|
<div class="tic-row"><span class="tic-label">上报人</span><span class="tic-value">张总秘书 · 王莉</span></div>
|
|||
|
|
<div class="tic-row"><span class="tic-label">上报时间</span><span class="tic-value">2026-06-06 10:20</span></div>
|
|||
|
|
<div class="tic-desc">CEO 办公室无线投屏设备（型号：Microsoft Wireless Display Adapter v2）无法连接，会议即将开始（10:40），急需处理。已尝试重启设备和更换 HDMI 端口，问题依旧。</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="task-info-card">
|
|||
|
|
<div class="tic-title">📍 处理进度</div>
|
|||
|
|
<div class="tic-row"><span class="tic-label">状态</span><span class="tic-value" style="color:var(--warning);">⏳ 待接单</span></div>
|
|||
|
|
<div class="tic-row"><span class="tic-label">接单人</span><span class="tic-value" style="color:var(--text-muted);">未分配</span></div>
|
|||
|
|
<div class="tic-row"><span class="tic-label">SLA</span><span class="tic-value" style="color:var(--danger);">⏰ 剩余 12 分钟</span></div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// 2026-07-24 优化：按钮持续显示，已接单时显示"已接单"（禁用状态）
|
|||
|
|
// 待接单：绿色可点击
|
|||
|
|
// 已接单：灰色禁用
|
|||
|
|
actionsEl.innerHTML = `
|
|||
|
|
<button class="btn-action primary" onclick="this.outerHTML='<button class=\\'btn-action primary\\' disabled style=\\'opacity:0.5;cursor:not-allowed;background:#9ca3af;border-color:#9ca3af;\\'>📥 已接单</button>'">📥 接单</button>
|
|||
|
|
<button class="btn-action warning" onclick="alert('开始处理')">🔧 开始处理</button>
|
|||
|
|
<button class="btn-action success" onclick="alert('工单已结单')">✅ 结单</button>
|
|||
|
|
<button class="btn-action default" onclick="alert('已转派')">🔄 转派</button>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
} else if (type === 'approval') {
|
|||
|
|
titleEl.textContent = '审批 #APP-20240606003';
|
|||
|
|
badgeEl.textContent = '审批单';
|
|||
|
|
badgeEl.style.background = 'var(--purple-soft)';
|
|||
|
|
badgeEl.style.color = 'var(--purple)';
|
|||
|
|
badgeEl.style.border = '1px solid var(--purple)';
|
|||
|
|
|
|||
|
|
bodyEl.innerHTML = `
|
|||
|
|
<div class="task-info-card">
|
|||
|
|
<div class="tic-title">📝 审批内容</div>
|
|||
|
|
<div class="tic-row"><span class="tic-label">申请人</span><span class="tic-value">李研发经理 · 研发一部</span></div>
|
|||
|
|
<div class="tic-row"><span class="tic-label">审批类型</span><span class="tic-value">IT设备采购</span></div>
|
|||
|
|
<div class="tic-row"><span class="tic-label">申请时间</span><span class="tic-value">2026-06-05 14:30</span></div>
|
|||
|
|
<div class="tic-row"><span class="tic-label">预算</span><span class="tic-value">¥86,400（10台 × ¥8,640）</span></div>
|
|||
|
|
<div class="tic-desc">
|
|||
|
|
<strong>采购明细：</strong><br>
|
|||
|
|
• MacBook Pro 14" M3 Pro × 10台<br>
|
|||
|
|
• 预计交付日期：2026-06-20<br>
|
|||
|
|
• 用途：新员工入职配发<br>
|
|||
|
|
• 附件：<a href="#" style="color:var(--accent);">采购清单.xlsx</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="approval-section">
|
|||
|
|
<div class="as-title">✏️ 审批意见（可选）</div>
|
|||
|
|
<textarea class="approval-textarea" placeholder="输入审批意见..."></textarea>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
actionsEl.innerHTML = `
|
|||
|
|
<button class="btn-action success" onclick="alert('已审批通过')">✅ 审批通过</button>
|
|||
|
|
<button class="btn-action danger" onclick="alert('已拒绝审批')">❌ 拒绝审批</button>
|
|||
|
|
<button class="btn-action default" onclick="alert('已转交')">🔄 转交审批</button>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
} else if (type === 'device') {
|
|||
|
|
titleEl.textContent = '设备异常 #DEV-20240606007';
|
|||
|
|
badgeEl.textContent = '设备异常';
|
|||
|
|
badgeEl.style.background = 'var(--orange-soft)';
|
|||
|
|
badgeEl.style.color = 'var(--orange)';
|
|||
|
|
badgeEl.style.border = '1px solid var(--orange)';
|
|||
|
|
|
|||
|
|
bodyEl.innerHTML = `
|
|||
|
|
<div class="task-info-card">
|
|||
|
|
<div class="tic-title">🖥 设备状态</div>
|
|||
|
|
<div class="device-status-grid">
|
|||
|
|
<div class="device-status-item">
|
|||
|
|
<div class="dsi-label">设备名称</div>
|
|||
|
|
<div class="dsi-value">会议室A-投影仪</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="device-status-item">
|
|||
|
|
<div class="dsi-label">设备型号</div>
|
|||
|
|
|
|||
|
|
<!-- === 新增 AI 推荐 === -->
|
|||
|
|
<div class="recommend-item" data-ctrl="Ctrl+3">
|
|||
|
|
<div class="rec-header">
|
|||
|
|
<span class="rec-badge" style="background:#22c55e20;color:#22c55e;">知识库匹配</span>
|
|||
|
|
<span class="rec-confidence">88%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="rec-content" style="font-size:11px;">邮箱登录异常通常原因：密码过期（90天强制更换）、账号临时锁定、客户端配置错误。请先确认用户是否收到密码过期提醒。</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="recommend-item" data-ctrl="Ctrl+4">
|
|||
|
|
<div class="rec-header">
|
|||
|
|
<span class="rec-badge" style="background:#a855f720;color:#a855f7;">相似案例</span>
|
|||
|
|
<span class="rec-confidence">78%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="rec-content" style="font-size:11px;">打印驱动重装：设置→蓝牙和其他设备→打印机→删除→访问 print-server 下载最新驱动→重新添加。</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="dsi-value">Epson CB-W42</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="device-status-item">
|
|||
|
|
<div class="dsi-label">在线状态</div>
|
|||
|
|
<div class="dsi-value danger">🔴 离线</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="device-status-item">
|
|||
|
|
<div class="dsi-label">最后在线</div>
|
|||
|
|
<div class="dsi-value">2026-06-06 09:15</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="device-status-item">
|
|||
|
|
<div class="dsi-label">IP 地址</div>
|
|||
|
|
<div class="dsi-value">192.168.10.88</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="device-status-item">
|
|||
|
|
<div class="dsi-label">告警次数</div>
|
|||
|
|
<div class="dsi-value warning">3 次/今日</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tic-desc" style="margin-top:8px;">
|
|||
|
|
<strong>异常描述：</strong>设备连续 3 次离线，每次恢复后约 10 分钟再次掉线。可能原因：电源接触不良 / 网络端口故障 / 设备固件异常。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="task-info-card">
|
|||
|
|
<div class="tic-title">🔧 处理记录</div>
|
|||
|
|
<div class="tic-row"><span class="tic-label">10:15</span><span class="tic-value">尝试 Ping 设备 — 超时</span></div>
|
|||
|
|
<div class="tic-row"><span class="tic-label">10:20</span><span class="tic-value">检查交换机端口 — 指示灯不亮</span></div>
|
|||
|
|
<div class="tic-row"><span class="tic-label">10:25</span><span class="tic-value" style="color:var(--warning);">⏳ 待现场排查物理连接</span></div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
actionsEl.innerHTML = `
|
|||
|
|
<button class="btn-action primary" onclick="alert('一键开单')">📝 一键开单</button>
|
|||
|
|
<button class="btn-action warning" onclick="alert('已派工给硬件组')">🚚 派工</button>
|
|||
|
|
<button class="btn-action success" onclick="alert('设备已恢复')">✅ 标记恢复</button>
|
|||
|
|
<button class="btn-action default" onclick="alert('已加入巡检计划')">📅 加入巡检</button>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showChatView() {
|
|||
|
|
document.getElementById('chatView').classList.remove('hidden');
|
|||
|
|
document.getElementById('taskDetailView').classList.remove('active');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ================================================================
|
|||
|
|
快速回复 — 三层渐进式导航系统
|
|||
|
|
数据来源：IT支持知识库 180 条模板（2026-04-24）
|
|||
|
|
L1(Alt+数字) → L2(数字) → L3(数字) → Enter 填入
|
|||
|
|
================================================================ */
|
|||
|
|
|
|||
|
|
// 知识库数据从 qr_data.js 加载（IT支持知识库2026-4-24.docx 导出）
|
|||
|
|
|
|||
|
|
// 导航状态
|
|||
|
|
let qrState = {
|
|||
|
|
l1Index: -1, // 当前选中的一级分类索引（-1 = 未选）
|
|||
|
|
l2Index: -1, // 当前选中的二级分类索引（-1 = 未选）
|
|||
|
|
l3Index: -1, // 当前选中的三级回复索引（-1 = 未选）
|
|||
|
|
selectedText: '', // 当前选中的回复文本
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 快速回复 L1 主类颜色（与 CSS 变量 --qr-c0 ~ --qr-c6 对应）
|
|||
|
|
const qrColors = ['#3b82f6', '#22c55e', '#f97316', '#8b5cf6', '#ef4444', '#0ea5e9', '#6b7280'];
|
|||
|
|
const qrLightColors = ['#dbeafe', '#dcfce7', '#fff7ed', '#ede9fe', '#fee2e2', '#f0fdfa', '#f3f4f6'];
|
|||
|
|
|
|||
|
|
// 判断当前焦点是否在搜索框
|
|||
|
|
function isSearchFocused() {
|
|||
|
|
return document.activeElement === document.getElementById('qrSearchInput');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 渲染 L1 网格
|
|||
|
|
function renderL1() {
|
|||
|
|
const grid = document.getElementById('qrL1Grid');
|
|||
|
|
grid.innerHTML = qrData.map((cat, i) => {
|
|||
|
|
const isActive = qrState.l1Index === i;
|
|||
|
|
return `
|
|||
|
|
<div class="qr-l1-btn${isActive ? ' active' : ''}" data-l1="${i}" onclick="selectL1(${i})">
|
|||
|
|
<span class="l1-num">${i + 1}</span>
|
|||
|
|
<span class="l1-name">${cat.name}</span>
|
|||
|
|
</div>`;
|
|||
|
|
}).join('');
|
|||
|
|
grid.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 渲染 L2 chip 行
|
|||
|
|
function renderL2() {
|
|||
|
|
const row = document.getElementById('qrL2Row');
|
|||
|
|
const cat = qrData[qrState.l1Index];
|
|||
|
|
if (!cat) { row.classList.add('hidden'); return; }
|
|||
|
|
row.innerHTML = cat.subs.map((sub, i) => {
|
|||
|
|
const isSelected = qrState.l2Index === i;
|
|||
|
|
return `
|
|||
|
|
<div class="qr-l2-chip${isSelected ? ' selected' : ''}" data-l2="${i}" onclick="selectL2(${i})">
|
|||
|
|
<span class="l2-num">${i + 1}</span>
|
|||
|
|
<span>${sub.name}</span>
|
|||
|
|
</div>`;
|
|||
|
|
}).join('');
|
|||
|
|
row.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 渲染 L3 回复列表
|
|||
|
|
function renderL3() {
|
|||
|
|
const list = document.getElementById('qrL3List');
|
|||
|
|
const cat = qrData[qrState.l1Index];
|
|||
|
|
if (!cat || qrState.l2Index === -1) {
|
|||
|
|
// 还没选到 L2，显示空状态
|
|||
|
|
list.innerHTML = `
|
|||
|
|
<div class="qr-l3-empty">
|
|||
|
|
<span class="empty-icon">👆</span>
|
|||
|
|
<span class="empty-hint">请先在上方选择子分类<br>或按数字键 <span class="key-badge">1</span>~<span class="key-badge">${cat ? cat.subs.length : 'N'}</span> 快速选择</span>
|
|||
|
|
</div>`;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const sub = cat.subs[qrState.l2Index];
|
|||
|
|
if (!sub) return;
|
|||
|
|
list.innerHTML = sub.items.map((item, i) => {
|
|||
|
|
const isSelected = qrState.l3Index === i;
|
|||
|
|
return `
|
|||
|
|
<div class="qr-l3-item${isSelected ? ' selected' : ''}" data-l3="${i}" onclick="selectL3(${i})">
|
|||
|
|
<span class="l3-num">${i + 1}</span>
|
|||
|
|
<div class="l3-content">
|
|||
|
|
<div class="l3-title">${item.title}</div>
|
|||
|
|
<div class="l3-preview">${item.content}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>`;
|
|||
|
|
}).join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新面包屑
|
|||
|
|
function updateBreadcrumb() {
|
|||
|
|
const backBtn = document.getElementById('qrBackBtn');
|
|||
|
|
const pathLabel = document.getElementById('qrPathLabel');
|
|||
|
|
const pathHint = document.getElementById('qrPathHint');
|
|||
|
|
|
|||
|
|
if (qrState.l1Index === -1) {
|
|||
|
|
backBtn.classList.add('hidden');
|
|||
|
|
pathLabel.textContent = '请选择分类';
|
|||
|
|
pathHint.classList.remove('hidden');
|
|||
|
|
pathHint.innerHTML = '<span class="key-badge">Alt</span>+数字 选择分类';
|
|||
|
|
} else {
|
|||
|
|
const cat = qrData[qrState.l1Index];
|
|||
|
|
if (qrState.l2Index === -1) {
|
|||
|
|
backBtn.classList.remove('hidden');
|
|||
|
|
backBtn.textContent = '← 返回分类';
|
|||
|
|
pathLabel.textContent = `${cat.name}`;
|
|||
|
|
pathHint.classList.remove('hidden');
|
|||
|
|
pathHint.innerHTML = `数字 <span class="key-badge">1</span>~<span class="key-badge">${cat.subs.length}</span> 选子类`;
|
|||
|
|
} else {
|
|||
|
|
const sub = cat.subs[qrState.l2Index];
|
|||
|
|
backBtn.classList.remove('hidden');
|
|||
|
|
backBtn.textContent = '← 返回子类';
|
|||
|
|
pathLabel.innerHTML = `${cat.name} <span class="bc-sep">›</span> ${sub.name}`;
|
|||
|
|
pathHint.classList.remove('hidden');
|
|||
|
|
pathHint.innerHTML = `数字 <span class="key-badge">1</span>~<span class="key-badge">${sub.items.length}</span> 选回复 · <span class="key-badge">Enter</span> 填入`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新选中回复预览条
|
|||
|
|
function updateSelectedBar() {
|
|||
|
|
const bar = document.getElementById('qrSelectedBar');
|
|||
|
|
const textEl = document.getElementById('qrSelectedText');
|
|||
|
|
if (qrState.selectedText && qrState.l3Index !== -1) {
|
|||
|
|
bar.classList.remove('hidden');
|
|||
|
|
const cat = qrData[qrState.l1Index];
|
|||
|
|
const sub = cat.subs[qrState.l2Index];
|
|||
|
|
const item = sub.items[qrState.l3Index];
|
|||
|
|
textEl.textContent = item.title + '：' + item.content.substring(0, 40) + '...';
|
|||
|
|
} else {
|
|||
|
|
bar.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ===== 选择动作 =====
|
|||
|
|
|
|||
|
|
function selectL1(index) {
|
|||
|
|
qrState.l1Index = index;
|
|||
|
|
qrState.l2Index = -1;
|
|||
|
|
qrState.l3Index = -1;
|
|||
|
|
qrState.selectedText = '';
|
|||
|
|
renderL1();
|
|||
|
|
renderL2();
|
|||
|
|
renderL3();
|
|||
|
|
updateBreadcrumb();
|
|||
|
|
updateSelectedBar();
|
|||
|
|
// 设置 L2/L3 继承的主类颜色
|
|||
|
|
const qrSection = document.getElementById('qrSection');
|
|||
|
|
qrSection.style.setProperty('--qr-active-color', qrColors[index]);
|
|||
|
|
qrSection.style.setProperty('--qr-active-light', qrLightColors[index]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function selectL2(index) {
|
|||
|
|
qrState.l2Index = index;
|
|||
|
|
qrState.l3Index = -1;
|
|||
|
|
qrState.selectedText = '';
|
|||
|
|
renderL2();
|
|||
|
|
renderL3();
|
|||
|
|
updateBreadcrumb();
|
|||
|
|
updateSelectedBar();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function selectL3(index) {
|
|||
|
|
qrState.l3Index = index;
|
|||
|
|
const cat = qrData[qrState.l1Index];
|
|||
|
|
const sub = cat.subs[qrState.l2Index];
|
|||
|
|
const item = sub.items[index];
|
|||
|
|
qrState.selectedText = item.content;
|
|||
|
|
renderL3();
|
|||
|
|
updateBreadcrumb();
|
|||
|
|
updateSelectedBar();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 将选中回复填入聊天输入框
|
|||
|
|
function qrInsertToChat() {
|
|||
|
|
if (qrState.selectedText) {
|
|||
|
|
document.getElementById('chatInput').value = qrState.selectedText;
|
|||
|
|
document.getElementById('chatInput').focus();
|
|||
|
|
// 闪烁反馈
|
|||
|
|
const bar = document.getElementById('qrSelectedBar');
|
|||
|
|
bar.style.background = 'var(--accent-soft)';
|
|||
|
|
bar.style.color = 'var(--accent)';
|
|||
|
|
setTimeout(() => {
|
|||
|
|
bar.style.background = 'var(--success-soft)';
|
|||
|
|
bar.style.color = 'var(--success)';
|
|||
|
|
}, 300);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 返回上一级
|
|||
|
|
function qrGoBack() {
|
|||
|
|
if (qrState.l2Index !== -1) {
|
|||
|
|
// 从 L3 回到 L2
|
|||
|
|
qrState.l2Index = -1;
|
|||
|
|
qrState.l3Index = -1;
|
|||
|
|
qrState.selectedText = '';
|
|||
|
|
} else if (qrState.l1Index !== -1) {
|
|||
|
|
// 从 L2 回到 L1
|
|||
|
|
qrState.l1Index = -1;
|
|||
|
|
qrState.l2Index = -1;
|
|||
|
|
qrState.l3Index = -1;
|
|||
|
|
qrState.selectedText = '';
|
|||
|
|
document.getElementById('qrL2Row').classList.add('hidden');
|
|||
|
|
// 清除 L2/L3 继承的主类颜色
|
|||
|
|
const qrSection = document.getElementById('qrSection');
|
|||
|
|
qrSection.style.removeProperty('--qr-active-color');
|
|||
|
|
qrSection.style.removeProperty('--qr-active-light');
|
|||
|
|
}
|
|||
|
|
renderL1();
|
|||
|
|
renderL2();
|
|||
|
|
renderL3();
|
|||
|
|
updateBreadcrumb();
|
|||
|
|
updateSelectedBar();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ===== 键盘事件 =====
|
|||
|
|
document.addEventListener('keydown', function(e) {
|
|||
|
|
// 状态判断
|
|||
|
|
const chatFocused = document.activeElement === document.getElementById('chatInput');
|
|||
|
|
|
|||
|
|
// "/" 聚焦搜索框（非输入状态）
|
|||
|
|
if (e.key === '/' && !chatFocused && !isSearchFocused()) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
document.getElementById('qrSearchInput').focus();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Alt+数字：选择 L1 一级分类（全局有效，除聊天输入框外）
|
|||
|
|
if (e.altKey && e.key >= '1' && e.key <= '7') {
|
|||
|
|
if (chatFocused) return; // 聊天输入框中不拦截 Alt+数字
|
|||
|
|
e.preventDefault();
|
|||
|
|
const idx = parseInt(e.key) - 1;
|
|||
|
|
if (idx < qrData.length) {
|
|||
|
|
selectL1(idx);
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 在搜索框内时不处理数字导航
|
|||
|
|
if (isSearchFocused()) return;
|
|||
|
|
// 聊天输入框内不处理快速回复导航
|
|||
|
|
if (chatFocused) return;
|
|||
|
|
|
|||
|
|
// 数字键：逐层选择 L2 或 L3
|
|||
|
|
if (e.key >= '0' && e.key <= '9' && !e.altKey && !e.ctrlKey && !e.metaKey) {
|
|||
|
|
const num = parseInt(e.key);
|
|||
|
|
if (num === 0) return; // 0 不参与导航
|
|||
|
|
|
|||
|
|
if (qrState.l1Index !== -1 && qrState.l2Index === -1) {
|
|||
|
|
// 已选中 L1，数字选择 L2
|
|||
|
|
const cat = qrData[qrState.l1Index];
|
|||
|
|
if (num <= cat.subs.length) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
selectL2(num - 1);
|
|||
|
|
}
|
|||
|
|
} else if (qrState.l1Index !== -1 && qrState.l2Index !== -1) {
|
|||
|
|
// 已选中 L2，数字选择 L3
|
|||
|
|
const cat = qrData[qrState.l1Index];
|
|||
|
|
const sub = cat.subs[qrState.l2Index];
|
|||
|
|
if (num <= sub.items.length) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
selectL3(num - 1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Enter：将选中的回复填入聊天输入框
|
|||
|
|
if (e.key === 'Enter' && qrState.selectedText) {
|
|||
|
|
if (chatFocused) return; // 聊天输入框中 Enter 用于发送
|
|||
|
|
e.preventDefault();
|
|||
|
|
qrInsertToChat();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Backspace/Escape：返回上一级
|
|||
|
|
if ((e.key === 'Backspace' || e.key === 'Escape') && (qrState.l1Index !== -1)) {
|
|||
|
|
if (chatFocused) return;
|
|||
|
|
e.preventDefault();
|
|||
|
|
qrGoBack();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 初始渲染 — 默认展示第一分类第二层目录效果（方便原型评审）
|
|||
|
|
selectL1(0);
|
|||
|
|
|
|||
|
|
/* ===== v5.4: 拖拽调整中间栏左右边框 ===== */
|
|||
|
|
(function initResizeHandles() {
|
|||
|
|
const leftSidebar = document.querySelector('.sidebar-left');
|
|||
|
|
const rightSidebar = document.querySelector('.sidebar-right');
|
|||
|
|
const handleLeft = document.getElementById('resizeLeft');
|
|||
|
|
const handleRight = document.getElementById('resizeRight');
|
|||
|
|
|
|||
|
|
if (!handleLeft || !handleRight) return;
|
|||
|
|
|
|||
|
|
let dragging = null; // 'left' 或 'right'
|
|||
|
|
let startX = 0;
|
|||
|
|
let startWidth = 0;
|
|||
|
|
|
|||
|
|
function onMouseDown(e, side) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
dragging = side;
|
|||
|
|
startX = e.clientX;
|
|||
|
|
startWidth = side === 'left'
|
|||
|
|
? leftSidebar.offsetWidth
|
|||
|
|
: rightSidebar.offsetWidth;
|
|||
|
|
document.body.style.cursor = 'col-resize';
|
|||
|
|
document.body.style.userSelect = 'none';
|
|||
|
|
// 高亮当前手柄
|
|||
|
|
(side === 'left' ? handleLeft : handleRight).classList.add('dragging');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onMouseMove(e) {
|
|||
|
|
if (!dragging) return;
|
|||
|
|
if (dragging === 'left') {
|
|||
|
|
const dx = e.clientX - startX;
|
|||
|
|
const newW = Math.max(200, Math.min(500, startWidth + dx));
|
|||
|
|
leftSidebar.style.width = newW + 'px';
|
|||
|
|
leftSidebar.style.minWidth = newW + 'px';
|
|||
|
|
} else {
|
|||
|
|
// v1.7-A1：右栏改为 flex:1，拖拽时切换为固定 flex-basis，避免与 flex 布局打架
|
|||
|
|
const dx = startX - e.clientX;
|
|||
|
|
const newW = Math.max(320, Math.min(760, startWidth + dx));
|
|||
|
|
rightSidebar.style.flex = '0 0 ' + newW + 'px';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onMouseUp() {
|
|||
|
|
if (!dragging) return;
|
|||
|
|
document.body.style.cursor = '';
|
|||
|
|
document.body.style.userSelect = '';
|
|||
|
|
handleLeft.classList.remove('dragging');
|
|||
|
|
handleRight.classList.remove('dragging');
|
|||
|
|
dragging = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
handleLeft.addEventListener('mousedown', function(e) { onMouseDown(e, 'left'); });
|
|||
|
|
handleRight.addEventListener('mousedown', function(e) { onMouseDown(e, 'right'); });
|
|||
|
|
document.addEventListener('mousemove', onMouseMove);
|
|||
|
|
document.addEventListener('mouseup', onMouseUp);
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
/* ===== v5.4: 输入框上方拖拽手柄（调整输入框高度，textarea 同步伸缩） ===== */
|
|||
|
|
(function initInputResize() {
|
|||
|
|
const inputArea = document.getElementById('chatInputArea');
|
|||
|
|
const handle = document.getElementById('inputResizeHandle');
|
|||
|
|
const chatInput = document.getElementById('chatInput');
|
|||
|
|
if (!inputArea || !handle) return;
|
|||
|
|
|
|||
|
|
let dragging = false;
|
|||
|
|
let startY = 0;
|
|||
|
|
let startHeight = 0;
|
|||
|
|
let startInputHeight = 0;
|
|||
|
|
|
|||
|
|
handle.addEventListener('mousedown', function(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
dragging = true;
|
|||
|
|
startY = e.clientY;
|
|||
|
|
startHeight = inputArea.offsetHeight;
|
|||
|
|
startInputHeight = chatInput ? chatInput.offsetHeight : 40;
|
|||
|
|
document.body.style.cursor = 'row-resize';
|
|||
|
|
document.body.style.userSelect = 'none';
|
|||
|
|
handle.classList.add('dragging');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.addEventListener('mousemove', function(e) {
|
|||
|
|
if (!dragging) return;
|
|||
|
|
// 向上拖 → 整个区域变高，向下拖 → 变矮
|
|||
|
|
const dy = startY - e.clientY;
|
|||
|
|
const newH = Math.max(80, Math.min(400, startHeight + dy));
|
|||
|
|
inputArea.style.height = newH + 'px';
|
|||
|
|
// textarea 同步伸缩
|
|||
|
|
if (chatInput) {
|
|||
|
|
const delta = newH - startHeight;
|
|||
|
|
const newInputH = Math.max(60, Math.min(350, startInputHeight + delta));
|
|||
|
|
chatInput.style.height = newInputH + 'px';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.addEventListener('mouseup', function() {
|
|||
|
|
if (!dragging) return;
|
|||
|
|
dragging = false;
|
|||
|
|
document.body.style.cursor = '';
|
|||
|
|
document.body.style.userSelect = '';
|
|||
|
|
handle.classList.remove('dragging');
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/* ===== 排查步骤交互：用户端同步逻辑 ===== */
|
|||
|
|
(function() {
|
|||
|
|
var pathSteps = document.querySelectorAll('.path-step-inline');
|
|||
|
|
pathSteps.forEach(function(step, idx) {
|
|||
|
|
step.addEventListener('click', function() {
|
|||
|
|
pathSteps.forEach(function(s, i) {
|
|||
|
|
s.classList.remove('path-step-inline--done', 'path-step-inline--current', 'path-step-inline--pending');
|
|||
|
|
if (i < idx) s.classList.add('path-step-inline--done');
|
|||
|
|
else if (i === idx) s.classList.add('path-step-inline--current');
|
|||
|
|
else s.classList.add('path-step-inline--pending');
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/* ===== v1.2: 会话状态 Tab 切换 — 按状态筛选列表 ===== */
|
|||
|
|
(function() {
|
|||
|
|
var tabs = document.querySelectorAll('.conv-search-tab[data-status]');
|
|||
|
|
var sections = document.getElementById('convSections');
|
|||
|
|
var emptyBlocks = document.querySelectorAll('.conv-empty[data-for]');
|
|||
|
|
if (!tabs.length || !sections) return;
|
|||
|
|
|
|||
|
|
function applyStatus(status) {
|
|||
|
|
sections.setAttribute('data-active-status', status);
|
|||
|
|
// 等浏览器一帧 CSS 应用完后再计算可见项目
|
|||
|
|
requestAnimationFrame(function() {
|
|||
|
|
// 「全部」永远不显示空状态
|
|||
|
|
if (status === 'all') {
|
|||
|
|
emptyBlocks.forEach(function(b) { b.classList.remove('show'); });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 统计当前 status 下可见的 conv-item 数量
|
|||
|
|
var visible = sections.querySelectorAll('.conv-item[data-status="' + status + '"]').length;
|
|||
|
|
emptyBlocks.forEach(function(b) {
|
|||
|
|
if (b.getAttribute('data-for') === status) {
|
|||
|
|
b.classList.toggle('show', visible === 0);
|
|||
|
|
} else {
|
|||
|
|
b.classList.remove('show');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
sections.scrollTop = 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化：根据默认 active tab 跑一遍
|
|||
|
|
var initialActive = sections.querySelector('.conv-search-tab.active');
|
|||
|
|
if (initialActive) {
|
|||
|
|
applyStatus(initialActive.getAttribute('data-status'));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
tabs.forEach(function(tab) {
|
|||
|
|
tab.addEventListener('click', function() {
|
|||
|
|
tabs.forEach(function(t) { t.classList.remove('active'); });
|
|||
|
|
tab.classList.add('active');
|
|||
|
|
applyStatus(tab.getAttribute('data-status'));
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- ════════════════════════════════════════════════════════════════════
|
|||
|
|
v1.7 · 改动组 A2：全屏流程图浮层
|
|||
|
|
排查步骤可全屏研读完整决策树；关闭后回到右栏原状态（展开/收起态保留）
|
|||
|
|
════════════════════════════════════════════════════════════════════ -->
|
|||
|
|
<div class="flowchart-fullscreen" id="flowFullscreen">
|
|||
|
|
<div class="ff-topbar">
|
|||
|
|
<div class="ff-title">🔧 排查步骤 · 完整决策树（全屏）</div>
|
|||
|
|
<div class="ff-subtitle">VPN 连接失败 — 当前定位：③ 远程排查</div>
|
|||
|
|
<div class="ff-close" onclick="closeFlowFullscreen()">✕ 关闭（Esc）</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="ff-stage">
|
|||
|
|
<div class="ff-tree">
|
|||
|
|
<div class="flow-step">
|
|||
|
|
<div class="flow-node done">1</div>
|
|||
|
|
<div class="flow-step-connector"></div>
|
|||
|
|
<div class="flow-content">
|
|||
|
|
<div class="flow-title">确认 VPN 客户端版本</div>
|
|||
|
|
<div class="flow-desc">询问用户使用 AnyConnect 或 SSL VPN 网页版，记录版本号</div>
|
|||
|
|
<div class="flow-branch">
|
|||
|
|
<div class="flow-branch-item active">→ AnyConnect 4.10 及以下：进入兼容性问题分支</div>
|
|||
|
|
<div class="flow-branch-item">→ SSL VPN 网页版：进入浏览器兼容分支</div>
|
|||
|
|
<div class="flow-branch-item">→ 其他版本：进入通用排查</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flow-step">
|
|||
|
|
<div class="flow-node judge">❓</div>
|
|||
|
|
<div class="flow-step-connector"></div>
|
|||
|
|
<div class="flow-content">
|
|||
|
|
<div class="flow-title">清除缓存配置后能否连接？</div>
|
|||
|
|
<div class="flow-desc">退出客户端 → 删除 XML 配置文件 → 重新连接</div>
|
|||
|
|
<div class="flow-branch">
|
|||
|
|
<div class="flow-branch-item">能 → 标记「已解决」，进入⑤回访确认</div>
|
|||
|
|
<div class="flow-branch-item active">不能 → 进入③远程排查</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flow-step">
|
|||
|
|
<div class="flow-node done">2</div>
|
|||
|
|
<div class="flow-step-connector"></div>
|
|||
|
|
<div class="flow-content">
|
|||
|
|
<div class="flow-title">清除缓存与证书</div>
|
|||
|
|
<div class="flow-desc">清理本地 VPN 证书缓存，重置网络适配器</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flow-step">
|
|||
|
|
<div class="flow-node current">3</div>
|
|||
|
|
<div class="flow-step-connector"></div>
|
|||
|
|
<div class="flow-content">
|
|||
|
|
<div class="flow-title">远程排查</div>
|
|||
|
|
<div class="flow-desc">发起远程协助，检查客户端日志、防火墙与代理设置</div>
|
|||
|
|
<div class="flow-branch">
|
|||
|
|
<div class="flow-branch-item active">→ 日志报证书错误：进入证书重签分支</div>
|
|||
|
|
<div class="flow-branch-item">→ 日志报网络超时：进入网络链路分支</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flow-step">
|
|||
|
|
<div class="flow-node">4</div>
|
|||
|
|
<div class="flow-step-connector"></div>
|
|||
|
|
<div class="flow-content">
|
|||
|
|
<div class="flow-title">升级客户端</div>
|
|||
|
|
<div class="flow-desc">升级至 AnyConnect 4.10.07061 修复已知兼容性缺陷</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flow-step">
|
|||
|
|
<div class="flow-node">5</div>
|
|||
|
|
<div class="flow-content">
|
|||
|
|
<div class="flow-title">24H 后回访确认</div>
|
|||
|
|
<div class="flow-desc">创建提醒任务，24 小时后通过企业微信确认 VPN 使用正常</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="ff-hint">全屏模式便于研读完整决策树与分支；关闭后回到右栏「排查步骤」原状态（展开/收起态保留）</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ════════════════════════════════════════════════════════════════════
|
|||
|
|
v1.7 · 转接坐席选择 Dialog（Q-3 决策：独立 Dialog，不做二级菜单）
|
|||
|
|
中栏「🔄 转接」与左栏菜单「转接」共用本 Dialog，两入口 UI 完全一致
|
|||
|
|
════════════════════════════════════════════════════════════════════ -->
|
|||
|
|
<div class="transfer-mask" id="transferMask">
|
|||
|
|
<div class="transfer-box">
|
|||
|
|
<h4>🔄 转接会话</h4>
|
|||
|
|
<div class="tf-sub" id="tfSub">将「张伟」的会话转接给其他在线坐席</div>
|
|||
|
|
<input class="tf-search" placeholder="搜索坐席姓名 / 工号…" />
|
|||
|
|
<div class="tf-list">
|
|||
|
|
<div class="tf-agent" onclick="confirmTransfer('刘明')">
|
|||
|
|
<span class="tf-av">刘</span><span>刘明</span><span class="tf-load">3/8</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tf-agent" onclick="confirmTransfer('王强')">
|
|||
|
|
<span class="tf-av">王</span><span>王强</span><span class="tf-load busy">7/8</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="tf-agent" onclick="confirmTransfer('李静')">
|
|||
|
|
<span class="tf-av">李</span><span>李静</span><span class="tf-load">2/8</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tf-foot">
|
|||
|
|
<button class="btn-action default" style="font-size:12px;padding:5px 12px;" onclick="closeTransferDialog()">取消</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ════════════════════════════════════════════════════════════════════
|
|||
|
|
v1.7 · 原型说明
|
|||
|
|
════════════════════════════════════════════════════════════════════ -->
|
|||
|
|
<button class="proto-btn" onclick="openProtoNote()">📋 原型说明 v1.7</button>
|
|||
|
|
|
|||
|
|
<div class="modal-mask" id="protoModal">
|
|||
|
|
<div class="modal-box">
|
|||
|
|
<span class="close-x" onclick="closeProtoNote()">✕</span>
|
|||
|
|
<h3>📋 坐席工作台原型 v1.7 变更说明</h3>
|
|||
|
|
<p><b>基线选择</b>：以 <b>v1.3</b>（2447 行全量高保真原型）为骨架，叠加 v1.4~v1.6 的四项演进 + 本次会话条目操作菜单改造，产出 v1.7，作为开发的唯一依据。<br>
|
|||
|
|
<b>为什么不基于 v1.6</b>：v1.4~v1.6 是为论证「B 方案分栏」「全屏流程图」而新画的<b>专题示意原型</b>（961~1088 行），不是 v1.3 的增量演进。其左栏 <span class="kbd">.conv-item</span> 只有「头像/姓名/时间/摘要/未读数」5 个字段，中栏 <span class="kbd">.user-info-bar</span> 无任何操作按钮区，保真度落后真实代码两代。直接在 v1.6 上加三点菜单，会得出「条目右侧有大片空槽」的错误结论。</p>
|
|||
|
|
|
|||
|
|
<h4>改动组 A — 回填 v1.4~v1.6 的四项演进</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li><b>A1 · B 方案分栏</b>：左栏 <span class="kbd">260px</span> 固定（<span class="kbd">flex-shrink:0</span>，原 280px 可伸缩）／中栏 <span class="kbd">flex:1.5</span>／右栏 <span class="kbd">flex:1</span>，中右恒 <b>6:4</b>，右栏取消 max 上限。</li>
|
|||
|
|
<li><b>A2 · 全屏流程图浮层</b>：右栏「排查步骤」新增「⛶ 全屏查看」，可全屏研读完整决策树；关闭后回到右栏原状态（展开/收起态保留）。Esc 可关。</li>
|
|||
|
|
<li><b>A3 · AI 智能推荐改纵向堆叠</b>：由横向滚动卡片行（<span class="kbd">display:flex; overflow-x:auto</span>，一屏仅见 1-3 条需横滑）改为 <span class="kbd">flex-direction:column</span> 纵向堆叠，每条占满右栏宽度。保留原信息密度：数字快捷键徽标 + 方案标题 + 置信度药丸 + 两行截断正文，点击回填输入框。</li>
|
|||
|
|
<li><b>A4 · 工具栏重组 + 图标统一</b>：工具栏整体上移左对齐紧贴输入框左上角。常规组「✂️截图／📷拍照／😊表情／📎文件／👥邀请」，AI 组「💡自动补齐／🎚️语气／🖌️润色／🔄改写」，两组间一条分隔线。AI 按钮纯 emoji 无文字标签，与常规按钮共用同一 <span class="kbd">.tb-btn</span> 样式（同尺寸/圆角/悬停态/透明度），<b>AI 组不带高亮底色</b>（已移除 <span class="kbd">.toolbar-right{background:var(--accent-soft)}</span>），仅用原生 <span class="kbd">title</span> 悬浮提示。</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h4>改动组 B — 左栏会话条目回填真实字段（🔴 高风险项 R-2 的收口）</h4>
|
|||
|
|
<p>v1.3/v1.6 的条目只有 5 个字段，真实 <span class="kbd">ConversationItem.vue:11-149</span> 有三行结构。本次逐项对齐：48×48 头像 + 新消息圆点／第一行 📌置顶 📋代办 图标 + 姓名(省略) + <b>6 类 tag-badge</b>（VIP／招手／需介入／情绪／坐席名／⏳待确认）+ 最多 4 个 16×16 优先级图标／第二行 摘要 + 时间／第三行 5 星紧急度 + 「接手」「退出」link／右侧处理对象缩略头像。</p>
|
|||
|
|
<p><b>关键：原型如实还原了真实拥挤度</b>。左栏 260px − margin 6×2 − padding 10×2 = 条目内可用仅 <b>228px</b>；头像占 56px、缩略头像占 36px，<span class="kbd">.conversation-info</span> 只剩约 <b>136px</b>。请评审时按这个真实空间判断落位，而不是一个宽松的假条目。</p>
|
|||
|
|
|
|||
|
|
<h4>改动组 C — 三点按钮 + 右键菜单</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li><b>落位（决策 D-5）</b>：三点按钮<b>替换</b> <span class="kbd">.conv-target-avatar</span> —— hover 时缩略头像 <span class="kbd">opacity:0</span> 淡出、三点 <span class="kbd">opacity:1</span> 淡入，<b>同一栅格位、零布局抖动</b>。命中区 24×24，图标 <span class="kbd">MoreFilled</span> 14-16px。默认隐藏，<span class="kbd">:hover</span> / <span class="kbd">.is-menu-open</span> / <span class="kbd">:focus-visible</span> 时显示（保证键盘可达）。<br>未采用「并列插到缩略头像右侧」：会再吃掉 24px，信息区压到约 108px，第一行的 tag 与优先级图标将严重挤压。</li>
|
|||
|
|
<li><b>双触发器（决策 D-3）</b>：三点按钮为主入口（发现性），<b>右键为快捷方式</b>（效率）。二者<b>共用同一单例菜单与同一菜单项定义</b>，不是两套实现。坐席环境已确认为普通 PC 浏览器，无 VDI/触摸屏顾虑。<b>请在原型上直接右键任一会话条目试一下。</b></li>
|
|||
|
|
<li><b>菜单定位（D-6）</b>：<span class="kbd">placement="bottom-end"</span>，宽 140px，视口下缘不足时自动翻转 <span class="kbd">top-end</span>（滚到列表底部右键即可验证）。</li>
|
|||
|
|
<li><b>🔴 菜单必须单例、挂 ConversationList 层（D-4）</b>：左栏存在<b>双重 overflow 裁剪</b>（<span class="kbd">.workspace-sidebar{overflow:hidden}</span> + <span class="kbd">.conversation-list-scroll{overflow-x:hidden}</span>），任何挂在条目内的 <span class="kbd">position:absolute</span> 菜单<b>横向必被裁掉</b>、列表首尾纵向被裁。合规路径只有两条：<span class="kbd">position:fixed</span> + 视口坐标，或 Teleport 到 body。<br>单例的第二个理由：PRD-011 U-5 虚拟滚动会回收复用条目 DOM，菜单挂条目内会随 reference 销毁而错位/残留。条目只负责 <span class="kbd">emit('open-menu', {id, x, y})</span>。</li>
|
|||
|
|
<li><b>z-index</b>：菜单取 <b>2000</b> 对齐 Element Plus popper 基线。<b>不可</b>沿用 <span class="kbd">MessageItem.vue</span> 的 1000 —— 会被 EP 的 dropdown/popover/message-box 盖住。</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h4>菜单项可见性矩阵（架构核查 §4.4）</h4>
|
|||
|
|
<table>
|
|||
|
|
<tr><th>菜单项</th><th>显示条件</th><th>禁用条件</th><th>动态文案</th><th>后端权限</th></tr>
|
|||
|
|
<tr><td>接单</td><td><span class="kbd">status==='queued'</span></td><td>—</td><td>「接单」</td><td>update:all</td></tr>
|
|||
|
|
<tr><td>置顶 / 取消置顶</td><td><span class="kbd">is_mine || is_collaborator</span></td><td>—</td><td><span class="kbd">is_pinned</span> → 「取消置顶」</td><td>🔴 update:own</td></tr>
|
|||
|
|
<tr><td>代办 / 取消代办</td><td><span class="kbd">is_mine || is_collaborator</span></td><td>—</td><td><span class="kbd">is_todo</span> → 「取消代办」</td><td>🔴 update:own</td></tr>
|
|||
|
|
<tr><td>转接</td><td><span class="kbd">status==='serving' && is_mine</span></td><td>无可用坐席 → 禁用 +「暂无可用坐席」</td><td>「转接」</td><td>update:all</td></tr>
|
|||
|
|
<tr><td>接手</td><td><span class="kbd">can_grab && !is_mine && status==='serving'</span></td><td>—</td><td>「接手」</td><td>update:all</td></tr>
|
|||
|
|
<tr><td>退出协作</td><td><span class="kbd">is_collaborator && status==='serving'</span></td><td>—</td><td>「退出协作」</td><td>—</td></tr>
|
|||
|
|
</table>
|
|||
|
|
<p>🔴 <b>置顶/代办是后端 <span class="kbd">update:own</span> 权限</b>（<span class="kbd">conversations.py:374, 467</span>），非本人会话点了会 <b>403</b>。必须靠显示条件在前端拦住，不能靠后端报错兜底。原型中「赵敏」「吴明」两条<b>他人会话</b>的菜单里<b>看不到置顶/代办</b>，「周芳」因我是协作者<b>可以看到</b> —— 请对比这三条验证。</p>
|
|||
|
|
<p><b>菜单为空时三点按钮整体不显示</b>（如已结单的历史会话），避免给出一个点开只有「无可用操作」的空菜单。</p>
|
|||
|
|
|
|||
|
|
<h4>本轮由产品决策的三项（架构给了倾向，此处为定稿结论与理由）</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li><b>Q-3 转接的坐席选择 → 独立 Dialog</b>（采纳架构建议，不做二级菜单）。理由：菜单宽仅 140px，而坐席项需显示「姓名 + (当前负载/上限)」，中文 3 字姓名 + <span class="kbd">(3/8)</span> 已接近 96px，再叠加滚动条与 hover 态即贴边；坐席超过 8 人还需搜索框，二级菜单承载不下。更关键的是，260px 窄栏内嵌套二级 popper 在视口<b>右下角需同时做水平 + 垂直双向翻转</b>，组合态过于脆弱。Dialog 还带来一个额外收益：中栏保留的「转接」与左栏菜单的「转接」<b>共用同一个 Dialog</b>，两入口 UI 完全一致，不会出现「同一动作两种选人界面」。</li>
|
|||
|
|
<li><b>Q-4 「接手」「退出协作」→ 收进菜单，但第三行 link 按钮保留不动</b>（双入口）。理由：第三行 <span class="kbd">grab-btn</span>/<span class="kbd">leave-btn</span> 是数据驱动的<b>常显</b> link，它承担的是「这条会话可以被你接手」的<b>邀约信号</b>，需要在扫视时被看见；而三点按钮默认隐藏、hover 才出现，无法替代这个信号。反过来，右键路径下鼠标不在第三行按钮上，菜单里没有「接手」会造成右键功能残缺。故两者并存。<br>⚠️ <b>给开发的硬约束</b>：第三行按钮的显示条件是 <span class="kbd">showGrab && can_grab</span>（<span class="kbd">showGrab</span> 是 List 层按 section 传的 prop），菜单项若另写一套判据，会出现「条目上没有接手按钮、但右键菜单里有」的不一致。<b>菜单项「接手」必须复用与 <span class="kbd">grab-btn</span> 完全相同的显示条件表达式</b>，由 <span class="kbd">useConversationMenuItems</span> 统一出口。</li>
|
|||
|
|
<li><b>Q-5 「结单」→ 不进左栏菜单</b>（采纳架构建议）。理由有二：其一，结单需走摘要确认 Dialog（<span class="kbd">ChatArea.vue:448-502</span>），在左栏触发一个模态流程属路径错位——坐席点完还得回中栏确认摘要；其二，结单与转接、摇人同属「对话过程动作组」，应整组留在中栏，拆开会重演「同类动作入口劈成两处」的问题。</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h4>改动组 D — 中栏 UserInfoBar 调整</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li><b>删除</b>「📥 接单」「📌 置顶」「📋 代办」3 个按钮。接单本就发生在打开会话之前，左栏是其自然场所，且原按钮在 <span class="kbd">status!=='queued'</span> 时恒为 disabled 的「已接单」，长期占位却不可点，删除是净收益；置顶/代办属列表组织行为，其效果只在左栏可见，操作与反馈同处一栏更内聚。</li>
|
|||
|
|
<li><b>保留</b>「🔄 转接」，与既有的「🤝 摇人」「✅ 结单」并列。三者构成语义一致的<b>对话过程动作组</b>：转接=把这件事交出去／摇人=把人拉进来／结单=做完了，都在坐席读完描述、注意力与鼠标都在中栏的那一刻触发。若把转接赶到左栏，交互步数从 3 步涨到 6 步，且「在会滚动、会因置顶与紧急度动态重排的三分区列表里定位当前会话」本身就有成本。<b>⚠️ 后人请勿误以为「转接」是漏删——这是明确保留项（决策 D-2）。</b></li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<!-- ═══════════════════════════════════════════════════════════
|
|||
|
|
C-6 A/B 对比图（v1.7 主理人补 — 2026-08-09 13:00+）：
|
|||
|
|
宋献 C-6 拍板「要看 A/B 对比图」，此处并排呈现中栏 UserInfoBar
|
|||
|
|
的两个候选布局：A = 当前已定的「删 3 留转接」（已落 v1.7 主体）；
|
|||
|
|
B = 备选「4 个全收进中栏自己的『⋯』菜单」。请视觉对比后定夺。
|
|||
|
|
═══════════════════════════════════════════════════════════ -->
|
|||
|
|
<h4>C-6 · 中栏 A/B 对比图 — 请视觉对比后定夺</h4>
|
|||
|
|
<p>你已选「删 3 留转接」（A 方案 = 当前 v1.7 已落地）。但「把 4 个全收进中栏自己的『⋯』菜单」是另一个候选思路——它把顶栏视觉元素从 6 件压到 3 件，缺点是接单/置顶/代办需多一步点开⋯。下图并列两份中栏 UserInfoBar 布局。</p>
|
|||
|
|
|
|||
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0;">
|
|||
|
|
<!-- A 方案 -->
|
|||
|
|
<div style="border:2px solid var(--accent);border-radius:8px;padding:12px;background:var(--accent-soft);">
|
|||
|
|
<div style="font-weight:600;color:var(--accent);margin-bottom:8px;font-size:13px;">A 方案 · 已落 v1.7 — 中栏删 3 留转接</div>
|
|||
|
|
<div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:12px;">
|
|||
|
|
<div style="display:flex;align-items:center;gap:6px;">
|
|||
|
|
<div style="width:32px;height:32px;border-radius:50%;background:#dbeafe;color:#1e40af;display:flex;align-items:center;justify-content:center;font-weight:600;">张</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight:600;">张伟（外部客户）</div>
|
|||
|
|
<div style="font-size:11px;color:var(--text-muted);">工号 W12345 · 🟢 在线</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-left:auto;display:flex;align-items:center;gap:6px;">
|
|||
|
|
<button class="btn-action default" style="font-size:12px;padding:4px 10px;">🔄 转接</button>
|
|||
|
|
<button class="btn-action default" style="font-size:12px;padding:4px 10px;">🤝 摇人</button>
|
|||
|
|
<button class="btn-action danger" style="font-size:12px;padding:4px 10px;">✅ 结单</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<ul style="margin:8px 0 0 0;font-size:12px;color:var(--text-secondary);padding-left:18px;">
|
|||
|
|
<li>顶栏可见元素：<b>3 件</b>（转接/摇人/结单）</li>
|
|||
|
|
<li>接单/置顶/代办 → <b>左栏三点/右键菜单</b></li>
|
|||
|
|
<li>视线焦点：<b>中栏内一眼可见</b>，零迁移</li>
|
|||
|
|
<li>转接选坐席：点转接按钮 → Dialog（与左栏菜单的转接共用同一 Dialog）</li>
|
|||
|
|
<li><b>采用此方案</b> — D-2 / 宋献 C-1 决议</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- B 方案 -->
|
|||
|
|
<div style="border:2px dashed var(--text-muted);border-radius:8px;padding:12px;background:var(--bg-tertiary);">
|
|||
|
|
<div style="font-weight:600;color:var(--text-secondary);margin-bottom:8px;font-size:13px;">B 方案 · 备选 — 4 个全收进中栏自己的「⋯」菜单</div>
|
|||
|
|
<div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:12px;">
|
|||
|
|
<div style="display:flex;align-items:center;gap:6px;">
|
|||
|
|
<div style="width:32px;height:32px;border-radius:50%;background:#dbeafe;color:#1e40af;display:flex;align-items:center;justify-content:center;font-weight:600;">张</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight:600;">张伟（外部客户）</div>
|
|||
|
|
<div style="font-size:11px;color:var(--text-muted);">工号 W12345 · 🟢 在线</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-left:auto;display:flex;align-items:center;gap:6px;">
|
|||
|
|
<button class="btn-action default" style="font-size:12px;padding:4px 10px;">🤝 摇人</button>
|
|||
|
|
<button class="btn-action danger" style="font-size:12px;padding:4px 10px;">✅ 结单</button>
|
|||
|
|
<button class="btn-action default" style="font-size:14px;padding:4px 8px;background:var(--bg-tertiary);">⋯</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- B 方案 ⋯ 点开后弹层示意 -->
|
|||
|
|
<div style="margin-top:8px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;padding:6px 0;box-shadow:var(--shadow);font-size:12px;">
|
|||
|
|
<div style="padding:4px 14px;color:var(--text-muted);font-size:11px;">中栏 ⋯ 菜单（点击后）</div>
|
|||
|
|
<div style="padding:6px 14px;">📥 接单</div>
|
|||
|
|
<div style="padding:6px 14px;">📌 置顶</div>
|
|||
|
|
<div style="padding:6px 14px;">📋 代办</div>
|
|||
|
|
<div style="padding:6px 14px;">🔄 转接 ▸</div>
|
|||
|
|
</div>
|
|||
|
|
<ul style="margin:8px 0 0 0;font-size:12px;color:var(--text-secondary);padding-left:18px;">
|
|||
|
|
<li>顶栏可见元素：<b>3 件</b>（摇人/结单/⋯）</li>
|
|||
|
|
<li>接单/置顶/代办/转接 → <b>中栏自己的「⋯」菜单</b>（不走左栏）</li>
|
|||
|
|
<li>视线焦点：<b>多一步点开⋯</b>，但顶栏视觉最干净</li>
|
|||
|
|
<li>转接选坐席：点⋯ → 转接 ▸ → 仍可走 Dialog 或二级菜单</li>
|
|||
|
|
<li><b>未采纳</b> — 架构师 P1 候选，你已选 A 方案</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p><b>对比要点</b>：A 方案（左，已落）—— 接单/置顶/代办走左栏是它们的"自然场所"，中栏保持"对话过程动作"语义一致组（转接/摇人/结单 = 交出去/拉进来/做完了）；B 方案（右，备选）—— 把 4 个全收回中栏顶栏则失去了"左栏即列表组织"的语义清晰度，且接单需要走到顶栏，不如 A 自然。<b>请视觉确认 A 方案符合你的预期</b>，或基于此图提出 B 方案的进一步变体。</p>
|
|||
|
|
|
|||
|
|
<h4>一处必须澄清的既有误解</h4>
|
|||
|
|
<p><b>「接单/置顶/代办/转接 4 个按钮丢失了」——丢失发生在<u>原型侧</u>，不是代码侧；起始版本是 <u>v1.4</u>，不是 v1.5。</b><br>
|
|||
|
|
逐版本关键词计数：v1.0~v1.3 四个按钮均存在（v1.0 原文见 <span class="kbd">:1559-1567</span>）；v1.4.archive 起计数全部归零。而真实运行代码中，四个操作<b>从未丢失、且全部是真闭环</b>（UI → handler → store → api → 后端端点，四个端点均带权限装饰器）。请勿据「原型里没有」推断「功能没做」。</p>
|
|||
|
|
|
|||
|
|
<h4>与 PRD-011 的前向兼容</h4>
|
|||
|
|
<p>PRD-011 Phase 2 要做「统一 <span class="kbd">ListItem</span>（含 <span class="kbd">kind</span> 判别式）+ 条目组件支持会话态与任务态」。本次菜单若硬编码进 <span class="kbd">ConversationItem.vue</span>，Phase 2 必然重写。因此建议的抽象边界是：<b>抽菜单壳、不抽业务动作</b> —— <span class="kbd">WorkItemActionMenu.vue</span>（纯 UI 壳，零业务逻辑，不认识 conversation/approval/ticket）+ <span class="kbd">useConversationMenuItems.ts</span>（承载全部可见性规则，可单测，Phase 2 原样复用）。<br>
|
|||
|
|
⚠️ 三类 kind 的<b>反馈模型根本不同</b>：会话操作是服务端真闭环（点完即生效）；审批是降级跳转（点完只是跳走，状态由企微回调异步回写）；工单当前读链路即断。菜单项定义须携带 <span class="kbd">execMode: 'direct'|'redirect'|'disabled'</span>，由容器按 mode 分派反馈策略。<b>若共用一套「点击 → toast 成功」的反馈模型，就会重演 PRD-011 §3.1 定性为 P0 的那个错误</b>（绿色成功提示 + 外部系统实际未变更）。</p>
|
|||
|
|
|
|||
|
|
<h4>验收提醒</h4>
|
|||
|
|
<p><b>禁止以 toast 成功作为验收依据</b>（PRD-011 §3.1 既有教训）。会话侧四个操作的验收标准是：操作后<b>后端状态真实变更</b>且列表刷新后条目呈现对应变化（如置顶后条目上浮、代办后出现 📋 图标）。另需专门验证：非本人会话的菜单中<b>不出现</b>置顶/代办项（403 前端拦截），以及后端返回 403 时前端给出明确文案而非静默（现状 <span class="kbd">stores/conversation.ts:539-541</span> 仅 <span class="kbd">console.error</span>，用户无任何感知，属既有缺陷，建议一并修）。</p>
|
|||
|
|
|
|||
|
|
<h4>评审操作提示</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li>左栏任一条目 <b>hover</b> → 右侧缩略头像淡出、三点按钮淡入（同位替换，观察是否有布局抖动）。</li>
|
|||
|
|
<li>点击三点按钮，或在条目上<b>直接右键</b> → 弹出同一菜单。滚到列表底部再右键，验证向上翻转。</li>
|
|||
|
|
<li>对比「张伟(queued)」「陈芳(serving本人)」「李娜(已置顶已代办)」「赵敏(他人)」「周芳(我是协作者)」五条的菜单差异。</li>
|
|||
|
|
<li>「刘洋」一条设为<b>无可用坐席</b>，其菜单中「转接」为禁用态并提示「暂无可用坐席」。</li>
|
|||
|
|
<li>顶栏「会话状态」开关：模拟会话进行中/已结束，验证右栏复盘三模块显隐。右上角可切换深/浅色主题。</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/* ══════════════════════════════════════════════════════════════════
|
|||
|
|
v1.7 · 会话条目操作菜单（单例 · 三点按钮 + 右键 双触发器）
|
|||
|
|
本段 JS 是原型示意，但其【架构形态】即为开发约束：
|
|||
|
|
· 全局仅一个菜单节点 #convMenu，由 ConversationList 层持有
|
|||
|
|
· position:fixed + 视口坐标，规避左栏双重 overflow 裁剪
|
|||
|
|
· 菜单项由单一工厂函数 buildMenuItems() 生成 —— 两个触发器共用，
|
|||
|
|
保证三点按钮与右键的菜单内容永远一致
|
|||
|
|
· 关闭时机覆盖：点击外部 / Esc / 滚动 / 窗口 resize / 再次触发
|
|||
|
|
══════════════════════════════════════════════════════════════════ */
|
|||
|
|
(function initConvMenu() {
|
|||
|
|
var menuEl = document.getElementById('convMenu');
|
|||
|
|
if (!menuEl) return;
|
|||
|
|
var activeItem = null; // 当前菜单归属的条目（全局单例 activeMenuId 的等价物）
|
|||
|
|
|
|||
|
|
/* ---- 菜单项工厂：等价于 useConversationMenuItems.ts ----
|
|||
|
|
入参为条目上的 data-*（真实实现入参为 conversation + currentAgentId + section）
|
|||
|
|
出参已按 §4.4 矩阵算好 hidden / disabled / label */
|
|||
|
|
function buildMenuItems(el) {
|
|||
|
|
var status = el.getAttribute('data-conv-status');
|
|||
|
|
var isMine = el.getAttribute('data-mine') === '1';
|
|||
|
|
var isCol = el.getAttribute('data-collab') === '1';
|
|||
|
|
var pinned = el.getAttribute('data-pinned') === '1';
|
|||
|
|
var todo = el.getAttribute('data-todo') === '1';
|
|||
|
|
var canGrab = el.getAttribute('data-cangrab') === '1';
|
|||
|
|
var agents = parseInt(el.getAttribute('data-agents') || '0', 10);
|
|||
|
|
var items = [];
|
|||
|
|
|
|||
|
|
// 接单：status === 'queued'
|
|||
|
|
if (status === 'queued') {
|
|||
|
|
items.push({ key: 'assign', icon: '📥', label: '接单', execMode: 'direct' });
|
|||
|
|
}
|
|||
|
|
// 置顶 / 代办：is_mine || is_collaborator（update:own，非本人点了会 403，必须前端拦住）
|
|||
|
|
if (isMine || isCol) {
|
|||
|
|
if (items.length) items.push({ sep: true });
|
|||
|
|
items.push({ key: 'pin', icon: '📌', label: pinned ? '取消置顶' : '置顶', execMode: 'direct' });
|
|||
|
|
items.push({ key: 'todo', icon: '📋', label: todo ? '取消代办' : '代办', execMode: 'direct' });
|
|||
|
|
}
|
|||
|
|
// 转接：status === 'serving' && is_mine；无可用坐席时禁用
|
|||
|
|
if (status === 'serving' && isMine) {
|
|||
|
|
items.push({ sep: true });
|
|||
|
|
items.push({
|
|||
|
|
key: 'transfer', icon: '🔄', label: '转接', arrow: '▸',
|
|||
|
|
disabled: agents === 0,
|
|||
|
|
tooltip: agents === 0 ? '暂无可用坐席' : '选择目标坐席（独立 Dialog）',
|
|||
|
|
execMode: agents === 0 ? 'disabled' : 'direct'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// 接手 / 退出协作（Q-4：进菜单，第三行 link 按钮同时保留，共用同一 handler）
|
|||
|
|
if (canGrab && !isMine && status === 'serving') {
|
|||
|
|
items.push({ sep: true });
|
|||
|
|
items.push({ key: 'grab', icon: '🙋', label: '接手', execMode: 'direct' });
|
|||
|
|
}
|
|||
|
|
if (isCol && status === 'serving') {
|
|||
|
|
items.push({ sep: true });
|
|||
|
|
items.push({ key: 'leave', icon: '🚪', label: '退出协作', danger: true, execMode: 'direct' });
|
|||
|
|
}
|
|||
|
|
// 去掉首尾多余分隔线
|
|||
|
|
while (items.length && items[0].sep) items.shift();
|
|||
|
|
while (items.length && items[items.length - 1].sep) items.pop();
|
|||
|
|
return items;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderMenu(el, items) {
|
|||
|
|
var html = '<div class="conv-menu-head">' + (el.getAttribute('data-name') || '会话') + '</div>';
|
|||
|
|
if (!items.length) {
|
|||
|
|
html += '<div class="conv-menu-empty">无可用操作</div>';
|
|||
|
|
} else {
|
|||
|
|
items.forEach(function (it) {
|
|||
|
|
if (it.sep) { html += '<div class="conv-menu-sep"></div>'; return; }
|
|||
|
|
html += '<div class="conv-menu-item' + (it.disabled ? ' is-disabled' : '') + '"' +
|
|||
|
|
' role="menuitem" data-key="' + it.key + '"' +
|
|||
|
|
(it.tooltip ? ' title="' + it.tooltip + '"' : '') +
|
|||
|
|
(it.danger ? ' style="color:var(--danger)"' : '') + '>' +
|
|||
|
|
'<span class="cmi-icon">' + it.icon + '</span>' +
|
|||
|
|
'<span>' + it.label + '</span>' +
|
|||
|
|
(it.arrow ? '<span class="cmi-arrow">' + it.arrow + '</span>' : '') +
|
|||
|
|
'</div>';
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
menuEl.innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ---- 定位：placement=bottom-end，视口下缘/右缘不足时自动翻转 ----
|
|||
|
|
这是 MessageItem.vue 现有右键实现缺失的部分（它无任何边界处理，
|
|||
|
|
左栏条目密集、列表底部右键必然溢出视口下缘，不修复不可用） */
|
|||
|
|
function place(x, y) {
|
|||
|
|
menuEl.style.visibility = 'hidden';
|
|||
|
|
menuEl.classList.add('open');
|
|||
|
|
var w = menuEl.offsetWidth, h = menuEl.offsetHeight;
|
|||
|
|
var vw = window.innerWidth, vh = window.innerHeight;
|
|||
|
|
var left = x - w; // bottom-end：右对齐到锚点
|
|||
|
|
var top = y + 4;
|
|||
|
|
if (left < 6) left = 6; // 左缘贴边
|
|||
|
|
if (left + w > vw - 6) left = vw - w - 6;
|
|||
|
|
if (top + h > vh - 6) top = y - h - 4; // 下缘不足 → 翻转 top-end
|
|||
|
|
if (top < 6) top = 6;
|
|||
|
|
menuEl.style.left = left + 'px';
|
|||
|
|
menuEl.style.top = top + 'px';
|
|||
|
|
menuEl.style.visibility = 'visible';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openMenu(el, x, y) {
|
|||
|
|
closeMenu(); // 单例互斥：先关掉已打开的
|
|||
|
|
var items = buildMenuItems(el);
|
|||
|
|
if (!items.length) return; // 无可用操作 → 不弹空菜单
|
|||
|
|
activeItem = el;
|
|||
|
|
el.classList.add('is-menu-open');
|
|||
|
|
renderMenu(el, items);
|
|||
|
|
place(x, y);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeMenu() {
|
|||
|
|
menuEl.classList.remove('open');
|
|||
|
|
if (activeItem) { activeItem.classList.remove('is-menu-open'); activeItem = null; }
|
|||
|
|
}
|
|||
|
|
window.__closeConvMenu = closeMenu;
|
|||
|
|
|
|||
|
|
/* ---- 触发器 1：三点按钮（必须 .stop，否则点开菜单会连带切换会话） ---- */
|
|||
|
|
document.querySelectorAll('.conv-menu-btn').forEach(function (btn) {
|
|||
|
|
btn.addEventListener('click', function (e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
var el = btn.closest('.conv-item');
|
|||
|
|
if (activeItem === el) { closeMenu(); return; } // 再次点击 → 收起
|
|||
|
|
var r = btn.getBoundingClientRect();
|
|||
|
|
openMenu(el, r.right, r.bottom);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/* ---- 触发器 2：右键（同一菜单、同一菜单项定义） ---- */
|
|||
|
|
document.querySelectorAll('.conv-item').forEach(function (el) {
|
|||
|
|
el.addEventListener('contextmenu', function (e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
e.stopPropagation();
|
|||
|
|
openMenu(el, e.clientX + 4, e.clientY);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/* ---- 菜单项点击 ---- */
|
|||
|
|
menuEl.addEventListener('click', function (e) {
|
|||
|
|
var item = e.target.closest('.conv-menu-item');
|
|||
|
|
if (!item) return;
|
|||
|
|
if (item.classList.contains('is-disabled')) return; // 禁用项不响应
|
|||
|
|
var key = item.getAttribute('data-key');
|
|||
|
|
var name = activeItem ? (activeItem.getAttribute('data-name') || '会话') : '会话';
|
|||
|
|
var agents = activeItem ? parseInt(activeItem.getAttribute('data-agents') || '0', 10) : 0;
|
|||
|
|
closeMenu();
|
|||
|
|
if (key === 'transfer') { openTransferDialog(name, agents); return; }
|
|||
|
|
var labelMap = {
|
|||
|
|
assign: '接单', pin: '置顶/取消置顶', todo: '代办/取消代办',
|
|||
|
|
grab: '接手', leave: '退出协作'
|
|||
|
|
};
|
|||
|
|
alert('【' + name + '】' + labelMap[key] + '（原型示意）\n\n真实实现：store → API → 后端端点 → fetchConversations() 刷新。\n验收以后端状态真实变更 + 列表呈现变化为准，不以 toast 成功为依据。');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/* ---- 关闭时机（MessageItem.vue 现有实现仅覆盖第 1 条，其余全缺） ---- */
|
|||
|
|
document.addEventListener('click', function (e) { // 1 点击外部
|
|||
|
|
if (!menuEl.contains(e.target)) closeMenu();
|
|||
|
|
});
|
|||
|
|
document.addEventListener('keydown', function (e) { // 2 Esc
|
|||
|
|
if (e.key === 'Escape') closeMenu();
|
|||
|
|
});
|
|||
|
|
document.addEventListener('scroll', closeMenu, true); // 3 任意滚动
|
|||
|
|
window.addEventListener('resize', closeMenu); // 4 窗口 resize
|
|||
|
|
document.addEventListener('contextmenu', function (e) { // 5 在别处右键
|
|||
|
|
if (!e.target.closest('.conv-item') && !menuEl.contains(e.target)) closeMenu();
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
/* ========== v1.7：转接坐席选择 Dialog（Q-3） ========== */
|
|||
|
|
function openTransferDialog(name, agents) {
|
|||
|
|
if (typeof window.__closeConvMenu === 'function') window.__closeConvMenu();
|
|||
|
|
if (agents === 0) { alert('暂无可用坐席'); return; }
|
|||
|
|
document.getElementById('tfSub').textContent = '将「' + name + '」的会话转接给其他在线坐席';
|
|||
|
|
document.getElementById('transferMask').classList.add('open');
|
|||
|
|
}
|
|||
|
|
function closeTransferDialog() {
|
|||
|
|
document.getElementById('transferMask').classList.remove('open');
|
|||
|
|
}
|
|||
|
|
function confirmTransfer(agent) {
|
|||
|
|
closeTransferDialog();
|
|||
|
|
alert('转接给「' + agent + '」（原型示意）\n\n真实实现需 ElMessageBox 二次确认，成功后以后端状态变更为准。');
|
|||
|
|
}
|
|||
|
|
document.getElementById('transferMask').addEventListener('click', function (e) {
|
|||
|
|
if (e.target === this) closeTransferDialog();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/* ========== v1.7-A2：全屏流程图浮层 ========== */
|
|||
|
|
function openFlowFullscreen() { document.getElementById('flowFullscreen').classList.add('open'); }
|
|||
|
|
function closeFlowFullscreen() { document.getElementById('flowFullscreen').classList.remove('open'); }
|
|||
|
|
|
|||
|
|
/* ========== v1.7：原型说明对话框 ========== */
|
|||
|
|
function openProtoNote() { document.getElementById('protoModal').classList.add('open'); }
|
|||
|
|
function closeProtoNote() { document.getElementById('protoModal').classList.remove('open'); }
|
|||
|
|
document.getElementById('protoModal').addEventListener('click', function (e) {
|
|||
|
|
if (e.target === this) closeProtoNote();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.addEventListener('keydown', function (e) {
|
|||
|
|
if (e.key === 'Escape') {
|
|||
|
|
closeFlowFullscreen();
|
|||
|
|
closeProtoNote();
|
|||
|
|
closeTransferDialog();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!--
|
|||
|
|
═══════════════════════════════════════════════════════════════════════
|
|||
|
|
v1.7 自检清单
|
|||
|
|
═══════════════════════════════════════════════════════════════════════
|
|||
|
|
[✓] 基线：cp v1.3（2447+ 行全量原型）后增量修改，未从零重写；
|
|||
|
|
v1.3 既有内容全部保留 —— 左栏多状态会话、中栏 Chat+TaskDetail 双视图、
|
|||
|
|
右栏排查步骤/待办/复盘三模块、知识库 qrData 大数据块、
|
|||
|
|
深浅色主题切换、「会话状态」演示开关、三层快速回复与快捷键导航。
|
|||
|
|
[✓] A1 B方案分栏：左 260px flex-shrink:0 / 中 flex:1.5 / 右 flex:1，右栏无 max 上限。
|
|||
|
|
[✓] A2 全屏流程图浮层 + 右栏「⛶ 全屏查看」入口，Esc 可关，关闭后右栏状态保留。
|
|||
|
|
[✓] A3 AI 智能推荐纵向堆叠（.ars-list flex-direction:column），
|
|||
|
|
保留 数字快捷键徽标 + 方案标题 + 置信度药丸 + 两行截断正文。
|
|||
|
|
[✓] A4 工具栏重组：常规组 ✂️📷😊📎👥 ｜ 分隔线 ｜ AI 组 💡🎚️🖌️🔄，
|
|||
|
|
AI 组无文字标签、无高亮底色（.toolbar-right 无 background），共用 .tb-btn。
|
|||
|
|
[✓] B 左栏条目回填真实字段：48px 头像 + 圆点 / 📌📋 / 6类 tag-badge /
|
|||
|
|
≤4 优先级图标 / 摘要+时间 / 5星紧急度 / 接手·退出 link / 缩略头像。
|
|||
|
|
条目可用宽 228px 的真实拥挤度已如实还原。
|
|||
|
|
[✓] C 三点按钮替换缩略头像（同栅格位 opacity 淡入淡出，零布局抖动，24×24）；
|
|||
|
|
右键 @contextmenu.prevent 唤起同一单例菜单；
|
|||
|
|
菜单单例挂 ConversationList 层、position:fixed、bottom-end + 自动翻转、z-index 2000；
|
|||
|
|
可见性矩阵严格按 §4.4；菜单为空时三点按钮不显示。
|
|||
|
|
[✓] D 中栏删「接单/置顶/代办」，保留「转接」+ 摇人 + 结单，并在注释与原型说明中写明保留理由。
|
|||
|
|
[✓] 10 条会话覆盖 queued / serving本人 / serving他人 / 我是协作者 /
|
|||
|
|
pending_close / resolved(history) 六种状态，菜单差异可逐条对比。
|
|||
|
|
[✓] 版本号：<title>、顶栏 v-tag、原型说明按钮、对话框标题均为 v1.7。
|
|||
|
|
═══════════════════════════════════════════════════════════════════════
|
|||
|
|
-->
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|