@tmagic/editor 1.5.0-beta.9 → 1.5.0

package/src/layouts/page-bar/PageBar.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="m-editor-page-bar-tabs">
-    <SwitchTypeButton v-if="!disabledPageFragment" v-model="active" />
-
-    <PageBarScrollContainer :type="active" :page-bar-sort-options="pageBarSortOptions">
+    <PageBarScrollContainer
+      ref="pageBarScrollContainer"
+      :page-bar-sort-options="pageBarSortOptions"
+      :length="list.length"
+    >
       <template #prepend>
-        <AddButton :type="active"></AddButton>
+        <slot name="page-bar-add-button"><AddButton></AddButton></slot>
+
+        <Search v-model:query="query"></Search>
         <PageList :list="list">
           <template #page-list-popover="{ list }"><slot name="page-list-popover" :list="list"></slot></template>
         </PageList>
@@ -13,8 +17,9 @@
       <div
         v-for="item in list"
         class="m-editor-page-bar-item"
+        ref="pageBarItems"
         :key="item.id"
-        :page-id="item.id"
+        :data-page-id="item.id"
         :class="{ active: page?.id === item.id }"
         @click="switchPage(item.id)"
       >
@@ -68,89 +73,59 @@ import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { type Id, type MPage, type MPageFragment, NodeType } from '@tmagic/core';
 import { TMagicIcon, TMagicPopover } from '@tmagic/design';
-import { isPage, isPageFragment } from '@tmagic/utils';
 
 import ToolButton from '@editor/components/ToolButton.vue';
 import type { PageBarSortOptions, Services } from '@editor/type';
-import { getPageFragmentList, getPageList } from '@editor/utils';
 
 import AddButton from './AddButton.vue';
 import PageBarScrollContainer from './PageBarScrollContainer.vue';
 import PageList from './PageList.vue';
-import SwitchTypeButton from './SwitchTypeButton.vue';
+import Search from './Search.vue';
 
 defineOptions({
   name: 'MEditorPageBar',
 });
 
-defineProps<{
-  disabledPageFragment: boolean;
-  pageBarSortOptions?: PageBarSortOptions;
-}>();
-
-const active = ref<NodeType.PAGE | NodeType.PAGE_FRAGMENT>(NodeType.PAGE);
+const props = withDefaults(
+  defineProps<{
+    disabledPageFragment: boolean;
+    pageBarSortOptions?: PageBarSortOptions;
+    filterFunction?: (page: MPage | MPageFragment, keyword: string) => boolean;
+  }>(),
+  {
+    filterFunction: (page, keyword) => page.name?.includes(keyword) || `${page.id}`.includes(keyword),
+  },
+);
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
 const root = computed(() => editorService?.get('root'));
 const page = computed(() => editorService?.get('page'));
-const pageList = computed(() => getPageList(root.value));
-const pageFragmentList = computed(() => getPageFragmentList(root.value));
 
-const list = computed(() => (active.value === NodeType.PAGE ? pageList.value : pageFragmentList.value));
-
-const activePage = ref<Id>('');
-const activePageFragment = ref<Id>('');
-
-watch(
-  page,
-  (page) => {
-    if (!page) {
-      if (active.value === NodeType.PAGE) {
-        activePage.value = '';
-      }
-      if (active.value === NodeType.PAGE_FRAGMENT) {
-        activePageFragment.value = '';
-      }
-      return;
-    }
-
-    if (isPage(page)) {
-      activePage.value = page?.id;
-      if (active.value !== NodeType.PAGE) {
-        active.value = NodeType.PAGE;
-      }
-    } else if (isPageFragment(page)) {
-      activePageFragment.value = page?.id;
-      if (active.value !== NodeType.PAGE_FRAGMENT) {
-        active.value = NodeType.PAGE_FRAGMENT;
-      }
-    }
-  },
-  {
-    immediate: true,
-  },
-);
+const query = ref<{
+  pageType: NodeType[];
+  keyword: string;
+}>({
+  pageType: [NodeType.PAGE, NodeType.PAGE_FRAGMENT],
+  keyword: '',
+});
 
