@tmagic/editor 1.3.0-alpha.16 → 1.3.0-alpha.18

package/src/initService.ts

@@ -7,9 +7,14 @@ import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage } from
 import { getNodes } from '@tmagic/utils';
 
 import type { Target } from './services/dep';
-import { createCodeBlockTarget, createDataSourceTarget } from './utils/dep';
+import {
+  createCodeBlockTarget,
+  createDataSourceCondTarget,
+  createDataSourceMethodTarget,
+  createDataSourceTarget,
+} from './utils/dep';
 import editorProps from './editorProps';
-import type { Services } from './type';
+import { DepTargetType, Services } from './type';
 
 export declare type LooseRequired<T> = {
   [P in string & keyof T]: T[P];
@@ -139,6 +144,7 @@ export const initServiceEvents = (
 
     if (app.dsl) {
       app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
       app.dsl.dataSources = root.dataSources;
     }
 
@@ -159,23 +165,34 @@ export const initServiceEvents = (
   };
 
   const targetAddHandler = (target: Target) => {
-    if (target.type !== 'data-source') return;
-
     const root = editorService.get('root');
     if (!root) return;
 
-    if (!root.dataSourceDeps) {
-      root.dataSourceDeps = {};
+    if (target.type === DepTargetType.DATA_SOURCE) {
+      if (!root.dataSourceDeps) {
+        root.dataSourceDeps = {};
+      }
+      root.dataSourceDeps[target.id] = target.deps;
     }
 
-    root.dataSourceDeps[target.id] = target.deps;
+    if (target.type === DepTargetType.DATA_SOURCE_COND) {
+      if (!root.dataSourceCondDeps) {
+        root.dataSourceCondDeps = {};
+      }
+      root.dataSourceCondDeps[target.id] = target.deps;
+    }
   };
 
   const targetRemoveHandler = (id: string | number) => {
     const root = editorService.get('root');
-    if (!root?.dataSourceDeps) return;
 
-    delete root.dataSourceDeps[id];
+    if (root?.dataSourceDeps) {
+      delete root.dataSourceDeps[id];
+    }
+
+    if (root?.dataSourceCondDeps) {
+      delete root.dataSourceCondDeps[id];
+    }
   };
 
   const depUpdateHandler = (node: MNode) => {
@@ -191,6 +208,12 @@ export const initServiceEvents = (
   depService.on('dep-update', depUpdateHandler);
   depService.on('collected', collectedHandler);
 
+  const initDataSourceDepTarget = (ds: DataSourceSchema) => {
+    depService.addTarget(createDataSourceTarget(ds.id));
+    depService.addTarget(createDataSourceMethodTarget(ds.id));
+    depService.addTarget(createDataSourceCondTarget(ds.id));
+  };
+
   const rootChangeHandler = async (value: MApp, preValue?: MApp | null) => {
     const nodeId = editorService.get('node')?.id || props.defaultSelected;
     let node;
@@ -218,14 +241,14 @@ export const initServiceEvents = (
     codeBlockService.setCodeDsl(value.codeBlocks);
     dataSourceService.set('dataSources', value.dataSources);
 
-    depService.removeTargets('code-block');
+    depService.removeTargets(DepTargetType.CODE_BLOCK);
 
     Object.entries(value.codeBlocks).forEach(([id, code]) => {
       depService.addTarget(createCodeBlockTarget(id, code));
     });
 
     value.dataSources.forEach((ds) => {
-      depService.addTarget(createDataSourceTarget(ds.id, ds));
+      initDataSourceDepTarget(ds);
     });
 
     if (value && Array.isArray(value.items)) {
@@ -279,17 +302,14 @@ export const initServiceEvents = (
   codeBlockService.on('remove', codeBlockRemoveHandler);
 
   const dataSourceAddHandler = (config: DataSourceSchema) => {
-    depService.addTarget(createDataSourceTarget(config.id, config));
+    initDataSourceDepTarget(config);
     getApp()?.dataSourceManager?.addDataSource(config);
   };
 
   const dataSourceUpdateHandler = (config: DataSourceSchema) => {
-    if (config.title) {
-      depService.getTarget(config.id)!.name = config.title;
-    }
     const root = editorService.get('root');
 
-    const targets = depService.getTargets('data-source');
+    const targets = depService.getTargets(DepTargetType.DATA_SOURCE);
 
     const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
 

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

@@ -50,7 +50,7 @@ import type { Id } from '@tmagic/schema';
 import Icon from '@editor/components/Icon.vue';
 import AppManageIcon from '@editor/icons/AppManageIcon.vue';
 import CodeIcon from '@editor/icons/CodeIcon.vue';
-import { CodeDeleteErrorType, CodeDslItem, Services } from '@editor/type';
+import { CodeDeleteErrorType, CodeDslItem, DepTargetType, Services } from '@editor/type';
 
 defineOptions({
   name: 'MEditorCodeBlockList',
@@ -69,7 +69,7 @@ const { codeBlockService, depService, editorService } = inject<Services>('servic
 
 // 代码块列表
 const codeList = computed(() =>
-  Object.values(depService?.targets['code-block'] || {}).map((target) => {
+  Object.values(depService?.getTargets(DepTargetType.CODE_BLOCK) || {}).map((target) => {
     // 组件节点
     const compNodes = Object.entries(target.deps).map(([id, dep]) => ({
       name: dep.name,

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

@@ -2,6 +2,7 @@
   <MFormDrawer
     ref="fomDrawer"
     label-width="80px"
+    :close-on-press-escape="false"
     :title="title"
     :width="size"
     :config="dataSourceConfig"

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

@@ -15,11 +15,11 @@
         <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
-          >
+          <span class="name" :class="{ code: data.type === 'ds', hook: data.type === 'key' }">{{
+            data.type === 'key' ? data.name : `${data.name}(${data.id})`
+          }}</span>
           <!-- 右侧工具栏 -->
-          <div class="right-tool" v-if="data.type === 'code'">
+          <div class="right-tool" v-if="data.type === 'ds'">
             <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
               <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editHandler(`${data.id}`)"></Icon>
             </TMagicTooltip>
@@ -39,10 +39,10 @@ import { computed, inject, ref } from 'vue';
 import { Aim, Close, Coin, Edit, View } from '@element-plus/icons-vue';
 
 import { tMagicMessageBox, TMagicTooltip, TMagicTree } from '@tmagic/design';
-import { Id } from '@tmagic/schema';
+import { Dep, Id } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
-import type { Services } from '@editor/type';
+import { DepTargetType, Services } from '@editor/type';
 
 defineOptions({
   name: 'MEditorDataSourceList',
@@ -57,18 +57,52 @@ const { depService, editorService, dataSourceService } = inject<Services>('servi
 
 const editable = computed(() => dataSourceService?.get('editable') ?? true);
 
+const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
+
+const dsDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE) || {});
+const dsMethodDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_METHOD) || {});
+const dsCondDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_COND) || {});
+
+const getKeyTreeConfig = (dep: Dep[string], type?: string) =>
+  dep.keys.map((key) => ({ name: key, id: key, type: 'key', isMethod: type === 'method', isCond: type === 'cond' }));
+
+const getNodeTreeConfig = (id: string, dep: Dep[string], type?: string) => ({
+  name: dep.name,
+  type: 'node',
+  id,
+  children: getKeyTreeConfig(dep, type),
+});
+
 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' })),
-    })),
-  })),
+  dataSources.value.map((ds) => {
+    const dsDeps = dsDep.value[ds.id].deps;
+    const dsMethodDeps = dsMethodDep.value[ds.id].deps;
+    const dsCondDeps = dsCondDep.value[ds.id].deps;
+
+    const children: any[] = [];
+
+    const mergeChildren = (deps: Dep, type?: string) => {
+      Object.entries(deps).forEach(([id, dep]) => {
+        const nodeItem = children.find((item) => item.id === id);
+        if (nodeItem) {
+          nodeItem.children = nodeItem.children.concat(getKeyTreeConfig(dep, type));
+        } else {
+          children.push(getNodeTreeConfig(id, dep, type));
+        }
+      });
+    };
+
+    mergeChildren(dsDeps);
+    mergeChildren(dsMethodDeps, 'method');
+    mergeChildren(dsCondDeps, 'cond');
+
+    return {
+      id: ds.id,
+      name: ds.title,
+      type: 'ds',
+      children,
+    };
+  }),
 );
 
 const editHandler = (id: string) => {

package/src/services/dep.ts

@@ -19,27 +19,24 @@ import { EventEmitter } from 'events';
 
 import { reactive } from 'vue';
 
-import { Id, MNode } from '@tmagic/schema';
+import type { Dep, Id, MNode } from '@tmagic/schema';
+import { isObject } from '@tmagic/utils';
+
+import { DepTargetType } from '@editor/type';
 
 type IsTarget = (key: string | number, value: any) => boolean;
 
 interface TargetOptions {
   isTarget: IsTarget;
   id: string | number;
-  type?: string;
-  name: string;
-}
-
-interface Dep {
-  [key: string | number]: {
-    name: string;
-    keys: (string | number)[];
-  };
+  /** 类型，数据源、代码块或其他 */
+  type?: DepTargetType | string;
+  name?: string;
 }
 
 interface TargetList {
-  [key: string]: {
-    [key: string | number]: Target;
+  [type: DepTargetType | string]: {
+    [targetId: string | number]: Target;
   };
 }
 
@@ -60,11 +57,11 @@ export class Target extends EventEmitter {
   /**
    * 目标名称，用于显示在依赖列表中
    */
-  public name: string;
+  public name?: string;
   /**
    * 不同的目标可以进行分类，例如代码块，数据源可以为两个不同的type
    */
-  public type = 'default';
+  public type: DepTargetType | string = DepTargetType.DEFAULT;
   /**
    * 依赖详情
    * 实例：{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }
@@ -156,14 +153,14 @@ export class Target extends EventEmitter {
 }
 
 export class Watcher extends EventEmitter {
-  public targets = reactive<TargetList>({});
+  private targets = reactive<TargetList>({});
 
   /**
    * 获取指定类型中的所有target
    * @param type 分类
    * @returns Target[]
    */
-  public getTargets(type = 'default') {
+  public getTargets(type: DepTargetType | string = DepTargetType.DEFAULT) {
     return this.targets[type] || {};
   }
 
@@ -230,7 +227,7 @@ export class Watcher extends EventEmitter {
    * @param type 分类
    * @returns void
    */
-  public removeTargets(type = 'default') {
+  public removeTargets(type: DepTargetType | string = DepTargetType.DEFAULT) {
     const targets = this.targets[type];
 
     if (!targets) return;
@@ -307,9 +304,11 @@ export class Watcher extends EventEmitter {
           this.emit('update-dep', node, fullKey);
         } else if (!keyIsItems && Array.isArray(value)) {
           value.forEach((item, index) => {
-            collectTarget(item, `${fullKey}.${index}`);
+            if (isObject(item)) {
+              collectTarget(item, `${fullKey}.${index}`);
+            }
           });
-        } else if (Object.prototype.toString.call(value) === '[object Object]') {
+        } else if (isObject(value)) {
           collectTarget(value, fullKey);
         }
 
@@ -321,6 +320,7 @@ export class Watcher extends EventEmitter {
       };
 
       Object.entries(config).forEach(([key, value]) => {
+        if (typeof value === 'undefined' || value === '') return;
         doCollect(key, value);
       });
     };

package/src/theme/code-editor.scss

@@ -27,6 +27,6 @@
     position: absolute;
     top: 5px;
     right: 0;
-    z-index: 1;
+    z-index: 11;
   }
 }

package/src/type.ts

@@ -500,3 +500,23 @@ export interface DataSourceMethodSelectConfig {
   disabled?: boolean | FilterFunction;
   display?: boolean | FilterFunction;
 }
+
+export interface DataSourceFieldSelectConfig {
+  type: 'data-source-field-select';
+  name: string;
+  labelWidth?: number | string;
+  disabled?: boolean | FilterFunction;
+  display?: boolean | FilterFunction;
+}
+
+export enum DepTargetType {
+  DEFAULT = 'default',
+  /** 代码块 */
+  CODE_BLOCK = 'code-block',
+  /** 数据源 */
+  DATA_SOURCE = 'data-source',
+  /** 数据源方法 */
+  DATA_SOURCE_METHOD = 'data-source-method',
+  /** 数据源条件 */
+  DATA_SOURCE_COND = 'data-source-cond',
+}

package/src/utils/dep.ts

@@ -1,13 +1,14 @@
 import { isEmpty } from 'lodash-es';
 
-import { CodeBlockContent, DataSourceSchema, HookType, Id } from '@tmagic/schema';
+import { CodeBlockContent, HookType, Id } from '@tmagic/schema';
 
+import dataSourceService from '@editor/services/dataSource';
 import { Target } from '@editor/services/dep';
-import type { HookData } from '@editor/type';
+import { DepTargetType, HookData } from '@editor/type';
 
 export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent) =>
   new Target({
-    type: 'code-block',
+    type: DepTargetType.CODE_BLOCK,
     id,
     name: codeBlock.name,
     isTarget: (key: string | number, value: any) => {
@@ -24,12 +25,37 @@ export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent) =>
     },
   });
 
-export const createDataSourceTarget = (id: Id, ds: DataSourceSchema) =>
+export const createDataSourceTarget = (id: Id) =>
   new Target({
-    type: 'data-source',
+    type: DepTargetType.DATA_SOURCE,
     id,
-    name: ds.title || `${id}`,
     isTarget: (key: string | number, value: any) =>
       // 关联数据源对象或者在模板在使用数据源
-      (value.isBindDataSource && value.dataSourceId) || (typeof value === 'string' && value.includes(`${id}`)),
+      (value?.isBindDataSource && value.dataSourceId) || (typeof value === 'string' && value.includes(`${id}`)),
+  });
+
+export const createDataSourceCondTarget = (id: string) =>
+  new Target({
+    type: DepTargetType.DATA_SOURCE_COND,
+    id,
+    isTarget: (key: string | number, value: any) => {
+      if (!Array.isArray(value) || value[0] !== id) return false;
+
+      const ds = dataSourceService.getDataSourceById(id);
+
+      return Boolean(ds?.fields?.find((field) => field.name === value[1]));
+    },
+  });
+
+export const createDataSourceMethodTarget = (id: string) =>
+  new Target({
+    type: DepTargetType.DATA_SOURCE_METHOD,
+    id,
+    isTarget: (key: string | number, value: any) => {
+      if (!Array.isArray(value) || value[0] !== id) return false;
+
+      const ds = dataSourceService.getDataSourceById(id);
+
+      return Boolean(ds?.methods?.find((method) => method.name === value[1]));
+    },
   });