创建页表单 UI 定稿

两套独立、用户可选的创建页样式（与项目列表 / 时间轴列表样式同一模式）， 不是混合： D 分组卡片 · E 写作台。 探索稿中的 A（现状 Outline）过丑，不进入定稿。 媒体选择与后续流程按现有代码一并定稿，两套样式共用同一套媒体交互与数据模型。

定稿 · 双样式可选 create_form_style: grouped | composer 默认 grouped（D） A 已淘汰 · 非混合
选型规则

预览 · D · 分组卡片

三组白卡：正文 / 归属与时间 / 媒体。扫读结构最稳。

9:41●●●
‹
添加记录
📄
⋯
正文
标题
请输入标题
内容
可选
归属与时间
标签
选择 ›
子项目
未归组 ›
创建时间
可选 ›
媒体
图片 0 / 9
＋添加
🌄
背景图
可选
添加
♪
音乐
本地或网易云
添加
标签 + 未归组 ▾ 时间 · 现在 模板
标题
在这里书写记录内容…
🖼
🌄
♪
添加图片
📷
拍照
ImageSource.camera · 单张写盘
🖼
从相册选择
多图可多选 · 受剩余额度截断
取消
图片
🔍
预览
GalleryViewer / ViewerWidget
＋
添加更多
剩余额度内
✕
删除此张
移出列表
🗑
清空全部
onImagesChanged([])
取消
添加音乐
✏️
本地录入
歌名 / 歌手 / 专辑 / 歌词 / 封面
☁
网易云链接
解析 songId · 拉封面与信息
🗑
移除音乐
onMusicChanged(null)
取消
9:41●●●
‹
音乐
完成
歌名
必填
歌手
必填
专辑
必填
歌词
可选
封面
＋ 选择封面图

保存时 ColorUtil 抽主色 → MusicBoothModel； 记录提交前 TimelineViewModel.saveMusicBooth。 此页布局与 D/E 创建页壳无关，两套共用。

关闭 1 / 3 ⋯

D 与 E 对照（独立两套，非混合）

维度 D · grouped E · composer 共用
主结构 三组白卡纵向 胶囊 + 书写面 + 工具栏 同一 Form 状态
标题/正文 正文组内字段 书写面大标题+正文 title / content 控制器
标签/子项目/时间 归属组行列表 顶部胶囊 同一选择器/DatePicker
图片 媒体组横滑 + 砖 🖼 工具 + 书写面下附件条 ≤9，PictureUtils
背景 媒体组摘要行 🌄 工具（有值高亮） 0–1 单图
音乐（记录） 摘要行 / 渐变卡 ♪ 工具 + 迷你卡 MusicInputPage
保存 底栏主按钮 底栏主按钮（或 AppBar 完成，定稿保留底栏一致） 同一 submit
适合 字段多、要扫读 先写后填附属 用户自选

字段与代码映射（两套共用）

字段记录项目代码
标题*✓✓ TextEditingController + validator
正文/描述✓✓ TextEditingController，可选
标签✓✓ TagSelectorWidget
子项目✓— DropdownButtonFormField<int?>
创建时间✓— showDatePicker + showTimePicker
图片 ≤9✓✓ 项目图片 ImagePickerSection → pickMultipleImages
背景 0–1✓✓ SingleImagePicker → pickImage
音乐 0–1✓— MusicPickerWidget → MusicInputPage
模板✓ AppBar— TemplateSelectionPage

媒体全流程（D / E 共用，入口形态不同）

入口形态
  D: 媒体组内 + 砖 / 背景行 / 音乐行
  E: 书写面底栏 🖼 / 🌄 / ♪  （有值：角标数量 / 工具高亮 / 附件条与迷你音乐卡）

其后流程相同：

[图片]
  点入口 → BottomSheet: 拍照 | 相册 | 取消
  拍照 → pickImage(camera) → 写盘 1 张
  相册 → pickMultiImage → take(剩余额度) → 写盘
  → onImagesChanged
  → D: 横滑条刷新；E: 附件条 + 🖼 角标
  点缩略图 → 预览 Viewer/Gallery 或操作 Sheet（预览/添加/删单张/清空）
  满 9：隐藏或禁用 +，toast「最多 9 张」

[背景]
  点入口 → 同源 BottomSheet（单选文案）
  → pickImage → onImageChanged(path)
  → D: 行摘要变缩略+「更换」；E: 🌄 高亮
  移除 → null；单击预览 → ViewerWidget

[音乐 · 仅记录]
  点入口 → BottomSheet: 本地 | 网易云 | [移除]
  → push MusicInputPage（软卡片，与 D/E 壳无关）
  本地校验歌名/歌手/专辑 → ColorUtil → MusicBoothModel
  网易云校验 163 → fetchSongId → 元数据/封面
  → onMusicChanged
  → D: 渐变卡；E: ♪ 高亮 + 迷你卡
  记录提交时 saveMusicBooth → musicboothId

取消 / 系统相册取消：静默无 toast
写盘失败上浮错误 toast；不造假成功路径

相对现状

点现状定稿
样式数量 仅 Outline 一种 D / E 用户可选两种
A 现状框 全站创建页 淘汰，不作为可选样式
图片 UI Outline 块 + 双按钮 D 横滑+砖；E 工具+附件条
来源选择 AlertDialog；多图无来源 统一 BottomSheet；拍照/相册都开
MultiImagesWidget showAddButton 未渲染 + D 同轨 + 砖；E 用工具入口

实现提示

文件：docs/create-form-ui-final.html · 探索对照：docs/create-form-ui-design.html（A–E，A 不进定稿）· 未改应用代码。实现时建议 OpenSpec：双样式壳 + 媒体组件去描边 + 来源 Sheet。