feat: 大幅提升语音解密速度；优化引导页面；优化图片密钥扫描逻辑

src/pages/WelcomePage.tsx

@@ -313,6 +313,67 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
   if (isDbConnected) {
     return (
       <div className={rootClassName}>
+        <div className="welcome-container">
+          {showWindowControls && (
+            <div className="window-controls">
+              <button type="button" className="window-btn" onClick={handleMinimize} aria-label="最小化">
+                <Minus size={14} />
+              </button>
+              <button type="button" className="window-btn is-close" onClick={handleCloseWindow} aria-label="关闭">
+                <X size={14} />
+              </button>
+            </div>
+          )}
+          <div className="welcome-sidebar">
+            <div className="sidebar-header">
+              <img src="./logo.png" alt="WeFlow" className="sidebar-logo" />
+              <div className="sidebar-brand">
+                <span className="brand-name">WeFlow</span>
+                <span className="brand-tag">Connected</span>
+              </div>
+            </div>
+
+            <div className="sidebar-spacer" style={{ flex: 1 }} />
+
+            <div className="sidebar-footer">
+              <ShieldCheck size={14} />
+              <span>本地安全存储</span>
+            </div>
+          </div>
+
+          <div className="welcome-content success-content">
+            <div className="success-body">
+              <div className="success-icon">
+                <CheckCircle2 size={48} />
+              </div>
+              <h1 className="success-title">配置已完成</h1>
+              <p className="success-desc">数据库已连接，你可以直接进入首页使用全部功能。</p>
+
+              <button
+                className="btn btn-primary btn-large"
+                onClick={() => {
+                  if (standalone) {
+                    setIsClosing(true)
+                    setTimeout(() => {
+                      window.electronAPI.window.completeOnboarding()
+                    }, 450)
+                  } else {
+                    navigate('/home')
+                  }
+                }}
+              >
+                进入首页 <ArrowRight size={18} />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={rootClassName}>
+      <div className="welcome-container">
         {showWindowControls && (
           <div className="window-controls">
             <button type="button" className="window-btn" onClick={handleMinimize} aria-label="最小化">
@@ -323,234 +384,204 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
             </button>
           </div>
         )}
-        <div className="welcome-shell">
-          <div className="welcome-panel">
-            <div className="panel-header">
-              <img src="./logo.png" alt="WeFlow" className="panel-logo" />
-              <div>
-                <p className="panel-kicker">WeFlow</p>
-                <h1>已连接数据库</h1>
-              </div>
+        <div className="welcome-sidebar">
+          <div className="sidebar-header">
+            <img src="./logo.png" alt="WeFlow" className="sidebar-logo" />
+            <div className="sidebar-brand">
+              <span className="brand-name">WeFlow</span>
+              <span className="brand-tag">Setup</span>
             </div>
-            <div className="panel-note">
-              <CheckCircle2 size={16} />
-              <span>配置已完成，可直接进入首页</span>
-            </div>
-            <button
-              className="btn btn-primary btn-full"
-              onClick={() => {
-                if (standalone) {
-                  setIsClosing(true)
-                  setTimeout(() => {
-                    window.electronAPI.window.completeOnboarding()
-                  }, 450)
-                } else {
-                  navigate('/home')
-                }
-              }}
-            >
-              进入首页
-            </button>
           </div>
-        </div>
-      </div>
-    )
-  }
 
