diff --git a/CHANGELOG.md b/CHANGELOG.md
index b0e01e48e1fab1a27bad60071bb7e81bb6afec1d..98a5c6b6e6658477048ddd519e64e38ad58657a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,11 +9,13 @@
 
 ### Change
 
+- 优化日历,标题栏，数据看板，分割容器样式，规范其样式变量，
 - 优化drbar、drtab部件样式，规范其样式变量
 - 优化搜索栏、工具栏、分页导航面板、向导面板部件样式，规范其样式变量
 
 ### Fixed
 
+- 修复视图消息滚动模式下消息过长时自动换行展示的问题
 - 修复数组编辑器、富文本编辑器、滑动输入框、文件上传响应式样式异常
 - 修复数据选择（下拉）点击取消按钮未清空数据
 
diff --git a/src/common/split-trigger/split-trigger.scss b/src/common/split-trigger/split-trigger.scss
index f71009cef9dce3a585e87f436c51490131bda1bb..a93d09d3079706385abfe98bbaee4f544e71652d 100644
--- a/src/common/split-trigger/split-trigger.scss
+++ b/src/common/split-trigger/split-trigger.scss
@@ -4,14 +4,8 @@ $split-trigger: (
   width-trigger-bar-width: rem(4px),
   height-split-trigger-bar: rem(1px),
   width-split-trigger-bar: rem(1px),
-  trigger-bar-offset: calc(
-      var(width-trigger-width) - var(width-trigger-bar-width) / 2
-    ),
   spacing-trigger-bar-interval: rem(3px),
   spacing-trigger-bar-weight: rem(1px),
-  height-trigger-bar-con-height: calc(
-      var(spacing-trigger-bar-weight) + var(spacing-trigger-bar-interval) * 8
-    ),
   border-split-trigger: rem(1px) solid getCssVar(color, border),
 );
 
