@tmagic/editor 1.2.15 → 1.3.0-alpha.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.15",
+  "version": "1.3.0-alpha.1",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,12 +46,13 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.2.15",
-    "@tmagic/design": "1.2.15",
-    "@tmagic/form": "1.2.15",
-    "@tmagic/schema": "1.2.15",
-    "@tmagic/stage": "1.2.15",
-    "@tmagic/utils": "1.2.15",
+    "@tmagic/core": "1.3.0-alpha.1",
+    "@tmagic/design": "1.3.0-alpha.1",
+    "@tmagic/form": "1.3.0-alpha.1",
+    "@tmagic/schema": "1.3.0-alpha.1",
+    "@tmagic/stage": "1.3.0-alpha.1",
+    "@tmagic/table": "1.3.0-alpha.1",
+    "@tmagic/utils": "1.3.0-alpha.1",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -63,8 +64,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.2.15",
-    "@tmagic/form": "1.2.15",
+    "@tmagic/design": "1.3.0-alpha.1",
+    "@tmagic/form": "1.3.0-alpha.1",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },

package/src/Editor.vue

@@ -73,6 +73,7 @@ import Sidebar from './layouts/sidebar/Sidebar.vue';
 import Workspace from './layouts/workspace/Workspace.vue';
 import codeBlockService from './services/codeBlock';
 import componentListService from './services/componentList';
+import dataSourceService from './services/dataSource';
 import depService from './services/dep';
 import editorService from './services/editor';
 import eventsService from './services/events';
