JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-05 19:41:40 +08:00
Code Issues Projects Releases Wiki Activity

feat(editor): 页面/页面片不再使用tab分开显示，新增搜索页面

Browse Source
This commit is contained in:
roymondchen 2024-09-29 17:05:10 +08:00 committed by roymondchen
parent fc38fc3957
commit ed6d9b2b67
11 changed files with 190 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/editor/src/Editor.vue
View File

@ -114,6 +114,7 @@
</template>
<template #page-bar><slot name="page-bar"></slot></template>
<template #page-bar-add-button><slot name="page-bar-add-button"></slot></template>
<template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
<template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
<template #page-list-popover="{ list }"><slot name="page-list-popover" :list="list"></slot></template>

1
packages/editor/src/layouts/Framework.vue
View File

@ -39,6 +39,7 @@
<slot name="page-bar">
<PageBar :disabled-page-fragment="disabledPageFragment" :page-bar-sort-options="pageBarSortOptions">
<template #page-bar-add-button><slot name="page-bar-add-button"></slot></template>
<template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
<template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
<template #page-list-popover="{ list }"><slot name="page-list-popover" :list="list"></slot></template>

38
packages/editor/src/layouts/page-bar/AddButton.vue
View File

@ -3,9 +3,31 @@
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>
<TMagicPopover popper-class="data-source-list-panel-add-menu">
<template #reference>
<Icon :icon="Plus"></Icon>
</template>
<ToolButton
:data="{
type: 'button',
text: '页面',
handler: () => {
addPage(NodeType.PAGE);
},
}"
></ToolButton>
<ToolButton
:data="{
type: 'button',
text: '页面片',
handler: () => {
addPage(NodeType.PAGE_FRAGMENT);
},
}"
></ToolButton>
</TMagicPopover>
</div>
<div v-else style="width: 21px"></div>
</template>
@ -15,8 +37,10 @@ import { computed, inject, toRaw } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { NodeType } from '@tmagic/core';
import { TMagicPopover } from '@tmagic/design';
import Icon from '@editor/components/Icon.vue';
import ToolButton from '@editor/components/ToolButton.vue';
import type { Services } from '@editor/type';
import { generatePageNameByApp } from '@editor/utils/editor';
@ -24,23 +48,19 @@ 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 = () => {
const addPage = (type: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
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),
type,
name: generatePageNameByApp(root, type),
items: [],
};
editorService.add(pageConfig);

86
packages/editor/src/layouts/page-bar/PageBar.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="m-editor-page-bar-tabs">
<SwitchTypeButton v-if="!disabledPageFragment" v-model="active" />
<PageBarScrollContainer :type="active" :page-bar-sort-options="pageBarSortOptions">
<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>
@ -63,21 +63,19 @@
</template>
<script lang="ts" setup>
import { computed, inject, ref, watch } from 'vue';
import { computed, inject, ref } from 'vue';
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',
@ -88,69 +86,35 @@ defineProps<{
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 query = ref<{
pageType: NodeType[];
keyword: string;
}>({
pageType: [NodeType.PAGE, NodeType.PAGE_FRAGMENT],
keyword: '',
});
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;
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 item.name?.includes(keyword);
}
return true;
}
switchPage(activePageFragment.value || pageFragmentList.value[0].id);
}
return false;
});
});
const switchPage = (id: Id) => {

131
packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue
View File

@ -6,12 +6,7 @@
<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`"
>
<div v-if="length" class="m-editor-page-bar-items" ref="itemsContainer" :style="`width: ${itemsContainerWidth}px`">
<slot></slot>
</div>
@ -22,21 +17,11 @@
</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 +31,8 @@ defineOptions({
});
const props = defineProps<{
type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
pageBarSortOptions?: PageBarSortOptions;
length: number;
}>();
const services = inject<Services>('services');
@ -63,11 +48,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);
@ -119,71 +105,46 @@ const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
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);
}
() => props.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,

2
packages/editor/src/layouts/page-bar/PageList.vue
View File

@ -47,7 +47,7 @@ defineOptions({
});
defineProps<{
list: MPage[] | MPageFragment[];
list: (MPage | MPageFragment)[];
}>();
const services = inject<Services>('services');

64
packages/editor/src/layouts/page-bar/Search.vue Normal file
View File

@ -0,0 +1,64 @@
<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"
@change="onFormChange"
></MForm>
</Teleport>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { createForm, MForm } from '@tmagic/form';
import { NodeType } from '@tmagic/schema';
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',
placeholder: '请输入关键字',
},
]);
const visible = ref(false);
const onFormChange = (values: Query) => {
query.value = values;
emit('search', values);
};
</script>

45
packages/editor/src/layouts/page-bar/SwitchTypeButton.vue
View File

@ -1,45 +0,0 @@
<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 { NodeType } from '@tmagic/core';
import { TMagicButton } from '@tmagic/design';
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>

4
packages/editor/src/services/editor.ts
View File

@ -474,11 +474,11 @@ class Editor extends BaseService {
if (isPage(node)) {
this.state.pageLength -= 1;
await selectDefault(getPageList(root));
await selectDefault(rootItems);
} else if (isPageFragment(node)) {
this.state.pageFragmentLength -= 1;
await selectDefault(getPageFragmentList(root));
await selectDefault(rootItems);
} else {
await this.select(parent);
stage?.select(parent.id);

31
packages/editor/src/theme/page-bar.scss
View File

@ -3,19 +3,13 @@
bottom: 0;
left: 0;
width: 100%;
user-select: none;
}
.tmagic-design-button.m-editor-page-bar-switch-type-button {
margin-left: 10px;
position: relative;
top: 1px;
border-radius: 3px 3px 0 0;
border: 1px solid $--border-color;
border-bottom: 1px solid transparent;
padding: 5px 10px;
&.active {
background-color: #f3f3f3;
}
.m-editor-page-bar-item-icon {
.icon-active {
font-weight: bold;
color: $--theme-color;
}
}
@ -101,3 +95,16 @@
}
}
}
.m-editor-page-bar-search-panel {
position: absolute;
bottom: $--page-bar-height;
border: 1px solid $--border-color;
padding: 6px 10px;
width: 100%;
box-sizing: border-box;
.tmagic-design-form-item {
margin-bottom: 0;
}
}

3
packages/editor/src/type.ts
View File

@ -77,9 +77,10 @@ export interface FrameworkSlots {
'props-panel'(props: {}): any;
'footer'(props: {}): any;
'page-bar'(props: {}): any;
'page-bar-add-button'(props: {}): any;
'page-bar-title'(props: { page: MPage | MPageFragment }): any;
'page-bar-popover'(props: { page: MPage | MPageFragment }): any;
'page-list-popover'(props: { list: MPage[] | MPageFragment[] }): any;
'page-list-popover'(props: { list: (MPage | MPageFragment)[] }): any;
}
export interface WorkspaceSlots {