@tmagic/editor 1.3.0-alpha.2 → 1.3.0-alpha.21

package/types/utils/props.d.ts

@@ -1,4 +1,8 @@
-import { FormConfig, FormState } from '@tmagic/form';
+import type { FormConfig, FormState, TabPaneConfig } from '@tmagic/form';
+export declare const styleTabConfig: TabPaneConfig;
+export declare const eventTabConfig: TabPaneConfig;
+export declare const advancedTabConfig: TabPaneConfig;
+export declare const displayTabConfig: TabPaneConfig;
 /**
  * 统一为组件属性表单加上事件、高级、样式配置
  * @param config 组件属性配置
@@ -6,106 +10,13 @@ import { FormConfig, FormState } from '@tmagic/form';
  */
 export declare const fillConfig: (config?: FormConfig) => {
     type: string;
-    items: ({
+    items: {
+        [x: string]: any;
+        status?: string | undefined;
         title: string;
-        labelWidth: string;
-        items: import("@tmagic/form").ChildConfig[];
-        lazy?: undefined;
-    } | {
-        title: string;
-        labelWidth: string;
-        items: {
-            name: string;
-            items: ({
-                type: string;
-                legend: string;
-                items: ({
-                    name: string;
-                    type: string;
-                    activeValue: string;
-                    inactiveValue: string;
-                    defaultValue: string;
-                    text: string;
-                    disabled?: undefined;
-                } | {
-                    name: string;
-                    text: string;
-                    type?: undefined;
-                    activeValue?: undefined;
-                    inactiveValue?: undefined;
-                    defaultValue?: undefined;
-                    disabled?: undefined;
-                } | {
-                    name: string;
-                    text: string;
-                    disabled: (vm: FormState, { model }: any) => boolean;
-                    type?: undefined;
-                    activeValue?: undefined;
-                    inactiveValue?: undefined;
-                    defaultValue?: undefined;
-                })[];
-                name?: undefined;
-            } | {
-                type: string;
-                legend: string;
-                items: ({
-                    name: string;
-                    text: string;
-                    type?: undefined;
-                    defaultValue?: undefined;
-                    options?: undefined;
-                } | {
-                    name: string;
-                    text: string;
-                    type: string;
-                    defaultValue?: undefined;
-                    options?: undefined;
-                } | {
-                    name: string;
-                    text: string;
-                    type: string;
-                    defaultValue: string;
-                    options: {
-                        text: string;
-                        value: string;
-                    }[];
-                } | {
-                    name: string;
-                    text: string;
-                    defaultValue: string;
-                    type?: undefined;
-                    options?: undefined;
-                })[];
-                name?: undefined;
-            } | {
-                type: string;
-                legend: string;
-                name: string;
-                items: {
-                    name: string;
-                    text: string;
-                }[];
-            })[];
-        }[];
-        lazy?: undefined;
-    } | {
-        title: string;
-        items: {
-            name: string;
-            type: string;
-            labelWidth: number;
-        }[];
-        labelWidth?: undefined;
-        lazy?: undefined;
-    } | {
-        title: string;
-        lazy: boolean;
-        items: {
-            name: string;
-            text: string;
-            labelWidth: string;
-            type: string;
-        }[];
-        labelWidth?: undefined;
-    })[];
+        lazy?: boolean | undefined;
+        labelWidth?: string | undefined;
+        items: FormConfig;
+        onTabClick?: ((mForm: FormState | undefined, tab: any, data: any) => void) | undefined;
+    }[];
 }[];

package/src/components/CodeDraftEditor.vue

