diff --git a/README.md b/README.md
index e01b092a44..8b61b593d3 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
   <a href="https://app.codacy.com/gh/dataease/dataease?utm_source=github.com&utm_medium=referral&utm_content=dataease/dataease&utm_campaign=Badge_Grade_Dashboard"><img src="https://app.codacy.com/project/badge/Grade/da67574fd82b473992781d1386b937ef" alt="Codacy"></a>
   <a href="https://github.com/dataease/dataease/releases/latest"><img src="https://img.shields.io/github/v/release/dataease/dataease" alt="Latest release"></a>
   <a href="https://github.com/dataease/dataease"><img src="https://img.shields.io/github/stars/dataease/dataease?color=%231890FF&style=flat-square" alt="Stars"></a>
-  <a href="https://github.com/dataease/dataease/releases/latest"><img src="https://img.shields.io/github/downloads/dataease/dataease/total" alt="Downloads"></a>
+
 </p>
 <hr/>
 
diff --git a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
index 4ac293ebc8..958d4005b4 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
@@ -1694,15 +1694,34 @@ public class ChartViewService {
                     continue;
                 }
 
+                Boolean isEndParam = false;
                 for (String parameter : chartExtFilterRequest.getParameters()) {
                     if (parameter.contains("|DE|")) {
-                        if (!parameter.split("\\|DE\\|")[0].equals(table.getId())) {
+                        String[] parameterArray = parameter.split("\\|DE\\|");
+                        if (!parameterArray[0].equals(table.getId())) {
                             continue;
                         }
-                        List<SqlVariableDetails> parameters = sqlVariables.stream().filter(item -> item.getVariableName().equalsIgnoreCase(parameter.split("\\|DE\\|")[1])).collect(Collectors.toList());
+                        String paramName = null;
+                        if (parameterArray.length > 1) {
+                            paramName = parameterArray[1];
+                            if (paramName.contains("_START_END_SPLIT")) {
+                                String[] paramNameArray = paramName.split("_START_END_SPLIT");
+                                paramName = paramNameArray[0];
+                                isEndParam = true;
+                            }
+                        } else {
+                            continue;
+                        }
+                        final String finalParamName = paramName;
+                        List<SqlVariableDetails> parameters = sqlVariables.stream().filter(item -> item.getVariableName().equalsIgnoreCase(finalParamName)).collect(Collectors.toList());
                         if (CollectionUtils.isNotEmpty(parameters)) {
-                            String filter = qp.transFilter(chartExtFilterRequest, parameters.get(0));
-                            sql = sql.replace("${" + parameter.split("\\|DE\\|")[1] + "}", filter);
+                            String filter = null;
+                            if (isEndParam) {
+                                filter = transEndParamSql(chartExtFilterRequest, parameters.get(0));
+                            } else {
+                                filter = qp.transFilter(chartExtFilterRequest, parameters.get(0));
+                            }
+                            sql = sql.replace("${" + finalParamName + "}", filter);
                         }
                     } else {
                         List<SqlVariableDetails> parameters = sqlVariables.stream().filter(item -> item.getVariableName().equalsIgnoreCase(parameter)).collect(Collectors.toList());
@@ -1718,6 +1737,11 @@ public class ChartViewService {
         return sql;
     }
 
+    public String transEndParamSql(ChartExtFilterRequest chartExtFilterRequest, SqlVariableDetails sqlVariableDetails) {
+        SimpleDateFormat simpleDateFormat = new SimpleDateFormat(sqlVariableDetails.getType().size() > 1 ? sqlVariableDetails.getType().get(1) : "YYYY");
+        return simpleDateFormat.format(new Date(Long.parseLong(chartExtFilterRequest.getValue().get(1))));
+    }
+
     private String getDrillSort(List<ChartViewFieldDTO> xAxis, ChartViewFieldDTO field) {
         String res = "";
         for (ChartViewFieldDTO f : xAxis) {
diff --git a/frontend/src/components/canvas/components/editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
index 4a757dd5fc..289774c142 100644
--- a/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
@@ -199,7 +199,7 @@ export default {
       return style
     },
     componentActiveFlag() {
-      return !this.mobileLayoutStatus && ((this.curComponent && this.config === this.curComponent && !this.previewVisible && !this.showPosition.includes('email-task')) || this.showPosition.includes('multiplexing'))
+      return !this.mobileLayoutStatus && ((this.curComponent && this.config.id === this.curComponent.id && !this.previewVisible && !this.showPosition.includes('email-task')) || this.showPosition.includes('multiplexing'))
     },
     scale() {
       return Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight)
@@ -274,7 +274,7 @@ export default {
       } else {
         return {
           ...
-          getStyle(style, ['top', 'left', 'width', 'height', 'rotate']),
+            getStyle(style, ['top', 'left', 'width', 'height', 'rotate']),
           position: 'relative'
         }
       }
diff --git a/frontend/src/components/canvas/store/copy.js b/frontend/src/components/canvas/store/copy.js
index 86a7feafbc..fbcc6c45a3 100644
--- a/frontend/src/components/canvas/store/copy.js
+++ b/frontend/src/components/canvas/store/copy.js
@@ -12,8 +12,8 @@ export default {
     copyData: null, // 复制粘贴剪切
     isCut: false,
     baseStyle: {
-      width: 300,
-      height: 200,
+      width: 533,
+      height: 300,
       top: 0,
       left: 0
     },
diff --git a/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js b/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
index 3dcc29a6f6..d18f91f69f 100644
--- a/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
@@ -107,6 +107,9 @@ class NumberSelectServiceImpl extends WidgetService {
       return defaultV.split(',')[0]
     }
   }
+  isParamWidget() {
+    return true
+  }
 }
 const numberSelectServiceImpl = new NumberSelectServiceImpl()
 export default numberSelectServiceImpl
diff --git a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
index 4b5b79d85a..2a28a2d658 100644
--- a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
@@ -102,6 +102,9 @@ class TextSelectServiceImpl extends WidgetService {
   isCustomSortWidget() {
     return true
   }
+  isParamWidget() {
+    return true
+  }
 
   fillValueDerfault(element) {
     const defaultV = element.options.value === null ? '' : element.options.value.toString()
diff --git a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
index 301074284a..cd33146057 100644
--- a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
@@ -31,7 +31,10 @@ const dialogPanel = {
         eDynamicSuffix: 'after'
       },
       showTime: false,
-      accuracy: 'HH:mm'
+      accuracy: 'HH:mm',
+      parameters: [],
+      startParameters: [],
+      endParameters: []
     },
     value: '',
     manualModify: false
@@ -329,13 +332,13 @@ class TimeDateRangeServiceImpl extends WidgetService {
     const defaultV = element.options.value === null ? '' : element.options.value.toString()
     if (element.options.attrs.type === 'daterange') {
       if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
+        '[object Object]') {
         return []
       }
       return defaultV.split(',').map(item => parseFloat(item))
     } else {
       if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
+        '[object Object]') {
         return null
       }
       return parseFloat(defaultV.split(',')[0])
@@ -400,6 +403,12 @@ class TimeDateRangeServiceImpl extends WidgetService {
       { 'text': 'dynamic_year.last', 'callBack': () => this.formatShortValues([this.getStartYear(-1).getTime(), this.getEndYear(-1).getTime()]) }
     ]
   }
+  isParamWidget() {
+    return true
+  }
+  isRangeParamWidget() {
+    return true
+  }
 }
 const timeDateRangeServiceImpl = new TimeDateRangeServiceImpl()
 export default timeDateRangeServiceImpl
diff --git a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
index d9ce3365ad..a1646a5383 100644
--- a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
@@ -189,13 +189,13 @@ class TimeDateServiceImpl extends WidgetService {
     const defaultV = element.options.value === null ? '' : element.options.value.toString()
     if (element.options.attrs.type === 'daterange') {
       if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
+        '[object Object]') {
         return []
       }
       return defaultV.split(',').map(item => parseFloat(item))
     } else {
       if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
+        '[object Object]') {
         return null
       }
       return parseFloat(defaultV.split(',')[0])
@@ -234,6 +234,9 @@ class TimeDateServiceImpl extends WidgetService {
   isTimeWidget() {
     return true
   }
+  isParamWidget() {
+    return true
+  }
 }
 const timeDateServiceImpl = new TimeDateServiceImpl({
   name: 'timeDateWidget'
diff --git a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
index c8defe995a..1254999750 100644
--- a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
@@ -150,13 +150,13 @@ class TimeMonthServiceImpl extends WidgetService {
     const defaultV = element.options.value === null ? '' : element.options.value.toString()
     if (element.options.attrs.type === 'daterange') {
       if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
+        '[object Object]') {
         return []
       }
       return defaultV.split(',').map(item => parseFloat(item))
     } else {
       if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
+        '[object Object]') {
         return null
       }
       return parseFloat(defaultV.split(',')[0])
@@ -186,6 +186,9 @@ class TimeMonthServiceImpl extends WidgetService {
       return timeSection(parseFloat(value), element.options.attrs.type)
     }
   }
+  isParamWidget() {
+    return true
+  }
 }
 const timeMonthServiceImpl = new TimeMonthServiceImpl()
 export default timeMonthServiceImpl
diff --git a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
index 54bbfac589..90d440cdf2 100644
--- a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
@@ -137,13 +137,13 @@ class TimeYearServiceImpl extends WidgetService {
     const defaultV = element.options.value === null ? '' : element.options.value.toString()
     if (element.options.attrs.type === 'daterange') {
       if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
+        '[object Object]') {
         return []
       }
       return defaultV.split(',').map(item => parseFloat(item))
     } else {
       if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-          '[object Object]') {
+        '[object Object]') {
         return null
       }
       return parseFloat(defaultV.split(',')[0])
@@ -173,6 +173,9 @@ class TimeYearServiceImpl extends WidgetService {
       return timeSection(parseFloat(value), element.options.attrs.type)
     }
   }
+  isParamWidget() {
+    return true
+  }
 }
 const timeYearServiceImpl = new TimeYearServiceImpl()
 export default timeYearServiceImpl
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 23da51d3ac..a5d193033f 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1339,6 +1339,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',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 3e2eb08d24..cc24bee063 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1339,6 +1339,7 @@ export default {
     table_align_left: '左對齊',
     table_align_center: '居中',
     table_align_right: '右對齊',
+    table_scroll_bar_color: '滾動條顏色',
     draw_back: '收回',
     senior: '高級',
     senior_cfg: '高級設置',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index c77fcf9321..2eb98bf462 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.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: '高级设置',
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index e4e820d4ac..6cebef7bc6 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -93,7 +93,7 @@ div:focus {
 }
 
 .de-filter-dialog {
-  min-width: 500px !important;
+  min-width: 785px !important;
   width: 55% !important;
 
   .el-dialog__header {
@@ -322,12 +322,12 @@ div:focus {
   margin: 0 2px 1px 0;
 }
 
-.field-icon-dimension{
-  color: #3370FF!important;
+.field-icon-dimension {
+  color: #3370FF !important;
 }
 
-.field-icon-quota{
-  color: #04B49C!important;
+.field-icon-quota {
+  color: #04B49C !important;
 }
 
 .ds-icon-pdf {
@@ -1509,6 +1509,7 @@ div:focus {
 .de-status {
   position: relative;
   margin-left: 15px;
+
   &::before {
     content: '';
     position: absolute;
@@ -1546,6 +1547,7 @@ div:focus {
   &::before {
     background: var(--deDanger, #F54A45);
   }
+
   .el-icon-s-order {
     color: var(--primary, #3370ff);
     cursor: pointer;
@@ -1590,6 +1592,7 @@ div:focus {
     margin: 0;
     margin-right: 8px;
     position: relative;
+
     i {
       position: absolute;
       right: 2px;
@@ -1621,6 +1624,7 @@ div:focus {
     justify-content: center;
     align-items: center;
   }
+
   .arrow-filter:hover {
     background: rgba(31, 35, 41, 0.1);
     border-radius: 4px;
@@ -1633,6 +1637,7 @@ div:focus {
   .el-icon-arrow-left.arrow-filter {
     margin-right: 5px;
   }
+
   .filter-texts-container {
     flex: 1;
     overflow-x: auto;
@@ -1674,11 +1679,13 @@ div:focus {
     transform: translate(-50%, -50%);
   }
 }
+
 .calcu-field {
   .calcu-cont {
     display: flex;
     justify-content: space-between;
   }
+
   .codemirror {
     height: 250px;
     overflow-y: auto;
@@ -1686,6 +1693,7 @@ div:focus {
     border: 1px solid #bbbfc4;
     border-radius: 4px;
   }
+
   .codemirror .CodeMirror-scroll {
     height: 250px;
     overflow-y: auto;
diff --git a/frontend/src/views/chart/chart/bar/bar_antv.js b/frontend/src/views/chart/chart/bar/bar_antv.js
index 191c9e3259..e5a2694c5b 100644
--- a/frontend/src/views/chart/chart/bar/bar_antv.js
+++ b/frontend/src/views/chart/chart/bar/bar_antv.js
@@ -8,7 +8,8 @@ import {
   getYAxis,
   getPadding,
   getSlider,
-  getAnalyse
+  getAnalyse,
+  setGradientColor
 } from '@/views/chart/chart/common/common_antv'
 import { antVCustomColor } from '@/views/chart/chart/util'
 
@@ -105,7 +106,7 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
   options.color = antVCustomColor(chart)
   if (customAttr.color.gradient) {
     options.color = options.color.map((ele) => {
-      return `l(270) 0:#ffffff00 1:${ele}`
+      return setGradientColor(ele, customAttr.color.gradient, 270)
     })
   }
 
@@ -207,7 +208,7 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
   options.color = antVCustomColor(chart)
   if (customAttr.color.gradient) {
     options.color = options.color.map((ele) => {
-      return `l(0) 0:#ffffff00 1:${ele}`
+      return setGradientColor(ele, customAttr.color.gradient)
     })
   }
 
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 25e805936d..1ec2129aa4 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/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,
diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js
index 567d00abc3..580d202899 100644
--- a/frontend/src/views/chart/chart/common/common_antv.js
+++ b/frontend/src/views/chart/chart/common/common_antv.js
@@ -881,3 +881,9 @@ function getLineDash(type) {
       return [0, 0]
   }
 }
+
+export function setGradientColor(rawColor, show = false, angle = 0) {
+  const item = rawColor.split(',')
+  item.splice(3, 1, '0.3)')
+  return show ? `l(${angle}) 0:${item.join(',')} 1:${rawColor}` : rawColor
+}
diff --git a/frontend/src/views/chart/chart/common/common_table.js b/frontend/src/views/chart/chart/common/common_table.js
index 0a318f5e08..154b383410 100644
--- 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) {
diff --git a/frontend/src/views/chart/chart/gauge/gauge_antv.js b/frontend/src/views/chart/chart/gauge/gauge_antv.js
index b4b3844d6e..5070f6f2c1 100644
--- a/frontend/src/views/chart/chart/gauge/gauge_antv.js
+++ b/frontend/src/views/chart/chart/gauge/gauge_antv.js
@@ -1,4 +1,4 @@
-import { getPadding, getTheme } from '@/views/chart/chart/common/common_antv'
+import { getPadding, getTheme, setGradientColor } from '@/views/chart/chart/common/common_antv'
 import { Gauge } from '@antv/g2plot'
 import { DEFAULT_LABEL, DEFAULT_SIZE, DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
 import { getScaleValue } from '@/components/canvas/utils/style'
@@ -154,7 +154,9 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
   }
 
   if (customAttr.color.gradient) {
-    const colorList = (theme.styleSheet?.paletteQualitative10 || []).map((ele) => `l(0) 0:#ffffff00 1:${ele}`)
+    const colorList = (theme.styleSheet?.paletteQualitative10 || []).map((ele) => {
+      return setGradientColor(ele, customAttr.color.gradient)
+    })
     if (!options.range) {
       options.range = {
         color: colorList
diff --git a/frontend/src/views/chart/chart/line/line_antv.js b/frontend/src/views/chart/chart/line/line_antv.js
index d1a9c93948..c3ef3bfe59 100644
--- a/frontend/src/views/chart/chart/line/line_antv.js
+++ b/frontend/src/views/chart/chart/line/line_antv.js
@@ -8,7 +8,8 @@ import {
   getYAxis,
   getPadding,
   getSlider,
-  getAnalyse
+  getAnalyse,
+  setGradientColor
 } from '@/views/chart/chart/common/common_antv'
 import { antVCustomColor, handleEmptyDataStrategy } from '@/views/chart/chart/util'
 import _ from 'lodash'
@@ -183,10 +184,10 @@ export function baseAreaOptionAntV(plot, container, chart, action, isStack) {
   const areaColors = [...options.color, ...options.color]
   if (customAttr.color.gradient) {
     options.areaStyle = () => {
-      const cr = areaColors.shift()
-      if (cr) {
+      const ele = areaColors.shift()
+      if (ele) {
         return {
-          fill: `l(270) 0:#ffffff00 1:${cr}`
+          fill: setGradientColor(ele, customAttr.color.gradient, 270)
         }
       }
     }
diff --git a/frontend/src/views/chart/chart/pie/pie_antv.js b/frontend/src/views/chart/chart/pie/pie_antv.js
index b3ad13f44a..00fbb8ba81 100644
--- a/frontend/src/views/chart/chart/pie/pie_antv.js
+++ b/frontend/src/views/chart/chart/pie/pie_antv.js
@@ -82,12 +82,6 @@ export function basePieOptionAntV(plot, container, chart, action) {
   // custom color
   options.color = antVCustomColor(chart)
 
-  if (customAttr.color.gradient) {
-    options.color = options.color.map((ele) => {
-      return `l(270) 0:#ffffff00 1:${ele}`
-    })
-  }
-
   // 开始渲染
   if (plot) {
     plot.destroy()
@@ -165,12 +159,6 @@ export function basePieRoseOptionAntV(plot, container, chart, action) {
   // custom color
   options.color = antVCustomColor(chart)
 
-  if (customAttr.color.gradient) {
-    options.color = options.color.map((ele) => {
-      return `l(270) 0:#ffffff00 1:${ele}`
-    })
-  }
-
   // 开始渲染
   if (plot) {
     plot.destroy()
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index b7d01cc8ee..6e77d031b6 100644
--- 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': [
@@ -943,6 +947,7 @@ export const TYPE_CONFIGS = [
       'color-selector': [
         'value',
         'custom',
+        'gradient',
         'alpha'
       ],
       'label-selector-ant-v': [
@@ -1249,7 +1254,6 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
-        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1309,7 +1313,6 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
-        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1370,7 +1373,6 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
-        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1428,7 +1430,6 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
-        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1850,6 +1851,7 @@ export const TYPE_CONFIGS = [
         'tableItemBgColor',
         'tableHeaderFontColor',
         'tableFontColor',
+        'tableScrollBarColor',
         'alpha'
       ],
       'size-selector': [
@@ -1889,6 +1891,7 @@ export const TYPE_CONFIGS = [
         'tableItemBgColor',
         'tableHeaderFontColor',
         'tableFontColor',
+        'tableScrollBarColor',
         'alpha'
       ],
       'size-selector': [
@@ -3492,15 +3495,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))
-      toBeFillDimension.forEach(dimension => {
-        data.splice(dimensionInfo.index + insertCount, 0, {
-          field,
-          value: 0,
-          category: dimension
-        })
+      let subInsertIndex = 0
+      subDimensionSet.forEach(dimension => {
+        if (!dimensionInfo.set.has(dimension)) {
+          data.splice(dimensionInfo.index + insertCount + subInsertIndex, 0, {
+            field,
+            value: 0,
+            category: dimension
+          })
+        }
+        subInsertIndex++
       })
-      insertCount += toBeFillDimension.size
+      insertCount += subDimensionSet.size - dimensionInfo.set.size
     }
   })
 }
@@ -3521,3 +3527,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
+}
diff --git a/frontend/src/views/chart/chart/waterfall/waterfall.js b/frontend/src/views/chart/chart/waterfall/waterfall.js
index 61a20c363e..79797d01c3 100644
--- a/frontend/src/views/chart/chart/waterfall/waterfall.js
+++ b/frontend/src/views/chart/chart/waterfall/waterfall.js
@@ -4,7 +4,8 @@ import {
   getTheme,
   getTooltip,
   getXAxis,
-  getYAxis
+  getYAxis,
+  setGradientColor
 } from '@/views/chart/chart/common/common_antv'
 import { Waterfall } from '@antv/g2plot'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
@@ -28,11 +29,17 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) {
   }
   // data
   const data = chart.data.data
+  const [risingColorRgba, fallingColorRgba, totalColorRgba] = theme.styleSheet.paletteQualitative10
+
+  let customAttrCopy = {}
+  if (chart.customAttr) {
+    customAttrCopy = JSON.parse(chart.customAttr)
+  }
   // total
   const total = {
     label: '合计',
     style: {
-      fill: theme.styleSheet.paletteQualitative10[2]
+      fill: setGradientColor(totalColorRgba, customAttrCopy.color.gradient, 270)
     }
   }
   // options
@@ -50,25 +57,25 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) {
       items: [
         { name: '增加', marker: {
           style: {
-            fill: theme.styleSheet.paletteQualitative10[0]
+            fill: setGradientColor(risingColorRgba, customAttrCopy.color.gradient, 270)
           }
         }},
         { name: '减少', marker: {
           style: {
-            fill: theme.styleSheet.paletteQualitative10[1]
+            fill: setGradientColor(fallingColorRgba, customAttrCopy.color.gradient, 270)
           }
         }},
         { name: '合计', marker: {
           style: {
-            fill: theme.styleSheet.paletteQualitative10[2]
+            fill: setGradientColor(totalColorRgba, customAttrCopy.color.gradient, 270)
           }
         }}
       ]
     },
     xAxis: xAxis,
     yAxis: yAxis,
-    risingFill: theme.styleSheet.paletteQualitative10[0],
-    fallingFill: theme.styleSheet.paletteQualitative10[1],
+    risingFill: setGradientColor(risingColorRgba, customAttrCopy.color.gradient, 270),
+    fallingFill: setGradientColor(fallingColorRgba, customAttrCopy.color.gradient, 270),
     total: total,
     interactions: [
       {
@@ -79,7 +86,7 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) {
       }
     ]
   }
-  // size
+
   let customAttr = {}
   if (chart.customAttr) {
     customAttr = JSON.parse(chart.customAttr)
diff --git a/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue b/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
index e4972fc2d0..00a1682af8 100644
--- a/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
+++ b/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,8 @@ 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.$set(this.colorForm, 'gradient', this.colorForm.gradient || false)
+          this.colorForm.tableScrollBarColor = this.colorForm.tableScrollBarColor ? this.colorForm.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor
 
           this.initCustomColor()
         }
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 7529b1efb1..c67a5b74ac 100644
--- 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"
@@ -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>
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 9b0b7ff39e..9d34f0a5e5 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -192,7 +192,7 @@
                               @command="chartFieldEdit"
                             >
                               <span class="el-dropdown-link">
-                                <i class="el-icon-s-tools" />
+                                <i class="el-icon-s-tools"/>
                               </span>
                               <el-dropdown-menu slot="dropdown">
                                 <el-dropdown-item
@@ -267,7 +267,7 @@
                               @command="chartFieldEdit"
                             >
                               <span class="el-dropdown-link">
-                                <i class="el-icon-s-tools" />
+                                <i class="el-icon-s-tools"/>
                               </span>
                               <el-dropdown-menu slot="dropdown">
                                 <el-dropdown-item
@@ -362,7 +362,7 @@
                           style="padding: 6px;"
                         >
                           {{ $t('chart.change_chart_type') }}
-                          <i class="el-icon-caret-bottom" />
+                          <i class="el-icon-caret-bottom"/>
                         </el-button>
                       </el-popover>
                     </span>
@@ -490,8 +490,8 @@
                     >
                       <span class="data-area-label">
                         <span v-if="view.type && view.type.includes('table')">{{
-                          $t('chart.drag_block_table_data_column')
-                        }}</span>
+                            $t('chart.drag_block_table_data_column')
+                          }}</span>
                         <span
                           v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall' || view.type === 'area')"
                         >{{ $t('chart.drag_block_type_axis') }}</span>
@@ -499,18 +499,18 @@
                           v-else-if="view.type && view.type.includes('pie')"
                         >{{ $t('chart.drag_block_pie_label') }}</span>
                         <span v-else-if="view.type && view.type.includes('funnel')">{{
-                          $t('chart.drag_block_funnel_split')
-                        }}</span>
+                            $t('chart.drag_block_funnel_split')
+                          }}</span>
                         <span v-else-if="view.type && view.type.includes('radar')">{{
-                          $t('chart.drag_block_radar_label')
-                        }}</span>
+                            $t('chart.drag_block_radar_label')
+                          }}</span>
                         <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
                         <span v-else-if="view.type && view.type.includes('treemap')">{{
-                          $t('chart.drag_block_treemap_label')
-                        }}</span>
+                            $t('chart.drag_block_treemap_label')
+                          }}</span>
                         <span v-else-if="view.type && view.type === 'word-cloud'">{{
-                          $t('chart.drag_block_word_cloud_label')
-                        }}</span>
+                            $t('chart.drag_block_word_cloud_label')
+                          }}</span>
                         <span v-else-if="view.type && view.type === 'label'">{{ $t('chart.drag_block_label') }}</span>
                         <span v-show="view.type !== 'richTextView'"> / </span>
                         <span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
@@ -633,8 +633,8 @@
                     >
                       <span class="data-area-label">
                         <span v-if="view.type && view.type.includes('table')">{{
-                          $t('chart.drag_block_table_data_column')
-                        }}</span>
+                            $t('chart.drag_block_table_data_column')
+                          }}</span>
                         <span
                           v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall' || view.type === 'area')"
                         >{{ $t('chart.drag_block_value_axis') }}</span>
@@ -642,30 +642,30 @@
                           v-else-if="view.type && view.type.includes('pie')"
                         >{{ $t('chart.drag_block_pie_angel') }}</span>
                         <span v-else-if="view.type && view.type.includes('funnel')">{{
-                          $t('chart.drag_block_funnel_width')
-                        }}</span>
+                            $t('chart.drag_block_funnel_width')
+                          }}</span>
                         <span v-else-if="view.type && view.type.includes('radar')">{{
-                          $t('chart.drag_block_radar_length')
-                        }}</span>
+                            $t('chart.drag_block_radar_length')
+                          }}</span>
                         <span v-else-if="view.type && view.type.includes('gauge')">{{
-                          $t('chart.drag_block_gauge_angel')
-                        }}</span>
+                            $t('chart.drag_block_gauge_angel')
+                          }}</span>
                         <span
                           v-else-if="view.type && view.type.includes('text')"
                         >{{ $t('chart.drag_block_label_value') }}</span>
                         <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
                         <span v-else-if="view.type && view.type.includes('tree')">{{
-                          $t('chart.drag_block_treemap_size')
-                        }}</span>
+                            $t('chart.drag_block_treemap_size')
+                          }}</span>
                         <span v-else-if="view.type && view.type === 'chart-mix'">{{
-                          $t('chart.drag_block_value_axis_main')
-                        }}</span>
+                            $t('chart.drag_block_value_axis_main')
+                          }}</span>
                         <span
                           v-else-if="view.type && view.type === 'liquid'"
                         >{{ $t('chart.drag_block_progress') }}</span>
                         <span v-else-if="view.type && view.type === 'word-cloud'">{{
-                          $t('chart.drag_block_word_cloud_size')
-                        }}</span>
+                            $t('chart.drag_block_word_cloud_size')
+                          }}</span>
                         <span v-show="view.type !== 'richTextView'"> / </span>
                         <span>{{ $t('chart.quota') }}</span>
                         <i
@@ -1116,7 +1116,7 @@
           class="padding-tab"
           style="width: 350px;"
         >
-          <position-adjust />
+          <position-adjust/>
         </el-tab-pane>
 
       </el-tabs>
@@ -1268,7 +1268,7 @@
       width="800px"
       class="dialog-css"
     >
-      <quota-filter-editor :item="quotaItem" />
+      <quota-filter-editor :item="quotaItem"/>
       <div
         slot="footer"
         class="dialog-footer"
@@ -1295,7 +1295,7 @@
       width="800px"
       class="dialog-css"
     >
-      <dimension-filter-editor :item="dimensionItem" />
+      <dimension-filter-editor :item="dimensionItem"/>
       <div
         slot="footer"
         class="dialog-footer"
diff --git a/frontend/src/views/chart/view/PositionAdjust.vue b/frontend/src/views/chart/view/PositionAdjust.vue
index 6452daaabc..e8332c8a9d 100644
--- a/frontend/src/views/chart/view/PositionAdjust.vue
+++ b/frontend/src/views/chart/view/PositionAdjust.vue
@@ -29,6 +29,8 @@
             v-model="styleInfo.left"
             type="number"
             :min="0"
+            :max="maxLeft"
+            @change="leftOnChange"
             class="hide-icon-number"
           >
             <template slot="append">px</template>
@@ -69,6 +71,8 @@
 
 <script>
 
+import { mapState } from 'vuex'
+
 export default {
   name: 'PositionAdjust',
   props: {},
@@ -76,14 +80,26 @@ export default {
     return {}
   },
   computed: {
+    maxLeft() {
+      return 1600 - this.styleInfo.width - this.componentGap
+    },
     styleInfo() {
       return this.$store.state.curComponent.style
-    }
+    },
+    ...mapState([
+      'componentGap'
+    ])
   },
   watch: {},
   mounted() {
   },
-  methods: {}
+  methods: {
+    leftOnChange() {
+      if (this.styleInfo.left > this.maxLeft) {
+        this.styleInfo.left = this.maxLeft
+      }
+    }
+  }
 }
 </script>
 
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 1634189267..41080baef7 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -165,8 +165,8 @@
               v-show=" show &&showIndex===1"
               :canvas-id="canvasId"
             />
