diff --git a/src/common/action-toolbar/action-toolbar.scss b/src/common/action-toolbar/action-toolbar.scss
index cce064c917c964e641219503e530b5680542f5eb..b643cc4709e3669539b7d315c2f32bead5f327d8 100644
--- a/src/common/action-toolbar/action-toolbar.scss
+++ b/src/common/action-toolbar/action-toolbar.scss
@@ -1,7 +1,17 @@
+/* action-toolbar 界面行为组工具栏 start */
+$action-toolbar: (
+  'item-margin': 0 0 0 4px,
+  'separator-height': 20px,
+  'separator-width': 2px,
+  'separator-color': getCssVar('border-color', 'darker'),
+);
+
+/* action-toolbar 界面行为组工具栏 end */
+
 @include b('action-toolbar') {
   @include set-component-css-var('action-toolbar', $action-toolbar);
   @include e('item') {
-    &+&{
+    & + & {
       margin: getCssVar('action-toolbar', 'item-margin');
     }
   }
@@ -20,11 +30,11 @@
     }
   }
 
-  @include m('dropdown'){
-    @include e(caption){
+  @include m('dropdown') {
+    @include e(caption) {
       cursor: pointer;
     }
-    @include e(caption-icon){
+    @include e(caption-icon) {
       vertical-align: bottom;
     }
   }
diff --git a/src/control/app-menu/app-menu.scss b/src/control/app-menu/app-menu.scss
index e81a241f408dadd0ab88db2d2a562d30add36178..443bcb1f82244fbeb4c19e78ceff83053de08b90 100644
--- a/src/control/app-menu/app-menu.scss
+++ b/src/control/app-menu/app-menu.scss
@@ -1,163 +1,192 @@
-// @mixin menu-item-vertical-style {
-//   @include flex(row, flex-start, center);
-
-//   width: 100%;
-//   height: getCssVar('control-menu-item', 'height');
-//   padding: calc(getCssVar('control-menu-item', 'padding') * 0.875)
-//     calc(getCssVar('control-menu-item', 'padding') * 1.5);
-//   font-size: getCssVar('control-menu-item', 'font-size');
-//   color: getCssVar('control-menu-item', 'color');
-//   white-space: nowrap;
-
-//   &:hover {
-//     color: getCssVar('control-menu-item', 'hover-color');
-//     background-color: getCssVar('control-menu-item', 'hover-bg-color');
-//   }
-
-//   &.is-active {
-//     color: getCssVar('control-menu-item', 'selected-color');
-//     background-color: getCssVar('control-menu-item', 'selected-bg-color');
-//   }
-// }
-
-// @mixin menu-item-horizontal-style {
-//   color: getCssVar('control-menu-item', 'horizontal-color');
-//   white-space: nowrap;
-//   border: none;
-
-//   &:hover {
-//     color: getCssVar('control-menu-item', 'horizontal-hover-color');
-//     background-color: getCssVar(
-//       'control-menu-item',
-//       'horizontal-hover-bg-color'
-//     );
-//   }
-
-//   &.is-active {
-//     // 压element-plus 加important
-//     color: getCssVar(
-//       'control-menu-item',
-//       'horizontal-selected-color'
-//     ) !important;
-//     background-color: getCssVar(
-//       'control-menu-item',
-//       'horizontal-selected-bg-color'
-//     );
-//   }
-// }
-
-// @mixin menu-collapse-item-style {
-//   @include flex-center;
-
-//   padding: calc(getCssVar('control-menu', 'collapse-item-padding') * 0.875)
-//     calc(getCssVar('control-menu', 'collapse-item-padding') * 1.5);
-
-//   &:hover {
-//     color: getCssVar('control-menu', 'collapse-item-hover-color');
-//   }
-// }
-
-// @mixin menu-item-selected-style {
-//   color: getCssVar('control-menu', 'item-selected-color');
-//   background-color: getCssVar('control-menu', 'item-selected-bg-color');
-// }
-
-// @include b(control-menu) {
-//   position: static;
-//   @include set-component-css-var('control-menu', $control-menu);
-//   @include set-component-css-var('control-menu-item', $control-menu-item);
-
-//   // 垂直
-//   .el-menu--vertical {
-//     height: calc(100vh - getCssVar('layout', 'header-height'));
-
-//     // 菜单项样式
-//     .el-menu-item,
-//     .el-sub-menu__title {
-//       @include menu-item-vertical-style;
-//     }
-//   }
-
-//   // 水平
-//   .el-menu--horizontal {
-//     max-width: getCssVar('control-menu', 'horizontal-width');
-//     height: 100%;
-//     background-color: getCssVar('control-menu', 'horizontal-bg-color');
-//     border-bottom: none;
-
-//     // 菜单项样式
-//     .el-menu-item,
-//     .el-sub-menu__title {
-//       @include menu-item-horizontal-style;
-//     }
-
-//     > .el-sub-menu.is-active .el-sub-menu__title {
-//       color: getCssVar('control-menu-item', 'horizontal-selected-color');
-//       background-color: getCssVar(
-//         'control-menu-item',
-//         'horizontal-selected-bg-color'
-//       );
-//     }
-
-//     &::-webkit-scrollbar-thumb {
-//       background: #fff;
-//     }
-//   }
-
-//   overflow-y: auto;
-
-//   // 图标样式
-//   @include e(icon) {
-//     margin: getCssVar('control-menu', 'icon-margin');
-//   }
-
-//   // 收缩
-//   @include when(collapse) {
-//     @include e(item) {
-//       @include menu-collapse-item-style;
-//     }
-//     @include b(control-menu-tooltip) {
-//       width: 100%;
-//     }
-//     @include b(control-menu-submenu) {
-//       display: block;
-
-//       > .el-sub-menu__title {
-//         @include flex-center;
-//         @include menu-collapse-item-style;
-
-//         white-space: nowrap;
-//         cursor: pointer;
-//       }
-//       @include e(item) {
-//         padding: 0;
-//       }
-//     }
-//   }
-
-//   .el-menu {
-//     border-right: 0;
-//   }
-
-//   .el-sub-menu {
-//     .el-sub-menu__icon-arrow {
-//       right: 14px;
-//       width: 12px;
-//     }
-
-//     .el-menu-item {
-//       padding: calc(getCssVar('control-menu', 'item-padding') * 0.875)
-//         calc(getCssVar('control-menu', 'item-padding') * 2.5);
-//     }
-//   }
-// }
-
-// // 收缩时菜单项样式
-// .el-menu--popup-container {
-//   @include set-component-css-var('control-menu', $control-menu);
-
-//   .el-menu-item,
-//   .el-sub-menu__title {
-//     @include menu-item-vertical-style;
-//   }
-// }
+/* control-appmenu 菜单 start */
+$control-appmenu: (
+  'collapse-item-hover-color': getCssVar('color', 'primary'),
+  'collapse-item-padding': getCssVar('padding'),
+  'icon-width': 20px,
+  'icon-height': 20px,
+  'icon-margin': 0 5px 0 0,
+  'horizontal-width': 850px,
+  'horizontal-bg-color': #0f1118,
+);
+
+$control-appmenu-item: (
+  'selected-color': getCssVar('color', 'primary'),
+  'selected-bg-color': getCssVar('color', 'primary', 'light-9'),
+  'hover-color': getCssVar('color', 'primary'),
+  'hover-bg-color': getCssVar('color', 'white'),
+  'padding': getCssVar('padding'),
+  'font-size': getCssVar('font-size', 'base'),
+  'height': 52px,
+  'color': getCssVar('text-color'),
+  'horizontal-selected-color': getCssVar('color', 'white'),
+  'horizontal-selected-bg-color': #545c64,
+  'horizontal-hover-color': getCssVar('color', 'white'),
+  'horizontal-hover-bg-color': #545c64,
+  'horizontal-color': getCssVar('color', 'white'),
+);
+
+/* control-appmenu 菜单 end */
+
+@mixin menu-item-vertical-style {
+  @include flex(row, flex-start, center);
+
+  width: 100%;
+  height: getCssVar('control-appmenu-item', 'height');
+  padding: calc(getCssVar('control-appmenu-item', 'padding') * 0.875)
+    calc(getCssVar('control-appmenu-item', 'padding') * 1.5);
+  font-size: getCssVar('control-appmenu-item', 'font-size');
+  color: getCssVar('control-appmenu-item', 'color');
+  white-space: nowrap;
+
+  &:hover {
+    color: getCssVar('control-appmenu-item', 'hover-color');
+    background-color: getCssVar('control-appmenu-item', 'hover-bg-color');
+  }
+
+  &.is-active {
+    color: getCssVar('control-appmenu-item', 'selected-color');
+    background-color: getCssVar('control-appmenu-item', 'selected-bg-color');
+  }
+}
+
+@mixin menu-item-horizontal-style {
+  color: getCssVar('control-appmenu-item', 'horizontal-color');
+  white-space: nowrap;
+  border: none;
+
+  &:hover {
+    color: getCssVar('control-appmenu-item', 'horizontal-hover-color');
+    background-color: getCssVar(
+      'control-appmenu-item',
+      'horizontal-hover-bg-color'
+    );
+  }
+
+  &.is-active {
+    // 压element-plus 加important
+    color: getCssVar(
+      'control-appmenu-item',
+      'horizontal-selected-color'
+    ) !important;
+    background-color: getCssVar(
+      'control-appmenu-item',
+      'horizontal-selected-bg-color'
+    );
+  }
+}
+
+@mixin menu-collapse-item-style {
+  @include flex-center;
+
+  padding: calc(getCssVar('control-appmenu', 'collapse-item-padding') * 0.875)
+    calc(getCssVar('control-appmenu', 'collapse-item-padding') * 1.5);
+
+  &:hover {
+    color: getCssVar('control-appmenu', 'collapse-item-hover-color');
+  }
+}
+
+@mixin menu-item-selected-style {
+  color: getCssVar('control-appmenu', 'item-selected-color');
+  background-color: getCssVar('control-appmenu', 'item-selected-bg-color');
+}
+
+@include b(control-appmenu) {
+  position: static;
+  @include set-component-css-var('control-appmenu', $control-appmenu);
+  @include set-component-css-var('control-appmenu-item', $control-appmenu-item);
+
+  // 垂直
+  .el-menu--vertical {
+    height: calc(100vh - getCssVar('layout', 'header-height'));
+
+    // 菜单项样式
+    .el-menu-item,
+    .el-sub-menu__title {
+      @include menu-item-vertical-style;
+    }
+  }
+
+  // 水平
+  .el-menu--horizontal {
+    max-width: getCssVar('control-appmenu', 'horizontal-width');
+    height: 100%;
+    background-color: getCssVar('control-appmenu', 'horizontal-bg-color');
+    border-bottom: none;
+
+    // 菜单项样式
+    .el-menu-item,
+    .el-sub-menu__title {
+      @include menu-item-horizontal-style;
+    }
+
+    > .el-sub-menu.is-active .el-sub-menu__title {
+      color: getCssVar('control-appmenu-item', 'horizontal-selected-color');
+      background-color: getCssVar(
+        'control-appmenu-item',
+        'horizontal-selected-bg-color'
+      );
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #fff;
+    }
+  }
+
+  overflow-y: auto;
+
+  // 图标样式
+  @include e(icon) {
+    margin: getCssVar('control-appmenu', 'icon-margin');
+  }
+
+  // 收缩
+  @include when(collapse) {
+    @include e(item) {
+      @include menu-collapse-item-style;
+    }
+    @include b(control-appmenu-tooltip) {
+      width: 100%;
+    }
+    @include b(control-appmenu-submenu) {
+      display: block;
+
+      > .el-sub-menu__title {
+        @include flex-center;
+        @include menu-collapse-item-style;
+
+        white-space: nowrap;
+        cursor: pointer;
+      }
+      @include e(item) {
+        padding: 0;
+      }
+    }
+  }
+
+  .el-menu {
+    border-right: 0;
+  }
+
+  .el-sub-menu {
+    .el-sub-menu__icon-arrow {
+      right: 14px;
+      width: 12px;
+    }
+
+    .el-menu-item {
+      padding: calc(getCssVar('control-appmenu', 'item-padding') * 0.875)
+        calc(getCssVar('control-appmenu', 'item-padding') * 2.5);
+    }
+  }
+}
+
+// 收缩时菜单项样式
+.el-menu--popup-container {
+  @include set-component-css-var('control-appmenu', $control-appmenu);
+
+  .el-menu-item,
+  .el-sub-menu__title {
+    @include menu-item-vertical-style;
+  }
+}
diff --git a/src/control/form/form-detail/form-group-panel/form-group-panel.scss b/src/control/form/form-detail/form-group-panel/form-group-panel.scss
index 9bcb8debdd7eb2aa8da41bba42079f9dbdbc6224..f08dbcea01962814bac67d8c981aadabba225b6f 100644
--- a/src/control/form/form-detail/form-group-panel/form-group-panel.scss
+++ b/src/control/form/form-detail/form-group-panel/form-group-panel.scss
@@ -1,3 +1,24 @@
+$form-group: (
+  'bg-color': getCssVar('bg-color', 'overlay'),
+  'footer-padding': calc(getCssVar('padding') / 2),
+  'show-more-color': getCssVar('color-primary'),
+);
+
+$form-group-header: (
+  'bg-color': transparent,
+  'padding': calc(getCssVar('padding') / 2),
+);
+
+$form-group-caption: (
+  'text-color': getCssVar('text-color'),
+  'font-size': getCssVar('font-size', 'medium'),
+);
+
+$form-group-content: (
+  'bg-color': transparent,
+  'padding': getCssVar('padding'),
+);
+
 @include b(form-group) {
   @include set-component-css-var('form-group', $form-group);
   @include set-component-css-var('form-group-header', $form-group-header);
@@ -21,7 +42,6 @@
   @include e(toolbar) {
     text-align: right;
   }
-  
 }
 
 // 折叠相关样式
@@ -65,8 +85,7 @@
 
   @include e(show-more-button) {
     display: inline-block;
-    color: getCssVar('form-group','show-more-color');
+    color: getCssVar('form-group', 'show-more-color');
     cursor: pointer;
   }
-
 }
diff --git a/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss b/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss
index fbd76afa8f72ff18dfb3e768f1ee4dd824ce5aee..87feb1d88b3da561a85c3e8956f48e97e89e849f 100644
--- a/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss
+++ b/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss
@@ -1,3 +1,8 @@
+$form-item-container: (
+  'label-width': 130px,
+  'line-height': 32px,
+);
+
 @include b(form-item-container) {
   @include set-component-css-var('form-item-container', $form-item-container);
 }
diff --git a/src/control/form/form-detail/form-item/form-item.scss b/src/control/form/form-detail/form-item/form-item.scss
index 98fd98b78a8d686408b14479a511a19d40cee395..74f71e508a60b5e4e8e397878e4722f97fa12049 100644
--- a/src/control/form/form-detail/form-item/form-item.scss
+++ b/src/control/form/form-detail/form-item/form-item.scss
@@ -1,4 +1,23 @@
+$form-item: (
+  'text-color': getCssVar('text-color'),
+  'hover-color': getCssVar('color', 'primary'),
+  'border-color': getCssVar('border-color'),
+  'font-size': getCssVar('font-size', 'base'),
+  'error-font-size': getCssVar('font-size', 'extra-small'),
+  'error-color': getCssVar('color', 'error'),
+  'placeholder-color': getCssVar('text-color', 'placeholder'),
+  'disable-color': getCssVar('disabled', 'text-color'),
+  'disable-bg-color': getCssVar('disabled', 'bg-color'),
+  'disable-border-color': getCssVar('disabled', 'border-color'),
+  'line-height': 32px,
+);
+
+$form-item-caption: (
+  'color': getCssVar('form-item', 'text-color'),
+  'font-size': getCssVar('form-item', 'font-size'),
+);
+
 @include b(form-item) {
   @include set-component-css-var('form-item', $form-item);
   @include set-component-css-var('form-item-caption', $form-item-caption);
-}
\ No newline at end of file
+}
diff --git a/src/control/form/form-detail/form-page/form-page.scss b/src/control/form/form-detail/form-page/form-page.scss
index 11f1119cf0e34a8b30d8999feb68f558880902e4..dbfb25fcf59b2cca994722fb8b36ef5b2098063e 100644
--- a/src/control/form/form-detail/form-page/form-page.scss
+++ b/src/control/form/form-detail/form-page/form-page.scss
@@ -1,3 +1,13 @@
+$form-page: (
+  'text-color': getCssVar('text-color'),
+  'font-size': getCssVar('font-size', 'medium'),
+  'bg-color': transparent,
+  'hover-color': getCssVar('color', 'primary'),
+  'hover-bg-color': transparent,
+  'active-color': getCssVar('color', 'primary'),
+  'active-bg-color': transparent,
+);
+
 @include b(form-page) {
   @include set-component-css-var('form-page', $form-page);
 
diff --git a/src/control/form/form/form.scss b/src/control/form/form/form.scss
index cff1e8483f4bb1c7cb320a3c09add7fe9b15f5c4..d5c840c52cc72330748cbb44be05abbd9fbc1d27 100644
--- a/src/control/form/form/form.scss
+++ b/src/control/form/form/form.scss
@@ -1,3 +1,9 @@
+$control-form: (
+  'text-color': getCssVar('text-color', 'primary'),
+  'font-size': getCssVar('font-size', 'base'),
+  'bg-color': transparent,
+);
+
 @include b(control-form) {
   @include set-component-css-var('control-form', $control-form);
 }
diff --git a/src/control/form/search-form/search-form.scss b/src/control/form/search-form/search-form.scss
index 8eb0469f88869633056a705958e6b772198ea77d..2f975dbc054dcfcf9a75bc07916674e6d37beb5b 100644
--- a/src/control/form/search-form/search-form.scss
+++ b/src/control/form/search-form/search-form.scss
@@ -1,3 +1,18 @@
+/* 搜索表单 start */
+$control-search-form: (
+  'bg-color': #fff,
+  'margin': 16px 0 0 24px,
+);
+
+$control-search-form-buttons: (
+  'padding': 0 16px 16px,
+  'btn-margin': 0 0 0 10px,
+  'search-btn-bg-color': getCssVar('color', 'primary'),
+  'search-btn-color': #fff,
+);
+
+/* 搜索表单 end */
+
 @include b(control-search-form-buttons) {
   @include set-component-css-var(
     'control-search-form-buttons',
diff --git a/src/control/grid/grid-column/grid-field-column/grid-field-column.scss b/src/control/grid/grid-column/grid-field-column/grid-field-column.scss
index 0c9404cdc6ee0237740d596d96db25deb21d5fd0..d5c61c8be0ab431550e187651caae479a2bb2459 100644
--- a/src/control/grid/grid-column/grid-field-column/grid-field-column.scss
+++ b/src/control/grid/grid-column/grid-field-column/grid-field-column.scss
@@ -1,3 +1,8 @@
+$grid-field-column: (
+  'cell-padding': getCssVar('grid', 'cell-padding'),
+  'font-color': getCssVar('color', 'primary'),
+);
+
 @include b(grid-field-column) {
   @include set-component-css-var('grid-field-column', $grid-field-column);
 
diff --git a/src/control/grid/grid-column/grid-field-edit-column/grid-edit-item/grid-edit-item.scss b/src/control/grid/grid-column/grid-field-edit-column/grid-edit-item/grid-edit-item.scss
index 97091de0d6a176445627075596db3e1ea123f661..9106fd4b06fa7fc14df08b229a52ef147ec1e457 100644
--- a/src/control/grid/grid-column/grid-field-edit-column/grid-edit-item/grid-edit-item.scss
+++ b/src/control/grid/grid-column/grid-field-edit-column/grid-edit-item/grid-edit-item.scss
@@ -1,3 +1,8 @@
+$grid-edit-item: (
+  'cell-padding': getCssVar('grid', 'cell-padding'),
+  'cell-hover-bg-color': getCssVar('fill-color', 'dark'),
+);
+
 @include b(grid-edit-item) {
   @include set-component-css-var('grid-edit-item', $grid-edit-item);
 
@@ -33,11 +38,7 @@
   @include m(show-mask) {
     &:hover {
       cursor: pointer;
-      background-color: getCssVar(
-        'grid-edit-item',
-        'cell-hover-bg-color'
-      );
+      background-color: getCssVar('grid-edit-item', 'cell-hover-bg-color');
     }
   }
-
 }
diff --git a/src/control/grid/grid-column/grid-ua-column/grid-ua-column.scss b/src/control/grid/grid-column/grid-ua-column/grid-ua-column.scss
index f366d68933399b156a97f90a3c3a6ddd34f377e9..7f527f2fce89dd3b12a4b6f2ce5f27b7b772b5b4 100644
--- a/src/control/grid/grid-column/grid-ua-column/grid-ua-column.scss
+++ b/src/control/grid/grid-column/grid-ua-column/grid-ua-column.scss
@@ -1,3 +1,10 @@
+$grid-ua-column: (
+  'cell-padding': getCssVar('grid', 'cell-padding'),
+  'btn-bg-color': transparent,
+  'btn-hover-color': getCssVar('color', 'primary', 'light-3'),
+  'btn-color': getCssVar('color', 'primary'),
+);
+
 @include b(grid-ua-column) {
   @include set-component-css-var('grid-ua-column', $grid-ua-column);
 
@@ -8,7 +15,7 @@
   height: 100%;
   padding: getCssVar('grid-ua-column', 'cell-padding');
 
-  .el-button  {
+  .el-button {
     color: getCssVar('grid-ua-column', 'btn-color');
     background-color: getCssVar('grid-ua-column', 'btn-bg-color');
     box-shadow: none;
diff --git a/src/control/grid/grid/grid.scss b/src/control/grid/grid/grid.scss
index 94f2107a5a9c895526963f22863fb4ed73dee7d8..3f56beecbd20d4db5976cc254ff101a9686e5cbf 100644
--- a/src/control/grid/grid/grid.scss
+++ b/src/control/grid/grid/grid.scss
@@ -1,3 +1,29 @@
+$control-grid: (
+  'text-color': getCssVar('text-color'),
+  'bg-color': getCssVar('color-white'),
+  'padding': 0,
+  'cell-padding': calc(getCssVar('padding') / 2),
+);
+
+$control-grid-header: (
+  'text-color': getCssVar('text-color'),
+  'cell-padding': 11px getCssVar('control-grid', 'cell-padding'),
+  'height': auto,
+);
+
+$control-grid-content: (
+  'text-color': getCssVar('control-grid', 'text-color'),
+  'item-highlight-bg-color': getCssVar('color', 'primary', 'light-7'),
+  'item-hover-bg-color': getCssVar('color', 'primary', 'light-7'),
+  'row-height': 48px,
+);
+
+$control-grid-page: (
+  'text-color': getCssVar('control-grid', 'text-color'),
+  'height': 50px,
+  'padding': calc(getCssVar('padding') / 2) 0,
+);
+
 @include b(control-grid) {
   @include set-component-css-var('control-grid', $control-grid);
   @include set-component-css-var('control-grid-header', $control-grid-header);
@@ -50,6 +76,7 @@
       .el-table__row {
         height: getCssVar('control-grid-content', 'row-height');
         cursor: pointer;
+
         > td {
           height: 0;
         }
diff --git a/src/control/search-bar/search-bar.scss b/src/control/search-bar/search-bar.scss
index a8d5e0c80e156cc2b8b25e588474fe06ec32e10d..4858d4a6522db8519210052c4633181b1c675340 100644
--- a/src/control/search-bar/search-bar.scss
+++ b/src/control/search-bar/search-bar.scss
@@ -1,3 +1,10 @@
+/* 搜索栏 start */
+$control-searchbar: (
+  'quick-search-width': 150px,
+);
+
+/* 搜索栏 end */
+
 @include b(control-searchbar) {
   @include set-component-css-var('control-searchbar', $control-searchbar);
   @include b(control-searchbar-quick-search) {
diff --git a/src/control/toolbar/toolbar.scss b/src/control/toolbar/toolbar.scss
index 0dcb6b813db41a8a18193bdd7782aa6e091c0b0d..10c4adf74bf37c7ff8d3bd0cc289c2f9497865c1 100644
--- a/src/control/toolbar/toolbar.scss
+++ b/src/control/toolbar/toolbar.scss
@@ -1,3 +1,19 @@
+/* control-toolbar 工具栏部件 start */
+$control-toolbar: (
+  'item-margin': 0 4px,
+  'icon-margin': 0 5px 0 0,
+  'icon-max-width': 16px,
+  'icon-max-height': 16px,
+);
+
+$control-toolbar-embed: (
+  'item-height': 21px,
+  'item-line-height': 21px,
+  'bg-color': transparent,
+);
+
+/* control-toolbar 视图工具栏 end */
+
 @include b('control-toolbar') {
   @include set-component-css-var('control-toolbar', $control-toolbar);
 
@@ -22,9 +38,8 @@
         max-width: getCssVar('control-toolbar', 'icon-max-width');
         max-height: getCssVar('control-toolbar', 'icon-max-height');
         margin: getCssVar('control-toolbar', 'icon-margin');
-      }      
+      }
     }
-
   }
 
   @include e('item-separator') {
@@ -32,7 +47,10 @@
   }
 
   @include m(embed) {
-    @include set-component-css-var('control-toolbar-embed', $control-toolbar-embed);
+    @include set-component-css-var(
+      'control-toolbar-embed',
+      $control-toolbar-embed
+    );
     @include e('item') {
       .el-button {
         height: getCssVar('control-toolbar-embed', 'item-height');
diff --git a/src/control/wizard-panel/wizard-panel.scss b/src/control/wizard-panel/wizard-panel.scss
index 4725e4f5876b6bfe71f85ce3de2f494a7ef9f66b..f854a1bccab54cf88c754d3a05087b1ebf41a15f 100644
--- a/src/control/wizard-panel/wizard-panel.scss
+++ b/src/control/wizard-panel/wizard-panel.scss
@@ -1,4 +1,10 @@
-// 通用样式
+/* 向导 start */
+
+$control-wizard-panel: (
+  'footer-height': 40px,
+);
+
+/* 向导 end */
 @include b(control-wizardpanel) {
   @include set-component-css-var('control-wizard-panel', $control-wizard-panel);
 
diff --git a/src/editor/check-box-list/ibiz-checkbox-list/ibiz-checkbox-list.scss b/src/editor/check-box-list/ibiz-checkbox-list/ibiz-checkbox-list.scss
index 16c97705ce2faa7e7da015c36bed90b5b9f1f9eb..ea3e2394804b25dca065076d15f6083e59b8134e 100644
--- a/src/editor/check-box-list/ibiz-checkbox-list/ibiz-checkbox-list.scss
+++ b/src/editor/check-box-list/ibiz-checkbox-list/ibiz-checkbox-list.scss
@@ -1,3 +1,8 @@
+/* checkbox 复选框列表 */
+$checkbox-list: (
+  'font-size': getCssVar('font-size', 'base'),
+  'text-color': getCssVar('text-color'),
+);
 @include b('checkbox-list') {
   @include set-component-css-var('checkbox-list', $checkbox-list);
 
diff --git a/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss b/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss
index 8413e606926f04b934ef023696e9890bb8172f26..cc80f5fd02947696204aa343e5f9bbaeec8f71ac 100644
--- a/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss
+++ b/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss
@@ -1,3 +1,16 @@
+/* mpicker 地址栏 */
+$mpicker: (
+  'font-size': getCssVar('font-size', 'base'),
+  'text-color': getCssVar('text-color'),
+  'border-color': getCssVar('border-color'),
+  'placeholder-color': getCssVar('text-color', 'placeholder'),
+  'height': 32px,
+  'hover-color': getCssVar('color', 'primary'),
+  'disabled-text-color': getCssVar('disabled', 'text-color'),
+  'disabled-bg-color': getCssVar('disabled', 'bg-color'),
+  'disabled-border-color': getCssVar('disabled', 'border-color'),
+);
+
 @include b('mpicker') {
   @include set-component-css-var('mpicker', $mpicker);
   @include flex;
@@ -9,8 +22,8 @@
   .el-input.is-disabled .el-input__inner {
     color: getCssVar('mpicker', 'disabled-text-color');
     background-color: getCssVar('mpicker', 'disabled-bg-color');
-    border-color: getCssVar('mpicker', 'disabled-border-color');    
-  } 
+    border-color: getCssVar('mpicker', 'disabled-border-color');
+  }
 
   .el-select {
     width: 100%;
@@ -35,7 +48,7 @@
   }
 
   @include m(disabled) {
-    ion-icon{
+    ion-icon {
       pointer-events: none;
     }
   }
diff --git a/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.scss b/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.scss
index c9340bb06aaffbdcf1d1c63fe48842a9b33164f4..d617ce97d4ff5fec588336c73a41a8fa03499dac 100644
--- a/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.scss
+++ b/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.scss
@@ -1,3 +1,14 @@
+/* picker-dropdown 数据选择下拉列表 */
+$picker-dropdown: (
+  'font-size': getCssVar('font-size', 'base'),
+  'text-color': getCssVar('text-color'),
+  'border-color': getCssVar('border-color'),
+  'placeholder-color': getCssVar('text-color', 'placeholder'),
+  'disabled-text-color': getCssVar('disabled', 'text-color'),
+  'disabled-bg-color': getCssVar('disabled', 'bg-color'),
+  'disabled-border-color': getCssVar('disabled', 'border-color'),
+);
+
 @include b('picker-dropdown') {
   @include set-component-css-var('picker-dropdown', $picker-dropdown);
 
@@ -18,8 +29,8 @@
   .el-input.is-disabled .el-input__inner {
     color: getCssVar('picker-dropdown', 'disabled-text-color');
     background-color: getCssVar('picker-dropdown', 'disabled-bg-color');
-    border-color: getCssVar('picker-dropdown', 'disabled-border-color');    
-  }     
+    border-color: getCssVar('picker-dropdown', 'disabled-border-color');
+  }
 
   @include m(readonly) {
     color: getCssVar('text-color', 'readonly');
diff --git a/src/editor/data-picker/ibiz-picker/ibiz-picker.scss b/src/editor/data-picker/ibiz-picker/ibiz-picker.scss
index 738da3c9e22cb806094a102e07d86cfb61654165..f6c186248f592a6faa7b8bcd7ecea181ab2c6224 100644
--- a/src/editor/data-picker/ibiz-picker/ibiz-picker.scss
+++ b/src/editor/data-picker/ibiz-picker/ibiz-picker.scss
@@ -1,3 +1,16 @@
+/* picker 数据选择 */
+$picker: (
+  'font-size': getCssVar('font-size', 'base'),
+  'text-color': getCssVar('text-color'),
+  'border-color': getCssVar('border-color'),
+  'placeholder-color': getCssVar('text-color', 'placeholder'),
+  'height': 32px,
+  'hover-bg-color': #f3f3f3,
+  'disabled-text-color': getCssVar('disabled', 'text-color'),
+  'disabled-bg-color': getCssVar('disabled', 'bg-color'),
+  'disabled-border-color': getCssVar('disabled', 'border-color'),
+);
+
 @include b('picker') {
   @include set-component-css-var('picker', $picker);
 
@@ -14,8 +27,8 @@
   .el-input.is-disabled .el-input__inner {
     color: getCssVar('picker', 'disabled-text-color');
     background-color: getCssVar('picker', 'disabled-bg-color');
-    border-color: getCssVar('picker', 'disabled-border-color');    
-  }   
+    border-color: getCssVar('picker', 'disabled-border-color');
+  }
 
   ion-icon {
     cursor: pointer;
@@ -63,7 +76,7 @@
   }
 
   @include m(disabled) {
-    ion-icon{
+    ion-icon {
       pointer-events: none;
     }
   }
diff --git a/src/editor/date-picker/ibiz-date-picker/ibiz-date-picker.scss b/src/editor/date-picker/ibiz-date-picker/ibiz-date-picker.scss
index 97b728a78131d7b344d56f4eb4e4f23a8e587b06..453954bc9e01f2be0a799c11bbd237bf25842e26 100644
--- a/src/editor/date-picker/ibiz-date-picker/ibiz-date-picker.scss
+++ b/src/editor/date-picker/ibiz-date-picker/ibiz-date-picker.scss
@@ -1,3 +1,13 @@
+/* date-picker 日期选择器 */
+$date-picker: (
+  'font-size': getCssVar('font-size', 'base'),
+  'text-color': getCssVar('text-color'),
+  'border-color': getCssVar('border-color'),
+  'placeholder-color': getCssVar('text-color', 'placeholder'),
+  'disabled-text-color': getCssVar('disabled', 'text-color'),
+  'disabled-bg-color': getCssVar('disabled', 'bg-color'),
+  'disabled-border-color': getCssVar('disabled', 'border-color'),
+);
 @include b('date-picker') {
   @include set-component-css-var('date-picker', $date-picker);
 
diff --git a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss
index 1c8870eb903771935a7c6cac8ee59f0a898f03de..16ba56e9be6a1c5f2c5dc4832481b1f714dca1d7 100644
--- a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss
+++ b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss
@@ -1,3 +1,15 @@
+/* dropdown 下拉列表 */
+$dropdown: (
+  'font-size': getCssVar('font-size', 'base'),
+  'text-color': getCssVar('text-color'),
+  'border-color': getCssVar('border-color'),
+  'placeholder-color': getCssVar('text-color', 'placeholder'),
+  'hover-color': getCssVar('color', 'primary'),
+  'disabled-text-color': getCssVar('disabled', 'text-color'),
+  'disabled-bg-color': getCssVar('disabled', 'bg-color'),
+  'disabled-border-color': getCssVar('disabled', 'border-color'),
+);
+
 @include b(dropdown) {
   .el-select {
     width: 100%;
diff --git a/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss b/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss
index 2035f164f761649309f6d64544179bdad0cfdce3..d90f4b35e31e650c6246e8b95208438fb576fe43 100644
--- a/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss
+++ b/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss
@@ -1,3 +1,9 @@
+/* radio 单选框 */
+$radio: (
+  'font-size': getCssVar('font-size', 'base'),
+  'text-color': getCssVar('text-color'),
+);
+
 @include b('radio') {
   @include set-component-css-var('radio', $radio);
 
@@ -6,7 +12,7 @@
     color: getCssVar('radio', 'text-color');
   }
 
-  @include m(readonly){
-    color: getCssVar('text-color', 'readonly')
+  @include m(readonly) {
+    color: getCssVar('text-color', 'readonly');
   }
 }
diff --git a/src/editor/span/span/span.scss b/src/editor/span/span/span.scss
index d17b59116a914bda20c4b12a046ec17a23978f80..500574084e7297f2c8a50d3ad82664a2dcb7bfaf 100644
--- a/src/editor/span/span/span.scss
+++ b/src/editor/span/span/span.scss
@@ -1,14 +1,19 @@
+/* span 标签 */
+$span: (
+  'font-size': getCssVar('font-size', 'base'),
+  'text-color': getCssVar('text-color'),
+);
 @include b('span') {
   @include set-component-css-var('span', $span);
 
   font-size: getCssVar('span', 'font-size');
   color: getCssVar('span', 'text-color');
 
-  @include m(disabled){
-    color: getCssVar('text-color', 'disabled')
+  @include m(disabled) {
+    color: getCssVar('text-color', 'disabled');
   }
 
-  @include m(readonly){
-    color: getCssVar('text-color', 'readonly')
+  @include m(readonly) {
+    color: getCssVar('text-color', 'readonly');
   }
 }
diff --git a/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss b/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss
index 1400644af83a58029873ed7729058e726d1d75db..e2efa075e0742eced10c87c134f2d187270869bd 100644
--- a/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss
+++ b/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss
@@ -1,3 +1,14 @@
+/* input-number 数值框 */
+$input-number: (
+  'font-size': getCssVar('font-size', 'base'),
+  'text-color': getCssVar('text-color'),
+  'border-color': getCssVar('border-color'),
+  'placeholder-color': getCssVar('text-color', 'placeholder'),
+  'disabled-text-color': getCssVar('disabled', 'text-color'),
+  'disabled-bg-color': getCssVar('disabled', 'bg-color'),
+  'disabled-border-color': getCssVar('disabled', 'border-color'),
+);
+
 @include b('input-number') {
   @include set-component-css-var('input-number', $input-number);
 
diff --git a/src/editor/text-box/input/input.scss b/src/editor/text-box/input/input.scss
index b6f2d0ef6e3045db7dfa404d9b6656a4c2a07b1a..34733faf95340e7d644f91ac5132d2739457bfc4 100644
--- a/src/editor/text-box/input/input.scss
+++ b/src/editor/text-box/input/input.scss
@@ -1,3 +1,14 @@
+/* input 文本框 */
+$input: (
+  'font-size': getCssVar('font-size', 'base'),
+  'text-color': getCssVar('text-color'),
+  'border-color': getCssVar('border-color'),
+  'placeholder-color': getCssVar('text-color', 'placeholder'),
+  'disabled-text-color': getCssVar('disabled', 'text-color'),
+  'disabled-bg-color': getCssVar('disabled', 'bg-color'),
+  'disabled-border-color': getCssVar('disabled', 'border-color'),
+);
+
 @include b('input') {
   @include set-component-css-var('input', $input);
 
diff --git a/src/editor/upload/ibiz-file-upload/ibiz-file-upload.scss b/src/editor/upload/ibiz-file-upload/ibiz-file-upload.scss
index 8c3532c8509771ef0984c1a5ee36eee600c369e3..7fc76b94389dd799c9e3985711d2cc054cc70577 100644
--- a/src/editor/upload/ibiz-file-upload/ibiz-file-upload.scss
+++ b/src/editor/upload/ibiz-file-upload/ibiz-file-upload.scss
@@ -1,3 +1,12 @@
+/* file-upload 文件上传 */
+$file-upload: (
+  'font-size': getCssVar('font-size', 'base'),
+  'text-color': getCssVar('text-color'),
+  'border-color': getCssVar('border-color'),
+  'hover-color': getCssVar('color', 'primary'),
+  'disabled-bg-color': getCssVar('disabled', 'bg-color'),
+);
+
 @include b('file-upload') {
   @include set-component-css-var('file-upload', $file-upload);
 
@@ -37,14 +46,14 @@
 
   // 禁用态样式
   @include m('disabled') {
-    .el-upload-list__item>span{
+    .el-upload-list__item > span {
       color: getCssVar('text-color', 'disabled');
-    } 
+    }
   }
 
   // 只读态样式
   @include m('readonly') {
-    .el-upload-list__item>span{
+    .el-upload-list__item > span {
       color: getCssVar('text-color', 'readonly');
     }
   }
diff --git a/src/editor/upload/ibiz-image-select/ibiz-image-select.scss b/src/editor/upload/ibiz-image-select/ibiz-image-select.scss
index 1c9c0b58ac93db8fc364f08598960e86cac017a1..b64469099013b44ab3b8eb15a730fc664a394a8e 100644
--- a/src/editor/upload/ibiz-image-select/ibiz-image-select.scss
+++ b/src/editor/upload/ibiz-image-select/ibiz-image-select.scss
@@ -1,3 +1,18 @@
+/* image-select 图片单项上传 */
+$image-select: (
+  'box-width': 120px,
+  'box-height': 120px,
+  'list-item-margin': 5px,
+  'list-item-bg-color': getCssVar('bg-color'),
+  'list-item-border': 1px solid getCssVar('border-color', 'light'),
+  'list-item-border-radius': getCssVar('border-radius', 'base'),
+  'list-item-box-shadow': getCssVar('box-shadow'),
+  'list-item-cover-bg-color': rgb(0 0 0 / 60%),
+  'list-item-cover-i-color': getCssVar('color-white'),
+  'list-item-cover-i-size': getCssVar('font-size', 'extra-large'),
+  'list-item-cover-i-margin': 0 2px,
+);
+
 @include b('image-select') {
   @include set-component-css-var('image-select', $image-select);
 
@@ -34,10 +49,7 @@
 
   .#{bem(image-select-content-action)} {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     display: none;
     background: getCssVar('image-select', 'list-item-cover-bg-color');
 
diff --git a/src/editor/upload/ibiz-image-upload/ibiz-image-upload.scss b/src/editor/upload/ibiz-image-upload/ibiz-image-upload.scss
index 2278ad36566ccfc090cd736b4d4b96ee0d56559c..59c9b8ae3d715649dd29988bb43789f8034dc4ae 100644
--- a/src/editor/upload/ibiz-image-upload/ibiz-image-upload.scss
+++ b/src/editor/upload/ibiz-image-upload/ibiz-image-upload.scss
@@ -1,3 +1,18 @@
+/* image-upload 图片上传 */
+$image-upload: (
+  'box-width': 120px,
+  'box-height': 120px,
+  'list-item-margin': 5px,
+  'list-item-bg-color': getCssVar('bg-color'),
+  'list-item-border': 1px solid getCssVar('border-color', 'light'),
+  'list-item-border-radius': getCssVar('border-radius', 'base'),
+  'list-item-box-shadow': getCssVar('box-shadow'),
+  'list-item-cover-bg-color': rgb(0 0 0 / 60%),
+  'list-item-cover-i-color': getCssVar('color-white'),
+  'list-item-cover-i-size': getCssVar('font-size', 'extra-large'),
+  'list-item-cover-i-margin': 0 2px,
+);
+
 @include b('image-upload') {
   @include set-component-css-var('image-upload', $image-upload);
 
@@ -43,10 +58,7 @@
 
   @include e('list-item-cover') {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     display: none;
     background: getCssVar('image-upload', 'list-item-cover-bg-color');
 
@@ -66,7 +78,6 @@
 
   // 禁用态样式
   @include m('disabled') {
-
     @include e('download-icon') {
       display: none;
     }
@@ -77,7 +88,6 @@
 
   // 只读态样式
   @include m('readonly') {
-
     @include e('remove-icon') {
       display: none;
     }
diff --git a/src/panel-component/panel-button/panel-button.scss b/src/panel-component/panel-button/panel-button.scss
index d0e80634e6e8fbfa4bd11dfa0a7454ddda14c93b..60f1653190d32e42aa50e6a14cfb519ae8a5b656 100644
--- a/src/panel-component/panel-button/panel-button.scss
+++ b/src/panel-component/panel-button/panel-button.scss
@@ -1,4 +1,8 @@
+$panel-button: (
+  'icon-margin': 6px,
+);
+
 @include b(panel-button) {
-    width: 100%;
-    height: 100%;
-}
\ No newline at end of file
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/panel-component/panel-container/panel-container.scss b/src/panel-component/panel-container/panel-container.scss
index a6a65c93c632981c5d10ba1d7d470ffc626a8bb2..cd31f3f429ef3eca264d253cf0795bac55b96497 100644
--- a/src/panel-component/panel-container/panel-container.scss
+++ b/src/panel-component/panel-container/panel-container.scss
@@ -1,3 +1,14 @@
+$panel-container: (
+  'bg-color': getCssVar('bg-color', 'overlay'),
+  'header-bg-color': transparent,
+  'header-height': 38px,
+  'header-padding': calc(getCssVar('padding') / 2),
+  'caption-text-color': getCssVar('text-color'),
+  'caption-font-size': getCssVar('font-size', 'medium'),
+  'content-bg-color': transparent,
+  'content-padding': getCssVar('padding'),
+);
+
 // 默认样式
 @include b(panel-container) {
   @include set-component-css-var('panel-container', $panel-container);
diff --git a/src/util/app-drawer/app-drawer-component.scss b/src/util/app-drawer/app-drawer-component.scss
index 98066c86b57c3a815c9f15489aa8811adcf8bda5..8bc317296f033298ec57a12602bfcde845526442 100644
--- a/src/util/app-drawer/app-drawer-component.scss
+++ b/src/util/app-drawer/app-drawer-component.scss
@@ -1,3 +1,10 @@
+/* 抽屉 start */
+$drawer: (
+  'z-index': getCssVar('z-index', 'drawer'),
+);
+
+/* 抽屉 end */
+
 @include b(drawer) {
   @include set-component-css-var('drawer', $drawer);
 
diff --git a/src/util/app-modal/modal.scss b/src/util/app-modal/modal.scss
index 5d61c01bb81deef1b16501672633e73e3411f91d..62e25318c83c67077690569b027427d7a70bf85c 100644
--- a/src/util/app-modal/modal.scss
+++ b/src/util/app-modal/modal.scss
@@ -1,28 +1,33 @@
+/* 模态 start */
+$modal: (
+  'z-index': getCssVar('z-index', 'modal'),
+);
+
+/* 模态 end */
+
 @include b(modal) {
   @include set-component-css-var('modal', $modal);
 
   // 覆盖element计算的z-index,使用变量
-  &.el-dialog{
+  &.el-dialog {
     z-index: getCssVar('modal', 'z-index') !important;
-    overflow: auto;    
+    overflow: auto;
   }
 
-  .el-dialog__header{
+  .el-dialog__header {
     position: relative;
     padding: 0;
   }
 
   .el-dialog__body {
     height: 100%;
-    padding: 0;    
+    padding: 0;
   }
 
   // 模态关闭图标位置
   .el-dialog__headerbtn {
     top: 0;
-    right: -16px; 
+    right: -16px;
     z-index: getCssVar('modal', 'z-index');
   }
-
-
 }