From 2699f9db29fdebb0a71281a9a00e7900bf8c1500 Mon Sep 17 00:00:00 2001
From: Xin Wang <your-email@example.com>
Date: Sun, 7 Jun 2026 11:41:37 +0800
Subject: [PATCH] Refactor AssistantPage to enhance configuration options for
 LLM, ASR, and TTS

Updated the AssistantPage layout to include dedicated SectionCard components for LLM, ASR, and TTS configurations, improving user experience by providing clear selection options for each component. Added new icons for better visual representation and streamlined the overall structure of the configuration section.
---
 src/components/pages/AssistantPage.tsx | 30 +++++++++++++++++++-------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/AssistantPage.tsx b/src/components/pages/AssistantPage.tsx
index 65b7475..08b7b1b 100644
--- a/src/components/pages/AssistantPage.tsx
+++ b/src/components/pages/AssistantPage.tsx
@@ -19,6 +19,8 @@ import {
   ChevronRight,
   Bug,
   Save,
+  Mic,
+  Volume2,
 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
@@ -796,34 +798,46 @@ export function AssistantPage() {
           )}
 
           {form.runtimeMode === "pipeline" && (
-            <SectionCard
-              icon={<Brain size={18} />}
-              title="Pipeline 配置"
-              description="选择 ASR、LLM 和 TTS 组成级联语音管线"
-            >
-              <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+            <>
+              <SectionCard
+                icon={<Brain size={18} />}
+                title="LLM 配置"
+                description="选择驱动对话理解与生成的大语言模型"
+              >
                 <SelectField
                   label="大语言模型"
                   value={form.model}
                   onChange={(value) => updateForm("model", value)}
                   options={["DeepSeek-V3", "Qwen-Max", "Kimi-K2", "Doubao-Pro", "GPT-4o"]}
                 />
+              </SectionCard>
 
+              <SectionCard
+                icon={<Mic size={18} />}
+                title="ASR 配置"
+                description="选择将用户语音转为文本的识别引擎"
+              >
                 <SelectField
                   label="语音识别"
                   value={form.asr}
                   onChange={(value) => updateForm("asr", value)}
                   options={["SenseVoice", "Paraformer", "Whisper", "FunASR"]}
                 />
+              </SectionCard>
 
+              <SectionCard
+                icon={<Volume2 size={18} />}
+                title="TTS 配置"
+                description="选择助手播报回复时使用的合成音色"
+              >
                 <SelectField
                   label="播报声音"
                   value={form.voice}
                   onChange={(value) => updateForm("voice", value)}
                   options={["晓宁", "晓美", "晓宇", "晓晨"]}
                 />
-              </div>
-            </SectionCard>
+              </SectionCard>
+            </>
           )}
 
           <SectionCard