@tmagic/editor 1.4.8 → 1.4.10

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -0,0 +1,134 @@
+<template>
+  <TMagicScrollbar>
+    <slot name="component-list-panel-header"></slot>
+
+    <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
+      <SearchInput @search="filterTextChangeHandler"></SearchInput>
+      <template v-for="(group, index) in list">
+        <TMagicCollapseItem v-if="group.items && group.items.length" :key="index" :name="`${index}`">
+          <template #title><MIcon :icon="Grid"></MIcon>{{ group.title }}</template>
+          <div
+            v-for="item in group.items"
+            class="component-item"
+            draggable="true"
+            :key="item.type"
+            @click="appendComponent(item)"
+            @dragstart="dragstartHandler(item, $event)"
+            @dragend="dragendHandler"
+            @drag="dragHandler"
+          >
+            <slot name="component-list-item" :component="item">
+              <TMagicTooltip placement="right" :disabled="!Boolean(item.desc)" :content="item.desc">
+                <MIcon :icon="item.icon"></MIcon>
+              </TMagicTooltip>
+              <span :title="item.text">{{ item.text }}</span>
+            </slot>
+          </div>
+        </TMagicCollapseItem>
+      </template>
+    </TMagicCollapse>
+  </TMagicScrollbar>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
+import { Grid } from '@element-plus/icons-vue';
+import serialize from 'serialize-javascript';
+
+import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
+import { removeClassNameByClassName } from '@tmagic/utils';
+
+import MIcon from '@editor/components/Icon.vue';
+import SearchInput from '@editor/components/SearchInput.vue';
+import {
+  type ComponentGroup,
+  type ComponentItem,
+  ComponentListPanelSlots,
+  DragType,
+  type Services,
+  type StageOptions,
+} from '@editor/type';
+
+defineSlots<ComponentListPanelSlots>();
+
+defineOptions({
+  name: 'MEditorComponentListPanel',
+});
+
+const searchText = ref('');
+
+const filterTextChangeHandler = (v: string) => {
+  searchText.value = v;
+};
+
+const services = inject<Services>('services');
+const stageOptions = inject<StageOptions>('stageOptions');
+
+const stage = computed(() => services?.editorService.get('stage'));
+const list = computed(() =>
+  services?.componentListService.getList().map((group: ComponentGroup) => ({
+    ...group,
+    items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
+  })),
+);
+const collapseValue = computed(() =>
+  Array(list.value?.length)
+    .fill(1)
+    .map((x, i) => `${i}`),
+);
+
+let timeout: NodeJS.Timeout | undefined;
+let clientX: number;
+let clientY: number;
+
+const appendComponent = ({ text, type, data = {} }: ComponentItem): void => {
+  services?.editorService.add({
+    name: text,
+    type,
+    ...data,
+  });
+};
+
+const dragstartHandler = ({ text, type, data = {} }: ComponentItem, e: DragEvent) => {
+  e.dataTransfer?.setData(
+    'text/json',
+    serialize({
+      dragType: DragType.COMPONENT_LIST,
+      data: {
+        name: text,
+        type,
+        ...data,
+      },
+    }),
+  );
+};
+
+const dragendHandler = () => {
+  if (timeout) {
+    globalThis.clearTimeout(timeout);
+    timeout = undefined;
+  }
+  const doc = stage.value?.renderer.getDocument();
+  if (doc && stageOptions?.containerHighlightClassName) {
+    removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
+  }
+  clientX = 0;
+  clientY = 0;
+};
+
+const dragHandler = (e: DragEvent) => {
+  if (e.clientX !== clientX || e.clientY !== clientY) {
+    clientX = e.clientX;
+    clientY = e.clientY;
+    if (timeout) {
+      globalThis.clearTimeout(timeout);
+      timeout = undefined;
+    }
+    return;
+  }
+
+  if (timeout || !stage.value) return;
+
+  timeout = stage.value.delayedMarkContainer(e);
+};
+</script>

