@tmagic/editor 1.4.8 → 1.4.10

package/src/layouts/PropsPanel.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="m-editor-props-panel" v-show="nodes.length === 1">
+    <slot name="props-panel-header"></slot>
+    <MForm
+      ref="configForm"
+      :class="propsPanelSize"
+      :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
+      :size="propsPanelSize"
+      :init-values="values"
+      :config="curFormConfig"
+      :extend-state="extendState"
+      @change="submit"
+      @error="errorHandler"
+    ></MForm>
+
+    <TMagicButton
+      v-if="!disabledShowSrc"
+      class="m-editor-props-panel-src-icon"
+      circle
+      size="large"
+      title="源码"
+      :type="showSrc ? 'primary' : ''"
+      @click="showSrc = !showSrc"
+    >
+      <MIcon :icon="DocumentIcon"></MIcon>
+    </TMagicButton>
+
+    <CodeEditor
+      v-if="showSrc"
+      class="m-editor-props-panel-src-code"
+      :height="`${editorContentHeight}px`"
+      :init-values="values"
+      :options="codeOptions"
+      :parse="true"
+      @save="saveCode"
+    ></CodeEditor>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
+import { Document as DocumentIcon } from '@element-plus/icons-vue';
+
+import { TMagicButton } from '@tmagic/design';
+import type { FormState, FormValue } from '@tmagic/form';
+import { MForm } from '@tmagic/form';
+import type { MNode } from '@tmagic/schema';
+
+import MIcon from '@editor/components/Icon.vue';
+import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
+import type { PropsPanelSlots, Services } from '@editor/type';
+
+import CodeEditor from './CodeEditor.vue';
+
+defineSlots<PropsPanelSlots>();
+
+defineOptions({
+  name: 'MEditorPropsPanel',
+});
+
+defineProps<{
+  disabledShowSrc?: boolean;
+  extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+}>();
+
+const codeOptions = inject('codeOptions', {});
+
+const emit = defineEmits(['mounted', 'submit-error', 'form-error']);
+
+const showSrc = ref(false);
+
+const internalInstance = getCurrentInstance();
+const values = ref<FormValue>({});
+const configForm = ref<InstanceType<typeof MForm>>();
+// ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
+const curFormConfig = ref<any>([]);
+const services = inject<Services>('services');
+const node = computed(() => services?.editorService.get('node'));
+const nodes = computed(() => services?.editorService.get('nodes') || []);
+const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize') || 'small');
+const stage = computed(() => services?.editorService.get('stage'));
+
+const { height: editorContentHeight } = useEditorContentHeight();
+
+const init = async () => {
+  if (!node.value) {
+    curFormConfig.value = [];
+    return;
+  }
+
+  const type = node.value.type || (node.value.items ? 'container' : 'text');
+  curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
+  values.value = node.value;
+};
+
+watchEffect(init);
+services?.propsService.on('props-configs-change', init);
+
+onMounted(() => {
+  emit('mounted', internalInstance);
+});
+
+onBeforeUnmount(() => {
+  services?.propsService.off('props-configs-change', init);
+});
+
+watchEffect(() => {
+  if (configForm.value && stage.value) {
+    configForm.value.formState.stage = stage.value;
+  }
+});
+
+const submit = async () => {
+  try {
+    const values = await configForm.value?.submitForm();
+    services?.editorService.update(values);
+  } catch (e: any) {
+    emit('submit-error', e);
+  }
+};
+
+const errorHandler = (e: any) => {
+  emit('form-error', e);
+};
+
+const saveCode = (values: MNode) => {
+  services?.editorService.update(values);
+};
+
+defineExpose({ configForm, submit });
+</script>

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

@@ -0,0 +1,48 @@
+<template>
+  <div
+    v-if="showAddPageButton"
+    id="m-editor-page-bar-add-icon"
+    class="m-editor-page-bar-item m-editor-page-bar-item-icon"
+    @click="addPage"
+  >
+    <Icon :icon="Plus"></Icon>
+  </div>
+  <div v-else style="width: 21px"></div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, toRaw } from 'vue';
+import { Plus } from '@element-plus/icons-vue';
+
+import { NodeType } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import type { Services } from '@editor/type';
+import { generatePageNameByApp } from '@editor/utils/editor';
+
+defineOptions({
+  name: 'MEditorPageBarAddButton',
+});
+
+const props = defineProps<{
+  type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
+}>();
+
+const services = inject<Services>('services');
+const uiService = services?.uiService;
+const editorService = services?.editorService;
+
+const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
+
+const addPage = () => {
+  if (!editorService) return;
+  const root = toRaw(editorService.get('root'));
+  if (!root) throw new Error('root 不能为空');
+  const pageConfig = {
+    type: props.type,
+    name: generatePageNameByApp(root, props.type),
+    items: [],
+  };
+  editorService.add(pageConfig);
+};
+</script>

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

