vue2-client 1.15.84 → 1.15.86

package/src/components/FileImageItem/FileItemGroup.vue

@@ -1,197 +1,197 @@
-<template>
-  <div class="file-item-group">
-    <!-- 搜索区域 -->
-    <div class="search-area">
-      <a-form-model ref="searchForm" :model="formData" layout="inline">
-        <a-form-model-item prop="dateRange">
-          <a-range-picker
-            v-model="formData.dateRange"
-            :ranges="dateRanges"
-            :show-time="{ format: 'HH:mm' }"
-            format="YYYY-MM-DD HH:mm"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            :placeholder="['开始时间', '结束时间']"
-            @change="handleDateChange"
-          />
-        </a-form-model-item>
-        <a-form-model-item>
-          <a-button type="primary" :loading="loading" @click="handleSearch">
-            <a-icon type="search" />查询
-          </a-button>
-        </a-form-model-item>
-      </a-form-model>
-    </div>
-
-    <!-- 文件列表区域 -->
-    <template v-if="Object.keys(groupedFiles).length > 0">
-      <div class="file-list-container">
-        <a-spin :spinning="loading">
-          <template v-for="(group, date) in groupedFiles">
-            <div :key="date" class="file-group">
-              <div class="group-header">
-                <a-icon type="calendar" />
-                <span class="date-label">{{ formatDate(date) }}</span>
-                <span class="file-count">({{ group.length }}个文件)</span>
-              </div>
-              <file-item
-                :files="group"
-                :downloadable="downloadable"
-              />
-            </div>
-          </template>
-        </a-spin>
-      </div>
-    </template>
-    <template v-else>
-      <a-empty></a-empty>
-    </template>
-  </div>
-</template>
-
-<script>
-import FileItem from './FileItem.vue'
-
-export default {
-  name: 'FileItemGroup',
-  components: {
-    FileItem
-  },
-  props: {
-    downloadable: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data () {
-    const now = new Date()
-    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
-    const yesterday = new Date(today)
-    yesterday.setDate(yesterday.getDate() - 1)
-    const last7Days = new Date(today)
-    last7Days.setDate(last7Days.getDate() - 6)
-    const last30Days = new Date(today)
-    last30Days.setDate(last30Days.getDate() - 29)
-
-    return {
-      loading: false,
-      formData: {
-        dateRange: []
-      },
-      files: [],
-      dateRanges: {
-        今天: [today, new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1)],
-        昨天: [yesterday, new Date(yesterday.getTime() + 24 * 60 * 60 * 1000 - 1)],
-        最近7天: [last7Days, new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1)],
-        最近30天: [last30Days, new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1)]
-      }
-    }
-  },
-  mounted () {
-    this.handleSearch()
-  },
-  computed: {
-    groupedFiles () {
-      const groups = {}
-      this.files.forEach(file => {
-        const date = file.upload_time.split(' ')[0]
-        if (!groups[date]) {
-          groups[date] = []
-        }
-        groups[date].push(file)
-      })
-      // 按日期降序排序
-      return Object.fromEntries(
-        Object.entries(groups).sort(([a], [b]) => b.localeCompare(a))
-      )
-    }
-  },
-  methods: {
-    handleDateChange (dates) {
-      this.formData.dateRange = dates
-    },
-    handleSearch () {
-      this.$refs.searchForm.validate(async valid => {
-        if (valid) {
-          this.loading = true
-          let queryDate
-          if (this.formData.dateRange && this.formData.dateRange.length > 0) {
-            queryDate = this.formData.dateRange
-          } else {
-            queryDate = undefined
-          }
-          const callback = (res) => {
-            this.files = res.files
-            this.loading = false
-          }
-          const errorCallback = (e) => {
-            this.$message.error('获取文件列表失败:' + e.getMessage())
-            this.loading = false
-          }
-          this.$emit('search', queryDate, callback, errorCallback)
-        } else {
-          this.$message.error('请检查日期选择是否正确')
-        }
-      })
-    },
-    formatDate (date) {
-      const today = new Date().toISOString().split('T')[0]
-      const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString().split('T')[0]
-
-      if (date === today) {
-        return '今天'
-      } else if (date === yesterday) {
-        return '昨天'
-      }
-
-      const [year, month, day] = date.split('-')
-      return `${year}年${month}月${day}日`
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.file-item-group {
-  .search-area {
-    display: flex;
-    gap: 16px;
-    margin-bottom: 24px;
-    padding: 16px;
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-  }
-
-  .file-list-container {
-    .file-group {
-      margin-bottom: 24px;
-
-      .group-header {
-        display: flex;
-        align-items: center;
-        margin-bottom: 16px;
-        padding: 8px 16px;
-        background: #fafafa;
-        border-radius: 6px;
-
-        .anticon {
-          margin-right: 8px;
-          color: @primary-color;
-        }
-
-        .date-label {
-          font-size: 15px;
-          font-weight: 500;
-          color: rgba(0, 0, 0, 0.85);
-        }
-
-        .file-count {
-          margin-left: 8px;
-          color: rgba(0, 0, 0, 0.45);
-          font-size: 13px;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="file-item-group">
+    <!-- 搜索区域 -->
+    <div class="search-area">
+      <a-form-model ref="searchForm" :model="formData" layout="inline">
+        <a-form-model-item prop="dateRange">
+          <a-range-picker
+            v-model="formData.dateRange"
+            :ranges="dateRanges"
+            :show-time="{ format: 'HH:mm' }"
+            format="YYYY-MM-DD HH:mm"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            :placeholder="['开始时间', '结束时间']"
+            @change="handleDateChange"
+          />
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-button type="primary" :loading="loading" @click="handleSearch">
+            <a-icon type="search" />查询
+          </a-button>
+        </a-form-model-item>
+      </a-form-model>
+    </div>
+
+    <!-- 文件列表区域 -->
+    <template v-if="Object.keys(groupedFiles).length > 0">
+      <div class="file-list-container">
+        <a-spin :spinning="loading">
+          <template v-for="(group, date) in groupedFiles">
+            <div :key="date" class="file-group">
+              <div class="group-header">
+                <a-icon type="calendar" />
+                <span class="date-label">{{ formatDate(date) }}</span>
+                <span class="file-count">({{ group.length }}个文件)</span>
+              </div>
+              <file-item
+                :files="group"
+                :downloadable="downloadable"
+              />
+            </div>
+          </template>
+        </a-spin>
+      </div>
+    </template>
+    <template v-else>
+      <a-empty></a-empty>
+    </template>
+  </div>
+</template>
+
+<script>
+import FileItem from './FileItem.vue'
+
+export default {
+  name: 'FileItemGroup',
+  components: {
+    FileItem
+  },
+  props: {
+    downloadable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    const now = new Date()
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+    const yesterday = new Date(today)
+    yesterday.setDate(yesterday.getDate() - 1)
+    const last7Days = new Date(today)
+    last7Days.setDate(last7Days.getDate() - 6)
+    const last30Days = new Date(today)
+    last30Days.setDate(last30Days.getDate() - 29)
+
+    return {
+      loading: false,
+      formData: {
+        dateRange: []
+      },
+      files: [],
+      dateRanges: {
+        今天: [today, new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1)],
+        昨天: [yesterday, new Date(yesterday.getTime() + 24 * 60 * 60 * 1000 - 1)],
+        最近7天: [last7Days, new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1)],
+        最近30天: [last30Days, new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1)]
+      }
+    }
+  },
+  mounted () {
+    this.handleSearch()
+  },
+  computed: {
+    groupedFiles () {
+      const groups = {}
+      this.files.forEach(file => {
+        const date = file.upload_time.split(' ')[0]
+        if (!groups[date]) {
+          groups[date] = []
+        }
+        groups[date].push(file)
+      })
+      // 按日期降序排序
+      return Object.fromEntries(
+        Object.entries(groups).sort(([a], [b]) => b.localeCompare(a))
+      )
+    }
+  },
+  methods: {
+    handleDateChange (dates) {
+      this.formData.dateRange = dates
+    },
+    handleSearch () {
+      this.$refs.searchForm.validate(async valid => {
+        if (valid) {
+          this.loading = true
+          let queryDate
+          if (this.formData.dateRange && this.formData.dateRange.length > 0) {
+            queryDate = this.formData.dateRange
+          } else {
+            queryDate = undefined
+          }
+          const callback = (res) => {
+            this.files = res.files
+            this.loading = false
+          }
+          const errorCallback = (e) => {
+            this.$message.error('获取文件列表失败:' + e.getMessage())
+            this.loading = false
+          }
+          this.$emit('search', queryDate, callback, errorCallback)
+        } else {
+          this.$message.error('请检查日期选择是否正确')
+        }
+      })
+    },
+    formatDate (date) {
+      const today = new Date().toISOString().split('T')[0]
+      const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString().split('T')[0]
+
+      if (date === today) {
+        return '今天'
+      } else if (date === yesterday) {
+        return '昨天'
+      }
+
+      const [year, month, day] = date.split('-')
+      return `${year}年${month}月${day}日`
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.file-item-group {
+  .search-area {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 24px;
+    padding: 16px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  }
+
+  .file-list-container {
+    .file-group {
+      margin-bottom: 24px;
+
+      .group-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+        padding: 8px 16px;
+        background: #fafafa;
+        border-radius: 6px;
+
+        .anticon {
+          margin-right: 8px;
+          color: @primary-color;
+        }
+
+        .date-label {
+          font-size: 15px;
+          font-weight: 500;
+          color: rgba(0, 0, 0, 0.85);
+        }
+
+        .file-count {
+          margin-left: 8px;
+          color: rgba(0, 0, 0, 0.45);
+          font-size: 13px;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/FileImageItem/ImageItem.vue

@@ -1,107 +1,107 @@
-<template>
-  <div>
-    <!-- 图片 -->
-    <span v-for="img in images" :key="img.id" class="picture-card" :style="{ width: cardSize, height: cardSize }">
-      <img :src="img.url" :alt="img.name" />
-      <span class="picture-action" :style="{ width: actionSize, height: actionSize }">
-        <a-icon type="eye" class="picture-preview-icon" @click="handlePreview(img.url)" />
-      </span>
-    </span>
-    <!-- 图片预览弹窗 -->
-    <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: 'ImageItem',
-  components: {
-    FilePreview
-  },
-  props: {
-    images: {
-      type: Array,
-      required: true
-    },
-    width: {
-      type: Number,
-      default: 150
-    }
-  },
-  data () {
-    return {
-      previewVisible: false,
-      previewPath: ''
-    }
-  },
-  computed: {
-    cardSize: function () {
-      return this.width + 'px'
-    },
-    actionSize: function () {
-      return this.width - 22 + 'px'
-    }
-  },
-  methods: {
-    handlePreview (path) {
-      this.previewPath = path
-      this.previewVisible = true
-    },
-    handlePreviewClose () {
-      this.previewVisible = false
-      this.previewPath = ''
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.picture-card {
-  position: relative;
-  display: inline-block;
-  border: 1px solid #d9d9d9;
-  border-radius: 6px;
-  padding: 10px;
-  margin: 0 10px 10px 0;
-  overflow: hidden;
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  .picture-action {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: #000;
-    opacity: 0;
-    transition: opacity 0.3s;
-    &:hover {
-      opacity: 0.4;
-    }
-  }
-  .picture-preview-icon {
-    font-size: 22px;
-    color: #ccc;
-    transition: color 0.3s;
-    &:hover {
-      color: #fff;
-    }
-  }
-}
-</style>
+<template>
+  <div>
+    <!-- 图片 -->
+    <span v-for="img in images" :key="img.id" class="picture-card" :style="{ width: cardSize, height: cardSize }">
+      <img :src="img.url" :alt="img.name" />
+      <span class="picture-action" :style="{ width: actionSize, height: actionSize }">
+        <a-icon type="eye" class="picture-preview-icon" @click="handlePreview(img.url)" />
+      </span>
+    </span>
+    <!-- 图片预览弹窗 -->
+    <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: 'ImageItem',
+  components: {
+    FilePreview
+  },
+  props: {
+    images: {
+      type: Array,
+      required: true
+    },
+    width: {
+      type: Number,
+      default: 150
+    }
+  },
+  data () {
+    return {
+      previewVisible: false,
+      previewPath: ''
+    }
+  },
+  computed: {
+    cardSize: function () {
+      return this.width + 'px'
+    },
+    actionSize: function () {
+      return this.width - 22 + 'px'
+    }
+  },
+  methods: {
+    handlePreview (path) {
+      this.previewPath = path
+      this.previewVisible = true
+    },
+    handlePreviewClose () {
+      this.previewVisible = false
+      this.previewPath = ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.picture-card {
+  position: relative;
+  display: inline-block;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  padding: 10px;
+  margin: 0 10px 10px 0;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .picture-action {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #000;
+    opacity: 0;
+    transition: opacity 0.3s;
+    &:hover {
+      opacity: 0.4;
+    }
+  }
+  .picture-preview-icon {
+    font-size: 22px;
+    color: #ccc;
+    transition: color 0.3s;
+    &:hover {
+      color: #fff;
+    }
+  }
+}
+</style>

package/src/components/FileImageItem/index.js

@@ -1,4 +1,4 @@
-import FileItem from '@vue2-client/components/FileImageItem/FileItem'
-import ImageItem from '@vue2-client/components/FileImageItem/ImageItem'
-
-export { FileItem, ImageItem }
+import FileItem from '@vue2-client/components/FileImageItem/FileItem'
+import ImageItem from '@vue2-client/components/FileImageItem/ImageItem'
+
+export { FileItem, ImageItem }