package/src/layouts/sidebar/Sidebar.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="m-editor-sidebar" v-if="data.type === 'tabs' && data.items.length">
+    <div class="m-editor-sidebar-header">
+      <div
+        class="m-editor-sidebar-header-item"
+        v-for="(config, index) in sideBarItems"
+        v-show="!floatBoxStates[config.$key]?.status"
+        draggable="true"
+        :key="config.$key ?? index"
+        :class="{ 'is-active': activeTabName === config.text }"
+        :style="config.tabStyle || {}"
+        @click="activeTabName = config.text || config.$key || `${index}`"
+        @dragstart="dragstartHandler"
+        @dragend="dragendHandler(config.$key, $event)"
+      >
+        <MIcon v-if="config.icon" :icon="config.icon"></MIcon>
+        <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
+      </div>
+    </div>
+    <div
+      class="m-editor-sidebar-content"
+      v-for="(config, index) in sideBarItems"
+      :key="config.$key ?? index"
+      v-show="[config.text, config.$key, `${index}`].includes(activeTabName)"
+    >
+      <component
+        v-if="config && !floatBoxStates[config.$key]?.status"
+        :is="config.component"
+        v-bind="config.props || {}"
+        v-on="config?.listeners || {}"
+      >
+        <template
+          #component-list-panel-header
+          v-if="config.$key === 'component-list' || config.slots?.componentListPanelHeader"
+        >
+          <slot v-if="config.$key === 'component-list'" name="component-list-panel-header"></slot>
+          <component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
+        </template>
+
+        <template
+          #component-list-item="{ component }"
+          v-if="config.$key === 'component-list' || config.slots?.componentListItem"
+        >
+          <slot v-if="config.$key === 'component-list'" name="component-list-item" :component="component"></slot>
+          <component
+            v-else-if="config.slots?.componentListItem"
+            :is="config.slots.componentListItem"
+            :component="component"
+          />
+        </template>
+
+        <template #layer-panel-header v-if="config.$key === 'layer' || config.slots?.layerPanelHeader">
+          <slot v-if="config.$key === 'layer'" name="layer-panel-header"></slot>
+          <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
+        </template>
+
+        <template #code-block-panel-header v-if="config.$key === 'code-block' || config.slots?.codeBlockPanelHeader">
+          <slot v-if="config.$key === 'code-block'" name="code-block-panel-header"></slot>
+          <component v-else-if="config.slots?.codeBlockPanelHeader" :is="config.slots.codeBlockPanelHeader" />
+        </template>
+
+        <template
+          #code-block-panel-tool="{ id, data }"
+          v-if="config.$key === 'code-block' || config.slots?.codeBlockPanelTool"
+        >
+          <slot v-if="config.$key === 'code-block'" name="code-block-panel-tool" :id="id" :data="data"></slot>
+          <component v-else-if="config.slots?.codeBlockPanelTool" :is="config.slots.codeBlockPanelTool" />
+        </template>
+
+        <template #code-block-panel-search v-if="config.$key === 'code-block' || config.slots?.codeBlockPanelSearch">
+          <slot v-if="config.$key === 'code-block'" name="code-block-panel-search"></slot>
+          <component v-else-if="config.slots?.codeBlockPanelSearch" :is="config.slots.codeBlockPanelSearch" />
+        </template>
+
+        <template
+          #layer-node-content="{ data: nodeData }"
+          v-if="config.$key === 'layer' || config.slots?.layerNodeContent"
+        >
+          <slot v-if="config.$key === 'layer'" name="layer-node-content" :data="nodeData"></slot>
+          <component v-else-if="config.slots?.layerNodeContent" :is="config.slots.layerNodeContent" :data="nodeData" />
+        </template>
+
+        <template #layer-node-label="{ data: nodeData }" v-if="config.$key === 'layer' || config.slots?.layerNodeLabel">
+          <slot v-if="config.$key === 'layer'" name="layer-node-label" :data="nodeData"></slot>
+          <component v-else-if="config.slots?.layerNodeLabel" :is="config.slots.layerNodeTool" :data="nodeData" />
+        </template>
+
+        <template #layer-node-tool="{ data: nodeData }" v-if="config.$key === 'layer' || config.slots?.layerNodeTool">
+          <slot v-if="config.$key === 'layer'" name="layer-node-tool" :data="nodeData"></slot>
+          <component v-else-if="config.slots?.layerNodeTool" :is="config.slots.layerNodeTool" :data="nodeData" />
+        </template>
+
+        <template
+          #data-source-panel-tool="{ data }"
+          v-if="config.$key === 'data-source' || config.slots?.dataSourcePanelTool"
+        >
+          <slot v-if="config.$key === 'data-source'" name="data-source-panel-tool" :data="data"></slot>
+          <component v-else-if="config.slots?.DataSourcePanelTool" :is="config.slots.DataSourcePanelTool" />
+        </template>
+
+        <template #data-source-panel-search v-if="config.$key === 'data-source' || config.slots?.dataSourcePanelSearch">
+          <slot v-if="config.$key === 'data-source'" name="data-source-panel-search"></slot>
+          <component v-else-if="config.slots?.dataSourcePanelSearch" :is="config.slots.dataSourcePanelSearch" />
+        </template>
+      </component>
+    </div>
+  </div>
+
+  <Teleport to="body">
+    <template v-for="(config, index) in sideBarItems">
+      <FloatingBox
+        :key="config.$key ?? index"
+        v-if="floatBoxStates[config.$key]?.status"
+        v-model:visible="floatBoxStates[config.$key].status"
+        v-model:height="columnLeftHeight"
+        :width="columnLeftWidth"
+        :title="config.text"
+        :position="{
+          left: floatBoxStates[config.$key].left,
+          top: floatBoxStates[config.$key].top,
+        }"
+      >
+        <template #body>
+          <div class="m-editor-slide-list-box">
+            <component
+              v-if="config && floatBoxStates[config.$key].status"
+              :is="config.component"
+              v-bind="config.props || {}"
+              v-on="config?.listeners || {}"
+            />
+          </div>
+        </template>
+      </FloatingBox>
+    </template>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, watch } from 'vue';
+import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
+
+import FloatingBox from '@editor/components/FloatingBox.vue';
+import MIcon from '@editor/components/Icon.vue';
+import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
+import { useFloatBox } from '@editor/hooks/use-float-box';
+import {
+  ColumnLayout,
+  type MenuButton,
+  type MenuComponent,
+  type Services,
+  type SideBarData,
+  type SidebarSlots,
+  type SideComponent,
+  type SideItem,
+  SideItemKey,
+} from '@editor/type';
+
+import CodeBlockListPanel from './code-block/CodeBlockListPanel.vue';
+import DataSourceListPanel from './data-source/DataSourceListPanel.vue';
+import LayerPanel from './layer/LayerPanel.vue';
+import ComponentListPanel from './ComponentListPanel.vue';
+
+defineSlots<SidebarSlots>();
+
+defineOptions({
+  name: 'MEditorSidebar',
+});
+
+const props = withDefaults(
+  defineProps<{
+    data: SideBarData;
+    layerContentMenu: (MenuButton | MenuComponent)[];
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  }>(),
+  {
+    data: () => ({
+      type: 'tabs',
+      status: '组件',
+      items: [SideItemKey.COMPONENT_LIST, SideItemKey.LAYER, SideItemKey.CODE_BLOCK, SideItemKey.DATA_SOURCE],
+    }),
+  },
+);
+
+const services = inject<Services>('services');
+
+const columnLeftWidth = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0);
+const { height: columnLeftHeight } = useEditorContentHeight();
+
+const activeTabName = ref(props.data?.status);
+
+const getItemConfig = (data: SideItem): SideComponent => {
+  const map: Record<string, SideComponent> = {
+    [SideItemKey.COMPONENT_LIST]: {
+      $key: SideItemKey.COMPONENT_LIST,
+      type: 'component',
+      icon: Goods,
+      text: '组件',
+      component: ComponentListPanel,
+      slots: {},
+    },
+    layer: {
+      $key: 'layer',
+      type: 'component',
+      icon: List,
+      text: '已选组件',
+      props: {
+        layerContentMenu: props.layerContentMenu,
+        customContentMenu: props.customContentMenu,
+      },
+      component: LayerPanel,
+      slots: {},
+    },
+    [SideItemKey.CODE_BLOCK]: {
+      $key: 'code-block',
+      type: 'component',
+      icon: EditPen,
+      text: '代码编辑',
+      component: CodeBlockListPanel,
+      slots: {},
+    },
+    [SideItemKey.DATA_SOURCE]: {
+      $key: SideItemKey.DATA_SOURCE,
+      type: 'component',
+      icon: Coin,
+      text: '数据源',
+      component: DataSourceListPanel,
+      slots: {},
+    },
+  };
+
+  return typeof data === 'string' ? map[data] : data;
+};
+
+const sideBarItems = computed(() => props.data.items.map((item) => getItemConfig(item)));
+
+watch(
+  sideBarItems,
+  (items) => {
+    services?.uiService.set('sideBarItems', items);
+  },
+  {
+    immediate: true,
+  },
+);
+
+watch(
+  () => props.data.status,
+  (status) => {
+    activeTabName.value = status || '0';
+  },
+);
+
+const slideKeys = computed(() => sideBarItems.value.map((sideBarItem) => sideBarItem.$key));
+
+const { dragstartHandler, dragendHandler, floatBoxStates, showingBoxKeys } = useFloatBox(slideKeys);
+
+watch(
+  () => showingBoxKeys.value.length,
+  () => {
+    const isActiveTabShow = showingBoxKeys.value.some(
+      (key) => activeTabName.value === sideBarItems.value.find((v) => v.$key === key)?.text,
+    );
+    if (!isActiveTabShow && activeTabName.value) return;
+    const nextSlideBarItem = sideBarItems.value.find((sideBarItem) => !showingBoxKeys.value.includes(sideBarItem.$key));
+    if (!nextSlideBarItem) {
+      activeTabName.value = '';
+      services?.uiService.set('hideSlideBar', true);
+      return;
+    }
+    services?.uiService.set('hideSlideBar', false);
+    activeTabName.value = nextSlideBarItem?.text;
+  },
+);
+
+defineExpose({
+  activeTabName,
+});
+</script>

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

