feat(editor, core): 支持直接绑定整个数据源对象

packages/core/src/App.ts

@@ -322,7 +322,20 @@ class App extends EventEmitter {
   }
 
   public compiledNode(node: MNode, content: DataSourceManagerData, sourceId?: Id) {
-    return compiledNode((str: string) => template(str)(content), cloneDeep(node), this.dsl?.dataSourceDeps, sourceId);
+    return compiledNode(
+      (value: any) => {
+        if (typeof value === 'string') {
+          return template(value)(content);
+        }
+        if (value?.isBindDataSource && value.dataSourceId) {
+          return content[value.dataSourceId];
+        }
+        return value;
+      },
+      cloneDeep(node),
+      this.dsl?.dataSourceDeps,
+      sourceId,
+    );
   }
 
   public destroy() {

packages/editor/src/fields/DataSourceSelect.vue

@@ -0,0 +1,75 @@
+<template>
+  <MSelect
+    :model="model"
+    :name="name"
+    :size="size"
+    :prop="prop"
+    :disabled="disabled"
+    :config="selectConfig"
+    :last-values="lastValues"
+    @change="changeHandler"
+  ></MSelect>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { FieldSize } from '@tmagic/design';
+import { MSelect, SelectConfig } from '@tmagic/form';
+
+import { Services } from '../type';
+
+defineOptions({
+  name: 'MEditorDataSourceSelect',
+});
+
+const emit = defineEmits(['change']);
+
+const props = withDefaults(
+  defineProps<{
+    config: {
+      type: 'data-source-select';
+      name: string;
+      text: string;
+      placeholder: string;
+      dataSourceType?: string;
+    };
+    model: Record<string, any>;
+    name: string;
+    prop: string;
+    disabled: boolean;
+    lastValues?: Record<string, any>;
+    size?: FieldSize;
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const { dataSourceService } = inject<Services>('services') || {};
+
+const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
+
+const selectConfig = computed<SelectConfig>(() => {
+  const { type, dataSourceType, ...config } = props.config;
+  return {
+    ...config,
+    type: 'select',
+    valueKey: 'dataSourceId',
+    options: dataSources.value
+      .filter((ds) => !dataSourceType || ds.type === dataSourceType)
+      .map((ds) => ({
+        value: {
+          isBindDataSource: true,
+          dataSourceType: ds.type,
+          dataSourceId: ds.id,
+        },
+        text: ds.title || ds.id,
+      })),
+  };
+});
+
+const changeHandler = (value: any) => {
+  emit('change', value);
+};
+</script>

packages/editor/src/index.ts

@@ -23,6 +23,7 @@ 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 DataSourceSelect from './fields/DataSourceSelect.vue';
 import EventSelect from './fields/EventSelect.vue';
 import KeyValue from './fields/KeyValue.vue';
 import uiSelect from './fields/UISelect.vue';
@@ -53,6 +54,7 @@ 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 DataSourceInput } from './fields/DataSourceInput.vue';
+export { default as DataSourceSelect } from './fields/DataSourceSelect.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';
@@ -87,5 +89,6 @@ export default {
     app.component('m-fields-data-source-fields', DataSourceFields);
     app.component('m-fields-key-value', KeyValue);
     app.component('m-fields-data-source-input', DataSourceInput);
+    app.component('m-fields-data-source-select', DataSourceSelect);
   },
 };

packages/editor/src/initService.ts

@@ -236,18 +236,22 @@ export const initServiceEvents = (
     }
   };
 
+  // 新增节点，收集依赖
   const nodeAddHandler = (nodes: MNode[]) => {
     depService.collect(nodes);
   };
 
+  // 节点更新，收集依赖
   const nodeUpdateHandler = (nodes: MNode[]) => {
     depService.collect(nodes);
   };
 
+  // 节点删除，清除对齐的依赖收集
   const nodeRemoveHandler = (nodes: MNode[]) => {
     depService.clear(nodes);
   };
 
+  // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
   const historyChangeHandler = (page: MPage) => {
     depService.collect([page], true);
   };

packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -15,6 +15,7 @@
       :expand-on-click-node="false"
       :data="list"
       :highlight-current="true"
+      @node-click="clickHandler"
     >
       <template #default="{ data }">
         <div :id="data.id" class="list-container">
