feat: 完善tdesign-vue-next适配

packages/design/src/Icon.vue

@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { getConfig } from './config';
+import { IconProps } from './types';
 
 defineOptions({
   name: 'TMIcon',
@@ -13,4 +14,5 @@ defineOptions({
 
 const ui = getConfig('components')?.icon;
 const uiComponent = ui?.component || 'el-icon';
+defineProps<IconProps>();
 </script>

packages/design/src/types.ts

@@ -29,6 +29,7 @@ export interface ButtonProps {
   size?: FieldSize;
   link?: boolean;
   text?: boolean;
+  circle?: boolean;
   icon?: any;
 }
 
@@ -380,6 +381,10 @@ export interface CascaderOption {
   children?: CascaderOption[];
 }
 
+export interface IconProps {
+  size?: string;
+}
+
 export interface TMagicMessage {
   success: (msg: string) => void;
   warning: (msg: string) => void;
@@ -526,8 +531,8 @@ export interface Components {
   };
 
   icon: {
-    component: DefineComponent<{}, {}, any> | string;
-    props: () => {};
+    component: DefineComponent<IconProps, {}, any> | string;
+    props: (props: IconProps) => IconProps;
   };
 
   input: {

packages/editor/src/components/FloatingBox.vue

@@ -6,7 +6,7 @@
           <span>{{ title }}</span>
         </slot>
         <div>
-          <TMagicButton link size="small" :icon="Close" @click="closeHandler"></TMagicButton>
+          <TMagicButton link size="small" @click="closeHandler"><MIcon :icon="Close"></MIcon></TMagicButton>
         </div>
       </div>
       <div class="m-editor-float-box-body" :style="{ height: `${bodyHeight}px` }">
@@ -23,6 +23,8 @@ import VanillaMoveable from 'moveable';
 
 import { TMagicButton, useZIndex } from '@tmagic/design';
 
+import MIcon from '@editor/components/Icon.vue';
+
 interface Position {
   left: number;
   top: number;

packages/editor/src/fields/DataSourceFieldSelect.vue

@@ -19,9 +19,9 @@
       style="margin-left: 5px"
       link
       :type="showDataSourceFieldSelect ? 'primary' : 'default'"
-      :icon="Coin"
       :size="size"
       @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
+      ><MIcon :icon="Coin"></MIcon
     ></TMagicButton>
   </div>
 </template>
@@ -36,6 +36,7 @@ import { MCascader } from '@tmagic/form';
 import type { DataSchema, DataSourceFieldType } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
+import MIcon from '@editor/components/Icon.vue';
 import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
 
 defineOptions({

packages/editor/src/fields/DataSourceInput.vue

@@ -29,9 +29,13 @@
       </div>
     </template>
   </component>
-  <div :class="`tmagic-data-source-input-text el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
+  <div
+    :class="`tmagic-data-source-input-text el-input t-input t-size-${size?.[0]} el-input--${size}`"
+    @mouseup="mouseupHandler"
+    v-else
+  >
     <div :class="`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused ? ' is-focus' : ''}`">
-      <div class="el-input__inner">
+      <div class="el-input__inner t-input__inner">
         <template v-for="(item, index) in displayState">
           <span :key="index" v-if="item.type === 'text'" style="margin-right: 2px">{{ item.value }}</span>
           <TMagicTag :key="index" :size="size" v-if="item.type === 'var'">{{ item.value }}</TMagicTag>

packages/editor/src/layouts/CodeEditor.vue

@@ -5,12 +5,8 @@
         :class="`magic-code-editor-wrapper${fullScreen ? ' full-screen' : ''}`"
         :style="!fullScreen && height ? `height: ${height}` : '100%'"
       >
-        <TMagicButton
-          class="magic-code-editor-full-screen-icon"
-          circle
-          size="small"
-          :icon="FullScreen"
-          @click="fullScreenHandler"
+        <TMagicButton class="magic-code-editor-full-screen-icon" circle size="small" @click="fullScreenHandler"
+          ><MIcon :icon="FullScreen"></MIcon
         ></TMagicButton>
         <div ref="codeEditor" class="magic-code-editor-content"></div>
       </div>
@@ -26,6 +22,7 @@ import serialize from 'serialize-javascript';
 
 import { TMagicButton } from '@tmagic/design';
 
+import MIcon from '@editor/components/Icon.vue';
 import { getConfig } from '@editor/utils/config';
 import monaco from '@editor/utils/monaco-editor';
 

packages/editor/src/layouts/PropsPanel.vue

@@ -18,10 +18,11 @@
       circle
       size="large"
       title="源码"
-      :icon="DocumentIcon"
       :type="showSrc ? 'primary' : ''"
       @click="showSrc = !showSrc"
-    ></TMagicButton>
+    >
+      <MIcon :icon="DocumentIcon"></MIcon>
+    </TMagicButton>
 
     <CodeEditor
       v-if="showSrc"
@@ -43,6 +44,7 @@ import type { FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
 import type { MNode } from '@tmagic/schema';
 
+import MIcon from '@editor/components/Icon.vue';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
 import type { PropsPanelSlots, Services } from '@editor/type';
 

packages/editor/src/layouts/workspace/viewer/StageOverlay.vue

@@ -1,6 +1,8 @@
 <template>
   <div v-if="stageOverlayVisible" class="m-editor-stage-overlay" @click="closeOverlayHandler">
-    <TMagicIcon class="m-editor-stage-overlay-close" :size="20" @click="closeOverlayHandler"><CloseBold /></TMagicIcon>
+    <TMagicIcon class="m-editor-stage-overlay-close" :size="'20'" @click="closeOverlayHandler"
+      ><CloseBold
+    /></TMagicIcon>
     <div ref="stageOverlay" class="m-editor-stage-overlay-container" :style="style" @click.stop></div>
   </div>
 </template>

packages/editor/src/theme/code-block.scss

@@ -1,7 +1,3 @@
-.m-editor-code-block-list {
-  height: 100%;
-}
-
 .m-fields-code-select {
   width: 100%;
   .el-card__header {

packages/editor/src/theme/component-list-panel.scss

@@ -1,6 +1,5 @@
 .ui-component-panel {
   &.tmagic-design-collapse {
-    height: 100%;
     border-top: 0 !important;
     margin-top: 48px;
     background-color: $--sidebar-content-background-color;

packages/editor/src/theme/icon.scss

@@ -1,4 +1,10 @@
-.magic-editor-icon {
+.tmagic-design-icon {
+  --color: inherit;
+  height: 1em;
+  width: 1em;
+  position: relative;
+  fill: currentColor;
+
   img {
     max-width: 100%;
     max-height: 100%;

packages/editor/src/theme/layer-panel.scss

@@ -1,6 +1,5 @@
 .m-editor-layer-panel {
   background: $--sidebar-content-background-color;
-  position: relative;
 
   .m-editor-tree {
     padding-top: 48px;

packages/editor/src/theme/sidebar.scss

@@ -50,10 +50,6 @@
     overflow: auto;
   }
 
-  .tmagic-design-scrollbar {
-    height: 100%;
-  }
-
   .fold-icon {
     position: absolute;
     bottom: 8px;

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

@@ -69,6 +69,7 @@ import type {
   DropdownProps,
   FormItemProps,
   FormProps,
+  IconProps,
   InputNumberProps,
   InputProps,
   OptionGroupProps,
@@ -200,8 +201,8 @@ const adapter: PluginOptions = {
     },
 
     icon: {
-      component: ElIcon,
-      props: () => ({}),
+      component: ElIcon as any,
+      props: (props: IconProps) => props,
     },
 
     input: {

packages/form/src/containers/GroupListItem.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="m-fields-group-list-item">
     <div>
-      <TMagicButton link :disabled="disabled" :icon="expand ? CaretBottom : CaretRight" @click="expandHandler">{{
-        title
-      }}</TMagicButton>
+      <TMagicButton link :disabled="disabled" @click="expandHandler">
+        <TMagicIcon><CaretBottom v-if="expand" /><CaretRight v-else /></TMagicIcon>{{ title }}
+      </TMagicButton>
 
       <TMagicButton
         v-show="showDelete(parseInt(String(index)))"

packages/tdesign-vue-next-adapter/src/Icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <i style="width: 1em; height: 1em">
+  <i>
     <slot></slot>
   </i>
 </template>

packages/tdesign-vue-next-adapter/src/Scrollbar.vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="tdesign-scrollbar" style="overflow: hidden; height: 100%">
-    <div style="overflow: auto; height: 100%">
+  <div class="tdesign-scrollbar" style="overflow: hidden; position: relative; height: 100%">
+    <div class="tdesign-scrollbar-wrap" style="overflow: auto; height: 100%">
+      <div class="tdesign-scrollbar-view">
         <slot></slot>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts"></script>

packages/tdesign-vue-next-adapter/src/index.ts

@@ -59,6 +59,7 @@ import type {
   DropdownProps,
   FormItemProps,
   FormProps,
+  IconProps,
   InputNumberProps,
   InputProps,
   OptionGroupProps,
@@ -125,6 +126,7 @@ const adapter: any = {
         size: props.size === 'default' ? 'medium' : props.size,
         icon: () => (props.icon ? h(props.icon) : null),
         variant: props.link || props.text ? 'text' : 'base',
+        shape: props.circle ? 'circle' : 'rectangle',
       }),
     },
 
@@ -303,7 +305,7 @@ const adapter: any = {
 
     icon: {
       component: Icon,
-      props: () => ({}),
+      props: (props: IconProps) => props,
     },
 
     input: {