optimize(projects): optimize code

package.json

@@ -70,6 +70,7 @@
     "print-js": "1.6.0",
     "swiper": "11.1.5",
     "tailwind-merge": "2.4.0",
+    "typeit": "8.8.4",
     "vditor": "3.10.4",
     "vue": "3.4.35",
     "vue-draggable-plus": "0.5.2",

pnpm-lock.yaml

@@ -77,6 +77,9 @@ importers:
       tailwind-merge:
         specifier: 2.4.0
         version: 2.4.0
+      typeit:
+        specifier: 8.8.4
+        version: 8.8.4
       vditor:
         specifier: 3.10.4
         version: 3.10.4
@@ -1271,6 +1274,9 @@ packages:
   '@types/unist@3.0.2':
     resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
 
+  '@types/web-animations-js@2.2.16':
+    resolution: {integrity: sha512-ATELeWMFwj8eQiH0KmvsCl1V2lu/qx/CjOBmv4ADSZS5u8r4reMyjCXtxG7khqyiwH3IOMNdrON/Ugn94OUcRA==}
+
   '@types/web-bluetooth@0.0.20':
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
@@ -4647,6 +4653,9 @@ packages:
     resolution: {integrity: sha512-8WbVAQAUlENo1q3c3zZYuy5k9VzBQvp8AX9WOtbvyWlLM1v5JaSRmjubLjzHF4JFtptjH/5c/i95yaElvcjC0A==}
     engines: {node: '>= 0.4'}
 
+  typeit@8.8.4:
+    resolution: {integrity: sha512-bD4/PNthsYj5ObPKqkARnYA7NStbYzZDe8g5odXACmFw2HKEDWSUPv275lblz6E8REr+Ji6oll/AHKmD2ONMYA==}
+
   typescript@5.5.4:
     resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
     engines: {node: '>=14.17'}
@@ -5986,6 +5995,8 @@ snapshots:
 
   '@types/unist@3.0.2': {}
 
+  '@types/web-animations-js@2.2.16': {}
+
   '@types/web-bluetooth@0.0.20': {}
 
   '@typescript-eslint/eslint-plugin@7.13.0(@typescript-eslint/parser@7.13.0(eslint@9.8.0)(typescript@5.5.4))(eslint@9.8.0)(typescript@5.5.4)':
@@ -9931,6 +9942,10 @@ snapshots:
       typed-array-buffer: 1.0.2
       typed-array-byte-offset: 1.0.2
 
+  typeit@8.8.4:
+    dependencies:
+      '@types/web-animations-js': 2.2.16
+
   typescript@5.5.4: {}
 
   ufo@1.5.4: {}

src/locales/langs/en-us.ts

@@ -206,7 +206,8 @@ const local: App.I18n.Schema = {
     plugin_pinyin: 'pinyin',
     plugin_excel: 'Excel',
     plugin_pdf: 'PDF preview',
-    plugin_gantt: 'Gantt Chart'
+    plugin_gantt: 'Gantt Chart',
+    plugin_typeit: 'Typeit'
   },
   page: {
     login: {

src/locales/langs/zh-cn.ts

@@ -206,7 +206,8 @@ const local: App.I18n.Schema = {
     plugin_pinyin: '拼音',
     plugin_excel: 'Excel',
     plugin_pdf: 'PDF 预览',
-    plugin_gantt: '甘特图'
+    plugin_gantt: '甘特图',
+    plugin_typeit: '打字机'
   },
   page: {
     login: {

src/router/elegant/imports.ts

@@ -49,6 +49,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   plugin_pinyin: () => import("@/views/plugin/pinyin/index.vue"),
   plugin_print: () => import("@/views/plugin/print/index.vue"),
   plugin_swiper: () => import("@/views/plugin/swiper/index.vue"),
+  plugin_typeit: () => import("@/views/plugin/typeit/index.vue"),
   plugin_video: () => import("@/views/plugin/video/index.vue"),
   "user-center": () => import("@/views/user-center/index.vue"),
 };

src/router/elegant/routes.ts

@@ -494,6 +494,16 @@ export const generatedRoutes: GeneratedRoute[] = [
           icon: 'simple-icons:swiper'
         }
       },
+      {
+        name: 'plugin_typeit',
+        path: '/plugin/typeit',
+        component: 'view.plugin_typeit',
+        meta: {
+          title: 'plugin_typeit',
+          i18nKey: 'route.plugin_typeit',
+          icon: 'mdi:typewriter'
+        }
+      },
       {
         name: 'plugin_video',
         path: '/plugin/video',

src/router/elegant/transform.ts

@@ -219,6 +219,7 @@ const routeMap: RouteMap = {
   "plugin_pinyin": "/plugin/pinyin",
   "plugin_print": "/plugin/print",
   "plugin_swiper": "/plugin/swiper",
+  "plugin_typeit": "/plugin/typeit",
   "plugin_video": "/plugin/video",
   "user-center": "/user-center"
 };

src/typings/elegant-router.d.ts

@@ -73,6 +73,7 @@ declare module "@elegant-router/types" {
     "plugin_pinyin": "/plugin/pinyin";
     "plugin_print": "/plugin/print";
     "plugin_swiper": "/plugin/swiper";
+    "plugin_typeit": "/plugin/typeit";
     "plugin_video": "/plugin/video";
     "user-center": "/user-center";
   };
@@ -182,6 +183,7 @@ declare module "@elegant-router/types" {
     | "plugin_pinyin"
     | "plugin_print"
     | "plugin_swiper"
+    | "plugin_typeit"
     | "plugin_video"
     | "user-center"
   >;

src/views/plugin/typeit/index.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { onMounted, shallowRef } from 'vue';
+import TypeIt from 'typeit';
+import type { Options } from 'typeit';
+import type { El } from 'typeit/dist/types';
+
+const textRef = shallowRef<El>();
+
+function init() {
+  if (!textRef.value) return;
+
+  const options: Options = {
+    strings: 'SoybeanAdmin是一个清新优雅、高颜值且功能强大的后台管理模板',
+    lifeLike: true,
+    speed: 120,
+    loop: true
+  };
+
+  const initTypeIt = new TypeIt(textRef.value, options);
+
+  initTypeIt.go();
+}
+
+onMounted(() => {
+  init();
+});
+</script>
+
+<template>
+  <div>
+    <NCard title="打字机 插件" :bordered="false" class="h-full card-wrapper">
+      <NSpace :vertical="true">
+        <GithubLink link="https://github.com/alexmacarthur/typeit" />
+        <WebSiteLink label="文档地址：" link="https://www.typeitjs.com/docs/vanilla/usage/" />
+      </NSpace>
+      <NDivider title-placement="left">基本示例</NDivider>
+      <span ref="textRef" class="text-18px"></span>
+    </NCard>
+  </div>
+</template>
+
+<style scoped></style>