@tmagic/editor 1.4.8 → 1.4.10

package/package.json

@@ -1,9 +1,8 @@
 {
-  "version": "1.4.8",
+  "version": "1.4.10",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
-    "dist/*",
     "src/theme/*"
   ],
   "main": "dist/tmagic-editor.umd.cjs",
@@ -24,7 +23,8 @@
   },
   "files": [
     "dist",
-    "types"
+    "types",
+    "src"
   ],
   "license": "Apache-2.0",
   "engines": {
@@ -54,14 +54,16 @@
     "lodash-es": "^4.17.21",
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
-    "@tmagic/dep": "1.4.8",
-    "@tmagic/table": "1.4.8"
+    "sortablejs": "^1.15.2",
+    "@tmagic/dep": "1.4.10",
+    "@tmagic/table": "1.4.10"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^18.19.0",
     "@types/serialize-javascript": "^5.0.1",
+    "@types/sortablejs": "^1.15.8",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/compiler-sfc": "^3.4.27",
     "@vue/test-utils": "^2.4.6",
@@ -74,14 +76,14 @@
   },
   "peerDependencies": {
     "monaco-editor": "^0.48.0",
-    "vue": "^3.4.27",
     "typescript": "*",
-    "@tmagic/core": "1.4.8",
-    "@tmagic/design": "1.4.8",
-    "@tmagic/form": "1.4.8",
-    "@tmagic/stage": "1.4.8",
-    "@tmagic/schema": "1.4.8",
-    "@tmagic/utils": "1.4.8"
+    "vue": "^3.4.27",
+    "@tmagic/core": "1.4.10",
+    "@tmagic/design": "1.4.10",
+    "@tmagic/schema": "1.4.10",
+    "@tmagic/form": "1.4.10",
+    "@tmagic/stage": "1.4.10",
+    "@tmagic/utils": "1.4.10"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -0,0 +1,212 @@
+<template>
+  <Framework :disabled-page-fragment="disabledPageFragment" :page-bar-sort-options="pageBarSortOptions">
+    <template #header>
+      <slot name="header"></slot>
+    </template>
+
+    <template #nav>
+      <slot name="nav" :editorService="editorService"><TMagicNavMenu :data="menu"></TMagicNavMenu></slot>
+    </template>
+
+    <template #content-before>
+      <slot name="content-before"></slot>
+    </template>
+
+    <template #src-code><slot name="src-code" :editorService="editorService"></slot></template>
+
+    <template #sidebar>
+      <slot name="sidebar" :editorService="editorService">
+        <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu" :custom-content-menu="customContentMenu">
+          <template #layer-panel-header>
+            <slot name="layer-panel-header"></slot>
+          </template>
+
+          <template #layer-node-content="{ data }">
+            <slot name="layer-node-content" :data="data"></slot>
+          </template>
+
+          <template #layer-node-label="{ data }">
+            <slot name="layer-node-label" :data="data"></slot>
+          </template>
+
+          <template #layer-node-tool="{ data }">
+            <slot name="layer-node-tool" :data="data"></slot>
+          </template>
+
+          <template #component-list-panel-header>
+            <slot name="component-list-panel-header"></slot>
+          </template>
+
+          <template #component-list-item="{ component }">
+            <slot name="component-list-item" :component="component"></slot>
+          </template>
+
+          <template #code-block-panel-header>
+            <slot name="code-block-panel-header"></slot>
+          </template>
+
+          <template #code-block-panel-tool="{ id, data }">
+            <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
+          </template>
+
+          <template #code-block-panel-search>
+            <slot name="code-block-panel-search"></slot>
+          </template>
+
+          <template #data-source-panel-tool="{ data }">
+            <slot name="data-source-panel-tool" :data="data"></slot>
+          </template>
+
+          <template #data-source-panel-search>
+            <slot name="data-source-panel-search"></slot>
+          </template>
+        </Sidebar>
+      </slot>
+    </template>
+
+    <template #workspace>
+      <slot name="workspace" :editorService="editorService">
+        <Workspace
+          :disabled-stage-overlay="disabledStageOverlay"
+          :stage-content-menu="stageContentMenu"
+          :custom-content-menu="customContentMenu"
+        >
+          <template #stage><slot name="stage"></slot></template>
+          <template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template>
+        </Workspace>
+      </slot>
+    </template>
+
+    <template #props-panel>
+      <slot name="props-panel">
+        <PropsPanel
+          :extend-state="extendFormState"
+          :disabled-show-src="disabledShowSrc"
+          @mounted="(instance: any) => $emit('props-panel-mounted', instance)"
+          @form-error="(e: any) => $emit('props-form-error', e)"
+          @submit-error="(e: any) => $emit('props-submit-error', e)"
+        >
+          <template #props-panel-header>
+            <slot name="props-panel-header"></slot>
+          </template>
+        </PropsPanel>
+      </slot>
+    </template>
+
+    <template #empty><slot name="empty" :editorService="editorService"></slot></template>
+
+    <template #content-after>
+      <slot name="content-after"></slot>
+    </template>
+
+    <template #footer>
+      <slot name="footer"></slot>
+    </template>
+
+    <template #page-bar><slot name="page-bar"></slot></template>
+    <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
+    <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
+    <template #page-list-popover="{ list }"><slot name="page-list-popover" :list="list"></slot></template>
+  </Framework>
+</template>
+
+<script lang="ts" setup>
+import { EventEmitter } from 'events';
+
+import { provide } from 'vue';
+
+import type { MApp } from '@tmagic/schema';
+
+import Framework from './layouts/Framework.vue';
+import TMagicNavMenu from './layouts/NavMenu.vue';
+import PropsPanel from './layouts/PropsPanel.vue';
+import Sidebar from './layouts/sidebar/Sidebar.vue';
+import Workspace from './layouts/workspace/Workspace.vue';
+import codeBlockService from './services/codeBlock';
+import componentListService from './services/componentList';
+import dataSourceService from './services/dataSource';
+import depService from './services/dep';
+import editorService, { type EditorService } from './services/editor';
+import eventsService from './services/events';
+import historyService from './services/history';
+import keybindingService from './services/keybinding';
+import propsService from './services/props';
+import stageOverlayService from './services/stageOverlay';
+import storageService from './services/storage';
+import uiService from './services/ui';
+import keybindingConfig from './utils/keybinding-config';
+import { defaultEditorProps, EditorProps } from './editorProps';
+import { initServiceEvents, initServiceState } from './initService';
+import type { EventBus, FrameworkSlots, PropsPanelSlots, Services, SidebarSlots, WorkspaceSlots } from './type';
+
+defineSlots<
+  FrameworkSlots &
+    WorkspaceSlots &
+    SidebarSlots &
+    PropsPanelSlots & {
+      workspace(props: { editorService: EditorService }): any;
+      'workspace-content'(props: { editorService: EditorService }): any;
+    }
+>();
+
+defineOptions({
+  name: 'MEditor',
+});
+
+const emit = defineEmits<{
+  'props-panel-mounted': [instance: InstanceType<typeof PropsPanel>];
+  'update:modelValue': [value: MApp | null];
+  'props-form-error': [e: any];
+  'props-submit-error': [e: any];
+}>();
+
+const props = withDefaults(defineProps<EditorProps>(), defaultEditorProps);
+
+const services: Services = {
+  componentListService,
+  eventsService,
+  historyService,
+  propsService,
+  editorService,
+  uiService,
+  storageService,
+  codeBlockService,
+  depService,
+  dataSourceService,
+  keybindingService,
+  stageOverlayService,
+};
+
+initServiceEvents(props, emit, services);
+initServiceState(props, services);
+keybindingService.register(keybindingConfig);
+keybindingService.registerEl('global');
+
+const stageOptions = {
+  runtimeUrl: props.runtimeUrl,
+  autoScrollIntoView: props.autoScrollIntoView,
+  render: props.render,
+  moveableOptions: props.moveableOptions,
+  canSelect: props.canSelect,
+  updateDragEl: props.updateDragEl,
+  isContainer: props.isContainer,
+  containerHighlightClassName: props.containerHighlightClassName,
+  containerHighlightDuration: props.containerHighlightDuration,
+  containerHighlightType: props.containerHighlightType,
+  disabledDragStart: props.disabledDragStart,
+  renderType: props.renderType,
+  guidesOptions: props.guidesOptions,
+  disabledMultiSelect: props.disabledMultiSelect,
+};
+
+stageOverlayService.set('stageOptions', stageOptions);
+
+provide('services', services);
+
+provide('codeOptions', props.codeOptions);
+provide('stageOptions', stageOptions);
+
+provide<EventBus>('eventBus', new EventEmitter());
+
+defineExpose(services);
+</script>

package/src/components/CodeBlockEditor.vue

@@ -0,0 +1,268 @@
+<template>
+  <!-- 代码块编辑区 -->
+  <FloatingBox
+    v-model:visible="boxVisible"
+    v-model:width="width"
+    v-model:height="codeBlockEditorHeight"
+    :title="content.name ? `${disabled ? '查看' : '编辑'}${content.name}` : '新增代码'"
+    :position="boxPosition"
+    :before-close="beforeClose"
+  >
+    <template #body>
+      <MFormBox
+        class="m-editor-code-block-editor"
+        ref="formBox"
+        label-width="80px"
+        :close-on-press-escape="false"
+        :title="content.name"
+        :config="functionConfig"
+        :values="content"
+        :disabled="disabled"
+        style="height: 100%"
+        @change="changeHandler"
+        @submit="submitForm"
+        @error="errorHandler"
+        @closed="closedHandler"
+      >
+        <template #left>
+          <TMagicButton v-if="!disabled" type="primary" link @click="difVisible = true">查看修改</TMagicButton>
+        </template>
+      </MFormBox>
+    </template>
+  </FloatingBox>
+
+  <Teleport to="body">
+    <TMagicDialog title="查看修改" v-model="difVisible" fullscreen>
+      <div style="display: flex; margin-bottom: 10px">
+        <div style="flex: 1"><TMagicTag size="small" type="info">修改前</TMagicTag></div>
+        <div style="flex: 1"><TMagicTag size="small" type="success">修改后</TMagicTag></div>
+      </div>
+
+      <CodeEditor
+        v-if="difVisible"
+        ref="magicVsEditor"
+        type="diff"
+        language="json"
+        :initValues="content.content"
+        :modifiedValues="formBox?.form?.values.content"
+        :style="`height: ${windowRect.height - 150}px`"
+      ></CodeEditor>
+
+      <template #footer>
+        <span class="dialog-footer">
+          <TMagicButton size="small" @click="difVisible = false">取消</TMagicButton>
+          <TMagicButton size="small" type="primary" @click="diffChange">确定</TMagicButton>
+        </span>
+      </template>
+    </TMagicDialog>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, Ref, ref } from 'vue';
+
+import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
+import { ColumnConfig, FormConfig, FormState, MFormBox } from '@tmagic/form';
+import type { CodeBlockContent } from '@tmagic/schema';
+
+import FloatingBox from '@editor/components/FloatingBox.vue';
+import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
+import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
+import { useWindowRect } from '@editor/hooks/use-window-rect';
+import CodeEditor from '@editor/layouts/CodeEditor.vue';
+import type { Services } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
+
+defineOptions({
+  name: 'MEditorCodeBlockEditor',
+});
+
+const width = defineModel<number>('width', { default: 670 });
+const boxVisible = defineModel<boolean>('visible', { default: false });
+
+const props = defineProps<{
+  content: CodeBlockContent;
+  disabled?: boolean;
+  isDataSource?: boolean;
+  dataSourceType?: string;
+}>();
+
+const emit = defineEmits<{
+  submit: [values: CodeBlockContent];
+}>();
+
+const services = inject<Services>('services');
+
+const { height: codeBlockEditorHeight } = useEditorContentHeight();
+
+const difVisible = ref(false);
+const { rect: windowRect } = useWindowRect();
+
+const magicVsEditor = ref<InstanceType<typeof CodeEditor>>();
+
+const diffChange = () => {
+  if (!magicVsEditor.value || !formBox.value?.form) {
+    return;
+  }
+
+  formBox.value.form.values.content = magicVsEditor.value.getEditorValue();
+
+  difVisible.value = false;
+};
+
+const defaultParamColConfig: ColumnConfig = {
+  type: 'row',
+  label: '参数类型',
+  items: [
+    {
+      text: '参数类型',
+      labelWidth: '70px',
+      type: 'select',
+      name: 'type',
+      options: [
+        {
+          text: '数字',
+          label: '数字',
+          value: 'number',
+        },
+        {
+          text: '字符串',
+          label: '字符串',
+          value: 'text',
+        },
+        {
+          text: '组件',
+          label: '组件',
+          value: 'ui-select',
+        },
+      ],
+    },
+  ],
+};
+
+const functionConfig = computed<FormConfig>(() => [
+  {
+    text: '名称',
+    name: 'name',
+    rules: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  },
+  {
+    text: '描述',
+    name: 'desc',
+  },
+  {
+    text: '执行时机',
+    name: 'timing',
+    type: 'select',
+    options: () => {
+      const options = [
+        { text: '初始化前', value: 'beforeInit' },
+        { text: '初始化后', value: 'afterInit' },
+      ];
+      if (props.dataSourceType !== 'base') {
+        options.push({ text: '请求前', value: 'beforeRequest' });
+        options.push({ text: '请求后', value: 'afterRequest' });
+      }
+      return options;
+    },
+    display: () => props.isDataSource,
+  },
+  {
+    type: 'table',
+    border: true,
+    text: '参数',
+    enableFullscreen: false,
+    enableToggleMode: false,
+    name: 'params',
+    dropSort: false,
+    items: [
+      {
+        type: 'text',
+        label: '参数名',
+        name: 'name',
+      },
+      {
+        type: 'text',
+        label: '描述',
+        name: 'extra',
+      },
+      services?.codeBlockService.getParamsColConfig() || defaultParamColConfig,
+    ],
+  },
+  {
+    name: 'content',
+    type: 'vs-code',
+    options: inject('codeOptions', {}),
+    height: '500px',
+    onChange: (formState: FormState | undefined, code: string) => {
+      try {
+        // 检测js代码是否存在语法错误
+        getConfig('parseDSL')(code);
+
+        return code;
+      } catch (error: any) {
+        tMagicMessage.error(error.message);
+
+        throw error;
+      }
+    },
+  },
+]);
+
+const submitForm = (values: CodeBlockContent) => {
+  changedValue.value = undefined;
+  emit('submit', values);
+};
+
+const errorHandler = (error: any) => {
+  tMagicMessage.error(error.message);
+};
+
+const formBox = ref<InstanceType<typeof MFormBox>>();
+
+const changedValue = ref<CodeBlockContent>();
+const changeHandler = (values: CodeBlockContent) => {
+  changedValue.value = values;
+};
+
+const beforeClose = (done: (cancel?: boolean) => void) => {
+  if (!changedValue.value) {
+    done();
+    return;
+  }
+  tMagicMessageBox
+    .confirm('当前代码块已修改，是否保存？', '提示', {
+      confirmButtonText: '保存并关闭',
+      cancelButtonText: '不保存并关闭',
+      type: 'warning',
+      distinguishCancelAndClose: true,
+    })
+    .then(() => {
+      changedValue.value && submitForm(changedValue.value);
+      done();
+    })
+    .catch((action: string) => {
+      if (action === 'cancel') {
+      }
+      done(action === 'cancel');
+    });
+};
+
+const closedHandler = () => {
+  changedValue.value = undefined;
+};
+
+const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
+const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+
+defineExpose({
+  async show() {
+    calcBoxPosition();
+    boxVisible.value = true;
+  },
+
+  async hide() {
+    boxVisible.value = false;
+  },
+});
+</script>

