@tmagic/editor 1.2.13 → 1.2.14

package/src/layouts/sidebar/code-block/CodeBlockEditor.vue

@@ -3,11 +3,12 @@
     class="code-editor-dialog"
     :model-value="true"
     :title="currentTitle"
-    :close-on-press-escape="false"
+    :close-on-press-escape="true"
     :append-to-body="true"
     :show-close="false"
-    :close-on-click-modal="false"
+    :close-on-click-modal="true"
     :size="size"
+    :before-close="handleClose"
   >
     <Layout v-model:left="left" :min-left="45" class="code-editor-layout">
       <!-- 右侧区域 -->
@@ -15,6 +16,7 @@
         <div v-if="!isEmpty(codeConfig)" class="m-editor-code-block-editor-panel">
           <slot name="code-block-edit-panel-header" :id="id"></slot>
           <FunctionEditor
+            ref="functionEditor"
             v-if="codeConfig"
             :id="id"
             :name="codeConfig.name"
@@ -38,10 +40,10 @@ import { TMagicDrawer } from '@tmagic/design';
 import { ColumnConfig } from '@tmagic/form';
 import { CodeBlockContent } from '@tmagic/schema';
 
-import FunctionEditor from '../../../components/FunctionEditor.vue';
-import Layout from '../../../components/Layout.vue';
-import type { ListState, Services } from '../../../type';
-import { serializeConfig } from '../../../utils/editor';
+import FunctionEditor from '@editor/components/FunctionEditor.vue';
+import Layout from '@editor/components/Layout.vue';
+import type { ListState, Services } from '@editor/type';
+import { serializeConfig } from '@editor/utils/editor';
 
 const services = inject<Services>('services');
 const codeOptions = inject('codeOptions', {});
@@ -84,4 +86,11 @@ watchEffect(async () => {
   });
   currentTitle.value = state.codeList[0]?.name || '';
 });
+
+const functionEditor = ref<InstanceType<typeof FunctionEditor>>();
+
+const handleClose = async () => {
+  // 触发codeDraftEditor组件关闭事件
+  await functionEditor.value?.codeDraftEditor?.close();
+};
 </script>

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -15,7 +15,7 @@
       class="magic-editor-layer-tree"
       node-key="id"
       empty-text="暂无代码块"
-      default-expand-all
+      :default-expanded-keys="expandedKeys"
       :expand-on-click-node="false"
       :data="codeList"
       :highlight-current="true"
@@ -25,7 +25,11 @@
       <template #default="{ data }">
         <div :id="data.id" class="list-container">
           <div class="list-item">
-            <span class="code-name">{{ data.name }}（{{ data.id }}）</span>
+            <CodeIcon v-if="data.type === 'code'" class="codeIcon"></CodeIcon>
+            <AppManageIcon v-if="data.type === 'node'" class="compIcon"></AppManageIcon>
+            <span class="code-name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
+              >{{ data.name }}（{{ data.id }}）</span
+            >
             <!-- 右侧工具栏 -->
             <div class="right-tool" v-if="data.type === 'code'">
               <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
