From 27fd0768c1e3213b456d19154d6d2774fe465410 Mon Sep 17 00:00:00 2001
From: LOG1997 <2694233102@qq.com>
Date: Sun, 12 Oct 2025 22:30:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0Loading=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   5 +-
 src/components.d.ts                           |   1 +
 src/components/Loading/index.ts               |   5 +
 src/components/Loading/index.vue              |  22 ++
 src/components/Loading/loading-context.ts     |  61 ++++
 src/layout/index.vue                          |   5 +-
 src/main.ts                                   |  16 +-
 .../Person/PersonAll/importExcel.worker.ts    |   5 +
 src/views/Config/Person/PersonAll/index.vue   |  12 +-
 .../Config/Person/PersonAll/useViewModel.ts   | 282 +++++++++---------
 src/vite-env.d.ts                             |   7 +-
 11 files changed, 266 insertions(+), 155 deletions(-)
 create mode 100644 src/components/Loading/index.ts
 create mode 100644 src/components/Loading/index.vue
 create mode 100644 src/components/Loading/loading-context.ts

diff --git a/src/App.vue b/src/App.vue
index 8512bab..96991db 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { onMounted, ref } from 'vue'
+import { onMounted, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { loadingKey, loadingState } from '@/components/Loading'
 import PlayMusic from '@/components/PlayMusic/index.vue'
 import useStore from '@/store'
 import { themeChange } from '@/utils'
 
+provide(loadingKey, loadingState)
 const { t } = useI18n()
 const globalConfig = useStore().globalConfig
 const prizeConfig = useStore().prizeConfig
@@ -14,7 +16,6 @@ const { getTheme: localTheme } = storeToRefs(globalConfig)
 const { getPrizeConfig: prizeList } = storeToRefs(prizeConfig)
 
 const tipDialog = ref()
-
 // 设置当前奖列表
 function setCurrentPrize() {
   if (prizeList.value.length <= 0) {
diff --git a/src/components.d.ts b/src/components.d.ts
index 7b0c306..090b953 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -13,6 +13,7 @@ declare module 'vue' {
     EditSeparateDialog: typeof import('./components/NumberSeparate/EditSeparateDialog.vue')['default']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     ImageSync: typeof import('./components/ImageSync/index.vue')['default']
+    Loading: typeof import('./components/Loading/index.vue')['default']
     PlayMusic: typeof import('./components/PlayMusic/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/components/Loading/index.ts b/src/components/Loading/index.ts
new file mode 100644
index 0000000..aa1cc9f
--- /dev/null
+++ b/src/components/Loading/index.ts
@@ -0,0 +1,5 @@
+import type { LoadingOptions } from './loading-context'
+import Loading from './index.vue'
+import { loadingKey, loadingState } from './loading-context'
+
+export { Loading, loadingKey, LoadingOptions, loadingState }
diff --git a/src/components/Loading/index.vue b/src/components/Loading/index.vue
new file mode 100644
index 0000000..62a2781
--- /dev/null
+++ b/src/components/Loading/index.vue
@@ -0,0 +1,22 @@
+<script setup lang='ts'>
+import type { LoadingOptions } from './loading-context'
+import { inject } from 'vue'
+import { loadingKey } from './loading-context'
+
+// 注入全局状态
+const loading = inject(loadingKey) as LoadingOptions
+
+// 解构状态（响应式）
+const { visible, text } = loading
+</script>
+
+<template>
+  <div v-if="visible" class="fixed top-0 left-0 w-screen h-screen bg-[rgba(0,0,0,0.5)] flex flex-col gap-6 justify-center items-center z-50">
+    <span v-if="visible" class="loading loading-spinner loading-xl" />
+    <span>{{ text ? text : '加载中' }}</span>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Loading/loading-context.ts b/src/components/Loading/loading-context.ts
new file mode 100644
index 0000000..6093acf
--- /dev/null
+++ b/src/components/Loading/loading-context.ts
@@ -0,0 +1,61 @@
+// src/contexts/loading-context.ts
+import type { InjectionKey, Ref } from 'vue'
+import { ref } from 'vue'
+
+// 定义 Loading 配置类型
+export interface LoadingOptions {
+    visible: Ref<boolean>
+    text: Ref<string>
+    fullscreen: Ref<boolean>
+    zIndex: Ref<number>
+    count: Ref<number>
+    show: (options?: Partial<{ text: string, fullscreen: boolean, zIndex: number }>) => void
+    hide: () => void
+}
+
+// 注入密钥（Symbol 确保唯一性）
+export const loadingKey: InjectionKey<LoadingOptions> = Symbol('loading')
+
+// 全局状态（单例）
+const visible = ref(false)
+const text = ref('')
+const fullscreen = ref(true)
+const zIndex = ref(9999)
+const count = ref(0)
+
+// 显示 Loading
+function show(options?: Partial<{ text: string, fullscreen: boolean, zIndex: number }>) {
+    count.value++
+    if (count.value > 1)
+        return
+    visible.value = true
+    if (options) {
+        text.value = options.text || ''
+        fullscreen.value = options.fullscreen ?? true
+        zIndex.value = options.zIndex || 9999
+    }
+}
+
+// 隐藏 Loading
+function hide() {
+    if (count.value <= 0)
+        return
+    count.value--
+    if (count.value === 0) {
+        visible.value = false
+        text.value = ''
+        fullscreen.value = true
+        zIndex.value = 9999
+    }
+}
+
+// 导出全局状态（供根组件提供）
+export const loadingState: LoadingOptions = {
+    visible,
+    text,
+    fullscreen,
+    zIndex,
+    count,
+    show,
+    hide,
+}
diff --git a/src/layout/index.vue b/src/layout/index.vue
index acd521c..10cc77e 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import ToTop from '@/components/ToTop/index.vue'
 import { useScroll } from '@vueuse/core'
 // import Header from './Header/index.vue';
 // import Footer from './Footer/index.vue';
 import { ref } from 'vue'
+import { Loading } from '@/components/Loading'
+import ToTop from '@/components/ToTop/index.vue'
 
 const mainContainer = ref<HTMLElement | null>(null)
-
 const { y } = useScroll(mainContainer)
 
 function scrollToTop() {
@@ -19,6 +19,7 @@ function scrollToTop() {
     <!-- <header class="shadow-2xl head-container h-14">
       <Header></Header>
     </header> -->
+    <Loading />
     <ToTop v-if="y > 400" @click="scrollToTop" />
     <main ref="mainContainer" class="box-content w-screen h-screen overflow-x-hidden overflow-y-auto main-container">
       <router-view class="h-full main-container-content" />
diff --git a/src/main.ts b/src/main.ts
index b90b4ea..3fbb435 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,20 +1,20 @@
-import svgIcon from '@/components/SvgIcon/index.vue'
-import i18n from '@/locales/i18n'
+// pinia
+import { createPinia } from 'pinia'
+// pinia持久化
+import piniaPluginPersist from 'pinia-plugin-persist'
 import * as THREE from 'three'
 import { createApp } from 'vue'
 import VueDOMPurifyHTML from 'vue-dompurify-html'
+import svgIcon from '@/components/SvgIcon/index.vue'
+import i18n from '@/locales/i18n'
+// svg全局组件// 路由
+import router from '@/router'
 import App from './App.vue'
 import './style.css'
 import './style/markdown.css'
 import './style/style.scss'
 // 全局svg组件
 import 'virtual:svg-icons-register'
-// svg全局组件// 路由
-import router from '@/router'
-// pinia
-import { createPinia } from 'pinia'
-// pinia持久化
-import piniaPluginPersist from 'pinia-plugin-persist'
 
 const app = createApp(App)
 const pinia = createPinia()
diff --git a/src/views/Config/Person/PersonAll/importExcel.worker.ts b/src/views/Config/Person/PersonAll/importExcel.worker.ts
index 6b9a39e..1a26fe7 100644
--- a/src/views/Config/Person/PersonAll/importExcel.worker.ts
+++ b/src/views/Config/Person/PersonAll/importExcel.worker.ts
@@ -27,6 +27,11 @@ globalThis.onmessage = async (e: MessageEvent<WorkerMessage>) => {
                 break
             }
         default:
+            globalThis.postMessage({
+                type: 'fail',
+                data: null,
+                message: '读取失败',
+            })
             break
     }
 }
diff --git a/src/views/Config/Person/PersonAll/index.vue b/src/views/Config/Person/PersonAll/index.vue
index 7d52530..c17d398 100644
--- a/src/views/Config/Person/PersonAll/index.vue
+++ b/src/views/Config/Person/PersonAll/index.vue
@@ -6,12 +6,12 @@ import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
 import CustomDialog from '@/components/Dialog/index.vue'
 import { useViewModel } from './useViewModel'
 
-const { resetData, deleteAll, handleFileChange, exportData, alreadyPersonList, allPersonList, tableColumns } = useViewModel()
-const { t } = useI18n()
-const limitType = '.xlsx,.xls'
-
 const resetDataDialogRef = ref()
 const delAllDataDialogRef = ref()
+const exportInputFileRef = ref()
+const { resetData, deleteAll, handleFileChange, exportData, alreadyPersonList, allPersonList, tableColumns } = useViewModel({ exportInputFileRef })
+const { t } = useI18n()
+const limitType = '.xlsx,.xls'
 </script>
 
 <template>
@@ -45,8 +45,8 @@ const delAllDataDialogRef = ref()
 
           <div class="tooltip tooltip-bottom" :data-tip="t('tooltip.uploadExcelTip')">
             <input
-              id="explore" type="file" class="" style="display: none" :accept="limitType"
-              @change="handleFileChange"
+              id="explore" ref="exportInputFileRef" type="file" class="" style="display: none"
+              :accept="limitType" @change="handleFileChange"
             >
 
             <span class="btn btn-primary btn-sm">{{ t('button.importData') }}</span>
diff --git a/src/views/Config/Person/PersonAll/useViewModel.ts b/src/views/Config/Person/PersonAll/useViewModel.ts
index c116a96..9464db9 100644
--- a/src/views/Config/Person/PersonAll/useViewModel.ts
+++ b/src/views/Config/Person/PersonAll/useViewModel.ts
@@ -1,153 +1,167 @@
+import type { Ref } from 'vue'
 import type { IPersonConfig } from '@/types/storeType'
 import { storeToRefs } from 'pinia'
+import { inject } from 'vue'
 import * as XLSX from 'xlsx'
+import { loadingKey } from '@/components/Loading'
 import i18n from '@/locales/i18n'
 import useStore from '@/store'
 import { readFileBinary } from '@/utils/file'
 import ImportExcelWorker from './importExcel.worker?worker'
 
-export function useViewModel() {
-  const worker: Worker | null = new ImportExcelWorker()
-  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: '编辑',
-        //     type: 'btn-info',
-        //     onClick: (row: any) => {
-        //         delPersonItem(row)
-        //     }
-        // },
+export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<HTMLInputElement> }) {
+    const worker: Worker | null = new ImportExcelWorker()
+    const loading = inject(loadingKey)
+    const personConfig = useStore().personConfig
+    const { getAllPersonList: allPersonList, getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
+    const tableColumns = [
         {
-          label: i18n.global.t('data.delete'),
-          type: 'btn-error',
-          onClick: (row: IPersonConfig) => {
-            delPersonItem(row)
-          },
+            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: '编辑',
+                //     type: 'btn-info',
+                //     onClick: (row: any) => {
+                //         delPersonItem(row)
+                //     }
+                // },
+                {
+                    label: i18n.global.t('data.delete'),
+                    type: 'btn-error',
+                    onClick: (row: IPersonConfig) => {
+                        delPersonItem(row)
+                    },
+                },
 
-      ],
-    },
-  ]
-  /// 向worker发送消息
-  function sendWorkerMessage(message: any) {
-    if (worker) {
-      worker.postMessage(message)
-    }
-  }
-  /// 开始导入
-  function startWorker(data: Event) {
-    sendWorkerMessage({ type: 'start', data })
-  }
-  /**
-   * 获取用户数据
-   */
-  async function handleFileChange(e: Event) {
-    //   worker = new ImportExcelWorker()
-    if (worker) {
-      worker.onmessage = (e) => {
-        if (e.data.type === 'done') {
-          personConfig.resetPerson()
-          personConfig.addNotPersonList(e.data.data)
+            ],
+        },
+    ]
+    /// 向worker发送消息
+    function sendWorkerMessage(message: any) {
+        if (worker) {
+            worker.postMessage(message)
         }
-      }
     }
-    const dataBinary = await readFileBinary(((e.target as HTMLInputElement).files as FileList)[0]!)
-    startWorker(dataBinary)
-  }
-  /// 导出数据
-  function exportData() {
-    let data = JSON.parse(JSON.stringify(allPersonList.value))
-    // 排除一些字段
-    for (let i = 0; i < data.length; i++) {
-      delete data[i].x
-      delete data[i].y
-      delete data[i].id
-      delete data[i].createTime
-      delete data[i].updateTime
-      delete data[i].prizeId
-      // 修改字段名称
-      if (data[i].isWin) {
-        data[i].isWin = i18n.global.t('data.yes')
-      }
-      else {
-        data[i].isWin = i18n.global.t('data.no')
-      }
-      // 格式化数组为
-      data[i].prizeTime = data[i].prizeTime.join(',')
-      data[i].prizeName = data[i].prizeName.join(',')
+    /// 开始导入
+    function startWorker(data: Event) {
+        loading?.show()
+        sendWorkerMessage({ type: 'start', data })
     }
-    let dataString = JSON.stringify(data)
-    dataString = dataString
-      .replaceAll(/uid/g, i18n.global.t('data.number'))
-      .replaceAll(/isWin/g, i18n.global.t('data.isWin'))
-      .replaceAll(/department/g, i18n.global.t('data.department'))
-      .replaceAll(/name/g, i18n.global.t('data.name'))
-      .replaceAll(/identity/g, i18n.global.t('data.identity'))
-      .replaceAll(/prizeName/g, i18n.global.t('data.prizeName'))
-      .replaceAll(/prizeTime/g, i18n.global.t('data.prizeTime'))
-
-    data = JSON.parse(dataString)
-
-    if (data.length > 0) {
-      const dataBinary = XLSX.utils.json_to_sheet(data)
-      const dataBinaryBinary = XLSX.utils.book_new()
-      XLSX.utils.book_append_sheet(dataBinaryBinary, dataBinary, 'Sheet1')
-      XLSX.writeFile(dataBinaryBinary, 'data.xlsx')
+    /**
+     * 获取用户数据
+     */
+    async function handleFileChange(e: Event) {
+        //   worker = new ImportExcelWorker()
+        if (worker) {
+            worker.onmessage = (e) => {
+                if (e.data.type === 'done') {
+                    personConfig.resetPerson()
+                    personConfig.addNotPersonList(e.data.data)
+                    // 导入成功后清空file input
+                    clearFileInput()
+                }
+                loading?.hide()
+            }
+        }
+        const dataBinary = await readFileBinary(((e.target as HTMLInputElement).files as FileList)[0]!)
+        startWorker(dataBinary)
     }
-  }
+    // 清空file input
+    function clearFileInput() {
+        if (exportInputFileRef.value) {
+            exportInputFileRef.value.value = ''
+        }
+    }
+    /// 导出数据
+    function exportData() {
+        let data = JSON.parse(JSON.stringify(allPersonList.value))
+        // 排除一些字段
+        for (let i = 0; i < data.length; i++) {
+            delete data[i].x
+            delete data[i].y
+            delete data[i].id
+            delete data[i].createTime
+            delete data[i].updateTime
+            delete data[i].prizeId
+            // 修改字段名称
+            if (data[i].isWin) {
+                data[i].isWin = i18n.global.t('data.yes')
+            }
+            else {
+                data[i].isWin = i18n.global.t('data.no')
+            }
+            // 格式化数组为
+            data[i].prizeTime = data[i].prizeTime.join(',')
+            data[i].prizeName = data[i].prizeName.join(',')
+        }
+        let dataString = JSON.stringify(data)
+        dataString = dataString
+            .replaceAll(/uid/g, i18n.global.t('data.number'))
+            .replaceAll(/isWin/g, i18n.global.t('data.isWin'))
+            .replaceAll(/department/g, i18n.global.t('data.department'))
+            .replaceAll(/name/g, i18n.global.t('data.name'))
+            .replaceAll(/identity/g, i18n.global.t('data.identity'))
+            .replaceAll(/prizeName/g, i18n.global.t('data.prizeName'))
+            .replaceAll(/prizeTime/g, i18n.global.t('data.prizeTime'))
 
-  function resetData() {
-    personConfig.resetAlreadyPerson()
-  }
+        data = JSON.parse(dataString)
 
-  function deleteAll() {
-    personConfig.deleteAllPerson()
-  }
+        if (data.length > 0) {
+            const dataBinary = XLSX.utils.json_to_sheet(data)
+            const dataBinaryBinary = XLSX.utils.book_new()
+            XLSX.utils.book_append_sheet(dataBinaryBinary, dataBinary, 'Sheet1')
+            XLSX.writeFile(dataBinaryBinary, 'data.xlsx')
+        }
+    }
 
-  function delPersonItem(row: IPersonConfig) {
-    personConfig.deletePerson(row)
-  }
-  return {
-    resetData,
-    deleteAll,
-    handleFileChange,
-    exportData,
-    alreadyPersonList,
-    allPersonList,
-    tableColumns,
-  }
+    function resetData() {
+        personConfig.resetAlreadyPerson()
+    }
+
+    function deleteAll() {
+        personConfig.deleteAllPerson()
+    }
+
+    function delPersonItem(row: IPersonConfig) {
+        personConfig.deletePerson(row)
+    }
+    return {
+        resetData,
+        deleteAll,
+        handleFileChange,
+        exportData,
+        alreadyPersonList,
+        allPersonList,
+        tableColumns,
+    }
 }
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 85276f8..74dd46a 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,11 +1,12 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
+    import type { DefineComponent } from 'vue'
 
-  const component: DefineComponent<object, object, any>
-  export default component
+    const component: DefineComponent<object, object, any>
+    export default component
 }
 
 declare module 'sparticles'
 declare module 'three-trackballcontrols'
+declare module 'virtual:svg-icons-register'