feat: 图片文件支持缩略图 (#17)

src/apis/system/type.ts

@@ -18,18 +18,22 @@ export interface UserResp {
   deptName: string
   disabled: boolean
 }
+
 export type UserDetailResp = UserResp & {
   roleIds?: Array<number>
   roleNames: string
   pwdResetTime?: string
 }
+
 export interface UserQuery {
   description?: string
   status?: number
   deptId?: string
   sort: Array<string>
 }
-export interface UserPageQuery extends UserQuery, PageQuery {}
+
+export interface UserPageQuery extends UserQuery, PageQuery {
+}
 
 /** 系统角色类型 */
 export interface RoleResp {
@@ -46,6 +50,7 @@ export interface RoleResp {
   updateTime: string
   disabled: boolean
 }
+
 export interface RoleDetailResp {
   id: string
   name: string
@@ -62,11 +67,14 @@ export interface RoleDetailResp {
   updateTime: string
   disabled: boolean
 }
+
 export interface RoleQuery {
   description?: string
   sort: Array<string>
 }
-export interface RolePageQuery extends RoleQuery, PageQuery {}
+
+export interface RolePageQuery extends RoleQuery, PageQuery {
+}
 
 /** 系统菜单类型 */
 export interface MenuResp {
@@ -91,6 +99,7 @@ export interface MenuResp {
   updateTime: string
   children: MenuResp[]
 }
+
 export interface MenuQuery {
   title?: string
   status?: number
@@ -112,6 +121,7 @@ export interface DeptResp {
   parentId: string
   children: DeptResp[]
 }
+
 export interface DeptQuery {
   description?: string
   status?: number
@@ -130,11 +140,15 @@ export interface DictResp {
   updateUserString: string
   updateTime: string
 }
+
 export interface DictQuery {
   description?: string
   sort: Array<string>
 }
-export interface DictPageQuery extends DictQuery, PageQuery {}
+
+export interface DictPageQuery extends DictQuery, PageQuery {
+}
+
 export type DictItemResp = {
   id: string
   label: string
@@ -149,13 +163,16 @@ export type DictItemResp = {
   updateUserString: string
   updateTime: string
 }
+
 export interface DictItemQuery {
   description?: string
   status?: number
   sort: Array<string>
   dictId: string
 }
-export interface DictItemPageQuery extends DictItemQuery, PageQuery {}
+
+export interface DictItemPageQuery extends DictItemQuery, PageQuery {
+}
 
 /** 系统公告类型 */
 export interface NoticeResp {
@@ -171,12 +188,15 @@ export interface NoticeResp {
   updateUserString: string
   updateTime: string
 }
+
 export interface NoticeQuery {
   title?: string
   type?: string
   sort: Array<string>
 }
-export interface NoticePageQuery extends NoticeQuery, PageQuery {}
+
+export interface NoticePageQuery extends NoticeQuery, PageQuery {
+}
 
 /** 系统文件类型 */
 export type FileItem = {
@@ -184,6 +204,8 @@ export type FileItem = {
   name: string
   size: number
   url: string
+  thumbnailSize: number
+  thumbnailUrl: string
   extension: string
   type: number
   storageId: string
@@ -192,19 +214,24 @@ export type FileItem = {
   updateUserString: string
   updateTime: string
 }
+
 /** 文件资源统计信息 */
 export interface FileStatisticsResp {
   type: string
-  size: number
+  size: any
   number: number
+  unit: string
   data: Array<FileStatisticsResp>
 }
+
 export interface FileQuery {
   name?: string
   type?: string
   sort: Array<string>
 }
-export interface FilePageQuery extends FileQuery, PageQuery {}
+
+export interface FilePageQuery extends FileQuery, PageQuery {
+}
 
 /** 系统存储类型 */
 export type StorageResp = {
@@ -226,12 +253,15 @@ export type StorageResp = {
   updateUserString: string
   updateTime: string
 }
+
 export interface StorageQuery {
   description?: string
   status?: number
   sort: Array<string>
 }
-export interface StoragePageQuery extends StorageQuery, PageQuery {}
+
+export interface StoragePageQuery extends StorageQuery, PageQuery {
+}
 
 /** 系统参数类型 */
 export interface OptionResp {
@@ -240,9 +270,11 @@ export interface OptionResp {
   value: string
   description: string
 }
+
 export interface OptionQuery {
   code: Array<string>
 }
+
 /** 基础配置类型 */
 export interface BasicConfigResp {
   site_favicon: string

src/views/system/file/main/FileAsideStatistics.vue

@@ -9,8 +9,10 @@
       </a-statistic>
       <a-statistic class="statistic-item" title="数量" :value="totalData.number" :value-style="statisticValueStyle" />
     </a-space>
-    <a-divider />
+    <div v-if="chartData.length > 0">
-    <VCharts :option="option" autoresize :style="{ height: '120px', width: '150px' }" />
+      <a-divider />
+      <VCharts :option="option" autoresize :style="{ height: '120px', width: '150px' }" />
+    </div>
   </section>
 </template>
 
@@ -27,8 +29,14 @@ import { formatFileSize } from '@/utils'
 
 use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer])
 
-const totalData = ref<FileStatisticsResp>({})
+const totalData = ref<FileStatisticsResp>({
-const chartData = ref<Array<FileStatisticsResp>>([])
+  type: '',
+  size: 0,
+  number: 0,
+  unit: '',
+  data: []
+})
+const chartData = ref<Array<{ name: string, value: number, size: string }>>([])
 const statisticValueStyle = { 'color': '#5856D6', 'font-size': '18px' }
 const { option } = useChart(() => {
   return {
@@ -74,13 +82,14 @@ const getStatisticsData = async () => {
   try {
     loading.value = true
     chartData.value = []
-    totalData.value = {}
     const { data: resData } = await getFileStatistics()
     const formatSize = formatFileSize(resData.size).split(' ')
     totalData.value = {
+      type: '',
       size: Number.parseFloat(formatSize[0]),
-      number: resData.number,
+      number: resData.number ?? 0,
-      unit: formatSize[1]
+      unit: formatSize[1],
+      data: []
     }
     resData.data.forEach((fs: FileStatisticsResp) => {
       const matchedItem = FileTypeList.find((item) => item.value === fs.type)

src/views/system/file/main/FileMain/FileImage.vue

@@ -1,5 +1,5 @@
 <template>
-  <img v-if="isImage" class="file-image" :src="props.data.url" alt="" />
+  <img v-if="isImage" class="file-image" :src="props.data.thumbnailUrl" alt="" />
   <GiSvgIcon v-else size="100%" :name="getFileImg"></GiSvgIcon>
 </template>