From 906a5728b0b39932be36b72d876739bb594e13b1 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sat, 6 Apr 2024 02:35:49 +0800
Subject: [PATCH] feat: add typescript support

---
 .eslintrc.cjs                                 |    2 +-
 .gitignore                                    |   31 +-
 env.d.ts                                      |   18 +
 index.html                                    |   20 +-
 package.json                                  |   22 +-
 pnpm-lock.yaml                                |  849 ++++--
 src/App.vue                                   |  133 +-
 src/components/AutoInput.vue                  |    2 +-
 src/components/BaseHeader.vue                 |   77 +-
 src/components/Comment.vue                    |   46 +-
 src/components/UserPanel.vue                  |   26 +-
 src/components/dialog/ConfirmDialog.vue       |    2 +-
 src/components/slide/SlideHorizontal.vue      |   24 +-
 src/config/index.js                           |    4 +-
 src/{main.js => main.ts}                      |   12 +-
 src/mock/{index.js => index.ts}               |   66 +-
 src/pages/home/Music.vue                      |  318 +--
 src/pages/home/MusicRankList.vue              |  531 ++--
 src/pages/home/Publish.vue                    |   75 +-
 src/pages/home/index.vue                      |   13 +-
 src/pages/me/MyCard.vue                       |  101 +-
 src/pages/me/collect/MusicCollect.vue         |  170 +-
 src/pages/me/collect/VideoCollect.vue         |   84 +-
 src/pages/me/rightMenu/LookHistory.vue        |  187 +-
 .../MinorProtection/DetailSetting.vue         |   74 +-
 .../me/rightMenu/MinorProtection/Index.vue    |   25 +-
 .../rightMenu/MinorProtection/TriggerTime.vue |   46 +-
 src/pages/me/rightMenu/Setting.vue            |   60 +-
 src/pages/me/userinfo/AddSchool.vue           |  235 +-
 src/pages/me/userinfo/ChooseCity.vue          |  101 +-
 src/pages/me/userinfo/ChooseDepartment.vue    |   56 +-
 src/pages/me/userinfo/ChooseLocation.vue      | 2317 ++++++++---------
 src/pages/me/userinfo/ChooseProvince.vue      |   91 +-
 src/pages/me/userinfo/ChooseSchool.vue        |  107 +-
 src/pages/me/userinfo/DeclareSchool.vue       |   63 +-
 src/pages/me/userinfo/DisplayType.vue         |   47 +-
 src/pages/me/userinfo/EditUserInfo.vue        |  220 +-
 src/pages/me/userinfo/EditUserInfoItem.vue    |  136 +-
 src/pages/message/AllMessage.vue              |  252 +-
 src/pages/message/JoinedGroupChat.vue         |  109 +-
 src/pages/message/Message.vue                 |  257 +-
 src/pages/message/MoreSearch.vue              |   61 +-
 src/pages/message/Visitors.vue                |  107 +-
 src/pages/message/notice/DouyinHelper.vue     |  146 +-
 src/pages/message/notice/SystemNotice.vue     |  202 +-
 src/pages/shop/GoodsDetail.vue                |   12 +-
 src/pages/shop/Shop.vue                       |    2 +-
 src/pages/test/Test.vue                       |    2 +-
 src/pages/test/Test4.vue                      |   28 +-
 src/router/{index.js => index.ts}             |    6 +-
 src/router/{routes.js => routes.ts}           |    9 +-
 src/store/pinia.js                            |    8 +
 src/utils/const_var.js                        |    5 +
 src/utils/index.jsx                           |  184 +-
 tsconfig.app.json                             |   23 +
 tsconfig.json                                 |   11 +
 tsconfig.node.json                            |   19 +
 vite.config.js => vite.config.ts              |   27 +-
 58 files changed, 4263 insertions(+), 3598 deletions(-)
 create mode 100644 env.d.ts
 rename src/{main.js => main.ts} (79%)
 rename src/mock/{index.js => index.ts} (79%)
 rename src/router/{index.js => index.ts} (86%)
 rename src/router/{routes.js => routes.ts} (96%)
 create mode 100644 tsconfig.app.json
 create mode 100644 tsconfig.json
 create mode 100644 tsconfig.node.json
 rename vite.config.js => vite.config.ts (91%)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index ab88e7e58..8bc759f4a 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -15,5 +15,5 @@ module.exports = {
   rules: {
     'vue/multi-word-component-names': 0
   },
-  'ignorePatterns': ['vite.config.js', 'mobile-select.js']
+  'ignorePatterns': ['vite.config.ts', 'mobile-select.js']
 };
diff --git a/.gitignore b/.gitignore
index 908981024..8ee54e8d3 100755
--- a/.gitignore
+++ b/.gitignore
@@ -1,25 +1,30 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
-/php_backend
-report.html
\ No newline at end of file
+
+*.tsbuildinfo
diff --git a/env.d.ts b/env.d.ts
new file mode 100644
index 000000000..aab25cf30
--- /dev/null
+++ b/env.d.ts
@@ -0,0 +1,18 @@
+/// <reference types="vite/client" />
+
+declare global {
+  interface Navigator {
+    control: any
+    webkitGetUserMedia: any
+    mozGetUserMedia: any
+    getUserMedia: any
+  }
+}
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+export {}
diff --git a/index.html b/index.html
index 70a42708a..5e00cbe4b 100644
--- a/index.html
+++ b/index.html
@@ -14,15 +14,15 @@
     <!--            integrity="sha512-KkkY/3auRhaXDFzFMpwtZ+BrS8EBQ+GfiBxdJ9jGMi6Gg74/sYbq/IZpY593pkNjTmbeRfBwjpZo+7gcpH45Ww=="-->
     <!--            src="https://lib.baomitu.com/eruda/3.0.1/eruda.min.js"></script>-->
     <!--      <script>eruda.init();</script>-->
-<!--    <script>-->
-<!--      var _hmt = _hmt || []-->
-<!--      ;(function () {-->
-<!--        var hm = document.createElement('script')-->
-<!--        hm.src = 'https://hm.baidu.com/hm.js?6f910830f5a7d8b5f7e75d8d67458a7a'-->
-<!--        var s = document.getElementsByTagName('script')[0]-->
-<!--        s.parentNode.insertBefore(hm, s)-->
-<!--      })()-->
-<!--    </script>-->
+    <!--    <script>-->
+    <!--      var _hmt = _hmt || []-->
+    <!--      ;(function () {-->
+    <!--        var hm = document.createElement('script')-->
+    <!--        hm.src = 'https://hm.baidu.com/hm.js?6f910830f5a7d8b5f7e75d8d67458a7a'-->
+    <!--        var s = document.getElementsByTagName('script')[0]-->
+    <!--        s.parentNode.insertBefore(hm, s)-->
+    <!--      })()-->
+    <!--    </script>-->
     <style>
       ::-webkit-scrollbar {
         display: none; /* Chrome Safari */
@@ -58,6 +58,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
index 6c586bd5c..b4148c8a0 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,16 @@
 {
-  "name": "my-vue-app",
-  "version": "0.0.0",
+  "name": "douyin-vue",
+  "version": "1.1.0",
+  "private": true,
   "scripts": {
     "dev": "vite --host",
     "start": "vite --host",
     "serve": "vite --host",
     "build": "vite build --mode prod",
     "build-uni-app": "vite build --mode uni",
+    "build-only": "vite build",
+    "buildp-check": "run-p type-check \"build-only {@}\" --",
+    "type-check": "vue-tsc --build --force",
     "report": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
@@ -16,7 +20,7 @@
   },
   "dependencies": {
     "@jambonn/vue-lazyload": "1.0.9",
-    "axios": "1.6.0",
+    "axios": "^1.6.8",
     "axios-mock-adapter": "^1.22.0",
     "core-js": "3.21.1",
     "dayjs": "1.11.0",
@@ -34,13 +38,16 @@
     "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^19.1.0",
     "@iconify/vue": "^4.1.1",
+    "@rollup/plugin-commonjs": "^25.0.7",
     "@rushstack/eslint-patch": "^1.3.3",
+    "@tsconfig/node20": "^20.1.2",
     "@types/jquery": "3.5.29",
-    "@types/lodash-es": "^4.17.9",
+    "@types/node": "^20.11.28",
     "@vitejs/plugin-vue": "4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/tsconfig": "^0.5.1",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57.0",
@@ -50,9 +57,12 @@
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "rollup-plugin-visualizer": "^5.9.2",
+    "typescript": "~5.4.0",
     "unplugin-vue-define-options": "^1.4.1",
-    "vite": "4.5.3",
-    "vite-plugin-cdn-import": "0.3.5"
+    "vite": "^5.1.6",
+    "vite-plugin-cdn-import": "0.3.5",
+    "vite-plugin-commonjs": "^0.10.1",
+    "vue-tsc": "^2.0.6"
   },
   "lint-staged": {
     "*.{js,ts,vue,jsx,tsx}": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d9f4a88e6..9e49ccac2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,11 +9,11 @@ dependencies:
     specifier: 1.0.9
     version: 1.0.9(vue@3.4.21)
   axios:
-    specifier: 1.6.0
-    version: 1.6.0
+    specifier: ^1.6.8
+    version: 1.6.8
   axios-mock-adapter:
     specifier: ^1.22.0
-    version: 1.22.0(axios@1.6.0)
+    version: 1.22.0(axios@1.6.8)
   core-js:
     specifier: 3.21.1
     version: 3.21.1
@@ -37,10 +37,10 @@ dependencies:
     version: 1.1.0
   pinia:
     specifier: ^2.1.7
-    version: 2.1.7(typescript@5.4.3)(vue@3.4.21)
+    version: 2.1.7(typescript@5.4.4)(vue@3.4.21)
   vue:
     specifier: 3.4.21
-    version: 3.4.21(typescript@5.4.3)
+    version: 3.4.21(typescript@5.4.4)
   vue-router:
     specifier: 4.3.0
     version: 4.3.0(vue@3.4.21)
@@ -51,40 +51,49 @@ dependencies:
 devDependencies:
   '@commitlint/cli':
     specifier: ^19.2.1
-    version: 19.2.1(@types/node@20.12.4)(typescript@5.4.3)
+    version: 19.2.1(@types/node@20.12.4)(typescript@5.4.4)
   '@commitlint/config-conventional':
     specifier: ^19.1.0
     version: 19.1.0
   '@iconify/vue':
     specifier: ^4.1.1
     version: 4.1.1(vue@3.4.21)
+  '@rollup/plugin-commonjs':
+    specifier: ^25.0.7
+    version: 25.0.7(rollup@2.79.1)
   '@rushstack/eslint-patch':
     specifier: ^1.3.3
     version: 1.10.1
+  '@tsconfig/node20':
+    specifier: ^20.1.2
+    version: 20.1.2
   '@types/jquery':
     specifier: 3.5.29
     version: 3.5.29
-  '@types/lodash-es':
-    specifier: ^4.17.9
-    version: 4.17.12
+  '@types/node':
+    specifier: ^20.11.28
+    version: 20.12.4
   '@vitejs/plugin-vue':
     specifier: 4.0.0
-    version: 4.0.0(vite@4.5.3)(vue@3.4.21)
+    version: 4.0.0(vite@5.1.6)(vue@3.4.21)
   '@vitejs/plugin-vue-jsx':
     specifier: ^3.1.0
-    version: 3.1.0(vite@4.5.3)(vue@3.4.21)
+    version: 3.1.0(vite@5.1.6)(vue@3.4.21)
   '@vue/eslint-config-prettier':
     specifier: ^8.0.0
     version: 8.0.0(eslint@8.57.0)(prettier@3.2.5)
   '@vue/eslint-config-typescript':
     specifier: ^12.0.0
-    version: 12.0.0(eslint-plugin-vue@9.24.0)(eslint@8.57.0)(typescript@5.4.3)
+    version: 12.0.0(eslint-plugin-vue@9.24.0)(eslint@8.57.0)(typescript@5.4.4)
+  '@vue/tsconfig':
+    specifier: ^0.5.1
+    version: 0.5.1
   commitizen:
     specifier: ^4.3.0
-    version: 4.3.0(@types/node@20.12.4)(typescript@5.4.3)
+    version: 4.3.0(@types/node@20.12.4)(typescript@5.4.4)
   cz-conventional-changelog:
     specifier: ^3.3.0
-    version: r2.cnpmjs.org/cz-conventional-changelog@3.3.0(@types/node@20.12.4)(typescript@5.4.3)
+    version: r2.cnpmjs.org/cz-conventional-changelog@3.3.0(@types/node@20.12.4)(typescript@5.4.4)
   eslint:
     specifier: ^8.57.0
     version: 8.57.0
@@ -106,15 +115,24 @@ devDependencies:
   rollup-plugin-visualizer:
     specifier: ^5.9.2
     version: 5.12.0(rollup@2.79.1)
+  typescript:
+    specifier: ~5.4.0
+    version: 5.4.4
   unplugin-vue-define-options:
     specifier: ^1.4.1
     version: 1.4.2(rollup@2.79.1)(vue@3.4.21)
   vite:
-    specifier: 4.5.3
-    version: 4.5.3(@types/node@20.12.4)(less@4.1.3)
+    specifier: ^5.1.6
+    version: 5.1.6(@types/node@20.12.4)(less@4.1.3)
   vite-plugin-cdn-import:
     specifier: 0.3.5
     version: 0.3.5(rollup@2.79.1)
+  vite-plugin-commonjs:
+    specifier: ^0.10.1
+    version: 0.10.1
+  vue-tsc:
+    specifier: ^2.0.6
+    version: 2.0.6(typescript@5.4.4)
 
 packages:
 
@@ -502,14 +520,14 @@ packages:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
-  /@commitlint/cli@19.2.1(@types/node@20.12.4)(typescript@5.4.3):
+  /@commitlint/cli@19.2.1(@types/node@20.12.4)(typescript@5.4.4):
     resolution: {integrity: sha512-cbkYUJsLqRomccNxvoJTyv5yn0bSy05BBizVyIcLACkRbVUqYorC351Diw/XFSWC/GtpwiwT2eOvQgFZa374bg==}
     engines: {node: '>=v18'}
     hasBin: true
     dependencies:
       '@commitlint/format': 19.0.3
       '@commitlint/lint': 19.1.0
-      '@commitlint/load': 19.2.0(@types/node@20.12.4)(typescript@5.4.3)
+      '@commitlint/load': 19.2.0(@types/node@20.12.4)(typescript@5.4.4)
       '@commitlint/read': 19.2.1
       '@commitlint/types': 19.0.3
       execa: 8.0.1
@@ -578,7 +596,7 @@ packages:
       '@commitlint/types': 19.0.3
     dev: true
 
-  /@commitlint/load@19.2.0(@types/node@20.12.4)(typescript@5.4.3):
+  /@commitlint/load@19.2.0(@types/node@20.12.4)(typescript@5.4.4):
     resolution: {integrity: sha512-XvxxLJTKqZojCxaBQ7u92qQLFMMZc4+p9qrIq/9kJDy8DOrEa7P1yx7Tjdc2u2JxIalqT4KOGraVgCE7eCYJyQ==}
     engines: {node: '>=v18'}
     requiresBuild: true
@@ -588,8 +606,8 @@ packages:
       '@commitlint/resolve-extends': 19.1.0
       '@commitlint/types': 19.0.3
       chalk: 5.3.0
-      cosmiconfig: 9.0.0(typescript@5.4.3)
-      cosmiconfig-typescript-loader: 5.0.0(@types/node@20.12.4)(cosmiconfig@9.0.0)(typescript@5.4.3)
+      cosmiconfig: 9.0.0(typescript@5.4.4)
+      cosmiconfig-typescript-loader: 5.0.0(@types/node@20.12.4)(cosmiconfig@9.0.0)(typescript@5.4.4)
       lodash.isplainobject: r2.cnpmjs.org/lodash.isplainobject@4.0.6
       lodash.merge: r2.cnpmjs.org/lodash.merge@4.6.2
       lodash.uniq: r2.cnpmjs.org/lodash.uniq@4.5.0
@@ -666,8 +684,17 @@ packages:
       chalk: 5.3.0
     dev: true
 
-  /@esbuild/android-arm64@0.18.20:
-    resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
+  /@esbuild/aix-ppc64@0.19.12:
+    resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm64@0.19.12:
+    resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
@@ -675,8 +702,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-arm@0.18.20:
-    resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==}
+  /@esbuild/android-arm@0.19.12:
+    resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
@@ -684,8 +711,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-x64@0.18.20:
-    resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==}
+  /@esbuild/android-x64@0.19.12:
+    resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
@@ -693,8 +720,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-arm64@0.18.20:
-    resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==}
+  /@esbuild/darwin-arm64@0.19.12:
+    resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
@@ -702,8 +729,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-x64@0.18.20:
-    resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==}
+  /@esbuild/darwin-x64@0.19.12:
+    resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
@@ -711,8 +738,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-arm64@0.18.20:
-    resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==}
+  /@esbuild/freebsd-arm64@0.19.12:
+    resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
@@ -720,8 +747,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-x64@0.18.20:
-    resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==}
+  /@esbuild/freebsd-x64@0.19.12:
+    resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
@@ -729,8 +756,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm64@0.18.20:
-    resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==}
+  /@esbuild/linux-arm64@0.19.12:
+    resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
@@ -738,8 +765,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm@0.18.20:
-    resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==}
+  /@esbuild/linux-arm@0.19.12:
+    resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
@@ -747,8 +774,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ia32@0.18.20:
-    resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==}
+  /@esbuild/linux-ia32@0.19.12:
+    resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
@@ -756,8 +783,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-loong64@0.18.20:
-    resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==}
+  /@esbuild/linux-loong64@0.19.12:
+    resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
@@ -765,8 +792,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-mips64el@0.18.20:
-    resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==}
+  /@esbuild/linux-mips64el@0.19.12:
+    resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
@@ -774,8 +801,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ppc64@0.18.20:
-    resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==}
+  /@esbuild/linux-ppc64@0.19.12:
+    resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
@@ -783,8 +810,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-riscv64@0.18.20:
-    resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==}
+  /@esbuild/linux-riscv64@0.19.12:
+    resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
@@ -792,8 +819,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-s390x@0.18.20:
-    resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==}
+  /@esbuild/linux-s390x@0.19.12:
+    resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
@@ -801,8 +828,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-x64@0.18.20:
-    resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==}
+  /@esbuild/linux-x64@0.19.12:
+    resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
@@ -810,8 +837,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/netbsd-x64@0.18.20:
-    resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==}
+  /@esbuild/netbsd-x64@0.19.12:
+    resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
@@ -819,8 +846,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/openbsd-x64@0.18.20:
-    resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==}
+  /@esbuild/openbsd-x64@0.19.12:
+    resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
@@ -828,8 +855,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/sunos-x64@0.18.20:
-    resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==}
+  /@esbuild/sunos-x64@0.19.12:
+    resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
@@ -837,8 +864,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-arm64@0.18.20:
-    resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==}
+  /@esbuild/win32-arm64@0.19.12:
+    resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
@@ -846,8 +873,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-ia32@0.18.20:
-    resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==}
+  /@esbuild/win32-ia32@0.19.12:
+    resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
@@ -855,8 +882,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-x64@0.18.20:
-    resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==}
+  /@esbuild/win32-x64@0.19.12:
+    resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -931,7 +958,7 @@ packages:
       vue: '>=3'
     dependencies:
       '@iconify/types': 2.0.0
-      vue: 3.4.21(typescript@5.4.3)
+      vue: 3.4.21(typescript@5.4.4)
     dev: true
 
   /@jambonn/vue-lazyload@1.0.9(vue@3.4.21):
@@ -940,7 +967,7 @@ packages:
     peerDependencies:
       vue: ^3.0.11
     dependencies:
-      vue: 3.4.21(typescript@5.4.3)
+      vue: 3.4.21(typescript@5.4.4)
     dev: false
 
   /@jridgewell/gen-mapping@0.3.3:
@@ -1019,6 +1046,24 @@ packages:
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
     dev: true
 
+  /@rollup/plugin-commonjs@25.0.7(rollup@2.79.1):
+    resolution: {integrity: sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.68.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
+      commondir: r2.cnpmjs.org/commondir@1.0.1
+      estree-walker: r2.cnpmjs.org/estree-walker@2.0.2
+      glob: 8.1.0
+      is-reference: r2.cnpmjs.org/is-reference@1.2.1
+      magic-string: 0.30.7
+      rollup: 2.79.1
+    dev: true
+
   /@rollup/pluginutils@4.2.1:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
     engines: {node: '>= 8.0.0'}
@@ -1037,15 +1082,146 @@ packages:
         optional: true
     dependencies:
       '@types/estree': 1.0.5
-      estree-walker: 2.0.2
+      estree-walker: r2.cnpmjs.org/estree-walker@2.0.2
       picomatch: 2.3.1
       rollup: 2.79.1
     dev: true
 
+  /@rollup/rollup-android-arm-eabi@4.14.0:
+    resolution: {integrity: sha512-jwXtxYbRt1V+CdQSy6Z+uZti7JF5irRKF8hlKfEnF/xJpcNGuuiZMBvuoYM+x9sr9iWGnzrlM0+9hvQ1kgkf1w==}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-android-arm64@4.14.0:
+    resolution: {integrity: sha512-fI9nduZhCccjzlsA/OuAwtFGWocxA4gqXGTLvOyiF8d+8o0fZUeSztixkYjcGq1fGZY3Tkq4yRvHPFxU+jdZ9Q==}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-arm64@4.14.0:
+    resolution: {integrity: sha512-BcnSPRM76/cD2gQC+rQNGBN6GStBs2pl/FpweW8JYuz5J/IEa0Fr4AtrPv766DB/6b2MZ/AfSIOSGw3nEIP8SA==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-x64@4.14.0:
+    resolution: {integrity: sha512-LDyFB9GRolGN7XI6955aFeI3wCdCUszFWumWU0deHA8VpR3nWRrjG6GtGjBrQxQKFevnUTHKCfPR4IvrW3kCgQ==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm-gnueabihf@4.14.0:
+    resolution: {integrity: sha512-ygrGVhQP47mRh0AAD0zl6QqCbNsf0eTo+vgwkY6LunBcg0f2Jv365GXlDUECIyoXp1kKwL5WW6rsO429DBY/bA==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-gnu@4.14.0:
+    resolution: {integrity: sha512-x+uJ6MAYRlHGe9wi4HQjxpaKHPM3d3JjqqCkeC5gpnnI6OWovLdXTpfa8trjxPLnWKyBsSi5kne+146GAxFt4A==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-musl@4.14.0:
+    resolution: {integrity: sha512-nrRw8ZTQKg6+Lttwqo6a2VxR9tOroa2m91XbdQ2sUUzHoedXlsyvY1fN4xWdqz8PKmf4orDwejxXHjh7YBGUCA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-powerpc64le-gnu@4.14.0:
+    resolution: {integrity: sha512-xV0d5jDb4aFu84XKr+lcUJ9y3qpIWhttO3Qev97z8DKLXR62LC3cXT/bMZXrjLF9X+P5oSmJTzAhqwUbY96PnA==}
+    cpu: [ppc64le]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-riscv64-gnu@4.14.0:
+    resolution: {integrity: sha512-SDDhBQwZX6LPRoPYjAZWyL27LbcBo7WdBFWJi5PI9RPCzU8ijzkQn7tt8NXiXRiFMJCVpkuMkBf4OxSxVMizAw==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-s390x-gnu@4.14.0:
+    resolution: {integrity: sha512-RxB/qez8zIDshNJDufYlTT0ZTVut5eCpAZ3bdXDU9yTxBzui3KhbGjROK2OYTTor7alM7XBhssgoO3CZ0XD3qA==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-gnu@4.14.0:
+    resolution: {integrity: sha512-C6y6z2eCNCfhZxT9u+jAM2Fup89ZjiG5pIzZIDycs1IwESviLxwkQcFRGLjnDrP+PT+v5i4YFvlcfAs+LnreXg==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-musl@4.14.0:
+    resolution: {integrity: sha512-i0QwbHYfnOMYsBEyjxcwGu5SMIi9sImDVjDg087hpzXqhBSosxkE7gyIYFHgfFl4mr7RrXksIBZ4DoLoP4FhJg==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-arm64-msvc@4.14.0:
+    resolution: {integrity: sha512-Fq52EYb0riNHLBTAcL0cun+rRwyZ10S9vKzhGKKgeD+XbwunszSY0rVMco5KbOsTlwovP2rTOkiII/fQ4ih/zQ==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-ia32-msvc@4.14.0:
+    resolution: {integrity: sha512-e/PBHxPdJ00O9p5Ui43+vixSgVf4NlLsmV6QneGERJ3lnjIua/kim6PRFe3iDueT1rQcgSkYP8ZBBXa/h4iPvw==}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-x64-msvc@4.14.0:
+    resolution: {integrity: sha512-aGg7iToJjdklmxlUlJh/PaPNa4PmqHfyRMLunbL3eaMO0gp656+q1zOKkpJ/CVe9CryJv6tAN1HDoR8cNGzkag==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@rushstack/eslint-patch@1.10.1:
     resolution: {integrity: sha512-S3Kq8e7LqxkA9s7HKLqXGTGck1uwis5vAXan3FnU5yw1Ec5hsSGnq4s/UCaSqABPOnOTg7zASLyst7+ohgWexg==}
     dev: true
 
+  /@tsconfig/node20@20.1.2:
+    resolution: {integrity: sha512-madaWq2k+LYMEhmcp0fs+OGaLFk0OenpHa4gmI4VEmCKX4PJntQ6fnnGADVFrVkBj0wIdAlQnK/MrlYTHsa1gQ==}
+    dev: true
+
   /@types/conventional-commits-parser@5.0.0:
     resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==}
     dependencies:
@@ -1066,16 +1242,6 @@ packages:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
 
-  /@types/lodash-es@4.17.12:
-    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
-    dependencies:
-      '@types/lodash': 4.14.202
-    dev: true
-
-  /@types/lodash@4.14.202:
-    resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==}
-    dev: true
-
   /@types/node@20.12.4:
     resolution: {integrity: sha512-E+Fa9z3wSQpzgYQdYmme5X3OTuejnnTx88A6p6vkkJosR3KBz+HpE3kqNm98VE6cfLFcISx7zW7MsJkH6KwbTw==}
     dependencies:
@@ -1090,7 +1256,7 @@ packages:
     resolution: {integrity: sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==}
     dev: true
 
-  /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.3):
+  /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.4):
     resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -1102,10 +1268,10 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.3)
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.4)
       '@typescript-eslint/scope-manager': 6.21.0
-      '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.0)(typescript@5.4.3)
-      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.3)
+      '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.0)(typescript@5.4.4)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.4)
       '@typescript-eslint/visitor-keys': 6.21.0
       debug: 4.3.4
       eslint: 8.57.0
@@ -1113,13 +1279,13 @@ packages:
       ignore: 5.3.1
       natural-compare: 1.4.0
       semver: 7.6.0
-      ts-api-utils: 1.3.0(typescript@5.4.3)
-      typescript: 5.4.3
+      ts-api-utils: 1.3.0(typescript@5.4.4)
+      typescript: 5.4.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.3):
+  /@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.4):
     resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -1131,11 +1297,11 @@ packages:
     dependencies:
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.3)
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.4)
       '@typescript-eslint/visitor-keys': 6.21.0
       debug: 4.3.4
       eslint: 8.57.0
-      typescript: 5.4.3
+      typescript: 5.4.4
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1148,7 +1314,7 @@ packages:
       '@typescript-eslint/visitor-keys': 6.21.0
     dev: true
 
-  /@typescript-eslint/type-utils@6.21.0(eslint@8.57.0)(typescript@5.4.3):
+  /@typescript-eslint/type-utils@6.21.0(eslint@8.57.0)(typescript@5.4.4):
     resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -1158,12 +1324,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.3)
-      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.3)
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.4)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.4)
       debug: 4.3.4
       eslint: 8.57.0
-      ts-api-utils: 1.3.0(typescript@5.4.3)
-      typescript: 5.4.3
+      ts-api-utils: 1.3.0(typescript@5.4.4)
+      typescript: 5.4.4
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1173,7 +1339,7 @@ packages:
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree@6.21.0(typescript@5.4.3):
+  /@typescript-eslint/typescript-estree@6.21.0(typescript@5.4.4):
     resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -1189,13 +1355,13 @@ packages:
       is-glob: 4.0.3
       minimatch: 9.0.3
       semver: 7.6.0
-      ts-api-utils: 1.3.0(typescript@5.4.3)
-      typescript: 5.4.3
+      ts-api-utils: 1.3.0(typescript@5.4.4)
+      typescript: 5.4.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.4.3):
+  /@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.4.4):
     resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -1206,7 +1372,7 @@ packages:
       '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.3)
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.4)
       eslint: 8.57.0
       semver: 7.6.0
     transitivePeerDependencies:
@@ -1226,7 +1392,7 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /@vitejs/plugin-vue-jsx@3.1.0(vite@4.5.3)(vue@3.4.21):
+  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.1.6)(vue@3.4.21):
     resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -1236,21 +1402,40 @@ packages:
       '@babel/core': 7.24.3
       '@babel/plugin-transform-typescript': 7.24.1(@babel/core@7.24.3)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.24.3)
-      vite: 4.5.3(@types/node@20.12.4)(less@4.1.3)
-      vue: 3.4.21(typescript@5.4.3)
+      vite: 5.1.6(@types/node@20.12.4)(less@4.1.3)
+      vue: 3.4.21(typescript@5.4.4)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue@4.0.0(vite@4.5.3)(vue@3.4.21):
+  /@vitejs/plugin-vue@4.0.0(vite@5.1.6)(vue@3.4.21):
     resolution: {integrity: sha512-e0X4jErIxAB5oLtDqbHvHpJe/uWNkdpYV83AOG2xo2tEVSzCzewgJMtREZM30wXnM5ls90hxiOtAuVU6H5JgbA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.5.3(@types/node@20.12.4)(less@4.1.3)
-      vue: 3.4.21(typescript@5.4.3)
+      vite: 5.1.6(@types/node@20.12.4)(less@4.1.3)
+      vue: 3.4.21(typescript@5.4.4)
+    dev: true
+
+  /@volar/language-core@2.1.6:
+    resolution: {integrity: sha512-pAlMCGX/HatBSiDFMdMyqUshkbwWbLxpN/RL7HCQDOo2gYBE+uS+nanosLc1qR6pTQ/U8q00xt8bdrrAFPSC0A==}
+    dependencies:
+      '@volar/source-map': 2.1.6
+    dev: true
+
+  /@volar/source-map@2.1.6:
+    resolution: {integrity: sha512-TeyH8pHHonRCHYI91J7fWUoxi0zWV8whZTVRlsWHSYfjm58Blalkf9LrZ+pj6OiverPTmrHRkBsG17ScQyWECw==}
+    dependencies:
+      muggle-string: 0.4.1
+    dev: true
+
+  /@volar/typescript@2.1.6:
+    resolution: {integrity: sha512-JgPGhORHqXuyC3r6skPmPHIZj4LoMmGlYErFTuPNBq9Nhc9VTv7ctHY7A3jMN3ngKEfRrfnUcwXHztvdSQqNfw==}
+    dependencies:
+      '@volar/language-core': 2.1.6
+      path-browserify: r2.cnpmjs.org/path-browserify@1.0.1
     dev: true
 
   /@vue-macros/common@1.10.1(rollup@2.79.1)(vue@3.4.21):
@@ -1268,7 +1453,7 @@ packages:
       ast-kit: 0.11.3(rollup@2.79.1)
       local-pkg: 0.5.0
       magic-string-ast: 0.3.0
-      vue: 3.4.21(typescript@5.4.3)
+      vue: 3.4.21(typescript@5.4.4)
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -1356,7 +1541,7 @@ packages:
       - '@types/eslint'
     dev: true
 
-  /@vue/eslint-config-typescript@12.0.0(eslint-plugin-vue@9.24.0)(eslint@8.57.0)(typescript@5.4.3):
+  /@vue/eslint-config-typescript@12.0.0(eslint-plugin-vue@9.24.0)(eslint@8.57.0)(typescript@5.4.4):
     resolution: {integrity: sha512-StxLFet2Qe97T8+7L8pGlhYBBr8Eg05LPuTDVopQV6il+SK6qqom59BA/rcFipUef2jD8P2X44Vd8tMFytfvlg==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1367,16 +1552,34 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.3)
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.3)
+      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.4)
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.4)
       eslint: 8.57.0
       eslint-plugin-vue: 9.24.0(eslint@8.57.0)
