diff --git a/CHANGELOG.md b/CHANGELOG.md
index a62b50f01f5ee893fa46d1d9c07099f0ae8883be..c04245e771d02505174755c0159dd602b6dc5053 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -74,6 +74,7 @@
 - 优化多数据加载更多、分组锚点样式
 - 调整标准菜单、图标菜单、列表菜单类名
 - 优化标准菜单、图标菜单、列表菜单等组件样式，不直接使用基础css变量，各组件定义专属变量
+- 表单编辑器样式变量抽取
 
 ### Fixed
 
diff --git a/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss b/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss
index cd0bc8c0119db70811c32748b73cff51b7b63fb4..d2e2f697f91ecfcc9447ac0c78477dd9668799ae 100644
--- a/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss
+++ b/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss
@@ -1,7 +1,32 @@
+$mpicker: (
+  // 颜色
+  icon-color: var(--van-field-right-icon-color),
+  placeholder-color: getCssVar(editor, default, placeholder-color),
+  readonly-color: getCssVar(editor, readonly, text-color),
+  select-item-bg-color: getCssVar(color, disabled, bg),
+
+  // 字体大小
+  font-size: getCssVar(editor, default, font-size),
+  icon-font-size: getCssVar(font-size, header, 5),
+
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
+
+  // 圆角
+  select-item-border-radius: getCssVar(border-radius, small),
+
+  // 间距
+  gap: getCssVar(spacing, tight),
+  select-item-gap: getCssVar(spacing, tight),
+  select-item-padding: getCssVar(spacing, tight),
+);
+
 /* mpicker 地址栏 */
 @include b(mpicker) {
+  @include set-component-css-var(mpicker, $mpicker);
+
   .van-field {
-    font-size: getCssVar(form-item, font-size);
+    font-size: getCssVar(mpicker, font-size);
 
     &::after {
       display: none;
@@ -10,8 +35,9 @@
 
   .van-field__right-icon {
     align-items: center;
+
     button {
-      color: var(--van-field-right-icon-color);
+      color: getCssVar(mpicker, icon-color);
       border: none;
     }
   }
@@ -21,23 +47,16 @@
   }
 
   .van-field__control {
-    gap: getCssVar(spacing, 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);
+    gap: getCssVar(mpicker, gap);
   }
 
   @include e('placeholder') {
-    color: getCssVar(color, text, 3);
+    color: getCssVar(mpicker, placeholder-color);
   }
 
   @include e('pickup-search-icon'){
-    font-size: getCssVar(font-size,header,5);
     display: flex;
+    font-size: getCssVar(mpicker, icon-font-size);
   }
 
   @include m(disabled) {
@@ -46,26 +65,26 @@
   }
 
   @include m(readonly) {
-    color: getCssVar(form-item, readonly-color);
-    -webkit-text-fill-color: getCssVar(form-item, readonly-color);
+    color: getCssVar(mpicker, readonly-color);
+    -webkit-text-fill-color: getCssVar(mpicker, readonly-color);
   }
 
   @include b(mpicker-select-item) {
     display: flex;
-    gap: getCssVar(spacing, tight);
+    gap: getCssVar(mpicker, 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(mpicker, select-item-padding);
+    background-color: getCssVar(mpicker, select-item-bg-color);
+    border-radius: getCssVar(mpicker, select-item-border-radius);
   }
 
   .van-field__control--custom {
     display: flex;
     flex-direction: row;
-    justify-content: getCssVar(form-item-container, editor-align);
+    justify-content: getCssVar(mpicker, text-align);
   }
   &.#{bem('mpicker','','readonly')}{
-      text-align: getCssVar(form-item-container, editor-align);
+    text-align: getCssVar(mpicker, text-align);
   }
 }
diff --git a/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.scss b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.scss
index 63e810d7671ba905a69729b7abf87ce0d20485cd..6a38a4ab2e6274158b66f810d179086c10c01f88 100644
--- a/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.scss
+++ b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.scss
@@ -1,13 +1,33 @@
+$picker-select-view: (
+  // 颜色
+  icon-color: var(--van-field-right-icon-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, 5),
+
+  // 行高
+  line-height: getCssVar(editor, default, line-height),
+
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
+);
+
 @include b(picker-select-view) {
+  @include set-component-css-var(picker-select-view, $picker-select-view);
+
   width: 100%;
 
   .van-field {
-    font-size: getCssVar('form-item', 'font-size');
+    font-size: getCssVar(picker-select-view, font-size);
   }
 
   @include e('pickup-search-icon'){
-    font-size: getCssVar(font-size,header,4);
     display: flex;
+    font-size: getCssVar(picker-select-view, icon-font-size);
   }
 
   @include b(picker-select-view-view) {
@@ -15,16 +35,19 @@
   }
 
   .van-field__button {
-    height: getCssVar(form-item, line-height);
     display: flex;
     align-items: center;
+    height: getCssVar(picker-select-view, line-height);
+
     button {
-      color: var(--van-field-right-icon-color);
+      height: getCssVar(picker-select-view, line-height);
+      color: getCssVar(picker-select-view, icon-color);
       border: none;
-      height: getCssVar(form-item, line-height);
       border-radius: 0;
+
       --van-button-default-line-height: 1;
     }
+
     .van-button__text {
       display: flex;
       align-items: center;
@@ -32,23 +55,28 @@
     }
   }
 
+  input::placeholder {
+    color: getCssVar(picker-select-view, placeholder-color);
+    -webkit-text-fill-color: getCssVar(picker-select-view, placeholder-color);
+  }
+
   @include m(disabled) {
-    --van-field-input-text-color: #{getCssVar('form-item', 'disabled-color')};
+    --van-field-input-disabled-text-color: #{getCssVar(picker-select-view, disabled-color)};
 
-    color: getCssVar('form-item', 'disabled-color');
+    color: getCssVar(picker-select-view, disabled-color);
     pointer-events: none;
   }
 
   @include m(readonly) {
-    --van-field-input-text-color: #{getCssVar('form-item', 'readonly-color')};
+    --van-field-input-text-color: #{getCssVar(picker-select-view, readonly-color)};
 
-    color: getCssVar('form-item', 'readonly-color');
+    color: getCssVar(picker-select-view, readonly-color);
   }
 
   input {
-    text-align: getCssVar(form-item-container, editor-align);
+    text-align: getCssVar(picker-select-view, text-align);
   }
   &.#{bem('picker-select-view','','readonly')} {
-    text-align: getCssVar(form-item-container, editor-align);
+    text-align: getCssVar(picker-select-view, text-align);
   }
 }
