From 6a5374726e54e5ef7610d8262080ca8b13856b19 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 24 Oct 2023 14:58:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E7=BB=84=E4=BB=B6=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AEtooltip=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/components/Icon.vue                    | 6 +++++-
 packages/editor/src/layouts/sidebar/ComponentListPanel.vue | 7 ++++---
 packages/editor/src/type.ts                                | 2 ++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/editor/src/components/Icon.vue b/packages/editor/src/components/Icon.vue
index 54b1e551..457e834d 100644
--- a/packages/editor/src/components/Icon.vue
+++ b/packages/editor/src/components/Icon.vue
@@ -1,6 +1,8 @@
 <template>
   <TMagicIcon v-if="!icon" class="magic-editor-icon"><Edit></Edit></TMagicIcon>
-  <TMagicIcon v-else-if="typeof icon === 'string' && icon.startsWith('http')" class="magic-editor-icon"
+  <TMagicIcon
+    v-else-if="typeof icon === 'string' && (icon.startsWith('http') || isRelativePath(icon))"
+    class="magic-editor-icon"
     ><img :src="icon"
   /></TMagicIcon>
   <i v-else-if="typeof icon === 'string'" class="magic-editor-icon" :class="icon"></i>
@@ -20,4 +22,6 @@ defineOptions({
 defineProps<{
   icon?: any;
 }>();
+
+const isRelativePath = (str: string) => /^(\.|(\.\.)?\/)/.test(str);
 </script>
diff --git a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
index 613a24a4..4f0dff08 100644
--- a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
@@ -18,8 +18,9 @@
             @drag="dragHandler"
           >
             <slot name="component-list-item" :component="item">
-              <MIcon :title="item.text" :icon="item.icon"></MIcon>
-
+              <TMagicTooltip placement="right" :disabled="!Boolean(item.desc)" :content="item.desc">
+                <MIcon :icon="item.icon"></MIcon>
+              </TMagicTooltip>
               <span :title="item.text">{{ item.text }}</span>
             </slot>
           </div>
@@ -34,7 +35,7 @@ import { computed, inject, ref } from 'vue';
 import { Grid } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
 
-import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar } from '@tmagic/design';
+import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
 import { removeClassNameByClassName } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index 9c467a6c..0102aa7a 100644
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -334,6 +334,8 @@ export interface SideBarData {
 export interface ComponentItem {
   /** 显示文案 */
   text: string;
+  /** 详情，用于tooltip */
+  desc?: string;
   /** 组件类型 */
   type: string;
   /** Vue组件或url */