From 388581d75ee66ea180ea19301644b8032b0ca294 Mon Sep 17 00:00:00 2001
From: xmk23333 <xmk23333@gmail.com>
Date: Mon, 19 Jan 2026 13:04:34 +0800
Subject: [PATCH] - fix: fix IME composition input causing character
 duplication   Handle onCompositionStart/End events to prevent repeated
 characters   when typing Chinese in proxy group filter

---
 .../src/components/base/collapse-input.tsx    | 46 +++++++++++++++++--
 .../src/components/sider/conn-card.tsx        |  2 +-
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/components/base/collapse-input.tsx b/src/renderer/src/components/base/collapse-input.tsx
index c9e4545..fcad365 100644
--- a/src/renderer/src/components/base/collapse-input.tsx
+++ b/src/renderer/src/components/base/collapse-input.tsx
@@ -1,20 +1,60 @@
-import React, { useRef } from 'react'
+import React, { useRef, useState, useCallback } from 'react'
 import { Input, InputProps } from '@heroui/react'
 import { FaSearch } from 'react-icons/fa'
 
-interface CollapseInputProps extends InputProps {
+interface CollapseInputProps extends Omit<InputProps, 'onValueChange'> {
   title: string
+  onValueChange?: (value: string) => void
 }
 
 const CollapseInput: React.FC<CollapseInputProps> = (props) => {
-  const { title, ...inputProps } = props
+  const { title, value, onValueChange, ...inputProps } = props
   const inputRef = useRef<HTMLInputElement>(null)
+  const isComposingRef = useRef(false)
+  const [localValue, setLocalValue] = useState(value || '')
+
+  // 同步外部 value 变化
+  React.useEffect(() => {
+    if (!isComposingRef.current) {
+      setLocalValue(value || '')
+    }
+  }, [value])
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value
+      setLocalValue(newValue)
+      // 只在非组合输入时触发外部更新
+      if (!isComposingRef.current) {
+        onValueChange?.(newValue)
+      }
+    },
+    [onValueChange]
+  )
+
+  const handleCompositionStart = useCallback(() => {
+    isComposingRef.current = true
+  }, [])
+
+  const handleCompositionEnd = useCallback(
+    (e: React.CompositionEvent<HTMLInputElement>) => {
+      isComposingRef.current = false
+      // 组合输入结束后，触发一次更新
+      onValueChange?.(e.currentTarget.value)
+    },
+    [onValueChange]
+  )
+
   return (
     <div className="flex">
       <Input
         size="sm"
         ref={inputRef}
         {...inputProps}
+        value={localValue as string}
+        onChange={handleChange}
+        onCompositionStart={handleCompositionStart}
+        onCompositionEnd={handleCompositionEnd}
         style={{ paddingInlineEnd: 0 }}
         classNames={{
           inputWrapper: 'cursor-pointer bg-transparent p-0 data-[hover=true]:bg-content2',
diff --git a/src/renderer/src/components/sider/conn-card.tsx b/src/renderer/src/components/sider/conn-card.tsx
index 4bdd8b4..27319ff 100644
--- a/src/renderer/src/components/sider/conn-card.tsx
+++ b/src/renderer/src/components/sider/conn-card.tsx
@@ -303,7 +303,7 @@ const drawSvg = async (
   if (upload === currentUploadRef.current && download === currentDownloadRef.current) return
   currentUploadRef.current = upload
   currentDownloadRef.current = download
-  const svg = `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 36"><image height="36" width="36" href="${trayIconBase64}"/><text x="140" y="15" font-size="18" font-family="PingFang SC" font-weight="bold" text-anchor="end">${calcTraffic(upload)}/s</text><text x="140" y="34" font-size="18" font-family="PingFang SC" font-weight="bold" text-anchor="end">${calcTraffic(download)}/s</text></svg>`
+  const svg = `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156 36"><image height="36" width="36" href="${trayIconBase64}"/><text x="156" y="15" font-size="18" font-family="PingFang SC" font-weight="bold" text-anchor="end" fill="black">${calcTraffic(upload)}/s</text><text x="156" y="34" font-size="18" font-family="PingFang SC" font-weight="bold" text-anchor="end" fill="black">${calcTraffic(download)}/s</text></svg>`
   const image = await loadImage(svg)
   window.electron.ipcRenderer.send('trayIconUpdate', image, true)
 }