@@ -53,7 +54,7 @@ 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 { DataSourceSchema, Id } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
@@ -66,7 +67,7 @@ defineOptions({
 });
 
 const services = inject<Partial<Services>>('services', {});
-const { dataSourceService, depService } = inject<Services>('services') || {};
+const { dataSourceService, depService, editorService } = inject<Services>('services') || {};
 
 const list = computed(() =>
   Object.values(depService?.targets['data-source'] || {}).map((target) => ({
@@ -131,4 +132,19 @@ const tree = ref<InstanceType<typeof TMagicTree>>();
 const filterTextChangeHandler = (val: string) => {
   tree.value?.filter(val);
 };
+
+// 选中组件
+const selectComp = (compId: Id) => {
+  const stage = editorService?.get('stage');
+  editorService?.select(compId);
+  stage?.select(compId);
+};
+
+const clickHandler = (data: any, node: any) => {
+  if (data.type === 'node') {
+    selectComp(data.id);
+  } else if (data.type === 'key') {
+    selectComp(node.parent.data.id);
+  }
+};
 </script>

packages/editor/src/services/dep.ts

@@ -262,6 +262,7 @@ export class Watcher extends EventEmitter {
     Object.values(this.targets).forEach((targets) => {
       Object.values(targets).forEach((target) => {
         nodes.forEach((node) => {
+          // 先删除原有依赖，重新收集
           target.removeDep(node);
           this.collectItem(node, target, deep);
         });

packages/editor/src/utils/dep.ts

@@ -11,6 +11,10 @@ export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent) =>
     id,
     name: codeBlock.name,
     isTarget: (key: string | number, value: any) => {
+      if (id === value) {
+        return true;
+      }
+
       if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
         const index = value.hookData.findIndex((item: HookData) => item.codeId === id);
         return Boolean(index > -1);
@@ -25,5 +29,7 @@ export const createDataSourceTarget = (id: Id, ds: DataSourceSchema) =>
     type: 'data-source',
     id,
     name: ds.title || `${id}`,
-    isTarget: (key: string | number, value: any) => typeof value === 'string' && value.includes(`${id}`),
+    isTarget: (key: string | number, value: any) =>
+      // 关联数据源对象或者在模板在使用数据源
+      (value.isBindDataSource && value.dataSourceId) || (typeof value === 'string' && value.includes(`${id}`)),
   });

packages/form/src/fields/Select.vue

@@ -82,13 +82,17 @@ const equalValue = (value: any, v: any): boolean => {
 };
 
 const mapOptions = (data: any[]) => {
-  const { option } = props.config;
-  const { text } = option;
-  const { value } = option;
+  const {
+    option = {
+      text: 'text',
+      value: 'value',
+    },
+  } = props.config;
+  const { text = 'text', value = 'value' } = option;
 
   return data.map((item) => ({
-    text: typeof text === 'function' ? text(item) : item[text || 'text'],
-    value: typeof value === 'function' ? value(item) : item[value || 'value'],
+    text: typeof text === 'function' ? text(item) : item[text],
+    value: typeof value === 'function' ? value(item) : item[value],
   }));
 };
 
@@ -103,8 +107,10 @@ const getOptions = async () => {
 
   let items: SelectOption[] | SelectGroupOption[] = [];
 
-  const { config } = props;
-  const { option } = config;
+  const { option } = props.config;
+
+  if (!option) return [];
+
   const { root = '', totalKey = 'total' } = option;
   let { body = {}, url } = option;
 
@@ -224,8 +230,10 @@ const getInitLocalOption = async () => {
 const getInitOption = async () => {
   if (!props.model) return [];
 
-  const { config } = props;
-  const { option } = config;
+  const { option } = props.config;
+
+  if (!option) return [];
+
   const { root = '', initRoot = '' } = option;
   let { initBody = {} } = option;
 

packages/form/src/schema.ts

@@ -435,9 +435,9 @@ export interface SelectConfig extends FormItem, Input {
   allowCreate?: boolean;
   filterable?: boolean;
   group?: boolean;
-  options: SelectConfigOption[] | SelectConfigGroupOption[] | SelectOptionFunction;
-  remote: true;
-  option: {
+  options?: SelectConfigOption[] | SelectConfigGroupOption[] | SelectOptionFunction;
+  remote?: true;
+  option?: {
     url: string | ((mForm: FormState | undefined, data: { model: any; formValue: any }) => string);
     initUrl?: string | ((mForm: FormState | undefined, data: { model: any; formValue: any }) => string);
     method?: 'jsonp' | string;

packages/utils/src/index.ts

@@ -243,7 +243,7 @@ export const replaceChildNode = (newNode: MNode, data?: MNode[], parentId?: Id)
 };
 
 export const compiledNode = (
-  compile: (template: string) => string,
+  compile: (value: any) => any,
   node: MNode,
   dataSourceDeps: DataSourceDeps = {},
   sourceId?: Id,
@@ -263,12 +263,14 @@ export const compiledNode = (
     const keyPathLength = keyPath.length;
     keyPath.reduce((accumulator, currentValue: any, currentIndex) => {
       if (keyPathLength - 1 === currentIndex) {
-        if (typeof accumulator[`${keyPrefix}${currentValue}`] === 'undefined') {
-          accumulator[`${keyPrefix}${currentValue}`] = accumulator[currentValue];
+        const cacheKey = `${keyPrefix}${currentValue}`;
+
+        if (typeof accumulator[cacheKey] === 'undefined') {
+          accumulator[cacheKey] = accumulator[currentValue];
         }
 
         try {
-          accumulator[currentValue] = compile(accumulator[`${keyPrefix}${currentValue}`]);
+          accumulator[currentValue] = compile(accumulator[cacheKey]);
         } catch (e) {
           console.error(e);
           accumulator[currentValue] = '';

playground/src/configs/dsl.ts

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+// @ts-nocheck
 export default {
   id: '75f0extui9d7yksklx27hff8xg',
   name: 'test',
@@ -23,8 +24,9 @@ export default {
   codeBlocks: {
     code_5336: {
       name: 'getData',
-      // eslint-disable-next-line no-eval
-      content: eval(`({app, params}) => {\n  console.log("this is getData function",params,app)\n}`),
+      content: ({ app, params }) => {
+        console.log('this is getData function', params, app);
+      },
       params: [
         {
           name: 'age',
@@ -40,8 +42,9 @@ export default {
     },
     code_5316: {
       name: 'getList',
-      // eslint-disable-next-line no-eval
-      content: eval(`() => {\n  console.log("this is getList function")\n}`),
+      content: () => {
+        console.log('this is getList function');
+      },
       params: [],
     },
   },
@@ -76,8 +79,8 @@ export default {
               actionType: 'code', // 联动动作类型
               codeId: 'code_5336', // 代码块id
               params: {
-                age: 12,
-              }, // 参数
+                age: 12, // 参数
+              },
             },
             {
               actionType: 'comp',
@@ -206,6 +209,13 @@ export default {
             color: '',
             fontSize: '',
             fontWeight: '',
+            borderWidth: '0',
+            borderColor: '',
+            borderStyle: 'none',
+            transform: {
+              rotate: '',
+              scale: '',
+            },
           },
           name: '按钮',
           text: '${ds_b64c92b5.text}',
@@ -213,8 +223,13 @@ export default {
           events: [
             {
               name: 'magic:common:events:click',
-              to: 'overlay_2159',
-              method: 'openOverlay',
+              actions: [
+                {
+                  actionType: 'comp',
+                  to: 'overlay_2159',
+                  method: 'openOverlay',
+                },
+              ],
             },
           ],
           created: [],
@@ -272,6 +287,13 @@ export default {
                     color: '',
                     fontSize: '',
                     fontWeight: '',
+                    borderWidth: '0',
+                    borderColor: '',
+                    borderStyle: 'none',
+                    transform: {
+                      rotate: '',
+                      scale: '',
+                    },
                   },
                   name: '按钮',
                   text: '关闭弹窗',
@@ -279,8 +301,13 @@ export default {
                   events: [
                     {
                       name: 'magic:common:events:click',
-                      to: 'overlay_2159',
-                      method: 'closeOverlay',
+                      actions: [
+                        {
+                          actionType: 'comp',
+                          to: 'overlay_2159',
+                          method: 'closeOverlay',
+                        },
+                      ],
                     },
                   ],
                   created: [],