96 UI optimization (#122)

* fix(home): 🐛 解决多次切换路由后页面卡顿的问题 #96

卸载路由时清除requestAnimationFrame

* feat: ✨ 文件存储使用Blob格式

* style: 💄 修改部分类型any为具体类型

* feat: ✨ 界面设置中模块使用瀑布流布局 #96

* fix: 🐛 md文档更换文件夹解决控制台警告

* style: 💄 switch按钮改回使用daisyui组件

* refactor: ♻️ 所有人员列表提取tableColumn

* style: 💄 奖项列表中的图片类型修复

src/views/Config/Person/PersonAll/columns.ts

@@ -0,0 +1,53 @@
+import type { IPersonConfig } from '@/types/storeType'
+import i18n from '@/locales/i18n'
+
+interface IColumnsProps {
+    handleDeletePerson: (row: IPersonConfig) => void
+}
+export function tableColumns(props: IColumnsProps) {
+    return [
+        {
+            label: i18n.global.t('data.number'),
+            props: 'uid',
+        },
+        {
+            label: i18n.global.t('data.name'),
+            props: 'name',
+        },
+        {
+            label: i18n.global.t('data.department'),
+            props: 'department',
+        },
+        {
+            label: i18n.global.t('data.avatar'),
+            props: 'avatar',
+            formatValue(row: any) {
+                return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-'
+            },
+        },
+        {
+            label: i18n.global.t('data.identity'),
+            props: 'identity',
+        },
+        {
+            label: i18n.global.t('data.isWin'),
+            props: 'isWin',
+            formatValue(row: IPersonConfig) {
+                return row.isWin ? i18n.global.t('data.yes') : i18n.global.t('data.no')
+            },
+        },
+        {
+            label: i18n.global.t('data.operation'),
+            actions: [
+                {
+                    label: i18n.global.t('data.delete'),
+                    type: 'btn-error',
+                    onClick: (row: IPersonConfig) => {
+                        props.handleDeletePerson(row)
+                    },
+                },
+
+            ],
+        },
+    ]
+}

src/views/Config/Person/PersonAll/index.vue

@@ -10,7 +10,7 @@ import { useViewModel } from './useViewModel'
 const resetDataDialogRef = ref()
 const delAllDataDialogRef = ref()
 const exportInputFileRef = ref()
-const { resetData, deleteAll, handleFileChange, exportData, alreadyPersonList, allPersonList, tableColumns } = useViewModel({ exportInputFileRef })
+const { resetData, deleteAll, handleFileChange, exportData, alreadyPersonList, allPersonList, tableColumnList } = useViewModel({ exportInputFileRef })
 const { t } = useI18n()
 const limitType = '.xlsx,.xls'
 </script>
@@ -70,7 +70,7 @@ const limitType = '.xlsx,.xls'
       </template>
     </PageHeader>
 
-    <DaiysuiTable :table-columns="tableColumns" :data="allPersonList" />
+    <DaiysuiTable :table-columns="tableColumnList" :data="allPersonList" />
   </div>
 </template>
 

src/views/Config/Person/PersonAll/useViewModel.ts

@@ -8,6 +8,7 @@ import { loadingKey } from '@/components/Loading'
 import i18n from '@/locales/i18n'
 import useStore from '@/store'
 import { readFileBinary, readLocalFileAsArraybuffer } from '@/utils/file'
+import { tableColumns } from './columns'
 import ImportExcelWorker from './importExcel.worker?worker'
 
 export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<HTMLInputElement> }) {
@@ -15,52 +16,7 @@ export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<H
     const loading = inject(loadingKey)
     const personConfig = useStore().personConfig
     const { getAllPersonList: allPersonList, getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
-    const tableColumns = [
-        {
-            label: i18n.global.t('data.number'),
-            props: 'uid',
-        },
-        {
-            label: i18n.global.t('data.name'),
-            props: 'name',
-        },
-        {
-            label: i18n.global.t('data.department'),
-            props: 'department',
-        },
-        {
-            label: i18n.global.t('data.avatar'),
-            props: 'avatar',
-            formatValue(row: any) {
-                return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-'
-            },
-        },
-        {
-            label: i18n.global.t('data.identity'),
-            props: 'identity',
-        },
-        {
-            label: i18n.global.t('data.isWin'),
-            props: 'isWin',
-            formatValue(row: IPersonConfig) {
-                return row.isWin ? i18n.global.t('data.yes') : i18n.global.t('data.no')
-            },
-        },
-        {
-            label: i18n.global.t('data.operation'),
-            actions: [
-                {
-                    label: i18n.global.t('data.delete'),
-                    type: 'btn-error',
-                    onClick: (row: IPersonConfig) => {
-                        delPersonItem(row)
-                    },
-                },
-
-            ],
-        },
-    ]
-
+    const tableColumnList = tableColumns({ handleDeletePerson: delPersonItem })
     async function getExcelTemplateContent() {
         const locale = i18n.global.locale.value
         if (locale === 'zhCn') {
@@ -171,6 +127,6 @@ export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<H
         exportData,
         alreadyPersonList,
         allPersonList,
-        tableColumns,
+        tableColumnList,
     }
 }