From 0d726846fc858e00c63a9c6afab9bb3a518a5b8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Fri, 24 Feb 2023 21:34:15 +0800 Subject: [PATCH 01/12] =?UTF-8?q?fix:=20=E5=A4=84=E7=90=86=20deep=20?= =?UTF-8?q?=E5=A4=B1=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CanvasPage/index.vue | 13 +++++-------- .../components/ChartDataPondList/index.vue | 10 ++++------ 2 files changed, 9 insertions(+), 14 deletions(-) diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue index f024a4c2..fc5a915e 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue @@ -22,7 +22,7 @@ - +
- +
背景颜色 @@ -294,13 +294,10 @@ $uploadHeight: 193px; cursor: pointer; margin-bottom: 20px; @include deep() { - .n-card__content { - padding: 0; - overflow: hidden; - } .n-upload-dragger { padding: 5px; width: $uploadWidth; + background-color: rgba(0, 0, 0, 0); } } .upload-show { @@ -331,8 +328,8 @@ $uploadHeight: 193px; padding-right: 2.25em; } .select-preview-icon { - padding-right: .68em; - padding-left: .68em; + padding-right: 0.68em; + padding-left: 0.68em; } .tabs-box { margin-top: 20px; diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondList/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondList/index.vue index a19c90e4..696fcff8 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondList/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondList/index.vue @@ -1,6 +1,6 @@ @@ -31,12 +28,7 @@ import { computed } from 'vue' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d' -import { - chartColors, - chartColorsName, - chartColorsshow, - ChartColorsNameType -} from '@/settings/chartThemes/index' +import { chartColors, chartColorsName, chartColorsshow, ChartColorsNameType } from '@/settings/chartThemes/index' import { useDesignStore } from '@/store/modules/designStore/designStore' import cloneDeep from 'lodash/cloneDeep' import { icon } from '@/plugins' @@ -69,6 +61,8 @@ const selectTheme = (theme: ChartColorsNameType) => { From a8ac40770dd31fc77599d7d3a0983e2889621144 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sat, 25 Feb 2023 22:00:55 +0800 Subject: [PATCH 03/12] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E9=A2=9C=E8=89=B2=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugins/icon.ts | 6 + src/plugins/naive.ts | 2 + src/settings/chartThemes/index.ts | 18 +- src/styles/common/mixins/mixins.scss | 2 +- src/utils/style.ts | 10 + .../components/ChartThemeColor/index.vue | 47 ++- .../components/CreateColor/index.vue | 331 ++++++++++++++++++ .../components/CreateColorRender/index.ts | 3 + .../components/CreateColorRender/index.vue | 233 ++++++++++++ .../CreateColorRenderChart/barOptions.ts | 47 +++ .../CreateColorRenderChart/index.ts | 3 + .../CreateColorRenderChart/index.vue | 69 ++++ .../CreateColorRenderChart/lineOptions.ts | 72 ++++ .../components/CanvasPage/index.vue | 4 +- 14 files changed, 817 insertions(+), 30 deletions(-) create mode 100644 src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue create mode 100644 src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.ts create mode 100644 src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue create mode 100644 src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/barOptions.ts create mode 100644 src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.ts create mode 100644 src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.vue create mode 100644 src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/lineOptions.ts diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 1f485371..b195e340 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -1,4 +1,5 @@ import { + Add as AddIcon, Close as CloseIcon, Remove as RemoveIcon, Resize as ResizeIcon, @@ -52,6 +53,7 @@ import { ColorWand as ColorWandIcon, ArrowBack as ArrowBackIcon, ArrowForward as ArrowForwardIcon, + ArrowDown as ArrowDownIcon, Planet as PawIcon, Search as SearchIcon, ChevronUpOutline as ChevronUpOutlineIcon, @@ -101,6 +103,8 @@ import { } from '@vicons/carbon' const ionicons5 = { + // 新增 + AddIcon, // 帮助（问号） HelpOutlineIcon, // 添加 @@ -206,6 +210,8 @@ const ionicons5 = { ArrowBackIcon, // 前进 ArrowForwardIcon, + // 向下 + ArrowDownIcon, // 狗爪 PawIcon, // 搜索（放大镜） diff --git a/src/plugins/naive.ts b/src/plugins/naive.ts index ab4dbb1f..0d004df7 100644 --- a/src/plugins/naive.ts +++ b/src/plugins/naive.ts @@ -57,6 +57,7 @@ import { NProgress, NDatePicker, NGrid, + NGi, NGridItem, NList, NListItem, @@ -160,6 +161,7 @@ const naive = create({ NProgress, NDatePicker, NGrid, + NGi, NGridItem, NList, NListItem, diff --git a/src/settings/chartThemes/index.ts b/src/settings/chartThemes/index.ts index d066d858..7a205c1c 100644 --- a/src/settings/chartThemes/index.ts +++ b/src/settings/chartThemes/index.ts @@ -31,6 +31,9 @@ export const chartColors = { // 默认主题 export const defaultTheme = 'dark' +// 默认展示的选择器颜色列表 +export const swatchesColors = ['#232324', '#2a2a2b', '#313132', '#373739', '#757575', '#e0e0e0', '#eeeeee', '#fafafa'] + // 主题色列表 export type ChartColorsNameType = keyof typeof chartColorsName export const chartColorsName = { @@ -48,21 +51,6 @@ 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%)', - macarons: 'linear-gradient(to right, #2ec7c9 0%, #b6a2de 100%)', - walden: 'linear-gradient(to right, #3fb1e3 0%, #6be6c1 100%)', - purplePassion: 'linear-gradient(to right, #9b8bba 0%, #e098c7 100%)', - vintage: 'linear-gradient(to right, #d87c7c 0%, #919e8b 100%)', - chalk: 'linear-gradient(to right, #fc97af 0%, #87f7cf 100%)', - westeros: 'linear-gradient(to right, #516b91 0%, #edafda 100%)', - wonderland: 'linear-gradient(to right, #4ea397 0%, #22c3aa 100%)', - essos: 'linear-gradient(to right, #893448 0%, #d95850 100%)', - shine: 'linear-gradient(to right, #c12e34 0%, #0098d9 100%)', - roma: 'linear-gradient(to right, #e01f54 0%, #5e4ea5 100%)' -} // 渐变主题色列表（主色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)'], diff --git a/src/styles/common/mixins/mixins.scss b/src/styles/common/mixins/mixins.scss index 5cb85f5f..ec6f2ccd 100644 --- a/src/styles/common/mixins/mixins.scss +++ b/src/styles/common/mixins/mixins.scss @@ -17,7 +17,7 @@ } @mixin deep() { - :deep(*) { + :deep() { @content; } } diff --git a/src/utils/style.ts b/src/utils/style.ts index 8e8605d3..0fa9400a 100644 --- a/src/utils/style.ts +++ b/src/utils/style.ts @@ -86,6 +86,16 @@ export function darken(color: string, concentration: number) { return Color(color).darken(concentration).toString() } +/** + * hsl 转成16进制 + * @param hsl + * @returns + */ +export function hslToHex(hslString: string): string { + const color = Color(hslString); + return color.hex() +} + /** * * 修改主题色 * @param themeName 主题名称 diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue index fdca3b4a..9dd2e32b 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue @@ -1,5 +1,14 @@ + + diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.ts b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.ts new file mode 100644 index 00000000..0008d299 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.ts @@ -0,0 +1,3 @@ +import CreateColorRender from './index.vue' + +export { CreateColorRender } diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue new file mode 100644 index 00000000..6bcdd75e --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue @@ -0,0 +1,233 @@ + + + + + diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/barOptions.ts b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/barOptions.ts new file mode 100644 index 00000000..e9a1048b --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/barOptions.ts @@ -0,0 +1,47 @@ +import { echartOptionProfixHandle } from '@/packages/public' + +export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] + +const seriesHandle = (color: string[]) => { + const numHandle = (numsi: number, i: number) => parseInt(`${numsi * Math.random()}`, 10) * 2 + const nums = [60, 51, 200, 334, 366, 456, 223] + + return color.map((item, index) => ({ + name: `data${index + 1}`, + type: 'bar', + data: nums.map((numsItem, numsi) => numHandle(numsItem, index)) + })) +} + +export const option = (color: string[]) => { + return echartOptionProfixHandle( + { + tooltip: { + trigger: 'axis', + showContent: false, + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + data: color.map((e, i) => `data${i + 1}`), + axisTick: { + alignWithLabel: true + } + }, + yAxis: { + show: true, + type: 'value' + }, + series: seriesHandle(color || []) + }, + includes + ) +} diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.ts b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.ts new file mode 100644 index 00000000..cf82cfcc --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.ts @@ -0,0 +1,3 @@ +import CreateColorRenderChart from './index.vue' + +export { CreateColorRenderChart } diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.vue new file mode 100644 index 00000000..2733e982 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/lineOptions.ts b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/lineOptions.ts new file mode 100644 index 00000000..2a41700d --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/lineOptions.ts @@ -0,0 +1,72 @@ +import { echartOptionProfixHandle } from '@/packages/public' +import { graphic } from 'echarts/core' +import { fade, hslToHex } from '@/utils' + +export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] + +const seriesHandle = (color: string[]) => { + const numHandle = (numsi: number, i: number) => parseInt(`${numsi * Math.random()}`, 10) * 2 + const nums = [130, 251, 200, 334, 366, 456, 223] + + return color.map((item, index) => ({ + name: `data${index + 1}`, + type: 'line', + smooth: true, + lineStyle: { + width: 1, + type: 'solid' + }, + emphasis: { + focus: 'series' + }, + areaStyle: { + opacity: 0.8, + color: new graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 1, + color: item + }, + { + offset: 0, + color: item + } + ]) + }, + showSymbol: false, + data: nums.reverse().map((numsItem, numsi) => numHandle(numsItem, index)) + })) +} + +export const option = (color: string[]) => { + return echartOptionProfixHandle( + { + tooltip: { + trigger: 'axis', + showContent: false, + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: color.map((e, i) => `data${i + 1}`), + axisTick: { + alignWithLabel: true + } + }, + yAxis: { + show: true, + type: 'value' + }, + series: seriesHandle(color || []) + }, + includes + ) +} diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue index fc5a915e..f4ac2d24 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue @@ -128,6 +128,7 @@ From 7f1012274c020957a8882b04980f5fab841b291d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sat, 25 Feb 2023 23:44:03 +0800 Subject: [PATCH 05/12] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=95=B0?= =?UTF-8?q?=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CanvasPage/components/CreateColorRenderChart/barOptions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/barOptions.ts b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/barOptions.ts index e9a1048b..20fe41a0 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/barOptions.ts +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/barOptions.ts @@ -4,7 +4,7 @@ export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] const seriesHandle = (color: string[]) => { const numHandle = (numsi: number, i: number) => parseInt(`${numsi * Math.random()}`, 10) * 2 - const nums = [60, 51, 200, 334, 366, 456, 223] + const nums = [260, 251, 200, 334, 366, 256, 253] return color.map((item, index) => ({ name: `data${index + 1}`, From e54de6610386db96bb91da6aede57d8b31c0bb4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sun, 26 Feb 2023 01:43:46 +0800 Subject: [PATCH 06/12] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=20UI=20?= =?UTF-8?q?=E6=8E=A7=E4=BB=B6=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CreateColor/index.vue | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue index c25300af..9f1a578e 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue @@ -211,9 +211,23 @@ const saveHandle = () => { // 取消 const closeHandle = () => { - colorList.splice(0, colorList.length) - selectColor.selectInfo = undefined - emit('update:modelShow', false) + const positiveHandle = () => { + updateColor.value = undefined + colorList.splice(0, colorList.length) + selectColor.selectInfo = undefined + emit('update:modelShow', false) + } + + if (updateColor.value !== undefined) { + goDialog({ + message: '当前有变动未保存，是否直接放弃修改？', + onPositiveCallback: () => { + positiveHandle() + } + }) + } else { + positiveHandle() + } } // 底色 From d2cc20288a1c991d46ed5d2c40801abd35cf8c3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sun, 26 Feb 2023 13:08:22 +0800 Subject: [PATCH 07/12] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E7=BB=84=E4=BB=B6=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CanvasPage/components/CreateColorRender/index.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue index 71d94975..d601ac34 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue @@ -168,8 +168,8 @@ const computedColorList = (color?: string) => { }) return { - default: [...comLightenArr.splice(0, parseInt(`${num / 2}`)), ...comDarkenArr.splice(0, parseInt(`${num / 2}`))], - fade: comDarkenFadeArr + default: [...comLightenArr.reverse().splice(0, parseInt(`${num / 2}`) - 9), ...comDarkenArr.splice(0, parseInt(`${num / 2}`))], + fade: comDarkenFadeArr.reverse().splice(0, 27) } } From 2abf83b6bccb00ae7b1f0896983f7d50f01147ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sun, 26 Feb 2023 18:36:15 +0800 Subject: [PATCH 08/12] =?UTF-8?q?feat:=20=E5=AF=B9=E6=8E=A5=E5=85=A8?= =?UTF-8?q?=E5=B1=80=E9=A2=9C=E8=89=B2=E5=92=8C=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Charts/Lines/LineCommon/config.ts | 1 - src/settings/chartThemes/index.ts | 24 ++++------- src/settings/chartThemes/themes/chalk.json | 3 +- src/settings/chartThemes/themes/customed.json | 3 +- src/settings/chartThemes/themes/dark.json | 3 +- src/settings/chartThemes/themes/essos.json | 3 +- src/settings/chartThemes/themes/macarons.json | 3 +- .../chartThemes/themes/purple-passion.json | 3 +- src/settings/chartThemes/themes/roma.json | 3 +- src/settings/chartThemes/themes/shine.json | 3 +- src/settings/chartThemes/themes/vintage.json | 3 +- src/settings/chartThemes/themes/walden.json | 3 +- src/settings/chartThemes/themes/westeros.json | 3 +- .../chartThemes/themes/wonderland.json | 3 +- .../chartEditStore/chartEditStore.d.ts | 6 ++- .../modules/chartEditStore/chartEditStore.ts | 2 + src/utils/style.ts | 26 ++++++++++- .../components/ChartThemeColor/index.vue | 28 ++++++++---- .../components/CreateColor/index.vue | 43 ++++++++++++++++--- .../components/CreateColorRender/index.vue | 5 ++- .../CreateColorRenderChart/index.vue | 4 +- .../components/EditGroup/index.vue | 6 +-- src/views/chart/ContentEdit/index.vue | 6 +-- 23 files changed, 132 insertions(+), 55 deletions(-) diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts index 917a5064..c6c07610 100644 --- a/src/packages/components/Charts/Lines/LineCommon/config.ts +++ b/src/packages/components/Charts/Lines/LineCommon/config.ts @@ -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' diff --git a/src/settings/chartThemes/index.ts b/src/settings/chartThemes/index.ts index 7a205c1c..75e79e5c 100644 --- a/src/settings/chartThemes/index.ts +++ b/src/settings/chartThemes/index.ts @@ -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)'], diff --git a/src/settings/chartThemes/themes/chalk.json b/src/settings/chartThemes/themes/chalk.json index 09ac9268..62f4b9ea 100644 --- a/src/settings/chartThemes/themes/chalk.json +++ b/src/settings/chartThemes/themes/chalk.json @@ -8,5 +8,6 @@ "#d4a4eb", "#d2f5a6", "#76f2f2" - ] + ], + "name": "粉青" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/customed.json b/src/settings/chartThemes/themes/customed.json index d29733a6..2a0ffa2c 100644 --- a/src/settings/chartThemes/themes/customed.json +++ b/src/settings/chartThemes/themes/customed.json @@ -9,5 +9,6 @@ "#fc8452", "#9a60b4", "#ea7ccc" - ] + ], + "name": "暗淡" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/dark.json b/src/settings/chartThemes/themes/dark.json index 59126d9b..887a6469 100644 --- a/src/settings/chartThemes/themes/dark.json +++ b/src/settings/chartThemes/themes/dark.json @@ -9,5 +9,6 @@ "#ff8a45", "#8d48e3", "#dd79ff" - ] + ], + "name": "明亮" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/essos.json b/src/settings/chartThemes/themes/essos.json index 18823d46..27d57201 100644 --- a/src/settings/chartThemes/themes/essos.json +++ b/src/settings/chartThemes/themes/essos.json @@ -6,5 +6,6 @@ "#ffb248", "#f2d643", "#ebdba4" - ] + ], + "name": "橘红" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/macarons.json b/src/settings/chartThemes/themes/macarons.json index a800789a..14a4aa0f 100644 --- a/src/settings/chartThemes/themes/macarons.json +++ b/src/settings/chartThemes/themes/macarons.json @@ -20,5 +20,6 @@ "#7eb00a", "#6f5553", "#c14089" - ] + ], + "name": "马卡龙" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/purple-passion.json b/src/settings/chartThemes/themes/purple-passion.json index d96e4104..91550499 100644 --- a/src/settings/chartThemes/themes/purple-passion.json +++ b/src/settings/chartThemes/themes/purple-passion.json @@ -6,5 +6,6 @@ "#71669e", "#cc70af", "#7cb4cc" - ] + ], + "name": "深紫" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/roma.json b/src/settings/chartThemes/themes/roma.json index 2b527f53..be5af4df 100644 --- a/src/settings/chartThemes/themes/roma.json +++ b/src/settings/chartThemes/themes/roma.json @@ -20,5 +20,6 @@ "#3cb371", "#d5b158", "#38b6b6" - ] + ], + "name": "罗马红" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/shine.json b/src/settings/chartThemes/themes/shine.json index 4c4e0f88..1b2d8529 100644 --- a/src/settings/chartThemes/themes/shine.json +++ b/src/settings/chartThemes/themes/shine.json @@ -8,5 +8,6 @@ "#339ca8", "#cda819", "#32a487" - ] + ], + "name": "深色" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/vintage.json b/src/settings/chartThemes/themes/vintage.json index 28190dd7..72957825 100644 --- a/src/settings/chartThemes/themes/vintage.json +++ b/src/settings/chartThemes/themes/vintage.json @@ -10,5 +10,6 @@ "#cc7e63", "#724e58", "#4b565b" - ] + ], + "name": "复古" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/walden.json b/src/settings/chartThemes/themes/walden.json index 2cf15ab9..37127fba 100644 --- a/src/settings/chartThemes/themes/walden.json +++ b/src/settings/chartThemes/themes/walden.json @@ -6,5 +6,6 @@ "#a0a7e6", "#c4ebad", "#96dee8" - ] + ], + "name": "蓝绿" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/westeros.json b/src/settings/chartThemes/themes/westeros.json index 257891de..6dc5d0b6 100644 --- a/src/settings/chartThemes/themes/westeros.json +++ b/src/settings/chartThemes/themes/westeros.json @@ -6,5 +6,6 @@ "#93b7e3", "#a5e7f0", "#cbb0e3" - ] + ], + "name": "灰粉" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/wonderland.json b/src/settings/chartThemes/themes/wonderland.json index 06c33113..c3739021 100644 --- a/src/settings/chartThemes/themes/wonderland.json +++ b/src/settings/chartThemes/themes/wonderland.json @@ -6,5 +6,6 @@ "#d0648a", "#f58db2", "#f2b3c9" - ] + ], + "name": "青草" } \ 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 0084f673..f06bccbc 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -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 // 图表主题颜色 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 81d7a3b5..4469369e 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -108,6 +108,8 @@ export const useChartEditStore = defineStore({ selectColor: true, // chart 主题色 chartThemeColor: defaultTheme || 'dark', + // 自定义颜色列表 + chartCustomThemeColorInfo: undefined, // 全局配置 chartThemeSetting: globalThemeJson, // 适配方式 diff --git a/src/utils/style.ts b/src/utils/style.ts index 212cb33e..d4a9d30d 100644 --- a/src/utils/style.ts +++ b/src/utils/style.ts @@ -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 } +} \ No newline at end of file diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue index 9dd2e32b..9891ad88 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue @@ -10,7 +10,7 @@
- {{ chartColorsName[key] }} + {{ value.name }} 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%)` diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue index 9f1a578e..35964b5e 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue @@ -78,7 +78,7 @@ - - + \ No newline at end of file diff --git a/src/views/chart/ContentEdit/components/EditGroup/index.vue b/src/views/chart/ContentEdit/components/EditGroup/index.vue index 5d7f1462..03cced49 100644 --- a/src/views/chart/ContentEdit/components/EditGroup/index.vue +++ b/src/views/chart/ContentEdit/components/EditGroup/index.vue @@ -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] }) // 主题色 diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index 2598f65f..1ea44997 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -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] }) // 是否展示渲染 From 9222dec9f2bb27f08961038dfb3c37a39cce988a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sun, 26 Feb 2023 23:34:40 +0800 Subject: [PATCH 09/12] =?UTF-8?q?perf:=20=E5=A4=84=E7=90=86=E6=B8=90?= =?UTF-8?q?=E5=8F=98=E8=89=B2=E5=92=8C=E8=87=AA=E5=AE=9A=E4=B9=89=E8=89=B2?= =?UTF-8?q?=E7=9A=84=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Charts/Lines/LineGradientSingle/index.vue | 6 ++- .../Charts/Lines/LineGradients/index.vue | 6 ++- .../Charts/Lines/LineLinearSingle/index.vue | 6 ++- .../Charts/Mores/WaterPolo/index.vue | 6 ++- src/utils/style.ts | 36 +++++++++++--- .../components/CreateColor/index.vue | 49 +++++++++++++------ .../components/PreviewRenderList/index.vue | 9 ++-- 7 files changed, 84 insertions(+), 34 deletions(-) diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue index e0d9fb7e..0bd33cfe 100644 --- a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue +++ b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue @@ -15,7 +15,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' import { useChartDataFetch } from '@/hooks' -import { isPreview } from '@/utils' +import { isPreview, colorGradientCustomMerge} from '@/utils' const props = defineProps({ themeSetting: { @@ -45,7 +45,9 @@ watch( (newColor: keyof typeof chartColorsSearch) => { try { if (!isPreview()) { - const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme] + const themeColor = + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] || + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme] props.chartConfig.option.series.forEach((value: any, index: number) => { value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [ { diff --git a/src/packages/components/Charts/Lines/LineGradients/index.vue b/src/packages/components/Charts/Lines/LineGradients/index.vue index 8643426f..67ed6437 100644 --- a/src/packages/components/Charts/Lines/LineGradients/index.vue +++ b/src/packages/components/Charts/Lines/LineGradients/index.vue @@ -14,7 +14,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' import { useChartDataFetch } from '@/hooks' -import { isPreview } from '@/utils' +import { isPreview, colorGradientCustomMerge} from '@/utils' const props = defineProps({ themeSetting: { @@ -44,7 +44,9 @@ watch( (newColor: keyof typeof chartColorsSearch) => { try { if (!isPreview()) { - const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme] + const themeColor = + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] || + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme] props.chartConfig.option.series.forEach((value: any, index: number) => { value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [ { diff --git a/src/packages/components/Charts/Lines/LineLinearSingle/index.vue b/src/packages/components/Charts/Lines/LineLinearSingle/index.vue index 19f4ef70..b2863a23 100644 --- a/src/packages/components/Charts/Lines/LineLinearSingle/index.vue +++ b/src/packages/components/Charts/Lines/LineLinearSingle/index.vue @@ -15,7 +15,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' import { useChartDataFetch } from '@/hooks' -import { isPreview } from '@/utils' +import { isPreview, colorGradientCustomMerge } from '@/utils' const props = defineProps({ themeSetting: { @@ -45,7 +45,9 @@ watch( (newColor: keyof typeof chartColorsSearch) => { try { if (!isPreview()) { - const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme] + const themeColor = + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] || + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme] props.chartConfig.option.series.forEach((value: any) => { value.lineStyle.shadowColor = themeColor[2] value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => { diff --git a/src/packages/components/Charts/Mores/WaterPolo/index.vue b/src/packages/components/Charts/Mores/WaterPolo/index.vue index f5aa4f74..e1fefed9 100644 --- a/src/packages/components/Charts/Mores/WaterPolo/index.vue +++ b/src/packages/components/Charts/Mores/WaterPolo/index.vue @@ -10,7 +10,7 @@ import 'echarts-liquidfill/src/liquidFill.js' import { CanvasRenderer } from 'echarts/renderers' import { GridComponent } from 'echarts/components' import config from './config' -import { isPreview, isString, isNumber } from '@/utils' +import { isPreview, isString, isNumber, colorGradientCustomMerge } from '@/utils' import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartDataFetch } from '@/hooks' @@ -44,7 +44,9 @@ watch( (newColor: keyof typeof chartColorsSearch) => { try { if (!isPreview()) { - const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme] + const themeColor = + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] || + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme] // 背景颜色 props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2] // 水球颜色 diff --git a/src/utils/style.ts b/src/utils/style.ts index d4a9d30d..34dce3fe 100644 --- a/src/utils/style.ts +++ b/src/utils/style.ts @@ -2,7 +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' +import { chartColors, chartColorsSearch, CustomColorsType } from '@/settings/chartThemes/index' type AttrType = PickCreateComponentType<'attr'> type StylesType = PickCreateComponentType<'styles'> @@ -93,12 +93,12 @@ export function darken(color: string, concentration: number) { * @returns */ export function hslToHexa(hslString: string): string { - const color = Color(hslString); + const color = Color(hslString) return color.hexa() } export function hslToHex(hslString: string): string { - const color = Color(hslString); + const color = Color(hslString) return color.hex() } @@ -119,9 +119,9 @@ export const setHtmlTheme = (themeName?: string) => { /** * * 合并基础颜色和自定义颜色 - * @param chartDefaultColors - * @param customColor - * @returns + * @param chartDefaultColors + * @param customColor + * @returns */ export const colorCustomMerge = (customColor?: CustomColorsType[]) => { type FormateCustomColorType = { @@ -138,4 +138,26 @@ export const colorCustomMerge = (customColor?: CustomColorsType[]) => { } }) return { ...formateCustomColor, ...chartColors } -} \ No newline at end of file +} + +/** + * * 合并基础渐变颜色和自定义渐变颜色 + * @param customColor + */ +export const colorGradientCustomMerge = (customColor?: CustomColorsType[]) => { + type FormateGradientCustomColorType = { + [T: string]: string[] + } + const formateGradientCustomColor: FormateGradientCustomColorType = {} + customColor?.forEach(item => { + formateGradientCustomColor[item.id] = [ + item.color[0], + item.color[1], + fade(item.color[0], 0.3), + fade(item.color[0], 0.5), + fade(item.color[1], 0.5) + ] + }) + + return { ...formateGradientCustomColor, ...chartColorsSearch } +} diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue index 35964b5e..1c8c3271 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue @@ -199,21 +199,34 @@ const createColor = () => { // 删除 const deleteHandle = (index: number) => { - 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 - } - }) - } - }) + const positiveHandle = () => { + 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 + } + }) + } + if (updateColor.value !== undefined) { + goDialog({ + message: '当前有变动未保存，是否直接放弃修改？', + onPositiveCallback: () => { + updateColor.value = undefined + positiveHandle() + } + }) + } else { + goDialog({ + message: `是否删除此颜色？`, + onPositiveCallback: () => { + positiveHandle() + } + }) + } } // 存储更新数据的值 @@ -226,13 +239,17 @@ const saveHandle = () => { if (!updateColor.value) return const index = colorList.findIndex(item => item.id === updateColor.value?.id) if (index !== -1) { + window.$message.success('颜色应用成功！') const updateColorPrefix = cloneDeep({ ...updateColor.value, name: updateColor.value.name || '未定义' }) colorList.splice(index, 1, updateColorPrefix) - window.$message.success('颜色应用成功！') updateColor.value = undefined + const selectTheme = chartEditStore.getEditCanvasConfig.chartThemeColor + // 变换主题强制渐变色更新 + chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, 'dark') // 存储到全局数据中 nextTick(() => { chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList)) + chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, selectTheme) }) } else { window.$message.error('颜色应用失败！') diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue index eca587aa..800214cf 100644 --- a/src/views/preview/components/PreviewRenderList/index.vue +++ b/src/views/preview/components/PreviewRenderList/index.vue @@ -43,12 +43,14 @@ import { ChartEditStorageType } from '../../index.d' import { PreviewRenderGroup } from '../PreviewRenderGroup/index' import { CreateComponentGroupType } from '@/packages/index.d' import { chartColors } from '@/settings/chartThemes/index' -import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' +import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils' import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils' import { useLifeHandler } from '@/hooks' // 初始化数据池 const { initDataPond, clearMittDataPondMap } = useChartDataPondFetch() +const chartEditStore = useChartEditStore() const props = defineProps({ localStorageInfo: { @@ -63,10 +65,11 @@ const themeSetting = computed(() => { return chartThemeSetting }) + // 配置项 const themeColor = computed(() => { - const chartThemeColor = props.localStorageInfo.editCanvasConfig.chartThemeColor - return chartColors[chartThemeColor] + const colorCustomMergeData = colorCustomMerge(props.localStorageInfo.editCanvasConfig.chartCustomThemeColorInfo) + return colorCustomMergeData[props.localStorageInfo.editCanvasConfig.chartThemeColor] }) // 组件渲染结束初始化数据池 From 4bc41fbde8a50fa33c7aac2e212bce4439f0673b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Mon, 27 Feb 2023 00:24:19 +0800 Subject: [PATCH 10/12] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E9=A2=9C=E8=89=B2=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CanvasPage/components/CreateColor/index.vue | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue index 1c8c3271..5edac24a 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue @@ -183,6 +183,7 @@ const createColor = () => { colorList.push(newData) selectHandle(newData) updateColor.value = newData + saveHandle(false) } if (updateColor.value !== undefined) { goDialog({ @@ -235,11 +236,11 @@ const updateColorHandle = (newColor: ColorType) => { } // 保存数据 -const saveHandle = () => { +const saveHandle = (onMessage = true) => { if (!updateColor.value) return const index = colorList.findIndex(item => item.id === updateColor.value?.id) if (index !== -1) { - window.$message.success('颜色应用成功！') + onMessage && window.$message.success('数据应用成功！') const updateColorPrefix = cloneDeep({ ...updateColor.value, name: updateColor.value.name || '未定义' }) colorList.splice(index, 1, updateColorPrefix) updateColor.value = undefined @@ -252,7 +253,7 @@ const saveHandle = () => { chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, selectTheme) }) } else { - window.$message.error('颜色应用失败！') + window.$message.error('数据应用失败！') } } From 82d800f943bd706bd987d3b3b32e97ddf674ac55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Mon, 27 Feb 2023 12:46:36 +0800 Subject: [PATCH 11/12] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E9=A2=9C=E8=89=B2=E7=BB=84=E4=BB=B6=E4=BA=A4?= =?UTF-8?q?=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CanvasPage/components/CreateColor/index.vue | 8 ++++---- .../components/CreateColorRender/index.vue | 12 +++++++++++- .../chart/ContentEdit/components/EditRange/index.vue | 2 +- 3 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue index 5edac24a..4186750c 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue @@ -56,7 +56,7 @@ 立即创建 -
+
{{ item.name }}
@@ -127,7 +127,7 @@ type ColorType = { const defaultColor: ColorType = { id: getUUID(), name: '未命名', - color: ['#6ae5bb', '#69e3de', '#5ac4ee', '#5ac4ee', '#4498ec', '#3c7ddf'] + color: ['#6ae5bb', '#69e3de', '#5ac5ee', '#5ac4ee', '#4498ec', '#3c7ddf'] } const chartEditStore = useChartEditStore() const modelShowRef = ref(false) diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue index 7a842200..a3f6c441 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue @@ -27,6 +27,7 @@ :show-preview="true" :modes="['hex']" @complete="completeHandle($event, index)" + @update:show="selectHandle(item, index)" />
@@ -183,7 +184,13 @@ const getRenderBackgroundColor = (color?: string) => { } } -// 顶部选择颜色 +// 点击颜色 +const selectHandle = (color: string, index: number) => { + targetColor.color = color + targetColor.index = index +} + +// 顶部改变颜色 const completeHandle = (color?: string, index?: number) => { color && (targetColor.color = color) index && (targetColor.index = index) @@ -205,6 +212,9 @@ const selectExpandColor = (color: string, isHexa: boolean) => { const addColor = () => { const lastData = editColor.value?.color[editColor.value?.color.length - 1] || '#2c2c31' editColor.value?.color.push(lastData) + nextTick(() => { + emit('updateColor', editColor.value) + }) } // 删除颜色 diff --git a/src/views/chart/ContentEdit/components/EditRange/index.vue b/src/views/chart/ContentEdit/components/EditRange/index.vue index d9a7bcc9..d3be9d95 100644 --- a/src/views/chart/ContentEdit/components/EditRange/index.vue +++ b/src/views/chart/ContentEdit/components/EditRange/index.vue @@ -55,7 +55,7 @@ const rangeModelStyle = computed(() => { position: relative; transform-origin: left top; background-size: cover; - border-radius: 20px; + border-radius: 10px; overflow: hidden; @include fetch-border-color('hover-border-color'); @include fetch-bg-color('background-color2'); From 61c43df51b7a06f813024d8a20d416f0095051fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Mon, 27 Feb 2023 13:06:27 +0800 Subject: [PATCH 12/12] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E5=88=A0?= =?UTF-8?q?=E9=99=A4=E9=A2=9C=E8=89=B2=E4=B9=8B=E5=90=8E=E8=87=AA=E5=8A=A8?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E7=9A=84=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CanvasPage/components/CreateColor/index.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue index 4186750c..e73eba55 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue @@ -204,8 +204,8 @@ const deleteHandle = (index: number) => { colorList.splice(index, 1) chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList)) nextTick(() => { - if (index) { - selectHandle(colorList[index - 1]) + if (colorList.length) { + selectHandle(colorList[index - 1 > -1 ? index - 1 : index]) } else { // 已清空 selectColor.selectInfo = undefined