diff --git a/src/control/dashboard/portlet/portlet-layout/portlet-layout.tsx b/src/control/dashboard/portlet/portlet-layout/portlet-layout.tsx
index 1ad2b7c9fed516e3b6e2cce5045050171b557f8d..6920d49609aee3a1719c8ffe1be946f97159a0fb 100644
--- a/src/control/dashboard/portlet/portlet-layout/portlet-layout.tsx
+++ b/src/control/dashboard/portlet/portlet-layout/portlet-layout.tsx
@@ -140,17 +140,16 @@ export const PortletLayout = defineComponent({
                 ))}
             </div>
             <div class={this.ns.be('header', 'right')}>
-              {model.uiactionGroup &&
-                (this.headerAction ? (
-                  this.renderContent(this.headerAction)
-                ) : (
-                  <iBizActionToolbar
-                    class={this.ns.e('toolbar')}
-                    action-details={model.uiactionGroup.uiactionGroupDetails}
-                    actions-state={state.actionGroupState}
-                    onActionClick={this.onActionClick}
-                  ></iBizActionToolbar>
-                ))}
+              {this.headerAction
+                ? this.renderContent(this.headerAction)
+                : model.uiactionGroup && (
+                    <iBizActionToolbar
+                      class={this.ns.e('toolbar')}
+                      action-details={model.uiactionGroup.uiactionGroupDetails}
+                      actions-state={state.actionGroupState}
+                      onActionClick={this.onActionClick}
+                    ></iBizActionToolbar>
+                  )}
             </div>
           </div>
         );
diff --git a/src/editor/cascader/ibiz-cascader/ibiz-cascader.scss b/src/editor/cascader/ibiz-cascader/ibiz-cascader.scss
index 230689c90012693d92970f12591d3bcd8b4c0b13..8cc5cfc7ac68d0c0bb121ee932ee4890f20d49a3 100644
--- a/src/editor/cascader/ibiz-cascader/ibiz-cascader.scss
+++ b/src/editor/cascader/ibiz-cascader/ibiz-cascader.scss
@@ -1,8 +1,27 @@
+$cascader: (
+  // 颜色
+  color: getCssVar(editor, default, text-color),
+  placeholder-color: getCssVar(editor, default, placeholder-color),
+  disabled-color: getCssVar(editor, disabled, text-color),
+  readonly-color: getCssVar(editor, readonly, text-color),
+
+  // 字体大小
+  font-size: getCssVar(editor, default, font-size),
+
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
+);
+
 @include b(cascader) {
+  @include set-component-css-var(cascader, $cascader);
+
+  --van-field-input-text-color: #{getCssVar(cascader, color)};
+
   height: 100%;
+  color: getCssVar(cascader, color);
 
   .van-field {
-    font-size: getCssVar('form-item', 'font-size');
+    font-size: getCssVar(cascader, font-size);
 
     &::after {
       display: none;
@@ -13,22 +32,27 @@
     background-color: transparent;
   }
 
+  input::placeholder {
+    color: getCssVar(cascader, placeholder-color);
+    -webkit-text-fill-color: getCssVar(cascader, placeholder-color);
+  }
+
   @include m(disabled) {
-    color: getCssVar('form-item', 'disabled-color');
+    color: getCssVar(cascader, disabled-color);
 
-    --van-field-input-text-color: #{getCssVar('form-item', 'disabled-color')};
+    --van-field-input-disabled-text-color: #{getCssVar(cascader, disabled-color)};
   }
 
   @include m(readonly) {
-    --van-field-input-text-color: #{getCssVar('form-item', 'readonly-color')};
+    --van-field-input-text-color: #{getCssVar(cascader, readonly-color)};
 
-    color: getCssVar('form-item', 'readonly-color');
+    color: getCssVar(cascader, readonly-color);
   }
 
   input {
-    text-align: getCssVar(form-item-container, editor-align);
+    text-align: getCssVar(cascader, text-align);
   }
   &.#{bem('cascader','','readonly')} {
-    text-align: getCssVar(form-item-container, editor-align);
+    text-align: getCssVar(cascader, text-align);
   }
 }