-      typescript: 5.4.3
+      typescript: 5.4.4
       vue-eslint-parser: 9.4.2(eslint@8.57.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
+  /@vue/language-core@2.0.6(typescript@5.4.4):
+    resolution: {integrity: sha512-UzqU12tzf9XLqRO3TiWPwRNpP4fyUzE6MAfOQWQNZ4jy6a30ARRUpmODDKq6O8C4goMc2AlPqTmjOHPjHkilSg==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@volar/language-core': 2.1.6
+      '@vue/compiler-dom': 3.4.21
+      '@vue/shared': 3.4.21
+      computeds: 0.0.1
+      minimatch: 9.0.3
+      path-browserify: r2.cnpmjs.org/path-browserify@1.0.1
+      typescript: 5.4.4
+      vue-template-compiler: 2.7.16
+    dev: true
+
   /@vue/reactivity@3.4.21:
     resolution: {integrity: sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==}
     dependencies:
@@ -1402,11 +1605,15 @@ packages:
     dependencies:
       '@vue/compiler-ssr': 3.4.21
       '@vue/shared': 3.4.21
-      vue: 3.4.21(typescript@5.4.3)
+      vue: 3.4.21(typescript@5.4.4)
 
   /@vue/shared@3.4.21:
     resolution: {integrity: sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==}
 
+  /@vue/tsconfig@0.5.1:
+    resolution: {integrity: sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==}
+    dev: true
+
   /acorn-jsx@5.3.2(acorn@8.11.3):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1523,26 +1730,22 @@ packages:
       - rollup
     dev: true
 
-  /asynckit@0.4.0:
-    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
-    dev: false
-
-  /axios-mock-adapter@1.22.0(axios@1.6.0):
+  /axios-mock-adapter@1.22.0(axios@1.6.8):
     resolution: {integrity: sha512-dmI0KbkyAhntUR05YY96qg2H6gg0XMl2+qTW0xmYg6Up+BFBAJYRLROMXRdDEL06/Wqwa0TJThAYvFtSFdRCZw==}
     peerDependencies:
       axios: '>= 0.17.0'
     dependencies:
-      axios: 1.6.0
+      axios: 1.6.8
       fast-deep-equal: 3.1.3
       is-buffer: 2.0.5
     dev: false
 
-  /axios@1.6.0:
-    resolution: {integrity: sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==}
+  /axios@1.6.8:
+    resolution: {integrity: sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==}
     dependencies:
       follow-redirects: 1.15.6
-      form-data: 4.0.0
-      proxy-from-env: 1.1.0
+      form-data: r2.cnpmjs.org/form-data@4.0.0
+      proxy-from-env: r2.cnpmjs.org/proxy-from-env@1.1.0
     transitivePeerDependencies:
       - debug
     dev: false
@@ -1709,13 +1912,6 @@ packages:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
     dev: true
 
-  /combined-stream@1.0.8:
-    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
-    engines: {node: '>= 0.8'}
-    dependencies:
-      delayed-stream: 1.0.0
-    dev: false
-
   /commander@1.1.1:
     resolution: {integrity: sha512-71Rod2AhcH3JhkBikVpNd0pA+fWsmAaVoti6OR38T76chA7vE3pSerS0Jor4wDw+tOueD2zLVvFOw5H0Rcj7rA==}
     engines: {node: '>= 0.6.x'}
@@ -1728,13 +1924,13 @@ packages:
     engines: {node: '>=16'}
     dev: true
 
-  /commitizen@4.3.0(@types/node@20.12.4)(typescript@5.4.3):
+  /commitizen@4.3.0(@types/node@20.12.4)(typescript@5.4.4):
     resolution: {integrity: sha512-H0iNtClNEhT0fotHvGV3E9tDejDeS04sN1veIebsKYGMuGscFaswRoYJKmT3eW85eIJAs0F28bG2+a/9wCOfPw==}
     engines: {node: '>= 12'}
     hasBin: true
     dependencies:
       cachedir: r2.cnpmjs.org/cachedir@2.3.0
-      cz-conventional-changelog: r2.cnpmjs.org/cz-conventional-changelog@3.3.0(@types/node@20.12.4)(typescript@5.4.3)
+      cz-conventional-changelog: r2.cnpmjs.org/cz-conventional-changelog@3.3.0(@types/node@20.12.4)(typescript@5.4.4)
       dedent: r2.cnpmjs.org/dedent@0.7.0
       detect-indent: r2.cnpmjs.org/detect-indent@6.1.0
       find-node-modules: 2.1.3
@@ -1752,6 +1948,10 @@ packages:
       - typescript
     dev: true
 
+  /computeds@0.0.1:
+    resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
+    dev: true
+
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     requiresBuild: true
@@ -1798,7 +1998,7 @@ packages:
     requiresBuild: true
     dev: false
 
-  /cosmiconfig-typescript-loader@5.0.0(@types/node@20.12.4)(cosmiconfig@9.0.0)(typescript@5.4.3):
+  /cosmiconfig-typescript-loader@5.0.0(@types/node@20.12.4)(cosmiconfig@9.0.0)(typescript@5.4.4):
     resolution: {integrity: sha512-+8cK7jRAReYkMwMiG+bxhcNKiHJDM6bR9FD/nGBXOWdMLuYawjF5cGrtLilJ+LGd3ZjCXnJjR5DkfWPoIVlqJA==}
     engines: {node: '>=v16'}
     peerDependencies:
@@ -1807,12 +2007,12 @@ packages:
       typescript: '>=4'
     dependencies:
       '@types/node': 20.12.4
-      cosmiconfig: 9.0.0(typescript@5.4.3)
+      cosmiconfig: 9.0.0(typescript@5.4.4)
       jiti: 1.21.0
-      typescript: 5.4.3
+      typescript: 5.4.4
     dev: true
 
-  /cosmiconfig@9.0.0(typescript@5.4.3):
+  /cosmiconfig@9.0.0(typescript@5.4.4):
     resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -1825,7 +2025,7 @@ packages:
       import-fresh: r2.cnpmjs.org/import-fresh@3.3.0
       js-yaml: r2.cnpmjs.org/js-yaml@4.1.0
       parse-json: r2.cnpmjs.org/parse-json@5.2.0
-      typescript: 5.4.3
+      typescript: 5.4.4
     dev: true
 
   /cross-spawn@7.0.3:
@@ -1854,19 +2054,6 @@ packages:
     resolution: {integrity: sha512-JLC809s6Y948/FuCZPm5IX8rRhQwOiyMb2TfVVQEixG7P8Lm/gt5S7yoQZmC8x1UehI9Pb7sksEt4xx14m+7Ug==}
     dev: false
 
-  /debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    requiresBuild: true
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.3
-    dev: true
-    optional: true
-
   /debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -1894,11 +2081,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /delayed-stream@1.0.0:
-    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
-    engines: {node: '>=0.4.0'}
-    dev: false
-
   /dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -1930,34 +2112,39 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
-  /esbuild@0.18.20:
-    resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
+  /es-module-lexer@1.5.0:
+    resolution: {integrity: sha512-pqrTKmwEIgafsYZAGw9kszYzmagcE/n4dbgwGWLEXg7J4QFJVQRBld8j3Q3GNez79jzxZshq0bcT962QHOghjw==}
+    dev: true
+
+  /esbuild@0.19.12:
+    resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      '@esbuild/android-arm': 0.18.20
-      '@esbuild/android-arm64': 0.18.20
-      '@esbuild/android-x64': 0.18.20
-      '@esbuild/darwin-arm64': 0.18.20
-      '@esbuild/darwin-x64': 0.18.20
-      '@esbuild/freebsd-arm64': 0.18.20
-      '@esbuild/freebsd-x64': 0.18.20
-      '@esbuild/linux-arm': 0.18.20
-      '@esbuild/linux-arm64': 0.18.20
-      '@esbuild/linux-ia32': 0.18.20
-      '@esbuild/linux-loong64': 0.18.20
-      '@esbuild/linux-mips64el': 0.18.20
-      '@esbuild/linux-ppc64': 0.18.20
-      '@esbuild/linux-riscv64': 0.18.20
-      '@esbuild/linux-s390x': 0.18.20
-      '@esbuild/linux-x64': 0.18.20
-      '@esbuild/netbsd-x64': 0.18.20
-      '@esbuild/openbsd-x64': 0.18.20
-      '@esbuild/sunos-x64': 0.18.20
-      '@esbuild/win32-arm64': 0.18.20
-      '@esbuild/win32-ia32': 0.18.20
-      '@esbuild/win32-x64': 0.18.20
+      '@esbuild/aix-ppc64': 0.19.12
+      '@esbuild/android-arm': 0.19.12
+      '@esbuild/android-arm64': 0.19.12
+      '@esbuild/android-x64': 0.19.12
+      '@esbuild/darwin-arm64': 0.19.12
+      '@esbuild/darwin-x64': 0.19.12
+      '@esbuild/freebsd-arm64': 0.19.12
+      '@esbuild/freebsd-x64': 0.19.12
+      '@esbuild/linux-arm': 0.19.12
+      '@esbuild/linux-arm64': 0.19.12
+      '@esbuild/linux-ia32': 0.19.12
+      '@esbuild/linux-loong64': 0.19.12
+      '@esbuild/linux-mips64el': 0.19.12
+      '@esbuild/linux-ppc64': 0.19.12
+      '@esbuild/linux-riscv64': 0.19.12
+      '@esbuild/linux-s390x': 0.19.12
+      '@esbuild/linux-x64': 0.19.12
+      '@esbuild/netbsd-x64': 0.19.12
+      '@esbuild/openbsd-x64': 0.19.12
+      '@esbuild/sunos-x64': 0.19.12
+      '@esbuild/win32-arm64': 0.19.12
+      '@esbuild/win32-ia32': 0.19.12
+      '@esbuild/win32-x64': 0.19.12
     dev: true
 
   /escalade@3.1.1:
@@ -2150,10 +2337,10 @@ packages:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
     dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
+      '@nodelib/fs.stat': r2.cnpmjs.org/@nodelib/fs.stat@2.0.5
+      '@nodelib/fs.walk': r2.cnpmjs.org/@nodelib/fs.walk@1.2.8
+      glob-parent: r2.cnpmjs.org/glob-parent@5.1.2
+      merge2: r2.cnpmjs.org/merge2@1.4.1
       micromatch: 4.0.5
     dev: true
 
@@ -2232,15 +2419,6 @@ packages:
         optional: true
     dev: false
 
-  /form-data@4.0.0:
-    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
-    engines: {node: '>= 6'}
-    dependencies:
-      asynckit: 0.4.0
-      combined-stream: 1.0.8
-      mime-types: 2.1.35
-    dev: false
-
   /fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -2309,6 +2487,17 @@ packages:
       path-is-absolute: r2.cnpmjs.org/path-is-absolute@1.0.1
     dev: true
 
+  /glob@8.1.0:
+    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      fs.realpath: r2.cnpmjs.org/fs.realpath@1.0.0
+      inflight: r2.cnpmjs.org/inflight@1.0.6
+      inherits: r2.cnpmjs.org/inherits@2.0.4
+      minimatch: 5.1.6
+      once: r2.cnpmjs.org/once@1.4.0
+    dev: true
+
   /global-directory@4.0.1:
     resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
     engines: {node: '>=18'}
@@ -2336,7 +2525,7 @@ packages:
       dir-glob: 3.0.1
       fast-glob: 3.3.2
       ignore: 5.3.1
-      merge2: 1.4.1
+      merge2: r2.cnpmjs.org/merge2@1.4.1
       slash: 3.0.0
     dev: true
 
@@ -2588,10 +2777,8 @@ packages:
       image-size: r2.cnpmjs.org/image-size@0.5.5
       make-dir: r2.cnpmjs.org/make-dir@2.1.0
       mime: r2.cnpmjs.org/mime@1.6.0
-      needle: 3.2.0
+      needle: 3.3.1
       source-map: r2.cnpmjs.org/source-map@0.6.1
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /levn@0.4.1:
@@ -2720,11 +2907,6 @@ packages:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
     dev: true
 
-  /merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
-    dev: true
-
   /micromatch@4.0.5:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
@@ -2762,6 +2944,13 @@ packages:
       brace-expansion: 1.1.11
     dev: true
 
+  /minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: r2.cnpmjs.org/brace-expansion@2.0.1
+    dev: true
+
   /minimatch@9.0.3:
     resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -2805,11 +2994,9 @@ packages:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
     dev: true
 
-  /ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-    requiresBuild: true
+  /muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
     dev: true
-    optional: true
 
   /nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
@@ -2820,17 +3007,14 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
-  /needle@3.2.0:
-    resolution: {integrity: sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==}
+  /needle@3.3.1:
+    resolution: {integrity: sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==}
     engines: {node: '>= 4.4.x'}
     hasBin: true
     requiresBuild: true
     dependencies:
-      debug: 3.2.7
       iconv-lite: 0.6.3
       sax: 1.3.0
-    transitivePeerDependencies:
-      - supports-color
     dev: true
     optional: true
 
@@ -2962,7 +3146,7 @@ packages:
     dev: true
     optional: true
 
-  /pinia@2.1.7(typescript@5.4.3)(vue@3.4.21):
+  /pinia@2.1.7(typescript@5.4.4)(vue@3.4.21):
     resolution: {integrity: sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==}
     peerDependencies:
       '@vue/composition-api': ^1.4.0
@@ -2975,8 +3159,8 @@ packages:
         optional: true
     dependencies:
       '@vue/devtools-api': 6.5.1
-      typescript: 5.4.3
-      vue: 3.4.21(typescript@5.4.3)
+      typescript: 5.4.4
+      vue: 3.4.21(typescript@5.4.4)
       vue-demi: 0.14.7(vue@3.4.21)
     dev: false
 
@@ -3022,10 +3206,6 @@ packages:
     hasBin: true
     dev: true
 
-  /proxy-from-env@1.1.0:
-    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
-    dev: false
-
   /prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
     requiresBuild: true
@@ -3128,11 +3308,28 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /rollup@3.29.4:
-    resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==}
-    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+  /rollup@4.14.0:
+    resolution: {integrity: sha512-Qe7w62TyawbDzB4yt32R0+AbIo6m1/sqO7UPzFS8Z/ksL5mrfhA0v4CavfdmFav3D+ub4QeAgsGEe84DoWe/nQ==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
+    dependencies:
+      '@types/estree': 1.0.5
     optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.14.0
+      '@rollup/rollup-android-arm64': 4.14.0
+      '@rollup/rollup-darwin-arm64': 4.14.0
+      '@rollup/rollup-darwin-x64': 4.14.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.14.0
+      '@rollup/rollup-linux-arm64-gnu': 4.14.0
+      '@rollup/rollup-linux-arm64-musl': 4.14.0
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.14.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.14.0
+      '@rollup/rollup-linux-s390x-gnu': 4.14.0
+      '@rollup/rollup-linux-x64-gnu': 4.14.0
+      '@rollup/rollup-linux-x64-musl': 4.14.0
+      '@rollup/rollup-win32-arm64-msvc': 4.14.0
+      '@rollup/rollup-win32-ia32-msvc': 4.14.0
+      '@rollup/rollup-win32-x64-msvc': 4.14.0
       fsevents: 2.3.3
     dev: true
 
@@ -3338,13 +3535,13 @@ packages:
       is-number: 7.0.0
     dev: true
 
-  /ts-api-utils@1.3.0(typescript@5.4.3):
+  /ts-api-utils@1.3.0(typescript@5.4.4):
     resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
     engines: {node: '>=16'}
     peerDependencies:
       typescript: '>=4.2.0'
     dependencies:
-      typescript: 5.4.3
+      typescript: 5.4.4
     dev: true
 
   /tslib@2.6.2:
@@ -3363,8 +3560,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /typescript@5.4.3:
-    resolution: {integrity: sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==}
+  /typescript@5.4.4:
+    resolution: {integrity: sha512-dGE2Vv8cpVvw28v8HCPqyb08EzbBURxDpuhJvTrusShUfGnhHBafDsLdS1EhhxyL6BJQE+2cT3dDPAv+MQ6oLw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
@@ -3437,12 +3634,30 @@ packages:
       - rollup
     dev: true
 
-  /vite@4.5.3(@types/node@20.12.4)(less@4.1.3):
-    resolution: {integrity: sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  /vite-plugin-commonjs@0.10.1:
+    resolution: {integrity: sha512-taP8R9kYGlCW5OzkVR0UIWRCnG6rSxeWWuA7tnU5b9t5MniibOnDY219NhisTeDhJAeGT8cEnrhVWZ9A5yD+vg==}
+    dependencies:
+      acorn: 8.11.3
+      fast-glob: 3.3.2
+      magic-string: 0.30.7
+      vite-plugin-dynamic-import: 1.5.0
+    dev: true
+
+  /vite-plugin-dynamic-import@1.5.0:
+    resolution: {integrity: sha512-Qp85c+AVJmLa8MLni74U4BDiWpUeFNx7NJqbGZyR2XJOU7mgW0cb7nwlAMucFyM4arEd92Nfxp4j44xPi6Fu7g==}
+    dependencies:
+      acorn: 8.11.3
+      es-module-lexer: 1.5.0
+      fast-glob: 3.3.2
+      magic-string: 0.30.7
+    dev: true
+
+  /vite@5.1.6(@types/node@20.12.4)(less@4.1.3):
+    resolution: {integrity: sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
-      '@types/node': '>= 14'
+      '@types/node': ^18.0.0 || >=20.0.0
       less: '*'
       lightningcss: ^1.21.0
       sass: '*'
@@ -3466,10 +3681,10 @@ packages:
         optional: true
     dependencies:
       '@types/node': 20.12.4
-      esbuild: 0.18.20
+      esbuild: 0.19.12
       less: 4.1.3
       postcss: 8.4.35
-      rollup: 3.29.4
+      rollup: 4.14.0
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
@@ -3486,7 +3701,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.21(typescript@5.4.3)
+      vue: 3.4.21(typescript@5.4.4)
     dev: false
 
   /vue-eslint-parser@9.4.2(eslint@8.57.0):
@@ -3513,7 +3728,7 @@ packages:
       vue: ^3.2.0
     dependencies:
       '@vue/devtools-api': 6.5.1
-      vue: 3.4.21(typescript@5.4.3)
+      vue: 3.4.21(typescript@5.4.4)
     dev: false
 
   /vue-switches@2.0.1:
@@ -3522,6 +3737,25 @@ packages:
       vue: 2.7.14
     dev: false
 
+  /vue-template-compiler@2.7.16:
+    resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
+    dependencies:
+      de-indent: r2.cnpmjs.org/de-indent@1.0.2
+      he: r2.cnpmjs.org/he@1.2.0
+    dev: true
+
+  /vue-tsc@2.0.6(typescript@5.4.4):
+    resolution: {integrity: sha512-kK50W4XqQL34vHRkxlRWLicrT6+F9xfgCgJ4KSmCHcytKzc1u3c94XXgI+CjmhOSxyw0krpExF7Obo7y4+0dVQ==}
+    hasBin: true
+    peerDependencies:
+      typescript: '*'
+    dependencies:
+      '@volar/typescript': 2.1.6
+      '@vue/language-core': 2.0.6(typescript@5.4.4)
+      semver: 7.6.0
+      typescript: 5.4.4
+    dev: true
+
   /vue@2.7.14:
     resolution: {integrity: sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==}
     deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
@@ -3530,7 +3764,7 @@ packages:
       csstype: 3.1.2
     dev: false
 
-  /vue@3.4.21(typescript@5.4.3):
+  /vue@3.4.21(typescript@5.4.4):
     resolution: {integrity: sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==}
     peerDependencies:
       typescript: '*'
@@ -3543,7 +3777,7 @@ packages:
       '@vue/runtime-dom': 3.4.21
       '@vue/server-renderer': 3.4.21(vue@3.4.21)
       '@vue/shared': 3.4.21
-      typescript: 5.4.3
+      typescript: 5.4.4
 
   /webpack-sources@3.2.3:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
@@ -3631,6 +3865,33 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  r2.cnpmjs.org/@nodelib/fs.scandir@2.1.5:
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz}
+    name: '@nodelib/fs.scandir'
+    version: 2.1.5
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.stat': r2.cnpmjs.org/@nodelib/fs.stat@2.0.5
+      run-parallel: r2.cnpmjs.org/run-parallel@1.2.0
+    dev: true
+
+  r2.cnpmjs.org/@nodelib/fs.stat@2.0.5:
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz}
+    name: '@nodelib/fs.stat'
+    version: 2.0.5
+    engines: {node: '>= 8'}
+    dev: true
+
+  r2.cnpmjs.org/@nodelib/fs.walk@1.2.8:
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz}
+    name: '@nodelib/fs.walk'
+    version: 1.2.8
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.scandir': r2.cnpmjs.org/@nodelib/fs.scandir@2.1.5
+      fastq: 1.17.1
+    dev: true
+
   r2.cnpmjs.org/JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/JSONStream/-/JSONStream-1.3.5.tgz}
     name: JSONStream
@@ -3687,6 +3948,12 @@ packages:
     version: 1.0.0
     dev: true
 
+  r2.cnpmjs.org/asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/asynckit/-/asynckit-0.4.0.tgz}
+    name: asynckit
+    version: 0.4.0
+    dev: false
+
   r2.cnpmjs.org/at-least-node@1.0.0:
     resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/at-least-node/-/at-least-node-1.0.0.tgz}
     name: at-least-node
@@ -3694,6 +3961,12 @@ packages:
     engines: {node: '>= 4.0.0'}
     dev: true
 
+  r2.cnpmjs.org/balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/balanced-match/-/balanced-match-1.0.2.tgz}
+    name: balanced-match
+    version: 1.0.2
+    dev: true
+
   r2.cnpmjs.org/bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/bl/-/bl-4.1.0.tgz}
     name: bl
@@ -3704,6 +3977,14 @@ packages:
       readable-stream: 3.6.2
     dev: true
 
+  r2.cnpmjs.org/brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz}
+    name: brace-expansion
+    version: 2.0.1
+    dependencies:
+      balanced-match: r2.cnpmjs.org/balanced-match@1.0.2
+    dev: true
+
   r2.cnpmjs.org/cachedir@2.3.0:
     resolution: {integrity: sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/cachedir/-/cachedir-2.3.0.tgz}
     name: cachedir
@@ -3797,6 +4078,21 @@ packages:
     version: 1.1.4
     dev: true
 
+  r2.cnpmjs.org/combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/combined-stream/-/combined-stream-1.0.8.tgz}
+    name: combined-stream
+    version: 1.0.8
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: r2.cnpmjs.org/delayed-stream@1.0.0
+    dev: false
+
+  r2.cnpmjs.org/commondir@1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/commondir/-/commondir-1.0.1.tgz}
+    name: commondir
+    version: 1.0.1
+    dev: true
+
   r2.cnpmjs.org/compare-func@2.0.0:
     resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/compare-func/-/compare-func-2.0.0.tgz}
     name: compare-func
@@ -3812,7 +4108,7 @@ packages:
     version: 3.0.0
     dev: true
 
-  r2.cnpmjs.org/cz-conventional-changelog@3.3.0(@types/node@20.12.4)(typescript@5.4.3):
+  r2.cnpmjs.org/cz-conventional-changelog@3.3.0(@types/node@20.12.4)(typescript@5.4.4):
     resolution: {integrity: sha512-U466fIzU5U22eES5lTNiNbZ+d8dfcHcssH4o7QsdWaCcRs/feIPCxKYSWkYBNs5mny7MvEfwpTLWjvbm94hecw==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/cz-conventional-changelog/-/cz-conventional-changelog-3.3.0.tgz}
     id: r2.cnpmjs.org/cz-conventional-changelog/3.3.0
     name: cz-conventional-changelog
@@ -3820,13 +4116,13 @@ packages:
     engines: {node: '>= 10'}
     dependencies:
       chalk: r2.cnpmjs.org/chalk@2.4.2
-      commitizen: 4.3.0(@types/node@20.12.4)(typescript@5.4.3)
+      commitizen: 4.3.0(@types/node@20.12.4)(typescript@5.4.4)
       conventional-commit-types: r2.cnpmjs.org/conventional-commit-types@3.0.0
       lodash.map: r2.cnpmjs.org/lodash.map@4.6.0
       longest: r2.cnpmjs.org/longest@2.0.1
       word-wrap: 1.2.5
     optionalDependencies:
-      '@commitlint/load': 19.2.0(@types/node@20.12.4)(typescript@5.4.3)
+      '@commitlint/load': 19.2.0(@types/node@20.12.4)(typescript@5.4.4)
     transitivePeerDependencies:
       - '@types/node'
       - typescript
@@ -3839,12 +4135,25 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  r2.cnpmjs.org/de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/de-indent/-/de-indent-1.0.2.tgz}
+    name: de-indent
+    version: 1.0.2
+    dev: true
+
   r2.cnpmjs.org/dedent@0.7.0:
     resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/dedent/-/dedent-0.7.0.tgz}
     name: dedent
     version: 0.7.0
     dev: true
 
+  r2.cnpmjs.org/delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz}
+    name: delayed-stream
+    version: 1.0.0
+    engines: {node: '>=0.4.0'}
+    dev: false
+
   r2.cnpmjs.org/detect-file@1.0.0:
     resolution: {integrity: sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/detect-file/-/detect-file-1.0.0.tgz}
     name: detect-file
@@ -3907,6 +4216,12 @@ packages:
     engines: {node: '>=0.8.0'}
     dev: true
 
+  r2.cnpmjs.org/estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/estree-walker/-/estree-walker-2.0.2.tgz}
+    name: estree-walker
+    version: 2.0.2
+    dev: true
+
   r2.cnpmjs.org/expand-tilde@2.0.2:
     resolution: {integrity: sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz}
     name: expand-tilde
@@ -3960,6 +4275,17 @@ packages:
       resolve-dir: r2.cnpmjs.org/resolve-dir@1.0.1
     dev: true
 
+  r2.cnpmjs.org/form-data@4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/form-data/-/form-data-4.0.0.tgz}
+    name: form-data
+    version: 4.0.0
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: r2.cnpmjs.org/asynckit@0.4.0
+      combined-stream: r2.cnpmjs.org/combined-stream@1.0.8
+      mime-types: 2.1.35
+    dev: false
+
   r2.cnpmjs.org/fs-extra@9.1.0:
     resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/fs-extra/-/fs-extra-9.1.0.tgz}
     name: fs-extra
@@ -3978,6 +4304,15 @@ packages:
     version: 1.0.0
     dev: true
 
+  r2.cnpmjs.org/glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/glob-parent/-/glob-parent-5.1.2.tgz}
+    name: glob-parent
+    version: 5.1.2
+    engines: {node: '>= 6'}
+    dependencies:
+      is-glob: r2.cnpmjs.org/is-glob@4.0.3
+    dev: true
+
   r2.cnpmjs.org/global-modules@1.0.0:
     resolution: {integrity: sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/global-modules/-/global-modules-1.0.0.tgz}
     name: global-modules
@@ -4016,6 +4351,13 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  r2.cnpmjs.org/he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/he/-/he-1.2.0.tgz}
+    name: he
+    version: 1.2.0
+    hasBin: true
+    dev: true
+
   r2.cnpmjs.org/homedir-polyfill@1.0.3:
     resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz}
     name: homedir-polyfill
@@ -4124,6 +4466,14 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  r2.cnpmjs.org/is-reference@1.2.1:
+    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/is-reference/-/is-reference-1.2.1.tgz}
+    name: is-reference
+    version: 1.2.1
+    dependencies:
+      '@types/estree': 1.0.5
+    dev: true
+
   r2.cnpmjs.org/is-text-path@2.0.0:
     resolution: {integrity: sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/is-text-path/-/is-text-path-2.0.0.tgz}
     name: is-text-path
@@ -4298,6 +4648,13 @@ packages:
     dev: true
     optional: true
 
+  r2.cnpmjs.org/merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/merge2/-/merge2-1.4.1.tgz}
+    name: merge2
+    version: 1.4.1
+    engines: {node: '>= 8'}
+    dev: true
+
   r2.cnpmjs.org/merge@2.1.1:
     resolution: {integrity: sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/merge/-/merge-2.1.1.tgz}
     name: merge
@@ -4414,6 +4771,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  r2.cnpmjs.org/path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/path-browserify/-/path-browserify-1.0.1.tgz}
+    name: path-browserify
+    version: 1.0.1
+    dev: true
+
   r2.cnpmjs.org/path-exists@5.0.0:
     resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/path-exists/-/path-exists-5.0.0.tgz}
     name: path-exists
@@ -4428,6 +4791,18 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  r2.cnpmjs.org/proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz}
+    name: proxy-from-env
+    version: 1.1.0
+    dev: false
+
+  r2.cnpmjs.org/queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz}
+    name: queue-microtask
+    version: 1.2.3
+    dev: true
+
   r2.cnpmjs.org/require-from-string@2.0.2:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/require-from-string/-/require-from-string-2.0.2.tgz}
     name: require-from-string
@@ -4476,6 +4851,14 @@ packages:
     engines: {node: '>=0.12.0'}
     dev: true
 
+  r2.cnpmjs.org/run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/run-parallel/-/run-parallel-1.2.0.tgz}
+    name: run-parallel
+    version: 1.2.0
+    dependencies:
+      queue-microtask: r2.cnpmjs.org/queue-microtask@1.2.3
+    dev: true
+
   r2.cnpmjs.org/safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==, registry: https://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz}
     name: safe-buffer
diff --git a/src/App.vue b/src/App.vue
index 54d7cc855..a9a310660 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <router-view v-slot="{ Component }">
     <transition :name="transitionName">
-      <keep-alive :exclude="excludeRoutes">
+      <keep-alive :exclude="store.excludeRoutes">
         <component :is="Component" />
       </keep-alive>
     </transition>
@@ -17,93 +17,66 @@
   </div>
   <Call />
 </template>
-<script>
+<script setup lang="ts">
 /*
 * try {navigator.control.gesture(false);} catch (e) {} //UC浏览器关闭默认手势事件
 try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出菜单
 * */
-import { mapActions, mapState } from 'pinia'
 import routes from './router/routes'
