@tmagic/editor 1.3.0-alpha.9 → 1.3.0-beta.0

package/src/icons/CenterIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4H21V6H2V4Z" fill="black" fill-opacity="0.9" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 11H18V13H5V11Z" fill="black" fill-opacity="0.9" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 18H21V20H2V18Z" fill="black" fill-opacity="0.9" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorCenterIcon',
+});
+</script>

package/src/icons/CodeIcon.vue

@@ -1,7 +1,5 @@
 <template>
-  <!-- 代码icon，cdn链接：https://cloudcache.tencent-cloud.com/qcloud/ui/static/government/0d463ed5-6407-4498-8865-3d05b5e70115.svg -->
   <svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
     <defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs>
     <g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
       <g id="03图标" transform="translate(-561.000000, -2356.000000)">

package/src/icons/FolderMinusIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    class="bi bi-folder-minus"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
+    />
+    <path fill-rule="evenodd" d="M11 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorFolderMinusIcon',
+});
+</script>

package/src/index.ts

@@ -22,7 +22,10 @@ import CodeLink from './fields/CodeLink.vue';
 import CodeSelect from './fields/CodeSelect.vue';
 import CodeSelectCol from './fields/CodeSelectCol.vue';
 import DataSourceFields from './fields/DataSourceFields.vue';
+import DataSourceFieldSelect from './fields/DataSourceFieldSelect.vue';
 import DataSourceInput from './fields/DataSourceInput.vue';
+import DataSourceMethods from './fields/DataSourceMethods.vue';
+import DataSourceMethodSelect from './fields/DataSourceMethodSelect.vue';
 import DataSourceSelect from './fields/DataSourceSelect.vue';
 import EventSelect from './fields/EventSelect.vue';
 import KeyValue from './fields/KeyValue.vue';
@@ -36,6 +39,7 @@ import './theme/index.scss';
 
 export type { MoveableOptions } from '@tmagic/stage';
 export * from './type';
+export * from './hooks';
 export * from './utils';
 export { default as TMagicEditor } from './Editor.vue';
 export { default as TMagicCodeEditor } from './layouts/CodeEditor.vue';
@@ -53,11 +57,15 @@ export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
 export { default as CodeSelect } from './fields/CodeSelect.vue';
 export { default as CodeSelectCol } from './fields/CodeSelectCol.vue';
 export { default as DataSourceFields } from './fields/DataSourceFields.vue';
+export { default as DataSourceMethods } from './fields/DataSourceMethods.vue';
 export { default as DataSourceInput } from './fields/DataSourceInput.vue';
 export { default as DataSourceSelect } from './fields/DataSourceSelect.vue';
+export { default as DataSourceMethodSelect } from './fields/DataSourceMethodSelect.vue';
+export { default as DataSourceFieldSelect } from './fields/DataSourceFieldSelect.vue';
 export { default as EventSelect } from './fields/EventSelect.vue';
 export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
+export { default as CodeBlockListPanel } from './layouts/sidebar/code-block/CodeBlockListPanel.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';
@@ -65,6 +73,7 @@ export { default as Icon } from './components/Icon.vue';
 export { default as LayoutContainer } from './components/SplitView.vue';
 export { default as SplitView } from './components/SplitView.vue';
 export { default as Resizer } from './components/Resizer.vue';
+export { default as CodeBlockEditor } from './components/CodeBlockEditor.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // eslint-disable-next-line no-eval
@@ -90,5 +99,8 @@ export default {
     app.component('m-fields-key-value', KeyValue);
     app.component('m-fields-data-source-input', DataSourceInput);
     app.component('m-fields-data-source-select', DataSourceSelect);
+    app.component('m-fields-data-source-methods', DataSourceMethods);
+    app.component('m-fields-data-source-method-select', DataSourceMethodSelect);
+    app.component('m-fields-data-source-field-select', DataSourceFieldSelect);
   },
 };

package/src/initService.ts

@@ -7,9 +7,14 @@ import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage } from
 import { getNodes } from '@tmagic/utils';
 
 import type { Target } from './services/dep';
-import { createCodeBlockTarget, createDataSourceTarget } from './utils/dep';
+import {
+  createCodeBlockTarget,
+  createDataSourceCondTarget,
+  createDataSourceMethodTarget,
+  createDataSourceTarget,
+} from './utils/dep';
 import editorProps from './editorProps';
