package.json

@@ -14,6 +14,7 @@
     "@types/animejs": "^3.1.13",
     "animejs": "^3.2.2",
     "axios": "^1.5.1",
+    "boxicons": "^2.1.4",
     "core-js": "^3.8.3",
     "crypto-js": "^4.1.1",
     "marked": "^11.1.1",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       axios:
         specifier: ^1.5.1
         version: 1.8.1
+      boxicons:
+        specifier: ^2.1.4
+        version: 2.1.4
       core-js:
         specifier: ^3.8.3
         version: 3.41.0
@@ -1451,6 +1454,9 @@ packages:
   '@webassemblyjs/wast-printer@1.14.1':
     resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
 
+  '@webcomponents/webcomponentsjs@2.8.0':
+    resolution: {integrity: sha512-loGD63sacRzOzSJgQnB9ZAhaQGkN7wl2Zuw7tsphI5Isa0irijrRo6EnJii/GgjGefIFO8AIO7UivzRhFaEk9w==}
+
   '@xtuc/ieee754@1.2.0':
     resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
 
@@ -1645,6 +1651,9 @@ packages:
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
+  boxicons@2.1.4:
+    resolution: {integrity: sha512-BvJNfYfnE4g9WQ7GL91fftxMOTwAleWlPFwvQJPYb/Ju7aLjlQ/Eu55AH9JLNk/OR82z+ZSq4TbKzbV/e5Rr0A==}
+
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 
@@ -2189,9 +2198,24 @@ packages:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
 
+  detect-hover@1.0.3:
+    resolution: {integrity: sha512-HtLoY+tClgYucJNiovNICGWFp9nOGVmHY44s7L62iPqORXM9vujeWFaVcqtA7XRvp/2Y+4RBUfHbDKFGN+xxZQ==}
+
+  detect-it@3.0.7:
+    resolution: {integrity: sha512-RxpgcdbatUX6epJE09K16iJqF7x6iEcEdoL18FR2zpBO4JhnL7aMOAUoUEyexdtbWOSfTmoDWmeD6mwRBQyRXg==}
+
   detect-node@2.1.0:
     resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
 
+  detect-passive-events@1.0.5:
+    resolution: {integrity: sha512-foW7Q35wwOCxVzW0xLf5XeB5Fhe7oyRgvkBYdiP9IWgLMzjqUqTvsJv9ymuEWGjY6AoDXD3OC294+Z9iuOw0QA==}
+
+  detect-pointer@1.0.3:
+    resolution: {integrity: sha512-d0o/Puo3fiGSCXy6H039h9Kwz+mmYCGKZ/qtPFnpN3WfsumjC1C9b5KKvRu+aYnfdI8peqN/iAe7dPd85qIt2g==}
+
+  detect-touch-events@2.0.2:
+    resolution: {integrity: sha512-g8GWBkJLiIDRJfRXEdrd1wMXpNyGId2DkbfuwFahSb4OCvn717hyRJtAcEDISfp3zkwEhZ4Y4woHPA6DeyB3Fw==}
+
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -2649,6 +2673,12 @@ packages:
   highlight.js@10.7.3:
     resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
 
+  history@4.10.1:
+    resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==}
+
+  hoist-non-react-statics@2.5.5:
+    resolution: {integrity: sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==}
+
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
@@ -2754,6 +2784,9 @@ packages:
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
+  invariant@2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+
   ipaddr.js@1.9.1:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
     engines: {node: '>= 0.10'}
@@ -2837,6 +2870,9 @@ packages:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
 
+  isarray@0.0.1:
+    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
+
   isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
@@ -3375,6 +3411,9 @@ packages:
   path-to-regexp@0.1.12:
     resolution: {integrity: sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==}
 
+  path-to-regexp@1.9.0:
+    resolution: {integrity: sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==}
+
   path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -3704,9 +3743,24 @@ packages:
     peerDependencies:
       react: ^16.14.0
 
+  react-interactive@0.8.3:
+    resolution: {integrity: sha512-mmRvA9aKP7zu9kVfP1AX1egX8tFlnE3DDXq92z0JTZezfOpmeQBzr77O1+mTV54OOmn+M2t6c5kFD5VnuFoM7A==}
+    peerDependencies:
+      react: '>=15'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  react-router-dom@4.3.1:
+    resolution: {integrity: sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==}
+    peerDependencies:
+      react: '>=15'
+
+  react-router@4.3.1:
+    resolution: {integrity: sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==}
+    peerDependencies:
+      react: '>=15'
+
   react@16.14.0:
     resolution: {integrity: sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==}
     engines: {node: '>=0.10.0'}
@@ -3776,6 +3830,9 @@ packages:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
 
+  resolve-pathname@3.0.0:
+    resolution: {integrity: sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==}
+
   resolve@1.22.10:
     resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
     engines: {node: '>= 0.4'}
@@ -4115,6 +4172,12 @@ packages:
   thunky@1.1.0:
     resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==}
 
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tiny-warning@1.0.3:
+    resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
+
   tinyglobby@0.2.12:
     resolution: {integrity: sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==}
     engines: {node: '>=12.0.0'}
