steven_li
2c5205b06e
- 添加MinIO用户文件系统配置选项(BEAVER_MINIO_ROOT_USER等) - 更新外部连接器配置结构，包括BASE_URL和认证令牌设置 - 改进connector provider支持更多类型(official, feishu_bot等) - 实现Mistral模型推理模式支持reasoning_effort参数 - 增强外部连接器策略配置和运行时配置管理 - 添加connector bridge事件验证和安全保护机制 - 优化任务路由逻辑，区分simple_chat和new_task场景 - 更新初始技能工具提示配置，分离authoring admin功能
136 lines
7.8 KiB
Markdown
136 lines
7.8 KiB
Markdown
# 主应用：通知页 UI/UX
|
||
|
||
## 1. 页面定义
|
||
|
||
| 项目 | 内容 |
|
||
| --- | --- |
|
||
| 页面名称 | 通知中心 |
|
||
| 通知列表路由 | `/notifications` |
|
||
| 通知详情路由 | `/notifications/[scheduledRunId]` |
|
||
| 页面实现 | `app-instance/frontend/app/(app)/notifications/page.tsx`、`app-instance/frontend/app/(app)/notifications/[scheduledRunId]/page.tsx` |
|
||
| 关键组件 | `NotificationsPage`、`NotificationDetailPage`、`ChatWorkbench`、`MessageList`、`Button`、`Badge` |
|
||
| 核心任务 | 查看定时任务生成的通知、进入通知详情、刷新通知、对通知结果提出本次修改或未来规则调整、打开已接入 Task |
|
||
| 测试状态 | 已修复并复测通过；本地与 `terminaltest` 生产实例均通过 |
|
||
|
||
## 2. 信息架构与组件层级
|
||
|
||
```text
|
||
AppShell
|
||
└── main.pt-16
|
||
├── /notifications
|
||
│ ├── Page Header
|
||
│ │ ├── h1 Notifications
|
||
│ │ ├── 页面说明
|
||
│ │ └── 刷新按钮
|
||
│ ├── Error Card
|
||
│ └── Notification List Panel
|
||
│ ├── Loading State
|
||
│ ├── Empty State
|
||
│ └── Notification Link Row/Card
|
||
│ ├── 标题
|
||
│ ├── 状态 Badge
|
||
│ ├── 摘要
|
||
│ ├── 生成时间
|
||
│ ├── job 名称
|
||
│ └── 桌面端箭头
|
||
└── /notifications/[scheduledRunId]
|
||
├── Detail Header
|
||
│ ├── 返回通知列表
|
||
│ ├── 标题
|
||
│ ├── 状态 / 已接入 Task Badge
|
||
│ ├── 生成时间
|
||
│ ├── 刷新按钮
|
||
│ └── 查看任务按钮
|
||
├── Error Banner
|
||
├── ChatWorkbench
|
||
│ └── MessageList
|
||
│ ├── 用户原始请求
|
||
│ └── 通知生成结果
|
||
└── Reply Panel
|
||
├── 修改这次
|
||
├── 以后按这样
|
||
├── 已接入提示
|
||
└── 回复输入框 + 发送
|
||
```
|
||
|
||
## 3. 布局与响应式规则
|
||
|
||
### 通知列表
|
||
|
||
- 外层使用 `max-w-6xl`，移动端内边距为 `16px`，桌面端为 `24px`。
|
||
- 列表区域是独立白色面板，内部垂直滚动，不产生页面级横向滚动。
|
||
- 移动端列表项按单列卡片阅读：标题、摘要、时间和 job 名称上下排列。
|
||
- `md` 及以上使用网格列展示摘要、时间、job 名称和箭头，方便桌面端扫描。
|
||
- 长标题、长摘要和长 job 名称都使用容器内断行，避免 ID 或连续字符串撑破卡片。
|
||
- 刷新按钮高度为 `44px`，满足移动端触控目标要求。
|
||
|
||
### 通知详情
|
||
|
||
- 页面整体高度为 `calc(100vh - 4rem)`，位于全局 header 下方。
|
||
- 顶部详情 header 使用浅色背景和底部分隔线，承载返回、标题、状态、生成时间和操作按钮。
|
||
- 移动端标题允许换行，不再只截断；长 scheduled run id 或长标题不会撑破页面。
|
||
- 中间 `ChatWorkbench` 使用剩余高度展示消息流。
|
||
- 底部回复区是独立面板，包含两个意图按钮和按需出现的输入框。
|
||
- 回复输入框有可见 label，不依赖 placeholder 作为唯一说明。
|
||
- 返回、刷新、查看任务、意图选择、发送等关键操作均为 `44px` 高度。
|
||
|
||
## 4. 操作与 UX 逻辑
|
||
|
||
| 操作 | 触发方式 | 状态变化与反馈 | UX 目的 | 当前结果 |
|
||
| --- | --- | --- | --- | --- |
|
||
| 刷新通知列表 | 点击列表页 Refresh | 调用 `GET /api/notifications`，列表重新渲染 | 获取最新定时通知 | 正常 |
|
||
| 打开通知详情 | 点击通知列表项 | 跳转 `/notifications/[scheduledRunId]` | 查看通知完整上下文和结果 | 正常 |
|
||
| 空通知状态 | 列表接口返回空数组 | 显示“暂无通知” | 明确没有可处理内容 | 正常 |
|
||
| 列表加载失败 | 列表接口失败 | 显示错误卡片 | 让用户知道是接口异常而不是无数据 | 正常 |
|
||
| 返回通知列表 | 详情页点击返回 | 跳转 `/notifications` | 提供明确退出路径 | 正常 |
|
||
| 刷新通知详情 | 详情页点击 Refresh | 调用 `GET /api/notifications/[id]` | 重新获取当前通知状态 | 正常 |
|
||
| 修改这次 | 点击 `Revise this` | 按钮进入选中态，显示“本次通知的修改说明”输入框 | 只影响本次通知结果 | 正常 |
|
||
| 以后按这样 | 点击 `Apply going forward` | 按钮进入选中态，显示“以后这类通知的调整说明”输入框 | 将用户偏好表达为未来规则 | 正常 |
|
||
| 发送修改说明 | 输入内容后点击 Send | 调用 `POST /api/chat`，携带 `reply_to_scheduled_run_id` 和 `scheduled_reply_intent` | 把通知反馈接回对话/任务处理流程 | 正常 |
|
||
| 打开已接入 Task | 已存在 `task_id` 时点击 Open task | 跳转 `/tasks/[taskId]` | 从通知继续跟进任务 | 正常 |
|
||
| 通知不存在 | 详情接口失败或无数据 | 显示错误信息和返回通知入口 | 提供异常恢复路径 | 正常 |
|
||
|
||
## 5. 响应式测试矩阵
|
||
|
||
测试日期：2026-06-04。浏览器：Playwright Chromium。环境：本地 dev server `http://127.0.0.1:3080` 与生产实例 `terminaltest`；API 使用模拟数据，真实浏览器执行点击、输入、跳转和截图。
|
||
|
||
| 页面 | 视口 | 横向越界 | 小触控目标 | 关键结论 |
|
||
| --- | --- | --- | --- | --- |
|
||
| 通知列表 | `320×568` | 无 | 0 | 长标题和长 job 名在卡片内换行 |
|
||
| 通知列表 | `390×844` | 无 | 0 | 手机竖屏可刷新、进入详情 |
|
||
| 通知列表 | `844×390` 横屏 | 无 | 0 | 横屏无页面级横向滚动 |
|
||
| 通知列表 | `768×1024` | 无 | 0 | 平板列表布局稳定 |
|
||
| 通知列表 | `1365×900` | 无 | 0 | 桌面网格列可扫描 |
|
||
| 通知空态 | `390×844` | 无 | 0 | 空态居中显示 |
|
||
| 通知错误态 | `390×844` | 无 | 0 | 错误信息在卡片内可读 |
|
||
| 通知详情 | `320×568` | 无 | 0 | 顶部标题换行，回复区不遮挡 |
|
||
| 通知详情 | `390×844` | 无 | 0 | 消息流和底部回复区分层清楚 |
|
||
| 通知详情 | `768×1024` | 无 | 0 | 平板详情布局正常 |
|
||
| 通知详情 | `1365×900` | 无 | 0 | 桌面详情布局正常 |
|
||
| 通知详情错误态 | `390×844` | 无 | 0 | 返回通知入口可见 |
|
||
|
||
### 关键量化证据
|
||
|
||
- 本地通知页 QA 自动化用例 `4 passed`。
|
||
- 部署到 `terminaltest` 后，同一套通知页 QA 自动化用例 `4 passed`。
|
||
- 列表实测视口 `320×568`、`390×844`、`844×390`、`768×1024`、`1365×900` 均无页面级横向越界。
|
||
- 详情实测视口 `320×568`、`390×844`、`768×1024`、`1365×900` 均无页面级横向越界。
|
||
- 所有实测视口可见小触控目标数为 `0`。
|
||
- 回复提交实测请求包含 `reply_to_scheduled_run_id` 和 `scheduled_reply_intent=revise_once`。
|
||
|
||
## 6. 已修复问题
|
||
|
||
| 等级 | 问题 | 修复 |
|
||
| --- | --- | --- |
|
||
| P1 | 通知列表长标题、长 job 名在移动端被右侧裁切或存在撑破风险 | 标题、摘要和 job 名增加容器内断行；列表项保留 `min-w-0` |
|
||
| P2 | 列表 Refresh 按钮高度只有 36px，低于移动端触控标准 | 调整为 `44px` |
|
||
| P2 | 详情页返回、Refresh、Revise、Apply going forward 等操作高度不足 44px | 统一调整为 `44px` |
|
||
| P2 | 详情页标题只截断，移动端无法判断完整通知主题 | 改为可换行并控制在容器内 |
|
||
| P2 | 详情回复输入框依赖 placeholder 表达含义 | 增加可见 label，并根据意图区分本次修改/未来调整 |
|
||
| P3 | 意图按钮缺少明确 pressed 状态语义 | 增加 `aria-pressed` |
|
||
|
||
## 7. 剩余观察项
|
||
|
||
- 本地 mocked API 场景会出现 WebSocket 握手失败日志，因为测试 token 不对应真实后端 WS；该日志不影响通知页 HTTP 交互和布局结论。
|
||
- 后续接入真实用户历史通知时，仍需持续观察第三方系统生成的异常长 Markdown、附件和错误文本。
|