From 8dca1d33ee4f6d0ba09c651d0ccf92bda54b9446 Mon Sep 17 00:00:00 2001 From: fanlusky <1730976608@qq.com> Date: Wed, 30 Sep 2026 18:17:10 +0800 Subject: [PATCH] =?UTF-8?q?fix(ui-html):=20=E7=BB=9F=E4=B8=80=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E9=A1=B5=E5=AD=97=E5=8F=B7=E5=B1=82=E7=BA=A7=E5=B9=B6?= =?UTF-8?q?=E7=90=86=E9=A1=BA=E4=BA=94=E7=AC=94=E6=96=B9=E6=A1=88=E5=AD=90?= =?UTF-8?q?=E9=A1=B9=E6=8E=92=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 五笔方案、输入纠错卡片里的子设置项改用 section-item-row，行间距与分隔线统一， 子项标题降为 14px 并沿用光标状态提示的描边模拟中等字重。 在 variables.css 定义页面标题、分组标题、正文、说明文字四档字号， 各模块的说明文字样式合并为一条共享规则，收敛 11px/12.5px/13px 等零散取值。 --- .../ime-settings/src/partials/input.html | 8 +-- .../src/styles/components/sections.css | 54 +++++++++++++++++-- .../src/styles/modules/ai-settings.css | 7 --- .../src/styles/modules/appearance.css | 5 -- .../src/styles/modules/floating-toolbar.css | 6 +-- .../styles/modules/handwriting-settings.css | 1 - .../src/styles/modules/helpcode.css | 10 +--- .../ime-settings/src/styles/modules/input.css | 11 ---- .../src/styles/modules/screenkb-settings.css | 1 - .../src/styles/modules/shortcut.css | 8 +-- .../ime-settings/src/styles/modules/skin.css | 3 +- .../ime-settings/src/styles/modules/stats.css | 29 ++++------ .../src/styles/modules/tools-settings.css | 4 -- .../ime-settings/src/styles/modules/voice.css | 7 --- .../ime-settings/src/styles/variables.css | 13 +++++ 15 files changed, 85 insertions(+), 82 deletions(-) diff --git a/ui-html/webview2/settings/ime-settings/src/partials/input.html b/ui-html/webview2/settings/ime-settings/src/partials/input.html index 47255f51..93d526d8 100644 --- a/ui-html/webview2/settings/ime-settings/src/partials/input.html +++ b/ui-html/webview2/settings/ime-settings/src/partials/input.html @@ -113,7 +113,7 @@ -
+
拼音混输
同一串字母同时给五笔码表和全拼，五笔候选在前
@@ -122,7 +122,7 @@
-
+
z 键通配
开启后 z 可匹配码表中该位置的任意字母（含首位），常用于首码不确定时起头
@@ -176,7 +176,7 @@
全拼输错时按误键类型给出纠正候选，默认关闭；开启后预编辑始终显示原始输入，纠正结果仅出现在候选中
-
+
乱序纠错
相邻字母顺序打错时纠正，如 sahng → shang（上）
@@ -185,7 +185,7 @@
-
+
邻键纠错
误触相邻按键时纠正，如 shabg → shang（上）；默认关闭
diff --git a/ui-html/webview2/settings/ime-settings/src/styles/components/sections.css b/ui-html/webview2/settings/ime-settings/src/styles/components/sections.css index 0ee9bdb7..f1aa844e 100644 --- a/ui-html/webview2/settings/ime-settings/src/styles/components/sections.css +++ b/ui-html/webview2/settings/ime-settings/src/styles/components/sections.css @@ -7,8 +7,8 @@ } .content-header span { - font-weight: 500; - font-size: 18px; + font-weight: var(--font-weight-title); + font-size: var(--font-size-page-title); } .section { @@ -21,11 +21,57 @@ } .section-title { - font-size: 15px; - font-weight: 550; + font-size: var(--font-size-section-title); + font-weight: var(--font-weight-title); color: var(--text-color); } +/* 分组内的子设置项（开关行、下拉行、折叠展开的规则行）比分组标题低一级： + 正文字号、介于常规和粗体之间的字重。雅黑只有 Regular / Bold，400~500 都 + 渲染成 Regular，所以用 400 加一道细描边模拟 Medium（同光标状态提示的子项）。 */ +.section-item-row .section-title, +.frequency-option-row .section-title, +.translation-language-row .section-title, +.word-to-character-keys-row .section-title, +.toggle-section-details .section-title, +.theme-surface-details .section-title { + font-size: var(--font-size-body); + font-weight: var(--font-weight-body); + -webkit-text-stroke: var(--sub-item-title-stroke) currentColor; +} + +/* 各页面的说明文字共用一套样式；模块里只保留各自的间距差异。 */ +.input-setting-description, +.helpcode-description, +.floating-toolbar-description, +.voice-description, +.quick-phrase-description, +.stats-description, +.skin-theme-description, +.shortcut-section-description, +.handwriting-description, +.screenkb-description, +.ai-description { + margin-top: 4px; + color: var(--text-muted); + font-size: var(--font-size-caption); + line-height: var(--line-height-caption); +} + +/* 同一张卡片里上下排列的子设置项：统一行距，行与行之间用分隔线隔开。 */ +.section-item-row { + padding: 12px 0; + border-top: 1px solid var(--divider-color); +} + +.section-header:not(.section-item-row) + .section-item-row { + margin-top: 12px; +} + +.section-item-row:last-child { + padding-bottom: 0; +} + .section-header { display: flex; align-items: center; diff --git a/ui-html/webview2/settings/ime-settings/src/styles/modules/ai-settings.css b/ui-html/webview2/settings/ime-settings/src/styles/modules/ai-settings.css index 18299631..2c6e0c45 100644 --- a/ui-html/webview2/settings/ime-settings/src/styles/modules/ai-settings.css +++ b/ui-html/webview2/settings/ime-settings/src/styles/modules/ai-settings.css @@ -31,13 +31,6 @@ margin-bottom: 16px; } -.ai-description { - margin-top: 6px; - color: var(--text-muted); - font-size: 12px; - line-height: 1.5; -} - .ai-grid { display: grid; grid-template-columns: 1fr 1fr; diff --git a/ui-html/webview2/settings/ime-settings/src/styles/modules/appearance.css b/ui-html/webview2/settings/ime-settings/src/styles/modules/appearance.css index 6921797b..4a9bc0db 100644 --- a/ui-html/webview2/settings/ime-settings/src/styles/modules/appearance.css +++ b/ui-html/webview2/settings/ime-settings/src/styles/modules/appearance.css @@ -209,11 +209,6 @@ padding: 2px 0; } -.theme-surface-details .section-title { - font-size: 15px; - font-weight: 400; -} - .theme-surface-details .divider { display: none; } diff --git a/ui-html/webview2/settings/ime-settings/src/styles/modules/floating-toolbar.css b/ui-html/webview2/settings/ime-settings/src/styles/modules/floating-toolbar.css index 6208ac5c..a5e48704 100644 --- a/ui-html/webview2/settings/ime-settings/src/styles/modules/floating-toolbar.css +++ b/ui-html/webview2/settings/ime-settings/src/styles/modules/floating-toolbar.css @@ -6,10 +6,10 @@ /* Rows sit between regular and the bold group title. Chinese text falls back to Microsoft YaHei, which ships only Light / Regular / Bold, so any weight from 400 to 500 renders Regular and 550+ renders Bold. A hairline stroke on - Regular gives the medium weight the font lacks (WebView2 is Chromium). */ -.section-title.caret-state-option-title { font-weight: 400; -webkit-text-stroke: 0.25px currentColor; } + Regular gives the medium weight the font lacks (WebView2 is Chromium). + sections.css applies the same treatment to every sub-item title. */ +.section-title.caret-state-option-title { font-size: var(--font-size-body); font-weight: 400; -webkit-text-stroke: var(--sub-item-title-stroke) currentColor; } .floating-toolbar-setting-row { padding: 20px 24px; } -.floating-toolbar-description { margin-top: 6px; color: var(--text-muted); font-size: 12px; } /* Auto-hide rows sit under the main switch; the delay is a child of the auto-hide switch, indented and greyed out while that switch is off. */ .ftb-auto-hide-row, .ftb-auto-hide-delay-row { border-top: 1px solid var(--divider-color); } diff --git a/ui-html/webview2/settings/ime-settings/src/styles/modules/handwriting-settings.css b/ui-html/webview2/settings/ime-settings/src/styles/modules/handwriting-settings.css index a45d4bea..9fbe06ef 100644 --- a/ui-html/webview2/settings/ime-settings/src/styles/modules/handwriting-settings.css +++ b/ui-html/webview2/settings/ime-settings/src/styles/modules/handwriting-settings.css @@ -1,6 +1,5 @@ .handwriting-card { padding: 0; overflow: hidden; } .handwriting-setting-row { padding: 20px 24px; } -.handwriting-description { margin-top: 6px; color: var(--text-muted); font-size: 12px; } .handwriting-open-button { min-width: 68px; padding: 7px 18px; color: #fff; background: var(--accent-color); border: 0; border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; transition: filter 120ms ease, transform 80ms ease; } .handwriting-open-button:hover { filter: brightness(1.1); } .handwriting-open-button:active { transform: translateY(1px); filter: brightness(.94); } diff --git a/ui-html/webview2/settings/ime-settings/src/styles/modules/helpcode.css b/ui-html/webview2/settings/ime-settings/src/styles/modules/helpcode.css index 87b96288..0dd0ee51 100644 --- a/ui-html/webview2/settings/ime-settings/src/styles/modules/helpcode.css +++ b/ui-html/webview2/settings/ime-settings/src/styles/modules/helpcode.css @@ -48,14 +48,8 @@ } /* 辅助码 -> 自定义辅助码 */ -.helpcode-description { - margin-top: 6px; - color: var(--text-muted); - font-size: 12px; - line-height: 1.5; -} - .helpcode-custom-directory { + margin-top: 8px; user-select: text; word-break: break-all; } @@ -80,7 +74,7 @@ border: 1px solid var(--border-color); border-radius: 6px; font: inherit; - font-size: 11px; + font-size: var(--font-size-caption); line-height: 1; cursor: pointer; } diff --git a/ui-html/webview2/settings/ime-settings/src/styles/modules/input.css b/ui-html/webview2/settings/ime-settings/src/styles/modules/input.css index a96f668a..03586a2e 100644 --- a/ui-html/webview2/settings/ime-settings/src/styles/modules/input.css +++ b/ui-html/webview2/settings/ime-settings/src/styles/modules/input.css @@ -58,12 +58,6 @@ padding: 8px 4px; } -.input-setting-description { - color: var(--text-muted); - font-size: 12px; - margin-top: 5px; -} - .translation-api-options { margin-top: 8px; } @@ -335,11 +329,6 @@ padding: 2px 0; } -.toggle-section-details .section-title { - font-size: 15px; - font-weight: 400; -} - .toggle-section-details .input-setting-description { margin-top: 0; } diff --git a/ui-html/webview2/settings/ime-settings/src/styles/modules/screenkb-settings.css b/ui-html/webview2/settings/ime-settings/src/styles/modules/screenkb-settings.css index a2fbf72a..a1796759 100644 --- a/ui-html/webview2/settings/ime-settings/src/styles/modules/screenkb-settings.css +++ b/ui-html/webview2/settings/ime-settings/src/styles/modules/screenkb-settings.css @@ -1,6 +1,5 @@ .screenkb-card { padding: 0; overflow: hidden; } .screenkb-setting-row { padding: 20px 24px; } -.screenkb-description { margin-top: 6px; color: var(--text-muted); font-size: 12px; } .screenkb-open-button { min-width: 68px; padding: 7px 18px; color: #fff; background: var(--accent-color); border: 0; border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; transition: filter 120ms ease, transform 80ms ease; } .screenkb-open-button:hover { filter: brightness(1.1); } .screenkb-open-button:active { transform: translateY(1px); filter: brightness(.94); } diff --git a/ui-html/webview2/settings/ime-settings/src/styles/modules/shortcut.css b/ui-html/webview2/settings/ime-settings/src/styles/modules/shortcut.css index 3aa47cdf..d34242f4 100644 --- a/ui-html/webview2/settings/ime-settings/src/styles/modules/shortcut.css +++ b/ui-html/webview2/settings/ime-settings/src/styles/modules/shortcut.css @@ -22,12 +22,6 @@ padding: 18px 22px; } -.shortcut-section-description { - color: var(--text-muted); - font-size: 12px; - margin-top: 5px; -} - .shortcut-section .content-page-option { padding: 0 24px 4px; } @@ -53,7 +47,7 @@ gap: 24px; padding: 10px 22px; color: var(--text-color); - font-size: 13px; + font-size: var(--font-size-body); } .shortcut-row + .shortcut-row { diff --git a/ui-html/webview2/settings/ime-settings/src/styles/modules/skin.css b/ui-html/webview2/settings/ime-settings/src/styles/modules/skin.css index 31be1e22..159cc987 100644 --- a/ui-html/webview2/settings/ime-settings/src/styles/modules/skin.css +++ b/ui-html/webview2/settings/ime-settings/src/styles/modules/skin.css @@ -4,7 +4,6 @@ .skin-theme-card.has-skin-decoration .skin-preview-stage { overflow: visible; } .skin-theme-card + .skin-theme-card { margin-top: 18px; } .skin-theme-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; } -.skin-theme-description { margin-top: 5px; color: var(--text-muted); font-size: 13px; } .skin-theme-actions { display: flex; flex-direction: column; @@ -21,7 +20,7 @@ border: 1px solid var(--border-color); border-radius: 6px; font: inherit; - font-size: 11px; + font-size: var(--font-size-caption); line-height: 1; cursor: pointer; } diff --git a/ui-html/webview2/settings/ime-settings/src/styles/modules/stats.css b/ui-html/webview2/settings/ime-settings/src/styles/modules/stats.css index 956ae718..1b2e0295 100644 --- a/ui-html/webview2/settings/ime-settings/src/styles/modules/stats.css +++ b/ui-html/webview2/settings/ime-settings/src/styles/modules/stats.css @@ -5,13 +5,6 @@ display: none !important; } -.stats-description { - color: var(--text-muted); - font-size: 12px; - margin-top: 5px; - line-height: 1.5; -} - .stats-note { color: var(--text-subtle); font-size: 12px; @@ -29,7 +22,7 @@ background: var(--toast-bg); color: var(--toast-text); box-shadow: var(--card-shadow); - font-size: 12.5px; + font-size: var(--font-size-caption); } .stats-status.is-error { @@ -46,15 +39,15 @@ } .stats-empty-title { - font-size: 15px; - font-weight: 550; + font-size: var(--font-size-section-title); + font-weight: var(--font-weight-title); color: var(--text-color); margin-bottom: 8px; } .stats-empty-text { color: var(--text-muted); - font-size: 12.5px; + font-size: var(--font-size-caption); line-height: 1.6; max-width: 520px; margin: 0 auto 16px; @@ -119,7 +112,7 @@ .stats-card-title { color: var(--text-muted); - font-size: 12.5px; + font-size: var(--font-size-caption); } .stats-card-value { @@ -170,7 +163,7 @@ .stats-speed-label { color: var(--text-muted); - font-size: 12.5px; + font-size: var(--font-size-caption); } .stats-speed-value { @@ -187,7 +180,7 @@ .stats-best-day { margin-top: 12px; color: var(--text-secondary); - font-size: 12.5px; + font-size: var(--font-size-caption); } /* ---------------------------------------------------------------- calendar */ @@ -267,7 +260,7 @@ gap: 4px; margin-top: 10px; color: var(--text-subtle); - font-size: 11.5px; + font-size: 11px; } /* ------------------------------------------------------------ split panels */ @@ -345,7 +338,7 @@ .stats-cat-name { color: var(--text-secondary); - font-size: 12.5px; + font-size: var(--font-size-caption); } .stats-cat-track { @@ -399,7 +392,7 @@ .stats-detail-table { width: 100%; border-collapse: collapse; - font-size: 12.5px; + font-size: var(--font-size-caption); } .stats-detail-table th { @@ -449,7 +442,7 @@ .stats-clear-status { margin-top: 10px; min-height: 18px; - font-size: 12.5px; + font-size: var(--font-size-caption); color: var(--text-muted); } diff --git a/ui-html/webview2/settings/ime-settings/src/styles/modules/tools-settings.css b/ui-html/webview2/settings/ime-settings/src/styles/modules/tools-settings.css index c4b86dc3..a1943546 100644 --- a/ui-html/webview2/settings/ime-settings/src/styles/modules/tools-settings.css +++ b/ui-html/webview2/settings/ime-settings/src/styles/modules/tools-settings.css @@ -4,10 +4,6 @@ } .quick-phrase-description { - margin-top: 6px; - color: var(--text-muted); - font-size: 13px; - line-height: 1.45; max-width: 52em; } diff --git a/ui-html/webview2/settings/ime-settings/src/styles/modules/voice.css b/ui-html/webview2/settings/ime-settings/src/styles/modules/voice.css index 51471a8e..4c2e846a 100644 --- a/ui-html/webview2/settings/ime-settings/src/styles/modules/voice.css +++ b/ui-html/webview2/settings/ime-settings/src/styles/modules/voice.css @@ -10,13 +10,6 @@ margin: -6px 0 16px; } -.voice-description { - margin-top: 6px; - color: var(--text-muted); - font-size: 12px; - line-height: 1.5; -} - .voice-grid { display: grid; grid-template-columns: 1fr 1fr; diff --git a/ui-html/webview2/settings/ime-settings/src/styles/variables.css b/ui-html/webview2/settings/ime-settings/src/styles/variables.css index 4b0abbaa..254d775b 100644 --- a/ui-html/webview2/settings/ime-settings/src/styles/variables.css +++ b/ui-html/webview2/settings/ime-settings/src/styles/variables.css @@ -67,6 +67,19 @@ html[data-theme="dark"] { --titlebar-height: 32px; } +/* 字号层级（与主题无关）：页面标题 > 分组标题 > 子项 / 控件正文 > 说明文字。 + 各模块只引用这几档，不再自己写 12.5px、13px 之类的中间值。 */ +:root { + --font-size-page-title: 18px; + --font-size-section-title: 15px; + --font-size-body: 14px; + --font-size-caption: 12px; + --font-weight-title: 600; + --font-weight-body: 400; + --line-height-caption: 1.6; + --sub-item-title-stroke: 0.25px; +} + html[data-theme="light"] { color-scheme: light; --accent-color: #6f6bc7;