From 1b31abb230cddf6d1b6b6e9e21f4d303e3f62228 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Fri, 27 Aug 2021 13:52:01 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=81=E8=AE=B8=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=A4=9A=E4=B8=AA=E4=B8=BB=E9=A2=98=E8=89=B2?= =?UTF-8?q?=EF=BC=88#45=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useCreateElement.ts | 2 +- src/hooks/useExport.ts | 10 ++- src/types/slides.ts | 2 +- .../ChartStylePanel/index.vue | 87 +++++++++++++++---- src/views/Editor/Toolbar/SlideDesignPanel.vue | 2 +- .../components/element/ChartElement/Chart.vue | 18 ++-- 6 files changed, 97 insertions(+), 24 deletions(-) diff --git a/src/hooks/useCreateElement.ts b/src/hooks/useCreateElement.ts index 3cc9e579..3663dc52 100644 --- a/src/hooks/useCreateElement.ts +++ b/src/hooks/useCreateElement.ts @@ -90,7 +90,7 @@ export default () => { top: 81.25, width: 400, height: 400, - themeColor: themeColor.value, + themeColor: [themeColor.value], gridColor: fontColor.value, data: { labels: ['类别1', '类别2', '类别3', '类别4', '类别5'], diff --git a/src/hooks/useExport.ts b/src/hooks/useExport.ts index b9b83c74..56c65312 100644 --- a/src/hooks/useExport.ts +++ b/src/hooks/useExport.ts @@ -382,7 +382,15 @@ export default () => { }) } - const chartColors = tinycolor(el.themeColor).analogous(10).map(item => item.toHexString()) + let chartColors: string[] = [] + if (el.themeColor.length === 10) chartColors = el.themeColor.map(color => formatColor(color).color) + else if (el.themeColor.length === 1) chartColors = tinycolor(el.themeColor[0]).analogous(10).map(color => formatColor(color.toHexString()).color) + else { + const len = el.themeColor.length + const supplement = tinycolor(el.themeColor[len - 1]).analogous(10 + 1 - len).map(color => color.toHexString()) + chartColors = [...el.themeColor.slice(0, len - 1), ...supplement].map(color => formatColor(color).color) + } + const options: pptxgen.IChartOpts = { x: el.left / 100, y: el.top / 100, diff --git a/src/types/slides.ts b/src/types/slides.ts index 97496b99..b01b82a5 100644 --- a/src/types/slides.ts +++ b/src/types/slides.ts @@ -354,7 +354,7 @@ export interface PPTChartElement extends PPTBaseElement { data: ChartData; options?: ILineChartOptions & IBarChartOptions & IPieChartOptions; outline?: PPTElementOutline; - themeColor: string; + themeColor: string[]; gridColor?: string; } diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue index 18450cdc..983e5253 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue @@ -53,18 +53,6 @@ -
-
主题配色:
- - - - -
网格颜色:
@@ -79,6 +67,33 @@
+ +
+
{{index === 0 ? '主题配色:' : ''}}
+ + +
+ + +
+
+
+
+
+
+
+ +
+ + + (() => store.getters.handleElement) + const theme = computed(() => store.state.theme) const chartDataEditorVisible = ref(false) @@ -127,7 +143,7 @@ export default defineComponent({ const fill = ref() - const themeColor = ref('') + const themeColor = ref([]) const gridColor = ref('') const lineSmooth = ref(true) @@ -185,8 +201,28 @@ export default defineComponent({ } // 设置主题色 - const updateTheme = (themeColor: string) => { - const props = { themeColor } + const updateTheme = (color: string, index: number) => { + const props = { + themeColor: themeColor.value.map((c, i) => i === index ? color : c), + } + store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props }) + addHistorySnapshot() + } + + // 添加主题色 + const addThemeColor = () => { + const props = { + themeColor: [...themeColor.value, theme.value.themeColor], + } + store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props }) + addHistorySnapshot() + } + + // 删除主题色 + const deleteThemeColor = (index: number) => { + const props = { + themeColor: themeColor.value.filter((c, i) => i !== index), + } store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props }) addHistorySnapshot() } @@ -220,6 +256,8 @@ export default defineComponent({ themeColor, gridColor, updateTheme, + addThemeColor, + deleteThemeColor, updateGridColor, } }, @@ -239,4 +277,23 @@ export default defineComponent({ .btn-icon { margin-right: 3px; } + +.add-color-btn { + padding: 0 !important; +} +.color-btn-wrap { + position: relative; +} +.delete-color-btn { + position: absolute; + width: 30px; + right: 2px; + top: 2px; + bottom: 2px; + display: flex; + justify-content: center; + align-items: center; + background-color: #fff; + cursor: pointer; +} \ No newline at end of file diff --git a/src/views/Editor/Toolbar/SlideDesignPanel.vue b/src/views/Editor/Toolbar/SlideDesignPanel.vue index 0a891241..ecdadf35 100644 --- a/src/views/Editor/Toolbar/SlideDesignPanel.vue +++ b/src/views/Editor/Toolbar/SlideDesignPanel.vue @@ -327,7 +327,7 @@ export default defineComponent({ } } else if (el.type === 'chart') { - el.themeColor = themeColor + el.themeColor = [themeColor] el.gridColor = fontColor } } diff --git a/src/views/components/element/ChartElement/Chart.vue b/src/views/components/element/ChartElement/Chart.vue index ffe0b330..221594c5 100644 --- a/src/views/components/element/ChartElement/Chart.vue +++ b/src/views/components/element/ChartElement/Chart.vue @@ -51,7 +51,7 @@ export default defineComponent({ type: Object as PropType, }, themeColor: { - type: String, + type: Array as PropType, required: true, }, gridColor: { @@ -101,14 +101,22 @@ export default defineComponent({ onMounted(renderChart) - // 更新主题配色:获取主题色的相近颜色作为主题配色 + // 更新主题配色: + // 如果当前所设置的主题色数小于10,剩余部分获取最后一个主题色的相近颜色作为配色 const updateTheme = () => { if (!chartRef.value) return - const colors = tinycolor(props.themeColor).analogous(10) + let colors: string[] = [] + if (props.themeColor.length === 10) colors = props.themeColor + else if (props.themeColor.length === 1) colors = tinycolor(props.themeColor[0]).analogous(10).map(color => color.toHexString()) + else { + const len = props.themeColor.length + const supplement = tinycolor(props.themeColor[len - 1]).analogous(10 + 1 - len).map(color => color.toHexString()) + colors = [...props.themeColor.slice(0, len - 1), ...supplement] + } + for (let i = 0; i < 10; i++) { - const color = colors[i].toRgbString() - chartRef.value.style.setProperty(`--theme-color-${i + 1}`, color) + chartRef.value.style.setProperty(`--theme-color-${i + 1}`, colors[i]) } }