Simon
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": "企业微信账号同时与个人微信、手机同步绑定"}, {"title": "企微手机聊天记录迁移到电脑", "content": "企业微信：打开企业微信---我---设置---通用---聊天记录迁移（手机和电脑连接同一网络热点）"}, {"title": "企业微信显示手机号码修改", "content": "操作路径：企业微信手机端→设置→账号与安全→手机号→更换手机号，按提示完成。"}, {"title": "企业微信账号登录异常", "content": "处理方案：\n1. 账号限制/封禁：通过官方申诉链接处理：https://work.weixin.qq.com/webapp/kefuSelfService/page 。\n2. 设备超限：卸载当前版本，重启后下载最新版安装：https://work.weixin.qq.com/#indexDownload"}, {"title": "企业微信消息接收延迟", "content": "排查步骤：\n1. 确认文件存储路径：企业微信→设置→存储管理。\n2. 退出企业微信，删除WXWork存储路径下的Global文件夹。"}, {"title": "企业微信客户相关功能限制（客户群/朋友圈/外部联系人", "content": "“亿企赢总部“企微主要作为内部沟通渠道，限制添加外部联系人、客户、客户群等客户营销、服务支持功能。\n“亿企赢”主体：用于客户联系。\n“亿企赢总部”主体：仅限内部沟通。\n如有上述需求请切换至“亿企赢”企微主体进行操作，或由“亿企赢”企微主体账号客户&项目经理账号建立客户群，再添加“亿企赢总部”相关人员入群。"}]}, {"name": "企业邮箱", "items": [{"title": "税友企业邮箱访问方式与账号密码认证方式", "content": "通过第三方邮件客户端配置POP、SMTP、IMAP协议访问，需使用邮箱专用安全密码\n通过Coremail客户端配置POP、SMTP、IMAP协议访问，需使用邮箱专用安全密码\n通过Coremail客户端配置Coremail协议访问，需使用统一员工账号密码\n通过税友企业邮箱网页登录使用统一员工账号密码+短信认证"}, {"title": "税友企业邮箱密码修改或重置", "content": "注意：通过WEB网页登录企业邮箱与邮件客户端收发邮件所配置密码并不相同，访问WEB地址和使用Coremail客户端采用的是员工统一账号密码（与eHR、税友家园登录密码相同），其他第三方邮件客户端配置的是邮件客户端安全专用密码，请根据实际情况选择不同密码修改重置方式。\n员工统一账号密码重置入口：\nhttp://192.168.9.87:8080/employee-center/resetPwd.jsp\n第三方邮件客户端邮件客户端专用密码生成和重置入口:\n使用员工统一账号密码+短信验证码登录WEB邮箱https://mail.servyou.com.cn/\n设置（齿轮图标）-安全设置-客户端安全登录-“生成专用密码”\n设置密码名称（便于区分使用软件或对象）\n获取（复制）16位密码和邮件客户端配置（按需）"}, {"title": "邮箱客户端安全登录专用密码介绍", "content": "客户端专用密码是用于登录第三方邮件客户端（例如Outlook、Foxmail、邮件App等）时使用的专属密码\n适合客户端通过以下协议使用：POP、IMAP、SMTP、Pushmail、CalDAV、CardDAV\n“客户端专用密码”仅在生成时可见，支持设置多个，切勿使用其它方式保存，以防泄露\n邮件客户端专用密码需通过登录邮件服务器网站进行申请和获取"}, {"title": "税友企业邮件地址", "content": "税友企业邮件网址： https://mail.servyou.com.cn"}, {"title": "税友邮箱网站无法登入", "content": "步骤：\n1. 先登录税友家园（ https://oa.servyou-it.com/）验证账号。\n2. 若密码错误，通过http://192.168.9.87:8080/employee-center/resetPwd.jsp重置。\n3. 重置后等待10分钟重试邮箱登录。"}, {"title": "税友邮箱已发送邮件召回", "content": "条件：仅限发送给公司内部员工且对方未读的邮件。\n操作：登录网页版邮箱（https://mail.servyou.com.cn）→自助查询→发信查询→点击“召回邮件”。"}, {"title": "邮箱客户端配置", "content": "邮件客户端选择和下载\nCoremail邮件客户端 https://www.coremail.cn/download.html\nFoxmail邮件客户端 https://www.foxmail.com/win/\n企业微信邮件应用 路径：企业微信客户端-邮件\n生成邮件客户端专用密码：登录网页版邮箱（ https://mail.servyou.com.cn/ ）→个人设置→安全设置→客户端安全登录→生成16位专用密码。\n配置客户端：\n收发服务器地址：mail.servyou.com.cn\n协议和端口：POP收件协议 995（SSL）、SMTP发件协议465（SSL）\n密码使用生成的专用密码。\n详细指南参考：https://doc.weixin.qq.com/doc/w3_AU8AjwZhAIgBx1RxfT7SRqnW0yN7i"}, {"title": "使用邮件客户端本地保留历史收发邮件", "content": "说明：根据公司信息安全管理要求，企业邮箱服务器邮件仅保留14天，14天到期邮件将被清除且无法恢复。如有经常随时查阅历史邮件和有邮件存档需求，应避免只使用WEB方式访问邮件网站收发邮件，同时避免使用配置imap、Coremail协议的邮件客户端如：企业微信邮件、Coremail邮件客户端），而应选择配置POP收件协议 的邮件客户端管理邮件。\n解决方案：\n根据需要选择下载安装 Foxmail、Coremail、网易邮箱大师等邮件客户端，Coremail邮件客户端配置过程邮件协议不要默认选择Coremail。\n2.登录企业邮件网址https://mail.servyou.com.cn. 通过路径”设置（齿轮图标）-安全设置-客户端安全登录“，申请邮件客户端专用密码\n3.正确邮件客户端邮件服务器地址、收发邮件服务器地址和端口、邮件账号和邮件客户端专用密码"}, {"title": "Foxmail邮箱收发异常“不知道这样的主机”", "content": "处理步骤：\n1. 打开Foxmail，右键邮箱名→设置→账号→服务器。\n2. 修改服务器地址为mail.servyou.com.cn，端口收件995（SSL）、发件465（SSL）。"}, {"title": "税友邮箱WEB登录异常“用户名或密码错误，或登录受到限制”", "content": "解决步骤：\n1. 重置密码：http://192.168.9.87:8080/employee-center/resetPwd.jsp\n2. 尝试登录税友家园（ https://oa.servyou-it.com/ ）验证账号正常后，重试邮箱登录。"}, {"title": "外部邮件漏收&被拦截", "content": "排查步骤：\n1.使用私人邮箱或请同事给自己发送一封邮件，确认有些客户端设置是否正确。\n2.检查邮件客户端垃圾邮件（箱），确定是否被邮件客户端拦截\n3使用员工账户中心密码+短信信验证码，登录企业邮箱WEB页面 https://mail.servyou.com.cn ，检查“其他文件-垃圾邮件下是否有所需邮件\n如以上检查确认无法收到，请IT支持人工坐席联系邮件运维，启动“邮件防火墙筛查”"}, {"title": "公共邮箱申请流程（新建|回收|停用）", "content": "申请链接：https://devops.dc.servyou-it.com/ITSM/workflow/service/createTicket?name=公共邮箱账号申请\n具体审批执行情况请联系工单处理人。"}, {"title": "Coremail邮箱显示脱机", "content": "请右键点击账号信息，选择“设为联机模式”。如果操作后仍未恢复，请确认账号和密码输入是否正确。"}]}, {"name": "税友云盘", "items": [{"title": "税友云盘网址和客户端下载", "content": "税友云盘网址： https://ypan.dc.servyou-it.com\n登录窗口左下角点击“下载客户端”\n注：税友云盘暂不支持手机移动端"}, {"title": "税友企业云盘账号解冻", "content": "税友云盘（企业云盘）\n云盘账号解冻联系谢聪利申请解冻。"}, {"title": "税友云盘更新失败", "content": "访问https://ypan.dc.servyou-it.com/user/login ，在登录页面左下角下载最新版安装。"}, {"title": "税友云盘密码错误", "content": "使用员工统一认证账号密码+短信二次认证，用户名与税友家园、EHR系统一致，忘记密码可使用员工统一认证账号密码重置方式进行重置"}, {"title": "税友云盘文件夹访问权限申请", "content": "税友云盘文件夹权限管理由各部门及项目指定空间管理员分管，云盘文件夹目录创建与权限调整需联系所属的管理员。\n税友云盘部门和项目管理员名单：https://doc.weixin.qq.com/sheet/e3_m_aOPqWFhxgwDR?scode=AAoA1wcYAAcVgz1ud7AQgAuAYMANY&tab=BB08J2"}]}, {"name": "企微微盘", "items": [{"title": "企微微盘上传本地文件提示“微盘容量已满，无法上传文件，开通微盘高级功能，可提升容量。”应该如何处理？", "content": "因企业微信-微盘收费政策发生重大调整，费用较之前上涨6倍。前期经过与各客群沟通，当前“文档”功能在绝大多数工作场景中已能够替代“微盘”，因此先暂停微盘的续费工作。已安排各客群调研实际需求，后续将根据调研的结果评估续费方案。现阶段的影响以及安排如下：\n一、到期影响（2026年3月14日起）\n1.微盘：到期后将无法上传新本地文件，空间已有文件可正常访问、下载，短时间不被删除。\n2.文档：“文档”的在线编辑、上传及共享等功能 不受此次调整影响。在线文档大小不占用微盘容量。\n二、 后续使用指引\n1.主要替代方案：请各部门及员工将后续新增的文档存储、分享需求，通过企业微信“文档”功能中实现。\n2.特殊需求处理：如确有特殊业务必须使用微盘，请由部门接口人汇总评估需求必要性。\n3.文档高级会员：部分原微盘需求将转移至“文档”后新增高级会员，公司将按必要性进行引导与管理，具体采购流程和管理方案另行通知。\n三、 咨询与支持\n请各位同事知悉并提前做好工作安排，如有疑问可统一咨询： 企微“智能IT助手”，各中心接口人将负责本部门内的宣导与部门内个性化实施。\n微盘&文档常见问题答疑文档链接：https://doc.weixin.qq.com/doc/w3_AJAAAQaUAI4CN6WEkNQg7RZWP4F2Z?scode=AAoA1wcYAAcO7CE2NAAJAAAQaUAI4\n微盘管理部门接口人："}, {"title": "为什么企微微盘容量到期后，公司不再统一续费？", "content": ""}, {"title": "因企业微信-微盘收费政策发生重大调整，费用较之前上涨6倍。前期经过与各客群沟通，当前“文档”功能在绝大多数工作场景中已能够替代“微盘”，因此先暂停微盘的续费工作。", "content": ""}, {"title": "企微微盘容量到期后，原有空间内的文件有什么影响？", "content": "到期后企微空间将无法上传新本地文件，空间已有文件可正常访问、下载，短时间不被删除。"}, {"title": "企微微盘空间内的文件能够保留多久？", "content": "企微空间内的文件暂时不会删除，如果企微官方调整文件保存策略，会提前通知"}, {"title": "企微微盘没有扩容的情况下，每个人平均有的是多少？", "content": "按照集团企微账号共享容量100GB，集团现有约7000人均分，大概14MB/ 人"}, {"title": "如何查看企微微盘已用容量", "content": "路径：【电脑端->微盘->左下角->个人容量】\n将鼠标悬停在已用容量位置，可查看：微盘版本（企业）、账号类型（个人）、已用容量（个人）、剩余容量（企业）。"}]}, {"name": "企微文档", "items": [{"title": "在线文档里插入本地图片和其他文件，所占用的是什么应用的容量？", "content": "在线文档上传的本地文件只会占用“文档”容量，"}, {"title": "视频/音频可以转成企微微盘在线文档吗？", "content": "只有word、Excel、演示、PPT不可以转为在线文档，其他格式无法转为在线文档"}, {"title": "企微文档容量如何计算？", "content": "文档仅占用创建者的容量，文档容量根据文档正文、文档中插入的文件、图片以及版本历史记录综合计算，具体类型包括：\n文档、表格、幻灯片、智能表格、思维导图、流程图：文档正文、文档中插入的本地文件、图片、表格函数、图表等\n收集表、汇报：填写者提交的内容，包含正文、文件、图片、签名等\n版本历史记录计入文档容量：在线文档会自动保留历史版本，方便查看编辑记录，可以随时找回历史内容，避免数据丢失。文档容量将根据版本历史的大小综合计算。"}, {"title": "企微文档中插入的文件是否占用企微微盘容量？", "content": "文档中插入的文件仅占用文档容量，不会占用微盘容量。"}, {"title": "企微文档容量如何提升？", "content": "基础版个人总容量上限为 1G，开通文档高级功能后，文档容量提升至无限。"}, {"title": "如何查看已用企微文档容量情况？", "content": "成员可在【手机端->文档->右上角的“+”->更多->关于文档】中查看文档已用容量。"}, {"title": "如何释放已经占用的企微「文档」容量", "content": "方法一：删除过期文档，进入「文档 > 全部 > 我的文档」，这里将展示占用本人容量的所有文档，可以按大小排序，可自行操作删除。\n方法二：删除文档中的图片和文件，打开本人创建的文档，删除文档中已插入的图片、文件。\n方法三：删除通过汇报上传的文件，在「微盘 ->我的空间->选择对应的汇报」操作删除汇报中的文件、图片。删除后，一般10分钟左右就能释放对应的容量。注：需汇报创建者操作。\n方法四：文档版本历史记录文档瘦身，进入进入「文档 > 设置> 生成副本」，删除原文档保留副本文档\n方法五：移交文档、文件（夹）所有权给文档高级会员，将文档（文件夹）移动至个人空间，选中文件（夹）右键>转接所有权（所转交文件占用的空间会移交给接收人）\n温馨提示：\n（1）文档容量非实时更新，会在第二天更新。\n（2）文档删除后，可以在【文档->全部->回收站】中恢复对应的文档，非高级账号的文档在回收站会保留7天，高级账号的文档在回收站会保留180天。"}, {"title": "企微文档提示：“文档容量已满,因此你无法在该文档中插入图片”", "content": "异常原因：插入图片所在文档所有者，企微文档免费额度已满，需由当前文档创建者购买收费高级功能\n出于数据安全和成本考虑，公司不提倡大范围使用企微在线文档，部门或个人如坚持使用，需自行购买。"}, {"title": "企微文档所有者查看方式", "content": "文档窗口右上角“三杠”图标"}, {"title": "企微文档高级功能购买链接", "content": "https://work.weixin.qq.com/mall/wedoc?wws=19"}, {"title": "企业微信共享文件删除恢复", "content": "路径：微盘→我的文件→左下角三点菜单→回收站→选择文件→还原。"}, {"title": "企业微信文档报错“未知错误”", "content": "解决方式：\n1. 关闭网络代理：Internet选项→连接→局域网设置→取消代理服务器勾选。\n2. 更新企业微信版本：左下角“关于”中检查更新。"}]}, {"name": "文档中心", "items": [{"title": "Confluence文档中心网址", "content": "文档中心 https://docs.dc.servyou-it.com"}]}, {"name": "网页浏览", "items": [{"title": "Edge&谷歌浏览器无法打开网页，错误代码: STATUS_STACK_BUFFER_OVERRUN”", "content": "【问题原因】\n浏览器更新后与税友安全助手组件冲突\n【影响范围】\nMicrosoft Edge 、谷歌浏览器\n【处理办法】\n下载并安装“浏览器修复补丁”，重启浏览器后即可恢复。\n下载地址：浏览器修复补丁"}]}]}, {"name": "外设", "subs": [{"name": "打印复印", "items": [{"title": "杭州总部刷卡打印机安装", "content": "1.登录页面右下角“客户端下载”下载驱动，http://printer.oa.servyou-it.com/printhub/ui/sign/login.htm\nWindows：选择“柯美原厂驱动”\nMac：选择“PrintDriver”，\n打印时，Windows用户选择打印机名称 KM_Printer，MAC用户选择打印机名称 FollowMe-Black\n输入服务器地址：printer.oa.servyou-it.com:80， 绑定“统一员工账号密码”，填写完成后点击“校验”并确定\n3.首次使用刷卡取件，可前往任意楼层刷卡打印机，在提示位置刷卡后，输入员工账号和密码进行认证绑定。\n详细操作请参考文档《统一刷卡打印机安装使用说明》统一刷卡打印机安装使用说明\nhttps://doc.weixin.qq.com/doc/w3_APQA0gb5AAgUUYPrXy8QAGRQfMDgx?scode=AAoA1wcYAAcuo1wd2hAPQA0gb5AAg&qt_source=Search&qt_report_identifier=1763972439462&version=5.0.2.6008&platform=win"}, {"title": "杭州总部刷卡打印机复印操作", "content": "步骤：\n1. 刷卡后点击“复印”功能。\n2. 按提示操作，完成后取件口取件。\n身份证复印支持双面模式。\n详细操作请参考文档《统一刷卡打印机安装使用说明》https://doc.weixin.qq.com/doc/w3_APQA0gb5AAgUUYPrXy8QAGRQfMDgx?scode=AAoA1wcYAAcuo1wd2hAPQA0gb5AAg&qt_source=Search&qt_report_identifier=1763972439462&version=5.0.2.6008&platform=win"}, {"title": "杭州总部刷卡打印机扫描操作", "content": "步骤：\n1. 刷卡后点击屏幕“扫描”功能。\n2. 选择扫描方式：多页用“进纸器”，单页/厚重文件用“平板”。\n3. 扫描文件发送至个人邮箱。详情操作参考https://doc.weixin.qq.com/doc/w3_APQA0gb5AAgUUYPrXy8QAGRQfMDgx 。"}, {"title": "总部刷卡打印驱动下载", "content": "总部刷卡打印中心网址 http://printer.oa.servyou-it.com/printhub/ui/sign/login.htm"}, {"title": "杭州总部打印彩色稿件", "content": "Windows操作系统直接打印，Mac OS系统选择名称“”ColourPrine”打印机，\n打印任务完成后至杭州总部亿企赢大厦彩色打印机放置楼层为5、10、15、20层刷卡取件即可"}, {"title": "杭州总部刷卡打印机卡纸、缺墨", "content": "总部员工改用其他楼层打印设备，并留言告知异常设备位置，安排处理。"}, {"title": "杭州总部刷卡打印机显示未连接", "content": "尝试重启电脑后重试打印。"}, {"title": "杭州总部刷卡打印机缺纸处理", "content": "总部员工可改用其他楼层打印设备，或自行补充备用纸（设备下方防潮柜柜内可取）。部门批量打印需至资产办公室领用。"}, {"title": "杭州总部刷卡打印机取件异常", "content": "原因一：员工账号密码更新后，客户端密码未同步修改更新。\n检测步骤：\nWindows：任务栏打印机图标（蓝色大拇指）→配置→校验密码。\nMac：应用程序→PrinterLogin→校验账号密码。\n原因二：30分钟内未及时取件，打印任务超30分钟未取件自动取消\n操作步骤：重新打印，30分钟内取件"}, {"title": "总部刷卡打印客户端，配置页面提示“验证失败！用户名或密码错误”", "content": "原因：员工账户中心员工密码到期或更新后，刷卡打印客户端未同步更新\n处理步骤：更新密码后，点击校验，提示“校验成功！”后，点击确认"}, {"title": "总部刷卡打印客户端，配置页面提示“验证失败！用户名或密码错误次数达到系统上限，现已被锁定...\"", "content": "原因:密码错误输入超过3次\n处理步骤：确认员工账号密码正确（可在税友家园、eHR尝试登录），在5分钟后使用正确密码进行校验"}]}, {"name": "网络会议", "items": [{"title": "小鱼易连客户端下载", "content": "小鱼易连客户端支持Windows、MAC、Linux（统信、麒麟），请根据所运行操作系统选择下载不同客户端。 小鱼易连下载中心：https://www.xylink.com/download"}, {"title": "小鱼固定方云会议室预约", "content": "操作路径：运行小鱼易连软件→会议→我的会议→新建→预约会议。详情参考《小鱼云会议用户使用指南》。\nhttps://doc.weixin.qq.com/doc/w3_AJAAAQaUAI429WiTgHnRU0I0O5ItO?scode=AAoA1wcYAAcNyzXMF6AJAAAQaUAI4&qt_source=Search&qt_report_identifier=1764120639847&version=5.0.2.6008&platform=win"}, {"title": "小鱼固定方云会议预约信息查询", "content": "小鱼固定方云会议预约信息查询需桌面IT支持人工坐席处理，请按一下步骤进行操作。\n回复“IT”获取桌面IT支持人工支持链接\n点击IT支持人工支持链接进入人工坐席咨询窗口\n输入需要查询的小鱼固定方会议室号，会议时间区间\n耐心等待人工支持坐席回复"}, {"title": "小鱼云会议使用方法", "content": "详情参考《小鱼云会议用户使用指南》。\nhttps://doc.weixin.qq.com/doc/w3_AJAAAQaUAI429WiTgHnRU0I0O5ItO?scode=AAoA1wcYAAcNyzXMF6AJAAAQaUAI4&qt_source=Search&qt_report_identifier=1764120639847&version=5.0.2.6008&platform=win"}, {"title": "小鱼固定方云会议室号及主持人密码", "content": "25方：会议号9083894961，密码348124，主持密码569149\n50方：会议号9083284868，密码502892，主持密码625067\n100方：会议号9083261987，密码359615，主持密码374852"}, {"title": "小鱼直播权限申请", "content": "无需申请，新建直播即可，无人数限制。"}, {"title": "小鱼云会议室录像和会议统计提取", "content": "企业云会议室：登录一站式运维平台-服务目录-IT支持服务-活动与会议支持，支持级别\"资料下载“，服务内容“录像下载”或“活动统计”补充信息会议号，以及会议直至时间。\n个人云会议室：客户端→文件夹→我的文件夹查看历史录制。正常情况支持人员会在1小时内处理完成，请关注“一站式运维平台”工单完工消息提醒，通过我的工单-我的创建-查看并获取下载链接"}, {"title": "企业微信会议（腾讯会议）不可用", "content": "受企业微信商业政策调整影响，公司决定2023-8-1停止企业微信会议功能，企微会议功能关闭后，企微音频/视频通话+屏幕分享（企业内限16人，企业外1对1），集团全体员工可使用手机号+短信方式登录使用小鱼易连会议，30方及以下会议可使用小鱼终端号、个人云会议号，>30~100方会议需预约小鱼企业云会议号"}]}, {"name": "会议电视", "items": [{"title": "会议室屏幕投屏操作步骤", "content": "标准会议室（如：总部办公楼层5~21楼）\n使用电视遥控器打开电视\n将投屏线（转接头）连接至电脑HDMI|Type-C接口\n大型视频会议室（总部409、410）\n黑色遥控器打开电视\n银色遥控器打开小鱼终端\n将投屏器连接至电脑\n点击弹出投屏程序，或者运行投屏器存储盘符下的投屏程序\n根据提示操作一键投屏\n超大型会议室（总部124、126、401、404、405、409）\n超大会议室设备使用，请通过“一站式运维平台-IT支持服务-员工服务入口-活动与会议技术支持”提前一天预约现场技术支持"}, {"title": "会议室电视机无法开启", "content": "1. 近距离使用遥控器重试。\n2. 检查电视机背面或侧面电源键。\n确认电源连接正常。"}, {"title": "会议室HDMI连接线或转接头缺失", "content": "请转人工联系“IT”服务号"}, {"title": "会议室电视机无法投屏", "content": "1. 重新插拔投屏线。\n用遥控器切换电视信号源。"}]}, {"name": "网络电话", "items": [{"title": "网络电话机故障", "content": "拔插电源线，等待3分钟后重插，启动后重试（重启约需1分钟）。"}]}, {"name": "碎纸机", "items": [{"title": "碎纸机使用方法", "content": "确认碎纸机已通电并处于待机状态，电源指示灯正常亮起。\n将待销毁的纸质文件整齐放入进纸口，避免折叠或过厚。\n按下“运行”按钮，碎纸机将自动开始工作，直至完成处理。\n文件粉碎完成后，机器会自动停止。"}, {"title": "碎纸机异常无反应", "content": "依次检查电源插头、碎纸箱是否扣紧"}, {"title": "碎纸机卡纸处理", "content": "单次碎纸上限一般8张普通复印纸，取出卡纸后，插拔电源重新启动"}]}]}, {"name": "网络", "subs": [{"name": "有线无线", "items": [{"title": "iPad如何连接总部办公WiFi网络", "content": "不支持员工认证方式。短期用访客码申请；长期需提交工单“终端设备网络准入申请”加白处理。\nhttp://devops.dc.servyou-it.com/dashboard，服务台-服务目录-IT支持服务-员工服务入口-终端设备网络准入申请"}, {"title": "员工手机怎么连接公司内网？", "content": "打开手机搜索无线网络\n发现并连接servyou网络后，浏览器输入http://www.baidu.com等网址\n耐心等待30秒左右，触发弹出账号密码认证界面，依次输入员工账号密码和动态短信验证码登录，确保认证页面自动弹出，不要手动输入网址。\n注：\n新入职员工，请确认账号信息是否已同步，建议入职次日再尝试连接。\n苹果手机请使用QQ浏览器打开认证页面，避免使用Safari。如使用Safari，可尝试点击“显示详细信息”后访问。"}, {"title": "手机连接公司网络提示“未获取到手机号，请与管理员联系”", "content": "新员工入职当天账号信息未完全同步，需第二天才可正常使用"}, {"title": "访客在公司总部如何联网", "content": "申请访客码：\n1. 临时访客设备连接servyou网络，浏览器弹出认证界面后点击“申请访客码”（有效期24小时）。\n2. 拜访对象邮箱收到邮件，点击允许接入。\n3. 手机接收访客码并登录。"}, {"title": "电脑端税友安全助手登录异常“**认证失败，网络已断开”", "content": "原因：账号密码输入错误、密码过期或税友安全助手安装后未重启电脑。\n解决：\n1. 重置密码： http://192.168.9.87:8080/employee-center/resetPwd.jsp\n2. 助手界面点击“注销”，手动重输密码。若无效则需重启电脑。"}, {"title": "手机连公司内网异常“账号/密码情误或认证被拒绝!请再次确认验证码，或者重置密码”", "content": "确保认证界面自动弹出，勿手动输入网址。建议使用QQ浏览器，Safari可尝试“显示详细信息”后访问。"}, {"title": "员工办公电脑总部连接办公网络", "content": "步骤：\n1. 连接SERVYOU无线或有线网络。\n2. 访问192.168.1.53下载安装税友安全助手。\n3. 重启电脑后登录助手（账号为邮箱前缀，密码同邮箱）。"}, {"title": "互联网部分网页无法访问【Windows】", "content": "使用办公网络时，部分网页无法访问，可能因代理服务器设置异常导致。\n解决办法：\n1.检查DNS设置\n右键点击Windows 图标--“网络连接”-打开“更改适配器选项”--选择“以太网”或者“WLAN”-右键“属性”--选择“Internet协议版本 4（TCP/IP4）”-点击“属性”-选择“使用下面的DNS服务器地址”-首选DNS服务器和备用DNS服务器---输入“10.253.0.55”（公司内网专用的 DNS）和“223.5.5.5”（阿里云公共 DNS）—单击“确定”。\n2.检查代理设置\n以 Edge浏览器为例“菜单>设置>显示高级设置>更改代理设置> LAN 设置 并取消选中”为 LAN 使用代理服务器“复选框。\n办公网络异常修复"}, {"title": "互联网部分网页无法访问【Mac】", "content": "使用办公网络时，部分网页无法访问，可能因代理服务器设置异常导致。\n报错信息：\n代理服务器出现问题，或者地址有误。\n解决办法：\n1.检查DNS设置\n单击菜单栏右上角的“ Apple”图标，-选择“系统偏好设置”-选择“网络”，点击连接的网络（比如Wi-Fi）--------选择“高级”，在弹出的选框中点击“DNS”选项卡，然后点击左下角【+】图标，手动添加DNS地址。如：10.253.0.55（公司内网专用的 DNS）和223.5.5.5（阿里云公共 DNS）。\n2.取消所有代理协议勾选\n单击菜单栏右上角的“ Apple”图标，-------选择“系统偏好设置”----------选择“网络”，点击连接的网络，比如是Wi-Fi--------选择“高级”，在弹出的选框中点击“DNS”选项卡，取消所有协议前的勾选项”总部办公互联网出口IP地址\n电信：115.227.36.10；联通：180.178.252.186。更新信息见税友家园公告。"}]}, {"name": "零信任", "items": [{"title": "SSL VPN升级零信任 aTrust通知", "content": "自2026年3月19日起，因SSL VPN设备架构调整，为保障协议兼容性、性能与稳定性，SSL VPN更新升级为零信任 aTrust，请各位同事在更新升级后使用。"}, {"title": "SSLVPN与零信任区别", "content": "SSL VPN是深信服传统的远程访问解决方案，EasyConnect是其客户端名称；而零信任是一种更先进的安全理念，aTrust则是深信服基于此理念推出的、用于替代和升级SSL VPN的具体产品。"}, {"title": "Windows操作系统SSLVPN客户端EasyConnect自动升级零信任aTrust指引", "content": "步骤1：打开原 SSLVPN客户端easeconnect，并输入https://vpn.servyou.com.cn,点击“连接”\n步骤2：客户端登录，提示版本更新，点击“立即更新”\n步骤3：等待客户端自动完成更新和安装，完成客户端自动打开新的客户端\n步骤4：通过新的客户端sTrust，接入设置输入：https://vpn.servyou.com.cn，点击“确定接入”，然后输入账号密码登录"}, {"title": "Mac os操作系统SSLVPN客户端自动升级零信任aTrust指引", "content": "Macy原客户端easeconnect首次登录后，会提示版本不匹配，需要下载新版本，下载后双击客户端安装文件完成安装即可。\n步骤1：客户端输入https://vpn.servyou.com.cn，会提示版本不匹配，点击“下载更新”\n步骤2：跳转的页面点击“立即下载”\n步骤3：双击已下载的客户端安装文件，根据提示完成安装\n步骤4：客户端安装完成后，新老客户端会同时存在，打开“atrust”客户端，并输入https://vpn.servyou.com.cn登录"}, {"title": "atrust客户端无法建立连接？", "content": "请按以下步骤排查：\n退出客户端重新登录\n重启电脑后再次尝试\n检查本地网络是否正常\n确认未连接其他VPN软件"}, {"title": "atrust客户端登录成功后但无法访问内部系统怎么办？", "content": "可能原因包括：\n本地缓存未刷新\nDNS缓存未更新\n权限问题\n建议：\n断开连接后重新登录\n执行DNS刷新（Windows：ipconfig /flushdns）"}, {"title": "零信任aTrust客户端下载地址", "content": "Windows客户端下载：\nhttps://atrustcdn.sangfor.com/standard/windows/2.5.16.20/aTrustInstaller.exe\nMac客户端下载：\nhttps://atrustcdn.sangfor.com/standard/mac/2.5.16.20/aTrustInstaller.pkg\n安卓、苹果手机移动客户端下载：\n应用商店搜索“aTrust”app"}, {"title": "零信任访问非公共资源权限申请", "content": "申请路径：打开一张式运维平台-服务目录-IT支持服务-员工零信任账号申请，类型选“权限申请”，根据资源类型选择测试资源或其他资源，其他咨询填写网址/IP/端口。\n申请地址：http://devops.dc.servyou-it.com/ITSM/workflow/service/createTicket?name=%E5%91%98%E5%B7%A5%E9%9B%B6%E4%BF%A1%E4%BB%BB%EF%BC%88%E5%8E%9FVPN%EF%BC%89%E8%B4%A6%E5%8F%B7%E7%94%B3%E8%AF%B7"}, {"title": "零信任aTrust客户端登录提示“用户名或密码错误，您还有 次尝试的机会”", "content": "原因一：没有申请过零信任账户，账户不存在\n申请方式：登录移动端企业微信，企业微信→工作台→一站式运维平台→服务目录→IT支持服务→员工零信任账号申请。\n原因二：密码输入错误、忘记密码或者申请账号后首次登录\n解决办法：需登录页https://vpn.servyou.com.cn点击“忘记密码”，用户名使用邮箱前缀，根据提示重置密码\n原因三：用户名输入错误或填写了员工账户中心密码\n解决办法：零信任账号与员工账户中心账号使用不同身份认证体系，如：aTrust用户名与虽然税友家园、邮箱前缀相同，但深信服aTrust采用独立密码管理规则，重置过程也与统一员工账号密码不同步"}, {"title": "零信任（原VPN）登录异常“账号禁用”", "content": "360天未登录使用aTrust会导致账号被禁用，登录运维平台-员工零信任账号申请-申请类型“账号解禁\"\nhttp://devops.dc.servyou-it.com/ITSM/workflow/service/createTicket?name=%E5%91%98%E5%B7%A5%E9%9B%B6%E4%BF%A1%E4%BB%BB%EF%BC%88%E5%8E%9FVPN%EF%BC%89%E8%B4%A6%E5%8F%B7%E7%94%B3%E8%AF%B7"}, {"title": "零信任密码重置“用户信息匹配失败，请联系管理员，...”", "content": "申请开通账号（零信任账号并非入职默认开通，如有办公需求，需登录移动端企业微信，企业微信→工作台→一站式运维平台→服务目录→IT支持服务→员工零信任账号申请。）\n检查手机号码填写正确，已更换手机号，请提交员工零信任账号申请，备注填写更换的新手机号）\n检查用户名是否正确，用户名为邮箱前缀，且字母均为小写"}, {"title": "零信任登录异常”账号锁定“", "content": "密码输入错误3次后系统锁定账户，不进行任何操作10分钟自动解锁。等待期间勿操作以免重置锁定计时。"}, {"title": "零信任员工账号申请", "content": "员工可以因出差、居家办公等情况单独申请零信任员工账号。\n办公内网申请方式： 一站式运维平台→服务目录→IT支持服务→员工零信任账号申请（http://devops.dc.servyou-it.com）\n公司外部申请方式：登录移动端企业微信，企业微信→工作台→一站式运维平台→服务目录→IT支持服务→员工零信任账号申请。\n处理同事将会在工作时间1小时内接单，并在当天下班前处理完成，请耐心等待，处理进度请关注“一站式运维平台”企微应用消息提醒。"}, {"title": "零信任无法收到验证短信", "content": "检查短信应用下所有信息目录，查看是否被垃圾信息、推广信息过滤\n重启手机。\n3. 机主发送短信“11111”至10690999申请解除黑名单。"}, {"title": "零信任验证手机号码更改", "content": "通过一站式运维平台提交“员工零信任账号申请”工单，备注新旧手机号。手机端路径：企业微信→工作台→一站式运维平台。"}, {"title": "零信任登录提示异常“网络请求异常，请稍后重试”", "content": "原因和解决办法：\n一般是网络波动导致，切换自己手机热点测试使用。"}, {"title": "零信任登录提示异常“路由连接失败”", "content": "原因：网络冲突或DNS缓存。\n解决：\n使用外部网络（如手机热点）测试。\nMac：网络设置中添加DNS 10.253.0.55和223.5.5.5。"}, {"title": "零信任登录提示异常“选路连接失败，可能当前连接网络异常，请稍后重试”", "content": "服务器地址栏需要完整输入 https://vpn.servyou.com.cn,不能省略https://,也不能填写为http://vpn.servyou.com.cn\n因安全和网络原因限制，集团总部（杭州）办公网络禁止连接零信任\n部分税局、酒店或其他无线网络波动或限制,\n解决方法：可尝试重启电脑后，使用手机热点连接网络，重新登录零信任"}, {"title": "零信任aTrust客户端支持桌面操作系统清单", "content": "【Windows系统】\nWindows 7~11\n【Mac os】\nMacOS10.13~10.15，Mac11.x~Mac OS 14.x\n【Linux/国产系统】\nUOS（V20） For X86、ARM、MIPS、Loongarch\n麒麟（V10/V10 SP1）For X86、ARM、MIPS\n麒麟（V10 SP1）For Loongarch\nUbuntu 16、18、20、22、24 For X86\n中科方德（5.0-G220/5.0-G220H） For X86、ARM、Loongarch\n注意：\n已发布版本中，windows11 arm架构的电脑不支持使用工作空间，同时不支持麒麟server系统、中标麒麟系统、deepin系统、centos系统接入。"}]}]}, {"name": "安全", "subs": [{"name": "税友安全助手", "items": [{"title": "税友安全助手卸载操作", "content": "卸载税友安全助手后将无法正常在杭州总部进行网络访问，请确认税友安全助手卸载原因，如：电脑更换、离职、离开杭州总部工作\n2.通过以下方式获取卸载动态码\nwindows系统：下载IT提供卸载助手脚本 https://drive.weixin.qq.com/s?k=AAoA1wcYAAch0J2Cxe，直接双击运行后生成动态码，回复生成的动态码，填入桌面IT支持回复的卸载码进行卸载\nmac os系统：右键右上角的安全助手图标，点击卸载，随后提供动态码，\n3.将生成的动态码，通过智能IT助手 人工服务，提供生成的动态码，获取回复的卸载码进行卸载"}, {"title": "Window系统下载安装“税友安全助手”", "content": "步骤：\n连接servyou网络，访问http://192.168.1.53 ，员工电脑通道-点击提示链接，下载安装“税友安装助手”。\n2. 安装后重启电脑，在任务栏右下角打开助手登录。\n税友安全助手下载链接 http://192.168.1.53:8099/portal/redirect/nacc/"}, {"title": "MAC OS系统下载安装“税友安全助手", "content": "步骤：\n1. 连接servyou网络，访问http://192.168.1.53/portal/redirect/nacc/下载。\n2. 根据系统版本选择安装项（如MAC OS 14以上选70133）。\n3. 运行安装程序，按系统提示授权（点击“是”/“仍要打开”）。\n4. 输入开机密码（盲输），完成安装后重启电脑。"}, {"title": "税友安全助手打开方式和查看运行状态图标", "content": "Windows系统：右下角任务栏图标；Mac：右上角菜单栏图标。"}, {"title": "Mac OS系统安装税友助手报错“身份不明的开发者”", "content": "解决：\n1. 系统偏好设置→安全性与隐私→允许安装。\n2. 输入开机密码（盲输），完成安装后重启。"}]}, {"name": "火绒安全", "items": [{"title": "火绒安全终端下载安装", "content": "火绒安全是公司指定使用的杀毒软件，请根据情况选择安装版本：\n总部员工：请选择火绒终端安全企业版，下载地址：\nWindows系统： http://huorong.oa.servyou-it.com/deploy/installer.exe\nMacOS系统： http://huorong.oa.servyou-it.com/deploy/mac-inst.dmg\n安装过程中控制中心地址设置： http://huorong.oa.servyou-it.com:80\n区域员工：请选择火绒安全软件个人版\nWindows系统 https://www.huorong.cn/person5.html"}, {"title": "火绒安全如何卸载", "content": "火绒安全卸载：向IT支持人工说明卸载原因获取输入卸载码，打开Windows系统控制面板-程序和功能，选择火绒终端安全管理系统安全终端-右键卸载，输入获取的卸载码"}, {"title": "火绒安全如何退出", "content": "向IT支持人工说明退出原因获取卸载密码(火绒安全管理员密码)，屏幕右下角火绒图标，点击“退出火绒”"}]}, {"name": "员工账户中心", "items": [{"title": "员工账户密码重置和修改", "content": "步骤：\n1. 访问http://192.168.9.87:8080/employee-center/resetPwd.jsp重置，密码需10位以上含大小写字母、数字、符号中的三种。\n2. 同步修改本地客户端（如总部刷卡打印机客户端、税友安全助手）密码。\n3.如不确认原密码或者原密码忘记，重置方式请选择“短信验证码重置”\n注意事项\n-员工账户密码有效期为90天，密码到期前3天会通过消息进行提醒，到期后未更新将重置为随机密码，需通过短信验证码重置方式找回\n-已经无法联网情况，可以借用同事电脑或者通过手机热点连接零信任后执行密码修改操作\n-使用独立密码的零信任和邮件客户端，无需修改重置"}]}, {"name": "风险应对", "items": [{"title": "终端安全风险预警", "content": "如果您遇到网络诈骗、网络攻击、恶意病毒、钓鱼邮件、账号被盗、信息泄露等安全问题，或已点击链接，请立即点击链接向“信息安全支持”进行反馈.https://work.weixin.qq.com/nl/innerkfid/ikfCtcYBwAAtkP_ODMcv53bGE5x5M9YYw"}, {"title": "重大安全活动相关信息和管理要求", "content": "活动期间禁用社交软件，公共服务策略调整详见公告链接。\n活动时间以税友家园通知为准，或咨询“信息安全支持”服务号"}, {"title": "重大安全活动期间软件限制“微信无法登录“", "content": "本答案适用于重大安全活动期间，当前时期可能不适用，活动期间范围请关注税友家园公告\n活动期间禁止使用微信/QQ/脉脉等，需通过工单申请特殊权限。\n申请路径：一站式运维平台→集团内部服务→其他服务→办公及远程接入网络安全策略申请。https://devops.dc.servyou-it.com/itsm/service/workbench\n=gf4ljb\n如有疑问请联系企业微信“员工服务-信息安全支持”"}, {"title": "远程控制软件使用限制与特殊申请（向日葵、Todesk、Teamivew、Teamview）", "content": "根据 2023年第【13】号《税友集团信息安全管理制度》第二十二条，2.2.7. 远程办公中规定，禁用使用远程工具（包括不限于向日葵）访问个人办公电脑。即不得使用远程工具用于员工远程办公用途。特殊情况需通过工单申请：申请路径：一站式运维平台→集团内部服务→其他服务→办公及远程接入网络安全策略申请，如有疑问请企业微信联系“员工服务-信息安全支持”。https://devops.dc.servyou-it.com/ITSM/workflow/service/createTicket?name=%E5%8A%9E%E5%85%AC%E5%8F%8A%E8%BF%9C%E7%A8%8B%E6%8E%A5%E5%85%A5%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%E7%AD%96%E7%95%A5%E7%94%B3%E8%AF%B7\n向日葵软件下载地址：https://sunlogin.oray.com/download"}]}]}, {"name": "资产", "subs": [{"name": "硬件资产", "items": [{"title": "个人名下公司资产及资产详细信息查询", "content": "方式一：登录eHR系统，进入“个人信息-个人固定资产”页面，可查询领用设备清单、资产名称、资产编号、规格\n方式二：查看设备固定资产标签，一般在设备底部或侧边，包含资产名称、启用时间、资产编号、型号"}, {"title": "办公电脑升级和汰换流程", "content": "操作步骤：\n1.自行提交“IT资产升级申请”，申请流程路径：企业微信-工作台-审批-IT资产升级申请\n2.审批通过后，总部同事至122室办理；区域同事联系当地资产管理员。\n注意事项：\n升级申请内存、硬盘、显示器，其容量、尺寸和型号需符合《IT资产配置标准》中的岗位要求，特殊超标申请需部门领导审批。\n办公电脑启用时间达到五年，可以申请整机汰换（Mac电脑汰换周期暂定未8年）\n《IT资产配置标准》文档链接：https://oa.servyou-it.com/spa/document/index.jsp?id=3471&router=1#/main/document/detail"}, {"title": "公司领用办公电脑使用或启用年限已满5年，可以申请延期使用吗？", "content": "公司电脑启用年限满5年不是强制汰换要求，可以继续使用，无需办理延期申请."}, {"title": "办公IT资产借用/退还", "content": "可借用设备类型：办公电脑、显示器、小鱼会议终端、会议音箱\n申请审批流程入口：企业微信-审批-资产借用申请\n领取/退还地点：\n总部同事至税友亿企赢大厦122室办理；\n区域同事联系当地资产管理员。"}, {"title": "办公IT资产领用/退还", "content": "可领用设备类型：办公电脑、显示器、键盘、鼠标、网线、话机\n申请审批流程入口：企业微信-审批-资产领用申请\n注：键盘、鼠标、网线、话机等低值易耗品无需提交申请流程\n领取/退还地点：\n总部同事至税友亿企赢大厦122室办理；\n区域同事联系当地资产管理员。"}, {"title": "系统维修工具借用", "content": "借用工具类型：系统安装U盘、螺丝刀、移动硬盘（盒）\n借用流程：\n1.回复“IT”获取桌面IT支持人工支持链接\n2.点击IT支持人工支持链接进入人工坐席咨询窗口\n3.说明需要借用的工具类型、使用地点、使用时间\n4.耐心等待人工支持坐席回复，确认设备库存。\n5.总部员工前往121室进行借用登记，区域同事联系资产管理员"}]}, {"name": "软件资产", "items": [{"title": "公司限制使用的商业软件清单", "content": "正版化严控清单（包括但不限于）：\nXshell/Xftp/Xmanager、InterBase、Delphi、MyEclipse、CINEMA4D、Anaconda、Fiddler、Navicat、VMware全系列、UltraEdit、HP Loadrunner、Adobe全系列（如Acrobat、Acrobat Reader、Photoshop、lllustrator、After Effects、Premiere、Lightroom、Audition、InDesign、Adobe XD等）。"}, {"title": "parallelsDesktop软件使用限制与替代方案", "content": "公司实行软件正版化管理，收费软件需经需求评估后安装。\n替代方案：建议使用VirtualBox。\n资源包下载（含Win7/Win10纯净版及VB安装包）：\n链接：https://pan.baidu.com/s/1ly-3vDMOh48yRXRo-b-hBg 提取码：serv\n安装指南：在VirtualBox中通过“管理→导入虚拟电脑”直接导入系统。"}, {"title": "visio软件使用限制与替代方案", "content": "公司实行软件正版化管理，收费软件需经需求评估后安装。\n替代方案：\n1. 仅需读取Visio文档：使用Microsoft Visio查看器（https://www.microsoft.com/zh-cn/download/confirmation.aspx?id=51188 ）。\n2. 需编辑文档且可接受非vsdx格式：使用ProcessOn在线工具（https://www.processon.com/i/5c99dd75e4b0180f6ee6c615 ）。注：敏感信息勿用。\n3. 必须输出vsdx格式（如外部分享）：走正式审批流程，路径：企业微信→工作台→审批→商业软件服务申请，费用2040元由部门分摊，需事业部总经理审批。"}, {"title": "微软office软件使用限制与替代方案", "content": "公司推行软件正版化政策，禁止安装盗版软件。安装Microsoft Office需部门分摊费用3070元，申请流程：\n路径：企业微信→工作台→审批→商业软件服务申请。\n审批要求：需事业部总经理批准。\n建议：若无特殊需求，优先安装WPS作为替代方案。"}]}, {"name": "自备电脑", "items": [{"title": "自备电脑申请及审核", "content": "步骤：\n1. 确认岗位在《自备电脑补贴岗位清单》内。\n2. 电脑配置需高于公司标准。\n3. eHR系统→流程申请→自备电脑使用申请/变更，提交购买凭证。\n4. 半工作日内完成配置审核。详情见《自备电脑使用及补贴管理办法》。\n详情请查看《自备电脑使用及补贴管理办法》\nhttps://oa.servyou-it.com/spa/document/index2file.jsp?id=75578&versionId=78041&imagefileId=96908&router=1#/main/document/fileView"}, {"title": "所有在公司使用的自备电脑的都需要登记？不领取补贴但使用自备电脑的员工是否需要登记？", "content": "根据公司管理要求，所有在公司使用的自备电脑的员工，都需要进行自备电脑信息登记"}, {"title": "自备电脑购买二手电脑如何计算购买时间？", "content": "二手按电脑电脑首次销售发票开具时间开始计算，如果无法提供购买发票，则按设备出厂时间计算，也可按官网查询的首次购买，以及设备激活、保修开始时间计算"}, {"title": "自备电脑无法提供销售发票或者发票遗失如何计算购买时间？", "content": "可以使用平台订单、收据、转账记录作为购买凭证时间参考依据（不包含二手电脑二次销售凭证），如果没有购买凭证参考依据，则使用设备出产时间"}, {"title": "自备电脑发票时间、出厂时间、购买记录不一致如何计算？", "content": "补贴发放截止时间采纳的优先次序为 ， 发票时间>购买记录>出厂日期"}, {"title": "使用配件自行组装自备电脑如何计算出厂时间", "content": "按整机或主要配件（CPU、主板）任一主要配件购买凭证或出厂日期计算"}, {"title": "自备电脑如何查看通过电脑序列号查询生产日期", "content": "联想 https://pre.wx.lenovo.com.cn/wordpress/?p=1456 https://newsupport.lenovo.com.cn/guardeploySearch.html?fromsource=guanwang&_ga=2.67510865.1168833807.1598233691-1876919846.1595491060\nhttps://newthink.lenovo.com.cn/guarantee.html?v=329b114e91fec9e2336126dfd1b6ff42\nDell https://www.dell.com/support/contents/zh-cn/article/product-support/self-support-knowledgebase/locate-service-tag/notebook https://www.dell.com/support/contractservices/zh-cn/\nHP https://support.hp.com/cn-zh/document/ish_2898769-2609229-16 https://support.hp.com/cn-zh/check-warranty\n微软 https://support.microsoft.com/zh-cn/surface/%E6%9F%A5%E6%89%BE-surface-%E8%AE%BE%E5%A4%87%E5%92%8C%E9%85%8D%E4%BB%B6%E6%88%96microsoft%E9%85%8D%E4%BB%B6%E7%9A%84%E5%BA%8F%E5%88%97%E5%8F%B7-6c0abc0c-2b45-247d-f959-70e504e55fa5 https://mybusinessservice.surface.com/en-US/CheckWarranty/CheckWarrantyhttps://support.microsoft.com/zh-cn/surface/surface-%E4%BF%9D%E4%BF%AE-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%A7%A3%E7%AD%94-1217913a-2692-424e-a5c4-0eb0de84f05a\n小米 https://www.mi.com/service/notebook/drivers https://47wke3.smartapps.baidu.com/?_chatQuery=%E5%B0%8F%E7%B1%B3%E6%80%8E%E4%B9%88%E6%9F%A5%E5%87%BA%E5%8E%82%E6%97%A5%E6%9C%9F&searchid=14302220643046412854&_chatParams=%7B%22agent_id%22%3A%22592d7%22%2C%22content_build_id%22%3A%2218852dd5%22%2C%22from%22%3A%22q2c%22%2C%22token%22%3A%22alVvR3EyL3lWVnpwRk02ZFVSUG9GUzhkMkNZTDFwa0IySVJBUS9ORUxob2cyb0pObjdmVDhXQVJteEpqWjVMY2VMVzRoVmtBejBjRWdnNEdTNG5MclVQUGRIc3ZLa1QvMFhSQUdLMmhPRVVveHRQT3AvQUhTSldHTEdqU2NPa0NkUDJVNEU1MEVxK0o2UGg5czJjQ09CWUQzcVh6elRFVGJiNitpNmFvakxzPQ%3D%3D%22%2C%22chat_no_login%22%3Atrue%7D&_swebScene=3711000610001000\n宏基 https://community.acer.com/cn/kb/articles/863-%E5%BA%8F%E5%88%97%E5%8F%B7%E6%88%96snid%E5%8F%B7 https://www.acer.com.cn/myhelp.html?type=3&serverid=143\n华为 https://consumer.huawei.com/cn/support/content/zh-cn00688529/ https://consumer.huawei.com/cn/support/warranty-query/\n华硕 https://www.asus.com.cn/support/article/566/ https://www.asus.com.cn/support/warranty-status-inquiry/\n神州 机器底部有一个lOT http://www.hasee.com/after/index\n苹果\nhttps://support.apple.com/zh-cn/102767 https://checkcoverage.apple.com/user-consent"}, {"title": "自备电脑补贴岗位是如何设定的？", "content": "自备电脑补贴岗位范围，是针对对电脑性能有较高性能需求技术岗位，以及部分特殊需求岗位；对于这部分性能要求较高的开发和测试岗位，一方面我们提高了这些岗位公司配发电脑标准，同时保留了自备电脑补充策略供员工自由选择"}, {"title": "自备电脑管理办法提到较高性能的技术岗位是如何确定的？", "content": "根据总部历年员工满意度调查中员工反馈，以及IT资产配置标准评估过程中电脑内存CPU报警统计信息，开发和测试岗位所使用电脑的CPU和内存报警次数和时长远高于其他岗位（80%内存CPU报警阈值），开发和测试类岗位与其他岗位相比，对电脑性能有明显较高要求。"}, {"title": "自备电脑补贴岗位以后还会有新增或变更吗？", "content": "参考《IT资产配置标准》中岗位与设备变更和执行反馈意见，由管理部门共同商议修订，并在EHR系统同步更新。"}, {"title": "自备电脑配置是否符合IT资产配置标准如何判断？", "content": "自备电脑配置审核标准要求，主要看配置是否达到购买日期或补贴发放历史年度IT资产配置标准\n●当前自备电脑配置需满足任职岗位的当前公司配发电脑配置最低标准\n●CPU主要看是否同级&同代（i3\\i5\\i7\\i9）同代（八代、十代、11代、12代...）,跨级跨带可酌情增加和降低审核标准（每相差1年一代按1年累积计算）。\n●内存和硬盘不符情况下，可提供升级后的配置信息截图或升级配件购买记录"}, {"title": "\"自备电脑补贴到期截止时间是怎么计算的？", "content": "●6/10前所有现有领取补贴员工需进行登记，不登记电脑信息，不发放补贴\n●当前使用自备电脑购买日期<5年，补贴领取截止时间为当前使用电脑从购买之日起5年\n●当前使用自备电脑购买日期>5年，停止补贴发放\n●非补贴岗位6/3日期后购买的电脑不享受存量自备电脑补贴政策"}, {"title": "自备电脑补贴年限规定？", "content": "单台自备电脑电脑补贴有效期为由购买日期计算至5年截止。"}, {"title": "自备电脑补贴岗位内的人员，后续电脑更换了需要怎么操作", "content": "单台自备电脑补贴期限最多为5年，到期后自动停发补贴。若要继续申请补贴，新购或更换设备后，须在5个工作日内在EHR系统重新提交“自备电脑使用申请”，并提供购买凭证（发票、收据）或出厂日期证明。"}, {"title": "\"自备电脑电脑补贴岗位外的补贴时间是到什么时候结束？", "content": "自备电脑补贴岗位外正在享受补贴的员工，继续享受补贴至当前使用自备电脑补贴有效期截止；"}, {"title": "自备补贴到期了，不想用公司配发电脑，可以继续使用自备电脑吗？", "content": "可以继续使用自备电脑，但无法领取补贴，需遵守自备电脑管理要求，进行自备电脑登记，纳入自备电脑台账管理。登录eHR系统- 流程申请-自备电脑使用申请进行登记。"}, {"title": "\"入职、离职、调岗，自备电脑与公司电脑直接切换当月，自备电脑使用不足1月，补贴金额怎么计算", "content": "自然月内累计使用自备电脑办公≥15天，按100元/月标准随工资发放补贴。"}, {"title": "自备电脑补贴到期后，如何申请公司电脑？", "content": "自备电脑申请路径：EHR系统个人信息-个人固定资产查看中-进行报备。"}, {"title": "实习生可以申请自备电脑补贴吗？", "content": "实习生不在自备电脑补贴范围内"}, {"title": "\"自备电脑如果使用的MAC电脑或者AMD 或非intel CPU应该如何评估？", "content": "与同类intel芯片做比较，在20%性能差异范围内，可使用通用查询工具AI或CPU天梯图查询相关性能对比信息，酌情综合评估是否满足岗位工作需要。"}, {"title": "\"购买的自备电脑原始配置没有达到岗位要求，后续通过升级后达到配置要求，可以获得补贴吗？", "content": "通过后续升级后达到岗位IT资产配置标准符合补贴资格条件，硬盘容量可以通过外置连接方式升级，但内置硬盘应为固态硬盘，且固态硬盘容量不低于256GB。"}]}]}, {"name": "其他", "subs": [{"name": "活动支持", "items": [{"title": "会议室预定", "content": "总部会议室：企业微信→工作台→“会议室预定”应用。\n区域会议室（北京/石家庄等）：企业微信→工作台→“会议室”应用。"}, {"title": "活动与会议技术支持预约", "content": "提交预约工单（需至少提前1天）：https://oa.servyou-it.com/spa/portal/static/index.html#/main/portal/portal-8-34 ，选择“重要活动支持预约”。"}]}, {"name": "党工", "items": [{"title": "税友家园", "content": "税友家园网址： https://oa.servyou-it.com\n账号密码认证方式：统一员工账号密码\n税友家园登录异常\n情况一：新员工入职次日方可登录，请耐心等待。\n情况二：账号密码错误，通过重置密码解决（http://192.168.9.87:8080/employee-center/resetPwd.jsp）。"}, {"title": "官网地址", "content": "税友集团官网地址：https://www.servyou.com.cn\n亿企赢官网地址：https://www.17win.com\n亿企鑫福官网地址：https://17xinfu.com"}]}, {"name": "人力资源", "items": [{"title": "人力相关问题咨询（考勤、薪资、保险等）", "content": "通过企业微信→员工服务→“人力资源共享服务咨询”联系人力资源部门。https://work.weixin.qq.com/nl/innerkfid/ikfCtcYBwAAvSRL5i5b_Xia8vCmFc2gRw"}, {"title": "人力资源管理平台", "content": "人力资源管理平台别名：税友eHR、EHR\n网站地址： https://ehr.dc.servyou-it.com\n应用路径：企业微信-工作台-税友eHR\n账号密码认证方式：统一员工账号密码，账号同企业邮箱的前缀"}, {"title": "员工个人手机号更改", "content": "联系HR在EHR系统中修改。通过企业微信→员工服务→“人力资源共享服务咨询”联系人力资源部门。https://work.weixin.qq.com/nl/innerkfid/ikfCtcYBwAAvSRL5i5b_Xia8vCmFc2gRw"}, {"title": "网络学院相关信息", "content": "企业微信入口（推荐方式）： 企业微信-工作台-网络学院\n电脑端访问：https://servyoulearning.yunxuetang.cn\n手机端链接：https://servyoulearning.yunxuetang.cn/m\n新入职当日13:00后生成账号，若无法登录请次日重试。\n实习生无网络学院账号，会定期禁用，转正后可以进入学习。 如有网络学院相关疑问可咨询刘馨月。"}, {"title": "新员工入职IT指引手册获取", "content": "新员工入职IT指引手册/指南地址：https://doc.weixin.qq.com/doc/w3_AU8AjwZhAIgyNSkHK3OTjWueJe1oa?scode=AAoA1wcYAAcD09JltaAQgAuAYMANY"}]}, {"name": "财务", "items": [{"title": "财务工作相关问题", "content": "请联系财务中心或企业微信→员工服务→“总部报销服务台”。\n常见问题参考：\n财务软件安装：参考《财务人员工作环境安装指南》。\n差旅报销：通过企业微信→通讯录→员工服务→“总部报销服务台”咨询。\n金蝶EAS打印中断：重启软件或电脑后重试。\n金蝶安装：方式一：访问 http://10.90.5.92/down/kingdee.exe或http://192.168.2.67:6888/eassso/login ，点击帮助按钮获取安装包。使用问题咨询宋会讲。"}, {"title": "财务共享平台地址", "content": "财务共享平台，旧地址192.168.9.215已下线，可以访问新域名：http://cwgx.oa.servyou-it.com/"}, {"title": "手机企微无法访问“总部差旅报销”", "content": "问题现象：打开后报错“Whitelabel Error Page...Status=403”。\n解决步骤：\n1. 清理缓存：企业微信APP→头像→设置→通用→存储空间→清理缓存。\n退出并重新登录企业微信。"}, {"title": "手机企微滴滴打车权限开通/管理", "content": "企微联系应用管理员：刘红霞"}]}, {"name": "物业", "items": [{"title": "物业服务相关问题（工牌、门禁、停车等）", "content": "联系人指引：\n咖啡馆/食堂超市：于闻婧\n停车/保洁：谭欣\n补卡/餐卡：陈乐\n三楼食堂包厢：王蕊\n会议接待：袁丽丽\n其他问题：咨询物业服务号。https://work.weixin.qq.com/nl/innerkfid/ikfCtcYBwAAUtkMyOToCZqe42ZBDupVEQ"}]}, {"name": "运维", "items": [{"title": "一站式运维平台综合信息", "content": "登录地址： http://devops.dc.servyou-it.com\n一站式运维平台使用统一员工账号密码+短信认证\n运维平台相关问题请咨询企业微信联系【员工服务号：工单系统技术支持】如：运维平台无法登录\n运维平台账号密码登录二次认证密码获取方法详见：运维平台登录说明https://doc.weixin.qq.com/doc/w3_AM4AvwYHAKkhd6GOfh1SAe8ID9Kbv?scode=AAoA1wcYAAcl8IQiqyAM4AvwYHAKk&qt_source=Search&qt_report_identifier=1764050011765&version=5.0.2.6008&platform=win\n维平台企微认证免扫描失效处理：\nchrome浏览器输入网址chrome://flags/#block-insecure-private-network-requests，搜索 Local Network Access Checks，改成Disabled\nedge浏览器输入网址edge://flags/#block-insecure-private-network-requests"}, {"title": "JumpServer堡垒机综合信息", "content": "堡垒机访问权限申请：通过一站式运维系统提交申请，紧急情况联系工单处理人。\nhttp://devops.dc.servyou-it.com/itsm/service/workbench"}, {"title": "GitLab相关问题", "content": "1. 账号锁定：5分钟后自动解锁；若忘记密码，请通过“员工账号密码重置”功能操作。\n2. 二次验证码手机更换：联系吴云鹏修改。\n3. 系统后台问题：联系吴云鹏处理。"}, {"title": "阿里云综合信息", "content": "1.阿里云账号问题咨询：方笑\n2.阿里云账号验证mfa：陈伟章"}]}, {"name": "产研", "items": [{"title": "Walle瓦力平台综合信息", "content": "平台介绍：\nwalle 是提供集 接口文档自动生成、接口文档查看、接口调试、接口Mock、接口测试用例、接口调用代码生成、对外提供在线/离线文档 等功能的 自动化、智能化的综合性接口管理平台。可以提升研发接口开发中各阶段的效率与减少协作时的沟通成本，并助力团队制定符合团队的研发流程与规范。适合公司 GB 端及各分公司研发同学使用。\n功能介绍：\n接口生成与使用流程图\n平台账号密码：\n访问 walle 平台, 使用线上的 员工邮箱前缀 、 邮箱密码 登录 (eg: 账号 liaobl， 密码：xxxxxx), 可以在 全部项目 页面 查看所有项目, 可以随意查看项目的接口文档，如果需要创建项目或对接口进行调试、Mock、修改等操作，需要找【于程程】或项目负责人 添加权限\n联系支持：\n使用过程有任何问题或者需求的可以直接联系[于程程]，如：更换手机、需要获取新的二次认证二维码等\n如需及时了解 walle 平台的更新状态，可加入 【Walle 金牌服务群】，入群请联系[于程程]发送入群邀请"}]}, {"name": "运营", "items": [{"title": "税友内管系统综合信息", "content": "别名：小蚂蚁、小蜜蜂\n客户端不支持苹果操作系统安装运行\n税友内管系统客户端下载地址：https://drive.weixin.qq.com/s?k=AAoA1wcYAAcLEI7DnM\n内管系统咨询支持：倪银飞。"}, {"title": "基础运营平台综合信息", "content": "基础运营平台别名BOSS\n基础运营平台地址：https://boss.dc.servyou-it.com/#/\n账号密码认证方式:统一员工账号密码\n登录提示账号密码错误：\n优先检查账号密码是否过期\n检查电脑右下角系统时间是否准确，若时间存在偏差，请手动同步时间"}, {"title": "快速查数工具综合信息", "content": "快速查数工具别名QQT\n账号密码登录：账号密码与内部统一员工账密一致。\n使用问题咨询：联系公共数据团队：李晓刚（17682348007）、朱文赵（15088664612）。如：若二次认证失败\n报表权限开通：查询广场-选择对应报表操作列“申请”按钮，报表管理员会进行审批。"}]}]}];
|
||
</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>
|