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

fix(editor): 组件配置列大小缓存不生效

Browse Source
This commit is contained in:
roymondchen 2025-02-11 17:25:58 +08:00
parent 900b701c80
commit 6d82c0f730
5 changed files with 82 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,10 +19,10 @@
right-class="m-editor-framework-right"
:left="columnWidth.left"
:right="columnWidth.right"
:min-left="200"
:min-right="300"
:min-center="400"
:width="frameworkRect?.width || 0"
:min-left="MIN_LEFT_COLUMN_WIDTH"
:min-right="MIN_RIGHT_COLUMN_WIDTH"
:min-center="MIN_CENTER_COLUMN_WIDTH"
:width="frameworkRect.width"
@change="columnWidthChange"
>
<template #left>
@ -66,11 +66,15 @@ import type { MPage, MPageFragment } from '@tmagic/core';
import SplitView from '@editor/components/SplitView.vue';
import { useServices } from '@editor/hooks/use-services';
import { Protocol } from '@editor/services/storage';
import type { FrameworkSlots, GetColumnWidth, PageBarSortOptions } from '@editor/type';
import { getEditorConfig } from '@editor/utils/config';
import {
DEFAULT_LEFT_COLUMN_WIDTH,
LEFT_COLUMN_WIDTH_STORAGE_KEY,
MIN_CENTER_COLUMN_WIDTH,
MIN_LEFT_COLUMN_WIDTH,
MIN_RIGHT_COLUMN_WIDTH,
RIGHT_COLUMN_WIDTH_STORAGE_KEY,
} from '@editor/utils/const';
@ -91,7 +95,7 @@ defineProps<{
}>();
const codeOptions = inject('codeOptions', {});
const { editorService, uiService } = useServices();
const { editorService, uiService, storageService } = useServices();
const contentEl = useTemplateRef<HTMLDivElement>('content');
const splitViewRef = useTemplateRef<InstanceType<typeof SplitView>>('splitView');
@ -115,14 +119,16 @@ watch(
...columnWidth.value,
left: hideSlideBar
? 0
: Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH,
: storageService.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) ||
DEFAULT_LEFT_COLUMN_WIDTH,
});
},
);
const columnWidthChange = (columnW: GetColumnWidth) => {
globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.left}`);
globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.right}`);
storageService.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, columnW.left, { protocol: Protocol.NUMBER });
storageService.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, columnW.right, { protocol: Protocol.NUMBER });
uiService.set('columnWidth', columnW);
};

65
packages/editor/src/layouts/props-panel/PropsPanel.vue
View File

