feat: 完善tdesign-vue-next适配

packages/design/src/Badge.vue

@@ -0,0 +1,23 @@
+<template>
+  <component class="tmagic-design-badge" :is="uiComponent.component" v-bind="uiProps">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts" name="TMBadge">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  value?: string | number;
+  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+  max?: number;
+  isDot?: boolean;
+  hidden?: boolean;
+}>();
+
+const uiComponent = getConfig('components').badge;
+
+const uiProps = computed(() => uiComponent.props(props));
+</script>

packages/design/src/Input.vue

@@ -13,6 +13,12 @@
     <template #append v-if="$slots.append">
       <slot name="append"></slot>
     </template>
+    <template #prefix v-if="$slots.prefix">
+      <slot name="prefix"></slot>
+    </template>
+    <template #suffix v-if="$slots.suffix">
+      <slot name="suffix"></slot>
+    </template>
   </component>
 </template>
 

packages/design/src/RadioButton.vue

@@ -0,0 +1,21 @@
+<template>
+  <component class="tmagic-design-radio-button" :is="uiComponent.component" v-bind="uiProps">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts" name="TMRadioButton">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  label?: string | number | boolean;
+  disabled?: boolean;
+  name?: string;
+}>();
+
+const uiComponent = getConfig('components').radioButton;
+
+const uiProps = computed(() => uiComponent.props(props));
+</script>

packages/design/src/Select.vue

@@ -32,6 +32,7 @@ const props = defineProps<{
   allowCreate?: boolean;
   valueKey?: string;
   remoteMethod?: any;
+  loading?: boolean;
   size?: 'large' | 'default' | 'small';
 }>();
 

packages/design/src/defaultAdapter.ts

