Skip to content

Commit 51f85e7

Browse files
chaxusclaude
chaxus
and
claude
committed
feat(theme): editor UI follows the site's light/dark theme
New lib/editor-theme.ts: mount with theme-dark when the ranui site theme is dark (classic light otherwise), keep following data-ran-theme / OS changes via Common.UI.Themes.setTheme while a document is open, and let a theme picked inside the editor win (ui-theme-site-driven marker tells the two apart). Roadmap: direction eight (multi-language site) evaluation, theme status; fix the stale '9 languages' claim; restore items 4/5 ticks that a non-asserting replace had dropped. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 parent 7325a9c commit 51f85e7

7 files changed

Lines changed: 424 additions & 26 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@ notes. Entries describe what users experience, not internal refactors.
3232

3333
### Added
3434

35+
- The editor now follows the site's light/dark theme: a dark site opens a
36+
dark editor and switches live with the theme toggle; a theme you pick inside
37+
the editor's own settings still wins.
3538
- New "Open PDF" pages (`/open/pdf`, `/zh-CN/open/pdf`) explaining what the
3639
PDF viewer can and cannot do (read, comment and annotate, save back as PDF;
3740
no free-text rewriting of an existing PDF), linked from both homepages.

‎CLAUDE.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ lib/ # 应用层（纯 TypeScript，只在本站点用）
4545
pending-open.ts # 静态落地页经 IndexedDB 交接文件（?open=local）
4646
agent-plugin/ # Agent 协同编辑：editor-bridge（直调 window.editor）、tools、ui/
4747
packages/ # pnpm workspace，供 ran 生态三处站点共享（包名 @ranuts/*）
48-
shared/ # document-types / document-utils / i18n（9 语言）/ store（createSignal）
48+
shared/ # document-types / document-utils / i18n（en + zh-CN 词条；编辑器 UI 语言另由 vendor 45 语言包提供）/ store（createSignal）
4949
converter/ # 格式转换：CSV↔XLSX（SheetJS）、docx-zip 媒体处理、签名嗅探、PDF 字体清单
5050
agent-core/ # LLM 运行时 + 多 Provider（anthropic/openai/gemini/ollama/webllm）+ key 存储
5151
chat-ui/ # 聊天面板 UI

‎docs/explorations/2026-08-16-editor-follows-site-theme.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# 编辑器跟随站点深色/亮色主题（2026-08-16）
2+
3+
用户问"当前项目是否支持深色和亮色切换"。结论：站点层早就支持（ranui
4+
`<r-theme-switch>` + `--ran-*` token，首页/落地页/embed-demo 全部覆盖），
5+
但编辑器层不跟随——深色站点里点"新建文档"，弹出的是亮色的
6+
`theme-classic-light` 编辑器。本轮把这一层补上。
7+
8+
## 机制
9+
10+
OnlyOffice 有自己的主题系统：启动时 `customization.uiTheme` →
11+
`uitheme=` frame 参数；运行时 `Common.UI.Themes.setTheme(id)`；只有主题
12+
**真的变化**时才把 `ui-theme-id` 写进 localStorage（实测挂载时不写）。
13+
vendor 9.3 的 app.css 里 `theme-dark` / `theme-type-dark` 变量齐全，
14+
`theme-system` 也在，但我们不用它——它的亮色分支是 `theme-light`，
15+
而站点默认要 classic。
16+
17+
新增 `lib/editor-theme.ts`：
18+
19+
- `isSiteDark()`：`<html data-ran-theme>`（ranui 已把 system 解析成
20+
light/dark 写进去）→ localStorage `ran-theme` → `prefers-color-scheme`。
21+
- `resolveEditorUiTheme(lightDefault)`：用户在编辑器里选过（`ui-theme-id`
22+
且 ≠ 我们上次驱动的值）→ 用用户的；否则 dark → `theme-dark`、light →
23+
classic，并把驱动值写到 `ui-theme-site-driven`。这个标记是关键：编辑器
24+
会把我们 setTheme 的值再存一份到 `ui-theme-id`，没有它下次一律被当作
25+
"用户手选"、跟随永远失效。
26+
- `installEditorThemeFollow()`：MutationObserver 盯 `data-ran-theme` +
27+
`matchMedia('(prefers-color-scheme: dark)')`，变化时遍历 frames 找
28+
`Common.UI.Themes` 调 `setTheme`（`currentThemeId` 相同则跳过）。
29+
`lib/onlyoffice-editor.ts` 的 `resolveUiTheme()` 改为委托，模块加载时
30+
装一次监听。
31+
32+
## 验证
33+
34+
- `test/unit/editor-theme.test.ts` 9 条 + `onlyoffice-editor.test.ts` 新增
35+
"dark 站点 → uiTheme=theme-dark"；原有"用户选过的主题优先"仍绿。
36+
- 真浏览器：`ran-theme=dark` 打开 `?new=docx` → 编辑器 body
37+
`theme-dark theme-type-dark`，`#toolbar` 计算色 `rgb(42,42,42)`；
38+
切 light → `theme-classic-light`（蓝色标题栏）；再切 dark → 回 dark，
39+
全程 `ui-theme-id` 与 `ui-theme-site-driven` 同步、不会被误判为用户选择。
40+
- 一个截图坑：chrome-devtools `take_screenshot` 在主题刚切换后可能吐出
41+
上一帧（DOM 计算色已是 dark、截图仍亮）——resize 一下再截才是真实画面。
42+
以计算样式为准。
43+
44+
## 没做 / 后续
45+
46+
- 编辑器打开后站点顶栏隐藏，页面上没有主题切换入口；建议随方向六 2
47+
把 `<r-theme-switch>` 放进右下角 FAB Menu。
48+
- 文档画布深色（`asc_setContentDarkMode`）刻意不跟随。
49+
- 一处流程教训：上一轮给路线图打 ✅ 的 python 替换因表格被 prettier 重排
50+
而静默 no-op（没有 assert），本轮补回并给所有替换加了断言。

