# 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. 实现或复刻时的验收重点

- 权限矩阵关闭必须明确提示“所有协作者可查看全部数据”的风险。
- 管理员必须始终豁免角色限制，且界面需清楚说明。
- 表格权限必须是细粒度权限的总门控：无权限时不应保留可操作的隐藏子权限。
- 表格树的分组展开、表格选择和搜索过滤必须是彼此独立的状态。
- 视图、记录和字段权限都应支持局部选择，并正确保存半选状态。
- 主字段等系统强制权限应呈现禁用态，避免用户误以为可以取消。
- 取消未保存修改目前没有确认；若配置成本较高，建议补充脏状态提示。
- 所有保存类操作都应具备加载态、防重复提交、成功反馈和失败回滚。
