设置页
Settings Page
别名:设置页面设置面板偏好设置系统设置页账号设置配置页面个人设置
这是什么
集中管理账号偏好与系统配置的功能页面：一侧是稳定的设置导航（通用、通知、安全等分区）， 另一侧是行式表单列表——每行一个"标签 + 控件 + 说明"，低频修改、即改即存。 页面按配置域分区而非按任务流组织，用户靠扫读标题定位，改完即走。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 账号资料、通知、安全等偏好集中管理
- 配置项多、需要分区导航定位
- 修改低频但需要随时可达的入口
✕ 不适用场景
- 高频操作流（应放进对应工作界面）
- 只有 2～3 个开关的极简产品（并入菜单即可）
- 需要管理员审核的审批流页面
常见形式
侧栏导航设置
Sidebar Settings
左侧分区导航 + 右侧表单，最常见
标签页设置
Tabbed Settings
顶部 Tab 切换配置域，适合少分区
分组单页
Sectioned Single Page
所有分区纵向滚动一页到底
弹窗设置
Modal Settings
轻量设置以弹窗承载，不离开当前页
页面结构
- 01
设置导航
按分区分组，标出当前所在分区。
- 02
设置分区
每个分区只放一类设置，标题与说明清晰。
- 03
行式表单
标签 + 控件 + 帮助文本，即时保存或统一保存二选一。
- 04
危险区
删除 / 注销等不可逆操作，红色隔离并二次确认。
- 05
保存条
未保存时出现，明确「有改动未保存」状态。
实现要点
flexgridposition: stickyscroll-margin-top: 6rem侧栏变体：nav sticky，内容区按分区渲染行式表单（label 左、控件右）。 分组单页变体用锚点 + scroll-margin 联动高亮当前分区。行式表单切换控件用受控 switch；有未保存更改时底部浮出保存条（sticky bottom）。危险区用红色边框与 二次确认弹窗隔离在页面末尾。
相关概念
固定在页面一侧（通常左侧）的垂直导航区，承载产品的主要层级入口。 后台管理系统的事实标准：顶部放品牌与全局搜索，侧边栏放模块树，内容区专注任务。
组件包含组件用滑轨上的圆形滑块表示二元设置的开与关，拨动立即生效，无需确认。 滑块位移与轨道变色同时反馈状态，右侧或内嵌「开 / 关」文字辅助辨认， 是设置页的标准控件。
组件包含组件用一条带边框的水平输入区收集单行文本，是表单的基本单元。 占位符提示期望格式，聚焦时高亮边框引导视线，校验失败时切换错误色 并附提示文案；可内嵌前后缀图标与清除按钮，受控管理输入值。
组件包含组件用一排可切换的标签把同一区域的内容分成互斥视图：标签头常驻可点击，仅当前 标签对应的面板可见，其余隐藏。适合把高度相关的几类内容压缩在同一区域内 就地切换，避免整页跳转。键盘上用左右方向键在标签间移动，是可访问性的经典范例。
组件包含组件在视口角落短暂出现、自动消失的小消息条，用来告知操作结果（已保存、已复制、上传完成）。 不打断当前流程，通常附一个操作入口（撤销、查看），停留约 3~5 秒后淡出。
组件包含组件