@@ -4267,6 +4330,9 @@ packages:
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
+  value-equal@1.0.1:
+    resolution: {integrity: sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==}
+
   vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
@@ -4417,6 +4483,9 @@ packages:
       webpack-plugin-vuetify:
         optional: true
 
+  warning@4.0.3:
+    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
+
   watchpack@2.4.2:
     resolution: {integrity: sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==}
     engines: {node: '>=10.13.0'}
@@ -6299,6 +6368,8 @@ snapshots:
       '@webassemblyjs/ast': 1.14.1
       '@xtuc/long': 4.2.2
 
+  '@webcomponents/webcomponentsjs@2.8.0': {}
+
   '@xtuc/ieee754@1.2.0': {}
 
   '@xtuc/long@4.2.2': {}
@@ -6503,6 +6574,15 @@ snapshots:
 
   boolbase@1.0.0: {}
 
+  boxicons@2.1.4:
+    dependencies:
+      '@webcomponents/webcomponentsjs': 2.8.0
+      prop-types: 15.8.1
+      react: 16.14.0
+      react-dom: 16.14.0(react@16.14.0)
+      react-interactive: 0.8.3(react@16.14.0)
+      react-router-dom: 4.3.1(react@16.14.0)
+
   brace-expansion@1.1.11:
     dependencies:
       balanced-match: 1.0.2
@@ -6906,8 +6986,23 @@ snapshots:
 
   destroy@1.2.0: {}
 
+  detect-hover@1.0.3: {}
+
+  detect-it@3.0.7:
+    dependencies:
+      detect-hover: 1.0.3
+      detect-passive-events: 1.0.5
+      detect-pointer: 1.0.3
+      detect-touch-events: 2.0.2
+
   detect-node@2.1.0: {}
 
+  detect-passive-events@1.0.5: {}
+
+  detect-pointer@1.0.3: {}
+
+  detect-touch-events@2.0.2: {}
+
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
@@ -7445,6 +7540,17 @@ snapshots:
 
   highlight.js@10.7.3: {}
 
+  history@4.10.1:
+    dependencies:
+      '@babel/runtime': 7.26.9
+      loose-envify: 1.4.0
+      resolve-pathname: 3.0.0
+      tiny-invariant: 1.3.3
+      tiny-warning: 1.0.3
+      value-equal: 1.0.1
+
+  hoist-non-react-statics@2.5.5: {}
+
   hookable@5.5.3: {}
 
   hosted-git-info@2.8.9: {}
@@ -7558,6 +7664,10 @@ snapshots:
 
   inherits@2.0.4: {}
 
+  invariant@2.2.4:
+    dependencies:
+      loose-envify: 1.4.0
+
   ipaddr.js@1.9.1: {}
 
   ipaddr.js@2.2.0: {}
@@ -7612,6 +7722,8 @@ snapshots:
     dependencies:
       is-docker: 2.2.1
 
+  isarray@0.0.1: {}
+
   isarray@1.0.0: {}
 
   isexe@2.0.0: {}
@@ -7773,7 +7885,6 @@ snapshots:
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
-    optional: true
 
   lower-case@2.0.2:
     dependencies:
@@ -8103,6 +8214,10 @@ snapshots:
 
   path-to-regexp@0.1.12: {}
 
+  path-to-regexp@1.9.0:
+    dependencies:
+      isarray: 0.0.1
+
   path-type@4.0.0: {}
 
   pathe@2.0.3: {}
@@ -8372,7 +8487,6 @@ snapshots:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
-    optional: true
 
   proxy-addr@2.0.7:
     dependencies:
@@ -8420,17 +8534,42 @@ snapshots:
       prop-types: 15.8.1
       react: 16.14.0
       scheduler: 0.19.1
-    optional: true
 
-  react-is@16.13.1:
+  react-interactive@0.8.3(react@16.14.0):
-    optional: true
+    dependencies:
+      detect-it: 3.0.7
+      object-assign: 4.1.1
+      prop-types: 15.8.1
+      react: 16.14.0
+
+  react-is@16.13.1: {}
+
+  react-router-dom@4.3.1(react@16.14.0):
+    dependencies:
+      history: 4.10.1
+      invariant: 2.2.4
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 16.14.0
+      react-router: 4.3.1(react@16.14.0)
+      warning: 4.0.3
+
+  react-router@4.3.1(react@16.14.0):
+    dependencies:
+      history: 4.10.1
+      hoist-non-react-statics: 2.5.5
+      invariant: 2.2.4
+      loose-envify: 1.4.0
+      path-to-regexp: 1.9.0
+      prop-types: 15.8.1
+      react: 16.14.0
+      warning: 4.0.3
 
   react@16.14.0:
     dependencies:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       prop-types: 15.8.1
-    optional: true
 
   read-pkg-up@7.0.1:
     dependencies:
@@ -8510,6 +8649,8 @@ snapshots:
 
   resolve-from@4.0.0: {}
 
