diff --git a/PREVIEW_FEATURE_GUIDE.md b/PREVIEW_FEATURE_GUIDE.md
new file mode 100644
index 0000000..6f57aad
--- /dev/null
+++ b/PREVIEW_FEATURE_GUIDE.md
@@ -0,0 +1,88 @@
+# 商务数据库文件预览功能说明
+
+## 功能概述
+
+商务数据库信息模块的文件预览功能已经实现，支持多种文件类型的在线预览，为用户提供便捷的文件查看体验。
+
+## 支持的文件类型
+
+### 1. 图片文件
+- **支持格式**: JPG, JPEG, PNG, GIF, BMP, WebP
+- **预览方式**: 在模态窗口中直接显示图片
+- **特性**: 
+  - 自适应大小，最大高度为70vh
+  - 圆角和阴影效果提升视觉体验
+  - 显示文件名信息
+
+### 2. PDF文件
+- **支持格式**: PDF
+- **预览方式**: 在新窗口中打开PDF文件
+- **特性**: 利用浏览器原生PDF查看器
+
+### 3. 文本文件
+- **支持格式**: TXT, MD, JSON, XML, CSV
+- **预览方式**: 在模态窗口中显示文本内容
+- **特性**: 
+  - 等宽字体显示，保持格式
+  - 400px高度的滚动区域
+  - 保留原文本格式和换行
+
+### 4. Office文档
+- **支持格式**: DOC, DOCX, XLS, XLSX, PPT, PPTX
+- **预览方式**: 提示用户下载查看
+- **说明**: 由于Office文档需要特殊渲染，建议下载后使用相应软件打开
+
+### 5. 其他文件类型
+- **处理方式**: 询问用户是否下载查看
+- **说明**: 对于不支持在线预览的文件类型，系统会友好提示用户
+
+## 功能特性
+
+### 用户体验优化
+1. **加载提示**: 预览过程中显示"正在加载预览..."提示
+2. **错误处理**: 针对不同错误状态提供详细的错误信息
+3. **资源管理**: 自动清理预览使用的内存资源
+
+### 错误处理机制
+- **404错误**: "文件不存在或已被删除"
+- **403错误**: "没有权限访问该文件" 
+- **500错误**: "服务器内部错误，请稍后重试"
+- **网络错误**: "预览文件失败，请检查网络连接"
+
+### 安全性
+- 使用Blob URL进行文件预览，确保安全性
+- 10秒后自动释放URL资源，防止内存泄漏
+
+## 使用方法
+
+1. 在文件列表中找到要预览的文件
+2. 点击文件行中的"眼睛"图标按钮
+3. 系统会根据文件类型自动选择合适的预览方式
+4. 对于不支持的文件类型，系统会提供下载选项
+
+## 技术实现
+
+### API接口
+- **接口地址**: `/businessData/file/preview`
+- **请求方式**: GET
+- **参数**: `fileId` (必需)
+- **响应类型**: Blob
+
+### 核心函数
+- `handlePreview(file)`: 主预览函数
+- `showImagePreview(url, fileName)`: 图片预览组件
+- `showTextPreview(blob, fileName)`: 文本预览组件
+
+## 注意事项
+
+1. **文件大小限制**: 大文件可能需要较长加载时间
+2. **浏览器兼容性**: 确保浏览器支持Blob和URL.createObjectURL
+3. **网络要求**: 稳定的网络连接确保预览效果
+4. **权限控制**: 需要有相应的文件访问权限
+
+## 后续优化建议
+
+1. 添加文件预览缓存机制
+2. 支持更多文件格式的在线预览
+3. 添加图片预览的缩放和旋转功能
+4. 支持文档的分页预览功能
diff --git a/src/apis/equipment/approval.ts b/src/apis/equipment/approval.ts
index 7867d6e..8ce061b 100644
--- a/src/apis/equipment/approval.ts
+++ b/src/apis/equipment/approval.ts
@@ -1,49 +1,70 @@
 import http from '@/utils/http'