@@ -110,6 +111,7 @@ export default defineComponent({
       storageService,
       codeBlockService,
       depService,
+      dataSourceService,
     };
 
     initServiceEvents(props, emit, services);

package/src/components/CodeDraftEditor.vue

@@ -13,13 +13,13 @@
         {{ isFullScreen ? '退出全屏' : '全屏' }}</TMagicButton
       >
       <TMagicButton type="primary" class="button" @click="saveAndClose">确认</TMagicButton>
-      <TMagicButton type="primary" class="button" @click="close">关闭</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 type="primary" class="button" @click="close">关闭</TMagicButton>
+      <TMagicButton class="button" @click="close">关闭</TMagicButton>
     </div>
   </div>
 </template>

package/src/editorProps.ts

@@ -79,6 +79,11 @@ export default {
     default: () => ({}),
   },
 
+  dataScourceConfigs: {
+    type: Object as PropType<Record<string, FormConfig>>,
+    default: () => ({}),
+  },
+
   /** 画布中组件选中框的移动范围 */
   moveableOptions: {
     type: [Object, Function] as PropType<

package/src/fields/CodeSelect.vue

@@ -35,6 +35,7 @@ const codeConfig = computed(() => ({
   items: [
     {
       type: 'code-select-col',
+      labelWidth: 0,
     },
   ],
 }));

package/src/fields/DataSourceFields.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="m-editor-data-source-fields">
+    <MagicTable :data="model[name]" :columns="filedColumns"></MagicTable>
+
+    <div class="m-editor-data-source-fields-footer">
+      <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
+    </div>
+
+    <MFormDialog
+      ref="addDialog"
+      :title="filedTitle"
+      :config="dataSourceFieldsConfig"
+      :values="fieldValues"
+      :parentValues="model[name]"
+      @submit="fieldChange"
+    ></MFormDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
+import { FormConfig, FormState, MFormDialog } from '@tmagic/form';
+import { MagicTable } from '@tmagic/table';
+
+const props = withDefaults(
+  defineProps<{
+    config: {
+      type: 'data-source-fields';
+    };
+    model: any;
+    prop: string;
+    disabled: boolean;
+    name: string;
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits(['change']);
+
+const addDialog = ref<InstanceType<typeof MFormDialog>>();
+const fieldValues = ref<Record<string, any>>({});
+const filedTitle = ref('');
+
+const newHandler = () => {
+  if (!addDialog.value) return;
+  fieldValues.value = {};
+  filedTitle.value = '新增属性';
+  addDialog.value.dialogVisible = true;
+};
+
+const fieldChange = ({ index, ...value }: Record<string, any>) => {
+  if (!addDialog.value) return;
+
+  if (index > -1) {
+    props.model[props.name][index] = value;
+  } else {
+    props.model[props.name].push(value);
+  }
+
+  addDialog.value.dialogVisible = false;
+
+  emit('change', props.model[props.name]);
+};
+
+const filedColumns = [
+  {
+    label: '属性名称',
+    prop: 'title',
+  },
+  {
+    label: '属性key',
+    prop: 'name',
+  },
+  {
+    label: '属性描述',
+    prop: 'desc',
+  },
+  {
+    label: '操作',
+    fixed: 'right',
+    actions: [
+      {
+        text: '编辑',
+        handler: (row: Record<string, any>, index: number) => {
+          if (!addDialog.value) return;
+          fieldValues.value = {
+            ...row,
+            index,
+          };
+          filedTitle.value = `编辑${row.title}`;
+          addDialog.value.dialogVisible = true;
+        },
+      },
+      {
+        text: '删除',
+        buttonType: 'danger',
+        handler: async (row: Record<string, any>, index: number) => {
+          await tMagicMessageBox.confirm(`确定删除${row.title}(${row.name})?`, '提示');
+          props.model[props.name].splice(index, 1);
+          emit('change', props.model[props.name]);
+        },
+      },
+    ],
+  },
+];
+
+const dataSourceFieldsConfig: FormConfig = [
+  { name: 'index', type: 'hidden', filter: 'number', defaultValue: -1 },
+  {
+    name: 'type',
+    text: '数据类型',
+    type: 'select',
+    defaultValue: 'string',
+    options: [
+      { text: '字符串', value: 'string' },
+      { text: '数字', value: 'number' },
+      { text: '布尔值', value: 'boolean' },
+      { text: '对象', value: 'object' },
+      { text: '数组', value: 'array' },
+      { text: 'null', value: 'null' },
+      { text: 'any', value: 'any' },
+    ],
+  },
+  {
+    name: 'name',
+    text: '字段名称',
+    rules: [
+      {
+        required: true,
+        message: '请输入字段名称',
+      },
+      {
+        validator: ({ value, callback }, { model, parent }) => {
+          const index = parent.findIndex((item: Record<string, any>) => item.name === value);
+          if ((model.index === -1 && index > -1) || (model.index > -1 && index !== model.index)) {
+            return callback(`属性key（${value}）已存在`);
+          }
+          callback();
+        },
+      },
+    ],
+  },
+  {
+    name: 'title',
+    text: '展示名称',
+    rules: [
+      {
+        required: true,
+        message: '请输入展示名称',
+      },
+    ],
+  },
+  {
+    name: 'description',
+    text: '描述',
+  },
+  {
+    name: 'defaultValue',
+    text: '默认值',
+  },
+  {
+    name: 'enable',
+    text: '是否可用',
+    type: 'switch',
+    defaultValue: true,
+  },
+  {
+    name: 'fields',
+    type: 'data-source-fields',
+    defaultValue: [],
+    display: (formState: FormState | undefined, { model }: any) => model.type === 'object',
+  },
+];
+</script>

package/src/fields/EventSelect.vue

@@ -132,6 +132,7 @@ const compActionConfig = computed(() => {
 const codeActionConfig = computed(() => {
   const defaultCodeActionConfig = {
     type: 'code-select-col',
+    labelWidth: 0,
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.CODE,
   };
   return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };

package/src/fields/KeyValue.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="m-fields-key-value">
+    <div class="m-fields-key-value-item" v-for="(item, index) in records" :key="index">
+      <TMagicInput
+        placeholder="key"
+        v-model="records[index][0]"
+        :disabled="disabled"
+        :size="size"
+        @change="keyChangeHandler"
+      ></TMagicInput>
+      <span class="m-fileds-key-value-delimiter">:</span>
+      <TMagicInput
+        placeholder="value"
+        v-model="records[index][1]"
+        :disabled="disabled"
+        :size="size"
+        @change="valueChangeHandler"
+      ></TMagicInput>
+
+      <TMagicButton
+        class="m-fileds-key-value-delete"
+        type="danger"
+        :size="size"
+        circle
+        plain
+        :icon="Delete"
+        @click="deleteHandler(index)"
+      ></TMagicButton>
+    </div>
+
+    <TMagicButton type="primary" :size="size" plain :icon="Plus" @click="addHandler">添加</TMagicButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+import { Delete, Plus } from '@element-plus/icons-vue';
+
+import { TMagicButton, TMagicInput } from '@tmagic/design';
+
+const props = withDefaults(
+  defineProps<{
+    config: {
+      type: 'key-value';
+      name: string;
+      text: string;
+    };
+    model: Record<string, any>;
+    name: string;
+    prop: string;
+    disabled: boolean;
+    lastValues?: Record<string, any>;
+    size?: 'large' | 'default' | 'small';
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<(e: 'change', value: Record<string, any>) => void>();
+
+const records = ref<[string, string][]>([]);
+
+watchEffect(() => {
+  records.value = Object.entries(props.model[props.name] || {});
+});
+
+const getValue = () => {
+  const record: Record<string, string> = {};
+  records.value.forEach(([key, value]) => {
+    if (key) {
+      record[key] = value;
+    }
+  });
+  return record;
+};
+
+const keyChangeHandler = () => {
+  emit('change', getValue());
+};
+
+const valueChangeHandler = () => {
+  emit('change', getValue());
+};
+
+const addHandler = () => {
+  records.value.push(['', '']);
+};
+
+const deleteHandler = (index: number) => {
+  records.value.splice(index, 1);
+};
+</script>

package/src/index.ts

@@ -21,7 +21,9 @@ import Code from './fields/Code.vue';
 import CodeLink from './fields/CodeLink.vue';
 import CodeSelect from './fields/CodeSelect.vue';
 import CodeSelectCol from './fields/CodeSelectCol.vue';
+import DataSourceFields from './fields/DataSourceFields.vue';
 import EventSelect from './fields/EventSelect.vue';
+import KeyValue from './fields/KeyValue.vue';
 import uiSelect from './fields/UISelect.vue';
 import CodeEditor from './layouts/CodeEditor.vue';
 import { setConfig } from './utils/config';
@@ -40,6 +42,7 @@ export { default as propsService } from './services/props';
 export { default as historyService } from './services/history';
 export { default as storageService } from './services/storage';
 export { default as eventsService } from './services/events';
+export { default as dataSourceService } from './services/dataSource';
 export { default as uiService } from './services/ui';
 export { default as codeBlockService } from './services/codeBlock';
 export { default as depService } from './services/dep';
@@ -47,7 +50,9 @@ export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPa
 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 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 PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
@@ -74,5 +79,7 @@ export default {
     app.component('m-fields-code-select', CodeSelect);
     app.component('m-fields-code-select-col', CodeSelectCol);
     app.component('m-fields-event-select', EventSelect);
+    app.component('m-fields-data-source-fields', DataSourceFields);
+    app.component('m-fields-key-value', KeyValue);
   },
 };

package/src/initService.ts

@@ -2,9 +2,10 @@ import type { ExtractPropTypes } from 'vue';
 import { onUnmounted, toRaw, watch } from 'vue';
 
 import type { EventOption } from '@tmagic/core';
-import type { CodeBlockContent, Id, MApp, MNode, MPage } from '@tmagic/schema';
+import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage } from '@tmagic/schema';
 
-import { createCodeBlockTarget } from './utils/dep';
+import type { Target } from './services/dep';
+import { createCodeBlockTarget, createDataSourceTarget } from './utils/dep';
 import editorProps from './editorProps';
 import type { Services } from './type';
 
@@ -107,8 +108,31 @@ export const initServiceState = (
 export const initServiceEvents = (
   props: Readonly<LooseRequired<Readonly<ExtractPropTypes<typeof editorProps>>>>,
   emit: (event: 'props-panel-mounted' | 'update:modelValue', ...args: any[]) => void,
-  { editorService, codeBlockService, depService }: Services,
+  { editorService, codeBlockService, dataSourceService, depService }: Services,
 ) => {
+  const targetAddHandler = (target: Target) => {
+    if (target.type !== 'data-source') return;
+
+    const root = editorService.get('root');
+    if (!root) return;
+
+    if (!root.dataSourceDeps) {
+      root.dataSourceDeps = {};
+    }
+
+    root.dataSourceDeps[target.id] = target.deps;
+  };
+
+  const targetRemoveHandler = (id: string | number) => {
+    const root = editorService.get('root');
+    if (!root?.dataSourceDeps) return;
+
+    delete root.dataSourceDeps[id];
+  };
+
+  depService.on('add-target', targetAddHandler);
+  depService.on('remove-target', targetRemoveHandler);
+
   const rootChangeHandler = async (value: MApp, preValue?: MApp | null) => {
     const nodeId = editorService.get('node')?.id || props.defaultSelected;
     let node;
@@ -131,8 +155,10 @@ export const initServiceEvents = (
     }
 
     value.codeBlocks = value.codeBlocks || {};
+    value.dataSources = value.dataSources || [];
 
     codeBlockService.setCodeDsl(value.codeBlocks);
+    dataSourceService.set('dataSources', value.dataSources);
 
     depService.removeTargets('code-block');
 
@@ -140,10 +166,15 @@ export const initServiceEvents = (
       depService.addTarget(createCodeBlockTarget(id, code));
     });
 
+    value.dataSources.forEach((ds) => {
+      depService.addTarget(createDataSourceTarget(ds.id, ds));
+    });
+
     if (value && Array.isArray(value.items)) {
       depService.collect(value.items, true);
     } else {
       depService.clear();
+      delete value.dataSourceDeps;
     }
   };
 
@@ -185,7 +216,28 @@ export const initServiceEvents = (
   codeBlockService.on('addOrUpdate', codeBlockAddOrUpdateHandler);
   codeBlockService.on('remove', codeBlockRemoveHandler);
 
+  const dataSourceAddHandler = (config: DataSourceSchema) => {
+    depService.addTarget(createDataSourceTarget(config.id, config));
+  };
+
+  const dataSourceUpdateHandler = (config: DataSourceSchema) => {
+    if (config.title) {
+      depService.getTarget(config.id)!.name = config.title;
+    }
+  };
+
+  const dataSourceRemoveHandler = (id: string) => {
+    depService.removeTarget(id);
+  };
+
+  dataSourceService.on('add', dataSourceAddHandler);
+  dataSourceService.on('update', dataSourceUpdateHandler);
+  dataSourceService.on('remove', dataSourceRemoveHandler);
+
   onUnmounted(() => {
+    depService.off('add-target', targetAddHandler);
+    depService.off('remove-target', targetRemoveHandler);
+
     editorService.off('history-change', historyChangeHandler);
     editorService.off('root-change', rootChangeHandler);
     editorService.off('add', nodeAddHandler);
@@ -194,5 +246,9 @@ export const initServiceEvents = (
 
     codeBlockService.off('addOrUpdate', codeBlockAddOrUpdateHandler);
     codeBlockService.off('remove', codeBlockRemoveHandler);
+
+    dataSourceService.off('add', dataSourceAddHandler);
+    dataSourceService.off('update', dataSourceUpdateHandler);
+    dataSourceService.off('remove', dataSourceRemoveHandler);
   });
 };

package/src/layouts/sidebar/LayerPanel.vue

@@ -87,6 +87,8 @@ const clicked = ref(false);
 
 const treeProps = {
   children: 'items',
+  label: 'name',
+  value: 'id',
   disabled: (data: MNode) => Boolean(data.items?.length),
   class: (data: MNode) => {
     if (clicked.value || isPage(data)) return '';

package/src/layouts/sidebar/Sidebar.vue

@@ -85,7 +85,7 @@
 
 <script lang="ts" setup name="MEditorSidebar">
 import { computed, ref, watch } from 'vue';
-import { Coin, EditPen, Files } from '@element-plus/icons-vue';
+import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
 import { getConfig } from '@tmagic/design';
 
@@ -94,16 +94,17 @@ import type { MenuButton, MenuComponent, SideComponent, SideItem } from '@editor
 import { SideBarData } from '@editor/type';
 
 import CodeBlockList from './code-block/CodeBlockList.vue';
+import DataSourceListPanel from './data-source/DataSourceListPanel.vue';
 import ComponentListPanel from './ComponentListPanel.vue';
 import LayerPanel from './LayerPanel.vue';
 
 const props = withDefaults(
   defineProps<{
-    data?: SideBarData;
+    data: SideBarData;
     layerContentMenu: (MenuButton | MenuComponent)[];
   }>(),
   {
-    data: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block'] }),
+    data: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block', 'data-source'] }),
   },
 );
 
@@ -117,7 +118,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
     'component-list': {
       $key: 'component-list',
       type: 'component',
-      icon: Coin,
+      icon: Goods,
       text: '组件',
       component: ComponentListPanel,
       slots: {},
@@ -125,7 +126,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
     layer: {
       $key: 'layer',
       type: 'component',
-      icon: Files,
+      icon: List,
       text: '已选组件',
       props: {
         layerContentMenu: props.layerContentMenu,
@@ -141,6 +142,14 @@ const getItemConfig = (data: SideItem): SideComponent => {
       component: CodeBlockList,
       slots: {},
     },
+    'data-source': {
+      $key: 'data-source',
+      type: 'component',
+      icon: Coin,
+      text: '数据源',
+      component: DataSourceListPanel,
+      slots: {},
+    },
   };
 
   return typeof data === 'string' ? map[data] : data;

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

@@ -18,6 +18,7 @@
       :default-expanded-keys="expandedKeys"
       :expand-on-click-node="false"
       :data="codeList"
+      :props="treeProps"
       :highlight-current="true"
       :filter-node-method="filterNode"
       @node-click="clickHandler"
@@ -75,6 +76,12 @@ const props = defineProps<{
   paramsColConfig?: ColumnConfig;
 }>();
 
+const treeProps = {
+  children: 'children',
+  label: 'name',
+  value: 'id',
+};
+
 const { codeBlockService, depService, editorService } = inject<Services>('services') || {};
 
 // 代码块列表