工作区权限配置Workspace Permission Settings

B 端后台B2B admin表单Form配置Settings侧边栏Sidebar单栏Single column专业Professional克制Restrained
权限配置
运营管理员12 名成员使用此角色
订单权限
权限变更会记录到审计日志。

标本可交互,可以切换不同状态。Interactive specimen — switch between the available states.

适用场景Use cases

角色配置、权限确认、变更保存角色配置 · 权限确认 · 变更保存

关键状态Key states

默认Default待确认Pending错误Error成功反馈Success

布局结构Structure

  1. 配置导航Settings navigation
  2. 角色基本信息Role basics
  3. 分组权限矩阵Grouped permission matrix
  4. 固定保存区Persistent save area

视觉特征Visual traits

  • 标签位于控件上方Labels sit above controls
  • 继承权限有明确来源Inherited permissions have a clear source
  • 高风险选项附带影响说明High-risk options explain impact

实现约束Implementation guardrails

需要做到Do

  • 显示未保存变更Show unsaved changes
  • 高风险权限二次确认Confirm high-risk permissions twice
  • 错误信息紧邻对应字段Keep errors beside the affected field

避免Avoid

  • 用 placeholder 代替字段标签Use a placeholder instead of a field label
  • 保存失败后清空用户输入Clear user input after a failed save

AI 风格说明AI design brief

构建一个能解释权限影响并防止误操作的角色配置页。 适用场景:角色配置、权限确认、变更保存。 页面结构:配置导航;角色基本信息;分组权限矩阵;固定保存区。 视觉特征:标签位于控件上方;继承权限有明确来源;高风险选项附带影响说明。 关键状态:默认、待确认、错误、成功反馈。 需要做到:显示未保存变更;高风险权限二次确认;错误信息紧邻对应字段。 避免:用 placeholder 代替字段标签;保存失败后清空用户输入。Build a role settings page that explains permission impact and prevents mistakes. Use cases: Role configuration, Permission review, Saving changes. Structure: Settings navigation; Role basics; Grouped permission matrix; Persistent save area. Visual traits: Labels sit above controls; Inherited permissions have a clear source; High-risk options explain impact. Key states: Default, Pending, Error, Success. Do: Show unsaved changes; Confirm high-risk permissions twice; Keep errors beside the affected field. Avoid: Use a placeholder instead of a field label; Clear user input after a failed save.

来源:LearnUI PM 原创示例,MIT License

我的参考集

组合页面参考、知名网站、UI 元素和视觉风格,导出给 AI。

你的下一份设计,从这里开始。

在任意标本旁点击「加入参考」,就能把页面、品牌、组件和风格组合成一份 AI 设计说明。

浏览页面参考

搜索参考库Search the library

输入关键词,搜索所有参考。