first version of self-rendering title bar

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

@@ -14,13 +14,13 @@
       <span class="window-title">Settings</span>
     </div>
     <div class="titlebar-right window-controls" aria-label="Window controls">
-      <button class="window-button minimize" aria-label="Minimize window" data-tooltip="Minimize">
+      <button id="btn-minimize" class="window-button minimize" aria-label="Minimize window" data-tooltip="Minimize">
         <img class="window-icon" src="/assets/minimize.svg" alt="" />
       </button>
-      <button class="window-button maximize" aria-label="Maximize window" data-tooltip="Maximize">
+      <button id="btn-maximize" class="window-button maximize" aria-label="Maximize window" data-tooltip="Maximize">
         <img class="window-icon" src="/assets/maximize.svg" alt="" />
       </button>
-      <button class="window-button close" aria-label="Close window" data-tooltip="Close">
+      <button id="btn-close" class="window-button close" aria-label="Close window" data-tooltip="Close">
         <img class="window-icon" src="/assets/close.svg" alt="" />
       </button>
     </div>
@@ -41,4 +41,4 @@
   <script type="module" src="/src/main.ts"></script>
 </body>
 
-</html>
+</html>

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

@@ -4,6 +4,9 @@ import { loadHTML, showOnlyCurrentModule } from './utils/common-utils';
 import { loadContent, setupSidebar } from './modules/sidebar';
 
 async function initializeApp() {
+  setupTitlebarButtons();
+  setupTitlebarDrag();
+
   // 加载侧边栏
   const sidebarHTML = await loadHTML('/src/partials/sidebar.html');
   document.getElementById('sidebar-container')!.innerHTML = sidebarHTML;
@@ -25,5 +28,50 @@ async function initializeApp() {
   container.style.visibility = 'visible';
 }
 
+function setupTitlebarButtons(): void {
+  const minimizeBtn = document.getElementById('btn-minimize');
+  const maximizeBtn = document.getElementById('btn-maximize');
+  const closeBtn = document.getElementById('btn-close');
 
-document.addEventListener('DOMContentLoaded', initializeApp);
+  const postWindowMessage = (value: 'minimize' | 'maximize' | 'close') => {
+    if (window.chrome?.webview) {
+      window.chrome.webview.postMessage(
+        JSON.stringify({
+          type: 'windowControl',
+          data: value
+        })
+      );
+    } else {
+      console.warn('[windowControl] webview2 not available:', value);
+    }
+  };
+
+  minimizeBtn?.addEventListener('click', () => postWindowMessage('minimize'));
+  maximizeBtn?.addEventListener('click', () => postWindowMessage('maximize'));
+  closeBtn?.addEventListener('click', () => postWindowMessage('close'));
+}
+
+function setupTitlebarDrag(): void {
+  const titlebar = document.querySelector<HTMLElement>('.titlebar');
+  if (!titlebar) {
+    console.warn('[windowControl] titlebar not found');
+    return;
+  }
+
+  titlebar.addEventListener('mousedown', (e: MouseEvent) => {
+    const target = e.target as HTMLElement | null;
+    if (target?.closest('.window-controls')) {
+      return;
+    }
+
+    if (window.chrome?.webview) {
+      window.chrome.webview.postMessage(
+        JSON.stringify({
+          type: 'dragStart'
+        })
+      );
+    }
+  });
+}
+
+document.addEventListener('DOMContentLoaded', initializeApp);