@tmagic/editor 1.2.14 → 1.3.0-alpha.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.14",
+  "version": "1.3.0-alpha.0",
   "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.14",
-    "@tmagic/design": "1.2.14",
-    "@tmagic/form": "1.2.14",
-    "@tmagic/schema": "1.2.14",
-    "@tmagic/stage": "1.2.14",
-    "@tmagic/utils": "1.2.14",
+    "@tmagic/core": "1.3.0-alpha.0",
+    "@tmagic/design": "1.3.0-alpha.0",
+    "@tmagic/form": "1.3.0-alpha.0",
+    "@tmagic/schema": "1.3.0-alpha.0",
+    "@tmagic/stage": "1.3.0-alpha.0",
+    "@tmagic/table": "1.3.0-alpha.0",
+    "@tmagic/utils": "1.3.0-alpha.0",
     "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.14",
-    "@tmagic/form": "1.2.14",
+    "@tmagic/design": "1.3.0-alpha.0",
+    "@tmagic/form": "1.3.0-alpha.0",
     "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/components/SearchInput.vue

@@ -5,16 +5,19 @@
     size="small"
     placeholder="输入关键字进行过滤"
     clearable
-    :prefix-icon="Search"
     @input="filterTextChangeHandler"
-  ></TMagicInput>
+  >
+    <template #prefix>
+      <TMagicIcon><Search /></TMagicIcon>
+    </template>
+  </TMagicInput>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { Search } from '@element-plus/icons-vue';
 
-import { TMagicInput } from '@tmagic/design';
+import { TMagicIcon, TMagicInput } from '@tmagic/design';
 
 const emit = defineEmits(['search']);
 

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/icons/AppManageIcon.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- app-manage cdn链接：https://cloudcache.tencent-cloud.com/qcloud/ui/static/console_aside_v4/6638c8a5-2e7f-477a-83b1-a413a0e4ba39.svg -->
-  <svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <svg xmlns="http://www.w3.org/2000/svg">
     <g fill="#7C878E" fill-rule="evenodd">
       <path d="M15.3,5.5 L8,0 L0.7,5.5 L8,11 L15.3,5.5 Z M8,2.5 L12,5.5 L8,8.5 L4,5.5 L8,2.5 Z" fill-rule="nonzero" />
       <path d="M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" />

package/src/icons/CodeIcon.vue

@@ -1,16 +1,7 @@
 <template>
   <!-- 代码icon，cdn链接：https://cloudcache.tencent-cloud.com/qcloud/ui/static/government/0d463ed5-6407-4498-8865-3d05b5e70115.svg -->
-  <svg
-    width="32px"
-    height="32px"
-    viewBox="0 0 32 32"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-  >
+  <svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
-    <title>gsd-icon-line-Universal-code</title>
-    <desc>Created with Sketch.</desc>
     <defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs>
     <g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
       <g id="03图标" transform="translate(-561.000000, -2356.000000)">

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';
@@ -47,7 +49,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 +78,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

@@ -1,16 +1,16 @@
 <template>
-  <TMagicTabs
+  <component
     v-if="data.type === 'tabs' && data.items.length"
-    class="m-editor-sidebar"
     v-model="activeTabName"
-    type="card"
-    tab-position="left"
+    class="m-editor-sidebar tmagic-design-tabs"
+    v-bind="tabsComponent.props({ type: 'card', tabPosition: 'left' })"
+    :is="tabsComponent.component"
   >
     <component
-      :is="uiComponent.component"
       v-for="(config, index) in sideBarItems"
+      v-bind="tabPaneComponent.props({ name: config.text })"
+      :is="tabPaneComponent.component"
       :key="config.$key || index"
-      :name="config.text"
     >
       <template #label>
         <div :key="config.text">
@@ -80,34 +80,36 @@
         </template>
       </component>
     </component>
-  </TMagicTabs>
+  </component>
 </template>
 
 <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, TMagicTabs } from '@tmagic/design';
+import { getConfig } from '@tmagic/design';
 
 import MIcon from '@editor/components/Icon.vue';
 import type { MenuButton, MenuComponent, SideComponent, SideItem } from '@editor/type';
 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'] }),
   },
 );
 
-const uiComponent = getConfig('components').tabPane;
+const tabPaneComponent = getConfig('components').tabPane;
+const tabsComponent = getConfig('components').tabs;
 
 const activeTabName = ref(props.data?.status);
 
@@ -116,7 +118,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
     'component-list': {
       $key: 'component-list',
       type: 'component',
-      icon: Coin,
+      icon: Goods,
       text: '组件',
       component: ComponentListPanel,
       slots: {},
@@ -124,7 +126,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
     layer: {
       $key: 'layer',
       type: 'component',
-      icon: Files,
+      icon: List,
       text: '已选组件',
       props: {
         layerContentMenu: props.layerContentMenu,
@@ -140,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;