feat(editor): 组件列表支持设置tooltip显示详情

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>

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';

packages/editor/src/type.ts

@@ -334,6 +334,8 @@ export interface SideBarData {
 export interface ComponentItem {
   /** 显示文案 */
   text: string;
+  /** 详情，用于tooltip */
+  desc?: string;
   /** 组件类型 */
   type: string;
   /** Vue组件或url */