+  resolve-pathname@3.0.0: {}
+
   resolve@1.22.10:
     dependencies:
       is-core-module: 2.16.1
@@ -8575,7 +8716,6 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
       object-assign: 4.1.1
-    optional: true
 
   schema-utils@2.7.1:
     dependencies:
@@ -8906,6 +9046,10 @@ snapshots:
 
   thunky@1.1.0: {}
 
+  tiny-invariant@1.3.3: {}
+
+  tiny-warning@1.0.3: {}
+
   tinyglobby@0.2.12:
     dependencies:
       fdir: 6.4.3(picomatch@4.0.2)
@@ -9052,6 +9196,8 @@ snapshots:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
 
+  value-equal@1.0.1: {}
+
   vary@1.1.2: {}
 
   vite-plugin-vuetify@2.1.0(vite@6.2.0(@types/node@20.17.23)(terser@5.39.0))(vue@3.5.13(typescript@5.8.2))(vuetify@3.7.15):
@@ -9214,6 +9360,10 @@ snapshots:
       typescript: 5.8.2
       vite-plugin-vuetify: 2.1.0(vite@6.2.0(@types/node@20.17.23)(terser@5.39.0))(vue@3.5.13(typescript@5.8.2))(vuetify@3.7.15)
 
+  warning@4.0.3:
+    dependencies:
+      loose-envify: 1.4.0
+
   watchpack@2.4.2:
     dependencies:
       glob-to-regexp: 0.4.1

src/App.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="pconly main-navibar">
+  <div class="pconly">
-    <div class="main-navibar">
+    <div id="navibar">
       <div class="navi-item"><el-link @click="go('/')" id="logo">wordIn</el-link></div>
       <div class="navi-item"><el-link @click="go('/select')" class="link">背诵</el-link></div>
       <div class="navi-item"><el-link @click="go('/manage')" class="link">编辑单词本</el-link></div>
@@ -8,11 +8,9 @@
       <div class="navi-item"><el-link @click="go('/about')" class="link">关于</el-link></div>
     </div>
   </div>
-  <div class="main-app-view">
+  <router-view style=""></router-view>
-    <router-view></router-view>
-  </div>
   <div class="mbonly">
-    <div class="main-navibar">
+    <div id="navibar">
       <div class="navi-item"><v-icon @click="$router.push('/')">mdi-home</v-icon> <div>主页</div></div>
       <div class="navi-item"><v-icon @click="$router.push('/select')">mdi-book</v-icon> <div>背诵</div></div>
       <div class="navi-item"><v-icon  @click="$router.push('/manage')">mdi-folder</v-icon><div>浏览</div></div>
