JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-09-05 07:39:48 +08:00
Code Issues Projects Releases Wiki Activity

fix(editor): 列框缓存失效

Browse Source
This commit is contained in:
roymondchen 2022-10-12 17:48:38 +08:00 committed by jia000
parent f9e2d80973
commit e01d5d913f
1 changed files with 56 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@
@save="saveCode" @save="saveCode"
></magic-code-editor> ></magic-code-editor>
<layout <Layout
v-else v-else
class="m-editor-content" class="m-editor-content"
left-class="m-editor-framework-left" left-class="m-editor-framework-left"
@ -29,7 +29,7 @@
<template #center> <template #center>
<slot v-if="pageLength > 0" name="workspace"></slot> <slot v-if="pageLength > 0" name="workspace"></slot>
<slot v-else name="empty"> <slot v-else name="empty">
<add-page-box></add-page-box> <AddPageBox></AddPageBox>
</slot> </slot>
</template> </template>
@ -38,12 +38,12 @@
<slot name="props-panel"></slot> <slot name="props-panel"></slot>
</TMagicScrollbar> </TMagicScrollbar>
</template> </template>
</layout> </Layout>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject, ref, watchEffect } from 'vue'; import { computed, inject, ref, watch } from 'vue';
import { TMagicScrollbar } from '@tmagic/design'; import { TMagicScrollbar } from '@tmagic/design';
import type { MApp } from '@tmagic/schema'; import type { MApp } from '@tmagic/schema';
@ -71,24 +71,61 @@ const root = computed(() => editorService?.get<MApp>('root'));
const pageLength = computed(() => editorService?.get<number>('pageLength') || 0); const pageLength = computed(() => editorService?.get<number>('pageLength') || 0);
const showSrc = computed(() => uiService?.get<boolean>('showSrc')); const showSrc = computed(() => uiService?.get<boolean>('showSrc'));
const columnWidth = ref<Partial<GetColumnWidth>>({
left: DEFAULT_LEFT_COLUMN_WIDTH,
center: 0,
right: 0,
});
uiService?.set('columnWidth', columnWidth.value);
watchEffect(() => { const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
if (pageLength.value <= 0) { const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
columnWidth.value.right = undefined;
columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH; const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
} else { const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY));
columnWidth.value.right = columnWidth.value.right || DEFAULT_RIGHT_COLUMN_WIDTH;
columnWidth.value.center = const columnWidth = ref<Partial<GetColumnWidth>>({
globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH; left: leftColumnWidthCacheData,
} center: 0,
right: RightColumnWidthCacheData,
}); });
watch(
pageLength,
(length) => {
const left = columnWidth.value.left || DEFAULT_LEFT_COLUMN_WIDTH;
columnWidth.value.left = left;
if (length <= 0) {
columnWidth.value.right = undefined;
columnWidth.value.center = globalThis.document.body.clientWidth - left;
} else {
const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
columnWidth.value.right = right;
columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
}
uiService?.set('columnWidth', columnWidth);
},
{
immediate: true,
},
);
watch(
() => columnWidth.value.right,
(right) => {
if (typeof right === 'undefined') return;
globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
},
);
watch(
() => columnWidth.value.left,
(left) => {
globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
},
);
const columnWidthChange = (columnWidth: GetColumnWidth) => {
uiService?.set('columnWidth', columnWidth);
};
const saveCode = (value: string) => { const saveCode = (value: string) => {
try { try {
// eslint-disable-next-line no-eval // eslint-disable-next-line no-eval
@ -97,21 +134,4 @@ const saveCode = (value: string) => {
console.error(e); console.error(e);
} }
}; };
const COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorColumnWidthData';
const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
if (columnWidthCacheData) {
try {
const columnWidthCache = JSON.parse(columnWidthCacheData);
columnWidth.value = columnWidthCache;
} catch (e) {
console.error(e);
}
}
const columnWidthChange = (columnWidth: GetColumnWidth) => {
uiService?.set('columnWidth', columnWidth);
globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth));
};
</script> </script>