70 lines
7.3 KiB
Markdown
70 lines
7.3 KiB
Markdown
# 主题组件覆盖检查（2026-09-05）
|
||
|
||
## 2026-09-06：Markdown 行为与文档滚动适配
|
||
|
||
| 主题 | 当前版本 |
|
||
| --- | --- |
|
||
| Light / Dark / Sepia | 1.4.0 |
|
||
| 纸间时光 | 1.9.0 |
|
||
| Ocean Blue | 1.6.0 |
|
||
| Midnight Purple | 2.4.0 |
|
||
|
||
新增共享 `frontend/src/styles/markdown-behavior.css`，由应用入口及隔离主题预览同时加载。六个主题通过语义变量提供链接悬停与键盘焦点、任务复选框、引用与分隔线、文字选区、表格选区、标题折叠状态、警告框折叠状态和文档滚动按钮配色。标题箭头沿用悬停或键盘聚焦时显示的规则；表格选区采用透明叠色，避免遮住单元格文字。纸间时光保留长文轻量背景实现。
|
||
|
||
只读 Markdown（包括 AI 对话）现在同步代码行号、自动换行和缩进宽度设置。语法是否启用仍由 Markdown 预设与解析器决定；ATX / Setext 等源码写法解析成同级标题后使用相同主题样式，不用 CSS 模拟语法。主题预览新增 H4–H6、嵌套列表、任务列表、链接、行内代码、折叠警告框、带行号长代码及滚动按钮样例。
|
||
|
||
工作区滚动按钮固定在编辑区域右下角，适用于写作和源码模式：顶部只显示到底部、底部只显示到顶部、中间同时显示；空文档或没有可滚动内容时隐藏。滚动状态通过被动监听与动画帧合并更新，尺寸、内容和折叠变化会重新计算，减少动画偏好开启时直接跳转。
|
||
|
||
验证方法：
|
||
|
||
1. 运行 `cd frontend` 后执行 `npm test` 和 `npm run build`，检查主题变量覆盖、六主题预览矩阵、主题升级、Markdown 预设和滚动按钮回归。
|
||
2. 本地启动前端，访问 `tests/visual/index.html?theme=light`，依次切换表中六个主题，检查新增样例的链接焦点、复选框、折叠态、代码换行及行号。社区主题已安装旧版本时，应在主题页更新后再检查。
|
||
3. 工作区分别打开空笔记、短笔记、长笔记，切换写作与源码模式，在顶部、中间、底部验证按钮数量和跳转方向；调整窗口尺寸、折叠标题后再次检查。
|
||
|
||
本次自动检查覆盖仓库内六主题的结构和样式变量，不包含用户自行导入的任意第三方 CSS，也不等同于所有浏览器的逐页视觉验收。
|
||
|
||
本次检查仓库内 3 个内置主题和 3 个社区预设，共扫描 105 个前端源文件的组件与语义样式变量。用户自行导入的第三方 CSS 不在仓库中，不据此声称已验收。
|
||
|
||
## 范围与结果
|
||
|
||
扫描到 70 个颜色、字体、间距、圆角、阴影、动效和行高变量引用，修复后未定义引用数为 0。颜色及控件样式由共享 token、组件样式和主题覆盖共同提供；继承共享样式不等于未适配。新增 `themeCoverage.spec.ts` 保持全源文件变量引用检查，并检查社区预设的交互色、Markdown 色及 color-scheme。
|
||
|
||
| 主题 | 新版本 | 修正 |
|
||
| --- | --- | --- |
|
||
| Light / Dark | 1.1.1 | 原生表单控件底色及浏览器 color-scheme |
|
||
| Sepia | 1.1.1 | 控件底色、焦点、按下态、柔和悬停色 |
|
||
| Ocean Blue | 1.3.1 | 活动态、反色文字、禁用色、Markdown 表格与标记色 |
|
||
| Midnight Purple | 2.1.1 | 深色 color-scheme、原生控件及上述交互/Markdown 色 |
|
||
| 纸间时光 | 1.6.1 | 新增分模型统计、缓存说明、数据提示及大图查看样式 |
|
||
|
||
MCP JSON 编辑器错误引用的 `--font-family-mono` 已改为共享 `--font-ui-mono`。全局原生控件底色使用零优先级选择器，组件和主题仍可覆盖。旧版社区主题需在主题页点击“更新”；不会覆盖用户自行修改的已安装 CSS。
|
||
|
||
这是全仓库静态样式覆盖和功能回归检查，不是所有屏幕尺寸下的逐页视觉验收，也不把变量有定义等同于对比度全部达标。
|
||
|
||
## 用量与交互
|
||
|
||
柱状图按日期和来源聚合，再以 Provider ID + 模型 ID 分割同柱。模型分段之和与来源总计一致；同一来源使用色彩深浅区分，提供商柱保留斜纹。缺失计数仍显示“未提供”，不补估历史值。
|
||
|
||
缓存命中率只对同时提供命中和未命中计数的请求计算：命中合计除以这些请求的输入合计；缺少输入时分母使用命中加未命中。本次本地记录检查中的两次 DeepSeek 调用，厂商明确报告命中 0，未命中分别为 1015、1219，写入缺失。没有新增外部模型调用。
|
||
|
||
AI 对话 Enter 发送，Shift+Enter 换行，输入法确认和长按 Enter 不触发重复发送。Mermaid 普通预览控件在悬停/键盘聚焦时显示，触屏保留按钮；大图可直接滚轮缩放，普通预览需中键启用。滚轮归一化并按时间限制缩放速度，每秒连续输入不会无限叠加瞬时倍率。
|
||
|
||
|
||
## 下拉与折叠控件补充
|
||
|
||
编辑器外观行统一为标签、38px 控件、说明三层，避免只有代码主题字段带说明时将其他控件拉偏。补齐所有原生 details 的 `ui-disclosure` 样式，统一折叠箭头、展开背景和边框。下拉框增加共享箭头、选项配色、焦点及禁用态；支持 `appearance: base-select` 的浏览器使用可主题化选项面板，其他浏览器保留原生选择行为并应用可支持的颜色。原生系统弹出层的完整装饰不能仅靠 CSS 在所有浏览器中保证。
|
||
|
||
## 6107b7f 后续遗漏修复
|
||
|
||
- 任务、MCP、主题导入、社区预览、Agent 权限确认接入 AppDialog：原生顶层遮罩、内部滚动、祖先滚动锁及焦点归还。滚动锁使用引用计数，嵌套弹窗关闭不会提前解锁背景。权限确认禁止 Escape/点击遮罩隐式关闭；MCP 忙碌时禁止隐式关闭。人设弹窗补用同一滚动锁。
|
||
- 修复音视频三处、请求 JSON 一处 textarea 的单行高度覆盖；使用 textarea 样式、最小高度和纵向拉伸。单行高度规则仅匹配 input.input 与 select。
|
||
- Agent 工具原文和 Trace 完整数据接入 ui-disclosure，并合并重复容器规则。Provider 预设选中态使用主题强调色。
|
||
- 音视频页面标题和内容宽度对齐共享布局。纸间时光补充工具选择卡片的轻量纸张边框，版本 1.6.2；旧版更新入口及应用后 CSS 刷新已有自动测试。其余社区主题复用公共控件修复，未无意义提升包版本。
|
||
- 安装前预览加载真实 tokens.css 与 features.css，并增加多行/单行/下拉/禁用/展开折叠/错误标签/Markdown/图表配色及长标识样例；保留无脚本 sandbox 与 CSP，不改宿主主题。
|
||
|
||
验证：六主题在 1280、600、360 像素浏览器窗口下检查；样例 iframe 内容宽度分别为 660、508、268px，均无水平溢出，多行框均为 100px。实际任务页弹窗矩形覆盖 1280×720 全视口，焦点进入表单，Escape 关闭后回到新建按钮；实际术语校对框为 100px 并支持纵向拉伸。
|
||
|
||
可重复的隔离浏览器入口与操作说明位于 `frontend/tests/visual/README.md`，支持六主题、长内容弹窗和真实编辑器输入。测试不访问用户笔记或调用模型。组件样例矩阵并不等同于所有业务数据、浏览器和完整色彩对比度验收；不声称完成未执行的全页面截图或性能优化。
|
||
|
||
最终验证：56 个测试文件、323 项前端测试通过；生产构建通过。复扫结果：未接入共享样式的 details 为 0，误用 input 类的 textarea 为 0。
|