资源库: 按类型限制上传文件、移除搜索框重复图标

Made-with: Cursor

reading-platform-frontend/src/views/admin/resources/ResourceListView.vue

@@ -64,11 +64,7 @@
       <div class="filter-bar" style="margin-bottom: 16px;">
         <a-row :gutter="16">
           <a-col :span="6">
-            <a-input-search v-model:value="filters.keyword" placeholder="搜索资源名称" allow-clear @search="fetchItems">
+            <a-input-search v-model:value="filters.keyword" placeholder="搜索资源名称" allow-clear @search="fetchItems" />
-              <template #prefix>
-                <SearchOutlined />
-              </template>
-            </a-input-search>
           </a-col>
           <a-col :span="4">
             <a-select v-model:value="filters.libraryId" placeholder="选择资源库" allow-clear style="width: 100%"
@@ -197,24 +193,24 @@
 
         <a-form-item label="资源类型" required>
           <a-select v-model:value="uploadForm.fileType" placeholder="请选择资源类型">
-            <a-select-option value="IMAGE">图片 (JPG/PNG)</a-select-option>
+            <a-select-option value="PPT">PPT (PPTX)</a-select-option>
             <a-select-option value="PDF">PDF文档</a-select-option>
             <a-select-option value="VIDEO">视频 (MP4)</a-select-option>
+            <a-select-option value="IMAGE">图片 (JPG/PNG)</a-select-option>
             <a-select-option value="AUDIO">音频 (MP3)</a-select-option>
-            <a-select-option value="PPT">PPT (PPTX)</a-select-option>
             <a-select-option value="OTHER">其他</a-select-option>
           </a-select>
         </a-form-item>
 
         <a-form-item label="选择文件" required>
-          <a-upload v-model:file-list="uploadForm.files" :custom-request="handleCustomUpload" :max-count="10"
+          <a-upload v-model:file-list="uploadForm.files" :accept="uploadAcceptTypes"
-            list-type="text" @change="handleUploadChange">
+            :custom-request="handleCustomUpload" :max-count="10" list-type="text" @change="handleUploadChange">
             <a-button>
               <UploadOutlined /> 选择文件
             </a-button>
           </a-upload>
           <div style="margin-top: 8px; color: #999; font-size: 12px;">
-            支持批量上传，单个文件最大 100MB
+            {{ uploadFileHint }}
           </div>
         </a-form-item>
 
@@ -285,7 +281,6 @@ import { ref, reactive, computed, onMounted } from 'vue';
 import { message } from 'ant-design-vue';
 import {
   UploadOutlined,
-  SearchOutlined,
   FileTextOutlined,
   FilePdfOutlined,
   FilePptOutlined,
@@ -370,6 +365,32 @@ const uploadForm = reactive({
   tags: [] as string[],
 });
 
+/** 根据资源类型返回 a-upload 的 accept 限制 */
+const uploadAcceptTypes = computed(() => {
+  const map: Record<string, string> = {
+    IMAGE: '.jpg,.jpeg,.png,.gif,.webp,.bmp',
+    PDF: '.pdf',
+    VIDEO: '.mp4,.webm,.ogg,.mov,.avi,.mkv',
+    AUDIO: '.mp3,.wav,.ogg,.aac,.flac,.m4a',
+    PPT: '.ppt,.pptx,.pdf',
+    OTHER: '',
+  };
+  return map[uploadForm.fileType] ?? '';
+});
+
+/** 根据资源类型返回上传提示文案 */
+const uploadFileHint = computed(() => {
+  const hints: Record<string, string> = {
+    IMAGE: '支持 JPG、PNG、GIF、WebP、BMP，单个文件最大 100MB',
+    PDF: '支持 PDF，单个文件最大 100MB',
+    VIDEO: '支持 MP4、WebM、OGG、MOV、AVI、MKV，单个文件最大 100MB',
+    AUDIO: '支持 MP3、WAV、OGG、AAC、FLAC、M4A，单个文件最大 100MB',
+    PPT: '支持 PPT、PPTX、PDF，单个文件最大 100MB',
+    OTHER: '支持任意格式，单个文件最大 100MB',
+  };
+  return hints[uploadForm.fileType] ?? '支持批量上传，单个文件最大 100MB';
+});
+
 const editForm = reactive({
   title: '',
   description: '',
@@ -555,10 +576,34 @@ const showUploadModal = () => {
 };
 
 /** OSS 直传：自定义上传请求 */
+/** 根据资源类型获取允许的扩展名列表 */
+const getAllowedExtensions = (fileType: string): string[] => {
+  const map: Record<string, string[]> = {
+    IMAGE: ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'],
+    PDF: ['pdf'],
+    VIDEO: ['mp4', 'webm', 'ogg', 'mov', 'avi', 'mkv'],
+    AUDIO: ['mp3', 'wav', 'ogg', 'aac', 'flac', 'm4a'],
+    PPT: ['ppt', 'pptx', 'pdf'],
+    OTHER: [],
+  };
+  return map[fileType] ?? [];
+};
+
 const handleCustomUpload = async (options: any) => {
   const { file, onSuccess, onError, onProgress } = options;
   const uploadFile = file instanceof File ? file : (file?.originFileObj ?? file);
 
+  // 按资源类型校验扩展名（OTHER 不限制）
+  const allowed = getAllowedExtensions(uploadForm.fileType);
+  if (allowed.length > 0) {
+    const ext = (uploadFile.name?.split('.').pop() ?? '').toLowerCase();
+    if (!ext || !allowed.includes(ext)) {
+      message.error(`当前资源类型仅支持：${allowed.join('、').toUpperCase()}，请选择正确格式的文件`);
+      onError?.(new Error('文件类型不符合所选资源类型'));
+      return;
+    }
+  }
+
   // 校验文件大小（资源库单文件 100MB）
   const validation = validateFileType(uploadFile, 'RESOURCE');
   if (!validation.valid) {