组合模式
设置工作区
偏好分组、未保存提示与完整的保存周期。
设置页需要同时回答:当前值是什么、修改是否已保存、失败后是否还在。这个模式把静态说明、受控偏好和稳定的底部操作区放在一起。
安装
pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/settings-demo.json首次使用请先完成 Registry 与主题接入。
可以实际体验的流程
修改显示名称、主题或通知开关后,页面标记未保存。保存期间禁用重复操作;成功更新已保存快照,失败保留草稿;“还原”回到上次成功状态。将“保存响应”切到失败,可以检查恢复路径。
预览中的外观和时区只修改本地示例偏好,不改变文档主题,也不执行真实时区换算或网络请求。刷新画布会回到初始数据。
组成
| 部分 | 组件 | 职责 |
|---|---|---|
| 页面结构 | SettingsLayout | 标题、介绍、主要内容宽度 |
| 偏好分组 | SettingsSection、SettingsGroup | 任务分段、分隔行与说明 |
| 设置项 | SettingsRow、SwitchField | 文字说明与独立可访问控件 |
| 身份与动作 | Avatar、Button | 识别当前编辑对象和提交操作 |
| 结果 | Alert | 成功、失败与草稿保留说明 |
模式 API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
locale | zh / en | zh | 示例文案语言 |
SettingsDemo 是可复制的组合参考。接入时替换本地快照和定时器,通用 Settings 组件本身没有保存接口。
接入真实业务
草稿、已保存快照与请求状态分别管理。只在服务器确认成功后更新已保存快照;失败时保留用户输入,并把错误放在动作附近。临时权限或订阅状态不应直接覆盖用户原有偏好。
需要未保存离开保护时,由应用路由与平台层接入;涉及自动保存时,重新定义失败提示和重试策略,不要保留与实际行为不符的保存按钮。
键盘与验收
使用 Tab 能访问每个字段和动作;Space 切换开关。检查名称为空、保存失败、连续点击、恢复快照与窄容器换行。结果说明使用状态语义,同时不打断正在编辑的字段。
使用边界
不要用临时开关状态假装已持久化;不要在保存失败后清空草稿;不要给每一个设置项增加单独的重卡片。
来源与版本
0.1.0。结构语言来自 Subtic 设置工作区,演示数据与保存状态机在 Kitseed 中独立构建;不包含 Subtic 的账户、权限、路由或桌面桥接。