From f762587fa778ed81b005002163930c4964d90830 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E4=B8=87?=
 <52823142+Ten-K@users.noreply.github.com>
Date: Wed, 21 Feb 2024 13:31:05 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=A2=9E=E5=BC=BA`ReTypeit`=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81=E6=8F=92=E6=A7=BD=E4=BB=A5?=
 =?UTF-8?q?=E5=8F=8A=E6=89=80=E6=9C=89`typeit`=E9=85=8D=E7=BD=AE=E9=A1=B9?=
 =?UTF-8?q?=20(#922)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* perf: 增强typeit组件

* fix: update

* fix: delete invalid code
---
 src/components/ReTypeit/index.ts      | 50 ++++--------------------
 src/components/ReTypeit/src/index.tsx | 56 +++++++++++++++++++++++++++
 src/views/able/typeit.vue             |  8 +++-
 src/views/login/index.vue             |  4 +-
 4 files changed, 72 insertions(+), 46 deletions(-)
 create mode 100644 src/components/ReTypeit/src/index.tsx

diff --git a/src/components/ReTypeit/index.ts b/src/components/ReTypeit/index.ts
index 4c34bae62..dd6f2ca49 100644
--- a/src/components/ReTypeit/index.ts
+++ b/src/components/ReTypeit/index.ts
@@ -1,44 +1,8 @@
-import { h, defineComponent } from "vue";
-import TypeIt from "typeit";
+import typeIt from "./src/index";
+import type { TypeItOptions } from "typeit";
 
-// 打字机效果组件（只是简单的封装下，更多配置项参考 https://www.typeitjs.com/docs/vanilla/usage#options）
-export default defineComponent({
-  name: "TypeIt",
-  props: {
-    /** 打字速度，以每一步之间的毫秒数为单位，默认`200` */
-    speed: {
-      type: Number,
-      default: 200
-    },
-    values: {
-      type: Array,
-      defalut: []
-    },
-    className: {
-      type: String,
-      default: "type-it"
-    },
-    cursor: {
-      type: Boolean,
-      default: true
-    }
-  },
-  render() {
-    return h(
-      "span",
-      {
-        class: this.className
-      },
-      {
-        default: () => []
-      }
-    );
-  },
-  mounted() {
-    new TypeIt(`.${this.className}`, {
-      strings: this.values,
-      speed: this.speed,
-      cursor: this.cursor
-    }).go();
-  }
-});
+const TypeIt = typeIt;
+
+export { TypeIt, TypeItOptions };
+
+export default TypeIt;
diff --git a/src/components/ReTypeit/src/index.tsx b/src/components/ReTypeit/src/index.tsx
new file mode 100644
index 000000000..9e61b85ca
--- /dev/null
+++ b/src/components/ReTypeit/src/index.tsx
@@ -0,0 +1,56 @@
+import type { El } from "typeit/dist/types";
+import TypeIt, { type TypeItOptions } from "typeit";
+import { ref, defineComponent, onMounted, type PropType } from "vue";
+
+// 打字机效果组件（配置项详情请查阅 https://www.typeitjs.com/docs/vanilla/usage#options）
+export default defineComponent({
+  name: "TypeIt",
+  props: {
+    options: {
+      type: Object as PropType<TypeItOptions>,
+      default: () => ({}) as TypeItOptions
+    }
+  },
+  setup(props, { slots, expose }) {
+    /**
+     * 输出错误信息
+     * @param message 错误信息
+     */
+    function throwError(message: string) {
+      throw new TypeError(message);
+    }
+
+    /**
+     * 获取浏览器默认语言
+     */
+    function getBrowserLanguage() {
+      return navigator.language;
+    }
+
+    const typedItRef = ref<Element | null>(null);
+
+    onMounted(() => {
+      const $typed = typedItRef.value!.querySelector(".type-it") as El;
+
+      if (!$typed) {
+        const errorMsg =
+          getBrowserLanguage() === "zh-CN"
+            ? "请确保有且只有一个具有class属性为 'type-it' 的元素"
+            : "Please make sure that there is only one element with a Class attribute with 'type-it'";
+        throwError(errorMsg);
+      }
+
+      const typeIt = new TypeIt($typed, props.options).go();
+
+      expose({
+        typeIt
+      });
+    });
+
+    return () => (
+      <div ref={typedItRef}>
+        {slots.default?.() ?? <span class="type-it"></span>}
+      </div>
+    );
+  }
+});
diff --git a/src/views/able/typeit.vue b/src/views/able/typeit.vue
index c79820755..3c0d24f70 100644
--- a/src/views/able/typeit.vue
+++ b/src/views/able/typeit.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import TypeIt from "@/components/ReTypeit";
+import { TypeIt, type TypeItOptions } from "@/components/ReTypeit";
 
 defineOptions({
   name: "Typeit"
 });
+
+const options: TypeItOptions = {
+  strings: ["test1", "test2", "test3"]
+};
 </script>
 
 <template>
@@ -13,6 +17,6 @@ defineOptions({
         <span class="font-medium"> 打字机组件 </span>
       </div>
     </template>
-    <TypeIt :values="['test1', 'test2', 'test3']" />
+    <TypeIt :options="options" />
   </el-card>
 </template>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 0be17a3e5..20ff66fe3 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -166,7 +166,9 @@ watch(loginDay, value => {
           <avatar class="avatar" />
           <Motion>
             <h2 class="outline-none">
-              <TypeIt :values="[title]" :cursor="false" :speed="150" />
+              <TypeIt
+                :options="{ strings: [title], cursor: false, speed: 100 }"
+              />
             </h2>
           </Motion>