-  return (
-    <div className={rootClassName}>
-      {showWindowControls && (
-        <div className="window-controls">
-          <button type="button" className="window-btn" onClick={handleMinimize} aria-label="最小化">
-            <Minus size={14} />
-          </button>
-          <button type="button" className="window-btn is-close" onClick={handleCloseWindow} aria-label="关闭">
-            <X size={14} />
-          </button>
-        </div>
-      )}
-      <div className="welcome-shell">
-        <div className="welcome-panel">
-          <div className="panel-header">
-            <img src="./logo.png" alt="WeFlow" className="panel-logo" />
-            <div>
-              <p className="panel-kicker">首次配置</p>
-              <h1>WeFlow 初始引导</h1>
-              <p className="panel-subtitle">一步一步完成数据库与密钥设置</p>
-            </div>
-          </div>
-          <div className="step-list">
+          <div className="sidebar-nav">
             {steps.map((step, index) => (
-              <div key={step.id} className={`step-item ${index === stepIndex ? 'active' : ''} ${index < stepIndex ? 'done' : ''}`}>
-                <div className="step-index">{index < stepIndex ? <CheckCircle2 size={14} /> : index + 1}</div>
-                <div>
-                  <div className="step-title">{step.title}</div>
-                  <div className="step-desc">{step.desc}</div>
+              <div key={step.id} className={`nav-item ${index === stepIndex ? 'active' : ''} ${index < stepIndex ? 'completed' : ''}`}>
+                <div className="nav-indicator">
+                  {index < stepIndex ? <CheckCircle2 size={14} /> : <div className="dot" />}
+                </div>
+                <div className="nav-info">
+                  <div className="nav-title">{step.title}</div>
+                  <div className="nav-desc">{step.desc}</div>
                 </div>
               </div>
             ))}
           </div>
-          <div className="panel-foot">
-            <ShieldCheck size={16} />
+
+          <div className="sidebar-footer">
+            <ShieldCheck size={14} />
             <span>数据仅在本地处理，不上传服务器</span>
           </div>
         </div>
 
-        <div className="setup-card">
-          <div className="setup-header">
-            <div className="setup-icon">
-              {currentStep.id === 'intro' && <Sparkles size={18} />}
-              {currentStep.id === 'db' && <Database size={18} />}
-              {currentStep.id === 'cache' && <HardDrive size={18} />}
-              {currentStep.id === 'key' && <KeyRound size={18} />}
-              {currentStep.id === 'image' && <ShieldCheck size={18} />}
-            </div>
+        <div className="welcome-content">
+          <div className="content-header">
             <div>
               <h2>{currentStep.title}</h2>
-              <p>{currentStep.desc}</p>
+              <p className="header-desc">{currentStep.desc}</p>
             </div>
           </div>
 
-          {currentStep.id === 'intro' && (
-            <div className="setup-body">
-              <div className="intro-card">
-                <Wand2 size={18} />
-                <div>
-                  <h3>准备好了吗？</h3>
-                  <p>接下来只需配置数据库目录和获取解密密钥。</p>
+          <div className="content-body">
+            {currentStep.id === 'intro' && (
+              <div className="intro-block">
+                {/* 内容移至底部 */}
+              </div>
+            )}
+
+            {currentStep.id === 'db' && (
+              <div className="form-group">
+                <label className="field-label">数据库根目录</label>
+                <div className="input-group">
+                  <input
+                    type="text"
+                    className="field-input"
+                    placeholder="例如：C:\\Users\\xxx\\Documents\\xwechat_files"
+                    value={dbPath}
+                    onChange={(e) => setDbPath(e.target.value)}
+                  />
                 </div>
-              </div>
-            </div>
-          )}
-
-          {currentStep.id === 'db' && (
-            <div className="setup-body">
-              <label className="field-label">数据库根目录</label>
-              <input
-                type="text"
-                className="field-input"
-                placeholder="例如：C:\\Users\\xxx\\Documents\\xwechat_files"
-                value={dbPath}
-                onChange={(e) => setDbPath(e.target.value)}
-              />
-              <div className="button-row">
-                <button className="btn btn-secondary" onClick={handleAutoDetectPath} disabled={isDetectingPath}>
-                  <FolderSearch size={16} /> {isDetectingPath ? '检测中...' : '自动检测'}
-                </button>
-                <button className="btn btn-primary" onClick={handleSelectPath}>
-                  <FolderOpen size={16} /> 浏览选择
-                </button>
-              </div>
-              <div className="field-hint">请选择微信-设置-存储位置对应的目录</div>
-              <div className="field-hint" style={{ color: '#ff6b6b', marginTop: '4px' }}>⚠️ 目录路径不可包含中文，如有中文请去微信-设置-存储位置点击更改，迁移至全英文目录</div>
-            </div>
-          )}
-
-          {currentStep.id === 'cache' && (
-            <div className="setup-body">
-              <label className="field-label">缓存目录</label>
-              <input
-                type="text"
-                className="field-input"
-                placeholder="留空使用默认目录"
-                value={cachePath}
-                onChange={(e) => setCachePath(e.target.value)}
-              />
-              <div className="button-row">
-                <button className="btn btn-primary" onClick={handleSelectCachePath}>
-                  <FolderOpen size={16} /> 浏览选择
-                </button>
-                <button className="btn btn-secondary" onClick={() => setCachePath('')}>
-                  <RotateCcw size={16} /> 使用默认
-                </button>
-              </div>
-              <div className="field-hint">用于头像、表情与图片缓存，留空使用默认目录</div>
-            </div>
-          )}
-
-          {currentStep.id === 'key' && (
-            <div className="setup-body">
-              <label className="field-label">微信账号 wxid</label>
-              <input
-                type="text"
-                className="field-input"
-                placeholder="获取密钥后将自动填充"
-                value={wxid}
-                onChange={(e) => setWxid(e.target.value)}
-              />
-              <label className="field-label">解密密钥</label>
-              <div className="field-with-toggle">
-                <input
-                  type={showDecryptKey ? 'text' : 'password'}
-                  className="field-input"
-                  placeholder="64 位十六进制密钥"
-                  value={decryptKey}
-                  onChange={(e) => setDecryptKey(e.target.value.trim())}
-                />
-                <button type="button" className="toggle-btn" onClick={() => setShowDecryptKey(!showDecryptKey)}>
-                  {showDecryptKey ? <EyeOff size={14} /> : <Eye size={14} />}
-                </button>
-              </div>
-
-              {isManualStartPrompt ? (
-                <div className="manual-prompt">
-                  <p className="prompt-text">未能自动启动微信，请手动启动并登录后点击下方确认</p>
-                  <button className="btn btn-primary" onClick={handleManualConfirm}>
-                    我已启动微信，继续检测
+                <div className="action-row">
+                  <button className="btn btn-secondary" onClick={handleAutoDetectPath} disabled={isDetectingPath}>
+                    <FolderSearch size={16} /> {isDetectingPath ? '检测中...' : '自动检测'}
+                  </button>
+                  <button className="btn btn-secondary" onClick={handleSelectPath}>
+                    <FolderOpen size={16} /> 浏览...
                   </button>
                 </div>
-              ) : (
-                <button className="btn btn-secondary btn-inline" onClick={handleAutoGetDbKey} disabled={isFetchingDbKey}>
-                  {isFetchingDbKey ? '获取中...' : '自动获取密钥'}
+
+                <div className="field-hint">请选择微信-设置-存储位置对应的目录</div>
+                <div className="field-hint warning">
+                  ⚠️ 目录路径不可包含中文，如有中文请先在微信中迁移至全英文目录
+                </div>
+              </div>
+            )}
+
+            {currentStep.id === 'cache' && (
+              <div className="form-group">
+                <label className="field-label">缓存目录</label>
+                <div className="input-group">
+                  <input
+                    type="text"
+                    className="field-input"
+                    placeholder="留空即使用默认目录"
+                    value={cachePath}
+                    onChange={(e) => setCachePath(e.target.value)}
+                  />
+                </div>
+                <div className="action-row">
+                  <button className="btn btn-secondary" onClick={handleSelectCachePath}>
+                    <FolderOpen size={16} /> 浏览
+                  </button>
+                  <button className="btn btn-secondary" onClick={() => setCachePath('')}>
+                    <RotateCcw size={16} /> 重置默认
+                  </button>
+                </div>
+                <div className="field-hint">用于头像、表情与图片缓存</div>
+              </div>
+            )}
+
+            {currentStep.id === 'key' && (
+              <div className="form-group">
+                <label className="field-label">微信账号 (Wxid)</label>
+                <input
+                  type="text"
+                  className="field-input"
+                  placeholder="等待获取..."
+                  value={wxid}
+                  readOnly
+                  onChange={(e) => setWxid(e.target.value)}
+                />
+
+                <label className="field-label mt-4">解密密钥</label>
+                <div className="field-with-toggle">
+                  <input
+                    type={showDecryptKey ? 'text' : 'password'}
+                    className="field-input"
+                    placeholder="64 位十六进制密钥"
+                    value={decryptKey}
+                    onChange={(e) => setDecryptKey(e.target.value.trim())}
+                  />
+                  <button type="button" className="toggle-btn" onClick={() => setShowDecryptKey(!showDecryptKey)}>
+                    {showDecryptKey ? <EyeOff size={16} /> : <Eye size={16} />}
+                  </button>
+                </div>
+
+                <div className="key-actions">
+                  {isManualStartPrompt ? (
+                    <div className="manual-prompt">
+                      <p>未能自动启动微信，请手动启动并登录</p>
+                      <button className="btn btn-primary" onClick={handleManualConfirm}>
+                        我已登录，继续
+                      </button>
+                    </div>
+                  ) : (
+                    <button className="btn btn-secondary btn-block" onClick={handleAutoGetDbKey} disabled={isFetchingDbKey}>
+                      {isFetchingDbKey ? '正在获取...' : '自动获取密钥'}
+                    </button>
+                  )}
+                </div>
+
+                {dbKeyStatus && <div className="status-message">{dbKeyStatus}</div>}
+                <div className="field-hint">点击自动获取后微信将重启，请留意弹窗提示</div>
+              </div>
+            )}
+
+            {currentStep.id === 'image' && (
+              <div className="form-group">
+                <div className="grid-2">
+                  <div>
+                    <label className="field-label">图片 XOR 密钥</label>
+                    <input
+                      type="text"
+                      className="field-input"
+                      placeholder="0x..."
+                      value={imageXorKey}
+                      onChange={(e) => setImageXorKey(e.target.value)}
+                    />
+                  </div>
+                  <div>
+                    <label className="field-label">图片 AES 密钥</label>
+                    <input
+                      type="text"
+                      className="field-input"
+                      placeholder="16位密钥"
+                      value={imageAesKey}
+                      onChange={(e) => setImageAesKey(e.target.value)}
+                    />
+                  </div>
+                </div>
+
+                <button className="btn btn-secondary btn-block mt-4" onClick={handleAutoGetImageKey} disabled={isFetchingImageKey}>
+                  {isFetchingImageKey ? '扫描中...' : '自动获取图片密钥'}
                 </button>
-              )}
 
-              {dbKeyStatus && <div className="field-hint status-text">{dbKeyStatus}</div>}
-              <div className="field-hint">获取密钥会自动识别最近登录的账号</div>
-              <div className="field-hint">点击自动获取后微信将重新启动，当页面提示<span style={{color: 'red'}}>hook安装成功，现在登录微信</span>后再点击登录</div>
-            </div>
-          )}
-
-          {currentStep.id === 'image' && (
-            <div className="setup-body">
-              <label className="field-label">图片 XOR 密钥</label>
-              <input
-                type="text"
-                className="field-input"
-                placeholder="例如：0xA4"
-                value={imageXorKey}
-                onChange={(e) => setImageXorKey(e.target.value)}
-              />
-              <label className="field-label">图片 AES 密钥</label>
-              <input
-                type="text"
-                className="field-input"
-                placeholder="16 位密钥"
-                value={imageAesKey}
-                onChange={(e) => setImageAesKey(e.target.value)}
-              />
-              <button className="btn btn-secondary btn-inline" onClick={handleAutoGetImageKey} disabled={isFetchingImageKey}>
-                {isFetchingImageKey ? '获取中...' : '自动获取图片密钥'}
-              </button>
-              {imageKeyStatus && <div className="field-hint status-text">{imageKeyStatus}</div>}
-              <div className="field-hint">请在电脑微信中打开查看几个图片后再点击获取秘钥，如获取失败请重复以上操作</div>
-              {isFetchingImageKey && <div className="field-hint status-text">正在扫描内存，请稍候...</div>}
-            </div>
-          )}
+                {imageKeyStatus && <div className="status-message">{imageKeyStatus}</div>}
+                <div className="field-hint">请在微信中打开几张图片后再点击获取</div>
+              </div>
+            )}
+          </div>
 
           {error && <div className="error-message">{error}</div>}
 
-          <div className="setup-actions">
-            <button className="btn btn-tertiary" onClick={handleBack} disabled={stepIndex === 0}>
+          {currentStep.id === 'intro' && (
+            <div className="intro-footer">
+              <p>接下来的几个步骤将引导您连接本地微信数据库。</p>
+              <p>WeFlow 需要访问您的本地数据文件以提供分析与导出功能。</p>
+            </div>
+          )}
+
+          <div className="content-actions">
+            <button className="btn btn-ghost" onClick={handleBack} disabled={stepIndex === 0}>
               <ArrowLeft size={16} /> 上一步
             </button>
+
             {stepIndex < steps.length - 1 ? (
               <button className="btn btn-primary" onClick={handleNext} disabled={!canGoNext()}>
                 下一步 <ArrowRight size={16} />
               </button>
             ) : (
               <button className="btn btn-primary" onClick={handleConnect} disabled={isConnecting || !canGoNext()}>
-                {isConnecting ? '连接中...' : '测试并完成'}
+                {isConnecting ? '连接中...' : '完成配置'} <ArrowRight size={16} />
               </button>
             )}
           </div>