云文件管理系统上传组件优化

web-vue/src/components/FileIcon.vue

@@ -0,0 +1,98 @@
+<template>
+  <span class="file-icon" :style="{ color: color }">
+    <!-- 目录 -->
+    <svg v-if="icon === 'folder'" viewBox="0 0 48 48" fill="currentColor">
+      <path d="M40 12H22l-4-4H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V16c0-2.21-1.79-4-4-4z"/>
+    </svg>
+    
+    <!-- Word -->
+    <svg v-else-if="icon === 'word'" viewBox="0 0 48 48" fill="currentColor">
+      <path d="M8 8h32v32H8z" fill="#2b579a"/>
+      <path d="M14 16h4l3 10 3-10h4l-4 16h-6l-4-16z" fill="#fff"/>
+    </svg>
+    
+    <!-- Excel -->
+    <svg v-else-if="icon === 'excel'" viewBox="0 0 48 48" fill="currentColor">
+      <path d="M8 8h32v32H8z" fill="#217346"/>
+      <path d="M14 16h4l3 6 3-6h4l-5 8 5 8h-4l-3-6-3 6h-4l5-8-5-8z" fill="#fff"/>
+    </svg>
+    
+    <!-- PPT -->
+    <svg v-else-if="icon === 'ppt'" viewBox="0 0 48 48" fill="currentColor">
+      <path d="M8 8h32v32H8z" fill="#d24726"/>
+      <path d="M14 16h8c3.31 0 6 2.69 6 6s-2.69 6-6 6h-4v6h-4V16zm4 8h4c1.1 0 2-.9 2-2s-.9-2-2-2h-4v4z" fill="#fff"/>
+    </svg>
+    
+    <!-- PDF -->
+    <svg v-else-if="icon === 'pdf'" viewBox="0 0 48 48" fill="currentColor">
+      <path d="M8 8h32v32H8z" fill="#f56c6c"/>
+      <path d="M14 16h8c2.21 0 4 1.79 4 4s-1.79 4-4 4h-4v8h-4V16zm4 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4v2z" fill="#fff"/>
+    </svg>
+    
+    <!-- 图片 -->
+    <svg v-else-if="icon === 'image'" viewBox="0 0 48 48" fill="currentColor">
+      <path d="M8 12h32v24H8z" fill="#67c23a"/>
+      <circle cx="16" cy="20" r="4" fill="#fff"/>
+      <path d="M12 32l8-10 6 6 6-8 6 12H12z" fill="#fff" opacity="0.8"/>
+    </svg>
+    
+    <!-- 视频 -->
+    <svg v-else-if="icon === 'video'" viewBox="0 0 48 48" fill="currentColor">
+      <path d="M8 12h32v24H8z" fill="#409eff"/>
+      <path d="M20 18v12l10-6-10-6z" fill="#fff"/>
+    </svg>
+    
+    <!-- 音频 -->
+    <svg v-else-if="icon === 'audio'" viewBox="0 0 48 48" fill="currentColor">
+      <path d="M8 12h32v24H8z" fill="#e6a23c"/>
+      <path d="M20 16v16l12-8-12-8z" fill="#fff"/>
+    </svg>
+    
+    <!-- 代码 -->
+    <svg v-else-if="icon === 'code'" viewBox="0 0 48 48" fill="currentColor">
+      <path d="M8 8h32v32H8z" fill="#9c27b0"/>
+      <path d="M16 18l-4 6 4 6h3l-4-6 4-6h-3zm13 0l4 6-4 6h3l4-6-4-6h-3zm-6 0l-2 12h3l2-12h-3z" fill="#fff"/>
+    </svg>
+    
+    <!-- 文本 -->
+    <svg v-else-if="icon === 'text'" viewBox="0 0 48 48" fill="currentColor">
+      <path d="M12 8h24v32H12z" fill="#ecf0f1"/>
+      <path d="M16 14h16v2H16zm0 6h16v2H16zm0 6h12v2H16z" fill="#bdc3c7"/>
+    </svg>
+    
+    <!-- 压缩包 -->
+    <svg v-else-if="icon === 'zip'" viewBox="0 0 48 48" fill="currentColor">
+      <path d="M8 8h32v32H8z" fill="#8d6e63"/>
+      <path d="M22 12h4v4h-4zm0 6h4v4h-4zm0 6h4v4h-4zm0 6h4v4h-4zm-4 4h12v4H18z" fill="#fff"/>
+    </svg>
+    
+    <!-- 默认文档 -->
+    <svg v-else viewBox="0 0 48 48" fill="currentColor">
+      <path d="M12 8h16l10 10v22H12z" fill="#909399"/>
+      <path d="M26 8v10h10z" fill="#b4b4b4"/>
+    </svg>
+  </span>
+</template>
+
+<script setup>
+defineProps({
+  icon: { type: String, default: 'document' },
+  color: { type: String, default: '#909399' },
+  size: { type: Number, default: 24 }
+})
+</script>
+
+<style scoped>
+.file-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5em;
+  height: 1.5em;
+}
+
+.file-icon svg {
+  width: 100%;
+  height: 100%;
+}
+</style>