From 96040385bc23ed8a4866d44b28ef8d6d3db070ee Mon Sep 17 00:00:00 2001
From: fanlusky <1730976608@qq.com>
Date: Fri, 21 Aug 2026 14:44:10 +0800
Subject: [PATCH] Add Chinese-English translation functionality during typing.

---
 .../candwnd/vertical_candidate_window_dark.html      |  5 ++++-
 .../candwnd/vertical_candidate_window_graphite.html  |  5 ++++-
 .../vertical_candidate_window_graphite_light.html    |  5 ++++-
 .../candwnd/vertical_candidate_window_light.html     |  5 ++++-
 .../candwnd/vertical_candidate_window_wechat.html    |  5 ++++-
 .../vertical_candidate_window_wechat_light.html      |  5 ++++-
 .../vertical_candidate_window_willow_green.html      |  5 ++++-
 ...vertical_candidate_window_willow_green_light.html |  5 ++++-
 .../settings/ime-settings/src/modules/config-sync.ts |  3 +++
 .../settings/ime-settings/src/modules/input.ts       |  3 +++
 .../settings/ime-settings/src/partials/input.html    | 12 ++++++++++++
 11 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/ui-html/webview2/candwnd/vertical_candidate_window_dark.html b/ui-html/webview2/candwnd/vertical_candidate_window_dark.html
