@tmagic/editor 1.3.0-alpha.2 → 1.3.0-alpha.21

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

@@ -1,35 +1,36 @@
 <template>
-  <TMagicDrawer
-    v-model="visible"
+  <MFormDrawer
+    ref="fomDrawer"
+    label-width="80px"
+    :close-on-press-escape="false"
     :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>
+    :width="size"
+    :config="dataSourceConfig"
+    :values="initValues"
+    :disabled="disabled"
+    @change="changeHandler"
+    @submit="submitHandler"
+    @error="errorHandler"
+  ></MFormDrawer>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, ref, watchEffect } from 'vue';
+import { cloneDeep, mergeWith } from 'lodash-es';
 
-import { TMagicButton, TMagicDrawer, tMagicMessage } from '@tmagic/design';
-import { MForm } from '@tmagic/form';
+import { tMagicMessage } from '@tmagic/design';
+import { MFormDrawer } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorDataSourceConfigPanel',
+});
+
 const props = defineProps<{
   title?: string;
   values: any;
+  disabled: boolean;
 }>();
 
 const type = ref('base');
@@ -42,7 +43,7 @@ const size = computed(() => globalThis.document.body.clientWidth - (services?.ui
 
 const dataSourceConfig = computed(() => services?.dataSourceService.getFormConfig(type.value) || []);
 
-const form = ref<InstanceType<typeof MForm>>();
+const fomDrawer = ref<InstanceType<typeof MFormDrawer>>();
 
 const initValues = ref({});
 
@@ -56,29 +57,33 @@ const changeHandler = (value: Record<string, any>) => {
     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);
-  }
+  initValues.value = mergeWith(
+    cloneDeep(value),
+    services?.dataSourceService.getFormValue(type.value) || {},
+    (objValue, srcValue) => {
+      if (Array.isArray(srcValue)) {
+        return srcValue;
+      }
+    },
+  );
 };
 
-const visible = ref(false);
+const submitHandler = (values: any) => {
+  emit('submit', values);
+};
 
-const hide = () => {
-  visible.value = false;
+const errorHandler = (error: any) => {
+  tMagicMessage.error(error.message);
 };
 
 defineExpose({
   show() {
-    visible.value = true;
+    fomDrawer.value?.show();
   },
 
-  hide,
+  hide() {
+    fomDrawer.value?.hide();
+  },
 });
 </script>

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

@@ -0,0 +1,145 @@
+<template>
+  <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"
+    @node-click="clickHandler"
+  >
+    <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 === 'ds', hook: data.type === 'key' }">{{
+            data.type === 'key' ? data.name : `${data.name}(${data.id})`
+          }}</span>
+          <!-- 右侧工具栏 -->
+          <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>
+            <TMagicTooltip v-if="editable" 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>
+</template>
+
+<script lang="ts" setup>
+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 { Dep, Id } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import { DepTargetType, Services } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorDataSourceList',
+});
+
+const emit = defineEmits<{
+  edit: [id: string];
+  remove: [id: string];
+}>();
+
+const { depService, editorService, dataSourceService } = inject<Services>('services') || {};
+
+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(() =>
+  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) => {
+  emit('edit', id);
+};
+
+const removeHandler = async (id: string) => {
+  await tMagicMessageBox.confirm('确定删除?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+
+  emit('remove', id);
+};
+
+// 选中组件
+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);
+  }
+};
+
+const tree = ref<InstanceType<typeof TMagicTree>>();
+
+defineExpose({
+  filter(val: string) {
+    debugger;
+    tree.value?.filter(val);
+  },
+});
+</script>

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

@@ -2,45 +2,15 @@
   <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>
+      <TMagicButton v-if="editable" 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>
+    <DataSourceList @edit="editHandler" @remove="removeHandler"></DataSourceList>
 
     <DataSourceConfigPanel
       ref="editDialog"
+      :disabled="!editable"
       :values="dataSourceValues"
       :title="typeof dataSourceValues.id !== 'undefined' ? `编辑${dataSourceValues.title}` : '新增'"
       @submit="submitDataSourceHandler"
@@ -50,38 +20,28 @@
 
 <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 { TMagicButton, TMagicScrollbar } from '@tmagic/design';
+import type { 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';
+import DataSourceList from './DataSourceList.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' })),
-    })),
-  })),
-);
+defineOptions({
+  name: 'MEditorDataSourceListPanel',
+});
+
+const { dataSourceService } = inject<Services>('services') || {};
 
 const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();
 
 const dataSourceValues = ref<Record<string, any>>({});
 