@@ -42,6 +36,7 @@ $split-trigger: (
     cursor: row-resize;
     border-right: none;
     border-left: none;
+    display: flex;
 
     @include b(split-trigger-bar) {
       float: left;
@@ -54,20 +49,14 @@ $split-trigger: (
 }
 
 @include b(split-trigger-bar-con) {
-  position: absolute;
   overflow: hidden;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
 
   @include m(vertical) {
-    top: 50%;
-    left: getCssVar(split-trigger, trigger-bar-offset);
-    height: getCssVar(split-trigger, height-trigger-bar-con-height);
-    transform: translate(0, -50%);
-  }
-
-  @include m(horizontal) {
-    top: getCssVar(split-trigger, trigger-bar-offset);
-    left: 50%;
-    width: getCssVar(split-trigger, height-trigger-bar-con-height);
-    transform: translate(-50%, 0);
+   flex-direction: column;
   }
 }
diff --git a/src/common/split/split.scss b/src/common/split/split.scss
index 37388f6bf5191e6858bb8efe93c651118b80b5d5..278539c20e0bfe9e5ad85da038bf4cf985ffeea7 100644
--- a/src/common/split/split.scss
+++ b/src/common/split/split.scss
@@ -55,7 +55,7 @@ $split-wrapper:(
   z-index: 10;
   width: getCssVar('split-wrapper','width-trigger-width');
   transform: translate(-50%, -50%);
-  touch-action: 'none'; 
+  touch-action: none; 
 }
 
 @mixin horizontal-trigger-con-and-pane {
diff --git a/src/common/view-message/view-message.tsx b/src/common/view-message/view-message.tsx
index 00cd1ff93bc33fdda834d837f49160cfaf2f9fde..eab01ea0b07e25864a803de43fb41567dfdab873 100644
--- a/src/common/view-message/view-message.tsx
+++ b/src/common/view-message/view-message.tsx
@@ -137,7 +137,7 @@ export const ViewMessage = defineComponent({
               <van-notice-bar
                 class={[this.ns.b('item'), item.sysCss?.cssName]}
                 type={item.messageType?.toLowerCase()}
-                wrapable
+                wrapable={!this.scroll}
                 scrollable={this.scroll}
                 mode={item.removeMode !== 0 ? 'closeable' : ''}
                 left-icon={this.getTypeIcon(item.messageType)}
diff --git a/src/control/calendar/calendar.scss b/src/control/calendar/calendar.scss
index f522fb92678d4dd0e0d2993264ba9b3ea752566f..02c3b740591936f3cb6d62ea0556bb450649a797 100644
--- a/src/control/calendar/calendar.scss
+++ b/src/control/calendar/calendar.scss
@@ -1,32 +1,38 @@
 $control-calendar: (
-  text-color: getCssVar(color-text-0),
-  font-size: getCssVar(font-size, small),
-  item-padding: getCssVar(spacing, tight) getCssVar(spacing, base),
-  mark-height: getCssVar(spacing, tight),
-  mark-width: getCssVar(spacing, tight),
-  mark-color: getCssVar(color, danger),
-  item-border-gap: getCssVar(spacing, tight),
-  item-border: 1px solid getCssVar(color, border),
-  header-caption-padding: getCssVar(spacing, base) getCssVar(spacing, tight),
-  header-caption-bg: getCssVar(color, bg, 1),
-  toolbar-color: getCssVar(color, primary),
-  toolbar-bg: getCssVar(color, bg, 0),
-  toolbar-gap: getCssVar(spacing, base),
-  calendar-bg: getCssVar(color, bg, 1),
-  calendar-main-color: getCssVar(color, primary),
-  calendar-color: getCssVar(color, text, 0),
-  calendar-disabled-color: getCssVar(color, disabled, text),
-  calendar-active-color: getCssVar(color, primary),
-  calendar-active-bg: getCssVar(color, primary, light, default),
-  timeline-item-padding: getCssVar(spacing, base),
-  timeline-item-size: getCssVar(width-icon, small),
-  timeline-item-bg-color: getCssVar(color, border),
-  tab-bg: transparent,
-  timeline-item-margin: 0 0 getCssVar(spacing, base) 0,
-  timeline-padding: getCssVar(spacing, base),
-  timeline-timespan-padding: getCssVar(spacing, extra-tight) getCssVar(spacing, tight),
-  timeline-item-border-radius: getCssVar(spacing, tight),
-  timeline-item-content-margin: getCssVar(spacing, base),
+  // 颜色
+  color-text-color: getCssVar(color-text-0),
+  color-mark-color: getCssVar(color, danger),
+  color-header-caption-bg: getCssVar(color, bg, 1),
+  color-toolbar-color: getCssVar(color, primary),
+  color-toolbar-bg: getCssVar(color, bg, 0),
+  color-calendar-bg: getCssVar(color, bg, 1),
+  color-calendar-main-color: getCssVar(color, primary),
+  color-calendar-color: getCssVar(color, text, 0),
+  color-calendar-disabled-color: getCssVar(color, disabled, text),
+  color-calendar-active-color: getCssVar(color, primary),
+  color-calendar-active-bg: getCssVar(color, primary, light, default),
+  color-timeline-item-bg-color: getCssVar(color, border),
+  color-tab-bg: transparent,
+  // 字体大小
+  font-calendar-item-fontSize: getCssVar(font-size, small),
+  font-timeline-item-fontSize: getCssVar(width-icon, small),
+  // 间距
+  spacing-item-padding: getCssVar(spacing, tight) getCssVar(spacing, base),
+  spacing-item-border-gap: getCssVar(spacing, tight),
+  spacing-header-caption-padding: getCssVar(spacing, base) getCssVar(spacing, tight),
+  spacing-toolbar-gap: getCssVar(spacing, base),
+  spacing-timeline-item-padding: getCssVar(spacing, base),
+  spacing-timeline-item-margin: 0 0 getCssVar(spacing, base) 0,
+  spacing-timeline-padding: getCssVar(spacing, base),
+  spacing-timeline-timespan-padding: getCssVar(spacing, extra-tight) getCssVar(spacing, tight),
+  spacing-timeline-item-content-margin: getCssVar(spacing, base),
+  // 宽高
+  height-mark-height: getCssVar(spacing, tight),
+  width-mark-width: getCssVar(spacing, tight),
+  // 圆角
+  radius-timeline-item-border-radius: getCssVar(spacing, tight),
+  // 其他
+  item-border: 1px solid getCssVar(color, border),  
 );
 
 @include b(control-calendar) {
@@ -54,22 +60,22 @@ $control-calendar: (
     width: 100%;
 
     @include m((item)) {
-      width: getCssVar(control-calendar, mark-width);
-      height: getCssVar(control-calendar, mark-height);
-      background-color: getCssVar(control-calendar, mark-color);
+      width: getCssVar(control-calendar, width-mark-width);
+      height: getCssVar(control-calendar, height-mark-height);
+      background-color: getCssVar(control-calendar, color-mark-color);
       border-radius: 50%;
     }
   }
 
   @include b(control-calendar-item) {
     height: auto;
-    padding: getCssVar(control-calendar, item-padding);
+    padding: getCssVar(control-calendar, spacing-item-padding);
 
     // 默认项样式 不渗透到布局面板
     @include m(default) {
       overflow: hidden;
-      font-size: getCssVar(control-calendar, font-size);
-      color: getCssVar(control-calendar, text-color);
+      font-size: getCssVar(control-calendar, font-calendar-item-fontSize);
+      color: getCssVar(control-calendar, color-text-color);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -79,9 +85,9 @@ $control-calendar: (
         position: absolute;
         content: " ";
         pointer-events: none;
-        right: getCssVar(control-calendar, item-border-gap);
+        right: getCssVar(control-calendar, spacing-item-border-gap);
         bottom: 0;
-        left: getCssVar(control-calendar, item-border-gap);
+        left: getCssVar(control-calendar, spacing-item-border-gap);
         border-bottom: getCssVar(control-calendar, item-border);
       }
     }
@@ -90,18 +96,18 @@ $control-calendar: (
 
   // 日历插件样式
   .hash-calendar {
-    --hash-calendar-main-font-color: #{getCssVar(control-calendar, calendar-color)};
-    --hash-calendar-main-color: #{getCssVar(control-calendar, calendar-main-color)};
-    --hash-calendar-disabled-font-color: #{getCssVar(control-calendar, calendar-disabled-color)};
+    --hash-calendar-main-font-color: #{getCssVar(control-calendar, color-calendar-color)};
+    --hash-calendar-main-color: #{getCssVar(control-calendar, color-calendar-main-color)};
+    --hash-calendar-disabled-font-color: #{getCssVar(control-calendar, color-calendar-disabled-color)};
     .calendar_content {
-      background-color: getCssVar(control-calendar, calendar-bg);
+      background-color: getCssVar(control-calendar, color-calendar-bg);
     }
     .calendar_week,.calendar_group_li {
-      background-color: getCssVar(control-calendar, calendar-bg);
+      background-color: getCssVar(control-calendar, color-calendar-bg);
     }
     .calendar_day_checked {
-      color: getCssVar(control-calendar, calendar-active-color);
-      background-color: getCssVar(control-calendar, calendar-active-bg);
+      color: getCssVar(control-calendar, color-calendar-active-color);
+      background-color: getCssVar(control-calendar, color-calendar-active-bg);
     }
   }
 }
@@ -141,7 +147,7 @@ $control-calendar: (
         bottom: rem(-8px);
         border-radius: rem(3px);
         transform: translateY(-50%);
-        background-color: getCssVar(control-calendar, tab-bg);
+        background-color: getCssVar(control-calendar, color-tab-bg);
         position: absolute;
       }
     }
@@ -157,38 +163,38 @@ $control-calendar: (
   width: 100%;
   display: flex;
   @include e('select-day') {
-    padding: getCssVar(control-calendar, header-caption-padding);
-    background-color: getCssVar(control-calendar, header-caption-bg);
+    padding: getCssVar(control-calendar, spacing-header-caption-padding);
+    background-color: getCssVar(control-calendar, color-header-caption-bg);
   }
   @include e('switch-toolbar') {
     flex: auto;
     align-items: center;
     display: flex;
     justify-content: end;
-    color: getCssVar(control-calendar, toolbar-color);
-    gap: getCssVar(control-calendar, toolbar-gap);
-    padding-right: getCssVar(control-calendar, toolbar-gap);
-    background-color: getCssVar(control-calendar, toolbar-bg);
+    color: getCssVar(control-calendar, color-toolbar-color);
+    gap: getCssVar(control-calendar, spacing-toolbar-gap);
+    padding-right: getCssVar(control-calendar, spacing-toolbar-gap);
+    background-color: getCssVar(control-calendar, color-toolbar-bg);
   }
 }
 
 // 时间轴样式
 @include b(control-calendar-timeline) {
   @include set-component-css-var(control-calendar, $control-calendar);
-  padding: getCssVar(control-calendar, timeline-padding);
+  padding: getCssVar(control-calendar, spacing-timeline-padding);
   overflow: auto;
   
   @include e(item) {
-    margin: getCssVar(control-calendar, timeline-item-margin);
+    margin: getCssVar(control-calendar, spacing-timeline-item-margin);
     @include m('timespan') {
       width: auto;
       display: inline-block;
-      padding: getCssVar(control-calendar, timeline-timespan-padding);
-      border-radius: getCssVar(control-calendar, timeline-item-border-radius);
-      background-color: getCssVar(control-calendar, timeline-item-bg-color);
+      padding: getCssVar(control-calendar, spacing-timeline-timespan-padding);
+      border-radius: getCssVar(control-calendar, radius-timeline-item-border-radius);
+      background-color: getCssVar(control-calendar, color-timeline-item-bg-color);
     }
     @include m('content'){
-      margin-top: getCssVar(control-calendar, timeline-item-content-margin);
+      margin-top: getCssVar(control-calendar, spacing-timeline-item-content-margin);
     }
     .#{bem(control-calendar-item)}{
       padding: 0;
diff --git a/src/control/caption-bar/caption-bar.scss b/src/control/caption-bar/caption-bar.scss
index cdf0cec586814c9a75c14c3071d62369a2391d2c..13400eef76bec9541dafeb4ed6e2ae14438d3c80 100644
--- a/src/control/caption-bar/caption-bar.scss
+++ b/src/control/caption-bar/caption-bar.scss
@@ -3,13 +3,13 @@ $control-captionbar: (
   color-page-caption: getCssVar('view-page-caption', 'color'),
   color-sub-caption: getCssVar('color', 'text', 2),
   // Font
-  font-page-caption: getCssVar('view-page-caption', 'font-size'),
-  font-sub-caption: getCssVar('font-size', 'regular'),
-  font-sub-main-size: getCssVar('font-size', 'header-6'),
-  font-weight: getCssVar('view-page-caption', 'font-weight'),
-  font-line-height: getCssVar('view-page-caption', 'line-height'),
-  font-text-align: getCssVar('view-page-caption', 'text-align'),
-  font-icon-width: rem(20px),
+  font-page-caption-fontSize: getCssVar('view-page-caption', 'font-size'),
+  font-sub-caption-fontSize: getCssVar('font-size', 'regular'),
+  font-sub-main-fontSize: getCssVar('font-size', 'header-6'),
+  font-caption-fontWeight: getCssVar('view-page-caption', 'font-weight'),
+  font-caption-lineHeight: getCssVar('view-page-caption', 'line-height'),
+  font-caption-textAlign: getCssVar('view-page-caption', 'text-align'),
+  font-icon-width-fontSize: rem(20px),
   // Spacing
   spacing-padding: getCssVar('spacing', 'tight') 0,
   spacing-margin-right: getCssVar('spacing', 'tight') 0,
@@ -31,7 +31,7 @@ $control-captionbar: (
 
   @include when(hasSub) {
     @include b(control-captionbar-caption) {
-      font-size: getCssVar('control-captionbar', 'font-sub-main-size');
+      font-size: getCssVar('control-captionbar', 'font-sub-main-fontSize');
     }
   }
 
@@ -46,11 +46,11 @@ $control-captionbar: (
     justify-content: center;
     width: 100%;
     height: 100%;
-    font-size: getCssVar('control-captionbar', 'font-page-caption');
-    font-weight: getCssVar('control-captionbar', 'font-weight');
-    line-height: getCssVar('control-captionbar', 'font-line-height');
+    font-size: getCssVar('control-captionbar', 'font-page-caption-fontSize');
+    font-weight: getCssVar('control-captionbar', 'font-caption-fontWeight');
+    line-height: getCssVar('control-captionbar', 'font-caption-lineHeight');
     color: getCssVar('control-captionbar', 'color-page-caption');
-    text-align: getCssVar('control-captionbar', 'font-text-align');
+    text-align: getCssVar('control-captionbar', 'font-caption-textAlign');
 
     > span {
       @include utils-ellipsis;
@@ -58,8 +58,8 @@ $control-captionbar: (
 
     @include b(icon) {
       flex-shrink: 0;
-      width: getCssVar('control-captionbar', 'font-icon-width');
-      font-size: getCssVar('control-captionbar', 'font-icon-width');
+      width: getCssVar('control-captionbar', 'font-icon-width-fontSize');
+      font-size: getCssVar('control-captionbar', 'font-icon-width-fontSize');
     }
   }
 
@@ -72,7 +72,7 @@ $control-captionbar: (
     justify-content: center;
     width: 100%;
     height: 100%;
-    font-size: getCssVar('control-captionbar', 'font-sub-caption');
+    font-size: getCssVar('control-captionbar', 'font-sub-caption-fontSize');
     color: getCssVar('control-captionbar', 'color-sub-caption');
     text-align: getCssVar('control-captionbar', 'font-text-align');
   }
diff --git a/src/control/dashboard/custom-dashboard-design/custom-dashboard-design.scss b/src/control/dashboard/custom-dashboard-design/custom-dashboard-design.scss
index c00e65907417c8d31ad7d9e802fcee96a12702d1..7a87ecc9518763a37d69389fa15aafc761dab149 100644
--- a/src/control/dashboard/custom-dashboard-design/custom-dashboard-design.scss
+++ b/src/control/dashboard/custom-dashboard-design/custom-dashboard-design.scss
@@ -1,29 +1,28 @@
 $custom-dashboard-design: (
   // 颜色
-  save-btn-color: getCssVar(color, primary),
-  item-bg-color: getCssVar(color, bg, 0),
+  color-save-btn-color: getCssVar(color, primary),
+  color-item-bg-color: getCssVar(color, bg, 0),
 
   // 高度
-  item-height: getCssVar(height-control, large),
+  height-item-height: getCssVar(height-control, large),
 
   // 间距
-  padding: getCssVar(spacing, base),
-  header-padding: 0 0 getCssVar(spacing, tight),
-  item-padding: 0 getCssVar(spacing, base),
-  item-margin: getCssVar(spacing, tight) 0,
-  item-icon-margin-right: getCssVar(spacing, extra-tight),
-  item-checkbox-margin-left: getCssVar(spacing, extra-tight),
+  spacing-padding: getCssVar(spacing, base),
+  spacing-header-padding: 0 0 getCssVar(spacing, tight),
+  spacing-item-padding: 0 getCssVar(spacing, base),
+  spacing-item-margin: getCssVar(spacing, tight) 0,
+  spacing-item-icon-margin-right: getCssVar(spacing, extra-tight),
+  spacing-item-checkbox-margin-left: getCssVar(spacing, extra-tight),
 
   // 圆角
-  item-border-radius: getCssVar(border, radius, medium),
+  radius-item-border-radius: getCssVar(border, radius, medium),
 
   // 字体大小
-  header-font-size: getCssVar(font-size, header-5),
-  close-btn-font-size: getCssVar(font-size, header-3),
-  item-font-size: getCssVar(font-size, header-6),
+  font-header-fontSize: getCssVar(font-size, header-5),
+  font-close-btn-fontSize: getCssVar(font-size, header-3),
+  font-item-fontSize: getCssVar(font-size, header-6),
+  font-header-title-fontWeight: getCssVar(font-weight, bold),
 
-  // 字体粗细
-  header-title-font-weight: getCssVar(font-weight, bold),
 );
 
 @include b(custom-dashboard-design) {
@@ -32,7 +31,7 @@ $custom-dashboard-design: (
   display: flex;
   flex-direction: column;
   height: 100%;
-  padding: getCssVar(custom-dashboard-design, padding);
+  padding: getCssVar(custom-dashboard-design, spacing-padding);
 }
 
 @include b(custom-dashboard-design-header) {
@@ -40,25 +39,25 @@ $custom-dashboard-design: (
   flex: 0 0 auto;
   align-items: center;
   justify-content: space-between;
-  padding: getCssVar(custom-dashboard-design, header-padding);
-  font-size: getCssVar(custom-dashboard-design, header-font-size);
+  padding: getCssVar(custom-dashboard-design, spacing-header-padding);
+  font-size: getCssVar(custom-dashboard-design, font-header-fontSize);
 
   @include e(close-btn) {
     flex-shrink: 0;
-    font-size: getCssVar(custom-dashboard-design, close-btn-font-size);
+    font-size: getCssVar(custom-dashboard-design, close-btn-fontSize);
     cursor: pointer;
   }
 
   @include e(title) {
     overflow: hidden;
-    font-weight: getCssVar(custom-dashboard-design, header-title-font-weight);
+    font-weight: getCssVar(custom-dashboard-design, font-header-title-fontWeight);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   @include e(save-btn) {
     flex-shrink: 0;
-    color: getCssVar(custom-dashboard-design, save-btn-color);
+    color: getCssVar(custom-dashboard-design, color-save-btn-color);
     cursor: pointer;
   }
 }
@@ -71,13 +70,13 @@ $custom-dashboard-design: (
 @include b(custom-dashboard-design-item) {
   display: flex;
   align-items: center;
-  height: getCssVar(custom-dashboard-design, item-height);
-  padding: getCssVar(custom-dashboard-design, item-padding);
-  margin: getCssVar(custom-dashboard-design, item-margin);
-  font-size: getCssVar(custom-dashboard-design, item-font-size);
-  line-height: getCssVar(custom-dashboard-design, item-height);
-  background-color: getCssVar(custom-dashboard-design, item-bg-color);
-  border-radius: getCssVar(custom-dashboard-design, item-border-radius);
+  height: getCssVar(custom-dashboard-design, height-item-height);
+  padding: getCssVar(custom-dashboard-design, spacing-item-padding);
+  margin: getCssVar(custom-dashboard-design, spacing-item-margin);
+  font-size: getCssVar(custom-dashboard-design, font-item-fontSize);
+  line-height: getCssVar(custom-dashboard-design, height-item-height);
+  background-color: getCssVar(custom-dashboard-design, color-item-bg-color);
+  border-radius: getCssVar(custom-dashboard-design, radius-item-border-radius);
 
   @include e(icon) {
     display: flex;
@@ -85,7 +84,7 @@ $custom-dashboard-design: (
     align-items: center;
     width: 1em;
     height: 1em;
-    margin-right: getCssVar(custom-dashboard-design, item-icon-margin-right);
+    margin-right: getCssVar(custom-dashboard-design, spacing-item-icon-margin-right);
   }
 
   @include e(text) {
@@ -97,7 +96,7 @@ $custom-dashboard-design: (
 
   @include e(checkbox) {
     flex: 0 0 auto;
-    margin-left: getCssVar(custom-dashboard-design, item-checkbox-margin-left);
+    margin-left: getCssVar(custom-dashboard-design, spacing-item-checkbox-margin-left);
   }
 }
 
diff --git a/src/control/dashboard/dashboard.scss b/src/control/dashboard/dashboard.scss
index 13eb0cc33332ca130ad03fe05e77e0436b3491f3..ef1b9c3fed2e9949c0c2c5c6b755c3b1795a3312 100644
--- a/src/control/dashboard/dashboard.scss
+++ b/src/control/dashboard/dashboard.scss
@@ -1,20 +1,17 @@
 $control-dashboard: (
-    // 高度
-    portlet-header-height: rem(50px),
-
     // 边距
-    sidebar-topleft-top: calc(#{getCssVar(view-page-caption, line-height)} + 2 * #{getCssVar(spacing, tight)}),
-    sidebar-topleft-left: rem(0px),
-    sidebar-topright-top: calc(#{getCssVar(view-page-caption, line-height)} + 2 * #{getCssVar(spacing, tight)}),
-    sidebar-topright-right: rem(0px),
-    sidebar-bottomleft-bottom: rem(0px),
-    sidebar-bottomleft-left: rem(0px),
-    sidebar-bottomright-bottom: rem(0px),
-    sidebar-bottomright-right: rem(0px),
-    sidebar-middleleft-top: 50%,
-    sidebar-middleleft-left: rem(0px),
-    sidebar-middleright-top: 50%,
-    sidebar-middleright-right: rem(0px),
+    spacing-sidebar-topleft-top: calc(#{getCssVar(view-page-caption, line-height)} + 2 * #{getCssVar(spacing, tight)}),
+    spacing-sidebar-topleft-left: rem(0px),
+    spacing-sidebar-topright-top: calc(#{getCssVar(view-page-caption, line-height)} + 2 * #{getCssVar(spacing, tight)}),
+    spacing-sidebar-topright-right: rem(0px),
+    spacing-sidebar-bottomleft-bottom: rem(0px),
+    spacing-sidebar-bottomleft-left: rem(0px),
+    spacing-sidebar-bottomright-bottom: rem(0px),
+    spacing-sidebar-bottomright-right: rem(0px),
+    spacing-sidebar-middleleft-top: 50%,
+    spacing-sidebar-middleleft-left: rem(0px),
+    spacing-sidebar-middleright-top: 50%,
+    spacing-sidebar-middleright-right: rem(0px),
 );
 
 @include b(control-dashboard) {
@@ -27,24 +24,24 @@ $control-dashboard: (
     @include e(nav-bar) {
         @include m(topleft) {
             .van-index-bar__sidebar {
-                top: getCssVar('control-dashboard', 'sidebar-topleft-top');
+                top: getCssVar('control-dashboard', 'spacing-sidebar-topleft-top');
                 right: auto;
-                left: getCssVar('control-dashboard', 'sidebar-topleft-left');
+                left: getCssVar('control-dashboard', 'spacing-sidebar-topleft-left');
                 transform: none;
             }
         }
 
         @include m(topright) {
             .van-index-bar__sidebar {
-                top: getCssVar('control-dashboard', 'sidebar-topright-top');
-                right: getCssVar('control-dashboard', 'sidebar-topright-right');
+                top: getCssVar('control-dashboard', 'spacing-sidebar-topright-top');
+                right: getCssVar('control-dashboard', 'spacing-sidebar-topright-right');
                 transform: none;
             }
         }
 
         @include m(bottomleft) {
             .van-index-bar__sidebar {
-                inset: auto auto getCssVar('control-dashboard', 'sidebar-bottomleft-bottom') getCssVar('control-dashboard', 'sidebar-bottomleft-left');
+                inset: auto auto getCssVar('control-dashboard', 'spacing-sidebar-bottomleft-bottom') getCssVar('control-dashboard', 'spacing-sidebar-bottomleft-left');
                 transform: none;
             }
         }
@@ -52,24 +49,24 @@ $control-dashboard: (
         @include m(bottomright) {
             .van-index-bar__sidebar {
                 top: auto;
-                right: getCssVar('control-dashboard', 'sidebar-bottomright-right');
-                bottom: getCssVar('control-dashboard', 'sidebar-bottomright-bottom');
+                right: getCssVar('control-dashboard', 'spacing-sidebar-bottomright-right');
+                bottom: getCssVar('control-dashboard', 'spacing-sidebar-bottomright-bottom');
                 transform: none;
             }
         }
 
         @include m(middleleft) {
             .van-index-bar__sidebar {
-                top: getCssVar('control-dashboard', 'sidebar-middleleft-top');
+                top: getCssVar('control-dashboard', 'spacing-sidebar-middleleft-top');
                 right: auto;
-                left: getCssVar('control-dashboard', 'sidebar-middleleft-left');
+                left: getCssVar('control-dashboard', 'spacing-sidebar-middleleft-left');
             }
         }
 
         @include m(middleright) {
             .van-index-bar__sidebar {
-                top: getCssVar('control-dashboard', 'sidebar-middleright-top');
-                right: getCssVar('control-dashboard', 'sidebar-middleright-right');
+                top: getCssVar('control-dashboard', 'spacing-sidebar-middleright-top');
+                right: getCssVar('control-dashboard', 'spacing-sidebar-middleright-right');
             }
         }
 
diff --git a/src/control/dashboard/portlet/portlet-layout/portlet-layout.scss b/src/control/dashboard/portlet/portlet-layout/portlet-layout.scss
index 952c07a61f6967eabd2c7034ea50488e5838a20c..e6bc51d712f863cac90c72b3988f5831ec70da0c 100644
--- a/src/control/dashboard/portlet/portlet-layout/portlet-layout.scss
+++ b/src/control/dashboard/portlet/portlet-layout/portlet-layout.scss
@@ -1,19 +1,30 @@
 $portlet-layout: (
-  header-height: rem(50px),
-  header-padding: getCssVar(spacing, base),
-  header-margin: 0,
-  bg-color: getCssVar(color, bg, 1),
-  header-bg-color: getCssVar(color, bg, 0),
-  header-border-bottom: rem(1px) solid getCssVar(color, border),
-  caption-max-width: rem(300px),
-  caption-font-weight: getCssVar(font-weight, regular),
-  caption-font-size:getCssVar(font-size, header-6),
-  caption-color: getCssVar(color, text, 1),
-  content-bg-color: transparent,
-  content-padding: getCssVar(spacing, tight) getCssVar(spacing, base),
-  content-margin: 0,
-  border-radius: getCssVar(border-radius, medium),
-  header-line-height: var(--van-cell-group-title-line-height),
+  // 颜色
+  color-bg-color: getCssVar(color, bg, 1),
+  color-header-bg-color: getCssVar(color, bg, 0),
+  color-caption-color: getCssVar(color, text, 1),
+  color-content-bg-color: transparent,
+
+  // 宽高
+  height-header-height: rem(50px),
+  width-caption-max-width: rem(300px),
+  
+  // 边距
+  spacing-header-padding: getCssVar(spacing, base),
+  spacing-header-margin: 0,
+  spacing-content-padding: getCssVar(spacing, tight) getCssVar(spacing, base),
+  spacing-content-margin: 0,
+
+  // 字体大小
+  font-caption-fontWeight: getCssVar(font-weight, regular),
+  font-caption-fontSize: getCssVar(font-size, header-6),
+  font-header-lineHeight: var(--van-cell-group-title-line-height),
+
+  // 圆角
+  radius-border-radius: getCssVar(border-radius, medium),
+
+  // 其他
+  header-border-bottom: rem(1px) solid getCssVar(color, border)
 );
 
 @include b(portlet-layout) {
@@ -21,17 +32,17 @@ $portlet-layout: (
 
   width: 100%;
   height: 100%;
-  background-color: getCssVar(portlet-layout, bg-color);
-  border-radius: getCssVar(portlet-layout, border-radius);
+  background-color: getCssVar(portlet-layout, color-bg-color);
+  border-radius: getCssVar(portlet-layout, radius-border-radius);
 
   // 标题样式
   @include e(caption) {
-    max-width: getCssVar(portlet-layout, caption-max-width);
+    max-width: getCssVar(portlet-layout, width-caption-max-width);
 
     @include e(caption-text) {
       overflow: hidden;
-      font-size: getCssVar(portlet-layout, caption-font-size);
-      font-weight: getCssVar(portlet-layout, caption-font-weight);
+      font-size: getCssVar(portlet-layout, font-caption-fontSize);
+      font-weight: getCssVar(portlet-layout, font-caption-fontWeight);
       color: getCssVar(portlet-layout, caption-color);
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -42,11 +53,11 @@ $portlet-layout: (
     display: flex;
     align-items: center;
     height: 100%;
-  } 
+  }
 
   // 无头部时的样式
   @include when(no-header) {
-    >.#{bem(portlet-layout-content)} {
+    > .#{bem(portlet-layout-content)} {
       height: 100%;
       padding: 0;
     }
@@ -56,7 +67,7 @@ $portlet-layout: (
     padding: 0;
     font-size: inherit;
     font-weight: inherit;
-    line-height:inherit;
+    line-height: inherit;
     color: inherit;
     background: inherit;
   }
@@ -69,14 +80,14 @@ $portlet-layout: (
   @include when(custom) {
     position: relative;
 
-    @include e(left){
+    @include e(left) {
       z-index: 1;
     }
-  
-    @include e(right){
+
+    @include e(right) {
       z-index: 1;
     }
-  
+
     @include e(bg) {
       position: absolute;
       top: 0;
@@ -86,18 +97,17 @@ $portlet-layout: (
     }
   }
 
-  height: getCssVar(portlet-layout, header-height);
-  padding: getCssVar(portlet-layout, header-padding);
-  margin: getCssVar(portlet-layout, header-margin);
-  line-height: getCssVar(portlet-layout, header-line-height);
-  background-color: getCssVar(portlet-layout, header-bg-color);
-
+  height: getCssVar(portlet-layout, height-header-height);
+  padding: getCssVar(portlet-layout, spacing-header-padding);
+  margin: getCssVar(portlet-layout, spacing-header-margin);
+  line-height: getCssVar(portlet-layout, font-header-lineHeight);
+  background-color: getCssVar(portlet-layout, color-header-bg-color);
 }
 
 // 内容区样式
 @include b(portlet-layout-content) {
-  height: calc(100% - getCssVar(portlet-layout, header-height));
-  padding: getCssVar(portlet-layout, content-padding);
-  margin: getCssVar(portlet-layout, content-margin);
-  background-color: getCssVar(portlet-layout, content-bg-color);
-}
\ No newline at end of file
+  height: calc(100% - getCssVar(portlet-layout, height-header-height));
+  padding: getCssVar(portlet-layout, spacing-content-padding);
+  margin: getCssVar(portlet-layout, spacing-content-margin);
+  background-color: getCssVar(portlet-layout, color-content-bg-color);
+}