@@ -1,5 +1,10 @@
 export default {
   components: {
+    badge: {
+      component: 'el-badge',
+      props: (props: any) => props,
+    },
+
     button: {
       component: 'el-button',
       props: (props: any) => props,
@@ -130,6 +135,11 @@ export default {
       props: (props: any) => props,
     },
 
+    radioButton: {
+      component: 'el-radio-button',
+      props: (props: any) => props,
+    },
+
     radioGroup: {
       component: 'el-radio-group',
       props: (props: any) => props,

packages/design/src/index.ts

@@ -7,6 +7,7 @@ export * from './type';
 export * from './config';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
+export { default as TMagicBadge } from './Badge.vue';
 export { default as TMagicButton } from './Button.vue';
 export { default as TMagicCard } from './Card.vue';
 export { default as TMagicCascader } from './Cascader.vue';
@@ -33,6 +34,7 @@ export { default as TMagicOptionGroup } from './OptionGroup.vue';
 export { default as TMagicPagination } from './Pagination.vue';
 export { default as TMagicPopover } from './Popover.vue';
 export { default as TMagicRadio } from './Radio.vue';
+export { default as TMagicRadioButton } from './RadioButton.vue';
 export { default as TMagicRadioGroup } from './RadioGroup.vue';
 export { default as TMagicRow } from './Row.vue';
 export { default as TMagicScrollbar } from './Scrollbar.vue';
@@ -95,6 +97,10 @@ export default {
       tMagicMessageBox.close = options.messageBox?.close;
     }
 
+    if (options.loading) {
+      app.directive('loading', options.loading);
+    }
+
     app.config.globalProperties.$MAGIC_DESIGN = options;
     setConfig(options);
   },

packages/design/src/type.ts

@@ -1,3 +1,5 @@
+import { Directive } from 'vue';
+
 export interface CascaderOption {
   /** 指定选项的值为选项对象的某个属性值 */
   value: any;
@@ -33,9 +35,20 @@ export interface TMagicMessageBox {
   close(): void;
 }
 
+export type LoadingBinding = boolean;
+
+const INSTANCE_KEY = Symbol('TdesignLoading');
+
+export interface ElementLoading extends HTMLElement {
+  [INSTANCE_KEY]?: {
+    instance: any;
+  };
+}
+
 export interface PluginOptions {
   message?: TMagicMessage;
   messageBox?: TMagicMessageBox;
   components?: Record<string, any>;
+  loading?: Directive<ElementLoading, LoadingBinding>;
   [key: string]: any;
 }

packages/editor/src/components/SearchInput.vue

@@ -5,16 +5,19 @@
     size="small"
     placeholder="输入关键字进行过滤"
     clearable
-    :prefix-icon="Search"
     @input="filterTextChangeHandler"
-  ></TMagicInput>
+  >
+    <template #prefix>
+      <TMagicIcon><Search /></TMagicIcon>
+    </template>
+  </TMagicInput>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { Search } from '@element-plus/icons-vue';
 
-import { TMagicInput } from '@tmagic/design';
+import { TMagicIcon, TMagicInput } from '@tmagic/design';
 
 const emit = defineEmits(['search']);
 

packages/editor/src/layouts/sidebar/Sidebar.vue

@@ -1,16 +1,16 @@
 <template>
-  <TMagicTabs
+  <component
     v-if="data.type === 'tabs' && data.items.length"
-    class="m-editor-sidebar"
     v-model="activeTabName"
-    type="card"
-    tab-position="left"
+    class="m-editor-sidebar tmagic-design-tabs"
+    v-bind="tabsComponent.props({ type: 'card', tabPosition: 'left' })"
+    :is="tabsComponent.component"
   >
     <component
-      :is="uiComponent.component"
       v-for="(config, index) in sideBarItems"
+      v-bind="tabPaneComponent.props({ name: config.text })"
+      :is="tabPaneComponent.component"
       :key="config.$key || index"
-      :name="config.text"
     >
       <template #label>
         <div :key="config.text">
@@ -80,14 +80,14 @@
         </template>
       </component>
     </component>
-  </TMagicTabs>
+  </component>
 </template>
 
 <script lang="ts" setup name="MEditorSidebar">
 import { computed, ref, watch } from 'vue';
 import { Coin, EditPen, Files } from '@element-plus/icons-vue';
 
-import { getConfig, TMagicTabs } from '@tmagic/design';
+import { getConfig } from '@tmagic/design';
 
 import MIcon from '@editor/components/Icon.vue';
 import type { MenuButton, MenuComponent, SideComponent, SideItem } from '@editor/type';
@@ -107,7 +107,8 @@ const props = withDefaults(
   },
 );
 
-const uiComponent = getConfig('components').tabPane;
+const tabPaneComponent = getConfig('components').tabPane;
+const tabsComponent = getConfig('components').tabs;
 
 const activeTabName = ref(props.data?.status);
 

packages/editor/src/theme/sidebar.scss

@@ -1,11 +1,24 @@
-.m-editor-sidebar {
+.m-editor-sidebar.tmagic-design-tabs {
   height: 100%;
 
-  &.el-tabs--left .el-tabs__header {
+  .el-tabs__header,
+  .t-tabs__header {
     background: $--sidebar-heder-background-color;
     border: 0;
+    height: 100%;
+
+    .t-tabs__nav--card {
+      background-color: transparent;
+    }
 
-    &.is-left {
+    .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(
+        .t-is-active
+      ):hover {
+      background-color: transparent;
+    }
+
+    &.is-left,
+    &.t-is-left {
       width: 40px;
       margin-right: 0;
     }
@@ -23,16 +36,19 @@
       margin-left: 2px;
     }
 
-    .el-tabs__item.is-left {
+    .el-tabs__item.is-left,
+    .t-tabs__nav-item {
       line-height: 15px;
       border: 0;
       height: auto;
       padding: 8px;
       color: rgb(255, 255, 255);
       box-sizing: border-box;
 
-      &.is-left {
-        &.is-active {
+      &.is-left,
+      &.t-is-left {
+        &.is-active,
+        &.t-is-active {
           background: $--sidebar-content-background-color;
           border: 0;
 
@@ -51,6 +67,10 @@
       }
     }
 
+    .t-tabs__nav-item {
+      padding: 7px;
+    }
+
     i {
       font-size: 25px;
       color: rgba(255, 255, 255, 0.6);

packages/element-plus-adapter/src/index.ts

@@ -1,4 +1,5 @@
 import {
+  ElBadge,
   ElButton,
   ElCard,
   ElCascader,
@@ -27,6 +28,7 @@ import {
   ElPagination,
   ElPopover,
   ElRadio,
+  ElRadioButton,
   ElRadioGroup,
   ElRow,
   ElScrollbar,
@@ -49,6 +51,11 @@ const adapter: any = {
   message: ElMessage,
   messageBox: ElMessageBox,
   components: {
+    badge: {
+      component: ElBadge,
+      props: (props: any) => props,
+    },
+
     button: {
       component: ElButton,
       props: (props: any) => props,
@@ -179,6 +186,11 @@ const adapter: any = {
       props: (props: any) => props,
     },
 
+    radioButton: {
+      component: ElRadioButton,
+      props: (props: any) => props,
+    },
+
     radioGroup: {
       component: ElRadioGroup,
       props: (props: any) => props,