feat(projects): add plugin typeit (#591)

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",

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,44 @@
+<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>();
+
+const options: Options = {
+  strings: 'SoybeanAdmin是一个清新优雅、高颜值且功能强大的后台管理模板',
+  lifeLike: true,
+  speed: 120,
+  loop: true
+};
+
+function init() {
+  if (!textRef.value) return;
+  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="msg text-18px"></span>
+    </NCard>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.msg :deep(.ti-cursor) {
+  margin-left: 4px;
+}
+</style>