From 67fd433635eb49187f544600381c59feb783ccbf Mon Sep 17 00:00:00 2001
From: QuentinHsu <xuquentinyang@gmail.com>
Date: Thu, 31 Aug 2023 18:46:25 +0800
Subject: [PATCH] perf(global): format code magic (#82)

---
 .eslintrc         |  13 ++-
 .prettierrc.yaml  |  38 ---------
 package.json      |   4 +-
 pnpm-lock.yaml    | 211 ++++++++++++++++++++++++++++++++++++++++++++++
 src/views/Sub.vue |  71 ++++++++--------
 5 files changed, 259 insertions(+), 78 deletions(-)
 delete mode 100644 .prettierrc.yaml

diff --git a/.eslintrc b/.eslintrc
index 63479e1c8..0e759445c 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,9 +1,11 @@
 {
   "extends": [
-    "@antfu"
+    "@antfu",
+    "prettier"
   ],
   "plugins": [
-    "simple-import-sort"
+    "simple-import-sort",
+    "prettier"
   ],
   "rules": {
     "simple-import-sort/imports": "error",
@@ -27,6 +29,9 @@
     "@typescript-eslint/semi": [
       "error",
       "always"
-    ]
+    ],
+    "prettier/prettier": ["error", {
+      "htmlWhitespaceSensitivity": "ignore" // 根据显示样式决定 html 要不要折行
+    }]
   }
-}
+}
\ No newline at end of file
diff --git a/.prettierrc.yaml b/.prettierrc.yaml
deleted file mode 100644
index 6be74d67d..000000000
--- a/.prettierrc.yaml
+++ /dev/null
@@ -1,38 +0,0 @@
-printWidth :                 80      # 显示宽度
-tabWidth :                   2       # tab 宽度
-useTabs :                    false   # 使用 tab 而不是空格
-semi :                       true   # 使用分号
-singleQuote :                true    # 使用单引号
-jsxSingleQuote :             false   # 在 JSX 中使用单引号而不是双引号
-bracketSpacing :             true    # 在对象花括号内打印空格  true { foo: bar }  false {foo: bar}
-arrowParens :                "avoid" # 箭头函数只有一个参数的时候的周围的括号   "always" - (x) => x  "avoid" - x => x
-embeddedLanguageFormatting : "auto"  # "auto" - 嵌入代码如果 Prettier 可以识别则格式化它  "off" - 永远不要自动格式化
-bracketSameLine :            false   # 多行属性的 HTML（HTML、JSX、Vue、Angular）标签的 ">" 放在最后一行的末尾，而不是单独在下一行（不适用于自闭合元素）
-#htmlWhitespaceSensitivity : "strict"
-vueIndentScriptAndStyle :    true    # 在 Vue 文件中缩进 <script> 和 <style> 标签
-insertPragma :               false   # 是否插入一个特殊 @format 标记指定文件已使用 Prettier 格式化
-
-# 行尾风格
-# "lf"   – 仅换行 ( \n)，常见于 Linux 和 macOS 以及 git repos 内部
-# "crlf" - 回车 + 换行字符 ( \r\n)，常见于 Windows
-# "cr"   - 仅回车字符 ( \r)，很少使用
-# "auto" - 保持现有的行尾（一个文件中的混合值通过查看第一行之后使用的内容进行标准化）
-endOfLine :                  "lf"
-
-# 需要提供注释才允许格式化
-# /**
-# * @prettier  或  @format
-# */
-requirePragma :              false
-
-# 对象属性的引号风格
-# "as-needed"    仅在需要时在对象属性周围添加引号
-# "consistent"   如果对象中至少一个属性需要引号，则所有属性都使用引号
-# "preserve"     尊重对象属性中的引号
-quoteProps :                 "as-needed"
-
-# 在多行逗号分隔的句法结构中尽可能打印尾随逗号
-# "es5"          在 ES5 中有效的尾随逗号（对象、数组等），TypeScript 中的类型参数中没有尾随逗号
-# "none"         没有尾随逗号。
-# "all"          尽可能使用尾随逗号（包括函数参数和调用）。要运行，以这种方式格式化的 JavaScript 代码需要一个支持 ES2017（Node.js 8+ 或现代浏览器）或下级编译的引擎。这还可以在 TypeScript 中的类型参数中启用尾随逗号（自 2018 年 1 月发布的 TypeScript 2.7 起支持）
-trailingComma :              "es5"
diff --git a/package.json b/package.json
index e96bb02e6..2189a0e6e 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,10 @@
 {
   "name": "sub-store-front-end",
-  "private": true,
   "version": "0.0.1",
+  "private": true,
   "scripts": {
     "dev": "vite --host",
+    "dev:production": "vite --host --mode production",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview --host"
   },
@@ -43,6 +44,7 @@
     "consola": "^2.15.3",
     "eslint": "^8.47.0",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "fast-glob": "^3.2.11",
     "husky": "^8.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 89f71424c..d9d6ba416 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -106,6 +106,9 @@ devDependencies:
   eslint-config-prettier:
     specifier: ^9.0.0
     version: 9.0.0(eslint@8.47.0)
+  eslint-plugin-prettier:
+    specifier: ^5.0.0
+    version: 5.0.0(eslint-config-prettier@9.0.0)(eslint@8.47.0)(prettier@3.0.3)
   eslint-plugin-simple-import-sort:
     specifier: ^10.0.0
     version: 10.0.0(eslint@8.47.0)
@@ -1831,6 +1834,18 @@ packages:
       sass: 1.53.0
     dev: false
 
+  /@pkgr/utils@2.4.2:
+    resolution: {integrity: sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    dependencies:
+      cross-spawn: 7.0.3
+      fast-glob: 3.3.1
+      is-glob: 4.0.3
+      open: 9.1.0
+      picocolors: 1.0.0
+      tslib: 2.6.1
+    dev: true
+
   /@rollup/plugin-babel@5.3.1(@babel/core@7.22.10)(rollup@2.79.1):
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
@@ -2682,6 +2697,11 @@ packages:
       pascalcase: 0.1.1
     dev: true
 
+  /big-integer@1.6.51:
+    resolution: {integrity: sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==}
+    engines: {node: '>=0.6'}
+    dev: true
+
   /big.js@5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
     dev: true
@@ -2698,6 +2718,13 @@ packages:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
     dev: true
 
+  /bplist-parser@0.2.0:
+    resolution: {integrity: sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==}
+    engines: {node: '>= 5.10.0'}
+    dependencies:
+      big-integer: 1.6.51
+    dev: true
+
   /brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
     dependencies:
@@ -2760,6 +2787,13 @@ packages:
       semver: 7.5.4
     dev: true
 
+  /bundle-name@3.0.0:
+    resolution: {integrity: sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==}
+    engines: {node: '>=12'}
+    dependencies:
+      run-applescript: 5.0.0
+    dev: true
+
   /cache-base@1.0.1:
     resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==}
     engines: {node: '>=0.10.0'}
@@ -3228,6 +3262,29 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /default-browser-id@3.0.0:
+    resolution: {integrity: sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==}
+    engines: {node: '>=12'}
+    dependencies:
+      bplist-parser: 0.2.0
+      untildify: 4.0.0
+    dev: true
+
+  /default-browser@4.0.0:
+    resolution: {integrity: sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      bundle-name: 3.0.0
+      default-browser-id: 3.0.0
+      execa: 7.2.0
+      titleize: 3.0.0
+    dev: true
+
+  /define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+    dev: true
+
   /define-properties@1.2.0:
     resolution: {integrity: sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==}
     engines: {node: '>= 0.4'}
@@ -3875,6 +3932,27 @@ packages:
     engines: {node: '>=5.0.0'}
     dev: true
 
+  /eslint-plugin-prettier@5.0.0(eslint-config-prettier@9.0.0)(eslint@8.47.0)(prettier@3.0.3):
+    resolution: {integrity: sha512-AgaZCVuYDXHUGxj/ZGu1u8H8CYgDY3iG6w5kUFw4AzMVXzB7VvbKgYR4nATIN+OvUrghMbiDLeimVjVY5ilq3w==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      '@types/eslint': '>=8.0.0'
+      eslint: '>=8.0.0'
+      eslint-config-prettier: '*'
+      prettier: '>=3.0.0'
+    peerDependenciesMeta:
+      '@types/eslint':
+        optional: true
+      eslint-config-prettier:
+        optional: true
+    dependencies:
+      eslint: 8.47.0
+      eslint-config-prettier: 9.0.0(eslint@8.47.0)
+      prettier: 3.0.3
+      prettier-linter-helpers: 1.0.0
+      synckit: 0.8.5
+    dev: true
+
   /eslint-plugin-promise@6.1.1(eslint@8.47.0):
     resolution: {integrity: sha512-tjqWDwVZQo7UIPMeDReOpUgHCmCiH+ePnVT+5zVapL0uuHnegBUs2smM13CzOs2Xb5+MHMRFTs9v24yjba4Oig==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4101,6 +4179,21 @@ packages:
       strip-final-newline: 2.0.0
     dev: true
 
+  /execa@7.2.0:
+    resolution: {integrity: sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==}
+    engines: {node: ^14.18.0 || ^16.14.0 || >=18.0.0}
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 6.0.1
+      human-signals: 4.3.1
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.1.0
+      onetime: 6.0.0
+      signal-exit: 3.0.7
+      strip-final-newline: 3.0.0
+    dev: true
+
   /expand-brackets@2.1.4:
     resolution: {integrity: sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==}
     engines: {node: '>=0.10.0'}
@@ -4151,6 +4244,10 @@ packages:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
 
+  /fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+    dev: true
+
   /fast-glob@3.2.11:
     resolution: {integrity: sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==}
     engines: {node: '>=8.6.0'}
@@ -4613,6 +4710,11 @@ packages:
     engines: {node: '>=10.17.0'}
     dev: true
 
+  /human-signals@4.3.1:
+    resolution: {integrity: sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==}
+    engines: {node: '>=14.18.0'}
+    dev: true
+
   /husky@8.0.1:
     resolution: {integrity: sha512-xs7/chUH/CKdOCs7Zy0Aev9e/dKOMZf3K1Az1nar3tzlv0jfqnYtu235bstsWTmXOR0EfINrPa97yy4Lz6RiKw==}
     engines: {node: '>=14'}
@@ -4800,6 +4902,18 @@ packages:
       kind-of: 6.0.3
     dev: true
 
+  /is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dev: true
+
+  /is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+    dev: true
+
   /is-extendable@0.1.1:
     resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
     engines: {node: '>=0.10.0'}
@@ -4830,6 +4944,14 @@ packages:
     resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
     dev: true
 
+  /is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+    dependencies:
+      is-docker: 3.0.0
+    dev: true
+
   /is-module@1.0.0:
     resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
     dev: true
@@ -4908,6 +5030,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: true
+
   /is-string@1.0.7:
     resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
     engines: {node: '>= 0.4'}
@@ -4947,6 +5074,13 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+    dependencies:
+      is-docker: 2.2.1
+    dev: true
+
   /isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
     dev: true
@@ -5386,6 +5520,11 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+    dev: true
+
   /min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -5512,6 +5651,13 @@ packages:
       path-key: 3.1.1
     dev: true
 
+  /npm-run-path@5.1.0:
+    resolution: {integrity: sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      path-key: 4.0.0
+    dev: true
+
   /nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
     dependencies:
@@ -5578,6 +5724,23 @@ packages:
       mimic-fn: 2.1.0
     dev: true
 
+  /onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      mimic-fn: 4.0.0
+    dev: true
+
+  /open@9.1.0:
+    resolution: {integrity: sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      default-browser: 4.0.0
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      is-wsl: 2.2.0
+    dev: true
+
   /optionator@0.9.3:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
     engines: {node: '>= 0.8.0'}
@@ -5688,6 +5851,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+    dev: true
+
   /path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
@@ -5814,6 +5982,19 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
+  /prettier-linter-helpers@1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      fast-diff: 1.3.0
+    dev: true
+
+  /prettier@3.0.3:
+    resolution: {integrity: sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
   /pretty-bytes@5.6.0:
     resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
     engines: {node: '>=6'}
@@ -6077,6 +6258,13 @@ packages:
     optionalDependencies:
       fsevents: 2.3.2
 
+  /run-applescript@5.0.0:
+    resolution: {integrity: sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==}
+    engines: {node: '>=12'}
+    dependencies:
+      execa: 5.1.1
+    dev: true
+
   /run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
@@ -6425,6 +6613,11 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+    dev: true
+
   /strip-indent@3.0.0:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
@@ -6500,6 +6693,14 @@ packages:
       stable: 0.1.8
     dev: true
 
+  /synckit@0.8.5:
+    resolution: {integrity: sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    dependencies:
+      '@pkgr/utils': 2.4.2
+      tslib: 2.6.1
+    dev: true
+
   /systemjs@6.14.1:
     resolution: {integrity: sha512-8ftwWd+XnQtZ/aGbatrN4QFNGrKJzmbtixW+ODpci7pyoTajg4sonPP8aFLESAcuVxaC1FyDESt+SpfFCH9rZQ==}
     dev: true
@@ -6552,6 +6753,11 @@ packages:
     resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
     dev: false
 
+  /titleize@3.0.0:
+    resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
+    engines: {node: '>=12'}
+    dev: true
+
   /to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -6802,6 +7008,11 @@ packages:
       isobject: 3.0.1
     dev: true
 
+  /untildify@4.0.0:
+    resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
+    engines: {node: '>=8'}
+    dev: true
+
   /upath@1.2.0:
     resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
     engines: {node: '>=4'}
diff --git a/src/views/Sub.vue b/src/views/Sub.vue
index 0f38a1199..15c9c8b3b 100644
--- a/src/views/Sub.vue
+++ b/src/views/Sub.vue
@@ -1,23 +1,23 @@
 <template>
   <div
+    style="overflow: hidden"
     @touchstart="onTouchStart"
     @touchmove="onTouchMove"
     @touchend="onTouchEnd"
-    style="overflow: hidden"
   >
-    <!--添加订阅弹窗-->
+    <!-- 添加订阅弹窗 -->
     <div>
       <nut-popup
+        v-model:visible="addSubBtnIsVisible"
         pop-class="add-sub-popup"
         lock-scroll
         position="bottom"
         :style="{
-          height: bottomSafeArea + 200 + 'px',
+          height: `${bottomSafeArea + 200}px`,
           padding: '20px 12px 0 12px',
         }"
         close-icon="close-little"
         z-index="11000"
-        v-model:visible="addSubBtnIsVisible"
         closeable
         round
       >
@@ -38,9 +38,9 @@
         </ul>
       </nut-popup>
     </div>
-    <!--浮动按钮-->
+    <!-- 浮动按钮 -->
     <Teleport to="body">
-      <div class="drag-btn-wrapper" v-if="hasSubs || hasCollections">
+      <div v-if="hasSubs || hasCollections" class="drag-btn-wrapper">
         <nut-drag
           :attract="true"
           :boundary="{
@@ -64,8 +64,8 @@
       </div>
     </Teleport>
 
-    <!--页面内容-->
-    <!--有数据-->
+    <!-- 页面内容 -->
+    <!-- 有数据 -->
     <div class="subs-list-wrapper">
       <div v-if="hasSubs">
         <div class="sticky-title-wrappers">
@@ -74,13 +74,10 @@
 
         <draggable
           v-model="subs"
-          @change="changeSubs"
-          @start="handleDragStart"
-          @end="handleDragEnd"
-          itemKey="name"
+          item-key="name"
           :scroll-sensitivity="200"
           :force-fallback="true"
-          :scrollSpeed="8"
+          :scroll-speed="8"
           :scroll="true"
           v-bind="{
             animation: 200,
@@ -89,6 +86,9 @@
             chosenClass: 'chosensub',
             handle: 'div',
           }"
+          @change="changeSubs"
+          @start="handleDragStart"
+          @end="handleDragEnd"
         >
           <template #item="{ element }">
             <div :key="element.name" class="draggable-item">
@@ -109,13 +109,10 @@
 
         <draggable
           v-model="collections"
-          @change="changeCollections"
-          @start="handleDragStart"
-          @end="handleDragEnd"
-          itemKey="name"
+          item-key="name"
           :scroll-sensitivity="200"
           :force-fallback="true"
-          :scrollSpeed="8"
+          :scroll-speed="8"
           :scroll="true"
           v-bind="{
             animation: 200,
@@ -124,6 +121,9 @@
             chosenClass: 'chosensub',
             handle: 'div',
           }"
+          @change="changeCollections"
+          @start="handleDragStart"
+          @end="handleDragEnd"
         >
           <template #item="{ element }">
             <div :key="element.name" class="draggable-item">
@@ -137,7 +137,7 @@
         </draggable>
       </div>
     </div>
-    <!--没有数据-->
+    <!-- 没有数据 -->
     <div
       v-if="!isLoading && fetchResult && !hasSubs && !hasCollections"
       class="no-data-wrapper"
@@ -148,12 +148,12 @@
           <p>{{ $t(`subPage.emptySub.desc`) }}</p>
         </template>
       </nut-empty>
-      <nut-button @click="addSubBtnIsVisible = true" type="primary"
-        >{{ $t(`subPage.emptySub.btn`) }}
+      <nut-button type="primary" @click="addSubBtnIsVisible = true">
+        {{ $t(`subPage.emptySub.btn`) }}
       </nut-button>
     </div>
 
-    <!--数据加载失败-->
+    <!-- 数据加载失败 -->
     <div v-if="!isLoading && !fetchResult" class="no-data-wrapper">
       <nut-empty image="error" style="padding: 32px 30px">
         <template #description>
@@ -165,29 +165,27 @@
             <a
               href="https://t.me/cool_scripts"
               style="color: var(--primary-color)"
-              >Cool Scripts</a
             >
+              Cool Scripts
+            </a>
           </p>
         </template>
       </nut-empty>
-      <nut-button icon="refresh" type="primary" @click="refresh">{{
-        $t(`subPage.loadFailed.btn`)
-      }}</nut-button>
+      <nut-button icon="refresh" type="primary" @click="refresh">
+        {{ $t(`subPage.loadFailed.btn`) }}
+      </nut-button>
       <a
         href="https://www.notion.so/Sub-Store-6259586994d34c11a4ced5c406264b46"
         target="_blank"
-        ><span>{{ $t(`subPage.loadFailed.doc`) }}</span>
-        <font-awesome-icon icon="fa-solid fa-arrow-up-right-from-square"
-      /></a>
+      >
+        <span>{{ $t(`subPage.loadFailed.doc`) }}</span>
+        <font-awesome-icon icon="fa-solid fa-arrow-up-right-from-square" />
+      </a>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import SubListItem from '@/components/SubListItem.vue';
-  import { useGlobalStore } from '@/store/global';
-  import { useSubsStore } from '@/store/subs';
-  import { initStores } from '@/utils/initApp';
   import { storeToRefs } from 'pinia';
   import { ref, toRaw } from 'vue';
   import draggable from 'vuedraggable';
@@ -195,8 +193,12 @@
   // import { useAppNotifyStore } from '@/store/appNotify';
   // import { Dialog, Toast } from '@nutui/nutui';
   // const { showNotify } = useAppNotifyStore();
-
   import { useSubsApi } from '@/api/subs';
+  import SubListItem from '@/components/SubListItem.vue';
+  import { useGlobalStore } from '@/store/global';
+  import { useSubsStore } from '@/store/subs';
+  import { initStores } from '@/utils/initApp';
+
   const subsApi = useSubsApi();
 
   const addSubBtnIsVisible = ref(false);
@@ -242,7 +244,6 @@
   //   subs.value = newSub;
   // };
   const changeSubs = async () => {
-    console.log('2233');
     await subsApi.sortSub(
       'subs',
       JSON.parse(JSON.stringify(toRaw(subs.value)))