diff --git a/src/editor/check-box/ibiz-checkbox/ibiz-checkbox.scss b/src/editor/check-box/ibiz-checkbox/ibiz-checkbox.scss
index 9ec0857ebca4b2524b6c4603dd4856fddf4b6a7d..6a68322f044f45a0f3f725d85822131cab45d478 100644
--- a/src/editor/check-box/ibiz-checkbox/ibiz-checkbox.scss
+++ b/src/editor/check-box/ibiz-checkbox/ibiz-checkbox.scss
@@ -1,4 +1,11 @@
+$checkbox: (
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
+);
+
 @include b(checkbox) {
+  @include set-component-css-var(checkbox, $checkbox);
+
   display: flex;
-  justify-content: getCssVar(form-item-container, editor-align);
+  justify-content: getCssVar(checkbox, text-align);
 }
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 05fc2aabd42e08985e1c8e670b743cee29f13f5d..a35296cb7544cf8bb1e9308f3918becc9f5101f5 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,35 +1,56 @@
+$date-picker: (
+  // 颜色
+  color: getCssVar(editor, default, text-color),
+  bg-color: transparent,
+  border-color: getCssVar(editor, default, border-color),
+  placeholder-color: getCssVar(editor, default, placeholder-color),
+  disabled-color: getCssVar(editor, disabled, text-color),
+  disabled-bg-color: getCssVar(editor, disabled, bg-color),
+  disabled-border-color: getCssVar(editor, disabled, border-color),
+  readonly-color: getCssVar(editor, readonly, text-color),
+  
+  // 字体大小
+  font-size: getCssVar(editor, default, font-size),
+
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
+);
+
+
 @include b('date-picker') {
+  @include set-component-css-var(date-picker, $date-picker);
+
   input {
     width: 100%;
-    font-size: getCssVar('form-item', 'font-size');
-    color: getCssVar('form-item', 'text-color');
+    font-size: getCssVar(date-picker, font-size);
+    color: getCssVar(date-picker, color);
     text-align: inherit;
-    background-color: transparent;
+    background-color: getCssVar(date-picker, bg-color);
     border: none;
-    border-color: getCssVar('form-item', 'border-color');
+    border-color: getCssVar(date-picker, border-color);
     box-shadow: none;
   }
 
   input::placeholder {
-    color: getCssVar('form-item', 'placeholder-color');
-    -webkit-text-fill-color: getCssVar('form-item', 'placeholder-color');
+    color: getCssVar(date-picker, placeholder-color);
+    -webkit-text-fill-color: getCssVar(date-picker, placeholder-color);
   }
 
   input[disabled] {
-    color: getCssVar('form-item', 'disabled-color');
-    background-color: getCssVar('form-item', 'disabled-bg-color');
-    border-color: getCssVar('form-item', 'disabled-border-color');
+    color: getCssVar(date-picker, disabled-color);
+    background-color: getCssVar(date-picker, disabled-bg-color);
+    border-color: getCssVar(date-picker, disabled-border-color);
   }
 
   @include m(readonly) {
-    color: getCssVar('form-item', 'readonly-color');
+    color: getCssVar(date-picker, readonly-color);
   }
 
   input {
-    text-align: getCssVar(form-item-container, editor-align);
+    text-align: getCssVar(date-picker, text-align);
   }
   &.#{bem('date-picker','','readonly')}{
-    text-align: getCssVar(form-item-container, editor-align);
+    text-align: getCssVar(date-picker, text-align);
   }
 }
 
