Commit cda6a183f5b14c8facbbdc9975bf3cc305f2978e

Authored by xp.Huang
2 parents 87855499 01deb39e

Merge branch 'ft' into 'main_dev'

perf(external/Composes): 修复组合下的所有颜色可以恢复默认颜色

See merge request yunteng/thingskit-view!46
@@ -59,6 +59,11 @@ @@ -59,6 +59,11 @@
59 <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textColor"></n-color-picker> 59 <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textColor"></n-color-picker>
60 </setting-item> 60 </setting-item>
61 </setting-item-box> 61 </setting-item-box>
  62 + <setting-item-box name="颜色">
  63 + <SettingItem>
  64 + <n-button size="small" @click="optionData.textColor = '#00f6ff'"> 恢复默认 </n-button>
  65 + </SettingItem>
  66 + </setting-item-box>
62 <setting-item-box name="位置x轴"> 67 <setting-item-box name="位置x轴">
63 <setting-item name="字体位置x轴"> 68 <setting-item name="字体位置x轴">
64 <n-input-number v-model:value="optionData.x" size="small" placeholder="字体位置"></n-input-number> 69 <n-input-number v-model:value="optionData.x" size="small" placeholder="字体位置"></n-input-number>
@@ -96,6 +101,11 @@ @@ -96,6 +101,11 @@
96 <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textRightSizeColor"></n-color-picker> 101 <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textRightSizeColor"></n-color-picker>
97 </setting-item> 102 </setting-item>
98 </setting-item-box> 103 </setting-item-box>
  104 + <setting-item-box name="颜色">
  105 + <SettingItem>
  106 + <n-button size="small" @click="optionData.textRightSizeColor = '#ffffff'"> 恢复默认 </n-button>
  107 + </SettingItem>
  108 + </setting-item-box>
99 </collapse-item> 109 </collapse-item>
100 </template> 110 </template>
101 111
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animat.colors[index]"></n-color-picker> 5 <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animat.colors[index]"></n-color-picker>
6 </SettingItem> 6 </SettingItem>
7 <SettingItem> 7 <SettingItem>
8 - <n-button size="small" @click="optionData.animat.colors[index] = optionData.animat.colors[index]"> 8 + <n-button size="small" @click="optionData.animat.colors[index] = option.animat.colors[index]">
9 恢复默认 9 恢复默认
10 </n-button> 10 </n-button>
11 </SettingItem> 11 </SettingItem>
@@ -47,6 +47,12 @@ @@ -47,6 +47,12 @@
47 <setting-item name="结束值"> 47 <setting-item name="结束值">
48 <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animat.gradient.to"></n-color-picker> 48 <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animat.gradient.to"></n-color-picker>
49 </setting-item> 49 </setting-item>
  50 + <SettingItem>
  51 + <n-button size="small" @click="optionData.animat.gradient.from = '#0000FFFF'"> 恢复默认1 </n-button>
  52 + </SettingItem>
  53 + <SettingItem>
  54 + <n-button size="small" @click="optionData.animat.gradient.to = '#00FF00FF'"> 恢复默认2 </n-button>
  55 + </SettingItem>
50 <setting-item name="偏移角度"> 56 <setting-item name="偏移角度">
51 <n-input-number 57 <n-input-number
52 v-model:value="optionData.animat.gradient.deg" 58 v-model:value="optionData.animat.gradient.deg"
@@ -7,13 +7,14 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,13 +7,14 @@ import { chartInitConfig } from '@/settings/designSetting'
7 export const option = { 7 export const option = {
8 dataset: '我是标题', 8 dataset: '我是标题',
9 attribute: { 9 attribute: {
10 - linearColors: ['#0559A3', '#0654A3', '#2AFFFF', '#2AFFFF','#2affff',' #2affff','#16d9d9'], 10 + linearColors: ['#0559A3', '#0654A3', '#2AFFFF', '#2AFFFF', '#2affff', ' #2affff', '#16d9d9'],
11 fontSize: 20, 11 fontSize: 20,
12 fontPos: { 12 fontPos: {
13 x: 0, 13 x: 0,
14 y: 20 14 y: 20
15 }, 15 },
16 - fontColor: '#2AFFFF' 16 + fontColor: '#2AFFFF',
  17 + lineColor: '#2AFFFF'
17 } 18 }
18 } 19 }
19 20
@@ -7,15 +7,18 @@ @@ -7,15 +7,18 @@
7 <SettingItem name="大小"> 7 <SettingItem name="大小">
8 <n-input-number v-model:value="optionData.attribute.fontSize" /> 8 <n-input-number v-model:value="optionData.attribute.fontSize" />
9 </SettingItem> 9 </SettingItem>
10 - <SettingItem name="颜色">  
11 - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>  
12 - </SettingItem>  
13 <SettingItem name="x轴位置"> 10 <SettingItem name="x轴位置">
14 <n-input-number v-model:value="optionData.attribute.fontPos.x" /> 11 <n-input-number v-model:value="optionData.attribute.fontPos.x" />
15 </SettingItem> 12 </SettingItem>
16 <SettingItem name="y轴位置"> 13 <SettingItem name="y轴位置">
17 <n-input-number v-model:value="optionData.attribute.fontPos.y" /> 14 <n-input-number v-model:value="optionData.attribute.fontPos.y" />
18 </SettingItem> 15 </SettingItem>
  16 + <SettingItem name="颜色">
  17 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
  18 + </SettingItem>
  19 + <SettingItem>
  20 + <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
  21 + </SettingItem>
