feat: 一些实现

src/App.tsx

@@ -53,7 +53,8 @@ function App() {
 
   // 锁定状态
   const [isLocked, setIsLocked] = useState(false)
-  const [lockAvatar, setLockAvatar] = useState('')
+  const [lockAvatar, setLockAvatar] = useState<string | undefined>(undefined)
+  const [lockUseHello, setLockUseHello] = useState(false)
 
   // 协议同意状态
   const [showAgreement, setShowAgreement] = useState(false)
@@ -260,8 +261,14 @@ function App() {
     if (isAgreementWindow || isOnboardingWindow || isVideoPlayerWindow) return
 
     const checkLock = async () => {
-      const enabled = await configService.getAuthEnabled()
+      // 并行获取配置，减少等待
+      const [enabled, useHello] = await Promise.all([
+        configService.getAuthEnabled(),
+        configService.getAuthUseHello()
+      ])
+
       if (enabled) {
+        setLockUseHello(useHello)
         setIsLocked(true)
         // 尝试获取头像
         try {
@@ -298,6 +305,7 @@ function App() {
         <LockScreen
           onUnlock={() => setIsLocked(false)}
           avatar={lockAvatar}
+          useHello={lockUseHello}
         />
       )}
       <TitleBar />

src/components/LockScreen.scss

@@ -12,6 +12,24 @@
     justify-content: center;
     user-select: none;
     -webkit-app-region: drag;
+    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+    backdrop-filter: blur(25px) saturate(180%);
+    background-color: var(--bg-primary);
+    // 让背景带一点透明度以增强毛玻璃效果
+    opacity: 1;
+
+    &.unlocked {
+        opacity: 0;
+        pointer-events: none;
+        backdrop-filter: blur(0) saturate(100%);
+        transform: scale(1.02);
+
+        .lock-content {
+            transform: translateY(-20px) scale(0.95);
+            filter: blur(10px);
+            opacity: 0;
+        }
+    }
 
     .lock-content {
         display: flex;
@@ -19,7 +37,8 @@
         align-items: center;
         width: 320px;
         -webkit-app-region: no-drag;
-        animation: fadeIn 0.5s ease-out;
+        animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 
         .lock-avatar {
             width: 100px;

src/components/LockScreen.tsx

@@ -6,6 +6,7 @@ import './LockScreen.scss'
 interface LockScreenProps {
     onUnlock: () => void
     avatar?: string
+    useHello?: boolean
 }
 
 async function sha256(message: string) {
@@ -16,72 +17,132 @@ async function sha256(message: string) {
     return hashHex
 }
 
-export default function LockScreen({ onUnlock, avatar }: LockScreenProps) {
+export default function LockScreen({ onUnlock, avatar, useHello = false }: LockScreenProps) {
     const [password, setPassword] = useState('')
     const [error, setError] = useState('')
     const [isVerifying, setIsVerifying] = useState(false)
+    const [isUnlocked, setIsUnlocked] = useState(false)
     const [showHello, setShowHello] = useState(false)
     const [helloAvailable, setHelloAvailable] = useState(false)
 
+    // 用于取消 WebAuthn 请求
+    const abortControllerRef = useRef<AbortController | null>(null)
     const inputRef = useRef<HTMLInputElement>(null)
 
     useEffect(() => {
-        checkHelloAvailability()
+        // 快速检查配置并启动
-        // Auto focus input
+        quickStartHello()
         inputRef.current?.focus()
+
+        return () => {
+            // 组件卸载时取消请求
+            abortControllerRef.current?.abort()
+        }
     }, [])
 
-    const checkHelloAvailability = async () => {
+    const handleUnlock = () => {
+        setIsUnlocked(true)
+        setTimeout(() => {
+            onUnlock()
+        }, 1500)
+    }
+
+    const quickStartHello = async () => {
         try {
-            const useHello = await configService.getAuthUseHello()
+            // 如果父组件已经告诉我们要用 Hello，直接开始，不等待 IPC
-            if (useHello && window.PublicKeyCredential) {
+            let shouldUseHello = useHello
-                // Simple check if WebAuthn is supported
+
-                const available = await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
+            // 为了稳健，如果 prop 没传（虽然现在都传了），再 check 一次 config
-                setHelloAvailable(available)
+            if (!shouldUseHello) {
-                if (available) {
+                shouldUseHello = await configService.getAuthUseHello()
-                    setShowHello(true)
+            }
-                    verifyHello()
+
+            if (shouldUseHello) {
+                // 标记为可用，显示按钮
+                setHelloAvailable(true)
+                setShowHello(true)
+                // 立即执行验证 (0延迟)
+                verifyHello()
+
+                // 后台再次确认可用性，如果其实不可用，再隐藏? 
+                // 或者信任用户的配置。为了速度，我们优先信任配置。
+                if (window.PublicKeyCredential) {
+                    PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
+                        .then(available => {
+                            if (!available) {
+                                // 如果系统报告不支持，但配置开了，我们可能需要提示?
+                                // 暂时保持开启状态，反正 verifyHello 会报错
+                            }
+                        })
                 }
             }
         } catch (e) {
-            console.error('Failed to check Hello availability', e)
+            console.error('Quick start hello failed', e)
         }
     }
 
     const verifyHello = async () => {
+        if (isVerifying || isUnlocked) return
+
+        // 取消之前的请求（如果有）
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort()
+        }
+
+        const abortController = new AbortController()
+        abortControllerRef.current = abortController
+
         setIsVerifying(true)
         setError('')
         try {
-            // Use WebAuthn for authentication
-            // We use a dummy challenge because we are just verifying local presence
             const challenge = new Uint8Array(32)
             window.crypto.getRandomValues(challenge)
 
+            const rpId = 'localhost'
             const credential = await navigator.credentials.get({
                 publicKey: {
                     challenge,
-                    rpId: window.location.hostname, // 'localhost' or empty for file://
+                    rpId,
                     userVerification: 'required',
-                }
+                },
+                signal: abortController.signal
             })
 
             if (credential) {
-                onUnlock()
+                handleUnlock()
             }
         } catch (e: any) {
-            // NotAllowedError is common if user cancels
+            if (e.name === 'AbortError') {
-            if (e.name !== 'NotAllowedError') {
+                console.log('Hello verification aborted')
-                console.error('Hello verification failed', e)
+                return
+            }
+            if (e.name === 'NotAllowedError') {
+                console.log('User cancelled Hello verification')
+            } else {
+                console.error('Hello verification error:', e)
+                // 仅在非手动取消时显示错误
+                if (e.name !== 'AbortError') {
+                    setError(`验证失败: ${e.message || e.name}`)
+                }
             }
         } finally {
-            setIsVerifying(false)
+            if (!abortController.signal.aborted) {
+                setIsVerifying(false)
+            }
         }
     }
 
     const handlePasswordSubmit = async (e?: React.FormEvent) => {
         e?.preventDefault()
-        if (!password) return
+        if (!password || isUnlocked) return
 
+        // 如果正在进行 Hello 验证，取消它
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort()
+            abortControllerRef.current = null
+        }
+
+        // 不再检查 isVerifying，因为我们允许打断 Hello
         setIsVerifying(true)
         setError('')
 
@@ -90,20 +151,22 @@ export default function LockScreen({ onUnlock, avatar }: LockScreenProps) {
             const inputHash = await sha256(password)
 
             if (inputHash === storedHash) {
-                onUnlock()
+                handleUnlock()
             } else {
                 setError('密码错误')
                 setPassword('')
+                setIsVerifying(false)
+                // 如果密码错误，是否重新触发 Hello? 
+                // 用户可能想重试密码，暂时不自动触发
             }
         } catch (e) {
             setError('验证失败')
-        } finally {
             setIsVerifying(false)
         }
     }
 
     return (
-        <div className="lock-screen">
+        <div className={`lock-screen ${isUnlocked ? 'unlocked' : ''}`}>
             <div className="lock-content">
                 <div className="lock-avatar">
                     {avatar ? (
@@ -123,14 +186,14 @@ export default function LockScreen({ onUnlock, avatar }: LockScreenProps) {
                             placeholder="输入应用密码"
                             value={password}
                             onChange={(e) => setPassword(e.target.value)}
-                            disabled={isVerifying}
+                        // 移除 disabled，允许用户随时输入
                         />
-                        <button type="submit" className="submit-btn" disabled={!password || isVerifying}>
+                        <button type="submit" className="submit-btn" disabled={!password}>
                             <ArrowRight size={18} />
                         </button>
                     </div>
 
-                    {helloAvailable && (
+                    {showHello && (
                         <button
                             type="button"
                             className={`hello-btn ${isVerifying ? 'loading' : ''}`}

src/pages/SettingsPage.tsx

@@ -7,7 +7,7 @@ import { dialog } from '../services/ipc'
 import * as configService from '../services/config'
 import {
   Eye, EyeOff, FolderSearch, FolderOpen, Search, Copy,
-  RotateCcw, Trash2, Save, Plug, Check, Sun, Moon,
+  RotateCcw, Trash2, Plug, Check, Sun, Moon,
   Palette, Database, Download, HardDrive, Info, RefreshCw, ChevronDown, Mic,
   ShieldCheck, Fingerprint, Lock, KeyRound
 } from 'lucide-react'
@@ -575,6 +575,19 @@ function SettingsPage() {
     handleAutoGetDbKey()
   }
 
+  // Helper to sync current keys to wxid config
+  const syncCurrentKeys = async () => {
+    const keys = buildKeysFromState()
+    await syncKeysToConfig(keys)
+    if (wxid) {
+      await configService.setWxidConfig(wxid, {
+        decryptKey: keys.decryptKey,
+        imageXorKey: typeof keys.imageXorKey === 'number' ? keys.imageXorKey : 0,
+        imageAesKey: keys.imageAesKey
+      })
+    }
+  }
+
   const handleAutoGetImageKey = async () => {
     if (isFetchingImageKey) return
     if (!dbPath) {
@@ -593,6 +606,23 @@ function SettingsPage() {
         setImageAesKey(result.aesKey)
         setImageKeyStatus('已获取图片密钥')
         showMessage('已自动获取图片密钥', true)
+
+        // Auto-save after fetching keys
+        // We need to use the values directly because state updates are async
+        const newXorKey = typeof result.xorKey === 'number' ? result.xorKey : 0
+        const newAesKey = result.aesKey
+
+        await configService.setImageXorKey(newXorKey)
+        await configService.setImageAesKey(newAesKey)
+
+        if (wxid) {
+          await configService.setWxidConfig(wxid, {
+            decryptKey: decryptKey, // use current state as it hasn't changed here
+            imageXorKey: newXorKey,
+            imageAesKey: newAesKey
+          })
+        }
+
       } else {
         showMessage(result.error || '自动获取图片密钥失败', false)
       }
@@ -626,48 +656,8 @@ function SettingsPage() {
     }
   }
 
-  const handleSaveConfig = async () => {
+  // Removed manual save config function
-    if (!decryptKey) { showMessage('请输入解密密钥', false); return }
-    if (decryptKey.length !== 64) { showMessage('密钥长度必须为64个字符', false); return }
-    if (!dbPath) { showMessage('请选择数据库目录', false); return }
-    if (!wxid) { showMessage('请输入 wxid', false); return }
 
-    setIsLoadingState(true)
-    setLoading(true, '正在保存配置...')
-
-    try {
-      await configService.setDecryptKey(decryptKey)
-      await configService.setDbPath(dbPath)
-      await configService.setMyWxid(wxid)
-      await configService.setCachePath(cachePath)
-      const parsedXorKey = parseImageXorKey(imageXorKey)
-      await configService.setImageXorKey(typeof parsedXorKey === 'number' ? parsedXorKey : 0)
-      await configService.setImageAesKey(imageAesKey || '')
-      await configService.setWxidConfig(wxid, {
-        decryptKey,
-        imageXorKey: typeof parsedXorKey === 'number' ? parsedXorKey : 0,
-        imageAesKey
-      })
-      await configService.setWhisperModelDir(whisperModelDir)
-      await configService.setAutoTranscribeVoice(autoTranscribeVoice)
-      await configService.setTranscribeLanguages(transcribeLanguages)
-      await configService.setOnboardingDone(true)
-
-      // 保存按钮只负责持久化配置，不做连接测试/重连，避免影响聊天页的活动连接
-
-      // 保存安全配置
-      // 注意：这里只处理开关，密码修改是实时生效的（在 renderSecurityTab 里处理）
-      await configService.setAuthEnabled(authEnabled)
-      await configService.setAuthUseHello(authUseHello)
-
-      showMessage('配置保存成功', true)
-    } catch (e: any) {
-      showMessage(`保存配置失败: ${e}`, false)
-    } finally {
-      setIsLoadingState(false)
-      setLoading(false)
-    }
-  }
 
   const handleClearConfig = async () => {
     const confirmed = window.confirm('确定要清除当前配置吗？清除后需要重新完成首次配置？')
@@ -810,7 +800,18 @@ function SettingsPage() {
         <label>解密密钥</label>
         <span className="form-hint">64位十六进制密钥</span>
         <div className="input-with-toggle">
-          <input type={showDecryptKey ? 'text' : 'password'} placeholder="例如: a1b2c3d4e5f6..." value={decryptKey} onChange={(e) => setDecryptKey(e.target.value)} />
+          <input
+            type={showDecryptKey ? 'text' : 'password'}
+            placeholder="例如: a1b2c3d4e5f6..."
+            value={decryptKey}
+            onChange={(e) => setDecryptKey(e.target.value)}
+            onBlur={async () => {
+              if (decryptKey && decryptKey.length === 64) {
+                await syncCurrentKeys()
+                // showMessage('解密密钥已保存', true) 
+              }
+            }}
+          />
           <button type="button" className="toggle-visibility" onClick={() => setShowDecryptKey(!showDecryptKey)}>
             {showDecryptKey ? <EyeOff size={14} /> : <Eye size={14} />}
           </button>
@@ -834,7 +835,17 @@ function SettingsPage() {
         <label>数据库根目录</label>
         <span className="form-hint">xwechat_files 目录</span>
         <span className="form-hint" style={{ color: '#ff6b6b' }}> 目录路径不可包含中文，如有中文请去微信-设置-存储位置点击更改，迁移至全英文目录</span>
-        <input type="text" placeholder="例如: C:\Users\xxx\Documents\xwechat_files" value={dbPath} onChange={(e) => setDbPath(e.target.value)} />
+        <input
+          type="text"
+          placeholder="例如: C:\Users\xxx\Documents\xwechat_files"
+          value={dbPath}
+          onChange={(e) => setDbPath(e.target.value)}
+          onBlur={async () => {
+            if (dbPath) {
+              await configService.setDbPath(dbPath)
+            }
+          }}
+        />
         <div className="btn-row">
           <button className="btn btn-primary" onClick={handleAutoDetectPath} disabled={isDetectingPath}>
             <FolderSearch size={16} /> {isDetectingPath ? '检测中...' : '自动检测'}
@@ -852,6 +863,12 @@ function SettingsPage() {
             placeholder="例如: wxid_xxxxxx"
             value={wxid}
             onChange={(e) => setWxid(e.target.value)}
+            onBlur={async () => {
+              if (wxid) {
+                await configService.setMyWxid(wxid)
+                await syncCurrentKeys() // Sync keys to the new wxid entry
+              }
+            }}
           />
         </div>
         <button className="btn btn-secondary btn-sm" onClick={() => handleScanWxid()}><Search size={14} /> 扫描 wxid</button>
@@ -860,13 +877,25 @@ function SettingsPage() {
       <div className="form-group">
         <label>图片 XOR 密钥 <span className="optional">(可选)</span></label>
         <span className="form-hint">用于解密图片缓存</span>
-        <input type="text" placeholder="例如: 0xA4" value={imageXorKey} onChange={(e) => setImageXorKey(e.target.value)} />
+        <input
+          type="text"
+          placeholder="例如: 0xA4"
+          value={imageXorKey}
+          onChange={(e) => setImageXorKey(e.target.value)}
+          onBlur={syncCurrentKeys}
+        />
       </div>
 
       <div className="form-group">
         <label>图片 AES 密钥 <span className="optional">(可选)</span></label>
         <span className="form-hint">16 位密钥</span>
-        <input type="text" placeholder="16 位 AES 密钥" value={imageAesKey} onChange={(e) => setImageAesKey(e.target.value)} />
+        <input
+          type="text"
+          placeholder="16 位 AES 密钥"
+          value={imageAesKey}
+          onChange={(e) => setImageAesKey(e.target.value)}
+          onBlur={syncCurrentKeys}
+        />
         <button className="btn btn-secondary btn-sm" onClick={handleAutoGetImageKey} disabled={isFetchingImageKey}>
           <Plug size={14} /> {isFetchingImageKey ? '获取中...' : '自动获取图片密钥'}
         </button>
@@ -1219,7 +1248,15 @@ function SettingsPage() {
       <div className="form-group">
         <label>缓存目录 <span className="optional">(可选)</span></label>
         <span className="form-hint">留空使用默认目录</span>
-        <input type="text" placeholder="留空使用默认目录" value={cachePath} onChange={(e) => setCachePath(e.target.value)} />
+        <input
+          type="text"
+          placeholder="留空使用默认目录"
+          value={cachePath}
+          onChange={(e) => setCachePath(e.target.value)}
+          onBlur={async () => {
+            await configService.setCachePath(cachePath)
+          }}
+        />
         <div className="btn-row">
           <button className="btn btn-secondary" onClick={handleSelectCachePath}><FolderOpen size={16} /> 浏览选择</button>
           <button className="btn btn-secondary" onClick={() => setCachePath('')}><RotateCcw size={16} /> 恢复默认</button>
@@ -1255,7 +1292,7 @@ function SettingsPage() {
       const credential = await navigator.credentials.create({
         publicKey: {
           challenge,
-          rp: { name: 'WeFlow', id: window.location.hostname },
+          rp: { name: 'WeFlow', id: 'localhost' },
           user: { id: new Uint8Array([1]), name: 'user', displayName: 'User' },
           pubKeyCredParams: [{ alg: -7, type: 'public-key' }],
           authenticatorSelection: { userVerification: 'required' },
@@ -1307,7 +1344,15 @@ function SettingsPage() {
             <span className="form-hint">每次启动应用时需要验证密码</span>
           </div>
           <label className="switch">
-            <input type="checkbox" checked={authEnabled} onChange={(e) => setAuthEnabled(e.target.checked)} />
+            <input
+              type="checkbox"
+              checked={authEnabled}
+              onChange={async (e) => {
+                const enabled = e.target.checked
+                setAuthEnabled(enabled)
+                await configService.setAuthEnabled(enabled)
+              }}
+            />
             <span className="switch-slider" />
           </label>
         </div>
@@ -1459,9 +1504,6 @@ function SettingsPage() {
           <button className="btn btn-secondary" onClick={handleTestConnection} disabled={isLoading || isTesting}>
             <Plug size={16} /> {isTesting ? '测试中...' : '测试连接'}
           </button>
-          <button className="btn btn-primary" onClick={handleSaveConfig} disabled={isLoading}>
-            <Save size={16} /> {isLoading ? '保存中...' : '保存配置'}
-          </button>
         </div>
       </div>
 

src/pages/WelcomePage.tsx

@@ -80,7 +80,7 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
       const credential = await navigator.credentials.create({
         publicKey: {
           challenge,
-          rp: { name: 'WeFlow', id: window.location.hostname },
+          rp: { name: 'WeFlow', id: 'localhost' },
           user: {
             id: new Uint8Array([1]),
             name: 'user',