feat: 样式升级

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

@@ -9,7 +9,7 @@
         <h3>生成的数字人视频</h3>
         <video :src="previewVideoUrl" controls class="generated-video"></video>
         <div class="video-actions">
-          <a-button type="primary" @click="downloadVideo">下载视频</a-button>
+          <Button @click="downloadVideo">下载视频</Button>
         </div>
       </div>
     </div>
@@ -18,7 +18,8 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { message } from 'ant-design-vue'
+import { toast } from 'vue-sonner'
+import { Button } from '@/components/ui/button'
 import { getDigitalHumanTask } from '@/api/digitalHuman'
 
 const props = defineProps({
@@ -52,7 +53,7 @@ const loadLastTask = async () => {
 }
 
 const downloadVideo = () => {
-  if (!previewVideoUrl.value) return message.warning('没有可下载的视频')
+  if (!previewVideoUrl.value) return toast.warning('没有可下载的视频')
   const link = document.createElement('a')
   link.href = previewVideoUrl.value
   link.download = `数字人视频_${Date.now()}.mp4`
@@ -71,9 +72,9 @@ onMounted(async () => {
 
 <style scoped>
 .result-panel {
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 16px;
-  padding: 24px;
+  background: var(--muted);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
 }
 
 .result-placeholder {
@@ -81,31 +82,31 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #94a3b8;
+  color: var(--muted-foreground);
 }
 
 .result-content {
-  color: #fff;
+  color: var(--foreground);
 }
 
 .result-section {
-  margin-bottom: 24px;
+  margin-bottom: var(--space-6);
 }
 
 .result-section h3 {
-  margin-bottom: 12px;
-  font-size: 18px;
+  margin-bottom: var(--space-3);
+  font-size: var(--font-size-lg);
 }
 
 .generated-video {
   width: 100%;
   max-height: 400px;
-  border-radius: 8px;
-  margin-top: 12px;
+  border-radius: var(--radius);
+  margin-top: var(--space-3);
 }
 
 .video-actions {
-  margin-top: 16px;
+  margin-top: var(--space-4);
   display: flex;
   justify-content: center;
 }