From 7ea677f02913807699c4de4c95919b511f66f5d8 Mon Sep 17 00:00:00 2001
From: LOG1997 <2694233102@qq.com>
Date: Sun, 21 Sep 2025 22:35:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=BF=E7=94=A8web=20worker=E6=9D=A5?=
 =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E6=96=87=E4=BB=B6=E5=AF=BC=E5=85=A5=E8=AE=A1?=
 =?UTF-8?q?=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Config/Person/PersonAll.vue         | 41 ++++++++++++-------
 src/views/Config/Person/importExcel.worker.ts | 32 +++++++++++++++
 src/views/Demo/index.vue                      |  5 +++
 3 files changed, 64 insertions(+), 14 deletions(-)
 create mode 100644 src/views/Config/Person/importExcel.worker.ts

diff --git a/src/views/Config/Person/PersonAll.vue b/src/views/Config/Person/PersonAll.vue
index f2732c6..7778fb9 100644
--- a/src/views/Config/Person/PersonAll.vue
+++ b/src/views/Config/Person/PersonAll.vue
@@ -1,16 +1,17 @@
 <!-- eslint-disable vue/no-parsing-error -->
 <script setup lang='ts'>
 import type { IPersonConfig } from '@/types/storeType'
-import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
-import i18n from '@/locales/i18n'
-import useStore from '@/store'
-import { addOtherInfo } from '@/utils'
-import { readFileBinary } from '@/utils/file'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import * as XLSX from 'xlsx'
+import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
+import i18n from '@/locales/i18n'
+import useStore from '@/store'
+import { readFileBinary } from '@/utils/file'
+import ImportExcelWorker from './importExcel.worker?worker'
 
+const worker: Worker | null = new ImportExcelWorker()
 const { t } = useI18n()
 const personConfig = useStore().personConfig
 const { getAllPersonList: allPersonList, getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
@@ -19,15 +20,27 @@ const limitType = '.xlsx,.xls'
 
 const resetDataDialog = ref()
 const delAllDataDialog = ref()
-
+function sendMessage(message: any) {
+  if (worker) {
+    worker.postMessage(message)
+  }
+}
+// 方法
+function startWorker(data: Event) {
+  sendMessage({ 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)
+      }
+    }
+  }
   const dataBinary = await readFileBinary(((e.target as HTMLInputElement).files as FileList)[0]!)
-  const workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
-  const workSheet = workBook.Sheets[workBook.SheetNames[0]]
-  const excelData = XLSX.utils.sheet_to_json(workSheet)
-  const allData = addOtherInfo(excelData)
-  personConfig.resetPerson()
-  personConfig.addNotPersonList(allData)
+  startWorker(dataBinary)
 }
 function exportData() {
   let data = JSON.parse(JSON.stringify(allPersonList.value))
@@ -99,8 +112,8 @@ const tableColumns = [
     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;"/>` : '-';
-    }
+      return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-'
+    },
   },
   {
     label: i18n.global.t('data.identity'),
diff --git a/src/views/Config/Person/importExcel.worker.ts b/src/views/Config/Person/importExcel.worker.ts
new file mode 100644
index 0000000..6b9a39e
--- /dev/null
+++ b/src/views/Config/Person/importExcel.worker.ts
@@ -0,0 +1,32 @@
+import * as XLSX from 'xlsx'
+import { addOtherInfo } from '@/utils'
+// 定义消息类型
+interface WorkerMessage {
+    type: 'start' | 'stop' | 'reset'
+    data: any
+}
+
+let allData: any[] = []
+
+// 接收主线程消息
+globalThis.onmessage = async (e: MessageEvent<WorkerMessage>) => {
+    switch (e.data.type) {
+        case 'start':
+            {
+                const fileData = e.data.data
+                // const dataBinary = await readFileBinary(((fileEvent.target as HTMLInputElement).files as FileList)[0]!)
+                const workBook = XLSX.read(fileData, { type: 'binary', cellDates: true })
+                const workSheet = workBook.Sheets[workBook.SheetNames[0]]
+                const excelData = XLSX.utils.sheet_to_json(workSheet)
+                allData = addOtherInfo(excelData)
+                globalThis.postMessage({
+                    type: 'done',
+                    data: allData,
+                    message: '读取完成',
+                })
+                break
+            }
+        default:
+            break
+    }
+}
diff --git a/src/views/Demo/index.vue b/src/views/Demo/index.vue
index 5e05a68..1f7529b 100644
--- a/src/views/Demo/index.vue
+++ b/src/views/Demo/index.vue
@@ -1,4 +1,9 @@
 <script setup lang='ts'>
+import { onMounted, ref, watch } from 'vue'
+
+onMounted(() => {
+
+})
 </script>
 
 <template>