feat: 优化

frontend/app/web-gold/src/components/VoiceSelector.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="voice-selector">
+  <div class="w-full">
     <!-- 空状态 -->
-    <div v-if="userVoiceCards.length === 0" class="empty-voices">
-      <div class="empty-icon">
+    <div v-if="userVoiceCards.length === 0" class="py-10 px-6 bg-muted border border-dashed border-border rounded-lg text-center">
+      <div class="mb-3">
         <Icon icon="lucide:mic-off" class="size-10 text-muted-foreground/40" />
       </div>
       <p class="text-muted-foreground mb-4">还没有配音</p>
@@ -11,68 +11,71 @@
       </Button>
     </div>
 
-    <div v-else class="voice-selector-wrapper">
+    <div v-else class="flex flex-col gap-4">
       <!-- 标题栏 -->
-      <div class="selector-header">
-        <div class="header-left">
-          <span class="header-title">选择音色</span>
-          <span class="voice-count">{{ userVoiceCards.length }} 个配音</span>
+      <div class="h-12 flex items-center justify-between pb-3 border-b border-border">
+        <div class="flex items-center gap-2.5">
+          <span class="text-base font-semibold text-foreground">选择音色</span>
+          <span class="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded">{{ userVoiceCards.length }} 个配音</span>
         </div>
         <Button
-          v-if="selectedVoiceId"
-          class="synthesize-btn"
-          :disabled="isPlayerInitializing"
-          :loading="previewLoadingVoiceId === selectedVoiceId"
+          v-show="selectedVoiceId"
+          class="h-9 shadow-sm transition-all hover:-translate-y-px hover:shadow-md"
+          :disabled="isPlayerInitializing || isSynthesizing"
           @click="handleSynthesize"
         >
-          <Icon icon="lucide:volume-2" class="size-4" />
-          合成试听
+          <Icon v-if="isSynthesizing" icon="lucide:loader-2" class="size-4 animate-spin" />
+          <Icon v-else icon="lucide:volume-2" class="size-4" />
+          {{ isSynthesizing ? '合成中...' : '合成试听' }}
         </Button>
       </div>
 
-      <!-- 卡片网格 -->
-      <div class="voice-grid" :class="{ 'has-many': userVoiceCards.length > 4 }">
+      <!-- 卡片列表 -->
+      <div
+        class="flex flex-col gap-1.5"
+        :class="userVoiceCards.length > 6 && 'max-h-[260px] overflow-y-auto pr-1 voice-grid-scroll'"
+      >
         <button
           v-for="voice in userVoiceCards"
           :key="voice.id"
-          class="voice-card"
-          :class="{ 'selected': selectedVoiceId === voice.id }"
+          class="flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-all text-left border border-transparent hover:bg-muted"
+          :class="selectedVoiceId === voice.id ? 'bg-primary/10 border-primary/30' : ''"
           @click="handleVoiceSelect(voice)"
         >
-          <!-- 头像区域 -->
-          <div class="card-avatar">
-            <div class="avatar-ring"></div>
-            <div class="avatar-icon">
-              <Icon icon="lucide:audio-waveform" class="size-6" />
-            </div>
-            <!-- 选中指示器 -->
-            <div v-if="selectedVoiceId === voice.id" class="selected-indicator">
-              <Icon icon="lucide:check" class="size-3" />
-            </div>
+          <!-- 波形图标 -->
+          <div class="shrink-0 w-8 h-8 rounded-full flex items-center justify-center"
+            :class="selectedVoiceId === voice.id ? 'bg-primary text-primary-foreground' : 'bg-primary/15 text-primary'"
+          >
+            <Icon icon="lucide:audio-waveform" class="size-4" />
           </div>
 
-          <!-- 信息区域 -->
-          <div class="card-info">
-            <div class="voice-name">{{ voice.name }}</div>
-            <div class="voice-desc">{{ voice.description || '我的配音' }}</div>
+          <!-- 名称 -->
+          <div class="flex-1 min-w-0">
+            <div class="text-sm font-medium truncate"
+              :class="selectedVoiceId === voice.id ? 'text-primary' : 'text-foreground'"
+            >{{ voice.name }}</div>
+            <div v-if="voice.description" class="text-xs text-muted-foreground truncate">{{ voice.description }}</div>
           </div>
