optimize(projects): optimize code

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/views/plugin/typeit/index.vue

@@ -6,16 +6,18 @@ 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 options: Options = {
+    strings: 'SoybeanAdmin是一个清新优雅、高颜值且功能强大的后台管理模板',
+    lifeLike: true,
+    speed: 120,
+    loop: true
+  };
+
   const initTypeIt = new TypeIt(textRef.value, options);
+
   initTypeIt.go();
 }
 
@@ -32,13 +34,9 @@ onMounted(() => {
         <WebSiteLink label="文档地址：" link="https://www.typeitjs.com/docs/vanilla/usage/" />
       </NSpace>
       <NDivider title-placement="left">基本示例</NDivider>
-      <span ref="textRef" class="msg text-18px"></span>
+      <span ref="textRef" class="text-18px"></span>
     </NCard>
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped></style>
-.msg :deep(.ti-cursor) {
-  margin-left: 4px;
-}
-</style>