-import type { Services } from './type';
+import { DepTargetType, Services } from './type';
 
 export declare type LooseRequired<T> = {
   [P in string & keyof T]: T[P];
@@ -26,6 +31,7 @@ export const initServiceState = (
     uiService,
     codeBlockService,
     keybindingService,
+    dataSourceService,
   }: Services,
 ) => {
   // 初始值变化，重新设置节点信息
@@ -47,6 +53,14 @@ export const initServiceState = (
     },
   );
 
+  watch(
+    () => props.datasourceList,
+    (datasourceList) => dataSourceService.set('datasourceTypeList', datasourceList),
+    {
+      immediate: true,
+    },
+  );
+
   watch(
     () => props.propsConfigs,
     (configs) => propsService.setPropsConfigs(configs),
@@ -82,6 +96,30 @@ export const initServiceState = (
     },
   );
 
+  watch(
+    () => props.datasourceConfigs,
+    (configs) => {
+      Object.entries(configs).forEach(([key, value]) => {
+        dataSourceService.setFormConfig(key, value);
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.datasourceValues,
+    (values) => {
+      Object.entries(values).forEach(([key, value]) => {
+        dataSourceService.setFormValue(key, value);
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
+
   watch(
     () => props.defaultSelected,
     (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
@@ -139,6 +177,7 @@ export const initServiceEvents = (
 
     if (app.dsl) {
       app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
       app.dsl.dataSources = root.dataSources;
     }
 
@@ -159,23 +198,34 @@ export const initServiceEvents = (
   };
 
   const targetAddHandler = (target: Target) => {
-    if (target.type !== 'data-source') return;
-
     const root = editorService.get('root');
     if (!root) return;
 
-    if (!root.dataSourceDeps) {
-      root.dataSourceDeps = {};
+    if (target.type === DepTargetType.DATA_SOURCE) {
+      if (!root.dataSourceDeps) {
+        root.dataSourceDeps = {};
+      }
+      root.dataSourceDeps[target.id] = target.deps;
     }
 
-    root.dataSourceDeps[target.id] = target.deps;
+    if (target.type === DepTargetType.DATA_SOURCE_COND) {
+      if (!root.dataSourceCondDeps) {
+        root.dataSourceCondDeps = {};
+      }
+      root.dataSourceCondDeps[target.id] = target.deps;
+    }
   };
 
   const targetRemoveHandler = (id: string | number) => {
     const root = editorService.get('root');
-    if (!root?.dataSourceDeps) return;
 
-    delete root.dataSourceDeps[id];
+    if (root?.dataSourceDeps) {
+      delete root.dataSourceDeps[id];
+    }
+
+    if (root?.dataSourceCondDeps) {
+      delete root.dataSourceCondDeps[id];
+    }
   };
 
   const depUpdateHandler = (node: MNode) => {
@@ -191,6 +241,12 @@ export const initServiceEvents = (
   depService.on('dep-update', depUpdateHandler);
   depService.on('collected', collectedHandler);
 
+  const initDataSourceDepTarget = (ds: DataSourceSchema) => {
+    depService.addTarget(createDataSourceTarget(ds.id));
+    depService.addTarget(createDataSourceMethodTarget(ds.id));
+    depService.addTarget(createDataSourceCondTarget(ds.id));
+  };
+
   const rootChangeHandler = async (value: MApp, preValue?: MApp | null) => {
     const nodeId = editorService.get('node')?.id || props.defaultSelected;
     let node;
@@ -218,14 +274,14 @@ export const initServiceEvents = (
     codeBlockService.setCodeDsl(value.codeBlocks);
     dataSourceService.set('dataSources', value.dataSources);
 
-    depService.removeTargets('code-block');
+    depService.removeTargets(DepTargetType.CODE_BLOCK);
 
     Object.entries(value.codeBlocks).forEach(([id, code]) => {
       depService.addTarget(createCodeBlockTarget(id, code));
     });
 
     value.dataSources.forEach((ds) => {
-      depService.addTarget(createDataSourceTarget(ds.id, ds));
+      initDataSourceDepTarget(ds);
     });
 
     if (value && Array.isArray(value.items)) {
@@ -279,17 +335,14 @@ export const initServiceEvents = (
   codeBlockService.on('remove', codeBlockRemoveHandler);
 
   const dataSourceAddHandler = (config: DataSourceSchema) => {
-    depService.addTarget(createDataSourceTarget(config.id, config));
+    initDataSourceDepTarget(config);
     getApp()?.dataSourceManager?.addDataSource(config);
   };
 
   const dataSourceUpdateHandler = (config: DataSourceSchema) => {
-    if (config.title) {
-      depService.getTarget(config.id)!.name = config.title;
-    }
     const root = editorService.get('root');
 
-    const targets = depService.getTargets('data-source');
+    const targets = depService.getTargets(DepTargetType.DATA_SOURCE);
 
     const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
 

package/src/layouts/CodeEditor.vue

@@ -1,26 +1,46 @@
 <template>
-  <div ref="codeEditor" class="magic-code-editor"></div>
+  <div :class="`magic-code-editor`">
+    <Teleport to="body" :disabled="!fullScreen">
+      <div
+        :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>
+        <div ref="codeEditor" class="magic-code-editor-content"></div>
+      </div>
+    </Teleport>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
+import { TMagicButton } from '@tmagic/design';
+
 defineOptions({
   name: 'MEditorCodeEditor',
 });
 
 const props = withDefaults(
   defineProps<{
-    initValues?: string | Record<string | number, any> | null;
-    modifiedValues?: string | Record<string | number, any> | null;
+    initValues?: any;
+    modifiedValues?: any;
     type?: 'diff';
     language?: string;
     options?: {
       [key: string]: any;
     };
+    height?: string;
     autoSave?: boolean;
   }>(),
   {
@@ -155,6 +175,17 @@ onUnmounted(() => {
   resizeObserver.disconnect();
 });
 
+const fullScreen = ref(false);
+const fullScreenHandler = () => {
+  fullScreen.value = !fullScreen.value;
+  setTimeout(() => {
+    vsEditor?.focus();
+    vsEditor?.layout();
+    vsDiffEditor?.focus();
+    vsDiffEditor?.layout();
+  });
+};
+
 defineExpose({
   values,
 
@@ -171,6 +202,7 @@ defineExpose({
   },
 
   setEditorValue,
+  getEditorValue,
 
   focus() {
     vsEditor?.focus();

package/src/layouts/Framework.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor">
+  <div class="m-editor" ref="content">
     <slot name="header"></slot>
 
     <slot name="nav"></slot>
@@ -67,6 +67,8 @@ const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
+const content = ref<HTMLDivElement>();
+
 const root = computed(() => editorService?.get('root'));
 
 const pageLength = computed(() => editorService?.get('pageLength') || 0);
@@ -91,13 +93,15 @@ watch(
 
     columnWidth.value.left = left;
 
+    const container = content.value || document.body;
+
     if (length <= 0) {
       columnWidth.value.right = undefined;
-      columnWidth.value.center = globalThis.document.body.clientWidth - left;
+      columnWidth.value.center = container.clientWidth - left;
     } else {
       const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
       columnWidth.value.right = right;
-      columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
+      columnWidth.value.center = container.clientWidth - left - right;
     }
 
     uiService?.set('columnWidth', columnWidth.value as GetColumnWidth);

package/src/layouts/PropsPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-props-panel" v-if="nodes.length === 1">
+  <div class="m-editor-props-panel" v-show="nodes.length === 1">
     <slot name="props-panel-header"></slot>
     <MForm
       ref="configForm"
@@ -8,6 +8,7 @@
       :size="propsPanelSize"
       :init-values="values"
       :config="curFormConfig"
+      :extend-state="extendState"
       @change="submit"
     ></MForm>
   </div>
@@ -17,7 +18,7 @@
 import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
-import type { FormValue } from '@tmagic/form';
+import type { FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
@@ -26,6 +27,10 @@ defineOptions({
   name: 'MEditorPropsPanel',
 });
 
+defineProps<{
+  extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+}>();
+
 const emit = defineEmits(['mounted']);
 
 const internalInstance = getCurrentInstance();
@@ -78,5 +83,5 @@ const submit = async () => {
   }
 };
 
-defineExpose({ submit });
+defineExpose({ configForm, submit });
 </script>

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -18,11 +18,9 @@
             @drag="dragHandler"
           >
             <slot name="component-list-item" :component="item">
-              <MIcon :icon="item.icon"></MIcon>
+              <MIcon :title="item.text" :icon="item.icon"></MIcon>
 
-              <TMagicTooltip effect="dark" placement="bottom" :content="item.text">
-                <span>{{ item.text }}</span>
-              </TMagicTooltip>
+              <span :title="item.text">{{ item.text }}</span>
             </slot>
           </div>
         </TMagicCollapseItem>
@@ -36,7 +34,7 @@ import { computed, inject, ref } from 'vue';
 import { Grid } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
 
-import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
+import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar } from '@tmagic/design';
 import { removeClassNameByClassName } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
@@ -84,7 +82,7 @@ const appendComponent = ({ text, type, data = {} }: ComponentItem): void => {
 const dragstartHandler = ({ text, type, data = {} }: ComponentItem, e: DragEvent) => {
   if (e.dataTransfer) {
     e.dataTransfer.setData(
-      'text/html',
+      'text/json',
       serialize({
         name: text,
         type,

package/src/layouts/sidebar/LayerMenu.vue

@@ -4,12 +4,14 @@
 
 <script lang="ts" setup>
 import { computed, inject, markRaw, ref } from 'vue';
-import { CopyDocument, Delete, Files, Plus } from '@element-plus/icons-vue';
+import { Files, Plus } from '@element-plus/icons-vue';
 
-import { NodeType } from '@tmagic/schema';
+import { isPage } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
+import FolderMinusIcon from '@editor/icons/FolderMinusIcon.vue';
 import type { ComponentGroup, MenuButton, MenuComponent, Services } from '@editor/type';
+import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from '@editor/utils/content-menu';
 
 defineOptions({
   name: 'MEditorLayerMenu',
@@ -19,12 +21,14 @@ const props = defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
 }>();
 
+const emit = defineEmits<{
+  'collapse-all': [];
+}>();
+
 const services = inject<Services>('services');
 const menu = ref<InstanceType<typeof ContentMenu>>();
 const node = computed(() => services?.editorService.get('node'));
 const nodes = computed(() => services?.editorService.get('nodes'));
-const isRoot = computed(() => node.value?.type === NodeType.ROOT);
-const isPage = computed(() => node.value?.type === NodeType.PAGE);
 const componentList = computed(() => services?.componentListService.getList() || []);
 
 const createMenuItems = (group: ComponentGroup): MenuButton[] =>
@@ -81,29 +85,24 @@ const getSubMenuData = computed<MenuButton[]>(() => {
 const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
-    text: '新增',
-    icon: markRaw(Plus),
-    display: () => node.value?.items && nodes.value?.length === 1,
-    items: getSubMenuData.value,
-  },
-  {
-    type: 'button',
-    text: '复制',
-    icon: markRaw(CopyDocument),
-    display: () => !isRoot.value,
+    text: '全部折叠',
+    icon: FolderMinusIcon,
+    display: () => isPage(node.value),
     handler: () => {
-      node.value && services?.editorService.copy(nodes.value || []);
+      emit('collapse-all');
     },
   },
   {
     type: 'button',
-    text: '删除',
-    icon: markRaw(Delete),
-    display: () => !isRoot.value && !isPage.value,
-    handler: () => {
-      node.value && services?.editorService.remove(nodes.value || []);
-    },
+    text: '新增',
+    icon: markRaw(Plus),
+    display: () => node.value?.items && nodes.value?.length === 1,
+    items: getSubMenuData.value,
   },
+  useCopyMenu(),
+  usePasteMenu(),
+  useDeleteMenu(),
+  useMoveToMenu(services),
   ...props.layerContentMenu,
 ]);
 

package/src/layouts/sidebar/LayerPanel.vue

@@ -42,7 +42,7 @@
     </TMagicTree>
 
     <Teleport to="body">
-      <LayerMenu ref="menu" :layer-content-menu="layerContentMenu"></LayerMenu>
+      <LayerMenu ref="menu" :layer-content-menu="layerContentMenu" @collapse-all="collapseAllHandler"></LayerMenu>
     </Teleport>
   </TMagicScrollbar>
 </template>
@@ -156,7 +156,7 @@ const handleDragEnd = async (e: any) => {
   if (!tree.value) return;
   const { data: node } = e;
   const parent = editorService?.getParentById(node.id, false) as MContainer;
-  const layout = await editorService?.getLayout(parent);
+  const layout = await editorService?.getLayout(parent, node);
   node.style.position = layout;
   if (layout === Layout.RELATIVE) {
     node.style.top = 0;
@@ -356,4 +356,14 @@ const contextmenu = async (event: MouseEvent, data: MNode): Promise<void> => {
 
   menu.value?.show(event);
 };
+
+const collapseAllHandler = () => {
+  const page = editorService?.get('page');
+  if (!tree.value || !page) return;
+  const rootNode = tree.value.getNode(page.id);
+  rootNode.childNodes.forEach((node: any) => {
+    node.collapse();
+    handleCollapse(node.data);
+  });
+};
 </script>

package/src/layouts/sidebar/Sidebar.vue

@@ -1,24 +1,23 @@
 <template>
-  <component
-    v-if="data.type === 'tabs' && data.items.length"
-    v-model="activeTabName"
-    class="m-editor-sidebar tmagic-design-tabs"
-    v-bind="tabsComponent?.props({ type: 'card', tabPosition: 'left' }) || {}"
-    :is="tabsComponent?.component || 'el-tabs'"
-  >
-    <component
+  <div class="m-editor-sidebar" v-if="data.type === 'tabs' && data.items.length">
+    <div class="m-editor-sidebar-header">
+      <div
+        class="m-editor-sidebar-header-item"
+        v-for="(config, index) in sideBarItems"
+        :key="config.$key ?? index"
+        :class="{ 'is-active': activeTabName === config.text }"
+        @click="activeTabName = config.text || `${index}`"
+      >
+        <MIcon v-if="config.icon" :icon="config.icon"></MIcon>
+        <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
+      </div>
+    </div>
+    <div
+      class="m-editor-sidebar-content"
       v-for="(config, index) in sideBarItems"
-      v-bind="tabPaneComponent?.props({ name: config.text, lazy: config.lazy }) || {}"
-      :is="tabPaneComponent?.component || 'el-tab-pane'"
-      :key="config.$key || index"
+      :key="config.$key ?? index"
+      v-show="activeTabName === config.text"
     >
-      <template #label>
-        <div :key="config.text">
-          <MIcon v-if="config.icon" :icon="config.icon"></MIcon>
-          <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
-        </div>
-      </template>
-
       <component v-if="config" :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
         <template
           #component-list-panel-header
@@ -58,14 +57,6 @@
           <component v-else-if="config.slots?.codeBlockPanelTool" :is="config.slots.codeBlockPanelTool" />
         </template>
 
-        <template
-          #code-block-edit-panel-header="{ id }"
-          v-if="config.$key === 'code-block' || config.slots?.codeBlockEditPanelHeader"
-        >
-          <slot v-if="config.$key === 'code-block'" name="code-block-edit-panel-header" :id="id"></slot>
-          <component v-else-if="config.slots?.codeBlockEditPanelHeader" :is="config.slots.codeBlockEditPanelHeader" />
-        </template>
-
         <template
           #layer-node-content="{ data: nodeData, node }"
           v-if="config.$key === 'layer' || config.slots?.layerNodeContent"
@@ -79,21 +70,19 @@
           />
         </template>
       </component>
-    </component>
-  </component>
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
-import { getConfig } from '@tmagic/design';
-
 import MIcon from '@editor/components/Icon.vue';
 import type { MenuButton, MenuComponent, SideComponent, SideItem } from '@editor/type';
 import { SideBarData } from '@editor/type';
 
-import CodeBlockList from './code-block/CodeBlockList.vue';
+import CodeBlockListPanel from './code-block/CodeBlockListPanel.vue';
 import DataSourceListPanel from './data-source/DataSourceListPanel.vue';
 import ComponentListPanel from './ComponentListPanel.vue';
 import LayerPanel from './LayerPanel.vue';
@@ -112,9 +101,6 @@ const props = withDefaults(
   },
 );
 
-const tabPaneComponent = getConfig('components')?.tabPane;
-const tabsComponent = getConfig('components')?.tabs;
-
 const activeTabName = ref(props.data?.status);
 
 const getItemConfig = (data: SideItem): SideComponent => {
@@ -143,7 +129,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
       type: 'component',
       icon: EditPen,
       text: '代码编辑',
-      component: CodeBlockList,
+      component: CodeBlockListPanel,
       slots: {},
     },
     'data-source': {