From dd55a0f4907b7303cc9cb5eb9084e9aebca48d1c Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 18 Sep 2023 16:28:20 +0800
Subject: [PATCH] fix: ts error in components package (#4621)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind cleanup
/area console

#### What this PR does / why we need it:

修复 `@halo-dev/components` 包编译时有 error 级异常的问题。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/4544

#### Special notes for your reviewer:

观察此 PR 的 ci 中是否有异常输出即可。

#### Does this PR introduce a user-facing change?

```release-note
None
```
---
 .../src/components/dialog/Dialog.vue          | 17 +++++++-------
 .../components/src/components/toast/Toast.vue | 23 +++++++++++--------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/console/packages/components/src/components/dialog/Dialog.vue b/console/packages/components/src/components/dialog/Dialog.vue
index 6494e15a2..247bec2c9 100644
--- a/console/packages/components/src/components/dialog/Dialog.vue
+++ b/console/packages/components/src/components/dialog/Dialog.vue
@@ -8,7 +8,7 @@ import {
   IconForbidLine,
   IconInformation,
 } from "../../icons/icons";
-import { computed, ref } from "vue";
+import { ref, type Component, markRaw, type Raw } from "vue";
 import type { Type } from "@/components/dialog/interface";
 import type { Type as ButtonType } from "@/components/button/interface";
 
@@ -48,25 +48,24 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const icons = {
+const icons: Record<Type, { icon: Raw<Component>; color: string }> = {
   success: {
-    icon: IconCheckboxCircle,
+    icon: markRaw(IconCheckboxCircle),
     color: "green",
   },
   info: {
-    icon: IconInformation,
+    icon: markRaw(IconInformation),
     color: "blue",
   },
   warning: {
-    icon: IconErrorWarning,
+    icon: markRaw(IconErrorWarning),
     color: "orange",
   },
   error: {
-    icon: IconForbidLine,
+    icon: markRaw(IconForbidLine),
     color: "red",
   },
 };
-const icon = computed(() => icons[props.type]);
 
 const loading = ref(false);
 
@@ -108,8 +107,8 @@ const handleClose = () => {
     <div class="flex justify-between items-start py-2 mb-2">
       <div class="flex flex-row items-center gap-3">
         <component
-          :is="icon.icon"
-          :class="`text-${icon.color}-500`"
+          :is="icons[type].icon"
+          :class="`text-${icons[type].color}-500`"
           class="w-6 h-6"
         ></component>
         <div class="text-base text-gray-900 font-bold">{{ title }}</div>
diff --git a/console/packages/components/src/components/toast/Toast.vue b/console/packages/components/src/components/toast/Toast.vue
index cefc9ab81..8b5b49564 100644
--- a/console/packages/components/src/components/toast/Toast.vue
+++ b/console/packages/components/src/components/toast/Toast.vue
@@ -1,6 +1,13 @@
 <script lang="ts" setup>
 import type { Type } from "./interface";
-import { computed, onMounted, ref, watchEffect } from "vue";
+import {
+  onMounted,
+  ref,
+  watchEffect,
+  type Raw,
+  type Component,
+  markRaw,
+} from "vue";
 import {
   IconCheckboxCircle,
   IconErrorWarning,
@@ -36,27 +43,25 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const icons = {
+const icons: Record<Type, { icon: Raw<Component>; color: string }> = {
   success: {
-    icon: IconCheckboxCircle,
+    icon: markRaw(IconCheckboxCircle),
     color: "text-green-500",
   },
   info: {
-    icon: IconInformation,
+    icon: markRaw(IconInformation),
     color: "text-sky-500",
   },
   warning: {
-    icon: IconErrorWarning,
+    icon: markRaw(IconErrorWarning),
     color: "text-orange-500",
   },
   error: {
-    icon: IconForbidLine,
+    icon: markRaw(IconForbidLine),
     color: "text-red-500",
   },
 };
 
-const icon = computed(() => icons[props.type]);
-
 const createTimer = () => {
   if (props.duration < 0) return;
   timer.value = setTimeout(() => {
@@ -115,7 +120,7 @@ defineExpose({ close });
     >
       <div class="toast-body">
         <div class="toast-icon">
-          <component :is="icon.icon" :class="[icon.color]" />
+          <component :is="icons[type].icon" :class="icons[type].color" />
         </div>
         <div class="toast-content">
           <div class="toast-description">