feat(product-center): implement Figma-designed UI, upload module, and website tests
- Redesign website homepage & product-center per Figma (fonts, logos, hero/footer/customer cases) - Add API upload module (multer) with static serving for uploads/public assets - Add OriginGood.delisted flag and SDS request retry logic - Add admin ImageUpload component and goods import/upload flows - Add vitest suite for website components and composables (32 tests) - Add skills, docs, plans and PRODUCT.md
This commit is contained in:
yeuimu
@@ -0,0 +1,409 @@
|
||||
# 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. 实现或复刻时的验收重点
|
||||
|
||||
- 权限矩阵关闭必须明确提示“所有协作者可查看全部数据”的风险。
|
||||
- 管理员必须始终豁免角色限制，且界面需清楚说明。
|
||||
- 表格权限必须是细粒度权限的总门控：无权限时不应保留可操作的隐藏子权限。
|
||||
- 表格树的分组展开、表格选择和搜索过滤必须是彼此独立的状态。
|
||||
- 视图、记录和字段权限都应支持局部选择，并正确保存半选状态。
|
||||
- 主字段等系统强制权限应呈现禁用态，避免用户误以为可以取消。
|
||||
- 取消未保存修改目前没有确认；若配置成本较高，建议补充脏状态提示。
|
||||
- 所有保存类操作都应具备加载态、防重复提交、成功反馈和失败回滚。
|
||||
@@ -0,0 +1,567 @@
|
||||
# Teable 自动化 UI、交互与运行流程说明
|
||||
|
||||
> 页面范围：`https://teable.inkreach.cc/base/bseVtXyL4aojvUDwFhn/automation/*`
|
||||
> 梳理日期：2026-07-29
|
||||
> 梳理方式：管理员账号黑盒交互验证。创建了临时自动化用于检查编辑流程，未执行任何会改写业务数据或调用外部系统的动作，测试自动化最终已移到回收站。
|
||||
|
||||
## 1. 功能定位
|
||||
|
||||
自动化用于把触发事件、条件判断和执行动作组成可运行的工作流。其基本生命周期为：
|
||||
|
||||
```text
|
||||
创建自动化
|
||||
↓
|
||||
选择并配置触发器
|
||||
↓
|
||||
测试触发器，生成后续步骤可引用的样本数据
|
||||
↓
|
||||
添加一个或多个动作、逻辑节点
|
||||
↓
|
||||
逐步配置并测试节点
|
||||
↓
|
||||
启用自动化
|
||||
↓
|
||||
事件触发或定时运行
|
||||
↓
|
||||
在运行历史中查看状态、耗时、输入、输出和错误
|
||||
```
|
||||
|
||||
页面没有显式的“保存工作流”按钮。节点新增、表格选择等修改会即时持久化，重新打开页面后仍然存在，因此整体采用自动保存模型。
|
||||
|
||||
## 2. 自动化入口与创建
|
||||
|
||||
### 2.1 创建菜单
|
||||
|
||||
数据库左侧导航中有一个横向的 `创建` 按钮。点击后打开菜单：
|
||||
|
||||
- 新表格
|
||||
- 新自动化
|
||||
- 新应用
|
||||
- 新文件夹
|
||||
- CSV 文件
|
||||
- Microsoft Excel
|
||||
|
||||
自动化入口为 `新自动化`，与表格、应用和文件夹创建处于同一级。
|
||||
|
||||
### 2.2 创建行为
|
||||
|
||||
点击 `新自动化` 后：
|
||||
|
||||
1. 系统立即创建一条名为 `新自动化` 的草稿。
|
||||
2. 新自动化作为一级节点插入左侧数据库树并自动选中。
|
||||
3. URL 跳转到 `/base/{baseId}/automation/{workflowId}`。
|
||||
4. 主工作区切换到工作流编辑器。
|
||||
5. 初始启用开关禁用。
|
||||
6. 初始 `运行测试` 按钮禁用。
|
||||
7. 画布中展示触发器选择面板。
|
||||
|
||||
创建过程没有二次确认，也没有独立命名步骤。即使还没有配置触发器，自动化实体已经存在。
|
||||
|
||||
## 3. 页面整体布局
|
||||
|
||||
自动化页面沿用数据库应用外壳，桌面端由四个主要区域组成：
|
||||
|
||||
```text
|
||||
┌──────────────────┬─────────────────────────────────────┬───────────────┐
|
||||
│ 数据库左侧导航 │ 自动化主工作区 │ AI 助手 │
|
||||
│ │ │ 可展开/折叠 │
|
||||
│ 创建入口 │ 标题栏、状态开关、帮助、更多 │ │
|
||||
│ 表格/文件夹树 │ 编辑工作流 / 运行历史 │ │
|
||||
│ 自动化节点 │ 画布或历史列表 │ │
|
||||
│ │ 节点属性面板或运行详情 │ │
|
||||
│ 当前用户、通知 │ │ │
|
||||
└──────────────────┴─────────────────────────────────────┴───────────────┘
|
||||
```
|
||||
|
||||
- 左侧导航固定宽度，自动化与表格、文件夹共享同一棵资源树。
|
||||
- 中间是自动化核心工作区。
|
||||
- 右侧 AI 助手可折叠为窄图标栏，也会在“通过 AI 对话配置”时展开。
|
||||
- AI 助手展开后会压缩自动化工作区宽度，工作流画布和属性面板随之重新排布。
|
||||
|
||||
## 4. 自动化标题栏
|
||||
|
||||
标题栏从左到右包含：
|
||||
|
||||
- 启用/停用开关。
|
||||
- 自动化图标。
|
||||
- 自动化名称。
|
||||
- `添加描述`。
|
||||
- `帮助`。
|
||||
- 更多菜单。
|
||||
|
||||
### 4.1 启用状态
|
||||
|
||||
- 空白自动化的开关禁用。
|
||||
- 已选择触发器但动作未完成时，开关仍禁用。
|
||||
- 完整的现有工作流会显示可操作开关，并在画布中提供 `立即启用` 入口。
|
||||
- 本次已有自动化 `定时同步订单` 处于停用状态，但历史记录仍完整保留。
|
||||
|
||||
为避免影响生产任务，本次未点击启用开关。合理推断：只有所有节点配置有效后才能启用，启用后触发器开始接收事件或按计划运行。
|
||||
|
||||
### 4.2 名称与描述
|
||||
|
||||
- 新建时默认名称为 `新自动化`。
|
||||
- `添加描述` 位于名称下方，作为轻量次级操作。
|
||||
- 更多菜单中的 `重命名` 用于修改名称。
|
||||
- 本次未提交名称或描述修改，未验证长度和重复名称规则。
|
||||
|
||||
### 4.3 更多菜单
|
||||
|
||||
包含：
|
||||
|
||||
- 重命名
|
||||
- 复制
|
||||
- 分享
|
||||
- 节点信息
|
||||
- 删除
|
||||
|
||||
删除会打开确认框：
|
||||
|
||||
- 标题：`删除 自动化`
|
||||
- 提示：`确定要删除 "自动化名称" 吗？`
|
||||
- 操作：`取消`、`移到回收站`
|
||||
|
||||
删除采用可恢复的回收站语义，而不是永久删除。本次创建的测试自动化已通过该流程移到回收站。
|
||||
|
||||
## 5. 顶部页签与操作
|
||||
|
||||
标题栏下方提供：
|
||||
|
||||
- `编辑工作流`
|
||||
- `运行历史`
|
||||
- `密钥管理`
|
||||
- `运行测试`
|
||||
|
||||
### 5.1 编辑工作流
|
||||
|
||||
展示节点画布和节点属性配置，是自动化的默认页签。
|
||||
|
||||
### 5.2 运行历史
|
||||
|
||||
展示自动化的执行记录、汇总指标和单次运行详情。没有历史时显示：
|
||||
|
||||
`当自动化流程运行后，这里会展示运行历史记录。`
|
||||
|
||||
### 5.3 密钥管理
|
||||
|
||||
位于编辑工作流页签右侧，用于管理动作可能引用的密钥。由于可能涉及真实凭据，本次未展开。
|
||||
|
||||
### 5.4 运行测试
|
||||
|
||||
- 没有触发器时禁用。
|
||||
- 触发器配置完成后可用。
|
||||
- 新增未配置动作后会重新禁用。
|
||||
- 表明全局运行测试需要当前工作流内所有必需节点通过配置校验。
|
||||
|
||||
## 6. 初始触发器选择
|
||||
|
||||
空白画布中央展示 `选择一个触发器：`，提供 8 类触发器：
|
||||
|
||||
| 触发器 | UI 说明或用途 |
|
||||
| --- | --- |
|
||||
| 当记录满足条件时 | 记录进入指定条件后运行 |
|
||||
| 当记录创建时 | 新建记录时运行 |
|
||||
| 当记录更新时 | 指定记录发生更新时运行 |
|
||||
| 当表单提交时 | 表单产生提交时运行 |
|
||||
| 定时触发 | 根据时区和计划周期运行 |
|
||||
| 当按钮点击时 | 用户点击表格按钮后运行 |
|
||||
| 当接收 Webhook 时 | 接收外部 HTTP Webhook 后运行 |
|
||||
| 当收到新邮件时 | 邮箱收到新邮件后运行 |
|
||||
|
||||
触发器选择项采用带图标的纵向操作列表，位于空白画布中央。
|
||||
|
||||
## 7. 触发器节点与属性面板
|
||||
|
||||
本次选择了 `当记录创建时`：
|
||||
|
||||
1. 触发器选择列表被替换为节点卡片。
|
||||
2. 节点自动编号为 `1.`。
|
||||
3. 卡片标题为 `1. 当记录创建时`。
|
||||
4. 卡片显示摘要，例如 `当在 自动推单表 表格中新建记录时`。
|
||||
5. 卡片带 `触发器` 类型标签。
|
||||
6. 节点下方出现连接线和 `+` 按钮。
|
||||
|
||||
点击节点后，画布右侧打开约 `350 px` 的属性面板。面板包含：
|
||||
|
||||
- `属性` 标题。
|
||||
- 节点 ID。
|
||||
- 关闭按钮。
|
||||
- `触发器类型` 下拉框。
|
||||
- 触发器用途说明。
|
||||
- 可折叠的 `配置`。
|
||||
- 可折叠的 `测试步骤`。
|
||||
|
||||
### 7.1 配置触发器
|
||||
|
||||
`当记录创建时` 的必填配置是 `表格`：
|
||||
|
||||
- 未选择时显示 `请选择...`。
|
||||
- 点击后打开浮层式表格选择器。
|
||||
- 候选项显示表格图标和名称。
|
||||
- 选择表格后节点摘要即时更新。
|
||||
- 修改会自动持久化。
|
||||
|
||||
### 7.2 测试触发器
|
||||
|
||||
属性面板明确提示：
|
||||
|
||||
`测试此触发器以确认其配置正确。此测试的数据可用于后续步骤。`
|
||||
|
||||
表格未选择时：
|
||||
|
||||
- `选择记录` 禁用。
|
||||
- `使用推荐记录` 禁用。
|
||||
|
||||
表格选择完成后，全局 `运行测试` 可用。
|
||||
|
||||
## 8. 全局运行测试与记录选择器
|
||||
|
||||
点击顶部 `运行测试` 后打开大尺寸模态框：
|
||||
|
||||
```text
|
||||
┌────────────────────────────────────────────────────────────┐
|
||||
│ 选择记录 [×] │
|
||||
│ [全局 ▾] [搜索记录__________________________________ 🔍] │
|
||||
│ ┌────────────────────────────────────────────────────────┐ │
|
||||
│ │ □ | 字段列 | 字段列 | 字段列 | ... │ │
|
||||
│ │ □ | 记录值 | 记录值 | 记录值 | ... │ │
|
||||
│ │ □ | 记录值 | 记录值 | 记录值 | ... │ │
|
||||
│ └────────────────────────────────────────────────────────┘ │
|
||||
│ [取消] [运行自动化] │
|
||||
└────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
UI 细节：
|
||||
|
||||
- 背景使用半透明遮罩，保持原工作流可辨识。
|
||||
- 顶部包含视图范围选择器、记录搜索和清除/搜索图标。
|
||||
- 主体是可横向容纳多字段的记录表格。
|
||||
- 每行左侧有单选复选框。
|
||||
- 表头显示字段类型图标和字段名。
|
||||
- 底部操作右对齐。
|
||||
- 未选择记录时 `运行自动化` 不应执行。
|
||||
|
||||
测试会使用选中记录作为触发器样本，并把其数据提供给后续节点。由于测试流程可能执行后续写入或外部调用，本次只检查到记录选择界面，没有点击 `运行自动化`。
|
||||
|
||||
## 9. 工作流画布
|
||||
|
||||
编辑区采用节点画布：
|
||||
|
||||
- 浅色点阵背景。
|
||||
- 节点垂直排列。
|
||||
- 节点之间使用带方向的连接线。
|
||||
- 连接处有圆形 `+` 按钮。
|
||||
- 流程末端显示圆形终止标记。
|
||||
- 左下角提供放大、缩小、适配视图。
|
||||
- 达到最大缩放时放大按钮禁用。
|
||||
|
||||
节点卡片视觉结构：
|
||||
|
||||
```text
|
||||
┌──────────────────────────────────────┐
|
||||
│ [类型图标] 1. 节点标题 [类型] │
|
||||
│ 配置摘要 [状态] │
|
||||
└──────────────────────────────────────┘
|
||||
```
|
||||
|
||||
- 当前选中节点使用蓝色边框。
|
||||
- 配置异常节点显示红色警告图标。
|
||||
- 节点标题含执行顺序编号。
|
||||
- 触发器与执行动作使用不同类型标签。
|
||||
- 节点菜单可用于节点级操作，具体菜单项未全部执行。
|
||||
|
||||
## 10. 添加动作与逻辑
|
||||
|
||||
点击节点下方 `+` 后打开悬浮菜单，分为两种构建方式。
|
||||
|
||||
### 10.1 AI 构建
|
||||
|
||||
菜单优先展示：
|
||||
|
||||
- 运行脚本，带 `推荐` 标记和说明 `使用 AI 自动化任何逻辑`
|
||||
- Slack
|
||||
- 发送邮件
|
||||
- AI 生成
|
||||
- 创建/更新/获取记录
|
||||
- 发送 HTTP 请求
|
||||
|
||||
这些入口强调按目标选择能力，而不是先选择底层动作类型。
|
||||
|
||||
### 10.2 手动构建
|
||||
|
||||
可展开区域分为：
|
||||
|
||||
操作：
|
||||
|
||||
- 创建记录
|
||||
- 获取记录
|
||||
- 更新记录
|
||||
- 发送邮件
|
||||
- AI 生成
|
||||
- HTTP 请求
|
||||
|
||||
逻辑：
|
||||
|
||||
- 当条件满足...
|
||||
|
||||
手动构建适合用户明确知道动作类型的场景；AI 构建则通过对话或组合入口降低配置成本。
|
||||
|
||||
## 11. 动作节点与配置面板
|
||||
|
||||
本次选择了推荐的 `运行脚本`：
|
||||
|
||||
- 系统在触发器后自动插入 `2. 运行脚本` 节点。
|
||||
- 自动创建连接线。
|
||||
- 新节点自动选中。
|
||||
- 右侧打开动作属性面板。
|
||||
- 因动作尚未配置，节点显示红色警告，全局 `运行测试` 禁用。
|
||||
|
||||
动作属性面板包含：
|
||||
|
||||
- 节点 ID。
|
||||
- `动作类型` 下拉框。
|
||||
- 动作用途说明。
|
||||
- `标签` 区域和描述输入框。
|
||||
- `配置` 区域。
|
||||
- `测试步骤` 区域。
|
||||
|
||||
### 11.1 运行脚本配置
|
||||
|
||||
配置区提供两条路径：
|
||||
|
||||
1. `通过 AI 对话配置`
|
||||
- Slack
|
||||
- 邮件
|
||||
- 自定义
|
||||
2. `手动编辑`
|
||||
|
||||
点击 AI 配置入口会展开右侧 AI 助手，并把当前节点作为上下文标签加入输入区。工作区会同步收窄。
|
||||
|
||||
单节点 `运行测试` 在节点配置不完整时禁用。动作完成配置后，预期可用触发器测试数据单独验证该步骤。
|
||||
|
||||
### 11.2 数据引用关系
|
||||
|
||||
触发器测试说明明确指出其输出可供后续步骤使用。由此可确定：
|
||||
|
||||
- 节点按编号顺序执行。
|
||||
- 后续节点可以引用触发器或前序动作的测试输出。
|
||||
- 单节点测试依赖上游测试数据。
|
||||
- 修改上游节点后，应重新测试相关下游节点。
|
||||
|
||||
## 12. 启用与正式运行
|
||||
|
||||
完整现有工作流的编辑画布中出现 `立即启用`，标题栏开关也从禁用变为可操作。
|
||||
|
||||
建议的正式运行顺序是：
|
||||
|
||||
1. 确保每个节点没有红色配置警告。
|
||||
2. 测试触发器并确认样本数据。
|
||||
3. 逐个测试动作节点。
|
||||
4. 执行一次全局运行测试。
|
||||
5. 检查动作输出和副作用。
|
||||
6. 点击 `立即启用` 或标题栏开关。
|
||||
7. 观察运行历史。
|
||||
|
||||
本次未启用任何生产自动化，也未点击已有运行的 `重跑`。
|
||||
|
||||
## 13. 运行历史布局
|
||||
|
||||
有历史数据时，中间工作区采用三列结构：
|
||||
|
||||
```text
|
||||
┌──────────────────┬──────────────────────┬─────────────────────────┐
|
||||
│ 运行记录列表 │ 概览统计 │ 单次运行详情 │
|
||||
│ 状态、耗时、时间 │ 成功、失败、运行中 │ 总状态、诊断、重跑 │
|
||||
│ │ 等待、取消、平均耗时 │ 各步骤输入与输出 │
|
||||
└──────────────────┴──────────────────────┴─────────────────────────┘
|
||||
```
|
||||
|
||||
### 13.1 运行记录列表
|
||||
|
||||
每条记录展示：
|
||||
|
||||
- 状态图标和文字。
|
||||
- 运行耗时，例如 `1.9 s`。
|
||||
- 运行时间，例如 `2026-07-28 20:02:15`。
|
||||
- 右侧进入详情箭头。
|
||||
|
||||
成功使用绿色，失败使用红色，形成明确的语义色。
|
||||
|
||||
### 13.2 概览统计
|
||||
|
||||
现有 `定时同步订单` 自动化的界面显示以下统计卡：
|
||||
|
||||
- 运行成功
|
||||
- 运行失败
|
||||
- 运行中
|
||||
- 等待中
|
||||
- 已取消
|
||||
- 平均运行时间
|
||||
|
||||
本次观察值为成功 84、失败 14、运行中 0、等待中 0、已取消 0、平均运行时间 27 秒。该数值是观察时的实时业务数据，不是固定产品默认值。
|
||||
|
||||
### 13.3 单次运行详情
|
||||
|
||||
详情顶部展示：
|
||||
|
||||
- 总体运行状态。
|
||||
- 运行时间。
|
||||
- 失败时提供 `诊断`。
|
||||
- 失败时提供 `重跑`。
|
||||
|
||||
下方按工作流步骤展示：
|
||||
|
||||
- 节点名称。
|
||||
- 节点运行状态。
|
||||
- 相对运行时间。
|
||||
- 输入。
|
||||
- 输出。
|
||||
- 原始数据入口。
|
||||
- 执行耗时。
|
||||
|
||||
触发器输入示例包含时区、触发时机、开始时间和原始数据；定时触发器输出包含预计触发时间和下次触发时间。
|
||||
|
||||
运行失败时，上游触发器仍可能显示运行成功，说明系统按节点记录状态，便于定位具体失败步骤。
|
||||
|
||||
## 14. 运行历史筛选
|
||||
|
||||
点击 `过滤条件` 后打开轻量浮层，包含：
|
||||
|
||||
- 状态。
|
||||
- 运行耗时。
|
||||
- 时间范围。
|
||||
|
||||
状态选项包括：
|
||||
|
||||
- 全部
|
||||
- 运行成功
|
||||
- 运行失败
|
||||
- 运行中
|
||||
- 等待中
|
||||
- 已取消
|
||||
|
||||
时间范围通过 `选择日期范围` 打开日期选择器。
|
||||
|
||||
选择失败记录或失败统计后，过滤按钮会显示数量，例如 `过滤条件(1)`，运行列表只保留失败记录。
|
||||
|
||||
## 15. 失败处理
|
||||
|
||||
失败运行的详情页提供：
|
||||
|
||||
- 红色失败状态。
|
||||
- `诊断` 按钮。
|
||||
- `重跑` 按钮。
|
||||
- 每个步骤的独立状态。
|
||||
- 输入和输出展开项。
|
||||
|
||||
交互原则：
|
||||
|
||||
- `诊断` 用于分析失败原因，预期不会重新执行流程。
|
||||
- `重跑` 会再次执行自动化，可能产生真实业务副作用，属于高风险操作。
|
||||
- 用户应先检查失败步骤和输入，再决定是否重跑。
|
||||
|
||||
本次只查看了失败详情，没有点击诊断或重跑。
|
||||
|
||||
## 16. 状态联动矩阵
|
||||
|
||||
| 触发 | UI 状态变化 |
|
||||
| --- | --- |
|
||||
| 创建新自动化 | 左侧立即新增节点，进入空白画布 |
|
||||
| 未选择触发器 | 启用开关和运行测试禁用 |
|
||||
| 选择触发器 | 生成第 1 个节点和添加动作按钮 |
|
||||
| 触发器缺少必填配置 | 测试步骤按钮禁用 |
|
||||
| 完成触发器配置 | 节点摘要更新，全局运行测试可用 |
|
||||
| 添加动作 | 自动编号、连线、选中，并打开属性面板 |
|
||||
| 动作配置不完整 | 节点显示红色警告，全局运行测试禁用 |
|
||||
| 点击节点 | 右侧属性面板打开，画布可用宽度缩小 |
|
||||
| 点击画布或关闭属性面板 | 属性面板收起，画布恢复宽度 |
|
||||
| 点击 AI 配置 | AI 助手展开并携带当前节点上下文 |
|
||||
| 工作流配置完整 | 启用开关可用，出现 `立即启用` |
|
||||
| 切换运行历史 | 画布替换为历史三列布局 |
|
||||
| 选择运行记录 | 右侧显示步骤级输入与输出 |
|
||||
| 筛选运行状态 | 列表过滤，按钮显示已应用条件数量 |
|
||||
| 删除自动化 | 二次确认后移到回收站 |
|
||||
|
||||
## 17. UI 设计细节
|
||||
|
||||
### 17.1 视觉语言
|
||||
|
||||
- 白色面板配浅灰分隔线，适合高密度配置任务。
|
||||
- 画布使用浅色点阵，不抢夺节点内容的注意力。
|
||||
- 紫色用于自动化、触发器和脚本能力识别。
|
||||
- 蓝色表示当前选中节点。
|
||||
- 绿色表示成功，红色表示错误，橙色用于执行动作或中间状态。
|
||||
- 主要依靠边框、浅底色和语义色表达状态，没有重阴影。
|
||||
|
||||
### 17.2 信息层级
|
||||
|
||||
- 顶部标题栏管理自动化级状态。
|
||||
- 页签区管理编辑与历史两种工作模式。
|
||||
- 画布表达执行顺序和节点关系。
|
||||
- 属性面板处理单节点配置。
|
||||
- AI 助手是辅助配置工具，不取代节点属性面板。
|
||||
- 历史页从列表、汇总到详情逐层展开，支持快速扫描和深入排错。
|
||||
|
||||
### 17.3 空间与滚动
|
||||
|
||||
- 左侧资源树独立于中间工作区。
|
||||
- 画布支持缩放和适配视图。
|
||||
- 属性面板在右侧覆盖或占据画布宽度，并可纵向滚动。
|
||||
- AI 助手展开时再占用一列宽度。
|
||||
- 运行历史的列表、汇总和详情各有清晰列边界；内容较长时详情区独立滚动。
|
||||
- 模态记录选择器占据大部分可用宽度，优先保证数据表可读性。
|
||||
|
||||
### 17.4 控件状态
|
||||
|
||||
关键控件均有明显禁用状态：
|
||||
|
||||
- 启用开关。
|
||||
- 全局运行测试。
|
||||
- 触发器选择记录。
|
||||
- 单节点运行测试。
|
||||
- 画布放大按钮。
|
||||
|
||||
红色警告图标直接放在未完成节点上，使配置问题在画布层可见。
|
||||
|
||||
## 18. 安全与权限建议
|
||||
|
||||
自动化可能写入表格、发送邮件、调用 Slack、执行脚本或 HTTP 请求，因此应纳入权限控制：
|
||||
|
||||
- 创建、编辑、启用、停用、删除自动化。
|
||||
- 查看运行历史。
|
||||
- 查看节点输入、输出和原始数据。
|
||||
- 管理密钥。
|
||||
- 运行测试。
|
||||
- 诊断和重跑失败任务。
|
||||
- 分享或复制自动化。
|
||||
|
||||
尤其需要限制 `运行脚本`、`HTTP 请求`、`发送邮件`、`Slack`、`密钥管理` 和 `重跑`。
|
||||
|
||||
## 19. 待补充验证
|
||||
|
||||
以下内容因会影响真实业务或当前环境限制而未执行：
|
||||
|
||||
1. 自动化启用和停用时是否有确认提示。
|
||||
2. 节点全部配置完成后的自动校验反馈。
|
||||
3. 全局测试成功后的完整结果页面。
|
||||
4. 创建、更新记录等写操作的字段映射 UI。
|
||||
5. 条件分支的多条件与嵌套逻辑。
|
||||
6. Webhook URL 生成、签名与请求日志。
|
||||
7. 邮件、Slack、HTTP 和 AI 动作的失败重试策略。
|
||||
8. 密钥管理的新增、编辑、权限和脱敏显示。
|
||||
9. 复制、分享、节点信息的完整交互。
|
||||
10. 手机和平板端布局。
|
||||
11. 删除后从回收站恢复自动化。
|
||||
|
||||
## 20. 实现或复刻验收重点
|
||||
|
||||
- 创建后立即持久化的行为必须有清晰反馈，避免用户误以为尚未创建。
|
||||
- 自动保存必须有保存中、已保存和失败状态。
|
||||
- 启用必须建立在全节点配置有效的前提上。
|
||||
- 运行测试必须明确提示可能产生的业务副作用。
|
||||
- 重跑必须显示目标运行、输入来源和副作用警告。
|
||||
- 节点警告、全局禁用状态和属性面板错误必须保持一致。
|
||||
- 节点画布缩放、属性面板和 AI 助手同时展开时仍需保证可操作空间。
|
||||
- 运行历史必须支持状态、耗时和时间范围筛选。
|
||||
- 日志和原始数据可能含凭据或敏感业务数据，必须脱敏并受权限保护。
|
||||
- 删除必须进入回收站，并提供恢复路径。
|
||||
@@ -0,0 +1,43 @@
|
||||
# 官网首页
|
||||
|
||||
## 关键链接与国家货盘
|
||||
|
||||
- 首页“登录”“立即开始”“免费试用”“立即免费使用”等 CTA 统一通过 `window.location.href` 在当前页面跳转到 `https://inkpod.vip/user/login`。
|
||||
- “全球POD货盘”国家列表读取与产品中心相同的后台国家接口，完整展示所有已配置且有关联商品的国家及图标。
|
||||
- 桌面端国家列表按 6 列 × 2 行均匀排列；点击国家只切换下方对应货盘，不发生页面跳转。
|
||||
- 国家下方的品类卡链接到 `/product-center?countryId={后台国家ID}&categoryId={后台品类ID}`，产品中心打开后自动应用国家和品类筛选。
|
||||
|
||||
官网首页位于 `apps/website/app/pages/index.vue`，访问路径为 `/`。页面基于 Figma 节点 `897:2047` 还原，桌面设计基准为 `1440 x 6933px`。
|
||||
|
||||
## 页面结构
|
||||
|
||||
首页依次由导航、首屏、平台数据、四步流程、全球 POD 货盘、渠道能力、平台优势、公司简介、用户案例、行动区和页脚组成。各区块保持独立 Vue 组件，首页仅负责组合。
|
||||
|
||||
桌面端主要区块边界为：`80 / 980 / 1580 / 2515 / 3522 / 4276 / 4706 / 5306 / 6234 / 6572px`。流程区默认展示“选择产品”，渠道能力默认展示“店铺集成”；用户主动操作后仍可切换。
|
||||
|
||||
## 素材
|
||||
|
||||
首页图片统一存放于 `apps/website/public/`。Figma 用户案例图使用 `case-*.png` 命名，不依赖临时远程链接或随机占位图。
|
||||
|
||||
`/主视觉.png` 保持为宽高 `800 × 400` 的普通 `<img>`，渲染宽度不超过原图 800px，不作为背景图，也不会随超宽屏幕继续放大。
|
||||
|
||||
## 自动轮播
|
||||
|
||||
- 四步流程和“用强大功能，开启盈利快车道”功能区均每 2 秒自动切换，用户仍可点击或悬停立即切换。四步流程当前项的 2px 黄线会在 2 秒内从 0% 填满至 100%，填满后切换下一张；步骤标题与功能轮播项保持一致，桌面为 36px 常规字重。
|
||||
- “用强大功能，开启盈利快车道”左侧标题桌面端为 30px，四个功能项在 550px 高度内等分排列，与右侧轮播图上下对齐。
|
||||
- 用户案例在桌面和移动端均无缝横向滚动，完整循环放慢至 30 秒；悬停或聚焦时暂停。
|
||||
- `prefers-reduced-motion: reduce` 环境下关闭持续滚动动画。
|
||||
- 导航中的“选品推荐”和“解决方案”入口暂时隐藏，相关实现代码保留以便后续恢复。
|
||||
- 桌面导航使用 18px 字号，移动导航保持原有触控尺寸。
|
||||
- “全球 POD 货盘”使用固定旗帜列对齐国家名称，“更多产品”操作固定在货盘区底部。
|
||||
- 首屏“链通全球”使用主题橙色渐变，0 库存、0 关税、1 件起订以竖线分隔；平台数据卡的统计数值使用主题橙色。“全球 POD 货盘”的“更多产品”为无按钮容器的主题色文本链接。
|
||||
- 官网全局使用随项目提供的 PingFang SC Thin、Regular、Medium、Semibold 字体，首屏副标题使用 Thin 字重。首屏渐变从“通”字开始，“通”字仅保留少量渐变过渡；主标题与副标题共用左对齐容器。平台数据卡会抵消插图上移造成的底部占位，减少卡片留白。
|
||||
|
||||
## 验证
|
||||
|
||||
```bash
|
||||
pnpm --filter @inkreach/website test --run
|
||||
pnpm --filter @inkreach/website build
|
||||
```
|
||||
|
||||
浏览器以 `1440 x 1024` 视口检查首页总高、区块边界、图片加载和横向溢出。
|
||||
@@ -0,0 +1,50 @@
|
||||
# 产品中心
|
||||
|
||||
官网产品中心位于 `apps/website/app/pages/product-center.vue`，访问路径为 `/product-center`。
|
||||
|
||||
## 默认展示
|
||||
|
||||
页面首次加载时展示全部商品和全部国家，不默认选择分类、物流或工艺标签。每页默认请求 20 条商品，用户操作筛选项后再按真实业务 ID 查询。
|
||||
|
||||
## 筛选与分页
|
||||
|
||||
- 左侧分类树：选择父分类或子分类。
|
||||
- 国家：点击国家胶囊筛选，点击“全部”取消国家筛选。
|
||||
- 物流与工艺：按标签组展示下拉选项，每个分组内暂为单选，不同分组可各选择一项。
|
||||
- 筛选菜单在选择选项或点击组件外部后自动关闭；已选 Tag 使用独立标签行。仅选择工艺时标签从最左侧开始；物流与工艺同时选择时按物流、工艺顺序与上方筛选项对应排列。
|
||||
- 搜索：输入关键词后按回车或点击“搜索”。
|
||||
- 商品卡：整卡链接到 `https://inkpod.vip/portal/detail/{商品ID}`，在新窗口打开。
|
||||
- 公共商品接口的 `id` 来自 `originGood.sdsGoodId`，即 InkPOD 商品 ID；`goods.good_id` 仅作为本站数据库内部主键使用。
|
||||
- URL 国家筛选：支持 `/product-center?countryId={后台国家ID}`，仅接受后台已配置的国家 ID。
|
||||
- 无结果：展示设计稿空状态，可通过“查看全部商品”或“清空筛选”恢复完整列表。
|
||||
- 加载中：展示两行共八个商品骨架卡，筛选栏保持可操作。
|
||||
- 分页：支持页码、前后翻页、每页数量和页码跳转。
|
||||
|
||||
所有查询通过 `useProductCenter.ts` 调用 `/api/backend/*` 代理路由，不在页面中硬编码业务 ID。
|
||||
|
||||
## 后台配置联动
|
||||
|
||||
- 品类树、国家、Tag 与 Tag Group 均来自 NestJS `/public/*` 接口。
|
||||
- 国家旗帜读取 `countryIcon`，品类图标读取 `categoryIcon`；前端不提供外部旗帜 CDN 或固定名称兜底。
|
||||
- `/uploads/*` 与 `/assets/*` 等后台相对资源地址由 `useProductCenter.ts` 根据 `runtimeConfig.public.backendUrl` 转为完整 URL。
|
||||
- 物流和工艺筛选分别由后台名称包含“物流”和“工艺”的 Tag Group 生成；“印刷位置”等其他分组仍可用于商品卡片标签，但不会自动成为顶部筛选项。
|
||||
- Figma 基准图标位于 `apps/api/public/product-center/`，通过后端 `/assets/product-center/*` 提供。
|
||||
- 更新现有数据库图标配置：`pnpm --filter @inkreach/api configure:product-center-icons`。脚本按中文名称幂等更新，不创建缺失的国家或品类。
|
||||
|
||||
## 响应式
|
||||
|
||||
桌面采用 240px 分类栏，页面左右保留 `24–56px` 自适应留白，分类栏可滚动但隐藏可见 scrollbar。商品网格以 240px 为最小卡片宽度自动增加或减少列数：1440px 基准宽度保持四列，1920px 可显示六列。国家筛选区按内容自然增高，不保留固定空白。
|
||||
|
||||
左侧品类栏不显示最左侧边线，一级品类之间保留 10px 间距；国家筛选区及物流、工艺、搜索工具区的底部分隔线从内容区向右延伸至页面边缘。
|
||||
|
||||
宽度低于 1000px 后分类栏变为抽屉；移动端商品网格降为两列或单列，国家筛选仅在自身区域横向滚动，不会撑宽页面。
|
||||
|
||||
## 验证
|
||||
|
||||
```bash
|
||||
pnpm --filter @inkreach/website test --run
|
||||
pnpm --filter @inkreach/website build
|
||||
pnpm --filter @inkreach/website dev
|
||||
pnpm --filter @inkreach/api test -- --runInBand
|
||||
pnpm --filter @inkreach/api build
|
||||
```
|
||||
@@ -243,6 +243,32 @@ apps/website/
|
||||
> 子项目内部的页面、组件、composable、代理路由、组件响应式断点等详细信息见 `apps/website/docs/references/structs.md`。
|
||||
|
||||
## 数据库
|
||||
- `apps/api/public/product-center/`：产品中心 Figma 国家旗帜与一级品类图标，由 `/assets/product-center/*` 对外提供。
|
||||
- `apps/api/prisma/configure-product-center-icons.ts`：按名称幂等写入 `countryIcon/categoryIcon`，不创建业务记录。
|
||||
|
||||
## 产品中心设计还原（2026-07-16）
|
||||
|
||||
- `apps/website/app/components/product/ProductCenterHeader.vue`：Figma 产品中心专用 80px 导航栏。
|
||||
- `apps/website/app/components/product/ProductSidebar.vue`：240px 分类树及移动端抽屉内容。
|
||||
- `apps/website/app/components/product/ProductCountryFilter.vue`：国家胶囊筛选。
|
||||
- `apps/website/app/components/product/ProductTagFilter.vue`：物流与工艺分组筛选。
|
||||
- `apps/website/app/components/product/ProductCard.vue`：270 x 382 桌面商品卡片。
|
||||
- `apps/website/app/components/product/ProductPagination.vue`：总数、页码、每页数量和跳转。
|
||||
- `apps/website/test/useProductCenter.test.ts`：默认筛选名称映射测试。
|
||||
- `docs/references/product-center.md`：产品中心使用与验证说明。
|
||||
- `skills/inkreach-official-website/SKILL.md`：Agent 使用说明。
|
||||
|
||||
## 官网首页设计还原（2026-07-16）
|
||||
|
||||
- `apps/website/app/pages/index.vue`：官网首页组合入口。
|
||||
- `apps/website/app/components/HeroBanner.vue` 至 `AppFooter.vue`：首页分区组件。
|
||||
- `apps/website/public/case-*.png`：Figma 用户案例商品图。
|
||||
- `docs/references/homepage.md`：首页结构、尺寸基准和验证说明。
|
||||
- `apps/website/test/HomepageNavigationCarousel.test.ts`：首页当前页 CTA、自动轮播、主视觉图片和临时导航隐藏的行为测试。
|
||||
|
||||
## 数据库
|
||||
|
||||
- `apps/api/src/public/public.service.ts`：官网公共商品序列化边界；响应中的商品 `id` 使用 `originGood.sdsGoodId`，不暴露本地 `goods.good_id`。
|
||||
|
||||
- PostgreSQL 14+，Prisma 5.x
|
||||
- 连接配置在根 `.env` 的 `DATABASE_URL` 中
|
||||
|
||||
Reference in New Issue
Block a user