ST-Bionic-Memory-Ecology/plans/notice-display-mode-plan.md

ST-BME 提示信息“正常 / 精简”模式计划

目标

在“配置” -> “功能开关”里新增一个“提示信息”设置项，让用户选择通知展示模式：

• 正常：保持当前行为不变
• 精简：通知仅显示标题，例如 ST-BME 提取、ST-BME 召回

默认值为 正常。该设置需要在 PC 端和手机端的设置入口都能看到并生效。

现状梳理

1. 提示信息的实际渲染位置

• notice.js
  • 负责创建和更新通知 DOM
  • 当前结构固定包含：图标、标题、正文、动作按钮区域、关闭按钮、进度条
  • 移动端只缩小了宿主宽度，没有缩小卡片内容结构

2. 通知内容从哪里来

• index.js
  • updateStageNotice(...) 会把 text + meta 拼成 message
  • showManagedBmeNotice(...) 统一负责显示提取 / 向量 / 召回 / 历史恢复通知
• ui-status.js
  • getStageNoticeTitle(...) 负责输出 ST-BME 提取、ST-BME 召回 等标题

3. 设置从哪里定义和持久化

• index.js
  • defaultSettings 是设置默认值来源
  • mergePersistedSettings(...) / getPersistedSettingsSnapshot(...) 会自动把新增设置纳入持久化
• panel.js
  • _refreshConfigTab() 负责把设置值回填到 UI
  • _bindConfigControls() 负责把 UI 改动写回设置
• panel.html
  • “功能开关” section 是实际设置表单

4. PC / 手机端设置入口的关系

• panel.html 里桌面端和手机端各有一套“配置导航按钮”
• 但它们切换的是同一套 bme-config-section
• 也就是说：
  • 真正的设置项表单只需要在“功能开关” section 加一次
  • 该项天然会同时出现在 PC 和手机端

关键发现

仅仅把正文文本隐藏，还不足以让精简通知“变窄”。

原因是 notice.js 里的通知宿主 #st-bme-notice-host 使用纵向 flex 布局，而子项默认会被拉伸到宿主宽度。现在宿主在移动端宽度是 calc(100vw - 16px)，所以即使正文为空，卡片依然可能占满整行。

结论：

• 精简模式不仅要隐藏正文和动作区
• 还必须给通知卡片增加“按内容宽度收缩”的样式

这是这个需求里最容易漏掉的点。

推荐设计

设置字段

建议新增设置字段：

• key: noticeDisplayMode
• 可选值: "normal" / "compact"
• 默认值: "normal"

命名理由：

• 语义直接，对应“提示信息显示模式”
• 以后如果要扩展为更多通知布局，也容易继续演进

设置 UI

建议放在“配置” -> “功能开关”里，作为一个 select，而不是复选框。

建议文案：

• 标题：提示信息
• 说明：控制提取 / 召回等顶部通知的显示样式
• 选项：
  • normal -> 正常
  • compact -> 精简（仅显示标题）

精简模式的推荐行为

推荐在 精简 模式下：

• 保留：标题
• 保留：左侧状态图标
• 保留：关闭按钮
• 隐藏：正文文本
• 隐藏：meta 信息
• 隐藏：动作按钮区，例如“终止提取”“终止召回”
• 隐藏：底部进度条

这样可以最大化缩小高度，同时保留最基本的状态识别和手动关闭能力。

一个需要先确认的设计点

warning / error 通知是否也要强制进入“仅标题”模式？

我的推荐方案：

• running / info / success：遵循 精简，只显示标题
• warning / error：仍显示正文，避免重要报错信息被吃掉

理由：

• 用户截图里最占空间的是“工作中”的持续通知
• 真正需要完整文本的，通常是失败原因或警告信息

如果你更想要“精简就是所有通知一律只显示标题”，也能做，但我认为可用性会更差一些。

预期改动范围

1. index.js

• 在 defaultSettings 增加 noticeDisplayMode: "normal"
• 在通知更新逻辑里读取该设置
• 显式采用“Option A”：
  • index.js 在 updateStageNotice(...) 里把 displayMode 放进传给 showManagedBmeNotice(...) 的 input 对象
  • notice.js 只读取 input.displayMode 控制渲染和样式，不直接读取全局设置
  • 保持 notice.js 为纯渲染模块，不和 settings 持久化层耦合
• 若采用“错误/警告保留正文”的推荐方案，则在这里按 level 做分流
• 当用户切换 noticeDisplayMode 时，补一条“刷新当前可见通知”的处理
  • 目标：如果用户在通知仍可见时切换模式，现有通知也能立即切换，而不是等下次状态更新
  • 实现可放在设置更新后，对当前 stage notice 进行一次统一 update

2. notice.js

• 扩展通知输入参数，支持 displayMode 或 compact
• 渲染时根据模式：
  • 正常模式：保持现状
  • 精简模式：不渲染正文和动作区，或渲染后隐藏
