fix: 修复苹果端微信浏览器缓存问题

components.d.ts

@@ -16,10 +16,12 @@ declare module 'vue' {
     VanDatePicker: typeof import('vant/es')['DatePicker'];
     VanField: typeof import('vant/es')['Field'];
     VanForm: typeof import('vant/es')['Form'];
+    VanIcon: typeof import('vant/es')['Icon'];
     VanPicker: typeof import('vant/es')['Picker'];
     VanPopup: typeof import('vant/es')['Popup'];
     VanRadio: typeof import('vant/es')['Radio'];
     VanRadioGroup: typeof import('vant/es')['RadioGroup'];
+    VanSwitch: typeof import('vant/es')['Switch'];
     VanUploader: typeof import('vant/es')['Uploader'];
   }
 }

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "axios": "^1.13.2",
+    "@vueuse/core": "^10.7.2",
     "vant": "^4.9.21",
     "vue": "^3.5.24"
   },

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@vueuse/core':
+        specifier: ^10.7.2
+        version: 10.11.1(vue@3.5.25(typescript@5.9.3))
       axios:
         specifier: ^1.13.2
         version: 1.13.2
@@ -38,7 +41,7 @@ importers:
         version: 5.9.3
       unplugin-auto-import:
         specifier: ^20.2.0
-        version: 20.2.0
+        version: 20.2.0(@vueuse/core@10.11.1(vue@3.5.25(typescript@5.9.3)))
       unplugin-vue-components:
         specifier: ^29.2.0
         version: 29.2.0(@babel/parser@7.28.5)(vue@3.5.25(typescript@5.9.3))
@@ -272,6 +275,9 @@ packages:
   '@types/node@24.10.1':
     resolution: {integrity: sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==}
 
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
   '@vant/auto-import-resolver@1.3.0':
     resolution: {integrity: sha512-lJyWtCyFizR4bHZvMiNMF3w+WTFTUWAvka1eqTnPK9ticUcKTCOx6qEmHcm8JPb3g1t3GaD2W3MnHkBp/nHamw==}
 
@@ -312,6 +318,15 @@ packages:
   '@vue/shared@3.5.25':
     resolution: {integrity: sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==}
 
+  '@vueuse/core@10.11.1':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
+  '@vueuse/metadata@10.11.1':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
+  '@vueuse/shared@10.11.1':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
   '@webassemblyjs/ast@1.14.1':
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
 
@@ -901,6 +916,17 @@ packages:
     peerDependencies:
       vue: ^3.0.0
 
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue@3.5.25:
     resolution: {integrity: sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==}
     peerDependencies:
@@ -1161,6 +1187,8 @@ snapshots:
     dependencies:
       undici-types: 7.16.0
 
+  '@types/web-bluetooth@0.0.20': {}
+
   '@vant/auto-import-resolver@1.3.0': {}
 
   '@vant/popperjs@1.3.0': {}
@@ -1223,6 +1251,25 @@ snapshots:
 
   '@vue/shared@3.5.25': {}
 
