- 候选窗:深色 #2C2C2C 底、#383838 选中底、#E183D9 紫色选中条,序号与候选同字号, 横排每项最小 4.35em、间距 0.28em(换行的行间同样隔 0.28em);尺寸均按字号缩放 - 翻页:默认开启,实心圆角三角,与候选行等高,横排前加分隔线 - 悬浮工具栏沿用默认页面,拖拽条改为紫色 - ui:PagerArrows 新增 Glyph::Triangle 与分隔线,三角用单一路径填充,半透明时不出现描边重叠; CandidateList 新增 minItemWidth 与 selectedBarInside - 设置页新增皮肤卡片与预览;更新内置皮肤列表、文档与配置注释,补充测试
Metasequoia IME UI HTML
水杉输入法 Windows 端的界面资源。Server 加载这里的页面来渲染候选窗、悬浮工具栏、托盘菜单和设置窗口。
webview2/shared/ 是引擎 web 契约的副本,由 scripts/sync-contracts.py 从 ../engine/contracts/webview/ 生成,CI 用 --check 验证两者一致。要改契约请改那边,再在同一个提交里重新生成,不要直接改这个目录。
同仓的相关组件:../windows/(TSF 前端)、../server/(后端与窗口宿主)、../engine/(输入引擎与契约)。
目录
| 路径 | 内容 |
|---|---|
webview2/candwnd/ |
候选窗,含 skins/ 下的皮肤 |
webview2/ftb/ |
悬浮工具栏 |
webview2/menu/ |
托盘菜单 |
webview2/settings/ime-settings/ |
设置页,唯一需要构建的部分,Vite + TypeScript |
webview2/default-themes/、webview2/other-themes/ |
主题 |
除设置页外都是直接分发的静态资源,改完即生效。
构建设置页
设置页是发布安装包的必要输入之一,pnpm build 的产物 dist/ 会被打包脚本收集。
cd webview2/settings/ime-settings
corepack enable
pnpm install --frozen-lockfile
pnpm build
pnpm 版本由 package.json 的 packageManager 字段固定,corepack enable 之后不用自己装。开发时用 pnpm dev 起本地服务。
本地调试
把本仓链接到 Server 的数据目录,改页面就不用重新打包:
$target = Join-Path $env:LOCALAPPDATA 'metasequoiaime\html'
if (Test-Path -LiteralPath $target) {
Remove-Item -LiteralPath $target -Recurse -Force
}
New-Item -ItemType SymbolicLink -Path $target -Target (Resolve-Path .).Path
必须用绝对路径,Resolve-Path 就是用来把当前目录转成绝对路径的。设置页走这条路时链接的仍是仓库目录,页面读的是 webview2/settings/ime-settings/dist/,所以改完设置页要重新 pnpm build。
与 C++ 侧的边界
窗口归 Server,页面归本目录。HWND、尺寸、位置、DPI、Z-order 和 WebView2 controller 的生命周期都在 ../server/src/window/ 与 ../server/src/webview2/;页面结构、样式和浏览器端交互在这里。
C++ → 页面主要经 WebView2 导航和脚本执行,页面 → C++ 经 window.chrome.webview.postMessage(...)。改消息 type、JSON 字段、页面导出的 JS 函数或 DOM 标识时,必须同步检查 Server 的消息解析与拼接代码,两边没有编译期约束。
候选内容和输入状态的权威在 Server 和引擎,页面只负责展示与发出用户动作;不要在页面侧复制候选选择、翻页、输入模式或配置持久化的状态机。
完整的组件边界约定见仓库根 AGENTS.md。