refactor: 更换 ESLint 配置为 @antfu/eslint-config

src/views/system/file/components/FileAudioModal/ModalContent.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { useDraggable, useWindowSize, useElementSize } from '@vueuse/core'
+import { useDraggable, useElementSize, useWindowSize } from '@vueuse/core'
 import type { FileItem } from '@/apis'
 
 interface Props {
@@ -71,8 +71,8 @@ const audioStyle = computed(() => {
   }
   sessionStorage.setItem('AudioDialogXY', JSON.stringify({ top, left }))
   return {
-    left: left + 'px',
-    top: top + 'px'
+    left: `${left}px`,
+    top: `${top}px`
   }
 })
 

src/views/system/file/components/FileAudioModal/index.ts

@@ -2,9 +2,8 @@ import type { Component } from 'vue'
 import { createApp } from 'vue'
 import ArcoVueIcon from '@arco-design/web-vue/es/icon'
 import ArcoVue from '@arco-design/web-vue'
-import type { FileItem } from '@/apis'
-
 import ModalContent from './ModalContent.vue'
+import type { FileItem } from '@/apis'
 
 function createModal<T extends { callback?: () => void }>(component: Component, options?: T) {
   // 创建一个挂载容器
@@ -28,7 +27,7 @@ function createModal<T extends { callback?: () => void }>(component: Component,
   instance.use(ArcoVueIcon)
   instance.mount(el)
 }
-type TFileOptions = { data: FileItem; callback?: () => void }
+type TFileOptions = { data: FileItem, callback?: () => void }
 
 /** 预览 音频文件 弹窗 */
 let fileAudioId = ''
@@ -36,7 +35,7 @@ export function previewFileAudioModal(data: FileItem) {
   if (fileAudioId) return // 防止重复打开
   fileAudioId = data.id
   return createModal<TFileOptions>(ModalContent, {
-    data: data,
+    data,
     // 关闭的回调
     callback: () => {
       fileAudioId = ''

src/views/system/file/components/FileDetailModal/ModalContent.vue

@@ -14,8 +14,8 @@
 </template>
 
 <script setup lang="ts">
-import type { FileItem } from '@/apis'
 import FileImage from '../../main/FileMain/FileImage.vue'
+import type { FileItem } from '@/apis'
 import { formatFileSize } from '@/utils'
 
 interface Props {

src/views/system/file/components/FileDetailModal/index.ts

@@ -1,7 +1,7 @@
-import type { FileItem } from '@/apis'
 import { h } from 'vue'
 import { Modal } from '@arco-design/web-vue'
 import ModalContent from './ModalContent.vue'
+import type { FileItem } from '@/apis'
 
 /** 打开 详情 弹窗 */
 export function openFileDetailModal(fileItem: FileItem) {

src/views/system/file/components/FileRenameModal/ModalContent.vue

@@ -14,8 +14,8 @@
 </template>
 
 <script lang="ts" setup>
-import type { FileItem } from '@/apis'
 import type { FormInstance } from '@arco-design/web-vue'
+import type { FileItem } from '@/apis'
 
 interface Props {
   data: FileItem

src/views/system/file/components/FileRenameModal/index.ts

@@ -1,7 +1,7 @@
-import { updateFile, type FileItem } from '@/apis'
-import { ref, h } from 'vue'
-import { Modal, Message } from '@arco-design/web-vue'
+import { h, ref } from 'vue'
+import { Message, Modal } from '@arco-design/web-vue'
 import ModalContent from './ModalContent.vue'
+import { type FileItem, updateFile } from '@/apis'
 
 export function openFileRenameModal(data: FileItem, callback?: () => void) {
   const ModalContentRef = ref<InstanceType<typeof ModalContent>>()

src/views/system/file/components/FileVideoModal/index.ts

@@ -8,6 +8,6 @@ export function previewFileVideoModal(data: FileItem) {
     title: '视频播放',
     width: 'auto',
     modalStyle: {},
-    content: () => h(ModalContent, { data: data })
+    content: () => h(ModalContent, { data })
   })
 }

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

@@ -15,21 +15,21 @@
 </template>
 
 <script setup lang="ts">
-import { getFileStatistics, type FileStatisticsResp } from '@/apis'
-import { useChart } from '@/hooks'
-import { FileTypeList } from '@/constant/file'
 import VCharts from 'vue-echarts'
 import { use } from 'echarts/core'
 import { PieChart } from 'echarts/charts'
-import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { LegendComponent, TitleComponent, TooltipComponent } from 'echarts/components'
 import { CanvasRenderer } from 'echarts/renderers'
+import { FileTypeList } from '@/constant/file'
+import { useChart } from '@/hooks'
+import { type FileStatisticsResp, getFileStatistics } from '@/apis'
 import { formatFileSize } from '@/utils'
 
 use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer])
 
 const totalData = ref<FileStatisticsResp>({})
 const chartData = ref<Array<FileStatisticsResp>>([])
-const statisticValueStyle = { color: '#5856D6', 'font-size': '18px' }
+const statisticValueStyle = { 'color': '#5856D6', 'font-size': '18px' }
 const { option } = useChart(() => {
   return {
     grid: {
@@ -50,7 +50,7 @@ const { option } = useChart(() => {
     },
     tooltip: {
       show: true,
-      formatter: function (params) {
+      formatter(params) {
         return `总计：${params.value}<br>${params.data.size}`
       }
     },
@@ -78,12 +78,12 @@ const getStatisticsData = async () => {
     const { data: resData } = await getFileStatistics()
     const formatSize = formatFileSize(resData.size).split(' ')
     totalData.value = {
-      size: parseFloat(formatSize[0]),
+      size: Number.parseFloat(formatSize[0]),
       number: resData.number,
       unit: formatSize[1]
     }
     resData.data.forEach((fs: FileStatisticsResp) => {
-      const matchedItem = FileTypeList.find((item) => item.value == fs.type)
+      const matchedItem = FileTypeList.find((item) => item.value === fs.type)
       chartData.value.unshift({
         name: matchedItem ? matchedItem.name : '',
         value: fs.number,

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

@@ -46,7 +46,7 @@
         <a-table-column title="修改时间" data-index="updateTime" :width="200"></a-table-column>
         <a-table-column title="操作" :width="120" align="center">
           <template #cell="{ record }">
-            <a-popover trigger="click" position="bottom" :content-style="{ padding: 0, 'margin-top': 0 }">
+            <a-popover trigger="click" position="bottom" :content-style="{ 'padding': 0, 'margin-top': 0 }">
               <a-button type="text" @click.stop><icon-more :size="16" /></a-button>
               <template #content>
                 <FileRightMenu
@@ -64,10 +64,10 @@
 </template>
 
 <script setup lang="ts">
-import type { FileItem } from '@/apis'
-import type { TableRowSelection, TableInstance } from '@arco-design/web-vue'
+import type { TableInstance, TableRowSelection } from '@arco-design/web-vue'
 import FileImage from './FileImage.vue'
 import FileRightMenu from './FileRightMenu.vue'
+import type { FileItem } from '@/apis'
 import { formatFileSize } from '@/utils'
 
 interface Props {
@@ -82,17 +82,17 @@ const props = withDefaults(defineProps<Props>(), {
   isBatchMode: false // 是否是批量模式
 })
 
-const rowSelection: TableRowSelection = reactive({
-  type: 'checkbox',
-  showCheckedAll: true
-})
-
 const emit = defineEmits<{
   (e: 'click', record: FileItem): void
   (e: 'select', record: FileItem): void
   (e: 'right-menu-click', mode: string, item: FileItem): void
 }>()
 
+const rowSelection: TableRowSelection = reactive({
+  type: 'checkbox',
+  showCheckedAll: true
+})
+
 // 多选
 const select: TableInstance['onSelect'] = (rowKeys, rowKey, record) => {
   emit('select', record as unknown as FileItem)

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

@@ -68,7 +68,7 @@
     <!-- 文件列表-宫格模式 -->
     <a-spin id="fileMain" class="file-main__list" :loading="loading" @scroll="handleScroll">
       <FileGrid
-        v-show="fileList.length && mode == 'grid'"
+        v-show="fileList.length && mode === 'grid'"
         :data="fileList"
         :is-batch-mode="isBatchMode"
         :selected-file-ids="selectedFileIds"
@@ -79,7 +79,7 @@
 
       <!-- 文件列表-列表模式 -->
       <FileList
-        v-show="fileList.length && mode == 'list'"
+        v-show="fileList.length && mode === 'list'"
         :data="fileList"
         :is-batch-mode="isBatchMode"
         :selected-file-ids="selectedFileIds"
@@ -94,48 +94,22 @@
 </template>
 
 <script setup lang="ts">
-import { listFile, uploadFile, deleteFile, type FileItem, type FileQuery, type FilePageQuery } from '@/apis'
 import { Message, Modal, type RequestOption } from '@arco-design/web-vue'
-import FileGrid from './FileGrid.vue'
+import { api as viewerApi } from 'v-viewer'
 import {
   openFileDetailModal,
   openFileRenameModal,
-  previewFileVideoModal,
-  previewFileAudioModal
+  previewFileAudioModal,
+  previewFileVideoModal
 } from '../../components/index'
+import FileGrid from './FileGrid.vue'
 import useFileManage from './useFileManage'
+import { type FileItem, type FilePageQuery, type FileQuery, deleteFile, listFile, uploadFile } from '@/apis'
 import { ImageTypes } from '@/constant/file'
-import { api as viewerApi } from 'v-viewer'
 import 'viewerjs/dist/viewer.css'
 import { downloadByUrl } from '@/utils/downloadFile'
 
 const FileList = defineAsyncComponent(() => import('./FileList.vue'))
-onMounted(() => {
-  const fileMainDom = document.getElementById('fileMain')
-  fileMainDom.addEventListener('scrool', handleScroll)
-  console.table('fileMainDom', fileMainDom)
-})
-onUnmounted(() => {
-  // 移除事件监听
-  const fileMainDom = document.getElementById('fileMain')
-  fileMainDom.removeEventListener('scroll', handleScroll)
-})
-const timer = ref<any>()
-const handleScroll = (event) => {
-  const { clientHeight, scrollHeight, scrollTop } = event.target
-  const scrollLinerHeight = (clientHeight / scrollHeight) * scrollHeight
-  if (!timer.value) {
-    timer.value = setTimeout(() => {
-      if ((scrollTop + scrollLinerHeight) / scrollHeight >= 0.9 && !loading.value) {
-        ++pagination.page
-        getFileList()
-      }
-      timer.value = null
-    }, 1000)
-  }
-
-  console.log('event', event)
-}
 const route = useRoute()
 const { mode, selectedFileIds, toggleMode, addSelectedFileItem } = useFileManage()
 
@@ -148,9 +122,11 @@ const pagination = reactive({
   page: 1,
   size: 30
 })
+
 const fileList = ref<FileItem[]>([])
 const isBatchMode = ref(false)
 const loading = ref(false)
+const timer = ref<any>()
 // 查询文件列表
 const getFileList = async (query: FilePageQuery = { ...queryForm, page: pagination.page, size: pagination.size }) => {
   try {
@@ -179,6 +155,12 @@ const getFileList = async (query: FilePageQuery = { ...queryForm, page: paginati
   }
 }
 
+// 查询
+const search = () => {
+  pagination.page = 1
+  getFileList()
+}
+
 // 点击文件
 const handleClickFile = (item: FileItem) => {
   if (ImageTypes.includes(item.extension)) {
@@ -222,7 +204,6 @@ const handleRightMenuClick = async (mode: string, fileInfo: FileItem) => {
   } else if (mode === 'detail') {
     openFileDetailModal(fileInfo)
   } else if (mode === 'download') {
-    console.log('fileInfo', fileInfo)
     const res = await downloadByUrl({
       url: fileInfo.url,
       target: '_self',
@@ -276,12 +257,30 @@ const handleUpload = (options: RequestOption) => {
   }
 }
 
-// 查询
-const search = () => {
-  pagination.page = 1
-  getFileList()
+const handleScroll = (event) => {
+  const { clientHeight, scrollHeight, scrollTop } = event.target
+  const scrollLinerHeight = (clientHeight / scrollHeight) * scrollHeight
+  if (!timer.value) {
+    timer.value = setTimeout(() => {
+      if ((scrollTop + scrollLinerHeight) / scrollHeight >= 0.9 && !loading.value) {
+        ++pagination.page
+        getFileList()
+      }
+      timer.value = null
+    }, 1000)
+  }
 }
 
+onMounted(() => {
+  const fileMainDom = document.getElementById('fileMain')
+  fileMainDom.addEventListener('scrool', handleScroll)
+})
+onUnmounted(() => {
+  // 移除事件监听
+  const fileMainDom = document.getElementById('fileMain')
+  fileMainDom.removeEventListener('scroll', handleScroll)
+})
+
 onBeforeRouteUpdate((to) => {
   if (!to.query.type) return
   queryForm.type = to.query.type?.toString()

src/views/system/file/main/FileMain/useFileManage.ts

@@ -1,4 +1,4 @@
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 import type { FileItem } from '@/apis'
 
 type Mode = 'grid' | 'list'