@tmagic/editor 1.7.0-beta.4 → 1.7.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0-beta.4",
+  "version": "1.7.0",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -57,11 +57,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.7.0-beta.4",
-    "@tmagic/form": "1.7.0-beta.4",
-    "@tmagic/table": "1.7.0-beta.4",
-    "@tmagic/stage": "1.7.0-beta.4",
-    "@tmagic/utils": "1.7.0-beta.4"
+    "@tmagic/design": "1.7.0",
+    "@tmagic/form": "1.7.0",
+    "@tmagic/table": "1.7.0",
+    "@tmagic/utils": "1.7.0",
+    "@tmagic/stage": "1.7.0"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -75,7 +75,7 @@
     "monaco-editor": "^0.48.0",
     "typescript": "^5.9.3",
     "vue": "^3.5.24",
-    "@tmagic/core": "1.7.0-beta.4"
+    "@tmagic/core": "1.7.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/components/CodeBlockEditor.vue

@@ -201,7 +201,7 @@ const functionConfig = computed<FormConfig>(() => [
     name: 'content',
     type: 'vs-code',
     options: inject('codeOptions', {}),
-    height: '500px',
+    autosize: { minRows: 10, maxRows: 30 },
     onChange: (formState: FormState | undefined, code: string) => {
       try {
         // 检测js代码是否存在语法错误

package/src/fields/Code.vue

@@ -7,6 +7,7 @@
       ...config.options,
       readOnly: disabled,
     }"
+    :autosize="config.autosize"
     :parse="config.parse"
     @save="save"
   ></MagicCodeEditor>

package/src/fields/DataSourceFields.vue

@@ -233,7 +233,6 @@ const dataSourceFieldsConfig: FormConfig = [
   {
     name: 'defaultValue',
     text: '默认值',
-    height: '200px',
     parse: true,
     type: (mForm: FormState | undefined, { model }: any) => {
       if (model.type === 'number') return 'number';
@@ -242,6 +241,7 @@ const dataSourceFieldsConfig: FormConfig = [
 
       return 'vs-code';
     },
+    autosize: { minRows: 1, maxRows: 30 },
     options: [
       { text: 'true', value: true },
       { text: 'false', value: false },
@@ -267,7 +267,7 @@ const jsonFromConfig: FormConfig = [
     type: 'vs-code',
     labelWidth: '0',
     language: 'json',
-    height: '600px',
+    autosize: { minRows: 30, maxRows: 50 },
     options: inject('codeOptions', {}),
   },
 ];

package/src/fields/DataSourceMocks.vue

@@ -96,7 +96,7 @@ const formConfig: FormConfig = [
     language: 'json',
     options: inject('codeOptions', {}),
     defaultValue: '{}',
-    height: '400px',
+    autosize: { minRows: 30, maxRows: 50 },
     onChange: (formState: FormState | undefined, v: string | any) => {
       if (typeof v !== 'string') return v;
       return JSON.parse(v);

package/src/fields/KeyValue.vue

@@ -37,12 +37,15 @@
 
     <MagicCodeEditor
       v-if="config.advanced && showCode"
-      height="200px"
       :init-values="model[name]"
       language="javascript"
       :options="{
         readOnly: disabled,
       }"
+      :autosize="{
+        minRows: 1,
+        maxRows: 20,
+      }"
       :parse="true"
       @save="save"
     ></MagicCodeEditor>

package/src/index.ts

@@ -92,6 +92,7 @@ export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
 export { default as CodeBlockListPanel } from './layouts/sidebar/code-block/CodeBlockListPanel.vue';
 export { default as DataSourceConfigPanel } from './layouts/sidebar/data-source/DataSourceConfigPanel.vue';
+export { default as DataSourceAddButton } from './layouts/sidebar/data-source/DataSourceAddButton.vue';
 export { default as PropsPanel } from './layouts/props-panel/PropsPanel.vue';
 export { default as PropsFormPanel } from './layouts/props-panel/FormPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';

package/src/layouts/CodeEditor.vue

@@ -1,10 +1,7 @@
 <template>
   <div :class="`magic-code-editor`">
     <Teleport to="body" :disabled="!fullScreen">
-      <div
-        :class="`magic-code-editor-wrapper${fullScreen ? ' full-screen' : ''}`"
-        :style="!fullScreen && height ? `height: ${height}` : '100%'"
-      >
+      <div :class="{ 'magic-code-editor-wrapper': true, 'full-screen': fullScreen }" :style="{ height: computeHeight }">
         <TMagicButton
           v-if="!disabledFullScreen"
           class="magic-code-editor-full-screen-icon"
@@ -20,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 import serialize from 'serialize-javascript';
@@ -46,6 +43,10 @@ const props = withDefaults(
     autoSave?: boolean;
     parse?: boolean;
     disabledFullScreen?: boolean;
+    autosize?: {
+      minRows?: number;
+      maxRows?: number;
+    };
   }>(),
   {
     initValues: '',
@@ -61,6 +62,58 @@ const props = withDefaults(
 
 const emit = defineEmits(['initd', 'save']);
 
+const autoHeight = ref<string>('');
+
+const computeHeight = computed(() => {
+  if (fullScreen.value) {
+    return '100%';
+  }
+
+  if (props.height) {
+    return props.height;
+  }
+
+  if (props.autosize) {
+    return autoHeight.value;
+  }
+
+  return '100%';
+});
+
+const setAutoHeight = (v = '') => {
+  let lines = Math.max(v.split('\n').length, props.autosize?.minRows || 1);
+  if (v) {
+    if (props.autosize?.maxRows) {
+      lines = Math.min(lines, props.autosize.maxRows);
+    }
+  }
+
+  // 获取编辑器实际行高，如果编辑器还未初始化则使用默认值
+  let lineHeight = 20;
+  if (vsEditor) {
+    const editorOptions = vsEditor.getOptions();
+    lineHeight = editorOptions.get(monaco.editor.EditorOption.lineHeight) || 20;
+  }
+
+  const newHeight = `${lines * lineHeight + 10}px`;
+
+  // 只有当高度真正改变时才更新
+  if (autoHeight.value !== newHeight) {
+    autoHeight.value = newHeight;
+
+    // 高度变化后需要重新布局编辑器
+    nextTick(() => {
+      vsEditor?.layout();
+
+      // 确保内容在可视区域内，滚动到顶部
+      if (vsEditor) {
+        vsEditor.setScrollTop(0);
+        vsEditor.revealLine(1);
+      }
+    });
+  }
+};
+
 const toString = (v: string | any, language: string): string => {
   let value: string;
   if (typeof v !== 'string') {
@@ -110,6 +163,8 @@ const resizeObserver = new globalThis.ResizeObserver(
 const setEditorValue = (v: string | any, m: string | any) => {
   values.value = toString(v, props.language.toLocaleLowerCase());
 
+  setAutoHeight(values.value);
+
   if (props.type === 'diff') {
     const originalModel = monaco.editor.createModel(values.value, 'text/javascript');
     const modifiedModel = monaco.editor.createModel(toString(m, props.language), 'text/javascript');
@@ -147,6 +202,7 @@ const handleKeyDown = (e: KeyboardEvent) => {
     emit('save', props.parse ? parseCode(newValue, props.language) : newValue);
   }
 };
+
 const init = async () => {
   if (!codeEditorEl.value) return;
 
@@ -163,8 +219,24 @@ const init = async () => {
 
   if (props.type === 'diff') {
     vsDiffEditor = getEditorConfig('customCreateMonacoDiffEditor')(monaco, codeEditorEl.value, options);
+
+    // 监听diff编辑器内容变化
+    vsDiffEditor.getModifiedEditor().onDidChangeModelContent(() => {
+      // 如果使用 autosize，内容变化时重新计算高度
+      if (props.autosize) {
+        setAutoHeight(getEditorValue());
+      }
+    });
   } else {
     vsEditor = getEditorConfig('customCreateMonacoEditor')(monaco, codeEditorEl.value, options);
+
+    // 监听编辑器内容变化
+    vsEditor.onDidChangeModelContent(() => {
+      // 如果使用 autosize，内容变化时重新计算高度
+      if (props.autosize) {
+        setAutoHeight(getEditorValue());
+      }
+    });
   }
 
   setEditorValue(props.initValues, props.modifiedValues);

package/src/layouts/sidebar/data-source/DataSourceAddButton.vue

@@ -0,0 +1,46 @@
+<template>
+  <TMagicPopover
+    placement="right"
+    trigger="hover"
+    popper-class="data-source-list-panel-add-menu"
+    :destroy-on-close="true"
+  >
+    <template #reference>
+      <TMagicButton v-bind="addButtonConfig || {}">{{ addButtonText || '' }}</TMagicButton>
+    </template>
+    <ToolButton
+      v-for="(item, index) in datasourceTypeList"
+      :data="{
+        type: 'button',
+        text: item.text,
+        handler: () => {
+          $emit('add', item.type);
+        },
+      }"
+      :key="index"
+    ></ToolButton>
+  </TMagicPopover>
+</template>
+
+<script setup lang="ts">
+import { type ButtonProps, TMagicButton, TMagicPopover } from '@tmagic/design';
+
+import ToolButton from '@editor/components/ToolButton.vue';
+
+defineOptions({
+  name: 'MEditorDataSourceAddButton',
+});
+
+defineProps<{
+  datasourceTypeList: {
+    text: string;
+    type: string;
+  }[];
+  addButtonConfig?: ButtonProps;
+  addButtonText?: string;
+}>();
+
+defineEmits<{
+  add: [type: string];
+}>();
+</script>

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -2,28 +2,13 @@
   <TMagicScrollbar class="data-source-list-panel m-editor-layer-panel">
     <div class="search-wrapper">
       <SearchInput @search="filterTextChangeHandler"></SearchInput>
-      <TMagicPopover
+      <DataSourceAddButton
         v-if="editable"
-        placement="right"
-        trigger="hover"
-        popper-class="data-source-list-panel-add-menu"
-        :destroy-on-close="true"
-      >
-        <template #reference>
-          <TMagicButton type="primary" size="small">新增</TMagicButton>
-        </template>
-        <ToolButton
-          v-for="(item, index) in datasourceTypeList"
-          :data="{
-            type: 'button',
-            text: item.text,
-            handler: () => {
-              addHandler(item.type);
-            },
-          }"
-          :key="index"
-        ></ToolButton>
-      </TMagicPopover>
+        add-button-text="新增"
+        :add-button-config="{ type: 'primary', size: 'small' }"
+        :datasource-type-list="datasourceTypeList"
+        @add="addHandler"
+      ></DataSourceAddButton>
 
       <slot name="data-source-panel-search"></slot>
     </div>
@@ -63,15 +48,15 @@
 import { computed, inject, useTemplateRef, watch } from 'vue';
 import { mergeWith } from 'lodash-es';
 
-import { TMagicButton, tMagicMessageBox, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
+import { tMagicMessageBox, TMagicScrollbar } from '@tmagic/design';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
-import ToolButton from '@editor/components/ToolButton.vue';
 import { useDataSourceEdit } from '@editor/hooks/use-data-source-edit';
 import { useServices } from '@editor/hooks/use-services';
 import type { CustomContentMenuFunction, DataSourceListSlots, EventBus, MenuButton, MenuComponent } from '@editor/type';
 
+import DataSourceAddButton from './DataSourceAddButton.vue';
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
 import DataSourceList from './DataSourceList.vue';
 import { useContentMenu } from './useContentMenu';

package/src/layouts/sidebar/layer/LayerNodeTool.vue

@@ -1,7 +1,12 @@
 <template>
   <template v-if="data.type !== 'page'">
-    <MIcon v-if="data.visible === false" :icon="Hide" @click.stop="setNodeVisible(true)" title="点击显示"></MIcon>
-    <MIcon v-else :icon="View" @click.stop="setNodeVisible(false)" class="node-lock" title="点击隐藏"></MIcon>
+    <TMagicButton
+      link
+      :type="data.visible === false ? 'primary' : 'default'"
+      :icon="data.visible === false ? Hide : View"
+      :title="data.visible === false ? '点击显示' : '点击隐藏'"
+      @click.stop="setNodeVisible(data.visible === false)"
+    ></TMagicButton>
   </template>
 </template>
 
@@ -9,8 +14,8 @@
 import { Hide, View } from '@element-plus/icons-vue';
 
 import type { MNode } from '@tmagic/core';
+import { TMagicButton } from '@tmagic/design';
 
-import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
 
 const props = defineProps<{

package/src/theme/layer-panel.scss

@@ -5,6 +5,22 @@
 
   .m-editor-tree {
     padding-top: 48px;
+
+    .tree-node-tool {
+      padding-right: 10px;
+
+      .tmagic-design-button + .tmagic-design-button {
+        margin-left: 2px;
+      }
+    }
+
+    .tree-node.selected {
+      .tree-node-tool {
+        .tmagic-design-button {
+          color: #fff;
+        }
+      }
+    }
   }
 
   .search-wrapper {

package/src/utils/data-source/index.ts

@@ -64,7 +64,7 @@ const fillConfig = (config: FormConfig): FormConfig => [
             name: 'beforeRequest',
             type: 'vs-code',
             parse: true,
-            height: '600px',
+            autosize: { minRows: 10, maxRows: 30 },
           },
         ],
       },
@@ -76,7 +76,7 @@ const fillConfig = (config: FormConfig): FormConfig => [
             name: 'afterResponse',
             type: 'vs-code',
             parse: true,
-            height: '600px',
+            autosize: { minRows: 10, maxRows: 30 },
           },
         ],
       },