obsidian-plugin/panatgithub_AnkiHeadingSync

mirror of https://github.com/panatgithub/AnkiHeadingSync.git synced 2026-07-22 06:51:43 +00:00

Dusk 31cde1c88a Style settings page buttons and toggles using Obsidian theme colors

Scope styling to plugin settings page. Use Obsidian theme colors for buttons and toggles to ensure visual consistency.

在插件设置页面应用内容样式，使用 Obsidian 主题颜色。
将样式作用域限定在插件设置页面，并使用 Obsidian 主题色适配按钮和开关，确保视觉效果统一。

2026-04-26 17:56:42 +08:00

4.4 KiB

Raw Blame History

Settings Theme Buttons Gap Report

审查范围

本次按真实仓库实现审查了以下位置：

当前实现确认

1. 设置页根容器目前没有插件专用 class

display() 当前直接复用 containerEl 并写入 sticky header、cards container 与 card body，但没有任何类似 anki-heading-sync-settings 的作用域 class。

结果是：

当前仓库还没有安全的设置页局部样式挂点
如果直接写按钮或开关样式，只能继续依赖 inline style 或全局选择器

2. 目标操作按钮目前确实分成两种创建方式

真实代码里的设置页操作按钮有三处：

renderCardTypesCard() 里的原生 loadButton
renderScopeCard() 里的原生 refreshButton
renderDeckCard() 里 Setting.addButton() 创建的插入模板按钮

当前这三处都没有统一主题按钮 class。

3. 必须排除的按钮也确实存在独立创建点

当前不应被主题化的按钮有两个明确来源：

initializeCards() 里的卡片折叠标题按钮 headerEl
renderFolderNode() 里的文件夹展开/收起按钮 toggleControl

这两类按钮各自已经有独立 dataset 和 inline style，可直接排除，不需要模糊匹配。

4. 所有设置页开关都走 `Setting.addToggle()`

当前设置页里的主题化目标开关共有五处，全部由 Setting.addToggle() 创建：

addObsidianBacklink
syncObsidianTagsToAnki
keepPureTagLinesInCardBody
convertHighlightsToCloze
fileDeckEnabled

原生复选框不在本次范围内：

卡片类型启用 checkbox
QA 警告接受 checkbox
文件夹树 checkbox

5. 真实 Obsidian 类型声明已提供 `buttonEl` 与 `toggleEl`

本地安装的 node_modules/obsidian/obsidian.d.ts 已确认：

ButtonComponent.buttonEl: HTMLButtonElement
ToggleComponent.toggleEl: HTMLElement

因此不需要绕过 API，也不需要依赖私有字段。

6. 测试假组件目前还没有暴露 DOM 元素字段

当前 src/presentation/settings/PluginSettingTab.test.ts 里的 fake：

HoistedFakeButtonComponent 只有 text 和 click()，没有 buttonEl
HoistedFakeToggleComponent 只有 value 和 triggerChange()，没有 toggleEl
HoistedFakeElement 也还没有 classList

这意味着如果直接在生产代码里给 buttonEl / toggleEl 打 class，测试会先失败。

7. 根目录目前没有 `styles.css`

仓库根目录当前不存在 styles.css，说明设置页视觉增强还没有独立样式产物。

8. stage 脚本目前不会复制 `styles.css`

当前 scripts/stage-plugin-dist.mjs 只会处理：

manifest.json
versions.json
自动生成 dist/plugin/README.md

不会检查或复制根目录 styles.css 到 dist/plugin/styles.css。

9. sync 脚本已经符合本次目标

当前 scripts/sync-plugin-dist.mjs 已经：

复制 main.js
复制 manifest.json
如果 dist/plugin/styles.css 存在则复制它
不删除目标目录文件
不触碰 data.json

因此本轮不需要改 sync 逻辑。

建议的最小落点

在 PluginSettingTab.ts 给设置页根容器增加专用 class
为目标操作按钮与 Setting.addToggle() 开关增加显式 theme 标记 helper
新增根目录 styles.css，只在设置页根容器下生效
更新 PluginSettingTab.test.ts fake 组件，使测试可观察 buttonEl、toggleEl、class 与 data 属性
更新 stage-plugin-dist.mjs，在根目录存在 styles.css 时复制到 dist/plugin/styles.css

与计划的显式偏差

没有产品级偏差。

仅有一个实现级确认：

当前仓库的 sync-plugin-dist.mjs 已经只同步 main.js、manifest.json 和可选的 styles.css
因此最终同步可以继续复用现有脚本，不需要额外改写同步逻辑

4.4 KiB Raw Blame History Unescape Escape