✨feat: Add file type restrictions and display allowed types

smsb-plus-ui/src/components/SmsbFileUpload/SmsbFileUploader.vue

@@ -2,12 +2,15 @@
   <div class="file-uploader">
     <!-- 文件拖拽区域 -->
     <el-upload class="upload-area" drag action="#" :auto-upload="false" :on-change="handleFileChange"
-               :on-remove="handleFileRemove" :file-list="displayFileList" multiple>
+               :on-remove="handleFileRemove" :file-list="displayFileList" multiple :show-file-list="false">
       <el-icon class="upload-icon"><upload-filled /></el-icon>
       <div class="upload-text">
         <em>拖拽文件到此处或</em>
         <br />
         <el-button type="primary" class="select-button"> 点击选择文件 </el-button>
+        <div class="file-restrictions">
+          支持文件类型: 图片(jpg/jpeg, png), 视频(mp4, avi)
+        </div>
       </div>
     </el-upload>
 
@@ -107,6 +110,21 @@
 import { ref, computed, reactive, onMounted, watch, defineProps, defineEmits } from 'vue';
 import { UploadFilled } from '@element-plus/icons-vue';
 
+// 允许的文件类型白名单
+const ALLOWED_EXTENSIONS = {
+  image: ['jpg', 'jpeg', 'png'],
+  // audio: ['mp3', 'wav', 'ogg', 'aac', 'flac'],
+  video: ['mp4', 'avi']
+};
+
+// 检查文件类型是否允许
+const isFileTypeAllowed = (fileName: string) => {
+  const extension = fileName.split('.').pop()?.toLowerCase();
+  if (!extension) return false;
+  
+  return Object.values(ALLOWED_EXTENSIONS).flat().includes(extension);
+};
+
 // ================= 类型声明 =================
 interface UploadState {
   status: string;
@@ -243,8 +261,11 @@ function handleUploadSuccess(response: any) {
 }
 
 function handleFileChange(uploadFile: any, uploadFiles: any[]) {
-  // TODO: 文件类型、大小等前端校验
-
+  if (!isFileTypeAllowed(uploadFile.name)) {
+    ElMessage.error(`不支持的文件类型: ${uploadFile.name}，仅支持图片(jpg,png等)、音频(mp3,wav等)和视频(mp4,mov等)文件`);
+    return false;
+  }
+  
   // 避免重复添加
   if (!fileList.value.some((f) => f.uid === uploadFile.uid)) {
     fileList.value.push(uploadFile);
@@ -552,4 +573,10 @@ async function handleUpload() {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+.file-restrictions {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 8px;
+}
 </style>