-            <subject-setting v-show=" show &&showIndex===2" />
-            <assist-component v-show=" show &&showIndex===3" />
+            <subject-setting v-show=" show &&showIndex===2"/>
+            <assist-component v-show=" show &&showIndex===3"/>
           </div>
         </el-drawer>
         <!--PC端画布区域-->
@@ -181,7 +181,7 @@
           :canvas-pid="'0'"
           @canvasScroll="canvasScroll"
         >
-          <canvas-opt-bar slot="optBar" />
+          <canvas-opt-bar slot="optBar"/>
         </de-canvas>
         <!--移动端画布区域 保持宽高比2.5-->
         <el-row
@@ -197,7 +197,7 @@
               :style="customCanvasMobileStyle"
               class="this_mobile_canvas"
             >
-              <el-row class="this_mobile_canvas_top" />
+              <el-row class="this_mobile_canvas_top"/>
               <el-row class="this_mobile_canvas_inner_top">
                 {{ panelInfo.name }}
               </el-row>
@@ -215,7 +215,7 @@
                   :canvas-pid="'0'"
                   :mobile-layout-status="true"
                 >
-                  <canvas-opt-bar slot="optBar" />
+                  <canvas-opt-bar slot="optBar"/>
                 </de-canvas>
               </el-row>
               <el-row class="this_mobile_canvas_inner_bottom">
@@ -245,14 +245,14 @@
                   />
                 </el-col>
               </el-row>
-              <el-row class="this_mobile_canvas_bottom" />
+              <el-row class="this_mobile_canvas_bottom"/>
             </div>
           </el-col>
           <el-col
             :span="16"
             class="this_mobile_canvas_cell this_mobile_canvas_wait_cell"
           >
-            <component-wait />
+            <component-wait/>
           </el-col>
         </el-row>
       </de-main-container>
@@ -270,7 +270,7 @@
           />
         </div>
         <div v-if="showBatchViewToolsAside">
-          <chart-style-batch-set />
+          <chart-style-batch-set/>
         </div>
         <div v-if="!showViewToolsAside&&!showBatchViewToolsAside">
           <el-row style="height: 40px">
@@ -283,10 +283,11 @@
                 @click="changeRightDrawOpen(false)"
               />
             </el-tooltip>
-            <span style="font-weight: bold;font-size: 14px;margin-left: 40px;line-height:40px">{{ $t('panel.position_adjust') }}</span>
+            <span style="font-weight: bold;font-size: 14px;margin-left: 40px;line-height:40px"
+            >{{ $t('panel.position_adjust') }}</span>
           </el-row>
           <el-row>
-            <position-adjust v-if="curComponent&&!curComponent.auxiliaryMatrix" />
+            <position-adjust v-if="curComponent&&!curComponent.auxiliaryMatrix"/>
           </el-row>
         </div>
       </div>