@@ -0,0 +1,160 @@
+<template>
+  <Tree :data="codeList" :node-status-map="nodeStatusMap" @node-click="clickHandler">
+    <template #tree-node-label="{ data }">
+      <div
+        :class="{
+          code: data.type === 'code',
+          hook: data.type === 'key',
+          disabled: data.type === 'key' || data.type === 'code',
+        }"
+      >
+        {{ data.name }} {{ data.key ? `(${data.key})` : '' }}
+      </div>
+    </template>
+
+    <template #tree-node-tool="{ data }">
+      <TMagicTooltip v-if="data.type === 'code'" effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
+        <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.key}`)"></Icon>
+      </TMagicTooltip>
+      <TMagicTooltip v-if="data.type === 'code' && editable" effect="dark" content="删除" placement="bottom">
+        <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.key}`)"></Icon>
+      </TMagicTooltip>
+      <slot name="code-block-panel-tool" :id="data.key" :data="data"></slot>
+    </template>
+  </Tree>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+import { Close, Edit, View } from '@element-plus/icons-vue';
+
+import { DepTargetType } from '@tmagic/dep';
+import { tMagicMessage, tMagicMessageBox, TMagicTooltip } from '@tmagic/design';
+import type { Id, MNode } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import Tree from '@editor/components/Tree.vue';
+import { useFilter } from '@editor/hooks/use-filter';
+import { useNodeStatus } from '@editor/hooks/use-node-status';
+import { type CodeBlockListSlots, CodeDeleteErrorType, type Services, type TreeNodeData } from '@editor/type';
+
+defineSlots<CodeBlockListSlots>();
+
+defineOptions({
+  name: 'MEditorCodeBlockList',
+});
+
+const props = defineProps<{
+  customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
+}>();
+
+const emit = defineEmits<{
+  edit: [id: string];
+  remove: [id: string];
+}>();
+
+const services = inject<Services>('services');
+const { codeBlockService, depService, editorService } = services || {};
+
+// 代码块列表
+const codeList = computed<TreeNodeData[]>(() =>
+  Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {
+    const target = depService?.getTarget(codeId, DepTargetType.CODE_BLOCK);
+
+    // 按页面分类显示
+    const pageList: TreeNodeData[] =
+      editorService?.get('root')?.items.map((page) => ({
+        name: page.devconfig?.tabName || page.name,
+        type: 'node',
+        id: `${codeId}_${page.id}`,
+        key: page.id,
+        items: [],
+      })) || [];
+
+    // 组件节点
+    if (target) {
+      Object.entries(target.deps).forEach(([id, dep]) => {
+        const page = pageList.find((page) => page.key === dep.data?.pageId);
+        page?.items?.push({
+          name: dep.name,
+          type: 'node',
+          id: `${page.id}_${id}`,
+          key: id,
+          items: dep.keys.map((key) => {
+            const data: TreeNodeData = { name: `${key}`, id: `${target.id}_${id}_${key}`, type: 'key' };
+            return data;
+          }),
+        });
+      });
+    }
+
+    const data: TreeNodeData = {
+      id: codeId,
+      key: codeId,
+      name: code.name,
+      type: 'code',
+      codeBlockContent: codeBlockService?.getCodeContentById(codeId),
+      // 只有一个页面不显示页面分类
+      items: pageList.length > 1 ? pageList.filter((page) => page.items?.length) : pageList[0]?.items || [],
+    };
+
+    return data;
+  }),
+);
+
+const filterNode = (value: string, data: MNode): boolean => {
+  if (!value) {
+    return true;
+  }
+  return `${data.name}${data.id}`.toLocaleLowerCase().includes(value.toLocaleLowerCase());
+};
+
+const { nodeStatusMap } = useNodeStatus(codeList);
+const { filterTextChangeHandler } = useFilter(codeList, nodeStatusMap, filterNode);
+
+const editable = computed(() => codeBlockService?.getEditStatus());
+
+// 选中组件
+const selectComp = (compId: Id) => {
+  const stage = editorService?.get('stage');
+  editorService?.select(compId);
+  stage?.select(compId);
+};
+
+const clickHandler = (event: MouseEvent, data: any) => {
+  if (data.type === 'node') {
+    selectComp(data.key);
+  }
+};
+
+// 编辑代码块
+const editCode = (id: string) => {
+  emit('edit', id);
+};
+
+const deleteCode = async (id: string) => {
+  const currentCode = codeList.value.find((codeItem) => codeItem.id === id);
+  const existBinds = Boolean(currentCode?.items?.length);
+  const undeleteableList = codeBlockService?.getUndeletableList() || [];
+  if (!existBinds && !undeleteableList.includes(id)) {
+    await tMagicMessageBox.confirm('确定删除该代码块吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
+
+    // 无绑定关系，且不在不可删除列表中
+    emit('remove', id);
+  } else {
+    if (typeof props.customError === 'function') {
+      props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
+    } else {
+      tMagicMessage.error('代码块删除失败');
+    }
+  }
+};
+
+defineExpose({
+  filter: filterTextChangeHandler,
+});
+</script>

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

@@ -0,0 +1,70 @@
+<template>
+  <TMagicScrollbar class="m-editor-code-block-list m-editor-layer-panel">
+    <slot name="code-block-panel-header">
+      <div class="search-wrapper">
+        <SearchInput @search="filterTextChangeHandler"></SearchInput>
+        <TMagicButton v-if="editable" class="create-code-button" type="primary" size="small" @click="createCodeBlock"
+          >新增</TMagicButton
+        >
+        <slot name="code-block-panel-search"></slot>
+      </div>
+    </slot>
+
+    <!-- 代码块列表 -->
+    <CodeBlockList ref="codeBlockList" :custom-error="customError" @edit="editCode" @remove="deleteCode">
+      <template #code-block-panel-tool="{ id, data }">
+        <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
+      </template>
+    </CodeBlockList>
+  </TMagicScrollbar>
+
+  <CodeBlockEditor
+    v-if="codeConfig"
+    ref="codeBlockEditor"
+    :disabled="!editable"
+    :content="codeConfig"
+    @submit="submitCodeBlockHandler"
+  ></CodeBlockEditor>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue';
+
+import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
+import type { Id } from '@tmagic/schema';
+
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import SearchInput from '@editor/components/SearchInput.vue';
+import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
+import type { CodeBlockListPanelSlots, CodeDeleteErrorType, EventBus, Services } from '@editor/type';
+
+import CodeBlockList from './CodeBlockList.vue';
+
+defineSlots<CodeBlockListPanelSlots>();
+
+defineOptions({
+  name: 'MEditorCodeBlockListPanel',
+});
+
+defineProps<{
+  customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
+}>();
+
+const eventBus = inject<EventBus>('eventBus');
+const { codeBlockService } = inject<Services>('services') || {};
+
+const editable = computed(() => codeBlockService?.getEditStatus());
+
+const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } =
+  useCodeBlockEdit(codeBlockService);
+
+const codeBlockList = ref<InstanceType<typeof CodeBlockList>>();
+
+const filterTextChangeHandler = (val: string) => {
+  codeBlockList.value?.filter(val);
+};
+
+eventBus?.on('edit-code', (id: string) => {
+  editCode(id);
+});
+</script>