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

表格支持修改滚动条颜色 https://www.tapd.cn/55578866/prong/stories/view/1155578866001010175
2025-02-25 12:03:05 +08:00 · 2022-11-23 17:47:47 +08:00 · 2022-11-23 17:47:47 +08:00 · b55440d4b7
commit b55440d4b7
parent a89e722e20
9 changed files with 92 additions and 7 deletions
--- a/frontend/src/lang/en.js
+++ b/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',
--- a/frontend/src/lang/tw.js
+++ b/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: '高級設置',
--- a/frontend/src/lang/zh.js
+++ b/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: '高级设置',
--- a/frontend/src/views/chart/chart/chart.js
+++ b/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,
--- a/frontend/src/views/chart/chart/common/common_table.js
+++ b/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) {
--- a/frontend/src/views/chart/chart/util.js
+++ b/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
+}
--- a/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
+++ b/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()
        }
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/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>
--- a/frontend/src/views/panel/subjectSetting/panelStyle/PanelColorSelector.vue
+++ b/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>