From f8785a45057e9b6132ba07db2887029421426e92 Mon Sep 17 00:00:00 2001 From: MTrun <1262327911@qq.com> Date: Mon, 7 Mar 2022 15:21:45 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E7=B1=BB=E5=9E=8B?= =?UTF-8?q?=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Informations/Mores/Image/index.ts | 3 ++- .../Informations/Mores/TextCloud/index.ts | 3 ++- .../Informations/Texts/TextCommon/index.ts | 3 ++- .../Titles/TitleBevelAngle/index.ts | 3 ++- .../Informations/Titles/TitleCommon/index.ts | 3 ++- .../Informations/Titles/TitlePro/index.ts | 3 ++- .../Tables/Tables/TableCategory/index.ts | 3 ++- .../Tables/Tables/tableCommon/index.ts | 3 ++- src/plugins/customComponents.ts | 19 ++++++++++--------- src/views/chart/HeaderLeftBtn/index.vue | 6 +++--- src/views/preview/hooks/useStyle.hook.ts | 10 ++++++++++ src/views/preview/index.vue | 10 +++------- src/views/preview/utils/index.ts | 1 + 13 files changed, 43 insertions(+), 27 deletions(-) diff --git a/src/packages/components/Informations/Mores/Image/index.ts b/src/packages/components/Informations/Mores/Image/index.ts index 5742970a..b0a7e589 100644 --- a/src/packages/components/Informations/Mores/Image/index.ts +++ b/src/packages/components/Informations/Mores/Image/index.ts @@ -6,11 +6,12 @@ import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' export const ImageConfig: ConfigType = { key: 'VImage', + conKey: 'VCImage', title: '图片', category: ChatCategoryEnum.MORE, categoryName: ChatCategoryEnumName.MORE, package: PackagesCategoryEnum.INFORMATION, - node: Image, + node: () => Image, conNode: () => Configuration, image } diff --git a/src/packages/components/Informations/Mores/TextCloud/index.ts b/src/packages/components/Informations/Mores/TextCloud/index.ts index b38959bf..c69ea592 100644 --- a/src/packages/components/Informations/Mores/TextCloud/index.ts +++ b/src/packages/components/Informations/Mores/TextCloud/index.ts @@ -6,11 +6,12 @@ import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' export const TextCloudConfig: ConfigType = { key: 'VTextCloud', + conKey: 'VCTextCloud', title: '词云', category: ChatCategoryEnum.MORE, categoryName: ChatCategoryEnumName.MORE, package: PackagesCategoryEnum.INFORMATION, - node: TextCloud, + node: () => TextCloud, conNode: () => Configuration, image } diff --git a/src/packages/components/Informations/Texts/TextCommon/index.ts b/src/packages/components/Informations/Texts/TextCommon/index.ts index b560c7a5..bd16090f 100644 --- a/src/packages/components/Informations/Texts/TextCommon/index.ts +++ b/src/packages/components/Informations/Texts/TextCommon/index.ts @@ -6,11 +6,12 @@ import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' export const TextCommonConfig: ConfigType = { key: 'VText', + conKey: 'VCText', title: '文字', category: ChatCategoryEnum.TEXT, categoryName: ChatCategoryEnumName.TEXT, package: PackagesCategoryEnum.INFORMATION, - node: TextCommon, + node: () => TextCommon, conNode: () => Configuration, image } diff --git a/src/packages/components/Informations/Titles/TitleBevelAngle/index.ts b/src/packages/components/Informations/Titles/TitleBevelAngle/index.ts index c82e3f42..ad653b49 100644 --- a/src/packages/components/Informations/Titles/TitleBevelAngle/index.ts +++ b/src/packages/components/Informations/Titles/TitleBevelAngle/index.ts @@ -6,11 +6,12 @@ import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' export const TitleBevelAngleConfig: ConfigType = { key: 'VTitleBevelAngle', + conKey: 'VCTitleBevelAngle', title: '斜角标题', category: ChatCategoryEnum.TITLE, categoryName: ChatCategoryEnumName.TITLE, package: PackagesCategoryEnum.INFORMATION, - node: TitleBevelAngle, + node: () => TitleBevelAngle, conNode: () => Configuration, image } diff --git a/src/packages/components/Informations/Titles/TitleCommon/index.ts b/src/packages/components/Informations/Titles/TitleCommon/index.ts index 83e506be..aca13d7a 100644 --- a/src/packages/components/Informations/Titles/TitleCommon/index.ts +++ b/src/packages/components/Informations/Titles/TitleCommon/index.ts @@ -6,11 +6,12 @@ import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' export const TitleCommonConfig: ConfigType = { key: 'VText', + conKey: 'VCText', title: '普通标题', category: ChatCategoryEnum.TITLE, categoryName: ChatCategoryEnumName.TITLE, package: PackagesCategoryEnum.INFORMATION, - node: TitleCommon, + node: () => TitleCommon, conNode: () => Configuration, image } \ No newline at end of file diff --git a/src/packages/components/Informations/Titles/TitlePro/index.ts b/src/packages/components/Informations/Titles/TitlePro/index.ts index c474a591..8fccb07a 100644 --- a/src/packages/components/Informations/Titles/TitlePro/index.ts +++ b/src/packages/components/Informations/Titles/TitlePro/index.ts @@ -6,11 +6,12 @@ import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' export const TitleProConfig: ConfigType = { key: 'VTitlePro', + conKey: 'VCTitlePro', title: '中心标题', category: ChatCategoryEnum.TITLE, categoryName: ChatCategoryEnumName.TITLE, package: PackagesCategoryEnum.INFORMATION, - node: TitlePro, + node: () => TitlePro, conNode: () => Configuration, image } diff --git a/src/packages/components/Tables/Tables/TableCategory/index.ts b/src/packages/components/Tables/Tables/TableCategory/index.ts index b368ac16..de0e2cbd 100644 --- a/src/packages/components/Tables/Tables/TableCategory/index.ts +++ b/src/packages/components/Tables/Tables/TableCategory/index.ts @@ -6,11 +6,12 @@ import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' export const TableCategoryConfig: ConfigType = { key: 'VTableCategory', + conKey: 'VCableCategory', title: '归类表格', category: ChatCategoryEnum.TABLE, categoryName: ChatCategoryEnumName.TABLE, package: PackagesCategoryEnum.TABLES, - node: TableCategory, + node: () => TableCategory, conNode: () => Configuration, image } diff --git a/src/packages/components/Tables/Tables/tableCommon/index.ts b/src/packages/components/Tables/Tables/tableCommon/index.ts index 7dec0887..517044ea 100644 --- a/src/packages/components/Tables/Tables/tableCommon/index.ts +++ b/src/packages/components/Tables/Tables/tableCommon/index.ts @@ -6,11 +6,12 @@ import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' export const TableCommonConfig: ConfigType = { key: 'VTableCommon', + conKey: 'VCTableCommon', title: '表格', category: ChatCategoryEnum.TABLE, categoryName: ChatCategoryEnumName.TABLE, package: PackagesCategoryEnum.TABLES, - node: TableCommon, + node: () => TableCommon, conNode: () => Configuration, image } diff --git a/src/plugins/customComponents.ts b/src/plugins/customComponents.ts index 986b226b..693fcc53 100644 --- a/src/plugins/customComponents.ts +++ b/src/plugins/customComponents.ts @@ -10,15 +10,16 @@ import { CreateComponentType } from '@/packages/index.d' * @param app */ export const setupPreviewPackages = (app: App) => { - if(!document.location.hash.includes('preview')) return - const localStorageInfo = getLocalStorageInfo() - if(!localStorageInfo) return - localStorageInfo.componentList.forEach(async (e: CreateComponentType) => { - if (!app.component(e.key)) { - const chart = fetchChartComponent(e.chartConfig) - app.component(e.key, chart) - } - }) + if (document.location.hash.includes('preview')) { + const localStorageInfo = getLocalStorageInfo() + if (!localStorageInfo) return + localStorageInfo.componentList.forEach(async (e: CreateComponentType) => { + if (!app.component(e.key)) { + const chart = fetchChartComponent(e.chartConfig) + app.component(e.key, chart) + } + }) + } } /** diff --git a/src/views/chart/HeaderLeftBtn/index.vue b/src/views/chart/HeaderLeftBtn/index.vue index c8866c7b..67a1b34c 100644 --- a/src/views/chart/HeaderLeftBtn/index.vue +++ b/src/views/chart/HeaderLeftBtn/index.vue @@ -24,16 +24,16 @@ import { toRefs, Ref, reactive } from 'vue' import { renderIcon, goDialog, goHome } from '@/utils' import { icon } from '@/plugins' -const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon } = icon.ionicons5 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore' import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' import { useRemoveKeyboard } from '../hooks/useKeyboard.hook' +const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon } = icon.ionicons5 const { setItem } = useChartLayoutStore() const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore()) -type ItemType = { - key: string +interface ItemType { + key: ChartLayoutStoreEnum select: Ref | boolean title: string icon: any diff --git a/src/views/preview/hooks/useStyle.hook.ts b/src/views/preview/hooks/useStyle.hook.ts index c5820b21..a2ac0a25 100644 --- a/src/views/preview/hooks/useStyle.hook.ts +++ b/src/views/preview/hooks/useStyle.hook.ts @@ -1,4 +1,5 @@ import { PickCreateComponentType } from '@/packages/index.d' +import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' type AttrType = PickCreateComponentType<'attr'> @@ -19,3 +20,12 @@ export const useSizeStyle = (attr: AttrType, scale?: number) => { } return sizeStyle } + +export const useEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => { + return { + position: 'relative', + width: canvas.width ? `${canvas.width || 100}px` : '100%', + height: canvas.height ? `${canvas.height}px` : '100%', + border: '1px solid red' + } +} diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue index 65d7428d..622702fb 100644 --- a/src/views/preview/index.vue +++ b/src/views/preview/index.vue @@ -17,6 +17,7 @@ import { usePreviewScale } from '@/hooks/index' import { RenderList } from './components/RenderList/index' import { ChartEditStorageType } from './index.d' import { getLocalStorageInfo } from './utils/index' +import { useEditCanvasConfigStyle } from './hooks/useStyle.hook' const previewRef = ref() @@ -25,13 +26,8 @@ const localStorageInfo: ChartEditStorageType = getLocalStorageInfo() as ChartEdi const width = ref(localStorageInfo?.editCanvasConfig.width) const height = ref(localStorageInfo?.editCanvasConfig.height) -const previewRefStyle = computed(() => { - return { - position: 'relative', - width: width.value ? `${width.value || 100}px` : '100%', - height: height.value ? `${height.value}px` : '100%', - border: '1px solid red' - } +const previewRefStyle: any = computed(() => { + return useEditCanvasConfigStyle(localStorageInfo.editCanvasConfig) }) if (!localStorageInfo) { diff --git a/src/views/preview/utils/index.ts b/src/views/preview/utils/index.ts index 7c1248d0..b8e8e9b3 100644 --- a/src/views/preview/utils/index.ts +++ b/src/views/preview/utils/index.ts @@ -6,6 +6,7 @@ export interface ChartEditStorageType extends ChartEditStorage { id: string } +// 根据路由 id 获取存储数据的信息 export const getLocalStorageInfo = () => { const urlHash = document.location.hash const toPathArray = urlHash.split('/')