@@ -0,0 +1,165 @@
+<template>
+  <div class="m-editor-page-bar-tabs">
+    <SwitchTypeButton v-if="!disabledPageFragment" v-model="active" />
+
+    <PageBarScrollContainer :type="active" :page-bar-sort-options="pageBarSortOptions">
+      <template #prepend>
+        <AddButton :type="active"></AddButton>
+        <PageList :list="list">
+          <template #page-list-popover="{ list }"><slot name="page-list-popover" :list="list"></slot></template>
+        </PageList>
+      </template>
+
+      <div
+        v-for="item in list"
+        class="m-editor-page-bar-item"
+        :key="item.id"
+        :page-id="item.id"
+        :class="{ active: page?.id === item.id }"
+        @click="switchPage(item.id)"
+      >
+        <div class="m-editor-page-bar-title">
+          <slot name="page-bar-title" :page="item">
+            <span :title="item.name">{{ item.name || item.id }}</span>
+          </slot>
+        </div>
+
+        <TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+          <div>
+            <slot name="page-bar-popover" :page="item">
+              <ToolButton
+                :data="{
+                  type: 'button',
+                  text: '复制',
+                  icon: DocumentCopy,
+                  handler: () => copy(item),
+                }"
+              ></ToolButton>
+              <ToolButton
+                :data="{
+                  type: 'button',
+                  text: '删除',
+                  icon: Delete,
+                  handler: () => remove(item),
+                }"
+              ></ToolButton>
+            </slot>
+          </div>
+          <template #reference>
+            <TMagicIcon class="m-editor-page-bar-menu-icon">
+              <CaretBottom></CaretBottom>
+            </TMagicIcon>
+          </template>
+        </TMagicPopover>
+      </div>
+    </PageBarScrollContainer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref, watch } from 'vue';
+import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
+
+import { TMagicIcon, TMagicPopover } from '@tmagic/design';
+import { Id, type MPage, type MPageFragment, NodeType } from '@tmagic/schema';
+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';
+
+defineOptions({
+  name: 'MEditorPageBar',
+});
+
+defineProps<{
+  disabledPageFragment: boolean;
+  pageBarSortOptions?: PageBarSortOptions;
+}>();
+
+const active = ref<NodeType.PAGE | NodeType.PAGE_FRAGMENT>(NodeType.PAGE);
+
+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,
+  },
+);
+
+watch(active, (active) => {
+  if (active === NodeType.PAGE) {
+    if (!activePage.value && !pageList.value.length) {
+      editorService?.selectRoot();
+      return;
+    }
+    switchPage(activePage.value);
+    return;
+  }
+
+  if (active === NodeType.PAGE_FRAGMENT) {
+    // 之前没有选中过页面片并且当前没有页面片
+    if (!activePageFragment.value && !pageFragmentList.value.length) {
+      editorService?.selectRoot();
+      return;
+    }
+    switchPage(activePageFragment.value || pageFragmentList.value[0].id);
+  }
+});
+
+const switchPage = (id: Id) => {
+  editorService?.select(id);
+};
+
+const copy = (node: MPage | MPageFragment) => {
+  node && editorService?.copy(node);
+  editorService?.paste({
+    left: 0,
+    top: 0,
+  });
+};
+
+const remove = (node: MPage | MPageFragment) => {
+  editorService?.remove(node);
+};
+</script>

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

