yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

拆解专家端原型为独立页面文件

Browse Source 
将 expert-app.html 单体原型按项目规范拆解为 20 个独立自包含 HTML 文件，
分别放置到 workbench/expert、knowledge、ai-assistant、message、profile 目录下，
删除已被替代的 .gitkeep 占位文件。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-BLB5287\FP
2026-04-08 17:55:08 +08:00
co-authored by Claude Opus 4.6
parent d764ababf9
commit 6eecd54f49
25 changed files with 3588 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
emergency-app/message/.gitkeep
View File
emergency-app/message/contacts.html
+250
View File
@@ -0,0 +1,250 @@
<!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 { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; text-decoration: none; }
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
.scroll-content::-webkit-scrollbar { display: none; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.tag-blue { background: #e6f4ff; color: #1677ff; }
.tag-green { background: #f6ffed; color: #52c41a; }
.tag-orange { background: #fff7e6; color: #fa8c16; }
.tag-red { background: #fff1f0; color: #ff4d4f; }
.tag-gray { background: #f5f5f5; color: #999; }
/* ========== 联系人列表项样式 ========== */
.contact-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #fff;
cursor: pointer;
border-bottom: 1px solid #f5f5f5;
text-decoration: none;
color: inherit;
}
.contact-item:last-child { border-bottom: none; }
.contact-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.contact-info { flex: 1; }
.contact-name-row { display: flex; align-items: center; gap: 6px; }
.contact-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.contact-desc { font-size: 12px; color: #999; margin-top: 2px; }
/* 分组标题 */
.group-header {
padding: 8px 16px;
font-size: 12px;
color: #999;
font-weight: 600;
background: #f7f8fa;
}
/* 箭头图标 */
.arrow-icon { flex-shrink: 0; }
</style>
</head>
<body>
<div class="phone-shell">
<!-- 状态栏 -->
<div class="status-bar">
<span class="time">9:41</span>
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
</div>
<!-- 导航栏 -->
<div class="nav-bar">
<a href="./index.html" class="back-btn">
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
</a>
<span class="nav-title">通讯录</span>
</div>
<!-- 搜索框 -->
<div style="padding:10px 16px;background:#fff;border-bottom:1px solid #f0f0f0;flex-shrink:0;">
<div style="display:flex;align-items:center;background:#f5f5f5;border-radius:20px;padding:8px 14px;gap:8px;">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#999" stroke-width="1.5"><circle cx="6" cy="6" r="4.5"/><path d="M10 10l2.5 2.5"/></svg>
<input id="contacts-search" type="text" placeholder="搜索联系人姓名..." oninput="filterContacts(this.value)" style="flex:1;border:none;background:transparent;font-size:14px;outline:none;color:#1a1a1a;" />
</div>
</div>
<!-- 联系人列表滚动区域 -->
<div class="scroll-content" id="contacts-list">
<div style="padding:8px 0;">
<!-- 小助手分组 -->
<div class="contacts-group" data-group="小助手">
<div class="group-header">小助手</div>
<a href="./im-chat.html" class="contact-item">
<div class="contact-avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">🤖</div>
<div class="contact-info">
<div class="contact-name-row">
<span class="contact-name">咨询小助手</span>
<span class="tag tag-gray" style="font-size:10px;padding:1px 6px;">小助手</span>
</div>
<div class="contact-desc" style="color:#52c41a;">● 在线</div>
</div>
<svg class="arrow-icon" width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
</a>
</div>
<!-- 管理员分组 -->
<div class="contacts-group" data-group="管理员">
<div class="group-header">管理员</div>
<a href="./im-chat.html" class="contact-item">
<div class="contact-avatar" style="background:linear-gradient(135deg,#fff1f0,#ffb3b3);">👤</div>
<div class="contact-info">
<div class="contact-name-row">
<span class="contact-name">系统管理员</span>
<span class="tag tag-red" style="font-size:10px;padding:1px 6px;">管理员</span>
</div>
<div class="contact-desc">平台管理</div>
</div>
<svg class="arrow-icon" width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
</a>
</div>
<!-- 操作人员分组 -->
<div class="contacts-group" data-group="操作人员">
<div class="group-header">操作人员</div>
<a href="./im-chat.html" class="contact-item">
<div class="contact-avatar" style="background:linear-gradient(135deg,#f9f0ff,#d3adf7);">🧑‍💼</div>
<div class="contact-info">
<div class="contact-name-row">
<span class="contact-name">陈运营</span>
<span class="tag tag-orange" style="font-size:10px;padding:1px 6px;">操作人员</span>
</div>
<div class="contact-desc">运营部 · 运营专员</div>
</div>
<svg class="arrow-icon" width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
</a>
<a href="./im-chat.html" class="contact-item">
<div class="contact-avatar" style="background:linear-gradient(135deg,#f9f0ff,#d3adf7);">👩‍💼</div>
<div class="contact-info">
<div class="contact-name-row">
<span class="contact-name">王数据</span>
<span class="tag tag-orange" style="font-size:10px;padding:1px 6px;">操作人员</span>
</div>
<div class="contact-desc">数据部 · 数据分析师</div>
</div>
<svg class="arrow-icon" width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
</a>
</div>
<!-- 驻场人员分组 -->
<div class="contacts-group" data-group="驻场人员">
<div class="group-header">驻场人员</div>
<a href="./im-chat.html" class="contact-item">
<div class="contact-avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">🏥</div>
<div class="contact-info">
<div class="contact-name-row">
<span class="contact-name">刘驻场</span>
<span class="tag tag-green" style="font-size:10px;padding:1px 6px;">驻场人员</span>
</div>
<div class="contact-desc">健康顾问 · A栋驻场</div>
</div>
<svg class="arrow-icon" width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
</a>
<a href="./im-chat.html" class="contact-item">
<div class="contact-avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">🏥</div>
<div class="contact-info">
<div class="contact-name-row">
<span class="contact-name">赵驻场</span>
<span class="tag tag-green" style="font-size:10px;padding:1px 6px;">驻场人员</span>
</div>
<div class="contact-desc">健康顾问 · B栋驻场</div>
</div>
<svg class="arrow-icon" width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
</a>
</div>
<!-- 专业人员分组 -->
<div class="contacts-group" data-group="专业人员">
<div class="group-header">专业人员</div>
<a href="./im-chat.html" class="contact-item">
<div class="contact-avatar" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">👨‍⚕️</div>
<div class="contact-info">
<div class="contact-name-row">
<span class="contact-name">李主任</span>
<span class="tag tag-blue" style="font-size:10px;padding:1px 6px;">专业人员</span>
</div>
<div class="contact-desc">心内科 · 主任医师</div>
</div>
<svg class="arrow-icon" width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
</a>
<a href="./im-chat.html" class="contact-item">
<div class="contact-avatar" style="background:linear-gradient(135deg,#e6f4ff,#91caff);">👩‍⚕️</div>
<div class="contact-info">
<div class="contact-name-row">
<span class="contact-name">张护士长</span>
<span class="tag tag-blue" style="font-size:10px;padding:1px 6px;">专业人员</span>
</div>
<div class="contact-desc">内科 · 护士长</div>
</div>
<svg class="arrow-icon" width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
</a>
<a href="./im-chat.html" class="contact-item" style="border-bottom:none;">
<div class="contact-avatar" style="background:linear-gradient(135deg,#e6f4ff,#91caff);">👨‍⚕️</div>
<div class="contact-info">
<div class="contact-name-row">
<span class="contact-name">孙营养师</span>
<span class="tag tag-blue" style="font-size:10px;padding:1px 6px;">专业人员</span>
</div>
<div class="contact-desc">营养科 · 营养师</div>
</div>
<svg class="arrow-icon" width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
</a>
</div>
</div>
</div>
</div><!-- /phone-shell -->
<script>
/**
* 通讯录搜索过滤功能
* 根据输入关键词过滤联系人，隐藏不匹配的联系人及空分组
* @param {string} val - 搜索关键词
*/
function filterContacts(val) {
var kw = val.trim().toLowerCase();
// 遍历每个分组
document.querySelectorAll('.contacts-group').forEach(function(group) {
var hasVisible = false;
// 遍历分组内的联系人项
group.querySelectorAll('.contact-item').forEach(function(item) {
var nameEl = item.querySelector('.contact-name');
var match = !kw || (nameEl && nameEl.textContent.toLowerCase().indexOf(kw) !== -1);
item.style.display = match ? '' : 'none';
if (match) hasVisible = true;
});
// 隐藏空分组标题和整个分组容器
var header = group.querySelector('.group-header');
if (header) header.style.display = hasVisible ? '' : 'none';
group.style.display = hasVisible ? '' : 'none';
});
}
</script>
</body>
</html>
emergency-app/message/im-chat.html
+355
View File
@@ -0,0 +1,355 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>IM聊天</title>
<style>
/* ========== 公共基础样式 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; text-decoration: none; }
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
.scroll-content::-webkit-scrollbar { display: none; }
/* ========== 聊天气泡样式 ========== */
/* 时间标签 */
.chat-time-label {
text-align: center;
margin: 8px 0;
}
.chat-time-label span {
font-size: 11px;
color: #bbb;
background: #ebebeb;
padding: 3px 10px;
border-radius: 10px;
}
/* 对方消息（左侧） */
.msg-left {
display: flex;
gap: 8px;
margin-bottom: 14px;
}
.msg-left .avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.msg-left .sender-name {
font-size: 11px;
color: #999;
margin-bottom: 4px;
}
.msg-left .bubble {
background: #fff;
border-radius: 0 12px 12px 12px;
padding: 10px 14px;
font-size: 14px;
color: #1a1a1a;
max-width: 220px;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
line-height: 1.5;
}
/* 自己消息（右侧） */
.msg-right {
display: flex;
gap: 8px;
margin-bottom: 14px;
flex-direction: row-reverse;
}
.msg-right .avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.msg-right .msg-content {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.msg-right .sender-name {
font-size: 11px;
color: #999;
margin-bottom: 4px;
}
.msg-right .bubble {
background: #1677ff;
border-radius: 12px 0 12px 12px;
padding: 10px 14px;
font-size: 14px;
color: #fff;
max-width: 220px;
line-height: 1.5;
}
/* ========== 媒体选择面板 ========== */
.media-panel {
display: none;
background: #f7f8fa;
border-top: 1px solid #f0f0f0;
padding: 16px 20px;
}
.media-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
max-width: 180px;
}
.media-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
}
.media-icon {
width: 52px;
height: 52px;
background: #fff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.media-label { font-size: 11px; color: #666; }
/* ========== 输入区域 ========== */
.input-bar {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px 14px;
}
.voice-btn {
width: 34px;
height: 34px;
border-radius: 50%;
background: #f5f5f5;
border: none;
font-size: 16px;
cursor: pointer;
flex-shrink: 0;
}
.msg-input {
flex: 1;
background: #f5f5f5;
border: none;
border-radius: 20px;
padding: 10px 14px;
font-size: 14px;
outline: none;
color: #1a1a1a;
}
.voice-record-btn {
display: none;
flex: 1;
height: 36px;
background: #f5f5f5;
border: 1.5px solid #d9d9d9;
border-radius: 20px;
font-size: 13px;
color: #555;
cursor: pointer;
text-align: center;
align-items: center;
justify-content: center;
letter-spacing: 1px;
}
.plus-btn {
width: 34px;
height: 34px;
border-radius: 50%;
background: #f5f5f5;
border: none;
font-size: 20px;
font-weight: 300;
cursor: pointer;
flex-shrink: 0;
color: #666;
line-height: 1;
}
.send-btn {
width: 38px;
height: 38px;
border-radius: 50%;
background: #1677ff;
border: none;
font-size: 16px;
cursor: pointer;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
</style>
</head>
<body>
<div class="phone-shell">
<!-- 状态栏 -->
<div class="status-bar">
<span class="time">9:41</span>
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
</div>
<!-- 导航栏 -->
<div class="nav-bar">
<a href="./index.html" class="back-btn">
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
</a>
<span class="nav-title">咨询小助手</span>
</div>
<!-- 聊天消息滚动区域 -->
<div class="scroll-content" id="im-scroll" style="padding:12px 16px;">
<!-- 时间标签 -->
<div class="chat-time-label"><span>今天 10:28</span></div>
<!-- 小助手发来的第一条消息 -->
<div class="msg-left">
<div class="avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">🤖</div>
<div>
<div class="sender-name">咨询小助手</div>
<div class="bubble">王医生您好，有一位员工（王芳）想预约您明天下午14:00的视频咨询，请问方便吗？</div>
</div>
</div>
<!-- 王医生回复（右侧蓝色气泡） -->
<div class="msg-right">
<div class="avatar" style="background:linear-gradient(135deg,#e8f4ff,#bdd7ff);">👨‍⚕️</div>
<div class="msg-content">
<div class="sender-name">王医生（我）</div>
<div class="bubble">可以的，帮我确认一下预约。</div>
</div>
</div>
<!-- 小助手回复确认消息 -->
<div class="msg-left">
<div class="avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">🤖</div>
<div>
<div class="sender-name">咨询小助手</div>
<div class="bubble">好的，已为您确认预约，届时系统会提醒您。</div>
</div>
</div>
<!-- 底部留白 -->
<div style="height:8px;"></div>
</div>
<!-- 底部输入区 -->
<div style="background:#fff;border-top:1px solid #f0f0f0;padding:0;flex-shrink:0;">
<!-- 媒体选择面板（拍照、图库） -->
<div id="im-media-panel" class="media-panel">
<div class="media-grid">
<div class="media-item" onclick="document.getElementById('im-media-panel').style.display='none'">
<div class="media-icon">📷</div>
<span class="media-label">拍照</span>
</div>
<div class="media-item" onclick="document.getElementById('im-media-panel').style.display='none'">
<div class="media-icon">🖼️</div>
<span class="media-label">图库</span>
</div>
</div>
</div>
<!-- 输入行 -->
<div class="input-bar">
<!-- 语音/键盘切换按钮 -->
<button id="im-voice-btn" class="voice-btn" onclick="toggleImVoice()">🎤</button>
<!-- 文本输入框 -->
<input id="im-input" class="msg-input" type="text" placeholder="输入消息..." />
<!-- 按住说话按钮（语音模式） -->
<button id="im-voice-record-btn" class="voice-record-btn">按住说话</button>
<!-- 加号按钮（展开媒体面板） -->
<button class="plus-btn" onclick="toggleMediaPanel()">+</button>
<!-- 发送按钮 -->
<button class="send-btn" onclick="sendImMsg()">➤</button>
</div>
</div>
</div><!-- /phone-shell -->
<script>
/**
* 发送消息功能
* 获取输入框内容，创建右侧蓝色气泡并追加到聊天区域
*/
function sendImMsg() {
var input = document.getElementById('im-input');
var text = input.value.trim();
if (!text) return;
var scroll = document.getElementById('im-scroll');
// 创建消息气泡容器
var bubble = document.createElement('div');
bubble.style.cssText = 'display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;';
bubble.innerHTML =
'<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨‍⚕️</div>' +
'<div style="display:flex;flex-direction:column;align-items:flex-end;">' +
'<div style="font-size:11px;color:#999;margin-bottom:4px;">王医生（我）</div>' +
'<div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">' + text + '</div>' +
'</div>';
// 在底部留白前插入消息
scroll.insertBefore(bubble, scroll.lastElementChild);
input.value = '';
// 滚动到最新消息
scroll.scrollTop = scroll.scrollHeight;
}
/**
* 语音/键盘模式切换
* 在文字输入和语音录制两种模式之间切换
*/
var isImVoiceMode = false;
function toggleImVoice() {
isImVoiceMode = !isImVoiceMode;
var input = document.getElementById('im-input');
var btn = document.getElementById('im-voice-btn');
var recordBtn = document.getElementById('im-voice-record-btn');
if (isImVoiceMode) {
// 切换到语音模式
input.style.display = 'none';
recordBtn.style.display = 'flex';
btn.textContent = '⌨️';
btn.style.background = '#e6f4ff';
} else {
// 切换回文字模式
input.style.display = '';
recordBtn.style.display = 'none';
btn.textContent = '🎤';
btn.style.background = '#f5f5f5';
}
}
/**
* 媒体面板展开/收起切换
*/
function toggleMediaPanel() {
var panel = document.getElementById('im-media-panel');
panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
}
</script>
</body>
</html>
emergency-app/message/index.html
+255
View File
@@ -0,0 +1,255 @@
<!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 { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
.scroll-content::-webkit-scrollbar { display: none; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.tag-blue { background: #e6f4ff; color: #1677ff; }
.tag-green { background: #f6ffed; color: #52c41a; }
.tag-orange { background: #fff7e6; color: #fa8c16; }
.tag-red { background: #fff1f0; color: #ff4d4f; }
.tag-gray { background: #f5f5f5; color: #999; }
/* ========== 底部Tab栏样式 ========== */
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; text-decoration: none; }
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
.tab-item.active .tab-label { color: #1677ff; }
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
/* ========== 消息列表项样式 ========== */
.msg-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #fff;
cursor: pointer;
border-bottom: 1px solid #f5f5f5;
text-decoration: none;
color: inherit;
}
.msg-item:last-child { border-bottom: none; }
.msg-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
position: relative;
}
/* 未读角标 */
.msg-unread {
position: absolute;
top: -2px;
right: -2px;
width: 18px;
height: 18px;
background: #ff4d4f;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #fff;
font-weight: 700;
border: 2px solid #fff;
}
.msg-body { flex: 1; min-width: 0; }
.msg-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.msg-name-group { display: flex; align-items: center; gap: 6px; }
.msg-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.msg-time { font-size: 12px; color: #bbb; }
.msg-preview {
font-size: 13px;
color: #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="phone-shell">
<!-- 状态栏 -->
<div class="status-bar">
<span class="time">9:41</span>
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
</div>
<!-- 蓝色渐变头部区域 -->
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
<div style="display:flex;justify-content:space-between;align-items:center;">
<div>
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">内部沟通</div>
<div style="color:#fff;font-size:20px;font-weight:700;">消息</div>
</div>
<!-- 通讯录跳转按钮 -->
<a href="./contacts.html" style="background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);border-radius:20px;padding:6px 14px;color:#fff;font-size:13px;cursor:pointer;text-decoration:none;">通讯录</a>
</div>
</div>
<!-- 消息列表滚动区域 -->
<div class="scroll-content">
<div style="padding:8px 0;">
<!-- 消息1：咨询小助手（未读2条） -->
<a href="./im-chat.html" class="msg-item">
<div class="msg-avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">
🤖
<div class="msg-unread">2</div>
</div>
<div class="msg-body">
<div class="msg-header">
<div class="msg-name-group">
<span class="msg-name">咨询小助手</span>
<span class="tag tag-gray" style="font-size:10px;padding:1px 6px;">小助手</span>
</div>
<span class="msg-time">10:30</span>
</div>
<div class="msg-preview">有一位员工想预约您明天下午的视频咨询...</div>
</div>
</a>
<!-- 消息2：李主任 -->
<a href="./im-chat.html" class="msg-item">
<div class="msg-avatar" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">
👨‍⚕️
</div>
<div class="msg-body">
<div class="msg-header">
<div class="msg-name-group">
<span class="msg-name">李主任</span>
<span class="tag tag-blue" style="font-size:10px;padding:1px 6px;">专业人员</span>
</div>
<span class="msg-time">昨天</span>
</div>
<div class="msg-preview">下周科室会议时间调整到周三下午3点</div>
</div>
</a>
<!-- 消息3：张护士长 -->
<a href="./im-chat.html" class="msg-item">
<div class="msg-avatar" style="background:linear-gradient(135deg,#e6f4ff,#91caff);">
👩‍⚕️
</div>
<div class="msg-body">
<div class="msg-header">
<div class="msg-name-group">
<span class="msg-name">张护士长</span>
<span class="tag tag-blue" style="font-size:10px;padding:1px 6px;">专业人员</span>
</div>
<span class="msg-time">周一</span>
</div>
<div class="msg-preview">好的，我已经安排好了，谢谢王医生</div>
</div>
</a>
<!-- 消息4：陈运营 -->
<a href="./im-chat.html" class="msg-item">
<div class="msg-avatar" style="background:linear-gradient(135deg,#f9f0ff,#d3adf7);">
🧑‍💼
</div>
<div class="msg-body">
<div class="msg-header">
<div class="msg-name-group">
<span class="msg-name">陈运营</span>
<span class="tag tag-orange" style="font-size:10px;padding:1px 6px;">操作人员</span>
</div>
<span class="msg-time">周二</span>
</div>
<div class="msg-preview">本月咨询数据报表已生成，请查收</div>
</div>
</a>
<!-- 消息5：刘驻场 -->
<a href="./im-chat.html" class="msg-item">
<div class="msg-avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">
🏥
</div>
<div class="msg-body">
<div class="msg-header">
<div class="msg-name-group">
<span class="msg-name">刘驻场</span>
<span class="tag tag-green" style="font-size:10px;padding:1px 6px;">驻场人员</span>
</div>
<span class="msg-time">周三</span>
</div>
<div class="msg-preview">明天下午我在A栋3楼，有需要可以联系</div>
</div>
</a>
<!-- 消息6：系统管理员 -->
<a href="./im-chat.html" class="msg-item" style="border-bottom:none;">
<div class="msg-avatar" style="background:linear-gradient(135deg,#fff1f0,#ffb3b3);">
👤
</div>
<div class="msg-body">
<div class="msg-header">
<div class="msg-name-group">
<span class="msg-name">系统管理员</span>
<span class="tag tag-red" style="font-size:10px;padding:1px 6px;">管理员</span>
</div>
<span class="msg-time">上周</span>
</div>
<div class="msg-preview">您的排班已更新，请查看本月排班表</div>
</div>
</a>
</div>
</div>
<!-- 底部Tab导航栏 -->
<div class="tab-bar">
<!-- 工作台 -->
<a href="../workbench/expert/index.html" class="tab-item">
<span class="tab-icon">🏥</span>
<span class="tab-label">工作台</span>
</a>
<!-- 知识库 -->
<a href="../knowledge/index.html" class="tab-item">
<span class="tab-icon">📚</span>
<span class="tab-label">知识库</span>
</a>
<!-- AI助手 -->
<a href="../ai-assistant/index.html" class="tab-item">
<span class="tab-icon">🤖</span>
<span class="tab-label">AI助手</span>
</a>
<!-- 消息（当前激活状态） -->
<a href="./index.html" class="tab-item active">
<span class="tab-icon">💬</span>
<span class="tab-label">消息</span>
<span class="tab-badge">2</span>
</a>
<!-- 我的 -->
<a href="../profile/index.html" class="tab-item">
<span class="tab-icon">👤</span>
<span class="tab-label">我的</span>
</a>
</div>
</div><!-- /phone-shell -->
</body>
</html>