feat: 对接全局颜色和自定义组件交互

This commit is contained in:
奔跑的面条 2023-02-26 18:36:15 +08:00
parent 196df94aee
commit 87386e69a3
23 changed files with 132 additions and 55 deletions

View File

@ -1,7 +1,6 @@
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { LineCommonConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'

View File

@ -34,23 +34,17 @@ export const defaultTheme = 'dark'
// 默认展示的选择器颜色列表
export const swatchesColors = ['#232324', '#2a2a2b', '#313132', '#373739', '#757575', '#e0e0e0', '#eeeeee', '#fafafa']
// 主题色列表
export type ChartColorsNameType = keyof typeof chartColorsName
export const chartColorsName = {
dark: '明亮',
customed: '暗淡',
macarons: '马卡龙',
walden: '蓝绿',
purplePassion: '深紫',
vintage: '复古',
chalk: '粉青',
westeros: '灰粉',
wonderland: '青草',
essos: '橘红',
shine: '深色',
roma: '罗马红'
// 自定义颜色
export type CustomColorsType = {
id: string,
name: string,
color: string[]
}
// 主题色列表, 自定义的颜色使用的是 UUID 作为标识,因为两者数据结构不一致
export type ChartColorsNameType = keyof typeof chartColors
// 渐变主题色列表主色1、主色2、阴影、渐变1、渐变2
export const chartColorsSearch = {
dark: ['#4992ff', '#7cffb2', 'rgba(68, 181, 226, 0.3)', 'rgba(73, 146, 255, 0.5)', 'rgba(124, 255, 178, 0.5)'],

View File

@ -8,5 +8,6 @@
"#d4a4eb",
"#d2f5a6",
"#76f2f2"
]
],
"name": "粉青"
}

View File

@ -9,5 +9,6 @@
"#fc8452",
"#9a60b4",
"#ea7ccc"
]
],
"name": "暗淡"
}

View File

@ -9,5 +9,6 @@
"#ff8a45",
"#8d48e3",
"#dd79ff"
]
],
"name": "明亮"
}

View File

@ -6,5 +6,6 @@
"#ffb248",
"#f2d643",
"#ebdba4"
]
],
"name": "橘红"
}

View File

@ -20,5 +20,6 @@
"#7eb00a",
"#6f5553",
"#c14089"
]
],
"name": "马卡龙"
}

View File

@ -6,5 +6,6 @@
"#71669e",
"#cc70af",
"#7cb4cc"
]
],
"name": "深紫"
}

View File

@ -20,5 +20,6 @@
"#3cb371",
"#d5b158",
"#38b6b6"
]
],
"name": "罗马红"
}

View File

@ -8,5 +8,6 @@
"#339ca8",
"#cda819",
"#32a487"
]
],
"name": "深色"
}

View File

@ -10,5 +10,6 @@
"#cc7e63",
"#724e58",
"#4b565b"
]
],
"name": "复古"
}

View File

@ -6,5 +6,6 @@
"#a0a7e6",
"#c4ebad",
"#96dee8"
]
],
"name": "蓝绿"
}

View File

@ -6,5 +6,6 @@
"#93b7e3",
"#a5e7f0",
"#cbb0e3"
]
],
"name": "灰粉"
}

View File

@ -6,5 +6,6 @@
"#d0648a",
"#f58db2",
"#f2b3c9"
]
],
"name": "青草"
}

View File