19 </SettingItemBox> 22 </SettingItemBox>
20 <SettingItemBox 23 <SettingItemBox
21 :name="`装饰颜色-${index + 1}`" 24 :name="`装饰颜色-${index + 1}`"
@@ -30,14 +33,19 @@ @@ -30,14 +33,19 @@
30 ></n-color-picker> 33 ></n-color-picker>
31 </SettingItem> 34 </SettingItem>
32 <SettingItem> 35 <SettingItem>
33 - <n-button  
34 - size="small"  
35 - @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]"  
36 - > 36 + <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
37 恢复默认 37 恢复默认
38 </n-button> 38 </n-button>
39 </SettingItem> 39 </SettingItem>
40 </SettingItemBox> 40 </SettingItemBox>
  41 + <SettingItemBox :name="`装饰颜色8`">
  42 + <SettingItem name="颜色">
  43 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.lineColor"></n-color-picker>
  44 + </SettingItem>
  45 + <SettingItem>
  46 + <n-button size="small" @click="optionData.attribute.lineColor = '#2AFFFF'"> 恢复默认 </n-button>
  47 + </SettingItem>
  48 + </SettingItemBox>
41 </CollapseItem> 49 </CollapseItem>
42 </template> 50 </template>
43 51
@@ -46,7 +54,6 @@ import { PropType } from 'vue' @@ -46,7 +54,6 @@ import { PropType } from 'vue'
46 import { option } from './config' 54 import { option } from './config'
47 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' 55 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
48 56
49 -  
50 defineProps({ 57 defineProps({
51 optionData: { 58 optionData: {
52 type: Object as PropType<typeof option>, 59 type: Object as PropType<typeof option>,
@@ -26,11 +26,7 @@ @@ -26,11 +26,7 @@
26 opacity="1" 26 opacity="1"
27 :d="`M0,${h} L${w},${h} L${w},0 L0,0 L0,${h} Z`" 27 :d="`M0,${h} L${w},${h} L${w},0 L0,0 L0,${h} Z`"
28 /> 28 />
29 - <g  
30 - opacity="1"  
31 - :transform="`translate(34 ${(h/2)-26/2  
32 - }) rotate(0 46 13)`"  
33 - > 29 + <g opacity="1" :transform="`translate(34 ${h / 2 - 26 / 2}) rotate(0 46 13)`">
34 <text> 30 <text>
35 <tspan 31 <tspan
36 :x="attribute.fontPos.x" 32 :x="attribute.fontPos.x"
@@ -49,15 +45,12 @@ @@ -49,15 +45,12 @@
49 <path 45 <path
50 id="矩形 21" 46 id="矩形 21"
51 fill-rule="evenodd" 47 fill-rule="evenodd"
52 - style="fill: #2affff" 48 + :style="{ fill: attribute.lineColor }"
53 transform="translate(0 0) rotate(0 0.5 15)" 49 transform="translate(0 0) rotate(0 0.5 15)"
54 opacity="1" 50 opacity="1"
55 - :d="`M0,${h}L1,${h }L1,0L0,0L0,${h}Z`" 51 + :d="`M0,${h}L1,${h}L1,0L0,0L0,${h}Z`"
56 /> 52 />
57 - <g  
58 - opacity="1"  
59 - :transform="`translate(14 ${(h/2)-8/2}) rotate(0 6.5 7)`"  
60 - > 53 + <g opacity="1" :transform="`translate(14 ${h / 2 - 8 / 2}) rotate(0 6.5 7)`">
61 <path 54 <path
62 id="矩形 22" 55 id="矩形 22"
63 fill-rule="evenodd" 56 fill-rule="evenodd"
@@ -83,7 +76,7 @@ @@ -83,7 +76,7 @@
83 :d="`M6,0L0,7L5,7L11,0L6,0Z `" 76 :d="`M6,0L0,7L5,7L11,0L6,0Z `"
84 /> 77 />
85 </g> 78 </g>
86 - <g opacity="1" :transform="`translate(396 ${(h/2)-2/2}) rotate(0 46.5 13.5)`"> 79 + <g opacity="1" :transform="`translate(396 ${h / 2 - 2 / 2}) rotate(0 46.5 13.5)`">
87 <path 80 <path
88 id="并集" 81 id="并集"
89 fill-rule="evenodd" 82 fill-rule="evenodd"
@@ -7,15 +7,18 @@ @@ -7,15 +7,18 @@
7 <SettingItem name="大小"> 7 <SettingItem name="大小">
8 <n-input-number v-model:value="optionData.attribute.fontSize" /> 8 <n-input-number v-model:value="optionData.attribute.fontSize" />
9 </SettingItem> 9 </SettingItem>
10 - <SettingItem name="颜色">  
11 - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>  
12 - </SettingItem>  
13 <SettingItem name="x轴位置"> 10 <SettingItem name="x轴位置">
14 <n-input-number v-model:value="optionData.attribute.fontPos.x" /> 11 <n-input-number v-model:value="optionData.attribute.fontPos.x" />
15 </SettingItem> 12 </SettingItem>
16 <SettingItem name="y轴位置"> 13 <SettingItem name="y轴位置">
17 <n-input-number v-model:value="optionData.attribute.fontPos.y" /> 14 <n-input-number v-model:value="optionData.attribute.fontPos.y" />
18 </SettingItem> 15 </SettingItem>
  16 + <SettingItem name="颜色">
  17 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
  18 + </SettingItem>
  19 + <SettingItem>
  20 + <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
  21 + </SettingItem>
19 </SettingItemBox> 22 </SettingItemBox>
20 <SettingItemBox 23 <SettingItemBox
21 :name="`装饰颜色-${index + 1}`" 24 :name="`装饰颜色-${index + 1}`"
@@ -30,10 +33,7 @@ @@ -30,10 +33,7 @@
30 ></n-color-picker> 33 ></n-color-picker>
31 </SettingItem> 34 </SettingItem>
32 <SettingItem> 35 <SettingItem>
33 - <n-button  
34 - size="small"  
35 - @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]"  
36 - > 36 + <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
37 恢复默认 37 恢复默认
38 </n-button> 38 </n-button>
39 </SettingItem> 39 </SettingItem>
@@ -46,7 +46,6 @@ import { PropType } from 'vue' @@ -46,7 +46,6 @@ import { PropType } from 'vue'
46 import { option } from './config' 46 import { option } from './config'
47 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' 47 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
48 48
49 -  
50 defineProps({ 49 defineProps({
51 optionData: { 50 optionData: {
52 type: Object as PropType<typeof option>, 51 type: Object as PropType<typeof option>,
@@ -7,15 +7,18 @@ @@ -7,15 +7,18 @@
7 <SettingItem name="大小"> 7 <SettingItem name="大小">
8 <n-input-number v-model:value="optionData.attribute.fontSize" /> 8 <n-input-number v-model:value="optionData.attribute.fontSize" />
9 </SettingItem> 9 </SettingItem>
10 - <SettingItem name="颜色">  
11 - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>  
12 - </SettingItem>  
13 <SettingItem name="x轴位置"> 10 <SettingItem name="x轴位置">
14 <n-input-number v-model:value="optionData.attribute.fontPos.x" /> 11 <n-input-number v-model:value="optionData.attribute.fontPos.x" />
15 </SettingItem> 12 </SettingItem>
16 <SettingItem name="y轴位置"> 13 <SettingItem name="y轴位置">
17 <n-input-number v-model:value="optionData.attribute.fontPos.y" /> 14 <n-input-number v-model:value="optionData.attribute.fontPos.y" />
18 </SettingItem> 15 </SettingItem>
  16 + <SettingItem name="颜色">
  17 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
  18 + </SettingItem>
  19 + <SettingItem name="颜色">
  20 + <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
  21 + </SettingItem>
19 </SettingItemBox> 22 </SettingItemBox>
20 <SettingItemBox 23 <SettingItemBox
21 :name="`装饰颜色-${index + 1}`" 24 :name="`装饰颜色-${index + 1}`"
@@ -30,10 +33,7 @@ @@ -30,10 +33,7 @@
30 ></n-color-picker> 33 ></n-color-picker>
31 </SettingItem> 34 </SettingItem>
32 <SettingItem> 35 <SettingItem>
33 - <n-button  
34 - size="small"  
35 - @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]"  
36 - > 36 + <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
37 恢复默认 37 恢复默认
38 </n-button> 38 </n-button>
39 </SettingItem> 39 </SettingItem>
@@ -46,7 +46,6 @@ import { PropType } from 'vue' @@ -46,7 +46,6 @@ import { PropType } from 'vue'
46 import { option } from './config' 46 import { option } from './config'
47 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' 47 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
48 48
49 -  
50 defineProps({ 49 defineProps({
51 optionData: { 50 optionData: {
52 type: Object as PropType<typeof option>, 51 type: Object as PropType<typeof option>,