Preliminarily implement the skin section in settings.

ui-html/webview2/settings/ime-settings/index.html

@@ -50,6 +50,7 @@
       <div id="input"></div>
       <div id="helpcode"></div>
       <div id="dict"></div>
+      <div id="skin"></div>
       <div id="voice"></div>
       <div id="screenkb-settings"></div>
       <div id="shortcut"></div>

ui-html/webview2/settings/ime-settings/src/main.ts

@@ -56,6 +56,7 @@ async function initializeApp() {
   await loadContent('input');
   await loadContent('helpcode');
   await loadContent('dict');
+  await loadContent('skin');
   await loadContent('voice');
   await loadContent('screenkb-settings');
   await loadContent('shortcut');

ui-html/webview2/settings/ime-settings/src/modules/sidebar.ts

@@ -6,6 +6,7 @@ import { setupFloatingToolbar } from './floating-toolbar';
 import { setupVoiceInput } from './voice';
 import { setupScreenKeyboardSettings } from './screenkb-settings';
 import { setupDictionary } from './dict';
+import { setupSkin } from './skin';
 
 // 动态加载内容
 export async function loadContent(moduleName: string) {
@@ -31,6 +32,9 @@ export async function loadContent(moduleName: string) {
     case 'dict':
       setupDictionary();
       break;
+    case 'skin':
+      await setupSkin();
+      break;
     case 'voice':
       setupVoiceInput();
       break;

ui-html/webview2/settings/ime-settings/src/modules/skin.ts

@@ -0,0 +1,18 @@
+import { loadHTML } from '../utils/common-utils';
+import ftbHTML from '../../../../ftb/default.html?raw';
+
+export async function setupSkin(): Promise<void> {
+  const vertical = document.getElementById('skinCandidateVertical');
+  const horizontal = document.getElementById('skinCandidateHorizontal');
+  if (vertical) vertical.innerHTML = await loadHTML('/src/partials/candidate/candidate-wnd-v.html');
+  if (horizontal) horizontal.innerHTML = await loadHTML('/src/partials/candidate/candidate-wnd-h.html');
+
+  const toolbar = document.getElementById('skinToolbarPreview');
+  if (!toolbar) return;
+  const source = new DOMParser().parseFromString(ftbHTML, 'text/html');
+  const statusBar = source.querySelector<HTMLElement>('.status-bar');
+  if (!statusBar) return;
+  statusBar.querySelectorAll('#en, #fullwidth, #puncEn').forEach((element) => element.remove());
+  statusBar.querySelectorAll<HTMLElement>('[id]').forEach((element) => element.removeAttribute('id'));
+  toolbar.replaceChildren(statusBar);
+}

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

@@ -0,0 +1,29 @@
+<div class="content" id="skin-settings">
+  <div class="content-header"><span>皮肤</span></div>
+
+  <div class="section skin-theme-card">
+    <div class="skin-theme-header">
+      <div>
+        <div class="section-title">Fluent 主题</div>
+        <div class="skin-theme-description">当前默认主题</div>
+      </div>
+      <div class="ftb-toggle-btn active skin-theme-toggle" role="switch" aria-checked="true" aria-disabled="true">
+        <div class="ftb-toggle-knob"></div>
+      </div>
+    </div>
+
+    <div class="skin-preview-list">
+      <div class="skin-preview-row skin-preview-horizontal">
+        <div class="skin-preview-stage"><div class="candidate wnd-h" id="skinCandidateHorizontal"></div></div>
+      </div>
+
+      <div class="skin-preview-row skin-preview-vertical">
+        <div class="skin-preview-stage"><div class="candidate wnd-v" id="skinCandidateVertical"></div></div>
+      </div>
+
+      <div class="skin-preview-row skin-preview-toolbar">
+        <div class="skin-preview-stage"><div class="ftb-preview-host" id="skinToolbarPreview"></div></div>
+      </div>
+    </div>
+  </div>
+</div>

ui-html/webview2/settings/ime-settings/src/styles/index.css

@@ -21,6 +21,7 @@
 @import './modules/input.css';
 @import './modules/helpcode.css';
 @import './modules/dict.css';
+@import './modules/skin.css';
 @import './modules/voice.css';
 @import './modules/screenkb-settings.css';
 @import './modules/shortcut.css';

ui-html/webview2/settings/ime-settings/src/styles/modules/skin.css

@@ -0,0 +1,10 @@
+.skin-theme-card { padding: 0; overflow: hidden; }
+.skin-theme-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; }
+.skin-theme-description { margin-top: 5px; color: #929292; font-size: 13px; }
+.skin-theme-toggle { cursor: default; }
+.skin-preview-list { padding: 9px 0; background: rgba(18, 18, 18, .13); }
+.skin-preview-row { min-width: 0; }
+.skin-preview-stage { display: flex; align-items: flex-start; justify-content: flex-start; min-width: 0; padding: 9px 24px; overflow: hidden; }
+.skin-preview-row .candidate { flex: 0 0 auto; margin-top: 0; transform-origin: left center; }
+.skin-preview-horizontal .container { width: max-content; white-space: nowrap; }
+.skin-preview-toolbar .ftb-preview-host { display: flex; align-items: center; justify-content: flex-start; padding: 0; }

ui-html/webview2/settings/ime-settings/src/utils/common-utils.ts

@@ -20,7 +20,7 @@ export async function loadHTML(url: string): Promise<string> {
 
 // 只显示当前的模块，隐藏其他模块
 export function showOnlyCurrentModule(moduleName: string): void {
-  const modules = ['floating-toolbar', 'appearance', 'input', 'helpcode', 'dict', 'voice', 'screenkb-settings', 'shortcut'];
+  const modules = ['floating-toolbar', 'appearance', 'input', 'helpcode', 'dict', 'skin', 'voice', 'screenkb-settings', 'shortcut'];
   modules.forEach((module: string) => {
     if (module === moduleName) {
       document.getElementById(module)!.style.display = 'block';