+
+          <!-- 选中标记 -->
+          <Icon v-if="selectedVoiceId === voice.id" icon="lucide:check-circle-2" class="size-4 text-primary shrink-0" />
         </button>
       </div>
 
       <!-- 播放器区域 -->
       <transition name="slide-fade">
-        <div v-if="audioUrl" class="player-section">
-          <div class="player-header">
-            <div class="player-info">
-              <div class="player-icon">
+        <div v-if="audioUrl" class="bg-muted rounded-lg p-3.5 border border-border">
+          <div class="flex items-center justify-between mb-3">
+            <div class="flex items-center gap-2.5">
+              <div class="text-primary">
                 <Icon icon="lucide:play-circle" class="size-8" />
               </div>
-              <div class="player-meta">
-                <div class="player-title">{{ currentVoiceName }}</div>
-                <div class="player-label">合成预览</div>
+              <div>
+                <div class="text-base font-semibold text-foreground">{{ currentVoiceName }}</div>
+                <div class="text-xs text-muted-foreground">合成预览</div>
               </div>
             </div>
-            <Button variant="ghost" size="sm" @click="downloadAudio" class="download-btn">
+            <Button variant="ghost" size="sm" @click="downloadAudio" class="text-muted-foreground text-xs hover:text-primary hover:bg-primary/[0.08]">
               <Icon icon="lucide:download" class="size-4" />
               下载
             </Button>
@@ -114,6 +117,7 @@ const playerContainer = ref(null)
 const audioUrl = ref('')
 const currentVoiceName = ref('')
 const isPlayerInitializing = ref(false)
+const isSynthesizing = ref(false)
 
 // 默认封面图片（音频波形图标）
 const defaultCover = `data:image/svg+xml;base64,${btoa(`
@@ -184,12 +188,13 @@ const handleVoiceSelect = (voice) => {
 }
 
 const handleSynthesize = () => {
-  if (!selectedVoiceId.value || isPlayerInitializing.value) return
+  if (!selectedVoiceId.value || isPlayerInitializing.value || isSynthesizing.value) return
 
   const voice = userVoiceCards.value.find((v) => v.id === selectedVoiceId.value)
   if (!voice) return
 
   currentVoiceName.value = voice.name
+  isSynthesizing.value = true
   handlePlayVoiceSample(voice)
 }
 
