yeuimu
6c61a4e871
- Debian-based api image (bookworm-slim), docker/debian mirrors, prisma binaryTargets for openssl 3.0 - nginx: admin SPA under /admin, TLS via acme.sh (ZeroSSL) + auto-renewal cron, http->https redirect - prisma: add origin_goods.delisted migration, sync missing schema (good_image/tag_font_color/good_tags), fix users.createdAt Timestamptz - api: CORS wildcard reflection, helmet CORP cross-origin, price backfill in persistProductDetail, categoryIcon ancestor fallback, mediaByColor per-color gallery in public goods detail - admin: /admin base path (vite + router) - import-data.mjs: udt_name casting, serial sequence advance fix
410 lines
22 KiB
Markdown
410 lines
22 KiB
Markdown
# 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. 实现或复刻时的验收重点
|
||
|
||
- 权限矩阵关闭必须明确提示“所有协作者可查看全部数据”的风险。
|
||
- 管理员必须始终豁免角色限制，且界面需清楚说明。
|
||
- 表格权限必须是细粒度权限的总门控：无权限时不应保留可操作的隐藏子权限。
|
||
- 表格树的分组展开、表格选择和搜索过滤必须是彼此独立的状态。
|
||
- 视图、记录和字段权限都应支持局部选择，并正确保存半选状态。
|
||
- 主字段等系统强制权限应呈现禁用态，避免用户误以为可以取消。
|
||
- 取消未保存修改目前没有确认；若配置成本较高，建议补充脏状态提示。
|
||
- 所有保存类操作都应具备加载态、防重复提交、成功反馈和失败回滚。
|