feat: temp save

.eslintrc

@@ -14,5 +14,8 @@
   "parserOptions": {
     "parser": "@typescript-eslint/parser",
     "sourceType": "module"
+  },
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": "off"
   }
 }

package.json

@@ -21,6 +21,7 @@
     "@heroicons/vue": "^2.1.3",
     "@popperjs/core": "^2.11.8",
     "@vicons/ionicons5": "^0.12.0",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
     "@vueuse/core": "^11.2.0",
     "alova": "^3.2.0",
     "body-scroll-lock": "^4.0.0-beta.0",

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@vicons/ionicons5':
         specifier: ^0.12.0
         version: 0.12.0
+      '@vitejs/plugin-vue-jsx':
+        specifier: ^4.0.1
+        version: 4.0.1(vite@5.4.9(@types/node@20.16.14)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
       '@vueuse/core':
         specifier: ^11.2.0
         version: 11.2.0(vue@3.5.12(typescript@5.6.3))
@@ -210,6 +213,10 @@ packages:
     resolution: {integrity: sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/code-frame@7.26.2':
+    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/compat-data@7.25.8':
     resolution: {integrity: sha512-ZsysZyXY4Tlx+Q53XdnOFmqwfB9QDTHYxaZYajWRoBLuLEAwI2UIbtxOjWh/cFaa9IKUlcB+DDuoskLuKu56JA==}
     engines: {node: '>=6.9.0'}
@@ -222,10 +229,18 @@ packages:
     resolution: {integrity: sha512-5Dqpl5fyV9pIAD62yK9P7fcA768uVPUyrQmqpqstHWgMma4feF1x/oFysBCVZLY5wJ2GkMUCdsNDnGZrPoR6rA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/generator@7.26.2':
+    resolution: {integrity: sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-annotate-as-pure@7.25.7':
     resolution: {integrity: sha512-4xwU8StnqnlIhhioZf1tqnVWeQ9pvH/ujS8hRfw/WOza+/a+1qv69BWNy+oY231maTCWgKWhfBU7kDpsds6zAA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-annotate-as-pure@7.25.9':
+    resolution: {integrity: sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-builder-binary-assignment-operator-visitor@7.25.7':
     resolution: {integrity: sha512-12xfNeKNH7jubQNm7PAkzlLwEmCs1tfuX3UjIw6vP6QXi+leKh6+LyC/+Ed4EIQermwd58wsyh070yjDHFlNGg==}
     engines: {node: '>=6.9.0'}
@@ -240,6 +255,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
+  '@babel/helper-create-class-features-plugin@7.25.9':
+    resolution: {integrity: sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
   '@babel/helper-create-regexp-features-plugin@7.25.7':
     resolution: {integrity: sha512-byHhumTj/X47wJ6C6eLpK7wW/WBEcnUeb7D0FNc/jFQnQVw7DOso3Zz5u9x/zLrFVkHa89ZGDbkAa1D54NdrCQ==}
     engines: {node: '>=6.9.0'}
@@ -255,6 +276,10 @@ packages:
     resolution: {integrity: sha512-O31Ssjd5K6lPbTX9AAYpSKrZmLeagt9uwschJd+Ixo6QiRyfpvgtVQp8qrDR9UNFjZ8+DO34ZkdrN+BnPXemeA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-member-expression-to-functions@7.25.9':
+    resolution: {integrity: sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-module-imports@7.25.7':
     resolution: {integrity: sha512-o0xCgpNmRohmnoWKQ0Ij8IdddjyBFE4T2kagL/x6M3+4zUgc+4qTOUBoNe4XxDskt1HPKO007ZPiMgLDq2s7Kw==}
     engines: {node: '>=6.9.0'}
@@ -269,10 +294,18 @@ packages:
     resolution: {integrity: sha512-VAwcwuYhv/AT+Vfr28c9y6SHzTan1ryqrydSTFGjU0uDJHw3uZ+PduI8plCLkRsDnqK2DMEDmwrOQRsK/Ykjng==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-optimise-call-expression@7.25.9':
+    resolution: {integrity: sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-plugin-utils@7.25.7':
     resolution: {integrity: sha512-eaPZai0PiqCi09pPs3pAFfl/zYgGaE6IdXtYvmf0qlcDTd3WCtO7JWCcRd64e0EQrcYgiHibEZnOGsSY4QSgaw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-plugin-utils@7.25.9':
+    resolution: {integrity: sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-remap-async-to-generator@7.25.7':
     resolution: {integrity: sha512-kRGE89hLnPfcz6fTrlNU+uhgcwv0mBE4Gv3P9Ke9kLVJYpi4AMVVEElXvB5CabrPZW4nCM8P8UyyjrzCM0O2sw==}
     engines: {node: '>=6.9.0'}
@@ -285,6 +318,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
+  '@babel/helper-replace-supers@7.25.9':
+    resolution: {integrity: sha512-IiDqTOTBQy0sWyeXyGSC5TBJpGFXBkRynjBeXsvbhQFKj2viwJC76Epz35YLU1fpe/Am6Vppb7W7zM4fPQzLsQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
   '@babel/helper-simple-access@7.25.7':
     resolution: {integrity: sha512-FPGAkJmyoChQeM+ruBGIDyrT2tKfZJO8NcxdC+CWNJi7N8/rZpSxK7yvBJ5O/nF1gfu5KzN7VKG3YVSLFfRSxQ==}
     engines: {node: '>=6.9.0'}
@@ -293,14 +332,26 @@ packages:
     resolution: {integrity: sha512-pPbNbchZBkPMD50K0p3JGcFMNLVUCuU/ABybm/PGNj4JiHrpmNyqqCphBk4i19xXtNV0JhldQJJtbSW5aUvbyA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-skip-transparent-expression-wrappers@7.25.9':
+    resolution: {integrity: sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-string-parser@7.25.7':
     resolution: {integrity: sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-string-parser@7.25.9':
+    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-identifier@7.25.7':
     resolution: {integrity: sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-option@7.25.7':
     resolution: {integrity: sha512-ytbPLsm+GjArDYXJ8Ydr1c/KJuutjF2besPNbIZnZ6MKUxi/uTA22t2ymmA4WFjZFpjiAMO0xuuJPqK2nvDVfQ==}
     engines: {node: '>=6.9.0'}
@@ -322,6 +373,11 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.26.2':
+    resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.7':
     resolution: {integrity: sha512-UV9Lg53zyebzD1DwQoT9mzkEKa922LNUp5YkTJ6Uta0RbyXaQNUgcvSt7qIu1PpPzVb6rd10OVNTzkyBGeVmxQ==}
     engines: {node: '>=6.9.0'}
@@ -395,6 +451,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-syntax-typescript@7.25.9':
+    resolution: {integrity: sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-syntax-unicode-sets-regex@7.18.6':
     resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==}
     engines: {node: '>=6.9.0'}
@@ -701,6 +763,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-transform-typescript@7.25.9':
+    resolution: {integrity: sha512-7PbZQZP50tzv2KGGnhh82GSyMB01yKY9scIjf1a+GfZCtInOWqUH5+1EBU4t9fyR5Oykkkc9vFTs4OHrhHXljQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-transform-unicode-escapes@7.25.7':
     resolution: {integrity: sha512-BN87D7KpbdiABA+t3HbVqHzKWUDN3dymLaTnPFAMyc8lV+KN3+YzNhVRNdinaCPA4AUqx7ubXbQ9shRjYBl3SQ==}
     engines: {node: '>=6.9.0'}
@@ -750,14 +818,26 @@ packages:
     resolution: {integrity: sha512-wRwtAgI3bAS+JGU2upWNL9lSlDcRCqD05BZ1n3X2ONLH1WilFP6O1otQjeMK/1g0pvYcXC7b/qVUB1keofjtZA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/template@7.25.9':
+    resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/traverse@7.25.7':
     resolution: {integrity: sha512-jatJPT1Zjqvh/1FyJs6qAHL+Dzb7sTb+xr7Q+gM1b+1oBsMsQQ4FkVKb6dFlJvLlVssqkRzV05Jzervt9yhnzg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/traverse@7.25.9':
+    resolution: {integrity: sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.25.8':
     resolution: {integrity: sha512-JWtuCu8VQsMladxVz/P4HzHUGCAwpuqacmowgXFs5XjxIgKuNjnLokQzuVjlTvIzODaDmpjT3oxcC48vyk9EWg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.26.0':
+    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
+    engines: {node: '>=6.9.0'}
+
   '@badeball/cypress-configuration@6.1.1':
     resolution: {integrity: sha512-0IcJFMiCRo33Ofrvxxojt5QRJWyxApymHuuy981FeXnOGz4UsWKgr/hRupeXkw2cKXvah+j+880kXliygxPOSQ==}
 
@@ -1897,6 +1977,13 @@ packages:
   '@vicons/ionicons5@0.12.0':
     resolution: {integrity: sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA==}
 
+  '@vitejs/plugin-vue-jsx@4.0.1':
+    resolution: {integrity: sha512-7mg9HFGnFHMEwCdB6AY83cVK4A6sCqnrjFYF4WIlebYAQVVJ/sC/CiTruVdrRlhrFoeZ8rlMxY9wYpPTIRhhAg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0
+      vue: ^3.0.0
+
   '@vitejs/plugin-vue@5.1.4':
     resolution: {integrity: sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -1938,6 +2025,22 @@ packages:
   '@volar/typescript@2.4.6':
     resolution: {integrity: sha512-NMIrA7y5OOqddL9VtngPWYmdQU03htNKFtAYidbYfWA0TOhyGVd9tfcP4TsLWQ+RBWDZCbBqsr8xzU0ZOxYTCQ==}
 
+  '@vue/babel-helper-vue-transform-on@1.2.5':
+    resolution: {integrity: sha512-lOz4t39ZdmU4DJAa2hwPYmKc8EsuGa2U0L9KaZaOJUt0UwQNjNA3AZTq6uEivhOKhhG1Wvy96SvYBoFmCg3uuw==}
+
+  '@vue/babel-plugin-jsx@1.2.5':
+    resolution: {integrity: sha512-zTrNmOd4939H9KsRIGmmzn3q2zvv1mjxkYZHgqHZgDrXz5B1Q3WyGEjO2f+JrmKghvl1JIRcvo63LgM1kH5zFg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+
+  '@vue/babel-plugin-resolve-type@1.2.5':
+    resolution: {integrity: sha512-U/ibkQrf5sx0XXRnUZD1mo5F7PkpKyTbfXM3a3rC4YnUz6crHEz9Jg09jzzL6QYlXNto/9CePdOg/c87O4Nlfg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@vue/compiler-core@3.5.12':
     resolution: {integrity: sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==}
 
@@ -5323,6 +5426,12 @@ snapshots:
       '@babel/highlight': 7.25.7
       picocolors: 1.1.1
 
+  '@babel/code-frame@7.26.2':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.25.9
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
   '@babel/compat-data@7.25.8': {}
 
   '@babel/core@7.25.8':
@@ -5352,10 +5461,22 @@ snapshots:
       '@jridgewell/trace-mapping': 0.3.25
       jsesc: 3.0.2
 
+  '@babel/generator@7.26.2':
+    dependencies:
+      '@babel/parser': 7.26.2
+      '@babel/types': 7.26.0
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+      jsesc: 3.0.2
+
   '@babel/helper-annotate-as-pure@7.25.7':
     dependencies:
       '@babel/types': 7.25.8
 
+  '@babel/helper-annotate-as-pure@7.25.9':
+    dependencies:
+      '@babel/types': 7.26.0
+
   '@babel/helper-builder-binary-assignment-operator-visitor@7.25.7':
     dependencies:
       '@babel/traverse': 7.25.7
@@ -5384,6 +5505,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/helper-create-class-features-plugin@7.25.9(@babel/core@7.25.8)':
+    dependencies:
+      '@babel/core': 7.25.8
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-member-expression-to-functions': 7.25.9
+      '@babel/helper-optimise-call-expression': 7.25.9
+      '@babel/helper-replace-supers': 7.25.9(@babel/core@7.25.8)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+      '@babel/traverse': 7.25.9
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-create-regexp-features-plugin@7.25.7(@babel/core@7.25.8)':
     dependencies:
       '@babel/core': 7.25.8
@@ -5409,6 +5543,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/helper-member-expression-to-functions@7.25.9':
+    dependencies:
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-module-imports@7.25.7':
     dependencies:
       '@babel/traverse': 7.25.7
@@ -5430,8 +5571,14 @@ snapshots:
     dependencies:
       '@babel/types': 7.25.8
 
+  '@babel/helper-optimise-call-expression@7.25.9':
+    dependencies:
+      '@babel/types': 7.26.0
+
   '@babel/helper-plugin-utils@7.25.7': {}
 
+  '@babel/helper-plugin-utils@7.25.9': {}
+
   '@babel/helper-remap-async-to-generator@7.25.7(@babel/core@7.25.8)':
     dependencies:
       '@babel/core': 7.25.8
@@ -5450,6 +5597,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/helper-replace-supers@7.25.9(@babel/core@7.25.8)':
+    dependencies:
+      '@babel/core': 7.25.8
+      '@babel/helper-member-expression-to-functions': 7.25.9
+      '@babel/helper-optimise-call-expression': 7.25.9
+      '@babel/traverse': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-simple-access@7.25.7':
     dependencies:
       '@babel/traverse': 7.25.7
@@ -5464,10 +5620,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/helper-skip-transparent-expression-wrappers@7.25.9':
+    dependencies:
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-string-parser@7.25.7': {}
 
+  '@babel/helper-string-parser@7.25.9': {}
+
   '@babel/helper-validator-identifier@7.25.7': {}
 
+  '@babel/helper-validator-identifier@7.25.9': {}
+
   '@babel/helper-validator-option@7.25.7': {}
 
   '@babel/helper-wrap-function@7.25.7':
@@ -5494,6 +5661,10 @@ snapshots:
     dependencies:
       '@babel/types': 7.25.8
 
+  '@babel/parser@7.26.2':
+    dependencies:
+      '@babel/types': 7.26.0
+
   '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.7(@babel/core@7.25.8)':
     dependencies:
       '@babel/core': 7.25.8
@@ -5570,6 +5741,11 @@ snapshots:
       '@babel/core': 7.25.8
       '@babel/helper-plugin-utils': 7.25.7
 
+  '@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.25.8)':
+    dependencies:
+      '@babel/core': 7.25.8
+      '@babel/helper-plugin-utils': 7.25.9
+
   '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.25.8)':
     dependencies:
       '@babel/core': 7.25.8
@@ -5911,6 +6087,17 @@ snapshots:
       '@babel/core': 7.25.8
       '@babel/helper-plugin-utils': 7.25.7
 
+  '@babel/plugin-transform-typescript@7.25.9(@babel/core@7.25.8)':
+    dependencies:
+      '@babel/core': 7.25.8
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.25.8)
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+      '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.25.8)
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/plugin-transform-unicode-escapes@7.25.7(@babel/core@7.25.8)':
     dependencies:
       '@babel/core': 7.25.8
@@ -6037,6 +6224,12 @@ snapshots:
       '@babel/parser': 7.25.8
       '@babel/types': 7.25.8
 
+  '@babel/template@7.25.9':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/parser': 7.26.2
+      '@babel/types': 7.26.0
+
   '@babel/traverse@7.25.7':
     dependencies:
       '@babel/code-frame': 7.25.7
@@ -6049,12 +6242,29 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/traverse@7.25.9':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.2
+      '@babel/parser': 7.26.2
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.0
+      debug: 4.3.7(supports-color@8.1.1)
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/types@7.25.8':
     dependencies:
       '@babel/helper-string-parser': 7.25.7
       '@babel/helper-validator-identifier': 7.25.7
       to-fast-properties: 2.0.0
 
+  '@babel/types@7.26.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+
   '@badeball/cypress-configuration@6.1.1':
     dependencies:
       '@babel/parser': 7.25.8
@@ -6998,6 +7208,16 @@ snapshots:
 
   '@vicons/ionicons5@0.12.0': {}
 
+  '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.9(@types/node@20.16.14)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@babel/core': 7.25.8
+      '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.25.8)
+      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.25.8)
+      vite: 5.4.9(@types/node@20.16.14)(sass@1.80.3)(terser@5.36.0)
+      vue: 3.5.12(typescript@5.6.3)
+    transitivePeerDependencies:
+      - supports-color
+
   '@vitejs/plugin-vue@5.1.4(vite@5.4.9(@types/node@20.16.14)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
     dependencies:
       vite: 5.4.9(@types/node@20.16.14)(sass@1.80.3)(terser@5.36.0)
@@ -7074,6 +7294,36 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
+  '@vue/babel-helper-vue-transform-on@1.2.5': {}
+
+  '@vue/babel-plugin-jsx@1.2.5(@babel/core@7.25.8)':
+    dependencies:
+      '@babel/helper-module-imports': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/plugin-syntax-jsx': 7.25.7(@babel/core@7.25.8)
+      '@babel/template': 7.25.7
+      '@babel/traverse': 7.25.7
+      '@babel/types': 7.25.8
+      '@vue/babel-helper-vue-transform-on': 1.2.5
+      '@vue/babel-plugin-resolve-type': 1.2.5(@babel/core@7.25.8)
+      html-tags: 3.3.1
+      svg-tags: 1.0.0
+    optionalDependencies:
+      '@babel/core': 7.25.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/babel-plugin-resolve-type@1.2.5(@babel/core@7.25.8)':
+    dependencies:
+      '@babel/code-frame': 7.25.7
+      '@babel/core': 7.25.8
+      '@babel/helper-module-imports': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/parser': 7.25.8
+      '@vue/compiler-sfc': 3.5.12
+    transitivePeerDependencies:
+      - supports-color
+
   '@vue/compiler-core@3.5.12':
     dependencies:
       '@babel/parser': 7.25.8

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <n-config-provider
     data-cy="app"
+    inline-theme-disabled
     :theme="theme"
     :theme-overrides="themeOverrides"
     :class="{ dark: mode }"

src/components/global/vendor/naive.ts

@@ -24,7 +24,11 @@ import {
   NDrawerContent,
   NRadioGroup,
   NSelect,
-  NRadioButton
+  NRadioButton,
+  NCard,
+  NModal,
+  NFlex,
+  NInput
 } from 'naive-ui'
 
 export default create({
@@ -53,6 +57,10 @@ export default create({
     NDrawerContent,
     NRadioGroup,
     NSelect,
-    NRadioButton
+    NRadioButton,
+    NCard,
+    NModal,
+    NFlex,
+    NInput
   ]
 })

src/styles/index.sass

@@ -9,21 +9,26 @@ pointerNo
   pointer-events: none
 pointer
   pointer-events: auto
-.n-layout-header
-  background: rgba(0, 21, 41, 1)
-  border-color: rgb(0, 21, 41) !important
-.n-scrollbar
-  background: rgba(0, 21, 41, 1)
-  border-color: rgb(0, 21, 41) !important
-.n-layout-sider
-  border-color: rgb(0, 21, 41) !important
-.n-layout-sider__border
-  background: rgba(0, 21, 41, 1) !important
-.n-drawer
-  background: rgba(0, 21, 41, 1) !important
-  color: #fff
-.n-menu-item-content-header
-  a
-   color: #fff !important
-.n-menu-item-content__icon
-  color: #fff
+
+
+:root
+  .n-layout-header,.n-layout-sider,.n-drawer
+    --n-color: rgba(0, 21, 41, 0.6)
+
+//  background: rgba(0, 21, 41, 1)
+//  border-color: rgb(0, 21, 41) !important
+//.n-scrollbar
+//  background: rgba(0, 21, 41, 1)
+//  border-color: rgb(0, 21, 41) !important
+//.n-layout-sider
+//  border-color: rgb(0, 21, 41) !important
+//.n-layout-sider__border
+//  background: rgba(0, 21, 41, 1) !important
+//.n-drawer
+//  background: rgba(0, 21, 41, 1) !important
+//  color: #fff
+//.n-menu-item-content-header
+//  a
+//   color: #fff !important
+//.n-menu-item-content__icon
+//  color: #fff

src/styles/theme.js

@@ -1,17 +1,19 @@
 const themeOverrides = {
   common: {
-    "primaryColor": "#316c72",
-    "primaryColorHover": "#316C72E3",
-    "primaryColorPressed": "#2B4C59FF",
-    "primaryColorSuppl": "#316C7263",
-    "successColor": "#316C72FF",
-    "successColorHover": "#316C72E3",
-    "successColorPressed": "#2B4C59FF",
-    "successColorSuppl": "#316C7263"
+    primaryColor: '#316c72',
+    primaryColorHover: '#316C72E3',
+    primaryColorPressed: '#2B4C59FF',
+    primaryColorSuppl: '#316C7263',
+    successColor: '#316C72FF',
+    successColorHover: '#316C72E3',
+    successColorPressed: '#2B4C59FF',
+    successColorSuppl: '#316C7263',
+    color: 'rgba(0, 21, 41, 0.2)'
   }
+
   // Button: {
   //     textColor: '#FF0000'
   // }
 }
- 
-export default themeOverrides
+
+export default themeOverrides

src/views/textToaudio/index.vue

@@ -4,7 +4,7 @@
       <div class="title">文字语音互转</div>
       <div class="bottomList">
         <n-space>
-          <n-button type="primary"> 音转文</n-button>
+          <n-button type="primary" @click="handleAddTTS"> 音转文</n-button>
           <n-button type="primary"> 文转音</n-button>
         </n-space>
       </div>
@@ -17,14 +17,20 @@
       :data="data"
       :pagination="paginationReactive"
     />
+    <TtsModel
+      :show="showTTSModel.show"
+      @close="showTTSModel.show = false"
+    ></TtsModel>
   </div>
 </template>
 
 <script setup lang="ts">
 import { h, reactive, onMounted, watchEffect, ref } from 'vue'
-import { NButton, NTooltip } from 'naive-ui'
+import { NButton, NTooltip, NEllipsis } from 'naive-ui'
 import { fetchTtsList } from '@/api'
 import { useMainStore } from '@/store'
+import type { TTSItem } from './type'
+import TtsModel from './ttsModel.vue'
 
 defineProps<{ msg: string }>()
 
@@ -32,6 +38,12 @@ const main = useMainStore()
 
 const data = ref<TTSItem[]>([])
 
+const showTTSModel = ref({
+  show: false,
+  isEditing: false,
+  data: {}
+})
+
 const paginationReactive = reactive({
   page: 1,
   pageSize: 5,
@@ -51,15 +63,11 @@ onMounted(async () => {
     if (main.sceneCode) {
       const res = await fetchTtsList(main.sceneCode)
       console.log('data', res)
-      data.value = res as never as TTSItem
+      data.value = res as never as TTSItem[]
     }
   })
 })
 
-const renderContent = (content) => {
-  return
-}
-
 const columns = [
   {
     title: '序号',
@@ -69,6 +77,7 @@ const columns = [
   {
     title: '类型',
     key: 'type',
+    width: 80,
     render(row) {
       return row.type === 'asr' ? h('span', '语音') : h('span', '文字')
     }
@@ -76,29 +85,36 @@ const columns = [
   {
     title: '内容',
     key: 'document',
-    width: 400,
+    width: 500,
+    resizable: true,
     render(row) {
       return h(
-        NButton,
-        { trigger: 'hover', placement: 'bottom' },
-        { default: () => 'Send Email' }
+        NTooltip,
+        { trigger: 'hover', placement: 'top', style: { maxWidth: '500px' } },
+        {
+          trigger: () => h('span', row.document.slice(0, 100) + '...'),
+          default: () => h('span', row.document)
+        }
       )
     }
     // resizable: true,
   },
   {
     title: '语音文件',
-    key: 'voicePath'
+    key: 'voicePath',
+    width: 300,
+    resizable: true
   },
   {
     title: '状态',
-    key: 'state',
+    key: 'status',
+    minWidth: 100,
     render(row) {
-      return row.state == 1
-        ? h('span', '处理中')
-        : row.state == 0
-          ? h('span', '已完成')
-          : h('span', '已取消')
+      return row.status == 1
+        ? h('span', '转换成功')
+        : row.status == 0
+          ? h('span', '转换中')
+          : h('span', '转换失败')
     }
   },
   {
@@ -108,22 +124,48 @@ const columns = [
   {
     title: '操作',
     key: 'actions',
-    render(row) {
-      return h(
-        NButton,
-        {
-          size: 'small',
-          onClick: () => sendMail(row)
-        },
-        { default: () => 'Send Email' }
-      )
+    fixed: 'right',
+    minWidth: 200,
+    render(row, index) {
+      return [
+        h(
+          NButton,
+          {
+            quaternary: true,
+            type: 'info',
+            size: 'small',
+            onClick: () => {
+              openEdit(row)
+            }
+          },
+          {
+            default: () => '编辑'
+          }
+        ),
+        h(
+          NButton,
+          {
+            quaternary: true,
+            type: 'error',
+            size: 'small',
+            style: { marginLeft: '2px' },
+            onClick: () => {
+              // _doDelete(row.id)
+            }
+          },
+          {
+            default: () => '删除'
+          }
+        )
+      ]
     }
   }
 ]
 
-function sendMail(row) {
-  console.log('send email to', row.name, 'with id', row.key)
+const handleAddTTS = () => {
+  showTTSModel.value.show = true
 }
+const openEdit = () => {}
 </script>
 
 <style lang="sass" scoped>

src/views/textToaudio/ttsModel.vue

@@ -0,0 +1,109 @@
+<template>
+  <n-modal v-model:show="showModal" :on-update:show="handleShow">
+    <n-card
+      style="width: 800px"
+      title="文字转语音"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      transform-origin="center"
+      aria-modal="true"
+    >
+      <template #header-extra>
+        <n-icon size="30" @click="emits('close')" class="close-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34z"
+              fill="currentColor"
+            ></path>
+          </svg>
+        </n-icon>
+      </template>
+
+      <n-flex>
+        <n-flex style="flex: 1">
+          <n-input
+            v-model:value="form.document"
+            type="textarea"
+            maxlength="500"
+            show-count
+            clearable
+            placeholder="基本的 Textarea"
+            style="flex: 1; min-height: 300px"
+          />
+        </n-flex>
+        <n-flex style="flex: 1" vertical>
+          <div>选择人物</div>
+          <n-form
+            ref="formRef"
+            :model="form"
+            label-placement="left"
+            label-width="auto"
+            require-mark-placement="right-hanging"
+            :style="{
+              maxWidth: '640px'
+            }"
+          >
+            <n-form-item label="语速" path="inputValue">
+              <n-slider v-model:value="form.speed" :step="1" />
+            </n-form-item>
+            <n-form-item label="音量" path="inputValue">
+              <n-slider v-model:value="form.volume" :step="1" />
+            </n-form-item>
+          </n-form>
+
+
+          <!--          <n-slider v-model:value="form.speed" :step="1" />-->
+          <!--          <n-slider v-model:value="form.volume" :step="1" />-->
+        </n-flex>
+      </n-flex>
+
+      <template #footer>
+        <n-flex justify="end">
+          <n-button>保存</n-button>
+        </n-flex>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watchEffect } from 'vue'
+import { NSlider, NForm, NFormItem } from 'naive-ui'
+
+const showModal = ref(false)
+
+const form = reactive({
+  document: '',
+  voiceType: 0,
+  speed: 0,
+  volume: 0
+})
+
+const emits = defineEmits(['close'])
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  }
+})
+const handleShow = (show: boolean) => {
+  if (!show) {
+    emits('close')
+  }
+}
+
+watchEffect(() => {
+  showModal.value = props.show
+})
+</script>
+<style scoped lang="scss">
+.close-icon {
+  cursor: pointer;
+}
+</style>

src/views/textToaudio/tts.d.ts

@@ -1,4 +1,4 @@
-interface TTSItem {
+export interface TTSItem {
   id: number
   createTime: string
   document: string

vite.config.ts

@@ -3,10 +3,11 @@
 import { defineConfig, Plugin } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import tsconfigPaths from 'vite-tsconfig-paths'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 
 // import IstanbulPlugin from 'vite-plugin-istanbul'
 
-const plugins: Array<Plugin> = [vue(), tsconfigPaths()]
+const plugins: Array<Plugin> = [vue(), tsconfigPaths(), vueJsx()]
 
 if (process.env.CYPRESS_TEST === 'true') {
   // console.info('instrumenting code coverage for e2e tests...')
@@ -21,6 +22,7 @@ if (process.env.CYPRESS_TEST === 'true') {
 }
 
 // https://vitejs.dev/config/
+//@ts-ignore
 export default defineConfig(({ mode }) => ({
   plugins,
   test: {