@@ -1,144 +0,0 @@
-<template>
-  <div class="m-editor-wrapper" :class="isFullScreen ? 'fullScreen' : 'normal'">
-    <magic-code-editor
-      ref="codeEditor"
-      class="m-editor-container"
-      :init-values="`${codeContent}`"
-      @save="saveCodeDraft"
-      :language="language"
-      :options="codeOptions"
-    ></magic-code-editor>
-    <div class="m-editor-content-bottom" v-if="editable">
-      <TMagicButton type="primary" class="button" @click="toggleFullScreen">
-        {{ isFullScreen ? '退出全屏' : '全屏' }}</TMagicButton
-      >
-      <TMagicButton type="primary" class="button" @click="saveAndClose">确认</TMagicButton>
-      <TMagicButton class="button" @click="close">关闭</TMagicButton>
-    </div>
-    <div class="m-editor-content-bottom" v-else>
-      <TMagicButton type="primary" class="button" @click="toggleFullScreen">
-        {{ isFullScreen ? '退出全屏' : '全屏' }}</TMagicButton
-      >
-      <TMagicButton class="button" @click="close">关闭</TMagicButton>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup name="MEditorCodeDraftEditor">
-import { computed, inject, ref, watchEffect } from 'vue';
-import type * as monaco from 'monaco-editor';
-
-import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
-import { Id } from '@tmagic/schema';
-import { datetimeFormatter } from '@tmagic/utils';
-
-import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
-import type { Services } from '@editor/type';
-
-const props = withDefaults(
-  defineProps<{
-    /** 代码id */
-    id: Id;
-    /** 代码内容 */
-    content: string;
-    /** 是否可编辑 */
-    editable?: boolean;
-    /** 是否自动保存草稿 */
-    autoSaveDraft?: boolean;
-    /** 编辑器参数 */
-    codeOptions?: Object;
-    /** 编辑器语言 */
-    language?: string;
-  }>(),
-  {
-    editable: true,
-    autoSaveDraft: true,
-  },
-);
-const emit = defineEmits(['close', 'saveAndClose']);
-
-const services = inject<Services>('services');
-
-const codeContent = ref<string>('');
-const editorContent = ref<string>('');
-const codeEditor = ref<InstanceType<typeof MagicCodeEditor>>();
-// 原始代码内容
-const originCodeContent = ref<string>('');
-const isFullScreen = ref<boolean>(false);
-
-const codeOptions = computed(() => ({
-  ...props.codeOptions,
-  readOnly: !props.editable,
-}));
-
-watchEffect(() => {
-  codeContent.value = props.content;
-  if (!originCodeContent.value) {
-    // 暂存原始的代码内容
-    originCodeContent.value = codeContent.value;
-  }
-  // 有草稿时展示上次保存的草稿内容
-  const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
-  if (codeDraft) {
-    codeContent.value = codeDraft;
-  }
-});
-
-// 保存草稿
-const saveCodeDraft = async (codeValue: string) => {
-  if (!props.autoSaveDraft) return;
-  if (originCodeContent.value === codeValue) {
-    // 没修改或改回原样 有草稿的话删除草稿
-    services?.codeBlockService.removeCodeDraft(props.id);
-    return;
-  }
-  services?.codeBlockService.setCodeDraft(props.id, codeValue);
-  tMagicMessage.success(`代码草稿成功保存到本地 ${datetimeFormatter(new Date())}`);
-};
-
-// 保存并关闭
-const saveAndClose = (): void => {
-  if (!codeEditor.value || !props.editable) return;
-  // 代码内容
-  editorContent.value = (codeEditor.value.getEditor() as monaco.editor.IStandaloneCodeEditor)?.getValue();
-  emit('saveAndClose', editorContent.value);
-};
-
-// 关闭弹窗
-const close = async (): Promise<void> => {
-  const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
-  if (codeDraft) {
-    try {
-      await tMagicMessageBox.confirm('您有代码修改未保存，是否保存后再关闭？', '提示', {
-        confirmButtonText: '保存并关闭',
-        cancelButtonText: '直接关闭',
-        type: 'warning',
-        distinguishCancelAndClose: true,
-      });
-
-      // 保存之后再关闭
-      saveAndClose();
-    } catch (action: any) {
-      if (action === 'cancel') {
-        // 删除草稿 直接关闭
-        services?.codeBlockService.removeCodeDraft(props.id);
-        emit('close');
-      }
-    }
-  } else {
-    emit('close');
-  }
-};
-
-// 切换全屏
-const toggleFullScreen = (): void => {
-  isFullScreen.value = !isFullScreen.value;
-  if (codeEditor.value) {
-    codeEditor.value.focus();
-  }
-};
-
-defineExpose({
-  saveAndClose,
-  close,
-});
-</script>

package/src/components/FunctionEditor.vue

@@ -1,190 +0,0 @@
-<template>
-  <TMagicCard shadow="never">
-    <template #header>
-      <div class="code-name-wrapper">
-        <div class="code-name-label">代码块名称</div>
-        <TMagicInput class="code-name-input" v-model="codeName" :disabled="!editable" />
-      </div>
-      <div class="code-name-wrapper">
-        <div class="code-name-label">参数</div>
-        <m-form-table
-          style="width: 800px"
-          :config="tableConfig"
-          :model="tableModel"
-          :enableToggleMode="false"
-          name="params"
-          prop="params"
-          size="small"
-        >
-        </m-form-table>
-      </div>
-    </template>
-    <CodeDraftEditor
-      ref="codeDraftEditor"
-      :id="id"
-      :content="codeContent"
-      :editable="editable"
-      :autoSaveDraft="autoSaveDraft"
-      :codeOptions="codeOptions"
-      language="javascript"
-      @saveAndClose="saveAndClose"
-      @close="close"
-    ></CodeDraftEditor>
-  </TMagicCard>
-</template>
-<script lang="ts" setup name="MEditorFunctionEditor">
-import { inject, 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 '@editor/type';
-
-import CodeDraftEditor from './CodeDraftEditor.vue';
-const defaultParamColConfig: ColumnConfig = {
-  type: 'row',
-  label: '参数类型',
-  items: [
-    {
-      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,
-    autoSaveDraft: true,
-  },
-);
-
-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 services = inject<Services>('services');
-
-const codeName = ref<string>('');
-const codeContent = ref<string>('');
-const evalRes = ref(true);
-
-const tableModel = ref<{ params: CodeParam[] }>();
-watchEffect(() => {
-  codeName.value = props.name;
-  codeContent.value = props.content;
-});
-
-const initTableModel = (): void => {
-  const codeDsl = cloneDeep(services?.codeBlockService.getCodeDsl());
-  if (!codeDsl) return;
-  tableModel.value = {
-    params: codeDsl[props.id]?.params || [],
-  };
-};
-
-initTableModel();
-
-// 保存前钩子
-const beforeSave = (codeValue: string): boolean => {
-  try {
-    // eval检测js代码是否存在语法错误
-    // eslint-disable-next-line no-eval
-    eval(codeValue);
-    return true;
-  } catch (e: any) {
-    tMagicMessage.error(e.stack);
-    return false;
-  }
-};
-
-// 保存代码
-const saveCode = async (codeValue: string): Promise<void> => {
-  if (!props.editable) return;
-  evalRes.value = beforeSave(codeValue);
-  if (evalRes.value) {
-    // 存入dsl
-    await services?.codeBlockService.setCodeDslById(props.id, {
-      name: codeName.value,
-      content: codeValue,
-      params: tableModel.value?.params || [],
-    });
-    tMagicMessage.success('代码成功保存到本地');
-    // 删除草稿
-    services?.codeBlockService.removeCodeDraft(props.id);
-  }
-};
-
-// 保存并关闭
-const saveAndClose = async (codeValue: string): Promise<void> => {
-  await saveCode(codeValue);
-  if (evalRes.value) {
-    close();
-  }
-};
-
-// 关闭弹窗
-const close = (): void => {
-  services?.codeBlockService.setCodeEditorShowStatus(false);
-};
-
-const codeDraftEditor = ref<InstanceType<typeof CodeDraftEditor>>();
-
-defineExpose({
-  codeDraftEditor,
-});
-</script>

package/src/layouts/Resizer.vue

@@ -1,32 +0,0 @@
-<template>
-  <span ref="target" class="m-editor-resizer">
-    <slot></slot>
-  </span>
-</template>
-
-<script lang="ts" setup name="MEditorResizer">
-import { onMounted, onUnmounted, ref } from 'vue';
-import Gesto from 'gesto';
-
-const emit = defineEmits(['change']);
-
-const target = ref<HTMLSpanElement>();
-
-let getso: Gesto;
-
-onMounted(() => {
-  if (!target.value) return;
-  getso = new Gesto(target.value, {
-    container: window,
-    pinchOutside: true,
-  }).on('drag', (e) => {
-    if (!target.value) return;
-
-    emit('change', e.deltaX);
-  });
-});
-
-onUnmounted(() => {
-  getso?.unset();
-});
-</script>

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

@@ -1,96 +0,0 @@
-<template>
-  <TMagicDrawer
-    class="code-editor-dialog"
-    :model-value="true"
-    :title="currentTitle"
-    :close-on-press-escape="true"
-    :append-to-body="true"
-    :show-close="false"
-    :close-on-click-modal="true"
-    :size="size"
-    :before-close="handleClose"
-  >
-    <Layout v-model:left="left" :min-left="45" class="code-editor-layout">
-      <!-- 右侧区域 -->
-      <template #center>
-        <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"
-            :content="codeConfig.content"
-            :paramsColConfig="paramsColConfig"
-            :editable="!!editable"
-            :autoSaveDraft="true"
-            :codeOptions="codeOptions"
-          ></FunctionEditor>
-        </div>
-      </template>
-    </Layout>
-  </TMagicDrawer>
-</template>
-
-<script lang="ts" setup name="MEditorCodeBlockEditor">
-import { computed, inject, reactive, ref, watchEffect } from 'vue';
-import { cloneDeep, forIn, isEmpty } from 'lodash-es';
-
-import { TMagicDrawer } from '@tmagic/design';
-import { ColumnConfig } from '@tmagic/form';
-import { CodeBlockContent } from '@tmagic/schema';
-
-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', {});
-
-defineProps<{
-  paramsColConfig?: ColumnConfig;
-}>();
-
-const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
-
-const left = ref(200);
-const currentTitle = ref('');
-// 编辑器当前需展示的代码块内容
-const codeConfig = ref<CodeBlockContent | null>(null);
-// select选择的内容(ListState)
-const state = reactive<ListState>({
-  codeList: [],
-});
-
-const id = computed(() => services?.codeBlockService.getId() || '');
-const editable = computed(() => services?.codeBlockService.getEditStatus());
-// 当前选中组件绑定的代码块id数组
-const selectedIds = computed(() => services?.codeBlockService.getCombineIds() || []);
-
-watchEffect(async () => {
-  codeConfig.value = cloneDeep(await services?.codeBlockService.getCodeContentById(id.value)) || null;
-  if (!codeConfig.value) return;
-  codeConfig.value.content = serializeConfig(codeConfig.value.content);
-});
-
-watchEffect(async () => {
-  const codeDsl = (await services?.codeBlockService.getCodeDslByIds(selectedIds.value)) || null;
-  if (!codeDsl) return;
-  state.codeList = [];
-  forIn(codeDsl, (value: CodeBlockContent, key: string) => {
-    state.codeList.push({
-      id: key,
-      name: value.name,
-    });
-  });
-  currentTitle.value = state.codeList[0]?.name || '';
-});
-
-const functionEditor = ref<InstanceType<typeof FunctionEditor>>();
-
-const handleClose = async () => {
-  // 触发codeDraftEditor组件关闭事件
-  await functionEditor.value?.codeDraftEditor?.close();
-};
-</script>

package/types/components/CodeDraftEditor.vue.d.ts

@@ -1,58 +0,0 @@
-import { Id } from '@tmagic/schema';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    /** 代码id */
-    id: Id;
-    /** 代码内容 */
-    content: string;
-    /** 是否可编辑 */
-    editable?: boolean | undefined;
-    /** 是否自动保存草稿 */
-    autoSaveDraft?: boolean | undefined;
-    /** 编辑器参数 */
-    codeOptions?: Object | undefined;
-    /** 编辑器语言 */
-    language?: string | undefined;
-}>, {
-    editable: boolean;
-    autoSaveDraft: boolean;
-}>, {
-    saveAndClose: () => void;
-    close: () => Promise<void>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "saveAndClose")[], "close" | "saveAndClose", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    /** 代码id */
-    id: Id;
-    /** 代码内容 */
-    content: string;
-    /** 是否可编辑 */
-    editable?: boolean | undefined;
-    /** 是否自动保存草稿 */
-    autoSaveDraft?: boolean | undefined;
-    /** 编辑器参数 */
-    codeOptions?: Object | undefined;
-    /** 编辑器语言 */
-    language?: string | undefined;
-}>, {
-    editable: boolean;
-    autoSaveDraft: boolean;
-}>>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
-    onSaveAndClose?: ((...args: any[]) => any) | undefined;
-}, {
-    editable: boolean;
-    autoSaveDraft: boolean;
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
-        default: D[K];
-    } : P[K];
-};