From d177ebc900c41f8dc682d53e5dbd3b879ef4de60 Mon Sep 17 00:00:00 2001 From: tnt group Date: Wed, 17 May 2023 20:30:50 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BE=A7=E8=BE=B9=E6=A0=8F=E4=B8=AD?= =?UTF-8?q?=E5=8A=A0=E5=85=A5=E5=9B=BE=E7=89=87=E7=B1=BB=E5=9E=8B=E9=80=89?= =?UTF-8?q?=E9=A1=B9=E5=8D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/index.ts | 2 + .../ContentCharts/hooks/useAside.hook.ts | 174 +++++++++--------- 2 files changed, 84 insertions(+), 92 deletions(-) diff --git a/src/packages/index.ts b/src/packages/index.ts index 1b387cd8..4509a11a 100644 --- a/src/packages/index.ts +++ b/src/packages/index.ts @@ -2,6 +2,7 @@ import { ChartList } from '@/packages/components/Charts/index' import { DecorateList } from '@/packages/components/Decorates/index' import { InformationList } from '@/packages/components/Informations/index' import { TableList } from '@/packages/components/Tables/index' +import { PhotoList } from '@/packages/components/Photos/index' import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d' const configModules: Record = import.meta.glob('./components/**/config.vue', { @@ -19,6 +20,7 @@ export let packagesList: PackagesType = { [PackagesCategoryEnum.CHARTS]: ChartList, [PackagesCategoryEnum.INFORMATIONS]: InformationList, [PackagesCategoryEnum.TABLES]: TableList, + [PackagesCategoryEnum.PHOTOS]: PhotoList, [PackagesCategoryEnum.DECORATES]: DecorateList } diff --git a/src/views/chart/ContentCharts/hooks/useAside.hook.ts b/src/views/chart/ContentCharts/hooks/useAside.hook.ts index 45c7c609..22e4f0d3 100644 --- a/src/views/chart/ContentCharts/hooks/useAside.hook.ts +++ b/src/views/chart/ContentCharts/hooks/useAside.hook.ts @@ -1,92 +1,82 @@ -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, -} +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 { ImageIcon, 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.PHOTOS]: { + icon: renderIcon(ImageIcon), + label: PackagesCategoryName.PHOTOS + }, + [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 }