+const editable = computed(() => dataSourceService?.get('editable') ?? true);
+
 const addHandler = () => {
   if (!editDialog.value) return;
 
@@ -91,7 +51,7 @@ const addHandler = () => {
 };
 
 const editHandler = (id: string) => {
-  if (!editDialog.value || !services) return;
+  if (!editDialog.value) return;
 
   dataSourceValues.value = {
     ...dataSourceService?.getDataSourceById(id),
@@ -100,19 +60,11 @@ const editHandler = (id: string) => {
   editDialog.value.show();
 };
 
-const removeHandler = async (id: string) => {
-  await tMagicMessageBox.confirm('确定删除?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
-
+const removeHandler = (id: string) => {
   dataSourceService?.remove(id);
 };
 
 const submitDataSourceHandler = (value: DataSourceSchema) => {
-  if (!services) return;
-
   if (value.id) {
     dataSourceService?.update(value);
   } else {
@@ -122,9 +74,9 @@ const submitDataSourceHandler = (value: DataSourceSchema) => {
   editDialog.value?.hide();
 };
 
-const tree = ref<InstanceType<typeof TMagicTree>>();
+const dataSourceList = ref<InstanceType<typeof DataSourceList>>();
 
 const filterTextChangeHandler = (val: string) => {
-  tree.value?.filter(val);
+  dataSourceList.value?.filter(val);
 };
 </script>

package/src/layouts/workspace/Breadcrumb.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MEditorBreadcrumb">
+<script setup lang="ts">
 import { computed, inject } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';
@@ -16,6 +16,10 @@ import { getNodePath } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorBreadcrumb',
+});
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 

package/src/layouts/workspace/PageBar.vue

@@ -46,7 +46,7 @@
   </PageBarScrollContainer>
 </template>
 
-<script lang="ts" setup name="MEditorPageBar">
+<script lang="ts" setup>
 import { computed, inject } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
@@ -58,6 +58,10 @@ import type { Services } from '@editor/type';
 
 import PageBarScrollContainer from './PageBarScrollContainer.vue';
 
+defineOptions({
+  name: 'MEditorPageBar',
+});
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 

package/src/layouts/workspace/PageBarScrollContainer.vue

@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MEditorPageBarScrollContainer">
+<script setup lang="ts">
 import { computed, inject, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
 
@@ -36,6 +36,10 @@ import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils/editor';
 
+defineOptions({
+  name: 'MEditorPageBarScrollContainer',
+});
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 const uiService = services?.uiService;

package/src/layouts/workspace/Stage.vue

@@ -2,6 +2,7 @@
   <ScrollViewer
     class="m-editor-stage"
     ref="stageWrap"
+    tabindex="-1"
     :width="stageRect?.width"
     :height="stageRect?.height"
     :wrap-width="stageContainerRect?.width"
@@ -11,6 +12,7 @@
       width: 60,
       height: 50,
     }"
+    @click="stageWrap?.container?.focus()"
   >
     <div
       class="m-editor-stage-container"
@@ -26,7 +28,7 @@
   </ScrollViewer>
 </template>
 
-<script lang="ts" setup name="MEditorStage">
+<script lang="ts" setup>
 import { computed, inject, markRaw, nextTick, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
@@ -34,11 +36,16 @@ import type { MContainer } from '@tmagic/schema';
 import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
+import { useStage } from '@editor/hooks/use-stage';
 import { Layout, MenuButton, MenuComponent, Services, StageOptions } from '@editor/type';
-import { useStage } from '@editor/utils/stage';
+import { getConfig } from '@editor/utils/config';
 
 import ViewerMenu from './ViewerMenu.vue';
 
+defineOptions({
+  name: 'MEditorStage',
+});
+
 defineProps<{
   stageContentMenu: (MenuButton | MenuComponent)[];
 }>();
@@ -70,6 +77,10 @@ watchEffect(() => {
 
   stage = useStage(stageOptions);
 
+  stage.on('select', () => {
+    stageWrap.value?.container?.focus();
+  });
+
   services?.editorService.set('stage', markRaw(stage));
 
   stage?.mount(stageContainer.value);
@@ -116,13 +127,17 @@ const resizeObserver = new ResizeObserver((entries) => {
 });
 
 onMounted(() => {
-  stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
+  if (stageWrap.value?.container) {
+    resizeObserver.observe(stageWrap.value.container);
+    services?.keybindingService.registeEl('stage', stageWrap.value.container);
+  }
 });
 
 onUnmounted(() => {
   stage?.destroy();
   resizeObserver.disconnect();
   services?.editorService.set('stage', null);
+  services?.keybindingService.unregisteEl('stage');
 });
 
 const contextmenuHandler = (e: MouseEvent) => {
@@ -132,9 +147,8 @@ const contextmenuHandler = (e: MouseEvent) => {
 
 const dragoverHandler = (e: DragEvent) => {
   e.preventDefault();
-  if (e.dataTransfer) {
-    e.dataTransfer.dropEffect = 'move';
-  }
+  if (!e.dataTransfer) return;
+  e.dataTransfer.dropEffect = 'move';
 };
 
 const dropHandler = async (e: DragEvent) => {
@@ -149,8 +163,16 @@ const dropHandler = async (e: DragEvent) => {
   }
 
   if (e.dataTransfer && parent && stageContainer.value && stage) {
-    // eslint-disable-next-line no-eval
-    const config = eval(`(${e.dataTransfer.getData('data')})`);
+    const parseDSL = getConfig('parseDSL');
+
+    const data = e.dataTransfer.getData('text/json');
+
+    if (!data) return;
+
+    const config = parseDSL(`(${data})`);
+
+    if (!config) return;
+
     const layout = await services?.editorService.getLayout(parent);
 
     const containerRect = stageContainer.value.getBoundingClientRect();

package/src/layouts/workspace/ViewerMenu.vue

@@ -2,18 +2,24 @@
   <content-menu :menu-data="menuData" ref="menu"></content-menu>
 </template>
 
-<script lang="ts" setup name="MEditorViewerMenu">
+<script lang="ts" setup>
 import { computed, inject, markRaw, ref, watch } from 'vue';
-import { Bottom, CopyDocument, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
+import { Bottom, Top } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 import { isPage } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
+import CenterIcon from '@editor/icons/CenterIcon.vue';
 import storageService from '@editor/services/storage';
 import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
+import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from '@editor/utils/content-menu';
 import { COPY_STORAGE_KEY } from '@editor/utils/editor';
 
+defineOptions({
+  name: 'MEditorViewerMenu',
+});
+
 const props = withDefaults(
   defineProps<{ isMultiSelect?: boolean; stageContentMenu: (MenuButton | MenuComponent)[] }>(),
   { isMultiSelect: false },
@@ -28,42 +34,20 @@ const canCenter = ref(false);
 const node = computed(() => editorService?.get('node'));
 const nodes = computed(() => editorService?.get('nodes'));
 const parent = computed(() => editorService?.get('parent'));
-const stage = computed(() => editorService?.get('stage'));
 
 const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
     text: '水平居中',
+    icon: markRaw(CenterIcon),
     display: () => canCenter.value,
     handler: () => {
       if (!nodes.value) return;
       editorService?.alignCenter(nodes.value);
     },
   },
-  {
-    type: 'button',
-    text: '复制',
-    icon: markRaw(CopyDocument),
-    handler: () => {
-      nodes.value && editorService?.copy(nodes.value);
-      canPaste.value = true;
-    },
-  },
-  {
-    type: 'button',
-    text: '粘贴',
-    icon: markRaw(DocumentCopy),
-    display: () => canPaste.value,
-    handler: () => {
-      const rect = menu.value?.$el.getBoundingClientRect();
-      const parentRect = stage.value?.container?.getBoundingClientRect();
-      const initialLeft = (rect?.left || 0) - (parentRect?.left || 0);
-      const initialTop = (rect?.top || 0) - (parentRect?.top || 0);
-
-      if (!nodes.value || nodes.value.length === 0) return;
-      editorService?.paste({ left: initialLeft, top: initialTop });
-    },
-  },
+  useCopyMenu(),
+  usePasteMenu(menu),
   {
     type: 'divider',
     direction: 'horizontal',
@@ -93,6 +77,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
     text: '置顶',
+    icon: markRaw(Top),
     display: () => !isPage(node.value) && !props.isMultiSelect,
     handler: () => {
       editorService?.moveLayer(LayerOffset.TOP);
@@ -101,25 +86,19 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
     text: '置底',
+    icon: markRaw(Bottom),
     display: () => !isPage(node.value) && !props.isMultiSelect,
     handler: () => {
       editorService?.moveLayer(LayerOffset.BOTTOM);
     },
   },
+  useMoveToMenu(services),
   {
     type: 'divider',
     direction: 'horizontal',
     display: () => !isPage(node.value) && !props.isMultiSelect,
   },
-  {
-    type: 'button',
-    text: '删除',
-    icon: Delete,
-    display: () => !isPage(node.value),
-    handler: () => {
-      nodes.value && editorService?.remove(nodes.value);
-    },
-  },
+  useDeleteMenu(),
   {
     type: 'divider',
     direction: 'horizontal',