• 增加精简态 class / data attribute，例如：
  • data-layout="compact"
• 新增 compact 样式：
  • 卡片宽度按内容收缩
  • 卡片高度缩成单行或接近单行
  • 维持移动端可点击性和可读性
  • 明确让 compact 通知右对齐
    • 首选：给 compact 卡片本身加 align-self: flex-end
    • 备选：给 host 在 compact 态下加 align-items: flex-end
  • compact 布局可直接切成更自然的横向紧凑结构
    • 例如从当前 grid 调整为单行 flex
    • 避免 close 按钮在极窄宽度下被 grid 挤得别扭
  • compact 模式显式隐藏进度条，避免小卡片底部出现细长条影响观感

3. panel.html

• 在“功能开关” section 里新增“提示信息”配置卡或配置行
• 位置建议放在较靠前区域，因为它属于明显的 UI 行为开关

4. panel.js

• _refreshConfigTab() 里回填 noticeDisplayMode
• _bindConfigControls() 里监听该 select 的变更并调用 _patchSettings(...)

样式实现思路

推荐采用“精简卡片单独收缩”的方式，而不是修改整个通知宿主。

建议方向：

• 正常卡片：继续占用现有宽度逻辑
• 精简卡片：
  • align-self: flex-end
  • width: fit-content
  • max-width: 100%
  • 更紧凑的 padding / gap
  • 必要时直接切成单行 flex 布局，而不是沿用三列 grid

这样可以避免：

• 一条精简通知把整个通知堆栈的布局都改坏
• 正常模式和精简模式互相影响

补充说明：

• 这里真正需要注意的是“host 是全宽，而 compact 卡片要在 host 内收缩并靠右”
• 因此不能只写 width: fit-content
• 还必须同时处理横向对齐
• 纠正一下术语：这里如果要改 host，应该是 align-items，不是 align-self

风险与兼容性

风险 1：终止按钮被隐藏后，工作中通知无法直接中断

这是“只显示标题”带来的天然代价。

处理方式建议：

• 先按用户描述执行精简：隐藏动作按钮
• 在计划评审阶段明确接受这个取舍

风险 2：只隐藏正文但不改宽度，视觉上仍然太大

这是本需求最核心的实现风险。必须在样式上单独处理 compact 卡片宽度。

风险 3：切换设置后，当前可见通知不立刻刷新

如果只让后续新通知读取新模式，那么用户在设置页切换“正常 / 精简”时，已显示的通知会出现“要等下一次状态变更才切换”的延迟感。

处理方式建议：

• 把它当作一个小型 UI 刷新点纳入实现
• 设置更新时，对当前仍存在的 stage notice 重新执行一次 update

风险 4：旧配置兼容

风险较低。因为默认设置合并机制已经存在，只要新增默认值即可让旧配置自动回退到 normal。

建议验证点

功能验证

• 默认安装或旧配置升级后，提示信息模式应为 正常
• 在 PC 端设置面板中能看到“提示信息”选项
• 在手机端设置面板中也能看到同一个选项
• 切到 精简 后，提取 / 召回通知只显示标题
• 切回 正常 后，恢复当前完整通知样式
• 通知可见时切换设置，已显示的通知也会同步切换样式

视觉验证

• 手机上精简通知高度明显缩小
• 手机上精简通知宽度不再铺满整行
• 手机上精简通知应靠右显示，而不是缩小后仍贴左
• 多条通知叠加时，布局仍然稳定
• PC 端正常模式无回归

行为验证

• 运行中通知仍能正常更新标题
• 自动关闭逻辑不受影响
• 关闭按钮不受影响
• compact 模式下进度条已按预期隐藏
• 若保留“错误/警告显示正文”策略，则需单独验证错误提示仍完整可见

实施顺序

1. 增加设置字段与默认值
2. 在功能开关 UI 中加入“提示信息”选择器
3. 将选择器和设置读写绑定起来
4. 给通知渲染层增加 compact 模式
5. 调整 compact 样式，确保真正按内容收缩
6. 验证 PC / 手机端、正常 / 精简、运行 / 完成 / 异常几类通知

我目前的结论

这个需求本身不复杂，真正要小心的是两件事：

• “PC 和手机端都要有设置”其实主要是配置入口问题，不是双份业务实现
• “精简后通知真的变小”不能只靠删文本，必须同时改通知卡片的宽度收缩策略

这次复审后，我会把实现重点再收敛成四个明确点：

• displayMode 通过 updateStageNotice(...) -> input.displayMode -> notice.js 这条链路传递
• compact 不仅隐藏正文，也隐藏进度条
• compact 需要明确右对齐，不能只是 fit-content
• 用户切换设置时，当前可见通知也应立即刷新

如果后续开始实现，我会优先按这个计划走，并把“错误/警告是否保留正文”作为唯一需要最终拍板的交互点。