@tmagic/editor 1.2.0 → 1.2.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0",
+  "version": "1.2.2",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,12 +46,12 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.2.0",
-    "@tmagic/design": "1.2.0",
-    "@tmagic/form": "1.2.0",
-    "@tmagic/schema": "1.2.0",
-    "@tmagic/stage": "1.2.0",
-    "@tmagic/utils": "1.2.0",
+    "@tmagic/core": "1.2.2",
+    "@tmagic/design": "1.2.2",
+    "@tmagic/form": "1.2.2",
+    "@tmagic/schema": "1.2.2",
+    "@tmagic/stage": "1.2.2",
+    "@tmagic/utils": "1.2.2",
     "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.0",
-    "@tmagic/form": "1.2.0",
+    "@tmagic/design": "1.2.2",
+    "@tmagic/form": "1.2.2",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },

package/src/Editor.vue

@@ -228,7 +228,7 @@ export default defineComponent({
 
   setup(props, { emit }) {
     const rootChangeHandler = (value: MApp, preValue?: MApp | null) => {
-      const nodeId = editorService.get<MNode | null>('node')?.id || props.defaultSelected;
+      const nodeId = editorService.get('node')?.id || props.defaultSelected;
       let node;
       if (nodeId) {
         node = editorService.getNodeById(nodeId);

package/src/components/CodeDraftEditor.vue

@@ -12,7 +12,7 @@
       <TMagicButton type="primary" class="button" @click="toggleFullScreen">
         {{ isFullScreen ? '退出全屏' : '全屏' }}</TMagicButton
       >
-      <TMagicButton type="primary" class="button" @click="saveCode">保存</TMagicButton>
+      <TMagicButton type="primary" class="button" @click="saveAndClose">确认</TMagicButton>
       <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
     </div>
     <div class="m-editor-content-bottom" v-else>
@@ -54,7 +54,7 @@ const props = withDefaults(
     autoSaveDraft: true,
   },
 );
-const emit = defineEmits(['save', 'close', 'saveAndClose']);
+const emit = defineEmits(['close', 'saveAndClose']);
 
 const services = inject<Services>('services');
 
@@ -95,14 +95,6 @@ const saveCodeDraft = async (codeValue: string) => {
   tMagicMessage.success(`代码草稿保存成功 ${datetimeFormatter(new Date())}`);
 };
 
-// 保存代码
-const saveCode = (): void => {
-  if (!codeEditor.value || !props.editable) return;
-  // 代码内容
-  editorContent.value = (codeEditor.value.getEditor() as monaco.editor.IStandaloneCodeEditor)?.getValue();
-  emit('save', editorContent.value);
-};
-
 // 保存并关闭
 const saveAndClose = (): void => {
   if (!codeEditor.value || !props.editable) return;

package/src/components/FunctionEditor.vue

@@ -6,9 +6,9 @@
         <TMagicInput class="code-name-input" v-model="codeName" :disabled="!editable" />
       </div>
       <div class="code-name-wrapper">
-        <div class="code-name-label">参数定义</div>
+        <div class="code-name-label">参数</div>
         <m-form-table
-          style="width: 320px"
+          style="width: 800px"
           :config="tableConfig"
           :model="tableModel"
           :enableToggleMode="false"
@@ -26,7 +26,6 @@
       :autoSaveDraft="autoSaveDraft"
       :codeOptions="codeOptions"
       language="javascript"
-      @save="saveCode"
       @saveAndClose="saveAndClose"
       @close="close"
     ></CodeDraftEditor>
@@ -34,36 +33,56 @@
 </template>
 <script lang="ts" setup name="MEditorFunctionEditor">
 import { inject, provide, 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 CodeDraftEditor from './CodeDraftEditor.vue';
-
-const tableConfig = {
-  border: true,
-  enableFullscreen: false,
-  name: 'params',
-  maxHeight: '150px',
+const defaultParamColConfig: ColumnConfig = {
+  type: 'row',
+  label: '参数类型',
   items: [
     {
-      type: 'text',
-      label: '参数名',
-      name: 'name',
+      text: '参数类型',
+      labelWidth: '70px',
+      type: 'select',
+      name: 'type',
+      options: [
+        {
+          text: '数字',
+          label: '数字',
+          value: 'number',
+        },
+        {
+          text: '字符串',
+          label: '字符串',
+          value: 'text',
+        },
+      ],
     },
   ],
 };
 
 const props = withDefaults(
   defineProps<{
+    /** 代码块id */
     id: Id;
+    /** 代码块名称 */
     name: string;
+    /** 代码内容 */
     content: string;
+    /** 是否可编辑 */
     editable?: boolean;
+    /** 是否自动保存草稿 */
     autoSaveDraft?: boolean;
+    /** 编辑器扩展参数 */
     codeOptions?: object;
+    /** 代码参数扩展配置 */
+    paramsColConfig?: ColumnConfig;
   }>(),
   {
     editable: true,
@@ -71,6 +90,32 @@ const props = withDefaults(
   },
 );
 
+const paramsColConfig = props.paramsColConfig || defaultParamColConfig;
+
+const tableConfig: TableConfig = {
+  type: 'table',
+  border: true,
+  enableFullscreen: false,
+  name: 'params',
+  maxHeight: '300px',
+  dropSort: false,
+  items: [
+    {
+      type: 'text',
+      label: '参数名',
+      name: 'name',
+      width: 200,
+    },
+    {
+      type: 'text',
+      label: '参数注释',
+      name: 'tip',
+      width: 200,
+    },
+    paramsColConfig,
+  ],
+};
+
 const emit = defineEmits(['change', 'field-input']);
 
 const services = inject<Services>('services');
@@ -91,7 +136,7 @@ watchEffect(() => {
 });
 
 const initTableModel = (): void => {
-  const codeDsl = services?.codeBlockService.getCodeDslSync();
+  const codeDsl = cloneDeep(services?.codeBlockService.getCodeDslSync());
   if (!codeDsl) return;
   tableModel.value = {
     params: codeDsl[props.id]?.params || [],

package/src/components/Layout.vue

@@ -41,7 +41,7 @@ const props = withDefaults(
   {
     minLeft: 46,
     minRight: 1,
-    minCenter: 1,
+    minCenter: 5,
   },
 );
 

package/src/fields/CodeSelect.vue

@@ -9,17 +9,27 @@
       :size="size"
       @change="changeHandler"
     >
+      <template #operateCol="{ scope }">
+        <Icon
+          v-if="scope.row.codeId"
+          :icon="editable ? Edit : View"
+          class="edit-icon"
+          @click="editCode(scope.row.codeId)"
+        ></Icon>
+      </template>
     </m-form-table>
   </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 { createValues, FormItem, FormState, TableConfig } from '@tmagic/form';
 import { HookType, Id } 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');
@@ -38,9 +48,10 @@ const codeDsl = computed(() => services?.codeBlockService.getCodeDslSync());
 
 const tableConfig = computed<FormItem>(() => {
   const defaultConfig = {
-    dropSort: true,
+    dropSort: false,
     enableFullscreen: false,
     border: true,
+    operateColWidth: 60,
     items: [
       {
         type: 'select',
@@ -68,8 +79,8 @@ const tableConfig = computed<FormItem>(() => {
         defaultValue: {},
         itemsFunction: (row: HookData) => {
           const paramsConfig = getParamsConfig(row.codeId);
-          if (!row.params) row.params = {};
-          if (isEmpty(row.params)) {
+          // 如果参数没有填值，则使用createValues补全空值
+          if (isEmpty(row.params) || !row.params) {
             createValues(mForm, paramsConfig, {}, row.params);
           }
           return paramsConfig;
@@ -83,6 +94,8 @@ const tableConfig = computed<FormItem>(() => {
   };
 });
 
+const editable = computed(() => services?.codeBlockService.getEditStatus());
+
 watch(
   () => props.model[props.name],
   (value) => {
@@ -104,15 +117,18 @@ const changeHandler = async () => {
   emit('change', props.model[props.name]);
 };
 
-const getParamsConfig = (codeId: Id) => {
+const getParamsConfig = (codeId: Id): CodeParamStatement[] => {
   if (!codeDsl.value) return [];
   const paramStatements = codeDsl.value[codeId]?.params;
   if (isEmpty(paramStatements)) return [];
   return paramStatements.map((paramState: CodeParamStatement) => ({
-    name: paramState.name,
-    text: paramState.name,
     labelWidth: '100px',
-    type: 'text',
+    text: paramState.name,
+    ...paramState,
   }));
 };
+
+const editCode = (codeId: Id) => {
+  services?.codeBlockService.setCodeEditorContent(true, codeId);
+};
 </script>

package/src/fields/UISelect.vue

@@ -37,7 +37,7 @@ const uiSelectMode = ref(false);
 
 const cancelHandler = () => {
   if (!services?.uiService) return;
-  services.uiService.set<boolean>('uiSelectMode', false);
+  services.uiService.set('uiSelectMode', false);
   uiSelectMode.value = false;
   globalThis.document.removeEventListener('ui-select', clickHandler as EventListener);
 };
@@ -61,7 +61,7 @@ const toName = computed(() => {
 
 const startSelect = () => {
   if (!services?.uiService) return;
-  services.uiService.set<boolean>('uiSelectMode', true);
+  services.uiService.set('uiSelectMode', true);
   uiSelectMode.value = true;
   globalThis.document.addEventListener('ui-select', clickHandler as EventListener);
 };

package/src/index.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/layouts/AddPageBox.vue

@@ -28,9 +28,12 @@ const clickHandler = () => {
 
   if (!editorService) return;
 
+  const root = toRaw(editorService.get('root'));
+  if (!root) throw new Error('root 不能为空');
+
   editorService.add({
     type: NodeType.PAGE,
-    name: generatePageNameByApp(toRaw(editorService.get('root'))),
+    name: generatePageNameByApp(root),
   });
 };
 </script>

package/src/layouts/Framework.vue

@@ -46,7 +46,6 @@
 import { computed, inject, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
-import type { MApp } from '@tmagic/schema';
 
 import Layout from '../components/Layout.vue';
 import { GetColumnWidth, Services } from '../type';
@@ -67,11 +66,11 @@ withDefaults(
 
 const { editorService, uiService } = inject<Services>('services') || {};
 
-const root = computed(() => editorService?.get<MApp>('root'));
-const nodes = computed(() => editorService?.get<Node[]>('nodes') || []);
+const root = computed(() => editorService?.get('root'));
+const nodes = computed(() => editorService?.get('nodes') || []);
 
-const pageLength = computed(() => editorService?.get<number>('pageLength') || 0);
-const showSrc = computed(() => uiService?.get<boolean>('showSrc'));
+const pageLength = computed(() => editorService?.get('pageLength') || 0);
+const showSrc = computed(() => uiService?.get('showSrc'));
 
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
 const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
@@ -101,7 +100,7 @@ watch(
       columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
     }
 
-    uiService?.set('columnWidth', columnWidth);
+    uiService?.set('columnWidth', columnWidth.value as GetColumnWidth);
   },
   {
     immediate: true,
@@ -123,8 +122,11 @@ watch(
   },
 );
 
-const columnWidthChange = (columnWidth: GetColumnWidth) => {
-  uiService?.set('columnWidth', columnWidth);
+const columnWidthChange = (columnW: GetColumnWidth) => {
+  columnWidth.value.left = columnW.left;
+  columnWidth.value.center = columnW.center;
+  columnWidth.value.right = columnW.right;
+  uiService?.set('columnWidth', columnW);
 };
 
 const saveCode = (value: string) => {

package/src/layouts/NavMenu.vue

@@ -13,7 +13,7 @@ import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, Z
 import { NodeType } from '@tmagic/schema';
 
 import ToolButton from '../components/ToolButton.vue';
-import { ColumnLayout, GetColumnWidth, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '../type';
+import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '../type';
 
 const props = withDefaults(
   defineProps<{
@@ -29,12 +29,12 @@ const props = withDefaults(
 const services = inject<Services>('services');
 const uiService = services?.uiService;
 
-const columnWidth = computed(() => services?.uiService.get<GetColumnWidth>('columnWidth'));
+const columnWidth = computed(() => services?.uiService.get('columnWidth'));
 const keys = Object.values(ColumnLayout);
 
-const showGuides = computed((): boolean => uiService?.get<boolean>('showGuides') ?? true);
-const showRule = computed((): boolean => uiService?.get<boolean>('showRule') ?? true);
-const zoom = computed((): number => uiService?.get<number>('zoom') ?? 1);
+const showGuides = computed((): boolean => uiService?.get('showGuides') ?? true);
+const showRule = computed((): boolean => uiService?.get('showRule') ?? true);
+const zoom = computed((): number => uiService?.get('zoom') ?? 1);
 
 const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
 const ctrl = isMac ? 'Command' : 'Ctrl';
@@ -67,7 +67,10 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => {
         icon: markRaw(Delete),
         tooltip: `刪除(Delete)`,
         disabled: () => services?.editorService.get('node')?.type === NodeType.PAGE,
-        handler: () => services?.editorService.remove(services?.editorService.get('node')),
+        handler: () => {
+          const node = services?.editorService.get('node');
+          node && services?.editorService.remove(node);
+        },
       });
       break;
     case 'undo':

package/src/layouts/PropsPanel.vue

@@ -19,8 +19,6 @@ import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watc
 import { tMagicMessage } from '@tmagic/design';
 import type { FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
-import type { MNode } from '@tmagic/schema';
-import type StageCore from '@tmagic/stage';
 
 import type { Services } from '../type';
 
@@ -32,11 +30,9 @@ const configForm = ref<InstanceType<typeof MForm>>();
 // ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
 const curFormConfig = ref<any>([]);
 const services = inject<Services>('services');
-const node = computed(() => services?.editorService.get<MNode | null>('node'));
-const propsPanelSize = computed(
-  () => services?.uiService.get<'large' | 'default' | 'small'>('propsPanelSize') || 'small',
-);
-const stage = computed(() => services?.editorService.get<StageCore>('stage'));
+const node = computed(() => services?.editorService.get('node'));
+const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize') || 'small');
+const stage = computed(() => services?.editorService.get('stage'));
 
 const init = async () => {
   if (!node.value) {

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -44,7 +44,6 @@ import { Grid, Search } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
 
 import { TMagicCollapse, TMagicCollapseItem, TMagicInput, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
-import type StageCore from '@tmagic/stage';
 import { removeClassNameByClassName } from '@tmagic/utils';
 
 import MIcon from '../../components/Icon.vue';
@@ -54,7 +53,7 @@ const searchText = ref('');
 const services = inject<Services>('services');
 const stageOptions = inject<StageOptions>('stageOptions');
 
-const stage = computed(() => services?.editorService.get<StageCore>('stage'));
+const stage = computed(() => services?.editorService.get('stage'));
 const list = computed(() =>
   services?.componentListService.getList().map((group: ComponentGroup) => ({
     ...group,

package/src/layouts/sidebar/LayerPanel.vue

@@ -65,7 +65,6 @@ import { difference, throttle, union } from 'lodash-es';
 import { TMagicInput, TMagicScrollbar, TMagicTree } from '@tmagic/design';
 import type { Id, MNode, MPage } from '@tmagic/schema';
 import { MContainer, NodeType } from '@tmagic/schema';
-import StageCore from '@tmagic/stage';
 import { getNodePath, isPage } from '@tmagic/utils';
 
 import type { MenuButton, MenuComponent, Services } from '../../type';
@@ -108,8 +107,8 @@ const treeProps = {
 
 const isMultiSelect = computed(() => isCtrlKeyDown.value || checkedKeys.value.length > 1);
 
-const nodes = computed(() => editorService?.get<MNode[]>('nodes') || []);
-const page = computed(() => editorService?.get<MPage>('page'));
+const nodes = computed(() => editorService?.get('nodes') || []);
+const page = computed(() => editorService?.get('page'));
 const values = computed(() => (page.value ? [page.value] : []));
 // 高亮的节点
 const highlightNode = computed(() => editorService?.get('highlightNode'));
@@ -121,13 +120,13 @@ const select = async (data: MNode) => {
   }
 
   await editorService?.select(data);
-  editorService?.get<StageCore>('stage')?.select(data.id);
+  editorService?.get('stage')?.select(data.id);
 };
 
 // 触发画布多选
 const multiSelect = async (data: Id[]) => {
   await editorService?.multiSelect(data);
-  editorService?.get<StageCore>('stage')?.multiSelect(data);
+  editorService?.get('stage')?.multiSelect(data);
 };
 
 // 触发画布高亮
@@ -136,7 +135,7 @@ const highlight = (data: MNode) => {
     throw new Error('没有id');
   }
   editorService?.highlight(data);
-  editorService?.get<StageCore>('stage')?.highlight(data.id);
+  editorService?.get('stage')?.highlight(data.id);
 };
 
 // tree方法：拖拽时判定目标节点能否成为拖动目标位置
@@ -230,14 +229,14 @@ watch(nodes, (nodes) => {
 
 watch(isMultiSelect, (isMultiSelect) => {
   if (!isMultiSelect) {
-    currentNodeKey.value = editorService?.get<MNode>('node').id;
+    currentNodeKey.value = editorService?.get('node')?.id;
     tree.value?.setCurrentKey(currentNodeKey.value);
   }
 });
 
 const editorServiceRemoveHandler = () => {
   setTimeout(() => {
-    tree.value?.getNode(editorService?.get('node').id)?.updateChildren();
+    tree.value?.getNode(editorService?.get('node')?.id)?.updateChildren();
   }, 0);
 };
 
@@ -300,7 +299,7 @@ const clickHandler = (data: MNode): void => {
   if (isCtrlKeyDown.value) {
     return;
   }
-  if (services?.uiService.get<boolean>('uiSelectMode')) {
+  if (services?.uiService.get('uiSelectMode')) {
     document.dispatchEvent(new CustomEvent('ui-select', { detail: data }));
     return;
   }

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

@@ -9,45 +9,18 @@
     :show-close="false"
   >
     <Layout v-model:left="left" :min-left="45" class="code-editor-layout">
-      <!-- 左侧列表 -->
-      <template #left v-if="mode === CodeEditorMode.LIST">
-        <TMagicTree
-          v-if="!isEmpty(state.codeList)"
-          class="side-tree"
-          node-key="id"
-          empty-text="暂无代码块"
-          :data="state.codeList"
-          :highlight-current="true"
-          :current-node-key="state.codeList[0].id"
-          @node-click="selectHandler"
-        >
-          <template #default="{ data }">
-            <div :id="data.id" class="list-container">
-              <div class="list-item">
-                <div class="code-name">{{ data.name }}（{{ data.id }}）</div>
-              </div>
-            </div>
-          </template>
-        </TMagicTree>
-      </template>
       <!-- 右侧区域 -->
       <template #center>
-        <div
-          v-if="!isEmpty(codeConfig)"
-          :class="[
-            mode === CodeEditorMode.LIST
-              ? 'm-editor-code-block-editor-panel-list-mode'
-              : 'm-editor-code-block-editor-panel',
-          ]"
-        >
+        <div v-if="!isEmpty(codeConfig)" class="m-editor-code-block-editor-panel">
           <slot name="code-block-edit-panel-header" :id="id"></slot>
           <FunctionEditor
             v-if="codeConfig"
             :id="id"
             :name="codeConfig.name"
             :content="codeConfig.content"
+            :paramsColConfig="paramsColConfig"
             :editable="!!editable"
-            :autoSaveDraft="mode === CodeEditorMode.EDITOR"
+            :autoSaveDraft="true"
             :codeOptions="codeOptions"
           ></FunctionEditor>
         </div>
@@ -60,18 +33,22 @@
 import { computed, inject, reactive, ref, watchEffect } from 'vue';
 import { cloneDeep, forIn, isEmpty } from 'lodash-es';
 
-import { TMagicDialog, TMagicTree } from '@tmagic/design';
+import { TMagicDialog } 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 { CodeDslItem, ListState, Services } from '../../../type';
-import { CodeEditorMode } from '../../../type';
+import type { ListState, Services } from '../../../type';
 import { serializeConfig } from '../../../utils/editor';
 
 const services = inject<Services>('services');
 const codeOptions = inject('codeOptions', {});
 
+defineProps<{
+  paramsColConfig?: ColumnConfig;
+}>();
+
 const left = ref(200);
 const currentTitle = ref('');
 // 编辑器当前需展示的代码块内容
@@ -81,7 +58,6 @@ const state = reactive<ListState>({
   codeList: [],
 });
 
-const mode = computed(() => services?.codeBlockService.getMode());
 const id = computed(() => services?.codeBlockService.getId() || '');
 const editable = computed(() => services?.codeBlockService.getEditStatus());
 // 当前选中组件绑定的代码块id数组
@@ -105,9 +81,4 @@ watchEffect(async () => {
   });
   currentTitle.value = state.codeList[0]?.name || '';
 });
-
-const selectHandler = (data: CodeDslItem) => {
-  services?.codeBlockService.setId(data.id);
-  currentTitle.value = data.name;
-};
 </script>