Merge pull request #3841 from dataease/pr@dev@feat_table_scroll_bar_color

Pr@dev@feat table scroll bar color

frontend/src/lang/en.js

@@ -1338,6 +1338,7 @@ export default {
     table_align_left: 'Left',
     table_align_center: 'Center',
     table_align_right: 'Right',
+    table_scroll_bar_color: 'Scroll Bar Color',
     draw_back: 'Draw Back',
     senior: 'Senior',
     senior_cfg: 'Senior Config',

frontend/src/lang/tw.js

@@ -1338,6 +1338,7 @@ export default {
     table_align_left: '左對齊',
     table_align_center: '居中',
     table_align_right: '右對齊',
+    table_scroll_bar_color: '滾動條顏色',
     draw_back: '收回',
     senior: '高級',
     senior_cfg: '高級設置',

frontend/src/lang/zh.js

@@ -1337,6 +1337,7 @@ export default {
     table_align_left: '左对齐',
     table_align_center: '居中',
     table_align_right: '右对齐',
+    table_scroll_bar_color: '滚动条颜色',
     draw_back: '收回',
     senior: '高级',
     senior_cfg: '高级设置',

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

@@ -29,7 +29,9 @@ export const DEFAULT_COLOR_CASE = {
   seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
   areaBorderColor: '#303133',
   gradient: false,
-  areaBaseColor: '#FFFFFF'
+  areaBaseColor: '#FFFFFF',
+  tableScrollBarColor: 'rgba(0, 0, 0, 0.15)',
+  tableScrollBarHoverColor: 'rgba(0, 0, 0, 0.4)'
 }
 
 export const DEFAULT_COLOR_CASE_DARK = {
@@ -45,7 +47,9 @@ export const DEFAULT_COLOR_CASE_DARK = {
   tableBorderColor: '#CCCCCC',
   seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
   areaBorderColor: '#EBEEF5',
-  areaBaseColor: '5470C6'
+  areaBaseColor: '5470C6',
+  tableScrollBarColor: 'rgba(255, 255, 255, 0.5)',
+  tableScrollBarHoverColor: 'rgba(255, 255, 255, 0.8)'
 }
 export const DEFAULT_SIZE = {
   barDefault: true,

frontend/src/views/chart/chart/common/common_table.js

@@ -1,4 +1,4 @@
-import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { hexColorToRGBA, resetRgbOpacity } from '@/views/chart/chart/util'
 import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart'
 
 export function getCustomTheme(chart) {
@@ -7,6 +7,8 @@ export function getCustomTheme(chart) {
   const borderColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableBorderColor, DEFAULT_COLOR_CASE.alpha)
   const headerAlign = DEFAULT_SIZE.tableHeaderAlign
   const itemAlign = DEFAULT_SIZE.tableItemAlign
+  const scrollBarColor = DEFAULT_COLOR_CASE.tableScrollBarColor
+  const scrollBarHoverColor = DEFAULT_COLOR_CASE.tableScrollBarHoverColor
 
   const theme = {
     background: {
@@ -105,6 +107,10 @@ export function getCustomTheme(chart) {
         fontSize: DEFAULT_SIZE.tableItemFontSize,
         textAlign: headerAlign
       }
+    },
+    scrollBar: {
+      thumbColor: scrollBarColor,
+      thumbHoverColor: scrollBarHoverColor
     }
   }
 
@@ -156,6 +162,9 @@ export function getCustomTheme(chart) {
       theme.dataCell.bolderText.fill = c.tableFontColor
       theme.dataCell.text.fill = c.tableFontColor
       theme.dataCell.measureText.fill = c.tableFontColor
+
+      theme.scrollBar.thumbColor = c.tableScrollBarColor
+      theme.scrollBar.thumbHoverColor = resetRgbOpacity(c.tableScrollBarColor, 1.5)
     }
     // size
     if (customAttr.size) {

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

@@ -1,5 +1,6 @@
 import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import { equalsAny, includesAny } from '@/utils/StringUtils'
+import _ from 'lodash'
 
 export function hexColorToRGBA(hex, alpha) {
   const rgb = [] // 定义rgb数组
@@ -49,6 +50,7 @@ export const TYPE_CONFIGS = [
         'tableHeaderFontColor',
         'tableFontColor',
         'tableBorderColor',
+        'tableScrollBarColor',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -95,6 +97,7 @@ export const TYPE_CONFIGS = [
         'tableHeaderFontColor',
         'tableFontColor',
         'tableBorderColor',
+        'tableScrollBarColor',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -144,6 +147,7 @@ export const TYPE_CONFIGS = [
         'tableHeaderFontColor',
         'tableFontColor',
         'tableBorderColor',
+        'tableScrollBarColor',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1769,6 +1773,7 @@ export const TYPE_CONFIGS = [
         'tableItemBgColor',
         'tableHeaderFontColor',
         'tableFontColor',
+        'tableScrollBarColor',
         'alpha'
       ],
       'size-selector': [
@@ -1808,6 +1813,7 @@ export const TYPE_CONFIGS = [
         'tableItemBgColor',
         'tableHeaderFontColor',
         'tableFontColor',
+        'tableScrollBarColor',
         'alpha'
       ],
       'size-selector': [
@@ -3411,15 +3417,18 @@ function handleSetZeroMultiDimension(chart, data) {
   let insertCount = 0
   dimensionInfoMap.forEach((dimensionInfo, field) => {
     if (dimensionInfo.set.size < subDimensionSet.size) {
-      const toBeFillDimension = [...subDimensionSet].filter(item => !dimensionInfo.set.has(item))
+      let subInsertIndex = 0
-      toBeFillDimension.forEach(dimension => {
+      subDimensionSet.forEach(dimension => {
-        data.splice(dimensionInfo.index + insertCount, 0, {
+        if (!dimensionInfo.set.has(dimension)) {
-          field,
+          data.splice(dimensionInfo.index + insertCount + subInsertIndex, 0, {
-          value: 0,
+            field,
-          category: dimension
+            value: 0,
-        })
+            category: dimension
+          })
+        }
+        subInsertIndex++
       })
-      insertCount += toBeFillDimension.size
+      insertCount += subDimensionSet.size - dimensionInfo.set.size
     }
   })
 }
@@ -3440,3 +3449,21 @@ function handleIgnoreData(chart, data) {
     }
   }
 }
+
+export function resetRgbOpacity(sourceColor, times) {
+  if (sourceColor?.startsWith('rgb')) {
+    const numbers = sourceColor.match(/(\d(\.\d+)?)+/g)
+    if (numbers?.length === 4) {
+      const opacity = parseFloat(numbers[3])
+      if (_.isNumber(opacity)) {
+        let resultOpacity = (opacity * times).toFixed(2)
+        if (resultOpacity > 1) {
+          resultOpacity = 1
+        }
+        const colorArr = numbers.slice(0, 3).concat(resultOpacity)
+        return `rgba(${colorArr.join(',')})`
+      }
+    }
+  }
+  return sourceColor
+}

frontend/src/views/chart/components/shapeAttr/ColorSelector.vue

@@ -248,6 +248,20 @@
               @change="changeColorCase('tableBorderColor')"
             />
           </el-form-item>
+          <el-form-item
+            v-show="showProperty('tableScrollBarColor')"
+            :label="$t('chart.table_scroll_bar_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.tableScrollBarColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              color-format="rgb"
+              show-alpha
+              @change="changeColorCase('tableScrollBarColor')"
+            />
+          </el-form-item>
         </div>
 
         <el-form-item
@@ -477,6 +491,7 @@ export default {
 
           this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
           this.colorForm.tableHeaderFontColor = this.colorForm.tableHeaderFontColor ? this.colorForm.tableHeaderFontColor : this.colorForm.tableFontColor
+          this.colorForm.tableScrollBarColor = this.colorForm.tableScrollBarColor ? this.colorForm.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor
 
           this.initCustomColor()
         }

frontend/src/views/chart/components/table/TableNormal.vue

@@ -13,7 +13,7 @@
       <ux-grid
         ref="plxTable"
         size="mini"
-        style="width: 100%;"
+        :style="tableStyle"
         :height="height"
         :checkbox-config="{highlight: true}"
         :width-resize="true"
@@ -79,7 +79,7 @@
 <script>
 import { hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
-import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
+import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart'
 import { mapState } from 'vuex'
 
 export default {
@@ -154,7 +154,9 @@ export default {
       scrollTimer: null,
       scrollTop: 0,
       showIndex: false,
-      indexLabel: '序号'
+      indexLabel: '序号',
+      scrollBarColor: DEFAULT_COLOR_CASE.tableScrollBarColor,
+      scrollBarHoverColor: DEFAULT_COLOR_CASE.tableScrollBarHoverColor
     }
   },
   computed: {
@@ -176,6 +178,12 @@ export default {
         borderRadius: this.borderRadius
       }
     },
+    tableStyle() {
+      return {
+        width: '100%',
+        '--scroll-bar-color': this.scrollBarColor
+      }
+    },
     ...mapState([
       'previewCanvasScale'
     ])
@@ -309,6 +317,7 @@ export default {
           this.table_header_class.background = hexColorToRGBA(customAttr.color.tableHeaderBgColor, customAttr.color.alpha)
           this.table_item_class.color = customAttr.color.tableFontColor
           this.table_item_class.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha)
+          this.scrollBarColor = customAttr.color.tableScrollBarColor ? customAttr.color.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor
         }
         if (customAttr.size) {
           this.table_header_class.fontSize = customAttr.size.tableTitleFontSize + 'px'
@@ -498,7 +507,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .table-class ::v-deep .body--wrapper {
   background: rgba(1, 1, 1, 0);
 }
@@ -548,4 +557,12 @@ export default {
 .page-style ::v-deep li {
   background: transparent !important;
 }
+.table-class{
+  ::-webkit-scrollbar-thumb {
+    background: var(--scroll-bar-color);
+  }
+}
+.table-class{
+  scrollbar-color: var(--scroll-bar-color) transparent;
+}
 </style>

frontend/src/views/panel/subjectSetting/panelStyle/PanelColorSelector.vue

@@ -190,6 +190,19 @@
               @change="changeColorCase('tableBorderColor')"
             />
           </el-form-item>
+          <el-form-item
+            :label="$t('chart.table_scroll_bar_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.tableScrollBarColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              color-format="rgb"
+              show-alpha
+              @change="changeColorCase('tableScrollBarColor')"
+            />
+          </el-form-item>
         </div>
       </el-form>
     </el-col>