refactor:组件调色板优化

frontend/src/components/canvas/components/TextAttr.vue

@@ -108,7 +108,7 @@
             <i class="icon iconfont icon-zimua" @click="goColor" />
           </el-tooltip>
           <div :style="letterDivColor" />
-          <el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
+          <el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" :predefine="predefineColors" @change="styleChange" />
         </div>
       </div>
       <div v-if="attrShow('borderColor')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
@@ -117,7 +117,7 @@
             <i class="iconfont icon-huabi" @click="goBoardColor" />
           </el-tooltip>
           <div :style="boardDivColor" />
-          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
+          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" :predefine="predefineColors" @change="styleChange" />
         </div>
       </div>
 
@@ -127,7 +127,7 @@
             <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
           </el-tooltip>
           <div :style="backgroundDivColor" />
-          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
+          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" :predefine="predefineColors" size="mini" @change="styleChange" />
         </div>
       </div>
 
@@ -157,6 +157,7 @@ import { mapState } from 'vuex'
 import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
 import VideoLinks from '@/components/canvas/components/Editor/VideoLinks'
 import DateFormat from '@/components/canvas/components/Editor/DateFormat'
+import { COLOR_PANEL } from '@/views/chart/chart/chart'
 
 export default {
   components: { Hyperlinks, DateFormat, VideoLinks },
@@ -172,6 +173,7 @@ export default {
   },
   data() {
     return {
+      predefineColors: COLOR_PANEL,
       showMain: true,
       innerOpacity: 0,
       textAlignOptions: [
@@ -431,4 +433,8 @@ export default {
     padding: 5px!important;
     width: 30px!important;
   }
+
+  ::v-deep .el-color-dropdown__link-btn {
+    display: inline!important;
+  }
 </style>

frontend/src/views/chart/chart/chart.js

@@ -864,6 +864,6 @@ export const COLOR_PANEL = [
   '#1e90ff',
   '#c71585',
   '#999999',
-  '#00008b',
-  '#000000'
+  '#000000',
+  '#FFFFFF'
 ]

frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue

@@ -12,7 +12,7 @@
               <el-radio v-model="panel.backgroundType" label="color" @change="onChangeType">{{ $t('chart.color') }}</el-radio>
             </el-col>
             <el-col :span="18">
-              <el-color-picker v-model="panel.color" size="mini" style="cursor: pointer;z-index: 1004;"   @change="onChangeType"/>
+              <el-color-picker v-model="panel.color" :predefine="predefineColors" size="mini" style="cursor: pointer;z-index: 1004;" @change="onChangeType" />
             </el-col>
           </el-row>
           <el-row style="height: 60px;margin-top:10px;overflow: hidden">
@@ -50,6 +50,7 @@
 
 import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
+import { COLOR_PANEL } from '@/views/chart/chart/chart'
 
 export default {
   name: 'BackgroundSelector',
@@ -59,7 +60,9 @@ export default {
       dialogImageUrl: '',
       dialogVisible: false,
       uploadDisabled: false,
-      panel: null
+      panel: null,
+      predefineColors: COLOR_PANEL
+
     }
   },
   computed: mapState([
@@ -80,7 +83,7 @@ export default {
       const canvasStyleData = deepCopy(this.canvasStyleData)
       canvasStyleData.panel = this.panel
       this.$store.commit('setCanvasStyle', canvasStyleData)
-      this.$store.commit('recordSnapshot','commitStyle')
+      this.$store.commit('recordSnapshot', 'commitStyle')
     },
     onChangeType() {
       this.commitStyle()