diff --git a/src/hooks/themeHook.ts b/src/hooks/themeHook.ts index 408a1ca1..7ecb2f4c 100644 --- a/src/hooks/themeHook.ts +++ b/src/hooks/themeHook.ts @@ -22,11 +22,11 @@ export const getThemeOverridesHook = () => { } const dartObject = { common: { - primaryColor: designStore.appTheme, + primaryColor: designStore.getAppTheme, ...commonObj.common }, LoadingBar: { - colorLoading: designStore.appTheme + colorLoading: designStore.getAppTheme } } return designStore.getDarkTheme ? dartObject : lightObject diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index c7e5d6e9..a5c58c12 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -44,7 +44,8 @@ import { import { TableSplit as TableSplitIcon, Roadmap as RoadmapIcon, - SpellCheck as SpellCheckIcon + SpellCheck as SpellCheckIcon, + GraphicalDataFlow as GraphicalDataFlowIcon } from '@vicons/carbon' const ionicons5 = { @@ -131,12 +132,14 @@ const ionicons5 = { } const carbon = { - // 信息 - SpellCheckIcon, // 图表 RoadmapIcon, + // 信息 + SpellCheckIcon, // 表格 - TableSplitIcon + TableSplitIcon, + // 装饰 + GraphicalDataFlowIcon } // https://www.xicons.org/#/ 还有很多 diff --git a/src/views/chart/components/ContentCharts/components/DecorateCommon/index.ts b/src/views/chart/components/ContentCharts/components/DecorateCommon/index.ts new file mode 100644 index 00000000..8be65690 --- /dev/null +++ b/src/views/chart/components/ContentCharts/components/DecorateCommon/index.ts @@ -0,0 +1,3 @@ +import DecorateCommon from './index.vue' + +export { DecorateCommon } diff --git a/src/views/chart/components/ContentCharts/components/DecorateCommon/index.vue b/src/views/chart/components/ContentCharts/components/DecorateCommon/index.vue new file mode 100644 index 00000000..eb932013 --- /dev/null +++ b/src/views/chart/components/ContentCharts/components/DecorateCommon/index.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/chart/components/ContentCharts/index.vue b/src/views/chart/components/ContentCharts/index.vue index 993cc044..1df9fbe5 100644 --- a/src/views/chart/components/ContentCharts/index.vue +++ b/src/views/chart/components/ContentCharts/index.vue @@ -2,13 +2,13 @@ @@ -38,19 +38,27 @@ import { icon } from '@/plugins' import { renderLang, renderIcon } from '@/utils' import { ContentBox } from '../ContentBox/index' import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore' +import { useDesignStore } from '@/store/modules/designStore/designStore' import { ChartCommon } from './components/ChartCommon' import { TableCommon } from './components/TableCommon' import { TextCommon } from './components/TextCommon' +import { DecorateCommon } from './components/DecorateCommon' +// 图标 const { BarChartIcon } = icon.ionicons5 -const { TableSplitIcon, RoadmapIcon, SpellCheckIcon } = icon.carbon +const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon +// 全局颜色 +const designStore = useDesignStore() +const themeColor = ref(designStore.getAppTheme) + +// 结构控制 const { setItem } = useChartLayoutStore() const { getCharts } = toRefs(useChartLayoutStore()) +// 菜单 const collapsed = ref(false) - const menuOptions = reactive([ { key: 'ChartCommon', @@ -69,13 +77,19 @@ const menuOptions = reactive([ icon: renderIcon(TableSplitIcon), label: renderLang('表格'), node: TextCommon + }, + { + key: 'DecorateCommon', + icon: renderIcon(GraphicalDataFlowIcon), + label: renderLang('装饰'), + node: DecorateCommon } ]) // 记录选中值 let beforeSelect: string = menuOptions[0]['key'] const selectValue = ref(menuOptions[0]['key']) - +// 渲染的组件控制 const selectNode = ref(menuOptions[0]['node']) // 点击 item @@ -90,13 +104,17 @@ const clickItemHandle = (key: string, item: T) => { } beforeSelect = key } +