-watch(active, (active) => {
-  if (active === NodeType.PAGE) {
-    if (!activePage.value && !pageList.value.length) {
-      editorService?.selectRoot();
-      return;
-    }
-    switchPage(activePage.value);
-    return;
+const list = computed(() => {
+  const { pageType, keyword } = query.value;
+  if (pageType.length === 0) {
+    return [];
   }
 
-  if (active === NodeType.PAGE_FRAGMENT) {
-    // 之前没有选中过页面片并且当前没有页面片
-    if (!activePageFragment.value && !pageFragmentList.value.length) {
-      editorService?.selectRoot();
-      return;
+  return (root.value?.items || []).filter((item) => {
+    if (pageType.includes(item.type)) {
+      if (keyword) {
+        return props.filterFunction(item, keyword);
+      }
+      return true;
     }
-    switchPage(activePageFragment.value || pageFragmentList.value[0].id);
-  }
+    return false;
+  });
 });
 
 const switchPage = (id: Id) => {
@@ -168,4 +143,42 @@ const copy = (node: MPage | MPageFragment) => {
 const remove = (node: MPage | MPageFragment) => {
   editorService?.remove(node);
 };
+
+const pageBarScrollContainer = ref<InstanceType<typeof PageBarScrollContainer>>();
+const pageBarItems = ref<HTMLDivElement[]>();
+watch(page, (page) => {
+  if (
+    !page ||
+    !pageBarScrollContainer.value?.itemsContainerWidth ||
+    !pageBarItems.value ||
+    pageBarItems.value.length < 2
+  ) {
+    return;
+  }
+
+  const firstItem = pageBarItems.value[0];
+  const lastItem = pageBarItems.value[pageBarItems.value.length - 1];
+
+  if (page.id === firstItem.dataset.pageId) {
+    pageBarScrollContainer.value.scroll('start');
+  } else if (page.id === lastItem.dataset.pageId) {
+    pageBarScrollContainer.value.scroll('end');
+  } else {
+    const pageItem = pageBarItems.value.find((item) => item.dataset.pageId === page.id);
+    if (!pageItem) {
+      return;
+    }
+
+    const pageItemRect = pageItem.getBoundingClientRect();
+    const offsetLeft = pageItemRect.left - firstItem.getBoundingClientRect().left;
+    const { itemsContainerWidth } = pageBarScrollContainer.value;
+
+    const left = itemsContainerWidth - offsetLeft - pageItemRect.width;
+
+    const translateLeft = pageBarScrollContainer.value.getTranslateLeft();
+    if (offsetLeft + translateLeft < 0 || offsetLeft + pageItemRect.width > itemsContainerWidth - translateLeft) {
+      pageBarScrollContainer.value.scrollTo(left);
+    }
+  }
+});
 </script>

package/src/layouts/page-bar/PageBarScrollContainer.vue

@@ -1,42 +1,34 @@
 <template>
   <div class="m-editor-page-bar" ref="pageBar">
     <slot name="prepend"></slot>
-
-    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')">
-      <Icon :icon="ArrowLeftBold"></Icon>
+    <div v-if="length" class="m-editor-page-bar-items" ref="itemsContainer">
+      <slot></slot>
     </div>
 
     <div
-      v-if="(type === NodeType.PAGE && pageLength) || (type === NodeType.PAGE_FRAGMENT && pageFragmentLength)"
-      class="m-editor-page-bar-items"
-      ref="itemsContainer"
-      :style="`width: ${itemsContainerWidth}px`"
+      v-if="canScroll"
+      class="m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-item-left-icon"
+      @click="scroll('left')"
     >
-      <slot></slot>
+      <Icon :icon="ArrowLeftBold"></Icon>
     </div>
 
-    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('right')">
+    <div
+      v-if="canScroll"
+      class="m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-item-right-icon"
+      @click="scroll('right')"
+    >
       <Icon :icon="ArrowRightBold"></Icon>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {
-  computed,
-  type ComputedRef,
-  inject,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-  type WatchStopHandle,
-} from 'vue';
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
-import Sortable, { SortableEvent } from 'sortablejs';
+import Sortable, { type SortableEvent } from 'sortablejs';
 
-import { Id, NodeType } from '@tmagic/core';
+import type { Id } from '@tmagic/core';
 
 import Icon from '@editor/components/Icon.vue';
 import type { PageBarSortOptions, Services } from '@editor/type';
@@ -46,8 +38,8 @@ defineOptions({
 });
 
 const props = defineProps<{
-  type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
   pageBarSortOptions?: PageBarSortOptions;
+  length: number;
 }>();
 
 const services = inject<Services>('services');
@@ -63,11 +55,12 @@ const showPageListButton = computed(() => uiService?.get('showPageListButton'));
 const itemsContainerWidth = ref(0);
 
 const setCanScroll = () => {
-  // 减去新增、左移、右移三个按钮的宽度
+  // 减去新增、搜索、页面列表、左移、右移5个按钮的宽度
   // 37 = icon width 16 + padding 10 * 2 + border-right 1
   itemsContainerWidth.value =
     (pageBar.value?.clientWidth || 0) -
     37 * 2 -
+    37 -
     (showAddPageButton.value ? 37 : 21) -
     (showPageListButton.value ? 37 : 0);
 
@@ -94,99 +87,92 @@ onBeforeUnmount(() => {
 let translateLeft = 0;
 
 const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
-  if (!itemsContainer.value) return;
+  if (!itemsContainer.value || !canScroll.value) return;
 
   const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
 
   if (type === 'left') {
-    translateLeft += 100;
-
-    if (translateLeft > 0) {
-      translateLeft = 0;
-    }
+    scrollTo(translateLeft + 200);
   } else if (type === 'right') {
-    translateLeft -= 100;
-
-    if (-translateLeft > maxScrollLeft) {
-      translateLeft = -maxScrollLeft;
-    }
+    scrollTo(translateLeft - 200);
   } else if (type === 'start') {
-    translateLeft = 0;
+    scrollTo(0);
   } else if (type === 'end') {
-    translateLeft = -maxScrollLeft;
+    scrollTo(-maxScrollLeft);
+  }
+};
+
+const scrollTo = (value: number) => {
+  if (!itemsContainer.value || !canScroll.value) return;
+  const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+
+  if (value >= 0) {
+    value = 0;
   }
 
+  if (-value > maxScrollLeft) {
+    value = -maxScrollLeft;
+  }
+
+  translateLeft = value;
+
   itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
 };
 
-const pageLength = computed(() => editorService?.get('pageLength') || 0);
-const pageFragmentLength = computed(() => editorService?.get('pageFragmentLength') || 0);
-
-const crateWatchLength = (length: ComputedRef<number>) =>
-  watch(
-    length,
-    (length = 0, preLength = 0) => {
-      setTimeout(() => {
-        setCanScroll();
-        if (length < preLength) {
+watch(
+  () => props.length,
+  (length = 0, preLength = 0) => {
+    setTimeout(() => {
+      setCanScroll();
+      nextTick(() => {
+        if (length < preLength || preLength === 0) {
           scroll('start');
         } else {
           scroll('end');
         }
-        if (length > 1) {
-          const el = document.querySelector('.m-editor-page-bar-items') as HTMLElement;
-          let beforeDragList: Id[] = [];
-          const options = {
-            ...{
-              dataIdAttr: 'page-id', // 获取排序后的数据
-              onStart: async (event: SortableEvent) => {
-                if (typeof props.pageBarSortOptions?.beforeStart === 'function') {
-                  await props.pageBarSortOptions.beforeStart(event, sortable);
-                }
-                beforeDragList = sortable.toArray();
-              },
-              onUpdate: async (event: SortableEvent) => {
-                await editorService?.sort(
-                  beforeDragList[event.oldIndex as number],
-                  beforeDragList[event.newIndex as number],
-                );
-                if (typeof props.pageBarSortOptions?.afterUpdate === 'function') {
-                  await props.pageBarSortOptions.afterUpdate(event, sortable);
-                }
-              },
+      });
+      if (length > 1) {
+        const el = document.querySelector('.m-editor-page-bar-items') as HTMLElement;
+        let beforeDragList: Id[] = [];
+        const options = {
+          ...{
+            dataIdAttr: 'page-id', // 获取排序后的数据
+            onStart: async (event: SortableEvent) => {
+              if (typeof props.pageBarSortOptions?.beforeStart === 'function') {
+                await props.pageBarSortOptions.beforeStart(event, sortable);
+              }
+              beforeDragList = sortable.toArray();
             },
-            ...{
-              ...(props.pageBarSortOptions ? props.pageBarSortOptions : {}),
+            onUpdate: async (event: SortableEvent) => {
+              await editorService?.sort(
+                beforeDragList[event.oldIndex as number],
+                beforeDragList[event.newIndex as number],
+              );
+              if (typeof props.pageBarSortOptions?.afterUpdate === 'function') {
+                await props.pageBarSortOptions.afterUpdate(event, sortable);
+              }
             },
-          };
-          if (!el) return;
-          const sortable = new Sortable(el, options);
-        }
-      });
-    },
-    {
-      immediate: true,
-    },
-  );
-
-let unWatchPageLength: WatchStopHandle | null;
-let unWatchPageFragmentLength: WatchStopHandle | null;
-
-watch(
-  () => props.type,
-  (type) => {
-    if (type === NodeType.PAGE) {
-      unWatchPageFragmentLength?.();
-      unWatchPageFragmentLength = null;
-      unWatchPageLength = crateWatchLength(pageLength);
-    } else {
-      unWatchPageLength?.();
-      unWatchPageLength = null;
-      unWatchPageFragmentLength = crateWatchLength(pageFragmentLength);
-    }
+          },
+          ...{
+            ...(props.pageBarSortOptions ? props.pageBarSortOptions : {}),
+          },
+        };
+        if (!el) return;
+        const sortable = new Sortable(el, options);
+      }
+    });
   },
   {
     immediate: true,
   },
 );
+
+defineExpose({
+  itemsContainerWidth,
+  scroll,
+  scrollTo,
+  getTranslateLeft() {
+    return translateLeft;
+  },
+});
 </script>

package/src/layouts/page-bar/PageList.vue

@@ -18,6 +18,7 @@
             :data="{
               type: 'button',
               text: item.devconfig?.tabName || item.name || item.id,
+              className: item.id === page?.id ? 'active' : '',
               handler: () => switchPage(item.id),
             }"
             :key="index"
@@ -47,7 +48,7 @@ defineOptions({
 });
 
 defineProps<{
-  list: MPage[] | MPageFragment[];
+  list: (MPage | MPageFragment)[];
 }>();
 
 const services = inject<Services>('services');
@@ -55,7 +56,8 @@ const uiService = services?.uiService;
 const editorService = services?.editorService;
 
 const showPageListButton = computed(() => uiService?.get('showPageListButton'));
-const switchPage = (id: Id) => {
-  editorService?.select(id);
+const page = computed(() => editorService?.get('page'));
+const switchPage = async (id: Id) => {
+  await editorService?.select(id);
 };
 </script>

package/src/layouts/page-bar/Search.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-search">
+    <Icon :icon="Search" @click="visible = !visible" :class="{ 'icon-active': visible }"></Icon>
+    <Teleport to=".m-editor-page-bar-tabs" v-if="visible">
+      <MForm
+        v-if="query"
+        class="m-editor-page-bar-search-panel"
+        :inline="true"
+        :config="formConfig"
+        :init-values="query"
+        :prevent-submit-default="true"
+        @change="onFormChange"
+      ></MForm>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Search } from '@element-plus/icons-vue';
+
+import { NodeType } from '@tmagic/core';
+import { createForm, MForm } from '@tmagic/form';
+
+import Icon from '@editor/components/Icon.vue';
+
+interface Query {
+  pageType: NodeType[];
+  keyword: string;
+}
+
+const emit = defineEmits<{
+  search: [value: Query];
+}>();
+
+const query = defineModel<Query>('query');
+
+const formConfig = createForm([
+  {
+    type: 'checkbox-group',
+    name: 'pageType',
+    options: [
+      {
+        value: NodeType.PAGE,
+        text: '页面',
+      },
+      {
+        value: NodeType.PAGE_FRAGMENT,
+        text: '页面片段',
+      },
+    ],
+  },
+  {
+    name: 'keyword',
+    type: 'text',
+    placeholder: '请输入关键字',
+    clearable: true,
+  },
+]);
+
+const visible = ref(false);
+
+const onFormChange = (values: Query) => {
+  query.value = values;
+  emit('search', values);
+};
+</script>

package/src/layouts/sidebar/Sidebar.vue

@@ -19,6 +19,7 @@
     </div>
     <div
       class="m-editor-sidebar-content"
+      :class="{ 'm-editor-dep-collecting': collecting }"
       v-for="(config, index) in sideBarItems"
       :key="config.$key ?? index"
       v-show="[config.text, config.$key, `${index}`].includes(activeTabName)"
@@ -197,6 +198,8 @@ const props = withDefaults(
 
 const services = inject<Services>('services');
 
+const collecting = computed(() => services?.depService.get('collecting'));
+
 const columnLeftWidth = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0);
 const { height: editorContentHeight } = useEditorContentHeight();
 const columnLeftHeight = ref(0);

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

@@ -19,6 +19,9 @@
     </template>
 
     <template #tree-node-tool="{ data }">
+      <TMagicTag v-if="collecting && data.type === 'code'" type="info" size="small" style="margin-right: 5px"
+        >依赖收集中</TMagicTag
+      >
       <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>
@@ -36,7 +39,7 @@ import { Close, Edit, View } from '@element-plus/icons-vue';
 
 import type { Id, MNode } from '@tmagic/core';
 import { DepTargetType } from '@tmagic/core';
-import { tMagicMessage, tMagicMessageBox, TMagicTooltip } from '@tmagic/design';
+import { tMagicMessage, tMagicMessageBox, TMagicTag, TMagicTooltip } from '@tmagic/design';
 
 import Icon from '@editor/components/Icon.vue';
 import Tree from '@editor/components/Tree.vue';
@@ -64,6 +67,8 @@ const emit = defineEmits<{
 const services = inject<Services>('services');
 const { codeBlockService, depService, editorService } = services || {};
 
+const collecting = computed(() => depService?.get('collecting'));
+
 // 代码块列表
 const codeList = computed<TreeNodeData[]>(() =>
   Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {

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

@@ -24,9 +24,9 @@
 <script setup lang="ts">
 import { inject, Ref, ref, watchEffect } from 'vue';
 
-import { DataSourceSchema } from '@tmagic/core';
+import type { DataSourceSchema } from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
-import { FormConfig, MFormBox } from '@tmagic/form';
+import { type ContainerChangeEventData, type FormConfig, MFormBox } from '@tmagic/form';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks';
@@ -46,7 +46,9 @@ const props = defineProps<{
 const boxVisible = defineModel<boolean>('visible', { default: false });
 const width = defineModel<number>('width', { default: 670 });
 
-const emit = defineEmits(['submit']);
+const emit = defineEmits<{
+  submit: [v: any, eventData: ContainerChangeEventData];
+}>();
 
 const services = inject<Services>('services');
 
@@ -63,8 +65,8 @@ watchEffect(() => {
   dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
 });
 
-const submitHandler = (values: any) => {
-  emit('submit', values);
+const submitHandler = (values: any, data: ContainerChangeEventData) => {
+  emit('submit', values, data);
 };
 
 const errorHandler = (error: any) => {

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

@@ -18,6 +18,9 @@
       </div>
     </template>
     <template #tree-node-tool="{ data }">
+      <TMagicTag v-if="collecting && data.type === 'ds'" type="info" size="small" style="margin-right: 5px"
+        >依赖收集中</TMagicTag
+      >
       <TMagicTooltip v-if="data.type === 'ds'" effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
         <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editHandler(`${data.key}`)"></Icon>
       </TMagicTooltip>
@@ -34,7 +37,7 @@ import { computed, inject } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
 import { DepData, DepTargetType, Id, MNode } from '@tmagic/core';
-import { tMagicMessageBox, TMagicTooltip } from '@tmagic/design';
+import { tMagicMessageBox, TMagicTag, TMagicTooltip } from '@tmagic/design';
 
 import Icon from '@editor/components/Icon.vue';
 import Tree from '@editor/components/Tree.vue';
@@ -60,6 +63,8 @@ const emit = defineEmits<{
 
 const { depService, editorService, dataSourceService } = inject<Services>('services') || {};
 
+const collecting = computed(() => depService?.get('collecting'));
+
 const editable = computed(() => dataSourceService?.get('editable') ?? true);
 
 const dataSources = computed(() => dataSourceService?.get('dataSources') || []);

package/src/layouts/sidebar/layer/use-node-status.ts

@@ -1,10 +1,9 @@
 import { computed, ref, watch } from 'vue';
 
 import type { Id, MNode, MPage, MPageFragment } from '@tmagic/core';
-import { getNodePath, isPage, isPageFragment } from '@tmagic/utils';
+import { getNodePath, isPage, isPageFragment, traverseNode } from '@tmagic/utils';
 
-import { LayerNodeStatus, Services } from '@editor/type';
-import { traverseNode } from '@editor/utils';
+import type { LayerNodeStatus, Services } from '@editor/type';
 import { updateStatus } from '@editor/utils/tree';
 
 const createPageNodeStatus = (page: MPage | MPageFragment, initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {