@tmagic/editor 1.2.13 → 1.2.15

package/src/layouts/sidebar/Sidebar.vue

@@ -1,16 +1,16 @@
 <template>
-  <TMagicTabs
+  <component
     v-if="data.type === 'tabs' && data.items.length"
-    class="m-editor-sidebar"
     v-model="activeTabName"
-    type="card"
-    tab-position="left"
+    class="m-editor-sidebar tmagic-design-tabs"
+    v-bind="tabsComponent.props({ type: 'card', tabPosition: 'left' })"
+    :is="tabsComponent.component"
   >
     <component
-      :is="uiComponent.component"
       v-for="(config, index) in sideBarItems"
+      v-bind="tabPaneComponent.props({ name: config.text })"
+      :is="tabPaneComponent.component"
       :key="config.$key || index"
-      :name="config.text"
     >
       <template #label>
         <div :key="config.text">
@@ -80,18 +80,18 @@
         </template>
       </component>
     </component>
-  </TMagicTabs>
+  </component>
 </template>
 
 <script lang="ts" setup name="MEditorSidebar">
 import { computed, ref, watch } from 'vue';
 import { Coin, EditPen, Files } from '@element-plus/icons-vue';
 
-import { getConfig, TMagicTabs } from '@tmagic/design';
+import { getConfig } 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';
@@ -107,7 +107,8 @@ const props = withDefaults(
   },
 );
 
-const uiComponent = getConfig('components').tabPane;
+const tabPaneComponent = getConfig('components').tabPane;
+const tabsComponent = getConfig('components').tabs;
 
 const activeTabName = ref(props.data?.status);
 

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

@@ -1,7 +1,7 @@
 <template>
-  <TMagicScrollbar class="m-editor-code-block-list">
+  <TMagicScrollbar class="m-editor-code-block-list m-editor-dep-list-panel">
     <slot name="code-block-panel-header">
-      <div class="code-header-wrapper">
+      <div class="search-wrapper">
         <SearchInput @search="filterTextChangeHandler"></SearchInput>
         <TMagicButton class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
           >新增</TMagicButton
@@ -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="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

@@ -21,10 +21,10 @@ import { cloneDeep, mergeWith } from 'lodash-es';
 
 import type { FormConfig } from '@tmagic/form';
 import type { MComponent, MNode } from '@tmagic/schema';
-import { toLine } from '@tmagic/utils';
+import { guid, 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';
 
@@ -130,7 +130,7 @@ class Props extends BaseService {
   }
 
   public async createId(type: string | number): Promise<string> {
-    return `${type}_${this.guid()}`;
+    return `${type}_${guid()}`;
   }
 
   /**
@@ -181,19 +181,6 @@ class Props extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
-
-  /**
-   * 生成指定位数的GUID，无【-】格式
-   * @param digit 位数，默认值8
-   * @returns
-   */
-  private guid(digit = 8): string {
-    return 'x'.repeat(digit).replace(/[xy]/g, (c) => {
-      const r = (Math.random() * 16) | 0;
-      const v = c === 'x' ? r : (r & 0x3) | 0x8;
-      return v.toString(16);
-    });
-  }
 }
 
 export type PropsService = Props;

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

@@ -1,55 +1,18 @@
 .m-editor-code-block-list {
   height: 100%;
 
-  .magic-editor-layer-tree {
-    padding-top: 48px;
-  }
-
-  .code-header-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 1;
-
-    .search-input {
-      flex: 1;
-      position: relative;
-    }
-
-    .create-code-button {
-      margin-left: 2px;
-      margin-right: 10px;
-    }
-  }
-
-  .divider {
-    margin: 10px 0 0 0;
-  }
-
   .list-container {
-    width: 100%;
-    overflow: hidden;
     .list-item {
-      display: flex;
-      width: 100%;
-
-      .right-tool {
-        display: flex;
-        width: fit-content !important;
-        .edit-icon {
-          margin: 0 5px;
-        }
+      .codeIcon {
+        width: 22px;
+        height: 22px;
+        margin-right: 5px;
       }
-      .code-name {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 0 !important;
-        flex: 1;
-        line-height: 18px;
+
+      .compIcon {
+        width: 22px;
+        height: 22px;
+        margin-right: 5px;
       }
     }
   }
@@ -57,9 +20,8 @@
 
 .m-fields-code-select {
   width: 100%;
-  .edit-icon {
-    cursor: pointer;
-    margin-right: 5px;
+  .el-card__header {
+    display: none;
   }
 }
 

package/src/theme/dep-list.scss

@@ -0,0 +1,59 @@
+.m-editor-dep-list-panel {
+  .magic-editor-layer-tree {
+    padding-top: 48px;
+  }
+
+  .search-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+
+    .search-input {
+      flex: 1;
+      position: relative;
+    }
+
+    .tmagic-design-button {
+      margin-right: 10px;
+    }
+  }
+
+  .list-container {
+    width: 100%;
+    overflow: hidden;
+    .list-item {
+      display: flex;
+      width: 100%;
+      align-items: center;
+
+      .right-tool {
+        display: flex;
+        width: fit-content !important;
+        align-items: center;
+        .edit-icon {
+          margin: 0 5px;
+        }
+      }
+      .name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 0 !important;
+        flex: 1;
+        line-height: 22px;
+
+        &.code {
+          color: #000;
+        }
+
+        &.hook {
+          color: #909399;
+        }
+      }
+    }
+  }
+}

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/theme/sidebar.scss

@@ -1,11 +1,24 @@
-.m-editor-sidebar {
+.m-editor-sidebar.tmagic-design-tabs {
   height: 100%;
 
-  &.el-tabs--left .el-tabs__header {
+  .el-tabs__header,
+  .t-tabs__header {
     background: $--sidebar-heder-background-color;
     border: 0;
+    height: 100%;
+
+    .t-tabs__nav--card {
+      background-color: transparent;
+    }
 
-    &.is-left {
+    .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(
+        .t-is-active
+      ):hover {
+      background-color: transparent;
+    }
+
+    &.is-left,
+    &.t-is-left {
       width: 40px;
       margin-right: 0;
     }
@@ -23,7 +36,8 @@
       margin-left: 2px;
     }
 
-    .el-tabs__item.is-left {
+    .el-tabs__item.is-left,
+    .t-tabs__nav-item {
       line-height: 15px;
       border: 0;
       height: auto;
@@ -31,8 +45,10 @@
       color: rgb(255, 255, 255);
       box-sizing: border-box;
 
-      &.is-left {
-        &.is-active {
+      &.is-left,
+      &.t-is-left {
+        &.is-active,
+        &.t-is-active {
           background: $--sidebar-content-background-color;
           border: 0;
 
@@ -51,6 +67,10 @@
       }
     }
 
+    .t-tabs__nav-item {
+      padding: 7px;
+    }
+
     i {
       font-size: 25px;
       color: rgba(255, 255, 255, 0.6);

package/src/theme/theme.scss

@@ -16,3 +16,4 @@
 @import "./event.scss";
 @import "./layout.scss";
 @import "./breadcrumb.scss";
+@import "./dep-list.scss";

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';
 
 /**