From 8b890fb5e3c1ad2c43c2a3662f75d28af7d25bbf Mon Sep 17 00:00:00 2001 From: MTrun <1262327911@qq.com> Date: Mon, 21 Feb 2022 19:45:11 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=85=A8=E5=B1=80?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Charts/Bars/BarCommon/index.vue | 21 +++++--- .../Charts/Bars/BarCrossrange/index.vue | 22 +++++--- .../Charts/Lines/LineCommon/index.vue | 22 +++++--- .../Charts/Pies/PieCommon/index.vue | 22 +++++--- src/settings/chartThemes/global.theme.json | 53 +++++++++++++++++++ src/settings/chartThemes/index.ts | 10 ++++ .../chartEditStore/chartEditStore.d.ts | 8 ++- .../modules/chartEditStore/chartEditStore.ts | 34 ++++++------ .../components/ChartTheme/index.vue | 10 ++-- .../components/CanvasPage/index.vue | 2 +- src/views/chart/ContentEdit/index.vue | 19 ++++--- 11 files changed, 162 insertions(+), 61 deletions(-) create mode 100644 src/settings/chartThemes/global.theme.json diff --git a/src/packages/components/Charts/Bars/BarCommon/index.vue b/src/packages/components/Charts/Bars/BarCommon/index.vue index c6d55638..238dacbd 100644 --- a/src/packages/components/Charts/Bars/BarCommon/index.vue +++ b/src/packages/components/Charts/Bars/BarCommon/index.vue @@ -1,5 +1,5 @@ diff --git a/src/packages/components/Charts/Bars/BarCrossrange/index.vue b/src/packages/components/Charts/Bars/BarCrossrange/index.vue index bac61fb8..839514a1 100644 --- a/src/packages/components/Charts/Bars/BarCrossrange/index.vue +++ b/src/packages/components/Charts/Bars/BarCrossrange/index.vue @@ -1,5 +1,5 @@ diff --git a/src/packages/components/Charts/Lines/LineCommon/index.vue b/src/packages/components/Charts/Lines/LineCommon/index.vue index 5c6c3a73..19c087dd 100644 --- a/src/packages/components/Charts/Lines/LineCommon/index.vue +++ b/src/packages/components/Charts/Lines/LineCommon/index.vue @@ -1,5 +1,5 @@ diff --git a/src/packages/components/Charts/Pies/PieCommon/index.vue b/src/packages/components/Charts/Pies/PieCommon/index.vue index 90f4308d..3daca1dc 100644 --- a/src/packages/components/Charts/Pies/PieCommon/index.vue +++ b/src/packages/components/Charts/Pies/PieCommon/index.vue @@ -1,5 +1,5 @@ diff --git a/src/settings/chartThemes/global.theme.json b/src/settings/chartThemes/global.theme.json new file mode 100644 index 00000000..c3e11dce --- /dev/null +++ b/src/settings/chartThemes/global.theme.json @@ -0,0 +1,53 @@ +{ + "title": { + "textStyle": { + "color": "#464646" + }, + "subtextStyle": { + "color": "#6e7079" + } + }, + "xAxis": { + "nameTextStyle": { + "color": "#B9B8CE" + }, + "axisLine": { + "lineStyle": { + "color": "#B9B8CE", + "width": 1 + }, + "onZero": true, + "onZeroAxisIndex": null + }, + "splitLine": { + "lineStyle": { + "color": "#484753", + "width": 1 + } + } + }, + "yAxis": { + "nameTextStyle": { + "color": "#B9B8CE" + }, + "axisLine": { + "lineStyle": { + "color": "#B9B8CE", + "width": 1 + }, + "onZero": true, + "onZeroAxisIndex": null + }, + "splitLine": { + "lineStyle": { + "color": "#484753", + "width": 1 + } + } + }, + "legend": { + "textStyle": { + "color": "#B9B8CE" + } + } +} \ No newline at end of file diff --git a/src/settings/chartThemes/index.ts b/src/settings/chartThemes/index.ts index dd6b3547..dac2d1f7 100644 --- a/src/settings/chartThemes/index.ts +++ b/src/settings/chartThemes/index.ts @@ -10,6 +10,8 @@ import vintage from './themes/vintage.json' import walden from './themes/walden.json' import westeros from './themes/westeros.json' import wonderland from './themes/wonderland.json' +// 默认主题详细配置 +import themeJson from './global.theme.json' export const chartColors = { dark, @@ -26,8 +28,11 @@ export const chartColors = { roma, } +// 默认主题 export const defaultTheme = 'dark' +// 主题色列表 +export type ChartColorsNameType = keyof typeof chartColorsName export const chartColorsName = { dark: '明亮', customed: '暗淡', @@ -43,6 +48,7 @@ export const chartColorsName = { roma: '罗马红', } +// 主题色列表 export const chartColorsshow = { dark: 'linear-gradient(to right, #4992ff 0%, #7cffb2 100%)', customed: 'linear-gradient(to right, #5470c6 0%, #91cc75 100%)', @@ -57,3 +63,7 @@ export const chartColorsshow = { shine: 'linear-gradient(to right, #c12e34 0%, #0098d9 100%)', roma: 'linear-gradient(to right, #e01f54 0%, #5e4ea5 100%)', } + +// 默认主题详细配置 +export type GlobalThemeJsonType = typeof themeJson +export const globalThemeJson = themeJson \ No newline at end of file diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index a4de1600..4d8779f2 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -1,5 +1,6 @@ import { CreateComponentType } from '@/packages/index.d' import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' +import { ChartColorsNameType, GlobalThemeJsonType } from '@/settings/chartThemes/index' // 编辑画布属性 export enum EditCanvasTypeEnum { @@ -38,7 +39,8 @@ export enum EditCanvasConfigEnum { BRIGHTNESS = 'brightness', CONTRAST = 'contrast', UN_OPACITY = 'unOpacity', - CHART_THEME = 'chartTheme', + CHART_THEME_COLOR = 'chartThemeColor', + CHART_THEME_SETTING = 'chartThemeSetting', BACKGROUND = 'background', BACKGROUND_IAMGE = 'backgroundImage', SELECT_COLOR = 'selectColor' @@ -63,7 +65,9 @@ export interface EditCanvasConfigType { [EditCanvasConfigEnum.BACKGROUND]?: string [EditCanvasConfigEnum.BACKGROUND_IAMGE]?: string | null // 图表主题颜色 - [EditCanvasConfigEnum.CHART_THEME]: string + [EditCanvasConfigEnum.CHART_THEME_COLOR]: ChartColorsNameType + // 图表全局配置 + [EditCanvasConfigEnum.CHART_THEME_SETTING]: GlobalThemeJsonType // 图表主题颜色 [EditCanvasConfigEnum.SELECT_COLOR]: boolean } diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index e6bc17c7..f75ce602 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -3,7 +3,7 @@ import { getUUID, loadingStart, loadingFinish, loadingError } from '@/utils' import { CreateComponentType } from '@/packages/index.d' import debounce from 'lodash/debounce' import cloneDeep from 'lodash/cloneDeep' -import { defaultTheme } from '@/settings/chartThemes/index' +import { defaultTheme, globalThemeJson } from '@/settings/chartThemes/index' // 记录记录 import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' @@ -38,6 +38,20 @@ export const useChartEditStoreStore = defineStore({ // 拖拽中 isDrag: false }, + // 右键菜单 + rightMenuShow: false, + // 鼠标定位 + mousePosition: { + x: 0, + y: 0 + }, + // 目标图表 + targetChart: { + hoverId: undefined, + selectId: undefined + }, + // 记录临时数据（复制等） + recordChart: undefined, // 画布属性（需存储给后端） editCanvasConfig: { // 默认宽度 @@ -60,22 +74,10 @@ export const useChartEditStoreStore = defineStore({ // 是否使用纯颜色 selectColor: true, // chart 主题色 - chartTheme: defaultTheme || 'dark' + chartThemeColor: defaultTheme || 'dark', + // 全局配置 + chartThemeSetting: globalThemeJson }, - // 右键菜单 - rightMenuShow: false, - // 鼠标定位 - mousePosition: { - x: 0, - y: 0 - }, - // 目标图表 - targetChart: { - hoverId: undefined, - selectId: undefined - }, - // 记录临时数据（复制等） - recordChart: undefined, // 图表数组（需存储给后端） componentList: [] }), diff --git a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.vue b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.vue index a5eec5a1..ddd6f01f 100644 --- a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.vue +++ b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.vue @@ -34,7 +34,8 @@ import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditSt import { chartColors, chartColorsName, - chartColorsshow + chartColorsshow, + ChartColorsNameType } from '@/settings/chartThemes/index' import { useDesignStore } from '@/store/modules/designStore/designStore' import cloneDeep from 'lodash/cloneDeep' @@ -48,7 +49,7 @@ const designStore = useDesignStore() const themeColor = ref(designStore.getAppTheme) const selectName = computed(() => { - return chartEditStoreStore.getEditCanvasConfig.chartTheme + return chartEditStoreStore.getEditCanvasConfig.chartThemeColor }) // 获取用来展示的色号 @@ -56,8 +57,9 @@ const fetchShowColors = (colors: Array) => { return cloneDeep(colors).splice(0, 6) } -const selectTheme = (theme: string) => { - chartEditStoreStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME, theme) +// 设置主体色（在 ContentEdit > List 中进行注入） +const selectTheme = (theme: ChartColorsNameType) => { + chartEditStoreStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, theme) } diff --git a/src/views/chart/ContentDetails/components/CanvasPage/index.vue b/src/views/chart/ContentDetails/components/CanvasPage/index.vue index 0ad6a295..21ebc659 100644 --- a/src/views/chart/ContentDetails/components/CanvasPage/index.vue +++ b/src/views/chart/ContentDetails/components/CanvasPage/index.vue @@ -142,7 +142,7 @@ const switchSelectColorLoading = ref(false) const globalTabList = [ { key: 'ChartTheme', - title: '主题', + title: '主题颜色', icon: ColorPaletteIcon, render: ChartTheme }, diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index ee703fc7..5018d9e6 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -30,7 +30,8 @@ class="edit-content-chart" :is="item.key" :chartData="item" - :themeData="themeData" + :themeSetting="themeSetting" + :themeColor="themeColor" :style="useSizeStyle(item.attr)" /> @@ -69,12 +70,16 @@ useLayout() const editRangeRef = ref(null) const { mouseenterHandle, mouseleaveHandle, mousedownHandle } = useMouseHandle() -// 主题色注入 -const themeData = computed(() => { - const theme = chartEditStore.getEditCanvasConfig.chartTheme - if(theme === 'dark') return 'dark' - // @ts-ignore - return chartColors[theme] +// 主题色 +const themeSetting = computed(() => { + const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting + return chartThemeSetting +}) + +// 配置项 +const themeColor = computed(() => { + const chartThemeColor = chartEditStore.getEditCanvasConfig.chartThemeColor + return chartColors[chartThemeColor] }) // 键盘事件