@@ -58,9 +62,11 @@ import { TMagicButton, tMagicMessage, TMagicScrollbar, TMagicTooltip, TMagicTree
 import { ColumnConfig } from '@tmagic/form';
 import { CodeBlockContent, Id } from '@tmagic/schema';
 
-import Icon from '../../../components/Icon.vue';
-import SearchInput from '../../../components/SearchInput.vue';
-import { CodeDeleteErrorType, CodeDslItem, Services } from '../../../type';
+import Icon from '@editor/components/Icon.vue';
+import SearchInput from '@editor/components/SearchInput.vue';
+import AppManageIcon from '@editor/icons/AppManageIcon.vue';
+import CodeIcon from '@editor/icons/CodeIcon.vue';
+import { CodeDeleteErrorType, CodeDslItem, Services } from '@editor/type';
 
 import CodeBlockEditor from './CodeBlockEditor.vue';
 
@@ -73,20 +79,27 @@ const { codeBlockService, depService, editorService } = inject<Services>('servic
 
 // 代码块列表
 const codeList = computed(() =>
-  Object.values(depService?.targets['code-block'] || {}).map((target) => ({
-    id: target.id,
-    name: target.name,
-    type: 'code',
-    codeBlockContent: codeBlockService?.getCodeContentById(target.id),
-    children: Object.entries(target.deps).map(([id, dep]) => ({
+  Object.values(depService?.targets['code-block'] || {}).map((target) => {
+    // 组件节点
+    const compNodes = Object.entries(target.deps).map(([id, dep]) => ({
       name: dep.name,
       type: 'node',
       id,
       children: dep.keys.map((key) => ({ name: key, id: key, type: 'key' })),
-    })),
-  })),
+    }));
+    return {
+      id: target.id,
+      name: target.name,
+      type: 'code',
+      codeBlockContent: codeBlockService?.getCodeContentById(target.id),
+      children: compNodes,
+    };
+  }),
 );
 
+// 默认展开组件层级的节点
+const expandedKeys = computed(() => codeList.value.map((item) => item.id));
+
 const editable = computed(() => codeBlockService?.getEditStatus());
 
 // 是否展示代码编辑区

package/src/layouts/workspace/Breadcrumb.vue

@@ -14,7 +14,7 @@ import { TMagicButton } from '@tmagic/design';
 import type { MNode } from '@tmagic/schema';
 import { getNodePath } from '@tmagic/utils';
 
-import type { Services } from '../../type';
+import type { Services } from '@editor/type';
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;

package/src/layouts/workspace/PageBar.vue

@@ -53,8 +53,8 @@ import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 import { TMagicIcon, TMagicPopover, TMagicTooltip } from '@tmagic/design';
 import type { MPage } from '@tmagic/schema';
 
-import ToolButton from '../../components/ToolButton.vue';
-import type { Services } from '../../type';
+import ToolButton from '@editor/components/ToolButton.vue';
+import type { Services } from '@editor/type';
 
 import PageBarScrollContainer from './PageBarScrollContainer.vue';
 

package/src/layouts/workspace/PageBarScrollContainer.vue

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

package/src/layouts/workspace/Stage.vue

@@ -33,9 +33,9 @@ import { cloneDeep } from 'lodash-es';
 import type { MContainer } from '@tmagic/schema';
 import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
 
-import ScrollViewer from '../../components/ScrollViewer.vue';
-import { Layout, MenuButton, MenuComponent, Services, StageOptions } from '../../type';
-import { useStage } from '../../utils/stage';
+import ScrollViewer from '@editor/components/ScrollViewer.vue';
+import { Layout, MenuButton, MenuComponent, Services, StageOptions } from '@editor/type';
+import { useStage } from '@editor/utils/stage';
 
 import ViewerMenu from './ViewerMenu.vue';
 

package/src/layouts/workspace/ViewerMenu.vue

@@ -9,10 +9,10 @@ import { Bottom, CopyDocument, Delete, DocumentCopy, Top } from '@element-plus/i
 import { NodeType } from '@tmagic/schema';
 import { isPage } from '@tmagic/utils';
 
-import ContentMenu from '../../components/ContentMenu.vue';
-import storageService from '../../services/storage';
-import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '../../type';
-import { COPY_STORAGE_KEY } from '../../utils/editor';
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import storageService from '@editor/services/storage';
+import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
+import { COPY_STORAGE_KEY } from '@editor/utils/editor';
 
 const props = withDefaults(
   defineProps<{ isMultiSelect?: boolean; stageContentMenu: (MenuButton | MenuComponent)[] }>(),

package/src/layouts/workspace/Workspace.vue

@@ -21,7 +21,7 @@ import KeyController from 'keycon';
 
 import { isPage } from '@tmagic/utils';
 
-import type { MenuButton, MenuComponent, Services } from '../../type';
+import type { MenuButton, MenuComponent, Services } from '@editor/type';
 
 import Breadcrumb from './Breadcrumb.vue';
 import PageBar from './PageBar.vue';

package/src/services/BaseService.ts

@@ -18,7 +18,7 @@
 
 import { EventEmitter } from 'events';
 
-import { compose } from '../utils/compose';
+import { compose } from '@editor/utils/compose';
 
 const methodName = (prefix: string, name: string) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
 

package/src/services/codeBlock.ts

@@ -21,9 +21,9 @@ import { keys, pick } from 'lodash-es';
 
 import { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
 
-import type { CodeState } from '../type';
-import { CODE_DRAFT_STORAGE_KEY } from '../type';
-import { info } from '../utils/logger';
+import type { CodeState } from '@editor/type';
+import { CODE_DRAFT_STORAGE_KEY } from '@editor/type';
+import { info } from '@editor/utils/logger';
 
 import BaseService from './BaseService';
 

package/src/services/componentList.ts

@@ -18,7 +18,7 @@
 
 import { reactive } from 'vue';
 
-import type { ComponentGroup, ComponentGroupState } from '../type';
+import type { ComponentGroup, ComponentGroupState } from '@editor/type';
 
 import BaseService from './BaseService';
 

package/src/services/editor.ts

@@ -24,10 +24,10 @@ import { NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
-import historyService from '../services/history';
-import storageService, { Protocol } from '../services/storage';
-import type { AddMNode, EditorNodeInfo, PastePosition, StepValue, StoreState, StoreStateKey } from '../type';
-import { LayerOffset, Layout } from '../type';
+import historyService from '@editor/services/history';
+import storageService, { Protocol } from '@editor/services/storage';
+import type { AddMNode, EditorNodeInfo, PastePosition, StepValue, StoreState, StoreStateKey } from '@editor/type';
+import { LayerOffset, Layout } from '@editor/type';
 import {
   change2Fixed,
   COPY_STORAGE_KEY,
@@ -37,8 +37,8 @@ import {
   getNodeIndex,
   isFixed,
   setLayout,
-} from '../utils/editor';
-import { beforePaste, getAddParent } from '../utils/operator';
+} from '@editor/utils/editor';
+import { beforePaste, getAddParent } from '@editor/utils/operator';
 
 import BaseService from './BaseService';
 import propsService from './props';

package/src/services/events.ts

@@ -22,7 +22,7 @@ import { cloneDeep } from 'lodash-es';
 import { DEFAULT_EVENTS, DEFAULT_METHODS, EventOption } from '@tmagic/core';
 import { toLine } from '@tmagic/utils';
 
-import type { ComponentGroup } from '../type';
+import type { ComponentGroup } from '@editor/type';
 
 import BaseService from './BaseService';
 

package/src/services/history.ts

@@ -20,8 +20,8 @@ import { reactive } from 'vue';
 
 import type { MPage } from '@tmagic/schema';
 
-import { HistoryState, StepValue } from '../type';
-import { UndoRedo } from '../utils/undo-redo';
+import type { HistoryState, StepValue } from '@editor/type';
+import { UndoRedo } from '@editor/utils/undo-redo';
 
 import BaseService from './BaseService';
 

package/src/services/props.ts

@@ -23,8 +23,8 @@ import type { FormConfig } from '@tmagic/form';
 import type { MComponent, MNode } from '@tmagic/schema';
 import { toLine } from '@tmagic/utils';
 
-import type { PropsState } from '../type';
-import { fillConfig } from '../utils/props';
+import type { PropsState } from '@editor/type';
+import { fillConfig } from '@editor/utils/props';
 
 import BaseService from './BaseService';
 

package/src/services/ui.ts

@@ -18,8 +18,8 @@
 
 import { reactive } from 'vue';
 
-import editorService from '../services/editor';
-import type { StageRect, UiState } from '../type';
+import editorService from '@editor/services/editor';
+import type { StageRect, UiState } from '@editor/type';
 
 import BaseService from './BaseService';
 

package/src/theme/code-block.scss

@@ -34,22 +34,47 @@
     overflow: hidden;
     .list-item {
       display: flex;
+      align-items: center;
       width: 100%;
+      align-items: center;
 
       .right-tool {
         display: flex;
         width: fit-content !important;
+        align-items: center;
+        margin-right: 10px;
         .edit-icon {
           margin: 0 5px;
         }
       }
+
+      .codeIcon {
+        width: 20px;
+        height: 20px;
+        margin-right: 5px;
+      }
+
+      .compIcon {
+        width: 15px;
+        height: 15px;
+        margin-right: 5px;
+      }
+
       .code-name {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         width: 0 !important;
         flex: 1;
-        line-height: 18px;
+        line-height: 22px;
+
+        &.code {
+          color: #000;
+        }
+
+        &.hook {
+          color: #909399;
+        }
       }
     }
   }
@@ -57,9 +82,8 @@
 
 .m-fields-code-select {
   width: 100%;
-  .edit-icon {
-    cursor: pointer;
-    margin-right: 5px;
+  .el-card__header {
+    display: none;
   }
 }
 

package/src/theme/event.scss

@@ -21,4 +21,16 @@
 }
 .m-fields-code-select-col {
   width: 100%;
+  .code-select-container {
+    display: flex;
+    align-items: center;
+    .select {
+      flex: 10 0 100px;
+    }
+    .icon {
+      flex: 1 0 20px;
+      cursor: pointer;
+      margin-right: 5px;
+    }
+  }
 }

package/src/utils/config.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { InstallOptions } from '../type';
+import { InstallOptions } from '@editor/type';
 
 let $TMAGIC_EDITOR: InstallOptions = {} as any;
 

package/src/utils/dep.ts

@@ -2,8 +2,8 @@ import { isEmpty } from 'lodash-es';
 
 import { CodeBlockContent, HookType, Id } from '@tmagic/schema';
 
-import { Target } from '../services/dep';
-import { HookData } from '../type';
+import { Target } from '@editor/services/dep';
+import type { HookData } from '@editor/type';
 
 export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent) =>
   new Target({

package/src/utils/editor.ts

@@ -23,7 +23,7 @@ import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
-import { Layout } from '../type';
+import { Layout } from '@editor/type';
 export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
 
 /**

package/src/utils/operator.ts

@@ -4,10 +4,10 @@ import { isEmpty } from 'lodash-es';
 import { Id, MContainer, MNode } from '@tmagic/schema';
 import { isPage } from '@tmagic/utils';
 
-import editorService from '../services/editor';
-import propsService from '../services/props';
-import { AddMNode, PastePosition } from '../type';
-import { generatePageNameByApp, getInitPositionStyle } from '../utils/editor';
+import editorService from '@editor/services/editor';
+import propsService from '@editor/services/props';
+import type { AddMNode, PastePosition } from '@editor/type';
+import { generatePageNameByApp, getInitPositionStyle } from '@editor/utils/editor';
 
 /**
  * 粘贴前置操作：返回分配了新id以及校准了坐标的配置

package/src/utils/stage.ts

@@ -2,9 +2,9 @@ import { computed } from 'vue';
 
 import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
 
-import editorService from '../services/editor';
-import uiService from '../services/ui';
-import { H_GUIDE_LINE_STORAGE_KEY, StageOptions, V_GUIDE_LINE_STORAGE_KEY } from '../type';
+import editorService from '@editor/services/editor';
+import uiService from '@editor/services/ui';
+import { H_GUIDE_LINE_STORAGE_KEY, StageOptions, V_GUIDE_LINE_STORAGE_KEY } from '@editor/type';
 
 import { getGuideLineFromCache } from './editor';
 

package/tsconfig.build.json

@@ -5,7 +5,10 @@
     "declaration": true,
     "declarationDir": "types",
     "forceConsistentCasingInFileNames": true,
-    "paths": {},
+    "outDir": "./types",
+    "paths": {
+      "@editor/*": ["src/*"],
+    },
   },
   "include": [
 		"src"

package/types/components/CodeDraftEditor.vue.d.ts

@@ -15,7 +15,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {
     editable: boolean;
     autoSaveDraft: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "saveAndClose")[], "close" | "saveAndClose", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>, {
+    saveAndClose: () => void;
+    close: () => Promise<void>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "saveAndClose")[], "close" | "saveAndClose", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /** 代码id */
     id: Id;
     /** 代码内容 */
@@ -39,8 +42,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     autoSaveDraft: boolean;
 }>;
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {
@@ -48,7 +51,7 @@ declare type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
-declare type __VLS_WithDefaults<P, D> = {
+type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
         default: D[K];
     } : P[K];

package/types/components/ContentMenu.vue.d.ts

@@ -22,8 +22,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     isSubMenu: boolean;
 }>;
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {
@@ -31,7 +31,7 @@ declare type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
-declare type __VLS_WithDefaults<P, D> = {
+type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
         default: D[K];
     } : P[K];