feat: 2026-07-11 全量更新 - 代办集成+会议室预定+知识迭代修复+UI统一+Bug修复
== 已部署上线 (9项) == - 代办事项真实数据源集成 (企微审批API 8bug修复链) - H5/坐席端 Logo样式统一+绿色背景 - 视频引导页修复 (localStorage key v2) - 坐席端 v9 Vue版本修复 (ElMessage._context) - 截图按钮 v10 修复 (getDisplayMedia user gesture) - 扫码样式恢复+H5扫码登录跳转修复 - H5截图快捷键提示 == 代码完成待部署 (3项) == - 知识迭代3Bug修复 (#8 POST端点/#7 MERGE幂等/#6 过期检查) - 会议室预定-小鱼易联终端 (40文件, 40/40测试通过) - IT资产升级审批推送 (asset_service.py) == 需求文档 (2项) == - 坐席端AI辅助消息框-PRD (4项新功能确认) - 坐席端布局优化建议 v2.0 (7天计划) == 新增文档 == - 日报-2026-07-11.md - 知识迭代Bug修复报告-20260711.md - 会议室预定-部署指南.md - CHANGELOG.md 更新 == 测试 == - test_todo_integration.py: 40/40 - test_meetingroom.py: 40/40 - test_bugfix_ki_suggestions.py: 21/21
This commit is contained in:
Simon
@@ -0,0 +1,365 @@
|
||||
<!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;
|
||||
--warning: #faad14;
|
||||
}
|
||||
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;
|
||||
padding: 20px;
|
||||
}
|
||||
.bind-card {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
background: var(--card-bg);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.1);
|
||||
padding: 40px 32px;
|
||||
}
|
||||
.logo {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: linear-gradient(135deg, #07C160 0%, #06ad56 100%);
|
||||
border-radius: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.logo-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.logo-subtitle {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.warning-box {
|
||||
background: #fff7e6;
|
||||
border: 1px solid #ffd591;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.warning-box i {
|
||||
color: var(--warning);
|
||||
font-size: 18px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.warning-text {
|
||||
font-size: 13px;
|
||||
color: #d48806;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.user-info {
|
||||
background: #f8f9fa;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.user-avatar {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.user-name {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.user-corp {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.form-control {
|
||||
height: 46px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
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);
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
border: none;
|
||||
height: 46px;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
.btn-outline {
|
||||
border: 1px solid var(--border);
|
||||
background: white;
|
||||
color: var(--text);
|
||||
height: 46px;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.btn-outline:hover {
|
||||
background: #f8f9fa;
|
||||
border-color: var(--text-secondary);
|
||||
}
|
||||
.bind-option {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.option-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.radio-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.radio-card:hover {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.radio-card.selected {
|
||||
border-color: var(--primary);
|
||||
background: rgba(7,193,96,0.05);
|
||||
}
|
||||
.radio-card input {
|
||||
display: none;
|
||||
}
|
||||
.radio-card .radio-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.radio-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.radio-card.selected .radio-icon {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.radio-card.selected .radio-icon::after {
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: var(--primary);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.radio-text {
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
}
|
||||
.radio-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 4px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20px 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;
|
||||
}
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 480px) {
|
||||
.bind-card {
|
||||
padding: 28px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bind-card">
|
||||
<!-- Logo 区域 -->
|
||||
<div class="logo">
|
||||
<div class="logo-icon">
|
||||
<i class="fas fa-link"></i>
|
||||
</div>
|
||||
<div class="logo-title">账号绑定</div>
|
||||
<div class="logo-subtitle">首次登录，请绑定您的账号</div>
|
||||
</div>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<div class="warning-box">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<div class="warning-text">
|
||||
检测到您来自外部企业，请绑定您在系统中的账号以继续使用
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 扫码用户信息 -->
|
||||
<div class="user-info">
|
||||
<div class="user-avatar">
|
||||
<i class="fas fa-user"></i>
|
||||
</div>
|
||||
<div class="user-name">张三 (zhangsan)</div>
|
||||
<div class="user-corp">外部企业：XX集团</div>
|
||||
</div>
|
||||
|
||||
<!-- 绑定方式选择 -->
|
||||
<div class="bind-option">
|
||||
<div class="option-title">请选择绑定方式</div>
|
||||
|
||||
<label class="radio-card selected">
|
||||
<input type="radio" name="bindType" value="existing" checked>
|
||||
<div class="radio-content">
|
||||
<div class="radio-icon"></div>
|
||||
<div>
|
||||
<div class="radio-text">绑定已有账号</div>
|
||||
<div class="radio-desc">输入您在系统中的员工号或工号</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="radio-card">
|
||||
<input type="radio" name="bindType" value="new">
|
||||
<div class="radio-content">
|
||||
<div class="radio-icon"></div>
|
||||
<div>
|
||||
<div class="radio-text">申请新账号</div>
|
||||
<div class="radio-desc">联系管理员审批后开通</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- 绑定已有账号表单 -->
|
||||
<div id="existingForm">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">员工号 / 工号</label>
|
||||
<input type="text" class="form-control" placeholder="请输入您的员工号或工号">
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<i class="fas fa-link me-2"></i>立即绑定
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 申请新账号表单（隐藏） -->
|
||||
<div id="newForm" style="display: none;">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">真实姓名</label>
|
||||
<input type="text" class="form-control" placeholder="请输入您的真实姓名">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">所属部门</label>
|
||||
<input type="text" class="form-control" placeholder="请输入您所在的部门">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">联系电话</label>
|
||||
<input type="tel" class="form-control" placeholder="请输入您的联系电话">
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<i class="fas fa-paper-plane me-2"></i>提交申请
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="divider">
|
||||
<span>或</span>
|
||||
</div>
|
||||
|
||||
<!-- 返回登录 -->
|
||||
<button class="btn btn-outline" onclick="history.back()">
|
||||
<i class="fas fa-arrow-left me-2"></i>返回登录
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 绑定方式切换
|
||||
const radioCards = document.querySelectorAll('.radio-card');
|
||||
const existingForm = document.getElementById('existingForm');
|
||||
const newForm = document.getElementById('newForm');
|
||||
|
||||
radioCards.forEach(card => {
|
||||
card.addEventListener('click', function() {
|
||||
// 更新选中状态
|
||||
radioCards.forEach(c => c.classList.remove('selected'));
|
||||
this.classList.add('selected');
|
||||
|
||||
// 切换表单
|
||||
const value = this.querySelector('input').value;
|
||||
if (value === 'existing') {
|
||||
existingForm.style.display = 'block';
|
||||
newForm.style.display = 'none';
|
||||
} else {
|
||||
existingForm.style.display = 'none';
|
||||
newForm.style.display = 'block';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,236 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,164 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,209 +0,0 @@
|
||||
<!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 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
@@ -1,749 +0,0 @@
|
||||
<!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
@@ -0,0 +1,472 @@
|
||||
<!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>员工名片卡片原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
|
||||
background: #ededed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.phone-frame {
|
||||
width: 375px;
|
||||
background: #ededed;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.nav-bar {
|
||||
background: #f7f7f7;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.nav-bar .title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.nav-bar .back {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
font-size: 15px;
|
||||
color: #07C160;
|
||||
}
|
||||
|
||||
/* 聊天区域 */
|
||||
.chat-area {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
/* 时间戳 */
|
||||
.time-stamp {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
/* 消息行 */
|
||||
.msg-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.msg-row.agent { flex-direction: row; }
|
||||
.msg-row.user { flex-direction: row-reverse; }
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.avatar.agent { background: #07C160; }
|
||||
.avatar.user { background: #5d9cec; }
|
||||
|
||||
.msg-content {
|
||||
max-width: 260px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.msg-row.user .msg-content { align-items: flex-end; }
|
||||
|
||||
.sender-name {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 2px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
word-break: break-word;
|
||||
position: relative;
|
||||
}
|
||||
.agent .bubble {
|
||||
background: #fff;
|
||||
color: #1a1a1a;
|
||||
border-top-left-radius: 2px;
|
||||
}
|
||||
.user .bubble {
|
||||
background: #95EC69;
|
||||
color: #1a1a1a;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
/* === 员工名片卡片 === */
|
||||
.contact-card {
|
||||
width: 260px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border-top-left-radius: 2px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 14px 16px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.card-avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.card-avatar.wang { background: linear-gradient(135deg, #667eea, #764ba2); }
|
||||
.card-avatar.li { background: linear-gradient(135deg, #f093fb, #f5576c); }
|
||||
.card-avatar.zhao { background: linear-gradient(135deg, #4facfe, #00f2fe); }
|
||||
|
||||
.card-name-row {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.card-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.card-name .gender {
|
||||
font-size: 12px;
|
||||
color: #4facfe;
|
||||
}
|
||||
.card-dept {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
.card-info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 0;
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
}
|
||||
.card-info-item .label {
|
||||
color: #aaa;
|
||||
width: 56px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.card-info-item .value {
|
||||
color: #333;
|
||||
}
|
||||
.card-info-item .value.responsibility {
|
||||
color: #07C160;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 0 16px 12px;
|
||||
}
|
||||
.card-action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
background: #07C160;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.card-action-btn:active { opacity: 0.85; }
|
||||
.card-action-btn .icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 名片类型标识 */
|
||||
.card-type-badge {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
background: #f0f0f0;
|
||||
color: #888;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* 底部输入栏 */
|
||||
.input-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 375px;
|
||||
background: #f7f7f7;
|
||||
border-top: 1px solid #dcdcdc;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
z-index: 10;
|
||||
}
|
||||
.input-bar input {
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
padding: 0 12px;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
}
|
||||
.input-bar .send-btn {
|
||||
background: #07C160;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 0 16px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Toast 提示 */
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0,0,0,0.75);
|
||||
color: #fff;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
z-index: 999;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
pointer-events: none;
|
||||
max-width: 280px;
|
||||
text-align: center;
|
||||
}
|
||||
.toast.show { opacity: 1; }
|
||||
|
||||
/* 系统消息 */
|
||||
.system-msg {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #b0b0b0;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.system-msg span {
|
||||
background: #e8e8e8;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-frame">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="nav-bar">
|
||||
<span class="back">← 返回</span>
|
||||
<span class="title">IT智能服务台</span>
|
||||
</div>
|
||||
|
||||
<!-- 聊天区域 -->
|
||||
<div class="chat-area">
|
||||
|
||||
<!-- 时间戳 -->
|
||||
<div class="time-stamp">今天 01:08</div>
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<div class="msg-row user">
|
||||
<div class="avatar user">宋</div>
|
||||
<div class="msg-content">
|
||||
<div class="bubble">我的电脑连不上打印机了</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 坐席/AI回复 -->
|
||||
<div class="msg-row agent">
|
||||
<div class="avatar agent">AI</div>
|
||||
<div class="msg-content">
|
||||
<div class="sender-name">IT智能助手</div>
|
||||
<div class="bubble">
|
||||
您好，打印机问题属于行政设备范畴，不在IT服务台服务范围内 😊
|
||||
<br><br>
|
||||
为您推荐行政服务相关联系人，您可以直接点击名片联系TA：
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 名片卡片1 -->
|
||||
<div class="msg-row agent">
|
||||
<div class="avatar agent">AI</div>
|
||||
<div class="msg-content">
|
||||
<div class="contact-card" onclick="showToast('正在打开与 王芳 的企微聊天...')">
|
||||
<div class="card-header">
|
||||
<div class="card-avatar wang">王</div>
|
||||
<div class="card-name-row">
|
||||
<div class="card-name">
|
||||
王芳
|
||||
<span class="gender">♀</span>
|
||||
</div>
|
||||
<div class="card-dept">行政部 · 设备管理岗</div>
|
||||
</div>
|
||||
<span class="card-type-badge">员工名片</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-info-item">
|
||||
<span class="label">负责业务</span>
|
||||
<span class="value responsibility">打印机/复印机/扫描仪</span>
|
||||
</div>
|
||||
<div class="card-info-item">
|
||||
<span class="label">分机号</span>
|
||||
<span class="value">8002</span>
|
||||
</div>
|
||||
<div class="card-info-item">
|
||||
<span class="label">服务区域</span>
|
||||
<span class="value">滨江园区 3-5楼</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="card-action-btn" onclick="event.stopPropagation(); showToast('调用 wx.invoke(\"openEnterpriseChat\", {userids: \"WangFang\"}) → 打开与王芳的企微单聊')">
|
||||
<span class="icon">💬</span>
|
||||
<span>联系TA</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 系统提示 -->
|
||||
<div class="system-msg">
|
||||
<span>以上为AI自动推荐，点击名片可直接发起企微聊天</span>
|
||||
</div>
|
||||
|
||||
<!-- 名片卡片2（多推荐场景） -->
|
||||
<div class="msg-row user">
|
||||
<div class="avatar user">宋</div>
|
||||
<div class="msg-content">
|
||||
<div class="bubble">我的工牌丢了，补办找谁？</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg-row agent">
|
||||
<div class="avatar agent">AI</div>
|
||||
<div class="msg-content">
|
||||
<div class="sender-name">IT智能助手</div>
|
||||
<div class="bubble">
|
||||
工牌补办属于人力资源服务，为您推荐HR联系人：
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HR名片 -->
|
||||
<div class="msg-row agent">
|
||||
<div class="avatar agent">AI</div>
|
||||
<div class="msg-content">
|
||||
<div class="contact-card" onclick="showToast('正在打开与 李娜 的企微聊天...')">
|
||||
<div class="card-header">
|
||||
<div class="card-avatar li">李</div>
|
||||
<div class="card-name-row">
|
||||
<div class="card-name">
|
||||
李娜
|
||||
<span class="gender" style="color:#f5576c">♀</span>
|
||||
</div>
|
||||
<div class="card-dept">人力资源部 · 员工服务岗</div>
|
||||
</div>
|
||||
<span class="card-type-badge">员工名片</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-info-item">
|
||||
<span class="label">负责业务</span>
|
||||
<span class="value responsibility">工牌补办/考勤异常/入职手续</span>
|
||||
</div>
|
||||
<div class="card-info-item">
|
||||
<span class="label">分机号</span>
|
||||
<span class="value">8005</span>
|
||||
</div>
|
||||
<div class="card-info-item">
|
||||
<span class="label">办公地点</span>
|
||||
<span class="value">滨江园区 A栋3楼</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="card-action-btn" onclick="event.stopPropagation(); showToast('调用 wx.invoke(\"openEnterpriseChat\", {userids: \"LiNa\"}) → 打开与李娜的企微单聊')">
|
||||
<span class="icon">💬</span>
|
||||
<span>联系TA</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部输入栏 -->
|
||||
<div class="input-bar">
|
||||
<input type="text" placeholder="输入消息..." disabled>
|
||||
<button class="send-btn">发送</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
function showToast(msg) {
|
||||
const toast = document.getElementById('toast');
|
||||
toast.textContent = msg;
|
||||
toast.classList.add('show');
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show');
|
||||
}, 2500);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,807 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,744 +0,0 @@
|
||||
<!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,653 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
background: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* === 左侧会话列表（模拟） === */
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
background: #fff;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sidebar-header {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
.conv-item {
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.conv-item:hover { background: #f5f5f5; }
|
||||
.conv-item.active { background: #e6f7ff; border-left: 3px solid #07C160; }
|
||||
.conv-avatar {
|
||||
width: 40px; height: 40px; border-radius: 4px;
|
||||
background: #ccc; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #fff; font-size: 16px;
|
||||
}
|
||||
.conv-info { flex: 1; min-width: 0; }
|
||||
.conv-name { font-size: 14px; color: #333; font-weight: 500; }
|
||||
.conv-preview { font-size: 12px; color: #999; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* === 右侧聊天区域 === */
|
||||
.chat-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f5f5f5;
|
||||
min-width: 0;
|
||||
}
|
||||
.chat-header {
|
||||
height: 56px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
gap: 12px;
|
||||
}
|
||||
.chat-title { font-size: 16px; font-weight: 600; color: #333; }
|
||||
.chat-subtitle { font-size: 12px; color: #999; }
|
||||
|
||||
/* === 参与者缩略条 === */
|
||||
.participant-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 20px;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.participant-bar:hover { background: #f0f0f0; }
|
||||
|
||||
.bar-avatars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 头像基础样式 */
|
||||
.avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
border: 1.5px solid transparent;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.avatar + .avatar { margin-left: -4px; }
|
||||
|
||||
/* 角色边框色 */
|
||||
.avatar.role-primary { border-color: #3b82f6; }
|
||||
.avatar.role-collaborator { border-color: #07C160; }
|
||||
.avatar.role-owner { border-color: #FF9800; }
|
||||
.avatar.role-invitee { border-color: transparent; }
|
||||
|
||||
/* 自己高亮环 */
|
||||
.avatar.is-self {
|
||||
box-shadow: 0 0 0 2px #07C160;
|
||||
transform: scale(1.1);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* 超员 +N */
|
||||
.avatar-more {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #e0e0e0;
|
||||
color: #666;
|
||||
font-size: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: -4px;
|
||||
border: 1.5px solid #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 待加入红点 */
|
||||
.avatar-wrap { position: relative; display: inline-flex; }
|
||||
.pending-dot {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #ee0a24;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-left: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.bar-expand-icon {
|
||||
font-size: 10px;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.bar-expand-icon.expanded { transform: rotate(180deg); }
|
||||
|
||||
/* === 就地展开面板 === */
|
||||
.expanded-panel {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease, opacity 0.2s ease;
|
||||
opacity: 0;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
.expanded-panel.show {
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.expanded-panel-inner {
|
||||
padding: 8px 20px;
|
||||
}
|
||||
|
||||
/* 参与者列表项 */
|
||||
.participant-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
.participant-item:hover { background: #f9f9f9; }
|
||||
|
||||
.participant-item .avatar-md {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 11px;
|
||||
border-width: 1.5px;
|
||||
}
|
||||
|
||||
.participant-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.participant-name {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
/* 角色标签 */
|
||||
.role-tag {
|
||||
font-size: 10px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.role-tag.primary { background: #3b82f6; color: #fff; }
|
||||
.role-tag.collaborator { background: #07C160; color: #fff; }
|
||||
.role-tag.owner { background: #FF9800; color: #fff; }
|
||||
.role-tag.invitee { background: #f0f0f0; color: #666; }
|
||||
|
||||
.participant-dept {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 移除图标 */
|
||||
.remove-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ee0a24;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.participant-item:hover .remove-icon { opacity: 1; }
|
||||
.remove-icon:hover { background: #fee; }
|
||||
|
||||
/* 消息列表区域 */
|
||||
.message-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 20px;
|
||||
min-height: 200px;
|
||||
}
|
||||
.message-item {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
gap: 10px;
|
||||
}
|
||||
.msg-avatar {
|
||||
width: 32px; height: 32px; border-radius: 4px;
|
||||
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; color: #fff;
|
||||
}
|
||||
.msg-content { max-width: 60%; }
|
||||
.msg-name { font-size: 11px; color: #999; margin-bottom: 2px; }
|
||||
.msg-bubble {
|
||||
background: #fff; padding: 8px 12px; border-radius: 0 8px 8px 8px;
|
||||
font-size: 13px; color: #333; display: inline-block;
|
||||
}
|
||||
|
||||
/* 底部输入区 */
|
||||
.input-area {
|
||||
height: 120px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.input-toolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.input-toolbar button {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
background: #f5f5f5;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.input-textbox {
|
||||
flex: 1;
|
||||
height: 60px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
font-size: 13px;
|
||||
resize: none;
|
||||
outline: none;
|
||||
}
|
||||
.input-textbox:focus { border-color: #07C160; }
|
||||
|
||||
/* 控制面板 */
|
||||
.control-panel {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 200;
|
||||
background: rgba(0,0,0,0.8);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.control-panel button {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background: #07C160;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.control-panel button:hover { opacity: 0.85; }
|
||||
.control-panel .info {
|
||||
font-size: 11px;
|
||||
color: #aaa;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
/* P1: expandedStateMap 按会话ID记忆 */
|
||||
.panel-section-title {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
padding: 4px 0 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="control-panel">
|
||||
<button onclick="toggleExpand()">点击缩略条展开/收起</button>
|
||||
<button onclick="toggleScene()">切换场景(3人/7人/10人)</button>
|
||||
<div class="info" id="sceneInfo">场景: 3人</div>
|
||||
</div>
|
||||
|
||||
<!-- 左侧会话列表 -->
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-header">会话列表</div>
|
||||
<div class="conv-item active">
|
||||
<div class="conv-avatar" style="background:#FF9800">李</div>
|
||||
<div class="conv-info">
|
||||
<div class="conv-name">李四 · 网络故障</div>
|
||||
<div class="conv-preview">王五: 我看了一下交换机日志...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conv-item">
|
||||
<div class="conv-avatar" style="background:#3b82f6">陈</div>
|
||||
<div class="conv-info">
|
||||
<div class="conv-name">陈六 · 电脑蓝屏</div>
|
||||
<div class="conv-preview">已重启，问题解决</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conv-item">
|
||||
<div class="conv-avatar" style="background:#07C160">周</div>
|
||||
<div class="conv-info">
|
||||
<div class="conv-name">周九 · 打印机问题</div>
|
||||
<div class="conv-preview">好的，我来看看</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧聊天区域 -->
|
||||
<div class="chat-area">
|
||||
<div class="chat-header">
|
||||
<span class="chat-title">李四 · 网络故障</span>
|
||||
<span class="chat-subtitle" id="convStatus">3人参与</span>
|
||||
</div>
|
||||
|
||||
<!-- 参与者缩略条 -->
|
||||
<div class="participant-bar" onclick="toggleExpand()" id="bar">
|
||||
<div class="bar-avatars" id="barAvatars"></div>
|
||||
<span class="bar-label" id="barLabel">
|
||||
<span id="barText">3位参与者</span>
|
||||
<span class="bar-expand-icon" id="expandIcon">▼</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 就地展开面板 -->
|
||||
<div class="expanded-panel" id="panel">
|
||||
<div class="expanded-panel-inner" id="panelBody"></div>
|
||||
</div>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<div class="message-list">
|
||||
<div class="message-item">
|
||||
<div class="msg-avatar" style="background:#3b82f6">张</div>
|
||||
<div class="msg-content">
|
||||
<div class="msg-name">张明（主责坐席）</div>
|
||||
<div class="msg-bubble">您好，网络问题我来协助处理。已邀请网络组同事加入。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-item">
|
||||
<div class="msg-avatar" style="background:#FF9800">李</div>
|
||||
<div class="msg-content">
|
||||
<div class="msg-name">李四（发起人）</div>
|
||||
<div class="msg-bubble">好的谢谢，我们网段的电脑都上不了网</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-item">
|
||||
<div class="msg-avatar" style="background:#07C160">王</div>
|
||||
<div class="msg-content">
|
||||
<div class="msg-name">王五（被邀请人）</div>
|
||||
<div class="msg-bubble">交换机端口有异常告警，正在排查中</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部输入区 -->
|
||||
<div class="input-area">
|
||||
<div class="input-toolbar">
|
||||
<button>快速回复</button>
|
||||
<button>转接</button>
|
||||
<button>邀请</button>
|
||||
<button>摇人</button>
|
||||
</div>
|
||||
<textarea class="input-textbox" placeholder="输入回复内容..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 角色配置
|
||||
const ROLE_COLORS = {
|
||||
primary_agent: '#3b82f6',
|
||||
collaborator: '#07C160',
|
||||
owner: '#FF9800',
|
||||
invitee: 'transparent'
|
||||
};
|
||||
const ROLE_LABELS = {
|
||||
primary_agent: '主责',
|
||||
collaborator: '协作',
|
||||
owner: '发起人',
|
||||
invitee: '被邀请'
|
||||
};
|
||||
const ROLE_BG = {
|
||||
primary_agent: '#3b82f6',
|
||||
collaborator: '#07C160',
|
||||
owner: '#FF9800',
|
||||
invitee: '#bbb'
|
||||
};
|
||||
|
||||
const MAX_AVATARS = 6; // 坐席端超员阈值
|
||||
const CURRENT_AGENT_ID = '1'; // 当前坐席 = 张明（主责）
|
||||
|
||||
// 场景数据
|
||||
const scenes = [
|
||||
// 3人场景
|
||||
[
|
||||
{ id: '1', name: '张明', avatar: '', dept: 'IT支持组', role: 'primary_agent', joined: true, isSelf: true, joinedAt: '2026-07-10T10:00:00' },
|
||||
{ id: '2', name: '李四', avatar: '', dept: '财务部', role: 'owner', joined: true, isSelf: false, joinedAt: '2026-07-10T10:01:00' },
|
||||
{ id: '3', name: '王五', avatar: '', dept: '网络运维组', role: 'invitee', joined: true, isSelf: false, joinedAt: '2026-07-10T10:05:00' }
|
||||
],
|
||||
// 7人场景
|
||||
[
|
||||
{ id: '1', name: '张明', avatar: '', dept: 'IT支持组', role: 'primary_agent', joined: true, isSelf: true, joinedAt: '2026-07-10T10:00:00' },
|
||||
{ id: '2', name: '李四', avatar: '', dept: '财务部', role: 'owner', joined: true, isSelf: false, joinedAt: '2026-07-10T10:01:00' },
|
||||
{ id: '10', name: '陈十', avatar: '', dept: 'IT支持组', role: 'collaborator', joined: true, isSelf: false, joinedAt: '2026-07-10T10:02:00' },
|
||||
{ id: '3', name: '王五', avatar: '', dept: '网络运维组', role: 'invitee', joined: true, isSelf: false, joinedAt: '2026-07-10T10:05:00' },
|
||||
{ id: '4', name: '赵六', avatar: '', dept: '系统组', role: 'invitee', joined: true, isSelf: false, joinedAt: '2026-07-10T10:06:00' },
|
||||
{ id: '5', name: '钱七', avatar: '', dept: '安全组', role: 'invitee', joined: false, isSelf: false, joinedAt: null },
|
||||
{ id: '6', name: '孙八', avatar: '', dept: '桌面组', role: 'invitee', joined: true, isSelf: false, joinedAt: '2026-07-10T10:08:00' }
|
||||
],
|
||||
// 10人场景（超员）
|
||||
[
|
||||
{ id: '1', name: '张明', avatar: '', dept: 'IT支持组', role: 'primary_agent', joined: true, isSelf: true, joinedAt: '2026-07-10T10:00:00' },
|
||||
{ id: '2', name: '李四', avatar: '', dept: '财务部', role: 'owner', joined: true, isSelf: false, joinedAt: '2026-07-10T10:01:00' },
|
||||
{ id: '10', name: '陈十', avatar: '', dept: 'IT支持组', role: 'collaborator', joined: true, isSelf: false, joinedAt: '2026-07-10T10:02:00' },
|
||||
{ id: '11', name: '郑十一', avatar: '', dept: '运维组', role: 'collaborator', joined: true, isSelf: false, joinedAt: '2026-07-10T10:03:00' },
|
||||
{ id: '3', name: '王五', avatar: '', dept: '网络运维组', role: 'invitee', joined: true, isSelf: false, joinedAt: '2026-07-10T10:05:00' },
|
||||
{ id: '4', name: '赵六', avatar: '', dept: '系统组', role: 'invitee', joined: true, isSelf: false, joinedAt: '2026-07-10T10:06:00' },
|
||||
{ id: '5', name: '钱七', avatar: '', dept: '安全组', role: 'invitee', joined: false, isSelf: false, joinedAt: null },
|
||||
{ id: '6', name: '孙八', avatar: '', dept: '桌面组', role: 'invitee', joined: true, isSelf: false, joinedAt: '2026-07-10T10:08:00' },
|
||||
{ id: '7', name: '周九', avatar: '', dept: '数据库组', role: 'invitee', joined: true, isSelf: false, joinedAt: '2026-07-10T10:09:00' },
|
||||
{ id: '8', name: '吴十', avatar: '', dept: '中间件组', role: 'invitee', joined: false, isSelf: false, joinedAt: null }
|
||||
]
|
||||
];
|
||||
|
||||
let currentScene = 0;
|
||||
let participants = [];
|
||||
let isExpanded = false;
|
||||
// P1: expandedStateMap 按会话ID记忆展开状态
|
||||
const expandedStateMap = {};
|
||||
|
||||
function getLastChar(name) {
|
||||
return name ? name.charAt(name.length - 1) : '?';
|
||||
}
|
||||
|
||||
function sortParticipants(list) {
|
||||
// 排列：主责 → 发起人 → 协作坐席 → 被邀请人(按joinedAt, 已加入在前)
|
||||
return [...list].sort((a, b) => {
|
||||
const order = { primary_agent: 0, owner: 1, collaborator: 2, invitee: 3 };
|
||||
if (order[a.role] !== order[b.role]) return order[a.role] - order[b.role];
|
||||
// 已加入在前
|
||||
if (a.joined !== b.joined) return a.joined ? -1 : 1;
|
||||
if (a.joinedAt && b.joinedAt) return new Date(a.joinedAt) - new Date(b.joinedAt);
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
function renderBar() {
|
||||
const container = document.getElementById('barAvatars');
|
||||
const text = document.getElementById('barText');
|
||||
const status = document.getElementById('convStatus');
|
||||
container.innerHTML = '';
|
||||
|
||||
const sorted = sortParticipants(participants);
|
||||
const showCount = Math.min(sorted.length, MAX_AVATARS);
|
||||
const hasPending = sorted.some(p => !p.joined);
|
||||
|
||||
for (let i = 0; i < showCount; i++) {
|
||||
const p = sorted[i];
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'avatar-wrap';
|
||||
|
||||
const av = document.createElement('div');
|
||||
av.className = `avatar role-${p.role}`;
|
||||
if (p.isSelf) av.classList.add('is-self');
|
||||
av.style.background = ROLE_BG[p.role];
|
||||
av.textContent = getLastChar(p.name);
|
||||
|
||||
if (!p.joined) {
|
||||
const dot = document.createElement('div');
|
||||
dot.className = 'pending-dot';
|
||||
wrap.appendChild(dot);
|
||||
}
|
||||
|
||||
wrap.appendChild(av);
|
||||
container.appendChild(wrap);
|
||||
}
|
||||
|
||||
if (sorted.length > MAX_AVATARS) {
|
||||
const more = document.createElement('div');
|
||||
more.className = 'avatar-more';
|
||||
more.textContent = `+${sorted.length - MAX_AVATARS}`;
|
||||
container.appendChild(more);
|
||||
}
|
||||
|
||||
text.textContent = `${participants.length}位参与者${hasPending ? ' · 有待加入' : ''}`;
|
||||
status.textContent = `${participants.length}人参与`;
|
||||
}
|
||||
|
||||
function renderPanel() {
|
||||
const body = document.getElementById('panelBody');
|
||||
body.innerHTML = '';
|
||||
|
||||
const sorted = sortParticipants(participants);
|
||||
const isPrimaryAgent = participants.some(p => p.id === CURRENT_AGENT_ID && p.role === 'primary_agent');
|
||||
|
||||
sorted.forEach(p => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'participant-item';
|
||||
|
||||
const av = document.createElement('div');
|
||||
av.className = `avatar avatar-md role-${p.role}`;
|
||||
if (p.isSelf) av.classList.add('is-self');
|
||||
av.style.background = ROLE_BG[p.role];
|
||||
av.textContent = getLastChar(p.name);
|
||||
|
||||
const info = document.createElement('div');
|
||||
info.className = 'participant-info';
|
||||
|
||||
const name = document.createElement('span');
|
||||
name.className = 'participant-name';
|
||||
name.textContent = p.name + (p.isSelf ? '（我）' : '');
|
||||
name.title = p.name; // P1: tooltip仅截断时显示
|
||||
info.appendChild(name);
|
||||
|
||||
const tag = document.createElement('span');
|
||||
tag.className = `role-tag ${p.role}`;
|
||||
tag.textContent = ROLE_LABELS[p.role];
|
||||
info.appendChild(tag);
|
||||
|
||||
const dept = document.createElement('span');
|
||||
dept.className = 'participant-dept';
|
||||
dept.textContent = p.dept + (p.joined ? '' : ' · 待加入');
|
||||
info.appendChild(dept);
|
||||
|
||||
item.appendChild(av);
|
||||
item.appendChild(info);
|
||||
|
||||
// P1: 移除图标仅主责坐席 + invitee角色显示
|
||||
if (isPrimaryAgent && p.role === 'invitee') {
|
||||
const remove = document.createElement('div');
|
||||
remove.className = 'remove-icon';
|
||||
remove.textContent = '×';
|
||||
remove.title = '移除参与者';
|
||||
remove.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
if (confirm(`确认移除 ${p.name}？`)) {
|
||||
alert('已移除（模拟）');
|
||||
}
|
||||
};
|
||||
item.appendChild(remove);
|
||||
}
|
||||
|
||||
body.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
function toggleExpand() {
|
||||
isExpanded = !isExpanded;
|
||||
const panel = document.getElementById('panel');
|
||||
const icon = document.getElementById('expandIcon');
|
||||
|
||||
if (isExpanded) {
|
||||
panel.classList.add('show');
|
||||
icon.classList.add('expanded');
|
||||
renderPanel();
|
||||
// P1: 记忆展开状态
|
||||
expandedStateMap['conv-1'] = true;
|
||||
} else {
|
||||
panel.classList.remove('show');
|
||||
icon.classList.remove('expanded');
|
||||
expandedStateMap['conv-1'] = false;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleScene() {
|
||||
currentScene = (currentScene + 1) % scenes.length;
|
||||
participants = JSON.parse(JSON.stringify(scenes[currentScene]));
|
||||
document.getElementById('sceneInfo').textContent = `场景: ${participants.length}人`;
|
||||
renderBar();
|
||||
if (isExpanded) renderPanel();
|
||||
}
|
||||
|
||||
// 初始化
|
||||
participants = JSON.parse(JSON.stringify(scenes[0]));
|
||||
renderBar();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,617 @@
|
||||
<!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>H5端 - 群聊参与者展开/缩略双模式原型</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
background: #f5f5f5;
|
||||
max-width: 375px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 模拟手机状态栏 */
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
background: #07C160;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 聊天区域 */
|
||||
.chat-area {
|
||||
background: #ededed;
|
||||
min-height: 500px;
|
||||
padding-bottom: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* === 参与者缩略条 === */
|
||||
.participant-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.participant-strip:hover { background: #fafafa; }
|
||||
|
||||
.strip-avatars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 头像基础样式 */
|
||||
.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
border: 2px solid transparent;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.avatar + .avatar { margin-left: -6px; }
|
||||
|
||||
/* 角色边框色 */
|
||||
.avatar.role-primary { border-color: #3b82f6; }
|
||||
.avatar.role-collaborator { border-color: #07C160; }
|
||||
.avatar.role-owner { border-color: #FF9800; }
|
||||
.avatar.role-invitee { border-color: transparent; }
|
||||
|
||||
/* 自己高亮环 */
|
||||
.avatar.is-self {
|
||||
box-shadow: 0 0 0 2px #07C160;
|
||||
transform: scale(1.1);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* 超员 +N */
|
||||
.avatar-more {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: #e0e0e0;
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: -6px;
|
||||
border: 2px solid #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.strip-label {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* 待加入红点角标 */
|
||||
.avatar-wrap { position: relative; display: inline-flex; }
|
||||
.pending-dot {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #ee0a24;
|
||||
border: 1.5px solid #fff;
|
||||
}
|
||||
|
||||
/* === 底部弹出 Popup === */
|
||||
.popup-overlay {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
max-width: 375px;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 100;
|
||||
display: none;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.popup-overlay.show { display: flex; }
|
||||
|
||||
.popup-content {
|
||||
background: #fff;
|
||||
border-radius: 16px 16px 0 0;
|
||||
width: 100%;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding: 0 0 env(safe-area-inset-bottom);
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
border-radius: 16px 16px 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.popup-title { font-size: 16px; font-weight: 600; color: #333; }
|
||||
.popup-close {
|
||||
width: 24px; height: 24px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 18px; color: #999; cursor: pointer;
|
||||
}
|
||||
|
||||
.popup-body { padding: 8px 0; }
|
||||
|
||||
/* 参与者列表项 */
|
||||
.participant-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.participant-item:active { background: #f5f5f5; }
|
||||
|
||||
.participant-item .avatar-lg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.participant-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.participant-name {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.participant-dept {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 角色标签 */
|
||||
.role-tag {
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.role-tag.primary { background: #3b82f6; color: #fff; }
|
||||
.role-tag.collaborator { background: #07C160; color: #fff; }
|
||||
.role-tag.owner { background: #FF9800; color: #fff; }
|
||||
.role-tag.invitee { background: #f0f0f0; color: #666; }
|
||||
|
||||
/* 退出按钮 */
|
||||
.leave-btn {
|
||||
font-size: 13px;
|
||||
color: #ee0a24;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid #ee0a24;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 底部输入栏模拟 */
|
||||
.input-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
max-width: 375px;
|
||||
height: 50px;
|
||||
background: #f7f7f7;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
gap: 8px;
|
||||
z-index: 10;
|
||||
}
|
||||
.input-bar input {
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 18px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 控制面板 */
|
||||
.control-panel {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 200;
|
||||
background: rgba(0,0,0,0.8);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.control-panel button {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background: #07C160;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.control-panel button:hover { opacity: 0.85; }
|
||||
|
||||
/* 注释标签 */
|
||||
.annotation {
|
||||
position: absolute;
|
||||
right: -180px;
|
||||
top: 0;
|
||||
width: 160px;
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffc107;
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
font-size: 11px;
|
||||
color: #856404;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.annotation::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 10px;
|
||||
border: 10px solid transparent;
|
||||
border-right-color: #ffc107;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
padding: 8px 16px 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 聊天消息模拟 */
|
||||
.chat-msg {
|
||||
display: flex;
|
||||
margin: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
.chat-msg .msg-avatar {
|
||||
width: 36px; height: 36px; border-radius: 4px;
|
||||
background: #ccc; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px; color: #fff;
|
||||
}
|
||||
.chat-msg .msg-content {
|
||||
max-width: 70%;
|
||||
}
|
||||
.chat-msg .msg-name {
|
||||
font-size: 11px; color: #999; margin-bottom: 2px;
|
||||
}
|
||||
.chat-msg .msg-bubble {
|
||||
background: #fff; padding: 8px 12px; border-radius: 0 8px 8px 8px;
|
||||
font-size: 14px; color: #333; display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="control-panel">
|
||||
<button onclick="togglePopup()">点击缩略条展开/收起</button>
|
||||
<button onclick="toggleScene()">切换场景(3人/6人/8人)</button>
|
||||
</div>
|
||||
|
||||
<div class="status-bar">IT服务支持</div>
|
||||
|
||||
<div class="chat-area">
|
||||
<!-- 参与者缩略条 -->
|
||||
<div class="participant-strip" onclick="togglePopup()" id="strip">
|
||||
<div class="strip-avatars" id="stripAvatars">
|
||||
<!-- JS 动态生成 -->
|
||||
</div>
|
||||
<span class="strip-label" id="stripLabel">点击查看全部</span>
|
||||
</div>
|
||||
|
||||
<!-- 聊天消息模拟 -->
|
||||
<div class="chat-msg">
|
||||
<div class="msg-avatar" style="background:#3b82f6">张</div>
|
||||
<div class="msg-content">
|
||||
<div class="msg-name">张明（主责坐席）</div>
|
||||
<div class="msg-bubble">您好，您的网络问题我来帮您处理。我已经邀请了网络组的同事一起协助。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-msg">
|
||||
<div class="msg-avatar" style="background:#FF9800">李</div>
|
||||
<div class="msg-content">
|
||||
<div class="msg-name">李四（发起人）</div>
|
||||
<div class="msg-bubble">好的谢谢，我们网段的电脑都上不了网</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-msg">
|
||||
<div class="msg-avatar" style="background:#07C160">王</div>
|
||||
<div class="msg-content">
|
||||
<div class="msg-name">王五（被邀请人）</div>
|
||||
<div class="msg-bubble">我看了一下交换机的日志，发现端口有异常告警，正在排查。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部弹出 Popup -->
|
||||
<div class="popup-overlay" id="popup">
|
||||
<div class="popup-content">
|
||||
<div class="popup-header">
|
||||
<span class="popup-title">参与者 (<span id="totalCount">0</span>)</span>
|
||||
<span class="popup-close" onclick="togglePopup()">✕</span>
|
||||
</div>
|
||||
<div class="popup-body" id="popupBody">
|
||||
<!-- JS 动态生成 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部输入栏 -->
|
||||
<div class="input-bar">
|
||||
<input type="text" placeholder="输入消息..." readonly>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 角色边框色
|
||||
const ROLE_COLORS = {
|
||||
primary_agent: '#3b82f6',
|
||||
collaborator: '#07C160',
|
||||
owner: '#FF9800',
|
||||
invitee: 'transparent'
|
||||
};
|
||||
const ROLE_LABELS = {
|
||||
primary_agent: '主责坐席',
|
||||
collaborator: '协作坐席',
|
||||
owner: '发起人',
|
||||
invitee: '被邀请人'
|
||||
};
|
||||
const ROLE_BG = {
|
||||
primary_agent: '#3b82f6',
|
||||
collaborator: '#07C160',
|
||||
owner: '#FF9800',
|
||||
invitee: '#bbb'
|
||||
};
|
||||
|
||||
const MAX_AVATARS = 4; // H5端超员阈值
|
||||
|
||||
// 场景数据
|
||||
const scenes = [
|
||||
// 3人场景
|
||||
[
|
||||
{ id: '1', name: '张明', avatar: '', dept: 'IT支持组', role: 'primary_agent', joined: true, isSelf: false, joinedAt: '2026-07-10T10:00:00' },
|
||||
{ id: '2', name: '李四', avatar: '', dept: '财务部', role: 'owner', joined: true, isSelf: true, joinedAt: '2026-07-10T10:01:00' },
|
||||
{ id: '3', name: '王五', avatar: '', dept: '网络运维组', role: 'invitee', joined: true, isSelf: false, joinedAt: '2026-07-10T10:05:00' }
|
||||
],
|
||||
// 6人场景
|
||||
[
|
||||
{ id: '1', name: '张明', avatar: '', dept: 'IT支持组', role: 'primary_agent', joined: true, isSelf: false, joinedAt: '2026-07-10T10:00:00' },
|
||||
{ id: '2', name: '李四', avatar: '', dept: '财务部', role: 'owner', joined: true, isSelf: true, joinedAt: '2026-07-10T10:01:00' },
|
||||
{ id: '3', name: '王五', avatar: '', dept: '网络运维组', role: 'invitee', joined: true, isSelf: false, joinedAt: '2026-07-10T10:05:00' },
|
||||
{ id: '4', name: '赵六', avatar: '', dept: '系统组', role: 'invitee', joined: true, isSelf: false, joinedAt: '2026-07-10T10:06:00' },
|
||||
{ id: '5', name: '钱七', avatar: '', dept: '安全组', role: 'invitee', joined: false, isSelf: false, joinedAt: null },
|
||||
{ id: '6', name: '孙八', avatar: '', dept: '桌面组', role: 'invitee', joined: true, isSelf: false, joinedAt: '2026-07-10T10:08:00' }
|
||||
],
|
||||
// 8人场景（超员）
|
||||
[
|
||||
{ id: '1', name: '张明', avatar: '', dept: 'IT支持组', role: 'primary_agent', joined: true, isSelf: false, joinedAt: '2026-07-10T10:00:00' },
|
||||
{ id: '2', name: '李四', avatar: '', dept: '财务部', role: 'owner', joined: true, isSelf: true, joinedAt: '2026-07-10T10:01:00' },
|
||||
{ id: '3', name: '王五', avatar: '', dept: '网络运维组', role: 'invitee', joined: true, isSelf: false, joinedAt: '2026-07-10T10:05:00' },
|
||||
{ id: '4', name: '赵六', avatar: '', dept: '系统组', role: 'invitee', joined: true, isSelf: false, joinedAt: '2026-07-10T10:06:00' },
|
||||
{ id: '5', name: '钱七', avatar: '', dept: '安全组', role: 'invitee', joined: false, isSelf: false, joinedAt: null },
|
||||
{ id: '6', name: '孙八', avatar: '', dept: '桌面组', role: 'invitee', joined: true, isSelf: false, joinedAt: '2026-07-10T10:08:00' },
|
||||
{ id: '7', name: '周九', avatar: '', dept: '数据库组', role: 'invitee', joined: true, isSelf: false, joinedAt: '2026-07-10T10:09:00' },
|
||||
{ id: '8', name: '吴十', avatar: '', dept: '中间件组', role: 'invitee', joined: false, isSelf: false, joinedAt: null }
|
||||
]
|
||||
];
|
||||
|
||||
let currentScene = 0;
|
||||
let participants = [];
|
||||
|
||||
function getInitial(name) {
|
||||
return name ? name.charAt(0) : '?';
|
||||
}
|
||||
|
||||
function renderStrip() {
|
||||
const container = document.getElementById('stripAvatars');
|
||||
const label = document.getElementById('stripLabel');
|
||||
container.innerHTML = '';
|
||||
|
||||
// 排列：主责 → 发起人 → 被邀请人(按joinedAt)
|
||||
const sorted = [...participants].sort((a, b) => {
|
||||
const order = { primary_agent: 0, owner: 1, invitee: 2 };
|
||||
if (order[a.role] !== order[b.role]) return order[a.role] - order[b.role];
|
||||
if (a.joinedAt && b.joinedAt) return new Date(a.joinedAt) - new Date(b.joinedAt);
|
||||
return 0;
|
||||
});
|
||||
|
||||
const showCount = Math.min(sorted.length, MAX_AVATARS);
|
||||
const hasPending = sorted.some(p => !p.joined);
|
||||
|
||||
for (let i = 0; i < showCount; i++) {
|
||||
const p = sorted[i];
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'avatar-wrap';
|
||||
|
||||
const av = document.createElement('div');
|
||||
av.className = `avatar role-${p.role}`;
|
||||
if (p.isSelf) av.classList.add('is-self');
|
||||
av.style.background = ROLE_BG[p.role];
|
||||
av.textContent = getInitial(p.name);
|
||||
|
||||
// 待加入红点
|
||||
if (!p.joined) {
|
||||
const dot = document.createElement('div');
|
||||
dot.className = 'pending-dot';
|
||||
wrap.appendChild(dot);
|
||||
}
|
||||
|
||||
wrap.appendChild(av);
|
||||
container.appendChild(wrap);
|
||||
}
|
||||
|
||||
// 超员 +N
|
||||
if (sorted.length > MAX_AVATARS) {
|
||||
const more = document.createElement('div');
|
||||
more.className = 'avatar-more';
|
||||
more.textContent = `+${sorted.length - MAX_AVATARS}`;
|
||||
container.appendChild(more);
|
||||
}
|
||||
|
||||
label.textContent = `${participants.length}位参与者${hasPending ? ' · 有待加入' : ''} · 点击查看`;
|
||||
}
|
||||
|
||||
function renderPopup() {
|
||||
const body = document.getElementById('popupBody');
|
||||
const count = document.getElementById('totalCount');
|
||||
count.textContent = participants.length;
|
||||
body.innerHTML = '';
|
||||
|
||||
const sorted = [...participants].sort((a, b) => {
|
||||
const order = { primary_agent: 0, owner: 1, invitee: 2 };
|
||||
if (order[a.role] !== order[b.role]) return order[a.role] - order[b.role];
|
||||
if (a.joinedAt && b.joinedAt) return new Date(a.joinedAt) - new Date(b.joinedAt);
|
||||
return 0;
|
||||
});
|
||||
|
||||
// 已加入
|
||||
const joined = sorted.filter(p => p.joined);
|
||||
const pending = sorted.filter(p => !p.joined);
|
||||
|
||||
if (joined.length > 0) {
|
||||
const title = document.createElement('div');
|
||||
title.className = 'section-title';
|
||||
title.textContent = `已加入 (${joined.length})`;
|
||||
body.appendChild(title);
|
||||
|
||||
joined.forEach(p => body.appendChild(createItem(p)));
|
||||
}
|
||||
|
||||
if (pending.length > 0) {
|
||||
const title = document.createElement('div');
|
||||
title.className = 'section-title';
|
||||
title.textContent = `待加入 (${pending.length})`;
|
||||
body.appendChild(title);
|
||||
|
||||
pending.forEach(p => body.appendChild(createItem(p)));
|
||||
}
|
||||
}
|
||||
|
||||
function createItem(p) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'participant-item';
|
||||
|
||||
const av = document.createElement('div');
|
||||
av.className = `avatar avatar-lg role-${p.role}`;
|
||||
if (p.isSelf) av.classList.add('is-self');
|
||||
av.style.background = ROLE_BG[p.role];
|
||||
av.textContent = getInitial(p.name);
|
||||
|
||||
const info = document.createElement('div');
|
||||
info.className = 'participant-info';
|
||||
|
||||
const nameRow = document.createElement('div');
|
||||
nameRow.className = 'participant-name';
|
||||
|
||||
const name = document.createElement('span');
|
||||
name.textContent = p.name + (p.isSelf ? '（我）' : '');
|
||||
nameRow.appendChild(name);
|
||||
|
||||
const tag = document.createElement('span');
|
||||
tag.className = `role-tag ${p.role}`;
|
||||
tag.textContent = ROLE_LABELS[p.role];
|
||||
nameRow.appendChild(tag);
|
||||
|
||||
const dept = document.createElement('div');
|
||||
dept.className = 'participant-dept';
|
||||
dept.textContent = p.dept + (p.joined ? '' : ' · 待加入');
|
||||
|
||||
info.appendChild(nameRow);
|
||||
info.appendChild(dept);
|
||||
|
||||
item.appendChild(av);
|
||||
item.appendChild(info);
|
||||
|
||||
// 退出按钮（仅发起人可退出）
|
||||
if (p.isSelf) {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'leave-btn';
|
||||
btn.textContent = '退出';
|
||||
btn.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
alert('确认退出此会话？退出后将不再接收消息。');
|
||||
};
|
||||
item.appendChild(btn);
|
||||
}
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
function togglePopup() {
|
||||
const popup = document.getElementById('popup');
|
||||
popup.classList.toggle('show');
|
||||
if (popup.classList.contains('show')) {
|
||||
renderPopup();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleScene() {
|
||||
currentScene = (currentScene + 1) % scenes.length;
|
||||
participants = JSON.parse(JSON.stringify(scenes[currentScene]));
|
||||
renderStrip();
|
||||
}
|
||||
|
||||
// 初始化
|
||||
participants = JSON.parse(JSON.stringify(scenes[0]));
|
||||
renderStrip();
|
||||
|
||||
// 点击遮罩关闭
|
||||
document.getElementById('popup').addEventListener('click', (e) => {
|
||||
if (e.target.id === 'popup') togglePopup();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
-385
@@ -1,385 +0,0 @@
|
||||
// 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,265 @@
|
||||
<!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;
|
||||
padding: 20px;
|
||||
}
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: var(--card-bg);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.1);
|
||||
padding: 40px 32px;
|
||||
}
|
||||
.logo {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: linear-gradient(135deg, #07C160 0%, #06ad56 100%);
|
||||
border-radius: 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 28px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 4px 12px rgba(7,193,96,0.3);
|
||||
}
|
||||
.logo-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.logo-subtitle {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.qr-container {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.qr-code {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
margin: 0 auto 16px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.qr-code img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.qr-placeholder {
|
||||
color: var(--primary);
|
||||
font-size: 80px;
|
||||
}
|
||||
.qr-status {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(7,193,96,0.95);
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display: none;
|
||||
}
|
||||
.qr-status.show {
|
||||
display: block;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
|
||||
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
||||
}
|
||||
.qr-hint {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.qr-hint strong {
|
||||
color: var(--text);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.steps {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.steps-title {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.step-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
}
|
||||
.step-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.step-num {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.footer-tip {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 24px;
|
||||
}
|
||||
.footer-tip i {
|
||||
color: var(--primary);
|
||||
margin-right: 4px;
|
||||
}
|
||||
/* 动画效果 */
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
.qr-loading {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 480px) {
|
||||
.login-card {
|
||||
padding: 32px 24px;
|
||||
}
|
||||
.qr-code {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-card">
|
||||
<!-- Logo 区域 -->
|
||||
<div class="logo">
|
||||
<div class="logo-icon">
|
||||
<i class="fas fa-headset"></i>
|
||||
</div>
|
||||
<div class="logo-title">IT智能服务台</div>
|
||||
<div class="logo-subtitle">扫码登录</div>
|
||||
</div>
|
||||
|
||||
<!-- 二维码区域 -->
|
||||
<div class="qr-container">
|
||||
<div class="qr-code qr-loading">
|
||||
<!-- 实际二维码图片 -->
|
||||
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Crect fill='white' width='180' height='180'/%3E%3Crect fill='%2307C160' x='10' y='10' width='40' height='40'/%3E%3Crect fill='%2307C160' x='60' y='10' width='40' height='40'/%3E%3Crect fill='%2307C160' x='130' y='10' width='40' height='40'/%3E%3Crect fill='%2307C160' x='10' y='60' width='40' height='40'/%3E%3Crect fill='white' x='60' y='60' width='40' height='40'/%3E%3Crect fill='%2307C160' x='130' y='60' width='40' height='40'/%3E%3Crect fill='%2307C160' x='10' y='130' width='40' height='40'/%3E%3Crect fill='%2307C160' x='60' y='130' width='40' height='40'/%3E%3Crect fill='%2307C160' x='130' y='130' width='40' height='40'/%3E%3C/svg%3E" alt="扫码登录二维码">
|
||||
<!-- 扫码成功状态 -->
|
||||
<div class="qr-status" id="scanSuccess">
|
||||
<i class="fas fa-check-circle me-1"></i> 登录成功
|
||||
</div>
|
||||
</div>
|
||||
<div class="qr-hint">
|
||||
<strong>请用企业微信扫一扫登录</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 登录步骤 -->
|
||||
<div class="steps">
|
||||
<div class="steps-title">登录步骤</div>
|
||||
<div class="step-item">
|
||||
<span class="step-num">1</span>
|
||||
<span>打开企业微信 / 微信</span>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<span class="step-num">2</span>
|
||||
<span>扫一扫上方二维码</span>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<span class="step-num">3</span>
|
||||
<span>在手机上确认登录</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部提示 -->
|
||||
<div class="footer-tip">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
企业微信扫码登录，安全可靠
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 模拟扫码成功效果（演示用）
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 3秒后模拟扫码成功
|
||||
setTimeout(function() {
|
||||
document.getElementById('scanSuccess').classList.add('show');
|
||||
document.querySelector('.qr-code').classList.remove('qr-loading');
|
||||
}, 3000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
Reference in New Issue
Block a user