+  '@vueuse/core@10.11.1(vue@3.5.25(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.5.25(typescript@5.9.3))
+      vue-demi: 0.14.10(vue@3.5.25(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/metadata@10.11.1': {}
+
+  '@vueuse/shared@10.11.1(vue@3.5.25(typescript@5.9.3))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.25(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@webassemblyjs/ast@1.14.1':
     dependencies:
       '@webassemblyjs/helper-numbers': 1.13.2
@@ -1745,7 +1792,7 @@ snapshots:
       unplugin: 2.3.11
       unplugin-utils: 0.3.1
 
-  unplugin-auto-import@20.2.0:
+  unplugin-auto-import@20.2.0(@vueuse/core@10.11.1(vue@3.5.25(typescript@5.9.3))):
     dependencies:
       local-pkg: 1.1.2
       magic-string: 0.30.21
@@ -1753,6 +1800,8 @@ snapshots:
       unimport: 5.5.0
       unplugin: 2.3.11
       unplugin-utils: 0.3.1
+    optionalDependencies:
+      '@vueuse/core': 10.11.1(vue@3.5.25(typescript@5.9.3))
 
   unplugin-utils@0.3.1:
     dependencies:
@@ -1795,6 +1844,10 @@ snapshots:
       '@vue/shared': 3.5.25
       vue: 3.5.25(typescript@5.9.3)
 
+  vue-demi@0.14.10(vue@3.5.25(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.25(typescript@5.9.3)
+
   vue@3.5.25(typescript@5.9.3):
     dependencies:
       '@vue/compiler-dom': 3.5.25

rsbuild.config.ts

@@ -30,7 +30,7 @@ export default defineConfig({
     proxy: {
       // http://localhost:3000/api -> http://localhost:3000/api
       // http://localhost:3000/api/foo -> http://localhost:3000/api/foo
-      '/api': 'http://localhost:9000',
+      '/api': 'http://localhost:8080',
     },
   },
 });

src/App.vue

@@ -599,9 +599,17 @@
 </template>
 
 <script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core';
 import axios from 'axios';
 import type { UploaderFileListItem } from 'vant';
-import { reactive, ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
+import {
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from 'vue';
 
 interface FamilyMemberModel {
   relation: string;
@@ -877,7 +885,12 @@ function onFamilyRelationConfirm(payload: {
 }
 
 function addResumeItem() {
-  form.externalResumeItems.push({ startDate: '', endDate: '', company: '', position: '' });
+  form.externalResumeItems.push({
+    startDate: '',
+    endDate: '',
+    company: '',
+    position: '',
+  });
   nextTick(() => {
     const el = document.scrollingElement || document.documentElement;
     window.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
@@ -939,10 +952,9 @@ const CACHE_KEY = 'HR_VIEW_FORM_CACHE';
 function saveCache() {
   if (!submitSuccess.value) {
     try {
-      const photoList =
-        Array.isArray(form.photoList)
-          ? form.photoList.map((x: any) => ({ url: x?.url, name: x?.name }))
-          : [];
+      const photoList = Array.isArray(form.photoList)
+        ? form.photoList.map((x: any) => ({ url: x?.url, name: x?.name }))
+        : [];
       const data = {
         name: form.name,
         phoneNumber: form.phoneNumber,
@@ -1014,32 +1026,56 @@ function loadCache() {
   }
 }
 
+const scheduleSave = useDebounceFn(
+  () => {
+    if (submitSuccess.value) return;
+    saveCache();
+  },
+  1000,
+  { maxWait: 5000 },
+) as unknown as { (): void; cancel: () => void };
+watch(form, scheduleSave, { deep: true });
+
+const saveImmediately = () => {
+  scheduleSave.cancel(); // 取消等待中的防抖
+  saveCache();
+};
+
 onMounted(() => {
   loadCache();
   const onVisibilityChange = () => {
-    if (document.visibilityState === 'hidden') saveCache();
+    if (document.visibilityState === 'hidden') saveImmediately();
   };
   const onPageHide = () => {
-    saveCache();
+    saveImmediately();
+  };
+  const onPageShow = () => {
+    loadCache();
   };
   (window as any).__onVisibilityChange__ = onVisibilityChange;
   (window as any).__onPageHide__ = onPageHide;
+  (window as any).__onPageShow__ = onPageShow;
   document.addEventListener('visibilitychange', onVisibilityChange);
   window.addEventListener('pagehide', onPageHide);
-  window.addEventListener('beforeunload', saveCache);
+  window.addEventListener('beforeunload', saveImmediately);
+  window.addEventListener('pageshow', onPageShow);
 });
 
 onBeforeUnmount(() => {
   const onVisibilityChange = (window as any).__onVisibilityChange__;
   const onPageHide = (window as any).__onPageHide__;
+  const onPageShow = (window as any).__onPageShow__;
   if (onVisibilityChange) {
     document.removeEventListener('visibilitychange', onVisibilityChange);
   }
   if (onPageHide) {
     window.removeEventListener('pagehide', onPageHide);
   }
-  window.removeEventListener('beforeunload', saveCache);
-  saveCache();
+  window.removeEventListener('beforeunload', saveImmediately);
+  if (onPageShow) {
+    window.removeEventListener('pageshow', onPageShow);
+  }
+  saveImmediately();
 });
 
 async function onSubmit() {
@@ -1053,7 +1089,12 @@ async function onSubmit() {
     let externalResumeValue = '';
     if (form.externalResumeItems && form.externalResumeItems.length > 0) {
       for (const item of form.externalResumeItems) {
-        if (!item.startDate || !item.endDate || !item.company || !item.position) {
+        if (
+          !item.startDate ||
+          !item.endDate ||
+          !item.company ||
+          !item.position
+        ) {
           showFailToast('个人履历填写不全，请检查！');
           submitting.value = false;
           return;
@@ -1085,18 +1126,24 @@ async function onSubmit() {
       emergencyContact: form.emergencyContact,
       emergencyContactPhone: form.emergencyContactPhone,
       householdRegistrationAddress: form.householdRegistrationAddress,
-      workStartDate: form.workStartDisplay ? form.workStartDisplay + '-01' : form.workStartDisplay,
+      workStartDate: form.workStartDisplay
+        ? form.workStartDisplay + '-01'
+        : form.workStartDisplay,
       professionalTitle: form.professionalTitle,
       certificateStatus: form.certificateStatus,
       fulltimeEducation: form.fulltimeEducation,
       fulltimeSchool: form.fulltimeSchool,
       fulltimeMajor: form.fulltimeMajor,
-      fulltimeGraduationDate: form.fulltimeGraduationDate ? form.fulltimeGraduationDate + '-01' : form.fulltimeGraduationDate,
+      fulltimeGraduationDate: form.fulltimeGraduationDate
+        ? form.fulltimeGraduationDate + '-01'
+        : form.fulltimeGraduationDate,
       fulltimeDegree: form.fulltimeDegree,
       nonFulltimeEducation: form.nonFulltimeEducation,
       nonFulltimeSchool: form.nonFulltimeSchool,
       nonFulltimeMajor: form.nonFulltimeMajor,
-      nonFulltimeGraduationDate: form.nonFulltimeGraduationDate ? form.nonFulltimeGraduationDate + '-01' : form.nonFulltimeGraduationDate,
+      nonFulltimeGraduationDate: form.nonFulltimeGraduationDate
+        ? form.nonFulltimeGraduationDate + '-01'
+        : form.nonFulltimeGraduationDate,
       nonFulltimeDegree: form.nonFulltimeDegree,
       externalResume: externalResumeValue,
       familyMembers: form.familyMembers.map((fm, i) => ({
@@ -1261,7 +1308,7 @@ void [phoneRules, idRules];
   outline: none;
   padding: 0;
   margin: 0;
-  font-size: 14px;
+  font-size: 16px;
   color: #323233;
 }
 

src/index.css

@@ -4,3 +4,9 @@ body {
   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
   background-image: linear-gradient(to bottom, #020917, #101725);
 }
+
+input,
+textarea,
+select {
+  font-size: 16px !important;
+}