@@ -445,7 +446,8 @@
           />
         </el-col>
         <el-col :span="21">
-          <span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.panel_cache_use_tips') }}</span>
+          <span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px"
+          >{{ $t('panel.panel_cache_use_tips') }}</span>
         </el-col>
       </el-row>
       <div
@@ -644,7 +646,7 @@ export default {
     },
     // 显示视图工具栏
     showViewToolsAside() {
-      return !this.batchOptStatus && this.curComponent && (this.curComponent.type === 'view' || this.curComponent.type === 'de-tabs')
+      return !this.batchOptStatus && this.curComponent && (this.curComponent.type === 'view')
     },
     showBatchViewToolsAside() {
       return this.batchOptStatus
@@ -961,11 +963,11 @@ export default {
     showPanel(type) {
       if (this.showIndex === -1 || this.showIndex === type) {
         this.$nextTick(() => {
-          if (this.show) {
-            this.showIndex === -1
+            if (this.show) {
+              this.showIndex === -1
+            }
+            this.show = !this.show
           }
-          this.show = !this.show
-        }
         )
       }
       this.showIndex = type
diff --git a/frontend/src/views/panel/filter/filterMain/FilterControl.vue b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
index d054c00185..d6dfacc517 100644
--- a/frontend/src/views/panel/filter/filterMain/FilterControl.vue
+++ b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
@@ -169,7 +169,51 @@
             width="200"
           >
             <div class="view-container-class">
-              <el-checkbox-group v-model="attrs.parameters">
+              <el-tabs
+                v-if="isRangeParamWidget"
+                v-model="activeName"
+              >
+                <el-tab-pane
+                  v-for="(item, index) in tabsOption"
+                  :key="item.name + index"
+                  :label="item.label"
+                  :name="item.name"
+                >
+                  <el-checkbox-group
+                    v-model="attrs[item.name + 'Parameters']"
+                    @change="val => {changeDynamicParams(val, item.name)}"
+                  >
+                    <el-checkbox
+                      v-for="(item ) in childViews.datasetParams"
+                      :key="item.id"
+                      :label="item.id"
+                      :disabled="attrs[tabsOption[(index + 1)%2].name + 'Parameters'] && attrs[tabsOption[(index + 1)%2].name + 'Parameters'].includes(item.id)"
+                      class="de-checkbox"
+                    >
+                      <div class="span-div">
+                        <span
+                          v-if="item.alias && item.alias.length <= 7"
+                          style="margin-left: 6px"
+                        >{{ item.alias }}</span>
+                        <el-tooltip
+                          v-else
+                          class="item"
+                          effect="dark"
+                          :content="item.alias"
+                          placement="left"
+                        >
+                          <span style="margin-left: 6px">{{ item.alias }}</span>
+                        </el-tooltip>
+                      </div>
+
+                    </el-checkbox>
+                  </el-checkbox-group>
+                </el-tab-pane>
+              </el-tabs>
+              <el-checkbox-group
+                v-else
+                v-model="attrs.parameters"
+              >
                 <el-checkbox
                   v-for="(item ) in childViews.datasetParams"
                   :key="item.id"
@@ -236,7 +280,13 @@ export default {
   },
   data() {
     return {
+      activeName: 'start',
+      tabsOption: [
+        { label: this.$t('dataset.start_time'), name: 'start' },
+        { label: this.$t('dataset.end_time'), name: 'end' }
+      ],
       showParams: false,
+      isRangeParamWidget: false,
       attrs: null,
       titlePopovervisible: false,
       popovervisible: false,
@@ -278,11 +328,21 @@ export default {
 
   created() {
     this.attrs = this.controlAttrs
-    if ('timeYearWidget,timeMonthWidget,timeDateWidget,textSelectWidget,numberSelectWidget'.indexOf(this.widget.name) !== -1) {
+    if (this.widget.isTimeWidget && this.widget.isTimeWidget()) {
       this.showParams = true
+      this.isRangeParamWidget = this.widget.isRangeParamWidget && this.widget.isRangeParamWidget()
     }
   },
   methods: {
+    changeDynamicParams(val, name) {
+      const start = this.attrs.startParameters ? JSON.parse(JSON.stringify(this.attrs.startParameters)) : []
+
+      const end = this.attrs.endParameters ? JSON.parse(JSON.stringify(this.attrs.endParameters)) : []
+      if (end?.length) {
+        end[0] += '_START_END_SPLIT'
+      }
+      this.attrs.parameters = [...new Set([...start, ...end])]
+    },
     sortChange(param) {
       this.element.options.attrs.sort = param
     },
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index 4a77719708..3ae5ce2a0d 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -174,7 +174,7 @@
                   />
                 </span>
                 <span v-if="data.nodeType === 'folder'">
-                  <svg-icon icon-class="scene" />
+                  <svg-icon icon-class="scene"/>
                 </span>
                 <span
                   :class="data.status"
@@ -211,7 +211,7 @@
                       <el-dropdown-item
                         :command="beforeClickEdit('folder', 'new', data, node)"
                       >
-                        <svg-icon icon-class="scene" />
+                        <svg-icon icon-class="scene"/>
                         <span style="margin-left: 5px">{{ $t('panel.groupAdd') }}</span>
                       </el-dropdown-item>
                       <el-dropdown-item
@@ -334,7 +334,7 @@
             :label="$t('commons.name')"
             prop="name"
           >
-            <el-input v-model="groupForm.name" />
+            <el-input v-model="groupForm.name"/>
           </el-form-item>
         </el-form>
         <div
@@ -345,8 +345,8 @@
             size="mini"
             @click="close()"
           >{{
-            $t('panel.cancel')
-          }}
+              $t('panel.cancel')
+            }}
           </el-button>
           <el-button
             type="primary"
@@ -422,8 +422,8 @@
             size="mini"
             @click="closeMoveGroup()"
           >{{
-            $t('dataset.cancel')
-          }}
+              $t('dataset.cancel')
+            }}
           </el-button>
           <el-button
             :disabled="groupMoveConfirmDisabled"
@@ -926,7 +926,7 @@ export default {
 
       if (userCache) {
         this.defaultData = JSON.parse(modelInfo)
-        if (showFirst && this.defaultData.length > 0) {
+        if (showFirst && this.defaultData && this.defaultData.length > 0) {
           this.activeDefaultNodeAndClickOnly(this.defaultData[0].id)
         }
       }
@@ -935,7 +935,7 @@ export default {
         localStorage.setItem('panel-default-tree', JSON.stringify(res.data))
         if (!userCache) {
           this.defaultData = res.data
-          if (showFirst && this.defaultData.length > 0) {
+          if (showFirst && this.defaultData && this.defaultData.length > 0) {
             this.activeDefaultNodeAndClickOnly(this.defaultData[0].id)
           }
         }
diff --git a/frontend/src/views/panel/subjectSetting/panelStyle/PanelColorSelector.vue b/frontend/src/views/panel/subjectSetting/panelStyle/PanelColorSelector.vue
index 421557c96c..7960725df9 100644
--- 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>