From 9591ed70849c59ae6d8c2bd57cbc63cf9b012191 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Wed, 20 Dec 2023 23:01:09 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=96=20code=20review=EF=BC=9A=E5=BA=97?= =?UTF-8?q?=E9=93=BA=E8=A3=85=E4=BF=AE=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ComponentContainer.vue | 6 +++--- .../components/ComponentContainerProperty.vue | 5 ++++- .../DiyEditor/components/ComponentLibrary.vue | 5 ++++- src/components/DiyEditor/index.vue | 19 ++++++++++++++----- src/router/modules/remaining.ts | 8 ++++++-- .../mall/promotion/diy/page/decorate.vue | 1 + 6 files changed, 32 insertions(+), 12 deletions(-) diff --git a/src/components/DiyEditor/components/ComponentContainer.vue b/src/components/DiyEditor/components/ComponentContainer.vue index 14093f48..0137278a 100644 --- a/src/components/DiyEditor/components/ComponentContainer.vue +++ b/src/components/DiyEditor/components/ComponentContainer.vue @@ -8,11 +8,11 @@
- +
{{ component.name }}
- +
@@ -54,7 +54,7 @@ import { propTypes } from '@/utils/propTypes' import { object } from 'vue-types' /** - * 组件容器 + * 组件容器：目前在中间部分 * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式 */ defineOptions({ name: 'ComponentContainer' }) diff --git a/src/components/DiyEditor/components/ComponentContainerProperty.vue b/src/components/DiyEditor/components/ComponentContainerProperty.vue index a8187898..4f48e204 100644 --- a/src/components/DiyEditor/components/ComponentContainerProperty.vue +++ b/src/components/DiyEditor/components/ComponentContainerProperty.vue @@ -1,8 +1,11 @@
- + +
@@ -231,6 +233,7 @@ const props = defineProps({ }) // 监听传入的页面配置 +// 解析出 pageConfigComponent 页面整体的配置，navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置 watch( () => props.modelValue, () => { @@ -251,6 +254,7 @@ watch( immediate: true } ) + // 保存 const handleSave = () => { const pageConfig = { @@ -303,7 +307,7 @@ const handleTabBarSelected = () => { handleComponentSelected(unref(tabBarComponent)) } -// 组件变动 +// 组件变动（拖拽） const handleComponentChange = (dragEvent: any) => { // 新增，即从组件库拖拽添加组件 if (dragEvent.added) { @@ -327,19 +331,21 @@ const swapComponent = (oldIndex: number, newIndex: number) => { selectedComponentIndex.value = newIndex } -/** 移动组件 */ +/** 移动组件（上移、下移） */ const handleMoveComponent = (index: number, direction: number) => { const newIndex = index + direction if (newIndex < 0 || newIndex >= pageComponents.value.length) return swapComponent(index, newIndex) } + /** 复制组件 */ const handleCopyComponent = (index: number) => { const component = cloneDeep(pageComponents.value[index]) component.uid = new Date().getTime() pageComponents.value.splice(index + 1, 0, component) } + /** * 删除组件 * @param index 当前组件index @@ -371,6 +377,7 @@ const handleReset = () => { if (reload) reload() emits('reset') } + // 预览 const previewDialogVisible = ref(false) const handlePreview = () => { @@ -388,10 +395,12 @@ const setDefaultSelectedComponent = () => { selectedComponent.value = unref(tabBarComponent) } } + watch( () => [props.showPageConfig, props.showNavigationBar, props.showTabBar], () => setDefaultSelectedComponent() ) + onMounted(() => setDefaultSelectedComponent())