From fdd20e9a9b5ef0a88b9786cd1e9cd165aaa03b9e Mon Sep 17 00:00:00 2001
From: chabai <14799297+dhasjklhdfjkasfbhfasfj@user.noreply.gitee.com>
Date: Fri, 8 Aug 2025 13:51:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E5=95=86=E5=8A=A1=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E7=9A=84=E6=96=87=E4=BB=B6=E9=A2=84=E8=A7=88=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/auto-imports.d.ts            |   1 +
 src/views/bussiness-data/bussiness.vue | 853 +++++++++++++++++++++++--
 2 files changed, 796 insertions(+), 58 deletions(-)

diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 9026869..369aad4 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -57,6 +57,7 @@ declare global {
   const useCssVars: typeof import('vue')['useCssVars']
   const useId: typeof import('vue')['useId']
   const useLink: typeof import('vue-router')['useLink']
+  const useModel: typeof import('vue')['useModel']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
   const useSlots: typeof import('vue')['useSlots']
diff --git a/src/views/bussiness-data/bussiness.vue b/src/views/bussiness-data/bussiness.vue
index ec48882..b8cdb6b 100644
--- a/src/views/bussiness-data/bussiness.vue
+++ b/src/views/bussiness-data/bussiness.vue
@@ -552,7 +552,7 @@
 
 <script setup>
 // 导入核心依赖
-import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue';
+import { ref, reactive, onMounted, computed, watch, nextTick, h } from 'vue';
 import {
   IconFolder,
   IconFile,
@@ -1358,9 +1358,15 @@ const handlePreview = async (file) => {
       // PDF预览（在新窗口打开）
       window.open(url, '_blank');
       Message.success('PDF文件已在新窗口打开');
-    } else if (['txt', 'md', 'json', 'xml', 'csv'].includes(ext)) {
+    } else if (['txt', 'md', 'json', 'xml', 'csv', 'log'].includes(ext)) {
       // 文本文件预览
       showTextPreview(blob, fileName);
+    } else if (['mp4', 'avi', 'mov', 'wmv', 'flv'].includes(ext)) {
+      // 视频预览
+      showVideoPreview(url, fileName);
+    } else if (['mp3', 'wav', 'flac', 'aac'].includes(ext)) {
+      // 音频预览
+      showAudioPreview(url, fileName);
     } else if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) {
       // Office文档预览提示
       Modal.confirm({
@@ -1409,47 +1415,267 @@ const handlePreview = async (file) => {
 
 // 显示图片预览
 const showImagePreview = (url, fileName) => {
-  const container = document.createElement('div');
-  container.style.cssText = `
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    box-sizing: border-box;
-  `;
-  
-  const img = document.createElement('img');
-  img.src = url;
-  img.style.cssText = `
-    max-width: 100%;
-    max-height: 70vh;
-    object-fit: contain;
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  `;
-  
-  const title = document.createElement('div');
-  title.textContent = fileName;
-  title.style.cssText = `
-    margin-top: 16px;
-    font-size: 14px;
-    color: #666;
-    text-align: center;
-    word-break: break-all;
-  `;
-  
-  container.appendChild(img);
-  container.appendChild(title);
+  const imageScale = ref(1);
+  const imageRotation = ref(0);
   
+  const container = h('div', {
+    style: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '24px',
+      boxSizing: 'border-box',
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      borderRadius: '16px',
+      position: 'relative',
+      overflow: 'hidden'
+    }
+  }, [
+    // 背景装饰
+    h('div', {
+      style: {
+        position: 'absolute',
+        top: '-50%',
+        left: '-50%',
+        width: '200%',
+        height: '200%',
+        background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
+        animation: 'float 6s ease-in-out infinite'
+      }
+    }),
+    
+    // 顶部工具栏
+    h('div', {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: '16px',
+        marginBottom: '24px',
+        padding: '16px 24px',
+        backgroundColor: 'rgba(255, 255, 255, 0.95)',
+        borderRadius: '16px',
+        boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
+        backdropFilter: 'blur(10px)',
+        border: '1px solid rgba(255,255,255,0.2)',
+        position: 'relative',
+        zIndex: 10
+      }
+    }, [
+      h('button', {
+        onClick: () => imageScale.value = Math.max(0.3, imageScale.value - 0.2),
+        style: {
+          padding: '10px 16px',
+          border: 'none',
+          borderRadius: '12px',
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          color: 'white',
+          cursor: 'pointer',
+          fontSize: '14px',
+          fontWeight: '500',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          transition: 'all 0.3s ease',
+          boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
+        },
+        onMouseenter: (e) => {
+          e.target.style.transform = 'translateY(-2px)';
+          e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
+        },
+        onMouseleave: (e) => {
+          e.target.style.transform = 'translateY(0)';
+          e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
+        }
+      }, [
+        h('span', { style: { fontSize: '18px' } }, '🔍'),
+        '缩小'
+      ]),
+      h('button', {
+        onClick: () => imageScale.value = Math.min(4, imageScale.value + 0.2),
+        style: {
+          padding: '10px 16px',
+          border: 'none',
+          borderRadius: '12px',
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          color: 'white',
+          cursor: 'pointer',
+          fontSize: '14px',
+          fontWeight: '500',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          transition: 'all 0.3s ease',
+          boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
+        },
+        onMouseenter: (e) => {
+          e.target.style.transform = 'translateY(-2px)';
+          e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
+        },
+        onMouseleave: (e) => {
+          e.target.style.transform = 'translateY(0)';
+          e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
+        }
+      }, [
+        h('span', { style: { fontSize: '18px' } }, '🔍'),
+        '放大'
+      ]),
+      h('button', {
+        onClick: () => imageRotation.value += 90,
+        style: {
+          padding: '10px 16px',
+          border: 'none',
+          borderRadius: '12px',
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          color: 'white',
+          cursor: 'pointer',
+          fontSize: '14px',
+          fontWeight: '500',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          transition: 'all 0.3s ease',
+          boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
+        },
+        onMouseenter: (e) => {
+          e.target.style.transform = 'translateY(-2px)';
+          e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
+        },
+        onMouseleave: (e) => {
+          e.target.style.transform = 'translateY(0)';
+          e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
+        }
+      }, [
+        h('span', { style: { fontSize: '18px' } }, '🔄'),
+        '旋转'
+      ]),
+      h('button', {
+        onClick: () => {
+          imageScale.value = 1;
+          imageRotation.value = 0;
+        },
+        style: {
+          padding: '10px 16px',
+          border: 'none',
+          borderRadius: '12px',
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          color: 'white',
+          cursor: 'pointer',
+          fontSize: '14px',
+          fontWeight: '500',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          transition: 'all 0.3s ease',
+          boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
+        },
+        onMouseenter: (e) => {
+          e.target.style.transform = 'translateY(-2px)';
+          e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
+        },
+        onMouseleave: (e) => {
+          e.target.style.transform = 'translateY(0)';
+          e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
+        }
+      }, [
+        h('span', { style: { fontSize: '18px' } }, '🏠'),
+        '重置'
+      ])
+    ]),
+    
+    // 图片容器
+    h('div', {
+      style: {
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'auto',
+        backgroundColor: 'rgba(255, 255, 255, 0.95)',
+        borderRadius: '20px',
+        padding: '32px',
+        boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
+        minHeight: '500px',
+        backdropFilter: 'blur(10px)',
+        border: '1px solid rgba(255,255,255,0.3)',
+        position: 'relative',
+        zIndex: 5
+      }
+    }, [
+      h('img', {
+        src: url,
+        style: {
+          maxWidth: '100%',
+          maxHeight: '100%',
+          objectFit: 'contain',
+          borderRadius: '16px',
+          transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+          transform: `scale(${imageScale.value}) rotate(${imageRotation.value}deg)`,
+          boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
+          border: '2px solid rgba(255,255,255,0.8)'
+        }
+      })
+    ]),
+    
+    // 文件名
+    h('div', {
+      style: {
+        marginTop: '20px',
+        fontSize: '16px',
+        color: 'white',
+        textAlign: 'center',
+        wordBreak: 'break-all',
+        padding: '12px 24px',
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+        borderRadius: '12px',
+        boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
+        backdropFilter: 'blur(10px)',
+        border: '1px solid rgba(255,255,255,0.2)',
+        fontWeight: '500',
+        position: 'relative',
+        zIndex: 5
+      }
+    }, fileName)
+  ]);
+
   Modal.info({
-    title: '图片预览',
+    title: h('div', {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        fontSize: '20px',
+        fontWeight: '600',
+        color: '#2c3e50',
+        textAlign: 'center',
+        width: '100%',
+        justifyContent: 'center'
+      }
+    }, [
+      h('span', { style: { fontSize: '24px' } }, '🖼️'),
+      '图片预览'
+    ]),
     content: container,
-    width: '80%',
+    width: '95%',
+    style: { 
+      maxWidth: '1600px',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      borderRadius: '20px',
+      overflow: 'hidden',
+      boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
+      border: '3px solid rgba(255,255,255,0.2)'
+    },
+    mask: true,
     maskClosable: true,
-    footer: null
+    footer: null,
+    closable: true,
+    okText: null,
+    cancelText: null
   });
 };
 
@@ -1457,29 +1683,208 @@ const showImagePreview = (url, fileName) => {
 const showTextPreview = async (blob, fileName) => {
   try {
     const text = await blob.text();
-    const container = document.createElement('div');
-    container.style.cssText = `
-      width: 100%;
-      height: 400px;
-      border: 1px solid #e5e5e5;
-      border-radius: 6px;
-      padding: 16px;
-      background-color: #fafafa;
-      font-family: 'Courier New', monospace;
-      font-size: 13px;
-      line-height: 1.6;
-      overflow: auto;
-      white-space: pre-wrap;
-      word-break: break-word;
-    `;
-    container.textContent = text;
+    const fontSize = ref(16);
     
+    const container = h('div', {
+      style: {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '24px',
+        boxSizing: 'border-box',
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        borderRadius: '16px',
+        position: 'relative',
+        overflow: 'hidden'
+      }
+    }, [
+      // 背景装饰
+      h('div', {
+        style: {
+          position: 'absolute',
+          top: '-50%',
+          left: '-50%',
+          width: '200%',
+          height: '200%',
+          background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
+          animation: 'float 6s ease-in-out infinite'
+        }
+      }),
+      
+      // 顶部工具栏
+      h('div', {
+        style: {
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: '16px',
+          marginBottom: '24px',
+          padding: '16px 24px',
+          backgroundColor: 'rgba(255, 255, 255, 0.95)',
+          borderRadius: '16px',
+          boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
+          backdropFilter: 'blur(10px)',
+          border: '1px solid rgba(255,255,255,0.2)',
+          position: 'relative',
+          zIndex: 10
+        }
+      }, [
+        h('button', {
+          onClick: () => fontSize.value = Math.max(12, fontSize.value - 2),
+          style: {
+            padding: '10px 16px',
+            border: 'none',
+            borderRadius: '12px',
+            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            color: 'white',
+            cursor: 'pointer',
+            fontSize: '14px',
+            fontWeight: '500',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            transition: 'all 0.3s ease',
+            boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
+          },
+          onMouseenter: (e) => {
+            e.target.style.transform = 'translateY(-2px)';
+            e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
+          },
+          onMouseleave: (e) => {
+            e.target.style.transform = 'translateY(0)';
+            e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
+          }
+        }, [
+          h('span', { style: { fontSize: '18px' } }, '🔍'),
+          '缩小字体'
+        ]),
+        h('button', {
+          onClick: () => fontSize.value = Math.min(28, fontSize.value + 2),
+          style: {
+            padding: '10px 16px',
+            border: 'none',
+            borderRadius: '12px',
+            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            color: 'white',
+            cursor: 'pointer',
+            fontSize: '14px',
+            fontWeight: '500',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            transition: 'all 0.3s ease',
+            boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
+          },
+          onMouseenter: (e) => {
+            e.target.style.transform = 'translateY(-2px)';
+            e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
+          },
+          onMouseleave: (e) => {
+            e.target.style.transform = 'translateY(0)';
+            e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
+          }
+        }, [
+          h('span', { style: { fontSize: '18px' } }, '🔍'),
+          '放大字体'
+        ]),
+        h('button', {
+          onClick: () => {
+            const textArea = document.createElement('textarea');
+            textArea.value = text;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+            Message.success('文本已复制到剪贴板');
+          },
+          style: {
+            padding: '10px 16px',
+            border: 'none',
+            borderRadius: '12px',
+            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            color: 'white',
+            cursor: 'pointer',
+            fontSize: '14px',
+            fontWeight: '500',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            transition: 'all 0.3s ease',
+            boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
+          },
+          onMouseenter: (e) => {
+            e.target.style.transform = 'translateY(-2px)';
+            e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
+          },
+          onMouseleave: (e) => {
+            e.target.style.transform = 'translateY(0)';
+            e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
+          }
+        }, [
+          h('span', { style: { fontSize: '18px' } }, '📋'),
+          '复制文本'
+        ])
+      ]),
+      
+      // 文本内容
+      h('div', {
+        style: {
+          flex: 1,
+          backgroundColor: 'rgba(255, 255, 255, 0.95)',
+          borderRadius: '20px',
+          padding: '32px',
+          boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
+          overflow: 'auto',
+          fontFamily: "'JetBrains Mono', 'Fira Code', 'Courier New', 'Monaco', 'Menlo', monospace",
+          fontSize: `${fontSize.value}px`,
+          lineHeight: '1.8',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+          color: '#2c3e50',
+          border: '1px solid rgba(255,255,255,0.3)',
+          backdropFilter: 'blur(10px)',
+          position: 'relative',
+          zIndex: 5
+        }
+      }, text)
+    ]);
+
     Modal.info({
-      title: `文本预览 - ${fileName}`,
+      title: h('div', {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '12px',
+          fontSize: '20px',
+          fontWeight: '600',
+          color: '#2c3e50',
+          textAlign: 'center',
+          width: '100%',
+          justifyContent: 'center'
+        }
+      }, [
+        h('span', { style: { fontSize: '24px' } }, '📄'),
+        `文本预览 - ${fileName}`
+      ]),
       content: container,
-      width: '70%',
+      width: '90%',
+      style: { 
+        maxWidth: '1400px',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        borderRadius: '20px',
+        overflow: 'hidden',
+        boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
+        border: '3px solid rgba(255,255,255,0.2)'
+      },
+      mask: true,
       maskClosable: true,
-      footer: null
+      footer: null,
+      closable: true,
+      okText: null,
+      cancelText: null
     });
   } catch (error) {
     console.error('文本预览失败:', error);
@@ -1487,6 +1892,249 @@ const showTextPreview = async (blob, fileName) => {
   }
 };
 
+// 显示视频预览
+const showVideoPreview = (url, fileName) => {
+  const container = h('div', {
+    style: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '24px',
+      boxSizing: 'border-box',
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      borderRadius: '16px',
+      position: 'relative',
+      overflow: 'hidden'
+    }
+  }, [
+    // 背景装饰
+    h('div', {
+      style: {
+        position: 'absolute',
+        top: '-50%',
+        left: '-50%',
+        width: '200%',
+        height: '200%',
+        background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
+        animation: 'float 6s ease-in-out infinite'
+      }
+    }),
+    
+    // 视频容器
+    h('div', {
+      style: {
+        width: '100%',
+        maxWidth: '1000px',
+        backgroundColor: 'rgba(255, 255, 255, 0.95)',
+        borderRadius: '20px',
+        padding: '32px',
+        boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
+        backdropFilter: 'blur(10px)',
+        border: '1px solid rgba(255,255,255,0.3)',
+        position: 'relative',
+        zIndex: 5
+      }
+    }, [
+      h('video', {
+        src: url,
+        controls: true,
+        style: {
+          width: '100%',
+          maxHeight: '70vh',
+          borderRadius: '16px',
+          background: '#000',
+          boxShadow: '0 12px 32px rgba(0,0,0,0.3)',
+          border: '3px solid rgba(255,255,255,0.8)',
+          transition: 'all 0.3s ease'
+        }
+      })
+    ]),
+    
+    // 文件名
+    h('div', {
+      style: {
+        marginTop: '20px',
+        fontSize: '16px',
+        color: 'white',
+        wordBreak: 'break-all',
+        textAlign: 'center',
+        padding: '12px 24px',
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+        borderRadius: '12px',
+        boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
+        backdropFilter: 'blur(10px)',
+        border: '1px solid rgba(255,255,255,0.2)',
+        fontWeight: '500',
+        position: 'relative',
+        zIndex: 5
+      }
+    }, fileName)
+  ]);
+
+  Modal.info({
+    title: h('div', {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        fontSize: '20px',
+        fontWeight: '600',
+        color: '#2c3e50',
+        textAlign: 'center',
+        width: '100%',
+        justifyContent: 'center'
+      }
+    }, [
+      h('span', { style: { fontSize: '24px' } }, '🎬'),
+      '视频预览'
+    ]),
+    content: container,
+    width: '90%',
+    style: { 
+      maxWidth: '1400px',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      borderRadius: '20px',
+      overflow: 'hidden',
+      boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
+      border: '3px solid rgba(255,255,255,0.2)'
+    },
+    mask: true,
+    maskClosable: true,
+    footer: null,
+    closable: true,
+    okText: null,
+    cancelText: null
+  });
+};
+
+// 显示音频预览
+const showAudioPreview = (url, fileName) => {
+  const container = h('div', {
+    style: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '24px',
+      boxSizing: 'border-box',
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      borderRadius: '16px',
+      position: 'relative',
+      overflow: 'hidden'
+    }
+  }, [
+    // 背景装饰
+    h('div', {
+      style: {
+        position: 'absolute',
+        top: '-50%',
+        left: '-50%',
+        width: '200%',
+        height: '200%',
+        background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
+        animation: 'float 6s ease-in-out infinite'
+      }
+    }),
+    
+    // 音频容器
+    h('div', {
+      style: {
+        width: '100%',
+        maxWidth: '500px',
+        backgroundColor: 'rgba(255, 255, 255, 0.95)',
+        borderRadius: '20px',
+        padding: '40px',
+        boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
+        backdropFilter: 'blur(10px)',
+        border: '1px solid rgba(255,255,255,0.3)',
+        position: 'relative',
+        zIndex: 5,
+        textAlign: 'center'
+      }
+    }, [
+      // 音频图标
+      h('div', {
+        style: {
+          fontSize: '64px',
+          marginBottom: '24px',
+          animation: 'pulse 2s ease-in-out infinite'
+        }
+      }, '🎵'),
+      
+      // 音频播放器
+      h('audio', {
+        src: url,
+        controls: true,
+        style: {
+          width: '100%',
+          height: '50px',
+          borderRadius: '12px',
+          marginBottom: '20px'
+        }
+      }),
+      
+      // 文件名
+      h('div', {
+        style: {
+          fontSize: '16px',
+          color: '#2c3e50',
+          wordBreak: 'break-all',
+          textAlign: 'center',
+          padding: '12px 16px',
+          backgroundColor: 'rgba(102, 126, 234, 0.1)',
+          borderRadius: '12px',
+          fontWeight: '500',
+          border: '1px solid rgba(102, 126, 234, 0.2)'
+        }
+      }, fileName)
+    ])
+  ]);
+
+  Modal.info({
+    title: h('div', {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        fontSize: '20px',
+        fontWeight: '600',
+        color: '#2c3e50',
+        textAlign: 'center',
+        width: '100%',
+        justifyContent: 'center'
+      }
+    }, [
+      h('span', { style: { fontSize: '24px' } }, '🎵'),
+      '音频预览'
+    ]),
+    content: container,
+    width: '70%',
+    style: { 
+      maxWidth: '800px',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      borderRadius: '20px',
+      overflow: 'hidden',
+      boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
+      border: '3px solid rgba(255,255,255,0.2)'
+    },
+    mask: true,
+    maskClosable: true,
+    footer: null,
+    closable: true,
+    okText: null,
+    cancelText: null
+  });
+};
+
 // 下载文件
 const handleDownload = async (file) => {
   try {
@@ -2393,6 +3041,95 @@ onMounted(() => {
   to { transform: rotate(360deg); }
 }
 
+/* 预览弹窗动画效果 */
+@keyframes float {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  25% { transform: translateY(-10px) rotate(1deg); }
+  50% { transform: translateY(-5px) rotate(-1deg); }
+  75% { transform: translateY(-15px) rotate(0.5deg); }
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.05); opacity: 0.8; }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-30px) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* 预览弹窗样式增强 */
+:deep(.arco-modal) {
+  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+:deep(.arco-modal-mask) {
+  animation: fadeIn 0.3s ease;
+  backdrop-filter: blur(8px);
+}
+
+:deep(.arco-modal-content) {
+  border-radius: 20px !important;
+  overflow: hidden;
+  box-shadow: 0 32px 96px rgba(0,0,0,0.3) !important;
+  border: 3px solid rgba(255,255,255,0.2) !important;
+}
+
+:deep(.arco-modal-header) {
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  border-bottom: 1px solid rgba(255,255,255,0.2);
+  padding: 20px 24px;
+}
+
+:deep(.arco-modal-title) {
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+:deep(.arco-modal-close) {
+  background: rgba(255,255,255,0.9);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  
+  &:hover {
+    background: rgba(255,255,255,1);
+    transform: scale(1.1);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  }
+}
+
+/* 按钮悬停效果增强 */
+:deep(.arco-btn) {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+}
+
 /* 骨架屏样式 */
 .skeleton-item {
   height: 36px;