Merge pull request #553 from fanlusky/fix/settings-typography

fix(ui-html): 统一设置页字号层级并理顺五笔方案子项排版

ui-html/webview2/settings/ime-settings/src/partials/input.html

@@ -113,7 +113,7 @@
         </div>
       </div>
     </div>
-    <div class="section-header">
+    <div class="section-header section-item-row">
       <div>
         <div class="section-title">拼音混输</div>
         <div class="input-setting-description">同一串字母同时给五笔码表和全拼，五笔候选在前</div>
@@ -122,7 +122,7 @@
         <div class="ftb-toggle-knob"></div>
       </div>
     </div>
-    <div class="section-header">
+    <div class="section-header section-item-row">
       <div>
         <div class="section-title">z 键通配</div>
         <div class="input-setting-description">开启后 z 可匹配码表中该位置的任意字母（含首位），常用于首码不确定时起头</div>
@@ -176,7 +176,7 @@
         <div class="input-setting-description">全拼输错时按误键类型给出纠正候选，默认关闭；开启后预编辑始终显示原始输入，纠正结果仅出现在候选中</div>
       </div>
     </div>
-    <div class="section-header">
+    <div class="section-header section-item-row">
       <div>
         <div class="section-title">乱序纠错</div>
         <div class="input-setting-description">相邻字母顺序打错时纠正，如 sahng → shang（上）</div>
@@ -185,7 +185,7 @@
         <div class="ftb-toggle-knob"></div>
       </div>
     </div>
-    <div class="section-header">
+    <div class="section-header section-item-row">
       <div>
         <div class="section-title">邻键纠错</div>
         <div class="input-setting-description">误触相邻按键时纠正，如 shabg → shang（上）；默认关闭</div>

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;

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;

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;
 }

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); }

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); }

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;
 }

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;
 }

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); }

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 {

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;
 }

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);
 }
 

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;
 }
 

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;

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;