Skip to content

调研：现在系统各页面的美观度 —— 先从「页面顶部固定一行说明文字」开始，逐页过一遍出统一改法 #210

Open
Open
调研：现在系统各页面的美观度 —— 先从「页面顶部固定一行说明文字」开始，逐页过一遍出统一改法#210
Labels
enhancementNew feature or request

Description

@yilecoding
yilecoding
opened on Nov 2, 2026

目的

调研一下现在系统各页面的美观度：逐页过一遍，列出哪里不好看、哪里各页做法不一致，再定统一的改法。这个 issue 先出调研结论，不直接改代码；结论定了再拆成具体的修改 PR。

边距（上 24 / 左右 16 / 有的页 0）那件事单独在 #209，这里不重复，但调研时如果发现别的间距问题一并记下来。

已知问题一：页面顶部固定一行说明文字，不好看

PageHeader 早就把页面说明改成只给读屏软件看（sr-only）了，理由写在 packages/platform/src/shell/page-header.tsx 顶部：页名已经在标签上，一屏最值钱的顶部不该被「一句不会有人读第二遍的描述」占掉。但有 7 页绕开了它，自己写了一行能看到的灰字，钉在页面最上面：

页面 文件 说明文字
能力开放 · 应用管理 pages/open-app/index.tsx:367 给对接的外部系统发一对 AK/SK…
能力开放 · 调用日志 pages/open-log/index.tsx:251 外部系统每次调用开放接口都会记一条…
AI 助手 · MCP 凭据 pages/ai-mcp-client/index.tsx:51 外部系统（如 pis-agent、Claude Desktop）用这里发的令牌…
AI 助手 · 模型供应商 pages/ai-provider/index.tsx:63 AI 助手通过这里配置的供应商调用模型…
消息推送 · 群机器人 pages/notify-bot/index.tsx:62 把公告、审批结果这类通知推到飞书 / 钉钉 / 企业微信群里…
短信 · 短信配置 pages/sms-config/index.tsx:70 使用方只认业务模板码…
系统管理 · 存储管理 pages/storage/index.tsx:81 新上传的文件落在默认存储…

不好看在哪：

  • 一行灰字横在查询区 / 卡片上面，页面第一眼看到的不是内容而是一段话，和其他页面的开头不一样
  • 字长短不一，有的折成两行，每页顶部的高度都不同，切标签时内容在上下跳
  • 每次打开都显示，看过一次就没用了

open-app 那里还有注释「说明要让人看见，单独一行（同 MCP 凭据页）」—— 是照兄弟页抄过来的，和 #209 同一个根。

初步改法（调研时确认）：说明一律走 PageHeader 的 description；里面操作时真正要知道的那半句（「SK 明文只显示一次」「切换默认只影响之后的上传」「凭据只显示掩码」）挪到用得着的那一刻 —— 创建 / 重置结果弹窗、确认框、表单字段提示、空状态里。

调研范围（逐页过，每页截图 1920 + 390、浅色 + 深色）

  • 页面开头：第一行是什么（查询区 / 工具栏 / 卡片 / 说明文字），各页是否一致
  • 工具栏：刷新 / 列设置 / 导出 / 新增按钮的位置和顺序；有的在查询区右边、有的单独一行
  • 卡片页 vs 表格页：设置屏、卡片列表（供应商 / 存储 / 短信配置 / 群机器人）的卡片尺寸、圆角、阴影、内边距是否一套
  • 空状态：表格空、卡片空、主从页右侧空，各自长什么样，是否有图标 + 引导按钮
  • 表格：列宽、等宽字体用在哪、状态徽章的颜色与样式、操作列（图标按钮 / 三点菜单）是否统一
  • 表单抽屉 / 弹窗：宽度、标题区、底部按钮的位置
  • 字号与层级：同一种信息（时间、ID、次要说明）在不同页是否用同样的字号和颜色
  • 深色模式：有没有写死颜色、对比度不够的地方
  • 窄屏：390 宽下查询区、工具栏、表格是否挤坏

产出

  • 一份带截图的清单：页面 × 问题，标出「各页不一致」和「单页难看」两类
  • 每类问题给一个统一的做法（能沉淀成共用组件的写明组件名）
  • 按影响面排优先级，拆成后续 PR

