wehub-skill-sync
3.5 KiB
3.5 KiB
Layouts
请只选择一种布局。在生成 index.html 之前，先在回复中说明你的选择。
这三种布局共用 assets/template.html 的同一外壳结构：
grid-template-columns: 240px 1fr（侧边栏 + 主内容区）、44px 高的顶栏、56px 的页面顶部内边距，以及页面列上 1100px 的最大宽度。
A · 经典仪表盘（默认）
页面列内采用垂直堆叠布局，顺序如下：
- 页面头部（emoji + 标题 + 元信息行）
- 实时构件标注
- KPI 网格——1 行 × N 列（N =
inputs.kpi_count），1px 细线网格 - 双栏区域——
1.1fr 1fr：- 左侧：近 7 天创建的任务迷你趋势图卡片
- 右侧：近期活动动态信息流卡片
- 关联数据库——
任务 · 当前冲刺 - 页脚
在以下情况使用此布局：
- 用户只说了「团队仪表盘」/「运营仪表盘」，未加进一步限定。
- 用户想要一个类似 Notion 的通用的团队工作区着陆页。
example.html 文件提供的正是此布局。
B · 看板风格
外壳结构相同，但将关联数据库（第 5 步）替换为一个三列看板：
┌── 待办 ────────┐ ┌── 进行中 ──────┐ ┌── 审核中 ──────┐
│ 卡片 │ │ 卡片 │ │ 卡片 │
│ 卡片 │ │ 卡片（已变更） │ │ 卡片 │
│ + 添加 │ │ 卡片 │ │ 卡片 │
└────────────────┘ └────────────────┘ └────────────────┘
卡片采用 1px 边框、12px 内边距，包含：emoji 行 + 标题（中等字重）+ 负责人标签 + 截止日期。
在以下情况使用此布局：
- 用户明确提到了「看板」「冲刺面板」「积压视图」。
inputs.include_task_table为 true，并且用户提到了拖拽/泳道/列。
实时行为保持不变：卡片在刷新时会从一列动画过渡到下一列（250ms 缓动平移，并在被移动的卡片上添加 600ms 的强调色左边框）。
C · 仅 KPI 主视图
完全去掉数据库。页面只有：
- 页面头部
- 标注（稍高一些——用于说明数据范围）
- 主 KPI 网格：2 × 2 布局，数字字号从 32px 到 56px（使用
display_scale参数） - 迷你趋势图占满整行宽度（不分双栏）
- 活动信息流变为单行水平滚动条（最多显示 3 行，每 8 秒自动滚动一次）
- 页脚
在以下情况使用此布局：
inputs.include_task_table === false。- 用户提到了「高管摘要」「晨会」「周报快照」。
- 用户想要一个投放在办公室电视上的内容。
密度与响应式说明（适用于以上三种布局）
density参数控制各区块之间的间距（标注 → KPI → 双栏 → 数据库）——低密度为 8px，高密度为 36px。默认值为 18。- 视口宽度小于 980px 时，侧边栏隐藏，页面内边距降为 20px，KPI 网格变为 2 列，双栏区域改为上下堆叠。
- 视口宽度小于 640px 时，关联数据库隐藏「截止日期」和「优先级」列，看板变为单列垂直滚动。
- 在所有情况下遵守
prefers-reduced-motion: reduce——禁用过渡动画、脉冲效果、看板卡片平移、滚动条自动滚动以及实时小圆点的脉冲动画。