From 64fd863443ec1a80e6d0208d176f585f3b66c1de Mon Sep 17 00:00:00 2001
From: ZvonimirSun <hi@iszy.xyz>
Date: Tue, 26 Dec 2023 17:29:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(idChinese):=20=E6=B5=8B=E8=AF=95=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8worker=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/{ => idChinese}/idChinese.vue | 64 ++++++++++++++-----------
 src/views/idChinese/idChinese.worker.ts |  7 +++
 vite.config.ts                          |  3 ++
 3 files changed, 46 insertions(+), 28 deletions(-)
 rename src/views/{ => idChinese}/idChinese.vue (59%)
 create mode 100644 src/views/idChinese/idChinese.worker.ts

diff --git a/src/views/idChinese.vue b/src/views/idChinese/idChinese.vue
similarity index 59%
rename from src/views/idChinese.vue
rename to src/views/idChinese/idChinese.vue
index 9f8fc8772..13e63234d 100644
--- a/src/views/idChinese.vue
+++ b/src/views/idChinese/idChinese.vue
@@ -5,7 +5,7 @@
   <el-input
     v-model="idData"
     placeholder="3205************"
-    @change="analyse"
+    @input="analyse"
   />
   <template v-if="result && result.checkIdCard">
     <el-divider />
@@ -27,35 +27,43 @@
   </template>
 </template>
 
-<script>
-import { all } from '@/utils/idCard.js'
+<script setup lang="ts">
+import IdWorker from './idChinese.worker?worker'
 
-export default {
-  name: 'IdChinese',
-  data: () => ({
-    idData: '',
-    result: undefined
-  }),
-  methods: {
-    analyse () {
-      if (this.idData.length >= 18) {
-        try {
-          this.result = all(this.idData)
-        } catch (e) {
-          console.log(e)
-          this.result = undefined
-        }
-      } else {
-        this.result = undefined
-      }
-    }
+const { post, data: result, terminate } = useWebWorker<{
+  checkIdCard: boolean
+  sex: string
+  age: number
+  address: {
+    all: string
+    province: string
+    city: string
+    district: string
+  }
+  birthDay: {
+    year: number
+    month: number
+    day: number
+    nong: string
+    week: string
+    zodiac: string
+    zodiac_zh: string
+  }
+} | undefined>(new IdWorker())
+
+const idData = ref('')
+
+onBeforeUnmount(() => {
+  terminate()
+})
+
+async function analyse () {
+  if (idData.value.length >= 18) {
+    result.value = undefined
+    post({ idData: idData.value })
+  } else {
+    result.value = undefined
   }
 }
 </script>
 
-<style scoped lang="scss">
-:deep(.ant-input-group-addon) {
-  padding: 0;
-  border: unset;
-}
-</style>
diff --git a/src/views/idChinese/idChinese.worker.ts b/src/views/idChinese/idChinese.worker.ts
new file mode 100644
index 000000000..69d7e9c7a
--- /dev/null
+++ b/src/views/idChinese/idChinese.worker.ts
@@ -0,0 +1,7 @@
+import { all } from '@/utils/idCard.js'
+
+self.addEventListener('message', (e) => {
+  const { idData } = e.data
+  const result = all(idData)
+  self.postMessage(result)
+})
diff --git a/vite.config.ts b/vite.config.ts
index c7edc222d..29c3420cb 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -176,5 +176,8 @@ export default defineConfig({
         javascriptEnabled: true
       }
     }
+  },
+  worker: {
+    format: 'es'
   }
 })