change version info

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 /dist
 /test
+page/
 
 # local env files
 .env.local

components.d.ts

@@ -28,8 +28,11 @@ declare module 'vue' {
     ElStep: typeof import('element-plus/es')['ElStep']
     ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElText: typeof import('element-plus/es')['ElText']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/App.vue

@@ -30,120 +30,6 @@ const go = (path: string) => {
 }
 </script>
 
-<style>
-@media screen and (max-width: 500px) {
-  .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{
-  transition: .5s;
-}
-
-html {
-  --bg-color-solid:#e8e8e8;
-  --bg-color: #ffffffae;
-  --text-color: #464646;
-  --bd-color: #bbbbbb99;
-}
-
-html.dark {
-  --bg-color-solid:#191919;
-  --bg-color: #2a2a2a88;
-  --text-color: #c0c0c0;
-  --bd-color: #7f7f7f7c;
-  --navi-bg-color: #131313e2;
-}
-
-.container {
-  height: calc(100% - 20px);
-  width: calc(100% - 20px);
-  /* padding: 20px; */
-  animation: enter ease-out .6s backwards;
-}
-
-.colbox {
-  display: flex;
-  flex-direction: row;
-}
-
-.rowbox {
-  display: flex;
-  flex-direction: column;
-}
-
-.card {
-  border-radius: 8px;
-  border: solid 1px var(--bd-color);
-  padding: 20px;
-  margin: 10px;
-  color: var(--text-color);
-  transition: .5s;
-}
-
-.card:hover {
-  box-shadow: var(--el-box-shadow);
-}
-
-html.bgimged .card {
-  background-color: var(--bg-color);
-  backdrop-filter: blur(15px);
-}
-
-.btn {
-  cursor: pointer;
-}
-
-.mid-text {
-  width: 65px;
-  transform: translate(0, 6px);
-  color: var(--text-color);
-  margin-right: 5px;
-  margin-left: 5px;
-}
-
-.para {
-  margin: 15px;
-}
-
-.blured {
-  filter: blur(10px);
-}
-</style>
-
 <style scoped>
 @media screen and (max-width: 500px) {
   #navibar {

src/components/UI/CDialog.vue

@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import { ref, watch, nextTick, onMounted } from 'vue'
-import "@/style/cui.scss"
+import "@/styles/cui.css"
 
 const props = defineProps<{
     visible: boolean,
@@ -52,7 +52,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 #mask {
     z-index: 500;
     position: absolute;

src/main.ts

@@ -5,6 +5,7 @@ import "element-plus/dist/index.css";
 import "element-plus/theme-chalk/dark/css-vars.css";
 import { useDarkMode } from "./composables/useDarkMode";
 import router from "./router";
+import "./styles/global.css";
 
 // Vuetify
 import "vuetify/styles";

src/md/about.md

@@ -16,19 +16,26 @@ wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1
 ## 3.联系作者
 
 - 通过电子邮件
-  - <rooger@zju.edu.cn>
-  - <rooger233@gmail.com>  
+  - [rooger@zju.edu.cn](mailto:rooger@zju.edu.cn)
+  - [rooger233@gmail.com](mailto:rooger233@gmail.com)
 - 通过QQ
   - 1176075089
 
 ## 3.更新日志
 
+### 1.02
+
+1. 更新内容
+   - 使用 Vite 构建，更加现代化
+   - 使用 TypeScript 解析，减少错误
+   - 优化了启动速度，精简了代码
+2. 抱歉鸽了这么久，在这期间我也学会了很多新的技能，认识了很多新的朋友，感谢 ACEE 的各位！
+
 ### 1.0.2 Beta 2
 
 1. 更新内容
 
    - 减小了打包体积
-
 2. Bug修复进度
 
    - （解决中）自定义背景
@@ -40,7 +47,6 @@ wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1
 
    - 重写对话框组件
    - 增加了一些单词本管理功能
-
 2. Bug修复进度
 
    - （解决中）自定义背景
@@ -58,7 +64,6 @@ wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1
    - 重写了主页
    - 优化了过渡动画
    - 优化了全局变量管理
-
 2. Bug修复进度
 
    - （已修复）背诵时插入导致指针归位

src/styles/cui.css

@@ -0,0 +1,35 @@
+@keyframes cui-dialog-appear {
+    0% {
+        /* opacity: 0%; */
+        transform: translate(-50%, -50%) scale(0.7);
+    }
+
+    100% {
+        /* opacity: 100%; */
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+@keyframes cui-dialog-disappear {
+    0% {
+        opacity: 100%;
+        transform: translate(-50%, -50%) scale(1);
+    }
+
+    100% {
+        opacity: 0%;
+        transform: translate(-50%, -50%) scale(0.5);
+    }
+}
+
+@keyframes cui-dialog-blur {
+    0% {
+        opacity: 0%;
+        /* backdrop-filter: blur(0px); */
+    }
+
+    100% {
+        opacity: 100%;
+        /* backdrop-filter: blur(10px); */
+    }
+}

src/styles/global.css

@@ -0,0 +1,111 @@
+@media screen and (max-width: 500px) {
+  .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 {
+  transition: 0.5s;
+}
+
+html {
+  --bg-color-solid: #e8e8e8;
+  --bg-color: #ffffffae;
+  --text-color: #464646;
+  --bd-color: #bbbbbb99;
+}
+
+html.dark {
+  --bg-color-solid: #191919;
+  --bg-color: #2a2a2a88;
+  --text-color: #c0c0c0;
+  --bd-color: #7f7f7f7c;
+  --navi-bg-color: #131313e2;
+}
+
+.container {
+  height: calc(100% - 20px);
+  width: calc(100% - 20px);
+  /* padding: 20px; */
+  animation: enter ease-out 0.6s backwards;
+}
+
+.colbox {
+  display: flex;
+  flex-direction: row;
+}
+
+.rowbox {
+  display: flex;
+  flex-direction: column;
+}
+
+.card {
+  border-radius: 8px;
+  border: solid 1px var(--bd-color);
+  padding: 20px;
+  margin: 10px;
+  color: var(--text-color);
+  transition: 0.5s;
+}
+
+.card:hover {
+  box-shadow: var(--el-box-shadow);
+}
+
+html.bgimged .card {
+  background-color: var(--bg-color);
+  backdrop-filter: blur(15px);
+}
+
+.btn {
+  cursor: pointer;
+}
+
+.mid-text {
+  width: 65px;
+  transform: translate(0, 6px);
+  color: var(--text-color);
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.para {
+  margin: 15px;
+}
+
+.blured {
+  filter: blur(10px);
+}

src/types/markdown.d.ts

@@ -0,0 +1,13 @@
+declare module "*.vue" {
+  import type { ComponentOptions } from "vue";
+
+  const Component: ComponentOptions;
+  export default Component;
+}
+
+declare module "*.md" {
+  import type { ComponentOptions } from "vue";
+
+  const Component: ComponentOptions;
+  export default Component;
+}

src/views/HomeView.vue

@@ -4,7 +4,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>当前版本: 1.02 Beta 2 <br/> 更新时间:2024年1月11日 5:07 PM</div>
+                <div>当前版本: 1.02 <br/> 更新时间:2025年3月6日 10:35 PM</div>
             </div>
             <div style="flex-grow: 1;align-items: center;" class="colbox card">
                 <router-link to="/select" class="button">