github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-24 08:12:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 侧边栏中加入图片类型选项卡

Browse Source
This commit is contained in:
tnt group 2023-05-17 20:30:50 +08:00
parent 0bd594afe8
commit 045e6c2e3c
2 changed files with 84 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/packages/index.ts
View File

@ -2,6 +2,7 @@ import { ChartList } from '@/packages/components/Charts/index'
import { DecorateList } from '@/packages/components/Decorates/index' import { DecorateList } from '@/packages/components/Decorates/index'
import { InformationList } from '@/packages/components/Informations/index' import { InformationList } from '@/packages/components/Informations/index'
import { TableList } from '@/packages/components/Tables/index' import { TableList } from '@/packages/components/Tables/index'
import { PhotoList } from '@/packages/components/Photos/index'
import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d' import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', { const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
@ -19,6 +20,7 @@ export let packagesList: PackagesType = {
[PackagesCategoryEnum.CHARTS]: ChartList, [PackagesCategoryEnum.CHARTS]: ChartList,
[PackagesCategoryEnum.INFORMATIONS]: InformationList, [PackagesCategoryEnum.INFORMATIONS]: InformationList,
[PackagesCategoryEnum.TABLES]: TableList, [PackagesCategoryEnum.TABLES]: TableList,
[PackagesCategoryEnum.PHOTOS]: PhotoList,
[PackagesCategoryEnum.DECORATES]: DecorateList [PackagesCategoryEnum.DECORATES]: DecorateList
} }

174
src/views/chart/ContentCharts/hooks/useAside.hook.ts
View File

@ -1,92 +1,82 @@
import { shallowReactive, ref } from 'vue' import { shallowReactive, ref } from 'vue'
import { icon } from '@/plugins' import { icon } from '@/plugins'
import { renderLang, renderIcon } from '@/utils' import { renderLang, renderIcon } from '@/utils'
import { themeColor, setItem, getCharts } from './useLayout.hook' import { themeColor, setItem, getCharts } from './useLayout.hook'
import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/packages/index.d' import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/packages/index.d'
// 图表 // 图表
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore' import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
// 图标 // 图标
const { BarChartIcon } = icon.ionicons5 const { ImageIcon, BarChartIcon } = icon.ionicons5
const { const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
TableSplitIcon,
RoadmapIcon, // 图表
SpellCheckIcon, export type MenuOptionsType = {
GraphicalDataFlowIcon, key: string
} = icon.carbon icon: ReturnType<typeof renderIcon>
label: ReturnType<typeof renderLang>
list: PackagesType
// 图表 }
export type MenuOptionsType = {
key: string const { getPackagesList } = usePackagesStore()
icon: ReturnType<typeof renderIcon> const menuOptions: MenuOptionsType[] = []
label: ReturnType<typeof renderLang>
list: PackagesType const packagesListObj = {
} [PackagesCategoryEnum.CHARTS]: {
icon: renderIcon(RoadmapIcon),
const { getPackagesList } = usePackagesStore() label: PackagesCategoryName.CHARTS
const menuOptions: MenuOptionsType[] = [] },
[PackagesCategoryEnum.INFORMATIONS]: {
const packagesListObj = { icon: renderIcon(SpellCheckIcon),
[PackagesCategoryEnum.CHARTS]: { label: PackagesCategoryName.INFORMATIONS
icon: renderIcon(RoadmapIcon), },
label: PackagesCategoryName.CHARTS, [PackagesCategoryEnum.TABLES]: {
}, icon: renderIcon(TableSplitIcon),
[PackagesCategoryEnum.INFORMATIONS]: { label: PackagesCategoryName.TABLES
icon: renderIcon(SpellCheckIcon), },
label: PackagesCategoryName.INFORMATIONS, [PackagesCategoryEnum.PHOTOS]: {
}, icon: renderIcon(ImageIcon),
[PackagesCategoryEnum.TABLES]: { label: PackagesCategoryName.PHOTOS
icon: renderIcon(TableSplitIcon), },
label: PackagesCategoryName.TABLES, [PackagesCategoryEnum.DECORATES]: {
}, icon: renderIcon(GraphicalDataFlowIcon),
[PackagesCategoryEnum.DECORATES]: { label: PackagesCategoryName.DECORATES
icon: renderIcon(GraphicalDataFlowIcon), }
label: PackagesCategoryName.DECORATES, }
},
} // 处理列表
const handlePackagesList = () => {
// 处理列表 for (const val in getPackagesList) {
const handlePackagesList = () => { menuOptions.push({
for (const val in getPackagesList) { key: val,
menuOptions.push({ // @ts-ignore
key: val, icon: packagesListObj[val].icon,
// @ts-ignore // @ts-ignore
icon: packagesListObj[val].icon, label: packagesListObj[val].label,
// @ts-ignore // @ts-ignore
label: packagesListObj[val].label, list: getPackagesList[val]
// @ts-ignore })
list: getPackagesList[val], }
}) }
} handlePackagesList()
}
handlePackagesList() // 记录选中值
let beforeSelect: string = menuOptions[0]['key']
// 记录选中值 const selectValue = ref<string>(menuOptions[0]['key'])
let beforeSelect: string = menuOptions[0]['key']
const selectValue = ref<string>(menuOptions[0]['key']) // 选中的对象值
const selectOptions = ref(menuOptions[0])
// 选中的对象值
const selectOptions = ref(menuOptions[0]) // 点击 item
const clickItemHandle = (key: string, item: any) => {
// 点击 item selectOptions.value = item
const clickItemHandle = (key: string, item: any) => { // 处理折叠
selectOptions.value = item if (beforeSelect === key) {
// 处理折叠 setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value, false)
if (beforeSelect === key) { } else {
setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value, false) setItem(ChartLayoutStoreEnum.CHARTS, true, false)
} else { }
setItem(ChartLayoutStoreEnum.CHARTS, true, false) beforeSelect = key
} }
beforeSelect = key
} export { getCharts, BarChartIcon, themeColor, selectOptions, selectValue, clickItemHandle, menuOptions }
export {
getCharts,
BarChartIcon,
themeColor,
selectOptions,
selectValue,
clickItemHandle,
menuOptions,
}