feat(视图-表格): 表格支持修改滚动条颜色

表格支持修改滚动条颜色
https://www.tapd.cn/55578866/prong/stories/view/1155578866001010175

frontend/src/lang/en.js

@@ -1336,6 +1336,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

@@ -1336,6 +1336,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

@@ -1335,6 +1335,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

@@ -28,7 +28,9 @@ export const DEFAULT_COLOR_CASE = {
   tableBorderColor: '#E6E7E4',
   seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
   areaBorderColor: '#303133',
-  areaBaseColor: '#FFFFFF'
+  areaBaseColor: '#FFFFFF',
+  tableScrollBarColor: 'rgba(0, 0, 0, 0.15)',
+  tableScrollBarHoverColor: 'rgba(0, 0, 0, 0.4)'
 }
 
 export const DEFAULT_COLOR_CASE_DARK = {
@@ -44,7 +46,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': [
@@ -1756,6 +1760,7 @@ export const TYPE_CONFIGS = [
         'tableItemBgColor',
         'tableHeaderFontColor',
         'tableFontColor',
+        'tableScrollBarColor',
         'alpha'
       ],
       'size-selector': [
@@ -1795,6 +1800,7 @@ export const TYPE_CONFIGS = [
         'tableItemBgColor',
         'tableHeaderFontColor',
         'tableFontColor',
+        'tableScrollBarColor',
         'alpha'
       ],
       'size-selector': [
@@ -3430,3 +3436,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

@@ -237,6 +237,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
@@ -466,6 +480,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"
@@ -69,7 +69,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'
 
 export default {
   name: 'TableNormal',
@@ -143,7 +143,9 @@ export default {
       scrollTimer: null,
       scrollTop: 0,
       showIndex: false,
-      indexLabel: '序号'
+      indexLabel: '序号',
+      scrollBarColor: DEFAULT_COLOR_CASE.tableScrollBarColor,
+      scrollBarHoverColor: DEFAULT_COLOR_CASE.tableScrollBarHoverColor
     }
   },
   computed: {
@@ -152,6 +154,12 @@ export default {
         background: hexColorToRGBA('#ffffff', 0),
         borderRadius: this.borderRadius
       }
+    },
+    tableStyle() {
+      return {
+        width: '100%',
+        '--scroll-bar-color': this.scrollBarColor
+      }
     }
   },
   watch: {
@@ -283,6 +291,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'
@@ -472,7 +481,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   .table-class ::v-deep .body--wrapper{
     background: rgba(1,1,1,0);
   }
@@ -507,4 +516,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>