From 7b000f86c71a9bb8d25cbba186101e92b9088e73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sun, 23 Apr 2023 21:14:28 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=88=87=E6=8D=A2?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E5=AF=BC=E8=87=B4=E7=94=BB=E5=B8=83=E7=BC=A9?= =?UTF-8?q?=E6=94=BE=E7=9A=84=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chartLayoutStore/chartLayoutStore.ts | 160 +++++++-------- .../ContentCharts/hooks/useAside.hook.ts | 184 +++++++++--------- 2 files changed, 175 insertions(+), 169 deletions(-) diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.ts index c2b63592..95a0cb70 100644 --- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts +++ b/src/store/modules/chartLayoutStore/chartLayoutStore.ts @@ -1,77 +1,83 @@ -import { defineStore } from 'pinia' -import { ChartLayoutType, LayerModeEnum, ChartModeEnum } from './chartLayoutStore.d' -import { setLocalStorage, getLocalStorage } from '@/utils' -import { StorageEnum } from '@/enums/storageEnum' -import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' - -const chartEditStore = useChartEditStore() - -const { GO_CHART_LAYOUT_STORE } = StorageEnum - -const storageChartLayout: Partial = getLocalStorage(GO_CHART_LAYOUT_STORE) - -// 编辑区域布局和静态设置 -export const useChartLayoutStore = defineStore({ - id: 'useChartLayoutStore', - state: (): ChartLayoutType => ({ - // 图层控制 - layers: true, - // 图表组件 - charts: true, - // 详情设置（收缩为true） - details: false, - // 组件列表展示类型（默认单列） - chartType: ChartModeEnum.SINGLE, - // 图层类型（默认图片） - layerType: LayerModeEnum.THUMBNAIL, - // 当前加载数量 - percentage: 0, - // 是否重置当前画布位置 - rePositionCanvas: false, - // 防止值不存在 - ...storageChartLayout - }), - getters: { - getLayers(): boolean { - return this.layers - }, - getCharts(): boolean { - return this.charts - }, - getDetails(): boolean { - return this.details - }, - getChartType(): ChartModeEnum { - return this.chartType - }, - getLayerType(): LayerModeEnum { - return this.layerType - }, - getPercentage(): number { - return this.percentage - }, - getRePositionCanvas(): boolean { - return this.rePositionCanvas - } - }, - actions: { - setItem(key: T, value: K): void { - this.$patch(state => { - state[key] = value - }) - // 存储本地 - setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state) - // 这里需要标记重置画布位置 - this.rePositionCanvas = true; - // 重新计算拖拽区域缩放比例 - setTimeout(() => { - chartEditStore.computedScale() - }, 500) - }, - setItemUnHandle(key: T, value: K): void { - this.$patch(state => { - state[key] = value - }) - } - } -}) +import { defineStore } from 'pinia' +import { ChartLayoutType, LayerModeEnum, ChartModeEnum } from './chartLayoutStore.d' +import { setLocalStorage, getLocalStorage } from '@/utils' +import { StorageEnum } from '@/enums/storageEnum' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' + +const chartEditStore = useChartEditStore() + +const { GO_CHART_LAYOUT_STORE } = StorageEnum + +const storageChartLayout: Partial = getLocalStorage(GO_CHART_LAYOUT_STORE) + +// 编辑区域布局和静态设置 +export const useChartLayoutStore = defineStore({ + id: 'useChartLayoutStore', + state: (): ChartLayoutType => ({ + // 图层控制 + layers: true, + // 图表组件 + charts: true, + // 详情设置（收缩为true） + details: false, + // 组件列表展示类型（默认单列） + chartType: ChartModeEnum.SINGLE, + // 图层类型（默认图片） + layerType: LayerModeEnum.THUMBNAIL, + // 当前加载数量 + percentage: 0, + // 是否重置当前画布位置 + rePositionCanvas: false, + // 防止值不存在 + ...storageChartLayout + }), + getters: { + getLayers(): boolean { + return this.layers + }, + getCharts(): boolean { + return this.charts + }, + getDetails(): boolean { + return this.details + }, + getChartType(): ChartModeEnum { + return this.chartType + }, + getLayerType(): LayerModeEnum { + return this.layerType + }, + getPercentage(): number { + return this.percentage + }, + getRePositionCanvas(): boolean { + return this.rePositionCanvas + } + }, + actions: { + setItem( + key: T, + value: K, + computedScale = true + ): void { + this.$patch(state => { + state[key] = value + }) + // 存储本地 + setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state) + // 这里需要标记重置画布位置 + this.rePositionCanvas = true; + // 重新计算拖拽区域缩放比例 + if (computedScale) { + setTimeout(() => { + chartEditStore.computedScale() + }, 500) + } + }, + setItemUnHandle(key: T, value: K): void { + this.$patch(state => { + state[key] = value + }) + } + } +}) diff --git a/src/views/chart/ContentCharts/hooks/useAside.hook.ts b/src/views/chart/ContentCharts/hooks/useAside.hook.ts index eb69d0c1..45c7c609 100644 --- a/src/views/chart/ContentCharts/hooks/useAside.hook.ts +++ b/src/views/chart/ContentCharts/hooks/useAside.hook.ts @@ -1,92 +1,92 @@ -import { shallowReactive, ref } from 'vue' -import { icon } from '@/plugins' -import { renderLang, renderIcon } from '@/utils' -import { themeColor, setItem, getCharts } from './useLayout.hook' -import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/packages/index.d' -// 图表 -import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore' -import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' -// 图标 -const { BarChartIcon } = icon.ionicons5 -const { - TableSplitIcon, - RoadmapIcon, - SpellCheckIcon, - GraphicalDataFlowIcon, -} = icon.carbon - - -// 图表 -export type MenuOptionsType = { - key: string - icon: ReturnType - label: ReturnType - list: PackagesType -} - -const { getPackagesList } = usePackagesStore() -const menuOptions: MenuOptionsType[] = [] - -const packagesListObj = { - [PackagesCategoryEnum.CHARTS]: { - icon: renderIcon(RoadmapIcon), - label: PackagesCategoryName.CHARTS, - }, - [PackagesCategoryEnum.INFORMATIONS]: { - icon: renderIcon(SpellCheckIcon), - label: PackagesCategoryName.INFORMATIONS, - }, - [PackagesCategoryEnum.TABLES]: { - icon: renderIcon(TableSplitIcon), - label: PackagesCategoryName.TABLES, - }, - [PackagesCategoryEnum.DECORATES]: { - icon: renderIcon(GraphicalDataFlowIcon), - label: PackagesCategoryName.DECORATES, - }, -} - -// 处理列表 -const handlePackagesList = () => { - for (const val in getPackagesList) { - menuOptions.push({ - key: val, - // @ts-ignore - icon: packagesListObj[val].icon, - // @ts-ignore - label: packagesListObj[val].label, - // @ts-ignore - list: getPackagesList[val], - }) - } -} -handlePackagesList() - -// 记录选中值 -let beforeSelect: string = menuOptions[0]['key'] -const selectValue = ref(menuOptions[0]['key']) - -// 选中的对象值 -const selectOptions = ref(menuOptions[0]) - -// 点击 item -const clickItemHandle = (key: string, item: any) => { - selectOptions.value = item - // 处理折叠 - if (beforeSelect === key) { - setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value) - } else { - setItem(ChartLayoutStoreEnum.CHARTS, true) - } - beforeSelect = key -} - -export { - getCharts, - BarChartIcon, - themeColor, - selectOptions, - selectValue, - clickItemHandle, - menuOptions, -} +import { shallowReactive, ref } from 'vue' +import { icon } from '@/plugins' +import { renderLang, renderIcon } from '@/utils' +import { themeColor, setItem, getCharts } from './useLayout.hook' +import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/packages/index.d' +// 图表 +import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore' +import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' +// 图标 +const { BarChartIcon } = icon.ionicons5 +const { + TableSplitIcon, + RoadmapIcon, + SpellCheckIcon, + GraphicalDataFlowIcon, +} = icon.carbon + + +// 图表 +export type MenuOptionsType = { + key: string + icon: ReturnType + label: ReturnType + list: PackagesType +} + +const { getPackagesList } = usePackagesStore() +const menuOptions: MenuOptionsType[] = [] + +const packagesListObj = { + [PackagesCategoryEnum.CHARTS]: { + icon: renderIcon(RoadmapIcon), + label: PackagesCategoryName.CHARTS, + }, + [PackagesCategoryEnum.INFORMATIONS]: { + icon: renderIcon(SpellCheckIcon), + label: PackagesCategoryName.INFORMATIONS, + }, + [PackagesCategoryEnum.TABLES]: { + icon: renderIcon(TableSplitIcon), + label: PackagesCategoryName.TABLES, + }, + [PackagesCategoryEnum.DECORATES]: { + icon: renderIcon(GraphicalDataFlowIcon), + label: PackagesCategoryName.DECORATES, + }, +} + +// 处理列表 +const handlePackagesList = () => { + for (const val in getPackagesList) { + menuOptions.push({ + key: val, + // @ts-ignore + icon: packagesListObj[val].icon, + // @ts-ignore + label: packagesListObj[val].label, + // @ts-ignore + list: getPackagesList[val], + }) + } +} +handlePackagesList() + +// 记录选中值 +let beforeSelect: string = menuOptions[0]['key'] +const selectValue = ref(menuOptions[0]['key']) + +// 选中的对象值 +const selectOptions = ref(menuOptions[0]) + +// 点击 item +const clickItemHandle = (key: string, item: any) => { + selectOptions.value = item + // 处理折叠 + if (beforeSelect === key) { + setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value, false) + } else { + setItem(ChartLayoutStoreEnum.CHARTS, true, false) + } + beforeSelect = key +} + +export { + getCharts, + BarChartIcon, + themeColor, + selectOptions, + selectValue, + clickItemHandle, + menuOptions, +}