白板组件尺寸档清单（逐个设计排版用）¶
0.11 工程参考：现行组件与令牌以
packages/gui为准；旧业务变量是兼容层，不构成另一套主题标准。主题、壁纸与布局可调整。使用入口见 OneGUI，英文见 Design system。生成于 2026-10-11，口径由霖在本次会话确认（见 §0）。 机读事实源：
apps/desktop/src/state/widgets.ts的SIZE_PLANS与freeSizeWidgetIds()。 本清单只列需要分别设计不同大小排版的组件；其余组件保留自由控制，不参与逐档设计。
0. 本次确认的口径¶
- 取消所有组件的自由缩放。只有四类特殊组件保留自由控制：分割线、标题（文字）、入口按钮、列表。
- 其余组件改为挡位控制：每个档位一套专门排版，尺寸只能从该组件的档位清单里挑。
- 档位沿用本仓库基准网格：1 单位 = 手机 1 列。提案用到 1×1 / 2×1 / 2×2 / 4×1 / 4×2 / 4×4。
- 「添加组件」抽屉的展开态改为横向滑动的档位列表：滑到哪一档，底部「添加」就加哪一档。
- 长按菜单「改变大小」复用同一个抽屉：自动选中当前档位，底部按钮为「修改大小」， 确认后替换该位置组件的尺寸，四周组件按既有重排算法让位。
- 挡位组件不参与按内容撑高的拟合：档位是唯一尺寸。
- 历史文档不做一次性迁移；尺寸在渲染与写入两处按最近档位吸附。
1. 需要逐个设计排版的组件（15 个）¶
下表就是设计工作清单。「设计状态」列为 [ ] 表示尚未给出该组件的逐档排版。
| 组件 | 目录 id | 档位（由小到大） | 推荐档位 | 各档位要呈现什么（提案，待逐个定稿） | 设计状态 |
|---|---|---|---|---|---|
| 时钟 | custom:clock |
2×1, 2×2 | 2×1 | 2×1 时分；2×2 加秒与日期星期 | [x] |
| 日期 | custom:date |
2×1, 4×1 | 2×1 | 2×1 日期与星期；4×1 加年份 | [x] |
| 天气 | custom:weather |
2×2, 4×2 | 2×2 | 2×2 现温与体感湿度；4×2 加三日预报 | [x] |
| 余额速览 | custom:balance-strip |
4×1, 4×2 | 4×1 | 4×1 余额与电费各一行；4×2 余额、电费、最近一笔流水 | [ ] |
| 今日概览 | custom:today-overview |
4×1, 4×2, 4×4 | 4×1 | 4×1 三项计数一行；4×2 计数与最近一条截止；4×4 计数、今日课程、待办清单 | [ ] |
| 日程与提醒 | custom:agenda |
4×2, 4×4 | 4×2 | 4×2 最近两条；4×4 按时间分组的列表 | [ ] |
| 下一节课 | custom:next-class |
1×1, 2×1, 4×2 | 1×1 | 1×1 倒计时；2×1 倒计时与课程名；4×2 课程名、地点、时间、进度 | [ ] |
| 校园卡余额（卡片） | custom:cardEntry |
1×1, 2×1, 2×2 | 1×1 | 1×1 金额；2×1 金额与标签；2×2 金额、标签、进入生活页的入口 | [ ] |
| 今日预约 | custom:resv |
1×1, 2×1, 4×2 | 1×1 | 1×1 条数；2×1 条数与最近一条；4×2 逐条时间与地点 | [ ] |
| 订阅新闻（卡片） | custom:news |
1×1, 2×1, 4×2 | 1×1 | 1×1 条数；2×1 最新标题；4×2 标题、来源、时间 | [ ] |
| 校园卡余额（数字卡） | custom:mine-balance |
1×1, 2×1, 2×2 | 1×1 | 1×1 只留金额；2×1 金额与标签；2×2 金额、标签、最近一笔流水 | [ ] |
| 学分 | custom:mine-credit |
1×1, 2×1, 2×2 | 1×1 | 1×1 只留数字；2×1 数字与标签；2×2 数字、标签、已修门数 | [ ] |
| GPA | custom:mine-gpa |
1×1, 2×1, 2×2 | 1×1 | 1×1 只留数值；2×1 数值与标签；2×2 数值、标签、加权口径（全部学年） | [ ] |
| 学生卡 | custom:mine-student |
2×1, 4×1, 4×2 | 2×1 | 2×1 姓名与学号；4×1 再加院系一行；4×2 三行分层 | [ ] |
| 已修课程 | custom:report-done |
1×1, 2×1, 2×2 | 2×2 | 1×1 门数；2×1 门数与标签；2×2 门数、标签、学分小计 | [ ] |
| 总学分 | custom:report-credit |
1×1, 2×1, 2×2 | 2×2 | 1×1 学分数；2×1 学分数与标签；2×2 学分数、标签、最近学期学分 | [ ] |
| 全部学年加权 | custom:report-overall |
1×1, 2×1, 2×2 | 2×2 | 1×1 数值；2×1 数值与标签；2×2 数值、标签、参与统计的学期数 | [ ] |
| 最新学期加权 | custom:report-latest |
1×1, 2×1, 2×2 | 2×2 | 1×1 数值；2×1 数值与标签；2×2 数值、标签、学期名 | [ ] |
余额速览 - 4x1保持现状（左校园卡右电费） - 4x2 上方校园卡，下方电费。排版：左侧“校园卡”，右侧余额数字¥（电费同理）
其余均保持提案
2026-10-12 进度：§1 全部 15 个组件都已按档位设计并落到代码。设计与真机读数见
docs/原子收藏-可行性与实现方案.md§14：
- 统计类 7 张（已修课程 / 总学分 / 全部学年加权 / 最新学期加权 / 校园卡余额 / 学分 / GPA）：按霖给的 GPA 方案统一到 一块骨架
StatTile（五个槽位 +grid-template-areas换布局）：1×1 数值+名称 / 2×1 图标+右侧两栏 / 2×2 图标名称 + 居中数值与口径 + 最后一行进度。- 学生卡 2×1 / 4×1 / 4×2：姓名+学号 → 再加院系（横向铺开）→ 三行分层且姓名放大。
- 下一节课 1×1 / 2×1 / 4×2：倒计时 → 加课程名 → 加时间、地点与自走进度条（补了自足卡体，并把
pickNextClass等时间换算抽到HomeWidgets供今日页共用）。- 校园卡余额卡片 1×1 / 2×1 / 2×2：金额+名称 → 图标+两栏 → 加「生活页 · 流水与充值」（补了自足卡体）。
- 今日预约 1×1 / 2×1 / 4×2：条数 → 加最近一条时间与场馆 → 逐条（补了自足卡体）。
- 订阅新闻 1×1 / 2×1 / 4×2：条数 → 加最新标题 → 整列表（补了自足卡体，取数抽成
useSubsNewsFeed）。- 今日概览 4×1 / 4×2 / 4×4：三项计数 → 加最近一条截止 → 再铺开今天前几节课（自持取数版）。
- 日程与提醒 4×2 / 4×4：最近两条 → 铺满（自持取数版）。
- 余额速览 4×1 / 4×2：并排 → 上下两行、左名称右数值（§14.2 前一批已落）。
2. 保留自由控制、不需要逐档设计的组件（35 个）¶
这四类组件的形态由内容决定，逐档设计没有收益，四边把手与按内容撑高的拟合照旧。
2.1 分割线与文字（3）¶
| 组件 | 目录 id |
|---|---|
| 分隔线 | divider |
| 文字标题 | text-title |
| 文字标签 | text-label |
2.2 入口按钮（16）¶
| 组件 | 目录 id |
|---|---|
| 选课 | custom:xk |
| 宿舍 / 电费 / 订水 | custom:life-dorm |
| 洗衣机 | custom:life-washer |
| 校园卡 | custom:life-card |
| 图书馆座位 | custom:reserve-lib |
| 研讨间 | custom:reserve-room |
| 学期切换 | custom:learn-semester |
| 网络学堂搜索 | custom:learn-search |
| 电子发票 | custom:life-invoice |
| 银行代发 | custom:life-payroll |
| 研究生收入 | custom:life-gradincome |
| 卫生成绩 | custom:life-hygiene |
| 空教室 | custom:reserve-classroom |
| 校园网 | custom:life-network |
| 体育预约 | custom:reserve-sports |
| 公共空间 | custom:reserve-kongjian |
这些跳转按钮的描述性文字（右侧“>”符号处的）要在不同尺寸下写不同版本。4x1是完整版，3x1缩句，2x1右侧只显示「进入」两字，1x1不写
2.3 列表与栏目（15）¶
| 组件 | 目录 id |
|---|---|
| 未提交作业 | custom:homework |
| 最近通知 | custom:notices |
| 今日课程 | custom:classes |
| 猜你喜欢 | custom:for-you |
| 全部作业 | custom:learn-assignments |
| 全部通知 | custom:learn-notices |
| 全部课程文件 | custom:learn-files |
| 全部成绩 | custom:info-report |
| 体测成绩 | custom:info-fitness |
| 考试安排 | custom:info-exams |
| 教学评估 | custom:info-evaluation |
| 校历 | custom:info-calendar |
| 订阅新闻（栏目） | custom:info-news |
| 个人信息 | custom:info-profile |
| 课程信息栏目 | custom:info-courseinfo |
2.4 行级条目（1）¶
| 组件 | 目录 id |
|---|---|
| 课程文件条目 | custom:learn-file |
3. 逐档排版的落地方式¶
两种钩子都已在本次改动里接好，设计排版的下一步只需写其中一种。
3.1 只改样式：槽位的 data-widget 与 data-size¶
每个槽位带 data-widget="custom:<id>" 与 data-size="<w>x<h>"。示例：
.board-slot[data-widget="custom:mine-gpa"][data-size="1x1"] .mine-stat-label { display: none; }
.board-slot[data-widget="custom:mine-gpa"][data-size="2x2"] .mine-stat-num { font-size: 28px; }
3.2 需要换结构：渲染器的第二个参数¶
卡体渲染器签名是 (props?, size?) => ReactNode，size 即当前档位。示例：
[cardRendererKey("mine-gpa")]: (_props, size) => <MineGpaCard size={size} />,
抽屉里的档位预览走同一套渲染器与同一个 data-size，因此设计出的排版在预览与白板上一致。
4. 仍需霖决策的两项¶
- §1 的档位集合与推荐档位是第一轮提案。确认后按最终清单设计排版；需要增删档位时改
apps/desktop/src/state/widgets.ts的SIZE_PLANS。 - 1×1 这类小档位是否允许继续存在（小米规范的最小档位是 2×2）。当前按本仓库细网格保留了 1×1， 用于侧栏卡片与数字卡。——保留
5. 另外的细节问题¶
现在有的卡片（比如今日概览、校园卡、GPA...）下方都有一层主题默认色打底填满高度（卡片没有占满高度，只占了上面的7/8大概，下面就会出现一条难看的主体色打底），这样很难看且不协调；而有的组件又没有背景，在预览界面只剩一堆幽灵一样的文字。