# Teable 权限矩阵 UI 交互说明 > 页面：`https://teable.inkreach.cc/base/bseVtXyL4aojvUDwFhn/authority-matrix` > 梳理日期：2026-07-29 > 梳理方式：使用管理员账号在真实页面进行黑盒交互验证。未创建或保存测试角色，页面最终恢复为初始的“权限矩阵关闭”状态。 ## 1. 页面定位与整体结构 权限矩阵用于为当前数据库配置基于角色的访问控制。页面主内容从上到下分为： 1. 标题区：`权限矩阵`、总开关、顶部 `添加角色`。 2. 管理员区：管理员规则说明、`查看`、`添加用户`、管理员用户列表。 3. 自定义角色区：说明文案、`默认角色` 下拉框、角色列表或空状态。 4. 角色编辑器：添加或编辑角色时替换权限矩阵主内容区，不以模态框呈现。 页面仍保留数据库左侧导航和右侧 AI 助手，因此权限矩阵主内容区不是全屏页面。 ### 1.1 页面外壳布局 本次桌面端实测视口为 `929 × 869 px`，页面采用横向三段式应用外壳： ```text ┌──────────────────────┬──────────────────────────────────────────────┬────┐ │ 数据库左侧导航 │ 权限矩阵主工作区 │ AI │ │ 约 288 px │ 自适应填充剩余宽度 │栏 │ │ │ │约 │ │ 空间名称、搜索 │ 权限矩阵主页 / 角色编辑器 │40px│ │ 权限矩阵、邀请、更多 │ │ │ │ 创建、表格树 │ │ │ │ │ │ │ │ │ │ │ │ 当前用户、通知 │ │ │ └──────────────────────┴──────────────────────────────────────────────┴────┘ ``` - 左侧数据库导航为固定宽度栏，与权限矩阵业务内容之间使用竖向分隔线。 - 主工作区占据中间剩余空间，是权限矩阵主页和角色编辑器共用的内容容器。 - 右侧 AI 助手在当前宽度下折叠为窄图标栏；此前更宽状态下可展开成完整对话面板。 - 页面外壳占满视口高度。左侧用户信息和通知入口固定在导航底部，不随中间内容滚动。 - 权限矩阵的浮层、下拉框和禁用确认框覆盖在主工作区上方，不改变三段式外壳宽度。 ### 1.2 权限矩阵主页布局 主页采用单列内容流，主内容在工作区内保留约 `32 px` 左右内边距： ```text ┌──────────────────────────────────────────────────────────────┐ │ 权限矩阵 [总开关] [+ 添加角色] │ │ │ │ 管理员 │ │ 说明文字 查看 │ │ [添加用户] [管理员标签……] │ │ │ │ 自定义角色 默认角色 [无权限 ▾] │ │ 说明文字 │ │ │ │ 空状态插图 │ │ 尚未设置角色 │ │ 辅助说明 │ │ [+ 添加角色] │ └──────────────────────────────────────────────────────────────┘ ``` - 顶部标题和总开关位于同一行左侧，主操作 `添加角色` 右对齐。 - `管理员` 和 `自定义角色` 是纵向排列的两个业务区块，不使用独立卡片包裹，主要依靠标题、留白和对齐形成层级。 - 管理员说明、`查看`、添加用户按钮和用户标签组成紧凑信息组。 - 自定义角色区标题与说明靠左，`默认角色` 标签和下拉框在同一行靠右，形成左右对照布局。 - 无角色时，空状态在剩余内容区域水平居中；插图、标题、说明和按钮纵向居中排列。 - 空状态会占用大量垂直留白，使页面重点落在“创建第一个角色”操作上。 ### 1.3 角色编辑器整体布局 点击 `添加角色` 后，左侧数据库导航和右侧 AI 栏保持不变，中间主页替换为角色编辑器： ```text ┌──────────────────────────────────────────────────────────────┐ │ [返回] [角色名称输入框] │ │ 角色规则说明备注 │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 左侧表格导航 │ 右侧权限详情 │ │ │ │ 搜索表格 │ 表格权限 │ │ │ │ │ 视图权限 │ │ │ │ 表格 / 分组树 │ 记录权限 │ │ │ │ 权限摘要 │ 字段权限矩阵 │ │ │ │ │ 导入 / 导出权限 │ │ │ ├──────────────────────────┴───────────────────────────────┤ │ │ │ [取消] [保存] [保存并返回] │ │ │ └──────────────────────────────────────────────────────────┘ │ └──────────────────────────────────────────────────────────────┘ ``` - 编辑器顶部是角色元信息区：返回图标和角色名称输入框横向排列，规则说明位于下一行。 - 权限编辑主体使用带边框和圆角的双栏容器。 - 在本次视口下，双栏容器宽约 `536 px`：左栏约 `228 px`，右栏约 `308 px`。尺寸为截图估算值，不代表实现中的固定像素约束。 - 左栏为表格导航，顶部固定搜索框，下方是可展开的表格树和当前权限摘要。 - 右栏为所选表格的权限详情。选择 `无权限` 时内容较短；选择 `可编辑` 后纵向展开多个权限分区。 - 左右栏之间使用竖向分隔线；各权限分区之间使用横向分隔线，形成清晰的二维结构。 - 底部操作栏横跨双栏，按钮整体右对齐，`保存并返回` 使用深色主按钮，`取消` 和 `保存` 使用次级按钮。 ### 1.4 编辑器滚动与固定区域 - 编辑器外层高度受当前视口约束，不会随着字段数量无限向下撑开页面。 - 左侧表格树与右侧权限详情位于操作栏上方的可用高度内。 - 右侧权限详情为主要滚动区域。字段权限矩阵和导入/导出权限位于下方，需要在详情区内纵向滚动查看。 - 底部 `取消 / 保存 / 保存并返回` 操作栏保持可见，不随右侧权限内容滚走。 - 左侧表格导航在滚动右侧详情时保持位置，便于随时切换表格。 - 字段权限本身是四列矩阵。在较窄工作区中，字段名列与三个操作列必须保持清晰对应；若字段名过长，需要截断或提示策略，当前数据未触发明显横向溢出。 ### 1.5 视觉层级与密度 - 页面以白色为主背景，左侧当前导航项、选中表格行使用浅灰底色强调。 - 深色填充只用于高优先级动作，例如顶部 `添加角色`、空状态 `添加角色` 和 `保存并返回`。 - 标题层级依次为页面标题、区块标题、权限分区标题和辅助标签；字号与字重的差异比颜色差异更明显。 - 主页密度较低，使用大面积留白突出空状态；角色编辑器密度明显提高，以分栏、分隔线、复选框和矩阵承载配置任务。 - 权限详情中的相关控件紧密分组，不同权限域之间通过更大的上下间距和分隔线区分。 ### 1.6 状态变化对布局的影响 | 状态变化 | 布局变化 | | --- | --- | | 权限矩阵关闭 → 开启 | 管理员标签直接进入管理员区，`添加用户` 启用；页面整体结构不变 | | 无角色 → 有角色 | 预计空状态区域替换为角色列表；本次未创建角色，因此列表布局待验证 | | 主页 → 添加角色 | 中间工作区整体切换为角色编辑器，左右应用外壳不变 | | 表格无权限 → 可编辑 | 右栏从单个权限区扩展为长内容区，并启用内部滚动 | | 所有视图 → 特定视图 | 在当前视图单选项下方原位插入视图复选列表，后续区块整体下移 | | 分组收起 → 展开 | 左栏在分组节点下原位插入二级子表，右栏当前选择不变 | | 搜索表格 | 左栏树被过滤，右栏继续显示当前所选表格的权限 | | 禁用权限矩阵 | 中央确认框覆盖主工作区，背景内容留在原位 | ### 1.7 响应式范围说明 - 以上布局基于 `929 × 869 px` 桌面视口实测。 - 当前宽度下右侧 AI 助手已经折叠，但左侧数据库导航仍完整保留，说明系统优先压缩辅助面板。 - 本次未切换到平板或手机宽度，因此尚不能确认左侧导航是否抽屉化、角色编辑双栏是否改为上下堆叠、字段矩阵是否启用横向滚动。 - 若复刻该页面，建议至少验证 `1440 px`、`1024 px`、`768 px` 和 `375 px` 四档宽度，重点检查双栏编辑器和字段权限矩阵。 ## 2. 权限矩阵总开关 ### 2.1 关闭状态 - 开关为关闭状态。 - `添加角色` 仍可点击，允许提前定义角色规则。 - `添加用户` 为禁用状态。 - 管理员列表不在主区域直接展示；`查看` 仍可展开管理员信息。 - 默认角色控件和已有角色配置仍可见。 - 当前无自定义角色时展示空状态： - 插图替代文本：`No roles available`。 - 标题：`尚未设置角色`。 - 说明：`创建你的第一个角色，开启灵活高效的权限管理`。 - 空状态内提供第二个 `添加角色` 入口。 关闭权限矩阵的产品语义由确认弹窗明确说明：协作者将能够查看所有数据。 ### 2.2 开启 - 点击关闭状态的开关后立即开启，没有二次确认。 - 开关开启后，管理员用户直接显示在管理员区。 - `添加用户` 从禁用变为可用。 - 其余角色配置继续保留。 ### 2.3 关闭 点击开启状态的开关不会立即关闭，而是显示确认弹窗： - 标题：`禁用权限矩阵`。 - 风险提示：`协作者将能够查看所有数据，是否继续？` - 操作：`取消`、`确认`、右上角 `Close`。 - `取消`、`Close` 应关闭弹窗并维持开启状态。 - `确认` 关闭权限矩阵，随后 `添加用户` 重新变为禁用。 因此，总开关存在有意的不对称交互：开启即时生效，关闭需要风险确认。 ## 3. 管理员区 说明文案为：`空间可管理角色的用户可以管理权限矩阵，且不受其限制。` 这表示管理员是权限矩阵的豁免主体；角色规则不限制拥有空间角色管理能力的用户。 ### 3.1 查看管理员 - `查看` 是可展开按钮。 - 点击后在浮层中展示管理员头像和名称。 - 再次点击按钮或点击浮层外区域可收起。 - 本次环境只显示用户 `2197651308`。 ### 3.2 添加用户 - 权限矩阵关闭时按钮禁用。 - 权限矩阵开启后按钮可用。 - 点击后打开用户选择浮层，并自动展开组合框。 - 选择源只包含可被加入管理员集合的现有用户。 - 当前没有候选用户时显示：`没有用户可被选择`。 - `Esc` 可关闭浮层。 当前环境没有候选用户，因此未验证选择用户后的确认、去重和移除流程。 ## 4. 默认角色 - `默认角色` 使用单选下拉框。 - 当前没有自定义角色时，下拉框仅提供并选中 `无权限`。 - 合理推断：创建角色后，角色会成为默认角色的可选项；新加入且未被显式分配角色的协作者应使用该默认角色。此推断需要结合产品规则或创建角色后的实际行为再次确认。 ## 5. 添加角色入口 存在两个等价入口： - 页面标题右侧 `添加角色`。 - 无角色空状态中的 `添加角色`。 点击后，权限矩阵主页被角色编辑器替换。编辑器初始值为： - 角色名：`自定义角色`。 - 角色说明：未填写时显示 `角色规则说明备注`。 - 所有普通表格：`无权限`。 - 表格分组：显示 `自动隐藏`，其子表分别配置权限。 ## 6. 角色基本信息 ### 6.1 返回按钮 编辑器左上角为仅图标返回按钮。未单独验证它与底部 `取消` 在存在未保存改动时是否完全一致。 ### 6.2 角色名称 - 角色名称为单行文本框。 - 新建角色默认填入 `自定义角色`，可直接编辑。 - 本次未提交空名称、重复名称或超长名称，因此校验规则待确认。 ### 6.3 规则说明备注 - 未聚焦时以可点击文本 `角色规则说明备注` 展示。 - 点击后原位切换成文本输入框。 - 输入框失焦后回到静态展示状态。 ## 7. 表格导航与搜索 角色编辑器左栏是可展开的表格树，每项右侧显示权限摘要。 ### 7.1 普通表格 - 普通表格直接作为一级节点，例如 `自动推单表`。 - 点击节点会选中该表格，并在右侧显示详细权限。 - 摘要随权限选择即时更新，例如从 `无权限` 变为 `可编辑`。 ### 7.2 表格分组 - 分组节点例如 `系统配置`，初始摘要为 `自动隐藏`。 - 点击分组只展开或收起子表，不会把分组本身设为权限配置对象。 - 子表以二级节点出现，并各自显示 `无权限` 或 `可编辑` 摘要。 - 本次观察到的子表包括：RIIN 快递公司确定规则、RIIN 发货工厂确定规则、工厂发货地址、物流渠道、发货仓、判定规则、定时更新订单信息、定时推送订单、定时同步订单。 ### 7.3 搜索表格 - 输入框占位符为 `搜索表格`。 - 输入内容后即时过滤表格树，无需回车。 - 搜索会保留匹配子表及其父分组。例如输入 `RIIN` 后，只显示 `系统配置` 及两个包含 RIIN 的子表。 - 当前选中项匹配时保持选中。 - 清空输入应恢复完整树；本次未发现独立清除按钮。 ## 8. 表格权限 每张表的顶层权限是单选项： - `可编辑` - `无权限` ### 8.1 无权限 - 右侧只显示表格权限单选项。 - 视图、记录、字段、导入和导出等细粒度设置全部隐藏。 - 左侧表格摘要显示 `无权限`。 ### 8.2 可编辑 - 左侧摘要立即变为 `可编辑`。 - 右侧展开全部细粒度设置。 - 新切换为可编辑时，默认允许绝大多数操作、所有记录、所有视图、全部字段操作以及导入导出。 由 UI 表现可见，`可编辑` 是详细权限编辑模式，并不等于所有子权限必须保持开启。 ## 9. 视图权限 ### 9.1 视图操作 使用独立复选框控制： - 创建视图 - 删除视图 - 更新视图 复选框可单独开关。 ### 9.2 可查看的视图 单选模式： - `所有视图` - `特定视图` 选择 `特定视图` 后，原位展开当前表的视图清单，每个视图使用独立复选框。`自动推单表` 当前展示： - 明细表 - 待推送订单 - 已推送订单 - 手动推送订单 - 表格视图 切换到 `特定视图` 时，现有视图默认全部选中。本次观察中，切换后 `创建视图` 同时由选中变为未选中，体现“仅允许特定现有视图”与“允许创建新视图”之间的联动约束；建议实现或复刻时将该依赖作为明确规则并补充自动化测试。 ## 10. 记录权限 ### 10.1 记录操作 使用独立复选框控制： - 创建记录 - 删除记录 - 更新记录 - 对记录进行评论 - 复制记录 ### 10.2 可查看的记录 单选模式： - `所有记录` - `符合特定条件的记录` 本次浏览器可访问性操作未能触发第二项，因此没有安全确认条件构建器的具体 UI。该选项在界面上可见且未标记为禁用，预期选择后应展开字段、运算符和值组成的条件编辑器；该部分属于待补充验证项，不应将预期当作已验证行为。 ## 11. 字段权限 字段权限以矩阵表呈现： | 列 | 含义 | | --- | --- | | 字段 | 字段名称及字段类型图标 | | 查看记录 | 是否能在读取记录时看到该字段值 | | 更新记录 | 是否能修改已有记录的该字段值 | | 创建记录 | 新建记录时是否能为该字段赋值 | 交互规则： - 每个权限单元格使用复选框独立控制。 - 三个权限列的表头均有 `Select all` 复选框，用于整列全选或全不选。 - 默认状态为三列全部选中。 - 部分特殊字段存在不可取消的权限。例如当前表的主字段 `订单号` 的“查看记录”复选框为选中且禁用，表示主字段至少必须可见。 - 字段数量较多时矩阵纵向滚动，底部的导入/导出权限位于字段矩阵之后。 字段之间、查看/更新/创建三类权限之间是否存在更多级联约束，本次未逐项修改后保存，因此应通过专门测试补充。 ## 12. 导入与导出权限 位于每张可编辑表格配置的底部，使用两个独立复选框： - `导入数据到表格` - `导出表格数据` 新切换为可编辑时两项默认选中。 ## 13. 保存与退出 编辑器底部固定提供： - `取消`：放弃本次新建或编辑并返回权限矩阵主页。本次验证中，取消后没有创建角色，临时权限修改也没有保留。 - `保存`：预期保存当前配置并停留在编辑器中，便于继续编辑；为避免写入真实业务权限，本次未点击验证。 - `保存并返回`：预期保存后返回权限矩阵主页；本次未点击验证。 本次在有未保存修改时点击 `取消` 没有出现二次确认，直接退出。实现同类交互时应注意误操作丢失配置的风险。 ## 14. 关键状态联动 | 触发 | UI 结果 | | --- | --- | | 开启权限矩阵 | 立即生效；管理员直接展示；`添加用户` 可用 | | 关闭权限矩阵 | 先弹出风险确认；确认后 `添加用户` 禁用 | | 表格设为无权限 | 隐藏全部细粒度权限 | | 表格设为可编辑 | 展开视图、记录、字段、导入和导出权限 | | 视图设为特定视图 | 展开视图复选清单，并观察到创建视图自动关闭 | | 展开表格分组 | 显示子表，但不改变右侧当前选中表 | | 输入表格搜索词 | 即时过滤表格树并保留匹配项的父分组 | | 点击角色说明占位文本 | 原位切换为文本输入框 | | 取消角色编辑 | 直接放弃未保存修改并返回，无二次确认 | ## 15. 需要后续补充验证的边界 以下交互因当前环境没有候选用户、没有现有自定义角色，或会改变真实业务权限而未执行到提交阶段： 1. 角色名称的必填、重复、长度和特殊字符校验。 2. `保存` 与 `保存并返回` 的确切导航、成功提示和失败反馈。 3. 已创建角色卡片的编辑、复制、删除、排序和用户分配菜单。 4. 默认角色变更的即时保存方式与影响范围。 5. 为角色添加或移除用户，以及同一用户的多角色冲突规则。 6. `符合特定条件的记录` 的条件构建器和多条件组合逻辑。 7. 字段权限之间的级联约束，以及全选在“部分选中”状态下的视觉表现。 8. 权限矩阵开启后，对不同角色用户实际访问表格、视图、记录和字段的最终效果。 9. 窄屏、触屏、键盘导航及屏幕阅读器体验。 ## 16. 实现或复刻时的验收重点 - 权限矩阵关闭必须明确提示“所有协作者可查看全部数据”的风险。 - 管理员必须始终豁免角色限制，且界面需清楚说明。 - 表格权限必须是细粒度权限的总门控：无权限时不应保留可操作的隐藏子权限。 - 表格树的分组展开、表格选择和搜索过滤必须是彼此独立的状态。 - 视图、记录和字段权限都应支持局部选择，并正确保存半选状态。 - 主字段等系统强制权限应呈现禁用态，避免用户误以为可以取消。 - 取消未保存修改目前没有确认；若配置成本较高，建议补充脏状态提示。 - 所有保存类操作都应具备加载态、防重复提交、成功反馈和失败回滚。