package/src/components/CodeParams.vue

@@ -0,0 +1,60 @@
+<template>
+  <MForm
+    ref="form"
+    :config="codeParamsConfig"
+    :init-values="model"
+    :disabled="disabled"
+    :size="size"
+    :watch-props="false"
+    @change="onParamsChangeHandler"
+  ></MForm>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { FormConfig, MForm } from '@tmagic/form';
+
+import type { CodeParamStatement } from '@editor/type';
+import { error } from '@editor/utils';
+
+defineOptions({
+  name: 'MEditorCodeParams',
+});
+
+const props = defineProps<{
+  model: any;
+  size?: 'small' | 'default' | 'large';
+  disabled?: boolean;
+  name: string;
+  paramsConfig: CodeParamStatement[];
+}>();
+
+const emit = defineEmits(['change']);
+
+const form = ref<InstanceType<typeof MForm>>();
+
+const getFormConfig = (items: FormConfig = []) => [
+  {
+    type: 'fieldset',
+    items,
+    legend: '参数',
+    labelWidth: '70px',
+    name: props.name,
+  },
+];
+
+const codeParamsConfig = computed(() => getFormConfig(props.paramsConfig));
+
+/**
+ * 参数值修改更新
+ */
+const onParamsChangeHandler = async () => {
+  try {
+    const value = await form.value?.submitForm(true);
+    emit('change', value);
+  } catch (e) {
+    error(e);
+  }
+};
+</script>