From 8f7b6ec773b60e5957c16bc2e0f5fbca595da7ff Mon Sep 17 00:00:00 2001
From: bdim404 <i@bdim.moe>
Date: Mon, 26 Jan 2026 17:11:03 +0800
Subject: [PATCH] Add IconLabel component and integrate it into forms for
 improved accessibility and UI consistency

---
 .../src/components/IconLabel.tsx              |  26 ++
 .../src/components/PresetSelector.tsx         |  10 +-
 .../src/components/tts/CustomVoiceForm.tsx    | 256 +++++++++++++-----
 .../src/components/tts/VoiceCloneForm.tsx     | 122 ++++++---
 .../src/components/tts/VoiceDesignForm.tsx    | 252 ++++++++++++-----
 qwen3-tts-frontend/src/pages/Home.tsx         |  18 +-
 6 files changed, 506 insertions(+), 178 deletions(-)
 create mode 100644 qwen3-tts-frontend/src/components/IconLabel.tsx

diff --git a/qwen3-tts-frontend/src/components/IconLabel.tsx b/qwen3-tts-frontend/src/components/IconLabel.tsx
new file mode 100644
index 0000000..1702c1a
--- /dev/null
+++ b/qwen3-tts-frontend/src/components/IconLabel.tsx
@@ -0,0 +1,26 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import type { ElementType } from 'react'
+
+interface IconLabelProps {
+  icon: ElementType
+  tooltip: string
+  required?: boolean
+}
+
+export function IconLabel({ icon: Icon, tooltip, required = false }: IconLabelProps) {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className="flex items-center gap-1 cursor-help">
+            <Icon className="h-4 w-4 text-muted-foreground" />
+            {required && <span className="text-destructive">*</span>}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{tooltip}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
diff --git a/qwen3-tts-frontend/src/components/PresetSelector.tsx b/qwen3-tts-frontend/src/components/PresetSelector.tsx
index 5ab21d8..418eb43 100644
--- a/qwen3-tts-frontend/src/components/PresetSelector.tsx
+++ b/qwen3-tts-frontend/src/components/PresetSelector.tsx
@@ -21,7 +21,7 @@ const PresetSelectorInner = <T extends Preset>({ presets, onSelect }: PresetSele
         variant="outline"
         size="sm"
         onClick={() => onSelect(preset)}
-        className="text-xs md:text-sm px-2 h-6 md:h-7"
+        className="text-xs md:text-sm px-2 py-0.5 h-5"
       >
         {preset.label}
       </Button>
@@ -34,19 +34,19 @@ const PresetSelectorInner = <T extends Preset>({ presets, onSelect }: PresetSele
   }
 
   return (
-    <div className="flex items-center gap-2 mt-1">
+    <div className="flex items-center gap-1.5 mt-1">
       <div className="flex flex-wrap gap-1 flex-1">
         {presetButtons}
       </div>
       <Button
         type="button"
         variant="ghost"
-        size="sm"
+        size="icon"
         onClick={handleRandomSelect}
-        className="h-6 md:h-7 px-2 flex-shrink-0"
+        className="h-6 w-6 flex-shrink-0"
         title="随机选择"
       >
-        <Shuffle className="h-3.5 w-3.5" />
+        <Shuffle className="h-3 w-3" />
       </Button>
     </div>
   )
diff --git a/qwen3-tts-frontend/src/components/tts/CustomVoiceForm.tsx b/qwen3-tts-frontend/src/components/tts/CustomVoiceForm.tsx
index f756fa5..2c2204b 100644
--- a/qwen3-tts-frontend/src/components/tts/CustomVoiceForm.tsx
+++ b/qwen3-tts-frontend/src/components/tts/CustomVoiceForm.tsx
@@ -6,10 +6,12 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from '@/components/ui/dialog'
 import { Label } from '@/components/ui/label'
-import { ChevronDown } from 'lucide-react'
+import { Globe2, User, Type, Sparkles, Play, Settings } from 'lucide-react'
 import { toast } from 'sonner'
+import { IconLabel } from '@/components/IconLabel'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { ttsApi, jobApi } from '@/lib/api'
 import { useJobPolling } from '@/hooks/useJobPolling'
 import { LoadingState } from '@/components/LoadingState'
@@ -42,6 +44,13 @@ const CustomVoiceForm = forwardRef<CustomVoiceFormHandle>((_props, ref) => {
   const [speakers, setSpeakers] = useState<Speaker[]>([])
   const [isLoading, setIsLoading] = useState(false)
   const [advancedOpen, setAdvancedOpen] = useState(false)
+  const [tempAdvancedParams, setTempAdvancedParams] = useState({
+    max_new_tokens: 2048,
+    temperature: 0.3,
+    top_k: 20,
+    top_p: 0.7,
+    repetition_penalty: 1.05
+  })
 
   const { currentJob, isPolling, isCompleted, startPolling, elapsedTime } = useJobPolling()
 
@@ -116,9 +125,9 @@ const CustomVoiceForm = forwardRef<CustomVoiceFormHandle>((_props, ref) => {
   }, [currentJob?.id, currentJob?.audio_url])
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="space-y-3">
-      <div className="space-y-1">
-        <Label htmlFor="language">语言</Label>
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-2">
+      <div className="space-y-0.5">
+        <IconLabel icon={Globe2} tooltip="语言" required />
         <Select
           value={watch('language')}
           onValueChange={(value: string) => setValue('language', value)}
@@ -139,8 +148,8 @@ const CustomVoiceForm = forwardRef<CustomVoiceFormHandle>((_props, ref) => {
         )}
       </div>
 
-      <div className="space-y-1">
-        <Label htmlFor="speaker">发音人</Label>
+      <div className="space-y-0.5">
+        <IconLabel icon={User} tooltip="发音人" required />
         <Select
           value={watch('speaker')}
           onValueChange={(value: string) => setValue('speaker', value)}
@@ -161,8 +170,8 @@ const CustomVoiceForm = forwardRef<CustomVoiceFormHandle>((_props, ref) => {
         )}
       </div>
 
-      <div className="space-y-1">
-        <Label htmlFor="text">合成文本</Label>
+      <div className="space-y-0.5">
+        <IconLabel icon={Type} tooltip="合成文本" required />
         <Textarea
           {...register('text')}
           placeholder="输入要合成的文本..."
@@ -173,8 +182,8 @@ const CustomVoiceForm = forwardRef<CustomVoiceFormHandle>((_props, ref) => {
         )}
       </div>
 
-      <div className="space-y-1">
-        <Label htmlFor="instruct">情绪指导（可选）</Label>
+      <div className="space-y-0.5">
+        <IconLabel icon={Sparkles} tooltip="情绪指导（可选）" />
         <Textarea
           {...register('instruct')}
           placeholder="例如：温柔体贴，语速平缓，充满关怀"
@@ -194,68 +203,175 @@ const CustomVoiceForm = forwardRef<CustomVoiceFormHandle>((_props, ref) => {
         )}
       </div>
 
-      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
-        <CollapsibleTrigger asChild>
-          <Button type="button" variant="ghost" className="w-full py-1.5">
+      <Dialog open={advancedOpen} onOpenChange={(open) => {
+        if (open) {
+          setTempAdvancedParams({
+            max_new_tokens: watch('max_new_tokens'),
+            temperature: watch('temperature'),
+            top_k: watch('top_k'),
+            top_p: watch('top_p'),
+            repetition_penalty: watch('repetition_penalty')
+          })
+        }
+        setAdvancedOpen(open)
+      }}>
+        <DialogTrigger asChild>
+          <Button type="button" variant="outline" className="w-full">
+            <Settings className="mr-2 h-4 w-4" />
             高级选项
-            <ChevronDown className="ml-2 h-4 w-4" />
           </Button>
-        </CollapsibleTrigger>
-        <CollapsibleContent className="space-y-2 pt-2">
-          <ParamInput
-            name="max_new_tokens"
-            label={ADVANCED_PARAMS_INFO.max_new_tokens.label}
-            description={ADVANCED_PARAMS_INFO.max_new_tokens.description}
-            tooltip={ADVANCED_PARAMS_INFO.max_new_tokens.tooltip}
-            register={register}
-            min={1}
-            max={10000}
-          />
-          <ParamInput
-            name="temperature"
-            label={ADVANCED_PARAMS_INFO.temperature.label}
-            description={ADVANCED_PARAMS_INFO.temperature.description}
-            tooltip={ADVANCED_PARAMS_INFO.temperature.tooltip}
-            register={register}
-            step={0.1}
-            min={0}
-            max={2}
-          />
-          <ParamInput
-            name="top_k"
-            label={ADVANCED_PARAMS_INFO.top_k.label}
-            description={ADVANCED_PARAMS_INFO.top_k.description}
-            tooltip={ADVANCED_PARAMS_INFO.top_k.tooltip}
-            register={register}
-            min={1}
-            max={100}
-          />
-          <ParamInput
-            name="top_p"
-            label={ADVANCED_PARAMS_INFO.top_p.label}
-            description={ADVANCED_PARAMS_INFO.top_p.description}
-            tooltip={ADVANCED_PARAMS_INFO.top_p.tooltip}
-            register={register}
-            step={0.1}
-            min={0}
-            max={1}
-          />
-          <ParamInput
-            name="repetition_penalty"
-            label={ADVANCED_PARAMS_INFO.repetition_penalty.label}
-            description={ADVANCED_PARAMS_INFO.repetition_penalty.description}
-            tooltip={ADVANCED_PARAMS_INFO.repetition_penalty.tooltip}
-            register={register}
-            step={0.01}
-            min={0}
-            max={2}
-          />
-        </CollapsibleContent>
-      </Collapsible>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>高级参数设置</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="dialog-max_new_tokens">
+                {ADVANCED_PARAMS_INFO.max_new_tokens.label}
+              </Label>
+              <Input
+                id="dialog-max_new_tokens"
+                type="number"
+                min={1}
+                max={10000}
+                value={tempAdvancedParams.max_new_tokens}
+                onChange={(e) => setTempAdvancedParams({
+                  ...tempAdvancedParams,
+                  max_new_tokens: parseInt(e.target.value) || 2048
+                })}
+              />
+              <p className="text-sm text-muted-foreground">
+                {ADVANCED_PARAMS_INFO.max_new_tokens.description}
+              </p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="dialog-temperature">
+                {ADVANCED_PARAMS_INFO.temperature.label}
+              </Label>
+              <Input
+                id="dialog-temperature"
+                type="number"
+                min={0}
+                max={2}
+                step={0.1}
+                value={tempAdvancedParams.temperature}
+                onChange={(e) => setTempAdvancedParams({
+                  ...tempAdvancedParams,
+                  temperature: parseFloat(e.target.value) || 0.3
+                })}
+              />
+              <p className="text-sm text-muted-foreground">
+                {ADVANCED_PARAMS_INFO.temperature.description}
+              </p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="dialog-top_k">
+                {ADVANCED_PARAMS_INFO.top_k.label}
+              </Label>
+              <Input
+                id="dialog-top_k"
+                type="number"
+                min={1}
+                max={100}
+                value={tempAdvancedParams.top_k}
+                onChange={(e) => setTempAdvancedParams({
+                  ...tempAdvancedParams,
+                  top_k: parseInt(e.target.value) || 20
+                })}
+              />
+              <p className="text-sm text-muted-foreground">
+                {ADVANCED_PARAMS_INFO.top_k.description}
+              </p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="dialog-top_p">
+                {ADVANCED_PARAMS_INFO.top_p.label}
+              </Label>
+              <Input
+                id="dialog-top_p"
+                type="number"
+                min={0}
+                max={1}
+                step={0.1}
+                value={tempAdvancedParams.top_p}
+                onChange={(e) => setTempAdvancedParams({
+                  ...tempAdvancedParams,
+                  top_p: parseFloat(e.target.value) || 0.7
+                })}
+              />
+              <p className="text-sm text-muted-foreground">
+                {ADVANCED_PARAMS_INFO.top_p.description}
+              </p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="dialog-repetition_penalty">
+                {ADVANCED_PARAMS_INFO.repetition_penalty.label}
+              </Label>
+              <Input
+                id="dialog-repetition_penalty"
+                type="number"
+                min={0}
+                max={2}
+                step={0.01}
+                value={tempAdvancedParams.repetition_penalty}
+                onChange={(e) => setTempAdvancedParams({
+                  ...tempAdvancedParams,
+                  repetition_penalty: parseFloat(e.target.value) || 1.05
+                })}
+              />
+              <p className="text-sm text-muted-foreground">
+                {ADVANCED_PARAMS_INFO.repetition_penalty.description}
+              </p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                setTempAdvancedParams({
+                  max_new_tokens: watch('max_new_tokens'),
+                  temperature: watch('temperature'),
+                  top_k: watch('top_k'),
+                  top_p: watch('top_p'),
+                  repetition_penalty: watch('repetition_penalty')
+                })
+                setAdvancedOpen(false)
+              }}
+            >
+              取消
+            </Button>
+            <Button
+              type="button"
+              onClick={() => {
+                setValue('max_new_tokens', tempAdvancedParams.max_new_tokens)
+                setValue('temperature', tempAdvancedParams.temperature)
+                setValue('top_k', tempAdvancedParams.top_k)
+                setValue('top_p', tempAdvancedParams.top_p)
+                setValue('repetition_penalty', tempAdvancedParams.repetition_penalty)
+                setAdvancedOpen(false)
+              }}
+            >
+              确定
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
-      <Button type="submit" className="w-full" disabled={isLoading || isPolling}>
-        {isLoading ? '创建中...' : '生成语音'}
-      </Button>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button type="submit" className="w-full" disabled={isLoading || isPolling}>
+              <Play className="mr-2 h-4 w-4" />
+              {isLoading ? '创建中...' : '生成语音'}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>生成语音</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
 
       {isPolling && <LoadingState elapsedTime={elapsedTime} />}
 
diff --git a/qwen3-tts-frontend/src/components/tts/VoiceCloneForm.tsx b/qwen3-tts-frontend/src/components/tts/VoiceCloneForm.tsx
index 63bce2d..d783c58 100644
--- a/qwen3-tts-frontend/src/components/tts/VoiceCloneForm.tsx
+++ b/qwen3-tts-frontend/src/components/tts/VoiceCloneForm.tsx
@@ -6,11 +6,13 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from '@/components/ui/dialog'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Label } from '@/components/ui/label'
-import { ChevronDown } from 'lucide-react'
+import { Settings, Globe2, Type, Play, FileText, Mic, Zap, Database } from 'lucide-react'
 import { toast } from 'sonner'
+import { IconLabel } from '@/components/IconLabel'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { ttsApi, jobApi } from '@/lib/api'
 import { useJobPolling } from '@/hooks/useJobPolling'
 import { LoadingState } from '@/components/LoadingState'
@@ -41,6 +43,9 @@ function VoiceCloneForm() {
   const [languages, setLanguages] = useState<Language[]>([])
   const [isLoading, setIsLoading] = useState(false)
   const [advancedOpen, setAdvancedOpen] = useState(false)
+  const [tempAdvancedParams, setTempAdvancedParams] = useState({
+    max_new_tokens: 2048
+  })
 
   const { currentJob, isPolling, isCompleted, startPolling, elapsedTime } = useJobPolling()
 
@@ -101,9 +106,9 @@ function VoiceCloneForm() {
   }, [currentJob?.id, currentJob?.audio_url])
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="space-y-3">
-      <div className="space-y-1">
-        <Label htmlFor="ref_text">参考文稿（可选）</Label>
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-2">
+      <div className="space-y-0.5">
+        <IconLabel icon={FileText} tooltip="参考文稿（可选）" />
         <Textarea
           {...register('ref_text')}
           placeholder="参考音频对应的文本..."
@@ -118,8 +123,8 @@ function VoiceCloneForm() {
         )}
       </div>
 