@ -10,7 +10,7 @@ import {
RequestParamsObjType
} from '@/enums/httpEnum'
import { PreviewScaleEnum } from '@/enums/styleEnum'
import type { ChartColorsNameType, GlobalThemeJsonType } from '@/settings/chartThemes/index'
import type { ChartColorsNameType, CustomColorsType, GlobalThemeJsonType } from '@/settings/chartThemes/index'
// 编辑画布属性
export enum EditCanvasTypeEnum {
@ -52,6 +52,7 @@ export enum EditCanvasConfigEnum {
WIDTH = 'width',
HEIGHT = 'height',
CHART_THEME_COLOR = 'chartThemeColor',
CHART_CUSTOM_THEME_COLOR_INFO = 'chartCustomThemeColorInfo',
CHART_THEME_SETTING = 'chartThemeSetting',
BACKGROUND = 'background',
BACKGROUND_IMAGE = 'backgroundImage',
@ -87,9 +88,12 @@ export interface EditCanvasConfigType {
[EditCanvasConfigEnum.HEIGHT]: number
// 背景色
[EditCanvasConfigEnum.BACKGROUND]?: string
// 背景图片
[EditCanvasConfigEnum.BACKGROUND_IMAGE]?: string | null
// 图表主题颜色
[EditCanvasConfigEnum.CHART_THEME_COLOR]: ChartColorsNameType
// 自定义图表主题颜色
[EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO]?: CustomColorsType[]
// 图表全局配置
[EditCanvasConfigEnum.CHART_THEME_SETTING]: GlobalThemeJsonType
// 图表主题颜色

View File

@ -108,6 +108,8 @@ export const useChartEditStore = defineStore({
selectColor: true,
// chart 主题色
chartThemeColor: defaultTheme || 'dark',
// 自定义颜色列表
chartCustomThemeColorInfo: undefined,
// 全局配置
chartThemeSetting: globalThemeJson,
// 适配方式

View File

@ -2,6 +2,7 @@ import Color from 'color'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { PickCreateComponentType } from '@/packages/index.d'
import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
import { chartColors, CustomColorsType } from '@/settings/chartThemes/index'
type AttrType = PickCreateComponentType<'attr'>
type StylesType = PickCreateComponentType<'styles'>
@ -87,7 +88,7 @@ export function darken(color: string, concentration: number) {
}
/**
* hsl 16
* * hsl 16
* @param hsl
* @returns
*/
@ -115,3 +116,26 @@ export const setHtmlTheme = (themeName?: string) => {
const designStore = useDesignStore()
e.setAttribute('data-theme', designStore.themeName)
}
/**
* *
* @param chartDefaultColors
* @param customColor
* @returns
*/
export const colorCustomMerge = (customColor?: CustomColorsType[]) => {
type FormateCustomColorType = {
[T: string]: {
color: string[]
name: string
}
}
const formateCustomColor: FormateCustomColorType = {}
customColor?.forEach(item => {
formateCustomColor[item.id] = {
color: item.color,
name: item.name
}
})
return { ...formateCustomColor, ...chartColors }
}

View File

@ -10,7 +10,7 @@
</n-card>
<n-card
v-for="(value, key) in chartColors"
v-for="(value, key) in comChartColors"
:key="key"
class="card-box"
:class="{ selected: key === selectName }"
@ -20,7 +20,7 @@
@click="selectTheme(key)"
>
<div class="go-flex-items-center">
<n-text>{{ chartColorsName[key] }}</n-text>
<n-ellipsis style="text-align: left; width: 60px">{{ value.name }} </n-ellipsis>
<span
class="theme-color-item"
v-for="colorItem in fetchShowColors(value.color)"
@ -40,11 +40,18 @@ import { ref, computed } from 'vue'
import cloneDeep from 'lodash/cloneDeep'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import { chartColors, chartColorsName, ChartColorsNameType } from '@/settings/chartThemes/index'
import { chartColors, ChartColorsNameType } from '@/settings/chartThemes/index'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { loadAsyncComponent } from '@/utils'
import { loadAsyncComponent, colorCustomMerge } from '@/utils'
import { icon } from '@/plugins'
type FormateCustomColorType = {
[T: string]: {
color: string[]
name: string
}
}
const CreateColor = loadAsyncComponent(() => import('../CreateColor/index.vue'))
const { SquareIcon, AddIcon } = icon.ionicons5
@ -54,10 +61,10 @@ const chartEditStore = useChartEditStore()
const designStore = useDesignStore()
const createColorModelShow = ref(false)
//
const createColorHandle = () => {
createColorModelShow.value = true
}
//
const comChartColors = computed(() => {
return colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
})
//
const themeColor = computed(() => {
@ -69,6 +76,11 @@ const selectName = computed(() => {
return chartEditStore.getEditCanvasConfig.chartThemeColor
})
//
const createColorHandle = () => {
createColorModelShow.value = true
}
//
const colorBackgroundImage = (item: { color: string[] }) => {
return `linear-gradient(to right, ${item.color[0]} 0%, ${item.color[5]} 100%)`

View File

@ -78,7 +78,7 @@
</n-card>
<n-tooltip trigger="hover">
<template #trigger>
<n-button text :disabled="item.id === selectColorId" @click="deleteHandle(index)">
<n-button text :disabled="item.id === selectThemeColor" @click="deleteHandle(index)">
<n-icon class="go-ml-1 go-cursor-pointer" size="16" :depth="3">
<trash-icon></trash-icon>
</n-icon>
@ -101,13 +101,15 @@
</template>
<script setup lang="ts">
import { ref, watch, computed, reactive } from 'vue'
import { ref, watch, computed, reactive, nextTick, onMounted } from 'vue'
import cloneDeep from 'lodash/cloneDeep'
import { CreateColorRender } from '../CreateColorRender/index'
import noData from '@/assets/images/canvas/noData.png'
import { getUUID, goDialog } from '@/utils'
import { icon } from '@/plugins'
import { UvIndex } from '@vicons/carbon'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import { CreateColorRender } from '../CreateColorRender/index'
const props = defineProps({
modelShow: Boolean
@ -127,9 +129,10 @@ const defaultColor: ColorType = {
name: '未命名',
color: ['#6ae5bb', '#69e3de', '#5ac4ee', '#5ac4ee', '#4498ec', '#3c7ddf']
}
const chartEditStore = useChartEditStore()
const modelShowRef = ref(false)
//
let colorList = reactive<Array<ColorType>>([])
let colorList = reactive<Array<ColorType>>(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo || [])
//
const updateColor = ref<ColorType | undefined>(undefined)
//
@ -143,11 +146,19 @@ watch(
() => props.modelShow,
newValue => {
modelShowRef.value = newValue
if (newValue) {
//
if (colorList.length) selectColor.selectInfo = colorList[0]
}
}
)
// ID
const selectColorId = computed(() => selectColor?.selectInfo?.id)
//
const selectThemeColor = computed(() => chartEditStore.getEditCanvasConfig.chartThemeColor)
//
const selectHandle = (item: ColorType) => {
if (item.id === selectColorId.value) return
@ -171,6 +182,7 @@ const createColor = () => {
selectColor.selectInfo = newData
colorList.push(newData)
selectHandle(newData)
updateColor.value = newData
}
if (updateColor.value !== undefined) {
goDialog({
@ -187,7 +199,21 @@ const createColor = () => {
//
const deleteHandle = (index: number) => {
colorList.splice(index, 1)
goDialog({
message: `是否删除此颜色?`,
onPositiveCallback: () => {
colorList.splice(index, 1)
chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList))
nextTick(() => {
if (index) {
selectHandle(colorList[index - 1])
} else {
//
selectColor.selectInfo = undefined
}
})
}
})
}
//
@ -204,16 +230,19 @@ const saveHandle = () => {
colorList.splice(index, 1, updateColorPrefix)
window.$message.success('颜色应用成功!')
updateColor.value = undefined
//
nextTick(() => {
chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList))
})
} else {
window.$message.error('颜色应用失败!')
}
}
//
//
const closeHandle = () => {
const positiveHandle = () => {
updateColor.value = undefined
colorList.splice(0, colorList.length)
selectColor.selectInfo = undefined
emit('update:modelShow', false)
}

View File

@ -168,7 +168,10 @@ const computedColorList = (color?: string) => {
})
return {
default: [...comLightenArr.reverse().splice(0, parseInt(`${num / 2}`) - 9), ...comDarkenArr.splice(0, parseInt(`${num / 2}`))],
default: [
...comLightenArr.reverse().splice(0, parseInt(`${num / 2}`) - 9),
...comDarkenArr.splice(0, parseInt(`${num / 2}`))
],
fade: comDarkenFadeArr.reverse().splice(0, 27)
}
}

View File

@ -64,6 +64,4 @@ watch(
deep: true
}
)
</script>
<style lang="scss" scoped></style>
</script>

View File

@ -56,7 +56,7 @@ import { MenuEnum } from '@/enums/editPageEnum'
import { chartColors } from '@/settings/chartThemes/index'
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
import { useMouseHandle } from '../../hooks/useDrag.hook'
@ -117,8 +117,8 @@ const optionsHandle = (
//
const themeColor = computed(() => {
const chartThemeColor = chartEditStore.getEditCanvasConfig.chartThemeColor
return chartColors[chartThemeColor]
const colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor]
})
//

View File

@ -87,7 +87,7 @@ import { onMounted, computed } from 'vue'
import { chartColors } from '@/settings/chartThemes/index'
import { MenuEnum } from '@/enums/editPageEnum'
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils'
import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@ -146,8 +146,8 @@ const themeSetting = computed(() => {
//
const themeColor = computed(() => {
const chartThemeColor = chartEditStore.getEditCanvasConfig.chartThemeColor
return chartColors[chartThemeColor]
const colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor]
})
//