‎docs/superpowers/plans/2026-08-15-next-phase-roadmap.md‎

Lines changed: 85 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,9 @@ Breadcrumb）、页脚互链全齐；robots.txt / sitemap.xml / llms.txt 三件
103103
看 /open/* /convert/* 的收录与点击基线（需要站长权限，用户操作）。
104104
3. **外链启动**：v9 转正 + PDF 支持是一个像样的"发布事件"，掘金/V2EX/
105105
HN Show/Product Hunt 各发一稿（playbook 第 3 杠杆，从未启动）。
106-
4. **更多语言落地页**（/ja/ /de/ 等）：app i18n 已具备（9 语言），
107-
playbook 的前提已满足；建议先看 GSC 中非中英流量占比再决定。
106+
4. **更多语言落地页**（/ja/ /de/ 等）：见方向八（2026-08-16 评估）。
107+
注意此前"app i18n 已具备 9 语言"的说法不实：`packages/shared/src/i18n.ts`
108+
只有 en / zh-CN 两套词条；vendor 编辑器 UI 倒是自带 45 个语言包。
108109

109110
## 方向三：agent / LLM 友好
110111

@@ -308,6 +309,72 @@ llms.txt 形成互补）。结构化数据用 FAQPage / HowTo，并入 sitemap
308309
版本号语义由用户定）。它同时是方向二 3「外链发布事件」的弹药——发稿
309310
时有一个正经的 release notes 页可以指向，比空口说"升级了"有力得多。
310311

312+
## 方向八：多语言站点（2026-08-16 追加，用户提出）
313+
314+
参照的产品语言菜单：English / 简体中文 / 日本語 / Español / Português /
315+
한국어 / Deutsch / فارسی（8 种）。
316+
317+
### 现状盘点（2026-08-16 实测）
318+
319+
| 层 | 现状 | 备注 |
320+
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------ |
321+
| 落地页 / 首页（SEO 主体） | en + zh-CN 两套静态 HTML（各 12 页），hreflang 互指，`landing-pages.test.ts` 钉契约 | 每种新语言 = 再复制 12 页，纯内容工作量最大 |
322+
| 站点 App 壳 i18n | `packages/shared/src/i18n.ts` **仅 en / zh-CN**（≈40 个 key：菜单、toast、agent 面板）；`?locale=` / cookie / navigator 检测链已具备 | 词条量小，加语言便宜 |
323+
| 编辑器 UI（OnlyOffice） | vendor 自带 45 个语言包（ar bg cs da de el es fi fr he hu id it ja ko nl pl pt pt-pt ro ru sv tr uk vi zh zh-tw …），`editorConfig.lang` 已由 `getOnlyOfficeLang()` 传入 | **无 fa（波斯语）**，fa 会回落 en；`lang` 目前只会产出 en / zh-CN 两个值 |
324+
| 编辑器帮助 / 拼写 | 帮助已裁剪；拼写关闭 | 无需处理 |
325+
| RTL（fa / ar / he） | 落地页样式未考虑 `dir="rtl"`；编辑器 UI 侧 OnlyOffice 9 支持 RTL 界面（`Common.UI.isRTL`），文档内容 RTL 本就支持 | fa 要单独做 RTL 布局验收 |
326+
327+
### 方案（分三层、可独立交付）
328+
329+
1. **编辑器 UI 语言跟随（1 小时，零内容成本，收益最大）**：把
330+
`getOnlyOfficeLang()` 从"只认 en/zh-CN"扩成"任何 vendor 有语言包的
331+
BCP-47 都透传"（`navigator.languages` → 匹配 45 包，`?locale=` 优先），
332+
这样日/韩/德/西/葡用户打开文档时编辑器菜单已是母语，站点壳的 40 个词条
333+
暂时回落 en 也可接受。同时把 `zh-TW`→`zh-tw`、`pt-BR`→`pt` 之类的映射
334+
写成表 + 单测。
335+
2. **站点壳 i18n 补齐 6 种（半天）**：`i18n.ts` 词条 ≈40 个，一次性补
336+
ja / es / pt / ko / de / fa；`Language` 类型从二选一改成联合；
337+
`?locale=` 与 `<r-select>` 语言切换器改数据驱动（一份 locale 清单供
338+
落地页语言菜单、lang-switch.js、sitemap 生成共用）。
339+
3. **多语言落地页（每语言 1～2 天，按流量决定顺序）**：不再手写 12 页
340+
× N。前置是方向七 1 的"markdown→HTML 生成器"——把落地页也纳入生成：
341+
`content/<locale>/open/pdf.md`（frontmatter：title/description/faq/
342+
howto）→ 同一套 landing 壳渲染 → 自动生成 hreflang 全集、sitemap、
343+
语言菜单、llms.txt。**这决定了生成器不能只考虑 help/changelog，
344+
要按"任意 locale × 任意页"设计。** 首批语言按 GSC 非中英流量选
345+
（建议 ja、es、pt 先行，fa 需额外 RTL 验收）；机器初译 + 人工校对，
346+
`landing-pages.test.ts` 自动覆盖新 locale（遍历 public/ 时按目录
347+
识别 locale，改动很小）。
348+
4. **RTL 验收（fa 前置，半天）**：landing.css 用逻辑属性
349+
（margin-inline / padding-inline / text-align: start）替换左右属性；
350+
`<html dir="rtl">`；编辑器 iframe 侧确认 OnlyOffice RTL 界面开关。
351+
352+
### 与其它方向的耦合
353+
354+
- 生成器（方向七 1）先做且按 locale × page 设计 → 方向八 3 才不返工。
355+
- 语言菜单：与截图一致的形态（当前语言在顶、其它带外链箭头）用 ranui
356+
`<r-select>` 现有 lang-switch 扩展即可，不另写组件。
357+
- 首页/编辑器路由拆分（方向六 2）时把 `/<locale>/` 目录约定一并定死。
358+
359+
## 深色 / 亮色模式现状（2026-08-16 评估 + 修补）
360+
361+
- **站点层已支持**：首页、全部落地页、embed-demo 都挂 ranui
362+
`<r-theme-switch>`（light / dark / system），token 层 `--ran-*` 随
363+
`<html data-ran-theme>` 翻转，`index.html` 有 no-flash 恢复脚本。
364+
- **编辑器层此前不跟随**：编辑器主题固定 `theme-classic-light`
365+
（或用户在编辑器内选过的 `ui-theme-id`），深色站点打开的是亮色编辑器。
366+
2026-08-16 修补：新增 `lib/editor-theme.ts`——挂载时 dark 站点 →
367+
`theme-dark`、light → classic；文档打开期间监听 `data-ran-theme` 与
368+
OS 媒体查询实时 `Common.UI.Themes.setTheme`；用户在编辑器内手选的
369+
主题优先（用 `ui-theme-site-driven` 标记区分"我们驱动的"与"用户选的"）。
370+
单测 `test/unit/editor-theme.test.ts`；真浏览器验证 dark 挂载 +
371+
双向实时切换。
372+
- **仍缺**：编辑器打开后站点顶栏隐藏，页面上没有主题切换入口（只能靠
373+
编辑器自己的 File → Advanced settings → Theme）；建议把
374+
`<r-theme-switch>` 放进右下角 FAB Menu（方向六 2 路由拆分时一并做）。
375+
文档正文的"深色画布"（OnlyOffice `asc_setContentDarkMode`）刻意不
376+
跟随——那是编辑器内的用户偏好，且会改变文档观感。
377+
311378
## 建议执行顺序（2026-08-15 三修：方向零插入为最高优先级）
312379

313380
**方向零（全面回归战役）压倒下表所有事项**；表内条目在战役期间仅在
@@ -316,22 +383,22 @@ llms.txt 形成互补）。结构化数据用 FAQPage / HowTo，并入 sitemap
316383

317384
## 原执行顺序（2026-08-15 更新：加入方向六、七，第 1 项已完成）
318385

319-
| 序 | 事项 | 体量 | 状态 |
320-
| --- | ------------------------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------ |
321-
| 1 | 部署后 issue 验证清单（方向四 3） | 半天 | ✅ 已完成，关 6 个 |
322-
| 2 | CHANGELOG.md + 发布 v9 release（方向七 3 前半） | 1 小时 | |
323-
| 3 | /open/pdf 落地页 + 内容收尾同步（方向一） | 半天~1 天 | ✅ 2026-08-16 落地页 + sitemap/llms/首页卡片/页脚互链 + `landing-pages.test.ts` 契约；方向一 2/3（CSV 乱码长文、只读说明）待做 |
324-
| 4 | vendor noindex + GSC 提交（方向二 1/2） | 1 小时 | |
325-
| 5 | embed-demo 对齐 ran 设计体系（方向六 1） | 半天 | |
326-
| 6 | markdown→HTML 生成器（方向七 1，后两项的前置） | 半天~1 天 | |
327-
| 7 | /help 帮助中心 + /changelog 页（方向七 2/3） | 1~2 天 | |
328-
| 8 | PPT E2E（方向四 1） | 小时级 | |
329-
| 9 | 性能基线审计（方向四 2 前半） | 半天 | |
330-
| 10 | 首页/编辑器路由拆分（方向六 2，基线之后做） | 1~2 天 | |
331-
| 11 | 预取/SW 预缓存决策（方向四 2 后半，拆分后再测） | 1 天 | |
332-
| 12 | WebMCP 薄适配 + origin trial（专节） | 1 天 | |
333-
| 13 | 外链发布稿（方向二 3，指向 /changelog 与新功能） | 用户主导 | |
334-
| 14 | agent-collab（方向五） | 大周期 | |
386+
| 序 | 事项 | 体量 | 状态 |
387+
| --- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
388+
| 1 | 部署后 issue 验证清单（方向四 3） | 半天 | ✅ 已完成，关 6 个 |
389+
| 2 | CHANGELOG.md + 发布 v9 release（方向七 3 前半） | 1 小时 | |
390+
| 3 | /open/pdf 落地页 + 内容收尾同步（方向一） | 半天~1 天 | ✅ 2026-08-16 落地页 + sitemap/llms/首页卡片/页脚互链 + `landing-pages.test.ts` 契约；方向一 2/3（CSV 乱码长文、只读说明）待做 |
391+
| 4 | vendor noindex + GSC 提交（方向二 1/2） | 1 小时 | ✅ 2026-08-16 noindex 已上（`_headers` + hosting-contract 钉住）；GSC/Bing 提交需站长权限，待用户 |
392+
| 5 | embed-demo 对齐 ran 设计体系（方向六 1） | 半天 | ✅ 2026-08-16 r-button/r-input/r-checkbox/r-card/r-theme-switch + token；E2E 契约不变，见 explorations/2026-08-16-embed-demo-ranui-restyle.md |
393+
| 6 | markdown→HTML 生成器（方向七 1，后两项的前置） | 半天~1 天 | |
394+
| 7 | /help 帮助中心 + /changelog 页（方向七 2/3） | 1~2 天 | |
395+
| 8 | PPT E2E（方向四 1） | 小时级 | |
396+
| 9 | 性能基线审计（方向四 2 前半） | 半天 | |
397+
| 10 | 首页/编辑器路由拆分（方向六 2，基线之后做） | 1~2 天 | |
398+
| 11 | 预取/SW 预缓存决策（方向四 2 后半，拆分后再测） | 1 天 | |
399+
| 12 | WebMCP 薄适配 + origin trial（专节） | 1 天 | |
400+
| 13 | 外链发布稿（方向二 3，指向 /changelog 与新功能） | 用户主导 | |
401+
| 14 | agent-collab（方向五） | 大周期 | |
335402

336403
排序理由：
337404

0 commit comments

Comments
 (0)