diff --git a/src/editor/data-picker/ibiz-picker/ibiz-picker.scss b/src/editor/data-picker/ibiz-picker/ibiz-picker.scss
index 28b432b30b6a7f4bb931308a1329464622b84f9e..7a76c308600f0ac867466d16b57779f0549634bf 100644
--- a/src/editor/data-picker/ibiz-picker/ibiz-picker.scss
+++ b/src/editor/data-picker/ibiz-picker/ibiz-picker.scss
@@ -1,8 +1,50 @@
+$picker: (
+  // 颜色
+  icon-color: var(--van-field-right-icon-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),
+  pop-search-input-bg-color: getCssVar(color, fill, 2),
+  pop-list-item-selected-color: getCssVar(color, primary),
+
+  // 字体大小
+  font-size: getCssVar(editor, default, font-size),
+  icon-font-size: getCssVar(font-size, header, 5),
+
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
+
+  // 圆角
+  pop-search-border-radius: getCssVar(border-radius, medium),
+  pop-list-item-border-radius: 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('picker') {
+  @include set-component-css-var(picker, $picker);
+
   height: 100%;
 
   .van-field {
-    font-size: getCssVar('form-item', 'font-size');
+    font-size: getCssVar(picker, font-size);
 
     &::after {
       display: none;
@@ -10,8 +52,12 @@
   }
 
   .van-field__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     button {
-      color: var(--van-field-right-icon-color);
+      color: getCssVar(picker, icon-color);
       border: none;
     }
   }
@@ -43,104 +89,94 @@
     }
   }
 
