@tmagic/editor 1.2.13 → 1.2.14

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.13",
+  "version": "1.2.14",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -24,7 +24,7 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "npm run build:type && vite build",
-    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "clear:type": "rimraf ./types"
   },
   "engines": {
@@ -46,12 +46,12 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.2.13",
-    "@tmagic/design": "1.2.13",
-    "@tmagic/form": "1.2.13",
-    "@tmagic/schema": "1.2.13",
-    "@tmagic/stage": "1.2.13",
-    "@tmagic/utils": "1.2.13",
+    "@tmagic/core": "1.2.14",
+    "@tmagic/design": "1.2.14",
+    "@tmagic/form": "1.2.14",
+    "@tmagic/schema": "1.2.14",
+    "@tmagic/stage": "1.2.14",
+    "@tmagic/utils": "1.2.14",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -63,8 +63,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.2.13",
-    "@tmagic/form": "1.2.13",
+    "@tmagic/design": "1.2.14",
+    "@tmagic/form": "1.2.14",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },
@@ -73,13 +73,14 @@
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
-    "@vitejs/plugin-vue": "^3.1.0",
+    "@vitejs/plugin-vue": "^4.1.0",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.0",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
-    "typescript": "^4.7.4",
-    "vite": "^3.1.3",
+    "tsc-alias": "^1.8.5",
+    "typescript": "^5.0.4",
+    "vite": "^4.2.1",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^1.0.11"
   }

package/src/components/CodeDraftEditor.vue

@@ -25,15 +25,14 @@
 </template>
 <script lang="ts" setup name="MEditorCodeDraftEditor">
 import { computed, inject, ref, watchEffect } from 'vue';
-import type { Action } from 'element-plus';
 import type * as monaco from 'monaco-editor';
 
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
 import { Id } from '@tmagic/schema';
 import { datetimeFormatter } from '@tmagic/utils';
 