@ -34,7 +34,9 @@
<div class="m-editor-props-style-panel-title">
<span>样式</span>
<div>
<TMagicButton link size="small" @click="closeStylePanelHandler"><MIcon :icon="Close"></MIcon></TMagicButton>
<TMagicButton link size="small" @click="toggleStylePanel(false)"
><MIcon :icon="Close"></MIcon
></TMagicButton>
</div>
</div>
</template>
@ -44,7 +46,7 @@
v-if="showStylePanelToggleButton && !showStylePanel"
class="m-editor-props-panel-style-icon"
circle
@click="showStylePanelHandler"
@click="toggleStylePanel(true)"
>
<MIcon :icon="Sugar"></MIcon>
</TMagicButton>
@ -52,7 +54,7 @@
</template>
<script lang="ts" setup>
import { computed, onBeforeUnmount, ref, useTemplateRef, watch, watchEffect } from 'vue';
import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, watchEffect } from 'vue';
import { Close, Sugar } from '@element-plus/icons-vue';
import type { OnDrag } from 'gesto';
@ -64,9 +66,10 @@ import { setValueByKeyPath } from '@tmagic/utils';
import MIcon from '@editor/components/Icon.vue';
import Resizer from '@editor/components/Resizer.vue';
import { useServices } from '@editor/hooks/use-services';
import { Protocol } from '@editor/services/storage';
import type { PropsPanelSlots } from '@editor/type';
import { styleTabConfig } from '@editor/utils';
import { RIGHT_COLUMN_WIDTH_STORAGE_KEY } from '@editor/utils/const';
import { PROPS_PANEL_WIDTH_STORAGE_KEY } from '@editor/utils/const';
import FormPanel from './FormPanel.vue';
import { useStylePanel } from './use-style-panel';
@ -163,6 +166,14 @@ const mountedHandler = () => {
};
const propsPanelEl = useTemplateRef('propsPanel');
const propsPanelWidth = ref(
storageService.getItem(PROPS_PANEL_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || 300,
);
onMounted(() => {
propsPanelEl.value?.style.setProperty('--props-style-panel-width', `${propsPanelWidth.value}px`);
});
const widthChange = ({ deltaX }: OnDrag) => {
if (!propsPanelEl.value) {
return;
@ -176,45 +187,21 @@ const widthChange = ({ deltaX }: OnDrag) => {
if (value > uiService.get('columnWidth').right) {
value = uiService.get('columnWidth').right - 40;
}
propsPanelEl.value.style.setProperty('--props-style-panel-width', `${value}px`);
propsPanelWidth.value = value;
};
const { showStylePanel, showStylePanelToggleButton, showStylePanelHandler, closeStylePanelHandler } = useStylePanel({
storageService,
uiService,
watch(propsPanelWidth, (value) => {
propsPanelEl.value?.style.setProperty('--props-style-panel-width', `${value}px`);
storageService.setItem(PROPS_PANEL_WIDTH_STORAGE_KEY, value, { protocol: Protocol.NUMBER });
});
watch(showStylePanel, (showStylePanel) => {
if (!propsPanelEl.value) {
return;
}
const columnWidth = {
...uiService.get('columnWidth'),
};
const width = globalThis.parseFloat(
getComputedStyle(propsPanelEl.value).getPropertyValue('--props-style-panel-width'),
);
if (showStylePanel) {
columnWidth.right += width;
columnWidth.center -= width;
} else {
columnWidth.right -= width;
columnWidth.center += width;
}
if (columnWidth.center < 0) {
columnWidth.right = columnWidth.right + columnWidth.center - 400;
columnWidth.center = 400;
propsPanelEl.value.style.setProperty('--props-style-panel-width', `${columnWidth.right / 2}px`);
}
globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnWidth.right}`);
uiService.set('columnWidth', columnWidth);
});
const { showStylePanel, showStylePanelToggleButton, toggleStylePanel } = useStylePanel(
{
storageService,
uiService,
},
propsPanelWidth,
);
const propertyFormPanelRef = useTemplateRef<InstanceType<typeof FormPanel>>('propertyFormPanel');
defineExpose({

42
packages/editor/src/layouts/props-panel/use-style-panel.ts
View File

@ -1,9 +1,13 @@
import { computed } from 'vue';
import { computed, type Ref } from 'vue';
import { Protocol } from '@editor/services/storage';
import { Services } from '@editor/type';
import { MIN_CENTER_COLUMN_WIDTH, RIGHT_COLUMN_WIDTH_STORAGE_KEY } from '@editor/utils/const';
export const useStylePanel = ({ uiService, storageService }: Pick<Services, 'uiService' | 'storageService'>) => {
export const useStylePanel = (
{ uiService, storageService }: Pick<Services, 'uiService' | 'storageService'>,
propsPanelWidth: Ref<number>,
) => {
const showStylePanelStorageKey = 'props-panel-show-style-panel';
const showStylePanelStorageValue = storageService.getItem(showStylePanelStorageKey, {
protocol: Protocol.BOOLEAN,
@ -17,20 +21,36 @@ export const useStylePanel = ({ uiService, storageService }: Pick<Services, 'uiS
const showStylePanelToggleButton = computed(() => uiService.get('frameworkRect').width >= 1280);
const showStylePanelHandler = () => {
uiService.set('showStylePanel', true);
storageService.setItem(showStylePanelStorageKey, true, { protocol: Protocol.BOOLEAN });
};
const toggleStylePanel = (showStylePanel: boolean) => {
uiService.set('showStylePanel', showStylePanel);
storageService.setItem(showStylePanelStorageKey, showStylePanel, { protocol: Protocol.BOOLEAN });
const closeStylePanelHandler = () => {
uiService.set('showStylePanel', false);
storageService.setItem(showStylePanelStorageKey, false, { protocol: Protocol.BOOLEAN });
const columnWidth = {
...uiService.get('columnWidth'),
};
if (showStylePanel) {
columnWidth.right += propsPanelWidth.value;
columnWidth.center -= propsPanelWidth.value;
} else {
columnWidth.right -= propsPanelWidth.value;
columnWidth.center += propsPanelWidth.value;
}
if (columnWidth.center < 0) {
columnWidth.right = columnWidth.right + columnWidth.center - MIN_CENTER_COLUMN_WIDTH;
columnWidth.center = MIN_CENTER_COLUMN_WIDTH;
propsPanelWidth.value = columnWidth.right / 2;
}
storageService.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, columnWidth.right, { protocol: Protocol.NUMBER });
uiService.set('columnWidth', columnWidth);
};
return {
showStylePanel,
showStylePanelToggleButton,
showStylePanelHandler,
closeStylePanelHandler,
toggleStylePanel,
};
};

8
packages/editor/src/services/ui.ts
View File

@ -31,6 +31,7 @@ import {
} from '@editor/utils/const';
import BaseService from './BaseService';
import storageService, { Protocol } from './storage';
const state = shallowReactive<UiState>({
uiSelectMode: false,
@ -46,9 +47,12 @@ const state = shallowReactive<UiState>({
height: 817,
},
columnWidth: {
left: Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH,
left:
storageService.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || DEFAULT_LEFT_COLUMN_WIDTH,
center: 0,
right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH,
right:
storageService.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) ||
DEFAULT_RIGHT_COLUMN_WIDTH,
},
showGuides: true,
showRule: true,

5
packages/editor/src/utils/const.ts
View File

@ -3,9 +3,14 @@ export const UI_SELECT_MODE_EVENT_NAME = 'ui-select';
export const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
export const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
export const PROPS_PANEL_WIDTH_STORAGE_KEY = '$MagicEditorPropsPanelWidthData';
export const DEFAULT_LEFT_COLUMN_WIDTH = 310;
export const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
export const MIN_LEFT_COLUMN_WIDTH = 200;
export const MIN_CENTER_COLUMN_WIDTH = 400;
export const MIN_RIGHT_COLUMN_WIDTH = 300;
export const H_GUIDE_LINE_STORAGE_KEY = '$MagicStageHorizontalGuidelinesData';
export const V_GUIDE_LINE_STORAGE_KEY = '$MagicStageVerticalGuidelinesData';