vue2-client 1.15.60 → 1.15.62

package/src/components/FileImageItem/FileItem.vue

@@ -1,305 +1,321 @@
-<template>
-  <div class="file-list">
-    <div class="file-grid">
-      <div v-for="file in files" :key="file.id" class="file-item">
-        <div class="file-info">
-          <div class="file-icon-wrapper" :class="getFileTypeClass(file.name)">
-            <a-icon :type="getFileIcon(file.name)" class="file-icon" />
-          </div>
-          <div class="file-content">
-            <div class="file-header">
-              <span class="file-name">{{ file.real_name ? file.real_name : file.name }}</span>
-              <span class="file-type">{{ getFileType(file.name) }}</span>
-            </div>
-            <div class="file-footer">
-              <span class="file-size" v-if="file.size">{{ formatFileSize(file.size) }}</span>
-              <span class="file-time" v-if="file.upload_time">{{ file.upload_time }}</span>
-            </div>
-          </div>
-        </div>
-        <div class="file-actions">
-          <a-tooltip title="预览文件">
-            <a-button type="link" class="action-btn preview-btn" @click="handlePreview(file.url)">
-              <a-icon type="eye" />
-            </a-button>
-          </a-tooltip>
-          <a-tooltip v-if="downloadable" title="下载文件">
-            <a-button type="link" class="action-btn download-btn" @click="download(file)">
-              <a-icon type="download" />
-            </a-button>
-          </a-tooltip>
-        </div>
-      </div>
-    </div>
-    <!-- 文件预览弹窗 -->
-    <a-modal
-      v-model="previewVisible"
-      :footer="null"
-      :dialog-style="{ top: '20px' }"
-      width="85%"
-      :z-index="1001"
-      title="文件预览"
-      @cancel="handlePreviewClose"
-    >
-      <file-preview :path="previewPath" />
-    </a-modal>
-  </div>
-</template>
-
-<script>
-import FilePreview from '@vue2-client/components/FilePreview'
-
-export default {
-  name: 'FileImageItem',
-  components: {
-    FilePreview
-  },
-  props: {
-    files: {
-      type: Array,
-      required: true
-    },
-    downloadable: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  data () {
-    return {
-      previewVisible: false,
-      previewPath: ''
-    }
-  },
-  methods: {
-    handlePreview (path) {
-      this.previewPath = path
-      this.previewVisible = true
-    },
-    handlePreviewClose () {
-      this.previewVisible = false
-      this.previewPath = ''
-    },
-    download (file) {
-      const a = document.createElement('a')
-      a.href = file.url
-      a.download = file.name
-      a.click()
-    },
-    formatFileSize (size) {
-      if (!size) return ''
-      // 如果小于1M，转换为KB显示
-      if (size < 1) {
-        const kbSize = size * 1024
-        return `${kbSize.toFixed(1)} KB`
-      }
-      // 大于等于1M，保持M为单位
-      return `${size.toFixed(1)} MB`
-    },
-    getFileType (filename) {
-      const ext = filename.split('.').pop().toLowerCase()
-      const typeMap = {
-        pdf: 'PDF文档',
-        doc: 'Word文档',
-        docx: 'Word文档',
-        xls: 'Excel表格',
-        xlsx: 'Excel表格',
-        ppt: 'PPT演示',
-        pptx: 'PPT演示',
-        jpg: '图片',
-        jpeg: '图片',
-        png: '图片',
-        gif: '图片',
-        txt: '文本文件',
-        zip: '压缩文件',
-        rar: '压缩文件'
-      }
-      return typeMap[ext] || '文件'
-    },
-    getFileIcon (filename) {
-      const ext = filename.split('.').pop().toLowerCase()
-      const iconMap = {
-        pdf: 'file-pdf',
-        doc: 'file-word',
-        docx: 'file-word',
-        xls: 'file-excel',
-        xlsx: 'file-excel',
-        ppt: 'file-ppt',
-        pptx: 'file-ppt',
-        jpg: 'file-image',
-        jpeg: 'file-image',
-        png: 'file-image',
-        gif: 'file-image',
-        txt: 'file-text',
-        zip: 'file-zip',
-        rar: 'file-zip'
-      }
-      return iconMap[ext] || 'file'
-    },
-    getFileTypeClass (filename) {
-      const ext = filename.split('.').pop().toLowerCase()
-      return `file-type-${ext}`
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.file-list {
-  .file-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-    gap: 16px;
-  }
-
-  .file-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px;
-    background: #fff;
-    border-radius: 12px;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    border: 1px solid rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      transform: translateY(-2px);
-      border-color: @primary-2;
-      background: rgba(24, 144, 255, 0.02);
-    }
-
-    .file-info {
-      display: flex;
-      align-items: center;
-      flex: 1;
-      min-width: 0;
-
-      .file-icon-wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 48px;
-        height: 48px;
-        margin-right: 16px;
-        border-radius: 12px;
-        transition: all 0.3s;
-
-        &.file-type-pdf {
-          background: linear-gradient(135deg, #ff4d4f, #ff7875);
-        }
-        &.file-type-doc, &.file-type-docx {
-          background: linear-gradient(135deg, #1890ff, #69c0ff);
-        }
-        &.file-type-xls, &.file-type-xlsx {
-          background: linear-gradient(135deg, #52c41a, #95de64);
-        }
-        &.file-type-ppt, &.file-type-pptx {
-          background: linear-gradient(135deg, #fa8c16, #ffc069);
-        }
-        &.file-type-jpg, &.file-type-jpeg, &.file-type-png, &.file-type-gif {
-          background: linear-gradient(135deg, #722ed1, #b37feb);
-        }
-        &.file-type-txt {
-          background: linear-gradient(135deg, #13c2c2, #5cdbd3);
-        }
-        &.file-type-zip, &.file-type-rar {
-          background: linear-gradient(135deg, #eb2f96, #ff85c0);
-        }
-
-        .file-icon {
-          font-size: 24px;
-          color: #fff;
-        }
-      }
-
-      .file-content {
-        display: flex;
-        flex-direction: column;
-        min-width: 0;
-        flex: 1;
-
-        .file-header {
-          display: flex;
-          align-items: center;
-          margin-bottom: 4px;
-
-          .file-name {
-            color: rgba(0, 0, 0, 0.85);
-            font-size: 15px;
-            font-weight: 500;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            margin-right: 8px;
-            width: 0;
-            flex: 1;
-          }
-
-          .file-type {
-            color: rgba(0, 0, 0, 0.45);
-            font-size: 12px;
-            padding: 2px 6px;
-            background: rgba(0, 0, 0, 0.04);
-            border-radius: 4px;
-          }
-        }
-
-        .file-footer {
-          display: flex;
-          align-items: center;
-          color: rgba(0, 0, 0, 0.45);
-          font-size: 12px;
-
-          .file-size {
-            margin-right: 12px;
-          }
-
-          .file-time {
-            position: relative;
-            padding-left: 12px;
-
-            &::before {
-              content: '';
-              position: absolute;
-              left: 0;
-              top: 50%;
-              transform: translateY(-50%);
-              width: 4px;
-              height: 4px;
-              background: rgba(0, 0, 0, 0.25);
-              border-radius: 50%;
-            }
-          }
-        }
-      }
-    }
-
-    .file-actions {
-      display: flex;
-      align-items: center;
-      margin-left: 16px;
-
-      .action-btn {
-        width: 36px;
-        height: 36px;
-        padding: 0;
-        margin-left: 8px;
-        border-radius: 8px;
-        color: rgba(0, 0, 0, 0.45);
-        background: transparent;
-        transition: all 0.3s;
-
-        &:hover {
-          color: #fff;
-          background: @primary-color;
-          transform: scale(1.05);
-        }
-
-        .anticon {
-          font-size: 16px;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="file-list">
+    <div class="file-grid">
+      <div v-for="file in files" :key="file.id" class="file-item">
+        <div class="file-info">
+          <div class="file-icon-wrapper" :class="getFileTypeClass(file.name)">
+            <template v-if="isImageType(file.name)">
+              <img :src="file.url" class="file-thumb" />
+            </template>
+            <template v-else>
+              <a-icon :type="getFileIcon(file.name)" class="file-icon" />
+            </template>
+          </div>
+          <div class="file-content">
+            <div class="file-header">
+              <span class="file-name">{{ file.real_name ? file.real_name : file.name }}</span>
+              <span class="file-type">{{ getFileType(file.name) }}</span>
+            </div>
+            <div class="file-footer">
+              <span class="file-size" v-if="file.size">{{ formatFileSize(file.size) }}</span>
+              <span class="file-time" v-if="file.upload_time">{{ file.upload_time }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="file-actions">
+          <a-tooltip title="预览文件">
+            <a-button type="link" class="action-btn preview-btn" @click="handlePreview(file.url)">
+              <a-icon type="eye" />
+            </a-button>
+          </a-tooltip>
+          <a-tooltip v-if="downloadable" title="下载文件">
+            <a-button type="link" class="action-btn download-btn" @click="download(file)">
+              <a-icon type="download" />
+            </a-button>
+          </a-tooltip>
+        </div>
+      </div>
+    </div>
+    <!-- 文件预览弹窗 -->
+    <a-modal
+      v-model="previewVisible"
+      :footer="null"
+      :dialog-style="{ top: '20px' }"
+      width="85%"
+      :z-index="1001"
+      title="文件预览"
+      @cancel="handlePreviewClose"
+    >
+      <file-preview :path="previewPath" />
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import FilePreview from '@vue2-client/components/FilePreview'
+
+export default {
+  name: 'FileImageItem',
+  components: {
+    FilePreview
+  },
+  props: {
+    files: {
+      type: Array,
+      required: true
+    },
+    downloadable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  data () {
+    return {
+      previewVisible: false,
+      previewPath: ''
+    }
+  },
+  methods: {
+    handlePreview (path) {
+      this.previewPath = path
+      this.previewVisible = true
+    },
+    handlePreviewClose () {
+      this.previewVisible = false
+      this.previewPath = ''
+    },
+    download (file) {
+      const a = document.createElement('a')
+      a.href = file.url
+      a.download = file.name
+      a.click()
+    },
+    formatFileSize (size) {
+      if (!size) return ''
+      // 如果小于1M，转换为KB显示
+      if (size < 1) {
+        const kbSize = size * 1024
+        return `${kbSize.toFixed(1)} KB`
+      }
+      // 大于等于1M，保持M为单位
+      return `${size.toFixed(1)} MB`
+    },
+    getFileType (filename) {
+      const ext = filename.split('.').pop().toLowerCase()
+      const typeMap = {
+        pdf: 'PDF文档',
+        doc: 'Word文档',
+        docx: 'Word文档',
+        xls: 'Excel表格',
+        xlsx: 'Excel表格',
+        ppt: 'PPT演示',
+        pptx: 'PPT演示',
+        jpg: '图片',
+        jpeg: '图片',
+        png: '图片',
+        gif: '图片',
+        txt: '文本文件',
+        zip: '压缩文件',
+        rar: '压缩文件'
+      }
+      return typeMap[ext] || '文件'
+    },
+    getFileIcon (filename) {
+      const ext = filename.split('.').pop().toLowerCase()
+      const iconMap = {
+        pdf: 'file-pdf',
+        doc: 'file-word',
+        docx: 'file-word',
+        xls: 'file-excel',
+        xlsx: 'file-excel',
+        ppt: 'file-ppt',
+        pptx: 'file-ppt',
+        jpg: 'file-image',
+        jpeg: 'file-image',
+        png: 'file-image',
+        gif: 'file-image',
+        txt: 'file-text',
+        zip: 'file-zip',
+        rar: 'file-zip'
+      }
+      return iconMap[ext] || 'file'
+    },
+    getFileTypeClass (filename) {
+      const ext = filename.split('.').pop().toLowerCase()
+      return `file-type-${ext}`
+    },
+    isImageType (filename) {
+      const ext = filename.split('.').pop().toLowerCase()
+      return ['jpg', 'jpeg', 'png', 'gif'].includes(ext)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.file-list {
+  .file-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    gap: 16px;
+  }
+
+  .file-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    background: #fff;
+    border-radius: 12px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1px solid rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      transform: translateY(-2px);
+      border-color: @primary-2;
+      background: rgba(24, 144, 255, 0.02);
+    }
+
+    .file-info {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+
+      .file-icon-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 48px;
+        height: 48px;
+        margin-right: 16px;
+        border-radius: 12px;
+        transition: all 0.3s;
+
+        &.file-type-pdf {
+          background: linear-gradient(135deg, #ff4d4f, #ff7875);
+        }
+        &.file-type-doc, &.file-type-docx {
+          background: linear-gradient(135deg, #1890ff, #69c0ff);
+        }
+        &.file-type-xls, &.file-type-xlsx {
+          background: linear-gradient(135deg, #52c41a, #95de64);
+        }
+        &.file-type-ppt, &.file-type-pptx {
+          background: linear-gradient(135deg, #fa8c16, #ffc069);
+        }
+        &.file-type-jpg, &.file-type-jpeg, &.file-type-png, &.file-type-gif {
+          background: linear-gradient(135deg, #722ed1, #b37feb);
+        }
+        &.file-type-txt {
+          background: linear-gradient(135deg, #13c2c2, #5cdbd3);
+        }
+        &.file-type-zip, &.file-type-rar {
+          background: linear-gradient(135deg, #eb2f96, #ff85c0);
+        }
+
+        .file-icon {
+          font-size: 24px;
+          color: #fff;
+        }
+        .file-thumb {
+          width: 40px;
+          height: 40px;
+          object-fit: cover;
+          border-radius: 8px;
+          box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+        }
+      }
+
+      .file-content {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        flex: 1;
+
+        .file-header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 4px;
+
+          .file-name {
+            color: rgba(0, 0, 0, 0.85);
+            font-size: 15px;
+            font-weight: 500;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-right: 8px;
+            width: 0;
+            flex: 1;
+          }
+
+          .file-type {
+            color: rgba(0, 0, 0, 0.45);
+            font-size: 12px;
+            padding: 2px 6px;
+            background: rgba(0, 0, 0, 0.04);
+            border-radius: 4px;
+          }
+        }
+
+        .file-footer {
+          display: flex;
+          align-items: center;
+          color: rgba(0, 0, 0, 0.45);
+          font-size: 12px;
+
+          .file-size {
+            margin-right: 12px;
+          }
+
+          .file-time {
+            position: relative;
+            padding-left: 12px;
+
+            &::before {
+              content: '';
+              position: absolute;
+              left: 0;
+              top: 50%;
+              transform: translateY(-50%);
+              width: 4px;
+              height: 4px;
+              background: rgba(0, 0, 0, 0.25);
+              border-radius: 50%;
+            }
+          }
+        }
+      }
+    }
+
+    .file-actions {
+      display: flex;
+      align-items: center;
+      margin-left: 16px;
+
+      .action-btn {
+        width: 36px;
+        height: 36px;
+        padding: 0;
+        margin-left: 8px;
+        border-radius: 8px;
+        color: rgba(0, 0, 0, 0.45);
+        background: transparent;
+        transition: all 0.3s;
+
+        &:hover {
+          color: #fff;
+          background: @primary-color;
+          transform: scale(1.05);
+        }
+
+        .anticon {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+}
+</style>