@@ -0,0 +1,192 @@
+<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>
+
+    <div
+      v-if="(type === NodeType.PAGE && pageLength) || (type === NodeType.PAGE_FRAGMENT && pageFragmentLength)"
+      class="m-editor-page-bar-items"
+      ref="itemsContainer"
+      :style="`width: ${itemsContainerWidth}px`"
+    >
+      <slot></slot>
+    </div>
+
+    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-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 { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
+import Sortable, { SortableEvent } from 'sortablejs';
+
+import { Id, NodeType } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import type { PageBarSortOptions, Services } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorPageBarScrollContainer',
+});
+
+const props = defineProps<{
+  type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
+  pageBarSortOptions?: PageBarSortOptions;
+}>();
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+const uiService = services?.uiService;
+
+const itemsContainer = ref<HTMLElement>();
+const canScroll = ref(false);
+
+const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
+const showPageListButton = computed(() => uiService?.get('showPageListButton'));
+
+const itemsContainerWidth = ref(0);
+
+const setCanScroll = () => {
+  // 减去新增、左移、右移三个按钮的宽度
+  // 37 = icon width 16 + padding 10 * 2 + border-right 1
+  itemsContainerWidth.value =
+    (pageBar.value?.clientWidth || 0) -
+    37 * 2 -
+    (showAddPageButton.value ? 37 : 21) -
+    (showPageListButton.value ? 37 : 0);
+
+  nextTick(() => {
+    if (itemsContainer.value) {
+      canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
+    }
+  });
+};
+
+const resizeObserver = new ResizeObserver(() => {
+  setCanScroll();
+});
+
+const pageBar = ref<HTMLDivElement>();
+onMounted(() => {
+  pageBar.value && resizeObserver.observe(pageBar.value);
+});
+
+onBeforeUnmount(() => {
+  resizeObserver.disconnect();
+});
+
+let translateLeft = 0;
+
+const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
+  if (!itemsContainer.value) return;
+
+  const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+
+  if (type === 'left') {
+    translateLeft += 100;
+
+    if (translateLeft > 0) {
+      translateLeft = 0;
+    }
+  } else if (type === 'right') {
+    translateLeft -= 100;
+
+    if (-translateLeft > maxScrollLeft) {
+      translateLeft = -maxScrollLeft;
+    }
+  } else if (type === 'start') {
+    translateLeft = 0;
+  } else if (type === 'end') {
+    translateLeft = -maxScrollLeft;
+  }
+
+  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) {
+          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);
+                }
+              },
+            },
+            ...{
+              ...(props.pageBarSortOptions ? props.pageBarSortOptions : {}),
+            },
+          };
+          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);
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+</script>

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

@@ -0,0 +1,55 @@
+<template>
+  <div
+    v-if="showPageListButton"
+    id="m-editor-page-bar-list-icon"
+    class="m-editor-page-bar-item m-editor-page-bar-item-icon"
+  >
+    <TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+      <div>
+        <slot name="page-list-popover" :list="list">
+          <ToolButton
+            v-for="(item, index) in list"
+            :data="{
+              type: 'button',
+              text: item.devconfig?.tabName || item.name || item.id,
+              handler: () => switchPage(item.id),
+            }"
+            :key="index"
+          ></ToolButton>
+        </slot>
+      </div>
+      <template #reference>
+        <TMagicIcon class="m-editor-page-list-menu-icon">
+          <Files></Files>
+        </TMagicIcon>
+      </template>
+    </TMagicPopover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { Files } from '@element-plus/icons-vue';
+
+import { TMagicIcon, TMagicPopover } from '@tmagic/design';
+import { Id, MPage, MPageFragment } from '@tmagic/schema';
+
+import ToolButton from '@editor/components/ToolButton.vue';
+import type { Services } from '@editor/type';
+defineOptions({
+  name: 'MEditorPageList',
+});
+
+defineProps<{
+  list: MPage[] | MPageFragment[];
+}>();
+
+const services = inject<Services>('services');
+const uiService = services?.uiService;
+const editorService = services?.editorService;
+
+const showPageListButton = computed(() => uiService?.get('showPageListButton'));
+const switchPage = (id: Id) => {
+  editorService?.select(id);
+};
+</script>

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

@@ -0,0 +1,45 @@
+<template>
+  <TMagicButton
+    v-for="item in data"
+    class="m-editor-page-bar-switch-type-button"
+    size="small"
+    :key="item.type"
+    link
+    :class="{ active: modelValue === item.type }"
+    :type="modelValue === item.type ? 'primary' : ''"
+    @click="clickHandler(item.type)"
+    >{{ item.text }}</TMagicButton
+  >
+</template>
+
+<script setup lang="ts">
+import { TMagicButton } from '@tmagic/design';
+import { NodeType } from '@tmagic/schema';
+
+defineOptions({
+  name: 'MEditorPageBarSwitchTypeButton',
+});
+
+defineProps<{
+  modelValue: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
+}>();
+
+const data: { type: NodeType.PAGE | NodeType.PAGE_FRAGMENT; text: string }[] = [
+  {
+    type: NodeType.PAGE,
+    text: '页面',
+  },
+  {
+    type: NodeType.PAGE_FRAGMENT,
+    text: '页面片',
+  },
+];
+
+const emit = defineEmits<{
+  'update:modelValue': [value: NodeType.PAGE | NodeType.PAGE_FRAGMENT];
+}>();
+
+const clickHandler = (value: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
+  emit('update:modelValue', value);
+};
+</script>