角色分配界面必须用为根容器，分三层结构：→（角色分组）→+（权限项），禁用布局，搜索框置于内所有之前且为type="search"。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
角色分配界面该用什么HTML结构
角色分配界面本质是「权限配置表单」，不是纯展示页，<form></form> 必须作为根容器，所有操作（勾选、保存、搜索）都应包裹在它内部。避免用 <div> 模拟表单——这会导致提交逻辑断裂、键盘回车无法触发、无障碍支持失效。
<p>核心结构分三层：<code><form></form> → <fieldset></fieldset>（按角色分组）→ <label></label> + <input type="checkbox">（权限项）。不用 <table> 布局权限矩阵，语义错误且响应式困难；现代做法是用 CSS Grid 或 Flex 实现行列对齐。
<h3>权限项怎么组织才不混乱</h3>
<p>用户看到的不是“一堆复选框”，而是有层级的权限树：角色名（如“运营专员”）是主干，其下权限项（如“编辑商品”“导出报表”）是分支。必须用 <code><legend></legend> 配合 <fieldset></fieldset> 标注每个角色区块，否则屏幕阅读器无法识别分组关系。
- 每个
<input type="checkbox">必须有唯一id，对应<label for="xxx"></label>，点击文字也能触发勾选 - 禁用全选/反选 JavaScript 时，保留原生
<input type="checkbox" indeterminate>状态样式（需 CSS 模拟，因 HTML 不支持该属性直接渲染） - 敏感操作权限（如“删除用户”）建议加
data-sensitive="true"自定义属性，便于后续 JS 做二次确认
为什么用 dir="rtl" 会破坏角色分配界面
除非你的系统明确面向阿拉伯语、希伯来语等 RTL 语言用户，否则在角色分配页硬加 dir="rtl" 到 或 会导致三处实际问题：
立即学习“前端免费学习笔记（深入）”；
- 复选框图标（✓）默认靠左对齐，
dir="rtl"后视觉位置错乱，用户误判是否已勾选 - CSS 中写的
margin-left: 8px会变成逻辑上的margin-inline-start，但开发者往往没同步改所有间距声明，导致控件堆叠 - 权限描述文字若含英文或数字（如“API_KEY_READ”），
dir="auto"可能误判方向，显示为 “DAER_YEK_API”
真要支持 RTL，只应在语言切换后，对 动态添加 dir="rtl"，并配套整套逻辑属性 CSS（padding-inline-start 替代 padding-left），而不是在开发初期就全局启用。
搜索和筛选功能放哪里最合理
角色分配界面常被忽略的是搜索入口位置——它不该塞在顶部导航栏里，也不该浮在右上角。正确位置是 <form></form> 内部、所有 <fieldset></fieldset> 之前，且必须是 <input type="search"> 而非普通 text，以激活浏览器原生搜索建议和清空按钮。
筛选条件（如“仅显示已启用角色”）要用 <select></select> 或开关式 <input type="checkbox">，与搜索框同级并列，不要嵌套进搜索框的 <label></label> 里。否则键盘 Tab 键顺序错乱，用户无法连续操作。
注意：搜索结果不能仅靠前端 filter 隐藏 DOM 元素，必须触发后端重新返回匹配的角色数据——权限变更频繁，客户端缓存容易过期。
