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 }