-      <div className="space-y-1">
-        <Label htmlFor="ref_audio">参考音频</Label>
+      <div className="space-y-0.5">
+        <IconLabel icon={Mic} tooltip="参考音频" required />
         <Controller
           name="ref_audio"
           control={control}
@@ -133,8 +138,8 @@ function VoiceCloneForm() {
         />
       </div>
 
-      <div className="space-y-1">
-        <Label htmlFor="language">语言（可选）</Label>
+      <div className="space-y-0.5">
+        <IconLabel icon={Globe2} tooltip="语言（可选）" />
         <Select
           value={watch('language')}
           onValueChange={(value: string) => setValue('language', value)}
@@ -152,8 +157,8 @@ function VoiceCloneForm() {
         </Select>
       </div>
 
-      <div className="space-y-1">
-        <Label htmlFor="text">合成文本</Label>
+      <div className="space-y-0.5">
+        <IconLabel icon={Type} tooltip="合成文本" required />
         <Textarea
           {...register('text')}
           placeholder="输入要合成的文本..."
@@ -170,6 +175,7 @@ function VoiceCloneForm() {
 
       <div className="flex items-center space-x-3">
         <div className="flex items-center space-x-2">
+          <Zap className="h-4 w-4 text-muted-foreground" />
           <Controller
             name="x_vector_only_mode"
             control={control}
@@ -187,6 +193,7 @@ function VoiceCloneForm() {
         </div>
 
         <div className="flex items-center space-x-2">
+          <Database className="h-4 w-4 text-muted-foreground" />
           <Controller
             name="use_cache"
             control={control}
@@ -204,29 +211,82 @@ function VoiceCloneForm() {
         </div>
       </div>
 
-      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
-        <CollapsibleTrigger asChild>
-          <Button type="button" variant="ghost" className="w-full py-1.5">
+      <Dialog open={advancedOpen} onOpenChange={(open) => {
+        if (open) {
+          setTempAdvancedParams({
+            max_new_tokens: watch('max_new_tokens')
+          })
+        }
+        setAdvancedOpen(open)
+      }}>
+        <DialogTrigger asChild>
+          <Button type="button" variant="outline" className="w-full">
+            <Settings className="mr-2 h-4 w-4" />
             高级选项
-            <ChevronDown className="ml-2 h-4 w-4" />
           </Button>
-        </CollapsibleTrigger>
-        <CollapsibleContent className="space-y-2 pt-2">
-          <ParamInput
-            name="max_new_tokens"
-            label={ADVANCED_PARAMS_INFO.max_new_tokens.label}
-            description={ADVANCED_PARAMS_INFO.max_new_tokens.description}
-            tooltip={ADVANCED_PARAMS_INFO.max_new_tokens.tooltip}
-            register={register}
-            min={1}
-            max={10000}
-          />
-        </CollapsibleContent>
-      </Collapsible>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>高级参数设置</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="dialog-max_new_tokens">
+                {ADVANCED_PARAMS_INFO.max_new_tokens.label}
+              </Label>
+              <Input
+                id="dialog-max_new_tokens"
+                type="number"
+                min={1}
+                max={10000}
+                value={tempAdvancedParams.max_new_tokens}
+                onChange={(e) => setTempAdvancedParams({
+                  ...tempAdvancedParams,
+                  max_new_tokens: parseInt(e.target.value) || 2048
+                })}
+              />
+              <p className="text-sm text-muted-foreground">
+                {ADVANCED_PARAMS_INFO.max_new_tokens.description}
+              </p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                setTempAdvancedParams({ max_new_tokens: watch('max_new_tokens') })
+                setAdvancedOpen(false)
+              }}
+            >
+              取消
+            </Button>
+            <Button
+              type="button"
+              onClick={() => {
+                setValue('max_new_tokens', tempAdvancedParams.max_new_tokens)
+                setAdvancedOpen(false)
+              }}
+            >
+              确定
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
-      <Button type="submit" className="w-full" disabled={isLoading || isPolling}>
-        {isLoading ? '创建中...' : '生成语音'}
-      </Button>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button type="submit" className="w-full" disabled={isLoading || isPolling}>
+              <Play className="mr-2 h-4 w-4" />
+              {isLoading ? '创建中...' : '生成语音'}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>生成语音</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
 
       {isPolling && <LoadingState elapsedTime={elapsedTime} />}
 
diff --git a/qwen3-tts-frontend/src/components/tts/VoiceDesignForm.tsx b/qwen3-tts-frontend/src/components/tts/VoiceDesignForm.tsx
index 304eada..e295833 100644
--- a/qwen3-tts-frontend/src/components/tts/VoiceDesignForm.tsx
+++ b/qwen3-tts-frontend/src/components/tts/VoiceDesignForm.tsx
@@ -6,10 +6,12 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from '@/components/ui/dialog'
 import { Label } from '@/components/ui/label'
-import { ChevronDown } from 'lucide-react'
+import { Settings, Globe2, Type, Play, Palette } from 'lucide-react'
 import { toast } from 'sonner'
+import { IconLabel } from '@/components/IconLabel'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { ttsApi, jobApi } from '@/lib/api'
 import { useJobPolling } from '@/hooks/useJobPolling'
 import { LoadingState } from '@/components/LoadingState'
@@ -40,6 +42,13 @@ const VoiceDesignForm = forwardRef<VoiceDesignFormHandle>((_props, ref) => {
   const [languages, setLanguages] = useState<Language[]>([])
   const [isLoading, setIsLoading] = useState(false)
   const [advancedOpen, setAdvancedOpen] = useState(false)
+  const [tempAdvancedParams, setTempAdvancedParams] = useState({
+    max_new_tokens: 2048,
+    temperature: 0.3,
+    top_k: 20,
+    top_p: 0.7,
+    repetition_penalty: 1.05
+  })
 
   const { currentJob, isPolling, isCompleted, startPolling, elapsedTime } = useJobPolling()
 
@@ -107,9 +116,9 @@ const VoiceDesignForm = forwardRef<VoiceDesignFormHandle>((_props, ref) => {
   }, [currentJob?.id, currentJob?.audio_url])
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="space-y-3">
-      <div className="space-y-1">
-        <Label htmlFor="language">语言</Label>
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-2">
+      <div className="space-y-0.5">
+        <IconLabel icon={Globe2} tooltip="语言" required />
         <Select
           value={watch('language')}
           onValueChange={(value: string) => setValue('language', value)}
@@ -130,8 +139,8 @@ const VoiceDesignForm = forwardRef<VoiceDesignFormHandle>((_props, ref) => {
         )}
       </div>
 
-      <div className="space-y-1">
-        <Label htmlFor="text">合成文本</Label>
+      <div className="space-y-0.5">
+        <IconLabel icon={Type} tooltip="合成文本" required />
         <Textarea
           {...register('text')}
           placeholder="输入要合成的文本..."
@@ -142,8 +151,8 @@ const VoiceDesignForm = forwardRef<VoiceDesignFormHandle>((_props, ref) => {
         )}
       </div>
 
-      <div className="space-y-1">
-        <Label htmlFor="instruct">音色描述</Label>
+      <div className="space-y-0.5">
+        <IconLabel icon={Palette} tooltip="音色描述" required />
         <Textarea
           {...register('instruct')}
           placeholder="例如：成熟男性,低沉磁性,充满权威感"
@@ -163,68 +172,175 @@ const VoiceDesignForm = forwardRef<VoiceDesignFormHandle>((_props, ref) => {
         )}
       </div>
 
-      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
-        <CollapsibleTrigger asChild>
-          <Button type="button" variant="ghost" className="w-full py-1.5">
+      <Dialog open={advancedOpen} onOpenChange={(open) => {
+        if (open) {
+          setTempAdvancedParams({
+            max_new_tokens: watch('max_new_tokens'),
+            temperature: watch('temperature'),
+            top_k: watch('top_k'),
+            top_p: watch('top_p'),
+            repetition_penalty: watch('repetition_penalty')
+          })
+        }
+        setAdvancedOpen(open)
+      }}>
+        <DialogTrigger asChild>
+          <Button type="button" variant="outline" className="w-full">
+            <Settings className="mr-2 h-4 w-4" />
             高级选项
-            <ChevronDown className="ml-2 h-4 w-4" />
           </Button>
-        </CollapsibleTrigger>
-        <CollapsibleContent className="space-y-2 pt-2">
-          <ParamInput
-            name="max_new_tokens"
-            label={ADVANCED_PARAMS_INFO.max_new_tokens.label}
-            description={ADVANCED_PARAMS_INFO.max_new_tokens.description}
-            tooltip={ADVANCED_PARAMS_INFO.max_new_tokens.tooltip}
-            register={register}
-            min={1}
-            max={10000}
-          />
-          <ParamInput
-            name="temperature"
-            label={ADVANCED_PARAMS_INFO.temperature.label}
-            description={ADVANCED_PARAMS_INFO.temperature.description}
-            tooltip={ADVANCED_PARAMS_INFO.temperature.tooltip}
-            register={register}
-            step={0.1}
-            min={0}
-            max={2}
-          />
-          <ParamInput
-            name="top_k"
-            label={ADVANCED_PARAMS_INFO.top_k.label}
-            description={ADVANCED_PARAMS_INFO.top_k.description}
-            tooltip={ADVANCED_PARAMS_INFO.top_k.tooltip}
-            register={register}
-            min={1}
-            max={100}
-          />
-          <ParamInput
-            name="top_p"
-            label={ADVANCED_PARAMS_INFO.top_p.label}
-            description={ADVANCED_PARAMS_INFO.top_p.description}
-            tooltip={ADVANCED_PARAMS_INFO.top_p.tooltip}
-            register={register}
-            step={0.1}
-            min={0}
-            max={1}
-          />
-          <ParamInput
-            name="repetition_penalty"
-            label={ADVANCED_PARAMS_INFO.repetition_penalty.label}
-            description={ADVANCED_PARAMS_INFO.repetition_penalty.description}
-            tooltip={ADVANCED_PARAMS_INFO.repetition_penalty.tooltip}
-            register={register}
-            step={0.01}
-            min={0}
-            max={2}
-          />
-        </CollapsibleContent>
-      </Collapsible>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>高级参数设置</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="dialog-max_new_tokens">
+                {ADVANCED_PARAMS_INFO.max_new_tokens.label}
+              </Label>
+              <Input
+                id="dialog-max_new_tokens"
+                type="number"
+                min={1}
+                max={10000}
+                value={tempAdvancedParams.max_new_tokens}
+                onChange={(e) => setTempAdvancedParams({
+                  ...tempAdvancedParams,
+                  max_new_tokens: parseInt(e.target.value) || 2048
+                })}
+              />
+              <p className="text-sm text-muted-foreground">
+                {ADVANCED_PARAMS_INFO.max_new_tokens.description}
+              </p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="dialog-temperature">
+                {ADVANCED_PARAMS_INFO.temperature.label}
+              </Label>
+              <Input
+                id="dialog-temperature"
+                type="number"
+                min={0}
+                max={2}
+                step={0.1}
+                value={tempAdvancedParams.temperature}
+                onChange={(e) => setTempAdvancedParams({
+                  ...tempAdvancedParams,
+                  temperature: parseFloat(e.target.value) || 0.3
+                })}
+              />
+              <p className="text-sm text-muted-foreground">
+                {ADVANCED_PARAMS_INFO.temperature.description}
+              </p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="dialog-top_k">
+                {ADVANCED_PARAMS_INFO.top_k.label}
+              </Label>
+              <Input
+                id="dialog-top_k"
+                type="number"
+                min={1}
+                max={100}
+                value={tempAdvancedParams.top_k}
+                onChange={(e) => setTempAdvancedParams({
+                  ...tempAdvancedParams,
+                  top_k: parseInt(e.target.value) || 20
+                })}
+              />
+              <p className="text-sm text-muted-foreground">
+                {ADVANCED_PARAMS_INFO.top_k.description}
+              </p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="dialog-top_p">
+                {ADVANCED_PARAMS_INFO.top_p.label}
+              </Label>
+              <Input
+                id="dialog-top_p"
+                type="number"
+                min={0}
+                max={1}
+                step={0.1}
+                value={tempAdvancedParams.top_p}
+                onChange={(e) => setTempAdvancedParams({
+                  ...tempAdvancedParams,
+                  top_p: parseFloat(e.target.value) || 0.7
+                })}
+              />
+              <p className="text-sm text-muted-foreground">
+                {ADVANCED_PARAMS_INFO.top_p.description}
+              </p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="dialog-repetition_penalty">
+                {ADVANCED_PARAMS_INFO.repetition_penalty.label}
+              </Label>
+              <Input
+                id="dialog-repetition_penalty"
+                type="number"
+                min={0}
+                max={2}
+                step={0.01}
+                value={tempAdvancedParams.repetition_penalty}
+                onChange={(e) => setTempAdvancedParams({
+                  ...tempAdvancedParams,
+                  repetition_penalty: parseFloat(e.target.value) || 1.05
+                })}
+              />
+              <p className="text-sm text-muted-foreground">
+                {ADVANCED_PARAMS_INFO.repetition_penalty.description}
+              </p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                setTempAdvancedParams({
+                  max_new_tokens: watch('max_new_tokens'),
+                  temperature: watch('temperature'),
+                  top_k: watch('top_k'),
+                  top_p: watch('top_p'),
+                  repetition_penalty: watch('repetition_penalty')
+                })
+                setAdvancedOpen(false)
+              }}
+            >
+              取消
+            </Button>
+            <Button
+              type="button"
+              onClick={() => {
+                setValue('max_new_tokens', tempAdvancedParams.max_new_tokens)
+                setValue('temperature', tempAdvancedParams.temperature)
+                setValue('top_k', tempAdvancedParams.top_k)
+                setValue('top_p', tempAdvancedParams.top_p)
+                setValue('repetition_penalty', tempAdvancedParams.repetition_penalty)
+                setAdvancedOpen(false)
+              }}
+            >
+              确定
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
-      <Button type="submit" className="w-full" disabled={isLoading || isPolling}>
-        {isLoading ? '创建中...' : '生成语音'}
-      </Button>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button type="submit" className="w-full" disabled={isLoading || isPolling}>
+              <Play className="mr-2 h-4 w-4" />
+              {isLoading ? '创建中...' : '生成语音'}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>生成语音</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
 
       {isPolling && <LoadingState elapsedTime={elapsedTime} />}
 
diff --git a/qwen3-tts-frontend/src/pages/Home.tsx b/qwen3-tts-frontend/src/pages/Home.tsx
index f5d7a54..7b743ff 100644
--- a/qwen3-tts-frontend/src/pages/Home.tsx
+++ b/qwen3-tts-frontend/src/pages/Home.tsx
@@ -2,6 +2,7 @@ import { useState, useRef, lazy, Suspense } from 'react'
 import { Navbar } from '@/components/Navbar'
 import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { User, Palette, Copy } from 'lucide-react'
 import type { CustomVoiceFormHandle } from '@/components/tts/CustomVoiceForm'
 import type { VoiceDesignFormHandle } from '@/components/tts/VoiceDesignForm'
 import { HistorySidebar } from '@/components/HistorySidebar'
@@ -63,10 +64,19 @@ function Home() {
           <Card>
             <CardHeader>
               <Tabs value={currentTab} onValueChange={setCurrentTab}>
-                <TabsList className="grid w-full grid-cols-3">
-                  <TabsTrigger value="custom-voice">自定义音色</TabsTrigger>
-                  <TabsTrigger value="voice-design">音色设计</TabsTrigger>
-                  <TabsTrigger value="voice-clone">声音克隆</TabsTrigger>
+                <TabsList className="grid w-full grid-cols-3 h-9">
+                  <TabsTrigger value="custom-voice">
+                    <User className="h-4 w-4 md:mr-2" />
+                    <span className="hidden md:inline">自定义</span>
+                  </TabsTrigger>
+                  <TabsTrigger value="voice-design">
+                    <Palette className="h-4 w-4 md:mr-2" />
+                    <span className="hidden md:inline">设计</span>
+                  </TabsTrigger>
+                  <TabsTrigger value="voice-clone">
+                    <Copy className="h-4 w-4 md:mr-2" />
+                    <span className="hidden md:inline">克隆</span>
+                  </TabsTrigger>
                 </TabsList>
               </Tabs>
             </CardHeader>