@@ -34,8 +32,8 @@ const go = (path: string) => {
 
 <style scoped>
 @media screen and (max-width: 500px) {
-  .main-navibar {
+  #navibar {
-    height: 60px;
+    height: 55px;
     border-top: solid 1px var(--bd-color);
     display: flex;
     flex-direction: row;
@@ -60,7 +58,7 @@ const go = (path: string) => {
 }
 
 @media screen and (min-width: 500px) {
-  .main-navibar {
+  #navibar {
     height: 60px;
     border-bottom: solid 1px var(--bd-color);
     display: flex;
@@ -89,13 +87,3 @@ const go = (path: string) => {
   font-size: 18px;
 }
 </style>
-
-<style>
-.main-app-view{
-  height: calc(100% - 60px);
-  width: 100%;
-}
-.main-navibar{
-  background-color: var(--bg-color-solid);
-}
-</style>

src/components/DynamicBackground.vue

@@ -48,7 +48,7 @@ html.dark .dynamic-bg-wrapper::after {
 .dynamic-bg-container {
     margin: 0;
     padding: 0;
-    height:max-content;
+    height: fit-content;
     width: 100%;
     /* Soft pastel gradient background */
     display: flex;
@@ -116,8 +116,8 @@ html.dark .dynamic-bg-wrapper::after {
 
 .dynamic-bg-content {
     width: 100%;
-    height: max-content;
+    height: fit-content;
-    margin-bottom: 10px;
+    padding: 10px;
     z-index: 10;
 }
 </style>

src/md/about.md

@@ -21,14 +21,6 @@ wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1
 
 ## 3.更新日志
 
-### 1.03
-
-1. 更新内容
-
-   - 使用 anime.js 构建动画效果
-   - 修复显示 bug
-   - 主页视觉效果更新
-
 ### 1.02
 
 1. 更新内容

src/styles/global.css

@@ -1,7 +1,6 @@
 html{
   height: 100%;
   width: 100%;
-  overflow: hidden !important;
 }
 
 body {
@@ -9,7 +8,7 @@ body {
   padding: 0;
   height: 100%;
   width: 100%;
-  overflow: hidden !important;
+  overflow: hidden;
   font-family: 
       'MiSans',
       -apple-system, /* macOS, iOS */
@@ -33,12 +32,38 @@ body {
   .pconly {
     display: none;
   }
+
+  @keyframes enter {
+    0% {
+      translate: 100px 0;
+      opacity: 0;
+    }
+
+    100% {
+      translate: 0 0;
+      opacity: 1;
+    }
+  }
 }
 
 @media screen and (min-width: 500px) {
   .mbonly {
     display: none;
   }
+
+  @keyframes enter {
+    0% {
+      translate: 100px 0;
+      opacity: 0;
+      /* filter: blur(20px); */
+    }
+
+    100% {
+      translate: 0 0;
+      opacity: 1;
+      /* filter: blur(0px); */
+    }
+  }
 }
 
 #app {
@@ -63,9 +88,10 @@ html.dark {
 }
 
 .container {
-  height: 100%;
+  height: calc(100% - 20px);
-  width: 100%;
+  width: calc(100% - 20px);
-  box-sizing: border-box;
+  /* padding: 20px; */
+  animation: enter ease-out 0.6s backwards;
 }
 
 .colbox {
@@ -84,6 +110,7 @@ html.dark {
   padding: 20px;
   margin: 10px;
   color: var(--text-color);
+  transition: 0.5s;
 }
 
 .card:hover {

src/types/vite-env.d.ts

@@ -1,2 +0,0 @@
-declare const __BUILD_TIME__: string;
-declare const __APP_VERSION__: string;

src/views/HomeView.vue

@@ -6,7 +6,7 @@
                     <div style="flex-grow: 2;margin:30px;" class="rowbox">
                         <div style="font-size: 25px;color: var(--text-color);font-weight: 600;">欢迎使用</div>
                         <div id="title">wordIn</div>
-                        <div>当前版本: {{ appVersion }} <br /> 更新时间: {{ buildTime }}</div>
+                        <div>当前版本: 1.03 beta1 <br /> 更新时间:2025年3月7日 12:03</div>
                     </div>
                     <div class="colbox card home-view-option-wrapper">
                         <router-link to="/select" class="button">
@@ -50,9 +50,6 @@ import { useRouter } from 'vue-router';
 import DynamicBackground from '@/components/DynamicBackground.vue';
 import animejs from 'animejs';
 
-const appVersion = __APP_VERSION__;
-const buildTime = __BUILD_TIME__;
-
 const store = useMainStore();
 const router = useRouter();
 const img_url = ref("");
@@ -127,6 +124,10 @@ onMounted(()=>{
 }
 
 @media screen and (min-width: 500px) {
+    .home-view-container{
+     display: flex;
+     flex-direction: column;   
+    }
     #title {
         font-size: 100px;
         color: var(--text-color);
@@ -215,7 +216,7 @@ html.dark .button {
 }
 
 .home-view-container{
-    height: 100%; 
+    height: calc(100% - 65px); 
     align-items: center;
     width: 100%;
     overflow: auto;

src/views/manage/EditorView.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="container editor-container">
+    <div class="container" style="overflow: auto;">
-        <el-page-header class="editor-header editor-animation-el" @back="router.push('/manage');">
+        <el-page-header style="margin: 10px;" @back="router.push('/manage');">
             <template #content>
                 <span class="text-large font-600 mr-3"> {{ name }} ({{ id }}) </span>
             </template>
@@ -11,9 +11,10 @@
                     </el-button>
                     <template #dropdown>
                         <el-dropdown-menu>
-                            <el-dropdown-item @click="del_set"><v-icon size="20px">mdi-delete</v-icon>删除</el-dropdown-item>
+                            <el-dropdown-item @click="del_set"><box-icon color="var(--text-color)" name='trash'
-                            <el-dropdown-item @click="addTo"><v-icon
+                                    size="20px"></box-icon>删除</el-dropdown-item>
-                                    size="18px">mdi-plus</v-icon>添加到</el-dropdown-item>
+                            <el-dropdown-item @click="addTo"><box-icon color="var(--text-color)" name='plus'
+                                    size="18px"></box-icon>添加到</el-dropdown-item>
                         </el-dropdown-menu>
                     </template>
                 </el-dropdown>
@@ -21,7 +22,7 @@
         </el-page-header>
         <div class="colbox" id="main">
             <div class="rowbox">
-                <div class="card editor-animation-el">
+                <div class="card">
                     <div class="title">添加单词</div>
                     <el-input ref="input1" autofocus @change="focusnext($refs.input2)"
                         v-model="new_word.word"></el-input>
@@ -38,7 +39,7 @@
                     </div>
                     <el-button @click="add_word()" type="primary">添加</el-button>
                 </div>
-                <div class="card editor-animation-el">
+                <div class="card">
                     <div class="title">更改名称</div>
                     <div class="colbox">
                         <el-text class="mx-1" style="width: 60px;">新名称:</el-text>
@@ -47,7 +48,7 @@
                     <el-button @click="change_name()" type="primary">更改名称</el-button>
                 </div>
             </div>
-            <div class="card editor-wordlist editor-animation-el">
+            <div style="flex-grow: 1;" class="card">
                 <el-table :data="table" style="height: calc(100% - 10px);overflow: auto;border-radius: 10px;">
                     <el-table-column type="index" />
                     <el-table-column prop="word" label="单词" />
@@ -56,9 +57,10 @@
                     <el-table-column width="100px" fixed="right" label="操作">
                         <template #default="scope">
                             <div style="display: flex;flex-direction: row;justify-content: space-around;">
-                                <v-icon size="14px" class="btn" @click="del_word(scope.$index)">mdi-delete</v-icon>
+                                <box-icon color="var(--text-color)" size="14px" class="btn" name='trash'
-                                <v-icon size="14px" class="btn" name='edit-alt'
+                                    @click="del_word(scope.$index)"></box-icon>
-                                    @click="edit_word(scope.$index)">mdi-invoice-text-edit</v-icon>
+                                <box-icon color="var(--text-color)" size="14px" class="btn" name='edit-alt'
+                                    @click="edit_word(scope.$index)"></box-icon>
                             </div>
                         </template>
                     </el-table-column>
@@ -110,7 +112,6 @@ import { useRouter, useRoute } from 'vue-router'
 import { useMainStore } from '@/store'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import CDialog from '@/components/UI/CDialog.vue'
-import anime from 'animejs'
 
 const router = useRouter()
 const route = useRoute()
@@ -275,33 +276,9 @@ onMounted(() => {
         }
         table.value = wordsets.value.getSet(id.value)
     }
-    anime({
-        targets: '.editor-animation-el',
-        translateY: [-50, 0],
-        opacity: [0, 1],
-        delay: anime.stagger(50),
-    });
 })
 </script>
 
-<style>
-.editor-container{
-    height: 100%;
-    width: 100%;
-    padding: 10px;
-    overflow: hidden;
-    padding-top: 0;
-    box-sizing: border-box;
-}
-.editor-wordlist{
-    flex-grow: 1;
-    height: calc(100% - 60px);
-}
-.editor-header{
-    margin: 10px;
-}
-</style>
-
 <style scoped>
 @media screen and (max-width: 500px) {
     #main {
@@ -320,14 +297,20 @@ onMounted(() => {
         font-size: 35px;
         min-height: 60px;
     }
+
+    .container {
+        padding: 10px;
+        height: calc(100% - 70px);
+        padding-top: 0;
+    }
 }
 
 #main {
-    height: 100%;
+    height: calc(100% - 50px);
 }
 
 #main-container {
-    height: 100%;
+    height: 87%;
 }
 
 .title {

src/views/manage/NewSetView.vue

@@ -1,10 +1,10 @@
 <template>
-    <el-page-header class="new-set-header new-set-animation-el"@back="$router.push('/manage')">
+    <el-page-header style="margin: 20px;" @back="$router.push('/manage')">
         <template #content>
             <span class="text-large font-600 mr-3"> 新建单词本 </span>
         </template>
     </el-page-header>
-    <el-container id="main-container" class="container card new-set-animation-el">
+    <el-container id="main-container" class="container card">
         <div style="overflow: auto;">
             <div class="colbox">
                 <div class="mid-text">名称:</div>
@@ -20,11 +20,10 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { useMainStore } from '@/store'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import anime from 'animejs'
 
 const store = useMainStore()
 const router = useRouter()
@@ -43,22 +42,8 @@ const new_wordset = () => {
     store.wordsets.addSet(new_set_class.value, set_name.value)
     router.push('/manage')
 }
-
-onMounted(() => {
-    anime({
-        targets: '.new-set-animation-el',
-        translateY: [-50, 0],
-        opacity: [0, 1],
-    })
-})
 </script>
 
-<style>
-.new-set-header {
-    margin: 20px;
-}
-</style>
-
 <style scoped>
 @media screen and (max-width: 500px) {
     .colbox {

src/views/manage/SetListView.vue

@@ -1,27 +1,27 @@
 <template>
     <el-container id="main-container">
-        <el-header class="list-view-header" style="">
+        <el-header id="header" style="">
             <el-page-header style="margin: 10px;" @back="router.push('/');">
                 <template #content>
                     <span class="text-large font-600 mr-3"> 编辑单词本 </span>
                 </template>
                 <template #extra>
                     <div class="colbox">
-                        <el-button @click="$router.push('/manage/new')"
+                        <el-button @click="$router.push('/manage/new')" type="success"><box-icon color="white"
-                            type="success"><v-icon>mdi-plus</v-icon>新建单词本</el-button>
+                                name='plus'></box-icon>新建单词本</el-button>
                         <div class="pconly">
                             <el-dropdown trigger="click" style="margin-left: 20px;">
                                 <el-button type="primary">
-                                    更多<v-icon size="20px">mdi-chevron-down</v-icon>
+                                    更多<box-icon color="white" name='chevron-down' size="20px"></box-icon>
                                 </el-button>
                                 <template #dropdown>
                                     <el-dropdown-menu>
-                                        <el-dropdown-item @click="manage_online_wordsets"><v-icon
+                                        <el-dropdown-item @click="manage_online_wordsets"><box-icon color="white"
-                                                size="20px">mdi-earth</v-icon>管理在线单词本</el-dropdown-item>
+                                                name='world' size="20px"></box-icon>管理在线单词本</el-dropdown-item>
-                                        <el-dropdown-item @click="export_set"><v-icon
+                                        <el-dropdown-item @click="export_set"><box-icon color="white" name='export'
-                                                size="18px">mdi-export</v-icon>导出</el-dropdown-item>
+                                                size="18px"></box-icon>导出</el-dropdown-item>
-                                        <el-dropdown-item @click="import_set"><v-icon color="white" name=''
+                                        <el-dropdown-item @click="import_set"><box-icon color="white" name='import'
-                                                size="18px">mdi-import</v-icon>导入</el-dropdown-item>
+                                                size="18px"></box-icon>导入</el-dropdown-item>
                                     </el-dropdown-menu>
                                 </template>
                             </el-dropdown>
@@ -30,8 +30,8 @@
                 </template>
             </el-page-header>
         </el-header>
-        <el-container style="height:calc(100% - 60px);position: relative;">
+        <el-container style="height:calc(100% - 200px);position: relative;">
-            <el-aside class="list-view-aside">
+            <el-aside id="aside">
                 <div id="sidebar" class="sidebar-hidden">
                     <div id="sidebar-content">
                         <div class="sidebar-title">
@@ -52,7 +52,7 @@
                         </div>
                     </div>
                     <div class="mbonly" id="show-sidebar" @click="taggle_sidebar">
-                        <v-icon>list</v-icon>
+                        <box-icon name='list-ul' color="var(--text-color)"></box-icon>
                     </div>
                 </div>
             </el-aside>
@@ -71,8 +71,10 @@
                                 创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
                             </div>
                             <div class="option">
-                                <v-icon class="btn" @click="edit(wordset.id)">mdi-book-edit</v-icon>
+                                <box-icon class="btn" name='edit' color="var(--text-color)"
-                                <v-icon class="btn" @click="del(view_wordsets, wordset.id, index)">mdi-delete</v-icon>
+                                    @click="edit(wordset.id)"></box-icon>
+                                <box-icon class="btn" name='trash' color="var(--text-color)"
+                                    @click="del(view_wordsets, wordset.id, index)"></box-icon>
                             </div>
                         </div>
                     </div>
@@ -86,7 +88,8 @@
                                 创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
                             </div>
                             <div class="option">
-                                <v-icon class="btn" @click="show(String(index), wordset.name)">mdi-eye</v-icon>
+                                <box-icon class="btn" name='show' color="var(--text-color)"
+                                    @click="show(String(index), wordset.name)"></box-icon>
                             </div>
                         </div>
                     </div>
@@ -97,12 +100,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted,nextTick } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';
 import { useRouter } from 'vue-router';
 import { useMainStore } from '@/store';
 import axios from 'axios';
-import anime from 'animejs';
 
 interface WordSet {
     id: string;
@@ -137,28 +139,26 @@ const mode = ref<number>(0);
 const view = (classname: string): void => {
     mode.value = 0;
     view_wordsets.value = classname;
-    nextTick(() => {
+    let node = document.getElementById("wordsets-container")?.style;
-        anime({
+    if (node) {
-            targets: ".wordset",
+        node.animation = "";
-            translateY: [-50, 0],
+        setTimeout(() => {
-            opacity: [0, 1],
+            node.animation = "enter ease-out .6s backwards";
-            delay: anime.stagger(50, { grid: [6, 6] })
+        }, 0);
-        })
+    }
-    })
 };
 
 const view_online = (set_name: string, class_name: string): void => {
     mode.value = 1;
     viewing.set = set_name;
     viewing.book = class_name;
-    nextTick(() => {
+    let node = document.getElementById("wordsets-container")?.style;
-        anime({
+    if (node) {
-            targets: ".wordset",
+        node.animation = "";
-            translateY: [-50, 0],
+        setTimeout(() => {
-            opacity: [0, 1],
+            node.animation = "enter ease-out .6s backwards";
-            delay: anime.stagger(50, { grid: [6, 6] })
+        }, 0);
-        })
+    }
-    })
 };
 
 const manage_online_wordsets = (): void => {
@@ -220,19 +220,11 @@ const taggle_sidebar = (): void => {
 
 // Convert created lifecycle hook to onMounted
 onMounted(() => {
-    anime({
-        targets: ".list-view-header",
-        translateY: [-50, 0],
-        opacity: [0, 1],
-    });
-    anime({
-        targets: ".list-view-aside",
-        translateX: [-50, 0],
-        opacity: [0, 1],
-    });
     let first_set = store.wordsets._firstClass;
     if (first_set) {
+        setTimeout(() => {
             view(first_set);
+        }, 0);
     }
 
     axios.get < OnlineWordSets > ("wordset/list").then(
@@ -243,34 +235,29 @@ onMounted(() => {
 });
 </script>
 
-<style>
+<style scoped>
 @media screen and (max-width: 500px) {
-    .list-view-header{
+    @keyframes sidebar-enter {
+        0% {
+            translate: -100px 0;
+            opacity: 0;
+        }
+
+        100% {
+            translate: 0 0;
+            opacity: 1;
+        }
+    }
+
+    #header {
         height: 70px;
     }
-    .list-view-aside{
+
+    #aside {
         width: 0;
         position: relative;
     }
-}
 
-@media screen and (max-width: 500px) {
-    .list-view-header{
-        height: 60px;
-    }
-    .list-view-aside{
-        width: 180px;
-    }
-}
-
-.list-view-header{
-    justify-content: space-between;
-    animation: enter ease-out .6s backwards;
-}
-</style>
-
-<style scoped>
-@media screen and (max-width: 500px) {
     #sidebar {
         position: absolute;
         width: 180px;
@@ -347,8 +334,29 @@ onMounted(() => {
 }
 
 @media screen and (min-width: 500px) {
+    @keyframes sidebar-enter {
+        0% {
+            translate: -100px 0;
+            opacity: 0;
+        }
+
+        100% {
+            translate: 0 0;
+            opacity: 1;
+        }
+    }
+
+    #header {
+        height: 60px;
+    }
+
+    #aside {
+        width: 180px;
+    }
+
     #sidebar {
         width: 180px;
+        animation: sidebar-enter ease-out .6s backwards;
         padding-left: 10px;
         margin: 10px;
     }
@@ -356,7 +364,7 @@ onMounted(() => {
     .wordset {
         border-radius: 13px;
         padding: 20px;
-        height: 230px;
+        height: 220px;
         width: 170px;
         margin: 20px;
     }
@@ -390,8 +398,8 @@ onMounted(() => {
 .wordset {
     background-color: var(--bg-color);
     color: var(--text-color);
+    transition: .5s;
     border: solid 1px var(--bd-color);
-    opacity: 0;
 }
 
 .wordset:hover {
@@ -401,8 +409,7 @@ onMounted(() => {
 #sidebar {
     background-color: var(--bg-color-solid);
     border-radius: 5px;
-    height: calc(100% - 20px);
+    height: calc(100% - 100px);
-    box-sizing: border-box;
     border: 1px solid var(--bd-color);
     transition: .5s;
 }
@@ -450,14 +457,17 @@ html.bgimged .wordset {
     justify-content: space-around;
     opacity: 0;
     transition: .5s;
-    margin: 10px;
+}
+
+#header {
+    /* border-bottom: solid 1px #bcbcbc; */
+    justify-content: space-between;
+    animation: enter ease-out .6s backwards;
 }
 
 #wordsets-container {
     overflow-x: auto;
-    height: 100%;
+    height: calc(100% - 60px);
-    box-sizing: border-box;
-    padding-bottom: 20px;
     position: relative;
 }
 

src/views/post/AboutView.vue

@@ -7,16 +7,6 @@
 <script setup lang="ts">
 import Post from '@/md/about.md';
 import '@/styles/markdown.css';
-import anime from 'animejs';
-import { onMounted } from 'vue';
-
-onMounted(() => {
-    anime({
-        targets: '#post',
-        translateY: [-50, 0],
-        opacity: [0, 1],
-    });
-});
 </script>
 
 <style scoped>
@@ -33,9 +23,7 @@ onMounted(() => {
 }
 
 #wrapper {
-    height: 100%;
+    height:calc(100% - 80px);
-    box-sizing: border-box;
-    padding-bottom: 20px;
     width: 100%;
     align-items: center;
     overflow: auto;

src/views/post/ManualView.vue

@@ -7,16 +7,6 @@
 <script setup lang="ts">
 import Post from '@/md/manual.md';
 import '@/styles/markdown.css';
-import anime from 'animejs';
-import { onMounted } from 'vue';
-
-onMounted(() => {
-    anime({
-        targets: '#post',
-        translateY: [-50, 0],
-        opacity: [0, 1],
-    });
-});
 </script>
 
 <style scoped>
@@ -33,9 +23,7 @@ onMounted(() => {
 }
 
 #wrapper {
-    height: 100%;
+    height:calc(100% - 90px);
-    box-sizing: border-box;
-    padding-bottom: 20px;
     width: 100%;
     align-items: center;
     overflow: auto;

src/views/recite/ReciteView.vue

@@ -1,12 +1,12 @@
 <template>
     <div>
-        <el-page-header class="recite-view-header recite-view-animation-el"  @back="$router.push('/')">
+        <el-page-header style="margin-top:20px;margin-left:20px" @back="$router.push('/')">
             <template #content>
                 <span class="text-large font-600 mr-3"> 背诵 </span>
             </template>
         </el-page-header>
         <div id="test" class="colbox">
-            <div style="flex-grow: 1;" class="card recite-view-animation-el">
+            <div style="flex-grow: 1;" class="card">
                 <div id="status">背诵进度: {{ current + 1 }}/{{ total }}</div>
                 <div>
                     <textarea autofocus id="input" ref="inputAreaRef" v-if="current === answered" @input="change"
@@ -20,12 +20,12 @@
                     <el-button v-if="current === answered" @click="showAnswer">显示答案</el-button>
                     <el-button v-if="current === answered" type="warning" @click="skip">跳过</el-button>
                     <el-button @click="terminate" type="danger">停止背诵</el-button>
-                    <v-icon style="margin-left: 10px;translate: 0 4px;"
+                    <box-icon color="var(--text-color)" class="btn" style="margin-left: 10px;translate: 0 4px;"
-                        @click="audio_play">mdi-volume-high</v-icon>
+                        @click="audio_play" name='volume-full'></box-icon>
                 </div>
                 <div id="trans">{{ word.type }} {{ word.trans }}</div>
             </div>
-            <div id="add-to-box" class="card recite-view-animation-el">
+            <div id="add-to-box" class="card">
                 <el-text class="mx-1 title">加入至</el-text>
                 <div class="colbox para">
                     <div class="mid-text">分组:</div>
@@ -52,7 +52,6 @@ import { useRouter, useRoute } from 'vue-router';
 import { ElMessage, ElNotification, ElMessageBox } from 'element-plus';
 import { useMainStore } from '@/store';
 import { WordItem } from '@/types';
-import anime from 'animejs';
 
 const router = useRouter();
 const route = useRoute();
@@ -304,12 +303,6 @@ onMounted(() => {
         });
         router.push('/select');
     });
-    anime({
-        targets: '.recite-view-animation-el',
-        translateY: [-50, 0],
-        opacity: [0, 1],
-        delay: anime.stagger(50),
-    });
 });
 
 onBeforeUnmount(() => {
@@ -317,13 +310,6 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style>
-.recite-view-header {
-    margin-top:20px;
-    margin-left:20px
-}
-</style>
-
 <style scoped>
 @media screen and (max-width: 500px) {
 

src/views/recite/SelectView.vue

@@ -1,15 +1,16 @@
 <template>
     <div class="container" id="page">
-        <el-page-header class="recite-select-animation-el recite-select-header" @back="router.push('/');">
+        <el-page-header @back="router.push('/');"
+            style="width: calc(100% - 30px);margin-left: 30px;margin-top: 5px;">
             <template #content>
                 <span class="text-large font-600 mr-3">开始新背诵</span>
             </template>
         </el-page-header>
-        <el-steps class="recite-select-animation-el" style="width: 100%;" align-center :active="step">
+        <el-steps style="width: 100%;" align-center :active="step">
             <el-step title="选择单词本" description="选择在线或本地单词本以开始背诵"></el-step>
             <el-step title="自定义背诵" description="您可以在此处更改背诵设置"></el-step>
         </el-steps>
-        <div id="main" class="card recite-select-animation-el">
+        <div id="main" class="card" style="overflow: hidden;">
             <div class="item" id="select-area" v-show="step === 1">
                 <el-tabs style="height: calc(100% - 40px);position: relative;overflow: hidden;">
                     <el-tab-pane label="本地">
@@ -90,7 +91,6 @@ import { ElMessage } from 'element-plus';
 import { useRouter } from 'vue-router';
 import { useMainStore } from '@/store';
 import axios from '@/scripts/request';
-import anime from 'animejs';
 
 const router = useRouter();
 const store = useMainStore();
@@ -214,12 +214,6 @@ onMounted(() => {
             type: "error"
         });
     });
-    anime({
-        targets: ".recite-select-animation-el",
-        translateY: [-50, 0],
-        opacity: [0, 1],
-        delay: anime.stagger(50),
-    })
 });
 </script>
 
@@ -245,6 +239,7 @@ onMounted(() => {
     align-items: center;
     display: flex;
     flex-direction: column;
+    margin-top: 10px;
 }
 
 .subtitle {
@@ -266,9 +261,8 @@ onMounted(() => {
 
 #main {
     margin-top: 10px;
-    height: calc(100% - 60px);
+    height: calc(100% - 250px);
     width: 90%;
-    overflow: hidden;
 }
 
 .item {
@@ -304,12 +298,6 @@ onMounted(() => {
     height: calc(100% - 50px);
 }
 
-.recite-select-header {
-    width: calc(100% - 30px);
-    margin-left: 30px;
-    margin-top: 15px;
-}
-
 @keyframes exitLeft {
     0% {
         opacity: 1;

vite.config.ts

@@ -7,18 +7,11 @@ import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import Markdown from 'unplugin-vue-markdown/vite'
 
-const now = new Date();
-const buildTime = now.toLocaleString('zh-CN');
-
 export default defineConfig({
   base: './',
   build: {
     outDir: 'page',
   },
-  define: {
-    __BUILD_TIME__: JSON.stringify(buildTime),
-    __APP_VERSION__: JSON.stringify('1.03 beta1')
-  },
   plugins: [
     vue({
       include: [ /\.vue$/,/\.md$/],