-import type { EquipmentApprovalReq, EquipmentApprovalResp, EquipmentApprovalListReq } from './type'
+import type { EquipmentApprovalListReq, EquipmentApprovalResp } from './type'
 
 /**
- * 设备审批管理API
+ * 设备审批API
  */
 export const equipmentApprovalApi = {
   /**
    * 分页查询待审批的设备采购申请
    */
-  getPendingApprovals: (params: EquipmentApprovalListReq) => {
-    return http.get<ApiRes<PageRes<EquipmentApprovalResp>>>('/equipment/approval/pending', { params })
+  getPendingApprovals(params: EquipmentApprovalListReq) {
+    return http.get<EquipmentApprovalResp[]>('/equipment/approval/pending', params)
   },
 
   /**
    * 分页查询已审批的设备采购申请
    */
-  getApprovedApprovals: (params: EquipmentApprovalListReq) => {
-    return http.get<ApiRes<PageRes<EquipmentApprovalResp>>>('/equipment/approval/approved', { params })
+  getApprovedApprovals(params: EquipmentApprovalListReq) {
+    return http.get<EquipmentApprovalResp[]>('/equipment/approval/approved', params)
   },
 
   /**
    * 审批通过
    */
-  approve: (approvalId: string, data: EquipmentApprovalReq) => {
-    return http.post<ApiRes<null>>(`/equipment/approval/${approvalId}/approve`, data)
+  approve(approvalId: string, data: any) {
+    return http.post(`/equipment/approval/${approvalId}/approve`, data)
   },
 
   /**
    * 审批拒绝
    */
-  reject: (approvalId: string, data: EquipmentApprovalReq) => {
-    return http.post<ApiRes<null>>(`/equipment/approval/${approvalId}/reject`, data)
+  reject(approvalId: string, data: any) {
+    return http.post(`/equipment/approval/${approvalId}/reject`, data)
   },
 
   /**
    * 获取审批详情
    */
-  getApprovalDetail: (approvalId: string) => {
-    return http.get<ApiRes<EquipmentApprovalResp>>(`/equipment/approval/${approvalId}`)
+  getApprovalDetail(approvalId: string) {
+    return http.get<EquipmentApprovalResp>(`/equipment/approval/${approvalId}`)
   },
 
   /**
    * 获取审批统计信息
    */
-  getApprovalStats: () => {
-    return http.get<ApiRes<unknown>>('/equipment/approval/stats')
+  getApprovalStats() {
+    return http.get('/equipment/approval/stats')
+  },
+
+  /**
+   * 提交采购申请
+   */
+  submitProcurementApplication(data: any) {
+    return http.post('/equipment/approval/procurement/apply', data)
+  },
+
+  /**
+   * 获取我的采购申请
+   */
+  getMyProcurementApplications(params: EquipmentApprovalListReq) {
+    return http.get<EquipmentApprovalResp[]>('/equipment/approval/procurement/my-applications', params)
+  },
+
+  /**
+   * 撤回采购申请
+   */
+  withdrawProcurementApplication(approvalId: string) {
+    return http.post(`/equipment/approval/procurement/${approvalId}/withdraw`)
   }
 }
diff --git a/src/layout/components/HeaderRightBar/index.vue b/src/layout/components/HeaderRightBar/index.vue
index ecc4a36..64719de 100644
--- a/src/layout/components/HeaderRightBar/index.vue
+++ b/src/layout/components/HeaderRightBar/index.vue
@@ -19,8 +19,13 @@
         :content-style="{ marginTop: '-5px', padding: 0, border: 'none' }"
         :arrow-style="{ width: 0, height: 0 }"
       >
-        <a-badge :count="unreadMessageCount" dot>
-          <a-button size="mini" class="gi_hover_btn">
+        <a-badge 
+          :count="unreadMessageCount" 
+          :dot="unreadMessageCount > 0"
+          :show-zero="false"
+          class="notification-badge"
+        >
+          <a-button size="mini" class="gi_hover_btn notification-btn">
             <template #icon>
               <icon-notification :size="18" />
             </template>
@@ -74,9 +79,9 @@
 </template>
 
 <script setup lang="ts">
-import { Modal } from '@arco-design/web-vue'
+import { Modal, Notification } from '@arco-design/web-vue'
 import { useFullscreen } from '@vueuse/core'
-import { onMounted, ref, nextTick } from 'vue'
+import { onMounted, ref, nextTick, onBeforeUnmount } from 'vue'
 import Message from './Message.vue'
 import SettingDrawer from './SettingDrawer.vue'
 import Search from './Search.vue'
@@ -97,10 +102,148 @@ onBeforeUnmount(() => {
     socket.close()
     socket = null
   }
+  
+  // 清理标题闪烁
+  if (titleFlashInterval) {
+    clearInterval(titleFlashInterval)
+    titleFlashInterval = null
+  }
 })
 
 const unreadMessageCount = ref(0)
 
+// 语音提示功能
+const playNotificationSound = () => {
+  try {
+    // 创建音频上下文
+    const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
+    const oscillator = audioContext.createOscillator()
+    const gainNode = audioContext.createGain()
+    
+    oscillator.connect(gainNode)
+    gainNode.connect(audioContext.destination)
+    
+    // 设置音频参数
+    oscillator.frequency.setValueAtTime(800, audioContext.currentTime) // 800Hz
+    oscillator.type = 'sine'
+    
+    gainNode.gain.setValueAtTime(0.3, audioContext.currentTime)
+    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5)
+    
+    // 播放音频
+    oscillator.start(audioContext.currentTime)
+    oscillator.stop(audioContext.currentTime + 0.5)
+    
+    console.log('播放语音提示')
+  } catch (error) {
+    console.error('播放语音提示失败:', error)
+  }
+}
+
+// 页面标题闪烁功能
+let titleFlashInterval: NodeJS.Timeout | null = null
+const flashPageTitle = () => {
+  const originalTitle = document.title
+  let flashCount = 0
+  const maxFlashes = 6 // 闪烁3次（开-关-开-关-开-关）
+  
+  // 清除之前的闪烁
+  if (titleFlashInterval) {
+    clearInterval(titleFlashInterval)
+  }
+  
+  titleFlashInterval = setInterval(() => {
+    if (flashCount >= maxFlashes) {
+      document.title = originalTitle
+      if (titleFlashInterval) {
+        clearInterval(titleFlashInterval)
+        titleFlashInterval = null
+      }
+      return
+    }
+    
+    document.title = flashCount % 2 === 0 ? '🔔 新的采购申请' : originalTitle
+    flashCount++
+  }, 500)
+}
+
+// 暴露测试函数到全局，方便在控制台测试
+if (typeof window !== 'undefined') {
+  (window as any).testNotification = {
+    playSound: playNotificationSound,
+    flashTitle: flashPageTitle,
+    showNotification: () => {
+      Notification.info({
+        title: '测试通知',
+        content: '这是一个测试通知，用于验证通知功能是否正常工作。',
+        duration: 5000,
+        closable: true,
+        position: 'topRight'
+      })
+      unreadMessageCount.value++
+    },
+    testAll: () => {
+      playNotificationSound()
+      flashPageTitle()
+      Notification.info({
+        title: '测试通知',
+        content: '这是一个测试通知，用于验证通知功能是否正常工作。',
+        duration: 5000,
+        closable: true,
+        position: 'topRight'
+      })
+      unreadMessageCount.value++
+    },
+    // 添加调试函数
+    debugWebSocket: () => {
+      console.log('=== WebSocket 调试信息 ===')
+      console.log('Socket对象:', socket)
+      console.log('Socket状态:', socket ? socket.readyState : '未连接')
+      console.log('Token:', getToken())
+      console.log('环境变量:', import.meta.env.VITE_API_WS_URL)
+      console.log('未读消息计数:', unreadMessageCount.value)
+      console.log('用户Token:', userStore.token)
+    },
+    // 手动触发WebSocket消息处理
+    simulateWebSocketMessage: () => {
+      const mockMessage = {
+        type: "PROCUREMENT_APPLICATION",
+        title: "新的采购申请",
+        content: "收到来自 测试用户 的设备采购申请：测试设备"
+      }
+      
+      const event = new MessageEvent('message', {
+        data: JSON.stringify(mockMessage)
+      })
+      
+      if (socket && socket.onmessage) {
+        console.log('模拟WebSocket消息:', mockMessage)
+        socket.onmessage(event)
+      } else {
+        console.error('WebSocket连接不存在或onmessage未设置')
+      }
+    },
+    // 强制重新连接WebSocket
+    reconnectWebSocket: () => {
+      console.log('强制重新连接WebSocket')
+      const token = getToken()
+      if (token) {
+        if (socket) {
+          socket.close()
+          socket = null
+        }
+        initWebSocket(token)
+      } else {
+        console.error('Token不存在，无法重新连接')
+      }
+    }
+  }
+  
+  // 暴露socket对象到全局，方便调试
+  ;(window as any).socket = socket
+  ;(window as any).unreadMessageCount = unreadMessageCount
+}
+
 // 初始化 WebSocket - 使用防抖避免重复连接
 let initTimer: NodeJS.Timeout | null = null
 const initWebSocket = (token: string) => {
@@ -116,29 +259,70 @@ const initWebSocket = (token: string) => {
     }
     
     try {
-      socket = new WebSocket(`${import.meta.env.VITE_API_WS_URL}/websocket?token=${token}`)
+      // 修复WebSocket URL，确保使用正确的端口
+      const wsUrl = import.meta.env.VITE_API_WS_URL || 'ws://localhost:8888'
+      const wsEndpoint = wsUrl.replace('8000', '8888') // 确保使用8888端口
+      console.log('正在连接WebSocket:', `${wsEndpoint}/websocket?token=${token}`)
+      
+      socket = new WebSocket(`${wsEndpoint}/websocket?token=${token}`)
       
       socket.onopen = () => {
-        // console.log('WebSocket connection opened')
+        console.log('WebSocket连接成功')
       }
 
       socket.onmessage = (event) => {
-        const count = Number.parseInt(event.data)
-        if (!isNaN(count)) {
-          unreadMessageCount.value = count
+        console.log('收到WebSocket消息:', event.data)
+        try {
+          const data = JSON.parse(event.data)
+          
+          // 处理通知消息
+          if (data.type && data.title && data.content) {
+            console.log('处理通知消息:', data)
+            
+            // 播放语音提示
+            playNotificationSound()
+            
+            // 显示通知
+            Notification.info({
+              title: data.title,
+              content: data.content,
+              duration: 5000,
+              closable: true,
+              position: 'topRight'
+            })
+            
+            // 增加未读消息计数
+            unreadMessageCount.value++
+            
+            // 触发页面标题闪烁
+            flashPageTitle()
+          } else {
+            // 处理简单的数字消息（兼容旧版本）
+            const count = Number.parseInt(event.data)
+            if (!isNaN(count)) {
+              unreadMessageCount.value = count
+            }
+          }
+        } catch (error) {
+          console.error('解析WebSocket消息失败:', error)
+          // 尝试解析为数字（兼容旧版本）
+          const count = Number.parseInt(event.data)
+          if (!isNaN(count)) {
+            unreadMessageCount.value = count
+          }
         }
       }
 
-      socket.onerror = () => {
-        // console.error('WebSocket error:', error)
+      socket.onerror = (error) => {
+        console.error('WebSocket连接错误:', error)
       }
 
-      socket.onclose = () => {
-        // console.log('WebSocket connection closed')
+      socket.onclose = (event) => {
+        console.log('WebSocket连接关闭:', event.code, event.reason)
         socket = null
       }
     } catch (error) {
-      console.error('Failed to create WebSocket connection:', error)
+      console.error('创建WebSocket连接失败:', error)
     }
     
     initTimer = null
@@ -149,10 +333,17 @@ const initWebSocket = (token: string) => {
 const getMessageCount = async () => {
   try {
     const token = getToken()
+    console.log('获取到token:', token ? '存在' : '不存在')
+    
     if (token && !socket) {
+      console.log('准备初始化WebSocket连接')
       nextTick(() => {
         initWebSocket(token)
       })
+    } else if (!token) {
+      console.warn('Token不存在，无法建立WebSocket连接')
+    } else if (socket) {
+      console.log('WebSocket连接已存在')
     }
   } catch (error) {
     console.error('Failed to get message count:', error)
@@ -186,9 +377,32 @@ const logout = () => {
 
 onMounted(() => {
   nextTick(() => {
-    // getMessageCount()
+    // 立即尝试初始化WebSocket
+    getMessageCount()
+    
+    // 如果第一次失败，1秒后重试
+    setTimeout(() => {
+      if (!socket) {
+        console.log('首次连接失败，重试WebSocket连接')
+        getMessageCount()
+      }
+    }, 1000)
   })
 })
+
+// 监听用户登录状态变化
+watch(() => userStore.token, (newToken, oldToken) => {
+  console.log('Token变化:', { oldToken: oldToken ? '存在' : '不存在', newToken: newToken ? '存在' : '不存在' })
+  
+  if (newToken && !socket) {
+    console.log('用户登录，初始化WebSocket连接')
+    getMessageCount()
+  } else if (!newToken && socket) {
+    console.log('用户登出，关闭WebSocket连接')
+    socket.close()
+    socket = null
+  }
+}, { immediate: true })
 </script>
 
 <style scoped lang="scss">
@@ -210,4 +424,56 @@ onMounted(() => {
     margin-left: 2px;
   }
 }
+
+// 通知徽章样式
+.notification-badge {
+  .arco-badge-dot {
+    background-color: #f53f3f;
+    box-shadow: 0 0 0 2px rgba(245, 63, 63, 0.2);
+    animation: pulse 2s infinite;
+  }
+  
+  .arco-badge-count {
+    background-color: #f53f3f;
+    font-weight: bold;
+    animation: bounce 0.6s ease-in-out;
+  }
+}
+
+.notification-btn {
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+
+// 脉冲动画
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(245, 63, 63, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(245, 63, 63, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(245, 63, 63, 0);
+  }
+}
+
+// 弹跳动画
+@keyframes bounce {
+  0%, 20%, 53%, 80%, 100% {
+    transform: translate3d(0, 0, 0);
+  }
+  40%, 43% {
+    transform: translate3d(0, -8px, 0);
+  }
+  70% {
+    transform: translate3d(0, -4px, 0);
+  }
+  90% {
+    transform: translate3d(0, -2px, 0);
+  }
+}
 </style>
diff --git a/src/types/env.d.ts b/src/types/env.d.ts
index acbbf80..61bb774 100644
--- a/src/types/env.d.ts
+++ b/src/types/env.d.ts
@@ -4,6 +4,7 @@
 interface ImportMetaEnv {
   readonly VITE_API_PREFIX: string
   readonly VITE_API_BASE_URL: string
+  readonly VITE_API_WS_URL: string
   readonly VITE_BASE: string
   readonly VITE_APP_SETTING: string
   readonly VITE_CLIENT_ID: string
diff --git a/src/utils/http.ts b/src/utils/http.ts
index 5894b18..70adfa3 100644
--- a/src/utils/http.ts
+++ b/src/utils/http.ts
@@ -225,7 +225,3 @@ export default {
   requestRaw,
   download,
 }
-
-export const updateContract = (contractId, contractData) => {
-  return http.put(`/contract/${contractId}`, contractData)
-}
diff --git a/src/views/bussiness-data/bussiness.vue b/src/views/bussiness-data/bussiness.vue
index b8cdb6b..08a65a2 100644
--- a/src/views/bussiness-data/bussiness.vue
+++ b/src/views/bussiness-data/bussiness.vue
@@ -409,10 +409,12 @@
             <!-- 上传按钮 -->
             <a-upload
               ref="uploadRef"
+              :key="uploadDialogVisible ? 'upload-open' : 'upload-closed'"
               :auto-upload="false"
               :show-file-list="false"
               @change="handleFileChange"
               :accept="allowedFileTypes"
+              multiple
             >
               <a-button type="primary" class="upload-btn">
                 <icon-upload />
@@ -1079,9 +1081,26 @@ const handleFileChange = (info) => {
   console.log('文件列表:', fileList);
   console.log('文件列表长度:', fileList.length);
   
-  // 每次选择文件时，强制清空所有状态
-  fileListTemp.value = [];
-  console.log('已清空之前的文件列表');
+  // 检查是否是组件内部状态触发的（可能是之前的状态）
+  if (fileList.length === 0) {
+    console.log('⚠️ 文件列表为空，可能是组件内部状态，跳过处理');
+    return;
+  }
+  
+  // 检查是否是对话框刚打开时的触发（可能是之前的状态）
+  if (!uploadDialogVisible.value) {
+    console.log('⚠️ 对话框未显示，可能是之前的状态触发，跳过处理');
+    return;
+  }
+  
+  // 获取当前已存在的文件UID列表，用于去重
+  const existingUids = fileListTemp.value.map(f => f.uid);
+  console.log('已存在的文件UID:', existingUids);
+  
+  // 获取当前文件夹中已存在的文件名列表，用于检查重复
+  const currentFolderFiles = fileList.value || [];
+  const existingFileNames = currentFolderFiles.map(f => f.fileName || f.name);
+  console.log('当前文件夹中的文件:', existingFileNames);
   
   // 强制重置上传组件状态
   if (uploadRef.value) {
@@ -1093,7 +1112,7 @@ const handleFileChange = (info) => {
     }
   }
   
-  // 处理新选择的文件 - 只处理当前选择的文件
+  // 处理新选择的文件 - 支持多文件选择，同时避免重复
   fileList.forEach((file, index) => {
     console.log(`处理第${index + 1}个文件:`, file);
     console.log('文件名称:', file.name);
@@ -1101,6 +1120,12 @@ const handleFileChange = (info) => {
     console.log('文件UID:', file.uid);
     console.log('文件对象结构:', Object.keys(file));
     
+    // 检查文件是否已存在（去重）
+    if (existingUids.includes(file.uid)) {
+      console.log('⚠️ 文件已存在，跳过:', file.name);
+      return;
+    }
+    
     // 确保文件对象有正确的属性
     const fileObj = {
       uid: file.uid,
@@ -1114,21 +1139,28 @@ const handleFileChange = (info) => {
     
     console.log('开始验证新文件...');
     
+    // 检查文件是否已存在于当前文件夹中
+    if (existingFileNames.includes(fileObj.name)) {
+      fileObj.error = '文件已存在于当前文件夹中';
+      console.log('⚠️ 文件已存在于文件夹中:', fileObj.name);
+      // 显示友好的提示信息
+      Message.warning(`文件 "${fileObj.name}" 已存在于当前文件夹中，已跳过`);
+      return;
+    }
+    
     // 验证文件
     const isValid = validateFile(fileObj);
     console.log('文件验证结果:', isValid);
     
     if (isValid) {
-      // 确保只添加当前选择的文件
-      fileListTemp.value = [fileObj]; // 只保留当前文件
-      console.log('✅ 成功设置文件到列表:', fileObj.name);
+      // 支持多文件：添加到列表
+      fileListTemp.value.push(fileObj);
+      console.log('✅ 成功添加文件到列表:', fileObj.name);
     } else {
       console.log('❌ 文件验证失败:', fileObj.name, '错误:', fileObj.error);
     }
   });
   
-  // 文件列表已在上方清空并重新填充，无需额外清理
-  
   console.log('=== 当前文件列表状态 ===');
   console.log('fileListTemp长度:', fileListTemp.value.length);
   console.log('fileListTemp内容:', fileListTemp.value);
@@ -1415,267 +1447,26 @@ const handlePreview = async (file) => {
 
 // 显示图片预览
 const showImagePreview = (url, fileName) => {
-  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', {
+  Modal.info({
+    title: '图片预览',
+    content: 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
+        textAlign: 'center',
+        padding: '20px'
       }
     }, [
       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)'
+          maxHeight: '70vh',
+          objectFit: 'contain'
         }
       })
     ]),
-    
-    // 文件名
-    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: 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: '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,
+    width: '80%',
     footer: null,
-    closable: true,
-    okText: null,
-    cancelText: null
+    closable: true
   });
 };
 
@@ -1683,208 +1474,37 @@ const showImagePreview = (url, fileName) => {
 const showTextPreview = async (blob, fileName) => {
   try {
     const text = await blob.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: h('div', {
+      title: '文本预览',
+      content: h('div', {
         style: {
-          display: 'flex',
-          alignItems: 'center',
-          gap: '12px',
-          fontSize: '20px',
-          fontWeight: '600',
-          color: '#2c3e50',
           textAlign: 'center',
-          width: '100%',
-          justifyContent: 'center'
+          padding: '20px'
         }
       }, [
-        h('span', { style: { fontSize: '24px' } }, '📄'),
-        `文本预览 - ${fileName}`
+        h('div', {
+          style: {
+            maxWidth: '100%',
+            maxHeight: '70vh',
+            overflow: 'auto',
+            backgroundColor: '#f8f9fa',
+            border: '1px solid #e9ecef',
+            borderRadius: '8px',
+            padding: '20px',
+            fontFamily: "'Consolas', 'Monaco', 'Courier New', monospace",
+            fontSize: '14px',
+            lineHeight: '1.6',
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+            color: '#333',
+            textAlign: 'left'
+          }
+        }, text)
       ]),
-      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,
+      width: '80%',
       footer: null,
-      closable: true,
-      okText: null,
-      cancelText: null
+      closable: true
     });
   } catch (error) {
     console.error('文本预览失败:', error);
@@ -1895,6 +1515,7 @@ const showTextPreview = async (blob, fileName) => {
 // 显示视频预览
 const showVideoPreview = (url, fileName) => {
   const container = h('div', {
+    class: 'preview-container',
     style: {
       width: '100%',
       height: '100%',
@@ -1902,40 +1523,24 @@ const showVideoPreview = (url, fileName) => {
       flexDirection: 'column',
       alignItems: 'center',
       justifyContent: 'center',
-      padding: '24px',
+      padding: '20px',
       boxSizing: 'border-box',
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      borderRadius: '16px',
-      position: 'relative',
-      overflow: 'hidden'
+      background: '#f8fafc !important'
     }
   }, [
-    // 背景装饰
-    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
+        backgroundColor: '#ffffff',
+        borderRadius: '8px',
+        padding: '20px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+        border: '1px solid #e2e8f0',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
       }
     }, [
       h('video', {
@@ -1944,34 +1549,41 @@ const showVideoPreview = (url, fileName) => {
         style: {
           width: '100%',
           maxHeight: '70vh',
-          borderRadius: '16px',
+          borderRadius: '8px',
           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'
+          boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+          border: '1px solid #e2e8f0'
         }
       })
     ]),
     
-    // 文件名
+    // 文件信息栏
     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
+        marginTop: '16px',
+        padding: '12px 16px',
+        backgroundColor: '#ffffff',
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+        border: '1px solid #e2e8f0',
+        width: '100%',
+        maxWidth: '1000px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '16px',
+        fontSize: '14px',
+        color: '#2c3e50'
       }
-    }, fileName)
+    }, [
+      h('span', { style: { display: 'flex', alignItems: 'center', gap: '6px' } }, [
+        h('span', { style: { fontSize: '16px' } }, '🎬'),
+        fileName
+      ]),
+      h('span', { style: { color: '#666', fontSize: '13px' } }, '|'),
+      h('span', { style: { color: '#666', fontSize: '13px' } }, '视频文件'),
+      h('span', { style: { color: '#666', fontSize: '13px' } }, '|'),
+      h('span', { style: { color: '#666', fontSize: '13px' } }, new Date().toLocaleString('zh-CN'))
+    ])
   ]);
 
   Modal.info({
@@ -1979,32 +1591,41 @@ const showVideoPreview = (url, fileName) => {
       style: {
         display: 'flex',
         alignItems: 'center',
-        gap: '12px',
-        fontSize: '20px',
+        gap: '8px',
+        fontSize: '16px',
         fontWeight: '600',
-        color: '#2c3e50',
-        textAlign: 'center',
-        width: '100%',
-        justifyContent: 'center'
+        color: '#2c3e50'
       }
     }, [
-      h('span', { style: { fontSize: '24px' } }, '🎬'),
+      h('span', { style: { fontSize: '18px' } }, '🎬'),
       '视频预览'
     ]),
     content: container,
     width: '90%',
     style: { 
-      maxWidth: '1400px',
+      maxWidth: '1200px',
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
-      borderRadius: '20px',
+      borderRadius: '8px',
       overflow: 'hidden',
-      boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
-      border: '3px solid rgba(255,255,255,0.2)'
+      boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
+      border: '1px solid #e2e8f0',
+      zIndex: 10000
     },
     mask: true,
     maskClosable: true,
+    maskStyle: {
+      backgroundColor: 'rgba(0, 0, 0, 0.6)',
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      width: '100vw',
+      height: '100vh',
+      zIndex: 9999
+    },
     footer: null,
     closable: true,
     okText: null,
@@ -2015,6 +1636,7 @@ const showVideoPreview = (url, fileName) => {
 // 显示音频预览
 const showAudioPreview = (url, fileName) => {
   const container = h('div', {
+    class: 'preview-container',
     style: {
       width: '100%',
       height: '100%',
@@ -2022,49 +1644,30 @@ const showAudioPreview = (url, fileName) => {
       flexDirection: 'column',
       alignItems: 'center',
       justifyContent: 'center',
-      padding: '24px',
+      padding: '20px',
       boxSizing: 'border-box',
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      borderRadius: '16px',
-      position: 'relative',
-      overflow: 'hidden'
+      background: '#f8fafc !important'
     }
   }, [
-    // 背景装饰
-    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,
+        backgroundColor: '#ffffff',
+        borderRadius: '8px',
+        padding: '32px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+        border: '1px solid #e2e8f0',
         textAlign: 'center'
       }
     }, [
       // 音频图标
       h('div', {
         style: {
-          fontSize: '64px',
-          marginBottom: '24px',
-          animation: 'pulse 2s ease-in-out infinite'
+          fontSize: '48px',
+          marginBottom: '20px',
+          color: '#165DFF'
         }
       }, '🎵'),
       
@@ -2074,26 +1677,54 @@ const showAudioPreview = (url, fileName) => {
         controls: true,
         style: {
           width: '100%',
-          height: '50px',
-          borderRadius: '12px',
-          marginBottom: '20px'
+          height: '40px',
+          borderRadius: '6px',
+          marginBottom: '16px'
         }
       }),
       
       // 文件名
       h('div', {
         style: {
-          fontSize: '16px',
+          fontSize: '14px',
           color: '#2c3e50',
           wordBreak: 'break-all',
           textAlign: 'center',
-          padding: '12px 16px',
-          backgroundColor: 'rgba(102, 126, 234, 0.1)',
-          borderRadius: '12px',
+          padding: '8px 12px',
+          backgroundColor: '#f8fafc',
+          borderRadius: '6px',
           fontWeight: '500',
-          border: '1px solid rgba(102, 126, 234, 0.2)'
+          border: '1px solid #e2e8f0'
         }
       }, fileName)
+    ]),
+    
+    // 文件信息栏
+    h('div', {
+      style: {
+        marginTop: '16px',
+        padding: '12px 16px',
+        backgroundColor: '#ffffff',
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+        border: '1px solid #e2e8f0',
+        width: '100%',
+        maxWidth: '500px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '16px',
+        fontSize: '14px',
+        color: '#2c3e50'
+      }
+    }, [
+      h('span', { style: { display: 'flex', alignItems: 'center', gap: '6px' } }, [
+        h('span', { style: { fontSize: '16px' } }, '🎵'),
+        fileName
+      ]),
+      h('span', { style: { color: '#666', fontSize: '13px' } }, '|'),
+      h('span', { style: { color: '#666', fontSize: '13px' } }, '音频文件'),
+      h('span', { style: { color: '#666', fontSize: '13px' } }, '|'),
+      h('span', { style: { color: '#666', fontSize: '13px' } }, new Date().toLocaleString('zh-CN'))
     ])
   ]);
 
@@ -2102,16 +1733,13 @@ const showAudioPreview = (url, fileName) => {
       style: {
         display: 'flex',
         alignItems: 'center',
-        gap: '12px',
-        fontSize: '20px',
+        gap: '8px',
+        fontSize: '16px',
         fontWeight: '600',
-        color: '#2c3e50',
-        textAlign: 'center',
-        width: '100%',
-        justifyContent: 'center'
+        color: '#2c3e50'
       }
     }, [
-      h('span', { style: { fontSize: '24px' } }, '🎵'),
+      h('span', { style: { fontSize: '18px' } }, '🎵'),
       '音频预览'
     ]),
     content: container,
@@ -2121,13 +1749,25 @@ const showAudioPreview = (url, fileName) => {
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
-      borderRadius: '20px',
+      borderRadius: '8px',
       overflow: 'hidden',
-      boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
-      border: '3px solid rgba(255,255,255,0.2)'
+      boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
+      border: '1px solid #e2e8f0',
+      zIndex: 10000
     },
     mask: true,
     maskClosable: true,
+    maskStyle: {
+      backgroundColor: 'rgba(0, 0, 0, 0.6)',
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      width: '100vw',
+      height: '100vh',
+      zIndex: 9999
+    },
     footer: null,
     closable: true,
     okText: null,
@@ -2341,6 +1981,25 @@ const handleCreateFolder = () => {
 
 // 打开上传文件对话框
 const handleUploadFile = () => {
+  // 清空文件列表，避免显示之前上传的文件
+  fileListTemp.value = [];
+  
+  // 重置上传组件状态
+  if (uploadRef.value) {
+    try {
+      uploadRef.value.reset();
+      // 强制清空组件的内部文件列表
+      if (uploadRef.value.fileList) {
+        uploadRef.value.fileList = [];
+      }
+      if (uploadRef.value.fileListTemp) {
+        uploadRef.value.fileListTemp = [];
+      }
+    } catch (error) {
+      console.log('重置上传组件时出错:', error);
+    }
+  }
+  
   uploadForm.folderId = currentFolderId.value || '';
   uploadDialogVisible.value = true;
 };
@@ -2361,6 +2020,41 @@ watch(currentFolderId, (newId) => {
   }
 });
 
+// 监听上传对话框显示状态，确保文件列表清空
+watch(uploadDialogVisible, (visible) => {
+  if (visible) {
+    console.log('=== 上传对话框已显示，确保文件列表清空 ===');
+    // 立即清空文件列表
+    fileListTemp.value = [];
+    console.log('✅ 已清空文件列表');
+    
+    // 强制重置上传组件
+    if (uploadRef.value) {
+      try {
+        uploadRef.value.reset();
+        // 强制清空组件的内部文件列表
+        if (uploadRef.value.fileList) {
+          uploadRef.value.fileList = [];
+        }
+        if (uploadRef.value.fileListTemp) {
+          uploadRef.value.fileListTemp = [];
+        }
+        console.log('✅ 已重置上传组件');
+      } catch (error) {
+        console.log('❌ 重置上传组件时出错:', error);
+      }
+    }
+    
+    // 延迟再次清空，确保处理完所有可能的触发
+    setTimeout(() => {
+      fileListTemp.value = [];
+      console.log('✅ 延迟清空文件列表');
+    }, 100);
+  }
+});
+
+
+
 // 初始化加载
 onMounted(() => {
   initData();
@@ -3072,57 +2766,106 @@ onMounted(() => {
 
 /* 预览弹窗样式增强 */
 :deep(.arco-modal) {
-  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: slideIn 0.2s ease-out;
+  z-index: 10000 !important;
 }
 
+/* 确保遮罩覆盖整个屏幕 */
 :deep(.arco-modal-mask) {
-  animation: fadeIn 0.3s ease;
-  backdrop-filter: blur(8px);
+  animation: fadeIn 0.2s ease;
+  background-color: rgba(0, 0, 0, 0.6) !important;
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  z-index: 9999 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  outline: none !important;
+  box-sizing: border-box !important;
 }
 
 :deep(.arco-modal-content) {
-  border-radius: 20px !important;
+  border-radius: 8px !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;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
+  border: 1px solid #e2e8f0 !important;
+  background: #ffffff !important;
+}
+
+:deep(.arco-modal-body) {
+  background: #f8fafc !important;
+  padding: 0 !important;
+}
+
+/* 强制覆盖所有可能的背景样式 */
+:deep(.arco-modal-body > div) {
+  background: #f8fafc !important;
+}
+
+:deep(.arco-modal-body > div > div) {
+  background: #f8fafc !important;
+}
+
+/* 确保预览弹窗内容区域使用正确的背景 */
+:deep(.arco-modal-body .preview-container) {
+  background: #f8fafc !important;
+}
+
+/* 强制覆盖所有预览弹窗的背景 */
+:deep(.arco-modal-body) {
+  background: #f8fafc !important;
+}
+
+:deep(.arco-modal-body > *) {
+  background: #f8fafc !important;
+}
+
+/* 确保没有渐变背景 */
+:deep(.arco-modal-body *[style*="linear-gradient"]) {
+  background: #f8fafc !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;
+  background: #ffffff;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 16px 20px;
 }
 
 :deep(.arco-modal-title) {
   font-weight: 600;
   color: #2c3e50;
+  font-size: 16px;
 }
 
 :deep(.arco-modal-close) {
-  background: rgba(255,255,255,0.9);
+  background: #f8fafc;
   border-radius: 50%;
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.3s ease;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  transition: all 0.2s ease;
+  border: 1px solid #e2e8f0;
   
   &:hover {
-    background: rgba(255,255,255,1);
-    transform: scale(1.1);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    background: #e2e8f0;
+    color: #165DFF;
   }
 }
 
 /* 按钮悬停效果增强 */
 :deep(.arco-btn) {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.2s ease;
   
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
+    border-color: #165DFF;
+    color: #165DFF;
   }
   
   &:active {
diff --git a/src/views/operation-platform/data-processing/data-storage/index.vue b/src/views/operation-platform/data-processing/data-storage/index.vue
index 1c8b3f9..e881a02 100644
--- a/src/views/operation-platform/data-processing/data-storage/index.vue
+++ b/src/views/operation-platform/data-processing/data-storage/index.vue
@@ -83,8 +83,8 @@
       </a-tabs>
     </div>
 
-    <!-- 文件预览模态框 -->
-    <PreviewModal ref="previewModal" />
+    <!-- 文件预览模态框（待重新设计） -->
+    <!-- <PreviewModal ref="previewModal" /> -->
   </GiPageLayout>
 </template>
 
@@ -92,8 +92,12 @@
 import { ref, reactive, computed, onMounted } from 'vue'
 import { Message } from '@arco-design/web-vue'
 import type { TableColumnData } from '@arco-design/web-vue'
+<<<<<<< HEAD
 import PreviewModal from './components/PreviewModal.vue'
 import rawData from './components/raw-data.vue'
+=======
+
+>>>>>>> 16743cfc7f885acdff70e08f20ddb7795d638a83
 import {
   getProjectList,
   getTurbineList,
@@ -107,7 +111,8 @@ import {
 } from '@/apis/industrial-image'
 import DeformationTap from './components/DeformationTap.vue'
 
-const previewModal = ref()
+// 预览弹窗引用（待重新设计）
+// const previewModal = ref()
 // 活动选项卡
 const activeTab = ref('image')
 
@@ -323,18 +328,23 @@ const getImageUrl = (imagePath: string): string => {
   return `${baseUrl}${imagePath}`
 }
 
-// 预览文件
+// 预览文件（待重新设计预览弹窗）
 const previewFile = (file: any) => {
+<<<<<<< HEAD
   /* previewFileData.value = file
    previewModalVisible.value = true*/
 
+=======
+>>>>>>> 16743cfc7f885acdff70e08f20ddb7795d638a83
   const fileObj = {
     id: file.id,
     name: file.name,
-    url: getImageUrl(file.imagePath),
-    audios: file.audioList
+    url: getImageUrl(file.imagePath)
   }
-  previewModal.value.openPreview(fileObj)
+  // TODO: 重新设计预览弹窗后取消注释
+  // previewModal.value.openPreview(fileObj)
+  console.log('预览文件:', fileObj)
+  // 暂时禁用预览功能，等待重新设计
 }
 
 // 删除文件
diff --git a/src/views/project-management/contract/expense-contract/ContractDetail.vue b/src/views/project-management/contract/expense-contract/ContractDetail.vue
new file mode 100644
index 0000000..dbba383
--- /dev/null
+++ b/src/views/project-management/contract/expense-contract/ContractDetail.vue
@@ -0,0 +1,155 @@
+<template>
+  <a-spin :loading="loading">
+    <div v-if="contractDetail">
+      <a-descriptions
+          :column="1"
+          size="medium"
+          :label-style="{ width: '120px' }"
+      >
+        <a-descriptions-item label="合同编号">
+          {{ contractDetail.code }}
+        </a-descriptions-item>
+        <a-descriptions-item label="项目名称">
+          {{ contractDetail.projectName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="客户名称">
+          {{ contractDetail.customer }}
+        </a-descriptions-item>
+        <a-descriptions-item label="合同金额">
+          <span class="font-medium text-green-600">￥{{ (contractDetail.amount || 0).toLocaleString() }}</span>
+        </a-descriptions-item>
+        <a-descriptions-item label="已收款金额">
+          <span class="font-medium text-blue-600">￥{{ (contractDetail.receivedAmount || 0).toLocaleString() }}</span>
+        </a-descriptions-item>
+        <a-descriptions-item label="未收款金额">
+          <span class="font-medium text-orange-600">￥{{ (contractDetail.pendingAmount || 0).toLocaleString() }}</span>
+        </a-descriptions-item>
+        <a-descriptions-item label="签署日期">
+          {{ contractDetail.signDate }}
+        </a-descriptions-item>
+        <a-descriptions-item label="履约期限">
+          {{ contractDetail.performanceDeadline }}
+        </a-descriptions-item>
+        <a-descriptions-item label="付款日期">
+          {{ contractDetail.paymentDate }}
+        </a-descriptions-item>
+        <a-descriptions-item label="合同状态">
+          <a-tag :color="getStatusColor(contractDetail.contractStatus)">
+            {{ getStatusText(contractDetail.contractStatusLabel || contractDetail.contractStatus) }}
+          </a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item label="销售人员">
+          {{ contractDetail.salespersonName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="销售部门">
+          {{ contractDetail.salespersonDeptName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="产品服务">
+          {{ contractDetail.productService }}
+        </a-descriptions-item>
+        <a-descriptions-item label="备注">
+          {{ contractDetail.notes }}
+        </a-descriptions-item>
+      </a-descriptions>
+    </div>
+    <div v-else-if="!loading" class="empty-container">
+      <a-empty description="暂无信息" />
+    </div>
+  </a-spin>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import http from '@/utils/http'
+import { Message } from '@arco-design/web-vue'
+
+interface ContractDetail {
+  contractId: string
+  customer: string
+  code: string
+  projectId: string
+  type: string
+  productService: string
+  paymentDate: string | null
+  performanceDeadline: string | null
+  paymentAddress: string
+  amount: number
+  accountNumber: string
+  notes: string
+  contractStatus: string
+  contractText: string | null
+  projectName: string
+  salespersonName: string | null
+  salespersonDeptName: string
+  settlementAmount: number | null
+  receivedAmount: number | null
+  contractStatusLabel: string | null
+  createBy: string | null
+  updateBy: string | null
+  createTime: string
+  updateTime: string
+  page: number
+  pageSize: number
+  signDate: string
+  duration: string
+  pendingAmount?: number
+}
+
+const props = defineProps({
+  contractId: {
+    type: String,
+    required: true
+  }
+})
+
+const contractDetail = ref<ContractDetail | null>(null)
+const loading = ref(false)
+
+const getStatusColor = (status: string) => {
+  const colorMap: Record<string, string> = {
+    未确认: 'gray',
+    待审批: 'orange',
+    已签署: 'blue',
+    执行中: 'cyan',
+    已完成: 'green',
+    已终止: 'red'
+  }
+  return colorMap[status] || 'gray'
+}
+
+const getStatusText = (status: string) => {
+  return status || '未知状态'
+}
+
+const fetchContractDetail = async () => {
+  try {
+    loading.value = true
+    const response = await http.get(`/contract/${props.contractId}`)
+    if (response.code === 200) {
+      contractDetail.value = response.data
+      // 计算未收款金额
+      if (contractDetail.value) {
+        contractDetail.value.pendingAmount = (contractDetail.value.amount || 0) - (contractDetail.value.receivedAmount || 0)
+      }
+    } else {
+      Message.error(response.msg || '获取合同详情失败')
+    }
+  } catch (error) {
+    console.error('获取合同详情失败:', error)
+    Message.error('获取合同详情失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchContractDetail()
+})
+</script>
+
+<style scoped>
+.empty-container {
+  text-align: center;
+  padding: 40px 0;
+}
+</style>
diff --git a/src/views/project-management/contract/expense-contract/ContractEdit.vue b/src/views/project-management/contract/expense-contract/ContractEdit.vue
new file mode 100644
index 0000000..4ced636
--- /dev/null
+++ b/src/views/project-management/contract/expense-contract/ContractEdit.vue
@@ -0,0 +1,122 @@
+<template>
+  <a-form :model="contractData" layout="vertical">
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="code" label="合同编号">
+          <a-input v-model="contractData.code" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item field="projectName" label="项目名称">
+          <a-input v-model="contractData.projectName" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="customer" label="客户名称">
+          <a-input v-model="contractData.customer" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item field="amount" label="合同金额">
+          <a-input-number v-model="contractData.amount" style="width: 100%" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="accountNumber" label="收款账号">
+          <a-input v-model="contractData.accountNumber" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item field="contractStatus" label="合同状态">
+          <a-select v-model="contractData.contractStatus">
+            <a-option value="未确认">未确认</a-option>
+            <a-option value="待审批">待审批</a-option>
+            <a-option value="已签署">已签署</a-option>
+            <a-option value="执行中">执行中</a-option>
+            <a-option value="已完成">已完成</a-option>
+            <a-option value="已终止">已终止</a-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="signDate" label="签订日期">
+          <a-date-picker v-model="contractData.signDate" style="width: 100%" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item field="performanceDeadline" label="履约期限">
+          <a-date-picker v-model="contractData.performanceDeadline" style="width: 100%" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="paymentDate" label="付款日期">
+          <a-date-picker v-model="contractData.paymentDate" style="width: 100%" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item field="productService" label="产品或服务">
+          <a-input v-model="contractData.productService" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-form-item field="paymentAddress" label="付款地址">
+      <a-input v-model="contractData.paymentAddress" />
+    </a-form-item>
+
+    <a-form-item field="notes" label="备注">
+      <a-textarea v-model="contractData.notes" />
+    </a-form-item>
+
+    <a-form-item field="contractText" label="合同内容">
+      <a-textarea v-model="contractData.contractText" />
+    </a-form-item>
+  </a-form>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { ContractItem } from './index.vue'
+
+const props = defineProps<{
+  contractData: ContractItem
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:contractData', data: ContractItem): void
+}>()
+
+const contractData = ref({ ...props.contractData })
+
+// 监听props变化更新内部数据
+watch(
+  () => props.contractData,
+  (newVal) => {
+    if (newVal) {
+      contractData.value = { ...newVal }
+    }
+  },
+  { immediate: true },
+)
+
+// 监听内部数据变化并触发更新事件
+watch(
+  contractData,
+  (newVal) => {
+    emit('update:contractData', newVal)
+  },
+  { deep: true },
+)
+</script>
diff --git a/src/views/project-management/contract/expense-contract/index.vue b/src/views/project-management/contract/expense-contract/index.vue
index 871f4c1..a0c3eaf 100644
--- a/src/views/project-management/contract/expense-contract/index.vue
+++ b/src/views/project-management/contract/expense-contract/index.vue
@@ -1,28 +1,28 @@
 <template>
   <GiPageLayout>
     <GiTable
-      row-key="id"
-      title="支出合同管理"
-      :data="dataList"
-      :columns="tableColumns"
-      :loading="loading"
-      :scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
-      :pagination="pagination"
-      @page-change="onPageChange"
-      @page-size-change="onPageSizeChange"
-      @refresh="search"
+        row-key="id"
+        title="支出合同管理"
+        :data="dataList"
+        :columns="tableColumns"
+        :loading="loading"
+        :scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
+        :pagination="pagination"
+        @page-change="onPageChange"
+        @page-size-change="onPageSizeChange"
+        @refresh="search"
     >
       <template #top>
-        <GiForm 
-          v-model="searchForm" 
-          search 
-          :columns="queryFormColumns" 
-          size="medium" 
-          @search="search" 
-          @reset="reset"
+        <GiForm
+            v-model="searchForm"
+            search
+            :columns="queryFormColumns"
+            size="medium"
+            @search="search"
+            @reset="reset"
         />
       </template>
-      
+
       <template #toolbar-left>
         <a-space>
           <a-button type="primary" @click="openAddModal">
@@ -35,51 +35,113 @@
           </a-button>
         </a-space>
       </template>
-      
+
       <!-- 合同状态 -->
       <template #status="{ record }">
-        <a-tag :color="getStatusColor(record.status)">
-          {{ getStatusText(record.status) }}
+        <a-tag :color="getStatusColor(record.contractStatus)">
+          {{ getStatusText(record.contractStatusLabel || record.contractStatus) }}
         </a-tag>
       </template>
-      
+
       <!-- 合同金额 -->
       <template #contractAmount="{ record }">
-        <span class="font-medium text-red-600">￥{{ record.contractAmount.toLocaleString() }}万</span>
+        <span class="font-medium text-green-600">￥{{ (record.amount || 0).toLocaleString() }}</span>
       </template>
-      
-      <!-- 已付款金额 -->
-      <template #paidAmount="{ record }">
-        <span class="font-medium text-orange-600">￥{{ record.paidAmount.toLocaleString() }}万</span>
+
+      <!-- 已收款金额 -->
+      <template #receivedAmount="{ record }">
+        <span class="font-medium text-blue-600">￥{{ (record.receivedAmount || 0).toLocaleString() }}</span>
       </template>
-      
-      <!-- 操作列 -->
+
       <template #action="{ record }">
         <a-space>
           <a-link @click="viewDetail(record)">详情</a-link>
-          <a-link @click="editRecord(record)" v-if="record.status === 'draft'">编辑</a-link>
-          <a-link @click="approveContract(record)" v-if="record.status === 'pending'">审批</a-link>
-          <a-link @click="viewPayment(record)">付款记录</a-link>
+          <a-link v-if="record.contractStatus === '未确认'" @click="editRecord(record)">编辑</a-link>
+          <a-link v-if="record.contractStatus === '待审批'" @click="approveContract(record)">审批</a-link>
+          <a-link @click="viewPayment(record)">收款记录</a-link>
+          <a-link v-if="record.contractStatus !== '已签署' && record.contractStatus !== '已完成'" @click="deleteContract(record)">删除</a-link>
         </a-space>
       </template>
     </GiTable>
+
+    <!-- 合同详情弹窗 -->
+    <a-modal
+        v-model:visible="showDetailModal"
+        title="合同详情"
+        :width="800"
+        :footer="false"
+        @cancel="closeDetailModal"
+    >
+      <ContractDetail v-if="showDetailModal" :contract-id="selectedContractId" />
+    </a-modal>
+
+    <!-- 合同编辑弹窗 -->
+    <a-modal
+        v-model:visible="showEditModal"
+        title="编辑合同"
+        :width="800"
+        @cancel="closeEditModal"
+        @before-ok="handleEditSubmit"
+    >
+      <ContractEdit
+          v-if="showEditModal"
+          :contract-data="selectedContractData"
+          @update:contract-data="handleContractDataUpdate"
+      />
+    </a-modal>
   </GiPageLayout>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
-import { Message } from '@arco-design/web-vue'
+import { onMounted, reactive, ref } from 'vue'
+import { Message, Modal } from '@arco-design/web-vue'
 import type { TableColumnData } from '@arco-design/web-vue'
+import ContractEdit from './ContractEdit.vue'
+
+import ContractDetail from './ContractDetail.vue'
+import http from '@/utils/http'
+
+// 接口数据类型定义
+interface ContractItem {
+  contractId: string
+  customer: string
+  code: string
+  projectId: string
+  type: string
+  productService: string
+  paymentDate: string | null
+  performanceDeadline: string | null
+  paymentAddress: string
+  amount: number
+  accountNumber: string
+  notes: string
+  contractStatus: string
+  contractText: string | null
+  projectName: string
+  salespersonName: string | null
+  salespersonDeptName: string
+  settlementAmount: number | null
+  receivedAmount: number | null
+  contractStatusLabel: string | null
+  createBy: string | null
+  updateBy: string | null
+  createTime: string
+  updateTime: string
+  page: number
+  pageSize: number
+  signDate: string
+  duration: string
+}
 
 // 搜索表单
-let searchForm = reactive({
+const searchForm = reactive({
   contractName: '',
   contractCode: '',
-  supplier: '',
+  client: '',
   status: '',
   signDate: '',
   page: 1,
-  size: 10
+  size: 10,
 })
 
 // 查询条件配置
@@ -89,16 +151,16 @@ const queryFormColumns = [
     label: '合同名称',
     type: 'input' as const,
     props: {
-      placeholder: '请输入合同名称'
-    }
+      placeholder: '请输入合同名称',
+    },
   },
   {
-    field: 'supplier',
-    label: '供应商',
+    field: 'client',
+    label: '客户',
     type: 'input' as const,
     props: {
-      placeholder: '请输入供应商名称'
-    }
+      placeholder: '请输入客户名称',
+    },
   },
   {
     field: 'status',
@@ -107,147 +169,121 @@ const queryFormColumns = [
     props: {
       placeholder: '请选择合同状态',
       options: [
-        { label: '草稿', value: 'draft' },
-        { label: '待审批', value: 'pending' },
-        { label: '已签署', value: 'signed' },
-        { label: '执行中', value: 'executing' },
-        { label: '已完成', value: 'completed' },
-        { label: '已终止', value: 'terminated' }
-      ]
-    }
-  }
+        { label: '未确认', value: '未确认' },
+        { label: '待审批', value: '待审批' },
+        { label: '已签署', value: '已签署' },
+        { label: '执行中', value: '执行中' },
+        { label: '已完成', value: '已完成' },
+        { label: '已终止', value: '已终止' },
+      ],
+    },
+  },
 ]
 
 // 表格列配置
 const tableColumns: TableColumnData[] = [
-  { title: '合同编号', dataIndex: 'contractCode', width: 150 },
-  { title: '合同名称', dataIndex: 'contractName', width: 250, ellipsis: true, tooltip: true },
-  { title: '供应商名称', dataIndex: 'supplier', width: 200, ellipsis: true, tooltip: true },
-  { title: '合同类型', dataIndex: 'contractType', width: 120 },
-  { title: '合同金额', dataIndex: 'contractAmount', slotName: 'contractAmount', width: 120 },
-  { title: '已付款金额', dataIndex: 'paidAmount', slotName: 'paidAmount', width: 120 },
-  { title: '未付款金额', dataIndex: 'unpaidAmount', width: 120 },
+  { title: '合同编号', dataIndex: 'code', width: 150 },
+  { title: '项目名称', dataIndex: 'projectName', width: 250, ellipsis: true, tooltip: true },
+  { title: '客户名称', dataIndex: 'customer', width: 200, ellipsis: true, tooltip: true },
+  { title: '合同金额', dataIndex: 'amount', slotName: 'contractAmount', width: 120 },
+  { title: '已收款金额', dataIndex: 'receivedAmount', slotName: 'receivedAmount', width: 120 },
+  { title: '未收款金额', dataIndex: 'pendingAmount', width: 120 },
   { title: '签署日期', dataIndex: 'signDate', width: 120 },
-  { title: '开始日期', dataIndex: 'startDate', width: 120 },
-  { title: '结束日期', dataIndex: 'endDate', width: 120 },
-  { title: '合同状态', dataIndex: 'status', slotName: 'status', width: 100 },
-  { title: '项目关联', dataIndex: 'relatedProject', width: 200, ellipsis: true, tooltip: true },
-  { title: '采购负责人', dataIndex: 'purchaseManager', width: 100 },
-  { title: '付款方式', dataIndex: 'paymentMethod', width: 100 },
-  { title: '备注', dataIndex: 'remark', width: 200, ellipsis: true, tooltip: true },
-  { title: '操作', slotName: 'action', width: 200, fixed: 'right' }
+  { title: '履约期限', dataIndex: 'performanceDeadline', width: 120 },
+  { title: '付款日期', dataIndex: 'paymentDate', width: 120 },
+  { title: '合同状态', dataIndex: 'contractStatus', slotName: 'status', width: 100 },
+  { title: '销售人员', dataIndex: 'salespersonName', width: 100 },
+  { title: '销售部门', dataIndex: 'salespersonDeptName', width: 100 },
+  { title: '产品服务', dataIndex: 'productService', width: 120, ellipsis: true, tooltip: true },
+  { title: '备注', dataIndex: 'notes', width: 200, ellipsis: true, tooltip: true },
+  { title: '操作', slotName: 'action', width: 200, fixed: 'right' },
 ]
-
 // 数据状态
 const loading = ref(false)
-const dataList = ref([
-  {
-    id: 1,
-    contractCode: 'EC2024001',
-    contractName: '风电检测设备采购合同',
-    supplier: '深圳市智能检测设备有限公司',
-    contractType: '设备采购',
-    contractAmount: 120,
-    paidAmount: 60,
-    unpaidAmount: 60,
-    signDate: '2024-02-25',
-    startDate: '2024-03-01',
-    endDate: '2024-03-31',
-    status: 'executing',
-    relatedProject: '华能新能源风电场叶片检测服务项目',
-    purchaseManager: '李采购经理',
-    paymentMethod: '银行转账',
-    remark: '按合同约定分期付款'
-  },
-  {
-    id: 2,
-    contractCode: 'EC2024002',
-    contractName: '无人机检测服务外包合同',
-    supplier: '北京航天无人机技术有限公司',
-    contractType: '服务外包',
-    contractAmount: 85,
-    paidAmount: 25.5,
-    unpaidAmount: 59.5,
-    signDate: '2024-03-02',
-    startDate: '2024-03-05',
-    endDate: '2024-04-05',
-    status: 'executing',
-    relatedProject: '大唐风电场防雷检测项目',
-    purchaseManager: '王采购经理',
-    paymentMethod: '分期付款',
-    remark: '服务外包，按进度付款'
-  },
-  {
-    id: 3,
-    contractCode: 'EC2024003',
-    contractName: '检测车辆租赁合同',
-    supplier: '上海专业车辆租赁有限公司',
-    contractType: '车辆租赁',
-    contractAmount: 15,
-    paidAmount: 15,
-    unpaidAmount: 0,
-    signDate: '2024-01-20',
-    startDate: '2024-01-25',
-    endDate: '2024-02-25',
-    status: 'completed',
-    relatedProject: '中广核风电场设备维护服务项目',
-    purchaseManager: '刘采购经理',
-    paymentMethod: '月付',
-    remark: '租赁合同已完成'
+const dataList = ref<ContractItem[]>([])
+
+// API调用函数
+const fetchContractList = async () => {
+  try {
+    loading.value = true
+    const params = {
+      page: searchForm.page,
+      pageSize: searchForm.size,
+      contractName: searchForm.contractName,
+      code: searchForm.contractCode,
+      customer: searchForm.client,
+      contractStatus: searchForm.status,
+      signDate: searchForm.signDate,
+    }
+
+    const response = await http.get('/contract/list', params)
+
+    if (response.code === 200) {
+      // 过滤出类型为"收入合同"的数据
+      const allContracts = response.rows || []
+      const revenueContracts = allContracts.filter((item: ContractItem) => item.type === '支出合同')
+
+      // 计算未收款金额
+      dataList.value = revenueContracts.map((item: ContractItem) => ({
+        ...item,
+        pendingAmount: (item.amount || 0) - (item.receivedAmount || 0),
+      }))
+
+      pagination.total = Number.parseInt(response.total) || 0
+    } else {
+      Message.error(response.msg || '获取合同列表失败')
+      dataList.value = []
+    }
+  } catch (error) {
+    console.error('获取合同列表失败:', error)
+    Message.error('获取合同列表失败')
+    dataList.value = []
+  } finally {
+    loading.value = false
   }
-])
+}
 
 const pagination = reactive({
   current: 1,
   pageSize: 10,
-  total: 3,
+  total: 0,
   showTotal: true,
-  showPageSize: true
+  showPageSize: true,
 })
 
 // 获取状态颜色
 const getStatusColor = (status: string) => {
   const colorMap: Record<string, string> = {
-    'draft': 'gray',
-    'pending': 'orange',
-    'signed': 'blue',
-    'executing': 'cyan',
-    'completed': 'green',
-    'terminated': 'red'
+    未确认: 'gray',
+    待审批: 'orange',
+    已签署: 'blue',
+    执行中: 'cyan',
+    已完成: 'green',
+    已终止: 'red',
   }
   return colorMap[status] || 'gray'
 }
 
 // 获取状态文本
 const getStatusText = (status: string) => {
-  const textMap: Record<string, string> = {
-    'draft': '草稿',
-    'pending': '待审批',
-    'signed': '已签署',
-    'executing': '执行中',
-    'completed': '已完成',
-    'terminated': '已终止'
-  }
-  return textMap[status] || status
+  // 直接返回后端返回的状态文本，如果有contractStatusLabel则使用，否则使用contractStatus
+  return status || '未知状态'
 }
 
 // 搜索和重置
 const search = async () => {
-  loading.value = true
-  setTimeout(() => {
-    loading.value = false
-  }, 1000)
+  await fetchContractList()
 }
 
 const reset = () => {
   Object.assign(searchForm, {
     contractName: '',
     contractCode: '',
-    supplier: '',
+    client: '',
     status: '',
     signDate: '',
     page: 1,
-    size: 10
+    size: 10,
   })
   pagination.current = 1
   search()
@@ -277,23 +313,131 @@ const exportContract = () => {
   Message.info('导出合同功能开发中...')
 }
 
-const viewDetail = (record: any) => {
-  Message.info(`查看合同详情: ${record.contractName}`)
+// 显示合同编辑弹窗
+const showEditModal = ref(false)
+const selectedContractData = ref<ContractItem | null>(null)
+const editedContractData = ref<ContractItem | null>(null)
+
+const editRecord = (record: ContractItem) => {
+  // 确保所有必要的字段都存在
+  const completeRecord = {
+    ...record,
+    amount: record.amount || 0,
+    projectId: record.projectId || '',
+    type: record.type || '收入合同',
+    contractStatus: record.contractStatus || '未确认',
+  }
+
+  selectedContractData.value = completeRecord
+  showEditModal.value = true
 }
 
-const editRecord = (record: any) => {
-  Message.info(`编辑合同: ${record.contractName}`)
+const closeEditModal = () => {
+  showEditModal.value = false
+  selectedContractData.value = null
+  editedContractData.value = null
 }
 
-const approveContract = (record: any) => {
-  Message.info(`审批合同: ${record.contractName}`)
+const handleContractDataUpdate = (data: ContractItem) => {
+  editedContractData.value = data
 }
 
-const viewPayment = (record: any) => {
-  Message.info(`查看付款记录: ${record.contractName}`)
+const handleEditSubmit = async () => {
+  if (!editedContractData.value) return false;
+
+  try {
+    const requestData = {
+      ...editedContractData.value,
+      accountNumber: editedContractData.value.accountNumber || '',
+      amount: editedContractData.value.amount || 0,
+      code: editedContractData.value.code || '',
+      contractId: editedContractData.value.contractId,
+      contractStatus: editedContractData.value.contractStatus || '',
+      contractText: editedContractData.value.contractText || '',
+      customer: editedContractData.value.customer || '',
+      departmentId: editedContractData.value.departmentId || '',
+      duration: editedContractData.value.duration || '',
+      notes: editedContractData.value.notes || '',
+      paymentAddress: editedContractData.value.paymentAddress || '',
+      paymentDate: editedContractData.value.paymentDate || null,
+      performanceDeadline: editedContractData.value.performanceDeadline || null,
+      productService: editedContractData.value.productService || '',
+      projectId: editedContractData.value.projectId || '',
+      salespersonId: editedContractData.value.salespersonId || '',
+      signDate: editedContractData.value.signDate || null,
+      type: editedContractData.value.type || '',
+    };
+
+    console.log('Edited Contract Data:', requestData); // 打印请求数据以便调试
+
+    // 修改此处，直接向 /contract 发送 PUT 请求
+    const response = await http.put('/contract', requestData);
+
+    // 检查响应状态
+    if (response.status === 200 && response.code === 200) {
+      Message.success('合同编辑成功');
+      closeEditModal();
+      search(); // 刷新列表
+      return true;
+    } else {
+      Message.error(response.msg || '合同编辑失败');
+      return false;
+    }
+  } catch (error) {
+    console.error('合同编辑失败:', error);
+    Message.error('合同编辑失败: ' + (error.message || '请稍后再试'));
+    return false;
+  }
+}
+
+
+// 删除合同
+const deleteContract = async (record: ContractItem) => {
+  try {
+    await Modal.confirm({
+      title: '确认删除',
+      content: `确定要删除合同 "${record.projectName}" 吗？`,
+    })
+
+    const response = await http.delete(`/contract/${record.contractId}`)
+    if (response.code === 200) {
+      Message.success('合同删除成功')
+      search() // 刷新列表
+    } else {
+      Message.error(response.msg || '合同删除失败')
+    }
+  } catch (error) {
+    // 用户取消删除或请求失败
+    if (error !== 'cancel') {
+      console.error('合同删除失败:', error)
+      Message.error('合同删除失败')
+    }
+  }
+}
+
+// 显示合同详情弹窗
+const showDetailModal = ref(false)
+const selectedContractId = ref<string | null>(null)
+
+const viewDetail = (record: ContractItem) => {
+  selectedContractId.value = record.contractId
+  showDetailModal.value = true
+}
+
+const closeDetailModal = () => {
+  showDetailModal.value = false
+  selectedContractId.value = null
+}
+
+const approveContract = (record: ContractItem) => {
+  Message.info(`审批合同: ${record.projectName}`)
+}
+
+const viewPayment = (record: ContractItem) => {
+  Message.info(`查看收款记录: ${record.projectName}`)
 }
 
 onMounted(() => {
-  search()
+  fetchContractList()
 })
-</script> 
\ No newline at end of file
+</script>
diff --git a/src/views/project-management/contract/revenue-contract/ContractEdit.vue b/src/views/project-management/contract/revenue-contract/ContractEdit.vue
new file mode 100644
index 0000000..4ced636
--- /dev/null
+++ b/src/views/project-management/contract/revenue-contract/ContractEdit.vue
@@ -0,0 +1,122 @@
+<template>
+  <a-form :model="contractData" layout="vertical">
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="code" label="合同编号">
+          <a-input v-model="contractData.code" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item field="projectName" label="项目名称">
+          <a-input v-model="contractData.projectName" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="customer" label="客户名称">
+          <a-input v-model="contractData.customer" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item field="amount" label="合同金额">
+          <a-input-number v-model="contractData.amount" style="width: 100%" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="accountNumber" label="收款账号">
+          <a-input v-model="contractData.accountNumber" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item field="contractStatus" label="合同状态">
+          <a-select v-model="contractData.contractStatus">
+            <a-option value="未确认">未确认</a-option>
+            <a-option value="待审批">待审批</a-option>
+            <a-option value="已签署">已签署</a-option>
+            <a-option value="执行中">执行中</a-option>
+            <a-option value="已完成">已完成</a-option>
+            <a-option value="已终止">已终止</a-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="signDate" label="签订日期">
+          <a-date-picker v-model="contractData.signDate" style="width: 100%" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item field="performanceDeadline" label="履约期限">
+          <a-date-picker v-model="contractData.performanceDeadline" style="width: 100%" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="paymentDate" label="付款日期">
+          <a-date-picker v-model="contractData.paymentDate" style="width: 100%" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item field="productService" label="产品或服务">
+          <a-input v-model="contractData.productService" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-form-item field="paymentAddress" label="付款地址">
+      <a-input v-model="contractData.paymentAddress" />
+    </a-form-item>
+
+    <a-form-item field="notes" label="备注">
+      <a-textarea v-model="contractData.notes" />
+    </a-form-item>
+
+    <a-form-item field="contractText" label="合同内容">
+      <a-textarea v-model="contractData.contractText" />
+    </a-form-item>
+  </a-form>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { ContractItem } from './index.vue'
+
+const props = defineProps<{
+  contractData: ContractItem
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:contractData', data: ContractItem): void
+}>()
+
+const contractData = ref({ ...props.contractData })
+
+// 监听props变化更新内部数据
+watch(
+  () => props.contractData,
+  (newVal) => {
+    if (newVal) {
+      contractData.value = { ...newVal }
+    }
+  },
+  { immediate: true },
+)
+
+// 监听内部数据变化并触发更新事件
+watch(
+  contractData,
+  (newVal) => {
+    emit('update:contractData', newVal)
+  },
+  { deep: true },
+)
+</script>
diff --git a/src/views/project-management/contract/revenue-contract/index.vue b/src/views/project-management/contract/revenue-contract/index.vue
index 0e79d54..28d7b37 100644
--- a/src/views/project-management/contract/revenue-contract/index.vue
+++ b/src/views/project-management/contract/revenue-contract/index.vue
@@ -1,25 +1,25 @@
 <template>
   <GiPageLayout>
     <GiTable
-        row-key="id"
-        title="收入合同管理"
-        :data="dataList"
-        :columns="tableColumns"
-        :loading="loading"
-        :scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
-        :pagination="pagination"
-        @page-change="onPageChange"
-        @page-size-change="onPageSizeChange"
-        @refresh="search"
+      row-key="id"
+      title="收入合同管理"
+      :data="dataList"
+      :columns="tableColumns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
+      :pagination="pagination"
+      @page-change="onPageChange"
+      @page-size-change="onPageSizeChange"
+      @refresh="search"
     >
       <template #top>
         <GiForm
-            v-model="searchForm"
-            search
-            :columns="queryFormColumns"
-            size="medium"
-            @search="search"
-            @reset="reset"
+          v-model="searchForm"
+          search
+          :columns="queryFormColumns"
+          size="medium"
+          @search="search"
+          @reset="reset"
         />
       </template>
 
@@ -53,36 +53,53 @@
         <span class="font-medium text-blue-600">￥{{ (record.receivedAmount || 0).toLocaleString() }}</span>
       </template>
 
-      <!-- 操作列 -->
       <template #action="{ record }">
         <a-space>
           <a-link @click="viewDetail(record)">详情</a-link>
           <a-link v-if="record.contractStatus === '未确认'" @click="editRecord(record)">编辑</a-link>
           <a-link v-if="record.contractStatus === '待审批'" @click="approveContract(record)">审批</a-link>
           <a-link @click="viewPayment(record)">收款记录</a-link>
+          <a-link v-if="record.contractStatus !== '已签署' && record.contractStatus !== '已完成'" @click="deleteContract(record)">删除</a-link>
         </a-space>
       </template>
     </GiTable>
 
     <!-- 合同详情弹窗 -->
     <a-modal
-        v-model:visible="showDetailModal"
-        title="合同详情"
-        :width="800"
-        @cancel="closeDetailModal"
-        :footer="false"
+      v-model:visible="showDetailModal"
+      title="合同详情"
+      :width="800"
+      :footer="false"
+      @cancel="closeDetailModal"
     >
       <ContractDetail v-if="showDetailModal" :contract-id="selectedContractId" />
     </a-modal>
+
+    <!-- 合同编辑弹窗 -->
+    <a-modal
+      v-model:visible="showEditModal"
+      title="编辑合同"
+      :width="800"
+      @cancel="closeEditModal"
+      @before-ok="handleEditSubmit"
+    >
+      <ContractEdit
+        v-if="showEditModal"
+        :contract-data="selectedContractData"
+        @update:contract-data="handleContractDataUpdate"
+      />
+    </a-modal>
   </GiPageLayout>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { Message, Modal } from '@arco-design/web-vue'
 import type { TableColumnData } from '@arco-design/web-vue'
-import http from '@/utils/http'
+import ContractEdit from './ContractEdit.vue'
+
 import ContractDetail from './ContractDetail.vue'
+import http from '@/utils/http'
 
 // 接口数据类型定义
 interface ContractItem {
@@ -181,7 +198,6 @@ const tableColumns: TableColumnData[] = [
   { title: '备注', dataIndex: 'notes', width: 200, ellipsis: true, tooltip: true },
   { title: '操作', slotName: 'action', width: 200, fixed: 'right' },
 ]
-
 // 数据状态
 const loading = ref(false)
 const dataList = ref<ContractItem[]>([])
@@ -297,6 +313,108 @@ const exportContract = () => {
   Message.info('导出合同功能开发中...')
 }
 
+// 显示合同编辑弹窗
+const showEditModal = ref(false)
+const selectedContractData = ref<ContractItem | null>(null)
+const editedContractData = ref<ContractItem | null>(null)
+
+const editRecord = (record: ContractItem) => {
+  // 确保所有必要的字段都存在
+  const completeRecord = {
+    ...record,
+    amount: record.amount || 0,
+    projectId: record.projectId || '',
+    type: record.type || '收入合同',
+    contractStatus: record.contractStatus || '未确认',
+  }
+
+  selectedContractData.value = completeRecord
+  showEditModal.value = true
+}
+
+const closeEditModal = () => {
+  showEditModal.value = false
+  selectedContractData.value = null
+  editedContractData.value = null
+}
+
+const handleContractDataUpdate = (data: ContractItem) => {
+  editedContractData.value = data
+}
+
+const handleEditSubmit = async () => {
+  if (!editedContractData.value) return false;
+
+  try {
+    const requestData = {
+      ...editedContractData.value,
+      accountNumber: editedContractData.value.accountNumber || '',
+      amount: editedContractData.value.amount || 0,
+      code: editedContractData.value.code || '',
+      contractId: editedContractData.value.contractId,
+      contractStatus: editedContractData.value.contractStatus || '',
+      contractText: editedContractData.value.contractText || '',
+      customer: editedContractData.value.customer || '',
+      departmentId: editedContractData.value.departmentId || '',
+      duration: editedContractData.value.duration || '',
+      notes: editedContractData.value.notes || '',
+      paymentAddress: editedContractData.value.paymentAddress || '',
+      paymentDate: editedContractData.value.paymentDate || null,
+      performanceDeadline: editedContractData.value.performanceDeadline || null,
+      productService: editedContractData.value.productService || '',
+      projectId: editedContractData.value.projectId || '',
+      salespersonId: editedContractData.value.salespersonId || '',
+      signDate: editedContractData.value.signDate || null,
+      type: editedContractData.value.type || '',
+    };
+
+    console.log('Edited Contract Data:', requestData); // 打印请求数据以便调试
+
+    // 修改此处，直接向 /contract 发送 PUT 请求
+    const response = await http.put('/contract', requestData);
+
+    // 检查响应状态
+    if (response.status === 200 && response.code === 200) {
+      Message.success('合同编辑成功');
+      closeEditModal();
+      search(); // 刷新列表
+      return true;
+    } else {
+      Message.error(response.msg || '合同编辑失败');
+      return false;
+    }
+  } catch (error) {
+    console.error('合同编辑失败:', error);
+    Message.error('合同编辑失败: ' + (error.message || '请稍后再试'));
+    return false;
+  }
+}
+
+
+// 删除合同
+const deleteContract = async (record: ContractItem) => {
+  try {
+    await Modal.confirm({
+      title: '确认删除',
+      content: `确定要删除合同 "${record.projectName}" 吗？`,
+    })
+
+    const response = await http.delete(`/contract/${record.contractId}`)
+    if (response.code === 200) {
+      Message.success('合同删除成功')
+      search() // 刷新列表
+    } else {
+      Message.error(response.msg || '合同删除失败')
+    }
+  } catch (error) {
+    // 用户取消删除或请求失败
+    if (error !== 'cancel') {
+      console.error('合同删除失败:', error)
+      Message.error('合同删除失败')
+    }
+  }
+}
+
 // 显示合同详情弹窗
 const showDetailModal = ref(false)
 const selectedContractId = ref<string | null>(null)
@@ -311,10 +429,6 @@ const closeDetailModal = () => {
   selectedContractId.value = null
 }
 
-const editRecord = (record: ContractItem) => {
-  Message.info(`编辑合同: ${record.projectName}`)
-}
-
 const approveContract = (record: ContractItem) => {
   Message.info(`审批合同: ${record.projectName}`)
 }
diff --git a/src/views/project-management/personnel-dispatch/index.vue b/src/views/project-management/personnel-dispatch/index.vue
index 7903e24..57706a6 100644
--- a/src/views/project-management/personnel-dispatch/index.vue
+++ b/src/views/project-management/personnel-dispatch/index.vue
@@ -669,7 +669,7 @@ const closeProjectDetail = () => {
 const openPersonnelManagement = () => {
   if (currentProject.value && currentProject.value.id) {
     router.push({
-      path: '/project-management/projects/personnel-dispatch/construction-personnel',
+      path: '/project-management/personnel-dispatch/construction-personnel',
       query: { projectId: currentProject.value.id }
     })
   } else {
diff --git a/src/views/system-resource/device-management/approval/components/ApprovalSearch.vue b/src/views/system-resource/device-management/approval/components/ApprovalSearch.vue
index e90f809..f22658a 100644
--- a/src/views/system-resource/device-management/approval/components/ApprovalSearch.vue
+++ b/src/views/system-resource/device-management/approval/components/ApprovalSearch.vue
@@ -129,29 +129,18 @@ const debouncedSearch = debounce(() => {
 const search = () => {
   console.log('🔍 ApprovalSearch - 搜索按钮被点击')
   console.log('🔍 ApprovalSearch - 搜索表单数据:', searchForm)
-  console.log('🔍 ApprovalSearch - 搜索表单数据类型:', typeof searchForm)
-  console.log('🔍 ApprovalSearch - 搜索表单的键值对:')
-  Object.entries(searchForm).forEach(([key, value]) => {
-    console.log(`  ${key}: ${value} (${typeof value})`)
-  })
 
-  // 构建搜索参数
+  // 构建搜索参数 - 参考设备采购功能的实现
   const searchParams: EquipmentApprovalListReq = {
     equipmentName: searchForm.equipmentName || undefined,
     applicantName: searchForm.applicantName || undefined,
-    businessType: searchForm.businessType,
-    approvalStatus: searchForm.approvalStatus,
-    applyTimeStart: searchForm.applyTimeStart,
-    applyTimeEnd: searchForm.applyTimeEnd
+    businessType: searchForm.businessType || undefined,
+    approvalStatus: searchForm.approvalStatus || undefined,
+    applyTimeStart: searchForm.applyTimeStart || undefined,
+    applyTimeEnd: searchForm.applyTimeEnd || undefined,
   }
 
   console.log('🔍 ApprovalSearch - 发送的搜索参数:', searchParams)
-  console.log('🔍 ApprovalSearch - 发送参数的类型:', typeof searchParams)
-  console.log('🔍 ApprovalSearch - 发送参数的键值对:')
-  Object.entries(searchParams).forEach(([key, value]) => {
-    console.log(`  ${key}: ${value} (${typeof value})`)
-  })
-
   emit('search', searchParams)
 }
 
diff --git a/src/views/system-resource/device-management/approval/index.vue b/src/views/system-resource/device-management/approval/index.vue
index 858d248..c665c07 100644
--- a/src/views/system-resource/device-management/approval/index.vue
+++ b/src/views/system-resource/device-management/approval/index.vue
@@ -458,10 +458,10 @@ const loadData = async (searchParams?: EquipmentApprovalListReq) => {
 
   loading.value = true
   try {
+    // 构建完整的请求参数 - 参考设备采购功能的实现
     const params: EquipmentApprovalListReq = {
-      pageSize: pagination.pageSize || 10,
-      page: pagination.current || 1,
-      pageNum: pagination.current || 1, // 添加 pageNum 参数，以防后端期望这个名称
+      pageSize: pagination.pageSize,
+      page: pagination.current,
       ...(searchParams || {}),
     }
 
diff --git a/src/views/system-resource/device-management/procurement/components/ProcurementApplicationModal.vue b/src/views/system-resource/device-management/procurement/components/ProcurementApplicationModal.vue
new file mode 100644
index 0000000..bad19be
--- /dev/null
+++ b/src/views/system-resource/device-management/procurement/components/ProcurementApplicationModal.vue
@@ -0,0 +1,340 @@
+<template>
+  <a-modal
+    :visible="visible"
+    :title="modalTitle"
+    width="800px"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+    @update:visible="(value) => emit('update:visible', value)"
+    :confirm-loading="submitLoading"
+  >
+    <a-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      layout="vertical"
+      class="procurement-application-form"
+    >
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="设备名称" field="equipmentName">
+            <a-input 
+              v-model="formData.equipmentName" 
+              placeholder="请输入设备名称"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="设备类型" field="equipmentType">
+            <a-select 
+              v-model="formData.equipmentType" 
+              placeholder="请选择设备类型"
+              allow-clear
+            >
+              <a-option value="服务器">服务器</a-option>
+              <a-option value="网络设备">网络设备</a-option>
+              <a-option value="办公设备">办公设备</a-option>
+              <a-option value="计算机">计算机</a-option>
+              <a-option value="安防设备">安防设备</a-option>
+              <a-option value="显示设备">显示设备</a-option>
+              <a-option value="测试设备">测试设备</a-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="设备型号" field="equipmentModel">
+            <a-input 
+              v-model="formData.equipmentModel" 
+              placeholder="请输入设备型号"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="品牌" field="brand">
+            <a-input 
+              v-model="formData.brand" 
+              placeholder="请输入品牌"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="供应商名称" field="supplierName">
+            <a-input 
+              v-model="formData.supplierName" 
+              placeholder="请输入供应商名称"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="数量" field="quantity">
+            <a-input-number 
+              v-model="formData.quantity" 
+              placeholder="请输入数量"
+              :min="1"
+              :precision="0"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="预算金额" field="budgetAmount">
+            <a-input-number 
+              v-model="formData.budgetAmount" 
+              placeholder="请输入预算金额"
+              :min="0"
+              :precision="2"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="紧急程度" field="urgencyLevel">
+            <a-select 
+              v-model="formData.urgencyLevel" 
+              placeholder="请选择紧急程度"
+              allow-clear
+            >
+              <a-option value="LOW">低</a-option>
+              <a-option value="NORMAL">普通</a-option>
+              <a-option value="HIGH">高</a-option>
+              <a-option value="URGENT">紧急</a-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="采购类型" field="procurementType">
+            <a-select 
+              v-model="formData.procurementType" 
+              placeholder="请选择采购类型"
+              allow-clear
+            >
+              <a-option value="NEW_PURCHASE">新采购</a-option>
+              <a-option value="REPLACEMENT">更换</a-option>
+              <a-option value="UPGRADE">升级</a-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="预期交付日期" field="expectedDeliveryDate">
+            <a-date-picker 
+              v-model="formData.expectedDeliveryDate" 
+              placeholder="请选择预期交付日期"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      
+      <a-form-item label="申请原因" field="applyReason">
+        <a-textarea 
+          v-model="formData.applyReason" 
+          placeholder="请详细说明采购原因"
+          :rows="4"
+          allow-clear
+        />
+      </a-form-item>
+      
+      <a-form-item label="技术要求" field="technicalRequirements">
+        <a-textarea 
+          v-model="formData.technicalRequirements" 
+          placeholder="请描述设备的技术要求（可选）"
+          :rows="3"
+          allow-clear
+        />
+      </a-form-item>
+      
+      <a-form-item label="业务合理性说明" field="businessJustification">
+        <a-textarea 
+          v-model="formData.businessJustification" 
+          placeholder="请说明采购的业务合理性（可选）"
+          :rows="3"
+          allow-clear
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import { equipmentApprovalApi } from '@/apis/equipment/approval'
+
+interface Props {
+  visible: boolean
+  equipmentData?: any
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+  (e: 'success'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const modalTitle = ref('申请采购')
+const submitLoading = ref(false)
+const formRef = ref()
+
+// 表单数据
+const formData = reactive({
+  equipmentId: '', // 添加设备ID字段
+  equipmentName: '',
+  equipmentType: '',
+  equipmentModel: '',
+  brand: '',
+  supplierName: '',
+  quantity: 1,
+  budgetAmount: undefined,
+  urgencyLevel: 'NORMAL',
+  procurementType: 'NEW_PURCHASE',
+  expectedDeliveryDate: null,
+  applyReason: '',
+  technicalRequirements: '',
+  businessJustification: ''
+})
+
+// 表单验证规则
+const rules = {
+  equipmentId: [{ required: true, message: '设备ID不能为空' }],
+  equipmentName: [{ required: true, message: '请输入设备名称' }],
+  equipmentType: [{ required: true, message: '请选择设备类型' }],
+  quantity: [{ required: true, message: '请输入数量' }],
+  budgetAmount: [{ required: true, message: '请输入预算金额' }],
+  urgencyLevel: [{ required: true, message: '请选择紧急程度' }],
+  procurementType: [{ required: true, message: '请选择采购类型' }],
+  applyReason: [
+    { required: true, message: '请输入申请原因' },
+    { 
+      validator: (value: string) => {
+        if (!value || value.trim() === '') {
+          return new Error('申请原因不能为空')
+        }
+        return true
+      }
+    }
+  ]
+}
+
+// 监听设备数据变化，填充表单
+watch(() => props.equipmentData, (newData) => {
+  if (newData) {
+    // 填充设备数据到表单
+    Object.assign(formData, {
+      equipmentId: newData.equipmentId || '', // 添加设备ID
+      equipmentName: newData.equipmentName || '',
+      equipmentType: newData.equipmentType || '',
+      equipmentModel: newData.equipmentModel || '',
+      brand: newData.brand || '',
+      supplierName: newData.supplierName || '',
+      quantity: newData.quantity || 1,
+      budgetAmount: newData.unitPrice || undefined,
+      urgencyLevel: 'NORMAL',
+      procurementType: 'NEW_PURCHASE',
+      expectedDeliveryDate: null,
+      applyReason: '', // 申请原因需要用户填写
+      technicalRequirements: '',
+      businessJustification: ''
+    })
+  }
+}, { immediate: true })
+
+// 监听模态框显示状态
+watch(() => props.visible, (visible) => {
+  if (visible) {
+    // 模态框打开时，如果有设备数据则填充，否则重置表单
+    if (props.equipmentData) {
+      // 设备数据会在上面的 watch 中处理
+    } else {
+      // 没有设备数据时重置表单
+      formRef.value?.resetFields()
+    }
+  }
+})
+
+// 提交表单
+const handleSubmit = async () => {
+  try {
+    // 手动验证 applyReason 字段
+    if (!formData.applyReason || formData.applyReason.trim() === '') {
+      Message.error('请输入申请原因')
+      return
+    }
+    
+    await formRef.value.validate()
+    submitLoading.value = true
+    
+    const submitData = {
+      ...formData,
+      applyReason: formData.applyReason.trim(), // 确保去除空格
+      expectedDeliveryDate: formData.expectedDeliveryDate ? 
+        (formData.expectedDeliveryDate as any).format('YYYY-MM-DD') : null
+    }
+    
+    // 调试信息：打印提交的数据
+    console.log('提交的表单数据:', submitData)
+    console.log('applyReason 值:', submitData.applyReason)
+    console.log('applyReason 类型:', typeof submitData.applyReason)
+    console.log('applyReason 长度:', submitData.applyReason?.length)
+    
+    await equipmentApprovalApi.submitProcurementApplication(submitData)
+    
+    Message.success('采购申请提交成功')
+    emit('success')
+    handleCancel()
+  } catch (error: any) {
+    console.error('提交采购申请失败:', error)
+    Message.error(error?.message || '提交失败')
+  } finally {
+    submitLoading.value = false
+  }
+}
+
+// 取消
+const handleCancel = () => {
+  emit('update:visible', false)
+  // 清空用户输入的数据，保留设备基本信息
+  formData.equipmentId = ''
+  formData.applyReason = ''
+  formData.technicalRequirements = ''
+  formData.businessJustification = ''
+  formData.expectedDeliveryDate = null
+  formRef.value?.resetFields()
+}
+</script>
+
+<style scoped lang="scss">
+.procurement-application-form {
+  .arco-form-item {
+    margin-bottom: 16px;
+  }
+  
+  .arco-input,
+  .arco-select,
+  .arco-input-number,
+  .arco-date-picker {
+    border-radius: 6px;
+  }
+  
+  .arco-textarea {
+    border-radius: 6px;
+  }
+}
+</style>
diff --git a/src/views/system-resource/device-management/procurement/index.vue b/src/views/system-resource/device-management/procurement/index.vue
index d07edab..6dc9934 100644
--- a/src/views/system-resource/device-management/procurement/index.vue
+++ b/src/views/system-resource/device-management/procurement/index.vue
@@ -175,6 +175,19 @@
             <a-button type="text" size="small" @click="handleEdit(record)">
               编辑
             </a-button>
+            <!-- 申请采购按钮 -->
+            <a-button 
+              v-if="canApplyProcurement(record)"
+              type="primary" 
+              size="small" 
+              @click="handleApplyProcurement(record)"
+            >
+              申请采购
+            </a-button>
+            <!-- 显示审批状态 -->
+            <a-tag v-if="record.approvalStatus" :color="getApprovalStatusColor(record.approvalStatus)">
+              {{ getApprovalStatusText(record.approvalStatus) }}
+            </a-tag>
             <a-popconfirm
               content="确定要删除这条采购记录吗？"
               @ok="handleDelete(record)"
@@ -195,6 +208,13 @@
       :mode="modalMode"
       @success="handleModalSuccess"
     />
+
+    <!-- 采购申请弹窗 -->
+    <ProcurementApplicationModal
+      v-model:visible="applicationModalVisible"
+      :equipment-data="currentApplicationData"
+      @success="handleApplicationSuccess"
+    />
   </div>
 </template>
 
@@ -213,7 +233,9 @@ import {
 import message from '@arco-design/web-vue/es/message'
 import ProcurementModal from './components/ProcurementModal.vue'
 import ProcurementSearch from './components/ProcurementSearch.vue'
+import ProcurementApplicationModal from './components/ProcurementApplicationModal.vue'
 import { equipmentProcurementApi } from '@/apis/equipment/procurement'
+import { equipmentApprovalApi } from '@/apis/equipment/approval'
 import type { EquipmentListReq, EquipmentResp } from '@/apis/equipment/type'
 
 defineOptions({ name: 'EquipmentProcurement' })
@@ -243,6 +265,10 @@ const modalVisible = ref(false)
 const currentProcurement = ref<EquipmentResp | null>(null)
 const modalMode = ref<'add' | 'edit' | 'view'>('add')
 
+// 采购申请弹窗控制
+const applicationModalVisible = ref(false)
+const currentApplicationData = ref<EquipmentResp | null>(null)
+
 // 表格选择
 const selectedRowKeys = ref<string[]>([])
 const rowSelection = reactive({
@@ -611,6 +637,12 @@ const handleEdit = (record: EquipmentResp) => {
   modalVisible.value = true
 }
 
+// 申请采购
+const handleApplyProcurement = (record: EquipmentResp) => {
+  currentApplicationData.value = { ...record }
+  applicationModalVisible.value = true
+}
+
 // 删除
 const handleDelete = async (record: EquipmentResp) => {
   try {
@@ -629,6 +661,12 @@ const handleModalSuccess = () => {
   loadData(currentSearchParams.value)
 }
 
+// 采购申请成功回调
+const handleApplicationSuccess = () => {
+  applicationModalVisible.value = false
+  loadData(currentSearchParams.value)
+}
+
 // 刷新数据
 const refreshData = () => {
   loadData(currentSearchParams.value)
@@ -674,6 +712,36 @@ const getTotalAmount = () => {
   return formatPrice(total)
 }
 
+// 检查是否可以申请采购
+const canApplyProcurement = (record: EquipmentResp) => {
+  // 检查是否有审批状态，如果没有或者状态为待申请，则可以申请
+  return !record.approvalStatus || record.approvalStatus === 'PENDING_APPLICATION'
+}
+
+// 获取审批状态颜色
+const getApprovalStatusColor = (status: string) => {
+  const colorMap: Record<string, string> = {
+    'PENDING_APPLICATION': 'blue',
+    'PENDING': 'orange',
+    'APPROVED': 'green',
+    'REJECTED': 'red',
+    'WITHDRAWN': 'gray'
+  }
+  return colorMap[status] || 'blue'
+}
+
+// 获取审批状态文本
+const getApprovalStatusText = (status: string) => {
+  const textMap: Record<string, string> = {
+    'PENDING_APPLICATION': '待申请',
+    'PENDING': '待审批',
+    'APPROVED': '已通过',
+    'REJECTED': '已拒绝',
+    'WITHDRAWN': '已撤回'
+  }
+  return textMap[status] || '未知'
+}
+
 onMounted(() => {
   loadData()
 })
diff --git a/vite.config.ts b/vite.config.ts
index a38aa21..2c2fbf8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,6 +5,11 @@ import createVitePlugins from './config/plugins'
 export default defineConfig(({ command, mode }) => {
   const env = loadEnv(mode, process.cwd()) as ImportMetaEnv
 
+  // 设置默认的WebSocket URL
+  if (!env.VITE_API_WS_URL) {
+    env.VITE_API_WS_URL = 'ws://localhost:8888'
+  }
+
   return {
     // 开发或生产环境服务的公共基础路径
     base: env.VITE_BASE,