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: [