Activity

  1. yilecoding
    added
    enhancementNew feature or request
    on Nov 2, 2026
  2. yilecoding
    changed the title [-]去掉页面顶部可见的说明文字：7 页绕开 PageHeader 自己写了一行（应用管理 / 调用日志 / MCP 凭据 / 模型供应商 / 群机器人 / 短信配置 / 存储管理）[/-] [+]调研：现在系统各页面的美观度 —— 先从「页面顶部固定一行说明文字」开始，逐页过一遍出统一改法[/+] on Nov 2, 2026

  3. yilecoding commented on Nov 2, 2026

    @yilecoding
    yilecoding
    on Nov 2, 2026
    OwnerAuthor

    调研结论（2026-11-02）

    方法：本地起服务，用 Playwright 逐页打开 35 个菜单页面，每页截三张（1920 浅色 / 1920 深色 / 390 手机），再逐张看图。最严重的几条另外人工复核过截图。边距问题归 #209，这里不重复。

    ⚠️ 截图时本地库的迁移落后一版（ae…，head 是 ah…），所以仪表盘消息卡、消息中心、通知公告、执行记录这四页显示的是 SQL 报错。报错本身是环境问题，但报错块的排版问题是真的（见 P0-1）。

    问题按「改一处、修一片」的程度排序：前面的都是改一个共用组件或一个设计变量就能覆盖很多页的。

    P0 —— 坏了 / 看不清

    1. 错误块（QueryError）原文不换行，桌面端看不到「重试」

    执行记录、消息中心、通知公告：报错文字一整行横向溢出表格右边界，被裁掉，桌面端看不到重试按钮（390 宽反而能看到）。仪表盘的消息卡则相反，几十行 SQL 竖着铺满，把卡片撑出屏幕。
    → 改法：一句人话的标题 + 原文折叠进「详情」（break-words + 限高），重试按钮放在标题行，任何宽度都可见。改 ui/components/query-error.tsx 一处，所有页一起修好。

    2. 深色模式下，主色文字太暗

    浅色和深色用的是同一个深靛蓝，压在近黑底上很难看清。涉及：登录日志 / 操作日志 / 投递记录 / 开放调用日志 / 短信发送日志的时间列，任务调度的任务名，仪表盘卡片右上角的「全部 / 查看全部 →」，文件管理和参数配置左栏的选中项。
    → 改法：.dark 下给「主色当文字用」单独一个更亮的值（靛蓝 300~400 那一档），一个变量修十几页。

    3. 主按钮的禁用态像坏掉了

    浅色下是浅紫底配白字，深色下是深靛蓝底配暗紫字，两种都看不出是「禁用」还是「样式没加载」。涉及：个人中心（保存 / 绑定邮箱 / 绑定手机号）、角色「保存权限」、参数配置「保存」、通知策略「保存」、AI 对话的发送按钮。
    → 改法：禁用态改成中性灰底 + 前景色降透明度，改 Button 一处。

    4. 手机宽度（390）真挤坏的几处

    • 短信配置：凭据那串 LTAI5t…Yw2b******109r 不换行，卡片撑出屏幕，删除按钮被裁掉一半（已复核）
    • 通知策略：表格被裁、没有横滚提示，「短信」整列看不到
    • 仪表盘「待我处理」的页签被挤成一个字一行（「待审 / 批」「草 / 稿」）
    • 流程定义：标题一长，「已发布」徽章就折成两行
    • 所有页的顶栏：搜索按钮左边被分隔线压出一个「›」残影

    P1 —— 各页做法不一致（定规范 + 抽组件）

    5. 页面顶部的说明文字（本 issue 原来那条）

    7 页在顶部钉了一行灰字：应用管理、开放调用日志、MCP 凭据、模型供应商、群机器人、短信配置、存储管理（清单见 issue 正文）。通知策略则把说明放在了表格下面。
    → 统一走 PageHeader 的 description（只给读屏）；操作时要知道的那半句挪进对应的弹窗、确认框或空状态。

    6. 工具栏：没有两页是一样的

    • 「新增」：用户、公告、任务调度在左边第一个；部门、菜单、插件、字典、参数配置、流程定义在右上
    • 「刷新」：大多数是图标方块；插件、在线用户、Redis、服务器监控是带字的按钮；字典掉到第二行；四张卡片页（供应商 / 短信配置 / 群机器人 / MCP 凭据）干脆没有刷新
    • 发送日志最左边是一个红色垃圾桶（清空），破坏性操作排第一，最抢眼也最容易误点
    • 通知策略、Redis、服务器监控的工具栏整体靠右，左边空着
    • 「列设置」「筛选视图」「导入 / 导出」有的页有、有的页没有
    • 计数「共 N 条」至少放在四个不同的位置
      → 定一条规范（建议：左边主动作，右边是刷新、列设置这类视图工具；破坏性的操作收进 ⋯），写进 pages/AGENTS.md，再套到各页。

    7. 表格单元格：同类数据好几种写法

    • 时间有四种：蓝色等宽（日志类）/ 灰色等宽 / 加了字距的无衬线（用户注册时间、实例监控）/ 16px 黑色大字（AI 调用日志，整张表里最抢眼的一列，层级正好反了）；审批中心和流程定义还不带年份
    • 耗时两种：52ms 黑色 14px（AI 调用日志、短信日志）和 7.0 ms 灰色 12px，慢请求标橙（开放调用日志）
    • 空值有「—」和「–」两种，投递记录同一行里两种都有
    • 状态徽章：带圆点「● 成功」/ 不带圆点 / 带图标，操作日志还在旁边再放一个「200」
    • 蓝色时间看起来像链接，但有的能点、有的不能点；应用管理里「从未调用」也染成了链接蓝
      → 抽 TimeCell / DurationCell / EmptyCell / StatusBadge，各页统一换用。

    8. 操作列

    三点菜单（多数）/ 三个裸图标（数据权限）/ ▶ 加红色「删除」字（任务调度，10 行红字连成一条红带）/ 每张卡片一个红色「卸载」按钮（插件管理，满屏红点）。表头有的空着，有的写「操作」但下面的格子是空的（投递记录）。
    → 统一用 ⋯ 菜单，危险操作放在菜单里，列宽固定。

    9. 卡片页（供应商 / 短信配置 / 群机器人 / MCP 凭据 / 存储）

    外框是一套，里面不是：标签列宽有两套（48px 和 72px，「标签 + 值」两列对不齐）；底部按钮有的是一个描边按钮，有的是描边 + 幽灵；「新增」占位卡有的是「+ 一行字」，有的是图标 + 标题 + 两行说明；存储那页同一张卡片标题旁边混着描边、灰底、绿底三种徽章。
    → 抽一个 ResourceCard（标题区 / 键值区 / 动作区）+ AddCard。

    10. 主从页的详情标题

    角色和数据权限用 18px 粗体，字典用 14px 常规，同一种位置差了一大截。

    P2 —— 留白与层级

    • 数据少的时候表格照样撑满到底：在线用户 1 行、任务调度 10 行、AI 调用日志 7 行，下面都是几百 px 的空白框。可以考虑行数少时让容器收缩，或者至少给空白区一点底色区分
    • 列宽是平均分的：大多数格子是「—」的列（部门的联系电话、菜单的路由地址、实例监控的当前处理）占很宽，有内容的列反而被截断（登录日志的浏览器、操作日志的接口路径）
    • 头像：审批中心和实例监控把两个字塞进约 28px 的圆里，字只有 8~9px；深色下还是写死的浅色实心圆，像一个个亮斑
    • 深色下卡片和背景分不开：--card 和 --background 几乎一样，只靠一条很暗的边框；虚线「新增」卡的边框、未勾选的复选框都几乎看不见
    • 监控页统计数字的颜色没有语义：Redis 的「已连接客户端 23」用了橙色，在线用户「剩余有效期 1 小时 59 分」也是橙色，可是这两个值都不是异常
    • 监控页「采样中…」的空图表占约 120px 高，没有信息
    • 手机宽度：主从页（角色 / 字典 / 数据权限 / 参数配置 / 个人中心）的左栏铺满第一屏，内容要往下滑一屏才看到；在线用户的四张统计卡各占一整行；筛选区按钮折行后常剩一个孤零零的「重置」
    • 其他零散的：开放调用日志的面包屑缺父级、页签是兜底的圆点图标，而且和 AI 的「调用日志」同名；MCP 凭据的页签图标是一个「API」字样；插件卡上「已启用」徽章和开关重复表达同一件事；个人中心的输入框只占内容区三分之一宽，上面的横幅却撑满全宽

    建议的拆分

    PR 内容 覆盖
    ① QueryError 排版 + 禁用态按钮 + 深色主色提亮 + 深色 --border / --card P0-1/2/3、P2 深色那两条（只改 packages/ui，全站受益）
    ② 页面外壳组件 + 统一边距（就是 #209） 顺带去掉顶部说明文字（P1-5）
    ③ 表格单元格组件：时间 / 耗时 / 空值 / 状态徽章 / 操作列 P1-7、P1-8
    ④ 工具栏规范写进 pages/AGENTS.md，然后逐页套用 P1-6
    ⑤ 卡片页组件 + 主从页标题 P1-9、P1-10
    ⑥ 手机宽度专项 P0-4、P2 手机那条

    P2 的其余几条等前面这些做完再看还剩多少。

    截图和逐页的原始记录在我本机的临时目录里，需要的话可以挑几张贴上来。

  4. yilecoding
    added 6 commits that reference this issue on Nov 2, 2026

    Merge main into fix/page-shell-polish —— #209 采用 #211 的实现

    9314256

    Merge pull request #212 from yilecoding/fix/page-shell-polish

    44efd46

    Merge pull request #213 from yilecoding/feat/table-cells

    19aabb1

    Merge pull request #214 from yilecoding/feat/toolbar-order

    af36b4a

    Merge pull request #215 from yilecoding/feat/resource-card

    bf396bc

    Merge pull request #216 from yilecoding/fix/narrow-screen

    76f5be1

  5. yilecoding commented on Nov 2, 2026

    @yilecoding
    yilecoding
    on Nov 2, 2026
    OwnerAuthor

    进度（2026-11-02）：拆分计划的 6 个 PR 都合进去了

    计划 PR 覆盖
    ① 报错块 / 禁用态 / 深色主色 #212 P0-1 · P0-2 · P0-3
    ② 页面外壳 + 统一边距 #211 · #212 #209 · P1-5（顶部说明文字）
    ③ 表格单元格 + 操作列 #213 P1-7 · P1-8（_shared/cells.tsx：TimeCell / DurationCell / EmptyCell / RowActions）
    ④ 工具栏顺序 #214 P1-6（主动作 → 次要 → 刷新 / 列 → 危险）
    ⑤ 卡片页 + 主从页标题 #215 P1-9 · P1-10（_shared/resource-card.tsx）
    ⑥ 窄屏 #212 · #216 P0-4（顶栏残影 / 表格横向滚动提示 / 监控统计卡两列 / 短信卡片 / 待办页签 / 状态徽章）

    规范都写进了 packages/platform/src/pages/AGENTS.md 和 packages/ui/AGENTS.md。

    还没做的

    • 深色下 --card / --background 分不开、边框太暗（原计划 ① 里的一项，没动）
    • 手机上主从页（角色 / 字典 / 数据权限）左栏在上，数据多时要滑一屏才见详情 —— 要改成「选了才看详情」的交互
    • 查询区按钮折行后剩一个孤零零的「重置」（QueryBar 布局）
    • 插件卡片上满屏的红色「卸载」、Webhook 抽屉的 ⋯ 菜单（另一种卡片）
    • 卡片页没有刷新按钮
    • P2 其余：数据少时表格撑满到底、列宽平均分、头像字太小 / 深色下写死浅色、监控数字颜色没有语义、「采样中…」空图表、开放调用日志面包屑缺父级 / 页签图标

    这个 issue 先留着开，剩下的按需再拆。

  6. yilecoding
    added 3 commits that reference this issue on Nov 2, 2026

    Merge pull request #218 from yilecoding/feat/mobile-master

    ca99021

    Merge pull request #217 from yilecoding/feat/dark-depth

    27902c5

    Merge pull request #219 from yilecoding/feat/plugin-cards

    4ca853e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions