@tmagic/editor 1.2.15 → 1.3.0-alpha.1

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

@@ -0,0 +1,84 @@
+<template>
+  <TMagicDrawer
+    v-model="visible"
+    :title="title"
+    :close-on-press-escape="true"
+    :append-to-body="true"
+    :show-close="true"
+    :close-on-click-modal="true"
+    :size="size"
+  >
+    <MForm ref="form" :config="dataSourceConfig" :init-values="initValues" @change="changeHandler"></MForm>
+
+    <template #footer>
+      <div>
+        <TMagicButton type="primary" @click="submitHandler">确定</TMagicButton>
+        <TMagicButton @click="hide">关闭</TMagicButton>
+      </div>
+    </template>
+  </TMagicDrawer>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, watchEffect } from 'vue';
+
+import { TMagicButton, TMagicDrawer, tMagicMessage } from '@tmagic/design';
+import { MForm } from '@tmagic/form';
+
+import type { Services } from '@editor/type';
+
+const props = defineProps<{
+  title?: string;
+  values: any;
+}>();
+
+const type = ref('base');
+
+const emit = defineEmits(['submit']);
+
+const services = inject<Services>('services');
+
+const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+
+const dataSourceConfig = computed(() => services?.dataSourceService.getFormConfig(type.value) || []);
+
+const form = ref<InstanceType<typeof MForm>>();
+
+const initValues = ref({});
+
+watchEffect(() => {
+  initValues.value = props.values;
+  type.value = props.values.type || 'base';
+});
+
+const changeHandler = (value: Record<string, any>) => {
+  if (value.type === type.value) {
+    return;
+  }
+  type.value = value.type || 'base';
+  initValues.value = value;
+};
+
+const submitHandler = async () => {
+  try {
+    const values = await form.value?.submitForm();
+    emit('submit', values);
+  } catch (error: any) {
+    tMagicMessage.error(error.message);
+  }
+};
+
+const visible = ref(false);
+
+const hide = () => {
+  visible.value = false;
+};
+
+defineExpose({
+  show() {
+    visible.value = true;
+  },
+
+  hide,
+});
+</script>

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

@@ -0,0 +1,130 @@
+<template>
+  <TMagicScrollbar class="data-source-list-panel m-editor-dep-list-panel">
+    <div class="search-wrapper">
+      <SearchInput @search="filterTextChangeHandler"></SearchInput>
+      <TMagicButton type="primary" size="small" @click="addHandler">新增</TMagicButton>
+    </div>
+
+    <!-- 数据源列表 -->
+    <TMagicTree
+      ref="tree"
+      class="magic-editor-layer-tree"
+      node-key="id"
+      empty-text="暂无代码块"
+      default-expand-all
+      :expand-on-click-node="false"
+      :data="list"
+      :highlight-current="true"
+    >
+      <template #default="{ data }">
+        <div :id="data.id" class="list-container">
+          <div class="list-item">
+            <Icon v-if="data.type === 'code'" class="codeIcon" :icon="Coin"></Icon>
+            <Icon v-if="data.type === 'node'" class="compIcon" :icon="Aim"></Icon>
+            <span class="name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
+              >{{ data.name }}（{{ data.id }}）</span
+            >
+            <!-- 右侧工具栏 -->
+            <div class="right-tool" v-if="data.type === 'code'">
+              <TMagicTooltip effect="dark" content="编辑" placement="bottom">
+                <Icon class="edit-icon" :icon="Edit" @click.stop="editHandler(`${data.id}`)"></Icon>
+              </TMagicTooltip>
+              <TMagicTooltip effect="dark" content="删除" placement="bottom">
+                <Icon :icon="Close" class="edit-icon" @click.stop="removeHandler(`${data.id}`)"></Icon>
+              </TMagicTooltip>
+              <slot name="data-source-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
+            </div>
+          </div>
+        </div>
+      </template>
+    </TMagicTree>
+
+    <DataSourceConfigPanel
+      ref="editDialog"
+      :values="dataSourceValues"
+      :title="typeof dataSourceValues.id !== 'undefined' ? `编辑${dataSourceValues.title}` : '新增'"
+      @submit="submitDataSourceHandler"
+    ></DataSourceConfigPanel>
+  </TMagicScrollbar>
+</template>
+
+<script setup lang="ts" name="MEditorDataSourceListPanel">
+import { computed, inject, ref } from 'vue';
+import { Aim, Close, Coin, Edit } from '@element-plus/icons-vue';
+
+import { TMagicButton, tMagicMessageBox, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
+import { DataSourceSchema } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import SearchInput from '@editor/components/SearchInput.vue';
+import type { Services } from '@editor/type';
+
+import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
+
+const services = inject<Partial<Services>>('services', {});
+const { dataSourceService, depService } = inject<Services>('services') || {};
+
+const list = computed(() =>
+  Object.values(depService?.targets['data-source'] || {}).map((target) => ({
+    id: target.id,
+    name: target.name,
+    type: 'code',
+    children: Object.entries(target.deps).map(([id, dep]) => ({
+      name: dep.name,
+      type: 'node',
+      id,
+      children: dep.keys.map((key) => ({ name: key, id: key, type: 'key' })),
+    })),
+  })),
+);
+
+const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();
+
+const dataSourceValues = ref<Record<string, any>>({});
+
+const addHandler = () => {
+  if (!editDialog.value) return;
+
+  dataSourceValues.value = {};
+
+  editDialog.value.show();
+};
+
+const editHandler = (id: string) => {
+  if (!editDialog.value || !services) return;
+
+  dataSourceValues.value = {
+    ...dataSourceService?.getDataSourceById(id),
+  };
+
+  editDialog.value.show();
+};
+
+const removeHandler = async (id: string) => {
+  await tMagicMessageBox.confirm('确定删除?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+
+  dataSourceService?.remove(id);
+};
+
+const submitDataSourceHandler = (value: DataSourceSchema) => {
+  if (!services) return;
+
+  if (value.id) {
+    dataSourceService?.update(value);
+  } else {
+    dataSourceService?.add(value);
+  }
+
+  editDialog.value?.hide();
+};
+
+const tree = ref<InstanceType<typeof TMagicTree>>();
+
+const filterTextChangeHandler = (val: string) => {
+  tree.value?.filter(val);
+};
+</script>

package/src/services/codeBlock.ts

@@ -23,7 +23,6 @@ import { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
 
 import type { CodeState } from '@editor/type';
 import { CODE_DRAFT_STORAGE_KEY } from '@editor/type';
-import { info } from '@editor/utils/logger';
 
 import BaseService from './BaseService';
 
@@ -55,7 +54,6 @@ class CodeBlock extends BaseService {
    */
   public async setCodeDsl(codeDsl: CodeBlockDSL): Promise<void> {
     this.state.codeDsl = codeDsl;
-    info('[code-block]:code-dsl-change', this.state.codeDsl);
     this.emit('code-dsl-change', this.state.codeDsl);
   }
 

package/src/services/dataSource.ts

@@ -0,0 +1,90 @@
+import { reactive } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import type { FormConfig } from '@tmagic/form';
+import { DataSourceSchema } from '@tmagic/schema';
+import { guid } from '@tmagic/utils';
+
+import { getFormConfig } from '@editor/utils/data-source';
+
+import BaseService from './BaseService';
+
+interface State {
+  dataSources: DataSourceSchema[];
+  configs: Record<string, FormConfig>;
+}
+
+type StateKey = keyof State;
+class DataSource extends BaseService {
+  private state = reactive<State>({
+    dataSources: [],
+    configs: {},
+  });
+
+  public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
+    this.state[name] = value;
+  }
+
+  public get<K extends StateKey>(name: K): State[K] {
+    return this.state[name];
+  }
+
+  public getFormConfig(type = 'base') {
+    return getFormConfig(type, this.get('configs'));
+  }
+
+  public setFormConfig(type: string, config: FormConfig) {
+    this.get('configs')[type] = config;
+  }
+
+  public add(config: DataSourceSchema) {
+    const newConfig = {
+      ...config,
+      id: this.createId(),
+    };
+
+    this.get('dataSources').push(newConfig);
+
+    this.emit('add', newConfig);
+  }
+
+  public update(config: DataSourceSchema) {
+    const dataSources = this.get('dataSources');
+
+    const index = dataSources.findIndex((ds) => ds.id === config.id);
+
+    dataSources[index] = cloneDeep(config);
+
+    this.emit('update', config);
+  }
+
+  public remove(id: string) {
+    const dataSources = this.get('dataSources');
+    const index = dataSources.findIndex((ds) => ds.id === id);
+    dataSources.splice(index, 1);
+
+    this.emit('remove', id);
+  }
+
+  public getDataSourceById(id: string) {
+    return this.get('dataSources').find((ds) => ds.id === id);
+  }
+
+  public resetState() {
+    this.set('dataSources', []);
+  }
+
+  public destroy() {
+    this.removeAllListeners();
+    this.resetState();
+    this.removeAllPlugins();
+  }
+
+  private createId(): string {
+    return `ds_${guid()}`;
+  }
+}
+
+export type DataSourceService = DataSource;
+
+export default new DataSource();

package/src/theme/data-source-fields.scss

@@ -0,0 +1,13 @@
+.m-editor-data-source-fields {
+  width: 100%;
+
+  .tmagic-design-table {
+    width: 100%;
+  }
+
+  .m-editor-data-source-fields-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 15px;
+  }
+}

package/src/theme/data-source.scss

@@ -0,0 +1,17 @@
+.data-source-list-panel {
+  .list-container {
+    .list-item {
+      .codeIcon {
+        width: 22px;
+        height: 22px;
+        margin-right: 5px;
+      }
+
+      .compIcon {
+        width: 22px;
+        height: 22px;
+        margin-right: 5px;
+      }
+    }
+  }
+}

package/src/theme/key-value.scss

@@ -0,0 +1,13 @@
+.m-fields-key-value-item {
+  display: flex;
+  margin-bottom: 10px;
+  align-items: center;
+}
+
+.m-fileds-key-value-delimiter {
+  margin: 0 10px;
+}
+
+.m-fileds-key-value-delete {
+  margin-left: 10px;
+}

package/src/theme/theme.scss

@@ -17,3 +17,6 @@
 @import "./layout.scss";
 @import "./breadcrumb.scss";
 @import "./dep-list.scss";
+@import "./data-source.scss";
+@import "./data-source-fields.scss";
+@import "./key-value.scss";

package/src/type.ts

@@ -30,6 +30,7 @@ import type {
 
 import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
+import { DataSourceService } from './services/dataSource';
 import type { DepService } from './services/dep';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
@@ -56,6 +57,7 @@ export interface Services {
   uiService: UiService;
   codeBlockService: CodeBlockService;
   depService: DepService;
+  dataSourceService: DataSourceService;
 }
 
 export interface StageOptions {
@@ -264,7 +266,7 @@ export interface SideComponent extends MenuComponent {
  * layer: 已选组件树
  * code-block: 代码块
  */
-export type SideItem = 'component-list' | 'layer' | 'code-block' | SideComponent;
+export type SideItem = 'component-list' | 'layer' | 'code-block' | 'data-source' | SideComponent;
 
 /** 工具栏 */
 export interface SideBarData {

package/src/utils/data-source/formConfigs/base.ts

@@ -0,0 +1,32 @@
+import type { FormConfig } from '@tmagic/form';
+
+export default [
+  {
+    name: 'id',
+    type: 'hidden',
+  },
+  {
+    name: 'type',
+    text: '类型',
+    type: 'select',
+    options: [
+      { text: '基础', value: 'base' },
+      { text: 'HTTP', value: 'http' },
+    ],
+    defaultValue: 'base',
+  },
+  {
+    name: 'title',
+    text: '名称',
+    rules: [
+      {
+        required: true,
+        message: '请输入名称',
+      },
+    ],
+  },
+  {
+    name: 'description',
+    text: '描述',
+  },
+] as FormConfig;

package/src/utils/data-source/formConfigs/http.ts

@@ -0,0 +1,50 @@
+import { FormConfig } from '@tmagic/form';
+
+export default [
+  {
+    name: 'autoFetch',
+    text: '自动请求',
+    type: 'switch',
+    defaultValue: true,
+  },
+  {
+    type: 'fieldset',
+    name: 'options',
+    legend: 'HTTP 配置',
+    items: [
+      {
+        name: 'url',
+        text: 'URL',
+      },
+      {
+        name: 'method',
+        text: 'Method',
+        type: 'select',
+        options: [
+          { text: 'GET', value: 'GET' },
+          { text: 'POST', value: 'POST' },
+          { text: 'PUT', value: 'PUT' },
+          { text: 'DELETE', value: 'DELETE' },
+        ],
+      },
+      {
+        name: 'params',
+        type: 'key-value',
+        defaultValue: {},
+        text: '参数',
+      },
+      {
+        name: 'data',
+        type: 'key-value',
+        defaultValue: {},
+        text: '请求体',
+      },
+      {
+        name: 'headers',
+        type: 'key-value',
+        defaultValue: {},
+        text: '请求头',
+      },
+    ],
+  },
+] as FormConfig;

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

@@ -0,0 +1,31 @@
+import { FormConfig } from '@tmagic/form';
+
+import BaseFormConfig from './formConfigs/base';
+import HttpFormConfig from './formConfigs/http';
+
+const fillConfig = (config: FormConfig): FormConfig => [
+  ...BaseFormConfig,
+  ...config,
+  {
+    type: 'panel',
+    title: '数据定义',
+    items: [
+      {
+        name: 'fields',
+        type: 'data-source-fields',
+        defaultValue: [],
+      },
+    ],
+  },
+];
+
+export const getFormConfig = (type: string, configs: Record<string, FormConfig>): FormConfig => {
+  switch (type) {
+    case 'base':
+      return fillConfig([]);
+    case 'http':
+      return fillConfig(HttpFormConfig);
+    default:
+      return fillConfig(configs[type] || []);
+  }
+};

package/src/utils/dep.ts

@@ -1,6 +1,6 @@
 import { isEmpty } from 'lodash-es';
 
-import { CodeBlockContent, HookType, Id } from '@tmagic/schema';
+import { CodeBlockContent, DataSourceSchema, HookType, Id } from '@tmagic/schema';
 
 import { Target } from '@editor/services/dep';
 import type { HookData } from '@editor/type';
@@ -19,3 +19,11 @@ export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent) =>
       return false;
     },
   });
+
+export const createDataSourceTarget = (id: Id, ds: DataSourceSchema) =>
+  new Target({
+    type: 'data-source',
+    id,
+    name: ds.title || `${id}`,
+    isTarget: (key: string | number, value: any) => typeof value === 'string' && value.includes(`${id}`),
+  });

package/src/utils/props.ts

@@ -182,6 +182,7 @@ export const fillConfig = (config: FormConfig = []) => [
           {
             name: 'events',
             type: 'event-select',
+            labelWidth: 0,
           },
         ],
       },

package/types/Editor.vue.d.ts

@@ -47,6 +47,10 @@ declare const _default: import("vue").DefineComponent<{
         }>>;
         default: () => {};
     };
+    dataScourceConfigs: {
+        type: import("vue").PropType<Record<string, import("@tmagic/form").FormConfig>>;
+        default: () => {};
+    };
     moveableOptions: {
         type: import("vue").PropType<import("@tmagic/stage").MoveableOptions | ((config?: import("@tmagic/stage").CustomizeMoveableOptionsCallbackConfig | undefined) => import("@tmagic/stage").MoveableOptions)>;
     };
@@ -134,6 +138,10 @@ declare const _default: import("vue").DefineComponent<{
         }>>;
         default: () => {};
     };
+    dataScourceConfigs: {
+        type: import("vue").PropType<Record<string, import("@tmagic/form").FormConfig>>;
+        default: () => {};
+    };
     moveableOptions: {
         type: import("vue").PropType<import("@tmagic/stage").MoveableOptions | ((config?: import("@tmagic/stage").CustomizeMoveableOptionsCallbackConfig | undefined) => import("@tmagic/stage").MoveableOptions)>;
     };
@@ -190,6 +198,7 @@ declare const _default: import("vue").DefineComponent<{
         events: import("@tmagic/core").EventOption[];
         methods: import("@tmagic/core").EventOption[];
     }>;
+    dataScourceConfigs: Record<string, import("@tmagic/form").FormConfig>;
     canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
     isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
     containerHighlightClassName: string;

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

@@ -8,15 +8,15 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {
     hide: () => void;
     show: (e: MouseEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show")[], "hide" | "show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("show" | "hide")[], "show" | "hide", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     menuData?: (MenuButton | MenuComponent)[] | undefined;
     isSubMenu?: boolean | undefined;
 }>, {
     menuData: () => never[];
     isSubMenu: boolean;
 }>>> & {
-    onHide?: ((...args: any[]) => any) | undefined;
     onShow?: ((...args: any[]) => any) | undefined;
+    onHide?: ((...args: any[]) => any) | undefined;
 }, {
     menuData: (MenuButton | MenuComponent)[];
     isSubMenu: boolean;

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

@@ -41,8 +41,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         height: number;
     };
 }>>>, {
-    height: number;
     width: number;
+    height: number;
     zoom: number;
     wrapWidth: number;
     wrapHeight: number;

package/types/editorProps.d.ts

@@ -64,6 +64,10 @@ declare const _default: {
         }>>;
         default: () => {};
     };
+    dataScourceConfigs: {
+        type: PropType<Record<string, FormConfig>>;
+        default: () => {};
+    };
     /** 画布中组件选中框的移动范围 */
     moveableOptions: {
         type: PropType<MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions)>;

package/types/fields/DataSourceFields.vue.d.ts

@@ -0,0 +1,40 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config: {
+        type: 'data-source-fields';
+    };
+    model: any;
+    prop: string;
+    disabled: boolean;
+    name: string;
+}>, {
+    disabled: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config: {
+        type: 'data-source-fields';
+    };
+    model: any;
+    prop: string;
+    disabled: boolean;
+    name: string;
+}>, {
+    disabled: boolean;
+}>>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: 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];
+};