chore: 整理项目结构，清理归档文件，更新部署配置
This commit is contained in:
Simon
@@ -0,0 +1,43 @@
|
||||
# H5用户端原型图 → Vue3代码实现概览
|
||||
|
||||
## 完成时间
|
||||
2026-06-09
|
||||
|
||||
## 变更摘要
|
||||
根据已锁定的原型图 v1.1 修复版，将 H5 用户端设计实现为 Vue3 代码。
|
||||
|
||||
## 修改文件清单
|
||||
|
||||
### 1. `frontend-h5/src/components/chat/ChatPanel.vue`
|
||||
- **标题栏重构**：左侧(标题 + 坐席在线/离线状态胶囊) + 右侧(🔔呼叫按钮 + 主题切换)
|
||||
- **🔔摇铃按钮**：从输入栏移至标题栏（桌面端+手机端统一）
|
||||
- **排查步骤固定顶部**：从消息列表内移出，固定在标题栏下方、所有消息之上，不随滚动消失
|
||||
- **移除 InputBar 事件**：不再需要 @call-agent 事件（摇铃直接在 ChatPanel 内控制）
|
||||
|
||||
### 2. `frontend-h5/src/components/chat/InputBar.vue`
|
||||
- **移除摇铃按钮**：删除 🔔 摇铃按钮及相关 CSS（bell-btn/bell-icon/bell-idle/bell-ring 动画）
|
||||
- **新增工具栏**：😊表情 / 🖼️图片 / 📎文件 / 📸拍照（4个圆形按钮）
|
||||
- **布局改为两行**：工具栏(上) + 输入行(输入框+发送按钮)(下)
|
||||
- **新增方法**：handleEmoji/handleImage/handleFile/handleCamera（阶段二实现具体功能）
|
||||
- **引导条文案更新**："点击标题栏铃铛呼叫 IT 坐席"
|
||||
|
||||
### 3. `frontend-h5/src/components/assistant/RightPanel.vue`（新建）
|
||||
- **三段式面板**：AI推送区 / 常用资源标签页 / 趣味问答
|
||||
- **AI推送区**：3种卡片类型(guide/process/download) + 动态图标+颜色
|
||||
- **常用资源**：2个Tab(申请流程/必装软件) + 资源列表
|
||||
- **趣味问答**：题目+4选项+积分+答题结果反馈
|
||||
- **阶段一静态数据**，阶段二接入 Dify 动态推送
|
||||
|
||||
### 4. `frontend-h5/src/views/ChatView.vue`
|
||||
- **替换右侧面板**：AiHelperPanel → RightPanel（三段式面板）
|
||||
- **响应式断点**：从768px改为500px（与原型图对齐）
|
||||
- **移动端**：<500px 不显示右侧面板
|
||||
- **拖拽逻辑修复**：只固定左侧宽度，右侧 flex:1 自动填满（消除拖拽后空白）
|
||||
- **移除浮动按钮**：不再需要移动端AI助手浮动按钮
|
||||
|
||||
### 5. `frontend-h5/src/stores/conversation.ts`
|
||||
- **新增 agentOnline 状态**：默认true，阶段一简化处理
|
||||
- **暴露到 return 语句**：使组件可以访问
|
||||
|
||||
## 构建验证
|
||||
✅ `npx vite build` 构建成功，无编译错误
|
||||
@@ -0,0 +1,767 @@
|
||||
<!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</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<style>
|
||||
:root {
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-tertiary: #334155;
|
||||
--bg-card: #1e293b;
|
||||
--bg-hover: #334155;
|
||||
--bg-active: #3b82f6;
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #94a3b8;
|
||||
--text-muted: #64748b;
|
||||
--accent: #3b82f6;
|
||||
--accent-hover: #2563eb;
|
||||
--accent-light: rgba(59,130,246,0.15);
|
||||
--success: #10b981;
|
||||
--success-bg: rgba(16,185,129,0.12);
|
||||
--warning: #f59e0b;
|
||||
--warning-bg: rgba(245,158,11,0.12);
|
||||
--danger: #ef4444;
|
||||
--danger-bg: rgba(239,68,68,0.12);
|
||||
--border: rgba(148,163,184,0.12);
|
||||
--border-hover: rgba(148,163,184,0.25);
|
||||
--radius: 8px;
|
||||
--radius-lg: 12px;
|
||||
--shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg-primary); color: var(--text-primary); height: 100vh; overflow: hidden; }
|
||||
|
||||
/* 布局 */
|
||||
.layout { display: flex; height: 100vh; }
|
||||
.sidebar { width: 220px; background: var(--bg-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
||||
.header { height: 56px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
|
||||
.content { flex: 1; overflow-y: auto; padding: 24px; }
|
||||
|
||||
/* 侧边栏 */
|
||||
.logo { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
|
||||
.logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
|
||||
.logo-text { font-size: 15px; font-weight: 600; }
|
||||
.logo-sub { font-size: 10px; color: var(--text-muted); }
|
||||
|
||||
.nav-section { padding: 12px 0; }
|
||||
.nav-section-title { padding: 0 20px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; cursor: pointer; color: var(--text-secondary); transition: all 0.2s; font-size: 13px; border-left: 3px solid transparent; }
|
||||
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
|
||||
.nav-item.active { background: var(--accent-light); color: var(--accent); border-left-color: var(--accent); }
|
||||
.nav-item i { width: 18px; text-align: center; font-size: 14px; }
|
||||
.nav-badge { margin-left: auto; background: var(--danger); color: white; font-size: 10px; padding: 1px 6px; border-radius: 10px; }
|
||||
.nav-priority { font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
|
||||
.p0 { background: rgba(239,68,68,0.15); color: #f87171; }
|
||||
.p1 { background: rgba(245,158,11,0.15); color: #fbbf24; }
|
||||
.p2 { background: rgba(16,185,129,0.15); color: #34d399; }
|
||||
|
||||
/* 头部 */
|
||||
.header-left { display: flex; align-items: center; gap: 16px; }
|
||||
.breadcrumb { font-size: 13px; color: var(--text-secondary); }
|
||||
.breadcrumb span { color: var(--text-primary); }
|
||||
.header-right { display: flex; align-items: center; gap: 16px; }
|
||||
.header-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
|
||||
/* 页面内容 */
|
||||
.page-title { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
|
||||
.page-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; }
|
||||
|
||||
/* 统计卡片 */
|
||||
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
|
||||
.stat-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
|
||||
.stat-value { font-size: 28px; font-weight: 700; }
|
||||
.stat-change { font-size: 11px; margin-top: 4px; }
|
||||
.stat-up { color: var(--success); }
|
||||
.stat-down { color: var(--danger); }
|
||||
|
||||
/* 表格 */
|
||||
.table-wrapper { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
|
||||
.table-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
|
||||
.table-title { font-size: 15px; font-weight: 600; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th { padding: 12px 16px; text-align: left; font-size: 12px; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border); background: var(--bg-tertiary); }
|
||||
td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--border); }
|
||||
tr:hover td { background: var(--bg-hover); }
|
||||
|
||||
/* 按钮 */
|
||||
.btn { padding: 8px 16px; border-radius: var(--radius); font-size: 13px; cursor: pointer; border: none; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; }
|
||||
.btn-primary { background: var(--accent); color: white; }
|
||||
.btn-primary:hover { background: var(--accent-hover); }
|
||||
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
|
||||
.btn-ghost:hover { border-color: var(--border-hover); color: var(--text-primary); }
|
||||
.btn-sm { padding: 4px 10px; font-size: 12px; }
|
||||
|
||||
/* 标签/徽章 */
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
|
||||
.tag-success { background: var(--success-bg); color: var(--success); }
|
||||
.tag-warning { background: var(--warning-bg); color: var(--warning); }
|
||||
.tag-danger { background: var(--danger-bg); color: var(--danger); }
|
||||
.tag-info { background: var(--accent-light); color: var(--accent); }
|
||||
|
||||
/* 开关 */
|
||||
.switch { width: 40px; height: 22px; background: var(--bg-tertiary); border-radius: 11px; position: relative; cursor: pointer; transition: background 0.2s; }
|
||||
.switch.on { background: var(--success); }
|
||||
.switch::after { content: ''; width: 18px; height: 18px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.2s; }
|
||||
.switch.on::after { transform: translateX(18px); }
|
||||
|
||||
/* 功能开关页面 */
|
||||
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
||||
.feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
|
||||
.feature-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||||
.feature-card-title { font-size: 14px; font-weight: 600; }
|
||||
.feature-card-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
|
||||
.feature-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); }
|
||||
.feature-item-name { font-size: 13px; }
|
||||
.feature-item-stage { font-size: 11px; color: var(--text-muted); }
|
||||
|
||||
/* 快速回复管理 */
|
||||
.category-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
|
||||
.category-tab { padding: 6px 14px; border-radius: 20px; font-size: 12px; cursor: pointer; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid transparent; transition: all 0.2s; }
|
||||
.category-tab.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
|
||||
.category-tab:hover { border-color: var(--border-hover); color: var(--text-primary); }
|
||||
|
||||
.reply-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
|
||||
.reply-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.reply-card-title { font-size: 13px; font-weight: 600; }
|
||||
.reply-card-content { font-size: 12px; color: var(--text-secondary); line-height: 1.6; background: var(--bg-primary); padding: 10px; border-radius: 6px; }
|
||||
.reply-actions { display: flex; gap: 8px; }
|
||||
|
||||
/* 搜索框 */
|
||||
.search-box { display: flex; align-items: center; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 12px; }
|
||||
.search-box input { background: transparent; border: none; color: var(--text-primary); padding: 8px; font-size: 13px; outline: none; width: 200px; }
|
||||
.search-box i { color: var(--text-muted); font-size: 13px; }
|
||||
|
||||
/* 页面容器（用于切换） */
|
||||
.page { display: none; }
|
||||
.page.active { display: block; }
|
||||
|
||||
/* 集成卡片 */
|
||||
.integration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
.integration-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; text-align: center; }
|
||||
.integration-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 12px; }
|
||||
.integration-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
|
||||
.integration-status { font-size: 12px; margin-bottom: 12px; }
|
||||
.integration-detail { font-size: 11px; color: var(--text-muted); }
|
||||
|
||||
/* 分配模式 */
|
||||
.mode-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 12px; display: flex; align-items: center; gap: 16px; }
|
||||
.mode-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.mode-radio.selected { border-color: var(--accent); }
|
||||
.mode-radio.selected::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
|
||||
.mode-info { flex: 1; }
|
||||
.mode-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
|
||||
.mode-desc { font-size: 12px; color: var(--text-secondary); }
|
||||
.mode-badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; }
|
||||
.mode-locked { opacity: 0.5; pointer-events: none; }
|
||||
.mode-lock-text { font-size: 11px; color: var(--text-muted); font-style: italic; }
|
||||
|
||||
/* 滚动条 */
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout">
|
||||
<!-- 侧边栏 -->
|
||||
<div class="sidebar">
|
||||
<div class="logo">
|
||||
<div class="logo-icon"><i class="fas fa-headset"></i></div>
|
||||
<div>
|
||||
<div class="logo-text">IT智能服务台</div>
|
||||
<div class="logo-sub">管理后台 v1.0</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">概览</div>
|
||||
<div class="nav-item active" onclick="switchPage('dashboard')">
|
||||
<i class="fas fa-chart-pie"></i> 运营总览
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">P0 核心配置</div>
|
||||
<div class="nav-item" onclick="switchPage('features')">
|
||||
<i class="fas fa-toggle-on"></i> 功能开关
|
||||
<span class="nav-priority p0">P0</span>
|
||||
</div>
|
||||
<div class="nav-item" onclick="switchPage('agents')">
|
||||
<i class="fas fa-users"></i> 坐席管理
|
||||
<span class="nav-priority p0">P0</span>
|
||||
</div>
|
||||
<div class="nav-item" onclick="switchPage('integrations')">
|
||||
<i class="fas fa-plug"></i> 系统集成
|
||||
<span class="nav-priority p0">P0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">P1 运营管理</div>
|
||||
<div class="nav-item" onclick="switchPage('assignment')">
|
||||
<i class="fas fa-random"></i> 分配模式
|
||||
<span class="nav-priority p1">P1</span>
|
||||
</div>
|
||||
<div class="nav-item" onclick="switchPage('quickreply')">
|
||||
<i class="fas fa-reply-all"></i> 快速回复
|
||||
<span class="nav-priority p1">P1</span>
|
||||
</div>
|
||||
<div class="nav-item" onclick="switchPage('monitor')">
|
||||
<i class="fas fa-desktop"></i> 会话监控
|
||||
<span class="nav-priority p1">P1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">P2 高级功能</div>
|
||||
<div class="nav-item" onclick="switchPage('flowchart')">
|
||||
<i class="fas fa-project-diagram"></i> 排查流程图
|
||||
<span class="nav-priority p1">P1~P2</span>
|
||||
</div>
|
||||
<div class="nav-item" style="opacity:0.4">
|
||||
<i class="fas fa-palette"></i> 主题模板
|
||||
<span class="nav-priority p2">P2</span>
|
||||
</div>
|
||||
<div class="nav-item" style="opacity:0.4">
|
||||
<i class="fas fa-chart-bar"></i> 数据看板
|
||||
<span class="nav-priority p2">P2</span>
|
||||
</div>
|
||||
<div class="nav-item" style="opacity:0.4">
|
||||
<i class="fas fa-book"></i> 知识库
|
||||
<span class="nav-priority p2">P2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<div class="breadcrumb">管理后台 / <span id="header-title">运营总览</span></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="search-box">
|
||||
<i class="fas fa-search"></i>
|
||||
<input type="text" placeholder="搜索功能或配置...">
|
||||
</div>
|
||||
<i class="fas fa-bell" style="color:var(--text-secondary);cursor:pointer"></i>
|
||||
<div class="header-avatar">宋</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<!-- ==================== 运营总览 ==================== -->
|
||||
<div class="page active" id="page-dashboard">
|
||||
<div class="page-title">运营总览</div>
|
||||
<div class="page-desc">实时监控服务台运行状态，关键指标一目了然</div>
|
||||
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">在线坐席</div>
|
||||
<div class="stat-value" style="color:var(--success)">2 <span style="font-size:14px;color:var(--text-muted)">/3</span></div>
|
||||
<div class="stat-change stat-up"><i class="fas fa-circle" style="font-size:8px"></i> 运行正常</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">今日会话</div>
|
||||
<div class="stat-value">47</div>
|
||||
<div class="stat-change stat-up"><i class="fas fa-arrow-up"></i> +12% 较昨日</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">平均响应时间</div>
|
||||
<div class="stat-value">1.8<span style="font-size:14px;color:var(--text-muted)">s</span></div>
|
||||
<div class="stat-change stat-down"><i class="fas fa-arrow-down"></i> -0.3s 改善</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">AI 命中率</div>
|
||||
<div class="stat-value">68<span style="font-size:14px;color:var(--text-muted)">%</span></div>
|
||||
<div class="stat-change stat-up"><i class="fas fa-arrow-up"></i> +5% 本周</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:2fr 1fr;gap:16px">
|
||||
<div class="table-wrapper">
|
||||
<div class="table-header">
|
||||
<div class="table-title">待处理事项</div>
|
||||
<span class="tag tag-warning">3 项待审</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead><tr><th>类型</th><th>内容</th><th>提交人</th><th>时间</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><span class="tag tag-info">快速回复</span></td><td>VPN连接失败排查话术</td><td>张伟</td><td>10分钟前</td><td><button class="btn btn-sm btn-ghost">审核</button></td></tr>
|
||||
<tr><td><span class="tag tag-warning">知识推荐</span></td><td>打印机脱机问题（同类18次）</td><td>系统</td><td>1小时前</td><td><button class="btn btn-sm btn-ghost">处理</button></td></tr>
|
||||
<tr><td><span class="tag tag-danger">异常告警</span></td><td>坐席王丽会话超时未响应</td><td>系统</td><td>2小时前</td><td><button class="btn btn-sm btn-ghost">查看</button></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<div class="table-header">
|
||||
<div class="table-title">系统健康</div>
|
||||
</div>
|
||||
<div style="padding:16px">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
|
||||
<span style="font-size:13px">Dify AI 引擎</span>
|
||||
<span class="tag tag-success"><i class="fas fa-circle" style="font-size:6px"></i> 正常</span>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
|
||||
<span style="font-size:13px">RAGFlow 知识库</span>
|
||||
<span class="tag tag-success"><i class="fas fa-circle" style="font-size:6px"></i> 正常</span>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
|
||||
<span style="font-size:13px">Redis 缓存</span>
|
||||
<span class="tag tag-success"><i class="fas fa-circle" style="font-size:6px"></i> 正常</span>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
|
||||
<span style="font-size:13px">PostgreSQL</span>
|
||||
<span class="tag tag-success"><i class="fas fa-circle" style="font-size:6px"></i> 正常</span>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:13px">WebSocket 服务</span>
|
||||
<span class="tag tag-warning"><i class="fas fa-circle" style="font-size:6px"></i> 2连接抖动</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 功能开关 ==================== -->
|
||||
<div class="page" id="page-features">
|
||||
<div class="page-title">功能开关 / 参数</div>
|
||||
<div class="page-desc">按阶段控制功能开放，运行时切换无需改代码。配置变更即时生效，支持回滚。</div>
|
||||
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-card-header">
|
||||
<div class="feature-card-title"><i class="fas fa-robot" style="color:var(--accent);margin-right:6px"></i> AI 对话引擎</div>
|
||||
<span class="tag tag-success">已启用</span>
|
||||
</div>
|
||||
<div class="feature-card-desc">Dify Agent + RAGFlow 检索增强，员工自助咨询</div>
|
||||
<div class="feature-item"><span class="feature-item-name">AI 自动回复</span><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
|
||||
<div class="feature-item"><span class="feature-item-name">转人工关键词触发</span><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
|
||||
<div class="feature-item"><span class="feature-item-name">AI 命中阈值 <code style="color:var(--accent);font-size:11px">3次</code></span><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-card-header">
|
||||
<div class="feature-card-title"><i class="fas fa-headset" style="color:var(--success);margin-right:6px"></i> 人工服务</div>
|
||||
<span class="tag tag-success">已启用</span>
|
||||
</div>
|
||||
<div class="feature-card-desc">员工可摇铃呼叫坐席，坐席手动接单</div>
|
||||
<div class="feature-item"><span class="feature-item-name">摇铃呼叫坐席</span><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
|
||||
<div class="feature-item"><span class="feature-item-name">手动接单模式</span><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
|
||||
<div class="feature-item"><span class="feature-item-name">邀请员工加入会话</span><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-card-header">
|
||||
<div class="feature-card-title"><i class="fas fa-clock" style="color:var(--warning);margin-right:6px"></i> 排队系统</div>
|
||||
<span class="tag tag-warning">阶段二</span>
|
||||
</div>
|
||||
<div class="feature-card-desc">坐席全忙时排队等待，支持优先级排序</div>
|
||||
<div class="feature-item"><span class="feature-item-name">排队等待 <span class="feature-item-stage">阶段二</span></span><div class="switch" onclick="this.classList.toggle('on')"></div></div>
|
||||
<div class="feature-item"><span class="feature-item-name">优先级排序 <span class="feature-item-stage">阶段二</span></span><div class="switch" onclick="this.classList.toggle('on')"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-card-header">
|
||||
<div class="feature-card-title"><i class="fas fa-star" style="color:#fbbf24;margin-right:6px"></i> 满意度评价</div>
|
||||
<span class="tag tag-warning">阶段二</span>
|
||||
</div>
|
||||
<div class="feature-card-desc">会话结束后推送评价，统计满意度趋势</div>
|
||||
<div class="feature-item"><span class="feature-item-name">评价推送 <span class="feature-item-stage">阶段二</span></span><div class="switch" onclick="this.classList.toggle('on')"></div></div>
|
||||
<div class="feature-item"><span class="feature-item-name">评价统计 <span class="feature-item-stage">阶段二</span></span><div class="switch" onclick="this.classList.toggle('on')"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-card-header">
|
||||
<div class="feature-card-title"><i class="fas fa-shield-alt" style="color:var(--danger);margin-right:6px"></i> 应急模式</div>
|
||||
<span class="tag tag-danger">当前关闭</span>
|
||||
</div>
|
||||
<div class="feature-card-desc">系统维护时降级，引导员工走企微原生通道</div>
|
||||
<div class="feature-item"><span class="feature-item-name">应急模式开关</span><div class="switch" onclick="this.classList.toggle('on');updateEmergency(this)"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-card-header">
|
||||
<div class="feature-card-title"><i class="fas fa-key" style="color:var(--accent);margin-right:6px"></i> 关键词管理</div>
|
||||
<span class="tag tag-success">已启用</span>
|
||||
</div>
|
||||
<div class="feature-card-desc">转人工/情绪关键词，JSON 格式存储</div>
|
||||
<div class="feature-item"><span class="feature-item-name">转人工关键词 <code style="color:var(--accent);font-size:11px">转人工/人工/人工服务</code></span><button class="btn btn-sm btn-ghost">编辑</button></div>
|
||||
<div class="feature-item"><span class="feature-item-name">情绪关键词 <code style="color:var(--accent);font-size:11px">投诉/差评/不满</code></span><button class="btn btn-sm btn-ghost">编辑</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 坐席管理 ==================== -->
|
||||
<div class="page" id="page-agents">
|
||||
<div class="page-title">坐席人员管理</div>
|
||||
<div class="page-desc">坐席状态、技能标签、权限分级管理。技能标签与快速回复7大类对齐。</div>
|
||||
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
|
||||
<div style="display:flex;gap:8px">
|
||||
<div class="category-tab active" onclick="filterAgents(this,'all')">全部 (3)</div>
|
||||
<div class="category-tab" onclick="filterAgents(this,'online')">在线 (2)</div>
|
||||
<div class="category-tab" onclick="filterAgents(this,'busy')">忙碌 (0)</div>
|
||||
<div class="category-tab" onclick="filterAgents(this,'offline')">离线 (1)</div>
|
||||
</div>
|
||||
<button class="btn btn-primary"><i class="fas fa-plus"></i> 添加坐席</button>
|
||||
</div>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead><tr><th>坐席</th><th>状态</th><th>技能标签</th><th>角色</th><th>当前/最大负载</th><th>今日结单</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div style="display:flex;align-items:center;gap:10px"><div style="width:32px;height:32px;border-radius:50%;background:var(--accent-light);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:12px;font-weight:600">宋</div><div><div style="font-weight:500">宋献</div><div style="font-size:11px;color:var(--text-muted)">EMP001</div></div></div></td>
|
||||
<td><span class="tag tag-success"><i class="fas fa-circle" style="font-size:6px"></i> 在线</span></td>
|
||||
<td><span class="tag tag-info" style="margin:1px">电脑</span><span class="tag tag-info" style="margin:1px">网络</span><span class="tag tag-info" style="margin:1px">软件</span></td>
|
||||
<td><span class="tag tag-warning">组长</span></td>
|
||||
<td>3 / 5</td>
|
||||
<td>12</td>
|
||||
<td><button class="btn btn-sm btn-ghost">编辑</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div style="display:flex;align-items:center;gap:10px"><div style="width:32px;height:32px;border-radius:50%;background:rgba(16,185,129,0.12);display:flex;align-items:center;justify-content:center;color:var(--success);font-size:12px;font-weight:600">王</div><div><div style="font-weight:500">王丽</div><div style="font-size:11px;color:var(--text-muted)">EMP002</div></div></div></td>
|
||||
<td><span class="tag tag-success"><i class="fas fa-circle" style="font-size:6px"></i> 在线</span></td>
|
||||
<td><span class="tag tag-info" style="margin:1px">外设</span><span class="tag tag-info" style="margin:1px">安全</span></td>
|
||||
<td><span class="tag tag-info">坐席</span></td>
|
||||
<td>2 / 5</td>
|
||||
<td>8</td>
|
||||
<td><button class="btn btn-sm btn-ghost">编辑</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div style="display:flex;align-items:center;gap:10px"><div style="width:32px;height:32px;border-radius:50%;background:rgba(100,116,139,0.12);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:12px;font-weight:600">张</div><div><div style="font-weight:500">张伟</div><div style="font-size:11px;color:var(--text-muted)">EMP003</div></div></div></td>
|
||||
<td><span class="tag" style="background:var(--bg-tertiary);color:var(--text-muted)"><i class="fas fa-circle" style="font-size:6px"></i> 离线</span></td>
|
||||
<td><span class="tag tag-info" style="margin:1px">资产</span><span class="tag tag-info" style="margin:1px">其他</span></td>
|
||||
<td><span class="tag tag-info">坐席</span></td>
|
||||
<td>0 / 5</td>
|
||||
<td>0</td>
|
||||
<td><button class="btn btn-sm btn-ghost">编辑</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 系统集成 ==================== -->
|
||||
<div class="page" id="page-integrations">
|
||||
<div class="page-title">外部系统集成</div>
|
||||
<div class="page-desc">管理后台管「配置和参数」，Dify 网页管「Workflow 逻辑」，两者边界明确。</div>
|
||||
|
||||
<div class="integration-grid">
|
||||
<div class="integration-card">
|
||||
<div class="integration-icon" style="background:var(--accent-light);color:var(--accent)"><i class="fas fa-brain"></i></div>
|
||||
<div class="integration-name">Dify AI</div>
|
||||
<div class="integration-status"><span class="tag tag-success">已连接</span></div>
|
||||
<div class="integration-detail">Agent URL/Key · 连接测试<br>Agent 状态查看</div>
|
||||
<div style="margin-top:12px"><button class="btn btn-sm btn-ghost">配置</button> <button class="btn btn-sm btn-ghost">测试</button></div>
|
||||
</div>
|
||||
|
||||
<div class="integration-card">
|
||||
<div class="integration-icon" style="background:var(--success-bg);color:var(--success)"><i class="fas fa-database"></i></div>
|
||||
<div class="integration-name">RAGFlow</div>
|
||||
<div class="integration-status"><span class="tag tag-warning">部分集成</span></div>
|
||||
<div class="integration-detail">API URL/Key · 知识库列表<br>同步状态查看</div>
|
||||
<div style="margin-top:12px"><button class="btn btn-sm btn-ghost">配置</button></div>
|
||||
</div>
|
||||
|
||||
<div class="integration-card">
|
||||
<div class="integration-icon" style="background:var(--warning-bg);color:var(--warning)"><i class="fas fa-chart-line"></i></div>
|
||||
<div class="integration-name">数据平台</div>
|
||||
<div class="integration-status"><span class="tag" style="background:var(--bg-tertiary);color:var(--text-muted)">未连接</span></div>
|
||||
<div class="integration-detail">数据库连接 · 看板 URL<br>同步状态</div>
|
||||
<div style="margin-top:12px"><button class="btn btn-sm btn-ghost">配置</button></div>
|
||||
</div>
|
||||
|
||||
<div class="integration-card">
|
||||
<div class="integration-icon" style="background:rgba(139,92,246,0.12);color:#8b5cf6"><i class="fas fa-id-card"></i></div>
|
||||
<div class="integration-name">北森 eHR</div>
|
||||
<div class="integration-status"><span class="tag" style="background:var(--bg-tertiary);color:var(--text-muted)">未连接</span></div>
|
||||
<div class="integration-detail">OAuth2 · 员工信息<br>任职信息 API</div>
|
||||
<div style="margin-top:12px"><button class="btn btn-sm btn-ghost">配置</button></div>
|
||||
</div>
|
||||
|
||||
<div class="integration-card">
|
||||
<div class="integration-icon" style="background:var(--danger-bg);color:var(--danger)"><i class="fas fa-shield-virus"></i></div>
|
||||
<div class="integration-name">火绒安全</div>
|
||||
<div class="integration-status"><span class="tag" style="background:var(--bg-tertiary);color:var(--text-muted)">未连接</span></div>
|
||||
<div class="integration-detail">AccessKey · 终端查询<br>病毒库/漏洞状态</div>
|
||||
<div style="margin-top:12px"><button class="btn btn-sm btn-ghost">配置</button></div>
|
||||
</div>
|
||||
|
||||
<div class="integration-card">
|
||||
<div class="integration-icon" style="background:rgba(236,72,153,0.12);color:#ec4899"><i class="fas fa-laptop-code"></i></div>
|
||||
<div class="integration-name">联软安全</div>
|
||||
<div class="integration-status"><span class="tag" style="background:var(--bg-tertiary);color:var(--text-muted)">待确认</span></div>
|
||||
<div class="integration-detail">API 开放性待确认<br>需联系终端安全团队</div>
|
||||
<div style="margin-top:12px"><button class="btn btn-sm btn-ghost">申请</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 分配模式 ==================== -->
|
||||
<div class="page" id="page-assignment">
|
||||
<div class="page-title">消息分配模式</div>
|
||||
<div class="page-desc">当前坐席1人足以承担，手动接单完全满足。后续模式按坐席规模自动解锁。</div>
|
||||
|
||||
<div class="mode-card" style="border-color:var(--accent)">
|
||||
<div class="mode-radio selected"></div>
|
||||
<div class="mode-info">
|
||||
<div class="mode-title">手动接单 <span class="mode-badge tag tag-success">当前启用</span></div>
|
||||
<div class="mode-desc">坐席在待办列表中自行选择接单。AB 角色冗余设计，1 人即可承担。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mode-card mode-locked">
|
||||
<div class="mode-radio"></div>
|
||||
<div class="mode-info">
|
||||
<div class="mode-title">轮询分配 <span class="mode-badge tag tag-info">P2</span></div>
|
||||
<div class="mode-desc">按坐席列表顺序依次分配，循环往复。</div>
|
||||
<div class="mode-lock-text"><i class="fas fa-lock" style="margin-right:4px"></i> 坐席人数不足3人，暂不需要</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mode-card mode-locked">
|
||||
<div class="mode-radio"></div>
|
||||
<div class="mode-info">
|
||||
<div class="mode-title">最少活跃优先 <span class="mode-badge tag tag-info">P2</span></div>
|
||||
<div class="mode-desc">自动分配给当前活跃会话数最少的坐席。</div>
|
||||
<div class="mode-lock-text"><i class="fas fa-lock" style="margin-right:4px"></i> 坐席人数不足3人，暂不需要</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mode-card mode-locked">
|
||||
<div class="mode-radio"></div>
|
||||
<div class="mode-info">
|
||||
<div class="mode-title">加权比例分配 <span class="mode-badge" style="background:var(--bg-tertiary);color:var(--text-muted)">P3</span></div>
|
||||
<div class="mode-desc">按坐席权重分配（如高级权重2、初级权重1）。</div>
|
||||
<div class="mode-lock-text"><i class="fas fa-lock" style="margin-right:4px"></i> 坐席人数不足5人，暂不需要</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mode-card mode-locked">
|
||||
<div class="mode-radio"></div>
|
||||
<div class="mode-info">
|
||||
<div class="mode-title">技能匹配分配 <span class="mode-badge" style="background:var(--bg-tertiary);color:var(--text-muted)">P3</span></div>
|
||||
<div class="mode-desc">根据问题类别匹配坐席技能标签。</div>
|
||||
<div class="mode-lock-text"><i class="fas fa-lock" style="margin-right:4px"></i> 需坐席≥5人 + 技能标签体系成熟</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mode-card mode-locked">
|
||||
<div class="mode-radio"></div>
|
||||
<div class="mode-info">
|
||||
<div class="mode-title">优先队列 <span class="mode-badge" style="background:var(--bg-tertiary);color:var(--text-muted)">P3</span></div>
|
||||
<div class="mode-desc">紧急/阻断性问题优先路由到高级坐席/组长。</div>
|
||||
<div class="mode-lock-text"><i class="fas fa-lock" style="margin-right:4px"></i> 需坐席≥5人 + 紧急度评分上线</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 快速回复管理 ==================== -->
|
||||
<div class="page" id="page-quickreply">
|
||||
<div class="page-title">快速回复管理</div>
|
||||
<div class="page-desc">分类管理 + 版本历史 + 审核发布流程。坐席提交→组长审核→全员可见。</div>
|
||||
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
|
||||
<div class="category-tabs">
|
||||
<div class="category-tab active" onclick="filterCategory(this)">全部 (28)</div>
|
||||
<div class="category-tab" onclick="filterCategory(this)">电脑 (6)</div>
|
||||
<div class="category-tab" onclick="filterCategory(this)">软件 (5)</div>
|
||||
<div class="category-tab" onclick="filterCategory(this)">外设 (4)</div>
|
||||
<div class="category-tab" onclick="filterCategory(this)">网络 (5)</div>
|
||||
<div class="category-tab" onclick="filterCategory(this)">安全 (3)</div>
|
||||
<div class="category-tab" onclick="filterCategory(this)">资产 (3)</div>
|
||||
<div class="category-tab" onclick="filterCategory(this)">其他 (2)</div>
|
||||
</div>
|
||||
<button class="btn btn-primary"><i class="fas fa-plus"></i> 新增模板</button>
|
||||
</div>
|
||||
|
||||
<div class="reply-card">
|
||||
<div class="reply-card-header">
|
||||
<div class="reply-card-title"><span class="tag tag-info" style="margin-right:8px">网络</span> VPN连接失败排查</div>
|
||||
<div class="reply-actions">
|
||||
<span class="tag tag-success">已审核</span>
|
||||
<button class="btn btn-sm btn-ghost"><i class="fas fa-edit"></i></button>
|
||||
<button class="btn btn-sm btn-ghost"><i class="fas fa-history"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reply-card-content">您好{employee_name}，VPN连接失败请按以下步骤排查：<br>1. 确认网络连接正常<br>2. 检查VPN客户端是否最新版本<br>3. 尝试重新输入密码<br>4. 如仍无法连接，请提供错误截图</div>
|
||||
<div style="font-size:11px;color:var(--text-muted);margin-top:8px">变量: employee_name · 最后更新: 2026-06-10 · 版本 v3</div>
|
||||
</div>
|
||||
|
||||
<div class="reply-card">
|
||||
<div class="reply-card-header">
|
||||
<div class="reply-card-title"><span class="tag tag-info" style="margin-right:8px">电脑</span> 电脑蓝屏处理话术</div>
|
||||
<div class="reply-actions">
|
||||
<span class="tag tag-success">已审核</span>
|
||||
<button class="btn btn-sm btn-ghost"><i class="fas fa-edit"></i></button>
|
||||
<button class="btn btn-sm btn-ghost"><i class="fas fa-history"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reply-card-content">您好，电脑蓝屏请不要慌张，请尝试以下操作：<br>1. 长按电源键10秒强制关机，再重新开机<br>2. 如频繁蓝屏，请记录错误代码（如 IRQL_NOT_LESS_OR_EQUAL）<br>3. 联系IT支持获取进一步帮助</div>
|
||||
<div style="font-size:11px;color:var(--text-muted);margin-top:8px">最后更新: 2026-06-08 · 版本 v2</div>
|
||||
</div>
|
||||
|
||||
<div class="reply-card" style="border-color:var(--warning)">
|
||||
<div class="reply-card-header">
|
||||
<div class="reply-card-title"><span class="tag tag-info" style="margin-right:8px">安全</span> 密码重置引导（新）</div>
|
||||
<div class="reply-actions">
|
||||
<span class="tag tag-warning">待审核</span>
|
||||
<button class="btn btn-sm btn-primary">通过</button>
|
||||
<button class="btn btn-sm btn-ghost">驳回</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reply-card-content">您好{employee_name}，密码重置请按以下操作：<br>1. 访问自助密码重置门户<br>2. 输入工号验证身份<br>3. 设置新密码（需包含大小写+数字+特殊字符）<br>4. 等待5分钟同步生效</div>
|
||||
<div style="font-size:11px;color:var(--text-muted);margin-top:8px">提交人: 张伟 · 提交时间: 2026-06-11 · 仅提交人可用</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 会话监控 ==================== -->
|
||||
<div class="page" id="page-monitor">
|
||||
<div class="page-title">会话监控</div>
|
||||
<div class="page-desc">实时查看坐席工作状态、会话队列、异常告警。阶段二功能，当前为 Demo 预览。</div>
|
||||
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">进行中会话</div>
|
||||
<div class="stat-value" style="color:var(--accent)">5</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">等待中</div>
|
||||
<div class="stat-value" style="color:var(--warning)">0</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">今日已结单</div>
|
||||
<div class="stat-value" style="color:var(--success)">42</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">异常告警</div>
|
||||
<div class="stat-value" style="color:var(--danger)">1</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<div class="table-header">
|
||||
<div class="table-title">实时会话</div>
|
||||
<span class="tag tag-info">Demo 预览</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead><tr><th>会话ID</th><th>员工</th><th>坐席</th><th>持续时长</th><th>消息数</th><th>状态</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>#C042</td><td>李明 (EMP101)</td><td>宋献</td><td>5分32秒</td><td>8</td><td><span class="tag tag-success">进行中</span></td></tr>
|
||||
<tr><td>#C041</td><td>赵刚 (EMP205)</td><td>宋献</td><td>12分08秒</td><td>14</td><td><span class="tag tag-success">进行中</span></td></tr>
|
||||
<tr><td>#C040</td><td>孙芳 (EMP312)</td><td>王丽</td><td>8分45秒</td><td>6</td><td><span class="tag tag-warning">超时未响应</span></td></tr>
|
||||
<tr><td>#C039</td><td>周磊 (EMP088)</td><td>宋献</td><td>3分12秒</td><td>4</td><td><span class="tag tag-success">进行中</span></td></tr>
|
||||
<tr><td>#C038</td><td>吴婷 (EMP156)</td><td>王丽</td><td>1分56秒</td><td>2</td><td><span class="tag tag-info">AI 对话中</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 排查流程图 ==================== -->
|
||||
<div class="page" id="page-flowchart">
|
||||
<div class="page-title">排查流程图管理</div>
|
||||
<div class="page-desc">JSON 导入导出 + 预览 + 版本管理。阶段三开始实现，后续升级为可视化拖拽编辑。</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:20px">
|
||||
<button class="btn btn-primary"><i class="fas fa-file-import"></i> 导入 JSON</button>
|
||||
<button class="btn btn-ghost"><i class="fas fa-file-export"></i> 导出全部</button>
|
||||
<button class="btn btn-ghost"><i class="fas fa-plus"></i> 新建流程图</button>
|
||||
</div>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead><tr><th>流程图名称</th><th>分类</th><th>节点数</th><th>版本</th><th>最后更新</th><th>状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><i class="fas fa-project-diagram" style="color:var(--accent);margin-right:6px"></i>VPN连接故障排查</td><td><span class="tag tag-info">网络</span></td><td>12</td><td>v2.1</td><td>2026-06-10</td><td><span class="tag tag-success">已发布</span></td><td><button class="btn btn-sm btn-ghost">预览</button> <button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||||
<tr><td><i class="fas fa-project-diagram" style="color:var(--accent);margin-right:6px"></i>打印机脱机排查</td><td><span class="tag tag-info">外设</span></td><td>8</td><td>v1.3</td><td>2026-06-08</td><td><span class="tag tag-success">已发布</span></td><td><button class="btn btn-sm btn-ghost">预览</button> <button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||||
<tr><td><i class="fas fa-project-diagram" style="color:var(--accent);margin-right:6px"></i>邮箱登录失败排查</td><td><span class="tag tag-info">软件</span></td><td>10</td><td>v1.0</td><td>2026-06-06</td><td><span class="tag tag-warning">草稿</span></td><td><button class="btn btn-sm btn-ghost">预览</button> <button class="btn btn-sm btn-ghost">编辑</button></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px">
|
||||
<div style="font-size:14px;font-weight:600;margin-bottom:12px"><i class="fas fa-road" style="color:var(--accent);margin-right:6px"></i> 实现路径</div>
|
||||
<div style="display:flex;gap:12px;align-items:center">
|
||||
<div style="background:var(--accent-light);border:1px solid var(--accent);border-radius:var(--radius);padding:12px 16px;flex:1;text-align:center">
|
||||
<div style="font-size:12px;color:var(--accent);font-weight:500">Step 1</div>
|
||||
<div style="font-size:13px;margin-top:4px">JSON 导入导出 + 预览</div>
|
||||
<div style="font-size:11px;color:var(--text-muted)">阶段三 3B</div>
|
||||
</div>
|
||||
<i class="fas fa-arrow-right" style="color:var(--text-muted)"></i>
|
||||
<div style="background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;flex:1;text-align:center">
|
||||
<div style="font-size:12px;color:var(--text-muted);font-weight:500">Step 2</div>
|
||||
<div style="font-size:13px;margin-top:4px">导出为 Dify 变量</div>
|
||||
<div style="font-size:11px;color:var(--text-muted)">阶段四 4A</div>
|
||||
</div>
|
||||
<i class="fas fa-arrow-right" style="color:var(--text-muted)"></i>
|
||||
<div style="background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;flex:1;text-align:center">
|
||||
<div style="font-size:12px;color:var(--text-muted);font-weight:500">Step 3</div>
|
||||
<div style="font-size:13px;margin-top:4px">Dify HTTP 回调</div>
|
||||
<div style="font-size:11px;color:var(--text-muted)">阶段四</div>
|
||||
</div>
|
||||
<i class="fas fa-arrow-right" style="color:var(--text-muted)"></i>
|
||||
<div style="background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;flex:1;text-align:center">
|
||||
<div style="font-size:12px;color:var(--text-muted);font-weight:500">Step 4</div>
|
||||
<div style="font-size:13px;margin-top:4px">可视化拖拽编辑</div>
|
||||
<div style="font-size:11px;color:var(--text-muted)">远景</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchPage(pageId) {
|
||||
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
||||
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
||||
document.getElementById('page-' + pageId).classList.add('active');
|
||||
event.currentTarget.classList.add('active');
|
||||
var titles = {
|
||||
dashboard: '运营总览',
|
||||
features: '功能开关/参数',
|
||||
agents: '坐席人员管理',
|
||||
integrations: '外部系统集成',
|
||||
assignment: '消息分配模式',
|
||||
quickreply: '快速回复管理',
|
||||
monitor: '会话监控',
|
||||
flowchart: '排查流程图管理'
|
||||
};
|
||||
document.getElementById('header-title').textContent = titles[pageId] || pageId;
|
||||
}
|
||||
|
||||
function filterAgents(el, status) {
|
||||
el.parentElement.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
}
|
||||
|
||||
function filterCategory(el) {
|
||||
el.parentElement.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
}
|
||||
|
||||
function updateEmergency(sw) {
|
||||
var card = sw.closest('.feature-card');
|
||||
var badge = card.querySelector('.feature-card-header .tag');
|
||||
if (sw.classList.contains('on')) {
|
||||
badge.className = 'tag tag-danger';
|
||||
badge.textContent = '已启用';
|
||||
} else {
|
||||
badge.className = 'tag tag-danger';
|
||||
badge.textContent = '当前关闭';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,236 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>IT智能服务台 - 管理员登录</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--primary: #07C160;
|
||||
--primary-dark: #05964a;
|
||||
--bg: #f5f6f7;
|
||||
--card-bg: #ffffff;
|
||||
--text: #171a1d;
|
||||
--text-secondary: #858e99;
|
||||
--border: #e7e8eb;
|
||||
--danger: #e74c3c;
|
||||
}
|
||||
body {
|
||||
background: var(--bg);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
||||
padding: 40px;
|
||||
}
|
||||
.logo {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
|
||||
border-radius: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.logo-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.logo-subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.form-control {
|
||||
height: 44px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
.form-control:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(7,193,96,0.1);
|
||||
}
|
||||
.input-group-text {
|
||||
background: transparent;
|
||||
border-left: none;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
border: none;
|
||||
height: 44px;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 24px 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
.divider::before, .divider::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
}
|
||||
.divider span {
|
||||
padding: 0 16px;
|
||||
}
|
||||
.wecom-btn {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.wecom-btn:hover {
|
||||
border-color: var(--primary);
|
||||
background: rgba(7,193,96,0.05);
|
||||
}
|
||||
.wecom-btn i {
|
||||
color: var(--primary);
|
||||
font-size: 18px;
|
||||
}
|
||||
.otp-hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 8px;
|
||||
}
|
||||
.otp-hint a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
.warning-box {
|
||||
background: #fef3e8;
|
||||
border: 1px solid #f5c6a5;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
.warning-box i {
|
||||
color: #e67e22;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.warning-box-text {
|
||||
font-size: 13px;
|
||||
color: #d35400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-card">
|
||||
<div class="logo">
|
||||
<div class="logo-icon">IT</div>
|
||||
<div class="logo-title">IT智能服务台</div>
|
||||
<div class="logo-subtitle">管理后台 · 登录</div>
|
||||
</div>
|
||||
|
||||
<div class="warning-box">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
<div class="warning-box-text">
|
||||
管理员账号需要二次验证，请确保您已绑定OTP
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">用户名</label>
|
||||
<input type="text" class="form-control" placeholder="请输入用户名" id="username">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">密码</label>
|
||||
<div class="input-group">
|
||||
<input type="password" class="form-control" placeholder="请输入密码" id="password" style="border-right: none;">
|
||||
<span class="input-group-text"><i class="fas fa-eye-slash"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">OTP 验证码 <span style="color: var(--danger);">*</span></label>
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
<input type="text" class="form-control" placeholder="6位数字" maxlength="6" id="otp" required>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<div class="otp-image" style="height: 44px; background: #f5f6f7; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: monospace; font-size: 18px; letter-spacing: 4px;">
|
||||
●● ●●
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="otp-hint">
|
||||
打开 Google Authenticator 获取验证码
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary w-100">登录</button>
|
||||
</form>
|
||||
|
||||
<div class="divider">
|
||||
<span>或</span>
|
||||
</div>
|
||||
|
||||
<button class="wecom-btn">
|
||||
<i class="fab fa-weixin"></i>
|
||||
使用企业微信扫码登录
|
||||
</button>
|
||||
|
||||
<div class="footer">
|
||||
<a href="#" style="color: var(--text-secondary); text-decoration: none;">遇到问题？联系管理员</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,164 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>IT智能服务台 - 选择登录方式</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--primary: #07C160;
|
||||
--primary-dark: #05964a;
|
||||
--bg: #f5f6f7;
|
||||
--card-bg: #ffffff;
|
||||
--text: #171a1d;
|
||||
--text-secondary: #858e99;
|
||||
--border: #e7e8eb;
|
||||
--accent: #667eea;
|
||||
}
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.choice-card {
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
background: var(--card-bg);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.choice-icon {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 32px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.choice-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.choice-desc {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 28px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.choice-btn {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.choice-btn-wechat {
|
||||
background: linear-gradient(135deg, #07C160 0%, #05964a 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
.choice-btn-wechat:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(7,193,96,0.3);
|
||||
}
|
||||
.choice-btn-browser {
|
||||
background: white;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
.choice-btn-browser:hover {
|
||||
border-color: var(--primary);
|
||||
background: rgba(7,193,96,0.05);
|
||||
}
|
||||
.choice-btn i {
|
||||
font-size: 18px;
|
||||
}
|
||||
.choice-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20px 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
.choice-divider::before, .choice-divider::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
}
|
||||
.choice-divider span {
|
||||
padding: 0 12px;
|
||||
}
|
||||
.footer {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 24px;
|
||||
}
|
||||
.footer a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="choice-card">
|
||||
<div class="choice-icon">
|
||||
<i class="fas fa-check"></i>
|
||||
</div>
|
||||
|
||||
<div class="choice-title">检测到您正在企业微信中</div>
|
||||
<div class="choice-desc">
|
||||
请选择您偏好的登录方式
|
||||
</div>
|
||||
|
||||
<button class="choice-btn choice-btn-wechat">
|
||||
<i class="fab fa-weixin"></i>
|
||||
在企业微信中打开
|
||||
</button>
|
||||
|
||||
<div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 12px;">
|
||||
在企业微信客户端中打开，无需再次验证
|
||||
</div>
|
||||
|
||||
<div class="choice-divider">
|
||||
<span>或</span>
|
||||
</div>
|
||||
|
||||
<button class="choice-btn choice-btn-browser">
|
||||
<i class="fas fa-globe"></i>
|
||||
继续在浏览器中登录
|
||||
</button>
|
||||
|
||||
<div style="font-size: 12px; color: var(--text-secondary);">
|
||||
使用账号密码 + OTP 验证登录
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<a href="#">什么是 OTP？</a> · <a href="#">遇到问题？</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,209 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>IT智能服务台 - 坐席登录</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--primary: #07C160;
|
||||
--primary-dark: #05964a;
|
||||
--bg: #f5f6f7;
|
||||
--card-bg: #ffffff;
|
||||
--text: #171a1d;
|
||||
--text-secondary: #858e99;
|
||||
--border: #e7e8eb;
|
||||
}
|
||||
body {
|
||||
background: var(--bg);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
||||
padding: 40px;
|
||||
}
|
||||
.logo {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.logo-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.logo-subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.form-control {
|
||||
height: 44px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
.form-control:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(7,193,96,0.1);
|
||||
}
|
||||
.input-group-text {
|
||||
background: transparent;
|
||||
border-left: none;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
border: none;
|
||||
height: 44px;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 24px 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
.divider::before, .divider::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
}
|
||||
.divider span {
|
||||
padding: 0 16px;
|
||||
}
|
||||
.wecom-btn {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.wecom-btn:hover {
|
||||
border-color: var(--primary);
|
||||
background: rgba(7,193,96,0.05);
|
||||
}
|
||||
.wecom-btn i {
|
||||
color: var(--primary);
|
||||
font-size: 18px;
|
||||
}
|
||||
.otp-hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 8px;
|
||||
}
|
||||
.otp-hint a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-card">
|
||||
<div class="logo">
|
||||
<div class="logo-icon">IT</div>
|
||||
<div class="logo-title">IT智能服务台</div>
|
||||
<div class="logo-subtitle">坐席工作台 · 登录</div>
|
||||
</div>
|
||||
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">用户名</label>
|
||||
<input type="text" class="form-control" placeholder="请输入用户名" id="username">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">密码</label>
|
||||
<div class="input-group">
|
||||
<input type="password" class="form-control" placeholder="请输入密码" id="password" style="border-right: none;">
|
||||
<span class="input-group-text"><i class="fas fa-eye-slash"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">OTP 验证码</label>
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
<input type="text" class="form-control" placeholder="6位数字" maxlength="6" id="otp">
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<div class="otp-image" style="height: 44px; background: #f5f6f7; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: monospace; font-size: 18px; letter-spacing: 4px;">
|
||||
●● ●●
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="otp-hint">
|
||||
打开 Google Authenticator / 微信扫码 获取验证码
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary w-100">登录</button>
|
||||
</form>
|
||||
|
||||
<div class="divider">
|
||||
<span>或</span>
|
||||
</div>
|
||||
|
||||
<button class="wecom-btn">
|
||||
<i class="fab fa-weixin"></i>
|
||||
使用企业微信扫码登录
|
||||
</button>
|
||||
|
||||
<div class="footer">
|
||||
<a href="#" style="color: var(--text-secondary); text-decoration: none;">遇到问题？联系管理员</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,749 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>IT智能服务台 · H5用户端 · 手机端原型 v1</title>
|
||||
<style>
|
||||
/* ============================================================================
|
||||
CSS 变量 — 浅色/深色双主题
|
||||
============================================================================ */
|
||||
:root {
|
||||
--accent: #3b82f6;
|
||||
--accent-soft: rgba(59, 130, 246, 0.12);
|
||||
--bg-primary: #f5f6fa;
|
||||
--bg-secondary: #ffffff;
|
||||
--bg-tertiary: #eef0f5;
|
||||
--text-primary: #1a1a2e;
|
||||
--text-secondary: #555770;
|
||||
--text-tertiary: #9ca3af;
|
||||
--text-placeholder: #b0b4c0;
|
||||
--border-color: #e5e7eb;
|
||||
--shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
--radius: 12px;
|
||||
--transition: 0.2s ease;
|
||||
--color-employee-bg: #3b82f6;
|
||||
--color-agent-bg: #ffffff;
|
||||
--color-agent-border: #e5e7eb;
|
||||
--color-ai-bg: #e8f5e9;
|
||||
--color-ai-text: #1b5e20;
|
||||
--color-ai-tag-text: #2e7d32;
|
||||
--color-ai-tag-bg: #c8e6c9;
|
||||
--color-system-text: #9ca3af;
|
||||
--color-system-bg: #eef0f5;
|
||||
--color-warning: #ff9800;
|
||||
--color-danger: #ef4444;
|
||||
--color-success: #22c55e;
|
||||
--ts-done: #22c55e;
|
||||
--ts-current: #3b82f6;
|
||||
--ts-pending-bg: #eef0f5;
|
||||
--ts-yes-bg: rgba(34,197,94,0.06);
|
||||
--ts-yes-border: rgba(34,197,94,0.3);
|
||||
--ts-no-bg: rgba(239,68,68,0.06);
|
||||
--ts-no-border: rgba(239,68,68,0.3);
|
||||
--color-ts-card-bg: #ffffff;
|
||||
--color-ts-card-border: #e5e7eb;
|
||||
--color-ts-card-header: rgba(59,130,246,0.08);
|
||||
--tool-btn-bg: #eef0f5;
|
||||
--tool-btn-text: #555770;
|
||||
}
|
||||
[data-theme="dark"] {
|
||||
--accent: #3b82f6;
|
||||
--accent-soft: rgba(59, 130, 246, 0.18);
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-tertiary: #162032;
|
||||
--text-primary: #e2e8f0;
|
||||
--text-secondary: #94a3b8;
|
||||
--text-tertiary: #64748b;
|
||||
--text-placeholder: #475569;
|
||||
--border-color: #334155;
|
||||
--shadow: 0 1px 4px rgba(0,0,0,0.3);
|
||||
--color-employee-bg: #2563eb;
|
||||
--color-agent-bg: #1e293b;
|
||||
--color-agent-border: #334155;
|
||||
--color-ai-bg: #0d3320;
|
||||
--color-ai-text: #86efac;
|
||||
--color-ai-tag-text: #86efac;
|
||||
--color-ai-tag-bg: #14532d;
|
||||
--color-system-text: #64748b;
|
||||
--color-system-bg: #162032;
|
||||
--color-warning: #f97316;
|
||||
--color-danger: #ef4444;
|
||||
--color-success: #22c55e;
|
||||
--ts-done: #22c55e;
|
||||
--ts-current: #3b82f6;
|
||||
--ts-pending-bg: #162032;
|
||||
--ts-yes-bg: rgba(34,197,94,0.08);
|
||||
--ts-yes-border: rgba(34,197,94,0.3);
|
||||
--ts-no-bg: rgba(239,68,68,0.08);
|
||||
--ts-no-border: rgba(239,68,68,0.3);
|
||||
--color-ts-card-bg: #1e293b;
|
||||
--color-ts-card-border: #334155;
|
||||
--color-ts-card-header: rgba(59,130,246,0.12);
|
||||
--tool-btn-bg: #162032;
|
||||
--tool-btn-text: #94a3b8;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
基础重置 — 375px 手机壳居中
|
||||
============================================================================ */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
background: #0a0f1a;
|
||||
color: var(--text-primary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
手机壳 — 375×812 居中展示
|
||||
============================================================================ */
|
||||
.phone-shell {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
border-radius: 36px;
|
||||
border: 4px solid #334155;
|
||||
overflow: hidden;
|
||||
background: var(--bg-primary);
|
||||
box-shadow: 0 8px 40px rgba(0,0,0,0.4);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
状态栏
|
||||
============================================================================ */
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
background: var(--bg-secondary);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.status-bar__title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
顶部标题栏
|
||||
============================================================================ */
|
||||
.chat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.chat-header__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.chat-header__online {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--color-success);
|
||||
}
|
||||
.chat-header__online-dot {
|
||||
width: 6px; height: 6px; border-radius: 50%;
|
||||
background: var(--color-success);
|
||||
animation: online-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
.chat-header__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 摇铃按钮 — 标题栏胶囊 */
|
||||
.bell-btn--header {
|
||||
height: 28px; border-radius: 14px; border: none;
|
||||
padding: 0 10px; gap: 4px;
|
||||
font-size: 11px; font-weight: 600; color: #fff;
|
||||
background: linear-gradient(135deg, var(--color-warning), #f97316);
|
||||
cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 2px 6px rgba(255, 152, 0, 0.25);
|
||||
transition: transform 0.2s;
|
||||
-webkit-tap-highlight-color: transparent; outline: none;
|
||||
}
|
||||
.bell-btn--header:active { transform: scale(0.95); }
|
||||
.bell-btn--header__icon { font-size: 13px; display: inline-block; }
|
||||
.bell-btn--header__dot {
|
||||
width: 5px; height: 5px; border-radius: 50%;
|
||||
background: var(--color-danger); border: none;
|
||||
display: inline-block; margin-left: 2px;
|
||||
}
|
||||
|
||||
/* 主题切换 */
|
||||
.theme-switch {
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
cursor: pointer; user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.switch-track {
|
||||
width: 32px; height: 18px; border-radius: 9px;
|
||||
background: var(--bg-tertiary); border: 1px solid var(--border-color);
|
||||
position: relative; transition: background var(--transition);
|
||||
}
|
||||
.switch-thumb {
|
||||
width: 14px; height: 14px; border-radius: 50%;
|
||||
background: var(--accent); position: absolute; top: 1px; left: 1px;
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
[data-theme="dark"] .switch-thumb { transform: translateX(14px); }
|
||||
|
||||
/* ============================================================================
|
||||
排查步骤 — 固定在消息区顶部
|
||||
============================================================================ */
|
||||
.ts-top-bar {
|
||||
flex-shrink: 0;
|
||||
background: var(--color-ts-card-bg);
|
||||
border-bottom: 1px solid var(--color-ts-card-border);
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
z-index: 5;
|
||||
}
|
||||
.ts-top-bar__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background: var(--color-ts-card-header);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.ts-top-bar__header-icon { font-size: 12px; }
|
||||
.ts-top-bar__header-title { flex: 1; }
|
||||
.ts-top-bar__header-tag {
|
||||
font-size: 9px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.ts-top-bar__toggle {
|
||||
font-size: 10px;
|
||||
color: var(--text-tertiary);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.ts-top-bar__toggle--collapsed { transform: rotate(180deg); }
|
||||
|
||||
.ts-top-bar__path {
|
||||
padding: 6px 12px 4px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
.ts-path-bar {
|
||||
display: flex; align-items: center; gap: 2px;
|
||||
overflow-x: auto; padding-bottom: 4px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.ts-path-bar::-webkit-scrollbar { height: 0; }
|
||||
.ts-step { display: flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; }
|
||||
.ts-dot {
|
||||
width: 16px; height: 16px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 8px; font-weight: 700; flex-shrink: 0;
|
||||
}
|
||||
.ts-dot--done { background: var(--ts-done); color: #fff; }
|
||||
.ts-dot--current { background: var(--ts-current); color: #fff; box-shadow: 0 0 0 2px var(--accent-soft); animation: ts-dot-pulse 2s ease-in-out infinite; }
|
||||
.ts-dot--pending { background: var(--ts-pending-bg); color: var(--text-tertiary); border: 1px solid var(--border-color); }
|
||||
.ts-label { font-size: 10px; color: var(--text-secondary); }
|
||||
.ts-step--done .ts-label { color: var(--text-tertiary); text-decoration: line-through; }
|
||||
.ts-step--current .ts-label { color: var(--accent); font-weight: 600; }
|
||||
.ts-step--pending .ts-label { color: var(--text-tertiary); }
|
||||
.ts-arrow { color: var(--text-tertiary); font-size: 8px; flex-shrink: 0; padding: 0 1px; }
|
||||
.ts-arrow--active { color: var(--ts-done); }
|
||||
|
||||
.ts-top-bar__body { padding: 8px 12px 10px; }
|
||||
|
||||
/* 决策节点 */
|
||||
.ts-question-header { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 8px; }
|
||||
.ts-question-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
|
||||
.ts-question-text { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.5; }
|
||||
.ts-options { display: flex; gap: 8px; margin-top: 2px; }
|
||||
.ts-option {
|
||||
flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
|
||||
padding: 8px 10px; border-radius: 8px;
|
||||
border: 2px solid var(--border-color); background: var(--bg-primary);
|
||||
color: var(--text-primary); font-size: 12px; font-weight: 600;
|
||||
cursor: pointer; transition: all 0.2s; font-family: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.ts-option:active { transform: scale(0.97); }
|
||||
.ts-option--yes { border-color: var(--ts-yes-border); background: var(--ts-yes-bg); }
|
||||
.ts-option--no { border-color: var(--ts-no-border); background: var(--ts-no-bg); }
|
||||
.ts-option-icon { font-size: 12px; }
|
||||
.ts-option--selected-yes { border-color: #22c55e !important; background: rgba(34,197,94,0.15) !important; box-shadow: 0 0 0 2px rgba(34,197,94,0.2); }
|
||||
.ts-option--selected-no { border-color: #ef4444 !important; background: rgba(239,68,68,0.15) !important; box-shadow: 0 0 0 2px rgba(239,68,68,0.2); }
|
||||
|
||||
/* 步骤节点 */
|
||||
.ts-instruction-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
|
||||
.ts-instruction-icon { font-size: 12px; flex-shrink: 0; }
|
||||
.ts-instruction-title { font-size: 12px; font-weight: 600; color: var(--accent); }
|
||||
.ts-sub-steps { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; padding-left: 2px; }
|
||||
.ts-sub-step { display: flex; align-items: center; gap: 5px; font-size: 11px; }
|
||||
.ts-sub-dot {
|
||||
width: 16px; height: 16px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 8px; font-weight: 700; flex-shrink: 0;
|
||||
background: var(--ts-pending-bg); color: var(--text-tertiary); border: 1px solid var(--border-color);
|
||||
}
|
||||
.ts-sub-step--done .ts-sub-dot { background: #22c55e; color: #fff; border-color: #22c55e; }
|
||||
.ts-sub-step--done .ts-sub-label { color: var(--text-tertiary); text-decoration: line-through; }
|
||||
.ts-sub-step--current .ts-sub-dot { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||||
.ts-sub-step--current .ts-sub-label { color: var(--accent); font-weight: 600; }
|
||||
.ts-sub-label { color: var(--text-secondary); }
|
||||
.ts-hint {
|
||||
margin-top: 6px; padding: 4px 8px;
|
||||
background: var(--accent-soft); border-radius: 6px;
|
||||
font-size: 10px; color: var(--accent);
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
消息列表
|
||||
============================================================================ */
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.chat-messages::-webkit-scrollbar { width: 3px; }
|
||||
.chat-messages::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
|
||||
|
||||
/* ============================================================================
|
||||
消息气泡
|
||||
============================================================================ */
|
||||
.msg {
|
||||
display: flex; flex-direction: column;
|
||||
padding: 4px 14px; max-width: 100%;
|
||||
animation: bubble-in 0.3s ease-out;
|
||||
}
|
||||
.msg--employee { align-items: flex-end; }
|
||||
.msg--agent, .msg--ai { align-items: flex-start; }
|
||||
.msg--system { align-items: center; padding: 6px 14px; }
|
||||
.msg--system .msg__system-text {
|
||||
font-size: 11px; color: var(--color-system-text);
|
||||
background: var(--color-system-bg);
|
||||
padding: 3px 10px; border-radius: 10px;
|
||||
text-align: center; line-height: 1.5;
|
||||
}
|
||||
.msg__sender { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; padding-left: 4px; }
|
||||
.msg__ai-tag {
|
||||
font-size: 10px; color: var(--color-ai-tag-text);
|
||||
background: var(--color-ai-tag-bg);
|
||||
padding: 1px 5px; border-radius: 3px; font-weight: 600;
|
||||
}
|
||||
.msg__sender-name { font-size: 11px; color: var(--text-tertiary); }
|
||||
.msg__bubble {
|
||||
max-width: 75%; padding: 9px 13px; border-radius: 14px;
|
||||
word-break: break-word; line-height: 1.6; font-size: 13px;
|
||||
}
|
||||
.msg--employee .msg__bubble { background: var(--color-employee-bg); color: #fff; border-top-right-radius: 4px; }
|
||||
.msg--agent .msg__bubble { background: var(--color-agent-bg); color: var(--text-primary); border-top-left-radius: 4px; border: 1px solid var(--color-agent-border); }
|
||||
.msg--ai .msg__bubble { background: var(--color-ai-bg); color: var(--color-ai-text); border-top-left-radius: 4px; }
|
||||
.msg__time { font-size: 10px; color: var(--text-placeholder); margin-top: 2px; }
|
||||
.msg--employee .msg__time { text-align: right; padding-right: 4px; }
|
||||
.msg--agent .msg__time, .msg--ai .msg__time { text-align: left; padding-left: 4px; }
|
||||
.msg__avatar {
|
||||
width: 28px; height: 28px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 12px; flex-shrink: 0; margin-bottom: 2px;
|
||||
}
|
||||
.msg__avatar--agent { background: linear-gradient(135deg, #3b82f6, #6366f1); }
|
||||
.msg__avatar--ai { background: linear-gradient(135deg, #22c55e, #14b8a6); }
|
||||
.msg__avatar-row { display: flex; align-items: flex-end; gap: 6px; max-width: 88%; }
|
||||
|
||||
/* ============================================================================
|
||||
输入栏
|
||||
============================================================================ */
|
||||
.input-bar {
|
||||
background: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 工具栏 */
|
||||
.input-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 4px 12px 2px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
.tool-btn {
|
||||
width: 32px; height: 32px; border-radius: 8px;
|
||||
border: none; background: var(--tool-btn-bg);
|
||||
color: var(--tool-btn-text); font-size: 15px;
|
||||
cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
transition: all 0.15s; flex-shrink: 0;
|
||||
-webkit-tap-highlight-color: transparent; outline: none;
|
||||
}
|
||||
.tool-btn:active { transform: scale(0.92); background: var(--accent-soft); }
|
||||
.tool-btn:hover { background: var(--accent-soft); color: var(--accent); }
|
||||
.tool-sep {
|
||||
width: 1px; height: 18px; background: var(--border-color);
|
||||
margin: 0 4px; flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 输入行 */
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
padding-bottom: calc(6px + env(safe-area-inset-bottom, 6px));
|
||||
}
|
||||
|
||||
/* 输入框 */
|
||||
.input-field {
|
||||
flex: 1; background: var(--bg-tertiary); border-radius: 8px;
|
||||
padding: 8px 10px; border: 1px solid var(--border-color);
|
||||
font-size: 13px; font-family: inherit; color: var(--text-primary);
|
||||
resize: none; outline: none; min-height: 54px; max-height: 120px;
|
||||
line-height: 1.5; transition: border-color 0.2s;
|
||||
}
|
||||
.input-field:focus { border-color: var(--accent); }
|
||||
.input-field::placeholder { color: var(--text-placeholder); }
|
||||
|
||||
/* 发送按钮 */
|
||||
.send-btn {
|
||||
flex-shrink: 0; height: 34px; width: 34px; border-radius: 50%;
|
||||
border: none; background: var(--accent); color: #fff;
|
||||
font-size: 14px; cursor: pointer;
|
||||
transition: all 0.2s; font-family: inherit;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
.send-btn:active { transform: scale(0.92); }
|
||||
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
|
||||
|
||||
/* ============================================================================
|
||||
呼叫坐席弹窗
|
||||
============================================================================ */
|
||||
.modal-overlay {
|
||||
position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999;
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
|
||||
}
|
||||
.modal-overlay--visible { opacity: 1; pointer-events: auto; }
|
||||
.modal-content {
|
||||
background: var(--bg-secondary); border-radius: 16px;
|
||||
width: 300px; max-height: 80vh; overflow-y: auto;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
||||
transform: scale(0.8); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
.modal-overlay--visible .modal-content { transform: scale(1); }
|
||||
.modal-header { text-align: center; padding: 16px 14px 6px; }
|
||||
.modal-header__icon { font-size: 28px; display: inline-block; animation: bell-ring 0.6s ease-in-out infinite; }
|
||||
.modal-header h3 { margin: 6px 0 4px; font-size: 15px; color: var(--text-primary); }
|
||||
.modal-body { padding: 10px 14px; display: flex; flex-direction: column; align-items: center; }
|
||||
.modal-footer { padding: 10px 14px 16px; display: flex; justify-content: center; }
|
||||
.modal-btn { border: none; border-radius: 8px; padding: 8px 20px; font-size: 13px; cursor: pointer; transition: all 0.2s; font-family: inherit; }
|
||||
.modal-btn:active { transform: scale(0.96); }
|
||||
.modal-btn--cancel { background: var(--bg-tertiary); color: var(--text-secondary); }
|
||||
.modal-sending { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
|
||||
.modal-dot-flashing { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: dot-flash 1s infinite; }
|
||||
.modal-success { font-size: 13px; color: var(--color-success); font-weight: 600; padding: 8px 0; }
|
||||
|
||||
/* ============================================================================
|
||||
动画
|
||||
============================================================================ */
|
||||
@keyframes online-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||
@keyframes ts-dot-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--accent-soft); } 50% { box-shadow: 0 0 0 5px var(--accent-soft); } }
|
||||
@keyframes bubble-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes dot-flash { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
|
||||
@keyframes bell-ring {
|
||||
0%, 80%, 100% { transform: rotate(0); }
|
||||
85% { transform: rotate(12deg); }
|
||||
90% { transform: rotate(-12deg); }
|
||||
95% { transform: rotate(6deg); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__title">
|
||||
<span>🛎️</span> IT智能服务台
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标题栏 — 摇铃在坐席状态右侧 -->
|
||||
<div class="chat-header">
|
||||
<div class="chat-header__actions">
|
||||
<div class="chat-header__online">
|
||||
<span class="chat-header__online-dot"></span>
|
||||
<span>坐席在线</span>
|
||||
</div>
|
||||
<div class="chat-header__right">
|
||||
<button class="bell-btn--header" onclick="showCallModal()" title="呼叫人工坐席">
|
||||
<span class="bell-btn--header__icon">🔔</span>
|
||||
<span>呼叫</span>
|
||||
<span class="bell-btn--header__dot"></span>
|
||||
</button>
|
||||
<div class="theme-switch" onclick="toggleTheme()" title="切换主题">
|
||||
<div class="switch-track"><div class="switch-thumb"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 排查步骤固定在消息区顶部 -->
|
||||
<div class="ts-top-bar" id="tsBar">
|
||||
<div class="ts-top-bar__header" onclick="toggleTsBar()">
|
||||
<span class="ts-top-bar__header-icon">🔧</span>
|
||||
<span class="ts-top-bar__header-title">排查步骤</span>
|
||||
<span class="ts-top-bar__header-tag">进行中</span>
|
||||
<span class="ts-top-bar__toggle" id="tsToggle">▼ 收起</span>
|
||||
</div>
|
||||
<div id="tsContent">
|
||||
<div class="ts-top-bar__path">
|
||||
<div class="ts-path-bar">
|
||||
<div class="ts-step ts-step--done">
|
||||
<span class="ts-dot ts-dot--done">✓</span>
|
||||
<span class="ts-label">确认问题</span>
|
||||
</div>
|
||||
<span class="ts-arrow ts-arrow--active">→</span>
|
||||
<div class="ts-step ts-step--current">
|
||||
<span class="ts-dot ts-dot--current">2</span>
|
||||
<span class="ts-label">网络适配器</span>
|
||||
</div>
|
||||
<span class="ts-arrow">→</span>
|
||||
<div class="ts-step ts-step--pending">
|
||||
<span class="ts-dot ts-dot--pending">3</span>
|
||||
<span class="ts-label">驱动检查</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ts-top-bar__body" id="tsBody">
|
||||
<div id="tsDecision">
|
||||
<div class="ts-question-header">
|
||||
<span class="ts-question-icon">❓</span>
|
||||
<span class="ts-question-text">WiFi适配器是否显示"已禁用"？</span>
|
||||
</div>
|
||||
<div class="ts-options">
|
||||
<button class="ts-option ts-option--yes" onclick="selectDecision('yes')">
|
||||
<span class="ts-option-icon">✅</span><span>是，已禁用</span>
|
||||
</button>
|
||||
<button class="ts-option ts-option--no" onclick="selectDecision('no')">
|
||||
<span class="ts-option-icon">❌</span><span>否，正常</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tsInstruction" style="display:none;">
|
||||
<div class="ts-instruction-header">
|
||||
<span class="ts-instruction-icon">📋</span>
|
||||
<span class="ts-instruction-title">正在执行：启用WiFi适配器</span>
|
||||
</div>
|
||||
<div class="ts-sub-steps">
|
||||
<div class="ts-sub-step ts-sub-step--done">
|
||||
<span class="ts-sub-dot">✓</span>
|
||||
<span class="ts-sub-label">打开「设置」→「网络和Internet」</span>
|
||||
</div>
|
||||
<div class="ts-sub-step ts-sub-step--current">
|
||||
<span class="ts-sub-dot">2</span>
|
||||
<span class="ts-sub-label">点击「更改适配器选项」</span>
|
||||
</div>
|
||||
<div class="ts-sub-step">
|
||||
<span class="ts-sub-dot">3</span>
|
||||
<span class="ts-sub-label">右键WiFi适配器 → 启用</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ts-hint">💡 请按步骤操作，完成后坐席推进下一步</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<div class="chat-messages" id="messages">
|
||||
<div class="msg msg--system">
|
||||
<span class="msg__system-text">坐席 小宋 已接入会话</span>
|
||||
</div>
|
||||
<div class="msg msg--ai">
|
||||
<div class="msg__sender"><span class="msg__ai-tag">AI回复</span></div>
|
||||
<div class="msg__avatar-row">
|
||||
<div class="msg__avatar msg__avatar--ai">🤖</div>
|
||||
<div>
|
||||
<div class="msg__bubble">您好！我是AI助手，请问有什么可以帮您的？</div>
|
||||
<div class="msg__time">10:02</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg msg--employee">
|
||||
<div class="msg__bubble">我的电脑连不上公司WiFi了</div>
|
||||
<div class="msg__time">10:03</div>
|
||||
</div>
|
||||
<div class="msg msg--agent">
|
||||
<div class="msg__avatar-row">
|
||||
<div class="msg__avatar msg__avatar--agent">👨💻</div>
|
||||
<div>
|
||||
<div class="msg__bubble">你好，我来帮你排查。请在上方排查步骤中选择 👆</div>
|
||||
<div class="msg__time">10:05</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg msg--system">
|
||||
<span class="msg__system-text">排查步骤已同步至坐席端</span>
|
||||
</div>
|
||||
<div class="msg msg--agent">
|
||||
<div class="msg__avatar-row">
|
||||
<div class="msg__avatar msg__avatar--agent">👨💻</div>
|
||||
<div>
|
||||
<div class="msg__bubble">好的，我看到你选择了"是，已禁用"。请按照上方步骤操作，完成后告诉我。</div>
|
||||
<div class="msg__time">10:06</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg msg--employee">
|
||||
<div class="msg__bubble">已经启用了，但还是连不上</div>
|
||||
<div class="msg__time">10:08</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入栏 — 工具栏+输入框+发送（摇铃在标题栏，输入栏无摇铃） -->
|
||||
<div class="input-bar">
|
||||
<div class="input-toolbar">
|
||||
<button class="tool-btn" title="表情" onclick="showToolTip('😊 表情面板')">😊</button>
|
||||
<button class="tool-btn" title="图片" onclick="showToolTip('🖼️ 选择图片')">🖼️</button>
|
||||
<div class="tool-sep"></div>
|
||||
<button class="tool-btn" title="文件" onclick="showToolTip('📎 选择文件')">📎</button>
|
||||
<button class="tool-btn" title="拍照" onclick="showToolTip('📸 打开相机')">📸</button>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<textarea class="input-field" rows="3" placeholder="请输入消息..." oninput="onInput(this)"></textarea>
|
||||
<button class="send-btn" id="sendBtn" disabled title="发送" onclick="sendMessage()">➤</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 呼叫坐席弹窗 -->
|
||||
<div class="modal-overlay" id="callModal" onclick="hideCallModal(event)">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<span class="modal-header__icon">🔔</span>
|
||||
<h3>正在呼叫 IT 坐席...</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-sending" id="modalSending">
|
||||
<span class="modal-dot-flashing"></span>
|
||||
<span>摇铃呼叫中，请稍候...</span>
|
||||
</div>
|
||||
<div class="modal-success" id="modalSuccess" style="display:none;">✅ 呼叫成功！坐席马上就来～</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="modal-btn modal-btn--cancel" onclick="hideCallModal()">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/** 主题切换 */
|
||||
function toggleTheme() {
|
||||
const html = document.documentElement;
|
||||
html.setAttribute('data-theme', html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
/** 排查步骤栏 收起/展开 */
|
||||
function toggleTsBar() {
|
||||
const content = document.getElementById('tsContent');
|
||||
const toggle = document.getElementById('tsToggle');
|
||||
if (content.style.display === 'none') {
|
||||
content.style.display = '';
|
||||
toggle.textContent = '▼ 收起';
|
||||
toggle.classList.remove('ts-top-bar__toggle--collapsed');
|
||||
} else {
|
||||
content.style.display = 'none';
|
||||
toggle.textContent = '▲ 展开';
|
||||
toggle.classList.add('ts-top-bar__toggle--collapsed');
|
||||
}
|
||||
}
|
||||
|
||||
/** 决策节点选择 */
|
||||
function selectDecision(choice) {
|
||||
const decision = document.getElementById('tsDecision');
|
||||
const instruction = document.getElementById('tsInstruction');
|
||||
const buttons = decision.querySelectorAll('.ts-option');
|
||||
buttons.forEach(btn => { btn.disabled = true; btn.style.pointerEvents = 'none'; });
|
||||
if (choice === 'yes') buttons[0].classList.add('ts-option--selected-yes');
|
||||
else buttons[1].classList.add('ts-option--selected-no');
|
||||
setTimeout(() => { decision.style.display = 'none'; instruction.style.display = 'block'; }, 400);
|
||||
}
|
||||
|
||||
/** 呼叫坐席弹窗 */
|
||||
function showCallModal() {
|
||||
document.getElementById('callModal').classList.add('modal-overlay--visible');
|
||||
setTimeout(() => {
|
||||
document.getElementById('modalSending').style.display = 'none';
|
||||
document.getElementById('modalSuccess').style.display = 'block';
|
||||
}, 2500);
|
||||
}
|
||||
function hideCallModal(e) {
|
||||
if (e && e.target !== e.currentTarget) return;
|
||||
document.getElementById('callModal').classList.remove('modal-overlay--visible');
|
||||
setTimeout(() => {
|
||||
document.getElementById('modalSending').style.display = 'flex';
|
||||
document.getElementById('modalSuccess').style.display = 'none';
|
||||
}, 300);
|
||||
}
|
||||
|
||||
/** 输入框监听 */
|
||||
function onInput(field) {
|
||||
document.getElementById('sendBtn').disabled = !field.value.trim();
|
||||
}
|
||||
|
||||
/** 发送消息 */
|
||||
function sendMessage() {
|
||||
const messages = document.getElementById('messages');
|
||||
const textarea = document.querySelector('.input-row textarea');
|
||||
if (!textarea || !textarea.value.trim()) return;
|
||||
const msgHtml = '<div class="msg msg--employee" style="animation: bubble-in 0.3s ease-out"><div class="msg__bubble">' + escapeHtml(textarea.value) + '</div><div class="msg__time">刚刚</div></div>';
|
||||
const sysMsg = messages.querySelector('.msg--system:last-child');
|
||||
if (sysMsg) { sysMsg.insertAdjacentHTML('beforebegin', msgHtml); }
|
||||
else { messages.insertAdjacentHTML('beforeend', msgHtml); }
|
||||
textarea.value = '';
|
||||
onInput(textarea);
|
||||
messages.scrollTop = messages.scrollHeight;
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function showToolTip(text) { alert(text); }
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,807 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>IT智能服务台 · H5用户端 · 企微风格原型 v2.0 — 桌面端</title>
|
||||
<style>
|
||||
/* ============================================================================
|
||||
企微设计语言变量（浅色扁平风格，非深色科技风）
|
||||
============================================================================ */
|
||||
:root {
|
||||
/* 企微核心色 */
|
||||
--wecom-blue: #3370ff;
|
||||
--wecom-blue-soft: rgba(51, 112, 255, 0.08);
|
||||
--wecom-blue-hover: rgba(51, 112, 255, 0.12);
|
||||
--wecom-green: #07c160;
|
||||
--wecom-orange: #ff8800;
|
||||
--wecom-red: #e34d59;
|
||||
|
||||
/* 背景 */
|
||||
--bg-page: #f0f1f5;
|
||||
--bg-card: #ffffff;
|
||||
--bg-input: #f7f8fa;
|
||||
--bg-sidebar: #e7e9ed;
|
||||
--bg-sidebar-active: #d4d6db;
|
||||
--bg-nav: #2c2c2c;
|
||||
|
||||
/* 文字 */
|
||||
--text-title: #1a1a1a;
|
||||
--text-body: #4a4a4a;
|
||||
--text-hint: #9a9a9a;
|
||||
--text-white: #ffffff;
|
||||
|
||||
/* 边框与阴影 */
|
||||
--border: #e5e6eb;
|
||||
--shadow-card: 0 1px 2px rgba(0,0,0,0.04);
|
||||
--shadow-float: 0 4px 12px rgba(0,0,0,0.08);
|
||||
|
||||
/* 圆角 */
|
||||
--r-sm: 6px;
|
||||
--r-md: 8px;
|
||||
--r-lg: 12px;
|
||||
--r-xl: 16px;
|
||||
|
||||
/* 气泡 */
|
||||
--bubble-user-bg: #3370ff;
|
||||
--bubble-user-text: #ffffff;
|
||||
--bubble-agent-bg: #ffffff;
|
||||
--bubble-agent-text: #1a1a1a;
|
||||
--bubble-ai-bg: #f0f7ff;
|
||||
--bubble-ai-text: #1a1a1a;
|
||||
--bubble-ai-tag: #3370ff;
|
||||
|
||||
/* 排查步骤 */
|
||||
--ts-done: #07c160;
|
||||
--ts-active: #3370ff;
|
||||
--ts-pending: #c9cdd4;
|
||||
|
||||
/* 推送卡片 */
|
||||
--card-push-bg: #ffffff;
|
||||
--card-push-border: #e5e6eb;
|
||||
--card-push-icon-bg: #f0f7ff;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
background: var(--bg-page);
|
||||
color: var(--text-body);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
整体三栏布局
|
||||
============================================================================ */
|
||||
.app-shell {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ---- 企微左侧导航栏（静态示意，非开发内容） ---- */
|
||||
.wecom-sidebar {
|
||||
width: 54px;
|
||||
background: var(--bg-nav);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
}
|
||||
.sidebar-avatar {
|
||||
width: 34px; height: 34px;
|
||||
border-radius: 6px;
|
||||
background: #576a8e;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.sidebar-icon {
|
||||
width: 54px; height: 48px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.sidebar-icon:hover { background: rgba(255,255,255,0.06); }
|
||||
.sidebar-icon.active { background: rgba(255,255,255,0.1); }
|
||||
.sidebar-icon svg { width: 22px; height: 22px; fill: #9ca3af; }
|
||||
.sidebar-icon.active svg { fill: #3370ff; }
|
||||
.sidebar-badge {
|
||||
position: absolute; top: 6px; right: 8px;
|
||||
min-width: 16px; height: 16px;
|
||||
background: var(--wecom-red);
|
||||
color: #fff; font-size: 10px;
|
||||
border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.sidebar-spacer { flex: 1; }
|
||||
.sidebar-bottom { margin-top: auto; }
|
||||
|
||||
/* ---- 中间主内容区 ---- */
|
||||
.main-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
background: var(--bg-page);
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* 顶部标题栏 */
|
||||
.top-bar {
|
||||
height: 52px;
|
||||
background: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.top-bar-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-title);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.status-dot {
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
.status-dot.online { background: var(--wecom-green); }
|
||||
.status-dot.offline { background: #9a9a9a; }
|
||||
.top-bar-right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.btn-apply {
|
||||
height: 28px;
|
||||
padding: 0 14px;
|
||||
border-radius: var(--r-sm);
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.btn-apply.active {
|
||||
background: var(--wecom-orange);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-apply.active:hover { background: #e67a00; }
|
||||
.btn-apply.disabled {
|
||||
background: var(--bg-input);
|
||||
color: var(--text-hint);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.bell-btn {
|
||||
width: 32px; height: 32px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.bell-btn:hover { background: var(--bg-input); }
|
||||
.counter-bell-icon { width: 18px; height: 18px; }
|
||||
.counter-bell-icon.disabled { filter: grayscale(100%); opacity: 0.5; }
|
||||
|
||||
/* 排查步骤栏 */
|
||||
.troubleshoot-bar {
|
||||
background: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 10px 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ts-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-hint);
|
||||
}
|
||||
.ts-steps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.ts-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ts-dot {
|
||||
width: 18px; height: 18px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ts-dot.done { background: var(--ts-done); color: #fff; }
|
||||
.ts-dot.active { background: var(--ts-active); color: #fff; }
|
||||
.ts-dot.pending { background: var(--ts-pending); color: #fff; }
|
||||
.ts-label { color: var(--text-body); }
|
||||
.ts-label.done { color: var(--ts-done); }
|
||||
.ts-label.active { color: var(--ts-active); font-weight: 500; }
|
||||
.ts-label.pending { color: var(--text-hint); }
|
||||
.ts-connector {
|
||||
width: 20px; height: 2px;
|
||||
background: var(--ts-pending);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ts-connector.done { background: var(--ts-done); }
|
||||
|
||||
/* 消息区 */
|
||||
.chat-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.msg-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
max-width: 70%;
|
||||
}
|
||||
.msg-row.user { margin-left: auto; flex-direction: row-reverse; }
|
||||
.msg-row.agent { margin-right: auto; }
|
||||
.msg-row.ai { margin-right: auto; }
|
||||
.msg-avatar {
|
||||
width: 32px; height: 32px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.msg-avatar.agent-av { background: #e8f3ff; color: #3370ff; }
|
||||
.msg-avatar.ai-av { background: #f0f7ff; color: #3370ff; }
|
||||
.msg-body { display: flex; flex-direction: column; gap: 2px; }
|
||||
.msg-name { font-size: 11px; color: var(--text-hint); }
|
||||
.msg-row.user .msg-name { text-align: right; }
|
||||
.msg-bubble {
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--r-lg);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
}
|
||||
.msg-bubble.user-b {
|
||||
background: var(--bubble-user-bg);
|
||||
color: var(--bubble-user-text);
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.msg-bubble.agent-b {
|
||||
background: var(--bubble-agent-bg);
|
||||
color: var(--bubble-agent-text);
|
||||
border: 1px solid var(--border);
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
.msg-bubble.ai-b {
|
||||
background: var(--bubble-ai-bg);
|
||||
color: var(--bubble-ai-text);
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
.ai-tag {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
background: rgba(51,112,255,0.1);
|
||||
color: var(--bubble-ai-tag);
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.msg-time {
|
||||
font-size: 11px;
|
||||
color: var(--text-hint);
|
||||
text-align: center;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
/* 输入区 */
|
||||
.input-area {
|
||||
background: var(--bg-card);
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 10px 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.input-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.input-box {
|
||||
flex: 1;
|
||||
min-height: 36px;
|
||||
max-height: 96px;
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--r-md);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-input);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-family: inherit;
|
||||
color: var(--text-body);
|
||||
}
|
||||
.input-box:focus { border-color: var(--wecom-blue); }
|
||||
.input-box::placeholder { color: var(--text-hint); }
|
||||
.send-btn {
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
border-radius: var(--r-md);
|
||||
border: none;
|
||||
background: var(--wecom-blue);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.send-btn:hover { background: #2860e0; }
|
||||
.send-btn:disabled { background: #c0c4cc; cursor: not-allowed; }
|
||||
.input-tools {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.tool-btn {
|
||||
width: 28px; height: 28px;
|
||||
border-radius: var(--r-sm);
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: var(--text-hint);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.tool-btn:hover { background: var(--bg-input); color: var(--text-body); }
|
||||
|
||||
/* ---- 右侧AI推送栏 ---- */
|
||||
.right-panel {
|
||||
width: 300px;
|
||||
background: var(--bg-card);
|
||||
border-left: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.rp-header {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-title);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.rp-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 推送卡片 */
|
||||
.push-card {
|
||||
background: var(--card-push-bg);
|
||||
border: 1px solid var(--card-push-border);
|
||||
border-radius: var(--r-lg);
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.push-card:hover {
|
||||
border-color: var(--wecom-blue);
|
||||
box-shadow: var(--shadow-float);
|
||||
}
|
||||
.push-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.push-card-icon {
|
||||
width: 32px; height: 32px;
|
||||
border-radius: var(--r-md);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.push-card-icon.wifi { background: #e8f5e9; }
|
||||
.push-card-icon.flow { background: #fff3e0; }
|
||||
.push-card-icon.download { background: #e3f2fd; }
|
||||
.push-card-icon.qa { background: #fce4ec; }
|
||||
.push-card-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-title);
|
||||
line-height: 1.3;
|
||||
}
|
||||
.push-card-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-hint);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.push-card-tag {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.tag-ai { background: rgba(51,112,255,0.08); color: var(--wecom-blue); }
|
||||
.tag-auto { background: rgba(7,193,96,0.08); color: var(--wecom-green); }
|
||||
|
||||
/* 常用资源区 */
|
||||
.resources-section {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.resources-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-hint);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.resources-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
.res-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 4px;
|
||||
border-radius: var(--r-md);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.res-item:hover { background: var(--bg-input); }
|
||||
.res-icon {
|
||||
width: 36px; height: 36px;
|
||||
border-radius: var(--r-md);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.res-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-body);
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* 参与者横幅 */
|
||||
.participant-banner {
|
||||
background: var(--bg-input);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 6px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--text-hint);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.participant-banner .avatars {
|
||||
display: flex;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.participant-banner .mini-av {
|
||||
width: 20px; height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--bg-card);
|
||||
margin-left: -6px;
|
||||
background: #d4d6db;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 9px;
|
||||
color: #fff;
|
||||
}
|
||||
.participant-banner .mini-av:first-child { margin-left: 0; }
|
||||
|
||||
/* ---- 系统消息 ---- */
|
||||
.sys-msg {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--text-hint);
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
/* 版本标注 */
|
||||
.version-badge {
|
||||
position: fixed;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
background: rgba(0,0,0,0.6);
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="app-shell">
|
||||
|
||||
<!-- ================================================================== -->
|
||||
<!-- 企微左侧导航栏（静态示意，非开发内容） -->
|
||||
<!-- 实际运行时由企微客户端提供，这里仅用于展示完整效果 -->
|
||||
<!-- ================================================================== -->
|
||||
<div class="wecom-sidebar">
|
||||
<div class="sidebar-avatar"></div>
|
||||
|
||||
<div class="sidebar-icon active">
|
||||
<svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.2L4 17.2V4h16v12z"/></svg>
|
||||
<span class="sidebar-badge">3</span>
|
||||
</div>
|
||||
<div class="sidebar-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2z"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-spacer"></div>
|
||||
|
||||
<div class="sidebar-icon sidebar-bottom">
|
||||
<svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94L14.4 2.81a.47.47 0 0 0-.47-.41h-3.85a.47.47 0 0 0-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87a.48.48 0 0 0 .12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.25.41.47.41h3.85c.22 0 .42-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================================================================== -->
|
||||
<!-- 中间主内容区（H5开发范围） -->
|
||||
<!-- ================================================================== -->
|
||||
<div class="main-area">
|
||||
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar-title">
|
||||
<span class="status-dot online"></span>
|
||||
IT智能服务台 · 坐席在线
|
||||
</div>
|
||||
<div class="top-bar-right">
|
||||
<button class="btn-apply active" title="问题确定后可点击呼叫人工坐席">人工</button>
|
||||
<button class="bell-btn" title="呼叫人工坐席">
|
||||
<!-- 传菜铃 SVG：半圆铃体 + 扁平底座 + 顶部圆球（企微简洁线条风格） -->
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 铃体：半圆弧线，用 path 绘制半圆 + 两侧竖线 -->
|
||||
<path d="M4 7 C4 3.5, 14 3.5, 14 7 L14 10 L4 10 Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<!-- 底座：扁平横条 -->
|
||||
<line x1="3" y1="11" x2="15" y2="11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
<!-- 顶部圆球手柄 -->
|
||||
<circle cx="9" cy="4" r="1.2" fill="currentColor"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 排查步骤栏 -->
|
||||
<div class="troubleshoot-bar">
|
||||
<div class="ts-header">
|
||||
<span>📋 排查进度</span>
|
||||
</div>
|
||||
<div class="ts-steps">
|
||||
<div class="ts-step">
|
||||
<div class="ts-dot done">✓</div>
|
||||
<span class="ts-label done">确认问题</span>
|
||||
</div>
|
||||
<div class="ts-connector done"></div>
|
||||
<div class="ts-step">
|
||||
<div class="ts-dot active">2</div>
|
||||
<span class="ts-label active">排查VPN</span>
|
||||
</div>
|
||||
<div class="ts-connector"></div>
|
||||
<div class="ts-step">
|
||||
<div class="ts-dot pending">3</div>
|
||||
<span class="ts-label pending">网络检测</span>
|
||||
</div>
|
||||
<div class="ts-connector"></div>
|
||||
<div class="ts-step">
|
||||
<div class="ts-dot pending">4</div>
|
||||
<span class="ts-label pending">解决确认</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 参与者横幅 -->
|
||||
<div class="participant-banner">
|
||||
<span>👥 3人参与此会话</span>
|
||||
<div class="avatars">
|
||||
<div class="mini-av" style="background:#3370ff;">宋</div>
|
||||
<div class="mini-av" style="background:#07c160;">张</div>
|
||||
<div class="mini-av" style="background:#ff8800;">李</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息区 -->
|
||||
<div class="chat-area">
|
||||
<div class="msg-time">今天 14:30</div>
|
||||
|
||||
<div class="msg-row user">
|
||||
<div class="msg-body">
|
||||
<div class="msg-name">我</div>
|
||||
<div class="msg-bubble user-b">VPN连不上了，一直提示认证失败</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg-row ai">
|
||||
<div class="msg-avatar ai-av">AI</div>
|
||||
<div class="msg-body">
|
||||
<span class="ai-tag">AI助手</span>
|
||||
<div class="msg-name">智能助手</div>
|
||||
<div class="msg-bubble ai-b">
|
||||
我来帮您排查VPN连接问题。请问您使用的是公司网络还是远程接入？
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg-row user">
|
||||
<div class="msg-body">
|
||||
<div class="msg-name">我</div>
|
||||
<div class="msg-bubble user-b">远程接入，在家办公</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg-row agent">
|
||||
<div class="msg-avatar agent-av">陈</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-name">坐席 陈工</div>
|
||||
<div class="msg-bubble agent-b">
|
||||
您好，我是IT支持坐席陈工。VPN认证失败通常是aTrust客户端证书过期导致的，我先帮您查一下状态。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sys-msg">—— 坐席 陈工 已加入会话 ——</div>
|
||||
|
||||
<div class="msg-row user">
|
||||
<div class="msg-body">
|
||||
<div class="msg-name">我</div>
|
||||
<div class="msg-bubble user-b">好的，麻烦了</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg-row agent">
|
||||
<div class="msg-avatar agent-av">陈</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-name">坐席 陈工</div>
|
||||
<div class="msg-bubble agent-b">
|
||||
查到了，您的aTrust证书确实已过期。我这边帮您重置，请稍等。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区 -->
|
||||
<div class="input-area">
|
||||
<div class="input-row">
|
||||
<textarea class="input-box" rows="3" placeholder="输入消息..."></textarea>
|
||||
<button class="send-btn">发送</button>
|
||||
</div>
|
||||
<div class="input-tools">
|
||||
<button class="tool-btn" title="图片">🖼</button>
|
||||
<button class="tool-btn" title="文件">📎</button>
|
||||
<button class="tool-btn" title="截图">📸</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================================================================== -->
|
||||
<!-- 右侧AI推送栏（桌面端专属，移动端不显示） -->
|
||||
<!-- ================================================================== -->
|
||||
<div class="right-panel">
|
||||
<div class="rp-header">
|
||||
<span>💡</span> AI智能推荐
|
||||
</div>
|
||||
<div class="rp-body">
|
||||
|
||||
<!-- 动态推送卡片（基于会话上下文触发） -->
|
||||
<div class="push-card">
|
||||
<div class="push-card-header">
|
||||
<div class="push-card-icon wifi">📶</div>
|
||||
<div class="push-card-title">VPN连接指南</div>
|
||||
</div>
|
||||
<div class="push-card-desc">aTrust客户端配置步骤与常见认证问题解决方案</div>
|
||||
<span class="push-card-tag tag-ai">AI推荐</span>
|
||||
</div>
|
||||
|
||||
<div class="push-card">
|
||||
<div class="push-card-header">
|
||||
<div class="push-card-icon download">⬇️</div>
|
||||
<div class="push-card-title">aTrust客户端下载</div>
|
||||
</div>
|
||||
<div class="push-card-desc">最新版aTrust VPN客户端，支持Windows/Mac</div>
|
||||
<span class="push-card-tag tag-auto">自动匹配</span>
|
||||
</div>
|
||||
|
||||
<div class="push-card">
|
||||
<div class="push-card-header">
|
||||
<div class="push-card-icon flow">📋</div>
|
||||
<div class="push-card-title">远程办公申请流程</div>
|
||||
</div>
|
||||
<div class="push-card-desc">远程办公权限申请与VPN开通流程说明</div>
|
||||
<span class="push-card-tag tag-ai">AI推荐</span>
|
||||
</div>
|
||||
|
||||
<div class="push-card">
|
||||
<div class="push-card-header">
|
||||
<div class="push-card-icon qa">❓</div>
|
||||
<div class="push-card-title">VPN认证失败怎么办？</div>
|
||||
</div>
|
||||
<div class="push-card-desc">证书过期/密码错误/网络超速3种常见原因及解决方法</div>
|
||||
<span class="push-card-tag tag-ai">相关答疑</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 常用资源兜底区 -->
|
||||
<div class="resources-section">
|
||||
<div class="resources-title">常用资源</div>
|
||||
<div class="resources-grid">
|
||||
<div class="res-item">
|
||||
<div class="res-icon" style="background:#e3f2fd;">🔑</div>
|
||||
<span class="res-label">密码重置</span>
|
||||
</div>
|
||||
<div class="res-item">
|
||||
<div class="res-icon" style="background:#e8f5e9;">⬇️</div>
|
||||
<span class="res-label">软件下载</span>
|
||||
</div>
|
||||
<div class="res-item">
|
||||
<div class="res-icon" style="background:#fff3e0;">🌐</div>
|
||||
<span class="res-label">VPN指南</span>
|
||||
</div>
|
||||
<div class="res-item">
|
||||
<div class="res-icon" style="background:#fce4ec;">📄</div>
|
||||
<span class="res-label">IT制度</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="version-badge">v2.0 · 企微风格 · 桌面端 · 视觉规范基准</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,744 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>IT智能服务台 · H5用户端 · 企微风格原型 v2.0 — 移动端</title>
|
||||
<style>
|
||||
/* ============================================================================
|
||||
企微设计语言变量（与桌面端一致）
|
||||
============================================================================ */
|
||||
:root {
|
||||
--wecom-blue: #3370ff;
|
||||
--wecom-blue-soft: rgba(51, 112, 255, 0.08);
|
||||
--wecom-green: #07c160;
|
||||
--wecom-orange: #ff8800;
|
||||
--wecom-red: #e34d59;
|
||||
--bg-page: #f0f1f5;
|
||||
--bg-card: #ffffff;
|
||||
--bg-input: #f7f8fa;
|
||||
--text-title: #1a1a1a;
|
||||
--text-body: #4a4a4a;
|
||||
--text-hint: #9a9a9a;
|
||||
--border: #e5e6eb;
|
||||
--shadow-card: 0 1px 2px rgba(0,0,0,0.04);
|
||||
--r-sm: 6px;
|
||||
--r-md: 8px;
|
||||
--r-lg: 12px;
|
||||
--r-xl: 16px;
|
||||
--bubble-user-bg: #3370ff;
|
||||
--bubble-user-text: #ffffff;
|
||||
--bubble-agent-bg: #ffffff;
|
||||
--bubble-agent-text: #1a1a1a;
|
||||
--bubble-ai-bg: #f0f7ff;
|
||||
--bubble-ai-text: #1a1a1a;
|
||||
--ts-done: #07c160;
|
||||
--ts-active: #3370ff;
|
||||
--ts-pending: #c9cdd4;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
background: var(--bg-page);
|
||||
color: var(--text-body);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
max-width: 430px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 企微手机端状态栏模拟 */
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
background: var(--bg-card);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 16px;
|
||||
font-size: 12px;
|
||||
color: var(--text-hint);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.status-bar-left { position: absolute; left: 16px; }
|
||||
.status-bar-center { font-weight: 600; color: var(--text-title); }
|
||||
.status-bar-right { position: absolute; right: 16px; }
|
||||
|
||||
/* 整体容器 */
|
||||
.mobile-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 44px);
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.nav-bar {
|
||||
height: 44px;
|
||||
background: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.nav-back {
|
||||
width: 32px; height: 32px;
|
||||
border: none; background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: var(--text-body);
|
||||
}
|
||||
.nav-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-title);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.status-dot {
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.status-dot.online { background: var(--wecom-green); }
|
||||
.status-dot.offline { background: #9a9a9a; }
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
.nav-btn {
|
||||
width: 32px; height: 32px;
|
||||
border: none; background: transparent;
|
||||
cursor: pointer; font-size: 16px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.nav-btn:hover { background: var(--bg-input); }
|
||||
.counter-bell-icon { width: 16px; height: 16px; }
|
||||
.counter-bell-icon.disabled { filter: grayscale(100%); opacity: 0.5; }
|
||||
|
||||
/* 排查步骤栏（收起式） */
|
||||
.troubleshoot-bar {
|
||||
background: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ts-toggle {
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: var(--text-hint);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.ts-toggle:hover { background: var(--bg-input); }
|
||||
.ts-toggle-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.ts-toggle-arrow {
|
||||
transition: transform 0.2s;
|
||||
font-size: 10px;
|
||||
}
|
||||
.ts-toggle-arrow.open { transform: rotate(180deg); }
|
||||
.ts-progress-bar {
|
||||
height: 3px;
|
||||
background: var(--bg-input);
|
||||
overflow: hidden;
|
||||
}
|
||||
.ts-progress-fill {
|
||||
height: 100%;
|
||||
background: var(--wecom-blue);
|
||||
width: 50%;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
.ts-steps-detail {
|
||||
padding: 8px 12px 10px;
|
||||
display: none;
|
||||
}
|
||||
.ts-steps-detail.show { display: block; }
|
||||
.ts-step-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.ts-dot {
|
||||
width: 16px; height: 16px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 9px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.ts-dot.done { background: var(--ts-done); color: #fff; }
|
||||
.ts-dot.active { background: var(--ts-active); color: #fff; }
|
||||
.ts-dot.pending { background: var(--ts-pending); color: #fff; }
|
||||
.ts-text { color: var(--text-body); }
|
||||
.ts-text.done { color: var(--ts-done); }
|
||||
.ts-text.active { color: var(--ts-active); font-weight: 500; }
|
||||
.ts-text.pending { color: var(--text-hint); }
|
||||
|
||||
/* 参与者横幅 */
|
||||
.participant-banner {
|
||||
background: var(--bg-input);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 5px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--text-hint);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.banner-avatars {
|
||||
display: flex;
|
||||
margin: 0 2px;
|
||||
}
|
||||
.mini-av {
|
||||
width: 18px; height: 18px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--bg-card);
|
||||
margin-left: -5px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 8px; color: #fff;
|
||||
}
|
||||
.mini-av:first-child { margin-left: 0; }
|
||||
.banner-more { color: var(--wecom-blue); cursor: pointer; }
|
||||
|
||||
/* 消息区 */
|
||||
.chat-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
background: var(--bg-page);
|
||||
}
|
||||
.msg-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
max-width: 82%;
|
||||
}
|
||||
.msg-row.user { margin-left: auto; flex-direction: row-reverse; }
|
||||
.msg-row.agent { margin-right: auto; }
|
||||
.msg-row.ai { margin-right: auto; }
|
||||
.msg-avatar {
|
||||
width: 28px; height: 28px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 10px; font-weight: 600;
|
||||
}
|
||||
.msg-avatar.agent-av { background: #e8f3ff; color: #3370ff; }
|
||||
.msg-avatar.ai-av { background: #f0f7ff; color: #3370ff; }
|
||||
.msg-body { display: flex; flex-direction: column; gap: 2px; }
|
||||
.msg-name { font-size: 10px; color: var(--text-hint); }
|
||||
.msg-row.user .msg-name { text-align: right; }
|
||||
.msg-bubble {
|
||||
padding: 8px 10px;
|
||||
border-radius: var(--r-lg);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
}
|
||||
.msg-bubble.user-b {
|
||||
background: var(--bubble-user-bg);
|
||||
color: var(--bubble-user-text);
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.msg-bubble.agent-b {
|
||||
background: var(--bubble-agent-bg);
|
||||
color: var(--bubble-agent-text);
|
||||
border: 1px solid var(--border);
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
.msg-bubble.ai-b {
|
||||
background: var(--bubble-ai-bg);
|
||||
color: var(--bubble-ai-text);
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
.ai-tag {
|
||||
display: inline-block;
|
||||
font-size: 9px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
background: rgba(51,112,255,0.1);
|
||||
color: #3370ff;
|
||||
margin-bottom: 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.msg-time {
|
||||
font-size: 11px;
|
||||
color: var(--text-hint);
|
||||
text-align: center;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.sys-msg {
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: var(--text-hint);
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
/* 输入区 */
|
||||
.input-area {
|
||||
background: var(--bg-card);
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 8px 10px;
|
||||
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.input-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.input-box {
|
||||
flex: 1;
|
||||
min-height: 34px;
|
||||
max-height: 80px;
|
||||
padding: 7px 10px;
|
||||
border-radius: var(--r-md);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-input);
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-family: inherit;
|
||||
color: var(--text-body);
|
||||
}
|
||||
.input-box:focus { border-color: var(--wecom-blue); }
|
||||
.input-box::placeholder { color: var(--text-hint); }
|
||||
.send-btn {
|
||||
height: 34px;
|
||||
padding: 0 14px;
|
||||
border-radius: var(--r-md);
|
||||
border: none;
|
||||
background: var(--wecom-blue);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.send-btn:disabled { background: #c0c4cc; }
|
||||
.input-tools {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.tool-btn {
|
||||
width: 28px; height: 28px;
|
||||
border-radius: var(--r-sm);
|
||||
border: none; background: transparent;
|
||||
cursor: pointer; font-size: 15px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: var(--text-hint);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.tool-btn:hover { background: var(--bg-input); }
|
||||
|
||||
/* 移动端底部AI推荐浮窗按钮 */
|
||||
.float-recommend {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
right: 12px;
|
||||
width: 44px; height: 44px;
|
||||
border-radius: 50%;
|
||||
background: var(--wecom-blue);
|
||||
color: #fff;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(51,112,255,0.3);
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.float-recommend:hover { transform: scale(1.1); }
|
||||
.float-recommend .rec-badge {
|
||||
position: absolute;
|
||||
top: -2px; right: -2px;
|
||||
width: 18px; height: 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--wecom-red);
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 底部抽屉 - AI推荐面板 */
|
||||
.drawer-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
z-index: 200;
|
||||
display: none;
|
||||
}
|
||||
.drawer-overlay.show { display: block; }
|
||||
.drawer-panel {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 430px;
|
||||
margin: 0 auto;
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--r-xl) var(--r-xl) 0 0;
|
||||
z-index: 201;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.drawer-panel.show { transform: translateY(0); }
|
||||
.drawer-handle {
|
||||
width: 36px; height: 4px;
|
||||
background: #d4d6db;
|
||||
border-radius: 2px;
|
||||
margin: 8px auto;
|
||||
}
|
||||
.drawer-header {
|
||||
padding: 8px 16px 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-title);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.drawer-body { padding: 12px 16px; }
|
||||
|
||||
/* 推送卡片（移动端） */
|
||||
.push-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg);
|
||||
padding: 10px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.push-card:active { border-color: var(--wecom-blue); }
|
||||
.push-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.push-card-icon {
|
||||
width: 28px; height: 28px;
|
||||
border-radius: var(--r-md);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px; flex-shrink: 0;
|
||||
}
|
||||
.push-card-icon.wifi { background: #e8f5e9; }
|
||||
.push-card-icon.download { background: #e3f2fd; }
|
||||
.push-card-icon.flow { background: #fff3e0; }
|
||||
.push-card-icon.qa { background: #fce4ec; }
|
||||
.push-card-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-title);
|
||||
}
|
||||
.push-card-desc {
|
||||
font-size: 11px;
|
||||
color: var(--text-hint);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.push-card-tag {
|
||||
display: inline-block;
|
||||
font-size: 9px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.tag-ai { background: rgba(51,112,255,0.08); color: var(--wecom-blue); }
|
||||
.tag-auto { background: rgba(7,193,96,0.08); color: var(--wecom-green); }
|
||||
|
||||
/* 常用资源网格 */
|
||||
.resources-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.res-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.res-icon {
|
||||
width: 36px; height: 36px;
|
||||
border-radius: var(--r-md);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
.res-label {
|
||||
font-size: 10px;
|
||||
color: var(--text-body);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.version-badge {
|
||||
position: fixed;
|
||||
bottom: 4px;
|
||||
left: 4px;
|
||||
background: rgba(0,0,0,0.5);
|
||||
color: #fff;
|
||||
font-size: 9px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 企微手机端状态栏模拟 -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar-left">9:41</div>
|
||||
<div class="status-bar-center">IT智能服务台</div>
|
||||
<div class="status-bar-right">📶 🔋</div>
|
||||
</div>
|
||||
|
||||
<div class="mobile-shell">
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<button class="nav-back">←</button>
|
||||
<div class="nav-title">
|
||||
<span class="status-dot online"></span>
|
||||
IT服务台 · 在线
|
||||
</div>
|
||||
<div class="nav-actions">
|
||||
<button class="nav-btn" title="呼叫人工坐席">
|
||||
<!-- 传菜铃 SVG：半圆铃体 + 扁平底座 + 顶部圆球（企微简洁线条风格） -->
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 铃体：半圆弧线 -->
|
||||
<path d="M4 7 C4 3.5, 14 3.5, 14 7 L14 10 L4 10 Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<!-- 底座：扁平横条 -->
|
||||
<line x1="3" y1="11" x2="15" y2="11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
<!-- 顶部圆球手柄 -->
|
||||
<circle cx="9" cy="4" r="1.2" fill="currentColor"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 排查步骤栏（收起式） -->
|
||||
<div class="troubleshoot-bar">
|
||||
<div class="ts-toggle" onclick="toggleTS()">
|
||||
<div class="ts-toggle-left">
|
||||
<span>📋</span>
|
||||
<span>排查进度: VPN排查中</span>
|
||||
</div>
|
||||
<span class="ts-toggle-arrow" id="tsArrow">▼</span>
|
||||
</div>
|
||||
<div class="ts-progress-bar">
|
||||
<div class="ts-progress-fill"></div>
|
||||
</div>
|
||||
<div class="ts-steps-detail" id="tsDetail">
|
||||
<div class="ts-step-row">
|
||||
<div class="ts-dot done">✓</div>
|
||||
<span class="ts-text done">确认问题</span>
|
||||
</div>
|
||||
<div class="ts-step-row">
|
||||
<div class="ts-dot active">2</div>
|
||||
<span class="ts-text active">排查VPN</span>
|
||||
</div>
|
||||
<div class="ts-step-row">
|
||||
<div class="ts-dot pending">3</div>
|
||||
<span class="ts-text pending">网络检测</span>
|
||||
</div>
|
||||
<div class="ts-step-row">
|
||||
<div class="ts-dot pending">4</div>
|
||||
<span class="ts-text pending">解决确认</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 参与者横幅 -->
|
||||
<div class="participant-banner">
|
||||
<span>👥 3人参与</span>
|
||||
<div class="banner-avatars">
|
||||
<div class="mini-av" style="background:#3370ff;">宋</div>
|
||||
<div class="mini-av" style="background:#07c160;">张</div>
|
||||
<div class="mini-av" style="background:#ff8800;">李</div>
|
||||
</div>
|
||||
<span class="banner-more">详情</span>
|
||||
</div>
|
||||
|
||||
<!-- 消息区 -->
|
||||
<div class="chat-area">
|
||||
<div class="msg-time">今天 14:30</div>
|
||||
|
||||
<div class="msg-row user">
|
||||
<div class="msg-body">
|
||||
<div class="msg-name">我</div>
|
||||
<div class="msg-bubble user-b">VPN连不上了，一直提示认证失败</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg-row ai">
|
||||
<div class="msg-avatar ai-av">AI</div>
|
||||
<div class="msg-body">
|
||||
<span class="ai-tag">AI助手</span>
|
||||
<div class="msg-name">智能助手</div>
|
||||
<div class="msg-bubble ai-b">我来帮您排查VPN连接问题。请问您使用的是公司网络还是远程接入？</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg-row user">
|
||||
<div class="msg-body">
|
||||
<div class="msg-name">我</div>
|
||||
<div class="msg-bubble user-b">远程接入，在家办公</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg-row agent">
|
||||
<div class="msg-avatar agent-av">陈</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-name">坐席 陈工</div>
|
||||
<div class="msg-bubble agent-b">您好，我是IT支持坐席陈工。VPN认证失败通常是aTrust证书过期导致的，我先帮您查一下状态。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sys-msg">—— 坐席 陈工 已加入会话 ——</div>
|
||||
|
||||
<div class="msg-row user">
|
||||
<div class="msg-body">
|
||||
<div class="msg-name">我</div>
|
||||
<div class="msg-bubble user-b">好的，麻烦了</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg-row agent">
|
||||
<div class="msg-avatar agent-av">陈</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-name">坐席 陈工</div>
|
||||
<div class="msg-bubble agent-b">查到了，您的aTrust证书确实已过期。我这边帮您重置，请稍等。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区 -->
|
||||
<div class="input-area">
|
||||
<div class="input-row">
|
||||
<textarea class="input-box" rows="3" placeholder="输入消息..."></textarea>
|
||||
<button class="send-btn">发送</button>
|
||||
</div>
|
||||
<div class="input-tools">
|
||||
<button class="tool-btn">🖼</button>
|
||||
<button class="tool-btn">📎</button>
|
||||
<button class="tool-btn">📸</button>
|
||||
<button class="tool-btn" style="margin-left:auto; color:var(--wecom-orange); font-size:12px; font-weight:500; width:auto; padding:0 8px;">人工</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 移动端AI推荐浮窗按钮 -->
|
||||
<button class="float-recommend" onclick="toggleDrawer()">
|
||||
💡
|
||||
<span class="rec-badge">4</span>
|
||||
</button>
|
||||
|
||||
<!-- 底部抽屉 -->
|
||||
<div class="drawer-overlay" id="drawerOverlay" onclick="toggleDrawer()"></div>
|
||||
<div class="drawer-panel" id="drawerPanel">
|
||||
<div class="drawer-handle"></div>
|
||||
<div class="drawer-header">💡 AI智能推荐</div>
|
||||
<div class="drawer-body">
|
||||
<div class="push-card">
|
||||
<div class="push-card-header">
|
||||
<div class="push-card-icon wifi">📶</div>
|
||||
<div class="push-card-title">VPN连接指南</div>
|
||||
</div>
|
||||
<div class="push-card-desc">aTrust客户端配置步骤与常见认证问题</div>
|
||||
<span class="push-card-tag tag-ai">AI推荐</span>
|
||||
</div>
|
||||
<div class="push-card">
|
||||
<div class="push-card-header">
|
||||
<div class="push-card-icon download">⬇️</div>
|
||||
<div class="push-card-title">aTrust客户端下载</div>
|
||||
</div>
|
||||
<div class="push-card-desc">最新版aTrust VPN客户端</div>
|
||||
<span class="push-card-tag tag-auto">自动匹配</span>
|
||||
</div>
|
||||
<div class="push-card">
|
||||
<div class="push-card-header">
|
||||
<div class="push-card-icon flow">📋</div>
|
||||
<div class="push-card-title">远程办公申请流程</div>
|
||||
</div>
|
||||
<div class="push-card-desc">远程办公权限申请与VPN开通流程</div>
|
||||
<span class="push-card-tag tag-ai">AI推荐</span>
|
||||
</div>
|
||||
<div class="push-card">
|
||||
<div class="push-card-header">
|
||||
<div class="push-card-icon qa">❓</div>
|
||||
<div class="push-card-title">VPN认证失败怎么办？</div>
|
||||
</div>
|
||||
<div class="push-card-desc">证书过期/密码错误/网络超时3种常见原因</div>
|
||||
<span class="push-card-tag tag-ai">相关答疑</span>
|
||||
</div>
|
||||
|
||||
<div class="resources-grid">
|
||||
<div class="res-item">
|
||||
<div class="res-icon" style="background:#e3f2fd;">🔑</div>
|
||||
<span class="res-label">密码重置</span>
|
||||
</div>
|
||||
<div class="res-item">
|
||||
<div class="res-icon" style="background:#e8f5e9;">⬇️</div>
|
||||
<span class="res-label">软件下载</span>
|
||||
</div>
|
||||
<div class="res-item">
|
||||
<div class="res-icon" style="background:#fff3e0;">🌐</div>
|
||||
<span class="res-label">VPN指南</span>
|
||||
</div>
|
||||
<div class="res-item">
|
||||
<div class="res-icon" style="background:#fce4ec;">📄</div>
|
||||
<span class="res-label">IT制度</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="version-badge">v2.0 · 企微风格 · 移动端 · 视觉规范基准</div>
|
||||
|
||||
<script>
|
||||
function toggleTS() {
|
||||
const detail = document.getElementById('tsDetail');
|
||||
const arrow = document.getElementById('tsArrow');
|
||||
detail.classList.toggle('show');
|
||||
arrow.classList.toggle('open');
|
||||
}
|
||||
|
||||
function toggleDrawer() {
|
||||
const overlay = document.getElementById('drawerOverlay');
|
||||
const panel = document.getElementById('drawerPanel');
|
||||
overlay.classList.toggle('show');
|
||||
panel.classList.toggle('show');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,746 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>方案三：邀请功能原型 — 交互流程</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--bg2: #1e293b;
|
||||
--bg3: #334155;
|
||||
--border: #475569;
|
||||
--text: #f1f5f9;
|
||||
--dim: #94a3b8;
|
||||
--accent: #3b82f6;
|
||||
--accent-l: #60a5fa;
|
||||
--green: #22c55e;
|
||||
--amber: #f59e0b;
|
||||
--red: #ef4444;
|
||||
--purple: #a855f7;
|
||||
--cyan: #06b6d4;
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
|
||||
|
||||
.app{max-width:1200px;margin:0 auto;padding:20px}
|
||||
|
||||
h1{font-size:1.8em;font-weight:700;background:linear-gradient(135deg,var(--accent-l),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center;margin-bottom:8px}
|
||||
.subtitle{text-align:center;color:var(--dim);margin-bottom:32px;font-size:0.95em}
|
||||
|
||||
h2{font-size:1.2em;font-weight:600;color:var(--accent-l);margin:24px 0 12px;padding-left:12px;border-left:3px solid var(--accent)}
|
||||
|
||||
.flow-steps{display:flex;gap:8px;margin-bottom:32px;overflow-x:auto;padding:8px 0}
|
||||
.step{flex-shrink:0;padding:10px 16px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);cursor:pointer;transition:all .2s;font-size:0.88em;white-space:nowrap}
|
||||
.step:hover{border-color:var(--accent);background:#1e3a5f}
|
||||
.step.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
|
||||
.step .step-num{display:inline-block;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.15);text-align:center;line-height:20px;font-size:0.75em;margin-right:6px}
|
||||
.step.active .step-num{background:rgba(255,255,255,0.3)}
|
||||
|
||||
.scene{display:none}
|
||||
.scene.show{display:block}
|
||||
|
||||
.card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px}
|
||||
.card h3{color:var(--accent-l);margin-bottom:10px;font-size:1em}
|
||||
|
||||
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
|
||||
@media(max-width:768px){.row2{grid-template-columns:1fr}}
|
||||
|
||||
.mockup{background:#111827;border-radius:12px;border:1px solid var(--border);overflow:hidden;position:relative}
|
||||
.mockup-bar{height:32px;background:var(--bg3);display:flex;align-items:center;padding:0 12px;gap:6px;border-bottom:1px solid var(--border)}
|
||||
.mockup-dot{width:10px;height:10px;border-radius:50%}
|
||||
.mockup-body{padding:16px;min-height:400px;position:relative}
|
||||
|
||||
.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:0.78em;font-weight:600}
|
||||
.tag-blue{background:rgba(59,130,246,0.2);color:var(--accent-l)}
|
||||
.tag-green{background:rgba(34,197,94,0.2);color:var(--green)}
|
||||
.tag-amber{background:rgba(245,158,11,0.2);color:var(--amber)}
|
||||
|
||||
table{width:100%;border-collapse:collapse;font-size:0.88em}
|
||||
th,td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--border)}
|
||||
th{background:var(--bg3);color:var(--accent-l);font-weight:600;font-size:0.85em}
|
||||
|
||||
.avatar{display:inline-flex;width:32px;height:32px;border-radius:50%;align-items:center;justify-content:center;font-size:0.8em;font-weight:600;flex-shrink:0}
|
||||
.av-user{background:#3b82f6;color:#fff}
|
||||
.av-agent{background:#22c55e;color:#fff}
|
||||
.av-invited{background:#f59e0b;color:#fff}
|
||||
|
||||
.msg{display:flex;gap:8px;margin-bottom:10px;align-items:flex-start}
|
||||
.msg-left{flex-direction:row}
|
||||
.msg-right{flex-direction:row-reverse}
|
||||
.msg-bubble{max-width:70%;padding:10px 14px;border-radius:12px;font-size:0.88em;line-height:1.5}
|
||||
.bubble-user{background:#1e3a5f;color:var(--text)}
|
||||
.bubble-agent{background:#1a3d2e;color:var(--text)}
|
||||
.bubble-sys{background:var(--bg3);color:var(--dim);font-size:0.82em;max-width:100%;text-align:center;padding:6px 12px;border-radius:8px}
|
||||
.bubble-invited{background:#3d2e1a;color:var(--text)}
|
||||
|
||||
.btn{padding:8px 16px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--text);cursor:pointer;font-size:0.85em;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
|
||||
.btn:hover{border-color:var(--accent);background:#1e3a5f}
|
||||
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
|
||||
.btn-primary:hover{background:#2563eb}
|
||||
|
||||
.tree{padding:4px 0}
|
||||
.tree-item{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:0.85em;transition:background .15s}
|
||||
.tree-item:hover{background:var(--bg3)}
|
||||
.tree-item.selected{background:rgba(59,130,246,0.15);outline:1px solid var(--accent)}
|
||||
.tree-expand{width:16px;text-align:center;color:var(--dim);font-size:0.8em;cursor:pointer}
|
||||
.tree-ck{width:16px;height:16px;border:1px solid var(--border);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;font-size:0.7em;cursor:pointer;flex-shrink:0}
|
||||
.tree-ck.checked{background:var(--accent);border-color:var(--accent);color:#fff}
|
||||
|
||||
.desc{color:var(--dim);font-size:0.9em;margin:8px 0;line-height:1.7}
|
||||
.desc strong{color:var(--text)}
|
||||
|
||||
.callout{background:rgba(59,130,246,0.1);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:12px 16px;margin:12px 0;font-size:0.9em}
|
||||
.callout.warn{background:rgba(245,158,11,0.1);border-left-color:var(--amber)}
|
||||
.callout.ok{background:rgba(34,197,94,0.1);border-left-color:var(--green)}
|
||||
|
||||
.arrow{color:var(--accent);font-size:1.2em;font-weight:700;margin:0 6px}
|
||||
|
||||
.seq{display:flex;flex-direction:column;gap:0;margin:16px 0}
|
||||
.seq-row{display:flex;align-items:center;gap:12px;padding:8px 0}
|
||||
.seq-line{width:2px;height:20px;background:var(--accent);margin-left:15px}
|
||||
.seq-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.8em;font-weight:700;flex-shrink:0}
|
||||
.seq-dot-blue{background:var(--accent);color:#fff}
|
||||
.seq-dot-green{background:var(--green);color:#fff}
|
||||
.seq-dot-amber{background:var(--amber);color:#fff}
|
||||
.seq-dot-purple{background:var(--purple);color:#fff}
|
||||
.seq-text{flex:1;font-size:0.88em;color:var(--dim)}
|
||||
.seq-text strong{color:var(--text)}
|
||||
.seq-actor{font-size:0.75em;color:var(--accent-l);font-weight:600}
|
||||
|
||||
.wecom-notif{background:var(--bg3);border-radius:10px;padding:14px;border:1px solid var(--border);max-width:340px;margin:12px auto}
|
||||
.wecom-notif-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
|
||||
.wecom-notif-app{font-size:0.8em;color:var(--accent-l);font-weight:600}
|
||||
.wecom-notif-time{font-size:0.7em;color:var(--dim)}
|
||||
.wecom-notif-title{font-weight:600;font-size:0.92em;margin-bottom:4px}
|
||||
.wecom-notif-body{font-size:0.85em;color:var(--dim);line-height:1.5}
|
||||
.wecom-notif-btn{display:inline-block;margin-top:8px;padding:6px 14px;border-radius:6px;background:var(--accent);color:#fff;font-size:0.82em;cursor:pointer}
|
||||
|
||||
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
|
||||
@media(max-width:768px){.compare-grid{grid-template-columns:1fr}}
|
||||
.compare-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px}
|
||||
.compare-card.recommend{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
|
||||
.compare-card h3{text-align:center;margin-bottom:12px;font-size:1em}
|
||||
.compare-card ul{padding-left:16px;font-size:0.88em}
|
||||
.compare-card li{margin-bottom:4px;color:var(--dim)}
|
||||
|
||||
.badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:0.75em;font-weight:600}
|
||||
.badge-blue{background:rgba(59,130,246,0.2);color:var(--accent-l)}
|
||||
.badge-green{background:rgba(34,197,94,0.2);color:var(--green)}
|
||||
.badge-red{background:rgba(239,68,68,0.2);color:var(--red)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
|
||||
<h1>邀请功能 — 方案三交互原型</h1>
|
||||
<div class="subtitle">WebSocket + 应用消息双通道架构 | 在现有一对一对话上扩展多人参与</div>
|
||||
|
||||
<div class="flow-steps" id="flowSteps">
|
||||
<div class="step active" data-scene="s0">0. 架构概览</div>
|
||||
<div class="step" data-scene="s1">1. 一对一会话中</div>
|
||||
<div class="step" data-scene="s2">2. 点击邀请</div>
|
||||
<div class="step" data-scene="s3">3. 选人界面</div>
|
||||
<div class="step" data-scene="s4">4. 历史共享</div>
|
||||
<div class="step" data-scene="s5">5. 确认邀请</div>
|
||||
<div class="step" data-scene="s6">6. 被邀请方通知</div>
|
||||
<div class="step" data-scene="s7">7. 加入会话</div>
|
||||
<div class="step" data-scene="s8">8. 多人会话</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Scene 0: 架构概览 ===== -->
|
||||
<div class="scene show" id="s0">
|
||||
<div class="card">
|
||||
<h3>方案三核心架构</h3>
|
||||
<p class="desc">在现有 <strong>WebSocket 双通道</strong> 架构上扩展，不引入群聊概念。后端维护 <strong>conversation.participants</strong> 数组，所有参与者共享同一个 WebSocket 会话通道。</p>
|
||||
</div>
|
||||
<div class="mockup">
|
||||
<div class="mockup-bar"><div class="mockup-dot" style="background:#ef4444"></div><div class="mockup-dot" style="background:#f59e0b"></div><div class="mockup-dot" style="background:#22c55e"></div><span style="color:var(--dim);font-size:0.8em;margin-left:8px">架构流程图</span></div>
|
||||
<div class="mockup-body" style="display:flex;align-items:center;justify-content:center;min-height:300px">
|
||||
<svg viewBox="0 0 700 260" style="max-width:100%">
|
||||
<defs>
|
||||
<marker id="arrowBlue" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#3b82f6"/></marker>
|
||||
<marker id="arrowGreen" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#22c55e"/></marker>
|
||||
<marker id="arrowAmber" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#f59e0b"/></marker>
|
||||
</defs>
|
||||
<rect x="20" y="80" width="120" height="100" rx="12" fill="#1e3a5f" stroke="#3b82f6" stroke-width="1"/>
|
||||
<text x="80" y="118" text-anchor="middle" fill="#60a5fa" font-size="13" font-weight="600">H5 员工端</text>
|
||||
<text x="80" y="138" text-anchor="middle" fill="#94a3b8" font-size="10">发起者</text>
|
||||
<text x="80" y="155" text-anchor="middle" fill="#94a3b8" font-size="10">WebSocket</text>
|
||||
|
||||
<rect x="290" y="40" width="120" height="80" rx="12" fill="#1a3d2e" stroke="#22c55e" stroke-width="1"/>
|
||||
<text x="350" y="72" text-anchor="middle" fill="#4ade80" font-size="13" font-weight="600">后端</text>
|
||||
<text x="350" y="92" text-anchor="middle" fill="#94a3b8" font-size="10">FastAPI + Redis</text>
|
||||
<text x="350" y="107" text-anchor="middle" fill="#94a3b8" font-size="10">participants[]</text>
|
||||
|
||||
<rect x="290" y="160" width="120" height="80" rx="12" fill="#3d2e1a" stroke="#f59e0b" stroke-width="1"/>
|
||||
<text x="350" y="192" text-anchor="middle" fill="#fbbf24" font-size="13" font-weight="600">企微 API</text>
|
||||
<text x="350" y="210" text-anchor="middle" fill="#94a3b8" font-size="10">应用消息推送</text>
|
||||
<text x="350" y="225" text-anchor="middle" fill="#94a3b8" font-size="10">通讯录</text>
|
||||
|
||||
<rect x="560" y="30" width="120" height="80" rx="12" fill="#1a3d2e" stroke="#22c55e" stroke-width="1"/>
|
||||
<text x="620" y="62" text-anchor="middle" fill="#4ade80" font-size="13" font-weight="600">坐席工作台</text>
|
||||
<text x="620" y="82" text-anchor="middle" fill="#94a3b8" font-size="10">WebSocket</text>
|
||||
<text x="620" y="97" text-anchor="middle" fill="#94a3b8" font-size="10">接单+邀请</text>
|
||||
|
||||
<rect x="560" y="150" width="120" height="80" rx="12" fill="#1e3a5f" stroke="#3b82f6" stroke-width="1"/>
|
||||
<text x="620" y="182" text-anchor="middle" fill="#60a5fa" font-size="13" font-weight="600">H5 被邀请人</text>
|
||||
<text x="620" y="202" text-anchor="middle" fill="#94a3b8" font-size="10">企微消息→H5</text>
|
||||
<text x="620" y="217" text-anchor="middle" fill="#94a3b8" font-size="10">WebSocket</text>
|
||||
|
||||
<line x1="140" y1="110" x2="290" y2="80" stroke="#3b82f6" stroke-width="1.5" marker-end="url(#arrowBlue)"/>
|
||||
<line x1="410" y1="80" x2="560" y2="70" stroke="#22c55e" stroke-width="1.5" marker-end="url(#arrowGreen)"/>
|
||||
<line x1="140" y1="140" x2="290" y2="80" stroke="#3b82f6" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<line x1="350" y1="120" x2="350" y2="160" stroke="#f59e0b" stroke-width="1.5" marker-end="url(#arrowAmber)"/>
|
||||
<line x1="410" y1="200" x2="560" y2="190" stroke="#3b82f6" stroke-width="1.5" marker-end="url(#arrowBlue)"/>
|
||||
|
||||
<text x="200" y="80" fill="#94a3b8" font-size="9">WS 双向</text>
|
||||
<text x="470" y="65" fill="#94a3b8" font-size="9">WS 双向</text>
|
||||
<text x="370" y="148" fill="#94a3b8" font-size="9">邀请通知</text>
|
||||
<text x="470" y="185" fill="#94a3b8" font-size="9">应用消息→H5→WS</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="callout ok"><strong>关键区别</strong>：不创建企微群聊，所有参与者通过 H5+WebSocket 接入同一个后端 conversation。企微应用消息仅用于「通知被邀请人」和「断连降级推送」。</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Scene 1: 一对一会话中 ===== -->
|
||||
<div class="scene" id="s1">
|
||||
<div class="card">
|
||||
<h3>场景：坐席正在与用户一对一对话</h3>
|
||||
<p class="desc">用户「张三」遇到 VPN 问题，坐席「小李」正在处理。对话过程中发现需要网络安全组同事「王工」协助排查。</p>
|
||||
</div>
|
||||
<div class="row2">
|
||||
<div class="mockup">
|
||||
<div class="mockup-bar"><div class="mockup-dot" style="background:#ef4444"></div><div class="mockup-dot" style="background:#f59e0b"></div><div class="mockup-dot" style="background:#22c55e"></div><span style="color:var(--dim);font-size:0.78em;margin-left:8px">坐席工作台 — 会话区</span></div>
|
||||
<div class="mockup-body">
|
||||
<div style="display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:12px">
|
||||
<div class="avatar av-user">张</div>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:600;font-size:0.92em">张三</div>
|
||||
<div style="font-size:0.78em;color:var(--dim)">IT研发部 · 高级开发工程师</div>
|
||||
</div>
|
||||
<span class="tag tag-green">会话中</span>
|
||||
<button class="btn" style="font-size:0.8em" onclick="goScene('s2')">+ 邀请</button>
|
||||
</div>
|
||||
<div class="msg msg-left">
|
||||
<div class="avatar av-user" style="width:28px;height:28px;font-size:0.7em">张</div>
|
||||
<div class="msg-bubble bubble-user">VPN 连接不上，提示证书错误</div>
|
||||
</div>
|
||||
<div class="msg msg-right">
|
||||
<div class="avatar av-agent" style="width:28px;height:28px;font-size:0.7em">李</div>
|
||||
<div class="msg-bubble bubble-agent">您好，请问您使用的是 ATrust 还是零信任客户端？</div>
|
||||
</div>
|
||||
<div class="msg msg-left">
|
||||
<div class="avatar av-user" style="width:28px;height:28px;font-size:0.7em">张</div>
|
||||
<div class="msg-bubble bubble-user">ATrust，之前一直正常的，今天突然不行了</div>
|
||||
</div>
|
||||
<div class="msg msg-right">
|
||||
<div class="avatar av-agent" style="width:28px;height:28px;font-size:0.7em">李</div>
|
||||
<div class="msg-bubble bubble-agent">这个问题可能涉及网络策略变更，我邀请网络安全组的同事一起排查</div>
|
||||
</div>
|
||||
<div style="text-align:center;margin:16px 0">
|
||||
<button class="btn-primary btn" onclick="goScene('s2')">点击「+ 邀请」按钮</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card">
|
||||
<h3>交互说明</h3>
|
||||
<div class="seq">
|
||||
<div class="seq-row"><div class="seq-dot seq-dot-green">1</div><div class="seq-text"><strong>坐席点击「+ 邀请」</strong><br><span class="seq-actor">坐席工作台</span></div></div>
|
||||
<div class="seq-line"></div>
|
||||
<div class="seq-row"><div class="seq-dot seq-dot-blue">2</div><div class="seq-text"><strong>弹出选人弹窗</strong>（组织架构树/搜索）<br><span class="seq-actor">坐席工作台</span></div></div>
|
||||
<div class="seq-line"></div>
|
||||
<div class="seq-row"><div class="seq-dot seq-dot-amber">3</div><div class="seq-text"><strong>选择历史消息共享范围</strong><br><span class="seq-actor">选人弹窗</span></div></div>
|
||||
<div class="seq-line"></div>
|
||||
<div class="seq-row"><div class="seq-dot seq-dot-blue">4</div><div class="seq-text"><strong>确认邀请 → 后端处理</strong><br><span class="seq-actor">后端 API</span></div></div>
|
||||
<div class="seq-line"></div>
|
||||
<div class="seq-row"><div class="seq-dot seq-dot-amber">5</div><div class="seq-text"><strong>企微应用消息通知被邀请人</strong><br><span class="seq-actor">企微 API</span></div></div>
|
||||
<div class="seq-line"></div>
|
||||
<div class="seq-row"><div class="seq-dot seq-dot-green">6</div><div class="seq-text"><strong>被邀请人打开 H5 加入会话</strong><br><span class="seq-actor">H5 员工端</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Scene 2: 点击邀请 ===== -->
|
||||
<div class="scene" id="s2">
|
||||
<div class="card">
|
||||
<h3>步骤 2：点击「+ 邀请」→ 弹出选人弹窗</h3>
|
||||
<p class="desc">弹窗包含三个区域：<strong>组织架构树</strong>（左侧）、<strong>已选人员</strong>（右侧上方）、<strong>历史消息共享设置</strong>（右侧下方）。</p>
|
||||
</div>
|
||||
<div class="mockup">
|
||||
<div class="mockup-bar"><div class="mockup-dot" style="background:#ef4444"></div><div class="mockup-dot" style="background:#f59e0b"></div><div class="mockup-dot" style="background:#22c55e"></div><span style="color:var(--dim);font-size:0.78em;margin-left:8px">坐席工作台 — 邀请弹窗</span></div>
|
||||
<div class="mockup-body" style="min-height:440px">
|
||||
<div style="display:flex;gap:16px;height:100%">
|
||||
<!-- 左侧：组织架构 -->
|
||||
<div style="flex:1;border-right:1px solid var(--border);padding-right:12px">
|
||||
<div style="font-weight:600;font-size:0.9em;margin-bottom:8px;color:var(--accent-l)">选择邀请对象</div>
|
||||
<input type="text" placeholder="搜索姓名/部门..." style="width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:0.85em;margin-bottom:10px;outline:none">
|
||||
<div class="tree">
|
||||
<div class="tree-item" onclick="toggleTree(this)">
|
||||
<div class="tree-expand">▼</div>
|
||||
<div class="tree-ck" onclick="event.stopPropagation();toggleCk(this)">✓</div>
|
||||
<span>信息技术部</span>
|
||||
</div>
|
||||
<div style="padding-left:20px">
|
||||
<div class="tree-item" onclick="toggleTree(this)">
|
||||
<div class="tree-expand">▶</div>
|
||||
<div class="tree-ck" onclick="event.stopPropagation();toggleCk(this)"></div>
|
||||
<span>IT支持组</span>
|
||||
</div>
|
||||
<div class="tree-item selected">
|
||||
<div class="tree-expand" style="visibility:hidden"></div>
|
||||
<div class="tree-ck checked" onclick="event.stopPropagation();toggleCk(this)">✓</div>
|
||||
<span>王工</span>
|
||||
<span style="font-size:0.75em;color:var(--dim);margin-left:4px">网络安全</span>
|
||||
</div>
|
||||
<div class="tree-item">
|
||||
<div class="tree-expand" style="visibility:hidden"></div>
|
||||
<div class="tree-ck" onclick="event.stopPropagation();toggleCk(this)"></div>
|
||||
<span>赵磊</span>
|
||||
<span style="font-size:0.75em;color:var(--dim);margin-left:4px">系统运维</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-left:20px">
|
||||
<div class="tree-item">
|
||||
<div class="tree-expand" style="visibility:hidden"></div>
|
||||
<div class="tree-ck" onclick="event.stopPropagation();toggleCk(this)"></div>
|
||||
<span>软件开发组</span>
|
||||
<span style="font-size:0.75em;color:var(--dim);margin-left:4px">8人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-item" onclick="toggleTree(this)">
|
||||
<div class="tree-expand">▶</div>
|
||||
<div class="tree-ck" onclick="event.stopPropagation();toggleCk(this)"></div>
|
||||
<span>信息安全部</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧：已选+设置 -->
|
||||
<div style="flex:1;padding-left:12px">
|
||||
<div style="font-weight:600;font-size:0.9em;margin-bottom:8px;color:var(--accent-l)">已选择 (1)</div>
|
||||
<div style="background:var(--bg3);border-radius:8px;padding:10px;margin-bottom:16px">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
|
||||
<div class="avatar av-invited" style="width:28px;height:28px;font-size:0.7em">王</div>
|
||||
<div style="flex:1;font-size:0.88em">王工</div>
|
||||
<span style="font-size:0.75em;color:var(--dim)">信息技术部·网络安全</span>
|
||||
<span style="cursor:pointer;color:var(--red);font-size:0.85em">✕</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="font-weight:600;font-size:0.9em;margin-bottom:8px;color:var(--accent-l)">历史消息共享</div>
|
||||
<div style="background:var(--bg3);border-radius:8px;padding:12px;margin-bottom:16px">
|
||||
<div style="font-size:0.85em;color:var(--dim);margin-bottom:8px">被邀请人加入后能看到哪些历史消息？</div>
|
||||
<label style="display:flex;align-items:center;gap:8px;font-size:0.88em;margin-bottom:6px;cursor:pointer">
|
||||
<input type="radio" name="share" checked style="accent-color:var(--accent)"> 共享全部历史消息
|
||||
</label>
|
||||
<label style="display:flex;align-items:center;gap:8px;font-size:0.88em;margin-bottom:6px;cursor:pointer">
|
||||
<input type="radio" name="share" style="accent-color:var(--accent)"> 仅共享最近10条消息
|
||||
</label>
|
||||
<label style="display:flex;align-items:center;gap:8px;font-size:0.88em;cursor:pointer">
|
||||
<input type="radio" name="share" style="accent-color:var(--accent)"> 不共享历史消息
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div style="font-weight:600;font-size:0.9em;margin-bottom:8px;color:var(--accent-l)">邀请说明（可选）</div>
|
||||
<textarea placeholder="例如：需要你协助排查VPN证书问题..." style="width:100%;height:56px;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:0.85em;resize:none;outline:none"></textarea>
|
||||
|
||||
<div style="display:flex;gap:8px;justify-content:flex-end;margin-top:16px">
|
||||
<button class="btn" onclick="goScene('s1')">取消</button>
|
||||
<button class="btn btn-primary" onclick="goScene('s5')">确认邀请</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Scene 3: 选人界面（同Scene2，此处展示另一种交互：选部门） ===== -->
|
||||
<div class="scene" id="s3">
|
||||
<div class="card">
|
||||
<h3>步骤 3：选择人员 — 支持按部门批量邀请</h3>
|
||||
<p class="desc">勾选部门节点 = 邀请该部门<strong>所有人</strong>。每个被邀请人都会收到独立的应用消息通知。</p>
|
||||
</div>
|
||||
<div class="row2">
|
||||
<div class="mockup">
|
||||
<div class="mockup-bar"><div class="mockup-dot" style="background:#ef4444"></div><div class="mockup-dot" style="background:#f59e0b"></div><div class="mockup-dot" style="background:#22c55e"></div><span style="color:var(--dim);font-size:0.78em;margin-left:8px">选人 — 勾选整个部门</span></div>
|
||||
<div class="mockup-body" style="min-height:280px">
|
||||
<div class="tree">
|
||||
<div class="tree-item" style="background:rgba(59,130,246,0.1)">
|
||||
<div class="tree-expand">▼</div>
|
||||
<div class="tree-ck checked">✓</div>
|
||||
<span style="font-weight:600">信息安全部</span>
|
||||
<span class="tag tag-blue" style="margin-left:8px">全部邀请</span>
|
||||
</div>
|
||||
<div style="padding-left:20px">
|
||||
<div class="tree-item">
|
||||
<div class="tree-expand" style="visibility:hidden"></div>
|
||||
<div class="tree-ck checked">✓</div>
|
||||
<span>陈安全</span>
|
||||
<span style="font-size:0.75em;color:var(--dim);margin-left:4px">安全主管</span>
|
||||
</div>
|
||||
<div class="tree-item">
|
||||
<div class="tree-expand" style="visibility:hidden"></div>
|
||||
<div class="tree-ck checked">✓</div>
|
||||
<span>刘防护</span>
|
||||
<span style="font-size:0.75em;color:var(--dim);margin-left:4px">安全工程师</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-item">
|
||||
<div class="tree-expand">▶</div>
|
||||
<div class="tree-ck"></div>
|
||||
<span>IT支持组</span>
|
||||
<span style="font-size:0.75em;color:var(--dim);margin-left:4px">3人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card">
|
||||
<h3>选人交互规则</h3>
|
||||
<table>
|
||||
<tr><th>操作</th><th>效果</th></tr>
|
||||
<tr><td>勾选人员</td><td>该人员加入已选列表</td></tr>
|
||||
<tr><td>勾选部门</td><td>该部门下所有人员加入已选列表</td></tr>
|
||||
<tr><td>搜索姓名</td><td>模糊匹配，点击结果直接加入已选</td></tr>
|
||||
<tr><td>取消勾选</td><td>从已选列表移除</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="callout warn"><strong>注意</strong>：邀请人数建议上限 10 人。超过 10 人时应提示「当前邀请人数较多，建议优先邀请关键人员」。这不是硬限制，而是用户体验优化。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Scene 4: 历史消息共享 ===== -->
|
||||
<div class="scene" id="s4">
|
||||
<div class="card">
|
||||
<h3>步骤 4：历史消息共享设置</h3>
|
||||
<p class="desc">邀请时坐席可以选择被邀请人能看到哪些历史消息。这是<strong>隐私保护</strong>的重要设计——避免敏感信息（如员工个人账号问题）被无关人员看到。</p>
|
||||
</div>
|
||||
<div class="row2">
|
||||
<div class="card">
|
||||
<h3>三种共享模式对比</h3>
|
||||
<table>
|
||||
<tr><th>模式</th><th>适用场景</th><th>隐私风险</th></tr>
|
||||
<tr><td><span class="badge badge-green">共享全部</span></td><td>通用IT问题（VPN/网络/打印），无敏感信息</td><td style="color:var(--green)">低</td></tr>
|
||||
<tr><td><span class="badge badge-blue">最近10条</span></td><td>对话较长，仅需上下文即可理解当前问题</td><td style="color:var(--amber)">中</td></tr>
|
||||
<tr><td><span class="badge badge-red">不共享</span></td><td>涉及员工个人账号/权限等敏感信息</td><td style="color:var(--green)">低</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>被邀请人视角 — 共享 vs 不共享</h3>
|
||||
<div style="display:flex;gap:12px">
|
||||
<div style="flex:1;background:var(--bg3);border-radius:8px;padding:10px">
|
||||
<div style="font-size:0.82em;font-weight:600;color:var(--green);margin-bottom:6px">共享全部</div>
|
||||
<div style="font-size:0.82em;color:var(--dim)">
|
||||
[张三] VPN连不上...<br>
|
||||
[小李] 请问用的是...<br>
|
||||
[张三] ATrust...<br>
|
||||
<span style="color:var(--accent-l)">↑ 可看到完整上下文</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;background:var(--bg3);border-radius:8px;padding:10px">
|
||||
<div style="font-size:0.82em;font-weight:600;color:var(--red);margin-bottom:6px">不共享</div>
|
||||
<div style="font-size:0.82em;color:var(--dim)">
|
||||
<span style="opacity:0.4">[历史消息不可见]</span><br>
|
||||
── 加入会话 ──<br>
|
||||
[王工] 我来看看VPN...<br>
|
||||
<span style="color:var(--amber)">↑ 仅能看到加入后的消息</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="callout"><strong>默认值</strong>：建议默认选中「最近10条」，在可见性和隐私之间取得平衡。坐席可根据实际情况调整。</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Scene 5: 确认邀请 ===== -->
|
||||
<div class="scene" id="s5">
|
||||
<div class="card">
|
||||
<h3>步骤 5：确认邀请 → 后端处理流程</h3>
|
||||
</div>
|
||||
<div class="mockup">
|
||||
<div class="mockup-bar"><div class="mockup-dot" style="background:#ef4444"></div><div class="mockup-dot" style="background:#f59e0b"></div><div class="mockup-dot" style="background:#22c55e"></div><span style="color:var(--dim);font-size:0.78em;margin-left:8px">确认邀请 — 后端处理时序</span></div>
|
||||
<div class="mockup-body" style="min-height:340px">
|
||||
<div class="seq">
|
||||
<div class="seq-row">
|
||||
<div class="seq-dot seq-dot-green">1</div>
|
||||
<div class="seq-text"><strong>坐席点击「确认邀请」</strong><div class="seq-actor">坐席工作台 → POST /api/conversations/:id/invite</div></div>
|
||||
</div>
|
||||
<div class="seq-line"></div>
|
||||
<div class="seq-row">
|
||||
<div class="seq-dot seq-dot-blue">2</div>
|
||||
<div class="seq-text"><strong>后端更新 participants 数组</strong>，将王工 userid 加入 conversation.participants<div class="seq-actor">后端 → PostgreSQL</div></div>
|
||||
</div>
|
||||
<div class="seq-line"></div>
|
||||
<div class="seq-row">
|
||||
<div class="seq-dot seq-dot-blue">3</div>
|
||||
<div class="seq-text"><strong>后端生成邀请卡片消息</strong>（含会话ID + H5入口链接 + 邀请说明 + 共享的历史消息摘要）<div class="seq-actor">后端 → 企微应用消息 API</div></div>
|
||||
</div>
|
||||
<div class="seq-line"></div>
|
||||
<div class="seq-row">
|
||||
<div class="seq-dot seq-dot-amber">4</div>
|
||||
<div class="seq-text"><strong>企微推送应用消息给王工</strong>（单聊卡片消息，非群聊消息）<div class="seq-actor">企微 → 王工企微客户端</div></div>
|
||||
</div>
|
||||
<div class="seq-line"></div>
|
||||
<div class="seq-row">
|
||||
<div class="seq-dot seq-dot-green">5</div>
|
||||
<div class="seq-text"><strong>坐席工作台显示「已邀请王工」系统消息</strong>，会话参与者列表更新<div class="seq-actor">WebSocket → 坐席工作台</div></div>
|
||||
</div>
|
||||
<div class="seq-line"></div>
|
||||
<div class="seq-row">
|
||||
<div class="seq-dot seq-dot-blue">6</div>
|
||||
<div class="seq-text"><strong>坐席工作台显示「已邀请王工」系统消息</strong>，会话参与者列表更新<div class="seq-actor">WebSocket → H5 发起者</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<h3>API 接口设计</h3>
|
||||
<table>
|
||||
<tr><th>接口</th><th>方法</th><th>说明</th></tr>
|
||||
<tr><td style="font-family:monospace;color:var(--cyan)">/api/conversations/:id/invite</td><td>POST</td><td>邀请人员加入会话</td></tr>
|
||||
<tr><td style="font-family:monospace;color:var(--cyan)">/api/conversations/:id/participants</td><td>GET</td><td>获取会话参与者列表</td></tr>
|
||||
<tr><td style="font-family:monospace;color:var(--cyan)">/api/conversations/:id/participants/:uid</td><td>DELETE</td><td>移除参与者（坐席/被邀请人退出）</td></tr>
|
||||
<tr><td style="font-family:monospace;color:var(--cyan)">/api/contacts/departments</td><td>GET</td><td>获取组织架构树（缓存自eHR/企微通讯录）</td></tr>
|
||||
<tr><td style="font-family:monospace;color:var(--cyan)">/api/contacts/search</td><td>GET</td><td>搜索人员（姓名/工号模糊匹配）</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Scene 6: 被邀请方通知 ===== -->
|
||||
<div class="scene" id="s6">
|
||||
<div class="card">
|
||||
<h3>步骤 6：被邀请人收到企微应用消息</h3>
|
||||
<p class="desc">王工在企微中收到一条<strong>应用消息卡片</strong>，点击卡片中的按钮即可跳转到 H5 会话页面。</p>
|
||||
</div>
|
||||
<div class="row2">
|
||||
<div class="mockup">
|
||||
<div class="mockup-bar"><div class="mockup-dot" style="background:#ef4444"></div><div class="mockup-dot" style="background:#f59e0b"></div><div class="mockup-dot" style="background:#22c55e"></div><span style="color:var(--dim);font-size:0.78em;margin-left:8px">企微消息卡片 — 通知样式</span></div>
|
||||
<div class="mockup-body" style="display:flex;align-items:center;justify-content:center;min-height:340px">
|
||||
<div class="wecom-notif">
|
||||
<div class="wecom-notif-header">
|
||||
<div class="avatar av-invited" style="width:24px;height:24px;font-size:0.65em">IT</div>
|
||||
<div class="wecom-notif-app">IT智能服务台</div>
|
||||
<div class="wecom-notif-time">刚刚</div>
|
||||
</div>
|
||||
<div class="wecom-notif-title">邀请你加入 IT 支持会话</div>
|
||||
<div class="wecom-notif-body">
|
||||
<div style="margin-bottom:6px"><strong>邀请人：</strong>小李（IT支持组）</div>
|
||||
<div style="margin-bottom:6px"><strong>发起人：</strong>张三（IT研发部）</div>
|
||||
<div style="margin-bottom:6px"><strong>问题摘要：</strong>VPN证书错误，ATrust客户端无法连接</div>
|
||||
<div style="margin-bottom:6px"><strong>邀请说明：</strong>需要你协助排查VPN证书问题</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;margin-top:10px">
|
||||
<div class="wecom-notif-btn" onclick="goScene('s7')">加入会话</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card">
|
||||
<h3>消息卡片设计要点</h3>
|
||||
<ul style="color:var(--dim);font-size:0.88em">
|
||||
<li><strong style="color:var(--text)">使用交互式卡片消息</strong>（textcard 类型），而非纯文本</li>
|
||||
<li><strong style="color:var(--text)">包含问题摘要</strong>，让被邀请人判断是否需要立即加入</li>
|
||||
<li><strong style="color:var(--text)">「加入会话」按钮</strong>直接跳转 H5 页面（企微内置浏览器）</li>
|
||||
<li><strong style="color:var(--text)">如果共享了历史消息</strong>，摘要中自动包含最近 2-3 条关键消息</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>降级方案</h3>
|
||||
<p class="desc">如果被邀请人<strong>未安装企微</strong>或<strong>处于离线</strong>：后端记录邀请状态为「待加入」。被邀请人下次登录企微时会收到消息。同时，坐席工作台显示邀请状态：<span class="tag tag-amber">待加入</span> / <span class="tag tag-green">已加入</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Scene 7: 加入会话 ===== -->
|
||||
<div class="scene" id="s7">
|
||||
<div class="card">
|
||||
<h3>步骤 7：被邀请人点击「加入会话」→ H5 页面</h3>
|
||||
<p class="desc">王工点击消息卡片按钮 → 企微内置浏览器打开 H5 页面 → 自动加入 WebSocket 会话 → 看到历史消息（如果被共享）→ 可直接发消息</p>
|
||||
</div>
|
||||
<div class="row2">
|
||||
<div class="mockup">
|
||||
<div class="mockup-bar"><div class="mockup-dot" style="background:#ef4444"></div><div class="mockup-dot" style="background:#f59e0b"></div><div class="mockup-dot" style="background:#22c55e"></div><span style="color:var(--dim);font-size:0.78em;margin-left:8px">H5 被邀请人视角 — 加入后</span></div>
|
||||
<div class="mockup-body">
|
||||
<div style="display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:12px">
|
||||
<div style="font-weight:600;font-size:0.92em;flex:1">IT支持会话</div>
|
||||
<span style="font-size:0.78em;color:var(--dim)">3人参与</span>
|
||||
</div>
|
||||
<div class="msg" style="justify-content:center">
|
||||
<div class="msg-bubble bubble-sys">── 小李 邀请了 王工 加入会话 ──</div>
|
||||
</div>
|
||||
<div class="msg msg-left">
|
||||
<div class="avatar av-user" style="width:28px;height:28px;font-size:0.7em">张</div>
|
||||
<div class="msg-bubble bubble-user">VPN 连接不上，提示证书错误</div>
|
||||
</div>
|
||||
<div class="msg msg-right">
|
||||
<div class="avatar av-agent" style="width:28px;height:28px;font-size:0.7em">李</div>
|
||||
<div class="msg-bubble bubble-agent">请问您使用的是 ATrust 还是零信任客户端？</div>
|
||||
</div>
|
||||
<div class="msg msg-left">
|
||||
<div class="avatar av-user" style="width:28px;height:28px;font-size:0.7em">张</div>
|
||||
<div class="msg-bubble bubble-user">ATrust，之前一直正常的，今天突然不行了</div>
|
||||
</div>
|
||||
<div class="msg" style="justify-content:center">
|
||||
<div class="msg-bubble bubble-sys">── 王工 已加入会话 ──</div>
|
||||
</div>
|
||||
<div class="msg msg-right">
|
||||
<div class="avatar av-invited" style="width:28px;height:28px;font-size:0.7em">王</div>
|
||||
<div class="msg-bubble bubble-invited">我来看看，先确认下证书服务状态</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card">
|
||||
<h3>加入流程细节</h3>
|
||||
<div class="seq">
|
||||
<div class="seq-row"><div class="seq-dot seq-dot-amber">1</div><div class="seq-text"><strong>点击「加入会话」</strong><br>企微内置浏览器打开 H5 URL（含 conversation_id + token）</div></div>
|
||||
<div class="seq-line"></div>
|
||||
<div class="seq-row"><div class="seq-dot seq-dot-blue">2</div><div class="seq-text"><strong>H5 自动认证</strong><br>企微环境 → OAuth2 自动登录；非企微 → Mock 登录</div></div>
|
||||
<div class="seq-line"></div>
|
||||
<div class="seq-row"><div class="seq-dot seq-dot-blue">3</div><div class="seq-text"><strong>建立 WebSocket 连接</strong><br>加入 conversation 的消息通道</div></div>
|
||||
<div class="seq-line"></div>
|
||||
<div class="seq-row"><div class="seq-dot seq-dot-green">4</div><div class="seq-text"><strong>拉取历史消息</strong><br>根据共享设置，显示可查看的历史消息</div></div>
|
||||
<div class="seq-line"></div>
|
||||
<div class="seq-row"><div class="seq-dot seq-dot-green">5</div><div class="seq-text"><strong>广播「XX 已加入」</strong><br>所有参与者（坐席+用户+其他被邀请人）都能看到</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Scene 8: 多人会话 ===== -->
|
||||
<div class="scene" id="s8">
|
||||
<div class="card">
|
||||
<h3>步骤 8：多人会话持续进行</h3>
|
||||
<p class="desc">所有人通过 <strong>WebSocket</strong> 实时通信。坐席工作台和所有 H5 参与者共享同一个消息通道。坐席拥有<strong>管理权限</strong>（可移除参与者、结束会话）。</p>
|
||||
</div>
|
||||
<div class="row2">
|
||||
<!-- 坐席工作台视角 -->
|
||||
<div class="mockup">
|
||||
<div class="mockup-bar"><div class="mockup-dot" style="background:#ef4444"></div><div class="mockup-dot" style="background:#f59e0b"></div><div class="mockup-dot" style="background:#22c55e"></div><span style="color:var(--dim);font-size:0.78em;margin-left:8px">坐席工作台 — 多人会话</span></div>
|
||||
<div class="mockup-body" style="min-height:400px">
|
||||
<!-- 参与者栏 -->
|
||||
<div style="display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:12px;flex-wrap:wrap">
|
||||
<div class="avatar av-user" style="width:32px;height:32px;font-size:0.7em">张</div>
|
||||
<div style="font-size:0.8em">张三<span style="color:var(--dim);margin-left:4px">发起</span></div>
|
||||
<div class="avatar av-agent" style="width:32px;height:32px;font-size:0.7em">李</div>
|
||||
<div style="font-size:0.8em">小李<span style="color:var(--dim);margin-left:4px">坐席</span></div>
|
||||
<div class="avatar av-invited" style="width:32px;height:32px;font-size:0.7em">王</div>
|
||||
<div style="font-size:0.8em">王工<span style="color:var(--dim);margin-left:4px">邀请</span></div>
|
||||
<button class="btn" style="font-size:0.75em;margin-left:auto" onclick="goScene('s2')">+ 邀请</button>
|
||||
</div>
|
||||
<!-- 消息 -->
|
||||
<div class="msg" style="justify-content:center"><div class="msg-bubble bubble-sys">── 小李 邀请了 王工 加入会话 ──</div></div>
|
||||
<div class="msg msg-left">
|
||||
<div class="avatar av-user" style="width:28px;height:28px;font-size:0.7em">张</div>
|
||||
<div style="font-size:0.72em;color:var(--dim);margin-bottom:2px">张三</div>
|
||||
<div class="msg-bubble bubble-user">VPN 连接不上，提示证书错误</div>
|
||||
</div>
|
||||
<div class="msg msg-right">
|
||||
<div class="avatar av-agent" style="width:28px;height:28px;font-size:0.7em">李</div>
|
||||
<div style="font-size:0.72em;color:var(--dim);margin-bottom:2px">小李（坐席）</div>
|
||||
<div class="msg-bubble bubble-agent">请问您使用的是 ATrust 还是零信任客户端？</div>
|
||||
</div>
|
||||
<div class="msg msg-left">
|
||||
<div class="avatar av-user" style="width:28px;height:28px;font-size:0.7em">张</div>
|
||||
<div style="font-size:0.72em;color:var(--dim);margin-bottom:2px">张三</div>
|
||||
<div class="msg-bubble bubble-user">ATrust，今天突然不行了</div>
|
||||
</div>
|
||||
<div class="msg" style="justify-content:center"><div class="msg-bubble bubble-sys">── 王工 已加入会话 ──</div></div>
|
||||
<div class="msg msg-right">
|
||||
<div class="avatar av-invited" style="width:28px;height:28px;font-size:0.7em">王</div>
|
||||
<div style="font-size:0.72em;color:var(--dim);margin-bottom:2px">王工（受邀）</div>
|
||||
<div class="msg-bubble bubble-invited">证书服务器刚做了更新，我来检查下白名单配置</div>
|
||||
</div>
|
||||
<div class="msg msg-left">
|
||||
<div class="avatar av-user" style="width:28px;height:28px;font-size:0.7em">张</div>
|
||||
<div style="font-size:0.72em;color:var(--dim);margin-bottom:2px">张三</div>
|
||||
<div class="msg-bubble bubble-user">好的，麻烦了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- H5 被邀请人视角 -->
|
||||
<div class="mockup">
|
||||
<div class="mockup-bar"><div class="mockup-dot" style="background:#ef4444"></div><div class="mockup-dot" style="background:#f59e0b"></div><div class="mockup-dot" style="background:#22c55e"></div><span style="color:var(--dim);font-size:0.78em;margin-left:8px">H5 被邀请人视角 — 王工</span></div>
|
||||
<div class="mockup-body" style="min-height:400px">
|
||||
<div style="display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:12px">
|
||||
<div style="font-weight:600;font-size:0.92em;flex:1">IT支持会话</div>
|
||||
<span style="font-size:0.78em;color:var(--dim)">3人</span>
|
||||
<span class="tag tag-green">已加入</span>
|
||||
</div>
|
||||
<!-- 王工只能看到共享后的消息 -->
|
||||
<div style="font-size:0.78em;color:var(--dim);text-align:center;margin-bottom:8px;padding:6px;background:var(--bg3);border-radius:6px">你可以查看最近10条历史消息</div>
|
||||
<div class="msg msg-left">
|
||||
<div class="avatar av-user" style="width:28px;height:28px;font-size:0.7em">张</div>
|
||||
<div style="font-size:0.72em;color:var(--dim);margin-bottom:2px">张三</div>
|
||||
<div class="msg-bubble bubble-user">ATrust，今天突然不行了</div>
|
||||
</div>
|
||||
<div class="msg" style="justify-content:center"><div class="msg-bubble bubble-sys">── 王工 已加入会话 ──</div></div>
|
||||
<div class="msg msg-right">
|
||||
<div class="avatar av-invited" style="width:28px;height:28px;font-size:0.7em">王</div>
|
||||
<div class="msg-bubble bubble-invited">证书服务器刚做了更新，我来检查下白名单配置</div>
|
||||
</div>
|
||||
<div class="msg msg-left">
|
||||
<div class="avatar av-user" style="width:28px;height:28px;font-size:0.7em">张</div>
|
||||
<div style="font-size:0.72em;color:var(--dim);margin-bottom:2px">张三</div>
|
||||
<div class="msg-bubble bubble-user">好的，麻烦了</div>
|
||||
</div>
|
||||
<!-- 输入区 -->
|
||||
<div style="margin-top:auto;padding-top:12px;border-top:1px solid var(--border)">
|
||||
<div style="display:flex;gap:8px">
|
||||
<input type="text" placeholder="输入消息..." style="flex:1;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:0.88em;outline:none">
|
||||
<button class="btn btn-primary" style="font-size:0.85em">发送</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top:16px">
|
||||
<h3>坐席管理能力</h3>
|
||||
<div class="row2" style="margin-bottom:0">
|
||||
<div>
|
||||
<table>
|
||||
<tr><th>操作</th><th>权限</th><th>说明</th></tr>
|
||||
<tr><td>邀请人员</td><td>坐席</td><td>选择人员加入会话</td></tr>
|
||||
<tr><td>移除参与者</td><td>坐席</td><td>将某人移出会话（不通知）</td></tr>
|
||||
<tr><td>主动退出</td><td>被邀请人</td><td>被邀请人可自行退出</td></tr>
|
||||
<tr><td>结束会话</td><td>坐席</td><td>关闭会话，所有人断开</td></tr>
|
||||
<tr><td>转让坐席</td><td>坐席</td><td>将坐席角色转给其他参与者</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<div class="callout warn"><strong>与企微群聊的核心区别</strong>：<br>1. 会话数据完全在后端控制，不依赖企微群聊 API<br>2. 被邀请人通过 H5 WebSocket 通信，无需加入企微群<br>3. 坐席拥有管理权限，可控制参与者和历史可见性<br>4. 外部联系人（供应商等）也可通过 H5 链接加入</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const steps = document.querySelectorAll('.step');
|
||||
const scenes = document.querySelectorAll('.scene');
|
||||
|
||||
function goScene(id) {
|
||||
steps.forEach(s => s.classList.remove('active'));
|
||||
scenes.forEach(s => s.classList.remove('show'));
|
||||
const idx = parseInt(id.replace('s',''));
|
||||
steps[idx].classList.add('active');
|
||||
document.getElementById(id).classList.add('show');
|
||||
window.scrollTo({top: 0, behavior: 'smooth'});
|
||||
}
|
||||
|
||||
steps.forEach(s => {
|
||||
s.addEventListener('click', () => goScene(s.dataset.scene));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+385
@@ -0,0 +1,385 @@
|
||||
// Auto-generated from IT支持知识库2026-4-24.docx
|
||||
// 7大类 28子类 180条快速回复模板
|
||||
|
||||
const qrData = [
|
||||
{
|
||||
name: "办公电脑", icon: "💻",
|
||||
subs: [
|
||||
{
|
||||
name: "硬件设备", icon: "📄",
|
||||
items: [
|
||||
{ title: "笔记本电脑电池续航异常", content: "健康评估标准：剩余容量<70%或循环次数>500次。 获取报告步骤：： Windows：cmd中输入 powercfg /batteryreport，查看报告中的“CYCLE COUNT”。 Mac：按住Option键点击苹果菜单→系统信息→电源→查看“循环计数”。 将报告留言分享，等待人工坐席进一步评估。" },
|
||||
{ title: "办公电脑常见问题处理（黑屏、警报）", content: "排查步骤 1. 观察电源指示灯：确认电脑的电源指示灯是否亮起或闪烁。 2. 强制关机重启：长按电源键约15-20秒，直到电源指示灯完全熄灭，等待几秒钟后，再次按下电源键尝试开机。" },
|
||||
{ title: "办公电脑常见问题处理（死机、卡顿）", content: "排查步骤： 1. 检查系统资源：按Ctrl+Shift+Esc打开任务管理器，结束占用高的非必要进程。 2. 强制重启：长按电源键15-20秒至指示灯熄灭，等待后重新开机。" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Windows系统", icon: "📄",
|
||||
items: [
|
||||
{ title: "Windows本地账户密码修改", content: "路径：设置→帐户→登录选项→密码→更改，按提示完成。" },
|
||||
{ title: "办公电脑功能异常（无声音、屏幕显示、键盘热键）", content: "排查步骤： 1. 检查驱动：设备管理器查看是否有异常设备（黄色/红色标志）。 2. 重装驱动：联想电脑使用官方工具；其他品牌从官网下载最新驱动。" },
|
||||
{ title: "办公电脑麦克风无声音", content: "排查步骤： 1. 设置默认设备：右键任务栏扬声器图标→声音设置，确保麦克风设为默认输入设备。 2. 授予权限：在Windows搜索“麦克风隐私设置”，开启麦克风访问权限及对应应用（如企业微信、小鱼）的权限。 3. 调整属性：在设备属性中调整音量和麦克风增强，禁用独占模式。" },
|
||||
{ title: "Windows电脑和Office许可证过期|激活|即将到期", content: "适用场景：激活过期/失败/即将到期。 操作步骤： 1. 下载工具：https://drive.weixin.qq.com/s?k=AAoA1wcYAAcmKeQnWG 2. 运行工具，按需取消选项（如不需激活Office）。 3. 点击“开始”处理。" },
|
||||
{ title: "电脑C盘空间不足", content: "操作步骤： 1. 打开企业微信，进入【设置】→【文档/文件管理】→【文件储存位置】。 2. 点击【更改】，选择其他盘符的目录作为新存储路径。" },
|
||||
{ title: "U盘、移动硬盘无法弹出报错“弹出USB大容量存储设备时出问题”", content: "故障现象： 弹出U盘提示“该设备正在使用中、请关闭可能使用该设备的所有程序或窗口，然后重试” 解决方法： 将电脑关机后再拔出硬盘" },
|
||||
{ title: "办公电脑系统初始密码", content: "总部新电脑：Windows系统无密码（直接回车） 电脑开机密码是独立的，不与内部统一员工账密一致。" },
|
||||
{ title: "电脑开机密码重置", content: "重置电脑开机需使用专用工具由IT支持人员进行现场处理，总部员工请携带设备前往121室，区域同事请联系本地兼职网络协助处理" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "鸿蒙系统", icon: "📄",
|
||||
items: [
|
||||
{ title: "公司办公IT环境不支持鸿蒙系统的软硬件清单", content: "软件功能类： 火绒安全、税友安全助手、企业微信-同事吧（发帖、回复）" },
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "软件工具", icon: "🛠",
|
||||
subs: [
|
||||
{
|
||||
name: "常用工具", icon: "📄",
|
||||
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%。 7-Zip 客户端下载地址：https://sparanoid.com/lab/7z/download.html" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "企业微信", icon: "📄",
|
||||
items: [
|
||||
{ title: "企业微信综合信息", content: "企业微信账号同时与个人微信、手机同步绑定" },
|
||||
{ title: "企微手机聊天记录迁移到电脑", content: "企业微信：打开企业微信---我---设置---通用---聊天记录迁移（手机和电脑连接同一网络热点）" },
|
||||
{ title: "企业微信显示手机号码修改", content: "操作路径：企业微信手机端→设置→账号与安全→手机号→更换手机号，按提示完成。" },
|
||||
{ title: "企业微信账号登录异常", content: "处理方案： 1. 账号限制/封禁：通过官方申诉链接处理：https://work.weixin.qq.com/webapp/kefuSelfService/page 。 2. 设备超限：卸载当前版本，重启后下载最新版安装：https://work.weixin.qq.com/#indexDownload" },
|
||||
{ title: "企业微信消息接收延迟", content: "排查步骤： 1. 确认文件存储路径：企业微信→设置→存储管理。 2. 退出企业微信，删除WXWork存储路径下的Global文件夹。" },
|
||||
{ title: "企业微信客户相关功能限制（客户群/朋友圈/外部联系人", content: "“亿企赢总部“企微主要作为内部沟通渠道，限制添加外部联系人、客户、客户群等客户营销、服务支持功能。 “亿企赢”主体：用于客户联系。 “亿企赢总部”主体：仅限内部沟通。 如有上述需求请切换至“亿企赢”企微主体进行操作，或由“亿企赢”企微主体账号客户&项目经理账号建立客户群，再添加“亿企赢总部”相关人员入群。" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "企业邮箱", icon: "📄",
|
||||
items: [
|
||||
{ title: "税友企业邮箱访问方式与账号密码认证方式", content: "通过第三方邮件客户端配置POP、SMTP、IMAP协议访问，需使用邮箱专用安全密码 通过Coremail客户端配置POP、SMTP、IMAP协议访问，需使用邮箱专用安全密码 通过Coremail客户端配置Coremail协议访问，需使用统一员工账号密码 通过税友企业邮箱网页登录使用统一员工账号密码+短信认证" },
|
||||
{ title: "税友企业邮箱密码修改或重置", content: "注意：通过WEB网页登录企业邮箱与邮件客户端收发邮件所配置密码并不相同，访问WEB地址和使用Coremail客户端采用的是员工统一账号密码（与eHR、税友家园登录密码相同），其他第三方邮件客户端配置的是邮件客户端安全专用密码，请根据实际情况选择不同密码修改重置方式。 员工统一账号密码重置入口： http://192.168.9.87:8080/employee-center/resetPwd.jsp 第三方邮件客户端邮件客户端专用密码生成和重置入口: 使用员工统一账号密码+短信验证码登录WEB邮箱https://mail.servyou.com.cn/ 设置（齿轮图标）-安全设置-客户端安全登录-“生成专用密码” 设置密码名称（便于区分使用软件或对象） 获取（复制）16位密码和邮件客户端配置（按需）" },
|
||||
{ title: "邮箱客户端安全登录专用密码介绍", content: "客户端专用密码是用于登录第三方邮件客户端（例如Outlook、Foxmail、邮件App等）时使用的专属密码 适合客户端通过以下协议使用：POP、IMAP、SMTP、Pushmail、CalDAV、CardDAV “客户端专用密码”仅在生成时可见，支持设置多个，切勿使用其它方式保存，以防泄露 邮件客户端专用密码需通过登录邮件服务器网站进行申请和获取" },
|
||||
{ title: "税友企业邮件地址", content: "税友企业邮件网址： https://mail.servyou.com.cn" },
|
||||
{ title: "税友邮箱网站无法登入", content: "步骤： 1. 先登录税友家园（ https://oa.servyou-it.com/）验证账号。 2. 若密码错误，通过http://192.168.9.87:8080/employee-center/resetPwd.jsp重置。 3. 重置后等待10分钟重试邮箱登录。" },
|
||||
{ title: "税友邮箱已发送邮件召回", content: "条件：仅限发送给公司内部员工且对方未读的邮件。 操作：登录网页版邮箱（https://mail.servyou.com.cn）→自助查询→发信查询→点击“召回邮件”。" },
|
||||
{ title: "邮箱客户端配置", content: "邮件客户端选择和下载 Coremail邮件客户端 https://www.coremail.cn/download.html Foxmail邮件客户端 https://www.foxmail.com/win/ 企业微信邮件应用 路径：企业微信客户端-邮件 生成邮件客户端专用密码：登录网页版邮箱（ https://mail.servyou.com.cn/ ）→个人设置→安全设置→客户端安全登录→生成16位专用密码。 配置客户端： 收发服务器地址：mail.servyou.com.cn 协议和端口：POP收件协议 995（SSL）、SMTP发件协议465（SSL） 密码使用生成的专用密码。 详细指南参考：https://doc.weixin.qq.com/doc/w3_AU8AjwZhAIgBx1RxfT7SRqnW0yN7i" },
|
||||
{ title: "使用邮件客户端本地保留历史收发邮件", content: "说明：根据公司信息安全管理要求，企业邮箱服务器邮件仅保留14天，14天到期邮件将被清除且无法恢复。如有经常随时查阅历史邮件和有邮件存档需求，应避免只使用WEB方式访问邮件网站收发邮件，同时避免使用配置imap、Coremail协议的邮件客户端如：企业微信邮件、Coremail邮件客户端），而应选择配置POP收件协议 的邮件客户端管理邮件。 解决方案： 根据需要选择下载安装 Foxmail、Coremail、网易邮箱大师等邮件客户端，Coremail邮件客户端配置过程邮件协议不要默认选择Coremail。 2.登录企业邮件网址https://mail.servyou.com.cn. 通过路径”设置（齿轮图标）-安全设置-客户端安全登录“，申请邮件客户端专用密码 3.正确邮件客户端邮件服务器地址、收发邮件服务器地址和端口、邮件账号和邮件客户端专用密码" },
|
||||
{ title: "Foxmail邮箱收发异常“不知道这样的主机”", content: "处理步骤： 1. 打开Foxmail，右键邮箱名→设置→账号→服务器。 2. 修改服务器地址为mail.servyou.com.cn，端口收件995（SSL）、发件465（SSL）。" },
|
||||
{ title: "税友邮箱WEB登录异常“用户名或密码错误，或登录受到限制”", content: "解决步骤： 1. 重置密码：http://192.168.9.87:8080/employee-center/resetPwd.jsp 2. 尝试登录税友家园（ https://oa.servyou-it.com/ ）验证账号正常后，重试邮箱登录。" },
|
||||
{ title: "外部邮件漏收&被拦截", content: "排查步骤： 1.使用私人邮箱或请同事给自己发送一封邮件，确认有些客户端设置是否正确。 2.检查邮件客户端垃圾邮件（箱），确定是否被邮件客户端拦截 3使用员工账户中心密码+短信信验证码，登录企业邮箱WEB页面 https://mail.servyou.com.cn ，检查“其他文件-垃圾邮件下是否有所需邮件 如以上检查确认无法收到，请IT支持人工坐席联系邮件运维，启动“邮件防火墙筛查”" },
|
||||
{ title: "公共邮箱申请流程（新建|回收|停用）", content: "申请链接：https://devops.dc.servyou-it.com/ITSM/workflow/service/createTicket?name=公共邮箱账号申请 具体审批执行情况请联系工单处理人。" },
|
||||
{ title: "Coremail邮箱显示脱机", content: "请右键点击账号信息，选择“设为联机模式”。如果操作后仍未恢复，请确认账号和密码输入是否正确。" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "税友云盘", icon: "📄",
|
||||
items: [
|
||||
{ title: "税友云盘网址和客户端下载", content: "税友云盘网址： https://ypan.dc.servyou-it.com 登录窗口左下角点击“下载客户端” 注：税友云盘暂不支持手机移动端" },
|
||||
{ title: "税友企业云盘账号解冻", content: "税友云盘（企业云盘） 云盘账号解冻联系谢聪利申请解冻。" },
|
||||
{ title: "税友云盘更新失败", content: "访问https://ypan.dc.servyou-it.com/user/login ，在登录页面左下角下载最新版安装。" },
|
||||
{ title: "税友云盘密码错误", content: "使用员工统一认证账号密码+短信二次认证，用户名与税友家园、EHR系统一致，忘记密码可使用员工统一认证账号密码重置方式进行重置" },
|
||||
{ title: "税友云盘文件夹访问权限申请", content: "税友云盘文件夹权限管理由各部门及项目指定空间管理员分管，云盘文件夹目录创建与权限调整需联系所属的管理员。 税友云盘部门和项目管理员名单：https://doc.weixin.qq.com/sheet/e3_m_aOPqWFhxgwDR?scode=AAoA1wcYAAcVgz1ud7AQgAuAYMANY&tab=BB08J2" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "企微微盘", icon: "📄",
|
||||
items: [
|
||||
{ title: "企微微盘上传本地文件提示“微盘容量已满，无法上传文件，开通微盘高级功能，可提升容量。”应该如何处理？", content: "因企业微信-微盘收费政策发生重大调整，费用较之前上涨6倍。前期经过与各客群沟通，当前“文档”功能在绝大多数工作场景中已能够替代“微盘”，因此先暂停微盘的续费工作。已安排各客群调研实际需求，后续将根据调研的结果评估续费方案。现阶段的影响以及安排如下： 一、到期影响（2026年3月14日起） 1.微盘：到期后将无法上传新本地文件，空间已有文件可正常访问、下载，短时间不被删除。 2.文档：“文档”的在线编辑、上传及共享等功能 不受此次调整影响。在线文档大小不占用微盘容量。 二、 后续使用指引 1.主要替代方案：请各部门及员工将后续新增的文档存储、分享需求，通过企业微信“文档”功能中实现。 2.特殊需求处理：如确有特殊业务必须使用微盘，请由部门接口人汇总评估需求必要性。 3.文档高级会员：部分原微盘需求将转移至“文档”后新增高级会员，公司将按必要性进行引导与管理，具体采购流程和管理方案另行通知。 三、 咨询与支持 请各位同事知悉并提前做好工作安排，如有疑问可统一咨询： 企微“智能IT助手”，各中心接口人将负责本部门内的宣导与部门内个性化实施。 微盘&文档常见问题答疑文档链接：https:..." },
|
||||
{ title: "为什么企微微盘容量到期后，公司不再统一续费？", content: "" },
|
||||
{ title: "因企业微信-微盘收费政策发生重大调整，费用较之前上涨6倍。前期经过与各客群沟通，当前“文档”功能在绝大多数工作场景中已能够替代“微盘”，因此先暂停微盘的续费工作。", content: "" },
|
||||
{ title: "企微微盘容量到期后，原有空间内的文件有什么影响？", content: "到期后企微空间将无法上传新本地文件，空间已有文件可正常访问、下载，短时间不被删除。" },
|
||||
{ title: "企微微盘空间内的文件能够保留多久？", content: "企微空间内的文件暂时不会删除，如果企微官方调整文件保存策略，会提前通知" },
|
||||
{ title: "企微微盘没有扩容的情况下，每个人平均有的是多少？", content: "按照集团企微账号共享容量100GB，集团现有约7000人均分，大概14MB/ 人" },
|
||||
{ title: "如何查看企微微盘已用容量", content: "路径：【电脑端->微盘->左下角->个人容量】 将鼠标悬停在已用容量位置，可查看：微盘版本（企业）、账号类型（个人）、已用容量（个人）、剩余容量（企业）。" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "企微文档", icon: "📄",
|
||||
items: [
|
||||
{ title: "在线文档里插入本地图片和其他文件，所占用的是什么应用的容量？", content: "在线文档上传的本地文件只会占用“文档”容量，" },
|
||||
{ title: "视频/音频可以转成企微微盘在线文档吗？", content: "只有word、Excel、演示、PPT不可以转为在线文档，其他格式无法转为在线文档" },
|
||||
{ title: "企微文档容量如何计算？", content: "文档仅占用创建者的容量，文档容量根据文档正文、文档中插入的文件、图片以及版本历史记录综合计算，具体类型包括： 文档、表格、幻灯片、智能表格、思维导图、流程图：文档正文、文档中插入的本地文件、图片、表格函数、图表等 收集表、汇报：填写者提交的内容，包含正文、文件、图片、签名等 版本历史记录计入文档容量：在线文档会自动保留历史版本，方便查看编辑记录，可以随时找回历史内容，避免数据丢失。文档容量将根据版本历史的大小综合计算。" },
|
||||
{ title: "企微文档中插入的文件是否占用企微微盘容量？", content: "文档中插入的文件仅占用文档容量，不会占用微盘容量。" },
|
||||
{ title: "企微文档容量如何提升？", content: "基础版个人总容量上限为 1G，开通文档高级功能后，文档容量提升至无限。" },
|
||||
{ title: "如何查看已用企微文档容量情况？", content: "成员可在【手机端->文档->右上角的“+”->更多->关于文档】中查看文档已用容量。" },
|
||||
{ title: "如何释放已经占用的企微「文档」容量", content: "方法一：删除过期文档，进入「文档 > 全部 > 我的文档」，这里将展示占用本人容量的所有文档，可以按大小排序，可自行操作删除。 方法二：删除文档中的图片和文件，打开本人创建的文档，删除文档中已插入的图片、文件。 方法三：删除通过汇报上传的文件，在「微盘 ->我的空间->选择对应的汇报」操作删除汇报中的文件、图片。删除后，一般10分钟左右就能释放对应的容量。注：需汇报创建者操作。 方法四：文档版本历史记录文档瘦身，进入进入「文档 > 设置> 生成副本」，删除原文档保留副本文档 方法五：移交文档、文件（夹）所有权给文档高级会员，将文档（文件夹）移动至个人空间，选中文件（夹）右键>转接所有权（所转交文件占用的空间会移交给接收人） 温馨提示： （1）文档容量非实时更新，会在第二天更新。 （2）文档删除后，可以在【文档->全部->回收站】中恢复对应的文档，非高级账号的文档在回收站会保留7天，高级账号的文档在回收站会保留180天。" },
|
||||
{ title: "企微文档提示：“文档容量已满,因此你无法在该文档中插入图片”", content: "异常原因：插入图片所在文档所有者，企微文档免费额度已满，需由当前文档创建者购买收费高级功能 出于数据安全和成本考虑，公司不提倡大范围使用企微在线文档，部门或个人如坚持使用，需自行购买。" },
|
||||
{ title: "企微文档所有者查看方式", content: "文档窗口右上角“三杠”图标" },
|
||||
{ title: "企微文档高级功能购买链接", content: "https://work.weixin.qq.com/mall/wedoc?wws=19" },
|
||||
{ title: "企业微信共享文件删除恢复", content: "路径：微盘→我的文件→左下角三点菜单→回收站→选择文件→还原。" },
|
||||
{ title: "企业微信文档报错“未知错误”", content: "解决方式： 1. 关闭网络代理：Internet选项→连接→局域网设置→取消代理服务器勾选。 2. 更新企业微信版本：左下角“关于”中检查更新。" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "文档中心", icon: "📄",
|
||||
items: [
|
||||
{ title: "Confluence文档中心网址", content: "文档中心 https://docs.dc.servyou-it.com" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "网页浏览", icon: "📄",
|
||||
items: [
|
||||
{ title: "Edge&谷歌浏览器无法打开网页，错误代码: STATUS_STACK_BUFFER_OVERRUN”", content: "【问题原因】 浏览器更新后与税友安全助手组件冲突 【影响范围】 Microsoft Edge 、谷歌浏览器 【处理办法】 下载并安装“浏览器修复补丁”，重启浏览器后即可恢复。 下载地址：浏览器修复补丁" },
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "办公外设", icon: "🖨",
|
||||
subs: [
|
||||
{
|
||||
name: "打印复印", icon: "📄",
|
||||
items: [
|
||||
{ title: "杭州总部刷卡打印机安装", content: "1.登录页面右下角“客户端下载”下载驱动，http://printer.oa.servyou-it.com/printhub/ui/sign/login.htm Windows：选择“柯美原厂驱动” Mac：选择“PrintDriver”， 打印时，Windows用户选择打印机名称 KM_Printer，MAC用户选择打印机名称 FollowMe-Black 输入服务器地址：printer.oa.servyou-it.com:80， 绑定“统一员工账号密码”，填写完成后点击“校验”并确定 3.首次使用刷卡取件，可前往任意楼层刷卡打印机，在提示位置刷卡后，输入员工账号和密码进行认证绑定。 详细操作请参考文档《统一刷卡打印机安装使用说明》统一刷卡打印机安装使用说明 https://doc.weixin.qq.com/doc/w3_APQA0gb5AAgUUYPrXy8QAGRQfMDgx?scode=AAoA1wcYAAcuo1wd2hAPQA0gb5AAg&qt_source=Search&qt_report_identifier=1763972439462&version=5.0..." },
|
||||
{ title: "杭州总部刷卡打印机复印操作", content: "步骤： 1. 刷卡后点击“复印”功能。 2. 按提示操作，完成后取件口取件。 身份证复印支持双面模式。 详细操作请参考文档《统一刷卡打印机安装使用说明》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: "步骤： 1. 刷卡后点击屏幕“扫描”功能。 2. 选择扫描方式：多页用“进纸器”，单页/厚重文件用“平板”。 3. 扫描文件发送至个人邮箱。详情操作参考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”打印机， 打印任务完成后至杭州总部亿企赢大厦彩色打印机放置楼层为5、10、15、20层刷卡取件即可" },
|
||||
{ title: "杭州总部刷卡打印机卡纸、缺墨", content: "总部员工改用其他楼层打印设备，并留言告知异常设备位置，安排处理。" },
|
||||
{ title: "杭州总部刷卡打印机显示未连接", content: "尝试重启电脑后重试打印。" },
|
||||
{ title: "杭州总部刷卡打印机缺纸处理", content: "总部员工可改用其他楼层打印设备，或自行补充备用纸（设备下方防潮柜柜内可取）。部门批量打印需至资产办公室领用。" },
|
||||
{ title: "杭州总部刷卡打印机取件异常", content: "原因一：员工账号密码更新后，客户端密码未同步修改更新。 检测步骤： Windows：任务栏打印机图标（蓝色大拇指）→配置→校验密码。 Mac：应用程序→PrinterLogin→校验账号密码。 原因二：30分钟内未及时取件，打印任务超30分钟未取件自动取消 操作步骤：重新打印，30分钟内取件" },
|
||||
{ title: "总部刷卡打印客户端，配置页面提示“验证失败！用户名或密码错误”", content: "原因：员工账户中心员工密码到期或更新后，刷卡打印客户端未同步更新 处理步骤：更新密码后，点击校验，提示“校验成功！”后，点击确认" },
|
||||
{ title: "总部刷卡打印客户端，配置页面提示“验证失败！用户名或密码错误次数达到系统上限，现已被锁定..."", content: "原因:密码错误输入超过3次 处理步骤：确认员工账号密码正确（可在税友家园、eHR尝试登录），在5分钟后使用正确密码进行校验" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "网络会议", icon: "📄",
|
||||
items: [
|
||||
{ title: "小鱼易连客户端下载", content: "小鱼易连客户端支持Windows、MAC、Linux（统信、麒麟），请根据所运行操作系统选择下载不同客户端。 小鱼易连下载中心：https://www.xylink.com/download" },
|
||||
{ title: "小鱼固定方云会议室预约", content: "操作路径：运行小鱼易连软件→会议→我的会议→新建→预约会议。详情参考《小鱼云会议用户使用指南》。 https://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支持人工坐席处理，请按一下步骤进行操作。 回复“IT”获取桌面IT支持人工支持链接 点击IT支持人工支持链接进入人工坐席咨询窗口 输入需要查询的小鱼固定方会议室号，会议时间区间 耐心等待人工支持坐席回复" },
|
||||
{ title: "小鱼云会议使用方法", content: "详情参考《小鱼云会议用户使用指南》。 https://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 50方：会议号9083284868，密码502892，主持密码625067 100方：会议号9083261987，密码359615，主持密码374852" },
|
||||
{ title: "小鱼直播权限申请", content: "无需申请，新建直播即可，无人数限制。" },
|
||||
{ title: "小鱼云会议室录像和会议统计提取", content: "企业云会议室：登录一站式运维平台-服务目录-IT支持服务-活动与会议支持，支持级别"资料下载“，服务内容“录像下载”或“活动统计”补充信息会议号，以及会议直至时间。 个人云会议室：客户端→文件夹→我的文件夹查看历史录制。正常情况支持人员会在1小时内处理完成，请关注“一站式运维平台”工单完工消息提醒，通过我的工单-我的创建-查看并获取下载链接" },
|
||||
{ title: "企业微信会议（腾讯会议）不可用", content: "受企业微信商业政策调整影响，公司决定2023-8-1停止企业微信会议功能，企微会议功能关闭后，企微音频/视频通话+屏幕分享（企业内限16人，企业外1对1），集团全体员工可使用手机号+短信方式登录使用小鱼易连会议，30方及以下会议可使用小鱼终端号、个人云会议号，>30~100方会议需预约小鱼企业云会议号" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "会议电视", icon: "📄",
|
||||
items: [
|
||||
{ title: "会议室屏幕投屏操作步骤", content: "标准会议室（如：总部办公楼层5~21楼） 使用电视遥控器打开电视 将投屏线（转接头）连接至电脑HDMI|Type-C接口 大型视频会议室（总部409、410） 黑色遥控器打开电视 银色遥控器打开小鱼终端 将投屏器连接至电脑 点击弹出投屏程序，或者运行投屏器存储盘符下的投屏程序 根据提示操作一键投屏 超大型会议室（总部124、126、401、404、405、409） 超大会议室设备使用，请通过“一站式运维平台-IT支持服务-员工服务入口-活动与会议技术支持”提前一天预约现场技术支持" },
|
||||
{ title: "会议室电视机无法开启", content: "1. 近距离使用遥控器重试。 2. 检查电视机背面或侧面电源键。 确认电源连接正常。" },
|
||||
{ title: "会议室HDMI连接线或转接头缺失", content: "请转人工联系“IT”服务号" },
|
||||
{ title: "会议室电视机无法投屏", content: "1. 重新插拔投屏线。 用遥控器切换电视信号源。" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "网络电话", icon: "📄",
|
||||
items: [
|
||||
{ title: "网络电话机故障", content: "拔插电源线，等待3分钟后重插，启动后重试（重启约需1分钟）。" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "碎纸机", icon: "📄",
|
||||
items: [
|
||||
{ title: "碎纸机使用方法", content: "确认碎纸机已通电并处于待机状态，电源指示灯正常亮起。 将待销毁的纸质文件整齐放入进纸口，避免折叠或过厚。 按下“运行”按钮，碎纸机将自动开始工作，直至完成处理。 文件粉碎完成后，机器会自动停止。" },
|
||||
{ title: "碎纸机异常无反应", content: "依次检查电源插头、碎纸箱是否扣紧" },
|
||||
{ title: "碎纸机卡纸处理", content: "单次碎纸上限一般8张普通复印纸，取出卡纸后，插拔电源重新启动" },
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "办公网络", icon: "🌐",
|
||||
subs: [
|
||||
{
|
||||
name: "有线无线", icon: "📄",
|
||||
items: [
|
||||
{ title: "iPad如何连接总部办公WiFi网络", content: "不支持员工认证方式。短期用访客码申请；长期需提交工单“终端设备网络准入申请”加白处理。 http://devops.dc.servyou-it.com/dashboard，服务台-服务目录-IT支持服务-员工服务入口-终端设备网络准入申请" },
|
||||
{ title: "员工手机怎么连接公司内网？", content: "打开手机搜索无线网络 发现并连接servyou网络后，浏览器输入http://www.baidu.com等网址 耐心等待30秒左右，触发弹出账号密码认证界面，依次输入员工账号密码和动态短信验证码登录，确保认证页面自动弹出，不要手动输入网址。 注： 新入职员工，请确认账号信息是否已同步，建议入职次日再尝试连接。 苹果手机请使用QQ浏览器打开认证页面，避免使用Safari。如使用Safari，可尝试点击“显示详细信息”后访问。" },
|
||||
{ title: "手机连接公司网络提示“未获取到手机号，请与管理员联系”", content: "新员工入职当天账号信息未完全同步，需第二天才可正常使用" },
|
||||
{ title: "访客在公司总部如何联网", content: "申请访客码： 1. 临时访客设备连接servyou网络，浏览器弹出认证界面后点击“申请访客码”（有效期24小时）。 2. 拜访对象邮箱收到邮件，点击允许接入。 3. 手机接收访客码并登录。" },
|
||||
{ title: "电脑端税友安全助手登录异常“**认证失败，网络已断开”", content: "原因：账号密码输入错误、密码过期或税友安全助手安装后未重启电脑。 解决： 1. 重置密码： http://192.168.9.87:8080/employee-center/resetPwd.jsp 2. 助手界面点击“注销”，手动重输密码。若无效则需重启电脑。" },
|
||||
{ title: "手机连公司内网异常“账号/密码情误或认证被拒绝!请再次确认验证码，或者重置密码”", content: "确保认证界面自动弹出，勿手动输入网址。建议使用QQ浏览器，Safari可尝试“显示详细信息”后访问。" },
|
||||
{ title: "员工办公电脑总部连接办公网络", content: "步骤： 1. 连接SERVYOU无线或有线网络。 2. 访问192.168.1.53下载安装税友安全助手。 3. 重启电脑后登录助手（账号为邮箱前缀，密码同邮箱）。" },
|
||||
{ title: "互联网部分网页无法访问【Windows】", content: "使用办公网络时，部分网页无法访问，可能因代理服务器设置异常导致。 解决办法： 1.检查DNS设置 右键点击Windows 图标--“网络连接”-打开“更改适配器选项”--选择“以太网”或者“WLAN”-右键“属性”--选择“Internet协议版本 4（TCP/IP4）”-点击“属性”-选择“使用下面的DNS服务器地址”-首选DNS服务器和备用DNS服务器---输入“10.253.0.55”（公司内网专用的 DNS）和“223.5.5.5”（阿里云公共 DNS）—单击“确定”。 2.检查代理设置 以 Edge浏览器为例“菜单>设置>显示高级设置>更改代理设置> LAN 设置 并取消选中”为 LAN 使用代理服务器“复选框。 办公网络异常修复" },
|
||||
{ title: "互联网部分网页无法访问【Mac】", content: "使用办公网络时，部分网页无法访问，可能因代理服务器设置异常导致。 报错信息： 代理服务器出现问题，或者地址有误。 解决办法： 1.检查DNS设置 单击菜单栏右上角的“ Apple”图标，-选择“系统偏好设置”-选择“网络”，点击连接的网络（比如Wi-Fi）--------选择“高级”，在弹出的选框中点击“DNS”选项卡，然后点击左下角【+】图标，手动添加DNS地址。如：10.253.0.55（公司内网专用的 DNS）和223.5.5.5（阿里云公共 DNS）。 2.取消所有代理协议勾选 单击菜单栏右上角的“ Apple”图标，-------选择“系统偏好设置”----------选择“网络”，点击连接的网络，比如是Wi-Fi--------选择“高级”，在弹出的选框中点击“DNS”选项卡，取消所有协议前的勾选项”总部办公互联网出口IP地址 电信：115.227.36.10；联通：180.178.252.186。更新信息见税友家园公告。" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "零信任", icon: "📄",
|
||||
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,点击“连接” 步骤2：客户端登录，提示版本更新，点击“立即更新” 步骤3：等待客户端自动完成更新和安装，完成客户端自动打开新的客户端 步骤4：通过新的客户端sTrust，接入设置输入：https://vpn.servyou.com.cn，点击“确定接入”，然后输入账号密码登录" },
|
||||
{ title: "Mac os操作系统SSLVPN客户端自动升级零信任aTrust指引", content: "Macy原客户端easeconnect首次登录后，会提示版本不匹配，需要下载新版本，下载后双击客户端安装文件完成安装即可。 步骤1：客户端输入https://vpn.servyou.com.cn，会提示版本不匹配，点击“下载更新” 步骤2：跳转的页面点击“立即下载” 步骤3：双击已下载的客户端安装文件，根据提示完成安装 步骤4：客户端安装完成后，新老客户端会同时存在，打开“atrust”客户端，并输入https://vpn.servyou.com.cn登录" },
|
||||
{ title: "atrust客户端无法建立连接？", content: "请按以下步骤排查： 退出客户端重新登录 重启电脑后再次尝试 检查本地网络是否正常 确认未连接其他VPN软件" },
|
||||
{ title: "atrust客户端登录成功后但无法访问内部系统怎么办？", content: "可能原因包括： 本地缓存未刷新 DNS缓存未更新 权限问题 建议： 断开连接后重新登录 执行DNS刷新（Windows：ipconfig /flushdns）" },
|
||||
{ title: "零信任aTrust客户端下载地址", content: "Windows客户端下载： https://atrustcdn.sangfor.com/standard/windows/2.5.16.20/aTrustInstaller.exe Mac客户端下载： https://atrustcdn.sangfor.com/standard/mac/2.5.16.20/aTrustInstaller.pkg 安卓、苹果手机移动客户端下载： 应用商店搜索“aTrust”app" },
|
||||
{ title: "零信任访问非公共资源权限申请", content: "申请路径：打开一张式运维平台-服务目录-IT支持服务-员工零信任账号申请，类型选“权限申请”，根据资源类型选择测试资源或其他资源，其他咨询填写网址/IP/端口。 申请地址：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: "原因一：没有申请过零信任账户，账户不存在 申请方式：登录移动端企业微信，企业微信→工作台→一站式运维平台→服务目录→IT支持服务→员工零信任账号申请。 原因二：密码输入错误、忘记密码或者申请账号后首次登录 解决办法：需登录页https://vpn.servyou.com.cn点击“忘记密码”，用户名使用邮箱前缀，根据提示重置密码 原因三：用户名输入错误或填写了员工账户中心密码 解决办法：零信任账号与员工账户中心账号使用不同身份认证体系，如：aTrust用户名与虽然税友家园、邮箱前缀相同，但深信服aTrust采用独立密码管理规则，重置过程也与统一员工账号密码不同步" },
|
||||
{ title: "零信任（原VPN）登录异常“账号禁用”", content: "360天未登录使用aTrust会导致账号被禁用，登录运维平台-员工零信任账号申请-申请类型“账号解禁" 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: "零信任密码重置“用户信息匹配失败，请联系管理员，...”", content: "申请开通账号（零信任账号并非入职默认开通，如有办公需求，需登录移动端企业微信，企业微信→工作台→一站式运维平台→服务目录→IT支持服务→员工零信任账号申请。） 检查手机号码填写正确，已更换手机号，请提交员工零信任账号申请，备注填写更换的新手机号） 检查用户名是否正确，用户名为邮箱前缀，且字母均为小写" },
|
||||
{ title: "零信任登录异常”账号锁定“", content: "密码输入错误3次后系统锁定账户，不进行任何操作10分钟自动解锁。等待期间勿操作以免重置锁定计时。" },
|
||||
{ title: "零信任员工账号申请", content: "员工可以因出差、居家办公等情况单独申请零信任员工账号。 办公内网申请方式： 一站式运维平台→服务目录→IT支持服务→员工零信任账号申请（http://devops.dc.servyou-it.com） 公司外部申请方式：登录移动端企业微信，企业微信→工作台→一站式运维平台→服务目录→IT支持服务→员工零信任账号申请。 处理同事将会在工作时间1小时内接单，并在当天下班前处理完成，请耐心等待，处理进度请关注“一站式运维平台”企微应用消息提醒。" },
|
||||
{ title: "零信任无法收到验证短信", content: "检查短信应用下所有信息目录，查看是否被垃圾信息、推广信息过滤 重启手机。 3. 机主发送短信“11111”至10690999申请解除黑名单。" },
|
||||
{ title: "零信任验证手机号码更改", content: "通过一站式运维平台提交“员工零信任账号申请”工单，备注新旧手机号。手机端路径：企业微信→工作台→一站式运维平台。" },
|
||||
{ title: "零信任登录提示异常“网络请求异常，请稍后重试”", content: "原因和解决办法： 一般是网络波动导致，切换自己手机热点测试使用。" },
|
||||
{ title: "零信任登录提示异常“路由连接失败”", content: "原因：网络冲突或DNS缓存。 解决： 使用外部网络（如手机热点）测试。 Mac：网络设置中添加DNS 10.253.0.55和223.5.5.5。" },
|
||||
{ title: "零信任登录提示异常“选路连接失败，可能当前连接网络异常，请稍后重试”", content: "服务器地址栏需要完整输入 https://vpn.servyou.com.cn,不能省略https://,也不能填写为http://vpn.servyou.com.cn 因安全和网络原因限制，集团总部（杭州）办公网络禁止连接零信任 部分税局、酒店或其他无线网络波动或限制, 解决方法：可尝试重启电脑后，使用手机热点连接网络，重新登录零信任" },
|
||||
{ title: "零信任aTrust客户端支持桌面操作系统清单", content: "【Windows系统】 Windows 7~11 【Mac os】 MacOS10.13~10.15，Mac11.x~Mac OS 14.x 【Linux/国产系统】 UOS（V20） For X86、ARM、MIPS、Loongarch 麒麟（V10/V10 SP1）For X86、ARM、MIPS 麒麟（V10 SP1）For Loongarch Ubuntu 16、18、20、22、24 For X86 中科方德（5.0-G220/5.0-G220H） For X86、ARM、Loongarch 注意： 已发布版本中，windows11 arm架构的电脑不支持使用工作空间，同时不支持麒麟server系统、中标麒麟系统、deepin系统、centos系统接入。" },
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "终端安全", icon: "🛡",
|
||||
subs: [
|
||||
{
|
||||
name: "税友安全助手", icon: "📄",
|
||||
items: [
|
||||
{ title: "税友安全助手卸载操作", content: "卸载税友安全助手后将无法正常在杭州总部进行网络访问，请确认税友安全助手卸载原因，如：电脑更换、离职、离开杭州总部工作 2.通过以下方式获取卸载动态码 windows系统：下载IT提供卸载助手脚本 https://drive.weixin.qq.com/s?k=AAoA1wcYAAch0J2Cxe，直接双击运行后生成动态码，回复生成的动态码，填入桌面IT支持回复的卸载码进行卸载 mac os系统：右键右上角的安全助手图标，点击卸载，随后提供动态码， 3.将生成的动态码，通过智能IT助手 人工服务，提供生成的动态码，获取回复的卸载码进行卸载" },
|
||||
{ title: "Window系统下载安装“税友安全助手”", content: "步骤： 连接servyou网络，访问http://192.168.1.53 ，员工电脑通道-点击提示链接，下载安装“税友安装助手”。 2. 安装后重启电脑，在任务栏右下角打开助手登录。 税友安全助手下载链接 http://192.168.1.53:8099/portal/redirect/nacc/" },
|
||||
{ title: "MAC OS系统下载安装“税友安全助手", content: "步骤： 1. 连接servyou网络，访问http://192.168.1.53/portal/redirect/nacc/下载。 2. 根据系统版本选择安装项（如MAC OS 14以上选70133）。 3. 运行安装程序，按系统提示授权（点击“是”/“仍要打开”）。 4. 输入开机密码（盲输），完成安装后重启电脑。" },
|
||||
{ title: "税友安全助手打开方式和查看运行状态图标", content: "Windows系统：右下角任务栏图标；Mac：右上角菜单栏图标。" },
|
||||
{ title: "Mac OS系统安装税友助手报错“身份不明的开发者”", content: "解决： 1. 系统偏好设置→安全性与隐私→允许安装。 2. 输入开机密码（盲输），完成安装后重启。" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "火绒安全", icon: "📄",
|
||||
items: [
|
||||
{ title: "火绒安全终端下载安装", content: "火绒安全是公司指定使用的杀毒软件，请根据情况选择安装版本： 总部员工：请选择火绒终端安全企业版，下载地址： Windows系统： http://huorong.oa.servyou-it.com/deploy/installer.exe MacOS系统： http://huorong.oa.servyou-it.com/deploy/mac-inst.dmg 安装过程中控制中心地址设置： http://huorong.oa.servyou-it.com:80 区域员工：请选择火绒安全软件个人版 Windows系统 https://www.huorong.cn/person5.html" },
|
||||
{ title: "火绒安全如何卸载", content: "火绒安全卸载：向IT支持人工说明卸载原因获取输入卸载码，打开Windows系统控制面板-程序和功能，选择火绒终端安全管理系统安全终端-右键卸载，输入获取的卸载码" },
|
||||
{ title: "火绒安全如何退出", content: "向IT支持人工说明退出原因获取卸载密码(火绒安全管理员密码)，屏幕右下角火绒图标，点击“退出火绒”" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "员工账户中心", icon: "📄",
|
||||
items: [
|
||||
{ title: "员工账户密码重置和修改", content: "步骤： 1. 访问http://192.168.9.87:8080/employee-center/resetPwd.jsp重置，密码需10位以上含大小写字母、数字、符号中的三种。 2. 同步修改本地客户端（如总部刷卡打印机客户端、税友安全助手）密码。 3.如不确认原密码或者原密码忘记，重置方式请选择“短信验证码重置” 注意事项 -员工账户密码有效期为90天，密码到期前3天会通过消息进行提醒，到期后未更新将重置为随机密码，需通过短信验证码重置方式找回 -已经无法联网情况，可以借用同事电脑或者通过手机热点连接零信任后执行密码修改操作 -使用独立密码的零信任和邮件客户端，无需修改重置" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "风险应对", icon: "📄",
|
||||
items: [
|
||||
{ title: "终端安全风险预警", content: "如果您遇到网络诈骗、网络攻击、恶意病毒、钓鱼邮件、账号被盗、信息泄露等安全问题，或已点击链接，请立即点击链接向“信息安全支持”进行反馈.https://work.weixin.qq.com/nl/innerkfid/ikfCtcYBwAAtkP_ODMcv53bGE5x5M9YYw" },
|
||||
{ title: "重大安全活动相关信息和管理要求", content: "活动期间禁用社交软件，公共服务策略调整详见公告链接。 活动时间以税友家园通知为准，或咨询“信息安全支持”服务号" },
|
||||
{ title: "重大安全活动期间软件限制“微信无法登录“", content: "本答案适用于重大安全活动期间，当前时期可能不适用，活动期间范围请关注税友家园公告 活动期间禁止使用微信/QQ/脉脉等，需通过工单申请特殊权限。 申请路径：一站式运维平台→集团内部服务→其他服务→办公及远程接入网络安全策略申请。https://devops.dc.servyou-it.com/itsm/service/workbench =gf4ljb 如有疑问请联系企业微信“员工服务-信息安全支持”" },
|
||||
{ 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 向日葵软件下载地址：https://sunlogin.oray.com/download" },
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "资产管理", icon: "📊",
|
||||
subs: [
|
||||
{
|
||||
name: "硬件资产", icon: "📄",
|
||||
items: [
|
||||
{ title: "个人名下公司资产及资产详细信息查询", content: "方式一：登录eHR系统，进入“个人信息-个人固定资产”页面，可查询领用设备清单、资产名称、资产编号、规格 方式二：查看设备固定资产标签，一般在设备底部或侧边，包含资产名称、启用时间、资产编号、型号" },
|
||||
{ title: "办公电脑升级和汰换流程", content: "操作步骤： 1.自行提交“IT资产升级申请”，申请流程路径：企业微信-工作台-审批-IT资产升级申请 2.审批通过后，总部同事至122室办理；区域同事联系当地资产管理员。 注意事项： 升级申请内存、硬盘、显示器，其容量、尺寸和型号需符合《IT资产配置标准》中的岗位要求，特殊超标申请需部门领导审批。 办公电脑启用时间达到五年，可以申请整机汰换（Mac电脑汰换周期暂定未8年） 《IT资产配置标准》文档链接：https://oa.servyou-it.com/spa/document/index.jsp?id=3471&router=1#/main/document/detail" },
|
||||
{ title: "公司领用办公电脑使用或启用年限已满5年，可以申请延期使用吗？", content: "公司电脑启用年限满5年不是强制汰换要求，可以继续使用，无需办理延期申请." },
|
||||
{ title: "办公IT资产借用/退还", content: "可借用设备类型：办公电脑、显示器、小鱼会议终端、会议音箱 申请审批流程入口：企业微信-审批-资产借用申请 领取/退还地点： 总部同事至税友亿企赢大厦122室办理； 区域同事联系当地资产管理员。" },
|
||||
{ title: "办公IT资产领用/退还", content: "可领用设备类型：办公电脑、显示器、键盘、鼠标、网线、话机 申请审批流程入口：企业微信-审批-资产领用申请 注：键盘、鼠标、网线、话机等低值易耗品无需提交申请流程 领取/退还地点： 总部同事至税友亿企赢大厦122室办理； 区域同事联系当地资产管理员。" },
|
||||
{ title: "系统维修工具借用", content: "借用工具类型：系统安装U盘、螺丝刀、移动硬盘（盒） 借用流程： 1.回复“IT”获取桌面IT支持人工支持链接 2.点击IT支持人工支持链接进入人工坐席咨询窗口 3.说明需要借用的工具类型、使用地点、使用时间 4.耐心等待人工支持坐席回复，确认设备库存。 5.总部员工前往121室进行借用登记，区域同事联系资产管理员" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "软件资产", icon: "📄",
|
||||
items: [
|
||||
{ title: "公司限制使用的商业软件清单", content: "正版化严控清单（包括但不限于）： Xshell/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: "公司实行软件正版化管理，收费软件需经需求评估后安装。 替代方案：建议使用VirtualBox。 资源包下载（含Win7/Win10纯净版及VB安装包）： 链接：https://pan.baidu.com/s/1ly-3vDMOh48yRXRo-b-hBg 提取码：serv 安装指南：在VirtualBox中通过“管理→导入虚拟电脑”直接导入系统。" },
|
||||
{ title: "visio软件使用限制与替代方案", content: "公司实行软件正版化管理，收费软件需经需求评估后安装。 替代方案： 1. 仅需读取Visio文档：使用Microsoft Visio查看器（https://www.microsoft.com/zh-cn/download/confirmation.aspx?id=51188 ）。 2. 需编辑文档且可接受非vsdx格式：使用ProcessOn在线工具（https://www.processon.com/i/5c99dd75e4b0180f6ee6c615 ）。注：敏感信息勿用。 3. 必须输出vsdx格式（如外部分享）：走正式审批流程，路径：企业微信→工作台→审批→商业软件服务申请，费用2040元由部门分摊，需事业部总经理审批。" },
|
||||
{ title: "微软office软件使用限制与替代方案", content: "公司推行软件正版化政策，禁止安装盗版软件。安装Microsoft Office需部门分摊费用3070元，申请流程： 路径：企业微信→工作台→审批→商业软件服务申请。 审批要求：需事业部总经理批准。 建议：若无特殊需求，优先安装WPS作为替代方案。" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "自备电脑", icon: "📄",
|
||||
items: [
|
||||
{ title: "自备电脑申请及审核", content: "步骤： 1. 确认岗位在《自备电脑补贴岗位清单》内。 2. 电脑配置需高于公司标准。 3. eHR系统→流程申请→自备电脑使用申请/变更，提交购买凭证。 4. 半工作日内完成配置审核。详情见《自备电脑使用及补贴管理办法》。 详情请查看《自备电脑使用及补贴管理办法》 https://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 https://newthink.lenovo.com.cn/guarantee.html?v=329b114e91fec9e2336126dfd1b6ff42 Dell 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/ HP https://support.hp.com/cn-zh/document/ish_289876..." },
|
||||
{ title: "自备电脑补贴岗位是如何设定的？", content: "自备电脑补贴岗位范围，是针对对电脑性能有较高性能需求技术岗位，以及部分特殊需求岗位；对于这部分性能要求较高的开发和测试岗位，一方面我们提高了这些岗位公司配发电脑标准，同时保留了自备电脑补充策略供员工自由选择" },
|
||||
{ title: "自备电脑管理办法提到较高性能的技术岗位是如何确定的？", content: "根据总部历年员工满意度调查中员工反馈，以及IT资产配置标准评估过程中电脑内存CPU报警统计信息，开发和测试岗位所使用电脑的CPU和内存报警次数和时长远高于其他岗位（80%内存CPU报警阈值），开发和测试类岗位与其他岗位相比，对电脑性能有明显较高要求。" },
|
||||
{ title: "自备电脑补贴岗位以后还会有新增或变更吗？", content: "参考《IT资产配置标准》中岗位与设备变更和执行反馈意见，由管理部门共同商议修订，并在EHR系统同步更新。" },
|
||||
{ title: "自备电脑配置是否符合IT资产配置标准如何判断？", content: "自备电脑配置审核标准要求，主要看配置是否达到购买日期或补贴发放历史年度IT资产配置标准 ●当前自备电脑配置需满足任职岗位的当前公司配发电脑配置最低标准 ●CPU主要看是否同级&同代（i3\\i5\\i7\\i9）同代（八代、十代、11代、12代...）,跨级跨带可酌情增加和降低审核标准（每相差1年一代按1年累积计算）。 ●内存和硬盘不符情况下，可提供升级后的配置信息截图或升级配件购买记录" },
|
||||
{ title: ""自备电脑补贴到期截止时间是怎么计算的？", content: "●6/10前所有现有领取补贴员工需进行登记，不登记电脑信息，不发放补贴 ●当前使用自备电脑购买日期<5年，补贴领取截止时间为当前使用电脑从购买之日起5年 ●当前使用自备电脑购买日期>5年，停止补贴发放 ●非补贴岗位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: "其他业务", icon: "📋",
|
||||
subs: [
|
||||
{
|
||||
name: "活动支持", icon: "📄",
|
||||
items: [
|
||||
{ title: "会议室预定", content: "总部会议室：企业微信→工作台→“会议室预定”应用。 区域会议室（北京/石家庄等）：企业微信→工作台→“会议室”应用。" },
|
||||
{ title: "活动与会议技术支持预约", content: "提交预约工单（需至少提前1天）：https://oa.servyou-it.com/spa/portal/static/index.html#/main/portal/portal-8-34 ，选择“重要活动支持预约”。" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "党工", icon: "📄",
|
||||
items: [
|
||||
{ title: "税友家园", content: "税友家园网址： https://oa.servyou-it.com 账号密码认证方式：统一员工账号密码 税友家园登录异常 情况一：新员工入职次日方可登录，请耐心等待。 情况二：账号密码错误，通过重置密码解决（http://192.168.9.87:8080/employee-center/resetPwd.jsp）。" },
|
||||
{ title: "官网地址", content: "税友集团官网地址：https://www.servyou.com.cn 亿企赢官网地址：https://www.17win.com 亿企鑫福官网地址：https://17xinfu.com" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "人力资源", icon: "📄",
|
||||
items: [
|
||||
{ title: "人力相关问题咨询（考勤、薪资、保险等）", content: "通过企业微信→员工服务→“人力资源共享服务咨询”联系人力资源部门。https://work.weixin.qq.com/nl/innerkfid/ikfCtcYBwAAvSRL5i5b_Xia8vCmFc2gRw" },
|
||||
{ title: "人力资源管理平台", content: "人力资源管理平台别名：税友eHR、EHR 网站地址： https://ehr.dc.servyou-it.com 应用路径：企业微信-工作台-税友eHR 账号密码认证方式：统一员工账号密码，账号同企业邮箱的前缀" },
|
||||
{ title: "员工个人手机号更改", content: "联系HR在EHR系统中修改。通过企业微信→员工服务→“人力资源共享服务咨询”联系人力资源部门。https://work.weixin.qq.com/nl/innerkfid/ikfCtcYBwAAvSRL5i5b_Xia8vCmFc2gRw" },
|
||||
{ title: "网络学院相关信息", content: "企业微信入口（推荐方式）： 企业微信-工作台-网络学院 电脑端访问：https://servyoulearning.yunxuetang.cn 手机端链接：https://servyoulearning.yunxuetang.cn/m 新入职当日13:00后生成账号，若无法登录请次日重试。 实习生无网络学院账号，会定期禁用，转正后可以进入学习。 如有网络学院相关疑问可咨询刘馨月。" },
|
||||
{ title: "新员工入职IT指引手册获取", content: "新员工入职IT指引手册/指南地址：https://doc.weixin.qq.com/doc/w3_AU8AjwZhAIgyNSkHK3OTjWueJe1oa?scode=AAoA1wcYAAcD09JltaAQgAuAYMANY" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "财务", icon: "📄",
|
||||
items: [
|
||||
{ title: "财务工作相关问题", content: "请联系财务中心或企业微信→员工服务→“总部报销服务台”。 常见问题参考： 财务软件安装：参考《财务人员工作环境安装指南》。 差旅报销：通过企业微信→通讯录→员工服务→“总部报销服务台”咨询。 金蝶EAS打印中断：重启软件或电脑后重试。 金蝶安装：方式一：访问 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”。 解决步骤： 1. 清理缓存：企业微信APP→头像→设置→通用→存储空间→清理缓存。 退出并重新登录企业微信。" },
|
||||
{ title: "手机企微滴滴打车权限开通/管理", content: "企微联系应用管理员：刘红霞" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "物业", icon: "📄",
|
||||
items: [
|
||||
{ title: "物业服务相关问题（工牌、门禁、停车等）", content: "联系人指引： 咖啡馆/食堂超市：于闻婧 停车/保洁：谭欣 补卡/餐卡：陈乐 三楼食堂包厢：王蕊 会议接待：袁丽丽 其他问题：咨询物业服务号。https://work.weixin.qq.com/nl/innerkfid/ikfCtcYBwAAUtkMyOToCZqe42ZBDupVEQ" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "运维", icon: "📄",
|
||||
items: [
|
||||
{ title: "一站式运维平台综合信息", content: "登录地址： http://devops.dc.servyou-it.com 一站式运维平台使用统一员工账号密码+短信认证 运维平台相关问题请咨询企业微信联系【员工服务号：工单系统技术支持】如：运维平台无法登录 运维平台账号密码登录二次认证密码获取方法详见：运维平台登录说明https://doc.weixin.qq.com/doc/w3_AM4AvwYHAKkhd6GOfh1SAe8ID9Kbv?scode=AAoA1wcYAAcl8IQiqyAM4AvwYHAKk&qt_source=Search&qt_report_identifier=1764050011765&version=5.0.2.6008&platform=win 维平台企微认证免扫描失效处理： chrome浏览器输入网址chrome://flags/#block-insecure-private-network-requests，搜索 Local Network Access Checks，改成Disabled edge浏览器输入网址edge://flags/#block-insecure-private-net..." },
|
||||
{ title: "JumpServer堡垒机综合信息", content: "堡垒机访问权限申请：通过一站式运维系统提交申请，紧急情况联系工单处理人。 http://devops.dc.servyou-it.com/itsm/service/workbench" },
|
||||
{ title: "GitLab相关问题", content: "1. 账号锁定：5分钟后自动解锁；若忘记密码，请通过“员工账号密码重置”功能操作。 2. 二次验证码手机更换：联系吴云鹏修改。 3. 系统后台问题：联系吴云鹏处理。" },
|
||||
{ title: "阿里云综合信息", content: "1.阿里云账号问题咨询：方笑 2.阿里云账号验证mfa：陈伟章" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "产研", icon: "📄",
|
||||
items: [
|
||||
{ title: "Walle瓦力平台综合信息", content: "平台介绍： walle 是提供集 接口文档自动生成、接口文档查看、接口调试、接口Mock、接口测试用例、接口调用代码生成、对外提供在线/离线文档 等功能的 自动化、智能化的综合性接口管理平台。可以提升研发接口开发中各阶段的效率与减少协作时的沟通成本，并助力团队制定符合团队的研发流程与规范。适合公司 GB 端及各分公司研发同学使用。 功能介绍： 接口生成与使用流程图 平台账号密码： 访问 walle 平台, 使用线上的 员工邮箱前缀 、 邮箱密码 登录 (eg: 账号 liaobl， 密码：xxxxxx), 可以在 全部项目 页面 查看所有项目, 可以随意查看项目的接口文档，如果需要创建项目或对接口进行调试、Mock、修改等操作，需要找【于程程】或项目负责人 添加权限 联系支持： 使用过程有任何问题或者需求的可以直接联系[于程程]，如：更换手机、需要获取新的二次认证二维码等 如需及时了解 walle 平台的更新状态，可加入 【Walle 金牌服务群】，入群请联系[于程程]发送入群邀请" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "运营", icon: "📄",
|
||||
items: [
|
||||
{ title: "税友内管系统综合信息", content: "别名：小蚂蚁、小蜜蜂 客户端不支持苹果操作系统安装运行 税友内管系统客户端下载地址：https://drive.weixin.qq.com/s?k=AAoA1wcYAAcLEI7DnM 内管系统咨询支持：倪银飞。" },
|
||||
{ title: "基础运营平台综合信息", content: "基础运营平台别名BOSS 基础运营平台地址：https://boss.dc.servyou-it.com/#/ 账号密码认证方式:统一员工账号密码 登录提示账号密码错误： 优先检查账号密码是否过期 检查电脑右下角系统时间是否准确，若时间存在偏差，请手动同步时间" },
|
||||
{ title: "快速查数工具综合信息", content: "快速查数工具别名QQT 账号密码登录：账号密码与内部统一员工账密一致。 使用问题咨询：联系公共数据团队：李晓刚（17682348007）、朱文赵（15088664612）。如：若二次认证失败 报表权限开通：查询广场-选择对应报表操作列“申请”按钮，报表管理员会进行审批。" },
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,922 @@
|
||||
[
|
||||
{
|
||||
"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报表权限开通：查询广场-选择对应报表操作列“申请”按钮，报表管理员会进行审批。"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user