PM-Shawn
PM-Shawn/Abu-Cowork
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/PM-Shawn/Abu-Cowork --skill html-widget命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | html-widget |
| description | 生成可交互的 HTML 可视化组件 — 算法动画、数据图表、概念演示、交互式教程等。当用户需要交互式演示、动画解释、数据探索、UI 原型等场景时触发，直接输出 html 代码块，前端会在安全沙箱中渲染为可交互组件。 |
| trigger | 用户要求做图表、可视化、交互式演示、动画演示、数据展示、仪表盘、计数器、计时器、小工具、小游戏、算法可视化、UI 原型/mockup、交互式教程，或任何适合用交互/动画来呈现的内容 |
| do-not-trigger | 能用 mermaid 解决的结构化图表（流程图、ER图、时序图）；能用 infographic 解决的数据海报/信息图；用户明确要求生成代码文件而非演示；纯文字能说清的简单问题 |
| user-invocable | true |
| disable-auto-invoke | true |
| argument-hint | <交互组件描述> |
| tags | ["交互","interactive","可视化","visualization","动画","animation","widget","演示","demo","图表","chart"] |
你现在帮用户生成 可交互的 HTML 组件。直接在回复中输出 ```html 代码块，前端会在安全沙箱 iframe 中自动渲染为可交互组件。
重要规则：
| 用户意图 | 做法 |
|---|---|
| "看看"、"分析一下"、"展示"、"解释"、"演示" | → 输出 ```html 代码块（可视化） |
| "导出"、"保存"、"生成报表"、"做个文件"、"发给领导" | → 调用 write_file（文件交付） |
| "分析数据，然后做个报表" | → 先可视化展示关键发现，再写文件 |
输出 ```html 代码块，内容为 HTML 片段（不含 <!DOCTYPE>、<html>、<head>、<body> 标签，这些由渲染器自动包裹）。
必须按此顺序：<style> → HTML 内容 → <script>
<style>
/* 样式在最前——流式渲染时尽早生效 */
</style>
<div id="app">
<!-- HTML 结构——用户最先看到的内容 -->
</div>
<script>
// 逻辑在最后——流式完成后才执行
</script>
根据内容复杂度选择合适的尺寸：
| 类型 | 高度 | 适用场景 |
|---|---|---|
| 紧凑型 | ≤150px | 单个指标卡片、迷你图、简单计数器 |
| 标准型 | 150-400px | 单个图表、数据表格、简单交互 |
| 完整型 | 400-700px | 仪表盘、多图表组合、复杂交互 |
核心审美原则：克制、留白、精致。宁可简洁到"少了点什么"，也不要堆砌到"多了点什么"。每个像素都要有存在的理由。
必须使用浅色/白色背景。禁止深色/黑色背景。
基础色（CSS 变量，已预注入）：
| 变量 | 用途 | 值 |
|---|---|---|
--abu-primary | 主色/强调色 | #d97757（暖橙） |
--abu-text | 正文文字 | #29261b（深棕） |
--abu-text-muted | 次要文字/辅助信息 | #888579（暖灰） |
--abu-bg | 页面背景 | #ffffff |
--abu-bg-secondary | 卡片/区块背景 | #f5f3ee（米白） |
--abu-border | 边框/分割线 | #e5e2db（浅驼） |
数据色板（图表数据系列，按优先级排列）：
| 序号 | 色值 | 名称 | 适用 |
|---|---|---|---|
| 1 | #4F46E5 | 靛蓝 | 默认首选、主数据系列 |
| 2 | #0891B2 | 青色 | 对比系列 |
| 3 | #10B981 | 翠绿 | 正向指标（增长/完成） |
| 4 | #F59E0B | 琥珀 | 警告/中性指标 |
| 5 | #EF4444 | 赤红 | 负向指标（下降/错误） |
| 6 | #7C3AED | 紫色 | 补充系列 |
| 7 | #EC4899 | 玫红 | 补充系列 |
语义色：
#10B981，搭配浅底 #ecfdf5#EF4444，搭配浅底 #fef2f2#F59E0B，搭配浅底 #fffbeb#4F46E5，搭配浅底 #eef2ff配色原则：
所有间距使用 4 的倍数：
| token | 值 | 用途 |
|---|---|---|
--s-1 | 4px | 图标与文字间距、紧凑元素内边距 |
--s-2 | 8px | 相关元素间距、小卡片内边距 |
--s-3 | 12px | 组内元素间距、按钮组 gap |
--s-4 | 16px | 段落间距、卡片内边距（默认） |
--s-5 | 20px | 区块间距 |
--s-6 | 24px | 大卡片内边距、区块间隔 |
--s-8 | 32px | 主要分区间隔 |
用法示例：padding: 16px、gap: 12px、margin-bottom: 24px。不要出现 5px、7px、15px 这种非 4 倍数值。
| 场景 | 值 |
|---|---|
| 小元素（标签、徽章） | 4px |
| 按钮、输入框 | 6px |
| 卡片、面板 | 10px |
| 大容器、模态框 | 12px |
统一使用 border-radius，不要混用不同的圆角值。一个组件内圆角值最多 2 种。
system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif400（正文）和 600（标题/强调），禁用 300/500/700/800font-variant-numeric: tabular-nums 确保对齐| 层级 | 字号 | 字重 | 行高 | 用途 |
|---|---|---|---|---|
| 大标题 | 24px | 600 | 1.3 | 仪表盘主标题 |
| 标题 | 18px | 600 | 1.4 | 区块标题、图表标题 |
| 小标题 | 15px | 600 | 1.5 | 卡片标题 |
| 正文 | 14px | 400 | 1.6 | 默认正文 |
| 辅助 | 12px | 400 | 1.5 | 标签、图例、脚注、数据来源 |
| 超大数字 | 28-36px | 600 | 1.2 | KPI 核心数值 |
中文排版规则：
GDP 总量 101.4 万亿¥1,234,5672024 年 3 月 或 2024-03-15+ 号 → +12.3%， 。 、 （ ）.card {
background: var(--abu-bg-secondary);
border-radius: 10px;
padding: 16px;
}
.card-title {
font-size: 12px;
font-weight: 400;
color: var(--abu-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
12px.kpi-value {
font-size: 28px;
font-weight: 600;
color: var(--abu-text);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.kpi-trend {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
margin-top: 4px;
padding: 2px 6px;
border-radius: 4px;
}
.kpi-trend.up { color: #10B981; background: #ecfdf5; }
.kpi-trend.down { color: #EF4444; background: #fef2f2; }
↑ ↓ 字符 + 语义色背景标签，而不是纯文字.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 13px;
}
.data-table th {
text-align: left;
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--abu-text-muted);
padding: 8px 12px;
border-bottom: 2px solid var(--abu-border);
}
.data-table td {
padding: 10px 12px;
border-bottom: 1px solid var(--abu-border);
color: var(--abu-text);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--abu-bg-secondary); }
tabular-nums.tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--abu-border);
margin-bottom: 16px;
}
.tab {
padding: 8px 16px;
font-size: 13px;
color: var(--abu-text-muted);
border: none;
background: none;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--abu-text); }
.tab.active {
color: var(--abu-primary);
border-bottom-color: var(--abu-primary);
font-weight: 600;
}
.badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
border-radius: 4px;
letter-spacing: 0.3px;
}
.badge-success { color: #10B981; background: #ecfdf5; }
.badge-danger { color: #EF4444; background: #fef2f2; }
.badge-warning { color: #D97706; background: #fffbeb; }
.badge-info { color: #4F46E5; background: #eef2ff; }
.progress-track {
height: 6px;
background: var(--abu-border);
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
border-radius: 3px;
background: var(--abu-primary);
transition: width 0.4s ease;
}
.divider {
height: 1px;
background: var(--abu-border);
margin: 16px 0;
}
基础按钮样式已预设在渲染器中，直接用 <button> 即可。
/* 主要操作 */
.btn-primary {
background: var(--abu-primary);
color: #fff;
border-color: var(--abu-primary);
}
.btn-primary:hover { opacity: 0.9; }
/* 次要操作 */
.btn-secondary {
background: var(--abu-bg-secondary);
border-color: var(--abu-border);
}
/* 小按钮 */
.btn-sm { padding: 4px 8px; font-size: 12px; }
/* 按钮组 */
.btn-group { display: inline-flex; gap: 8px; }
开始 重置 下一步）opacity: 0.5; pointer-events: none.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
┌─ 标题区（标题 + 副标题/数据来源）──────────────────┐
│ │
├─ KPI 行（3-4 个指标卡片）──────────────────────────┤
│ │
├─ 主图表区（全宽或左右分栏）────────────────────────┤
│ │
├─ 辅助区（表格/列表/补充图表）──────────────────────┤
│ │
└─ 脚注（数据来源、时间戳）──────────────────────────┘
// 全局默认值（在创建图表前设置）
Chart.defaults.font.family = "system-ui, -apple-system, 'PingFang SC', sans-serif";
Chart.defaults.font.size = 12;
Chart.defaults.color = '#888579';
Chart.defaults.plugins.legend.labels.usePointStyle = true;
Chart.defaults.plugins.legend.labels.boxWidth = 8;
Chart.defaults.plugins.legend.labels.boxHeight = 8;
Chart.defaults.plugins.legend.labels.padding = 16;
// 推荐配置
const chartOptions = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom', // 图例放底部，不占标题空间
labels: { usePointStyle: true, boxWidth: 8, boxHeight: 8, padding: 16 }
},
tooltip: {
backgroundColor: '#29261b',
titleFont: { size: 13 },
bodyFont: { size: 12 },
padding: 10,
cornerRadius: 6,
displayColors: true,
}
},
scales: {
x: {
grid: { display: false }, // X 轴隐藏网格线
ticks: { font: { size: 12 } },
border: { color: '#e5e2db' }
},
y: {
grid: { color: '#f5f3ee' }, // Y 轴用极浅网格线
ticks: { font: { size: 12 } },
border: { display: false }
}
}
};
const echartsTheme = {
backgroundColor: 'transparent',
textStyle: { fontFamily: "system-ui, -apple-system, 'PingFang SC', sans-serif" },
title: { textStyle: { fontSize: 16, fontWeight: 600, color: '#29261b' } },
legend: { bottom: 0, itemWidth: 12, itemHeight: 8, textStyle: { fontSize: 12, color: '#888579' } },
grid: { left: 60, right: 20, top: 40, bottom: 50, containLabel: false },
xAxis: { axisLine: { lineStyle: { color: '#e5e2db' } }, splitLine: { show: false } },
yAxis: { axisLine: { show: false }, splitLine: { lineStyle: { color: '#f5f3ee' } } },
tooltip: {
backgroundColor: '#29261b', borderWidth: 0, textStyle: { color: '#fff', fontSize: 12 },
padding: [8, 12], extraCssText: 'border-radius: 6px;'
},
color: ['#4F46E5', '#0891B2', '#10B981', '#F59E0B', '#EF4444', '#7C3AED', '#EC4899']
};
#f5f3ee）或隐藏，不要用深色borderRadius: 6，柱宽适中不要太细2px，圆点 4px，hover 6px万 亿 单位，tooltip 显示完整数字<span class="generated-date"></span> 占位，JS 中用 new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-') 动态填充background、color、border-color、opacity、transform，时长 0.15sbackground 微调亮度，按钮 opacity: 0.9 或 background 变色cursor: pointer + hover 视觉变化box-shadow 变化、filter: blur()、大幅 transform 动画（流式渲染不兼容）linear-gradient / radial-gradient）box-shadow）、模糊（filter: blur）position: fixed（iframe 内无效）import（用 <script src=""> 引入）↑ ↓ ● ▶ ◀ ✓ ✕ →）<!-- 图表 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<!-- 动画 -->
<script src="https://cdn.jsdelivr.net/npm/animejs@3"></script>
可用 CDN 前缀：cdn.jsdelivr.net / cdnjs.cloudflare.com / unpkg.com / esm.sh
库选择指南：
注意：外部脚本和内联脚本按顺序执行（渲染器已处理加载顺序）。不要用 window.onload 包裹代码，直接写即可。
<style>
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpi-card { background: var(--abu-bg-secondary); border-radius: 10px; padding: 16px; }
.kpi-label { font-size: 11px; font-weight: 400; color: var(--abu-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-value { font-size: 28px; font-weight: 600; color: var(--abu-text); font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 8px; }
.kpi-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; margin-top: 8px; padding: 2px 8px; border-radius: 4px; }
.kpi-trend.up { color: #10B981; background: #ecfdf5; }
.kpi-trend.down { color: #EF4444; background: #fef2f2; }
</style>
<div class="kpi-row">
<div class="kpi-card">
<div class="kpi-label">总销售额</div>
<div class="kpi-value">¥284.7 万</div>
<div class="kpi-trend up">↑ 12.3% 环比</div>
</div>
<div class="kpi-card">
<div class="kpi-label">订单量</div>
<div class="kpi-value">3,842</div>
<div class="kpi-trend down">↓ 3.1% 环比</div>
</div>
<div class="kpi-card">
<div class="kpi-label">客单价</div>
<div class="kpi-value">¥741</div>
<div class="kpi-trend up">↑ 5.8% 环比</div>
</div>
</div>
<style>
.chart-header { margin-bottom: 16px; }
.chart-title { font-size: 18px; font-weight: 600; color: var(--abu-text); }
.chart-subtitle { font-size: 12px; color: var(--abu-text-muted); margin-top: 4px; }
.chart-wrap { position: relative; height: 320px; }
</style>
<div class="chart-header">
<div class="chart-title">2020–2025 年 GDP 增长趋势</div>
<div class="chart-subtitle">数据来源：国家统计局 · 单位：万亿元</div>
</div>
<div class="chart-wrap">
<canvas id="chart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script>
(function() {
Chart.defaults.font.family = "system-ui, -apple-system, 'PingFang SC', sans-serif";
Chart.defaults.color = '#888579';
new Chart(document.getElementById('chart'), {
type: 'bar',
data: {
labels: ['2020', '2021', '2022', '2023', '2024', '2025'],
datasets: [{
label: 'GDP（万亿元）',
data: [101.4, 114.9, 121.0, 126.1, 134.9, 140.2],
backgroundColor: '#4F46E5',
borderRadius: 6,
maxBarThickness: 48,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: '#29261b', : , : ,
: { : }, : { : }
}
},
: {
: { : { : }, : { : } },
: { : { : }, : { : }, : }
}
}
});
})();
</script>
<style>
.demo-header { margin-bottom: 16px; }
.demo-title { font-size: 18px; font-weight: 600; color: var(--abu-text); }
.demo-desc { font-size: 12px; color: var(--abu-text-muted); margin-top: 4px; }
.stage { position: relative; height: 240px; border: 1px solid var(--abu-border); border-radius: 10px; overflow: hidden; background: var(--abu-bg-secondary); }
.controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.info { font-size: 13px; color: var(--abu-text-muted); text-align: center; margin-top: 8px; }
</style>
<div class="demo-header">
<div class="demo-title">冒泡排序可视化</div>
<div class="demo-desc">点击"下一步"逐步观察排序过程</div>
</div>
<div class="stage" id="stage"></div>
<div class="controls">
<button onclick="prev()">◀ 上一步</button>
<button class="btn-primary" onclick="next()">下一步 ▶</button>
<button onclick="autoPlay()">自动播放</button>
</div>
<div class="info" id="info">已就绪，共 8 个元素</div>
<script>
// 演示逻辑...
</script>
<style>
.page-header { margin-bottom: 20px; }
.page-title { font-size: 24px; font-weight: 600; color: var(--abu-text); }
.page-subtitle { font-size: 12px; color: var(--abu-text-muted); margin-top: 4px; }
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.kpi-card { background: var(--abu-bg-secondary); border-radius: 10px; padding: 16px; }
.kpi-label { font-size: 11px; color: var(--abu-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-value { font-size: 28px; font-weight: 600; color: var(--abu-text); font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 8px; }
.kpi-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; margin-top: 8px; padding: 2px 8px; border-radius: 4px; }
.kpi-trend.up { color: #10B981; background: #ecfdf5; }
.kpi-trend.down { color: #EF4444; background: #fef2f2; }
.section { margin-bottom: 20px; }
.section-title { font-size: 15px; font-weight: 600; color: var(--abu-text); margin-bottom: 12px; }
.chart-wrap { position: relative; height: 300px; background: var(--abu-bg-secondary); border-radius: 10px; padding: 16px; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.data-table th { text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--abu-text-muted); padding: 8px 12px; border-bottom: 2px solid var(--abu-border); }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--abu-border); }
.data-table tr:last-child td { border-bottom: none; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.footnote { font-size: 11px; color: var(--abu-text-muted); margin-top: 16px; }
</style>
<div class="page-header">
<div class="page-title">Q4 销售分析报告</div>
<div class="page-subtitle">2024 年 10–12 月 · 数据截至 2024-12-31</div>
</div>
<div class="kpi-row">
<div class="kpi-card">
<div class="kpi-label">总营收</div>
<div class="kpi-value">¥847 万</div>
<div class="kpi-trend up">↑ 15.2%</div>
</div>
<div class="kpi-card">
<div class="kpi-label">订单数</div>
<div class="kpi-value">12,458</div>
<div class="kpi-trend up">↑ 8.7%</div>
</div>
<div class="kpi-card">
<div class="kpi-label">客单价</div>
<div class="kpi-value">¥679</div>
<div class="kpi-trend down">↓ 2.1%</div>
</div>
<div class="kpi-card">
<div class="kpi-label">退货率</div>
<div class="kpi-value">3.2%</div>
<div class="kpi-trend up">↑ 0.4pp</div>
</div>
</div>
<div class="section">
<div class="section-title">月度趋势</div>
<div class="chart-wrap"><canvas id="chart"></canvas></div>
</div>
<div class="section">
<div class="section-title">分品类明细</div>
<table class="data-table">
<thead><tr><th>品类</th><th class="num">营收</th><th class="num">占比</th><th class="num">同比</th></tr></thead>
<tbody>
<tr><td>电子产品</td><td class="num">¥3,240,000</td><td class="num">38.2%</td><td class="num" style="color:#10B981">+22.1%</td></tr>
<tr><td>家居用品</td><td class="num">¥2,180,000</td><td class="num">25.7%</td><td class="num" style="color:#10B981">+11.5%</td></tr>
<tr><td>服装配饰</td><td class="num">¥1,850,000</td><td class="num">21.8%</td><td class="num" style="color:#EF4444">-3.2%</td></tr>
<tr><td>食品饮料</td><td class="num">¥1,200,000</td><td class="num">14.2%</td><td class="num" style="color:#10B981">+8.9%</td></tr>
</tbody>
</table>
</div>
<div class="footnote">数据来源：内部销售系统 · 生成时间：<span class="generated-date"></span></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script>
(function() {
Chart.defaults.font.family = "system-ui, -apple-system, 'PingFang SC', sans-serif";
// 动态填充生成日期
var dateEl = document.querySelector('.generated-date');
if (dateEl) dateEl.textContent = new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-');
Chart.defaults.color = '#888579';
new Chart(document.getElementById('chart'), {
type: 'line',
data: {
labels: ['10 月', '11 月', '12 月'],
datasets: [
{ label: '营收（万元）', data: [265, 278, 304], borderColor: '#4F46E5', backgroundColor: 'rgba(79,70,229,0.08)', : , : , : , : , : },
{ : , : [, , ], : , : , : , : , : , : }
]
},
: {
: , : ,
: {
: { : , : { : , : , : , : } },
: { : , : , : }
},
: {
: { : { : }, : { : } },
: { : { : }, : { : } }
}
}
});
})();
</script>
当用户要求"画个原型"、"做个 mockup"、"设计一个页面"时，生成高保真静态原型，模拟真实 App/Web 界面。
375px、平板 768px、桌面 1024px，居中显示display 实现页面导航，不要用 iframe 或多个 HTML 文件原型不一定用 Abu 品牌色，根据产品类型选择合适的主色：
| 产品类型 | 推荐主色 | 辅色 |
|---|---|---|
| 企业/SaaS | #4F46E5（靛蓝） | #6366F1 |
| 电商 | #EF4444（红）或 #F97316（橙） | #FCA5A5 |
| 社交/内容 | #0EA5E9（天蓝） | #38BDF8 |
| 金融 | #0891B2（青）或 #1D4ED8（深蓝） | #67E8F9 |
| 健康/生活 | #10B981（绿） | #6EE7B7 |
| 工具/效率 | #6366F1（紫）或 #8B5CF6 | #A78BFA |
| 通用/默认 | #4F46E5 | #818CF8 |
.phone-frame {
width: 375px;
margin: 0 auto;
background: #fff;
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--abu-border);
}
.status-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 20px;
font-size: 12px;
font-weight: 600;
color: #1a1a1a;
}
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
font-size: 17px;
font-weight: 600;
}
.tab-bar {
display: flex;
border-top: 1px solid #f0f0f0;
background: #fff;
padding: 6px 0 20px;
}
.tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
font-size: 10px;
color: #999;
cursor: pointer;
}
.tab-item.active { color: var(--app-primary); }
.tab-icon { font-size: 20px; }
.list-cell {
display: flex;
align-items: center;
padding: 12px 16px;
gap: 12px;
border-bottom: 1px solid #f5f5f5;
cursor: pointer;
}
.list-cell:hover { background: #fafafa; }
.avatar {
width: 44px;
height: 44px;
border-radius: 10px;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 16px;
font-weight: 600;
flex-shrink: 0;
}
.content-card {
margin: 0 16px 12px;
background: #f8f8f8;
border-radius: 12px;
padding: 16px;
}
.search-bar {
margin: 8px 16px;
padding: 10px 12px;
background: #f5f5f5;
border-radius: 10px;
font-size: 14px;
color: #999;
display: flex;
align-items: center;
gap: 8px;
}
.fab {
position: absolute;
right: 20px;
bottom: 80px;
width: 56px;
height: 56px;
border-radius: 28px;
background: var(--app-primary);
color: #fff;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
}
多页面原型通过 JS 切换 display 实现，所有页面 HTML 共存于 DOM 中，用 data-page 属性标识。
核心架构：
/* 页面容器 */
.page { display: none; }
.page.active { display: flex; flex-direction: column; }
/* 转场动画（可选） */
.page { opacity: 0; transition: opacity 0.2s ease; }
.page.active { opacity: 1; }
// 页面切换（全局函数）
function goTo(pageId) {
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
document.getElementById(pageId).classList.add('active');
// 更新底部 tab 高亮
document.querySelectorAll('.tab-item').forEach(t => {
t.classList.toggle('active', t.dataset.page === pageId);
});
}
底部 Tab 切换（主导航）：
goTo('page-xxx') → 同时高亮当前 Tab页面内跳转（子页面/详情页）：
goTo('page-detail') → 顶部 nav 显示返回按钮goTo('page-xxx') 回到来源页页面结构规范：
<div class="phone-frame">
<!-- 所有页面 -->
<div class="page active" id="page-home">
<!-- 顶部固定区：status bar + nav -->
<!-- 中间滚动区：内容 -->
<!-- 底部固定区：tab bar（主页面有，子页面无） -->
</div>
<div class="page" id="page-discover">...</div>
<div class="page" id="page-profile">...</div>
<div class="page" id="page-detail">...</div>
</div>
页面布局（每个 page 内部）：
.page {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
flex-direction: column;
overflow: hidden;
}
.page-header { flex-shrink: 0; }
.page-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.page-footer { flex-shrink: 0; }
注意：
class="page active"，其余页面无 active<style>
:root { --app-primary: #4F46E5; --app-primary-light: #EEF2FF; --app-bg: #f5f5f5; }
* { box-sizing: border-box; }
.phone-frame {
width: 375px; height: 720px; margin: 0 auto;
background: var(--app-bg); border-radius: 20px;
overflow: hidden; border: 1px solid #e5e5e5;
position: relative;
}
/* 页面系统 */
.page { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; flex-direction: column; opacity: 0; transition: opacity 0.2s ease; }
.page.active { display: flex; opacity: 1; }
/* 状态栏 */
.status-bar { display: flex; justify-content: space-between; padding: 10px 20px 6px; font-size: 12px; font-weight: 600; background: #fff; flex-shrink: 0; }
/* 导航栏 */
.nav-bar { display: flex; align-items: center; padding: 4px 16px 12px; background: #fff; flex-shrink: 0; }
.nav-back { font-size: 22px; cursor: pointer; margin-right: 8px; color: var(--app-primary); border: none; background: none; padding: 4px; }
.nav-title { font-size: 17px; font-weight: 600; flex: 1; }
.nav-title.large { font-size: 28px; font-weight: 700; }
.nav-action { font-size: 20px; cursor: pointer; }
/* 内容区 */
.page-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* 底部 Tab Bar */
.tab-bar { display: flex; background: #fff; border-top: 1px solid #f0f0f0; padding: 6px 0 20px; flex-shrink: 0; }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: #999; cursor: pointer; border: none; background: none; padding: 4px; }
.tab-item.active { color: var(--app-primary); }
.tab-icon { font-size: 20px; line-height: 1; }
</style>
<div class="phone-frame">
<!-- ====== 首页 ====== -->
<div class="page active" id="page-home">
<div class="status-bar"><span>9:41</span><span>● ● ●</span></div>
<div class="nav-bar">
<div class="nav-title large">首页</div>
<div class="nav-action">🔔</div>
</div>
<div class="page-body">
<!-- 首页内容... -->
</div>
<div class="tab-bar">
<button class="tab-item active" data-page="page-home" onclick="goTo('page-home')">
<span class="tab-icon">◉</span>首页
</button>
<button class="tab-item" data-page="page-discover" onclick="goTo('page-discover')">
<span class="tab-icon">⌕</span>发现
</button>
<button class="tab-item" data-page="page-profile" onclick="goTo('page-profile')">
<span class="tab-icon">☺</span>我的
</button>
</div>
</div>
<!-- ====== 发现页 ====== -->
<div class="page" id="page-discover">
<div class="status-bar"><span>9:41</span><span>● ● ●</span></div>
<div class="nav-bar"><div class="nav-title large">发现</div></div>
<div class="page-body">
<!-- 发现页内容... -->
</div>
<div class="tab-bar">
<button class="tab-item" data-page="page-home" onclick="goTo('page-home')">
<span class="tab-icon">◉</span>首页
</button>
<button class="tab-item active" data-page="page-discover" onclick="goTo('page-discover')">
<span class="tab-icon">⌕</span>发现
</button>
<button class="tab-item" data-page="page-profile" onclick="goTo('page-profile')">
<span class="tab-icon">☺</span>我的
</button>
</div>
</div>
<!-- ====== 详情页（子页面，无 Tab Bar） ====== -->
<div class="page" id="page-detail">
<div class="status-bar"><span>9:41</span><span>● ● ●</span></div>
<div class="nav-bar">
<button class="nav-back" onclick="goTo('page-home')">‹</button>
<div class="nav-title">详情</div>
<div class="nav-action">↗</div>
</div>
<div class="page-body">
<!-- 详情页内容... -->
</div>
</div>
</div>
<script>
function goTo(pageId) {
document.querySelectorAll('.page').forEach(function(p) { p.classList.remove('active'); });
document.getElementById(pageId).classList.add('active');
document.querySelectorAll('.tab-item').forEach(function(t) {
t.classList.toggle('active', t.dataset.page === pageId);
});
}
</script>
<style>
:root { --app-primary: #4F46E5; --app-primary-light: #EEF2FF; }
.phone-frame { width: 375px; margin: 0 auto; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid #e5e5e5; position: relative; min-height: 680px; }
.status-bar { display: flex; justify-content: space-between; padding: 10px 20px 6px; font-size: 12px; font-weight: 600; }
.nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 12px; }
.nav-title { font-size: 28px; font-weight: 700; }
.nav-action { font-size: 20px; cursor: pointer; }
</style>
<div class="phone-frame">
<div class="status-bar">
<span>9:41</span>
<span>● ● ●</span>
</div>
<div class="nav-bar">
<div class="nav-title">标题</div>
<div class="nav-action">⊕</div>
</div>
<!-- 页面内容 -->
</div>
不用引入图标库，使用 Unicode/Emoji 字符模拟：
| 场景 | 字符 |
|---|---|
| 首页 | ◉ |
| 搜索 | ⌕ |
| 消息 | ✉ |
| 我的 | ☺ |
| 设置 | ⚙ |
| 返回 | ‹ |
| 更多 | ⋯ |
| 添加 | ⊕ |
| 关闭 | ✕ |
| 勾选 | ✓ |
| 收藏 | ☆ / ★ |
| 分享 | ↗ |
| 通知 | 🔔 |
| 图片 | 🏞 |
| 购物车 | 🛒 |
| 点赞 | ♡ / ♥ |
🏞）padding-bottom: 20px）模拟 iPhone Home Indicator基于 SOC 职业分类