diff --git a/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.scss b/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.scss
index 9dcac1b2712cf40e2b5c9d1511487549f56e6305..4adec808ef933eb0eedb93087f0ff3d234a25dcd 100644
--- a/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.scss
+++ b/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.scss
@@ -1,4 +1,25 @@
+$date-range-picker: (
+  // 颜色
+  color: getCssVar(editor, default, text-color),
+  bg-color: transparent,
+  placeholder-color: getCssVar(editor, default, placeholder-color),
+  border-color: getCssVar(editor, default, border-color),
+  disabled-color: getCssVar(editor, disabled, text-color),
+  readonly-color: getCssVar(editor, readonly, text-color),
+
+  // 字体大小
+  font-size: getCssVar(editor, default, font-size),
+
+  // 行高
+  line-height: getCssVar(editor, default, line-height),
+
+  // 高度
+  min-height: calc(var(--van-cell-line-height) + 2px),
+);
+
 @include b(date-range-picker) {
+  @include set-component-css-var(date-range-picker, $date-range-picker);
+
   display: flex;
   align-items: center;
   width: 100%;
@@ -8,7 +29,7 @@
     display: flex;
     flex: 1;
     align-items: center;
-    min-height: calc(var(--van-cell-line-height) + 2px); /* 计算输入框高度，2px为边框 */
+    min-height: getCssVar(date-range-picker, min-height);
     white-space: nowrap;
     @include when('start') {
       .van-field {
@@ -30,6 +51,7 @@
       .van-field {
         input {
           text-align: right;
+
           &::placeholder {
             text-align: right;
           }
@@ -50,43 +72,50 @@
   }
 
   .van-field {
-    line-height: getCssVar(form-item, line-height);
+    line-height: getCssVar(date-range-picker, line-height);
+
     &::after {
       display: none;
     }
+
     .van-field__control--custom {
-      min-height: getCssVar(form-item, line-height);
+      min-height: getCssVar(date-range-picker, line-height);
     }
   }
 
   input {
     width: 100%;
-    font-size: getCssVar('form-item', 'font-size');
-    color: getCssVar('form-item', 'text-color');
-    background-color: transparent;
-    border: none;
     padding: 0;
-    border-color: getCssVar('form-item', 'border-color');
+    font-size: getCssVar(date-range-picker, font-size);
+    color: getCssVar(date-range-picker, color);
+    background-color: getCssVar(date-range-picker, bg-color);
+    border: none;
+    border-color: getCssVar(date-range-picker, border-color);
     box-shadow: none;
   }
 
+  input::placeholder {
+    color: getCssVar(date-range-picker, placeholder-color);
+    -webkit-text-fill-color: getCssVar(date-range-picker, placeholder-color);
+  }
+
   @include flex(row, center, center);
 
   @include m(disabled) {
-    --van-field-input-text-color: #{getCssVar('form-item', 'disabled-color')};
+    --van-field-input-text-color: #{getCssVar(date-range-picker, disabled-color)};
 
 
     input {
-      color: getCssVar('form-item', 'disabled-color');
+      color: getCssVar(date-range-picker, disabled-color);
 
     }
   }
 
   @include m(readonly) {
-    --van-field-input-text-color: #{getCssVar('form-item', 'readonly-color')};
+    --van-field-input-text-color: #{getCssVar(date-range-picker, readonly-color)};
 
     input {
-      color: getCssVar('form-item', 'readonly-color');
+      color: getCssVar(date-range-picker, readonly-color);
     }
   }
 }
diff --git a/src/editor/dropdown-list/ibiz-dropdown-list/ibiz-dropdown-list.scss b/src/editor/dropdown-list/ibiz-dropdown-list/ibiz-dropdown-list.scss
index 2566d0e6bc5278e117fe716e120391a6a69c703e..502584395e646dc8496ecab9892ceecb69180410 100644
--- a/src/editor/dropdown-list/ibiz-dropdown-list/ibiz-dropdown-list.scss
+++ b/src/editor/dropdown-list/ibiz-dropdown-list/ibiz-dropdown-list.scss
@@ -1,60 +1,28 @@
-@include b(dropdown-list) {
-  height: 100%;
-
-
-  .van-field__control {
-    gap: getCssVar(spacing, tight);
-  }
-
-
-
-  .van-picker {
-    .van-picker__mask {
-      background-image: getCssVar(color, overlay, bg);
-    }
-  }
-
-  @include b(dropdown-list-toolbar) {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: getCssVar(spacing, base-tight);
+$dropdown-list: (
+  // 颜色
+  readonly-color: getCssVar(editor, readonly, text-color),
+  select-item-bg-color: getCssVar(color, disabled, bg),
 
-    button {
-      padding: 0;
-      background-color: transparent;
-      border: none;
-    }
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
 
-    @include e(confirm) {
-      color: getCssVar(color, primary);
-    }
+  // 圆角
+  select-item-border-radius: getCssVar(border-radius, small),
 
-    @include e(cancel) {
-      color: getCssVar(color, text, 3);
-    }
-  }
+  // 间距
+  gap: getCssVar(spacing, tight),
+  select-item-gap: getCssVar(spacing, tight),
+  select-item-padding: getCssVar(spacing, tight),
+);
 
-  @include b(dropdown-list-columns) {
-    min-height: 30vh;
-    max-height: 50vh;
-    overflow: auto;
+@include b(dropdown-list) {
+  @include set-component-css-var(dropdown-list, $dropdown-list);
 
-    .van-cell-group {
-      height: 100%;
-      overflow: auto;
-    }
+  height: 100%;
 
-    .van-cell {
-      padding: getCssVar(spacing, base-tight);
-    }
-  }
 
-  input:disabled {
-    color: getCssVar(form-item, disabled-color);
-    background-color: getCssVar(form-item, disabled-bg-color);
-    border-color: getCssVar(form-item, disabled-border-color);
-    -webkit-text-fill-color: getCssVar(form-item, disabled-color);
+  .van-field__control {
+    gap: getCssVar(dropdown-list, gap);
   }
 
   @include m(disabled) {
@@ -62,35 +30,30 @@
   }
 
   @include m(readonly) {
-    color: getCssVar(form-item, readonly-color);
-    -webkit-text-fill-color: getCssVar(form-item, readonly-color);
-  }
-
-  .van-cell-group--inset {
-    margin: 0;
+    color: getCssVar(dropdown-list, readonly-color);
+    -webkit-text-fill-color: getCssVar(dropdown-list, readonly-color);
   }
 
   @include b(dropdown-list-select-item) {
     display: flex;
-    gap: getCssVar(spacing, tight);
+    gap: getCssVar(dropdown-list, select-item-gap);
     align-items: center;
     justify-content: space-between;
-    padding: getCssVar(spacing, tight);
-    background-color: getCssVar(color, disabled, bg);
-    border-radius: getCssVar('border-radius', 'small');
+    padding: getCssVar(dropdown-list, select-item-padding);
+    background-color: getCssVar(dropdown-list, select-item-bg-color);
+    border-radius: getCssVar(dropdown-list, select-item-border-radius);
   }
 
 
   .van-field__control--custom {
     display: flex;
-    flex-direction: row;
-    justify-content: getCssVar(form-item-container, editor-align);
-    flex-wrap: wrap;
+    flex-flow: row wrap;
+    justify-content: getCssVar(dropdown-list, text-align);
   }
   &.#{bem('dropdown-list','','readonly')} {
     display: flex;
     flex-direction: row;
-    justify-content: getCssVar(form-item-container, editor-align);
+    justify-content: getCssVar(dropdown-list, text-align);
   }
 }
 
diff --git a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss
index ff980178339d5b7a0d6825e7827aabb5192a2fb4..7043ea5c70dd927f41cab378b81e6d95b0ccf46b 100644
--- a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss
+++ b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss
@@ -1,18 +1,64 @@
+$dropdown: (
+  // 颜色
+  color: getCssVar(editor, default, text-color),
+  disabled-color: getCssVar(editor, disabled, text-color),
+  readonly-color: getCssVar(editor, readonly, text-color),
+  placeholder-color: getCssVar(editor, default, placeholder-color),
+  pop-search-input-bg-color: getCssVar(color, fill, 2),
+  pop-list-item-selected-color: getCssVar(color,primary),
+
+  // 字体大小
+  font-size: getCssVar(editor, default, font-size),
+
+  // 行高
+  line-height: getCssVar(editor, default, line-height),
+
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
+
+  // 圆角
+  select-item-border-radius: getCssVar(spacing, base),
+  pop-search-border-radius: getCssVar(border-radius, medium),
+  pop-list-item-border-radius: getCssVar(spacing, base),
+
+  // 间距
+  select-item-padding: 0,
+  select-bg-item-padding: 0 getCssVar(spacing, base),
+  pop-padding: getCssVar(spacing, base),
+  pop-caption-margin-left: getCssVar(spacing, base),
+  pop-search-padding: getCssVar(spacing, extra-tight) 0,
+  pop-search-margin-top: getCssVar(spacing, base),
+  pop-search-input-padding: getCssVar(spacing, extra-tight),
+  pop-search-input-icon-padding: 0 getCssVar(spacing, extra-tight),
+  pop-list-item-padding: getCssVar(spacing, base) 0,
+  pop-list-bg-item-padding: getCssVar(spacing, extra-tight) getCssVar(spacing, base),
+
+  // 边框
+  pop-list-item-border-bottom: 1px solid getCssVar(color,border),
+
+  // 清除按钮样式
+  clear-display: getCssVar(form-item-container, required-style),
+);
+
 @include b(dropdown) {
+  @include set-component-css-var(dropdown, $dropdown);
+
   height: 100%;
 
+  --van-field-input-text-color: #{getCssVar(dropdown, color)};
+
   @include e(select) {
     height: 100%;
-    font-size: getCssVar('form-item', 'font-size');
+    font-size: getCssVar(dropdown, font-size);
 
     .#{bem('dropdown','select-item')} {
-      padding: 0;
+      padding: getCssVar(dropdown, select-item-padding);
       color: getCssVar(dropdown, select-option-item-color);
       background-color: getCssVar(dropdown, select-option-item-bkcolor);
-      border-radius: getCssVar(spacing, base);
+      border-radius: getCssVar(dropdown, select-item-border-radius);
     }
     .#{bem('dropdown','select-item', 'has-bg')} {
-      padding: 0 getCssVar(spacing, base);
+      padding: getCssVar(dropdown, select-bg-item-padding);
     }
 
     &::after {
@@ -26,104 +72,86 @@
     }
   }
 
-  @include e(option) {
-    padding: rem(5px) rem(16px);
-    line-height: 21px;
-    color: getCssVar(dropdown, select-option-item-color);
-    background-color: getCssVar(dropdown, select-option-item-bkcolor);
-    border-radius: getCssVar(spacing, base);
-  }
-
-  .van-picker {
-    .van-picker__mask {
-      background-image: getCssVar(color, overlay, bg);
-    }
+  @include m(disabled) {
+    --van-field-input-text-color: #{getCssVar(dropdown, disabled-color)};
   }
 
-  input:disabled {
-    color: getCssVar('form-item', 'disabled-color');
-    background-color: getCssVar('form-item', 'disabled-bg-color');
-    border-color: getCssVar('form-item', 'disabled-border-color');
-    -webkit-text-fill-color: getCssVar('form-item', 'disabled-color');
-  }
 
   @include m(readonly) {
-    color: getCssVar('form-item', 'readonly-color');
-    -webkit-text-fill-color: getCssVar('form-item', 'readonly-color');
+    color: getCssVar(dropdown, readonly-color);
+    -webkit-text-fill-color: getCssVar(dropdown, readonly-color);
   }
 
   .van-field__control {
-    justify-content: getCssVar(form-item-container, editor-align);
+    justify-content: getCssVar(dropdown, text-align);
   }
 
   @include e(placeholder) {
-    color: getCssVar('form-item', 'placeholder-color');
+    color: getCssVar(dropdown, placeholder-color);
   }
 }
 
 @include b(dropdown-readonly-text-item) {
   display: inline-block;
-  padding: 0;
-  font-size: rem(14px);
-  line-height: rem(24px);
+  padding: getCssVar(dropdown, select-item-padding);
+  font-size: getCssVar(dropdown, font-size);
+  line-height: getCssVar(dropdown, line-height);
   color: getCssVar(dropdown, select-option-item-color);
   background-color: getCssVar(dropdown, select-option-item-bkcolor);
-  border-radius: getCssVar(spacing, base);
+  border-radius: getCssVar(dropdown, select-item-border-radius);
   @include m(has-bg) {
-    padding: 0 getCssVar(spacing, base);
+    padding: getCssVar(dropdown, select-bg-item-padding);
   }
 }
 
 @include b(dropdown-pop){
+  @include set-component-css-var(dropdown, $dropdown);
+
   display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
-  padding: getCssVar(spacing,base);
-  flex-direction: column;
+  padding: getCssVar(dropdown, pop-padding);
   @include e('header'){
-    flex-shrink: 0;
     display: flex;
+    flex-shrink: 0;
     justify-content: space-between;
     opacity: 0.7;
     @include m('caption'){
-      margin-left: getCssVar(spacing,base);
+      margin-left: getCssVar(dropdown, pop-caption-margin-left);
     }
     @include m('right'){
-      display: getCssVar(form-item-container,required-style);
+      display: getCssVar(dropdown, clear-display);
     }
   }
   @include e('content'){
+    display: flex;
     flex: 1;
+    flex-direction: column;
     width: 100%;
     height: 100%;
-    display: flex;
-    flex-direction: column;
     overflow: hidden;
   }
   @include e('search'){
-    margin-top: getCssVar(spacing,base);
     flex-shrink: 0;
-    padding: getCssVar(spacing,extra-tight) 0;
+    padding: getCssVar(dropdown, pop-search-padding);
+    margin-top: getCssVar(dropdown, pop-search-margin-top);
     overflow: hidden;
-    border-radius: getCssVar(border-radius,medium);
+    border-radius: getCssVar(dropdown, pop-search-border-radius);
 
     .van-field{
-      --van-field-icon-size: #{getCssVar(font-soze,heaader-5)};
-      padding: getCssVar(spacing,extra-tight);
-      --van-cell-background:#{getCssVar(color,fill,2)};
+      padding: getCssVar(dropdown, pop-search-input-padding);
+
+      --van-cell-background: #{getCssVar(dropdown, pop-search-input-bg-color)};
 
       .van-field__left-icon{
         display: flex;
         align-items: center;
-        padding: 0 getCssVar(spacing,extra-tight);
+        padding: getCssVar(dropdown, pop-search-input-icon-padding);
       }
 
       .van-field__value{
         text-align: left;
-        &::placeholder{
-          font-size: getCssVar(font-size,small);
-          color: getCssVar(color,text,3);
-        }
       }
     }
     
@@ -133,22 +161,21 @@
     overflow: auto;
     @include m('item'){
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      padding: getCssVar(spacing,base) 0;
-      border-bottom: 1px solid getCssVar(color,border);
+      justify-content: space-between;
+      padding: getCssVar(dropdown, pop-list-item-padding);
+      border-bottom: getCssVar(dropdown, pop-list-item-border-bottom);
     }
     @include m('item-text'){
       color: getCssVar(dropdown, select-option-item-color);
       background-color: getCssVar(dropdown, select-option-item-bkcolor);
-      
-      border-radius: getCssVar(spacing,base);
+      border-radius: getCssVar(dropdown, pop-list-item-border-radius);
       @include when('bkcolor'){
-        padding: getCssVar(spacing,extra-tight)  getCssVar(spacing,base);
+        padding: getCssVar(dropdown, pop-list-bg-item-padding);
       }
     }
     @include m('selected'){
-      color: getCssVar(color,primary);
+      color: getCssVar(dropdown, pop-list-item-selected-color);
     }
   }
 }
\ No newline at end of file
diff --git a/src/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.scss b/src/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.scss
index 8bd2982b5a631ab0f9752c04f8b139be502c02e5..0da0f92dcb22c5943e28115b7f1f34ae475b4019 100644
--- a/src/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.scss
+++ b/src/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.scss
@@ -1,11 +1,31 @@
+$number-range-picker: (
+  // 颜色
+  color: getCssVar(editor, default, text-color),
+  placeholder-color: getCssVar(editor, default, placeholder-color),
+  disabled-color: getCssVar(editor, disabled, text-color),
+  readonly-color: getCssVar(editor, readonly, text-color),
+
+  // 字体大小
+  font-size: getCssVar(editor, default, font-size),
+  icon-font-size: getCssVar(font-size, header-4),
+
+  // 清除按钮样式
+  clear-display: getCssVar(form-item-container, required-style),
+);
+
 @include b(number-range-picker) {
+  @include set-component-css-var(number-range-picker, $number-range-picker);
+
+  --van-field-input-text-color: #{getCssVar(number-range-picker, color)};
+
   width: 100%;
+  color: getCssVar(number-range-picker, color);
 
   @include flex(row, center, center);
 
   .van-field {
     flex: 1;
-    font-size: getCssVar('form-item', 'font-size');
+    font-size: getCssVar(number-range-picker, font-size);
 
     &::after {
       display: none;
@@ -14,24 +34,28 @@
 
   .van-field__control {
     text-align: center;
+  }
 
+  input::placeholder {
+    color: getCssVar(number-range-picker, placeholder-color);
+    -webkit-text-fill-color: getCssVar(number-range-picker, placeholder-color);
   }
 
   @include m(disabled) {
-    --van-field-input-text-color: #{getCssVar('form-item', 'disabled-color')};
+    --van-field-input-disabled-text-color: #{getCssVar(number-range-picker, disabled-color)};
 
-    color: getCssVar('form-item', 'disabled-color');
+    color: getCssVar(number-range-picker, disabled-color);
   }
 
   @include m(readonly) {
-    --van-field-input-text-color: #{getCssVar('form-item', 'readonly-color')};
+    --van-field-input-text-color: #{getCssVar(number-range-picker, readonly-color)};
 
-    color: getCssVar('form-item', 'disabled-color');
+    color: getCssVar(number-range-picker, readonly-color);
   }
 
   @include e('clear-icon'){
-    display: getCssVar(form-item-container,required-style);
-    font-size: getCssVar(font-size,header,4);
+    display: getCssVar(number-range-picker, clear-display);
+    font-size: getCssVar(number-range-picker, icon-font-size);
     opacity: 0.3;
   }
 }
\ No newline at end of file
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 426366879a5b82ba473b799233faca3f7dacb92d..8758f07c808794af40e0cc290629040f93004460 100644
--- a/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss
+++ b/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss
@@ -1,13 +1,32 @@
+$radio: (
+  // 颜色
+  color: getCssVar(editor, default, text-color),
+  disabled-color: getCssVar(editor, disabled, text-color),
+  readonly-color: getCssVar(editor, readonly, text-color),
+
+  // 字体大小
+  font-size: getCssVar(editor, default, font-size),
+
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
+
+  // 间距
+  padding: getCssVar(spacing, tight) 0,
+  item-gap: getCssVar(spacing, tight),
+);
+
 @include b('radio') {
+  @include set-component-css-var(radio, $radio);
+
   height: 100%;
-  padding: getCssVar('spacing', 'tight') 0;
+  padding: getCssVar(radio, padding);
 
   .van-radio--horizontal {
     margin-right: 0;
   }
 
   .van-radio-group--horizontal {
-    gap: getCssVar('spacing', 'tight');
+    gap: getCssVar(radio, item-gap);
   }
 
   .van-radio-group {
@@ -15,19 +34,25 @@
   }
 
   @include e('text') {
-    font-size: getCssVar('form-item', 'font-size');
-    color: getCssVar('form-item', 'text-color');
+    font-size: getCssVar(radio, font-size);
+    color: getCssVar(radio, color);
+  }
+
+  @include m(disabled) {
+    @include e('text') {
+      color: getCssVar(radio, disabled-color);
+    }
   }
 
   @include m(readonly) {
-    color: getCssVar('form-item', 'readonly-color');
+    color: getCssVar(radio, readonly-color);
   }
 
   .van-radio-group--horizontal {
     display: flex;
-    justify-content: getCssVar(form-item-container, editor-align);
+    justify-content: getCssVar(radio, text-align);
   }
   &.#{bem('radio','','readonly')}{
-    text-align: getCssVar(form-item-container, editor-align);
+    text-align: getCssVar(radio, text-align);
   }
 }
diff --git a/src/editor/rate/ibiz-rate/ibiz-rate.scss b/src/editor/rate/ibiz-rate/ibiz-rate.scss
index 5e6f5cc71ef99631899ae3c43d85f0e0562ba005..11e9617ef41c84755b8e763cb8fe40792c799d27 100644
--- a/src/editor/rate/ibiz-rate/ibiz-rate.scss
+++ b/src/editor/rate/ibiz-rate/ibiz-rate.scss
@@ -1,10 +1,21 @@
+$stepper: (
+  // 颜色
+  icon-color: getCssVar(color, primary),
+  
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
+);
+
 @include b(rate) {
+  @include set-component-css-var(stepper, $stepper);
+
   display: flex;
   flex-direction: row;
-  justify-content: getCssVar(form-item-container, editor-align);
+  justify-content: getCssVar(stepper, text-align);
+
   .van-rate {
     .van-rate__icon--full {
-      color: getCssVar(color, primary);
+      color: getCssVar(stepper, icon-color);
     }
   }
 }
diff --git a/src/editor/raw/ibiz-raw/ibiz-raw.scss b/src/editor/raw/ibiz-raw/ibiz-raw.scss
index f5dac3c9034e65532670b519d32886a255b54ee8..d8a752bbd503bc3192410978de9397a9330125f5 100644
--- a/src/editor/raw/ibiz-raw/ibiz-raw.scss
+++ b/src/editor/raw/ibiz-raw/ibiz-raw.scss
@@ -1,14 +1,14 @@
-@include b(raw){
-  line-height: getCssVar(form-item, line-height);
-  color:getCssVar(form-item, text-color);
-}
+$raw: (
+  // 颜色
+  color: getCssVar(editor, default, text-color),
 
+  // 行高
+  line-height: getCssVar(editor, default, line-height),
+);
 
-@include b(form-item){
+@include b(raw){
+  @include set-component-css-var(raw, $raw);
 
-  @include b(raw) {
-    @include when(show-default){
-      padding: getCssVar(form-item, hover-edit-padding);
-    }
-  }
-}
\ No newline at end of file
+  line-height: getCssVar(raw, line-height);
+  color:getCssVar(raw, color);
+}
diff --git a/src/editor/slider/ibiz-slider/ibiz-slider.scss b/src/editor/slider/ibiz-slider/ibiz-slider.scss
index fd8b9255060d17defbd21f1632a3805072aeb3b2..a464662cc89ea8bfab1fa9537fdd864b4ef512f5 100644
--- a/src/editor/slider/ibiz-slider/ibiz-slider.scss
+++ b/src/editor/slider/ibiz-slider/ibiz-slider.scss
@@ -1,20 +1,49 @@
+$slider: (
+  // 颜色
+  button-color: #fff,
+  button-bg-color: getCssVar(color, primary),
+
+  // 字体大小
+  font-size: getCssVar(font-size, regular),
+  button-font-size: rem(10px),
+
+  // 行高
+  button-line-height: rem(18px),
+
+  // 高度
+  min-height: rem(20px),
+
+  // 宽度
+  button-width: rem(26px),
+
+  // 圆角
+  button-border-radius: rem(100px),
+
+  // 间距
+  padding: 0 rem(13px),
+);
+
 @include b(slider) {
+  @include set-component-css-var(slider, $slider);
+
   height: 100%;
-  min-height: rem(20px);
+  min-height: getCssVar(slider, min-height);
   @include flex(row, flex-start, center);
-  padding: 0 rem(13px);
+
+  padding: getCssVar(slider, padding);
 
   @include e('circle') {
     width: 100%;
     height: 100%;
     @include m('text') {
-      width: 100%;
-      height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: getCssVar('font-size', 'regular');
+      width: 100%;
+      height: 100%;
+      font-size: getCssVar(slider, font-size);
     }
+
     .van-circle{
       width: 100%;
       height: 100%;
@@ -22,12 +51,12 @@
   }
   
   @include b(slider-button) {
-    width: rem(26px);
-    font-size: rem(10px);
-    line-height: rem(18px);
-    color: #fff;
+    width: getCssVar(slider, button-width);
+    font-size: getCssVar(slider, button-font-size);
+    line-height: getCssVar(slider, button-line-height);
+    color: getCssVar(slider, button-color);
     text-align: center;
-    background-color: getCssVar(color, primary);
-    border-radius: rem(100px);
+    background-color: getCssVar(slider, button-bg-color);
+    border-radius: getCssVar(slider, button-border-radius);
   }
 }
diff --git a/src/editor/span/span/span.scss b/src/editor/span/span/span.scss
index 7dcf86bc88187b806576ae37a069ef38b67282da..3e1f06a985c482283239b02b0ace6eead3d695ed 100644
--- a/src/editor/span/span/span.scss
+++ b/src/editor/span/span/span.scss
@@ -1,34 +1,58 @@
+$span: (
+  // 颜色
+  color: inherit,
+  disabled-color: getCssVar(editor, disabled, text-color),
+  readonly-color: getCssVar(editor, readonly, text-color),
+  code-list-item-color: getCssVar(color, default),
+
+  // 字体大小
+  font-size: getCssVar(editor, default, font-size),
+
+  // 行高
+  line-height: getCssVar(editor, default, line-height),
+
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
+
+  // 间距
+  code-list-item-padding: getCssVar(spacing, extra-tight) getCssVar(spacing, base-tight),
+
+  // 圆角
+  code-list-item-border-radius: getCssVar(border-radius, large),
+);
+
 @include b('span') {
+  @include set-component-css-var(span, $span);
+
   display: block;
   width: 100%;
-  font-size: getCssVar(form-item, font-size);
-  line-height: getCssVar(editor, default, line-height);
-  color: inherit;
+  font-size: getCssVar(span, font-size);
+  line-height: getCssVar(span, line-height);
+  color: getCssVar(span, color);
+  text-align: getCssVar(span, text-align);
   white-space: pre-line;
   @include utils-ellipsis;
 
   @include m(disabled) {
-    color: getCssVar('form-item', 'disabled-color');
+    color: getCssVar(span, disabled-color);
   }
 
   @include m(readonly) {
-    color: getCssVar('form-item', 'readonly-color');
+    color: getCssVar(span, readonly-color);
   }
   @include e('code-list') {
     @include when('reverse-color') {
       .#{bem('code-list','item')} {
-        padding: getCssVar(spacing-extra, tight) getCssVar(spacing-base, tight);
-        color: getCssVar(color, default);
+        padding: getCssVar(span, code-list-item-padding);
+        color: getCssVar(span, code-list-item-color);
         background-color: getCssVar('code-list', 'item-color');
-        border-radius: getCssVar(border-radius, large);
+        border-radius: getCssVar(span, code-list-item-border-radius);
       }
     }
   }
-
-  text-align: getCssVar(form-item-container, editor-align);
   .#{bem('span','code-list')}{
     display: flex;
     flex-direction: row;
-    justify-content: getCssVar(form-item-container, editor-align);
+    justify-content: getCssVar(span, text-align);
   }
 }
diff --git a/src/editor/stepper/ibiz-stepper/ibiz-stepper.scss b/src/editor/stepper/ibiz-stepper/ibiz-stepper.scss
index d47c499b588549a84eccacd193ab9229984b5e57..4c260a2e240b6da0eab8fedf2a2c06e3585d7090 100644
--- a/src/editor/stepper/ibiz-stepper/ibiz-stepper.scss
+++ b/src/editor/stepper/ibiz-stepper/ibiz-stepper.scss
@@ -1,24 +1,37 @@
+$stepper: (
+  // 颜色
+  disabled-color: getCssVar(editor, disabled, text-color),
+  readonly-color: getCssVar(editor, readonly, text-color),
+  bg-color: getCssVar(color, bg, 1),
+
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
+);
+
 @include b(stepper) {
+  @include set-component-css-var(stepper, $stepper);
+
   display: flex;
   flex-direction: row;
-  justify-content: getCssVar(form-item-container, editor-align);
+  justify-content: getCssVar(stepper, text-align);
+
   .van-stepper {
     .van-stepper__minus,
     .van-stepper__plus {
-      background-color: getCssVar(color, bg, 1);
+      background-color: getCssVar(stepper, bg-color);
     }
 
     .van-stepper__input {
-      background-color: getCssVar(color, bg, 1);
+      background-color: getCssVar(stepper, bg-color);
     }
   }
 
   @include m(disabled) {
-    color: getCssVar('form-item', 'disabled-color');
+    color: getCssVar(stepper, disabled-color);
   }
 
   @include m(readonly) {
-    color: getCssVar('form-item', 'readonly-color');
+    color: getCssVar(stepper, readonly-color);
   }
 
 }
\ No newline at end of file
diff --git a/src/editor/switch/ibiz-switch/ibiz-switch.scss b/src/editor/switch/ibiz-switch/ibiz-switch.scss
index cd6d0f0a9b2523e65f1ae2bc06f530487543bf89..92684200ae157ce921730e75970e7bfb3713ac2a 100644
--- a/src/editor/switch/ibiz-switch/ibiz-switch.scss
+++ b/src/editor/switch/ibiz-switch/ibiz-switch.scss
@@ -1,13 +1,23 @@
+$switch: (  
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
+
+  // 高度
+  height: var(--van-switch-height),
+);
+
 @include b('switch') {
-  width: 100%;
-  height: 100%;
+  @include set-component-css-var(switch, $switch);
+
   display: flex;
   flex-direction: row;
-  justify-content: getCssVar(form-item-container, editor-align);
+  justify-content: getCssVar(switch, text-align);
+  width: 100%;
+  height: 100%;
 
   &.#{bem('switch')} {
     .van-switch {
-      height: var(--van-switch-height);
+      height: getCssVar(switch, height);
     }
   }
 }
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 6e775053550e760a7fe3afd90747aad9448e35ba..2836d65c8ccd348a06d2f00df2cd4d25bc3a69f8 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,42 +1,70 @@
+$input-number: (
+  // 颜色
+  color: getCssVar(editor, default, text-color),
+  border-color: getCssVar(editor, default, border-color),
+  placeholder-color: getCssVar(editor, default, placeholder-color),
+  disabled-color: getCssVar(editor, disabled, text-color),
+  disabled-bg-color: getCssVar(editor, disabled, bg-color),
+  disabled-border-color: getCssVar(editor, disabled, border-color),
+  readonly-color: getCssVar(editor, readonly, text-color),
+
+  // 字体大小
+  font-size: getCssVar(editor, default, font-size),
+
+  // 行高
+  line-height: getCssVar(editor, default, line-height),
+
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
+
+  // 间距
+  unit-margin-left: rem(10px),
+
+  // 清除按钮样式
+  clear-display: getCssVar(form-item-container, required-style),
+);
+
 @include b('input-number') {
+  @include set-component-css-var(input-number, $input-number);
+
   height: 100%;
-  text-align: getCssVar(form-item-container, editor-align);
+  text-align: getCssVar(input-number, text-align);
 
   input {
-    font-size: getCssVar('form-item', 'font-size');
-    line-height: getCssVar('form-item', 'line-height');
-    color: getCssVar('form-item', 'text-color');
-    border-color: getCssVar('form-item', 'border-color');
-    -webkit-text-fill-color: getCssVar('form-item', 'text-color');
+    font-size: getCssVar(input-number, font-size);
+    line-height: getCssVar(input-number, line-height);
+    color: getCssVar(input-number, color);
+    border-color: getCssVar(input-number, border-color);
+    -webkit-text-fill-color: getCssVar(input-number, color);
   }
 
   input::placeholder {
-    color: getCssVar('form-item', 'placeholder-color');
-    -webkit-text-fill-color: getCssVar('form-item', 'placeholder-color');
+    color: getCssVar(input-number, placeholder-color);
+    -webkit-text-fill-color: getCssVar(input-number, placeholder-color);
   }
 
   input:disabled {
-    color: getCssVar('form-item', 'disabled-color');
-    background-color: getCssVar('form-item', 'disabled-bg-color');
-    border-color: getCssVar('form-item', 'disabled-border-color');
-    -webkit-text-fill-color: getCssVar('form-item', 'disabled-color');
+    color: getCssVar(input-number, disabled-color);
+    background-color: getCssVar(input-number, disabled-bg-color);
+    border-color: getCssVar(input-number, disabled-border-color);
+    -webkit-text-fill-color: getCssVar(input-number, disabled-color);
   }
 
   // 只读模式显示
   @include m(readonly) {
-    color: getCssVar('form-item', 'readonly-color');
-    -webkit-text-fill-color: getCssVar('form-item', 'readonly-color');
+    color: getCssVar(input-number, readonly-color);
+    -webkit-text-fill-color: getCssVar(input-number, readonly-color);
     @include overflow-wrap;
   }
 
   // 单位后缀样式
   .#{bem('input-number','unit')} {
-    margin-left: rem(10px);
-    font-size: getCssVar('form-item', 'font-size');
+    margin-left: getCssVar(input-number, unit-margin-left);
+    font-size: getCssVar(input-number, font-size);
     font-style: normal;
   }
 
   .van-field__clear{
-    display: getCssVar(form-item-container,required-style);
+    display: getCssVar(input-number, clear-display);
   }
 }
\ No newline at end of file
diff --git a/src/editor/text-box/input/input.scss b/src/editor/text-box/input/input.scss
index 0558d4be556d059c8b88c432ab201faa1ed6a52c..10ec38696aa3fad99778a27c8d83837de8c81317 100644
--- a/src/editor/text-box/input/input.scss
+++ b/src/editor/text-box/input/input.scss
@@ -1,46 +1,68 @@
+$input: (
+  // 颜色
+  color: getCssVar(editor, default, text-color),
+  border-color: getCssVar(editor, default, border-color),
+  placeholder-color: getCssVar(editor, default, placeholder-color),
+  disabled-color: getCssVar(editor, disabled, text-color),
+  disabled-bg-color: getCssVar(editor, disabled, bg-color),
+  disabled-border-color: getCssVar(editor, disabled, border-color),
+  readonly-color: getCssVar(editor, readonly, text-color),
+  
+  // 字体大小
+  font-size: getCssVar(editor, default, font-size),
+
+  // 行高
+  line-height: getCssVar(editor, default, line-height),
+
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
+
+  // 清除按钮样式
+  clear-display: getCssVar(form-item-container, required-style),
+);
+
 @include b('input') {
+  @include set-component-css-var(input, $input);
+
   height: 100%;
-  text-align: getCssVar(form-item-container, editor-align);
+  text-align: getCssVar(input, text-align);
 
   @include b('input') {
-    font-size: getCssVar('form-item', 'font-size');
+    font-size: getCssVar(input, font-size);
   }
 
   input {
-    font-size: getCssVar('form-item', 'font-size');
-    line-height: getCssVar('form-item', 'line-height');
-    color: getCssVar('form-item', 'text-color');
-    border-color: getCssVar('form-item', 'border-color');
-    -webkit-text-fill-color: getCssVar('form-item', 'text-color');
+    font-size: getCssVar(input, font-size);
+    line-height: getCssVar(input, line-height);
+    color: getCssVar(input, color);
+    border-color: getCssVar(input, border-color);
+    -webkit-text-fill-color: getCssVar(input, color);
   }
 
   input::placeholder {
-    color: getCssVar('form-item', 'placeholder-color');
-    -webkit-text-fill-color: getCssVar('form-item', 'placeholder-color');
+    color: getCssVar(input, placeholder-color);
+    -webkit-text-fill-color: getCssVar(input, placeholder-color);
   }
 
   input:disabled {
-    color: getCssVar('form-item', 'disabled-color');
-    background-color: getCssVar('form-item', 'disabled-bg-color');
-    border-color: getCssVar('form-item', 'disabled-border-color');
-    -webkit-text-fill-color: getCssVar('form-item', 'disabled-color');
+    color: getCssVar(input, disabled-color);
+    background-color: getCssVar(input, disabled-bg-color);
+    border-color: getCssVar(input, disabled-border-color);
+    -webkit-text-fill-color: getCssVar(input, disabled-color);
   }
 
   @include m(readonly) {
-    color: getCssVar('form-item', 'readonly-color');
-    -webkit-text-fill-color: getCssVar('form-item', 'readonly-color');
+    color: getCssVar(input, readonly-color);
+    -webkit-text-fill-color: getCssVar(input, readonly-color);
   }
 
   // 单位后缀样式
   .#{bem('input','unit')} {
-    font-size: getCssVar('form-item', 'font-size');
+    font-size: getCssVar(input, font-size);
     font-style: normal;
   }
 
   .van-field__clear{
-    display: getCssVar(form-item-container,required-style);
-  }
-  .van-field__right-icon{
-    font-size: getCssVar('form-size', 'header-4');
+    display: getCssVar(input, clear-display);
   }
 }