-import MagicCodeEditor from '../layouts/CodeEditor.vue';
-import type { Services } from '../type';
+import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
+import type { Services } from '@editor/type';
 
 const props = withDefaults(
   defineProps<{
@@ -93,7 +92,7 @@ const saveCodeDraft = async (codeValue: string) => {
     return;
   }
   services?.codeBlockService.setCodeDraft(props.id, codeValue);
-  tMagicMessage.success(`代码草稿保存成功 ${datetimeFormatter(new Date())}`);
+  tMagicMessage.success(`代码草稿成功保存到本地 ${datetimeFormatter(new Date())}`);
 };
 
 // 保存并关闭
@@ -108,24 +107,23 @@ const saveAndClose = (): void => {
 const close = async (): Promise<void> => {
   const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
   if (codeDraft) {
-    tMagicMessageBox
-      .confirm('您有代码修改未保存，是否保存后再关闭？', '提示', {
+    try {
+      await tMagicMessageBox.confirm('您有代码修改未保存，是否保存后再关闭？', '提示', {
         confirmButtonText: '保存并关闭',
         cancelButtonText: '直接关闭',
         type: 'warning',
         distinguishCancelAndClose: true,
-      })
-      .then(async () => {
-        // 保存之后再关闭
-        saveAndClose();
-      })
-      .catch((action: Action) => {
-        if (action === 'cancel') {
-          // 删除草稿 直接关闭
-          services?.codeBlockService.removeCodeDraft(props.id);
-          emit('close');
-        }
       });
+
+      // 保存之后再关闭
+      saveAndClose();
+    } catch (action: any) {
+      if (action === 'cancel') {
+        // 删除草稿 直接关闭
+        services?.codeBlockService.removeCodeDraft(props.id);
+        emit('close');
+      }
+    }
   } else {
     emit('close');
   }
@@ -138,4 +136,9 @@ const toggleFullScreen = (): void => {
     codeEditor.value.focus();
   }
 };
+
+defineExpose({
+  saveAndClose,
+  close,
+});
 </script>

package/src/components/ContentMenu.vue

@@ -25,7 +25,7 @@
 <script lang="ts" setup name="MEditorContentMenu">
 import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 
-import { MenuButton, MenuComponent } from '../type';
+import { MenuButton, MenuComponent } from '@editor/type';
 
 import ToolButton from './ToolButton.vue';
 

package/src/components/FunctionEditor.vue

@@ -20,6 +20,7 @@
       </div>
     </template>
     <CodeDraftEditor
+      ref="codeDraftEditor"
       :id="id"
       :content="codeContent"
       :editable="editable"
@@ -32,14 +33,14 @@
   </TMagicCard>
 </template>
 <script lang="ts" setup name="MEditorFunctionEditor">
-import { inject, provide, ref, watchEffect } from 'vue';
+import { inject, ref, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import { TMagicCard, TMagicInput, tMagicMessage } from '@tmagic/design';
 import { ColumnConfig, TableConfig } from '@tmagic/form';
 import { CodeParam, Id } from '@tmagic/schema';
 
-import type { Services } from '../type';
+import type { Services } from '@editor/type';
 
 import CodeDraftEditor from './CodeDraftEditor.vue';
 const defaultParamColConfig: ColumnConfig = {
@@ -116,19 +117,12 @@ const tableConfig: TableConfig = {
   ],
 };
 
-const emit = defineEmits(['change', 'field-input']);
-
 const services = inject<Services>('services');
 
 const codeName = ref<string>('');
 const codeContent = ref<string>('');
 const evalRes = ref(true);
 
-provide('mForm', {
-  $emit: emit,
-  setField: () => {},
-});
-
 const tableModel = ref<{ params: CodeParam[] }>();
 watchEffect(() => {
   codeName.value = props.name;
@@ -169,7 +163,7 @@ const saveCode = async (codeValue: string): Promise<void> => {
       content: codeValue,
       params: tableModel.value?.params || [],
     });
-    tMagicMessage.success('代码保存成功');
+    tMagicMessage.success('代码成功保存到本地');
     // 删除草稿
     services?.codeBlockService.removeCodeDraft(props.id);
   }
@@ -187,4 +181,10 @@ const saveAndClose = async (codeValue: string): Promise<void> => {
 const close = (): void => {
   services?.codeBlockService.setCodeEditorShowStatus(false);
 };
+
+const codeDraftEditor = ref<InstanceType<typeof CodeDraftEditor>>();
+
+defineExpose({
+  codeDraftEditor,
+});
 </script>

package/src/components/Layout.vue

@@ -23,7 +23,7 @@
 <script lang="ts" setup name="MEditorLayout">
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 
-import Resizer from '../layouts/Resizer.vue';
+import Resizer from '@editor/layouts/Resizer.vue';
 
 const emit = defineEmits(['update:left', 'change', 'update:right']);
 

package/src/components/ScrollViewer.vue

@@ -25,8 +25,8 @@
 <script lang="ts" setup name="MEditorScrollViewer">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
-import { ScrollViewerEvent } from '../type';
-import { ScrollViewer } from '../utils/scroll-viewer';
+import type { ScrollViewerEvent } from '@editor/type';
+import { ScrollViewer } from '@editor/utils/scroll-viewer';
 
 import ScrollBar from './ScrollBar.vue';
 

package/src/fields/CodeSelect.vue

@@ -1,110 +1,43 @@
 <template>
   <div class="m-fields-code-select" :class="config.className">
-    <m-form-table
-      :config="tableConfig"
-      :model="model[name]"
-      name="hookData"
-      :enableToggleMode="false"
-      :prop="prop"
-      :size="size"
-      @change="changeHandler"
-    >
-      <template #operateCol="{ scope }">
-        <Icon
-          v-if="scope.row.codeId && config.editable"
-          :icon="editable ? Edit : View"
-          class="edit-icon"
-          @click="editCode(scope.row.codeId)"
-        ></Icon>
-      </template>
-    </m-form-table>
+    <TMagicCard>
+      <m-form-container :config="codeConfig" :model="model[name]" @change="changeHandler"> </m-form-container>
+    </TMagicCard>
   </div>
 </template>
 
 <script lang="ts" setup name="MEditorCodeSelect">
-import { computed, defineEmits, defineProps, inject, watch } from 'vue';
-import { Edit, View } from '@element-plus/icons-vue';
-import { isEmpty, map } from 'lodash-es';
+import { computed, defineEmits, defineProps, watch } from 'vue';
+import { isEmpty } from 'lodash-es';
 
-import { createValues, FormItem, FormState, TableConfig } from '@tmagic/form';
-import { HookType, Id } from '@tmagic/schema';
+import { TMagicCard } from '@tmagic/design';
+import { HookType } from '@tmagic/schema';
 
-import Icon from '../components/Icon.vue';
-import { CodeParamStatement, HookData, Services } from '../type';
-const services = inject<Services>('services');
-const mForm = inject<FormState>('mForm');
 const emit = defineEmits(['change']);
 
 const props = withDefaults(
   defineProps<{
     config: {
-      tableConfig?: TableConfig;
       className?: string;
-      editable?: boolean;
     };
     model: any;
     prop: string;
     name: string;
     size: 'small' | 'default' | 'large';
   }>(),
-  {
-    config: () => ({
-      editable: true,
-    }),
-  },
+  {},
 );
 
-const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
-
-const tableConfig = computed<FormItem>(() => {
-  const defaultConfig = {
-    dropSort: false,
-    enableFullscreen: false,
-    border: true,
-    operateColWidth: 60,
-    items: [
-      {
-        type: 'select',
-        label: '代码块',
-        name: 'codeId',
-        width: '200px',
-        options: () => {
-          if (codeDsl.value) {
-            return map(codeDsl.value, (value, key) => ({
-              text: `${value.name}（${key}）`,
-              label: `${value.name}（${key}）`,
-              value: key,
-            }));
-          }
-          return [];
-        },
-        onChange: (formState: any, codeId: Id, { model }: any) => {
-          // 参数的items是根据函数生成的，当codeId变化后修正model的值，避免写入其他codeId的params
-          model.params = {};
-        },
-      },
-      {
-        name: 'params',
-        label: '参数',
-        defaultValue: {},
-        itemsFunction: (row: HookData) => {
-          const paramsConfig = getParamsConfig(row.codeId);
-          // 如果参数没有填值，则使用createValues补全空值
-          if (!row.params || isEmpty(row.params)) {
-            createValues(mForm, paramsConfig, {}, row.params);
-          }
-          return paramsConfig;
-        },
-      },
-    ],
-  };
-  return {
-    ...defaultConfig,
-    ...props.config.tableConfig,
-  };
-});
-
-const editable = computed(() => services?.codeBlockService.getEditStatus());
+const codeConfig = computed(() => ({
+  type: 'group-list',
+  name: 'hookData',
+  enableToggleMode: false,
+  items: [
+    {
+      type: 'code-select-col',
+    },
+  ],
+}));
 
 watch(
   () => props.model[props.name],
@@ -126,20 +59,4 @@ watch(
 const changeHandler = async () => {
   emit('change', props.model[props.name]);
 };
-
-const getParamsConfig = (codeId: Id): CodeParamStatement[] => {
-  if (!codeDsl.value) return [];
-  const paramStatements = codeDsl.value[codeId]?.params;
-  if (isEmpty(paramStatements)) return [];
-  return paramStatements.map((paramState: CodeParamStatement) => ({
-    labelWidth: '100px',
-    text: paramState.name,
-    inline: true,
-    ...paramState,
-  }));
-};
-
-const editCode = (codeId: Id) => {
-  services?.codeBlockService.setCodeEditorContent(true, codeId);
-};
 </script>

package/src/fields/CodeSelectCol.vue

@@ -1,7 +1,16 @@
 <template>
   <div class="m-fields-code-select-col">
-    <!-- 代码块下拉框 -->
-    <m-form-container :config="selectConfig" :model="model" @change="onParamsChangeHandler"></m-form-container>
+    <div class="code-select-container">
+      <!-- 代码块下拉框 -->
+      <m-form-container
+        class="select"
+        :config="selectConfig"
+        :model="model"
+        @change="onParamsChangeHandler"
+      ></m-form-container>
+      <!-- 查看/编辑按钮 -->
+      <Icon class="icon" :icon="editable ? Edit : View" @click="editCode"></Icon>
+    </div>
     <!-- 参数填写框 -->
     <m-form-container :config="codeParamsConfig" :model="model" @change="onParamsChangeHandler"></m-form-container>
   </div>
@@ -9,12 +18,15 @@
 
 <script lang="ts" setup name="MEditorCodeSelectCol">
 import { computed, defineEmits, defineProps, inject, ref, watch } from 'vue';
+import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
 import { createValues, FieldsetConfig, FormState } from '@tmagic/form';
 import { Id } from '@tmagic/schema';
 
-import { CodeParamStatement, Services } from '../type';
+import Icon from '@editor/components/Icon.vue';
+import type { CodeParamStatement, Services } from '@editor/type';
+
 const services = inject<Services>('services');
 const mForm = inject<FormState>('mForm');
 const emit = defineEmits(['change']);
@@ -30,6 +42,7 @@ const props = withDefaults(
   {},
 );
 const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
+const editable = computed(() => services?.codeBlockService.getEditStatus());
 const codeParamsConfig = ref<FieldsetConfig>({
   type: 'fieldset',
   items: [],
@@ -114,4 +127,9 @@ watch(
     immediate: true,
   },
 );
+
+// 打开代码编辑框
+const editCode = () => {
+  services?.codeBlockService.setCodeEditorContent(true, props.model.codeId);
+};
 </script>

package/src/fields/EventSelect.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="m-fields-event-select">
-    <m-form-container
+    <m-form-table
       v-if="isOldVersion"
       ref="eventForm"
       :size="props.size"
       :model="model"
+      name="events"
       :config="tableConfig"
       @change="onChangeHandler"
-    ></m-form-container>
+    ></m-form-table>
 
     <div v-else class="fullWidth">
       <TMagicButton class="create-button" type="primary" size="small" @click="addEvent()">添加事件</TMagicButton>
@@ -41,7 +42,8 @@ import { TMagicButton } from '@tmagic/design';
 import { FormState } from '@tmagic/form';
 import { ActionType } from '@tmagic/schema';
 
-import { EventSelectConfig, Services } from '../type';
+import type { EventSelectConfig, Services } from '@editor/type';
+
 const services = inject<Services>('services');
 
 const props = defineProps<{

package/src/fields/UISelect.vue

@@ -19,7 +19,7 @@ import { Close, Delete } from '@element-plus/icons-vue';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import { FormState } from '@tmagic/form';
 
-import { Services } from '../type';
+import type { Services } from '@editor/type';
 
 const props = defineProps<{
   config: any;

package/src/icons/AppManageIcon.vue

@@ -0,0 +1,11 @@
+<template>
+  <!-- app-manage cdn链接：https://cloudcache.tencent-cloud.com/qcloud/ui/static/console_aside_v4/6638c8a5-2e7f-477a-83b1-a413a0e4ba39.svg -->
+  <svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#7C878E" fill-rule="evenodd">
+      <path d="M15.3,5.5 L8,0 L0.7,5.5 L8,11 L15.3,5.5 Z M8,2.5 L12,5.5 L8,8.5 L4,5.5 L8,2.5 Z" fill-rule="nonzero" />
+      <path d="M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" />
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup name="MEditorAppManageIcon"></script>

package/src/icons/CodeIcon.vue

@@ -0,0 +1,35 @@
+<template>
+  <!-- 代码icon，cdn链接：https://cloudcache.tencent-cloud.com/qcloud/ui/static/government/0d463ed5-6407-4498-8865-3d05b5e70115.svg -->
+  <svg
+    width="32px"
+    height="32px"
+    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 -->
+    <title>gsd-icon-line-Universal-code</title>
+    <desc>Created with Sketch.</desc>
+    <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)">
+        <g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)">
+          <g id="路径">
+            <mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask>
+            <use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use>
+            <path
+              d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z"
+              id="形状"
+              fill="#1D1F24"
+              mask="url(#mask-2)"
+            ></path>
+          </g>
+        </g>
+        <g id="icon切图" transform="translate(226.000000, 1782.000000)"></g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup name="MEditorCodeIcon"></script>

package/src/layouts/AddPageBox.vue

@@ -17,9 +17,9 @@ import { Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
-import MIcon from '../components/Icon.vue';
-import type { Services } from '../type';
-import { generatePageNameByApp } from '../utils';
+import MIcon from '@editor/components/Icon.vue';
+import type { Services } from '@editor/type';
+import { generatePageNameByApp } from '@editor/utils';
 
 const services = inject<Services>('services');
 

package/src/layouts/Framework.vue

@@ -18,8 +18,8 @@
       right-class="m-editor-framework-right"
       v-model:left="columnWidth.left"
       v-model:right="columnWidth.right"
-      :min-left="45"
-      :min-right="1"
+      :min-left="65"
+      :min-right="20"
       @change="columnWidthChange"
     >
       <template #left>
@@ -47,8 +47,8 @@ import { computed, inject, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
 
-import Layout from '../components/Layout.vue';
-import { GetColumnWidth, Services } from '../type';
+import Layout from '@editor/components/Layout.vue';
+import type { GetColumnWidth, Services } from '@editor/type';
 
 import AddPageBox from './AddPageBox.vue';
 

package/src/layouts/NavMenu.vue

@@ -12,8 +12,8 @@ import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, Z
 
 import { NodeType } from '@tmagic/schema';
 
-import ToolButton from '../components/ToolButton.vue';
-import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '../type';
+import ToolButton from '@editor/components/ToolButton.vue';
+import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';
 
 const props = withDefaults(
   defineProps<{

package/src/layouts/PropsPanel.vue

@@ -20,7 +20,7 @@ import { tMagicMessage } from '@tmagic/design';
 import type { FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
 
-import type { Services } from '../type';
+import type { Services } from '@editor/type';
 
 const emit = defineEmits(['mounted']);
 

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -39,9 +39,9 @@ import serialize from 'serialize-javascript';
 import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
 import { removeClassNameByClassName } from '@tmagic/utils';
 
-import MIcon from '../../components/Icon.vue';
-import SearchInput from '../../components/SearchInput.vue';
-import type { ComponentGroup, ComponentItem, Services, StageOptions } from '../../type';
+import MIcon from '@editor/components/Icon.vue';
+import SearchInput from '@editor/components/SearchInput.vue';
+import type { ComponentGroup, ComponentItem, Services, StageOptions } from '@editor/type';
 
 const searchText = ref('');
 

package/src/layouts/sidebar/LayerMenu.vue

@@ -8,8 +8,8 @@ import { CopyDocument, Delete, Files, Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
-import ContentMenu from '../../components/ContentMenu.vue';
-import type { ComponentGroup, MenuButton, MenuComponent, Services } from '../../type';
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import type { ComponentGroup, MenuButton, MenuComponent, Services } from '@editor/type';
 
 const props = defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];

package/src/layouts/sidebar/LayerPanel.vue

@@ -58,9 +58,9 @@ import type { Id, MNode, MPage } from '@tmagic/schema';
 import { MContainer, NodeType } from '@tmagic/schema';
 import { getNodePath, isPage } from '@tmagic/utils';
 
-import SearchInput from '../../components/SearchInput.vue';
-import type { MenuButton, MenuComponent, Services } from '../../type';
-import { Layout } from '../../type';
+import SearchInput from '@editor/components/SearchInput.vue';
+import type { MenuButton, MenuComponent, Services } from '@editor/type';
+import { Layout } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
 
@@ -138,7 +138,7 @@ const allowDrop = (draggingNode: any, dropNode: any, type: string): boolean => {
 
   if (ingType !== NodeType.PAGE && data.type === NodeType.PAGE) return false;
   if (ingType === NodeType.PAGE && data.type !== NodeType.PAGE) return false;
-  if (!data || !data.type) return false;
+  if (!data?.type) return false;
   if (['prev', 'next'].includes(type)) return true;
   if (data.items || data.type === 'container') return true;
 

package/src/layouts/sidebar/Sidebar.vue

@@ -89,9 +89,9 @@ import { Coin, EditPen, Files } from '@element-plus/icons-vue';
 
 import { getConfig, TMagicTabs } from '@tmagic/design';
 
-import MIcon from '../../components/Icon.vue';
-import type { MenuButton, MenuComponent, SideComponent, SideItem } from '../../type';
-import { SideBarData } from '../../type';
+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 ComponentListPanel from './ComponentListPanel.vue';