-import Call from './components/Call'
-import { useBaseStore } from '@/store/pinia'
-import { onMounted, ref } from 'vue'
-
-export default {
-  name: 'App',
-  setup() {
-    const isMobile = ref(/Mobi|Android|iPhone/i.test(navigator.userAgent))
-    onMounted(() => {
-      console.log('asdf', isMobile.value)
-    })
-    return { isMobile }
-  },
-  components: {
-    Call
-  },
-  data() {
-    return {
-      transitionName: 'go'
+import Call from './components/Call.vue'
+import { useBaseStore } from '@/store/pinia.js'
+import { onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+
+const store = useBaseStore()
+const route = useRoute()
+const isMobile = ref(/Mobi|Android|iPhone/i.test(navigator.userAgent))
+const transitionName = ref('go')
+
+// watch $route 决定使用哪种过渡
+watch(
+  () => route.path,
+  (to, from) => {
+    store.setMaskDialog({ state: false, mode: store.maskDialogMode })
+    //footer下面的5个按钮，对跳不要用动画
+    let noAnimation = [
+      '/',
+      '/home',
+      '/slide',
+      '/me',
+      '/shop',
+      '/message',
+      '/publish',
+      '/home/live',
+      'slide',
+      '/test'
+    ]
+    if (noAnimation.indexOf(from) !== -1 && noAnimation.indexOf(to) !== -1) {
+      return (transitionName.value = '')
     }
-  },
-  computed: {
-    ...mapState(useBaseStore, ['excludeRoutes'])
-  },
-  // watch $route 决定使用哪种过渡
-  watch: {
-    $route(to, from) {
-      this.setMaskDialog({ state: false, mode: this.maskDialogMode })
-
-      //footer下面的5个按钮，对跳不要用动画
-      let noAnimation = [
-        '/',
-        '/home',
-        '/slide',
-        '/me',
-        '/shop',
-        '/message',
-        '/publish',
-        '/home/live',
-        'slide',
-        '/test'
-      ]
-      if (noAnimation.indexOf(from.path) !== -1 && noAnimation.indexOf(to.path) !== -1) {
-        return (this.transitionName = '')
-      }
-
-      const toDepth = routes.findIndex((v) => v.path === to.path)
-      const fromDepth = routes.findIndex((v) => v.path === from.path)
-      this.transitionName = toDepth > fromDepth ? 'go' : 'back'
-    }
-  },
-  methods: {
-    ...mapActions(useBaseStore, ['init', 'setMaskDialog']),
-    setVh() {
-      let vh = window.innerHeight * 0.01
-      document.documentElement.style.setProperty('--vh', `${vh}px`)
-    }
-  },
-  mounted() {
-    this.init()
-    this.setVh()
-    // 监听resize事件 视图大小发生变化就重新计算1vh的值
-    window.addEventListener('resize', () => {
-      location.reload()
-      this.setVh()
-    })
-
-    try {
-      navigator.control.gesture(false)
-    } catch (e) {
-      //
-    }
-    try {
-      navigator.control.longpressMenu(false)
-    } catch (e) {
-      //
-    }
-    document.onselectstart = new Function('return false') //禁止选中文字
+    const toDepth = routes.findIndex((v: RouteRecordRaw) => v.path === to)
+    const fromDepth = routes.findIndex((v: RouteRecordRaw) => v.path === from)
+    transitionName.value = toDepth > fromDepth ? 'go' : 'back'
   }
+)
+
+function setVh() {
+  let vh = window.innerHeight * 0.01
+  document.documentElement.style.setProperty('--vh', `${vh}px`)
 }
+
+onMounted(() => {
+  store.init()
+  setVh()
+  // 监听resize事件 视图大小发生变化就重新计算1vh的值
+  window.addEventListener('resize', () => {
+    location.reload()
+    setVh()
+  })
+  //禁止选中文字
+  document.onselectstart = new Function('return false') as any
+})
 </script>
 
 <style lang="less">
diff --git a/src/components/AutoInput.vue b/src/components/AutoInput.vue
index d7c0b0bf5..95f8213ee 100644
--- a/src/components/AutoInput.vue
+++ b/src/components/AutoInput.vue
@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'AutoInput',
   props: {
diff --git a/src/components/BaseHeader.vue b/src/components/BaseHeader.vue
index 95e6d02a0..e2e361af4 100644
--- a/src/components/BaseHeader.vue
+++ b/src/components/BaseHeader.vue
@@ -1,54 +1,59 @@
 <template>
-  <div id="BaseHeader" :class="[isFixed ? 'fixed' : '']">
+  <div id="BaseHeader" :class="[props.isFixed ? 'fixed' : '']">
     <div class="header">
-      <dy-back :mode="backMode" :img="backImg" @click="back()" class="left" direction="left" />
+      <dy-back
+        :mode="props.backMode"
+        :img="props.backImg"
+        @click="back"
+        class="left"
+        direction="left"
+      />
       <slot name="center"><span></span></slot>
       <slot name="right"><span></span></slot>
     </div>
     <slot name="bottom"></slot>
   </div>
 </template>
-<script>
-export default {
-  name: 'BaseHeader',
-  components: {},
-  props: {
-    backMode: {
-      type: String,
-      default: 'gray'
-    },
-    backImg: {
-      type: String,
-      default: 'back'
-    },
-    isClose: {
-      type: Boolean,
-      default: false
-    },
-    isFixed: {
-      type: Boolean,
-      default: true
-    }
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+import { useRouter } from 'vue-router'
+
+defineOptions({
+  name: 'BaseHeader'
+})
+
+const props = defineProps({
+  backMode: {
+    type: String,
+    default: 'gray'
   },
-  data() {
-    return {}
+  backImg: {
+    type: String,
+    default: 'back'
   },
-  created() {},
-  computed: {},
-  methods: {
-    back() {
-      if (this.$attrs.onBack) {
-        this.$attrs.onBack()
-      } else {
-        this.$back()
-      }
-    }
+  isClose: {
+    type: Boolean,
+    default: false
+  },
+  isFixed: {
+    type: Boolean,
+    default: true
+  }
+})
+const router = useRouter()
+const attrs: any = useAttrs()
+
+function back() {
+  if (attrs.onBack) {
+    attrs.onBack()
+  } else {
+    router.back()
   }
 }
 </script>
 
 <style scoped lang="less">
-@import '../assets/less/index';
+@import '@/assets/less/index';
 
 #BaseHeader {
   width: 100%;
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 4bc8d9273..81a3f7bd5 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -13,7 +13,7 @@
     <template v-slot:header>
       <div class="title">
         <dy-back mode="dark" img="close" direction="right" style="opacity: 0" />
-        <div class="num">{{ formatNumber(comments.length) }}条评论</div>
+        <div class="num">{{ _formatNumber(comments.length) }}条评论</div>
         <div class="right">
           <Icon icon="prime:arrow-up-right-and-arrow-down-left-from-center" @click.stop="$no" />
           <Icon icon="ic:round-close" @click.stop="cancel" />
@@ -36,7 +36,7 @@
                   <div class="time-wrapper">
                     <div class="left">
                       <div class="time">
-                        {{ $time(item.create_time)
+                        {{ _time(item.create_time)
                         }}{{ item.ip_location && ` · ${item.ip_location}` }}
                       </div>
                       <div class="reply-text">回复</div>
@@ -84,7 +84,7 @@
                       <div class="time-wrapper">
                         <div class="left">
                           <div class="time">
-                            {{ $time(child.create_time)
+                            {{ _time(child.create_time)
                             }}{{ child.ip_location && ` · ${item.ip_location}` }}
                           </div>
                           <div class="reply-text">回复</div>
@@ -104,7 +104,7 @@
                             v-show="!child.user_digged"
                             class="love-image"
                           />
-                          <span>{{ formatNumber(child.digg_count) }}</span>
+                          <span>{{ _formatNumber(child.digg_count) }}</span>
                         </div>
                       </div>
                     </div>
@@ -139,7 +139,7 @@
               <img
                 :style="item.select ? 'opacity: .5;' : ''"
                 class="avatar"
-                :src="$imgPreview(item.avatar)"
+                :src="_checkImgUrl(item.avatar)"
                 alt=""
               />
               <span>{{ item.name }}</span>
@@ -170,14 +170,22 @@
   </from-bottom-dialog>
 </template>
 
-<script>
-import AutoInput from './AutoInput'
-import ConfirmDialog from './dialog/ConfirmDialog'
+<script lang="ts">
+import AutoInput from './AutoInput.vue'
+import ConfirmDialog from './dialog/ConfirmDialog.vue'
 import { mapState } from 'pinia'
-import FromBottomDialog from './dialog/FromBottomDialog'
-import Loading from './Loading'
-import Search from './Search'
-import { $no, _checkImgUrl, _formatNumber, sampleSize } from '@/utils'
+import FromBottomDialog from './dialog/FromBottomDialog.vue'
+import Loading from './Loading.vue'
+import Search from './Search.vue'
+import {
+  $no,
+  _checkImgUrl,
+  _formatNumber,
+  _showSelectDialog,
+  _sleep,
+  _time,
+  sampleSize
+} from '@/utils'
 import { useBaseStore } from '@/store/pinia'
 import { videoComments } from '@/api/videos'
 
@@ -243,13 +251,14 @@ export default {
   },
   mounted() {},
   methods: {
+    _time,
     _formatNumber,
     _checkImgUrl,
     $no,
     async handShowChildren(item) {
       this.loadChildrenItemCId = item.comment_id
       this.loadChildren = true
-      await this.$sleep(500)
+      await _sleep(500)
       this.loadChildren = false
       if (item.showChildren) {
         item.children = item.children.concat(sampleSize(this.comments, 10))
@@ -273,7 +282,7 @@ export default {
       this.isCall = false
     },
     async getData() {
-      let res = await videoComments({ id: this.videoId })
+      let res: any = await videoComments({ id: this.videoId })
       if (res.success) {
         res.data.map((v) => {
           v.showChildren = false
@@ -304,19 +313,12 @@ export default {
       row.user_digged = !row.user_digged
     },
     showOptions(row) {
-      this.$showSelectDialog(this.options, (e) => {
+      _showSelectDialog(this.options, (e) => {
         if (e.id === 1) {
           this.selectRow = row
           this.showPrivateChat = true
         }
       })
-    },
-    // showComment() {
-    //     this.isCommenting = !this.isCommenting;
-    //     console.log(666)
-    // }
-    call() {
-      console.log(this.commit)
     }
   }
 }
diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index fef5c4019..63ef41b8e 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -2,7 +2,7 @@
   <div id="UserPanel" @scroll="scroll" ref="page">
     <div ref="float" class="float" :class="state.floatFixed ? 'fixed' : ''">
       <div class="left">
-        <Icon @click="$emit('back')" class="icon" icon="eva:arrow-ios-back-fill" />
+        <Icon @click="emit('back')" class="icon" icon="eva:arrow-ios-back-fill" />
         <transition name="fade">
           <div class="float-user" v-if="state.floatFixed">
             <img
@@ -33,7 +33,7 @@
           </div>
         </transition>
         <Icon class="icon" icon="ion:search" @click.stop="$no()" />
-        <Icon class="icon" icon="ri:more-line" @click.stop="$emit('showFollowSetting')" />
+        <Icon class="icon" icon="ri:more-line" @click.stop="emit('showFollowSetting')" />
       </div>
     </div>
     <div
@@ -163,7 +163,7 @@
               <span>关注</span>
             </div>
             <div class="followed">
-              <div class="l-button" @click="$emit('showFollowSetting2')">
+              <div class="l-button" @click="emit('showFollowSetting2')">
                 <span>已关注</span>
                 <Icon icon="bxs:down-arrow" class="arrow" />
               </div>
@@ -232,11 +232,11 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { reactive, ref, watch } from 'vue'
 import Utils, { $no, _checkImgUrl, _getUserDouyinId } from '@/utils'
 import { useNav } from '@/utils/hooks/useNav'
-import Posters from '@/components/Posters'
+import Posters from '@/components/Posters.vue'
 import { DefaultUser } from '@/utils/const_var'
 import Loading from '@/components/Loading.vue'
 import { useBaseStore } from '@/store/pinia'
@@ -244,7 +244,13 @@ import { userVideoList } from '@/api/user'
 
 const $nav = useNav()
 const baseStore = useBaseStore()
-const emit = defineEmits(['update:currentItem', 'back'])
+const emit = defineEmits<{
+  'update:currentItem': [val: any]
+  back: []
+  showFollowSetting: []
+  showFollowSetting2: []
+}>()
+
 const props = defineProps({
   currentItem: {
     type: Object,
@@ -272,9 +278,7 @@ const state = reactive({
   previewImg: '',
   floatFixed: false,
   showFollowSetting: false,
-
   floatHeight: 52,
-
   loadings: {
     showRecommend: false
   },
@@ -296,7 +300,7 @@ watch(
     if (newVal && !props.currentItem.aweme_list.length) {
       // console.log('props.currentItem',props.currentItem)
       let id = _getUserDouyinId(props.currentItem)
-      let r = await userVideoList({ id })
+      let r: any = await userVideoList({ id })
       if (r.success) {
         setTimeout(() => {
           r.data = r.data.map((a) => {
@@ -326,6 +330,10 @@ function stop(e) {
 
 function followButton() {}
 
+function cancelFollow() {}
+
+defineExpose({ cancelFollow })
+
 function scroll() {
   // console.log('scroll', page.value.scrollTop)
   let scrollTop = page.value.scrollTop
diff --git a/src/components/dialog/ConfirmDialog.vue b/src/components/dialog/ConfirmDialog.vue
index 414de139a..da38bce53 100644
--- a/src/components/dialog/ConfirmDialog.vue
+++ b/src/components/dialog/ConfirmDialog.vue
@@ -18,7 +18,7 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
 /*TODO 单独使用时，没有mark*/
 export default {
   name: 'ConfirmDialog',
diff --git a/src/components/slide/SlideHorizontal.vue b/src/components/slide/SlideHorizontal.vue
index 271a6e713..c7c0584d6 100644
--- a/src/components/slide/SlideHorizontal.vue
+++ b/src/components/slide/SlideHorizontal.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import GM from '../../utils'
 import {
@@ -73,20 +73,30 @@ onUnmounted(() => {
   ob.disconnect()
 })
 
-function touchStart(e) {
+function touchStart(e: TouchEvent) {
   slideTouchStart(e, wrapperEl.value, state)
 }
 
-function touchMove(e) {
-  slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.HORIZONTAL)
+function touchMove(e: TouchEvent) {
+  slideTouchMove(
+    e,
+    wrapperEl.value,
+    state,
+    judgeValue,
+    canNext,
+    null,
+    SlideType.HORIZONTAL,
+    null,
+    null
+  )
 }
 
-function touchEnd(e) {
+function touchEnd(e: TouchEvent) {
   slideTouchEnd(e, state, canNext, () => {})
   slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, emit)
 }
 
-function canNext(isNext) {
+function canNext(isNext: boolean) {
   return !(
     (state.localIndex === 0 && !isNext) ||
     (state.localIndex === state.wrapper.childrenLength - 1 && isNext)
@@ -95,7 +105,7 @@ function canNext(isNext) {
 </script>
 
 <template>
-  <div class="slide hhhh">
+  <div class="slide horizontal">
     <div
       class="slide-list"
       ref="wrapperEl"
diff --git a/src/config/index.js b/src/config/index.js
index 0dd8eaca0..72c709715 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -4,8 +4,8 @@ export default {
   filePreview: 'http://192.168.0.103/static/uploads/'
 }
 const BASE_URL_MAP = {
-  DEV: './',
-  PROD: './',
+  DEV: '',
+  PROD: '',
   UNI: 'https://dy.ttentau.top'
 }
 
diff --git a/src/main.js b/src/main.ts
similarity index 79%
rename from src/main.js
rename to src/main.ts
index ca82d9704..a5424aa26 100644
--- a/src/main.js
+++ b/src/main.ts
@@ -1,21 +1,17 @@
-import * as Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 import mitt from 'mitt'
 import './assets/less/index.less'
-import { startMock } from './mock'
+import { startMock } from '@/mock'
 import router from './router'
 import mixin from './utils/mixin'
 import VueLazyload from '@jambonn/vue-lazyload'
 import { createPinia } from 'pinia'
 
 const pinia = createPinia()
-
-// const vConsole = new VConsole();
 const emitter = mitt()
-
-const app = Vue.createApp(App)
+const app = createApp(App)
 app.config.globalProperties.emitter = emitter
-app.config.unwrapInjectedRef = true
 app.provide('mitt', emitter)
 app.mixin(mixin)
 const loadImage = new URL('./assets/img/icon/img-loading.png', import.meta.url).href
@@ -24,8 +20,8 @@ app.use(VueLazyload, {
   loading: loadImage,
   attempt: 1
 })
-app.use(router)
 app.use(pinia)
+app.use(router)
 app.mount('#app')
 
 //放到最后才可以使用pinia
diff --git a/src/mock/index.js b/src/mock/index.ts
similarity index 79%
rename from src/mock/index.js
rename to src/mock/index.ts
index 00f1be560..2a79fc7a1 100644
--- a/src/mock/index.js
+++ b/src/mock/index.ts
@@ -8,22 +8,22 @@ import MockAdapter from 'axios-mock-adapter'
 
 const mock = new MockAdapter(axiosInstance, { delayResponse: 300 })
 
-function getPage2(params) {
-  let offset = params.pageNo * params.pageSize
-  let limit = params.pageNo * params.pageSize + params.pageSize
+function getPage2(params: any): { limit: number; offset: number; pageNo: number } {
+  const offset = params.pageNo * params.pageSize
+  const limit = params.pageNo * params.pageSize + params.pageSize
   return { limit, offset, pageNo: params.pageNo }
 }
 
 let allRecommendPosts = []
 let userVideos = []
-let allRecommendVideos = posts6.map((v) => {
+let allRecommendVideos = posts6.map((v: any) => {
   v.type = 'recommend-video'
   return v
 })
 
 // console.log('allRecommendVideos', allRecommendVideos)
-// eslint-disable-next-line no-unused-vars
-let t = [
+// eslint-disable-next-line
+const t = [
   {
     type: 'imgs',
     src: `https://imgapi.cn/bing.php`,
@@ -74,7 +74,7 @@ async function fetchData() {
       }
       v = v.map((w) => {
         w.type = 'recommend-video'
-        let item = userList.find((a) => String(a.uid) === String(w.author_user_id))
+        const item: any = userList.find((a) => String(a.uid) === String(w.author_user_id))
         if (item) w.author = item
         return w
       })
@@ -86,7 +86,7 @@ async function fetchData() {
 //TODO 有个bug，一开始只返回了6条数据，但第二次前端传过来的pageNo是2了，就是会从第10条数据开始返回，导致中间漏了4条
 export async function startMock() {
   mock.onGet(/video\/recommended/).reply(async (config) => {
-    let page = getPage2(config.params)
+    const page = getPage2(config.params)
     console.log('allRecommendVideos', cloneDeep(allRecommendVideos.length), page)
     return [
       200,
@@ -102,7 +102,7 @@ export async function startMock() {
   })
 
   mock.onGet(/video\/comments/).reply(async (config) => {
-    let videoIds = [
+    const videoIds = [
       '7260749400622894336',
       '7128686458763889956',
       '7293100687989148943',
@@ -124,8 +124,8 @@ export async function startMock() {
     if (!videoIds.includes(String(id))) {
       id = videoIds[random(0, videoIds.length - 1)]
     }
-    let r2 = await fetch(`${FILE_URL}/comments/video_id_${id}.json`)
-    let v = await r2.json()
+    const r2 = await fetch(`${FILE_URL}/comments/video_id_${id}.json`)
+    const v = await r2.json()
     if (v) {
       return [200, { data: v, code: 200 }]
     }
@@ -133,7 +133,7 @@ export async function startMock() {
   })
 
   mock.onGet(/video\/private/).reply(async (config) => {
-    let page = getPage2(config.params)
+    const page = getPage2(config.params)
     return [
       200,
       {
@@ -148,7 +148,7 @@ export async function startMock() {
   })
 
   mock.onGet(/video\/like/).reply(async (config) => {
-    let page = getPage2(config.params)
+    const page = getPage2(config.params)
     return [
       200,
       {
@@ -163,18 +163,18 @@ export async function startMock() {
   })
 
   mock.onGet(/video\/my/).reply(async (config) => {
-    let page = getPage2(config.params)
+    const page = getPage2(config.params)
     if (!userVideos.length) {
       // let r = await fetch(BASE_URL + '/data/user-71158770.json')
       // let r = await fetch(BASE_URL + '/data/user-8357999.json')
-      let r = await fetch(BASE_URL + '/data/user_video_list/user-12345xiaolaohu.json')
-      let list = await r.json()
+      const r = await fetch(BASE_URL + '/data/user_video_list/user-12345xiaolaohu.json')
+      const list = await r.json()
       const baseStore = useBaseStore()
-      let userList = cloneDeep(baseStore.users)
+      const userList = cloneDeep(baseStore.users)
 
       userVideos = list.map((w) => {
         if (userList.length) {
-          let item = userList.find((a) => String(a.uid) === String(w.author_user_id))
+          const item = userList.find((a) => String(a.uid) === String(w.author_user_id))
           if (item) w.author = item
         }
         return w
@@ -196,7 +196,7 @@ export async function startMock() {
   })
 
   mock.onGet(/video\/history/).reply(async (config) => {
-    let page = getPage2(config.params)
+    const page = getPage2(config.params)
     return [
       200,
       {
@@ -231,9 +231,9 @@ export async function startMock() {
   })
 
   mock.onGet(/user\/video_list/).reply(async (config) => {
-    let id = config.params.id
-    let r2 = await fetch(`${FILE_URL}/user_video_list/user-${id}.json`)
-    let v = await r2.json()
+    const id = config.params.id
+    const r2 = await fetch(`${FILE_URL}/user_video_list/user-${id}.json`)
+    const v = await r2.json()
     if (v) {
       return [200, { data: v, code: 200 }]
     }
@@ -241,11 +241,11 @@ export async function startMock() {
   })
 
   mock.onGet(/user\/panel/).reply(async () => {
-    let r2 = await fetch(BASE_URL + '/data/users.json')
-    let v = await r2.json()
+    const r2 = await fetch(BASE_URL + '/data/users.json')
+    const v = await r2.json()
     // let item = v.find(a => a.uid === '68310389333')
     // let item = v.find(a => a.uid === '59054327754')
-    let item = v.find((a) => a.uid === '2739632844317827')
+    const item = v.find((a) => a.uid === '2739632844317827')
     if (item) {
       return [200, { data: item, code: 200 }]
     }
@@ -253,13 +253,13 @@ export async function startMock() {
   })
 
   mock.onGet(/user\/friends/).reply(async () => {
-    let r2 = await fetch(BASE_URL + '/data/users.json')
-    let v = await r2.json()
+    const r2 = await fetch(BASE_URL + '/data/users.json')
+    const v = await r2.json()
     return [200, { data: v, code: 200 }]
   })
 
   mock.onGet(/historyOther/).reply(async (config) => {
-    let page = getPage2(config.params)
+    const page = getPage2(config.params)
     return [
       200,
       {
@@ -275,10 +275,10 @@ export async function startMock() {
   })
 
   mock.onGet(/post\/recommended/).reply(async (config) => {
-    let page = getPage2(config.params)
+    const page = getPage2(config.params)
 
     if (!allRecommendPosts.length) {
-      let r = await fetch(BASE_URL + '/data/posts.json')
+      const r = await fetch(BASE_URL + '/data/posts.json')
       allRecommendPosts = await r.json()
     }
     return [
@@ -296,10 +296,10 @@ export async function startMock() {
   })
 
   mock.onGet(/shop\/recommended/).reply(async (config) => {
-    let page = getPage2(config.params)
+    const page = getPage2(config.params)
 
-    let r2 = await fetch(BASE_URL + '/data/goods.json')
-    let v = await r2.json()
+    const r2 = await fetch(BASE_URL + '/data/goods.json')
+    const v = await r2.json()
     return [
       200,
       {
diff --git a/src/pages/home/Music.vue b/src/pages/home/Music.vue
index db39b5a29..fd96b1578 100644
--- a/src/pages/home/Music.vue
+++ b/src/pages/home/Music.vue
@@ -1,18 +1,18 @@
 <template>
   <div id="Music">
     <div class="header">
-      <dy-back mode="light" @click="$back" />
+      <dy-back mode="light" @click="router.back()" />
       <transition name="fade">
-        <div class="center" v-if="isFixed">
-          <span class="f16">{{ music.name }}</span>
+        <div class="center" v-if="data.isFixed">
+          <span class="f16">{{ data.music.name }}</span>
         </div>
       </transition>
       <div class="right">
         <!--        TODO 没有淡入淡出的特效-->
-        <template v-if="isFixed">
+        <template v-if="data.isFixed">
           <img
             class="star"
-            v-if="isCollect"
+            v-if="data.isCollect"
             src="../../assets/img/icon/star-yellow.png"
             @click.stop="toggleCollect()"
           />
@@ -23,38 +23,54 @@
             @click.stop="toggleCollect()"
           />
         </template>
-        <div class="logo" v-if="!isFixed" @click="$nav('/home/music-rank-list')">抖音音乐榜</div>
-        <img class="share" src="../../assets/img/icon/share-white.png" @click="isSharing = true" />
+        <div class="logo" v-if="!data.isFixed" @click="nav('/home/music-rank-list')">
+          抖音音乐榜
+        </div>
+        <img
+          class="share"
+          src="../../assets/img/icon/share-white.png"
+          @click="data.isSharing = true"
+        />
       </div>
     </div>
     <div class="content">
       <Scroll
         class="Scroll"
         :fixedHeight="180"
-        @fixed="(e) => (this.isFixed = e)"
+        @fixed="(e) => (data.isFixed = e)"
         @pulldown="loadData"
       >
         <div class="desc">
           <div class="cover-wrapper" @click="togglePlay()">
-            <img class="cover" :src="$imgPreview(music.cover)" alt="" />
-            <img v-if="!isPlay" src="../../assets/img/icon/play-white.png" alt="" class="play" />
-            <img v-if="isPlay" src="../../assets/img/icon/pause-white.png" alt="" class="play" />
+            <img class="cover" :src="_checkImgUrl(data.music.cover)" alt="" />
+            <img
+              v-if="!data.isPlay"
+              src="../../assets/img/icon/play-white.png"
+              alt=""
+              class="play"
+            />
+            <img
+              v-if="data.isPlay"
+              src="../../assets/img/icon/pause-white.png"
+              alt=""
+              class="play"
+            />
           </div>
           <div class="info">
-            <div class="name">{{ music.name }}</div>
+            <div class="name">{{ data.music.name }}</div>
             <div>
-              <div class="user">{{ music.author }}</div>
-              <div class="peoples">{{ formatNumber(music.use_count) }} 人使用</div>
+              <div class="user">{{ data.music.author }}</div>
+              <div class="peoples">{{ _formatNumber(data.music.use_count) }} 人使用</div>
             </div>
             <div class="collection" @click.stop="toggleCollect()">
-              <img v-if="isCollect" src="../../assets/img/icon/star-yellow.png" />
+              <img v-if="data.isCollect" src="../../assets/img/icon/star-yellow.png" />
               <img v-else src="../../assets/img/icon/star-white.png" />
-              <span>{{ isCollect ? '已' : '' }}收藏</span>
+              <span>{{ data.isCollect ? '已' : '' }}收藏</span>
             </div>
           </div>
         </div>
-        <Posters mode="music" :list="videos" />
-        <Loading :is-full-screen="false" v-if="loading" />
+        <Posters mode="music" :list="data.videos" />
+        <Loading :is-full-screen="false" v-if="data.loading" />
         <NoMore v-else />
       </Scroll>
     </div>
@@ -70,166 +86,162 @@
     </div>
 
     <Share
-      v-model="isSharing"
+      v-model="data.isSharing"
       mode="music"
       ref="share"
       pageId="Music"
-      @showDouyinCode="showDouyinCode = true"
-      @showShare2WeChatZone="shareType = 2"
-      @share2WeChat="shareType = 3"
-      @share2QQZone="shareType = 4"
-      @share2QQ="shareType = 5"
-      @share2Webo="shareType = 8"
-      @ShareToFriend="delayShowDialog((e) => (this.shareToFriend = true))"
+      @showDouyinCode="data.showDouyinCode = true"
+      @showShare2WeChatZone="data.shareType = 2"
+      @share2WeChat="data.shareType = 3"
+      @share2QQZone="data.shareType = 4"
+      @share2QQ="data.shareType = 5"
+      @share2Webo="data.shareType = 8"
+      @ShareToFriend="delayShowDialog(() => (data.shareToFriend = true))"
     />
 
-    <DouyinCode v-model="showDouyinCode" />
+    <DouyinCode v-model="data.showDouyinCode" />
 
     <ConfirmDialog
-      v-model:visible="showSharePassword"
+      v-model:visible="data.showSharePassword"
       title="你的口令已复制"
       subtitle="0F.:/ a【风就应该自由要什么归宿】长按复制此条消息，打开抖音搜索，聆听音乐##kwu3VCixHl8##[抖音口令]"
-      :okText="okText"
+      :okText="data.okText"
       cancelText="不分享了"
-      @ok="shareType = -1"
-      @cancel="shareType = -1"
+      @ok="data.shareType = -1"
+      @cancel="data.shareType = -1"
     >
       <template v-slot:header>
         <img style="width: 100%" src="../../assets/img/icon/share-password.webp" alt="" />
       </template>
     </ConfirmDialog>
 
-    <ShareToFriend pageId="Music" v-model="shareToFriend" />
+    <ShareToFriend pageId="Music" v-model="data.shareToFriend" />
   </div>
 </template>
-<script>
-import Posters from '../../components/Posters'
-import Scroll from '../../components/Scroll'
-import Loading from '../../components/Loading'
-import Share from '../../components/Share'
-import DouyinCode from '../../components/DouyinCode'
-import ConfirmDialog from '../../components/dialog/ConfirmDialog'
-import ShareToFriend from './components/ShareToFriend'
+<script setup lang="ts">
+import Posters from '../../components/Posters.vue'
+import Scroll from '../../components/Scroll.vue'
+import Loading from '../../components/Loading.vue'
+import Share from '../../components/Share.vue'
+import DouyinCode from '../../components/DouyinCode.vue'
+import ConfirmDialog from '../../components/dialog/ConfirmDialog.vue'
+import ShareToFriend from './components/ShareToFriend.vue'
 import { myVideo } from '@/api/videos'
+import { onDeactivated, onMounted, onUnmounted, reactive, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useNav } from '@/utils/hooks/useNav'
+import { $no, $notice, _checkImgUrl, _formatNumber } from '@/utils'
 
-export default {
-  name: 'Music',
-  components: {
-    Scroll,
-    Posters,
-    Loading,
-    Share,
-    DouyinCode,
-    ConfirmDialog,
-    ShareToFriend
-  },
-  data() {
-    return {
-      loading: false,
-      isFixed: false,
-      isCollect: false,
-      isPlay: false,
-      isSharing: false,
-      okText: '',
-
-      showSharePassword: false,
-      shareToFriend: false,
-      shareType: -1,
-
-      showDouyinCode: false,
-      audio: new Audio(),
-      total: 0,
-      pageNo: 0,
-      pageSize: 15,
-      videos: [],
-
-      music: {
-        name: '发如雪',
-        mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
-        cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
-        author: '周杰伦',
-        duration: 60,
-        use_count: 37441000,
-        is_collect: false,
-        is_play: false
-      }
-    }
-  },
-  watch: {
-    shareType(newVal) {
-      if (newVal === -1) return
-      this.showSharePassword = true
-      switch (newVal) {
-        case 2:
-        case 3:
-          return (this.okText = '去微信粘贴')
-        case 4:
-        case 5:
-          return (this.okText = '去QQ粘贴')
-        case 8:
-          return (this.okText = '去微博粘贴')
-      }
+const route = useRoute()
+const router = useRouter()
+const nav = useNav()
+
+const data = reactive({
+  loading: false,
+  isFixed: false,
+  isCollect: false,
+  isPlay: false,
+  isSharing: false,
+  okText: '',
+
+  showSharePassword: false,
+  shareToFriend: false,
+  shareType: -1,
+
+  showDouyinCode: false,
+  audio: new Audio(),
+  total: 0,
+  pageNo: 0,
+  pageSize: 15,
+  videos: [],
+
+  music: {
+    name: '发如雪',
+    mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
+    cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
+    author: '周杰伦',
+    duration: 60,
+    use_count: 37441000,
+    is_collect: false,
+    is_play: false
+  }
+})
+
+watch(
+  () => data.shareType,
+  (newVal) => {
+    if (newVal === -1) return
+    data.showSharePassword = true
+    switch (newVal) {
+      case 2:
+      case 3:
+        return (data.okText = '去微信粘贴')
+      case 4:
+      case 5:
+        return (data.okText = '去QQ粘贴')
+      case 8:
+        return (data.okText = '去微博粘贴')
     }
-  },
-  created() {
-    if (this.$route.query.name) {
-      this.music = this.$route.query
+  }
+)
+
+onMounted(() => {
+  if (route.query.name) {
+    data.music = route.query as any
+  }
+  loadData(true)
+})
+
+onUnmounted(stopPlay)
+onDeactivated(stopPlay)
+
+function toggleCollect() {
+  data.isCollect = !data.isCollect
+}
+
+async function loadData(init = false) {
+  if (data.loading) return
+  if (!init) {
+    if (data.total <= data.videos.length) {
+      return $notice('暂时没有更多了')
     }
-    this.loadData(true)
-  },
-  computed: {},
-  methods: {
-    toggleCollect() {
-      this.isCollect = !this.isCollect
-    },
-    async loadData(init = false) {
-      if (this.loading) return
-      if (!init) {
-        if (this.total <= this.videos.length) {
-          return this.$notice('暂时没有更多了')
-        }
-        this.pageNo++
-      }
-      this.loading = true
-      let res = await myVideo({
-        pageNo: this.pageNo,
-        pageSize: this.pageSize
-      })
-      this.loading = false
-      if (res.code === this.SUCCESS) {
-        this.videos = this.videos.concat(res.data.list)
-        this.total = res.data.total
-      }
-    },
-    togglePlay() {
-      this.isPlay = !this.isPlay
-      if (this.isPlay) {
-        if (!this.audio.src) {
-          this.audio.src = this.music.mp3
-        }
-        this.audio.play()
-        this.audio.addEventListener('ended', () => (this.isPlay = false))
-      } else {
-        this.stopPlay()
-      }
-    },
-    delayShowDialog(cb) {
-      setTimeout(() => {
-        cb()
-      }, 100)
-    },
-    stopPlay() {
-      this.audio.pause()
-      this.audio.removeEventListener('ended', null)
+    data.pageNo++
+  }
+  data.loading = true
+  let res: any = await myVideo({
+    pageNo: data.pageNo,
+    pageSize: data.pageSize
+  })
+  data.loading = false
+  if (res.success) {
+    data.videos = data.videos.concat(res.data.list)
+    data.total = res.data.total
+  }
+}
+
+function togglePlay() {
+  data.isPlay = !data.isPlay
+  if (data.isPlay) {
+    if (!data.audio.src) {
+      data.audio.src = data.music.mp3
     }
-  },
-  unmounted() {
-    this.stopPlay()
-  },
-  deactivated() {
-    this.stopPlay()
+    data.audio.play()
+    data.audio.addEventListener('ended', () => (data.isPlay = false))
+  } else {
+    stopPlay()
   }
 }
+
+function delayShowDialog(cb) {
+  setTimeout(() => {
+    cb()
+  }, 100)
+}
+
+function stopPlay() {
+  data.audio.pause()
+  data.audio.removeEventListener('ended', null)
+}
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/home/MusicRankList.vue b/src/pages/home/MusicRankList.vue
index f5c1bb2ac..88e5a999f 100644
--- a/src/pages/home/MusicRankList.vue
+++ b/src/pages/home/MusicRankList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="MusicRankList" @scroll="scroll">
-    <dy-back mode="light" img="back" @click="$back()" class="fixed-back" direction="left" />
+    <dy-back mode="light" img="back" @click="router.back()" class="fixed-back" direction="left" />
     <div class="fixed-header" :style="fixedStyle">
       <span class="f16">抖音音乐榜</span>
     </div>
@@ -8,23 +8,23 @@
     <div class="content">
       <div class="l-header">
         <img src="../../assets/img/icon/music-rank-list.webp" alt="" />
-        <div class="update-time">更新于：{{ $dateFormat(updateTime, 'D') }}</div>
+        <div class="update-time">更新于：{{ _dateFormat(data.updateTime, 'D') }}</div>
       </div>
       <Indicator
         name="musicRankList"
         tabStyleWidth="33%"
         :tabTexts="['热歌榜', '飙升樘', '原创榜']"
-        v-model:active-index="contentIndex"
+        v-model:active-index="data.contentIndex"
       >
       </Indicator>
-      <SlideHorizontal name="musicRankList" v-model:index="contentIndex">
+      <SlideHorizontal name="musicRankList" v-model:index="data.contentIndex">
         <SlideItem>
           <div class="list">
             <div
               class="item"
               :key="index"
-              v-for="(item, index) in hotList"
-              @click="togglePlay(item, hotList)"
+              v-for="(item, index) in data.hotList"
+              @click="togglePlay(item, data.hotList)"
             >
               <div class="top">
                 <div class="rank-wrapper">
@@ -51,7 +51,7 @@
                 <div class="right">
                   <div class="music">
                     <div class="cover-wrapper">
-                      <img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
+                      <img v-lazy="_checkImgUrl(item.cover)" alt="" class="cover" />
                       <img
                         v-if="!item.is_play"
                         src="../../assets/img/icon/play-white.png"
@@ -70,9 +70,9 @@
                       <div class="author">{{ item.author }}</div>
                       <div class="desc-bottom">
                         <div class="duration">
-                          {{ $duration(item.duration) }}
+                          {{ _duration(item.duration) }}
                         </div>
-                        <div class="use_count">{{ formatNumber(item.use_count) }}人使用</div>
+                        <div class="use_count">{{ _formatNumber(item.use_count) }}人使用</div>
                       </div>
                     </div>
                   </div>
@@ -92,7 +92,7 @@
                     <img
                       src="../../assets/img/icon/menu2-white.png"
                       alt=""
-                      @click.stop="$nav('/home/music')"
+                      @click.stop="nav('/home/music')"
                     />
                   </div>
                 </div>
@@ -116,8 +116,8 @@
             <div
               class="item"
               :key="index"
-              v-for="(item, index) in hotList"
-              @click="togglePlay(item, hotList)"
+              v-for="(item, index) in data.hotList"
+              @click="togglePlay(item, data.hotList)"
             >
               <div class="top">
                 <div class="rank-wrapper">
@@ -144,7 +144,7 @@
                 <div class="right">
                   <div class="music">
                     <div class="cover-wrapper">
-                      <img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
+                      <img v-lazy="_checkImgUrl(item.cover)" alt="" class="cover" />
                       <img
                         v-if="!item.is_play"
                         src="../../assets/img/icon/play-white.png"
@@ -163,9 +163,9 @@
                       <div class="author">{{ item.author }}</div>
                       <div class="desc-bottom">
                         <div class="duration">
-                          {{ $duration(item.duration) }}
+                          {{ _duration(item.duration) }}
                         </div>
-                        <div class="use_count">{{ formatNumber(item.use_count) }}人使用</div>
+                        <div class="use_count">{{ _formatNumber(item.use_count) }}人使用</div>
                       </div>
                     </div>
                   </div>
@@ -185,7 +185,7 @@
                     <img
                       src="../../assets/img/icon/menu2-white.png"
                       alt=""
-                      @click.stop="$nav('/home/music')"
+                      @click.stop="nav('/home/music')"
                     />
                   </div>
                 </div>
@@ -209,8 +209,8 @@
             <div
               class="item"
               :key="index"
-              v-for="(item, index) in hotList"
-              @click="togglePlay(item, hotList)"
+              v-for="(item, index) in data.hotList"
+              @click="togglePlay(item, data.hotList)"
             >
               <div class="top">
                 <div class="rank-wrapper">
@@ -237,7 +237,7 @@
                 <div class="right">
                   <div class="music">
                     <div class="cover-wrapper">
-                      <img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
+                      <img v-lazy="_checkImgUrl(item.cover)" alt="" class="cover" />
                       <img
                         v-if="!item.is_play"
                         src="../../assets/img/icon/play-white.png"
@@ -256,9 +256,9 @@
                       <div class="author">{{ item.author }}</div>
                       <div class="desc-bottom">
                         <div class="duration">
-                          {{ $duration(item.duration) }}
+                          {{ _duration(item.duration) }}
                         </div>
-                        <div class="use_count">{{ formatNumber(item.use_count) }}人使用</div>
+                        <div class="use_count">{{ _formatNumber(item.use_count) }}人使用</div>
                       </div>
                     </div>
                   </div>
@@ -278,7 +278,7 @@
                     <img
                       src="../../assets/img/icon/menu2-white.png"
                       alt=""
-                      @click.stop="$nav('/home/music')"
+                      @click.stop="nav('/home/music')"
                     />
                   </div>
                 </div>
@@ -301,255 +301,258 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  name: 'MusicRankList',
-  components: {},
-  data() {
-    return {
-      contentIndex: 0,
-      hotList: [
-        {
-          name: '龙卷风',
-          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3',
-          cover: new URL('../../assets/img/music-cover/1.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 99,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '爱在西元前',
-          mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3',
-          cover: new URL('../../assets/img/music-cover/2.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '蜗牛',
-          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
-          cover: new URL('../../assets/img/music-cover/3.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '半岛铁盒',
-          mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3',
-          cover: new URL('../../assets/img/music-cover/4.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '轨迹',
-          mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3',
-          cover: new URL('../../assets/img/music-cover/5.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '七里香',
-          mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3',
-          cover: new URL('../../assets/img/music-cover/6.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '发如雪',
-          mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
-          cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '霍元甲',
-          mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3',
-          cover: new URL('../../assets/img/music-cover/8.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '千里之外(周杰伦/费玉清)',
-          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
-          cover: new URL('../../assets/img/music-cover/9.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '菊花台',
-          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
-          cover: new URL('../../assets/img/music-cover/10.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '不能说的秘密',
-          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
-          cover: new URL('../../assets/img/music-cover/11.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '牛仔很忙',
-          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
-          cover: new URL('../../assets/img/music-cover/12.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '给我一首歌的时间',
-          mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3',
-          cover: new URL('../../assets/img/music-cover/13.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '烟花易冷',
-          mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3',
-          cover: new URL('../../assets/img/music-cover/14.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '惊叹号',
-          mp3: 'https://m3.8js.net:99/20111103/150.mp3',
-          cover: new URL('../../assets/img/music-cover/15.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '明明就',
-          mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3',
-          cover: new URL('../../assets/img/music-cover/16.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '算什么男人',
-          mp3: 'https://m3.8js.net:99/20150107/429.mp3',
-          cover: new URL('../../assets/img/music-cover/17.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '告白气球',
-          mp3: 'https://m3.8js.net:99/20161016/481.mp3',
-          cover: new URL('../../assets/img/music-cover/18.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        }
-      ],
-      updateTime: Date.now(),
-      audio: new Audio(),
-      scrollTop: -1
-    }
-  },
-  computed: {
-    fixedStyle() {
-      return {
-        opacity: this.scrollTop / 120 > 1 ? 1 : this.scrollTop / 120
-      }
-    }
-  },
-  created() {
-    this.hotList = this.hotList.concat(this.hotList).concat(this.hotList).concat(this.hotList)
-    this.hotList = this.hotList.slice(0, 50)
-  },
-  methods: {
-    scroll(e) {
-      this.scrollTop = e.target.scrollTop
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { computed, onDeactivated, onMounted, onUnmounted, reactive } from 'vue'
+import { $notice, _checkImgUrl, _dateFormat, _duration, _formatNumber } from '@/utils/index.jsx'
+import { useNav } from '@/utils/hooks/useNav'
+
+defineOptions({
+  name: 'MusicRankList'
+})
+const router = useRouter()
+const nav = useNav()
+const data = reactive({
+  contentIndex: 0,
+  hotList: [
+    {
+      name: '龙卷风',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3',
+      cover: new URL('../../assets/img/music-cover/1.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 99,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
     },
-    toggleCollect(item) {
-      item.is_collect = !item.is_collect
-      if (item.is_collect) {
-        this.$notice('收藏成功')
-      } else {
-        this.$notice('取消收藏')
-      }
+    {
+      name: '爱在西元前',
+      mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3',
+      cover: new URL('../../assets/img/music-cover/2.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
     },
-    togglePlay(item, list) {
-      list.map((v) => {
-        if (v.name !== item.name) {
-          v.is_play = false
-        }
-      })
-      item.is_play = !item.is_play
-      if (item.is_play) {
-        this.audio.pause()
-        this.audio.src = item.mp3
-        this.audio.currentTime = 0
-        this.audio.play()
-        this.audio.addEventListener('ended', () => (item.is_play = false))
-      } else {
-        this.stopPlay()
-      }
+    {
+      name: '蜗牛',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
+      cover: new URL('../../assets/img/music-cover/3.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '半岛铁盒',
+      mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3',
+      cover: new URL('../../assets/img/music-cover/4.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '轨迹',
+      mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3',
+      cover: new URL('../../assets/img/music-cover/5.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '七里香',
+      mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3',
+      cover: new URL('../../assets/img/music-cover/6.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '发如雪',
+      mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
+      cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '霍元甲',
+      mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3',
+      cover: new URL('../../assets/img/music-cover/8.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '千里之外(周杰伦/费玉清)',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
+      cover: new URL('../../assets/img/music-cover/9.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '菊花台',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
+      cover: new URL('../../assets/img/music-cover/10.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '不能说的秘密',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
+      cover: new URL('../../assets/img/music-cover/11.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '牛仔很忙',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
+      cover: new URL('../../assets/img/music-cover/12.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '给我一首歌的时间',
+      mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3',
+      cover: new URL('../../assets/img/music-cover/13.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
     },
-    stopPlay() {
-      this.audio.pause()
-      this.audio.currentTime = 0
-      this.audio.removeEventListener('ended', null)
+    {
+      name: '烟花易冷',
+      mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3',
+      cover: new URL('../../assets/img/music-cover/14.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '惊叹号',
+      mp3: 'https://m3.8js.net:99/20111103/150.mp3',
+      cover: new URL('../../assets/img/music-cover/15.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '明明就',
+      mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3',
+      cover: new URL('../../assets/img/music-cover/16.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '算什么男人',
+      mp3: 'https://m3.8js.net:99/20150107/429.mp3',
+      cover: new URL('../../assets/img/music-cover/17.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '告白气球',
+      mp3: 'https://m3.8js.net:99/20161016/481.mp3',
+      cover: new URL('../../assets/img/music-cover/18.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
     }
-  },
-  unmounted() {
-    this.stopPlay()
-  },
-  deactivated() {
-    this.stopPlay()
+  ],
+  updateTime: Date.now(),
+  audio: new Audio(),
+  scrollTop: -1
+})
+
+const fixedStyle = computed(() => {
+  return {
+    opacity: data.scrollTop / 120 > 1 ? 1 : data.scrollTop / 120
   }
+})
+
+onMounted(() => {
+  data.hotList = data.hotList.concat(data.hotList).concat(data.hotList).concat(data.hotList)
+  data.hotList = data.hotList.slice(0, 50)
+})
+
+onUnmounted(stopPlay)
+onDeactivated(stopPlay)
+
+function scroll(e) {
+  data.scrollTop = e.target.scrollTop
 }
-</script>
 
+function toggleCollect(item) {
+  item.is_collect = !item.is_collect
+  if (item.is_collect) {
+    $notice('收藏成功')
+  } else {
+    $notice('取消收藏')
+  }
+}
+
+function togglePlay(item, list) {
+  list.map((v) => {
+    if (v.name !== item.name) {
+      v.is_play = false
+    }
+  })
+  item.is_play = !item.is_play
+  if (item.is_play) {
+    data.audio.pause()
+    data.audio.src = item.mp3
+    data.audio.currentTime = 0
+    data.audio.play()
+    data.audio.addEventListener('ended', () => (item.is_play = false))
+  } else {
+    data.stopPlay()
+  }
+}
+
+function stopPlay() {
+  data.audio.pause()
+  data.audio.currentTime = 0
+  data.audio.removeEventListener('ended', null)
+}
+</script>
 <style scoped lang="less">
 @import '../../assets/less/index';
 
diff --git a/src/pages/home/Publish.vue b/src/pages/home/Publish.vue
index 0fc7215c7..cdf4160f2 100644
--- a/src/pages/home/Publish.vue
+++ b/src/pages/home/Publish.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="Publish">
-    <video id="video" autoplay="autoplay" style="width: 100%; height: calc(100% - 60rem)"></video>
+    <video id="video" autoplay style="width: 100%; height: calc(100% - 60rem)"></video>
     <div class="footer">
       <SlideHorizontal style="height: 60rem" v-model:index="activeIndex">
         <SlideItem style="width: 20vw"></SlideItem>
@@ -20,7 +20,7 @@
       </SlideHorizontal>
     </div>
     <div class="float">
-      <Icon class="close" icon="mingcute:close-line" @click="$back" />
+      <Icon class="close" icon="mingcute:close-line" @click="router.back()" />
       <div class="choose-music">
         <Icon icon="vaadin:music" />
         <span>选择音乐</span>
@@ -48,9 +48,16 @@
     </div>
   </div>
 </template>
-<script>
-import { mapState } from 'pinia'
-import { useBaseStore } from '@/store/pinia'
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+defineOptions({
+  name: 'Publish'
+})
+const router = useRouter()
+const videoEl = ref(null)
+const activeIndex = ref(1)
 
 //访问用户媒体设备的兼容方法
 function getUserMedia(constrains, success, error) {
@@ -63,51 +70,37 @@ function getUserMedia(constrains, success, error) {
   } else if (navigator.mozGetUserMedia) {
     //Firefox浏览器
     // eslint-disable-next-line no-undef
-    navagator.mozGetUserMedia(constrains).then(success).catch(error)
+    navigator.mozGetUserMedia(constrains).then(success).catch(error)
   } else if (navigator.getUserMedia) {
     //旧版API
     navigator.getUserMedia(constrains).then(success).catch(error)
   }
 }
 
-export default {
-  name: 'Publish',
-  data() {
-    return {
-      video: null,
-      activeIndex: 1
-    }
-  },
-  computed: {
-    ...mapState(useBaseStore, ['bodyHeight', 'bodyWidth'])
-  },
-  mounted() {
-    //获得video摄像头区域
-    this.video = document.getElementById('video')
-    this.getMedia()
-  },
-  methods: {
-    getMedia() {
-      // let constraints = {video: {width: this.bodyWidth, height: this.bodyHeight - 60}, audio: false};
-      // let constraints = {video:{width:480,height:320}, audio: false};
-      let constraints = { video: true, audio: false }
-      try {
-        getUserMedia(
-          constraints,
-          (MediaStream) => {
-            this.video.srcObject = MediaStream
-            this.video.play()
-          },
-          function (PermissionDeniedError) {
-            console.log(PermissionDeniedError)
-          }
-        )
-      } catch (e) {
-        console.log('e', e)
+function getMedia() {
+  // let constraints = {video: {width: this.bodyWidth, height: this.bodyHeight - 60}, audio: false};
+  // let constraints = {video:{width:480,height:320}, audio: false};
+  let constraints = { video: true, audio: false }
+  try {
+    getUserMedia(
+      constraints,
+      (MediaStream) => {
+        videoEl.value.srcObject = MediaStream
+        videoEl.value.play()
+      },
+      function (PermissionDeniedError) {
+        console.log(PermissionDeniedError)
       }
-    }
+    )
+  } catch (e) {
+    console.log('e', e)
   }
 }
+
+onMounted(() => {
+  videoEl.value = document.getElementById('video')
+  getMedia()
+})
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 421fb70ed..6dfd362f4 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -160,7 +160,7 @@
       :videoId="state.recommendList[state.itemIndex]?.id"
       :canDownload="state.recommendList[state.itemIndex]?.canDownload"
       @play-feedback="state.showPlayFeedback = true"
-      @shareToFriend="delayShowDialog((e) => (state.shareToFriend = true))"
+      @shareToFriend="delayShowDialog(() => (state.shareToFriend = true))"
       @showDouyinCode="state.showDouyinCode = true"
       @download="state.shareType = 9"
     />
@@ -185,7 +185,7 @@
 
     <FollowSetting2
       v-model:currentItem="state.currentItem"
-      @cancelFollow="$refs.uploader.cancelFollow()"
+      @cancelFollow="uploader.cancelFollow()"
       v-model="state.showFollowSetting2"
     />
 
@@ -199,13 +199,13 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup lang="tsx">
 import SlideHorizontal from '@/components/slide/SlideHorizontal.vue'
 import SlideItem from '@/components/slide/SlideItem.vue'
 import Comment from '../../components/Comment.vue'
 import Share from '../../components/Share.vue'
 import IndicatorHome from './components/IndicatorHome.vue'
-import { onActivated, onDeactivated, onMounted, onUnmounted, reactive } from 'vue'
+import { onActivated, onDeactivated, onMounted, onUnmounted, reactive, ref } from 'vue'
 import bus, { EVENT_KEY } from '../../utils/bus'
 import { useNav } from '@/utils/hooks/useNav'
 import PlayFeedback from '@/pages/home/components/PlayFeedback.vue'
@@ -229,11 +229,13 @@ import { useBaseStore } from '@/store/pinia'
 
 const nav = useNav()
 const baseStore = useBaseStore()
+const uploader = ref()
 
 const state = reactive({
   active: true,
   baseIndex: 1,
   navIndex: 4,
+  itemIndex: 0,
   test: '',
   recommendList: [],
   isSharing: false,
@@ -253,13 +255,14 @@ const state = reactive({
   commentVisible: false,
   fullScreen: false,
   currentItem: {
+    aweme_id: '',
     author: DefaultUser,
     isRequest: false,
     aweme_list: []
   }
 })
 
-function delayShowDialog(cb) {
+function delayShowDialog(cb: Function) {
   setTimeout(cb, 400)
 }
 
diff --git a/src/pages/me/MyCard.vue b/src/pages/me/MyCard.vue
index f9f85885f..8a2a7e35b 100644
--- a/src/pages/me/MyCard.vue
+++ b/src/pages/me/MyCard.vue
@@ -1,14 +1,18 @@
 <template>
   <div id="MyCard">
     <div class="header">
-      <dy-back mode="light" @click="$back" />
+      <dy-back mode="light" @click="router.back" />
       <!--      todo 差一-->
-      <img class="share" src="../../assets/img/icon/share-white.png" @click="isSharing = true" />
+      <img
+        class="share"
+        src="../../assets/img/icon/share-white.png"
+        @click="data.isSharing = true"
+      />
     </div>
     <div class="content">
       <div class="qrcode">
         <img class="qrcode-bg" src="../../assets/img/icon/me/code-bg.png" alt="" />
-        <img class="avatar" :src="_checkImgUrl(userinfo.cover_url[0].url_list[0])" alt="" />
+        <img class="avatar" :src="_checkImgUrl(store.userinfo.cover_url[0].url_list[0])" alt="" />
       </div>
 
       <span class="name">ZZZZZZZZZZ</span>
@@ -30,65 +34,52 @@
       </div>
     </div>
 
-    <Share v-model="isSharing" mode="qrcode" ref="share" page-id="MyCard" />
+    <Share v-model:value="data.isSharing" mode="qrcode" ref="share" page-id="MyCard" />
   </div>
 </template>
-<script>
-import Share from '../../components/Share'
-import { mapState } from 'pinia'
-import { useBaseStore } from '@/store/pinia'
-import { _checkImgUrl } from '@/utils'
-
-export default {
-  name: 'MyCard',
-  components: {
-    Share
-  },
-
-  data() {
-    return {
-      isSharing: false,
-      okText: '',
 
-      showSharePassword: false,
-      shareToFriend: false,
-      shareType: -1,
-
-      showDouyinCode: false
-    }
-  },
-  watch: {
-    shareType(newVal) {
-      if (newVal === -1) return
-      this.showSharePassword = true
-      switch (newVal) {
-        case 2:
-        case 3:
-          return (this.okText = '去微信粘贴')
-        case 4:
-        case 5:
-          return (this.okText = '去QQ粘贴')
-        case 8:
-          return (this.okText = '去微博粘贴')
-      }
-    }
-  },
-  created() {},
-  computed: {
-    ...mapState(useBaseStore, ['userinfo'])
-  },
-  methods: {
-    _checkImgUrl,
-    delayShowDialog(cb) {
-      setTimeout(() => {
-        cb()
-      }, 100)
+<script setup lang="ts">
+import Share from '../../components/Share.vue'
+import { useBaseStore } from '@/store/pinia'
+import { $no, _checkImgUrl } from '@/utils'
+import { reactive, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+defineOptions({
+  name: 'MyCard'
+})
+
+const router = useRouter()
+const store = useBaseStore()
+const data = reactive({
+  isSharing: false,
+  okText: '',
+  showSharePassword: false,
+  shareToFriend: false,
+  shareType: -1,
+  showDouyinCode: false
+})
+
+watch(
+  () => data.shareType,
+  (newVal) => {
+    if (newVal === -1) return
+    data.showSharePassword = true
+    switch (newVal) {
+      case 2:
+      case 3:
+        return (data.okText = '去微信粘贴')
+      case 4:
+      case 5:
+        return (data.okText = '去QQ粘贴')
+      case 8:
+        return (data.okText = '去微博粘贴')
     }
   }
-}
+)
 </script>
 
-<style scoped lang="less">
+<style lang="less" scoped>
 @import '../../assets/less/index';
 
 #MyCard {
diff --git a/src/pages/me/collect/MusicCollect.vue b/src/pages/me/collect/MusicCollect.vue
index 813f0d666..ec9b876e0 100644
--- a/src/pages/me/collect/MusicCollect.vue
+++ b/src/pages/me/collect/MusicCollect.vue
@@ -9,13 +9,13 @@
       <div class="list">
         <div
           class="item"
-          v-for="(item, index) in list"
+          v-for="(item, index) in data.list"
           :key="index"
-          @click="togglePlay(item, list)"
+          @click="togglePlay(item, data.list)"
         >
           <div class="music">
             <div class="cover-wrapper">
-              <img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
+              <img v-lazy="_checkImgUrl(item.cover)" alt="" class="cover" />
               <img
                 v-if="!item.is_play"
                 src="@/assets/img/icon/play-white.png"
@@ -33,7 +33,7 @@
               <span class="name">{{ item.name }}</span>
               <div class="author">{{ item.author }}</div>
               <div class="desc-bottom">
-                <div class="duration">{{ $duration(item.duration) }}</div>
+                <div class="duration">{{ _duration(item.duration) }}</div>
               </div>
             </div>
           </div>
@@ -41,125 +41,123 @@
             <img
               src="@/assets/img/icon/menu2-white.png"
               alt=""
-              @click.stop="$nav('/home/music', item)"
+              @click.stop="nav('/home/music', item)"
             />
           </div>
         </div>
       </div>
-      <Loading v-if="loading" :is-full-screen="false" />
+      <Loading v-if="data.loading" :is-full-screen="false" />
       <no-more v-else class="mb7r" />
     </div>
-    <div class="float-play-music" v-if="currentItem">
-      <div class="process" :style="{ width: process + 'px' }"></div>
+    <div class="float-play-music" v-if="data.currentItem">
+      <div class="process" :style="{ width: data.process + 'px' }"></div>
       <div class="music-wrapper">
         <div class="music">
-          <div class="cover-wrapper" @click="togglePlay(currentItem, list)">
-            <img v-lazy="$imgPreview(currentItem.cover)" alt="" class="cover" />
+          <div class="cover-wrapper" @click="togglePlay(data.currentItem, data.list)">
+            <img v-lazy="_checkImgUrl(data.currentItem.cover)" alt="" class="cover" />
             <img
-              v-if="!currentItem.is_play"
+              v-if="!data.currentItem.is_play"
               src="@/assets/img/icon/play-white.png"
               alt=""
               class="play"
             />
             <img
-              v-if="currentItem.is_play"
+              v-if="data.currentItem.is_play"
               src="@/assets/img/icon/pause-white.png"
               alt=""
               class="play"
             />
           </div>
           <div class="desc">
-            <span class="name">{{ currentItem.name }}</span>
+            <span class="name">{{ data.currentItem.name }}</span>
             <div class="desc-bottom">
-              <div class="duration">{{ $duration(currentItem.duration) }}</div>
+              <div class="duration">{{ _duration(data.currentItem.duration) }}</div>
             </div>
           </div>
         </div>
         <div class="option">
-          <dy-button type="primary" size="small" @click="$no">使用</dy-button>
+          <dy-button type="primary" size="small" @click="_no">使用</dy-button>
         </div>
       </div>
     </div>
   </div>
 </template>
-<script>
-import { mapState } from 'pinia'
+<script setup lang="ts">
 import { userCollect } from '@/api/user'
+
+import { onMounted, onUnmounted, reactive } from 'vue'
+import { useNav } from '@/utils/hooks/useNav.js'
 import { useBaseStore } from '@/store/pinia'
+import { _checkImgUrl, _duration, _no } from '@/utils'
+
+defineOptions({
+  name: 'MusicCollect'
+})
+
+const store = useBaseStore()
+const nav = useNav()
+const data = reactive({
+  loading: false,
+  list: [],
+  audio: new Audio(),
+  currentItem: null,
+  step: null,
+  process: 0
+})
+
+onMounted(() => {
+  getData()
+  data.audio.addEventListener('loadedmetadata', () => {
+    data.currentItem.duration = data.audio.duration
+    data.step = store.bodyWidth / Math.floor(data.audio.duration)
+  })
+  data.audio.addEventListener('timeupdate', (e: any) => {
+    data.process = Math.ceil(e.target.currentTime) * data.step
+  })
+})
+
+onUnmounted(stopPlay)
+
+async function getData() {
+  data.loading = true
+  let res: any = await userCollect()
+  data.loading = false
+  if (res.success) {
+    data.list = res.data.music.list
+  }
+}
 
-export default {
-  name: 'MusicCollect',
-  components: {},
-  props: {},
-  data() {
-    return {
-      loading: false,
-      list: [],
-      audio: new Audio(),
-      currentItem: null,
-      step: null,
-      process: 0
+function togglePlay(item, list) {
+  list.map((v) => {
+    if (v.name !== item.name) {
+      v.is_play = false
     }
-  },
-  computed: {
-    ...mapState(useBaseStore, ['bodyWidth'])
-  },
-  created() {
-    this.getData()
-  },
-  mounted() {
-    this.audio.addEventListener('loadedmetadata', () => {
-      this.currentItem.duration = this.audio.duration
-      this.step = this.bodyWidth / Math.floor(this.audio.duration)
-    })
-    this.audio.addEventListener('timeupdate', (e) => {
-      this.process = Math.ceil(e.target.currentTime) * this.step
-    })
-  },
-  methods: {
-    async getData() {
-      this.loading = true
-      let res = await userCollect()
-      this.loading = false
-      if (res.code === this.SUCCESS) {
-        this.list = res.data.music.list
+  })
+  item.is_play = !item.is_play
+  if (item.is_play) {
+    if (data.currentItem) {
+      if (data.currentItem.name !== item.name) {
+        data.audio.pause()
+        data.audio.src = item.mp3
+        data.audio.currentTime = 0
       }
-    },
-    togglePlay(item, list) {
-      list.map((v) => {
-        if (v.name !== item.name) {
-          v.is_play = false
-        }
-      })
-      item.is_play = !item.is_play
-      if (item.is_play) {
-        if (this.currentItem) {
-          if (this.currentItem.name !== item.name) {
-            this.audio.pause()
-            this.audio.src = item.mp3
-            this.audio.currentTime = 0
-          }
-        } else {
-          this.audio.pause()
-          this.audio.src = item.mp3
-          this.audio.currentTime = 0
-        }
-        this.audio.play()
-        this.audio.addEventListener('ended', () => (item.is_play = false))
-      } else {
-        this.stopPlay()
-      }
-      this.currentItem = item
-    },
-    stopPlay() {
-      this.audio.pause()
-      // this.audio.currentTime = 0
-      this.audio.removeEventListener('ended', null)
+    } else {
+      data.audio.pause()
+      data.audio.src = item.mp3
+      data.audio.currentTime = 0
     }
-  },
-  unmounted() {
-    this.stopPlay()
+    data.audio.play()
+    data.audio.addEventListener('ended', () => (item.is_play = false))
+  } else {
+    stopPlay()
   }
+  data.currentItem = item
+}
+
+function stopPlay() {
+  data.audio.pause()
+  // data.audio.currentTime = 0
+  data.audio.removeEventListener('ended', null)
 }
 </script>
 
diff --git a/src/pages/me/collect/VideoCollect.vue b/src/pages/me/collect/VideoCollect.vue
index 25c14c34f..e87165cac 100644
--- a/src/pages/me/collect/VideoCollect.vue
+++ b/src/pages/me/collect/VideoCollect.vue
@@ -7,63 +7,59 @@
     </BaseHeader>
     <div class="content">
       <Scroll class="Scroll" @pulldown="loadData">
-        <Posters mode="music" :list="videos" />
-        <Loading :is-full-screen="false" v-if="loading" />
+        <Posters mode="music" :list="data.videos" />
+        <Loading :is-full-screen="false" v-if="data.loading" />
         <NoMore v-else />
       </Scroll>
     </div>
   </div>
 </template>
-<script>
-import Posters from '../../../components/Posters'
-import Scroll from '../../../components/Scroll'
+<script setup lang="ts">
+import Posters from '@/components/Posters.vue'
+import Scroll from '@/components/Scroll.vue'
 import { myVideo } from '@/api/videos'
 
-export default {
-  name: 'VideoCollect',
-  components: {
-    Posters,
-    Scroll
-  },
-  data() {
-    return {
-      loading: false,
-      total: 0,
-      pageNo: 0,
-      pageSize: 15,
-      videos: []
-    }
-  },
-  computed: {},
-  created() {
-    this.loadData(true)
-  },
-  methods: {
-    async loadData(init = false) {
-      if (this.loading) return
-      if (!init) {
-        if (this.total <= this.videos.length) {
-          return
-        }
-        this.pageNo++
-      }
-      this.loading = true
-      let res = await myVideo({
-        pageNo: this.pageNo,
-        pageSize: this.pageSize
-      })
-      this.loading = false
-      if (res.code === this.SUCCESS) {
-        this.videos = this.videos.concat(res.data.list)
-        this.total = res.data.total
-      }
+import { onMounted, reactive } from 'vue'
+
+defineOptions({
+  name: 'VideoCollect'
+})
+
+const data = reactive({
+  loading: false,
+  total: 0,
+  pageNo: 0,
+  pageSize: 15,
+  videos: []
+})
+
+onMounted(() => {
+  loadData(true)
+})
+
+async function loadData(init = false) {
+  if (data.loading) return
+  if (!init) {
+    if (data.total <= data.videos.length) {
+      return
     }
+    data.pageNo++
+  }
+  data.loading = true
+  let res: any = await myVideo({
+    pageNo: data.pageNo,
+    pageSize: data.pageSize
+  })
+  data.loading = false
+  if (res.success) {
+    data.videos = data.videos.concat(res.data.list)
+    data.total = res.data.total
   }
 }
 </script>
 
 <style scoped lang="less">
-@import '../../../assets/less/index';
+@import '@/assets/less/index';
 
 .VideoCollect {
   position: fixed;
diff --git a/src/pages/me/rightMenu/LookHistory.vue b/src/pages/me/rightMenu/LookHistory.vue
index fc60ba6bb..abfb2ad81 100644
--- a/src/pages/me/rightMenu/LookHistory.vue
+++ b/src/pages/me/rightMenu/LookHistory.vue
@@ -13,16 +13,16 @@
         style="width: calc(100vw - 2rem); margin-left: 1rem"
         tabStyleWidth="50%"
         :tabTexts="['视频', '影视综']"
-        v-model:active-index="currentSlideItemIndex"
+        v-model:active-index="data.currentSlideItemIndex"
       >
       </Indicator>
-      <SlideHorizontal v-model:index="currentSlideItemIndex" class="SlideRowList">
+      <SlideHorizontal v-model:index="data.currentSlideItemIndex" class="SlideRowList">
         <SlideItem class="tab1" style="overflow: auto">
           <Scroll class="Scroll" @pulldown="getHistoryVideo">
-            <Posters :list="historyVideo.list" v-if="historyVideo.total"></Posters>
-            <Loading :is-full-screen="false" v-if="loadingVideo" />
+            <Posters :list="data.historyVideo.list" v-if="data.historyVideo.total"></Posters>
+            <Loading :is-full-screen="false" v-if="data.loadingVideo" />
             <template v-else>
-              <NoMore v-if="historyVideo.list.length" />
+              <NoMore v-if="data.historyVideo.list.length" />
               <div class="empty" v-else>
                 <img src="../../../assets/img/icon/none-bg1.webp" alt="" />
                 <div class="title">暂无观看历史记录</div>
@@ -40,100 +40,97 @@
     </div>
   </div>
 </template>
-<script>
-import Posters from '../../../components/Posters'
-import Scroll from '../../../components/Scroll'
-import NoMore from '../../../components/NoMore'
+<script setup lang="ts">
+import Posters from '@/components/Posters.vue'
+import Scroll from '@/components/Scroll.vue'
+import NoMore from '@/components/NoMore.vue'
 import { historyOther, historyVideo } from '@/api/videos'
 
-export default {
-  name: 'lookHistory',
-  components: {
-    NoMore,
-    Posters,
-    Scroll
-  },
-  data() {
-    return {
-      loadingVideo: false,
-      loadingOther: false,
-      isClearHistoryVideo: false,
-      isClearHistoryOther: false,
-      currentSlideItemIndex: 0,
-      pageSize: 15,
-      historyVideo: {
-        total: 0,
-        pageNo: 0,
-        list: []
-      },
-      historyOther: {
-        total: 0,
-        pageNo: 0,
-        list: []
-      }
-    }
-  },
-  computed: {
-    isClear() {
-      if (this.currentSlideItemIndex === 0) {
-        return this.historyVideo.list.length
-      }
-      return this.historyOther.list.length
-    }
-  },
-  created() {
-    this.getHistoryVideo(true)
-    this.getHistoryOther(true)
+import { computed, onMounted, reactive } from 'vue'
+import { _showConfirmDialog } from '@/utils'
+
+defineOptions({
+  name: 'LookHistory'
+})
+
+const data = reactive({
+  loadingVideo: false,
+  loadingOther: false,
+  isClearHistoryVideo: false,
+  isClearHistoryOther: false,
+  currentSlideItemIndex: 0,
+  pageSize: 15,
+  historyVideo: {
+    total: 0,
+    pageNo: 0,
+    list: []
   },
-  methods: {
-    async getHistoryVideo(init = false) {
-      if (this.loadingVideo) return
-      if (this.isClearHistoryVideo) return
-      if (!init) {
-        if (this.historyVideo.total <= this.historyVideo.list.length) return
-        this.historyVideo.pageNo++
-      }
-      this.loadingVideo = true
-      let res = await historyVideo({
-        pageNo: this.historyVideo.pageNo,
-        pageSize: this.pageSize
-      })
-      console.log(res)
-      this.loadingVideo = false
-      if (res.code === this.SUCCESS) {
-        this.historyVideo.list = this.historyVideo.list.concat(res.data.list)
-        this.historyVideo.total = res.data.total
-      }
-    },
-    async getHistoryOther(init = false) {
-      if (this.loadingOther) return
-      if (this.isClearHistoryOther) return
-      this.loadingOther = true
-      if (!init) {
-        this.historyOther.pageNo++
-      }
-      let res = await historyOther({
-        pageNo: this.historyOther.pageNo,
-        pageSize: this.pageSize
-      })
-      this.loadingOther = false
-      if (res.code === this.SUCCESS) {
-        this.historyOther.list = this.historyOther.list.concat(res.data.list)
-        this.historyOther.total = res.data.total
-      }
-    },
-    clear() {
-      this.$showConfirmDialog('确定清空？', '清空后，以往观看记录不再展示', 'gray', () => {
-        if (this.currentSlideItemIndex === 0) {
-          this.historyVideo.list = []
-          this.isClearHistoryVideo = true
-          return
-        }
-        this.historyOther.list = []
-        this.isClearHistoryVideo = true
-      })
-    }
+  historyOther: {
+    total: 0,
+    pageNo: 0,
+    list: []
+  }
+})
+
+const isClear = computed(() => {
+  if (data.currentSlideItemIndex === 0) {
+    return data.historyVideo.list.length
   }
+  return data.historyOther.list.length
+})
+onMounted(() => {
+  getHistoryVideo(true)
+  getHistoryOther(true)
+})
+
+async function getHistoryVideo(init = false) {
+  if (data.loadingVideo) return
+  if (data.isClearHistoryVideo) return
+  if (!init) {
+    if (data.historyVideo.total <= data.historyVideo.list.length) return
+    data.historyVideo.pageNo++
+  }
+  data.loadingVideo = true
+  let res: any = await historyVideo({
+    pageNo: data.historyVideo.pageNo,
+    pageSize: data.pageSize
+  })
+  console.log(res)
+  data.loadingVideo = false
+  if (res.success) {
+    data.historyVideo.list = data.historyVideo.list.concat(res.data.list)
+    data.historyVideo.total = res.data.total
+  }
+}
+
+async function getHistoryOther(init = false) {
+  if (data.loadingOther) return
+  if (data.isClearHistoryOther) return
+  data.loadingOther = true
+  if (!init) {
+    data.historyOther.pageNo++
+  }
+  let res: any = await historyOther({
+    pageNo: data.historyOther.pageNo,
+    pageSize: data.pageSize
+  })
+  data.loadingOther = false
+  if (res.success) {
+    data.historyOther.list = data.historyOther.list.concat(res.data.list)
+    data.historyOther.total = res.data.total
+  }
+}
+
+function clear() {
+  _showConfirmDialog('确定清空？', '清空后，以往观看记录不再展示', 'gray', () => {
+    if (data.currentSlideItemIndex === 0) {
+      data.historyVideo.list = []
+      data.isClearHistoryVideo = true
+      return
+    }
+    data.historyOther.list = []
+    data.isClearHistoryVideo = true
+  })
 }
 </script>
 
diff --git a/src/pages/me/rightMenu/MinorProtection/DetailSetting.vue b/src/pages/me/rightMenu/MinorProtection/DetailSetting.vue
index 482b3b706..2ac0b2281 100644
--- a/src/pages/me/rightMenu/MinorProtection/DetailSetting.vue
+++ b/src/pages/me/rightMenu/MinorProtection/DetailSetting.vue
@@ -1,35 +1,35 @@
 <template>
   <div class="DetailSetting">
     <BaseHeader />
-    <div class="content type1" v-if="type === 0">
+    <div class="content type1" v-if="data.type === 0">
       <div class="notice">
-        <img src="../../../../assets/img/icon/newicon/left_menu/lock.png" alt="" />
+        <img src="@/assets/img/icon/newicon/left_menu/lock.png" alt="" />
         <span>时间锁已关闭</span>
       </div>
       <div class="row mt1r no-active">
         <div class="left">
-          <img src="../../../../assets/img/icon/newicon/left_menu/hourglass.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/hourglass.png" alt="" />
           <span>可为时间锁设置一个触发时间</span>
         </div>
       </div>
       <div class="row mt1r no-active">
         <div class="left">
-          <img src="../../../../assets/img/icon/newicon/left_menu/clock.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/clock.png" alt="" />
           <span>开启时间锁后，单日使用时长超过触发时间，需输入密码才能继续使用</span>
         </div>
       </div>
       <div class="row mt1r mb1r no-active">
         <div class="left">
-          <img src="../../../../assets/img/icon/newicon/left_menu/lock.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/lock.png" alt="" />
           <span>开启时间锁，需先设置独立密码；忘记密码后可通过申诉重置密码</span>
         </div>
       </div>
-      <div class="row mt1r mb1r" @click="$nav('trigger-time', { triggerTime })">
+      <div class="row mt1r mb1r" @click="nav('trigger-time', { triggerTime: data.triggerTime })">
         <div class="left">
           <span>触发时间</span>
         </div>
         <div class="right">
-          <span>{{ triggerTime }}分钟</span>
+          <span>{{ data.triggerTime }}分钟</span>
           <dy-back direction="right"></dy-back>
         </div>
       </div>
@@ -37,62 +37,62 @@
         <div class="button primary">开启时间锁</div>
       </div>
     </div>
-    <div class="content type2" v-if="type === 1">
-      <img
-        class="desc"
-        src="../../../../assets/img/icon/newicon/left_menu/qingshaonian.png"
-        alt=""
-      />
+    <div class="content type2" v-if="data.type === 1">
+      <img class="desc" src="@/assets/img/icon/newicon/left_menu/qingshaonian.png" alt="" />
       <div class="footer">
         <div class="notice">
           <span>更多信息可阅读</span>
           <span
             style="color: yellow"
-            @click="$nav('/service-protocol', { type: '儿童/青少年使用须知' })"
+            @click="nav('/service-protocol', { type: '儿童/青少年使用须知' })"
             >《儿童/青少年使用须知》</span
           >
         </div>
         <div class="button primary">开启青少年模式</div>
       </div>
     </div>
-    <div class="content type2" v-if="type === 2">
-      <img class="desc" src="../../../../assets/img/icon/newicon/left_menu/img-type3.png" alt="" />
+    <div class="content type2" v-if="data.type === 2">
+      <img class="desc" src="@/assets/img/icon/newicon/left_menu/img-type3.png" alt="" />
       <div class="footer">
         <div class="notice">
           <!--          TODO  有个勾选没做-->
           <span>我已阅读并接受</span>
           <span
             style="color: yellow"
-            @click="$nav('/service-protocol', { type: '抖音亲子平台服务协议' })"
+            @click="nav('/service-protocol', { type: '抖音亲子平台服务协议' })"
           >
             《抖音亲子平台服务协议》
           </span>
         </div>
-        <div class="button primary">立即绑定</div>
+        <BaseButton type="primary">立即绑定</BaseButton>
       </div>
     </div>
   </div>
 </template>
-<script>
-import enums from '../../../../utils/enums'
+<script setup lang="ts">
+import enums from '@/utils/enums'
 
-export default {
-  name: 'DetailSetting',
-  data() {
-    return {
-      type: 0,
-      enums,
-      triggerTime: enums.TRIGGER_TIME.TIME60
-    }
-  },
-  computed: {},
-  created() {
-    this.type = ~~this.$route.query.type
-    let triggerTime = localStorage.getItem('changeTriggerTime')
-    if (triggerTime !== null) this.triggerTime = triggerTime
-  },
-  methods: {}
-}
+import { onMounted, reactive } from 'vue'
+import { useNav } from '@/utils/hooks/useNav.js'
+import { useRoute } from 'vue-router'
+import BaseButton from '@/components/BaseButton.vue'
+
+defineOptions({
+  name: 'DetailSetting'
+})
+
+const route = useRoute()
+const nav = useNav()
+const data = reactive({
+  type: 0,
+  triggerTime: enums.TRIGGER_TIME.TIME60
+})
+
+onMounted(() => {
+  data.type = ~~route.query.type
+  let triggerTime = localStorage.getItem('changeTriggerTime')
+  if (triggerTime !== null) data.triggerTime = Number(triggerTime)
+})
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/me/rightMenu/MinorProtection/Index.vue b/src/pages/me/rightMenu/MinorProtection/Index.vue
index 75b2560bf..c687986a5 100644
--- a/src/pages/me/rightMenu/MinorProtection/Index.vue
+++ b/src/pages/me/rightMenu/MinorProtection/Index.vue
@@ -6,21 +6,21 @@
       </template>
     </BaseHeader>
     <div class="content">
-      <div class="row" @click="$nav('detail-setting', { type: 0 })">
+      <div class="row" @click="nav('detail-setting', { type: 0 })">
         <div class="left">时间锁</div>
         <div class="right">
           <span>未开启</span>
           <dy-back direction="right"></dy-back>
         </div>
       </div>
-      <div class="row" @click="$nav('detail-setting', { type: 1 })">
+      <div class="row" @click="nav('detail-setting', { type: 1 })">
         <div class="left">青少年模式</div>
         <div class="right">
           <span>未开启</span>
           <dy-back direction="right"></dy-back>
         </div>
       </div>
-      <div class="row" @click="$nav('detail-setting', { type: 2 })">
+      <div class="row" @click="nav('detail-setting', { type: 2 })">
         <div class="left">亲子平台</div>
         <div class="right">
           <span>未开启</span>
@@ -30,20 +30,17 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  name: 'index',
-  data() {
-    return {}
-  },
-  computed: {},
-  created() {},
-  methods: {}
-}
+<script setup lang="ts">
+import { useNav } from '@/utils/hooks/useNav'
+
+defineOptions({
+  name: 'MinorProtection'
+})
+const nav = useNav()
 </script>
 
 <style scoped lang="less">
-@import '../../../../assets/less/index';
+@import '@/assets/less/index';
 
 .index {
   position: fixed;
diff --git a/src/pages/me/rightMenu/MinorProtection/TriggerTime.vue b/src/pages/me/rightMenu/MinorProtection/TriggerTime.vue
index 17a4799c6..900c72a31 100644
--- a/src/pages/me/rightMenu/MinorProtection/TriggerTime.vue
+++ b/src/pages/me/rightMenu/MinorProtection/TriggerTime.vue
@@ -8,51 +8,53 @@
     <div class="content">
       <div class="row" @click="setTriggerTime(enums.TRIGGER_TIME.TIME40)">
         <div class="left">40分钟</div>
-        <div class="right" v-if="triggerTime === enums.TRIGGER_TIME.TIME40">
+        <div class="right" v-if="data.triggerTime === enums.TRIGGER_TIME.TIME40">
           <img src="../../../../assets/img/icon/ok-red.png" alt="" />
         </div>
       </div>
       <div class="row" @click="setTriggerTime(enums.TRIGGER_TIME.TIME60)">
         <div class="left">60分钟</div>
-        <div class="right" v-if="triggerTime === enums.TRIGGER_TIME.TIME60">
+        <div class="right" v-if="data.triggerTime === enums.TRIGGER_TIME.TIME60">
           <img src="../../../../assets/img/icon/ok-red.png" alt="" />
         </div>
       </div>
       <div class="row" @click="setTriggerTime(enums.TRIGGER_TIME.TIME90)">
         <div class="left">90分钟</div>
-        <div class="right" v-if="triggerTime === enums.TRIGGER_TIME.TIME90">
+        <div class="right" v-if="data.triggerTime === enums.TRIGGER_TIME.TIME90">
           <img src="../../../../assets/img/icon/ok-red.png" alt="" />
         </div>
       </div>
       <div class="row" @click="setTriggerTime(enums.TRIGGER_TIME.TIME120)">
         <div class="left">120分钟</div>
-        <div class="right" v-if="triggerTime === enums.TRIGGER_TIME.TIME120">
+        <div class="right" v-if="data.triggerTime === enums.TRIGGER_TIME.TIME120">
           <img src="../../../../assets/img/icon/ok-red.png" alt="" />
         </div>
       </div>
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
 import enums from '../../../../utils/enums'
 
-export default {
-  name: 'TriggerTime',
-  data() {
-    return {
-      enums,
-      triggerTime: enums.TRIGGER_TIME.TIME60
-    }
-  },
-  created() {
-    this.triggerTime = ~~this.$route.query.triggerTime
-  },
-  methods: {
-    setTriggerTime(type) {
-      this.triggerTime = type
-      localStorage.setItem('changeTriggerTime', type)
-    }
-  }
+import { onMounted, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+
+defineOptions({
+  name: 'ChooseSchool'
+})
+
+const route = useRoute()
+const data = reactive({
+  triggerTime: enums.TRIGGER_TIME.TIME60
+})
+
+onMounted(() => {
+  data.triggerTime = ~~route.query.triggerTime
+})
+
+function setTriggerTime(type) {
+  data.triggerTime = type
+  localStorage.setItem('changeTriggerTime', type)
 }
 </script>
 
diff --git a/src/pages/me/rightMenu/Setting.vue b/src/pages/me/rightMenu/Setting.vue
index ed73849a7..bff8e4059 100644
--- a/src/pages/me/rightMenu/Setting.vue
+++ b/src/pages/me/rightMenu/Setting.vue
@@ -9,7 +9,7 @@
       <div class="title">帐号</div>
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/user.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/user.png" alt="" />
           <span>帐号与安全</span>
         </div>
         <div class="right">
@@ -18,7 +18,7 @@
       </div>
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/lock.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/lock.png" alt="" />
           <span>隐私设置</span>
         </div>
         <div class="right">
@@ -30,7 +30,7 @@
       <div class="title">通用</div>
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/remind.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/remind.png" alt="" />
           <span>通知设置</span>
         </div>
         <div class="right">
@@ -39,7 +39,7 @@
       </div>
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/dynamics.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/dynamics.png" alt="" />
           <span>动态壁纸</span>
         </div>
         <div class="right">
@@ -48,7 +48,7 @@
       </div>
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/setting-two.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/setting-two.png" alt="" />
           <span>通用设置</span>
         </div>
         <div class="right">
@@ -60,7 +60,7 @@
       <div class="title">帐号互通</div>
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/toutiao.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/toutiao.png" alt="" />
           <span>头条主页</span>
         </div>
         <div class="right">
@@ -72,7 +72,7 @@
       <div class="title">关于</div>
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/adddddddd.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/adddddddd.png" alt="" />
           <span>广告反馈与设置</span>
         </div>
         <div class="right">
@@ -81,7 +81,7 @@
       </div>
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/book.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/book.png" alt="" />
           <span>用户协议</span>
         </div>
         <div class="right">
@@ -90,7 +90,7 @@
       </div>
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/bookmark.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/bookmark.png" alt="" />
           <span>社区自律公约</span>
         </div>
         <div class="right">
@@ -99,7 +99,7 @@
       </div>
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/personal-privacy.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/personal-privacy.png" alt="" />
           <span>隐私政策</span>
         </div>
         <div class="right">
@@ -108,7 +108,7 @@
       </div>
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/protect.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/protect.png" alt="" />
           <span>应用权限</span>
         </div>
         <div class="right">
@@ -117,7 +117,7 @@
       </div>
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/ring.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/ring.png" alt="" />
           <span>第三方SDK列表</span>
         </div>
         <div class="right">
@@ -126,7 +126,7 @@
       </div>
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/about.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/about.png" alt="" />
           <span>关于抖音</span>
         </div>
         <div class="right">
@@ -135,7 +135,7 @@
       </div>
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/feedback.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/feedback.png" alt="" />
           <span>反馈与帮助</span>
         </div>
         <div class="right">
@@ -144,7 +144,7 @@
       </div>
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/delete.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/delete.png" alt="" />
           <span>清理占用空间</span>
         </div>
         <div class="right">
@@ -155,7 +155,7 @@
 
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/switch.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/switch.png" alt="" />
           <span>切换空间</span>
         </div>
         <div class="right">
@@ -164,7 +164,7 @@
       </div>
       <div class="row">
         <div class="left">
-          <img src="../../../assets/img/icon/newicon/left_menu/logout.png" alt="" />
+          <img src="@/assets/img/icon/newicon/left_menu/logout.png" alt="" />
           <span>退出登录</span>
         </div>
         <div class="right">
@@ -172,32 +172,22 @@
         </div>
       </div>
 
-      <div class="version">抖音 version{{ version }}</div>
+      <div class="version">抖音 version{{ store.version }}</div>
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
 import { useBaseStore } from '@/store/pinia'
 
-export default {
-  name: 'Setting',
-  setup() {
-    const baseStore = useBaseStore()
-    return { baseStore }
-  },
-  data() {
-    return {
-      version: this.baseStore.version
-    }
-  },
-  computed: {},
-  created() {},
-  methods: {}
-}
+defineOptions({
+  name: 'ChooseSchool'
+})
+
+const store = useBaseStore()
 </script>
 
 <style scoped lang="less">
-@import '../../../assets/less/index';
+@import '@/assets/less/index';
 
 .Setting {
   position: fixed;
diff --git a/src/pages/me/userinfo/AddSchool.vue b/src/pages/me/userinfo/AddSchool.vue
index 344e75c3c..1061283b6 100644
--- a/src/pages/me/userinfo/AddSchool.vue
+++ b/src/pages/me/userinfo/AddSchool.vue
@@ -11,24 +11,24 @@
       </template>
     </BaseHeader>
     <div class="content">
-      <div class="row" @click="$nav('/me/choose-school')">
+      <div class="row" @click="nav('/me/choose-school')">
         <div class="left">学校</div>
         <div class="right">
-          <span>{{ isEmpty(localSchool.name) }}</span>
+          <span>{{ isEmpty(data.localSchool.name) }}</span>
           <dy-back scale="1" direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="checkGo('/me/choose-department')">
         <div class="left">院系</div>
         <div class="right">
-          <span>{{ isEmpty(localSchool.department) }}</span>
+          <span>{{ isEmpty(data.localSchool.department) }}</span>
           <dy-back scale="1" direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="showJoinTimeDialog">
         <div class="left">入学时间</div>
         <div class="right">
-          <span>{{ isEmpty(localSchool.joinTime) }}</span>
+          <span>{{ isEmpty(data.localSchool.joinTime) }}</span>
           <dy-back scale="1" direction="right"></dy-back>
           <div v-show="false" id="trigger1"></div>
         </div>
@@ -36,11 +36,14 @@
       <div class="row" @click="showEducationDialog">
         <div class="left">学历</div>
         <div class="right">
-          <span>{{ isEmpty(localSchool.education) }}</span>
+          <span>{{ isEmpty(data.localSchool.education) }}</span>
           <dy-back scale="1" direction="right"></dy-back>
         </div>
       </div>
-      <div class="row" @click="$nav('/me/display-type', { displayType: localSchool.displayType })">
+      <div
+        class="row"
+        @click="nav('/me/display-type', { displayType: data.localSchool.displayType })"
+      >
         <div class="left">展示范围</div>
         <div class="right">
           <span>{{ displayType }}</span>
@@ -51,122 +54,128 @@
   </div>
 </template>
 
-<script>
-import { mapState } from 'pinia'
+<script setup lang="ts">
 import enums from '../../../utils/enums'
-import { inject } from 'vue'
+import { computed, onMounted, reactive } from 'vue'
 import MobileSelect from '../../../components/mobile-select/mobile-select'
 import { useBaseStore } from '@/store/pinia'
+import { useRouter } from 'vue-router'
+import { useNav } from '@/utils/hooks/useNav.js'
+import {
+  _hideLoading,
+  _notice,
+  _showLoading,
+  _showSelectDialog,
+  _showSimpleConfirmDialog,
+  _sleep,
+  cloneDeep
+} from '@/utils'
 
 //TODO 年份选择器没做
-export default {
-  name: 'AddSchool',
-  setup() {
-    const baseStore = useBaseStore()
-    return { baseStore }
-  },
-  data() {
-    return {
-      mitt: inject('mitt'),
-      localSchool: this.$clone(this.baseStore.userinfo.school),
-      educationList: [
-        { id: 1, name: '专科' },
-        { id: 2, name: '本科' },
-        { id: 3, name: '硕士' },
-        { id: 4, name: '博士' }
-      ]
-    }
-  },
-  created() {
-    let school = localStorage.getItem('changeSchool')
-    let department = localStorage.getItem('changeDepartment')
-    let displayType = localStorage.getItem('changeDisplayType')
-    let joinTime = localStorage.getItem('changeJoinTime')
-    let education = localStorage.getItem('changeEducation')
-    if (school !== null) this.localSchool.name = school
-    if (department !== null) this.localSchool.department = department
-    if (displayType !== null) this.localSchool.displayType = ~~displayType
-    if (joinTime !== null) this.localSchool.joinTime = ~~joinTime
-    if (education !== null) this.localSchool.education = education
-    // localStorage.clear()
-  },
-  computed: {
-    ...mapState(useBaseStore, ['userinfo']),
-    isChanged() {
-      if (this.school.name !== this.localSchool.name) return true
-      if (this.school.department !== this.localSchool.department) return true
-      if (this.school.joinTime !== this.localSchool.joinTime) return true
-      if (this.school.education !== this.localSchool.education) return true
-      return this.school.displayType !== this.localSchool.displayType
-    },
-    displayType() {
-      if (this.localSchool.displayType === enums.DISPLAY_TYPE.ALL) return '公开可见'
-      if (this.localSchool.displayType === enums.DISPLAY_TYPE.SCHOOL) return '校友可见'
-      if (this.localSchool.displayType === enums.DISPLAY_TYPE.ME) return '仅自己可见'
-      return ''
-    },
-    school() {
-      return this.userinfo.school
-    }
-  },
-  methods: {
-    showJoinTimeDialog() {
-      new MobileSelect({
-        trigger: '#trigger1',
-        title: '学历',
-        wheels: [
-          {
-            data: Array.apply(null, { length: 50 }).map((v, i) => new Date().getFullYear() - i)
-          }
-        ],
-        callback: (indexArr, data) => {
-          localStorage.setItem('changeJoinTime', data[0])
-          this.localSchool.joinTime = ~~data[0]
-        }
-      }).show()
-    },
-    showEducationDialog() {
-      this.$showSelectDialog(this.educationList, (e) => {
-        localStorage.setItem('changeEducation', e.name)
-        this.localSchool.education = e.name
-      })
-    },
-    isEmpty(val) {
-      if (val) return val
-      return '点击设置'
-    },
-    checkGo(path) {
-      if (!this.localSchool.name) return this.$notice('请先选择学校 ')
-      this.$nav(path)
-    },
-    back() {
-      if (this.isChanged) {
-        this.$showSimpleConfirmDialog(
-          '学校信息30天内只允许修改一次，是否保存修改',
-          this.save,
-          () => {
-            localStorage.clear()
-            this.$back()
-          }
-        )
-      } else {
-        localStorage.clear()
-        this.$back()
+
+defineOptions({
+  name: 'AddSchool'
+})
+
+const store = useBaseStore()
+const router = useRouter()
+const nav = useNav()
+const data = reactive({
+  localSchool: cloneDeep(store.userinfo.school),
+  educationList: [
+    { id: 1, name: '专科' },
+    { id: 2, name: '本科' },
+    { id: 3, name: '硕士' },
+    { id: 4, name: '博士' }
+  ]
+})
+
+onMounted(() => {
+  let school = localStorage.getItem('changeSchool')
+  let department = localStorage.getItem('changeDepartment')
+  let displayType = localStorage.getItem('changeDisplayType')
+  let joinTime = localStorage.getItem('changeJoinTime')
+  let education = localStorage.getItem('changeEducation')
+  if (school !== null) data.localSchool.name = school
+  if (department !== null) data.localSchool.department = department
+  if (displayType !== null) data.localSchool.displayType = ~~displayType
+  if (joinTime !== null) data.localSchool.joinTime = ~~joinTime
+  if (education !== null) data.localSchool.education = education
+})
+
+const school = computed(() => {
+  return store.userinfo.school
+})
+const isChanged = computed(() => {
+  if (school.value.name !== data.localSchool.name) return true
+  if (school.value.department !== data.localSchool.department) return true
+  if (school.value.joinTime !== data.localSchool.joinTime) return true
+  if (school.value.education !== data.localSchool.education) return true
+  return school.value.displayType !== data.localSchool.displayType
+})
+
+const displayType = computed(() => {
+  if (data.localSchool.displayType === enums.DISPLAY_TYPE.ALL) return '公开可见'
+  if (data.localSchool.displayType === enums.DISPLAY_TYPE.SCHOOL) return '校友可见'
+  if (data.localSchool.displayType === enums.DISPLAY_TYPE.ME) return '仅自己可见'
+  return ''
+})
+
+function showJoinTimeDialog() {
+  new MobileSelect({
+    trigger: '#trigger1',
+    title: '学历',
+    wheels: [
+      {
+        data: Array.apply(null, { length: 50 }).map((v, i) => new Date().getFullYear() - i)
       }
-    },
-    async save() {
-      if (!this.isChanged) return
-      this.$showLoading()
-      let data = { ...this.userinfo, ...{ school: this.localSchool } }
-      this.baseStore.setUserinfo(data)
-      await this.$sleep(500)
-      this.$hideLoading()
-      localStorage.clear()
-      this.$back()
-      this.$notice('修改成功')
+    ],
+    callback: (indexArr, data) => {
+      localStorage.setItem('changeJoinTime', data[0])
+      data.localSchool.joinTime = ~~data[0]
     }
+  }).show()
+}
+
+function showEducationDialog() {
+  _showSelectDialog(data.educationList, (e) => {
+    localStorage.setItem('changeEducation', e.name)
+    data.localSchool.education = e.name
+  })
+}
+
+function isEmpty(val) {
+  if (val) return val
+  return '点击设置'
+}
+
+function checkGo(path) {
+  if (!data.localSchool.name) return _notice('请先选择学校 ')
+  nav(path)
+}
+
+function back() {
+  if (isChanged.value) {
+    _showSimpleConfirmDialog('学校信息30天内只允许修改一次，是否保存修改', save, () => {
+      localStorage.clear()
+      router.back()
+    })
+  } else {
+    localStorage.clear()
+    router.back()
   }
 }
+
+async function save() {
+  if (!isChanged.value) return
+  _showLoading()
+  store.userinfo = { ...store.userinfo, ...{ school: data.localSchool } }
+  await _sleep(500)
+  _hideLoading()
+  localStorage.clear()
+  router.back()
+  _notice('修改成功')
+}
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/me/userinfo/ChooseCity.vue b/src/pages/me/userinfo/ChooseCity.vue
index d7d0ad5c9..e532f1464 100644
--- a/src/pages/me/userinfo/ChooseCity.vue
+++ b/src/pages/me/userinfo/ChooseCity.vue
@@ -7,7 +7,7 @@
     </BaseHeader>
     <div class="content">
       <div class="schools">
-        <div class="row" @click="save(item)" :key="i" v-for="(item, i) in list">
+        <div class="row" @click="save()" :key="i" v-for="(item, i) in list">
           <span>{{ item }}</span>
         </div>
       </div>
@@ -15,56 +15,59 @@
   </div>
 </template>
 
-<script>
-import { mapState } from 'pinia'
+<script setup lang="ts">
+import { ref } from 'vue'
+import { _hideLoading, _showLoading, _sleep } from '@/utils'
 import { useBaseStore } from '@/store/pinia'
 
-export default {
-  name: 'ChooseProvince',
-  setup() {
-    const baseStore = useBaseStore()
-    return { baseStore }
-  },
-  data() {
-    return {
-      list: [
-        '成都',
-        '自贡',
-        '攀枝花',
-        '泸州',
-        '德阳',
-        '绵阳',
-        '广元',
-        '遂宁',
-        '内江',
-        '乐山',
-        '南充',
-        '眉山',
-        '宜宾',
-        '广安',
-        '达州',
-        '雅安',
-        '巴中',
-        '资阳',
-        '阿坝',
-        '甘孜',
-        '凉山'
-      ]
-    }
-  },
-  computed: {
-    ...mapState(useBaseStore, ['userinfo'])
-  },
-  methods: {
-    async save() {
-      this.$showLoading()
-      let data = { ...this.userinfo, ...{ location: '中国-四川-成都' } }
-      this.baseStore.setUserinfo(data)
-      await this.$sleep(500)
-      this.$hideLoading()
-      history.go(-3)
-    }
-  }
+defineOptions({
+  name: 'ChooseCity'
+})
+
+const store = useBaseStore()
+const list = ref([
+  '河北',
+  '山西',
+  '辽宁',
+  '吉林',
+  '黑龙江',
+  '江苏',
+  '浙江',
+  '安徽',
+  '福建',
+  '江西',
+  '山东',
+  '河南',
+  '湖北',
+  '湖南',
+  '广东',
+  '海南',
+  '四川',
+  '贵州',
+  '云南',
+  '陕西',
+  '甘肃',
+  '青海',
+  '台湾',
+  '内蒙古',
+  '广西',
+  '西藏',
+  '宁夏',
+  '新疆',
+  '北京',
+  '天津',
+  '上海',
+  '重庆',
+  '香港',
+  '澳门'
+])
+
+async function save() {
+  _showLoading()
+  store.userinfo = { ...store.userinfo, ...{ location: '中国-四川-成都' } }
+  await _sleep(500)
+  _hideLoading()
+  history.go(-3)
 }
 </script>
 
diff --git a/src/pages/me/userinfo/ChooseDepartment.vue b/src/pages/me/userinfo/ChooseDepartment.vue
index 604aad2a7..ecca5d06b 100644
--- a/src/pages/me/userinfo/ChooseDepartment.vue
+++ b/src/pages/me/userinfo/ChooseDepartment.vue
@@ -5,12 +5,17 @@
         <span class="f16">选择院系</span>
       </template>
       <template v-slot:right>
-        <span class="f14" @click="$nav('/me/declare-school', { type: 2 })">没有找到?</span>
+        <span class="f14" @click="nav('/me/declare-school', { type: 2 })">没有找到?</span>
       </template>
     </BaseHeader>
     <div class="content">
       <div class="nearby">
-        <div class="item" :key="i" v-for="(item, i) in departments" @click="setDepartment(item)">
+        <div
+          class="item"
+          :key="i"
+          v-for="(item, i) in data.departments"
+          @click="setDepartment(item)"
+        >
           {{ item }}
         </div>
       </div>
@@ -18,33 +23,36 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'ChooseSchool',
-  components: {},
-  data() {
-    return {
-      departments: [],
-      schoolName: ''
-    }
-  },
-  computed: {},
-  created() {
-    for (let i = 0; i < 5; i++) {
-      this.departments.push('院系' + i)
-    }
-  },
-  methods: {
-    setDepartment(val) {
-      localStorage.setItem('changeDepartment', val)
-      this.$back()
-    }
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue'
+import { useNav } from '@/utils/hooks/useNav.js'
+import { useRouter } from 'vue-router'
+
+defineOptions({
+  name: 'ChooseDepartment'
+})
+
+const router = useRouter()
+const nav = useNav()
+const data = reactive({
+  departments: [],
+  schoolName: ''
+})
+
+onMounted(() => {
+  for (let i = 0; i < 5; i++) {
+    data.departments.push('院系' + i)
   }
+})
+
+function setDepartment(val) {
+  localStorage.setItem('changeDepartment', val)
+  router.back()
 }
 </script>
 
 <style scoped lang="less">
-@import '../../../assets/less/index';
+@import '@/assets/less/index';
 
 .choose-school {
   position: fixed;
diff --git a/src/pages/me/userinfo/ChooseLocation.vue b/src/pages/me/userinfo/ChooseLocation.vue
index 3b443aa7b..580a7c457 100644
--- a/src/pages/me/userinfo/ChooseLocation.vue
+++ b/src/pages/me/userinfo/ChooseLocation.vue
@@ -20,7 +20,7 @@
         <div class="title">
           <span>其他地区</span>
         </div>
-        <div class="row" @click="$nav('/me/choose-province')">
+        <div class="row" @click="nav('/me/choose-province')">
           <span>中国</span>
           <div class="right">
             <dy-back scale=".8" direction="right"></dy-back>
@@ -39,1178 +39,1167 @@
   </div>
 </template>
 
-<script>
-import { mapState } from 'pinia'
+<script setup lang="ts">
 import { useBaseStore } from '@/store/pinia'
-import { _sleep } from '@/utils'
+import { _hideLoading, _showLoading, _sleep } from '@/utils'
 
-export default {
-  name: 'ChooseLocation',
-  setup() {
-    const baseStore = useBaseStore()
-    return { baseStore }
-  },
-  data() {
-    return {
-      countryOk: {
-        A: [
-          {
-            code: '+1-264',
-            name: '安圭拉',
-            pinyin: 'A'
-          },
-          {
-            code: '+1-268',
-            name: '安地卡及巴布达',
-            pinyin: 'A'
-          },
-          {
-            code: '+244',
-            name: '安哥拉',
-            pinyin: 'A'
-          },
-          {
-            code: '+353',
-            name: '爱尔兰',
-            pinyin: 'A'
-          },
-          {
-            code: '+372',
-            name: '爱沙尼亚',
-            pinyin: 'A'
-          },
-          {
-            code: '+376',
-            name: '安道尔',
-            pinyin: 'A'
-          },
-          {
-            code: '+853',
-            name: '澳门',
-            pinyin: 'A'
-          },
-          {
-            code: '+20',
-            name: '埃及',
-            pinyin: 'A'
-          },
-          {
-            code: '+61',
-            name: '澳大利亚  科科斯（基林）群岛  圣诞岛',
-            pinyin: 'A'
-          }
-        ],
-        B: [
-          {
-            code: '+1-242',
-            name: '巴哈马',
-            pinyin: 'B'
-          },
-          {
-            code: '+1-246',
-            name: '巴巴多斯',
-            pinyin: 'B'
-          },
-          {
-            code: '+1-441',
-            name: '百慕大',
-            pinyin: 'B'
-          },
-          {
-            code: '+226',
-            name: '布吉纳法索',
-            pinyin: 'B'
-          },
-          {
-            code: '+229',
-            name: '贝宁',
-            pinyin: 'B'
-          },
-          {
-            code: '+257',
-            name: '布隆迪',
-            pinyin: 'B'
-          },
-          {
-            code: '+267',
-            name: '博茨瓦纳',
-            pinyin: 'B'
-          },
-          {
-            code: '+354',
-            name: '冰岛',
-            pinyin: 'B'
-          },
-          {
-            code: '+359',
-            name: '保加利亚',
-            pinyin: 'B'
-          },
-          {
-            code: '+375',
-            name: '白俄罗斯',
-            pinyin: 'B'
-          },
-          {
-            code: '+387',
-            name: '波斯尼亚和黑塞哥维那',
-            pinyin: 'B'
-          },
-          {
-            code: '+389',
-            name: '北马其顿',
-            pinyin: 'B'
-          },
-          {
-            code: '+501',
-            name: '伯利兹',
-            pinyin: 'B'
-          },
-          {
-            code: '+507',
-            name: '巴拿马',
-            pinyin: 'B'
-          },
-          {
-            code: '+591',
-            name: '玻利维亚',
-            pinyin: 'B'
-          },
-          {
-            code: '+595',
-            name: '巴拉圭',
-            pinyin: 'B'
-          },
-          {
-            code: '+675',
-            name: '巴布亚新几内亚',
-            pinyin: 'B'
-          },
-          {
-            code: '+680',
-            name: '帛琉',
-            pinyin: 'B'
-          },
-          {
-            code: '+970',
-            name: '巴勒斯坦',
-            pinyin: 'B'
-          },
-          {
-            code: '+973',
-            name: '巴林',
-            pinyin: 'B'
-          },
-          {
-            code: '+975',
-            name: '不丹',
-            pinyin: 'B'
-          },
-          {
-            code: '+32',
-            name: '比利时',
-            pinyin: 'B'
-          },
-          {
-            code: '+48',
-            name: '波兰',
-            pinyin: 'B'
-          },
-          {
-            code: '+55',
-            name: '巴西',
-            pinyin: 'B'
-          },
-          {
-            code: '+92',
-            name: '巴基斯坦',
-            pinyin: 'B'
-          }
-        ],
-        C: [
-          {
-            code: '+240',
-            name: '赤道几内亚',
-            pinyin: 'C'
-          }
-        ],
-        D: [
-          {
-            code: '+1-767',
-            name: '多米尼克',
-            pinyin: 'D'
-          },
-          {
-            code: '+228',
-            name: '多哥',
-            pinyin: 'D'
-          },
-          {
-            code: '+670',
-            name: '东帝汶',
-            pinyin: 'D'
-          },
-          {
-            code: '+45',
-            name: '丹麦',
-            pinyin: 'D'
-          },
-          {
-            code: '+49',
-            name: '德国',
-            pinyin: 'D'
-          },
-          {
-            code: '+82',
-            name: '大韩民国',
-            pinyin: 'D'
-          }
-        ],
-        E: [
-          {
-            code: '+213',
-            name: '阿尔及利亚',
-            pinyin: 'E'
-          },
-          {
-            code: '+247',
-            name: '阿森松岛',
-            pinyin: 'E'
-          },
-          {
-            code: '+291',
-            name: '厄立特里亚',
-            pinyin: 'E'
-          },
-          {
-            code: '+297',
-            name: '阿鲁巴',
-            pinyin: 'E'
-          },
-          {
-            code: '+355',
-            name: '阿尔巴尼亚',
-            pinyin: 'E'
-          },
-          {
-            code: '+593',
-            name: '厄瓜多尔',
-            pinyin: 'E'
-          },
-          {
-            code: '+968',
-            name: '阿曼',
-            pinyin: 'E'
-          },
-          {
-            code: '+971',
-            name: '阿联酋',
-            pinyin: 'E'
-          },
-          {
-            code: '+994',
-            name: '阿塞拜疆',
-            pinyin: 'E'
-          },
-          {
-            code: '+54',
-            name: '阿根廷',
-            pinyin: 'E'
-          },
-          {
-            code: '+93',
-            name: '阿富汗',
-            pinyin: 'E'
-          }
-        ],
-        F: [
-          {
-            code: '+238',
-            name: '佛得角',
-            pinyin: 'F'
-          },
-          {
-            code: '+298',
-            name: '法罗群岛',
-            pinyin: 'F'
-          },
-          {
-            code: '+358',
-            name: '芬兰',
-            pinyin: 'F'
-          },
-          {
-            code: '+379',
-            name: '梵蒂冈',
-            pinyin: 'F'
-          },
-          {
-            code: '+500',
-            name: '福克兰群岛和 南乔治亚和南桑威奇群岛',
-            pinyin: 'F'
-          },
-          {
-            code: '+594',
-            name: '法属圭亚那',
-            pinyin: 'F'
-          },
-          {
-            code: '+679',
-            name: '斐济',
-            pinyin: 'F'
-          },
-          {
-            code: '+689',
-            name: '法属玻里尼西亚',
-            pinyin: 'F'
-          },
-          {
-            code: '+33',
-            name: '法国',
-            pinyin: 'F'
-          },
-          {
-            code: '+63',
-            name: '菲律宾',
-            pinyin: 'F'
-          }
-        ],
-        G: [
-          {
-            code: '+1-473',
-            name: '格瑞那达',
-            pinyin: 'G'
-          },
-          {
-            code: '+220',
-            name: '冈比亚',
-            pinyin: 'G'
-          },
-          {
-            code: '+242',
-            name: '刚果（布）',
-            pinyin: 'G'
-          },
-          {
-            code: '+243',
-            name: '刚果（金）（即前 扎伊尔）',
-            pinyin: 'G'
-          },
-          {
-            code: '+299',
-            name: '格陵兰',
-            pinyin: 'G'
-          },
-          {
-            code: '+506',
-            name: '哥斯达黎加',
-            pinyin: 'G'
-          },
-          {
-            code: '+590',
-            name: '瓜德罗普',
-            pinyin: 'G'
-          },
-          {
-            code: '+592',
-            name: '圭亚那',
-            pinyin: 'G'
-          },
-          {
-            code: '+995',
-            name: '格鲁吉亚',
-            pinyin: 'G'
-          },
-          {
-            code: '+53',
-            name: '古巴',
-            pinyin: 'G'
-          },
-          {
-            code: '+57',
-            name: '哥伦比亚',
-            pinyin: 'G'
-          }
-        ],
-        H: [
-          {
-            code: '+504',
-            name: '洪都拉斯',
-            pinyin: 'H'
-          },
-          {
-            code: '+509',
-            name: '海地',
-            pinyin: 'H'
-          },
-          {
-            code: '+31',
-            name: '荷兰',
-            pinyin: 'H'
-          }
-        ],
-        J: [
-          {
-            code: '+224',
-            name: '几内亚',
-            pinyin: 'J'
-          },
-          {
-            code: '+233',
-            name: '加纳',
-            pinyin: 'J'
-          },
-          {
-            code: '+241',
-            name: '加彭',
-            pinyin: 'J'
-          },
-          {
-            code: '+245',
-            name: '几内亚比绍',
-            pinyin: 'J'
-          },
-          {
-            code: '+253',
-            name: '吉布提',
-            pinyin: 'J'
-          },
-          {
-            code: '+420',
-            name: '捷克',
-            pinyin: 'J'
-          },
-          {
-            code: '+686',
-            name: '基里巴斯',
-            pinyin: 'J'
-          },
-          {
-            code: '+855',
-            name: '柬埔寨',
-            pinyin: 'J'
-          },
-          {
-            code: '+996',
-            name: '吉尔吉斯斯坦',
-            pinyin: 'J'
-          },
-          {
-            code: '+1',
-            name: '加拿大',
-            pinyin: 'J'
-          }
-        ],
-        K: [
-          {
-            code: '+1-345',
-            name: '开曼群岛',
-            pinyin: 'K'
-          },
-          {
-            code: '+225',
-            name: '科特迪瓦',
-            pinyin: 'K'
-          },
-          {
-            code: '+237',
-            name: '喀麦隆',
-            pinyin: 'K'
-          },
-          {
-            code: '+254',
-            name: '肯尼亚',
-            pinyin: 'K'
-          },
-          {
-            code: '+269',
-            name: '科摩罗',
-            pinyin: 'K'
-          },
-          {
-            code: '+383',
-            name: '科索沃',
-            pinyin: 'K'
-          },
-          {
-            code: '+385',
-            name: '克罗地亚',
-            pinyin: 'K'
-          },
-          {
-            code: '+682',
-            name: '库克群岛',
-            pinyin: 'K'
-          },
-          {
-            code: '+965',
-            name: '科威特',
-            pinyin: 'K'
-          },
-          {
-            code: '+974',
-            name: '卡塔尔',
-            pinyin: 'K'
-          }
-        ],
-        L: [
-          {
-            code: '+218',
-            name: '利比亚',
-            pinyin: 'L'
-          },
-          {
-            code: '+231',
-            name: '利比里亚',
-            pinyin: 'L'
-          },
-          {
-            code: '+250',
-            name: '卢旺达',
-            pinyin: 'L'
-          },
-          {
-            code: '+262',
-            name: '留尼汪和 马约特',
-            pinyin: 'L'
-          },
-          {
-            code: '+266',
-            name: '赖索托',
-            pinyin: 'L'
-          },
-          {
-            code: '+352',
-            name: '卢森堡',
-            pinyin: 'L'
-          },
-          {
-            code: '+370',
-            name: '立陶宛',
-            pinyin: 'L'
-          },
-          {
-            code: '+371',
-            name: '拉脱维亚',
-            pinyin: 'L'
-          },
-          {
-            code: '+423',
-            name: '列支敦斯登',
-            pinyin: 'L'
-          },
-          {
-            code: '+856',
-            name: '老挝',
-            pinyin: 'L'
-          },
-          {
-            code: '+961',
-            name: '黎巴嫩',
-            pinyin: 'L'
-          },
-          {
-            code: '+40',
-            name: '罗马尼亚',
-            pinyin: 'L'
-          }
-        ],
-        M: [
-          {
-            code: '+1-664',
-            name: '蒙特塞拉特',
-            pinyin: 'M'
-          },
-          {
-            code: '+212',
-            name: '摩洛哥',
-            pinyin: 'M'
-          },
-          {
-            code: '+222',
-            name: '毛里塔尼亚',
-            pinyin: 'M'
-          },
-          {
-            code: '+223',
-            name: '马里',
-            pinyin: 'M'
-          },
-          {
-            code: '+230',
-            name: '模里西斯',
-            pinyin: 'M'
-          },
-          {
-            code: '+258',
-            name: '莫桑比克',
-            pinyin: 'M'
-          },
-          {
-            code: '+261',
-            name: '马达加斯加',
-            pinyin: 'M'
-          },
-          {
-            code: '+265',
-            name: '马拉维',
-            pinyin: 'M'
-          },
-          {
-            code: '+356',
-            name: '马尔他',
-            pinyin: 'M'
-          },
-          {
-            code: '+373',
-            name: '摩尔多瓦',
-            pinyin: 'M'
-          },
-          {
-            code: '+377',
-            name: '摩纳哥',
-            pinyin: 'M'
-          },
-          {
-            code: '+382',
-            name: '蒙特内哥罗',
-            pinyin: 'M'
-          },
-          {
-            code: '+596',
-            name: '马提尼克',
-            pinyin: 'M'
-          },
-          {
-            code: '+691',
-            name: '密克罗尼西亚联邦',
-            pinyin: 'M'
-          },
-          {
-            code: '+692',
-            name: '马绍尔群岛',
-            pinyin: 'M'
-          },
-          {
-            code: '+880',
-            name: '孟加拉国 孟加拉国',
-            pinyin: 'M'
-          },
-          {
-            code: '+960',
-            name: '马尔地夫',
-            pinyin: 'M'
-          },
-          {
-            code: '+976',
-            name: '蒙古国',
-            pinyin: 'M'
-          },
-          {
-            code: '+51',
-            name: '秘鲁',
-            pinyin: 'M'
-          },
-          {
-            code: '+52',
-            name: '墨西哥',
-            pinyin: 'M'
-          },
-          {
-            code: '+95',
-            name: '缅甸',
-            pinyin: 'M'
-          },
-          {
-            code: '+1',
-            name: '美国',
-            pinyin: 'M'
-          }
-        ],
-        N: [
-          {
-            code: '+211',
-            name: '南苏丹',
-            pinyin: 'N'
-          },
-          {
-            code: '+227',
-            name: '尼日尔',
-            pinyin: 'N'
-          },
-          {
-            code: '+234',
-            name: '奈及利亚',
-            pinyin: 'N'
-          },
-          {
-            code: '+264',
-            name: '纳米比亚',
-            pinyin: 'N'
-          },
-          {
-            code: '+505',
-            name: '尼加拉瓜',
-            pinyin: 'N'
-          },
-          {
-            code: '+674',
-            name: '瑙鲁',
-            pinyin: 'N'
-          },
-          {
-            code: '+683',
-            name: '纽埃',
-            pinyin: 'N'
-          },
-          {
-            code: '+977',
-            name: '尼泊尔',
-            pinyin: 'N'
-          },
-          {
-            code: '+27',
-            name: '南非',
-            pinyin: 'N'
-          },
-          {
-            code: '+47',
-            name: '挪威',
-            pinyin: 'N'
-          }
-        ],
-        P: [
-          {
-            code: '+351',
-            name: '葡萄牙',
-            pinyin: 'P'
-          }
-        ],
-        R: [
-          {
-            code: '+41',
-            name: '瑞士',
-            pinyin: 'R'
-          },
-          {
-            code: '+46',
-            name: '瑞典',
-            pinyin: 'R'
-          },
-          {
-            code: '+81',
-            name: '日本',
-            pinyin: 'R'
-          }
-        ],
-        S: [
-          {
-            code: '+1-721',
-            name: '圣马丁',
-            pinyin: 'S'
-          },
-          {
-            code: '+1-758',
-            name: '圣卢西亚',
-            pinyin: 'S'
-          },
-          {
-            code: '+1-784',
-            name: '圣文森特和格林纳丁斯',
-            pinyin: 'S'
-          },
-          {
-            code: '+221',
-            name: '塞内加尔',
-            pinyin: 'S'
-          },
-          {
-            code: '+232',
-            name: '塞拉利昂',
-            pinyin: 'S'
-          },
-          {
-            code: '+239',
-            name: '圣多美和普林西比',
-            pinyin: 'S'
-          },
-          {
-            code: '+248',
-            name: '塞舌尔',
-            pinyin: 'S'
-          },
-          {
-            code: '+249',
-            name: '苏丹',
-            pinyin: 'S'
-          },
-          {
-            code: '+252',
-            name: '索马利亚',
-            pinyin: 'S'
-          },
-          {
-            code: '+259',
-            name: '桑给巴尔，但从未使用',
-            pinyin: 'S'
-          },
-          {
-            code: '+260',
-            name: '尚比亚',
-            pinyin: 'S'
-          },
-          {
-            code: '+268',
-            name: '斯威士兰',
-            pinyin: 'S'
-          },
-          {
-            code: '+290',
-            name: '圣赫勒拿 和 特里斯坦-达库尼亚',
-            pinyin: 'S'
-          },
-          {
-            code: '+357',
-            name: '赛普勒斯',
-            pinyin: 'S'
-          },
-          {
-            code: '+378',
-            name: '圣马力诺',
-            pinyin: 'S'
-          },
-          {
-            code: '+381',
-            name: '塞尔维亚',
-            pinyin: 'S'
-          },
-          {
-            code: '+386',
-            name: '斯洛维尼亚',
-            pinyin: 'S'
-          },
-          {
-            code: '+421',
-            name: '斯洛伐克',
-            pinyin: 'S'
-          },
-          {
-            code: '+503',
-            name: '萨尔瓦多',
-            pinyin: 'S'
-          },
-          {
-            code: '+508',
-            name: '圣皮埃尔和密克隆',
-            pinyin: 'S'
-          },
-          {
-            code: '+597',
-            name: '苏里南',
-            pinyin: 'S'
-          },
-          {
-            code: '+677',
-            name: '所罗门群岛',
-            pinyin: 'S'
-          },
-          {
-            code: '+685',
-            name: '萨摩亚',
-            pinyin: 'S'
-          },
-          {
-            code: '+966',
-            name: '沙乌地阿拉伯',
-            pinyin: 'S'
-          },
-          {
-            code: '+94',
-            name: '斯里兰卡',
-            pinyin: 'S'
-          }
-        ],
-        T: [
-          {
-            code: '+1-649',
-            name: '特克斯和凯科斯群岛',
-            pinyin: 'T'
-          },
-          {
-            code: '+216',
-            name: '突尼西亚',
-            pinyin: 'T'
-          },
-          {
-            code: '+255',
-            name: '坦桑尼亚',
-            pinyin: 'T'
-          },
-          {
-            code: '+676',
-            name: '汤加',
-            pinyin: 'T'
-          },
-          {
-            code: '+688',
-            name: '图瓦卢',
-            pinyin: 'T'
-          },
-          {
-            code: '+690',
-            name: '托克劳',
-            pinyin: 'T'
-          },
-          {
-            code: '+992',
-            name: '塔吉克斯坦',
-            pinyin: 'T'
-          },
-          {
-            code: '+993',
-            name: '土库曼斯坦',
-            pinyin: 'T'
-          },
-          {
-            code: '+66',
-            name: '泰国',
-            pinyin: 'T'
-          },
-          {
-            code: '+90',
-            name: '土耳其',
-            pinyin: 'T'
-          }
-        ],
-        W: [
-          {
-            code: '+256',
-            name: '乌干达',
-            pinyin: 'W'
-          },
-          {
-            code: '+380',
-            name: '乌克兰',
-            pinyin: 'W'
-          },
-          {
-            code: '+502',
-            name: '危地马拉',
-            pinyin: 'W'
-          },
-          {
-            code: '+673',
-            name: '文莱',
-            pinyin: 'W'
-          },
-          {
-            code: '+678',
-            name: '瓦努阿图',
-            pinyin: 'W'
-          },
-          {
-            code: '+681',
-            name: '瓦利斯和富图纳',
-            pinyin: 'W'
-          },
-          {
-            code: '+998',
-            name: '乌兹别克斯坦',
-            pinyin: 'W'
-          },
-          {
-            code: '+58',
-            name: '委内瑞拉',
-            pinyin: 'W'
-          }
-        ],
-        X: [
-          {
-            code: '+210',
-            name: '西撒哈拉',
-            pinyin: 'X'
-          },
-          {
-            code: '+263',
-            name: '辛巴威',
-            pinyin: 'X'
-          },
-          {
-            code: '+687',
-            name: '新喀里多尼亚',
-            pinyin: 'X'
-          },
-          {
-            code: '+852',
-            name: '香港',
-            pinyin: 'X'
-          },
-          {
-            code: '+963',
-            name: '叙利亚',
-            pinyin: 'X'
-          },
-          {
-            code: '+30',
-            name: '希腊',
-            pinyin: 'X'
-          },
-          {
-            code: '+34',
-            name: '西班牙',
-            pinyin: 'X'
-          },
-          {
-            code: '+36',
-            name: '匈牙利',
-            pinyin: 'X'
-          },
-          {
-            code: '+64',
-            name: '新西兰',
-            pinyin: 'X'
-          },
-          {
-            code: '+65',
-            name: '新加坡',
-            pinyin: 'X'
-          }
-        ],
-        Y: [
-          {
-            code: '+1-284',
-            name: '英属维尔京群岛',
-            pinyin: 'Y'
-          },
-          {
-            code: '+246',
-            name: '英属印度洋领地',
-            pinyin: 'Y'
-          },
-          {
-            code: '+251',
-            name: '衣索比亚',
-            pinyin: 'Y'
-          },
-          {
-            code: '+374',
-            name: '亚美尼亚',
-            pinyin: 'Y'
-          },
-          {
-            code: '+962',
-            name: '约旦',
-            pinyin: 'Y'
-          },
-          {
-            code: '+964',
-            name: '伊拉克',
-            pinyin: 'Y'
-          },
-          {
-            code: '+967',
-            name: '叶门',
-            pinyin: 'Y'
-          },
-          {
-            code: '+972',
-            name: '以色列',
-            pinyin: 'Y'
-          },
-          {
-            code: '+39',
-            name: '义大利',
-            pinyin: 'Y'
-          },
-          {
-            code: '+44',
-            name: '英国',
-            pinyin: 'Y'
-          },
-          {
-            code: '+62',
-            name: '印尼',
-            pinyin: 'Y'
-          },
-          {
-            code: '+84',
-            name: '越南',
-            pinyin: 'Y'
-          },
-          {
-            code: '+91',
-            name: '印度',
-            pinyin: 'Y'
-          },
-          {
-            code: '+98',
-            name: '伊朗',
-            pinyin: 'Y'
-          }
-        ],
-        Z: [
-          {
-            code: '+235',
-            name: '乍得',
-            pinyin: 'Z'
-          },
-          {
-            code: '+236',
-            name: '中非',
-            pinyin: 'Z'
-          },
-          {
-            code: '+350',
-            name: '直布罗陀',
-            pinyin: 'Z'
-          },
-          {
-            code: '+850',
-            name: '朝鲜民主主义人民共和国',
-            pinyin: 'Z'
-          },
-          {
-            code: '+886',
-            name: '中华民国',
-            pinyin: 'Z'
-          },
-          {
-            code: '+56',
-            name: '智利',
-            pinyin: 'Z'
-          },
-          {
-            code: '+86',
-            name: '中国',
-            pinyin: 'Z'
-          }
-        ]
-      }
+import { ref } from 'vue'
+import { useNav } from '@/utils/hooks/useNav.js'
+import { useRouter } from 'vue-router'
+
+defineOptions({
+  name: 'ChooseLocation'
+})
+
+const store = useBaseStore()
+const router = useRouter()
+const nav = useNav()
+const countryOk = ref({
+  A: [
+    {
+      code: '+1-264',
+      name: '安圭拉',
+      pinyin: 'A'
+    },
+    {
+      code: '+1-268',
+      name: '安地卡及巴布达',
+      pinyin: 'A'
+    },
+    {
+      code: '+244',
+      name: '安哥拉',
+      pinyin: 'A'
+    },
+    {
+      code: '+353',
+      name: '爱尔兰',
+      pinyin: 'A'
+    },
+    {
+      code: '+372',
+      name: '爱沙尼亚',
+      pinyin: 'A'
+    },
+    {
+      code: '+376',
+      name: '安道尔',
+      pinyin: 'A'
+    },
+    {
+      code: '+853',
+      name: '澳门',
+      pinyin: 'A'
+    },
+    {
+      code: '+20',
+      name: '埃及',
+      pinyin: 'A'
+    },
+    {
+      code: '+61',
+      name: '澳大利亚  科科斯（基林）群岛  圣诞岛',
+      pinyin: 'A'
     }
-  },
-  computed: {
-    ...mapState(useBaseStore, ['userinfo'])
-  },
-  mounted() {
-    for (let type in this.countryOk) {
-      console.log(type)
+  ],
+  B: [
+    {
+      code: '+1-242',
+      name: '巴哈马',
+      pinyin: 'B'
+    },
+    {
+      code: '+1-246',
+      name: '巴巴多斯',
+      pinyin: 'B'
+    },
+    {
+      code: '+1-441',
+      name: '百慕大',
+      pinyin: 'B'
+    },
+    {
+      code: '+226',
+      name: '布吉纳法索',
+      pinyin: 'B'
+    },
+    {
+      code: '+229',
+      name: '贝宁',
+      pinyin: 'B'
+    },
+    {
+      code: '+257',
+      name: '布隆迪',
+      pinyin: 'B'
+    },
+    {
+      code: '+267',
+      name: '博茨瓦纳',
+      pinyin: 'B'
+    },
+    {
+      code: '+354',
+      name: '冰岛',
+      pinyin: 'B'
+    },
+    {
+      code: '+359',
+      name: '保加利亚',
+      pinyin: 'B'
+    },
+    {
+      code: '+375',
+      name: '白俄罗斯',
+      pinyin: 'B'
+    },
+    {
+      code: '+387',
+      name: '波斯尼亚和黑塞哥维那',
+      pinyin: 'B'
+    },
+    {
+      code: '+389',
+      name: '北马其顿',
+      pinyin: 'B'
+    },
+    {
+      code: '+501',
+      name: '伯利兹',
+      pinyin: 'B'
+    },
+    {
+      code: '+507',
+      name: '巴拿马',
+      pinyin: 'B'
+    },
+    {
+      code: '+591',
+      name: '玻利维亚',
+      pinyin: 'B'
+    },
+    {
+      code: '+595',
+      name: '巴拉圭',
+      pinyin: 'B'
+    },
+    {
+      code: '+675',
+      name: '巴布亚新几内亚',
+      pinyin: 'B'
+    },
+    {
+      code: '+680',
+      name: '帛琉',
+      pinyin: 'B'
+    },
+    {
+      code: '+970',
+      name: '巴勒斯坦',
+      pinyin: 'B'
+    },
+    {
+      code: '+973',
+      name: '巴林',
+      pinyin: 'B'
+    },
+    {
+      code: '+975',
+      name: '不丹',
+      pinyin: 'B'
+    },
+    {
+      code: '+32',
+      name: '比利时',
+      pinyin: 'B'
+    },
+    {
+      code: '+48',
+      name: '波兰',
+      pinyin: 'B'
+    },
+    {
+      code: '+55',
+      name: '巴西',
+      pinyin: 'B'
+    },
+    {
+      code: '+92',
+      name: '巴基斯坦',
+      pinyin: 'B'
     }
-  },
-  methods: {
-    async save() {
-      this.$showLoading()
-      let data = { ...this.userinfo, ...{ location: '暂不设置' } }
-      this.baseStore.setUserinfo(data)
-      await _sleep(500)
-      this.$hideLoading()
-      this.$back()
+  ],
+  C: [
+    {
+      code: '+240',
+      name: '赤道几内亚',
+      pinyin: 'C'
     }
-  }
+  ],
+  D: [
+    {
+      code: '+1-767',
+      name: '多米尼克',
+      pinyin: 'D'
+    },
+    {
+      code: '+228',
+      name: '多哥',
+      pinyin: 'D'
+    },
+    {
+      code: '+670',
+      name: '东帝汶',
+      pinyin: 'D'
+    },
+    {
+      code: '+45',
+      name: '丹麦',
+      pinyin: 'D'
+    },
+    {
+      code: '+49',
+      name: '德国',
+      pinyin: 'D'
+    },
+    {
+      code: '+82',
+      name: '大韩民国',
+      pinyin: 'D'
+    }
+  ],
+  E: [
+    {
+      code: '+213',
+      name: '阿尔及利亚',
+      pinyin: 'E'
+    },
+    {
+      code: '+247',
+      name: '阿森松岛',
+      pinyin: 'E'
+    },
+    {
+      code: '+291',
+      name: '厄立特里亚',
+      pinyin: 'E'
+    },
+    {
+      code: '+297',
+      name: '阿鲁巴',
+      pinyin: 'E'
+    },
+    {
+      code: '+355',
+      name: '阿尔巴尼亚',
+      pinyin: 'E'
+    },
+    {
+      code: '+593',
+      name: '厄瓜多尔',
+      pinyin: 'E'
+    },
+    {
+      code: '+968',
+      name: '阿曼',
+      pinyin: 'E'
+    },
+    {
+      code: '+971',
+      name: '阿联酋',
+      pinyin: 'E'
+    },
+    {
+      code: '+994',
+      name: '阿塞拜疆',
+      pinyin: 'E'
+    },
+    {
+      code: '+54',
+      name: '阿根廷',
+      pinyin: 'E'
+    },
+    {
+      code: '+93',
+      name: '阿富汗',
+      pinyin: 'E'
+    }
+  ],
+  F: [
+    {
+      code: '+238',
+      name: '佛得角',
+      pinyin: 'F'
+    },
+    {
+      code: '+298',
+      name: '法罗群岛',
+      pinyin: 'F'
+    },
+    {
+      code: '+358',
+      name: '芬兰',
+      pinyin: 'F'
+    },
+    {
+      code: '+379',
+      name: '梵蒂冈',
+      pinyin: 'F'
+    },
+    {
+      code: '+500',
+      name: '福克兰群岛和 南乔治亚和南桑威奇群岛',
+      pinyin: 'F'
+    },
+    {
+      code: '+594',
+      name: '法属圭亚那',
+      pinyin: 'F'
+    },
+    {
+      code: '+679',
+      name: '斐济',
+      pinyin: 'F'
+    },
+    {
+      code: '+689',
+      name: '法属玻里尼西亚',
+      pinyin: 'F'
+    },
+    {
+      code: '+33',
+      name: '法国',
+      pinyin: 'F'
+    },
+    {
+      code: '+63',
+      name: '菲律宾',
+      pinyin: 'F'
+    }
+  ],
+  G: [
+    {
+      code: '+1-473',
+      name: '格瑞那达',
+      pinyin: 'G'
+    },
+    {
+      code: '+220',
+      name: '冈比亚',
+      pinyin: 'G'
+    },
+    {
+      code: '+242',
+      name: '刚果（布）',
+      pinyin: 'G'
+    },
+    {
+      code: '+243',
+      name: '刚果（金）（即前 扎伊尔）',
+      pinyin: 'G'
+    },
+    {
+      code: '+299',
+      name: '格陵兰',
+      pinyin: 'G'
+    },
+    {
+      code: '+506',
+      name: '哥斯达黎加',
+      pinyin: 'G'
+    },
+    {
+      code: '+590',
+      name: '瓜德罗普',
+      pinyin: 'G'
+    },
+    {
+      code: '+592',
+      name: '圭亚那',
+      pinyin: 'G'
+    },
+    {
+      code: '+995',
+      name: '格鲁吉亚',
+      pinyin: 'G'
+    },
+    {
+      code: '+53',
+      name: '古巴',
+      pinyin: 'G'
+    },
+    {
+      code: '+57',
+      name: '哥伦比亚',
+      pinyin: 'G'
+    }
+  ],
+  H: [
+    {
+      code: '+504',
+      name: '洪都拉斯',
+      pinyin: 'H'
+    },
+    {
+      code: '+509',
+      name: '海地',
+      pinyin: 'H'
+    },
+    {
+      code: '+31',
+      name: '荷兰',
+      pinyin: 'H'
+    }
+  ],
+  J: [
+    {
+      code: '+224',
+      name: '几内亚',
+      pinyin: 'J'
+    },
+    {
+      code: '+233',
+      name: '加纳',
+      pinyin: 'J'
+    },
+    {
+      code: '+241',
+      name: '加彭',
+      pinyin: 'J'
+    },
+    {
+      code: '+245',
+      name: '几内亚比绍',
+      pinyin: 'J'
+    },
+    {
+      code: '+253',
+      name: '吉布提',
+      pinyin: 'J'
+    },
+    {
+      code: '+420',
+      name: '捷克',
+      pinyin: 'J'
+    },
+    {
+      code: '+686',
+      name: '基里巴斯',
+      pinyin: 'J'
+    },
+    {
+      code: '+855',
+      name: '柬埔寨',
+      pinyin: 'J'
+    },
+    {
+      code: '+996',
+      name: '吉尔吉斯斯坦',
+      pinyin: 'J'
+    },
+    {
+      code: '+1',
+      name: '加拿大',
+      pinyin: 'J'
+    }
+  ],
+  K: [
+    {
+      code: '+1-345',
+      name: '开曼群岛',
+      pinyin: 'K'
+    },
+    {
+      code: '+225',
+      name: '科特迪瓦',
+      pinyin: 'K'
+    },
+    {
+      code: '+237',
+      name: '喀麦隆',
+      pinyin: 'K'
+    },
+    {
+      code: '+254',
+      name: '肯尼亚',
+      pinyin: 'K'
+    },
+    {
+      code: '+269',
+      name: '科摩罗',
+      pinyin: 'K'
+    },
+    {
+      code: '+383',
+      name: '科索沃',
+      pinyin: 'K'
+    },
+    {
+      code: '+385',
+      name: '克罗地亚',
+      pinyin: 'K'
+    },
+    {
+      code: '+682',
+      name: '库克群岛',
+      pinyin: 'K'
+    },
+    {
+      code: '+965',
+      name: '科威特',
+      pinyin: 'K'
+    },
+    {
+      code: '+974',
+      name: '卡塔尔',
+      pinyin: 'K'
+    }
+  ],
+  L: [
+    {
+      code: '+218',
+      name: '利比亚',
+      pinyin: 'L'
+    },
+    {
+      code: '+231',
+      name: '利比里亚',
+      pinyin: 'L'
+    },
+    {
+      code: '+250',
+      name: '卢旺达',
+      pinyin: 'L'
+    },
+    {
+      code: '+262',
+      name: '留尼汪和 马约特',
+      pinyin: 'L'
+    },
+    {
+      code: '+266',
+      name: '赖索托',
+      pinyin: 'L'
+    },
+    {
+      code: '+352',
+      name: '卢森堡',
+      pinyin: 'L'
+    },
+    {
+      code: '+370',
+      name: '立陶宛',
+      pinyin: 'L'
+    },
+    {
+      code: '+371',
+      name: '拉脱维亚',
+      pinyin: 'L'
+    },
+    {
+      code: '+423',
+      name: '列支敦斯登',
+      pinyin: 'L'
+    },
+    {
+      code: '+856',
+      name: '老挝',
+      pinyin: 'L'
+    },
+    {
+      code: '+961',
+      name: '黎巴嫩',
+      pinyin: 'L'
+    },
+    {
+      code: '+40',
+      name: '罗马尼亚',
+      pinyin: 'L'
+    }
+  ],
+  M: [
+    {
+      code: '+1-664',
+      name: '蒙特塞拉特',
+      pinyin: 'M'
+    },
+    {
+      code: '+212',
+      name: '摩洛哥',
+      pinyin: 'M'
+    },
+    {
+      code: '+222',
+      name: '毛里塔尼亚',
+      pinyin: 'M'
+    },
+    {
+      code: '+223',
+      name: '马里',
+      pinyin: 'M'
+    },
+    {
+      code: '+230',
+      name: '模里西斯',
+      pinyin: 'M'
+    },
+    {
+      code: '+258',
+      name: '莫桑比克',
+      pinyin: 'M'
+    },
+    {
+      code: '+261',
+      name: '马达加斯加',
+      pinyin: 'M'
+    },
+    {
+      code: '+265',
+      name: '马拉维',
+      pinyin: 'M'
+    },
+    {
+      code: '+356',
+      name: '马尔他',
+      pinyin: 'M'
+    },
+    {
+      code: '+373',
+      name: '摩尔多瓦',
+      pinyin: 'M'
+    },
+    {
+      code: '+377',
+      name: '摩纳哥',
+      pinyin: 'M'
+    },
+    {
+      code: '+382',
+      name: '蒙特内哥罗',
+      pinyin: 'M'
+    },
+    {
+      code: '+596',
+      name: '马提尼克',
+      pinyin: 'M'
+    },
+    {
+      code: '+691',
+      name: '密克罗尼西亚联邦',
+      pinyin: 'M'
+    },
+    {
+      code: '+692',
+      name: '马绍尔群岛',
+      pinyin: 'M'
+    },
+    {
+      code: '+880',
+      name: '孟加拉国 孟加拉国',
+      pinyin: 'M'
+    },
+    {
+      code: '+960',
+      name: '马尔地夫',
+      pinyin: 'M'
+    },
+    {
+      code: '+976',
+      name: '蒙古国',
+      pinyin: 'M'
+    },
+    {
+      code: '+51',
+      name: '秘鲁',
+      pinyin: 'M'
+    },
+    {
+      code: '+52',
+      name: '墨西哥',
+      pinyin: 'M'
+    },
+    {
+      code: '+95',
+      name: '缅甸',
+      pinyin: 'M'
+    },
+    {
+      code: '+1',
+      name: '美国',
+      pinyin: 'M'
+    }
+  ],
+  N: [
+    {
+      code: '+211',
+      name: '南苏丹',
+      pinyin: 'N'
+    },
+    {
+      code: '+227',
+      name: '尼日尔',
+      pinyin: 'N'
+    },
+    {
+      code: '+234',
+      name: '奈及利亚',
+      pinyin: 'N'
+    },
+    {
+      code: '+264',
+      name: '纳米比亚',
+      pinyin: 'N'
+    },
+    {
+      code: '+505',
+      name: '尼加拉瓜',
+      pinyin: 'N'
+    },
+    {
+      code: '+674',
+      name: '瑙鲁',
+      pinyin: 'N'
+    },
+    {
+      code: '+683',
+      name: '纽埃',
+      pinyin: 'N'
+    },
+    {
+      code: '+977',
+      name: '尼泊尔',
+      pinyin: 'N'
+    },
+    {
+      code: '+27',
+      name: '南非',
+      pinyin: 'N'
+    },
+    {
+      code: '+47',
+      name: '挪威',
+      pinyin: 'N'
+    }
+  ],
+  P: [
+    {
+      code: '+351',
+      name: '葡萄牙',
+      pinyin: 'P'
+    }
+  ],
+  R: [
+    {
+      code: '+41',
+      name: '瑞士',
+      pinyin: 'R'
+    },
+    {
+      code: '+46',
+      name: '瑞典',
+      pinyin: 'R'
+    },
+    {
+      code: '+81',
+      name: '日本',
+      pinyin: 'R'
+    }
+  ],
+  S: [
+    {
+      code: '+1-721',
+      name: '圣马丁',
+      pinyin: 'S'
+    },
+    {
+      code: '+1-758',
+      name: '圣卢西亚',
+      pinyin: 'S'
+    },
+    {
+      code: '+1-784',
+      name: '圣文森特和格林纳丁斯',
+      pinyin: 'S'
+    },
+    {
+      code: '+221',
+      name: '塞内加尔',
+      pinyin: 'S'
+    },
+    {
+      code: '+232',
+      name: '塞拉利昂',
+      pinyin: 'S'
+    },
+    {
+      code: '+239',
+      name: '圣多美和普林西比',
+      pinyin: 'S'
+    },
+    {
+      code: '+248',
+      name: '塞舌尔',
+      pinyin: 'S'
+    },
+    {
+      code: '+249',
+      name: '苏丹',
+      pinyin: 'S'
+    },
+    {
+      code: '+252',
+      name: '索马利亚',
+      pinyin: 'S'
+    },
+    {
+      code: '+259',
+      name: '桑给巴尔，但从未使用',
+      pinyin: 'S'
+    },
+    {
+      code: '+260',
+      name: '尚比亚',
+      pinyin: 'S'
+    },
+    {
+      code: '+268',
+      name: '斯威士兰',
+      pinyin: 'S'
+    },
+    {
+      code: '+290',
+      name: '圣赫勒拿 和 特里斯坦-达库尼亚',
+      pinyin: 'S'
+    },
+    {
+      code: '+357',
+      name: '赛普勒斯',
+      pinyin: 'S'
+    },
+    {
+      code: '+378',
+      name: '圣马力诺',
+      pinyin: 'S'
+    },
+    {
+      code: '+381',
+      name: '塞尔维亚',
+      pinyin: 'S'
+    },
+    {
+      code: '+386',
+      name: '斯洛维尼亚',
+      pinyin: 'S'
+    },
+    {
+      code: '+421',
+      name: '斯洛伐克',
+      pinyin: 'S'
+    },
+    {
+      code: '+503',
+      name: '萨尔瓦多',
+      pinyin: 'S'
+    },
+    {
+      code: '+508',
+      name: '圣皮埃尔和密克隆',
+      pinyin: 'S'
+    },
+    {
+      code: '+597',
+      name: '苏里南',
+      pinyin: 'S'
+    },
+    {
+      code: '+677',
+      name: '所罗门群岛',
+      pinyin: 'S'
+    },
+    {
+      code: '+685',
+      name: '萨摩亚',
+      pinyin: 'S'
+    },
+    {
+      code: '+966',
+      name: '沙乌地阿拉伯',
+      pinyin: 'S'
+    },
+    {
+      code: '+94',
+      name: '斯里兰卡',
+      pinyin: 'S'
+    }
+  ],
+  T: [
+    {
+      code: '+1-649',
+      name: '特克斯和凯科斯群岛',
+      pinyin: 'T'
+    },
+    {
+      code: '+216',
+      name: '突尼西亚',
+      pinyin: 'T'
+    },
+    {
+      code: '+255',
+      name: '坦桑尼亚',
+      pinyin: 'T'
+    },
+    {
+      code: '+676',
+      name: '汤加',
+      pinyin: 'T'
+    },
+    {
+      code: '+688',
+      name: '图瓦卢',
+      pinyin: 'T'
+    },
+    {
+      code: '+690',
+      name: '托克劳',
+      pinyin: 'T'
+    },
+    {
+      code: '+992',
+      name: '塔吉克斯坦',
+      pinyin: 'T'
+    },
+    {
+      code: '+993',
+      name: '土库曼斯坦',
+      pinyin: 'T'
+    },
+    {
+      code: '+66',
+      name: '泰国',
+      pinyin: 'T'
+    },
+    {
+      code: '+90',
+      name: '土耳其',
+      pinyin: 'T'
+    }
+  ],
+  W: [
+    {
+      code: '+256',
+      name: '乌干达',
+      pinyin: 'W'
+    },
+    {
+      code: '+380',
+      name: '乌克兰',
+      pinyin: 'W'
+    },
+    {
+      code: '+502',
+      name: '危地马拉',
+      pinyin: 'W'
+    },
+    {
+      code: '+673',
+      name: '文莱',
+      pinyin: 'W'
+    },
+    {
+      code: '+678',
+      name: '瓦努阿图',
+      pinyin: 'W'
+    },
+    {
+      code: '+681',
+      name: '瓦利斯和富图纳',
+      pinyin: 'W'
+    },
+    {
+      code: '+998',
+      name: '乌兹别克斯坦',
+      pinyin: 'W'
+    },
+    {
+      code: '+58',
+      name: '委内瑞拉',
+      pinyin: 'W'
+    }
+  ],
+  X: [
+    {
+      code: '+210',
+      name: '西撒哈拉',
+      pinyin: 'X'
+    },
+    {
+      code: '+263',
+      name: '辛巴威',
+      pinyin: 'X'
+    },
+    {
+      code: '+687',
+      name: '新喀里多尼亚',
+      pinyin: 'X'
+    },
+    {
+      code: '+852',
+      name: '香港',
+      pinyin: 'X'
+    },
+    {
+      code: '+963',
+      name: '叙利亚',
+      pinyin: 'X'
+    },
+    {
+      code: '+30',
+      name: '希腊',
+      pinyin: 'X'
+    },
+    {
+      code: '+34',
+      name: '西班牙',
+      pinyin: 'X'
+    },
+    {
+      code: '+36',
+      name: '匈牙利',
+      pinyin: 'X'
+    },
+    {
+      code: '+64',
+      name: '新西兰',
+      pinyin: 'X'
+    },
+    {
+      code: '+65',
+      name: '新加坡',
+      pinyin: 'X'
+    }
+  ],
+  Y: [
+    {
+      code: '+1-284',
+      name: '英属维尔京群岛',
+      pinyin: 'Y'
+    },
+    {
+      code: '+246',
+      name: '英属印度洋领地',
+      pinyin: 'Y'
+    },
+    {
+      code: '+251',
+      name: '衣索比亚',
+      pinyin: 'Y'
+    },
+    {
+      code: '+374',
+      name: '亚美尼亚',
+      pinyin: 'Y'
+    },
+    {
+      code: '+962',
+      name: '约旦',
+      pinyin: 'Y'
+    },
+    {
+      code: '+964',
+      name: '伊拉克',
+      pinyin: 'Y'
+    },
+    {
+      code: '+967',
+      name: '叶门',
+      pinyin: 'Y'
+    },
+    {
+      code: '+972',
+      name: '以色列',
+      pinyin: 'Y'
+    },
+    {
+      code: '+39',
+      name: '义大利',
+      pinyin: 'Y'
+    },
+    {
+      code: '+44',
+      name: '英国',
+      pinyin: 'Y'
+    },
+    {
+      code: '+62',
+      name: '印尼',
+      pinyin: 'Y'
+    },
+    {
+      code: '+84',
+      name: '越南',
+      pinyin: 'Y'
+    },
+    {
+      code: '+91',
+      name: '印度',
+      pinyin: 'Y'
+    },
+    {
+      code: '+98',
+      name: '伊朗',
+      pinyin: 'Y'
+    }
+  ],
+  Z: [
+    {
+      code: '+235',
+      name: '乍得',
+      pinyin: 'Z'
+    },
+    {
+      code: '+236',
+      name: '中非',
+      pinyin: 'Z'
+    },
+    {
+      code: '+350',
+      name: '直布罗陀',
+      pinyin: 'Z'
+    },
+    {
+      code: '+850',
+      name: '朝鲜民主主义人民共和国',
+      pinyin: 'Z'
+    },
+    {
+      code: '+886',
+      name: '中华民国',
+      pinyin: 'Z'
+    },
+    {
+      code: '+56',
+      name: '智利',
+      pinyin: 'Z'
+    },
+    {
+      code: '+86',
+      name: '中国',
+      pinyin: 'Z'
+    }
+  ]
+})
+
+async function save() {
+  _showLoading()
+  store.userinfo = { ...store.userinfo, ...{ location: '暂不设置' } }
+  await _sleep(500)
+  _hideLoading()
+  router.back()
 }
 </script>
 
 <style scoped lang="less">
-@import '../../../assets/less/index';
+@import '@/assets/less/index';
 
 .choose-location {
   position: fixed;
diff --git a/src/pages/me/userinfo/ChooseProvince.vue b/src/pages/me/userinfo/ChooseProvince.vue
index 1da6f5afb..8b2ec0d0c 100644
--- a/src/pages/me/userinfo/ChooseProvince.vue
+++ b/src/pages/me/userinfo/ChooseProvince.vue
@@ -7,7 +7,7 @@
     </BaseHeader>
     <div class="content">
       <div class="schools">
-        <div class="row" @click="$nav('/me/choose-city')" :key="i" v-for="(item, i) in list">
+        <div class="row" @click="nav('/me/choose-city')" :key="i" v-for="(item, i) in list">
           <span>{{ item }}</span>
           <div class="right">
             <dy-back scale=".8" direction="right"></dy-back>
@@ -18,50 +18,51 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'ChooseProvince',
-  data() {
-    return {
-      list: [
-        '河北',
-        '山西',
-        '辽宁',
-        '吉林',
-        '黑龙江',
-        '江苏',
-        '浙江',
-        '安徽',
-        '福建',
-        '江西',
-        '山东',
-        '河南',
-        '湖北',
-        '湖南',
-        '广东',
-        '海南',
-        '四川',
-        '贵州',
-        '云南',
-        '陕西',
-        '甘肃',
-        '青海',
-        '台湾',
-        '内蒙古',
-        '广西',
-        '西藏',
-        '宁夏',
-        '新疆',
-        '北京',
-        '天津',
-        '上海',
-        '重庆',
-        '香港',
-        '澳门'
-      ]
-    }
-  }
-}
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useNav } from '@/utils/hooks/useNav.js'
+
+defineOptions({
+  name: 'ChooseProvince'
+})
+
+const nav = useNav()
+const list = ref([
+  '河北',
+  '山西',
+  '辽宁',
+  '吉林',
+  '黑龙江',
+  '江苏',
+  '浙江',
+  '安徽',
+  '福建',
+  '江西',
+  '山东',
+  '河南',
+  '湖北',
+  '湖南',
+  '广东',
+  '海南',
+  '四川',
+  '贵州',
+  '云南',
+  '陕西',
+  '甘肃',
+  '青海',
+  '台湾',
+  '内蒙古',
+  '广西',
+  '西藏',
+  '宁夏',
+  '新疆',
+  '北京',
+  '天津',
+  '上海',
+  '重庆',
+  '香港',
+  '澳门'
+])
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/me/userinfo/ChooseSchool.vue b/src/pages/me/userinfo/ChooseSchool.vue
index 894f9fbd8..ba3f0b9dc 100644
--- a/src/pages/me/userinfo/ChooseSchool.vue
+++ b/src/pages/me/userinfo/ChooseSchool.vue
@@ -5,45 +5,50 @@
         <span class="f16">添加学校</span>
       </template>
       <template v-slot:right>
-        <span class="f14" @click="$nav('/me/declare-school', { type: 1 })">没有找到?</span>
+        <span class="f14" @click="nav('/me/declare-school', { type: 1 })">没有找到?</span>
       </template>
       <template v-slot:bottom>
         <Search
           class="mt1r mb1r ml2r mr2r"
           placeholder="搜索大学名称"
-          v-model="schoolName"
-          @clear="isSearch = false"
+          v-model="data.schoolName"
+          @clear="data.isSearch = false"
           :is-show-right-text="true"
           @notice="search"
         ></Search>
       </template>
     </BaseHeader>
     <div class="content">
-      <div class="nearby" v-if="!isSearch">
+      <div class="nearby" v-if="!data.isSearch">
         <div class="title">
           <img src="../../../assets/img/icon/location.svg" alt="" />
           <span>离我最近</span>
         </div>
-        <template v-if="nearby.length">
-          <div class="item" :key="i" v-for="(item, i) in nearby" @click="setSchool(item)">
+        <template v-if="data.nearby.length">
+          <div class="item" :key="i" v-for="(item, i) in data.nearby" @click="setSchool(item)">
             {{ item }}
           </div>
         </template>
         <div v-else class="item">无法获取</div>
       </div>
       <div class="line" style="width: calc(100% - 40rem); margin-left: 20rem"></div>
-      <div class="schools" v-if="!isSearch">
-        <div class="item" :key="i" v-for="(item, i) in schools" @click="setSchool(item)">
+      <div class="schools" v-if="!data.isSearch">
+        <div class="item" :key="i" v-for="(item, i) in data.schools" @click="setSchool(item)">
           {{ item }}
         </div>
       </div>
-      <div v-if="isSearch">
-        <template v-if="searchSchools.length">
-          <div class="item" :key="i" v-for="(item, i) in searchSchools" @click="setSchool(item)">
-            <span v-if="item.indexOf(schoolName) > -1">
-              {{ item.substr(0, item.indexOf(schoolName)) }}
-              <span style="color: #f50">{{ schoolName }}</span>
-              {{ item.substr(item.indexOf(schoolName) + schoolName.length) }}
+      <div v-if="data.isSearch">
+        <template v-if="data.searchSchools.length">
+          <div
+            class="item"
+            :key="i"
+            v-for="(item, i) in data.searchSchools"
+            @click="setSchool(item)"
+          >
+            <span v-if="item.indexOf(data.schoolName) > -1">
+              {{ item.substr(0, item.indexOf(data.schoolName)) }}
+              <span style="color: #f50">{{ data.schoolName }}</span>
+              {{ item.substr(item.indexOf(data.schoolName) + data.schoolName.length) }}
             </span>
             <span v-else>{{ item }}</span>
           </div>
@@ -52,48 +57,50 @@
           <img src="../../../assets/img/icon/head-image.jpeg" alt="" />
           <div class="title">搜索结果为空</div>
           <div class="sub-title">没有搜索到相关的内容</div>
-          <div class="btn" @click="$nav('/me/declare-school')">没有学校信息？去申报</div>
+          <div class="btn" @click="nav('/me/declare-school')">没有学校信息？去申报</div>
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<script>
-import Search from '../../../components/Search'
-
-export default {
-  name: 'ChooseSchool',
-  components: {
-    Search
-  },
-  data() {
-    return {
-      isSearch: false,
-      nearby: [],
-      schools: [],
-      searchSchools: [],
-      schoolName: ''
-    }
-  },
-  created() {
-    for (let i = 0; i < 20; i++) {
-      this.nearby.push('附近大学' + i)
-      this.schools.push('所有大学' + i)
-    }
-  },
-  methods: {
-    setSchool(val) {
-      localStorage.setItem('changeSchool', val)
-      this.$back()
-    },
-    search() {
-      if (!this.schoolName.length) return (this.isSearch = false)
-      this.isSearch = true
-      let all = this.nearby.concat(this.schools)
-      this.searchSchools = all.filter((v) => v.includes(this.schoolName))
-    }
+<script setup lang="ts">
+import Search from '../../../components/Search.vue'
+import { onMounted, reactive } from 'vue'
+import { useNav } from '@/utils/hooks/useNav.js'
+import { useRouter } from 'vue-router'
+
+defineOptions({
+  name: 'ChooseSchool'
+})
+
+const router = useRouter()
+const nav = useNav()
+const data = reactive({
+  isSearch: false,
+  nearby: [],
+  schools: [],
+  searchSchools: [],
+  schoolName: ''
+})
+
+onMounted(() => {
+  for (let i = 0; i < 20; i++) {
+    data.nearby.push('附近大学' + i)
+    data.schools.push('所有大学' + i)
   }
+})
+
+function setSchool(val) {
+  localStorage.setItem('changeSchool', val)
+  router.back()
+}
+
+function search() {
+  if (!data.schoolName.length) return (data.isSearch = false)
+  data.isSearch = true
+  let all = data.nearby.concat(data.schools)
+  data.searchSchools = all.filter((v) => v.includes(data.schoolName))
 }
 </script>
 
diff --git a/src/pages/me/userinfo/DeclareSchool.vue b/src/pages/me/userinfo/DeclareSchool.vue
index 11ec72e8b..75fa5ca58 100644
--- a/src/pages/me/userinfo/DeclareSchool.vue
+++ b/src/pages/me/userinfo/DeclareSchool.vue
@@ -8,13 +8,13 @@
     <div class="content">
       <div class="row">
         <div class="label">学校全称</div>
-        <input type="text" placeholder="请输入学校全称(必填)" v-model="form.name" />
+        <input type="text" placeholder="请输入学校全称(必填)" v-model="data.form.name" />
       </div>
-      <div class="row" v-if="type === 1">
+      <div class="row" v-if="data.type === 1">
         <div class="label">所在城市</div>
-        <input type="text" placeholder="请输入学校所在城市(必填)" v-model="form.location" />
+        <input type="text" placeholder="请输入学校所在城市(必填)" v-model="data.form.location" />
       </div>
-      <div class="department-row" v-if="type === 2">
+      <div class="department-row" v-if="data.type === 2">
         <div class="label">信息问题</div>
         <div class="right">
           <span>点击选择(必选)</span>
@@ -27,32 +27,37 @@
   </div>
 </template>
 
-<script>
-//TODO 院系点击那个弹窗没做
-export default {
-  name: 'DeclareSchool',
-  data() {
-    return {
-      form: {
-        name: '',
-        location: '',
-        departmentInfoType: ''
-      },
-      type: 1
-    }
-  },
-  created() {
-    this.type = Number(this.$route.query.type)
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { _notice } from '@/utils'
+
+defineOptions({
+  name: 'DeclareSchool'
+})
+
+const router = useRouter()
+const route = useRoute()
+const data = reactive({
+  form: {
+    name: '',
+    location: '',
+    departmentInfoType: ''
   },
-  methods: {
-    submit() {
-      if (!this.form.name) return this.$notice('请输入学校全称')
-      if (this.type === 1 && !this.form.location) return this.$notice('请输入学校所在城市')
-      if (this.type === 2 && !this.form.departmentInfoType) return this.$notice('请选择信息问题')
-      this.$notice('申报成功')
-      setTimeout(this.$back, 1000)
-    }
-  }
+  type: 1
+})
+
+//TODO 院系点击那个弹窗没做
+onMounted(() => {
+  data.type = Number(route.query.type)
+})
+
+function submit() {
+  if (!data.form.name) return _notice('请输入学校全称')
+  if (data.type === 1 && !data.form.location) return _notice('请输入学校所在城市')
+  if (data.type === 2 && !data.form.departmentInfoType) return _notice('请选择信息问题')
+  _notice('申报成功')
+  setTimeout(router.back, 1000)
 }
 </script>
 
diff --git a/src/pages/me/userinfo/DisplayType.vue b/src/pages/me/userinfo/DisplayType.vue
index ce0ec97c9..aa4cb31c3 100644
--- a/src/pages/me/userinfo/DisplayType.vue
+++ b/src/pages/me/userinfo/DisplayType.vue
@@ -8,46 +8,49 @@
     <div class="content">
       <div class="row" @click="setDisplayType(enums.DISPLAY_TYPE.ALL)">
         <div class="left">公开可见</div>
-        <div class="right" v-if="displayType === enums.DISPLAY_TYPE.ALL">
+        <div class="right" v-if="data.displayType === enums.DISPLAY_TYPE.ALL">
           <img src="../../../assets/img/icon/ok-red.png" alt="" />
         </div>
       </div>
       <div class="row" @click="setDisplayType(enums.DISPLAY_TYPE.SCHOOL)">
         <div class="left">校友可见</div>
-        <div class="right" v-if="displayType === enums.DISPLAY_TYPE.SCHOOL">
+        <div class="right" v-if="data.displayType === enums.DISPLAY_TYPE.SCHOOL">
           <img src="../../../assets/img/icon/ok-red.png" alt="" />
         </div>
       </div>
       <div class="row" @click="setDisplayType(enums.DISPLAY_TYPE.ME)">
         <div class="left">仅自己可见</div>
-        <div class="right" v-if="displayType === enums.DISPLAY_TYPE.ME">
+        <div class="right" v-if="data.displayType === enums.DISPLAY_TYPE.ME">
           <img src="../../../assets/img/icon/ok-red.png" alt="" />
         </div>
       </div>
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
 import enums from '../../../utils/enums'
 
-export default {
-  name: 'DisplayType',
-  data() {
-    return {
-      enums,
-      displayType: enums.DISPLAY_TYPE.ALL
-    }
-  },
-  created() {
-    this.displayType = ~~this.$route.query.displayType
-  },
-  methods: {
-    setDisplayType(type) {
-      this.displayType = type
-      localStorage.setItem('changeDisplayType', type)
-      this.$back()
-    }
-  }
+import { onMounted, reactive } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+defineOptions({
+  name: 'DisplayType'
+})
+
+const router = useRouter()
+const route = useRoute()
+const data = reactive({
+  displayType: enums.DISPLAY_TYPE.ALL
+})
+
+onMounted(() => {
+  data.displayType = ~~route.query.displayType
+})
+
+function setDisplayType(type) {
+  data.displayType = type
+  localStorage.setItem('changeDisplayType', type)
+  router.back()
 }
 </script>
 
diff --git a/src/pages/me/userinfo/EditUserInfo.vue b/src/pages/me/userinfo/EditUserInfo.vue
index e090d92c2..74a6b5815 100644
--- a/src/pages/me/userinfo/EditUserInfo.vue
+++ b/src/pages/me/userinfo/EditUserInfo.vue
@@ -11,29 +11,29 @@
     <div class="userinfo">
       <div class="change-avatar">
         <div class="avatar-ctn" @click="showAvatarDialog">
-          <img class="avatar" :src="_checkImgUrl(userinfo.cover_url[0].url_list[0])" alt="" />
+          <img class="avatar" :src="_checkImgUrl(store.userinfo.cover_url[0].url_list[0])" alt="" />
           <img class="change" src="../../../assets/img/icon/me/camera-light.png" alt="" />
         </div>
         <span>点击更换头像</span>
       </div>
-      <div class="row" @click="$nav('/me/edit-userinfo-item', { type: 1 })">
+      <div class="row" @click="nav('/me/edit-userinfo-item', { type: 1 })">
         <div class="left">名字</div>
         <div class="right">
-          <span>{{ isEmpty(userinfo.nickname) }}</span>
+          <span>{{ isEmpty(store.userinfo.nickname) }}</span>
           <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
-      <div class="row" @click="$nav('/me/edit-userinfo-item', { type: 2 })">
+      <div class="row" @click="nav('/me/edit-userinfo-item', { type: 2 })">
         <div class="left">抖音号</div>
         <div class="right">
-          <span>{{ isEmpty(_getUserDouyinId({ author: userinfo })) }}</span>
+          <span>{{ isEmpty(_getUserDouyinId({ author: store.userinfo })) }}</span>
           <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
-      <div class="row" @click="$nav('/me/edit-userinfo-item', { type: 3 })">
+      <div class="row" @click="nav('/me/edit-userinfo-item', { type: 3 })">
         <div class="left">简介</div>
         <div class="right">
-          <span>{{ isEmpty(userinfo.signature) }}</span>
+          <span>{{ isEmpty(store.userinfo.signature) }}</span>
           <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
@@ -47,143 +47,143 @@
       <div class="row" @click="showBirthdayDialog">
         <div class="left">生日</div>
         <div class="right">
-          <span>{{ isEmpty(userinfo.user_age) }}</span>
+          <span>{{ isEmpty(store.userinfo.user_age) }}</span>
           <div v-show="false" id="trigger1"></div>
           <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
-      <div class="row" @click="$nav('/me/choose-location')">
+      <div class="row" @click="nav('/me/choose-location')">
         <div class="left">所在地</div>
         <div class="right">
-          <span v-if="userinfo.province || userinfo.city">
-            {{ userinfo.province }}
-            <template v-if="userinfo.province && userinfo.city"> - </template>
-            {{ userinfo.city }}
+          <span v-if="store.userinfo.province || store.userinfo.city">
+            {{ store.userinfo.province }}
+            <template v-if="store.userinfo.province && store.userinfo.city"> - </template>
+            {{ store.userinfo.city }}
           </span>
           <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
-      <div class="row" @click="$nav('/me/add-school')">
+      <div class="row" @click="nav('/me/add-school')">
         <div class="left">学校</div>
         <div class="right">
-          <span>{{ isEmpty(userinfo.school?.name) }}</span>
+          <span>{{ isEmpty(store.userinfo.school?.name) }}</span>
           <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
     </div>
     <transition name="fade">
-      <div class="preview-img" v-if="previewImg" @click="previewImg = ''">
-        <img class="resource" :src="previewImg" alt="" />
+      <div class="preview-img" v-if="data.previewImg" @click="data.previewImg = ''">
+        <img class="resource" :src="data.previewImg" alt="" />
         <img
           class="download"
           src="../../../assets/img/icon/components/video/download.png"
           alt=""
-          @click.stop="$no"
+          @click.stop="_no"
         />
       </div>
     </transition>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import MobileSelect from '../../../components/mobile-select/mobile-select'
-import { mapState } from 'pinia'
 import { useBaseStore } from '@/store/pinia'
-import { _checkImgUrl, _getUserDouyinId } from '../../../utils'
+import {
+  _checkImgUrl,
+  _getUserDouyinId,
+  _hideLoading,
+  _no,
+  _showLoading,
+  _showSelectDialog,
+  _sleep
+} from '@/utils'
+import { computed, reactive } from 'vue'
+import { useNav } from '@/utils/hooks/useNav'
 
-export default {
-  name: 'EditUserInfo',
-  setup() {
-    const baseStore = useBaseStore()
-    return { baseStore }
-  },
-  components: {},
-  data() {
-    return {
-      sexList: [
-        { id: 1, name: '男' },
-        { id: 2, name: '女' },
-        { id: 3, name: '不展示' }
-      ],
-      avatarList: [
-        { id: 1, name: '拍一张' },
-        { id: 2, name: '从相册选择' },
-        { id: 3, name: '查看大图' },
-        { id: 4, name: '取消' }
-      ],
-      previewImg: ''
+defineOptions({
+  name: 'EditUserInfo'
+})
+const store = useBaseStore()
+const nav = useNav()
+const data = reactive({
+  sexList: [
+    { id: 1, name: '男' },
+    { id: 2, name: '女' },
+    { id: 3, name: '不展示' }
+  ],
+  avatarList: [
+    { id: 1, name: '拍一张' },
+    { id: 2, name: '从相册选择' },
+    { id: 3, name: '查看大图' },
+    { id: 4, name: '取消' }
+  ],
+  previewImg: ''
+})
+
+const sex = computed(() => {
+  switch (store.userinfo.gender) {
+    case 1:
+      return '男'
+    case 2:
+      return '女'
+    default:
+      return ''
+  }
+})
+
+function isEmpty(val) {
+  if (val && val !== -1) return val
+  return '点击设置'
+}
+
+function showSexDialog() {
+  _showSelectDialog(data.sexList, async (e) => {
+    _showLoading()
+    await _sleep(500)
+    store.setUserinfo({ ...store.userinfo, gender: e.id })
+    _hideLoading()
+  })
+}
+
+function showAvatarDialog() {
+  _showSelectDialog(data.avatarList, (e) => {
+    switch (e.id) {
+      case 1:
+      case 2:
+        return _no()
+      case 3:
+        data.previewImg = _checkImgUrl(store.userinfo.cover_url[0].url_list[0])
+        break
     }
-  },
-  computed: {
-    ...mapState(useBaseStore, ['userinfo']),
-    sex() {
-      switch (this.userinfo.gender) {
-        case 1:
-          return '男'
-        case 2:
-          return '女'
-        default:
-          return ''
+  })
+}
+
+function showBirthdayDialog() {
+  new MobileSelect({
+    trigger: '#trigger1',
+    title: '生日',
+    connector: '生日',
+    wheels: [
+      {
+        data: Array.apply(null, { length: 100 }).map((v, i) => new Date().getFullYear() - i)
+      },
+      {
+        data: Array.apply(null, { length: 12 }).map((v, i) => 12 - i)
+      },
+      {
+        data: Array.apply(null, { length: 31 }).map((v, i) => 31 - i)
       }
-    }
-  },
-  methods: {
-    _checkImgUrl,
-    _getUserDouyinId,
-    isEmpty(val) {
-      if (val && val !== -1) return val
-      return '点击设置'
-    },
-    showSexDialog() {
-      this.$showSelectDialog(this.sexList, async (e) => {
-        this.$showLoading()
-        await this.$sleep(500)
-        this.baseStore.setUserinfo({ ...this.userinfo, gender: e.id })
-        this.$hideLoading()
-      })
-    },
-    showAvatarDialog() {
-      this.$showSelectDialog(this.avatarList, (e) => {
-        switch (e.id) {
-          case 1:
-          case 2:
-            return this.$no()
-          case 3:
-            this.previewImg = _checkImgUrl(this.userinfo.cover_url[0].url_list[0])
-            break
-        }
+    ],
+    callback: async (indexArr, data) => {
+      _showLoading()
+      await _sleep(500)
+      store.setUserinfo({
+        ...store.userinfo,
+        birthday: data.join('-')
       })
-    },
-    showBirthdayDialog() {
-      new MobileSelect({
-        trigger: '#trigger1',
-        title: '生日',
-        connector: '生日',
-        wheels: [
-          {
-            data: Array.apply(null, { length: 100 }).map((v, i) => new Date().getFullYear() - i)
-          },
-          {
-            data: Array.apply(null, { length: 12 }).map((v, i) => 12 - i)
-          },
-          {
-            data: Array.apply(null, { length: 31 }).map((v, i) => 31 - i)
-          }
-        ],
-        callback: async (indexArr, data) => {
-          console.log(data)
-          this.$showLoading()
-          await this.$sleep(500)
-          this.baseStore.setUserinfo({
-            ...this.userinfo,
-            birthday: data.join('-')
-          })
-          this.$hideLoading()
-          // this.localSchool.joinTime = ~~data[0]
-        }
-      }).show()
+      _hideLoading()
     }
-  }
+  }).show()
 }
 </script>
 
diff --git a/src/pages/me/userinfo/EditUserInfoItem.vue b/src/pages/me/userinfo/EditUserInfoItem.vue
index 250bee3bd..474dc0f84 100644
--- a/src/pages/me/userinfo/EditUserInfoItem.vue
+++ b/src/pages/me/userinfo/EditUserInfoItem.vue
@@ -2,9 +2,9 @@
   <div class="edit-item">
     <BaseHeader @back="back">
       <template v-slot:center>
-        <span v-if="type === 1" class="f16">修改名字</span>
-        <span v-if="type === 2" class="f16">修改抖音号</span>
-        <span v-if="type === 3" class="f16">修改简介</span>
+        <span v-if="data.type === 1" class="f16">修改名字</span>
+        <span v-if="data.type === 2" class="f16">修改抖音号</span>
+        <span v-if="data.type === 3" class="f16">修改简介</span>
       </template>
       <template v-slot:right>
         <div>
@@ -14,37 +14,37 @@
     </BaseHeader>
 
     <div class="content">
-      <div v-if="type === 1">
+      <div v-if="data.type === 1">
         <div class="notice">我的名字</div>
         <div class="input-ctn" style="margin-bottom: 1rem">
-          <input type="text" v-model="localUserinfo.nickname" placeholder="记得填写名字哦" />
+          <input type="text" v-model="data.localUserinfo.nickname" placeholder="记得填写名字哦" />
           <img
-            v-if="localUserinfo.nickname"
+            v-if="data.localUserinfo.nickname"
             style="transform: scale(2)"
             class="close"
             src="../../../assets/img/icon/newicon/close-and-bg.png"
             alt=""
-            @click="localUserinfo.nickname = ''"
+            @click="data.localUserinfo.nickname = ''"
           />
         </div>
-        <div class="num">{{ localUserinfo.nickname.length }}/20</div>
+        <div class="num">{{ data.localUserinfo.nickname.length }}/20</div>
       </div>
-      <div class="l-row" v-if="type === 2">
+      <div class="l-row" v-if="data.type === 2">
         <div class="notice">我的抖音号</div>
         <div class="input-ctn" style="margin-bottom: 10rem">
-          <input type="text" v-model="localUserinfo.unique_id" />
+          <input type="text" v-model="data.localUserinfo.unique_id" />
           <img
-            v-if="localUserinfo.unique_id"
+            v-if="data.localUserinfo.unique_id"
             style="transform: scale(2)"
             class="close"
             src="../../../assets/img/icon/newicon/close-and-bg.png"
             alt=""
-            @click="localUserinfo.unique_id = ''"
+            @click="data.localUserinfo.unique_id = ''"
           />
         </div>
         <div class="num">最多16个字，只允许包含字母、数字、下划线和点，30天内仅能修改一次</div>
       </div>
-      <div class="l-row" v-if="type === 3">
+      <div class="l-row" v-if="data.type === 3">
         <div class="notice">个人简介</div>
         <div class="textarea-ctn">
           <textarea
@@ -52,7 +52,7 @@
             id=""
             cols="30"
             rows="10"
-            v-model="localUserinfo.signature"
+            v-model="data.localUserinfo.signature"
             placeholder="你可以填写兴趣爱好、心情愿望，有趣的介绍能让被关注的概率变高噢！"
           ></textarea>
         </div>
@@ -61,60 +61,68 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 //TODO 1、数据变了后，保存按钮变亮；2、数据变了，点返回，弹窗是否确认
 
-import { mapState } from 'pinia'
 import { useBaseStore } from '@/store/pinia'
-import { cloneDeep } from '@/utils'
-
-export default {
-  name: 'EditUserInfo',
-  setup() {
-    const baseStore = useBaseStore()
-    return { baseStore }
-  },
-  data() {
-    return {
-      type: 1,
-      localUserinfo: {}
-    }
-  },
-  computed: {
-    isChanged() {
-      if (this.type === 1) if (!this.localUserinfo.nickname) return false
-      if (this.type === 2) if (!this.localUserinfo.desc) return false
-      if (this.userinfo.nickname !== this.localUserinfo.nickname) return true
-      if (this.userinfo.desc !== this.localUserinfo.desc) return true
-      return this.userinfo.unique_id !== this.localUserinfo.unique_id
-    },
-    ...mapState(useBaseStore, ['userinfo'])
-  },
-  created() {
-    this.localUserinfo = cloneDeep(this.userinfo)
-    this.type = Number(this.$route.query.type)
-  },
-  methods: {
-    back() {
-      if (this.isChanged) {
-        this.$showSimpleConfirmDialog('是否保存修改', this.save, this.$back)
-      } else {
-        this.$back()
-      }
-    },
-    async save() {
-      if (!this.isChanged) return
-      if (this.type === 1) {
-        if (!this.localUserinfo.nickname) return this.$notice('名字不能为空')
-      }
-      this.$showLoading()
-      this.baseStore.setUserinfo(this.localUserinfo)
-      await this.$sleep(500)
-      this.$hideLoading()
-      this.$back()
-      if (this.type === 3) return this.$notice('新签名保存成功')
-    }
+import {
+  _hideLoading,
+  _notice,
+  _showLoading,
+  _showSimpleConfirmDialog,
+  _sleep,
+  cloneDeep
+} from '@/utils'
+import { computed, onMounted, reactive } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+defineOptions({
+  name: 'EditUserInfo'
+})
+const store = useBaseStore()
+const router = useRouter()
+const route = useRoute()
+const data = reactive({
+  type: 1,
+  localUserinfo: {
+    nickname: '',
+    signature: '',
+    unique_id: '',
+    desc: ''
+  }
+})
+const isChanged = computed(() => {
+  if (data.type === 1) if (!data.localUserinfo.nickname) return false
+  if (data.type === 2) if (!data.localUserinfo.desc) return false
+  if (store.userinfo.nickname !== data.localUserinfo.nickname) return true
+  if (store.userinfo.desc !== data.localUserinfo.desc) return true
+  return store.userinfo.unique_id !== data.localUserinfo.unique_id
+})
+
+onMounted(() => {
+  data.localUserinfo = cloneDeep(store.userinfo)
+  data.type = Number(route.query.type)
+})
+
+function back() {
+  if (isChanged.value) {
+    _showSimpleConfirmDialog('是否保存修改', save, router.back)
+  } else {
+    router.back()
+  }
+}
+
+async function save() {
+  if (!isChanged.value) return
+  if (data.type === 1) {
+    if (!data.localUserinfo.nickname) return _notice('名字不能为空')
   }
+  _showLoading()
+  store.setUserinfo(data.localUserinfo)
+  await _sleep(500)
+  _hideLoading()
+  router.back()
+  if (data.type === 3) return _notice('新签名保存成功')
 }
 </script>
 
diff --git a/src/pages/message/AllMessage.vue b/src/pages/message/AllMessage.vue
index 2a1623816..88812f574 100644
--- a/src/pages/message/AllMessage.vue
+++ b/src/pages/message/AllMessage.vue
@@ -2,61 +2,65 @@
   <div id="AllMessage">
     <BaseHeader>
       <template v-slot:center>
-        <div class="center" @click="isShowType = !isShowType">
+        <div class="center" @click="data.isShowType = !data.isShowType">
           <span class="f16">{{ showTypeText }}</span>
           <img
-            :class="{ show: isShowType }"
-            src="../../assets/img/icon/arrow-up-white.png"
+            :class="{ show: data.isShowType }"
+            src="@/assets/img/icon/arrow-up-white.png"
             alt=""
           />
         </div>
       </template>
     </BaseHeader>
     <transition name="fade">
-      <div class="type-dialog" v-if="isShowType">
+      <div class="type-dialog" v-if="data.isShowType">
         <div class="dialog-content">
           <div class="row" @click="toggleShowType(1)">
             <div class="left">
-              <img src="../../assets/img/icon/message/done-gray.png" alt="" />
+              <img src="@/assets/img/icon/message/done-gray.png" alt="" />
               <span>全部消息</span>
             </div>
           </div>
           <div class="row" @click="toggleShowType(2)">
             <div class="left">
-              <img src="../../assets/img/icon/message/like-gray.png" alt="" />
+              <img src="@/assets/img/icon/message/like-gray.png" alt="" />
               <span>赞</span>
             </div>
           </div>
           <div class="row" @click="toggleShowType(3)">
             <div class="left">
-              <img src="../../assets/img/icon/message/call-gray.png" alt="" />
+              <img src="@/assets/img/icon/message/call-gray.png" alt="" />
               <span>@我的</span>
             </div>
           </div>
           <div class="row" @click="toggleShowType(4)">
             <div class="left">
-              <img src="../../assets/img/icon/message/comment-gray.png" alt="" />
+              <img src="@/assets/img/icon/message/comment-gray.png" alt="" />
               <span>评论</span>
             </div>
           </div>
         </div>
-        <div class="mask" @click="isShowType = false"></div>
+        <div class="mask" @click="data.isShowType = false"></div>
       </div>
     </transition>
     <div class="content">
-      <Loading v-if="loading" />
+      <Loading v-if="data.loading" />
       <Scroll
         v-else
         ref="mainScroll"
         :use-refresh="true"
-        :loading="loadingMore"
+        :loading="data.loadingMore"
         @refresh="refresh"
         @pulldown="loadData"
       >
         <div class="messages">
-          <div class="message" @click="$nav('/message/visitors')">
+          <div class="message" @click="nav('/message/visitors')">
             <div class="left">
-              <img v-lazy="_checkImgUrl(userinfo.cover_url[0].url_list[0])" alt="" class="avatar" />
+              <img
+                v-lazy="_checkImgUrl(store.userinfo.cover_url[0].url_list[0])"
+                alt=""
+                class="avatar"
+              />
             </div>
             <div class="right">
               <div class="desc">
@@ -68,27 +72,31 @@
                   <div class="time">01-11</div>
                 </div>
               </div>
-              <img v-lazy="_checkImgUrl(userinfo.cover_url[0].url_list[0])" alt="" class="poster" />
+              <img
+                v-lazy="_checkImgUrl(store.userinfo.cover_url[0].url_list[0])"
+                alt=""
+                class="poster"
+              />
             </div>
           </div>
-          <div class="message" :key="i" v-for="(item, i) in showMessageList" @click="$no">
+          <div class="message" :key="i" v-for="(item, i) in showMessageList" @click="_no">
             <div class="left">
-              <img v-lazy="$imgPreview(item.author.avatar)" alt="" class="avatar" />
+              <img v-lazy="_checkImgUrl(item.author.avatar)" alt="" class="avatar" />
               <img
-                v-if="selectShowType === 2"
-                src="../../assets/img/icon/message/love-message.webp"
+                v-if="data.selectShowType === 2"
+                src="@/assets/img/icon/message/love-message.webp"
                 alt=""
                 class="type"
               />
               <img
-                v-if="selectShowType === 3"
-                src="../../assets/img/icon/message/call-message.webp"
+                v-if="data.selectShowType === 3"
+                src="@/assets/img/icon/message/call-message.webp"
                 alt=""
                 class="type"
               />
               <img
-                v-if="selectShowType === 4"
-                src="../../assets/img/icon/message/comment-message.webp"
+                v-if="data.selectShowType === 4"
+                src="@/assets/img/icon/message/comment-message.webp"
                 alt=""
                 class="type"
               />
@@ -100,130 +108,130 @@
                   <div class="tag">朋友</div>
                 </div>
                 <div class="desc-content">
-                  <span v-if="selectShowType === 1">好好看啊</span>
-                  <span v-if="selectShowType === 2">赞了你的作品</span>
-                  <span v-if="selectShowType === 3">@{{ userinfo.nickname }}</span>
-                  <span v-if="selectShowType === 4">好好看啊</span>
+                  <span v-if="data.selectShowType === 1">好好看啊</span>
+                  <span v-if="data.selectShowType === 2">赞了你的作品</span>
+                  <span v-if="data.selectShowType === 3">@{{ store.userinfo.nickname }}</span>
+                  <span v-if="data.selectShowType === 4">好好看啊</span>
                 </div>
                 <div class="bottom">
-                  <div class="type" v-if="selectShowType === 3">在评论中提到了你</div>
-                  <div class="type" v-if="selectShowType === 4">回复了你的评论</div>
+                  <div class="type" v-if="data.selectShowType === 3">在评论中提到了你</div>
+                  <div class="type" v-if="data.selectShowType === 4">回复了你的评论</div>
                   <div class="time">01-11</div>
                 </div>
               </div>
               <img
-                v-lazy="$imgPreview(item.video + '?vframe/jpg/offset/0/w/300')"
+                v-lazy="_checkImgUrl(item.video + '?vframe/jpg/offset/0/w/300')"
                 alt=""
                 class="poster"
               />
             </div>
           </div>
-          <div class="look-all" v-if="!showAll" @click="showAll = true">
+          <div class="look-all" v-if="!data.showAll" @click="data.showAll = true">
             <span>查看全部</span>
             <dy-back />
           </div>
         </div>
         <div class="title">
           <span>朋友推荐</span>
-          <img src="../../assets/img/icon/about-gray.png" alt="" />
+          <img src="@/assets/img/icon/about-gray.png" alt="" />
         </div>
-        <Peoples v-model:list="recommend" :loading="loadingMore" mode="recommend" />
+        <Peoples v-model:list="data.recommend" :loading="data.loadingMore" mode="recommend" />
       </Scroll>
     </div>
   </div>
 </template>
-<script>
-import { mapState } from 'pinia'
-import Scroll from '../../components/Scroll'
-import Loading from '../../components/Loading'
-import Peoples from '../people/components/Peoples'
-import resource from '../../assets/data/resource.js'
-import BasePage from '../BasePage'
+<script setup lang="ts">
+import Scroll from '@/components/Scroll.vue'
+import Loading from '@/components/Loading.vue'
+import Peoples from '../people/components/Peoples.vue'
+import resource from '@/assets/data/resource.js'
 import { useBaseStore } from '@/store/pinia'
-import { _checkImgUrl } from '@/utils'
-
-export default {
-  extends: BasePage,
-  name: 'AllMessage',
-  components: {
-    Scroll,
-    Loading,
-    Peoples
-  },
-  data() {
-    return {
-      loading: false,
-      loadingMore: false,
-      isShowType: false,
-      showAll: false,
-      recommend: [],
-      messages: [],
-      selectShowType: 1
-    }
-  },
-  computed: {
-    ...mapState(useBaseStore, ['friends', 'userinfo']),
-    showTypeText() {
-      switch (this.selectShowType) {
-        case 1:
-          return '全部消息'
-        case 2:
-          return '赞'
-        case 3:
-          return '@我的'
-        case 4:
-          return '评论'
-        default:
-          return ''
-      }
-    },
-    showMessageList() {
-      if (this.showAll) {
-        return this.messages
-      }
-      return this.messages.slice(0, 2)
-    }
-  },
-  created() {
-    this.getData()
-  },
-  methods: {
-    _checkImgUrl,
-    async getData() {
-      this.loading = true
-      await this.$sleep(800)
-      this.loading = false
-      this.recommend = this.$clone(this.friends.all)
-      this.fans = this.$clone(this.friends.all)
-      this.recommend.map((v) => {
-        v.type = -1
-      })
-      this.messages = this.$clone(resource.videos)
-    },
-    toggleShowType(index) {
-      this.selectShowType = index
-      this.isShowType = false
-    },
-    remove(index) {
-      this.$notice('将不会再为你推荐该用户')
-      this.recommend.splice(index, 1)
-    },
-    async refresh() {
-      await this.$sleep(1000)
-      this.$refs.mainScroll.refreshEnd()
-    },
-    async loadData() {
-      if (this.loadingMore) return
-      this.loadingMore = true
-      await this.$sleep(500)
-      this.loadingMore = false
-      let temp = this.$clone(this.friends.all)
-      temp.map((v) => {
-        v.type = -1
-      })
-      this.recommend = this.recommend.concat(temp)
-    }
+import { _checkImgUrl, _no, _notice, _sleep, cloneDeep } from '@/utils'
+
+import { computed, onMounted, reactive } from 'vue'
+import { useNav } from '@/utils/hooks/useNav.js'
+
+defineOptions({
+  name: 'AllMessage'
+})
+
+const store = useBaseStore()
+const nav = useNav()
+const data = reactive({
+  loading: false,
+  loadingMore: false,
+  isShowType: false,
+  showAll: false,
+  recommend: [],
+  fans: [],
+  messages: [],
+  selectShowType: 1
+})
+
+onMounted(() => {
+  getData()
+})
+
+const showTypeText = computed(() => {
+  switch (data.selectShowType) {
+    case 1:
+      return '全部消息'
+    case 2:
+      return '赞'
+    case 3:
+      return '@我的'
+    case 4:
+      return '评论'
+    default:
+      return ''
   }
+})
+
+const showMessageList = computed(() => {
+  if (data.showAll) {
+    return data.messages
+  }
+  return data.messages.slice(0, 2)
+})
+
+async function getData() {
+  data.loading = true
+  await _sleep(800)
+  data.loading = false
+  data.recommend = cloneDeep(store.friends.all)
+  data.fans = cloneDeep(store.friends.all)
+  data.recommend.map((v) => {
+    v.type = -1
+  })
+  data.messages = cloneDeep(resource.videos)
+}
+
+function toggleShowType(index) {
+  data.selectShowType = index
+  data.isShowType = false
+}
+
+// function remove(index) {
+//   _notice('将不会再为你推荐该用户')
+//   data.recommend.splice(index, 1)
+// }
+
+async function refresh() {
+  await _sleep(1000)
+  //TODO
+  // data.$refs.mainScroll.refreshEnd()
+}
+
+async function loadData() {
+  if (data.loadingMore) return
+  data.loadingMore = true
+  await _sleep(500)
+  data.loadingMore = false
+  let temp = cloneDeep(store.friends.all)
+  temp.map((v) => {
+    v.type = -1
+  })
+  data.recommend = data.recommend.concat(temp)
 }
 </script>
 
diff --git a/src/pages/message/JoinedGroupChat.vue b/src/pages/message/JoinedGroupChat.vue
index 50812cb7d..526faab8b 100644
--- a/src/pages/message/JoinedGroupChat.vue
+++ b/src/pages/message/JoinedGroupChat.vue
@@ -6,8 +6,12 @@
       </template>
       <template v-slot:right>
         <div>
-          <span class="f16" :class="selectFriends.length ? 'save-yes' : 'save-no'" @click="save">
-            完成{{ selectFriends.length ? `(${selectFriends.length})` : '' }}
+          <span
+            class="f16"
+            :class="data.selectFriends.length ? 'save-yes' : 'save-no'"
+            @click="save"
+          >
+            完成{{ data.selectFriends.length ? `(${data.selectFriends.length})` : '' }}
           </span>
         </div>
       </template>
@@ -17,11 +21,11 @@
         <div
           class="local-row"
           :key="i"
-          v-for="(item, i) of friends.all"
+          v-for="(item, i) of data.friends.all"
           @click="toggleSelect(item)"
         >
           <Check mode="red" v-model="item.select" />
-          <img :src="$imgPreview(item.avatar)" alt="" />
+          <img :src="_checkImgUrl(item.avatar)" alt="" />
           <div class="desc">
             <span class="name">{{
               item.name.length > 20 ? item.name.substr(0, 20) + '...' : item.name
@@ -34,62 +38,63 @@
     </div>
   </div>
 </template>
-<script>
-import Check from '../../components/Check'
+<script setup lang="ts">
+import Check from '../../components/Check.vue'
 import { friends } from '@/api/user'
 
-export default {
-  name: 'Share2Friend',
-  components: { Check },
-  props: {},
-  computed: {
-    // ...mapState(['friends']),
-  },
-  data() {
-    return {
-      friends: {
-        all: {},
-        recent: [],
-        eachOther: []
-      },
-      selectFriends: []
-    }
-  },
-  created() {
-    this.getFriends()
+import { onMounted, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { _checkImgUrl } from '@/utils'
+
+defineOptions({
+  name: 'JoinedGroupChat'
+})
+
+const router = useRouter()
+const data = reactive({
+  friends: {
+    all: {},
+    recent: [],
+    eachOther: []
   },
-  methods: {
-    save() {
-      if (!this.selectFriends.length) return
-      this.$back()
-    },
-    toggleSelect(item) {
-      let resIndex = this.selectFriends.findIndex((v) => v.name === item.name)
-      if (resIndex !== -1) {
-        item.select = false
-        this.selectFriends.splice(resIndex, 1)
-      } else {
-        item.select = true
-        this.selectFriends.push(item)
-      }
-    },
-    async getFriends() {
-      let res = await friends()
-      if (res.code === this.SUCCESS) {
-        this.friends = res.data
-        this.friends.all = this.friends.all.sort((a, b) => {
-          if (a.pinyin < b.pinyin) return -1
-          if (a.pinyin > b.pinyin) return 1
-          return 0
-        })
-      }
-    }
+  selectFriends: []
+})
+
+onMounted(() => {
+  getFriends()
+})
+
+function save() {
+  if (!data.selectFriends.length) return
+  router.back()
+}
+
+function toggleSelect(item) {
+  let resIndex = data.selectFriends.findIndex((v) => v.name === item.name)
+  if (resIndex !== -1) {
+    item.select = false
+    data.selectFriends.splice(resIndex, 1)
+  } else {
+    item.select = true
+    data.selectFriends.push(item)
+  }
+}
+
+async function getFriends() {
+  let res = await friends()
+  if (res.success) {
+    data.friends = res.data
+    data.friends.all = data.friends.all.sort((a, b) => {
+      if (a.pinyin < b.pinyin) return -1
+      if (a.pinyin > b.pinyin) return 1
+      return 0
+    })
   }
 }
 </script>
 
 <style scoped lang="less">
-@import '../../assets/less/index';
+@import '@/assets/less/index';
 
 .Share2Friend {
   position: fixed;
diff --git a/src/pages/message/Message.vue b/src/pages/message/Message.vue
index e72602694..81a68cef5 100644
--- a/src/pages/message/Message.vue
+++ b/src/pages/message/Message.vue
@@ -1,22 +1,22 @@
 <template>
-  <div id="Message" ref="app" :class="createChatDialog ? 'disable-scroll' : ''">
-    <div class="no-search" v-show="!searching">
+  <div id="Message" ref="app" :class="data.createChatDialog ? 'disable-scroll' : ''">
+    <div class="no-search" v-show="!data.searching">
       <header>
-        <Icon @click="createChatDialog = true" icon="formkit:add" />
+        <Icon @click="data.createChatDialog = true" icon="formkit:add" />
         <Icon icon="tabler:camera-selfie" />
-        <Icon @click="searching = true" icon="tabler:search" />
+        <Icon @click="data.searching = true" icon="tabler:search" />
       </header>
 
       <Scroll ref="mainScroll">
         <div class="friends pl1r">
           <div
             class="friend pr1r pl1r"
-            @click="$nav('/message/chat')"
+            @click="nav('/message/chat')"
             :key="index"
-            v-for="(item, index) in friends.all"
+            v-for="(item, index) in store.friends.all"
           >
             <div class="avatar" :class="index % 2 === 0 ? 'on-line' : ''">
-              <img :src="$imgPreview(item.avatar)" alt="" />
+              <img :src="_checkImgUrl(item.avatar)" alt="" />
             </div>
             <span>{{ item.name }}</span>
           </div>
@@ -28,7 +28,7 @@
         <div class="line mt2r"></div>
         <div class="messages">
           <!--      粉丝-->
-          <div class="message" @click="$nav('/message/fans')">
+          <div class="message" @click="nav('/message/fans')">
             <div class="avatar">
               <img src="../../assets/img/icon/msg-icon1.png" alt="" class="head-image" />
             </div>
@@ -45,7 +45,7 @@
             </div>
           </div>
           <!--      互动消息-->
-          <div class="message" @click="$nav('/message/all')">
+          <div class="message" @click="nav('/message/all')">
             <div class="avatar">
               <img src="../../assets/img/icon/msg-icon2.png" alt="" class="head-image" />
             </div>
@@ -62,14 +62,14 @@
             </div>
           </div>
           <!--      消息-->
-          <div class="message" @click="$nav('/message/chat')">
+          <div class="message" @click="nav('/message/chat')">
             <div class="avatar on-line">
               <img src="../../assets/img/icon/avatar/2.png" alt="" class="head-image" />
             </div>
             <div class="content">
               <div class="left">
                 <div class="name">
-                  <span>{{ userinfo.nickname }}</span>
+                  <span>{{ store.userinfo.nickname }}</span>
                 </div>
                 <div class="detail">
                   哈哈哈哈哈哈
@@ -86,7 +86,7 @@
             </div>
           </div>
           <!--      抖音小助手-->
-          <div class="message" @click="$nav('/message/douyin-helper')">
+          <div class="message" @click="nav('/message/douyin-helper')">
             <div class="avatar">
               <img src="../../assets/img/icon/msg-icon5.webp" alt="" class="head-image" />
             </div>
@@ -108,7 +108,7 @@
             </div>
           </div>
           <!--      系统通知-->
-          <div class="message" @click="$nav('/message/system-notice')">
+          <div class="message" @click="nav('/message/system-notice')">
             <div class="avatar">
               <img src="../../assets/img/icon/msg-icon4.png" alt="" class="head-image" />
             </div>
@@ -130,7 +130,7 @@
             </div>
           </div>
           <!--      求更新-->
-          <div class="message" @click="$nav('/me/request-update')">
+          <div class="message" @click="nav('/me/request-update')">
             <div class="avatar">
               <img src="../../assets/img/icon/msg-icon7.webp" alt="" class="head-image" />
             </div>
@@ -152,7 +152,7 @@
             </div>
           </div>
           <!--      任务通知-->
-          <div class="message" @click="$nav('/message/task-notice')">
+          <div class="message" @click="nav('/message/task-notice')">
             <div class="avatar">
               <img src="../../assets/img/icon/msg-icon6.webp" alt="" class="head-image" />
             </div>
@@ -174,7 +174,7 @@
             </div>
           </div>
           <!--      直播通知-->
-          <div class="message" @click="$nav('/message/live-notice')">
+          <div class="message" @click="nav('/message/live-notice')">
             <div class="avatar">
               <img src="../../assets/img/icon/msg-icon8.webp" alt="" class="head-image" />
             </div>
@@ -196,7 +196,7 @@
             </div>
           </div>
           <!--      钱包通知-->
-          <div class="message" @click="$nav('/message/money-notice')">
+          <div class="message" @click="nav('/message/money-notice')">
             <div class="avatar">
               <img src="../../assets/img/icon/msg-icon9.webp" alt="" class="head-image" />
             </div>
@@ -246,23 +246,23 @@
           <!--      </div>-->
         </div>
       </Scroll>
-      <from-bottom-dialog page-id="Message" v-model="createChatDialog">
-        <div class="create-chat-wrapper" v-show="!showJoinedChat">
+      <from-bottom-dialog page-id="Message" v-model="data.createChatDialog">
+        <div class="create-chat-wrapper" v-show="!data.showJoinedChat">
           <Search
-            :isShowRightText="isShowRightText"
-            @click="isShowRightText = true"
-            @notice="isShowRightText = false"
-            @clear="isShowRightText = false"
+            :isShowRightText="data.isShowRightText"
+            @click="data.isShowRightText = true"
+            @notice="data.isShowRightText = false"
+            @clear="data.isShowRightText = false"
             class="ml2r mr2r"
             placeholder="搜索用户"
-            v-model="createChatSearchKey"
+            v-model="data.createChatSearchKey"
           ></Search>
-          <template v-if="createChatSearchKey">
-            <div class="search-result" v-if="searchFriends.length">
+          <template v-if="data.createChatSearchKey">
+            <div class="search-result" v-if="data.searchFriends.length">
               <div
                 class="search-result-item"
                 :key="i"
-                v-for="(item, i) in searchFriends"
+                v-for="(item, i) in data.searchFriends"
                 @click="handleClick(item)"
               >
                 <img class="left" src="../../assets/img/icon/head-image.jpeg" alt="" />
@@ -286,7 +286,7 @@
             </div>
           </template>
           <template v-else>
-            <div class="joined-chat" @click="showJoinedChat = true">
+            <div class="joined-chat" @click="data.showJoinedChat = true">
               <img class="left" src="../../assets/img/icon/people-gray.png" alt="" />
               <div class="right">
                 <span>已加入的群聊</span>
@@ -298,10 +298,10 @@
               <div
                 class="friend-item"
                 :key="i"
-                v-for="(item, i) in friends.all"
+                v-for="(item, i) in store.friends.all"
                 @click="item.select = !item.select"
               >
-                <img class="left" :src="$imgPreview(item.avatar)" alt="" />
+                <img class="left" :src="_checkImgUrl(item.avatar)" alt="" />
                 <div class="right">
                   <span>{{ item.name }}</span>
                   <Check mode="red" style="height: 20rem; width: 20rem" v-model="item.select" />
@@ -313,9 +313,9 @@
             <div class="btn" :class="selectFriends ? 'primary' : ''">发起聊天</div>
           </div>
         </div>
-        <div class="joined-chat-wrapper" v-show="showJoinedChat">
+        <div class="joined-chat-wrapper" v-show="data.showJoinedChat">
           <div class="nav">
-            <dy-back @click="showJoinedChat = false" mode="light" scale="1.2"></dy-back>
+            <dy-back @click="data.showJoinedChat = false" mode="light" scale="1.2"></dy-back>
             <span>已加入的群聊</span>
             <span>&nbsp;</span>
           </div>
@@ -326,7 +326,7 @@
               <div class="right">
                 <div class="title">
                   <div class="name">
-                    {{ text.length > 20 ? text.substr(0, 20) + '...' : text }}
+                    {{ data.text.length > 20 ? data.text.substr(0, 20) + '...' : data.text }}
                   </div>
                   <div class="num">(3)</div>
                 </div>
@@ -339,7 +339,7 @@
       </from-bottom-dialog>
 
       <transition name="fade">
-        <div class="recommend-dialog" v-if="isShowRecommend">
+        <div class="recommend-dialog" v-if="data.isShowRecommend">
           <div class="dialog-content">
             <div class="dialog-header">
               <img
@@ -352,15 +352,15 @@
                 <img src="../../assets/img/icon/about-gray.png" alt="" />
               </div>
               <img
-                @click="isShowRecommend = false"
+                @click="data.isShowRecommend = false"
                 src="../../assets/img/icon/components/gray-close-full2.png"
                 alt=""
               />
             </div>
             <div class="dialog-body">
               <Scroll ref="scroll" @pulldown="loadRecommendData">
-                <Peoples v-model:list="recommend" :loading="loading" mode="recommend" />
-                <Loading :is-full-screen="false" v-if="loading" />
+                <Peoples v-model:list="data.recommend" :loading="data.loading" mode="recommend" />
+                <Loading :is-full-screen="false" v-if="data.loading" />
                 <NoMore v-else />
               </Scroll>
             </div>
@@ -371,22 +371,22 @@
       <BaseFooter v-bind:init-tab="4" />
     </div>
 
-    <div class="searching" v-show="searching">
+    <div class="searching" v-show="data.searching">
       <Search
-        v-model="searchKey"
+        v-model="data.searchKey"
         right-text="取消"
         right-text-color="white"
-        @notice="searching = false"
+        @notice="data.searching = false"
         :isShowRightText="true"
       />
       <div class="more-chat">
-        <template v-if="searchKey">
+        <template v-if="data.searchKey">
           <div class="sub-title" v-if="searchFriendsAll.length">
             <span>联系人</span>
             <div
               class="right"
               v-if="searchFriendsAll.length > 3"
-              @click="$nav('/message/more-search', { key: searchKey })"
+              @click="nav('/message/more-search', { key: data.searchKey })"
             >
               <span>更多联系人</span>
               <dy-back mode="gray" img="back" scale=".6" direction="right" />
@@ -396,15 +396,15 @@
             v-for="item in searchFriendsAll.slice(0, 3)"
             :key="item.id"
             mode="search"
-            :searchKey="searchKey"
+            :searchKey="data.searchKey"
             :people="item"
           />
-          <div class="goto-search-page" @click="$nav('/home/search', { key: searchKey })">
+          <div class="goto-search-page" @click="nav('/home/search', { key: data.searchKey })">
             <img class="icon" src="../../assets/img/icon/search-light.png" alt="" />
             <div class="right">
               <div class="left">
                 <span
-                  >搜索 <span style="color: yellow">{{ searchKey }}</span></span
+                  >搜索 <span style="color: yellow">{{ data.searchKey }}</span></span
                 >
                 <span class="second-text-color f12">视频、用户、音乐、话题、地点等</span>
               </div>
@@ -414,105 +414,96 @@
         </template>
         <template v-else>
           <div class="sub-title">更多聊天</div>
-          <People v-for="item in moreChat" :key="item.id" :people="item" />
+          <People v-for="item in data.moreChat" :key="item.id" :people="item" />
         </template>
       </div>
     </div>
   </div>
 </template>
 
-<script>
-import Search from '../../components/Search'
-import FromBottomDialog from '../../components/dialog/FromBottomDialog'
-import Check from '../../components/Check'
-import { mapState } from 'pinia'
-import Peoples from '../people/components/Peoples'
-import Scroll from '../../components/Scroll'
-import People from '../people/components/People'
-import BasePage from '../BasePage'
+<script setup lang="ts">
+import Search from '../../components/Search.vue'
+import FromBottomDialog from '../../components/dialog/FromBottomDialog.vue'
+import Check from '../../components/Check.vue'
+import Peoples from '../people/components/Peoples.vue'
+import People from '../people/components/Peoples.vue'
+import Scroll from '../../components/Scroll.vue'
 import { useBaseStore } from '@/store/pinia'
 
-export default {
-  extends: BasePage,
-  name: 'Message',
-  components: {
-    Scroll,
-    Search,
-    FromBottomDialog,
-    Check,
-    Peoples,
-    People
-  },
-  data() {
-    return {
-      isShowRecommend: false,
-      searching: false,
-      searchKey: '',
-      createChatSearchKey: '',
-      showJoinedChat: false,
-      loading: false,
-      createChatDialog: false,
-      isShowRightText: false,
-      text: 'AAAAAAAAA、BBBBBBBBBBBBB、CCCCCCCC',
-      searchFriends: [],
-      recommend: [],
-      moreChat: []
-    }
-  },
-  computed: {
-    ...mapState(useBaseStore, ['friends', 'userinfo']),
-    selectFriends() {
-      return this.friends.all.filter((v) => v.select).length
-    },
-    searchFriendsAll() {
-      return this.friends.all.filter((v) => {
-        return v.name.search(this.searchKey) !== -1 || v.account.search(this.searchKey) !== -1
-      })
-    }
-  },
-  watch: {
-    createChatSearchKey(newVal) {
-      if (newVal) {
-        //TODO 搜索时仅仅判断是否包含了对应字符串，抖音做了拼音判断的
-        this.searchFriends = this.friends.all.filter((v) => {
-          if (v.name.includes(newVal)) return true
-          return v.account.includes(newVal)
-        })
-      } else {
-        this.searchFriends = []
-      }
-    }
-  },
-  created() {
-    console.log('create')
-    this.recommend = this.$clone(this.friends.all)
-    this.recommend.map((v) => {
-      v.type = -2
-    })
-    this.moreChat = this.$clone(this.friends.all.slice(0, 3))
-  },
-  mounted() {
-    setTimeout(() => {
-      // this.isShowRecommend = true
-    }, 1000)
-  },
-  methods: {
-    handleClick(item) {
-      item.select = !item.select
-      this.createChatSearchKey = ''
-    },
-    async loadRecommendData() {
-      if (this.loading) return
-      this.loading = true
-      await this.$sleep(500)
-      this.loading = false
-      let temp = this.$clone(this.friends.all)
-      temp.map((v) => {
-        v.type = -2
+import { computed, onMounted, reactive, watch } from 'vue'
+import { useNav } from '@/utils/hooks/useNav.js'
+import { _checkImgUrl, _sleep, cloneDeep } from '@/utils'
+
+defineOptions({
+  name: 'Message'
+})
+
+const store = useBaseStore()
+const nav = useNav()
+const data = reactive({
+  isShowRecommend: false,
+  searching: false,
+  searchKey: '',
+  createChatSearchKey: '',
+  showJoinedChat: false,
+  loading: false,
+  createChatDialog: false,
+  isShowRightText: false,
+  text: 'AAAAAAAAA、BBBBBBBBBBBBB、CCCCCCCC',
+  searchFriends: [],
+  recommend: [],
+  moreChat: []
+})
+
+onMounted(() => {
+  console.log('create')
+  data.recommend = cloneDeep(store.friends.all)
+  data.recommend.map((v) => {
+    v.type = -2
+  })
+  data.moreChat = cloneDeep(store.friends.all.slice(0, 3))
+})
+
+const selectFriends = computed(() => {
+  return store.friends.all.filter((v) => v.select).length
+})
+
+const searchFriendsAll = computed(() => {
+  return store.friends.all.filter((v) => {
+    return v.name.search(data.searchKey) !== -1 || v.account.search(data.searchKey) !== -1
+  })
+})
+
+watch(
+  () => data.createChatSearchKey,
+  (newVal) => {
+    if (newVal) {
+      //TODO 搜索时仅仅判断是否包含了对应字符串，抖音做了拼音判断的
+      data.searchFriends = store.friends.all.filter((v) => {
+        if (v.name.includes(newVal)) return true
+        return v.account.includes(newVal)
       })
-      this.recommend = this.recommend.concat(temp)
+    } else {
+      data.searchFriends = []
     }
   }
+)
+
+function handleClick(item) {
+  item.select = !item.select
+  data.createChatSearchKey = ''
+}
+
+async function loadRecommendData() {
+  if (data.loading) return
+  data.loading = true
+  await _sleep(500)
+  data.loading = false
+  let temp = cloneDeep(store.friends.all)
+  temp.map((v) => {
+    v.type = -2
+  })
+  data.recommend = data.recommend.concat(temp)
 }
 </script>
 <style scoped lang="less">
diff --git a/src/pages/message/MoreSearch.vue b/src/pages/message/MoreSearch.vue
index 7caf291c5..86c456c01 100644
--- a/src/pages/message/MoreSearch.vue
+++ b/src/pages/message/MoreSearch.vue
@@ -2,53 +2,50 @@
   <div id="MoreSearch">
     <div class="content">
       <Search
-        v-model="searchKey"
+        v-model="data.searchKey"
         right-text="取消"
         right-text-color="white"
-        @notice="$back"
+        @notice="router.back"
         :isShowRightText="true"
       />
       <People
         v-for="item in searchFriendsAll"
         :key="item.id"
         mode="search"
-        :searchKey="searchKey"
+        :searchKey="data.searchKey"
         :people="item"
       />
     </div>
   </div>
 </template>
-<script>
-import Search from '../../components/Search'
-import { mapState } from 'pinia'
-import People from '../people/components/People'
+<script setup lang="ts">
+import Search from '@/components/Search.vue'
+import People from '../people/components/Peoples.vue'
 import { useBaseStore } from '@/store/pinia'
 
-export default {
-  name: 'MoreSearch',
-  components: {
-    Search,
-    People
-  },
-  data() {
-    return {
-      searchKey: ''
-    }
-  },
-  computed: {
-    ...mapState(useBaseStore, ['friends', 'userinfo']),
-    searchFriendsAll() {
-      return this.friends.all.filter((v) => {
-        return v.name.search(this.searchKey) !== -1 || v.account.search(this.searchKey) !== -1
-      })
-    }
-  },
-  watch: {},
-  created() {
-    this.searchKey = this.$route.query.key
-  },
-  methods: {}
-}
+import { computed, onMounted, reactive } from 'vue'
+import { useNav } from '@/utils/hooks/useNav.js'
+import { useRoute, useRouter } from 'vue-router'
+
+defineOptions({
+  name: 'MoreSearch'
+})
+
+const store = useBaseStore()
+const router = useRouter()
+const route = useRoute()
+const data = reactive({
+  searchKey: ''
+})
+
+const searchFriendsAll = computed(() => {
+  return store.friends.all.filter((v) => {
+    return v.name.search(data.searchKey) !== -1 || v.account.search(data.searchKey) !== -1
+  })
+})
+onMounted(() => {
+  data.searchKey = String(route.query.key)
+})
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/message/Visitors.vue b/src/pages/message/Visitors.vue
index 507b5b268..f46fd9d52 100644
--- a/src/pages/message/Visitors.vue
+++ b/src/pages/message/Visitors.vue
@@ -5,12 +5,12 @@
         <span class="f16">主页访客</span>
       </template>
       <template v-slot:right>
-        <span class="f14" @click="isShowSetting = !isShowSetting">设置</span>
+        <span class="f14" @click="data.isShowSetting = !data.isShowSetting">设置</span>
       </template>
     </BaseHeader>
     <div class="content">
-      <template v-if="realDisplay">
-        <Peoples v-model:list="recommend" :loading="loading" mode="visitor" />
+      <template v-if="data.realDisplay">
+        <Peoples v-model:list="data.recommend" :loading="false" mode="visitor" />
         <NoMore />
       </template>
       <template v-else>
@@ -18,7 +18,11 @@
           <div class="header">
             <div class="wrapper">
               <img src="../../assets/img/icon/message/display2.webp" alt="" class="icon1" />
-              <img :src="_checkImgUrl(userinfo.cover_url[0].url_list[0])" alt="" class="icon2" />
+              <img
+                :src="_checkImgUrl(store.userinfo.cover_url[0].url_list[0])"
+                alt=""
+                class="icon2"
+              />
               <img src="../../assets/img/icon/message/display1.webp" alt="" class="icon3" />
             </div>
           </div>
@@ -31,7 +35,9 @@
 
           <div class="buttons">
             <base-button type="dark" @click="keepClose">保持关闭</base-button>
-            <base-button type="primary" @click="display = realDisplay = true">开启访客</base-button>
+            <base-button type="primary" @click="data.display = data.realDisplay = true"
+              >开启访客</base-button
+            >
           </div>
         </div>
       </template>
@@ -39,7 +45,7 @@
 
     <from-bottom-dialog
       page-id="Visitors"
-      v-model="isShowSetting"
+      v-model="data.isShowSetting"
       mode="white"
       mask-mode="dark"
       height="270rem"
@@ -51,7 +57,7 @@
             <img class="icon" src="../../assets/img/icon/message/peoples-black2.png" alt="" />
             <transition name="remove">
               <img
-                v-if="!display"
+                v-if="!data.display"
                 class="remove"
                 src="../../assets/img/icon/message/remove.png"
                 alt=""
@@ -60,7 +66,7 @@
           </div>
           <img
             class="close"
-            @click="isShowSetting = false"
+            @click="data.isShowSetting = false"
             src="../../assets/img/icon/components/gray-close-full2.png"
             alt=""
           />
@@ -73,60 +79,54 @@
         <div class="row">
           <div class="left">展示主页访客</div>
           <div class="right">
-            <switches v-model="display" theme="bootstrap" color="success"></switches>
+            <switches v-model="data.display" theme="bootstrap" color="success"></switches>
           </div>
         </div>
       </div>
     </from-bottom-dialog>
   </div>
 </template>
-<script>
-import { mapState } from 'pinia'
-import Peoples from '../people/components/Peoples'
-import NoMore from '../../components/NoMore'
-import FromBottomDialog from '../../components/dialog/FromBottomDialog'
-import Switches from './components/swtich/switches'
-import BaseButton from '../../components/BaseButton'
+<script setup lang="ts">
+import Peoples from '../people/components/Peoples.vue'
+import NoMore from '@/components/NoMore.vue'
+import FromBottomDialog from '@/components/dialog/FromBottomDialog.vue'
+import Switches from './components/swtich/switches.vue'
+import BaseButton from '@/components/BaseButton.vue'
 import { useBaseStore } from '@/store/pinia'
-import { _checkImgUrl } from '@/utils'
-
-export default {
-  name: 'visitors',
-  components: {
-    BaseButton,
-    FromBottomDialog,
-    Peoples,
-    NoMore,
-    Switches
-  },
-  data() {
-    return {
-      recommend: [],
-      isShowSetting: false,
-      display: false,
-      realDisplay: false
-    }
-  },
-  watch: {
-    isShowSetting(newVal) {
-      if (!newVal) {
-        this.realDisplay = this.display
-      }
-    }
-  },
-  computed: {
-    ...mapState(useBaseStore, ['friends', 'userinfo'])
-  },
-  created() {
-    this.recommend = this.$clone(this.friends.all)
-  },
-  methods: {
-    _checkImgUrl,
-    keepClose() {
-      this.$notice('你将不会再收到相关通知')
-      this.$back()
+import { _checkImgUrl, _notice, cloneDeep } from '@/utils'
+
+import { onMounted, reactive, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+defineOptions({
+  name: 'Visitors'
+})
+
+const store = useBaseStore()
+const router = useRouter()
+const data = reactive({
+  recommend: [],
+  isShowSetting: false,
+  display: false,
+  realDisplay: false
+})
+
+onMounted(() => {
+  data.recommend = cloneDeep(store.friends.all)
+})
+
+watch(
+  () => data.isShowSetting,
+  (newVal) => {
+    if (!newVal) {
+      data.realDisplay = data.display
     }
   }
+)
+
+function keepClose() {
+  _notice('你将不会再收到相关通知')
+  router.back()
 }
 </script>
 
@@ -184,6 +184,7 @@ export default {
         background: black;
         border-radius: 50%;
         width: 80rem;
+        height: 80rem;
       }
 
       .icon3 {
diff --git a/src/pages/message/notice/DouyinHelper.vue b/src/pages/message/notice/DouyinHelper.vue
index 1a9f4513a..5b4d1ec4f 100644
--- a/src/pages/message/notice/DouyinHelper.vue
+++ b/src/pages/message/notice/DouyinHelper.vue
@@ -5,13 +5,13 @@
         <span class="f16">抖音小助手</span>
       </template>
     </BaseHeader>
-    <Loading v-if="loading" />
+    <Loading v-if="data.loading" />
     <Scroll v-else ref="mainScroll">
       <div class="content">
         <NoMore />
         <div class="list">
           <!--TODO 超过3行显示全文-->
-          <div class="item" :key="i" v-for="(item, i) in list" @click="goDetail(item)">
+          <div class="item" :key="i" v-for="(item, i) in data.list" @click="goDetail(item)">
             <div class="title">
               {{ item.title }}
               <div class="ml1r not-read" v-if="!item.read"></div>
@@ -28,82 +28,78 @@
     </Scroll>
   </div>
 </template>
-<script>
-import { nextTick } from 'vue'
-import Scroll from '../../../components/Scroll'
-import BasePage from '../../BasePage'
+<script setup lang="ts">
+import { nextTick, onMounted, reactive } from 'vue'
+import Scroll from '@/components/Scroll.vue'
+import { _no, _sleep } from '@/utils'
 
-export default {
-  extends: BasePage,
-  name: 'DouyinHelper',
-  components: { Scroll },
-  data() {
-    return {
-      loading: false,
-      list: [
-        {
-          read: false,
-          title: '叮！你有一条《长津湖》观看提醒',
-          time: '2021-10-12 12:12',
-          content:
-            '领跑国庆档，吴京、易烊千玺“京玺”兄弟共赴战场！燃爽炸裂的视觉冲击，义勇前行的坚定信念，尽在长津湖“意志之战”。点击查看详情，戳我优惠看>>'
-        },
-        {
-          read: false,
-          title: '国庆打卡美好中国',
-          time: '2021-10-12 12:12',
-          content:
-            '山河千年，风景依旧，一幅幅大美的城市山水画在国庆舞台中徐徐展开。点击[查看详情]在拼音打卡美好中国，领跑不同城市的韵味，最高还能赢10000元旅行红包哦！'
-        },
-        {
-          read: false,
-          title: '#今天谁请客呢',
-          time: '2021-10-12 12:12',
-          content:
-            '你还在为朋友吃饭谁请客发愁吗？快邀请朋友一起来参加花式甩单挑战，今日消费，淘特请客！还不快来拍摄互动视频？现金大奖等你来分！'
-        },
-        {
-          read: false,
-          title: '#寻找武林第一人',
-          time: '2021-10-12 12:12',
-          content:
-            '《天涯明月刀手游》在线悬赏“武林第一人”。10月10日-10月19日内，参与挑战，生成你的专属卡面，测一测你的武林专属称号吧！天刀手游周年庆也在火热进行中，全民福利等你拿! [本活动与Apple Inc.无关]'
-        },
-        {
-          read: false,
-          title: '谁是偷偷爱你的人',
-          time: '2021-10-12 12:12',
-          content:
-            '想知道怎么跟TA们走的更近吗？10月11日-10月16日正好有一个合适的机会，赶紧点击了解详情>>'
-        },
-        {
-          read: false,
-          title: '看美好奇妙夜，赢万元红包！',
-          time: '2021-10-12 12:12',
-          content:
-            '今天晚上8点，2021抖音美好奇妙夜直播开启！30多位艺人、100多位创作者齐聚一堂，为你带来全方位的视听盛宴，观看直播更有机会赢万元红包大奖，更多精彩，不容错过！快来直接间看看吧！ [本活动与Apple Inc.无关]'
-        }
-      ]
-    }
-  },
-  computed: {},
-  created() {
-    this.getData()
-  },
-  mounted() {},
-  methods: {
-    async getData() {
-      this.loading = true
-      await this.$sleep(700)
-      this.loading = false
-      await nextTick()
-      this.$refs.mainScroll.scrollBottom()
+defineOptions({
+  name: 'DouyinHelper'
+})
+
+const data = reactive({
+  loading: false,
+  list: [
+    {
+      read: false,
+      title: '叮！你有一条《长津湖》观看提醒',
+      time: '2021-10-12 12:12',
+      content:
+        '领跑国庆档，吴京、易烊千玺“京玺”兄弟共赴战场！燃爽炸裂的视觉冲击，义勇前行的坚定信念，尽在长津湖“意志之战”。点击查看详情，戳我优惠看>>'
+    },
+    {
+      read: false,
+      title: '国庆打卡美好中国',
+      time: '2021-10-12 12:12',
+      content:
+        '山河千年，风景依旧，一幅幅大美的城市山水画在国庆舞台中徐徐展开。点击[查看详情]在拼音打卡美好中国，领跑不同城市的韵味，最高还能赢10000元旅行红包哦！'
+    },
+    {
+      read: false,
+      title: '#今天谁请客呢',
+      time: '2021-10-12 12:12',
+      content:
+        '你还在为朋友吃饭谁请客发愁吗？快邀请朋友一起来参加花式甩单挑战，今日消费，淘特请客！还不快来拍摄互动视频？现金大奖等你来分！'
+    },
+    {
+      read: false,
+      title: '#寻找武林第一人',
+      time: '2021-10-12 12:12',
+      content:
+        '《天涯明月刀手游》在线悬赏“武林第一人”。10月10日-10月19日内，参与挑战，生成你的专属卡面，测一测你的武林专属称号吧！天刀手游周年庆也在火热进行中，全民福利等你拿! [本活动与Apple Inc.无关]'
     },
-    goDetail(item) {
-      item.read = true
-      this.$no()
+    {
+      read: false,
+      title: '谁是偷偷爱你的人',
+      time: '2021-10-12 12:12',
+      content:
+        '想知道怎么跟TA们走的更近吗？10月11日-10月16日正好有一个合适的机会，赶紧点击了解详情>>'
+    },
+    {
+      read: false,
+      title: '看美好奇妙夜，赢万元红包！',
+      time: '2021-10-12 12:12',
+      content:
+        '今天晚上8点，2021抖音美好奇妙夜直播开启！30多位艺人、100多位创作者齐聚一堂，为你带来全方位的视听盛宴，观看直播更有机会赢万元红包大奖，更多精彩，不容错过！快来直接间看看吧！ [本活动与Apple Inc.无关]'
     }
-  }
+  ]
+})
+
+onMounted(() => {
+  getData()
+})
+
+async function getData() {
+  data.loading = true
+  await _sleep(700)
+  data.loading = false
+  await nextTick()
+  // data.$refs.mainScroll.scrollBottom()
+}
+
+function goDetail(item) {
+  item.read = true
+  _no()
 }
 </script>
 
diff --git a/src/pages/message/notice/SystemNotice.vue b/src/pages/message/notice/SystemNotice.vue
index 168551dcb..74f3beac9 100644
--- a/src/pages/message/notice/SystemNotice.vue
+++ b/src/pages/message/notice/SystemNotice.vue
@@ -5,18 +5,18 @@
         <span class="f16">系统通知</span>
       </template>
       <template v-slot:right>
-        <span class="f14" @click="$nav('/message/notice-setting', { type: 'SYSTEM' })"
+        <span class="f14" @click="nav('/message/notice-setting', { type: 'SYSTEM' })"
           >通知设置</span
         >
       </template>
     </BaseHeader>
-    <Loading v-if="loading" />
+    <Loading v-if="data.loading" />
     <div class="content" v-else>
       <Scroll ref="mainScroll">
         <div class="list">
           <NoMore />
           <!--TODO 超过3行显示全文-->
-          <div class="item" :key="i" v-for="(item, i) in list" @click="goDetail(item)">
+          <div class="item" :key="i" v-for="(item, i) in data.list" @click="goDetail(item)">
             <div class="title">
               {{ item.title }}
               <div class="ml1r not-read" v-if="!item.read"></div>
@@ -32,30 +32,30 @@
       </Scroll>
 
       <!--TODO 子页面未做-->
-      <div class="hover-dialog left" v-if="isShowLeftHover">
+      <div class="hover-dialog left" v-if="data.isShowLeftHover">
         <div class="arrow"></div>
-        <div class="l-row no-border" @click="$no">登录设备管理</div>
-        <div class="l-row" @click="$no">账号锁定</div>
-        <div class="l-row" @click="$no">账号解锁</div>
+        <div class="l-row no-border" @click="_no">登录设备管理</div>
+        <div class="l-row" @click="_no">账号锁定</div>
+        <div class="l-row" @click="_no">账号解锁</div>
       </div>
 
-      <div class="hover-dialog right" v-if="isShowRightHover">
+      <div class="hover-dialog right" v-if="data.isShowRightHover">
         <div class="arrow"></div>
-        <div class="l-row no-border" @click="$no">常见问题</div>
-        <div class="l-row" @click="$no">安全课堂</div>
+        <div class="l-row no-border" @click="_no">常见问题</div>
+        <div class="l-row" @click="_no">安全课堂</div>
       </div>
 
-      <BaseMask mode="white" v-if="isShowMask" @click="isShowMask = false" />
+      <BaseMask mode="white" v-if="data.isShowMask" @click="data.isShowMask = false" />
 
       <div class="options">
-        <div class="option" @click="isShowLeftHover = !isShowLeftHover">
+        <div class="option" @click="data.isShowLeftHover = !data.isShowLeftHover">
           <img src="../../../assets/img/icon/message/menu-thin.png" alt="" />
           <span>自助工具</span>
         </div>
-        <div class="option" @click="$no">
+        <div class="option" @click="_no">
           <span>规则中心</span>
         </div>
-        <div class="option" @click="isShowRightHover = !isShowRightHover">
+        <div class="option" @click="data.isShowRightHover = !data.isShowRightHover">
           <img src="../../../assets/img/icon/message/menu-thin.png" alt="" />
           <span>更多帮助</span>
         </div>
@@ -63,95 +63,103 @@
     </div>
   </div>
 </template>
-<script>
-import { nextTick } from 'vue'
-import Scroll from '../../../components/Scroll'
-import BasePage from '../../BasePage'
+<script setup lang="ts">
+import { nextTick, onMounted, reactive, watch } from 'vue'
+import Scroll from '@/components/Scroll.vue'
+import { useNav } from '@/utils/hooks/useNav.js'
+import { _no, _sleep } from '@/utils'
 
-export default {
-  extends: BasePage,
-  name: 'SystemNotice',
-  components: { Scroll },
-  data() {
-    return {
-      loading: false,
-      isShowMask: false,
-      isShowLeftHover: false,
-      isShowRightHover: false,
-      list: [
-        {
-          read: false,
-          title: '账号登录提醒',
-          detail: 'xxx',
-          time: '2021-10-12 12:12',
-          content:
-            '您的抖音号4533452342于2021-02-09 07:45:23进行了登录操作。如非本人操作，账号可能被盗。建议立即修改密码，或在[设置-账号与安全-登录设备管理]中删除异常设备。参考设备：iPhone X参考地点：上海市'
-        },
-        {
-          read: false,
-          title: '账号登录提醒',
-          detail: 'xxx',
-          time: '2021-10-12 12:12',
-          content:
-            '您的抖音号4533452342于2021-02-09 07:45:23进行了登录操作。如非本人操作，账号可能被盗。建议立即修改密码，或在[设置-账号与安全-登录设备管理]中删除异常设备。参考设备：iPhone X参考地点：上海市'
-        },
-        {
-          read: false,
-          title: '协议修订通知',
-          detail: '',
-          time: '2021-10-12 12:12',
-          content:
-            '你好，根据业务开展的实际情况，抖音近期更新了《抖音用户服务协议》《抖音隐私政策》及《儿童/青少年使用须知》中的相关内容。你可以在“我”-“设置”页面中，查看更新后的协议全文。'
-        },
-        {
-          read: false,
-          title: '协议修订通知',
-          detail: '',
-          time: '2021-10-12 12:12',
-          content:
-            '你好，根据业务开展的实际情况，抖音近期更新了《抖音用户服务协议》部分条款的表述。你可以在“我”-“设置”页面中，查看更新后的协议全文。'
-        }
-      ]
-    }
-  },
-  watch: {
-    isShowLeftHover(newVal) {
-      if (newVal) {
-        this.isShowMask = true
-      }
+defineOptions({
+  name: 'SystemNotice'
+})
+
+const nav = useNav()
+const data = reactive({
+  loading: false,
+  isShowMask: false,
+  isShowLeftHover: false,
+  isShowRightHover: false,
+  list: [
+    {
+      read: false,
+      title: '账号登录提醒',
+      detail: 'xxx',
+      time: '2021-10-12 12:12',
+      content:
+        '您的抖音号4533452342于2021-02-09 07:45:23进行了登录操作。如非本人操作，账号可能被盗。建议立即修改密码，或在[设置-账号与安全-登录设备管理]中删除异常设备。参考设备：iPhone X参考地点：上海市'
     },
-    isShowRightHover(newVal) {
-      if (newVal) {
-        this.isShowMask = true
-      }
+    {
+      read: false,
+      title: '账号登录提醒',
+      detail: 'xxx',
+      time: '2021-10-12 12:12',
+      content:
+        '您的抖音号4533452342于2021-02-09 07:45:23进行了登录操作。如非本人操作，账号可能被盗。建议立即修改密码，或在[设置-账号与安全-登录设备管理]中删除异常设备。参考设备：iPhone X参考地点：上海市'
     },
-    isShowMask(newVal) {
-      if (!newVal) {
-        this.isShowLeftHover = false
-        this.isShowRightHover = false
-      }
-    }
-  },
-  computed: {},
-  created() {
-    this.getData()
-  },
-  mounted() {},
-  methods: {
-    async getData() {
-      this.loading = true
-      await this.$sleep(700)
-      this.loading = false
-      await nextTick()
-      this.$refs.mainScroll.scrollBottom()
+    {
+      read: false,
+      title: '协议修订通知',
+      detail: '',
+      time: '2021-10-12 12:12',
+      content:
+        '你好，根据业务开展的实际情况，抖音近期更新了《抖音用户服务协议》《抖音隐私政策》及《儿童/青少年使用须知》中的相关内容。你可以在“我”-“设置”页面中，查看更新后的协议全文。'
     },
-    goDetail(item) {
-      item.read = true
-      if (item.detail) {
-        this.$no()
-      }
+    {
+      read: false,
+      title: '协议修订通知',
+      detail: '',
+      time: '2021-10-12 12:12',
+      content:
+        '你好，根据业务开展的实际情况，抖音近期更新了《抖音用户服务协议》部分条款的表述。你可以在“我”-“设置”页面中，查看更新后的协议全文。'
+    }
+  ]
+})
+
+onMounted(() => {
+  getData()
+})
+
+watch(
+  () => data.isShowLeftHover,
+  (newVal) => {
+    if (newVal) {
+      data.isShowMask = true
     }
   }
+)
+
+watch(
+  () => data.isShowRightHover,
+  (newVal) => {
+    if (newVal) {
+      data.isShowMask = true
+    }
+  }
+)
+
+watch(
+  () => data.isShowMask,
+  (newVal) => {
+    if (!newVal) {
+      data.isShowLeftHover = false
+      data.isShowRightHover = false
+    }
+  }
+)
+
+async function getData() {
+  data.loading = true
+  await _sleep(700)
+  data.loading = false
+  await nextTick()
+  // data.$refs.mainScroll.scrollBottom()
+}
+
+function goDetail(item) {
+  item.read = true
+  if (item.detail) {
+    _no()
+  }
 }
 </script>
 
diff --git a/src/pages/shop/GoodsDetail.vue b/src/pages/shop/GoodsDetail.vue
index c70400962..2ac983121 100644
--- a/src/pages/shop/GoodsDetail.vue
+++ b/src/pages/shop/GoodsDetail.vue
@@ -2,7 +2,7 @@
   <div class="goods-detail base-page" ref="page" @scroll="scroll">
     <header ref="header">
       <div class="top">
-        <Icon @click="$back()" icon="material-symbols-light:arrow-back-ios-new" />
+        <Icon @click="router.back()" icon="material-symbols-light:arrow-back-ios-new" />
         <div class="right">
           <div class="search">
             <Icon icon="jam:search" />
@@ -18,7 +18,7 @@
     </header>
     <header class="shadow" ref="headerShadow">
       <div class="top">
-        <Icon @click="$back()" icon="material-symbols-light:arrow-back-ios-new" />
+        <Icon @click="router.back()" icon="material-symbols-light:arrow-back-ios-new" />
         <div class="right">
           <div class="search">
             <Icon icon="jam:search" />
@@ -347,7 +347,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import SlideHorizontal from '@/components/slide/SlideHorizontal.vue'
 import SlideItem from '@/components/slide/SlideItem.vue'
 import { onMounted, onUnmounted, reactive, ref } from 'vue'
@@ -357,11 +357,13 @@ import { useBaseStore } from '@/store/pinia'
 import { recommendedShop } from '@/api/user'
 import WaterfallList from '@/components/WaterfallList.vue'
 import ScrollList from '@/components/ScrollList.vue'
+import { useRouter } from 'vue-router'
 
 defineOptions({
   name: 'GoodsDetail'
 })
 
+const router = useRouter()
 let activeIndexs = ref([])
 const nav = useNav()
 const store = useBaseStore()
@@ -382,6 +384,10 @@ function scroll() {
 
 const state = reactive({
   detail: {
+    price: '',
+    name: '',
+    sold: '',
+    real_price: '',
     imgs: []
   },
   index: 0,
diff --git a/src/pages/shop/Shop.vue b/src/pages/shop/Shop.vue
index 00abc08e4..1126e580e 100644
--- a/src/pages/shop/Shop.vue
+++ b/src/pages/shop/Shop.vue
@@ -112,7 +112,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup lang="tsx">
 import { useNav } from '@/utils/hooks/useNav'
 import { $no, _checkImgUrl } from '@/utils'
 import ScrollList from '@/components/ScrollList.vue'
diff --git a/src/pages/test/Test.vue b/src/pages/test/Test.vue
index f0b06f3ae..6425f6344 100644
--- a/src/pages/test/Test.vue
+++ b/src/pages/test/Test.vue
@@ -5,7 +5,7 @@
     <!--    <video ref="videoEl" :src="v1" controls></video>-->
   </div>
 </template>
-<script setup>
+<script setup lang="ts">
 import { onMounted, ref } from 'vue'
 
 defineOptions({
diff --git a/src/pages/test/Test4.vue b/src/pages/test/Test4.vue
index 9c6075c4b..f5f75fae1 100644
--- a/src/pages/test/Test4.vue
+++ b/src/pages/test/Test4.vue
@@ -5,30 +5,12 @@
     <VideoShare v-model="t" page-id="Test" />
   </div>
 </template>
-<script>
-import BaseButton from '../../components/BaseButton'
-import VideoShare from '../home/components/VideoShare'
+<script setup lang="ts">
+import BaseButton from '../../components/BaseButton.vue'
+import VideoShare from '../home/components/VideoShare.vue'
+import { ref } from 'vue'
 
-export default {
-  name: 'Test4',
-  components: {
-    BaseButton,
-    VideoShare
-  },
-  props: {
-    text: {
-      type: String,
-      default: '@喵嗷污说电影创作的原声'
-    }
-  },
-  data() {
-    return {
-      t: false
-    }
-  },
-  methods: {},
-  mounted() {}
-}
+const t = ref(false)
 </script>
 
 <style scoped lang="less">
diff --git a/src/router/index.js b/src/router/index.ts
similarity index 86%
rename from src/router/index.js
rename to src/router/index.ts
index c45eb429b..d8e165cfe 100644
--- a/src/router/index.js
+++ b/src/router/index.ts
@@ -17,7 +17,7 @@ const router = createRouter({
 router.beforeEach((to, from) => {
   const baseStore = useBaseStore()
   //footer下面的5个按钮，对跳不要用动画
-  let noAnimation = ['/', '/home', '/me', '/shop', '/message', '/publish', '/home/live', '/test']
+  const noAnimation = ['/', '/home', '/me', '/shop', '/message', '/publish', '/home/live', '/test']
   if (noAnimation.indexOf(from.path) !== -1 && noAnimation.indexOf(to.path) !== -1) {
     return true
   }
@@ -28,7 +28,7 @@ router.beforeEach((to, from) => {
 
   if (toDepth > fromDepth) {
     if (to.matched && to.matched.length) {
-      let toComponentName = to.matched[0].components.default.name
+      const toComponentName = to.matched[0].components?.default.name
       // store.commit('updateExcludeRoutes', {type: 'remove', value: toComponentName})
       baseStore.updateExcludeRoutes({ type: 'remove', value: toComponentName })
       // console.log('to', toComponentName)
@@ -37,7 +37,7 @@ router.beforeEach((to, from) => {
     }
   } else {
     if (from.matched && from.matched.length) {
-      let fromComponentName = from.matched[0].components.default.name
+      const fromComponentName = from.matched[0].components?.default.name
       // store.commit('updateExcludeRoutes', {type: 'add', value: fromComponentName})
       baseStore.updateExcludeRoutes({ type: 'add', value: fromComponentName })
 
diff --git a/src/router/routes.js b/src/router/routes.ts
similarity index 96%
rename from src/router/routes.js
rename to src/router/routes.ts
index b603629a8..98b200f7d 100644
--- a/src/router/routes.js
+++ b/src/router/routes.ts
@@ -1,8 +1,9 @@
-import Home from '../pages/home'
-import Test from '../pages/test/Test'
-import Test4 from '../pages/test/Test4'
+import Home from '../pages/home/index.vue'
+import Test from '../pages/test/Test.vue'
+import Test4 from '../pages/test/Test4.vue'
+import type { RouteRecordRaw } from 'vue-router'
 
-const routes = [
+const routes: RouteRecordRaw[] = [
   // {path: '/', redirect: '/attention'},
   { path: '/', redirect: '/home' },
   { path: '/test', component: Test },
diff --git a/src/store/pinia.js b/src/store/pinia.js
index 768b249ae..72e8635bb 100644
--- a/src/store/pinia.js
+++ b/src/store/pinia.js
@@ -18,6 +18,14 @@ export const useBaseStore = defineStore('base', {
       routeData: null,
       users: [],
       userinfo: {
+        nickname: '',
+        desc: '',
+        user_age: '',
+        signature: '',
+        unique_id: '',
+        province: '',
+        city: '',
+        gender: '',
         school: {
           name: '',
           department: null,
diff --git a/src/utils/const_var.js b/src/utils/const_var.js
index b2914afcc..fa098805b 100644
--- a/src/utils/const_var.js
+++ b/src/utils/const_var.js
@@ -47,7 +47,12 @@ export const SlideItemPlayStatus = {
 export const DefaultUser = {
   nickname: '',
   unique_id: '',
+  certification: '',
   short_id: '',
+  province: '',
+  city: '',
+  school: {},
+  uid: '',
   signature: '', //签名
   mplatform_followers_count: '', //粉丝
   following_count: '', //关注
diff --git a/src/utils/index.jsx b/src/utils/index.jsx
index 63ffb7c2b..704d2e6b8 100644
--- a/src/utils/index.jsx
+++ b/src/utils/index.jsx
@@ -427,6 +427,10 @@ const Utils = {
 
 export default Utils
 
+export function _dateFormat(val, type) {
+  return Utils.$dateFormat(val, type)
+}
+
 export function $no() {
   Utils.$no(arguments)
 }
@@ -435,8 +439,8 @@ export function $notice(val) {
   Utils.$notice(val)
 }
 
-export function _notice(val) {
-  Utils.$notice(val)
+export function _time(val) {
+  return Utils.$time(val)
 }
 
 export function _checkImgUrl(url) {
@@ -467,6 +471,9 @@ export function _getUserDouyinId(item) {
   return item.author.unique_id || item.author.short_id
 }
 
+/**
+ * @param {number} duration
+ */
 export function _sleep(duration) {
   return new Promise((resolve) => {
     setTimeout(resolve, duration)
@@ -499,3 +506,176 @@ export function sampleSize(arr, num) {
   }
   return list
 }
+
+export function _showLoading() {
+  const app = Vue.createApp({
+    render() {
+      return <Loading />
+    }
+  })
+  let parent = document.createElement('div')
+  parent.classList.add(...['dialog-ctn'])
+  document.body.append(parent)
+  app.mount(parent)
+}
+
+export function _hideLoading() {
+  let parent = document.querySelector('.dialog-ctn')
+  parent.remove()
+}
+
+export function _showSelectDialog(sexList, cb) {
+  let remove = () => {
+    let parent = document.querySelector('.dialog-ctn')
+    parent.classList.replace('fade-in', 'fade-out')
+    setTimeout(() => {
+      parent.remove()
+    }, 300)
+  }
+  let tempCb = (e) => {
+    remove()
+    cb(e)
+  }
+  const app = Vue.createApp({
+    render() {
+      return <SelectDialog onCancel={remove} list={sexList} onOk={tempCb} />
+    }
+  })
+  let parent = document.createElement('div')
+  parent.classList.add(...['dialog-ctn', 'fade-in'])
+  document.body.append(parent)
+  app.mount(parent)
+}
+
+export function _showSimpleConfirmDialog(title, okCb, cancelCb, okText, cancelText) {
+  if (!cancelCb) {
+    cancelCb = () => {}
+  }
+  let remove = () => {
+    let parent = document.querySelector('.dialog-ctn')
+    parent.classList.replace('fade-in', 'fade-out')
+    setTimeout(() => {
+      parent.remove()
+    }, 300)
+  }
+  let tempOkCb = (e) => {
+    remove()
+    okCb(e)
+  }
+  let tempCancelCb = (e) => {
+    remove()
+    cancelCb(e)
+  }
+  const app = Vue.createApp({
+    render() {
+      return (
+        <SimpleConfirmDialog
+          onCancel={tempCancelCb}
+          onDismiss={remove}
+          title={title}
+          okText={okText}
+          cancelText={cancelText}
+          onOk={tempOkCb}
+        />
+      )
+    }
+  })
+  let parent = document.createElement('div')
+  parent.classList.add(...['dialog-ctn', 'fade-in'])
+  document.body.append(parent)
+  app.mount(parent)
+}
+
+export function _showConfirmDialog(
+  title,
+  subtitle,
+  subtitleColor,
+  okCb,
+  cancelCb,
+  okText,
+  cancelText,
+  cancelTextColor
+) {
+  let remove = () => {
+    let parent = document.querySelector('.dialog-ctn')
+    parent.classList.replace('fade-in', 'fade-out')
+    setTimeout(() => {
+      parent.remove()
+    }, 300)
+  }
+  let tempOkCb = (e) => {
+    remove()
+    okCb && okCb(e)
+  }
+  let tempCancelCb = (e) => {
+    remove()
+    cancelCb && cancelCb(e)
+  }
+  const app = Vue.createApp({
+    render() {
+      return (
+        <ConfirmDialog
+          onCancel={tempCancelCb}
+          onDismiss={remove}
+          title={title}
+          subtitle={subtitle}
+          subtitleColor={subtitleColor}
+          cancelTextColor={cancelTextColor}
+          okText={okText}
+          cancelText={cancelText}
+          onOk={tempOkCb}
+        />
+      )
+    }
+  })
+  let parent = document.createElement('div')
+  parent.classList.add(...['dialog-ctn', 'fade-in'])
+  document.body.append(parent)
+  app.mount(parent)
+}
+
+export function _showNoticeDialog(title, subtitle, subtitleColor, cancelCb, cancelText) {
+  let remove = () => {
+    let parent = document.querySelector('.dialog-ctn')
+    parent.classList.replace('fade-in', 'fade-out')
+    setTimeout(() => {
+      parent.remove()
+    }, 300)
+  }
+  let tempCancelCb = (e) => {
+    remove()
+    cancelCb(e)
+  }
+  const app = Vue.createApp({
+    render() {
+      return (
+        <NoticeDialog
+          onCancel={tempCancelCb}
+          onDismiss={remove}
+          title={title}
+          subtitleColor={subtitleColor}
+          cancelText={cancelText}
+          subtitle={subtitle}
+        />
+      )
+    }
+  })
+  let parent = document.createElement('div')
+  parent.classList.add(...['dialog-ctn', 'fade-in'])
+  document.body.append(parent)
+  app.mount(parent)
+}
+
+export function _notice(val) {
+  let div = document.createElement('div')
+  div.classList.add('global-notice')
+  div.textContent = val
+  document.body.append(div)
+  setTimeout(() => {
+    document.body.removeChild(div)
+  }, 1000)
+}
+
+export function _no() {
+  this.$notice('未实现')
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 000000000..22420289c
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,23 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "src/**/__tests__/*"
+  ],
+  "compilerOptions": {
+    "allowJs": true,
+    "strict": false,
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..66b5e5703
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 000000000..f09406303
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
diff --git a/vite.config.js b/vite.config.ts
similarity index 91%
rename from vite.config.js
rename to vite.config.ts
index 05e784d28..c31bf23e4 100644
--- a/vite.config.js
+++ b/vite.config.ts
@@ -1,20 +1,23 @@
-import { defineConfig } from 'vite'
+import { defineConfig, PluginOption } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import VueJsx from '@vitejs/plugin-vue-jsx'
 import { resolve } from 'path'
 import { visualizer } from 'rollup-plugin-visualizer'
 import DefineOptions from 'unplugin-vue-define-options/vite' // 引入插件
 import { Plugin as importToCDN } from 'vite-plugin-cdn-import'
+import commonjs from 'vite-plugin-commonjs'
+import { fileURLToPath, URL } from 'node:url'
+
 // import viteImagemin from 'vite-plugin-imagemin'
 // import viteCompression from 'vite-plugin-compression'
 
-function pathResolve(dir) {
-  return resolve(__dirname, '.', dir)
-}
-
 const lifecycle = process.env.npm_lifecycle_event
 
-// https://vitejs.dev/config/
+// {
+//   name: 'axios',
+//   var: 'axios',
+//   path: 'https://lib.baomitu.com/axios/1.6.8/axios.min.js'
+// },
 export default defineConfig({
   base: './',
   envDir: 'env',
@@ -29,7 +32,7 @@ export default defineConfig({
     //   //   exclude: [/node_modules/, /jQuery\.js/]
     //   // }
     // }),
-    lifecycle === 'report' ? visualizer({ open: false }) : null,
+    lifecycle === 'report' ? (visualizer({ open: false }) as any as PluginOption) : null,
     DefineOptions(),
     Vue(),
     VueJsx(),
@@ -55,11 +58,7 @@ export default defineConfig({
           var: 'Mock',
           path: 'https://lib.baomitu.com/Mock.js/1.0.1-beta3/mock-min.js'
         },
-        {
-          name: 'axios',
-          var: 'axios',
-          path: 'https://lib.baomitu.com/axios/1.6.8/axios.min.js'
-        },
+
         {
           name: 'jquery',
           var: '$',
@@ -109,7 +108,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': pathResolve('src')
+      '@': fileURLToPath(new URL('./src', import.meta.url))
     },
     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
   },
@@ -121,7 +120,7 @@ export default defineConfig({
         manualChunks(id, { getModuleInfo }) {
           const reg = /(.*)\/src\/components\/(.*)/
           if (reg.test(id)) {
-            const importersLen = getModuleInfo(id).importers.length
+            const importersLen = getModuleInfo(id)?.importers.length ?? 0
             // 被多处引用
             if (importersLen > 1) return 'common'
           }