@tmagic/editor 1.3.0-alpha.13 → 1.3.0-alpha.14

package/src/fields/DataSourceMethodSelect.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="m-fields-data-source-method-select">
+    <div class="data-source-method-select-container">
+      <m-form-container
+        class="select"
+        :config="cascaderConfig"
+        :model="model"
+        @change="onChangeHandler"
+      ></m-form-container>
+      <Icon v-if="model[name]" class="icon" :icon="!disabled ? Edit : View" @click="editCodeHandler"></Icon>
+    </div>
+
+    <CodeParams
+      v-if="paramsConfig.length"
+      name="params"
+      :model="model"
+      :size="size"
+      :disabled="disabled"
+      :params-config="paramsConfig"
+      @change="onChangeHandler"
+    ></CodeParams>
+
+    <CodeBlockEditor
+      ref="codeBlockEditor"
+      v-if="codeConfig"
+      :disabled="disabled"
+      :content="codeConfig"
+      @submit="submitCodeBlockHandler"
+    ></CodeBlockEditor>
+  </div>
+</template>
+
+<script lang="ts" setup name="">
+import { computed, inject, ref } from 'vue';
+import { Edit, View } from '@element-plus/icons-vue';
+
+import { createValues } from '@tmagic/form';
+import type { CodeBlockContent, Id } from '@tmagic/schema';
+
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import CodeParams from '@editor/components/CodeParams.vue';
+import Icon from '@editor/components/Icon.vue';
+import type { CodeParamStatement, DataSourceMethodSelectConfig, Services } from '@editor/type';
+import { useDataSourceMethod } from '@editor/utils/use-data-source-method';
+
+defineOptions({
+  name: 'MEditorDataSourceMethodSelect',
+});
+
+const services = inject<Services>('services');
+const emit = defineEmits(['change']);
+
+const props = withDefaults(
+  defineProps<{
+    config: DataSourceMethodSelectConfig;
+    model: any;
+    lastValues?: any;
+    prop: string;
+    name: string;
+    disabled?: boolean;
+    size: 'small' | 'default' | 'large';
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
+
+const getParamItemsConfig = ([dataSourceId, medthodName]: [Id, string] = ['', '']): CodeParamStatement[] => {
+  if (!dataSourceId) return [];
+
+  const paramStatements = dataSources.value
+    ?.find((item) => item.id === dataSourceId)
+    ?.methods?.find((item) => item.name === medthodName)?.params;
+
+  if (!paramStatements) return [];
+
+  return paramStatements.map((paramState: CodeParamStatement) => ({
+    labelWidth: '100px',
+    text: paramState.name,
+    ...paramState,
+  }));
+};
+
+const paramsConfig = ref<CodeParamStatement[]>(getParamItemsConfig(props.model.dataSourceMethod));
+
+const setParamsConfig = (dataSourceMethod: [Id, string], formState: any = {}) => {
+  // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
+  paramsConfig.value = dataSourceMethod ? getParamItemsConfig(dataSourceMethod) : [];
+
+  if (paramsConfig.value.length) {
+    props.model.params = createValues(formState, paramsConfig.value, {}, props.model.params);
+  } else {
+    props.model.params = {};
+  }
+};
+
+const cascaderConfig = {
+  type: 'cascader',
+  text: '数据源方法',
+  name: props.name,
+  labelWidth: '80px',
+  options: () =>
+    dataSources.value
+      ?.filter((ds) => ds.methods?.length)
+      ?.map((ds) => ({
+        label: `${ds.title}（${ds.id}）`,
+        value: ds.id,
+        children: ds.methods?.map((method) => ({
+          label: method.name,
+          value: method.name,
+        })),
+      })) || [],
+  onChange: (formState: any, dataSourceMethod: [Id, string]) => {
+    setParamsConfig(dataSourceMethod, formState);
+
+    return dataSourceMethod;
+  },
+};
+
+/**
+ * 参数值修改更新
+ */
+const onChangeHandler = (value: any) => {
+  props.model.params = value.params;
+  emit('change', props.model);
+};
+
+const { codeBlockEditor, codeConfig, editCode, submitCode } = useDataSourceMethod();
+
+const editCodeHandler = () => {
+  const [id, name] = props.model[props.name];
+
+  const dataSource = services?.dataSourceService.getDataSourceById(id);
+
+  if (!dataSource) return;
+
+  editCode(dataSource, name);
+
+  setParamsConfig([id, name]);
+};
+
+const submitCodeBlockHandler = (value: CodeBlockContent) => {
+  submitCode(value);
+};
+</script>

package/src/fields/DataSourceMethods.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="m-editor-data-source-methods">
+    <MagicTable :data="model[name]" :columns="methodColumns"></MagicTable>
+
+    <div class="m-editor-data-source-methods-footer">
+      <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="createCodeHandler"
+        >添加</TMagicButton
+      >
+    </div>
+
+    <CodeBlockEditor
+      ref="codeBlockEditor"
+      v-if="codeConfig"
+      :disabled="disabled"
+      :content="codeConfig"
+      @submit="submitCodeHandler"
+    ></CodeBlockEditor>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TMagicButton } from '@tmagic/design';
+import type { CodeBlockContent } from '@tmagic/schema';
+import { MagicTable } from '@tmagic/table';
+
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import { useDataSourceMethod } from '@editor/utils/use-data-source-method';
+
+import { CodeParamStatement } from '..';
+
+defineOptions({
+  name: 'MEditorDataSourceMethods',
+});
+
+const props = withDefaults(
+  defineProps<{
+    config: {
+      type: 'data-source-methods';
+    };
+    model: any;
+    prop: string;
+    lastValues?: any;
+    disabled: boolean;
+    name: string;
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits(['change']);
+
+const { codeConfig, codeBlockEditor, createCode, editCode, deleteCode, submitCode } = useDataSourceMethod();
+
+const methodColumns = [
+  {
+    label: '名称',
+    prop: 'name',
+  },
+  {
+    label: '注释',
+    prop: 'desc',
+  },
+  {
+    label: '参数',
+    prop: 'params',
+    formatter: (params: CodeParamStatement[]) => params.map((item) => item.name).join(', '),
+  },
+  {
+    label: '操作',
+    fixed: 'right',
+    actions: [
+      {
+        text: '编辑',
+        handler: (row: CodeBlockContent) => {
+          editCode(props.model, row.name);
+          emit('change', props.model[props.name]);
+        },
+      },
+      {
+        text: '删除',
+        buttonType: 'danger',
+        handler: (row: CodeBlockContent) => {
+          deleteCode(props.model, row.name);
+          emit('change', props.model[props.name]);
+        },
+      },
+    ],
+  },
+];
+
+const createCodeHandler = () => {
+  createCode(props.model);
+
+  emit('change', props.model[props.name]);
+};
+
+const submitCodeHandler = (values: CodeBlockContent) => {
+  submitCode(values);
+
+  emit('change', props.model[props.name]);
+};
+</script>

package/src/fields/EventSelect.vue

@@ -42,7 +42,7 @@ import { TMagicButton } from '@tmagic/design';
 import { FormState } from '@tmagic/form';
 import { ActionType } from '@tmagic/schema';
 
-import type { EventSelectConfig, Services } from '@editor/type';
+import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
 
 defineOptions({
   name: 'MEditorEventSelect',
@@ -81,7 +81,7 @@ const actionTypeConfig = computed(() => {
   const defaultActionTypeConfig = {
     name: 'actionType',
     text: '联动类型',
-    labelWidth: '70px',
+    labelWidth: '80px',
     type: 'select',
     defaultValue: ActionType.COMP,
     options: () => [
@@ -93,8 +93,15 @@ const actionTypeConfig = computed(() => {
       {
         text: '代码',
         label: '代码',
+        disabled: !Object.keys(services?.codeBlockService.getCodeDsl() || {}).length,
         value: ActionType.CODE,
       },
+      {
+        text: '数据源',
+        label: '数据源',
+        disabled: !services?.dataSourceService.get('dataSources')?.filter((ds) => ds.methods?.length).length,
+        value: ActionType.DATA_SOURCE,
+      },
     ],
   };
   return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
@@ -105,7 +112,7 @@ const targetCompConfig = computed(() => {
   const defaultTargetCompConfig = {
     name: 'to',
     text: '联动组件',
-    labelWidth: '70px',
+    labelWidth: '80px',
     type: 'ui-select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
   };
@@ -117,7 +124,7 @@ const compActionConfig = computed(() => {
   const defaultCompActionConfig = {
     name: 'method',
     text: '动作',
-    labelWidth: '70px',
+    labelWidth: '80px',
     type: 'select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
     options: (mForm: FormState, { model }: any) => {
@@ -135,14 +142,27 @@ const compActionConfig = computed(() => {
 
 // 代码联动配置
 const codeActionConfig = computed(() => {
-  const defaultCodeActionConfig = {
+  const defaultCodeActionConfig: CodeSelectColConfig = {
     type: 'code-select-col',
     labelWidth: 0,
-    display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.CODE,
+    name: 'codeId',
+    disabled: () => !services?.codeBlockService.getEditStatus(),
+    display: (mForm, { model }) => model.actionType === ActionType.CODE,
   };
   return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
 });
 
+// 数据源联动配置
+const dataSourceActionConfig = computed(() => {
+  const defaultDataSourceActionConfig: DataSourceMethodSelectConfig = {
+    type: 'data-source-method-select',
+    name: 'dataSourceMethod',
+    labelWidth: 0,
+    display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE,
+  };
+  return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
+});
+
 // 兼容旧的数据格式
 const tableConfig = computed(() => ({
   type: 'table',
@@ -188,7 +208,13 @@ const actionsConfig = computed(() => ({
       name: 'actions',
       expandAll: true,
       enableToggleMode: false,
-      items: [actionTypeConfig.value, targetCompConfig.value, compActionConfig.value, codeActionConfig.value],
+      items: [
+        actionTypeConfig.value,
+        targetCompConfig.value,
+        compActionConfig.value,
+        codeActionConfig.value,
+        dataSourceActionConfig.value,
+      ],
     },
   ],
 }));

package/src/icons/CodeIcon.vue

@@ -1,7 +1,5 @@
 <template>
-  <!-- 代码icon，cdn链接：https://cloudcache.tencent-cloud.com/qcloud/ui/static/government/0d463ed5-6407-4498-8865-3d05b5e70115.svg -->
   <svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
     <defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs>
     <g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
       <g id="03图标" transform="translate(-561.000000, -2356.000000)">

package/src/index.ts

@@ -23,6 +23,8 @@ import CodeSelect from './fields/CodeSelect.vue';
 import CodeSelectCol from './fields/CodeSelectCol.vue';
 import DataSourceFields from './fields/DataSourceFields.vue';
 import DataSourceInput from './fields/DataSourceInput.vue';
+import DataSourceMethods from './fields/DataSourceMethods.vue';
+import DataSourceMethodSelect from './fields/DataSourceMethodSelect.vue';
 import DataSourceSelect from './fields/DataSourceSelect.vue';
 import EventSelect from './fields/EventSelect.vue';
 import KeyValue from './fields/KeyValue.vue';
@@ -53,11 +55,14 @@ export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
 export { default as CodeSelect } from './fields/CodeSelect.vue';
 export { default as CodeSelectCol } from './fields/CodeSelectCol.vue';
 export { default as DataSourceFields } from './fields/DataSourceFields.vue';
+export { default as DataSourceMethods } from './fields/DataSourceMethods.vue';
 export { default as DataSourceInput } from './fields/DataSourceInput.vue';
 export { default as DataSourceSelect } from './fields/DataSourceSelect.vue';
+export { default as DataSourceMethodSelect } from './fields/DataSourceMethodSelect.vue';
 export { default as EventSelect } from './fields/EventSelect.vue';
 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 PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';
@@ -65,6 +70,7 @@ export { default as Icon } from './components/Icon.vue';
 export { default as LayoutContainer } from './components/SplitView.vue';
 export { default as SplitView } from './components/SplitView.vue';
 export { default as Resizer } from './components/Resizer.vue';
+export { default as CodeBlockEditor } from './components/CodeBlockEditor.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // eslint-disable-next-line no-eval
@@ -90,5 +96,7 @@ export default {
     app.component('m-fields-key-value', KeyValue);
     app.component('m-fields-data-source-input', DataSourceInput);
     app.component('m-fields-data-source-select', DataSourceSelect);
+    app.component('m-fields-data-source-methods', DataSourceMethods);
+    app.component('m-fields-data-source-method-select', DataSourceMethodSelect);
   },
 };

package/src/layouts/CodeEditor.vue

@@ -1,13 +1,32 @@
 <template>
-  <div ref="codeEditor" class="magic-code-editor"></div>
+  <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%'"
+      >
+        <TMagicButton
+          class="magic-code-editor-full-screen-icon"
+          circle
+          size="small"
+          :icon="FullScreen"
+          @click="fullScreenHandler"
+        ></TMagicButton>
+        <div ref="codeEditor" class="magic-code-editor-content"></div>
+      </div>
+    </Teleport>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
+import { TMagicButton } from '@tmagic/design';
+
 defineOptions({
   name: 'MEditorCodeEditor',
 });
@@ -21,6 +40,7 @@ const props = withDefaults(
     options?: {
       [key: string]: any;
     };
+    height?: string;
     autoSave?: boolean;
   }>(),
   {
@@ -155,6 +175,17 @@ onUnmounted(() => {
   resizeObserver.disconnect();
 });
 
+const fullScreen = ref(false);
+const fullScreenHandler = () => {
+  fullScreen.value = !fullScreen.value;
+  setTimeout(() => {
+    vsEditor?.focus();
+    vsEditor?.layout();
+    vsDiffEditor?.focus();
+    vsDiffEditor?.layout();
+  });
+};
+
 defineExpose({
   values,
 

package/src/layouts/Framework.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor">
+  <div class="m-editor" ref="content">
     <slot name="header"></slot>
 
     <slot name="nav"></slot>
@@ -67,6 +67,8 @@ const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
+const content = ref<HTMLDivElement>();
+
 const root = computed(() => editorService?.get('root'));
 
 const pageLength = computed(() => editorService?.get('pageLength') || 0);
@@ -91,13 +93,15 @@ watch(
 
     columnWidth.value.left = left;
 
+    const container = content.value || document.body;
+
     if (length <= 0) {
       columnWidth.value.right = undefined;
-      columnWidth.value.center = globalThis.document.body.clientWidth - left;
+      columnWidth.value.center = container.clientWidth - left;
     } else {
       const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
       columnWidth.value.right = right;
-      columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
+      columnWidth.value.center = container.clientWidth - left - right;
     }
 
     uiService?.set('columnWidth', columnWidth.value as GetColumnWidth);

package/src/layouts/sidebar/Sidebar.vue

@@ -58,14 +58,6 @@
           <component v-else-if="config.slots?.codeBlockPanelTool" :is="config.slots.codeBlockPanelTool" />
         </template>
 
-        <template
-          #code-block-edit-panel-header="{ id }"
-          v-if="config.$key === 'code-block' || config.slots?.codeBlockEditPanelHeader"
-        >
-          <slot v-if="config.$key === 'code-block'" name="code-block-edit-panel-header" :id="id"></slot>
-          <component v-else-if="config.slots?.codeBlockEditPanelHeader" :is="config.slots.codeBlockEditPanelHeader" />
-        </template>
-
         <template
           #layer-node-content="{ data: nodeData, node }"
           v-if="config.$key === 'layer' || config.slots?.layerNodeContent"
@@ -93,7 +85,7 @@ 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 CodeBlockListPanel from './code-block/CodeBlockListPanel.vue';
 import DataSourceListPanel from './data-source/DataSourceListPanel.vue';
 import ComponentListPanel from './ComponentListPanel.vue';
 import LayerPanel from './LayerPanel.vue';
@@ -143,7 +135,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
       type: 'component',
       icon: EditPen,
       text: '代码编辑',
-      component: CodeBlockList,
+      component: CodeBlockListPanel,
       slots: {},
     },
     'data-source': {