333 lines
21 KiB
HTML
333 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>健康长庆升级 - 高保真交互原型导航</title>
|
||
<style>
|
||
:root {
|
||
--primary: #1677FF;
|
||
--primary-light: #E6F7FF;
|
||
--primary-dark: #0958D9;
|
||
--success: #52C41A;
|
||
--warning: #FAAD14;
|
||
--danger: #FF4D4F;
|
||
--purple: #722ED1;
|
||
--text-primary: #1a1a2e;
|
||
--text-secondary: #5a607f;
|
||
--text-placeholder: #999999;
|
||
--border: #e8ecf1;
|
||
--background: #f0f2f8;
|
||
--card-bg: #ffffff;
|
||
--radius-sm: 6px;
|
||
--radius-md: 10px;
|
||
--radius-lg: 16px;
|
||
--radius-xl: 20px;
|
||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
|
||
--shadow-md: 0 4px 16px rgba(22,119,255,0.10), 0 2px 6px rgba(0,0,0,0.06);
|
||
--shadow-lg: 0 10px 30px rgba(22,119,255,0.15), 0 4px 10px rgba(0,0,0,0.06);
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { background: var(--background); font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Segoe UI', sans-serif; color: var(--text-primary); min-height: 100vh; }
|
||
|
||
/* ===== Header ===== */
|
||
.header { position: relative; background: linear-gradient(135deg, #0b3d91 0%, var(--primary) 40%, #4facfe 100%); color: #fff; padding: 44px 48px 28px; overflow: hidden; }
|
||
.header::before { content: ''; position: absolute; top: -60px; right: -40px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%); border-radius: 50%; }
|
||
.header::after { content: ''; position: absolute; bottom: -80px; left: 20%; width: 360px; height: 360px; background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%); border-radius: 50%; }
|
||
.header__inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; }
|
||
.header__top { display: flex; align-items: flex-start; justify-content: space-between; }
|
||
.header__title { font-size: 28px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 2px 8px rgba(0,0,0,0.15); }
|
||
.header__sub { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 8px; font-weight: 400; }
|
||
.header__stats { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
|
||
.stat-badge { background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); border-radius: 24px; padding: 8px 20px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; transition: background .2s; }
|
||
.stat-badge:hover { background: rgba(255,255,255,0.25); }
|
||
.stat-badge__dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
|
||
.stat-badge__dot--web { background: #69b1ff; color: #69b1ff; }
|
||
.stat-badge__dot--app { background: #95de64; color: #95de64; }
|
||
.stat-badge__dot--emergency { background: #ffc069; color: #ffc069; }
|
||
/* ===== Tab 导航 ===== */
|
||
.tab-nav { display: flex; align-items: center; gap: 6px; background: var(--card-bg); padding: 12px 48px; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
|
||
.tab-nav__item { padding: 9px 22px; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; border-radius: 24px; transition: all .25s ease; user-select: none; display: flex; align-items: center; gap: 8px; border: 1.5px solid transparent; }
|
||
.tab-nav__item:hover { color: var(--primary); background: var(--primary-light); }
|
||
.tab-nav__item--active { color: #fff; background: var(--primary); border-color: var(--primary); box-shadow: 0 2px 8px rgba(22,119,255,0.3); }
|
||
.tab-nav__item--active .tab-nav__badge { background: rgba(255,255,255,0.25); color: #fff; }
|
||
.tab-nav__badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--primary-light); color: var(--primary); font-weight: 600; transition: all .25s; }
|
||
.tab-nav__icon { width: 18px; height: 18px; flex-shrink: 0; }
|
||
|
||
/* ===== 内容区 ===== */
|
||
.main-content { max-width: 1400px; margin: 0 auto; padding: 28px 48px 48px; }
|
||
.tab-content { display: none; animation: fadeUp .35s ease; }
|
||
.tab-content--active { display: block; }
|
||
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
|
||
|
||
/* ===== 模块网格 ===== */
|
||
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; }
|
||
|
||
/* ===== 角色分组 ===== */
|
||
.role-group { margin-bottom: 28px; }
|
||
.role-group:last-child { margin-bottom: 0; }
|
||
.role-group__title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; padding: 6px 16px 6px 12px; background: var(--card-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
|
||
.role-group__title:first-child { margin-top: 0; }
|
||
.role-icon { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; flex-shrink: 0; }
|
||
.role-icon--expert { background: linear-gradient(135deg, #1677FF, #4facfe); }
|
||
.role-icon--assistant { background: linear-gradient(135deg, #722ED1, #b37feb); }
|
||
.role-icon--operator { background: linear-gradient(135deg, #fa541c, #ff7a45); }
|
||
.role-icon--worker { background: linear-gradient(135deg, #52c41a, #95de64); }
|
||
.role-icon--onsite { background: linear-gradient(135deg, #faad14, #ffc53d); }
|
||
.role-icon--admin { background: linear-gradient(135deg, #eb2f96, #ff85c0); }
|
||
.role-icon--shared { background: linear-gradient(135deg, #13c2c2, #5cdbd3); }
|
||
|
||
/* ===== 模块卡片 ===== */
|
||
.module-card { position: relative; background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 22px 22px 22px 26px; transition: all .25s ease; border: 1px solid var(--border); overflow: hidden; }
|
||
.module-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px 0 0 4px; background: var(--primary); transition: width .2s; }
|
||
.module-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: rgba(22,119,255,0.2); }
|
||
.module-card:hover::before { width: 5px; }
|
||
.module-card--empty { opacity: 0.6; border-style: dashed; border-color: #d0d5dd; }
|
||
.module-card--empty::before { background: #d0d5dd; }
|
||
.module-card--empty:hover { opacity: 0.75; transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: #d0d5dd; }
|
||
.module-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
|
||
.module-card__name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
|
||
.module-card__count { font-size: 12px; color: var(--text-secondary); margin-left: 8px; font-weight: 400; }
|
||
.module-card__tag { font-size: 11px; padding: 3px 10px; border-radius: 12px; font-weight: 600; letter-spacing: 0.3px; }
|
||
.module-card__tag--ready { background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; }
|
||
.module-card__tag--pending { background: #fffbe6; color: #d48806; border: 1px solid #ffe58f; }
|
||
.module-card__empty-hint { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-placeholder); }
|
||
.module-card__empty-hint svg { flex-shrink: 0; }
|
||
|
||
/* ===== 页面链接 ===== */
|
||
.page-links { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
.page-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--primary-dark); background: linear-gradient(135deg, #e8f4ff, #f0f7ff); padding: 5px 14px; border-radius: 16px; text-decoration: none; transition: all .2s ease; border: 1px solid rgba(22,119,255,0.12); }
|
||
.page-link:hover { background: linear-gradient(135deg, #bae0ff, #d6ebff); border-color: rgba(22,119,255,0.25); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(22,119,255,0.12); }
|
||
.page-link svg { flex-shrink: 0; }
|
||
.page-link--dialog { color: #ad4e00; background: linear-gradient(135deg, #fff7e6, #fff9ed); border-color: rgba(250,173,20,0.2); }
|
||
.page-link--dialog:hover { background: linear-gradient(135deg, #ffe7ba, #fff1cc); border-color: rgba(250,173,20,0.35); box-shadow: 0 2px 6px rgba(250,173,20,0.15); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<div class="header__inner">
|
||
<div class="header__top">
|
||
<div>
|
||
<div class="header__title">健康长庆升级 · 高保真交互原型</div>
|
||
<div class="header__sub">点击模块卡片中的页面链接，即可跳转预览对应原型</div>
|
||
</div>
|
||
</div>
|
||
<div class="header__stats" id="header-stats"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-nav" id="tab-nav"></div>
|
||
<div class="main-content">
|
||
<div id="tab-contents"></div>
|
||
</div>
|
||
|
||
<script>
|
||
/* ===== SVG 图标 ===== */
|
||
const ICONS = {
|
||
web: '<svg class="tab-nav__icon" viewBox="0 0 18 18" fill="none"><rect x="1" y="2" width="16" height="12" rx="2" stroke="currentColor" stroke-width="1.5"/><line x1="5" y1="16" x2="13" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="9" y1="14" x2="9" y2="16" stroke="currentColor" stroke-width="1.5"/></svg>',
|
||
app: '<svg class="tab-nav__icon" viewBox="0 0 18 18" fill="none"><rect x="4" y="1" width="10" height="16" rx="2" stroke="currentColor" stroke-width="1.5"/><line x1="7.5" y1="14" x2="10.5" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',
|
||
emergency: '<svg class="tab-nav__icon" viewBox="0 0 18 18" fill="none"><path d="M9 1L2 6.5V16h5v-4h4v4h5V6.5L9 1z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M9 7v3M9 11.5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',
|
||
page: '<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 1h4l3 3v7H3V1z" stroke="currentColor" stroke-width="1.1"/><path d="M7 1v3h3" stroke="currentColor" stroke-width="1.1"/></svg>',
|
||
dialog: '<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><rect x="1.5" y="2" width="9" height="8" rx="1.5" stroke="currentColor" stroke-width="1.1"/><line x1="4" y1="5" x2="8" y2="5" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/><line x1="4" y1="7.5" x2="6.5" y2="7.5" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/></svg>',
|
||
empty: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.2" stroke-dasharray="3 2"/><path d="M8 5.5v3M8 10v.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>',
|
||
role: { expert: '👨⚕', assistant: '🤖', operator: '📋', worker: '👷', onsite: '🏥', admin: '⚙', shared: '🔗' }
|
||
};
|
||
|
||
/* ===== 站点地图数据 ===== */
|
||
const SITE_MAP = [
|
||
{
|
||
id: 'web-admin', label: 'Web 管理端', icon: 'web', color: '#69b1ff',
|
||
modules: [
|
||
{ name: '系统管理', dir: 'web-admin/system-management', pages: [] },
|
||
{ name: '健康体检', dir: 'web-admin/health-checkup', pages: [] },
|
||
{ name: '体重管理', dir: 'web-admin/weight-management', pages: [] },
|
||
{ name: '营养管理', dir: 'web-admin/nutrition', pages: [] },
|
||
{ name: '运动管理', dir: 'web-admin/exercise', pages: [] },
|
||
{ name: '健康监测', dir: 'web-admin/health-monitor', pages: [] },
|
||
{ name: '健康评估', dir: 'web-admin/health-assessment', pages: [] },
|
||
{ name: '知识普及', dir: 'web-admin/knowledge', pages: [] },
|
||
{ name: '健康数据', dir: 'web-admin/health-data', pages: [] },
|
||
{ name: '健康档案', dir: 'web-admin/health-record', pages: [] },
|
||
{ name: '心脑血管病预防', dir: 'web-admin/cardiovascular', pages: [] },
|
||
{ name: '糖尿病预防', dir: 'web-admin/diabetes', pages: [] },
|
||
{ name: '癌症预防', dir: 'web-admin/cancer', pages: [] },
|
||
{ name: '专家咨询', dir: 'web-admin/health-consult', pages: [] },
|
||
{ name: '应急就医', dir: 'web-admin/emergency-dispatch', pages: [] },
|
||
{ name: '一线医疗', dir: 'web-admin/frontline-medical', pages: [] }
|
||
]
|
||
},
|
||
{
|
||
id: 'employee-app', label: '员工端 APP', icon: 'app', color: '#95de64',
|
||
modules: [
|
||
{ name: 'AI', dir: 'employee-app/ai', pages: [] },
|
||
{ name: '应用主页', dir: 'employee-app/home', pages: [] },
|
||
{ name: '健康体检', dir: 'employee-app/health-checkup', pages: [] },
|
||
{ name: '体重管理', dir: 'employee-app/weight-management', pages: [] },
|
||
{ name: '营养管理', dir: 'employee-app/nutrition', pages: [] },
|
||
{ name: '运动管理', dir: 'employee-app/exercise', pages: [] },
|
||
{ name: '健康监测', dir: 'employee-app/health-monitor', pages: [] },
|
||
{ name: '健康评估', dir: 'employee-app/health-assessment', pages: [] },
|
||
{ name: '心脑血管病预防', dir: 'employee-app/cardiovascular', pages: [] },
|
||
{ name: '糖尿病预防', dir: 'employee-app/diabetes', pages: [] },
|
||
{ name: '癌症预防', dir: 'employee-app/cancer', pages: [] },
|
||
{ name: '健康咨询', dir: 'employee-app/health-consult', pages: [
|
||
{ file: 'index.html', label: '咨询首页' },
|
||
{ file: 'expert-list.html', label: '专家列表' },
|
||
{ file: 'expert-profile.html', label: '专家主页' },
|
||
{ file: 'find-expert.html', label: '找专家' },
|
||
{ file: 'text-chat.html', label: '图文咨询' },
|
||
{ file: 'video-booking.html', label: '视频预约' },
|
||
{ file: 'video-success.html', label: '预约成功' },
|
||
{ file: 'expert-reviews.html', label: '专家评价' },
|
||
{ file: 'hospital-detail.html', label: '医院详情' },
|
||
{ file: 'my-records.html', label: '咨询记录' },
|
||
{ file: 'record-detail.html', label: '记录详情' },
|
||
{ file: 'rate-doctor.html', label: '评价医生' },
|
||
{ file: 'assistant-chat.html', label: '小助手对话' },
|
||
{ file: 'consult-notice-dialog.html', label: '咨询须知弹窗', dialog: true },
|
||
{ file: 'end-consult-dialog.html', label: '结束咨询弹窗', dialog: true },
|
||
{ file: 'select-person-dialog.html', label: '选择就诊人弹窗', dialog: true },
|
||
{ file: 'select-report-dialog.html', label: '选择报告弹窗', dialog: true },
|
||
{ file: 'rate-dialog.html', label: '评价弹窗', dialog: true }
|
||
] },
|
||
{ name: '应急就医', dir: 'employee-app/emergency-medical', pages: [] },
|
||
{ name: '一线医疗', dir: 'employee-app/frontline-medical', pages: [] },
|
||
{ name: '健康档案', dir: 'employee-app/health-record', pages: [] },
|
||
{ name: '知识普及', dir: 'employee-app/knowledge', pages: [] },
|
||
{ name: '个人中心', dir: 'employee-app/profile', pages: [] }
|
||
]
|
||
},
|
||
{
|
||
id: 'emergency-app', label: '健康应急 APP', icon: 'emergency', color: '#ffc069',
|
||
roles: [
|
||
{ role: '咨询专家', id: 'expert', modules: [
|
||
{ name: '工作台', dir: 'emergency-app/expert/workbench', pages: [
|
||
{ file: 'index.html', label: '工作台首页' }, { file: 'text-chat.html', label: '图文咨询' },
|
||
{ file: 'text-consult-done.html', label: '咨询完成' }, { file: 'video-appt.html', label: '视频预约' },
|
||
{ file: 'video-call.html', label: '视频通话' }, { file: 'video-done.html', label: '视频完成' },
|
||
{ file: 'video-ongoing.html', label: '视频进行中' }, { file: 'employee-profile.html', label: '员工档案' }
|
||
]},
|
||
{ name: '知识库', dir: 'emergency-app/expert/knowledge', pages: [
|
||
{ file: 'index.html', label: '知识库首页' }, { file: 'detail.html', label: '知识详情' }
|
||
]},
|
||
{ name: '我的', dir: 'emergency-app/expert/profile', pages: [
|
||
{ file: 'index.html', label: '个人中心' }, { file: 'edit-profile.html', label: '编辑资料' },
|
||
{ file: 'change-pwd.html', label: '修改密码' }, { file: 'schedule.html', label: '排班设置' },
|
||
{ file: 'stats.html', label: '咨询统计' }, { file: 'reviews.html', label: '我的评价' }
|
||
]}
|
||
]},
|
||
{ role: '咨询小助手', id: 'assistant', modules: [
|
||
{ name: '工作台', dir: 'emergency-app/assistant/workbench', pages: [
|
||
{ file: 'index.html', label: '工作台首页' }, { file: 'text-chat.html', label: '图文咨询' },
|
||
{ file: 'consult-done.html', label: '咨询完成' }, { file: 'employee-profile.html', label: '员工档案' },
|
||
{ file: 'end-consult-dialog.html', label: '结束咨询弹窗', dialog: true },
|
||
{ file: 'push-expert.html', label: '推送专家' }
|
||
]},
|
||
{ name: '知识库', dir: 'emergency-app/assistant/knowledge', pages: [] },
|
||
{ name: '我的', dir: 'emergency-app/assistant/profile', pages: [] }
|
||
]},
|
||
{ role: '应急操作人员', id: 'operator', modules: [
|
||
{ name: '工作台', dir: 'emergency-app/operator/workbench', pages: [] },
|
||
{ name: '知识库', dir: 'emergency-app/operator/knowledge', pages: [] },
|
||
{ name: '我的', dir: 'emergency-app/operator/profile', pages: [] }
|
||
]},
|
||
{ role: '应急工作人员', id: 'worker', modules: [
|
||
{ name: '工作台', dir: 'emergency-app/worker/workbench', pages: [] },
|
||
{ name: '知识库', dir: 'emergency-app/worker/knowledge', pages: [] },
|
||
{ name: '我的', dir: 'emergency-app/worker/profile', pages: [] }
|
||
]},
|
||
{ role: '应急驻场人员', id: 'onsite', modules: [
|
||
{ name: '工作台', dir: 'emergency-app/onsite/workbench', pages: [] },
|
||
{ name: '知识库', dir: 'emergency-app/onsite/knowledge', pages: [] },
|
||
{ name: '我的', dir: 'emergency-app/onsite/profile', pages: [] }
|
||
]},
|
||
{ role: '管理员', id: 'admin', modules: [
|
||
{ name: '工作台', dir: 'emergency-app/admin/workbench', pages: [] },
|
||
{ name: '知识库', dir: 'emergency-app/admin/knowledge', pages: [] },
|
||
{ name: '我的', dir: 'emergency-app/admin/profile', pages: [] }
|
||
]}
|
||
],
|
||
shared: [
|
||
{ name: 'AI助手', dir: 'emergency-app/ai-assistant', pages: [{ file: 'index.html', label: 'AI助手' }] },
|
||
{ name: '消息', dir: 'emergency-app/message', pages: [
|
||
{ file: 'index.html', label: '消息列表' }, { file: 'contacts.html', label: '通讯录' }, { file: 'im-chat.html', label: '聊天' }
|
||
]}
|
||
]
|
||
}
|
||
];
|
||
/* ===== 工具函数 ===== */
|
||
function countPages(t) {
|
||
if (t.modules) return t.modules.reduce((s, m) => s + m.pages.length, 0);
|
||
let n = 0;
|
||
if (t.roles) t.roles.forEach(r => r.modules.forEach(m => n += m.pages.length));
|
||
if (t.shared) t.shared.forEach(m => n += m.pages.length);
|
||
return n;
|
||
}
|
||
|
||
/* 头部统计 */
|
||
const statsEl = document.getElementById('header-stats');
|
||
const dotCls = ['web', 'app', 'emergency'];
|
||
SITE_MAP.forEach((t, i) => {
|
||
statsEl.innerHTML += `<span class="stat-badge"><span class="stat-badge__dot stat-badge__dot--${dotCls[i]}"></span>${t.label}：${countPages(t)} 页</span>`;
|
||
});
|
||
|
||
/* Tab 导航 */
|
||
const tabNav = document.getElementById('tab-nav');
|
||
const tabContents = document.getElementById('tab-contents');
|
||
SITE_MAP.forEach((t, i) => {
|
||
tabNav.innerHTML += `<div class="tab-nav__item${i===0?' tab-nav__item--active':''}" data-idx="${i}">${ICONS[t.icon]}${t.label}<span class="tab-nav__badge">${countPages(t)}</span></div>`;
|
||
});
|
||
|
||
/* 生成卡片 */
|
||
function cardHTML(mod) {
|
||
const has = mod.pages.length > 0;
|
||
const tag = has
|
||
? `<span class="module-card__tag module-card__tag--ready">${mod.pages.length} 页</span>`
|
||
: '<span class="module-card__tag module-card__tag--pending">待开发</span>';
|
||
let body = '';
|
||
if (has) {
|
||
body = '<div class="page-links">' + mod.pages.map(p =>
|
||
`<a class="page-link${p.dialog?' page-link--dialog':''}" href="${mod.dir}/${p.file}" target="_blank">${p.dialog ? ICONS.dialog : ICONS.page}${p.label}</a>`
|
||
).join('') + '</div>';
|
||
} else {
|
||
body = `<div class="module-card__empty-hint">${ICONS.empty}暂无原型页面</div>`;
|
||
}
|
||
return `<div class="module-card${has?'':' module-card--empty'}"><div class="module-card__header"><span class="module-card__name">${mod.name}</span>${tag}</div>${body}</div>`;
|
||
}
|
||
|
||
/* 生成 Tab 内容 */
|
||
SITE_MAP.forEach((t, i) => {
|
||
const div = document.createElement('div');
|
||
div.className = 'tab-content' + (i === 0 ? ' tab-content--active' : '');
|
||
div.dataset.idx = i;
|
||
let html = '';
|
||
if (t.modules) {
|
||
html = '<div class="module-grid">' + t.modules.map(m => cardHTML(m)).join('') + '</div>';
|
||
} else {
|
||
t.roles.forEach(r => {
|
||
const icon = ICONS.role[r.id] || '';
|
||
html += `<div class="role-group"><div class="role-group__title"><span class="role-icon role-icon--${r.id}">${icon}</span>${r.role}</div><div class="module-grid">`;
|
||
html += r.modules.map(m => cardHTML({ ...m, name: m.name })).join('');
|
||
html += '</div></div>';
|
||
});
|
||
html += `<div class="role-group"><div class="role-group__title"><span class="role-icon role-icon--shared">${ICONS.role.shared}</span>全角色共享</div><div class="module-grid">`;
|
||
html += t.shared.map(m => cardHTML(m)).join('');
|
||
html += '</div></div>';
|
||
}
|
||
div.innerHTML = html;
|
||
tabContents.appendChild(div);
|
||
});
|
||
|
||
/* Tab 切换 */
|
||
tabNav.addEventListener('click', e => {
|
||
const item = e.target.closest('.tab-nav__item');
|
||
if (!item) return;
|
||
const idx = item.dataset.idx;
|
||
tabNav.querySelectorAll('.tab-nav__item').forEach(el => el.classList.remove('tab-nav__item--active'));
|
||
tabContents.querySelectorAll('.tab-content').forEach(el => el.classList.remove('tab-content--active'));
|
||
item.classList.add('tab-nav__item--active');
|
||
tabContents.querySelector(`[data-idx="${idx}"]`).classList.add('tab-content--active');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |