feat:优化

frontend/app/web-gold/src/views/material/MaterialList.vue

@@ -31,7 +31,20 @@
     <!-- 筛选条件 -->
     <div class="material-list__filters">
       <a-space>
-      
+        <a-select
+          v-model:value="filters.fileCategory"
+          style="width: 120px"
+          placeholder="文件分类"
+          @change="handleFilterChange"
+        >
+          <a-select-option value="">全部分类</a-select-option>
+          <a-select-option value="video">视频</a-select-option>
+          <a-select-option value="generate">生成</a-select-option>
+          <a-select-option value="audio">音频</a-select-option>
+          <a-select-option value="mix">混剪</a-select-option>
+          <a-select-option value="voice">配音</a-select-option>
+        </a-select>
+
         <a-input
           v-model="filters.fileName"
           placeholder="搜索文件名"
@@ -48,6 +61,7 @@
           style="width: 300px"
           format="YYYY-MM-DD"
           value-format="YYYY-MM-DD"
+          placeholder="['开始日期', '结束日期']"
           @change="handleFilterChange"
         />
         <a-button type="primary" @click="handleFilterChange">查询</a-button>
@@ -102,13 +116,9 @@
                   <a-tag v-else-if="file.isImage" color="blue">图片</a-tag>
                   <a-tag v-else color="gray">文件</a-tag>
                 </div>
-                <!-- 选中复选框 -->
-                <div class="material-item__checkbox">
-                  <a-checkbox
-                    :model-value="selectedFileIds.includes(file.id)"
-                    @click.stop
-                    @change="(checked) => handleSelectFile(file.id, checked)"
-                  />
+                <!-- 删除图标 -->
+                <div class="material-item__delete" @click.stop="handleDeleteFile(file)">
+                  <DeleteOutlined />
                 </div>
               </div>
               <!-- 文件信息 -->
@@ -195,7 +205,8 @@ import { message, Modal } from 'ant-design-vue'
 import {
   UploadOutlined,
   SearchOutlined,
-  FileOutlined
+  FileOutlined,
+  DeleteOutlined
 } from '@ant-design/icons-vue'
 import { MaterialService } from '@/api/material'
 import { MixService } from '@/api/mix'
@@ -213,6 +224,7 @@ const mixing = ref(false)
 
 // 筛选条件
 const filters = reactive({
+  fileCategory: 'video', // 默认分类为视频
   fileName: '',
   createTime: undefined
 })
@@ -229,8 +241,10 @@ const buildQueryParams = () => {
   const params = {
     pageNo: pagination.pageNo,
     pageSize: pagination.pageSize,
-    ...filters
+    fileCategory: filters.fileCategory || undefined,
+    fileName: filters.fileName || undefined
   }
+
   // 处理日期范围
   if (filters.createTime && Array.isArray(filters.createTime) && filters.createTime.length === 2) {
     params.createTime = [
@@ -238,6 +252,7 @@ const buildQueryParams = () => {
       `${filters.createTime[1]} 23:59:59`
     ]
   }
+
   return params
 }
 
@@ -332,20 +347,44 @@ const handleBatchDelete = () => {
   })
 }
 
-// 选择文件（简化逻辑）
-const handleSelectFile = (fileId, checked) => {
-  const index = selectedFileIds.value.indexOf(fileId)
-  if (checked && index === -1) {
-    selectedFileIds.value.push(fileId)
-  } else if (!checked && index > -1) {
-    selectedFileIds.value.splice(index, 1)
-  }
+// 删除单个文件
+const handleDeleteFile = (file) => {
+  if (!file?.id) return
+
+  // 二次确认弹窗
+  Modal.confirm({
+    title: '确认删除',
+    content: `确定要删除文件 "${file.fileName}" 吗？删除后无法恢复。`,
+    okText: '确定删除',
+    cancelText: '取消',
+    okType: 'danger',
+    onOk: async () => {
+      try {
+        await MaterialService.deleteFiles([file.id])
+        message.success('删除成功')
+        // 如果在选中列表中，也移除
+        const index = selectedFileIds.value.indexOf(file.id)
+        if (index > -1) {
+          selectedFileIds.value.splice(index, 1)
+        }
+        loadFileList()
+      } catch (error) {
+        console.error('删除失败:', error)
+        message.error(error.message || '删除失败，请重试')
+      }
+    }
+  })
 }
 
 // 文件点击
 const handleFileClick = (file) => {
-  // TODO: 打开文件详情或预览
-  console.log('点击文件:', file)
+  const isSelected = selectedFileIds.value.includes(file.id)
+  // 切换选中状态
+  if (isSelected) {
+    selectedFileIds.value = selectedFileIds.value.filter(id => id !== file.id)
+  } else {
+    selectedFileIds.value.push(file.id)
+  }
 }
 
 // 筛选
@@ -355,6 +394,7 @@ const handleFilterChange = () => {
 }
 
 const handleResetFilters = () => {
+  filters.fileCategory = 'video'
   filters.fileName = ''
   filters.createTime = undefined
   pagination.pageNo = 1
@@ -590,27 +630,18 @@ onMounted(() => {
 
 .material-item {
   cursor: pointer;
-  transition: all 0.2s;
-}
-
-.material-item:hover {
-  transform: translateY(-2px);
-}
-
-.material-item--selected {
-  border: 2px solid var(--color-primary);
 }
 
 .material-item__content {
   background: var(--color-surface);
-  border: 1px solid var(--color-border);
+  border: 2px solid transparent;
   border-radius: var(--radius-card);
   overflow: hidden;
-  transition: all 0.2s;
+  transition: border-color 0.2s;
 }
 
-.material-item:hover .material-item__content {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+.material-item--selected .material-item__content {
+  border-color: var(--color-primary);
 }
 
 .material-item__preview {
@@ -650,10 +681,31 @@ onMounted(() => {
   left: 8px;
 }
 
-.material-item__checkbox {
+.material-item__delete {
   position: absolute;
-  top: 8px;
+  bottom: 8px;
   right: 8px;
+  width: 28px;
+  height: 28px;
+  background: rgba(255, 77, 79, 0.9);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.3s;
+  font-size: 16px;
+}
+
+.material-item:hover .material-item__delete {
+  opacity: 1;
+}
+
+.material-item__delete:hover {
+  background: rgb(255, 77, 79);
+  transform: scale(1.1);
 }
 
 .material-item__info {