index 58982da0..7b6ba257 100644
--- a/ui-html/webview2/candwnd/vertical_candidate_window_dark.html
+++ b/ui-html/webview2/candwnd/vertical_candidate_window_dark.html
@@ -184,6 +184,7 @@
       background: #2d2d2d; border: 1px solid #9b9b9b2e; border-radius: 6px; padding: 1px 0; }
     .context-menu-parent:hover > .context-submenu { display: block; }
     .context-menu-separator { height: 1px; margin: 3px 5px; background: #ffffff20; }
+    .cand-translation { margin-left: 0.65em; font-size: 0.78em; opacity: 0.62; }
   </style>
 
   <script>
@@ -200,7 +201,9 @@
       const contentEl = candElement.querySelector('.cand-content');
       if (!contentEl) return false;
 
-      let text = contentEl.textContent.trim();
+      const candidateOnly = contentEl.cloneNode(true);
+      candidateOnly.querySelectorAll('.cand-translation').forEach((node) => node.remove());
+      let text = candidateOnly.textContent.trim();
 
       // 去掉括号里的编码，例如：你们(rR) → 你们
       text = text.replace(/\(.*?\)$/, '').trim();
diff --git a/ui-html/webview2/candwnd/vertical_candidate_window_graphite.html b/ui-html/webview2/candwnd/vertical_candidate_window_graphite.html
index e6a81cb4..91816411 100644
--- a/ui-html/webview2/candwnd/vertical_candidate_window_graphite.html
+++ b/ui-html/webview2/candwnd/vertical_candidate_window_graphite.html
@@ -206,6 +206,7 @@
     .context-submenu { background: #23272c; border-color: #3a4047; border-radius: 3px; }
     .context-menu-item { color: #c7cdd5; border-radius: 2px; }
     .context-menu-item:hover { background: #30353b; }
+    .cand-translation { margin-left: 0.65em; font-size: 0.78em; opacity: 0.62; }
   </style>
 
   <script>
@@ -222,7 +223,9 @@
       const contentEl = candElement.querySelector('.cand-content');
       if (!contentEl) return false;
 
-      let text = contentEl.textContent.trim();
+      const candidateOnly = contentEl.cloneNode(true);
+      candidateOnly.querySelectorAll('.cand-translation').forEach((node) => node.remove());
+      let text = candidateOnly.textContent.trim();
 
       // 去掉括号里的编码，例如：你们(rR) → 你们
       text = text.replace(/\(.*?\)$/, '').trim();
diff --git a/ui-html/webview2/candwnd/vertical_candidate_window_graphite_light.html b/ui-html/webview2/candwnd/vertical_candidate_window_graphite_light.html
index 08186d9a..e428ad84 100644
--- a/ui-html/webview2/candwnd/vertical_candidate_window_graphite_light.html
+++ b/ui-html/webview2/candwnd/vertical_candidate_window_graphite_light.html
@@ -206,6 +206,7 @@
     .context-submenu { background: #ffffff; border-color: #dfe3e8; border-radius: 3px; }
     .context-menu-item { color: #374151; border-radius: 2px; }
     .context-menu-item:hover { background: #f1f3f5; }
+    .cand-translation { margin-left: 0.65em; font-size: 0.78em; opacity: 0.62; }
   </style>
 
   <script>
@@ -222,7 +223,9 @@
       const contentEl = candElement.querySelector('.cand-content');
       if (!contentEl) return false;
 
-      let text = contentEl.textContent.trim();
+      const candidateOnly = contentEl.cloneNode(true);
+      candidateOnly.querySelectorAll('.cand-translation').forEach((node) => node.remove());
+      let text = candidateOnly.textContent.trim();
 
       // 去掉括号里的编码，例如：你们(rR) → 你们
       text = text.replace(/\(.*?\)$/, '').trim();
diff --git a/ui-html/webview2/candwnd/vertical_candidate_window_light.html b/ui-html/webview2/candwnd/vertical_candidate_window_light.html
index dbe4da68..3b263e25 100644
--- a/ui-html/webview2/candwnd/vertical_candidate_window_light.html
+++ b/ui-html/webview2/candwnd/vertical_candidate_window_light.html
@@ -184,6 +184,7 @@
       background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 6px; padding: 1px 0; }
     .context-menu-parent:hover > .context-submenu { display: block; }
     .context-menu-separator { height: 1px; margin: 3px 5px; background: #00000020; }
+    .cand-translation { margin-left: 0.65em; font-size: 0.78em; opacity: 0.62; }
   </style>
 
   <script>
@@ -200,7 +201,9 @@
       const contentEl = candElement.querySelector('.cand-content');
       if (!contentEl) return false;
 
-      let text = contentEl.textContent.trim();
+      const candidateOnly = contentEl.cloneNode(true);
+      candidateOnly.querySelectorAll('.cand-translation').forEach((node) => node.remove());
+      let text = candidateOnly.textContent.trim();
 
       // 去掉括号里的编码，例如：你们(rR) → 你们
       text = text.replace(/\(.*?\)$/, '').trim();
diff --git a/ui-html/webview2/candwnd/vertical_candidate_window_wechat.html b/ui-html/webview2/candwnd/vertical_candidate_window_wechat.html
index 63b17383..f58d0858 100644
--- a/ui-html/webview2/candwnd/vertical_candidate_window_wechat.html
+++ b/ui-html/webview2/candwnd/vertical_candidate_window_wechat.html
@@ -209,6 +209,7 @@
     .context-submenu { background: #1f1f1f; border-color: #343434; }
     .context-menu-item { color: #d0d0d0; }
     .context-menu-item:hover { background: #2a2a2a; }
+    .cand-translation { margin-left: 0.65em; font-size: 0.78em; opacity: 0.62; }
   </style>
 
   <script>
@@ -225,7 +226,9 @@
       const contentEl = candElement.querySelector('.cand-content');
       if (!contentEl) return false;
 
-      let text = contentEl.textContent.trim();
+      const candidateOnly = contentEl.cloneNode(true);
+      candidateOnly.querySelectorAll('.cand-translation').forEach((node) => node.remove());
+      let text = candidateOnly.textContent.trim();
 
       // 去掉括号里的编码，例如：你们(rR) → 你们
       text = text.replace(/\(.*?\)$/, '').trim();
diff --git a/ui-html/webview2/candwnd/vertical_candidate_window_wechat_light.html b/ui-html/webview2/candwnd/vertical_candidate_window_wechat_light.html
index 09666da0..60c906f7 100644
--- a/ui-html/webview2/candwnd/vertical_candidate_window_wechat_light.html
+++ b/ui-html/webview2/candwnd/vertical_candidate_window_wechat_light.html
@@ -204,6 +204,7 @@
     .context-submenu { background: #ffffff; border-color: #d9d9d9; }
     .context-menu-item { color: #333333; }
     .context-menu-item:hover { background: #eeeeee; }
+    .cand-translation { margin-left: 0.65em; font-size: 0.78em; opacity: 0.62; }
   </style>
 
   <script>
@@ -220,7 +221,9 @@
       const contentEl = candElement.querySelector('.cand-content');
       if (!contentEl) return false;
 
-      let text = contentEl.textContent.trim();
+      const candidateOnly = contentEl.cloneNode(true);
+      candidateOnly.querySelectorAll('.cand-translation').forEach((node) => node.remove());
+      let text = candidateOnly.textContent.trim();
 
       // 去掉括号里的编码，例如：你们(rR) → 你们
       text = text.replace(/\(.*?\)$/, '').trim();
diff --git a/ui-html/webview2/candwnd/vertical_candidate_window_willow_green.html b/ui-html/webview2/candwnd/vertical_candidate_window_willow_green.html
index 550c307d..e643c57a 100644
--- a/ui-html/webview2/candwnd/vertical_candidate_window_willow_green.html
+++ b/ui-html/webview2/candwnd/vertical_candidate_window_willow_green.html
@@ -251,6 +251,7 @@
     .context-submenu { background: #343635; border-color: #454845; }
     .context-menu-item { color: #e0e2df; }
     .context-menu-item:hover { background: #414441; }
+    .cand-translation { margin-left: 0.65em; font-size: 0.78em; opacity: 0.62; }
   </style>
 
   <script>
@@ -267,7 +268,9 @@
       const contentEl = candElement.querySelector('.cand-content');
       if (!contentEl) return false;
 
-      let text = contentEl.textContent.trim();
+      const candidateOnly = contentEl.cloneNode(true);
+      candidateOnly.querySelectorAll('.cand-translation').forEach((node) => node.remove());
+      let text = candidateOnly.textContent.trim();
 
       // 去掉括号里的编码，例如：你们(rR) → 你们
       text = text.replace(/\(.*?\)$/, '').trim();
diff --git a/ui-html/webview2/candwnd/vertical_candidate_window_willow_green_light.html b/ui-html/webview2/candwnd/vertical_candidate_window_willow_green_light.html
index e15f7e78..45560400 100644
--- a/ui-html/webview2/candwnd/vertical_candidate_window_willow_green_light.html
+++ b/ui-html/webview2/candwnd/vertical_candidate_window_willow_green_light.html
@@ -248,6 +248,7 @@
     .context-submenu { background: #fbfcfa; border-color: #d8ded9; }
     .context-menu-item { color: #343936; }
     .context-menu-item:hover { background: #e9eeea; }
+    .cand-translation { margin-left: 0.65em; font-size: 0.78em; opacity: 0.62; }
   </style>
 
   <script>
@@ -264,7 +265,9 @@
       const contentEl = candElement.querySelector('.cand-content');
       if (!contentEl) return false;
 
-      let text = contentEl.textContent.trim();
+      const candidateOnly = contentEl.cloneNode(true);
+      candidateOnly.querySelectorAll('.cand-translation').forEach((node) => node.remove());
+      let text = candidateOnly.textContent.trim();
 
       // 去掉括号里的编码，例如：你们(rR) → 你们
       text = text.replace(/\(.*?\)$/, '').trim();
diff --git a/ui-html/webview2/settings/ime-settings/src/modules/config-sync.ts b/ui-html/webview2/settings/ime-settings/src/modules/config-sync.ts
index 87df05f8..a8e8c8bf 100644
--- a/ui-html/webview2/settings/ime-settings/src/modules/config-sync.ts
+++ b/ui-html/webview2/settings/ime-settings/src/modules/config-sync.ts
@@ -119,6 +119,9 @@ export function setupConfigSync(): void {
       payload.data?.general?.cn_en_mixed_input,
       payload.data?.general?.cn_en_mixed_input_min_chars
     );
+    if (typeof payload.data?.general?.candidate_translations === 'boolean') {
+      applyToggleState('candidateTranslationsToggleBtn', payload.data.general.candidate_translations);
+    }
     if (typeof payload.data?.general?.emoji_mixed_input === 'boolean') {
       applyToggleState('emojiMixedInputToggleBtn', payload.data.general.emoji_mixed_input);
     }
diff --git a/ui-html/webview2/settings/ime-settings/src/modules/input.ts b/ui-html/webview2/settings/ime-settings/src/modules/input.ts
index 85894ef1..7b70d295 100644
--- a/ui-html/webview2/settings/ime-settings/src/modules/input.ts
+++ b/ui-html/webview2/settings/ime-settings/src/modules/input.ts
@@ -96,6 +96,9 @@ export function setupInput(): void {
     syncZhEnMixedInputOptionsEnabled(active);
     updateConfig('general.cn_en_mixed_input', active);
   });
+  setupToggleButton('candidateTranslationsToggleBtn', (active) => {
+    updateConfig('general.candidate_translations', active);
+  });
   setupDropdownMenu(
     'zhEnTriggerLengthBtn',
     'zhEnTriggerLengthMenu',
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 ded5c15e..5925f1ab 100644
--- a/ui-html/webview2/settings/ime-settings/src/partials/input.html
+++ b/ui-html/webview2/settings/ime-settings/src/partials/input.html
@@ -80,6 +80,18 @@
     </div>
   </div>
 
+  <div class="section">
+    <div class="section-header">
+      <div>
+        <div class="section-title">候选词翻译</div>
+        <div class="input-setting-description">仅在竖排候选窗口中显示中英互译，每项最多两个简短释义</div>
+      </div>
+      <div class="ftb-toggle-btn active" id="candidateTranslationsToggleBtn" role="switch" aria-checked="true" tabindex="0">
+        <div class="ftb-toggle-knob"></div>
+      </div>
+    </div>
+  </div>
+
   <div class="section">
     <div class="section-header">
       <div>