-  @include e('transfer-item') {
-    padding: rem(5px);
-    cursor: pointer;
-
-    &:hover {
-      background-color: getCssVar('form-item', 'hover-bg-color');
-    }
-  }
-
-  @include e('link') {
-    width: rem(32px);
-    height: rem(32px);
-    padding: 0 rem(6px);
-  }
-
   @include m(disabled) {
     pointer-events: none;
   }
 
   @include m(readonly) {
-    color: getCssVar('form-item', 'readonly-color');
+    @include set-component-css-var(picker, $picker);
+
+    color: getCssVar(picker, readonly-color);
+  }
+
+  input::placeholder {
+    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(picker, disabled-color);
+    background-color: getCssVar(picker, disabled-bg-color);
+    border-color: getCssVar(picker, disabled-border-color);
+    -webkit-text-fill-color: getCssVar(picker, disabled-color);
   }
 
   @include m(readonly) {
-    color: getCssVar('form-item', 'readonly-color');
-    -webkit-text-fill-color: getCssVar('form-item', 'readonly-color');
-    text-align: getCssVar(form-item-container, editor-align);
+    color: getCssVar(picker, readonly-color);
+    -webkit-text-fill-color: getCssVar(picker, readonly-color);
+    text-align: getCssVar(picker, text-align);
   }
 
   input {
-    text-align: getCssVar(form-item-container, editor-align);
+    text-align: getCssVar(picker, text-align);
   }
 
   @include e('pickup-search-icon'){
-    font-size: getCssVar(font-size,header,5);
     display: flex;
+    font-size: getCssVar(picker, icon-font-size);
   }
   @include e('linkview-icon'){
-    font-size: getCssVar(font-size,header,5);
     display: flex;
+    font-size: getCssVar(picker, icon-font-size);
   }
 }
 @include b(picker-pop){
+  @include set-component-css-var(picker, $picker);
+
   display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
-  padding: getCssVar(spacing,base);
-  flex-direction: column;
+  padding: getCssVar(picker, 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(picker, pop-caption-margin-left);
     }
     @include m('right'){
-      display: getCssVar(form-item-container,required-style);
+      display: getCssVar(picker, 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(picker, pop-search-padding);
+    margin-top: getCssVar(picker, pop-search-margin-top);
     overflow: hidden;
-    border-radius: getCssVar(border-radius,medium);
+    border-radius: getCssVar(picker, 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(picker, pop-search-input-padding);
+
+      --van-cell-background:#{getCssVar(picker, pop-search-input-bg-color)};
 
       .van-field__left-icon{
         display: flex;
         align-items: center;
-        padding: 0 getCssVar(spacing,extra-tight);
+        padding: getCssVar(picker, pop-search-input-icon-padding);
       }
 
       .van-field__value{        
-        &::placeholder{
-          font-size: getCssVar(font-size,small);
-          color: getCssVar(color,text,3);
-        }
         input{
           text-align: left;
         }
@@ -153,22 +189,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(picker, pop-list-item-padding);
+      border-bottom: getCssVar(picker, 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(picker, pop-list-item-border-radius);
       @include when('bkcolor'){
-        padding: getCssVar(spacing,extra-tight)  getCssVar(spacing,base);
+        padding: getCssVar(picker, pop-list-bg-item-padding);
       }
     }
     @include m('selected'){
-      color: getCssVar(color,primary);
+      color: getCssVar(picker, pop-list-item-selected-color);
     }
   }
 }
diff --git a/src/editor/html/quill-editor-preview/quill-editor-preview.scss b/src/editor/html/quill-editor-preview/quill-editor-preview.scss
index ef70defa14ea466dfd67a00752d62359c9e5ee8a..4bcbb80b7b8c6721916eca402c2d726c6c8d21e3 100644
--- a/src/editor/html/quill-editor-preview/quill-editor-preview.scss
+++ b/src/editor/html/quill-editor-preview/quill-editor-preview.scss
@@ -1,41 +1,59 @@
+$quill-preview: (
+  // 颜色
+  placeholder-color: getCssVar(editor, default, placeholder-color),
+  btn-color: getCssVar(color, primary),
+
+  // 字体大小
+  font-size: getCssVar(font-size, header-4),
+
+  // 间距
+  editor-padding-right: rem(40px),
+  readonly-editor-padding-right: rem(15px),
+  disabled-editor-padding-right: rem(15px),
+);
+
 @include b(quill-preview) {
+    @include set-component-css-var(quill-preview, $quill-preview);
+
     position: relative;
     @include e(edit) {
         position: absolute;
         top: rem(12px);
         right: rem(15px);
-        font-size: getCssVar(font-size, header-4);
+        font-size: getCssVar(quill-preview, font-size);
     }
 
     .ql-editor {
-        padding-right: rem(40px);
+        padding-right: getCssVar(quill-preview, editor-padding-right);
     }
     @include m(readonly) {
         .ql-editor {
-            padding-right: rem(15px);
+            padding-right: getCssVar(quill-preview, readonly-editor-padding-right);
         }
     }
     @include m(disabled) {
         .ql-editor {
-            padding-right: rem(15px);
+            padding-right: getCssVar(quill-preview, disabled-editor-padding-right);
         }
     }
     @include e(image-popup) {
-        background-color: transparent;
         overflow: visible;
+        background-color: transparent;
     }
 
     .ql-editor.ql-blank {
         padding: 0;
+
         &::before {
-            font-style: normal;
-            color: getCssVar('form-item', 'placeholder-color');
             left: 0;
+            font-style: normal;
+            color: getCssVar(quill-preview, placeholder-color);
         }
     }
     @include m('show-collapse'){
         @include when('collapse'){            
             height: var(--default-height);
+
             .ql-editor{
                 overflow: hidden;
             }
@@ -43,7 +61,7 @@
     }
 }
 @include b('quill-preview-collapse-btn'){
-    color: getCssVar(color,primary);
     display: flex;
     align-items: center;
+    color: getCssVar(quill-preview, btn-color);
 }
\ No newline at end of file
diff --git a/src/editor/html/quill-editor/quill-editor.scss b/src/editor/html/quill-editor/quill-editor.scss
index 01b7bafaf0298e763cfb7c6cdc731c49dfb254b2..2863a54e36cf06ae70c4b117c930031e6d703b9b 100644
--- a/src/editor/html/quill-editor/quill-editor.scss
+++ b/src/editor/html/quill-editor/quill-editor.scss
@@ -1,25 +1,44 @@
+$quill: (
+  // 宽度
+  picker-width: rem(60px),
+
+  // 间距
+  footer-padding: rem(10px),
+  footer-button-margin-left: getCssVar(spacing, tight),
+);
+
 @include b(quill) {
+    @include set-component-css-var(quill, $quill);
+
     .van-action-sheet {
         --van-action-sheet-max-height: 100%;
+
         height: 100%;
         border-radius: 0;
     }
+
     .van-action-sheet__content {
         display: flex;
         flex-direction: column;
     }
     @include e(popup) {
+        @include set-component-css-var(quill, $quill);
+
         --van-action-sheet-max-height: 100%;
         --van-popup-round-radius: 0;
+
         height: 100%;
+
         .van-action-sheet__content {
             display: flex;
             flex-direction: column;
         }
+
         .ql-toolbar.ql-snow {
             .ql-header.ql-picker {
-                width: rem(60px);
+                width: getCssVar(quill, picker-width);
             }
+
             & + .ql-container.ql-snow {
                 flex: auto;
                 height: 0;
@@ -30,25 +49,29 @@
         flex: none;
     }
     @include e(content) {
-        flex: auto;
         display: flex;
-        height: 0;
+        flex: auto;
         flex-direction: column;
+        height: 0;
     }
     @include e(footer) {
-        flex: none;
-        padding: 10px;
         display: flex;
+        flex: none;
+        padding: getCssVar(quill, footer-padding);
+
         .van-button {
             width: 100%;
         }
+
         .van-button + .van-button {
-            margin-left: getCssVar(spacing, tight);
+            margin-left: getCssVar(quill, footer-button-margin-left);
         }
     }
+
     .ql-toolbar.ql-snow {
         text-align: left;
     }
+
     // quill多语言特殊处理，后续补充多语言
     @include m(zh-cn) {
         .ql-snow {
@@ -57,44 +80,54 @@
                 .ql-picker-item::before {
                     content: '默认'
                 }
+
                 .ql-picker-label[data-value=small]::before,
                 .ql-picker-item[data-value=small]::before {
                     content: '小'
                 }
+
                 .ql-picker-label[data-value=large]::before,
                 .ql-picker-item[data-value=large]::before {
                     content: '大'
                 }
+
                 .ql-picker-label[data-value=huge]::before,
                 .ql-picker-item[data-value=huge]::before {
                     content: '超大'
                 }
             }
+
             .ql-picker.ql-header {
                 .ql-picker-label::before,
                 .ql-picker-item::before {
                     content: '正文'
                 }
+
                 .ql-picker-label[data-value="1"]::before,
                 .ql-picker-item[data-value="1"]::before {
                     content: 'H 1';
                 }
+
                 .ql-picker-label[data-value="2"]::before,
                 .ql-picker-item[data-value="2"]::before {
                     content: 'H 2';
                 }
+
                 .ql-picker-label[data-value="3"]::before,
                 .ql-picker-item[data-value="3"]::before {
                     content: 'H 3';
                 }
+
                 .ql-picker-label[data-value="4"]::before,
                 .ql-picker-item[data-value="4"]::before {
                     content: 'H 4';
                 }
+
                 .ql-picker-label[data-value="5"]::before,
                 .ql-picker-item[data-value="5"]::before {
                     content: 'H 5';
                 }
+
                 .ql-picker-label[data-value="6"]::before,
                 .ql-picker-item[data-value="6"]::before {
                     content: 'H 6';
diff --git a/src/editor/map-picker/ibiz-map-picker/ibiz-map-picker.scss b/src/editor/map-picker/ibiz-map-picker/ibiz-map-picker.scss
index ba5d2b289c79e4d6f7083ef6308b4c33fb53501a..3a0fec4531197f4906ac3256fcb979903e09af03 100644
--- a/src/editor/map-picker/ibiz-map-picker/ibiz-map-picker.scss
+++ b/src/editor/map-picker/ibiz-map-picker/ibiz-map-picker.scss
@@ -1,33 +1,55 @@
-$popup-content-search: (
-  'input-padding-left': 36px,
-  'input-padding-right': 24px,
-);
-$popup-search-result-container: (
-  'bottom': 24px,
-  'placesearch-list-height': 30vh,
-);
-$popup-wrapper-footer: (
-  'height': 70px,
-);
-$popup-map-marker-text: (
-  'background-color': #3d93fd,
-  'font-size': 12px,
-  'padding': 4px 10px,
-  'border-radius': 4px,
+$map-picker: (
+  // 颜色
+  readonly-color: getCssVar(editor, readonly, text-color),
+  clear-btn-color: getCssVar(color, text, 3),
+  marker-text-color: getCssVar(color, white),
+  marker-text-bg-color: #3d93fd,
+
+  // 字体大小
+  clear-btn-font-size: getCssVar('width-icon', 'large'),
+  marker-text-font-size: 12px,
+    
+  // 行高
+  line-height: getCssVar(editor, default, line-height),
+
+  // 宽度
+  clear-btn-width: getCssVar('width-icon', 'large'),
+
+  // 高度
+  search-result-container-max-height: 30vh,
+  footer-height: 70px,
+
+  // 圆角
+  marker-text-border-radius: 4px,
+
+  // 间隔
+  clear-btn-padding: 0 0 0 getCssVar('spacing', 'loose'),
+  search-padding: getCssVar('spacing', 'tight'),
+  search-input-padding-left: 36px,
+  search-input-padding-right: 24px,
+  search-result-container-bottom: 24px,
+  search-result-container-padding: 0 getCssVar('spacing', 'tight'),
+  footer-gap: getCssVar('spacing', 'base'),
+  footer-padding: 0 getCssVar('spacing', 'tight'),
+  marker-text-padding: 4px 10px,
 );
 
 @include b(map-picker) {
+  @include set-component-css-var(map-picker, $map-picker);
+  
   @include m(readonly) {
     height: auto;
     overflow: auto;
-    line-height: getCssVar(editor, default, line-height);
-    color: getCssVar(form-item, readonly-color);
+    line-height: getCssVar(map-picker, line-height);
+    color: getCssVar(map-picker, readonly-color);
     word-break: break-word;
     white-space: pre-wrap;
   }
 }
 
 @include b(map-picker-popup) {
+  @include set-component-css-var(map-picker, $map-picker);
+
   width: 100%;
   height: 100%;
 
@@ -46,9 +68,9 @@ $popup-map-marker-text: (
 
     .van-button {
       position: relative;
-      width: getCssVar('width-icon', 'large');
+      width: getCssVar(map-picker, clear-btn-width);
       height: auto;
-      padding: 0 0 0 getCssVar('spacing', 'loose');
+      padding: getCssVar(map-picker, clear-btn-padding);
       background-color: transparent;
       border: none;
 
@@ -60,8 +82,8 @@ $popup-map-marker-text: (
     .van-icon-clear {
       position: absolute;
       left: 2px;
-      font-size: getCssVar('width-icon', 'large');
-      color: getCssVar(color, text, 3);
+      font-size: getCssVar(map-picker, clear-btn-font-size);
+      color: getCssVar(map-picker, clear-btn-color);
     }
   }
 }
@@ -82,13 +104,12 @@ $popup-map-marker-text: (
 }
 
 @include b(map-picker-popup-content-search) {
-  @include set-component-css-var(popup-content-search, $popup-content-search);
   position: relative;
   z-index: 999;
   width: 100%;
 
   .van-search {
-    padding: getCssVar('spacing', 'tight');
+    padding: getCssVar(map-picker, search-padding);
   }
 
   .van-search__content {
@@ -109,8 +130,8 @@ $popup-map-marker-text: (
   input {
     position: absolute;
     left: 0;
-    padding-left: getCssVar('popup-content-search', 'input-padding-left');
-    padding-right: getCssVar('popup-content-search', 'input-padding-right');
+    padding-right: getCssVar(map-picker, search-input-padding-right);
+    padding-left: getCssVar(map-picker, search-input-padding-left);
     margin: 0;
   }
 
@@ -136,17 +157,12 @@ $popup-map-marker-text: (
 }
 
 @include b(map-picker-popup-search-result-container) {
-  @include set-component-css-var(
-    popup-search-result-container,
-    $popup-search-result-container
-  );
-
   position: absolute;
-  bottom: getCssVar('popup-search-result-container', 'bottom');
+  bottom: getCssVar(map-picker, search-result-container-bottom);
   left: 0;
   display: block !important;
   width: 100%;
-  padding: 0 getCssVar('spacing', 'tight');
+  padding: getCssVar(map-picker, search-result-container-padding);
   overflow: hidden;
 
   .amap_lib_placeSearch {
@@ -156,10 +172,7 @@ $popup-map-marker-text: (
   }
 
   .amap_lib_placeSearch_list {
-    max-height: getCssVar(
-      'popup-search-result-container',
-      'placesearch-list-height'
-    );
+    max-height: getCssVar(map-picker, search-result-container-max-height);
     overflow-y: auto;
   }
 
@@ -170,14 +183,12 @@ $popup-map-marker-text: (
 }
 
 @include b(map-picker-popup-wrapper-footer) {
-  @include set-component-css-var(popup-wrapper-footer, $popup-wrapper-footer);
-
   display: flex;
-  gap: getCssVar('spacing', 'base');
+  gap: getCssVar(map-picker, footer-gap);
   align-items: center;
   justify-content: space-between;
-  height: getCssVar('popup-wrapper-footer', 'height');
-  padding: 0 getCssVar('spacing', 'tight');
+  height: getCssVar(map-picker, footer-height);
+  padding: getCssVar(map-picker, footer-padding);
 
   .van-button {
     width: 50%;
@@ -185,15 +196,13 @@ $popup-map-marker-text: (
 }
 
 @include b(map-picker-popup-map-marker-text) {
-  @include set-component-css-var(popup-map-marker-text, $popup-map-marker-text);
-
   position: absolute;
   top: -24px;
-  padding: getCssVar('popup-map-marker-text', 'padding');
-  font-size: getCssVar('popup-map-marker-text', 'font-size');
-  color: getCssVar(color, white);
+  padding: getCssVar(map-picker, marker-text-padding);
+  font-size: getCssVar(map-picker, marker-text-font-size);
+  color: getCssVar(map-picker, marker-text-color);
   white-space: nowrap;
-  background-color: getCssVar('popup-map-marker-text', 'background-color');
-  border-radius: getCssVar('popup-map-marker-text', 'border-radius');
+  background-color: getCssVar(map-picker, marker-text-bg-color);
+  border-radius: getCssVar(map-picker, marker-text-border-radius);
   transform: translateX(calc(-50% - (25px / 2)));
 }
diff --git a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss
index ce8da37640c755b320d764b8ebc412372a460a23..d3a34dabcd583475a152147d007c7a0c1e0353ca 100644
--- a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss
+++ b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss
@@ -1,9 +1,16 @@
 $markdown: (
-  'width': 100%,
+  // 颜色
+  color: getCssVar(editor, default, text-color),
+  disabled-color: getCssVar(editor, disabled, text-color),
+  readonly-color: getCssVar(editor, readonly, text-color),
+
+  // 宽度
+  width: 100%,
 );
 
 
 @include b(markdown) {
+  @include set-component-css-var('markdown', $markdown);
   @include b(markdown-cherry) {
     @include set-component-css-var('markdown', $markdown);
 
@@ -19,8 +26,8 @@ $markdown: (
   }
 
   @include b(markdown-image-popup){
-    background-color: transparent;
     overflow: visible;
+    background-color: transparent;
   }
 
   @include b(markdown-dialog) {
@@ -56,7 +63,7 @@ $markdown: (
 
   .theme__light,
   .theme__dark {
-    color: getCssVar(form-item, text-color);
+    color: getCssVar('markdown', 'color');
   }
 
   .cherry-markdown h1,
@@ -89,19 +96,18 @@ $markdown: (
   }
 
   @include m(disabled) {
-    color: getCssVar('form-item', 'disabled-color');
+    color: getCssVar('markdown', 'disabled-color');
 
     .cherry {
-      color: getCssVar('form-item', 'disabled-color');
-
+      color: getCssVar('markdown', 'disabled-color');
     }
   }
 
   @include m(readonly) {
-    --van-field-input-text-color: #{getCssVar('form-item', 'readonly-color')};
+    --van-field-input-text-color: #{getCssVar('markdown', 'readonly-color')};
 
     .cherry {
-      color: getCssVar('form-item', 'readonly-color');
+      color: getCssVar('markdown', 'readonly-color');
     }
   }
 }
\ No newline at end of file
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 d41b590c97ee8e5a68cf0ef44ccbcc1af03cfe67..b1c8897385235ed44e8f434b55912faf3c416fc4 100644
--- a/src/editor/upload/ibiz-file-upload/ibiz-file-upload.scss
+++ b/src/editor/upload/ibiz-file-upload/ibiz-file-upload.scss
@@ -1,4 +1,38 @@
+$file-upload: (
+  // 颜色
+  btn-color: getCssVar(color, text, 2),
+  preview-item-bg-color: getCssVar(color, disabled, bg),
+  preview-item-action-color: getCssVar(color, bg, overlay),
+
+  // 字体大小
+  btn-font-size: getCssVar(font-size, header-4),
+  preview-item-text-font-size: rem(14px),
+
+  // 圆角
+  preview-item-border-radius: getCssVar(border-radius, small),
+  preview-item-img-border-radius: rem(4px),
+
+  // 宽度
+  btn-width: rem(20px),
+  preview-item-img-width: rem(40px),
+  preview-item-action-width: rem(20px),
+  input-width: 1.25rem,
+
+  // 高度
+  btn-height: rem(20px),
+  preview-item-img-height: rem(40px),
+
+  // 间距
+  preview-margin-top: rem(10px),
+  preview-item-padding: 0 getCssVar(spacing, tight),
+  preview-item-margin-top: getCssVar(spacing, tight),
+  preview-item-img-padding: rem(6px),
+  preview-item-text-padding-left: getCssVar(spacing, tight),
+);
+
 @include b('file-upload') {
+  @include set-component-css-var(file-upload, $file-upload);
+
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -13,10 +47,10 @@
   }
 
   @include b('file-upload-button') {
-    width: rem(20px);
-    height: rem(20px);
-    font-size: getCssVar('font-size', header-4);
-    color: getCssVar('color', 'text', 2);
+    width: getCssVar(file-upload, btn-width);
+    height: getCssVar(file-upload, btn-height);
+    font-size: getCssVar(file-upload, btn-font-size);
+    color: getCssVar(file-upload, btn-color);
     background: transparent;
     border: none;
     border-radius: 50%;
@@ -32,25 +66,9 @@
     }
   }
 
-  @include b(file-upload-item-cover) {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    font-size: rem(12px);
-    line-height: initial;
-    color: #fff;
-    text-align: center;
-    background: getCssVar(color, overlay, bg);
-  }
-
   @include b(file-upload-preview) {
     width: 100%;
-    margin-top: rem(10px);
+    margin-top: getCssVar(file-upload, preview-margin-top);
   }
 
   @include b(file-upload-preview-item) {
@@ -58,10 +76,10 @@
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    padding: 0 getCssVar('spacing', 'tight');
-    margin-bottom: getCssVar('spacing', 'tight');
-    background: getCssVar(color, disabled, bg);
-    border-radius: getCssVar('border-radius', 'small');
+    padding: getCssVar(file-upload, preview-item-padding);
+    margin-bottom: getCssVar(file-upload, preview-item-margin-top);
+    background: getCssVar(file-upload, preview-item-bg-color);
+    border-radius: getCssVar(file-upload, preview-item-border-radius);
 
     &:last-child {
       margin: 0;
@@ -71,15 +89,15 @@
 
   @include b(file-upload-preview-item-img) {
     flex-shrink: 0;
-    width: rem(40px);
-    min-width: rem(40px);
-    height: rem(40px);
-    padding: rem(6px);
+    width: getCssVar(file-upload, preview-item-img-width);
+    min-width: getCssVar(file-upload, preview-item-img-width);
+    height: getCssVar(file-upload, preview-item-img-height);
+    padding: getCssVar(file-upload, preview-item-img-padding);
 
     img {
       width: 100%;
       height: 100%;
-      border-radius: rem(4px);
+      border-radius: getCssVar(file-upload, preview-item-img-border-radius);
     }
   }
 
@@ -87,16 +105,16 @@
     display: flex;
     flex-grow: 1;
     align-items: center;
-    width: calc(100% - #{rem(20px)});
+    width: calc(100% - #{getCssVar(file-upload, preview-item-action-width)});
   }
 
   @include b(file-upload-preview-item-text) {
     display: flex;
     flex: 1;
     align-items: center;
-    width: calc(100% - #{rem(40px)});
-    padding-left: getCssVar('spacing', 'tight');
-    font-size: rem(14px);
+    width: calc(100% - #{getCssVar(file-upload, preview-item-img-width)} - #{getCssVar(file-upload, preview-item-action-width)});
+    padding-left: getCssVar(file-upload, preview-item-text-padding-left);
+    font-size: getCssVar(file-upload, preview-item-text-font-size);
   }
 
   @include b(file-upload-preview-item-name) {
@@ -112,18 +130,19 @@
     flex-shrink: 0;
     align-items: center;
     justify-content: flex-end;
-    width: rem(20px);
-    color: getCssVar(color, overlay, bg);
+    width: getCssVar(file-upload, preview-item-action-width);
+    color: getCssVar(file-upload, preview-item-action-color);
     text-align: right;
   }
 
   .van-uploader__input-wrapper {
     width: 100%;
     text-align: right;
+
     input {
       right: 0;
       left: auto;
-      width: 1.25rem;
+      width: getCssVar(file-upload, input-width);
     }
   }
 
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 920cf7cf4e68c14c28a005519c1e6d0cfa05bdc9..3be2f29b4143e8ed352c394d68d6ea437d46394a 100644
--- a/src/editor/upload/ibiz-image-select/ibiz-image-select.scss
+++ b/src/editor/upload/ibiz-image-select/ibiz-image-select.scss
@@ -1,7 +1,24 @@
+$image-select: (
+  // 圆角
+  border-radius: rem(4px),
+
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
+
+  // 宽度
+  width: var(--van-uploader-size),
+
+  // 高度
+  height: 100%,
+);
+
 @include b('image-select') {
+  @include set-component-css-var(image-select, $image-select);
+
   display: flex;
   flex-direction: row;
-  justify-content: getCssVar(form-item-container, editor-align);
+  justify-content: getCssVar(image-select, text-align);
+
   .van-uploader__preview {
     .van-uploader__file-icon {
       display: none;
@@ -30,7 +47,7 @@
     img {
       width: 100%;
       height: 100%;
-      border-radius: .04rem;
+      border-radius: getCssVar(image-select, border-radius);
     }
   }
 
@@ -40,7 +57,7 @@
   }
 
   .van-uploader {
-    width: var(--van-uploader-size);
-    height: 100%;
+    width: getCssVar(image-select, width);
+    height: getCssVar(image-select, height);
   }
 }
\ No newline at end of file
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 b5ead6b6011c61ed99c7d9aefe70dfb9a642536d..209a6a62e2ee4de66929d0f4974c163e6c65f313 100644
--- a/src/editor/upload/ibiz-image-upload/ibiz-image-upload.scss
+++ b/src/editor/upload/ibiz-image-upload/ibiz-image-upload.scss
@@ -1,4 +1,14 @@
+$image-upload: (
+  // 圆角
+  border-radius: rem(4px),
+
+  // 文本对齐
+  text-align: getCssVar(form-item-container, editor-align),
+);
+
 @include b('image-upload') {
+  @include set-component-css-var(image-upload, $image-upload);
+
   .van-uploader__preview {
     .van-uploader__file-icon {
       display: none;
@@ -27,14 +37,14 @@
     img {
       width: 100%;
       height: 100%;
-      border-radius: rem(4px);
+      border-radius: getCssVar(image-upload, border-radius);
     }
   }
 
   .van-uploader {
     display: flex;
     flex-direction: row;
-    justify-content: getCssVar(form-item-container, editor-align);
+    justify-content: getCssVar(image-upload, text-align);
   }
 }