perf(terminal): 优化 xterm.js 集成，修复闪烁和宽度问题

- 新增 Unicode11 addon 支持 CJK 字符正确宽度计算
- 新增 WebGL addon 实现 GPU 加速渲染
- Tab 切换改用 invisible 替代 hidden 避免布局重算
- PTY resize 前使用双 rAF 确保 DOM ready
- 添加尺寸有效性检查 (cols >= 10, rows >= 2)
- 调整 terminal 黑色为更浅色以保持可见性

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: MarkShawn2020

package.json

@@ -33,7 +33,9 @@
     "@tauri-apps/plugin-global-shortcut": "~2.3.1",
     "@tauri-apps/plugin-opener": "^2",
     "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-unicode11": "^0.9.0",
     "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
     "allotment": "^1.20.5",
     "class-variance-authority": "^0.7.1",

pnpm-lock.yaml

@@ -221,7 +221,7 @@ export const SessionPanel = memo(function SessionPanel({
               key={session.id}
               value={session.id}
               forceMount
-              className="absolute inset-0 m-0 data-[state=inactive]:hidden"
+              className="absolute inset-0 m-0 data-[state=inactive]:invisible data-[state=inactive]:pointer-events-none"
             >
               <TerminalPane
                 ptyId={session.ptyId}

src/components/PanelGrid/SessionPanel.tsx

@@ -154,24 +154,35 @@ export function TerminalPane({
 
         if (!mountState.isMounted) return;
 
-        await invoke("pty_resize", {
-          id: sessionId,
-          cols: term.cols,
-          rows: term.rows,
-        }).catch(() => {});
-
-        // Focus if autoFocus is true when PTY becomes ready
-        if (autoFocusRef.current) {
-          // Use double rAF to ensure DOM is fully painted before focus
+        // Ensure terminal is properly sized before sending resize to PTY
+        // This must happen AFTER DOM is ready, so use double rAF
+        await new Promise<void>((resolve) => {
           requestAnimationFrame(() => {
-            fitAddon.fit();
             requestAnimationFrame(() => {
-              // Don't steal focus from input/textarea
-              const active = document.activeElement;
-              if (active?.tagName === 'INPUT' || active?.tagName === 'TEXTAREA') return;
-              term.focus();
+              fitAddon.fit();
+              resolve();
             });
           });
+        });
+
+        // Only send resize if dimensions are valid (container must be visible)
+        const cols = term.cols;
+        const rows = term.rows;
+        if (cols >= 10 && rows >= 2) {
+          await invoke("pty_resize", {
+            id: sessionId,
+            cols,
+            rows,
+          }).catch(() => {});
+        }
+
+        // Focus if autoFocus is true when PTY becomes ready
+        if (autoFocusRef.current) {
+          // Don't steal focus from input/textarea
+          const active = document.activeElement;
+          if (active?.tagName !== 'INPUT' && active?.tagName !== 'TEXTAREA') {
+            term.focus();
+          }
         }
         onReadyRef.current?.();
       } catch (err) {

src/components/Terminal/TerminalPane.tsx

@@ -1,6 +1,8 @@
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { WebLinksAddon } from "@xterm/addon-web-links";
+import { WebglAddon } from "@xterm/addon-webgl";
+import { Unicode11Addon } from "@xterm/addon-unicode11";
 import { openUrl } from "@tauri-apps/plugin-opener";
 
 interface PooledTerminal {
@@ -50,7 +52,7 @@ const TERMINAL_THEME = {
   cursor: "#CC785C",
   cursorAccent: "#1a1a1a",
   selectionBackground: "#CC785C40",
-  black: "#1a1a1a",
+  black: "#4a4a4a", // Lighter than background to remain visible
   red: "#e06c75",
   green: "#98c379",
   yellow: "#d19a66",
@@ -97,6 +99,11 @@ export function getOrCreateTerminal(sessionId: string): PooledTerminal {
     openUrl(uri).catch(console.error);
   }));
 
+  // Unicode11 addon for proper CJK character width calculation
+  const unicode11Addon = new Unicode11Addon();
+  term.loadAddon(unicode11Addon);
+  term.unicode.activeVersion = "11";
+
   // Create a detached container for the terminal
   const container = document.createElement("div");
   container.style.width = "100%";
@@ -105,6 +112,18 @@ export function getOrCreateTerminal(sessionId: string): PooledTerminal {
   // Open terminal in the detached container
   term.open(container);
 
+  // WebGL addon for GPU-accelerated rendering (prevents flicker on high-throughput)
+  // Must be loaded AFTER term.open() - falls back to DOM renderer if WebGL unavailable
+  try {
+    const webglAddon = new WebglAddon();
+    webglAddon.onContextLoss(() => {
+      webglAddon.dispose();
+    });
+    term.loadAddon(webglAddon);
+  } catch {
+    // WebGL not available, use default DOM renderer
+  }
+
   // Note: macOS keyboard shortcuts (Cmd+Arrow, Cmd+Backspace, Option+Arrow, Option+Backspace)
   // are handled in TerminalPane.tsx using invoke("pty_write") for direct PTY communication