@@ -215,12 +220,13 @@ const handlePlayVoiceSample = (voice) => {
   playVoiceSample(
     voice,
     (data) => {
+      isSynthesizing.value = false
       const url = data.audioUrl || data.objectUrl
       if (!url) return
       initPlayer(url)
     },
     () => {
-      /* 错误已在 useTTS 中处理 */
+      isSynthesizing.value = false
     },
     { autoPlay: false },
   )
@@ -331,274 +337,22 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="less">
-.voice-selector {
-  width: 100%;
-}
-
-/* 空状态 */
-.empty-voices {
-  padding: var(--space-10) var(--space-6);
-  background: var(--muted);
-  border: 1px dashed var(--border);
-  border-radius: var(--radius-lg);
-  text-align: center;
-
-  .empty-icon {
-    margin-bottom: var(--space-3);
-  }
-}
-
-/* 主容器 */
-.voice-selector-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-}
-
-/* 标题栏 */
-.selector-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: var(--space-3);
-  border-bottom: 1px solid var(--border);
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2-5);
-}
-
-.header-title {
-  font-size: var(--font-size-md);
-  font-weight: 600;
-  color: var(--foreground);
-}
-
-.voice-count {
-  font-size: var(--font-size-xs);
-  color: var(--muted-foreground);
-  background: var(--muted);
-  padding: var(--space-0-5) var(--space-2);
-  border-radius: var(--radius);
-}
-
-.synthesize-btn {
-  height: 36px;
-  padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius);
-  border: none;
-  background: var(--primary);
-  color: var(--primary-foreground);
-  font-weight: 500;
-  font-size: var(--font-size-sm);
-  box-shadow: var(--shadow-sm);
-  transition: all var(--duration-fast);
-
-  &:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-md);
-  }
-
-  &:disabled {
-    background: var(--muted-foreground);
-    box-shadow: none;
-    cursor: not-allowed;
-    transform: none;
-  }
-}
-
-/* 卡片网格 */
-.voice-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 16px;
-
-  &.has-many {
-    max-height: 280px;
-    overflow-y: auto;
-    padding-right: 4px;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-    &::-webkit-scrollbar-track {
-      background: #f1f5f9;
-      border-radius: 2px;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: #cbd5e1;
-      border-radius: 2px;
-    }
-  }
-}
-
-/* 音色卡片 */
-.voice-card {
-  position: relative;
-  background: var(--card);
-  border: 2px solid var(--muted);
-  border-radius: var(--radius-lg);
-  padding: var(--space-4) var(--space-3);
-  cursor: pointer;
-  transition: all var(--duration-base);
-  overflow: hidden;
-  text-align: left;
-
-  &:hover {
-    border-color: var(--border);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg);
-  }
-
-  &.selected {
-    border-color: var(--primary);
-    background: oklch(from var(--primary) l c h / 0.1);
-    box-shadow: var(--shadow-md);
-  }
-}
-
-/* 头像区域 */
-.card-avatar {
-  position: relative;
-  width: 48px;
-  height: 48px;
-  margin: 0 auto var(--space-2-5);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .avatar-ring {
-    background: oklch(from var(--primary) l c h / 0.2);
-  }
-  .avatar-icon {
-    color: var(--primary);
-  }
-}
-
-.avatar-ring {
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-}
-
-.avatar-icon {
-  position: relative;
-  z-index: 1;
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.selected-indicator {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  width: 20px;
-  height: 20px;
-  background: var(--primary);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--primary-foreground);
-  font-size: var(--font-size-xs);
-  box-shadow: var(--shadow-sm);
-  animation: scaleIn var(--duration-fast);
-}
-
-@keyframes scaleIn {
-  from {
-    transform: scale(0);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
-/* 信息区域 */
-.card-info {
-  text-align: center;
-}
-
-.voice-name {
-  font-size: var(--font-size-sm);
-  font-weight: 600;
-  color: var(--foreground);
-  margin-bottom: var(--space-1);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.voice-desc {
-  font-size: var(--font-size-xs);
-  color: var(--muted-foreground);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* 播放器区域 */
-.player-section {
-  background: var(--muted);
-  border-radius: var(--radius-lg);
-  padding: var(--space-3-5);
-  border: 1px solid var(--border);
-}
-
-.player-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--space-3);
-}
-
-.player-info {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2-5);
-}
-
-.player-icon {
-  width: 36px;
-  height: 36px;
-  color: var(--primary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.player-meta {
-  .player-title {
-    font-size: var(--font-size-base);
-    font-weight: 600;
-    color: var(--foreground);
-  }
-  .player-label {
-    font-size: var(--font-size-xs);
-    color: var(--muted-foreground);
-  }
-}
-
-.download-btn {
-  color: var(--muted-foreground);
-  font-size: var(--font-size-xs);
-  padding: var(--space-2) var(--space-3);
-  height: auto;
-  border-radius: var(--radius-sm);
-  transition: all var(--duration-fast);
-
-  &:hover {
-    color: var(--primary);
-    background: oklch(from var(--primary) l c h / 0.08);
+/* 自定义滚动条 */
+.voice-grid-scroll {
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 2px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 2px;
   }
 }
 
+/* APlayer 深层样式覆盖 */
 .aplayer-container {
   :deep(.aplayer) {
     border-radius: var(--radius);
@@ -612,19 +366,21 @@ onBeforeUnmount(() => {
 }
 
 /* 动画 */
+@keyframes scaleIn {
+  from { transform: scale(0); }
+  to { transform: scale(1); }
+}
+
 .slide-fade-enter-active {
-  transition: all var(--duration-base) ease-out;
+  transition: all 0.2s ease-out;
 }
-
 .slide-fade-leave-active {
-  transition: all var(--duration-fast) ease-in;
+  transition: all 0.15s ease-in;
 }
-
 .slide-fade-enter-from {
   transform: translateY(-10px);
   opacity: 0;
 }
-
 .slide-fade-leave-to {
   transform: translateY(-10px);
   opacity: 0;

frontend/app/web-gold/src/components/ui/sidebar/Sidebar.vue

@@ -53,7 +53,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 
   <div
     v-else
-    class="group peer text-sidebar-foreground hidden md:block"
+    class="select-none group peer text-sidebar-foreground hidden md:block"
     data-slot="sidebar"
     :data-state="state"
     :data-collapsible="state === 'collapsed' ? collapsible : ''"