feat(playground): 支持UI组件库切换

playground/package.json

@@ -15,11 +15,13 @@
     "@tmagic/core": "1.6.1",
     "@tmagic/editor": "1.6.1",
     "@tmagic/element-plus-adapter": "1.6.1",
+    "@tmagic/tdesign-vue-next-adapter": "1.6.1",
     "@tmagic/tmagic-form-runtime": "1.1.3",
     "element-plus": "^2.11.4",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.52.2",
     "serialize-javascript": "^6.0.2",
+    "tdesign-vue-next": "^1.17.1",
     "vue": "catalog:",
     "vue-router": "^4.5.1"
   },

playground/src/components/AdapterSelect.vue

@@ -0,0 +1,31 @@
+<template>
+  <TMagicForm size="small" label-position="right" style="margin-left: 10px">
+    <TMagicFormItem label="UI组件库">
+      <TMagicSelect v-model="adapter" size="small" @change="adapterChange" style="width: 150px">
+        <TMagicOption value="element-plus">element-plus</TMagicOption>
+        <TMagicOption value="tdesign-vue-next">tdesign-vue-next</TMagicOption>
+      </TMagicSelect>
+    </TMagicFormItem>
+  </TMagicForm>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { TMagicForm, TMagicFormItem, TMagicOption, TMagicSelect } from '@tmagic/design';
+
+const adapter = ref(sessionStorage.getItem('tmagic-playground-ui-adapter') || 'element-plus');
+
+const adapterChange = (adapter: string) => {
+  sessionStorage.setItem('tmagic-playground-ui-adapter', adapter);
+  globalThis.location.reload();
+};
+</script>
+
+<style lang="scss">
+.m-editor-nav-menu {
+  .tmagic-design-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>

playground/src/components/NavMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="m-editor-nav-menu">
+    <AdapterSelect></AdapterSelect>
     <div v-for="(item, index) in data" :key="index" class="menu-item button">
       <TMagicButton size="small" link @click="item.handler">
         <TMagicIcon><component :is="item.icon"></component></TMagicIcon><span>{{ item.text }}</span>
@@ -8,21 +9,14 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
+<script lang="ts" setup>
 import { MenuButton, TMagicButton, TMagicIcon } from '@tmagic/editor';
 
-export default defineComponent({
-  name: 'nav-menu',
-  props: {
-    data: {
-      type: Array as PropType<MenuButton[]>,
-      default: () => [],
-    },
-  },
-  components: { TMagicIcon, TMagicButton },
-});
+import AdapterSelect from './AdapterSelect.vue';
+
+defineProps<{
+  data: MenuButton[];
+}>();
 </script>
 
 <style lang="scss" scoped>

playground/src/main.ts

@@ -24,13 +24,15 @@ import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 
-import editorPlugin from '@tmagic/editor';
+import editorPlugin, { type DesignPluginOptions } from '@tmagic/editor';
 import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';
+import MagicTdesignAdapter from '@tmagic/tdesign-vue-next-adapter';
 
 import App from './App.vue';
 import router from './route';
 
 import 'element-plus/dist/index.css';
+import 'tdesign-vue-next/es/style/index.css';
 import '@tmagic/editor/dist/style.css';
 
 // @ts-ignore
@@ -54,7 +56,14 @@ globalThis.MonacoEnvironment = {
 
 monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
 
+const adpter = sessionStorage.getItem('tmagic-playground-ui-adapter') || 'element-plus';
+
+const adpterMap: Record<string, DesignPluginOptions> = {
+  'element-plus': MagicElementPlusAdapter,
+  'tdesign-vue-next': MagicTdesignAdapter,
+};
+
 const app = createApp(App);
 app.use(router);
-app.use(editorPlugin, MagicElementPlusAdapter);
+app.use(editorPlugin, adpterMap[adpter] || MagicElementPlusAdapter);
 app.mount('#app');

playground/src/pages/FormEditor.vue

@@ -26,6 +26,7 @@ import { guid, type MApp, NodeType } from '@tmagic/core';
 import { MenuBarData, SideBarData, TMagicEditor, traverseNode } from '@tmagic/editor';
 import { COMPONENT_GROUP_LIST as componentGroupList, propsConfigs, useRuntime } from '@tmagic/tmagic-form-runtime';
 
+import AdapterSelect from '../components/AdapterSelect.vue';
 import formDsl from '../configs/formDsl';
 
 formDsl.forEach((item) => {
@@ -56,6 +57,10 @@ const menu: MenuBarData = {
       type: 'text',
       text: '魔方',
     },
+    {
+      type: 'component',
+      component: AdapterSelect,
+    },
   ],
   center: ['delete', 'undo', 'redo', 'zoom'],
   right: [

playground/src/pages/composables/use-editor-menu.ts

@@ -5,6 +5,7 @@ import { Coin, Connection, Document } from '@element-plus/icons-vue';
 import type { MApp } from '@tmagic/core';
 import { type MenuBarData, tMagicMessage, tMagicMessageBox } from '@tmagic/editor';
 
+import AdapterSelect from '../../components/AdapterSelect.vue';
 import DeviceGroup from '../../components/DeviceGroup.vue';
 import { uaMap } from '../../const';
 
@@ -21,6 +22,10 @@ export const useEditorMenu = (value: Ref<MApp>, save: () => void) => {
         type: 'text',
         text: '魔方',
       },
+      {
+        type: 'component',
+        component: AdapterSelect,
+      },
     ],
     center: ['delete', 'undo', 'redo', 'guides', 'rule', 'zoom'],
     right: [

pnpm-lock.yaml

@@ -514,8 +514,8 @@ importers:
         specifier: workspace:*
         version: link:../design
       tdesign-vue-next:
-        specifier: ^1.9.8
-        version: 1.10.6(vue@3.5.22(typescript@5.9.3))
+        specifier: ^1.17.1
+        version: 1.17.1(vue@3.5.22(typescript@5.9.3))
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
@@ -553,6 +553,9 @@ importers:
       '@tmagic/element-plus-adapter':
         specifier: 1.6.1
         version: 1.6.1(@tmagic/design@1.6.1(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3)))(element-plus@2.11.4(@vue/composition-api@1.7.2(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)))(typescript@5.9.3)
+      '@tmagic/tdesign-vue-next-adapter':
+        specifier: 1.6.1
+        version: 1.6.1(@tmagic/design@1.6.1(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3)))(tdesign-vue-next@1.17.1(vue@3.5.22(typescript@5.9.3)))(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
       '@tmagic/tmagic-form-runtime':
         specifier: 1.1.3
         version: 1.1.3(@tmagic/core@1.6.1(typescript@5.9.3))(@tmagic/editor@1.6.1(@tmagic/core@1.6.1(typescript@5.9.3))(@tmagic/form-schema@1.6.1(typescript@5.9.3))(@tmagic/schema@1.6.1(typescript@5.9.3))(monaco-editor@0.52.2)(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3)))(element-plus@2.11.4(@vue/composition-api@1.7.2(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)))(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
@@ -568,6 +571,9 @@ importers:
       serialize-javascript:
         specifier: ^6.0.2
         version: 6.0.2
+      tdesign-vue-next:
+        specifier: ^1.17.1
+        version: 1.17.1(vue@3.5.22(typescript@5.9.3))
       vue:
         specifier: 'catalog:'
         version: 3.5.22(typescript@5.9.3)
@@ -3216,6 +3222,18 @@ packages:
       typescript:
         optional: true
 
+  '@tmagic/tdesign-vue-next-adapter@1.6.1':
+    resolution: {integrity: sha512-2RXTMyTnrIxFf9xjsdy5Z2GPGVF4C2GZ2qGWq1naQiXXtOruj5chc9IhiTKtzxYHfR954UjLvQV3E7iNqYzlKQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@tmagic/design': 1.6.1
+      tdesign-vue-next: ^1.9.8
+      typescript: ^5.9.3
+      vue: ^3.5.22
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@tmagic/tmagic-form-runtime@1.1.3':
     resolution: {integrity: sha512-JJDeuGZNtj4IOagiOGwVWxKdfgSw1HcWhvGBppXkbq5sZ5OxGHE5z3rxbNwzrHFPL8UAXPOA/0LL5qeckJQc5g==}
     engines: {node: '>=18'}
@@ -3329,9 +3347,6 @@ packages:
   '@types/lodash-es@4.17.12':
     resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
 
-  '@types/lodash@4.14.182':
-    resolution: {integrity: sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==}
-
   '@types/lodash@4.17.14':
     resolution: {integrity: sha512-jsxagdikDiDBeIRaPYtArcT8my4tN1og7MtMRquFT3XNA6axxyHDRUemqDz/taRDdOUn0GnGHRCuff4q48sW9A==}
 
@@ -4268,9 +4283,6 @@ packages:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
-  dayjs@1.11.10:
-    resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
-
   dayjs@1.11.13:
     resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
 
@@ -6426,13 +6438,14 @@ packages:
   tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
 
-  tdesign-icons-vue-next@0.2.6:
-    resolution: {integrity: sha512-Se/3N6AAfbpEyJfuBUCMcBl26FCfwUYCf9OwEFp1dw0HhMeCd6LENoZx0o43/V69NpcUGp+0Ya+xVuNKiP8M+Q==}
+  tdesign-icons-vue-next@0.4.1:
+    resolution: {integrity: sha512-uDPuTLRORnGcTyVGNoentNaK4V+ZcBmhYwcY3KqDaQQ5rrPeLMxu0ZVmgOEf0JtF2QZiqAxY7vodNEiLUdoRKA==}
     peerDependencies:
       vue: ^3.0.0
 
-  tdesign-vue-next@1.10.6:
-    resolution: {integrity: sha512-EXMEiWlfH250Th0vZBfesoxozGrsuiV7doF34wmitDZk5KiMMyaXymKLN7832G4F/c9DIRW8DCKjxqqaHABGYA==}
+  tdesign-vue-next@1.17.1:
+    resolution: {integrity: sha512-rqRPHSfPn5Y7Nxffa9Q6JumPguc+K2YfcaaxrvyYkZIQwCQ8Fwi2rhh6KpgQud2SAPMP/N1SxfIvYJVS5Lyu8Q==}
+    engines: {node: '>= 18'}
     peerDependencies:
       vue: '>=3.1.0'
 
@@ -9101,6 +9114,14 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
+  '@tmagic/tdesign-vue-next-adapter@1.6.1(@tmagic/design@1.6.1(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3)))(tdesign-vue-next@1.17.1(vue@3.5.22(typescript@5.9.3)))(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@tmagic/design': 1.6.1(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+      tdesign-vue-next: 1.17.1(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.22(typescript@5.9.3)
+    optionalDependencies:
+      typescript: 5.9.3
+
   '@tmagic/tmagic-form-runtime@1.1.3(@tmagic/core@1.6.1(typescript@5.9.3))(@tmagic/editor@1.6.1(@tmagic/core@1.6.1(typescript@5.9.3))(@tmagic/form-schema@1.6.1(typescript@5.9.3))(@tmagic/schema@1.6.1(typescript@5.9.3))(monaco-editor@0.52.2)(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3)))(element-plus@2.11.4(@vue/composition-api@1.7.2(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)))(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@tmagic/editor': 1.6.1(@tmagic/core@1.6.1(typescript@5.9.3))(@tmagic/form-schema@1.6.1(typescript@5.9.3))(@tmagic/schema@1.6.1(typescript@5.9.3))(monaco-editor@0.52.2)(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
@@ -9193,8 +9214,6 @@ snapshots:
     dependencies:
       '@types/lodash': 4.17.14
 
-  '@types/lodash@4.14.182': {}
-
   '@types/lodash@4.17.14': {}
 
   '@types/lodash@4.17.16': {}
@@ -10375,8 +10394,6 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
-  dayjs@1.11.10: {}
-
   dayjs@1.11.13: {}
 
   debug@3.2.7:
@@ -12861,24 +12878,24 @@ snapshots:
 
   tabbable@6.2.0: {}
 
-  tdesign-icons-vue-next@0.2.6(vue@3.5.22(typescript@5.9.3)):
+  tdesign-icons-vue-next@0.4.1(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@babel/runtime': 7.26.0
       vue: 3.5.22(typescript@5.9.3)
 
-  tdesign-vue-next@1.10.6(vue@3.5.22(typescript@5.9.3)):
+  tdesign-vue-next@1.17.1(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@babel/runtime': 7.26.0
       '@popperjs/core': 2.11.8
-      '@types/lodash': 4.14.182
+      '@types/lodash-es': 4.17.12
       '@types/sortablejs': 1.15.8
       '@types/tinycolor2': 1.4.6
       '@types/validator': 13.12.2
-      dayjs: 1.11.10
-      lodash: 4.17.21
+      dayjs: 1.11.13
+      lodash-es: 4.17.21
       mitt: 3.0.1
       sortablejs: 1.15.6
-      tdesign-icons-vue-next: 0.2.6(vue@3.5.22(typescript@5.9.3))
+      tdesign-icons-vue-next: 0.4.1(vue@3.5.22(typescript@5.9.3))
       tinycolor2: 1.6.0
       validator: 13.12.0
       vue: 3.5.22(typescript@5.9.3)