kitseed.
组合模式

设置工作区

偏好分组、未保存提示与完整的保存周期。

设置页需要同时回答:当前值是什么、修改是否已保存、失败后是否还在。这个模式把静态说明、受控偏好和稳定的底部操作区放在一起。

安装

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

属性类型默认值说明
localezh / enzh示例文案语言

SettingsDemo 是可复制的组合参考。接入时替换本地快照和定时器,通用 Settings 组件本身没有保存接口。

接入真实业务

草稿、已保存快照与请求状态分别管理。只在服务器确认成功后更新已保存快照;失败时保留用户输入,并把错误放在动作附近。临时权限或订阅状态不应直接覆盖用户原有偏好。

需要未保存离开保护时,由应用路由与平台层接入;涉及自动保存时,重新定义失败提示和重试策略,不要保留与实际行为不符的保存按钮。

键盘与验收

使用 Tab 能访问每个字段和动作;Space 切换开关。检查名称为空、保存失败、连续点击、恢复快照与窄容器换行。结果说明使用状态语义,同时不打断正在编辑的字段。

使用边界

不要用临时开关状态假装已持久化;不要在保存失败后清空草稿;不要给每一个设置项增加单独的重卡片。

来源与版本

0.1.0。结构语言来自 Subtic 设置工作区,演示数据与保存状态机在 Kitseed 中独立构建;不包含 Subtic 的账户、权限、路由或桌面桥接。

本页内容