diff --git a/CHANGELOG.md b/CHANGELOG.md
index 54c37189076f569710f97b1d6f4d92bc7024fc85..9603a3e13705142b6403fc3dc18f439a5737e49e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 
 - 新增重复器表格组件
 - 新增主题切换组件（直接内容项扩展，预置类型为THEME_TOGGLING）
+
 ### Change
 
 - 更新公共组件，面板组件编辑器样式变量抽取
@@ -19,6 +20,10 @@
 - 操作栏门户部件不显示标题区的操作按钮
 - 优化树部件样式，增加面包屑样式权重
 - 表单成员组件样式变量整理，并转换像素单位为rem
+- 表单项、表单多数据部件样式整理
+- 应用菜单、列表菜单、图标菜单样式整理
+- 列表、卡片、多数据部件样式整理
+- 编辑器组件样式统一整理
 
 ### Fixed
 
diff --git a/src/control/app-menu-icon-view/app-menu-icon-view.scss b/src/control/app-menu-icon-view/app-menu-icon-view.scss
index a3c83e2dd6252b295cd704d7dbf873e536410a87..e46a4aaece48cf5f699f1f6547a9160c0d674618 100644
--- a/src/control/app-menu-icon-view/app-menu-icon-view.scss
+++ b/src/control/app-menu-icon-view/app-menu-icon-view.scss
@@ -1,29 +1,20 @@
 $control-appmenu-iconview: (
-  // Color
-  'color-bg': getCssVar('color', 'bg', 2), // 菜单背景色
-  'color-item-text': getCssVar('color', 'text', 0), // 菜单项文字颜色
-  'color-nodata-ph-item-text': getCssVar('color', 'text', 0), // 分组项无子数据时占位项文字颜色
-  'color-group-item-bg': getCssVar('color', 'bg', 0), // 菜单分组项背景色
-  'color-group-item-text': getCssVar('color', 'text', 1), // 菜单分组项文字颜色
-  // Spacing
-  'spacing-item-icon-margin': getCssVar('spacing', 'extra-tight'), // 菜单项图标间距
+  'color-bg': getCssVar('color', 'bg', 1), // 菜单背景色
+  'color-text': getCssVar('color', 'text', 0), // 菜单项文字颜色
+  'color-group-bg': getCssVar('color', 'bg', 0), // 菜单分组项背景色
+  'color-group-text': getCssVar('color', 'text', 1), // 菜单分组项文字颜色
+  'spacing-icon-gap': getCssVar('spacing', 'extra-tight'), // 菜单项图标间距
   'spacing-item-padding': getCssVar('spacing', 'base-tight')
     getCssVar('spacing', 'base'), // 菜单项文字间距
-  'spacing-nodata-ph-item-padding': getCssVar('spacing', 'base-tight')
-    getCssVar('spacing', 'base'), // 菜单分组项无子数据时占位项文字间距
-  'spacing-group-item-padding': getCssVar('spacing', 'base'), // 菜单分组项文字间距
-  'spacing-group-item-icon-margin': 0 getCssVar('spacing', 'extra-tight') 0 0, // 菜单分组项图标间距
-  'spacing-group-item-counter-margin': 0 0 0 getCssVar('spacing', 'tight'), // 菜单分组项计数器间距
-  // Font
-  'font-item-text-font-size': getCssVar('font-size', 'small'), // 菜单项文字字体大小
-  'font-item-icon-font-size': getCssVar('height-control', 'default'), // 菜单项图标字体大小
-  'font-nodata-ph-item-font-size': getCssVar('font-size', 'regular'), // 菜单分组项无子数据时占位项文字字体大小
-  'font-group-item-font-size': getCssVar('font-size', 'header-6'), // 菜单分组项文字字体大小
-  // Other
-  'position-item-counter-left': calc(100% - getCssVar('spacing', 'tight')), // 项计数器左边距
-  'icon-group-item-icon-size': getCssVar('width-icon', 'medium'), // 分组项图标大小
+  'spacing-group-padding': getCssVar('spacing', 'base'), // 菜单分组项文字间距
+  'spacing-group-icon-gap': getCssVar('spacing', 'extra-tight'), // 菜单分组项图标间距
+  'spacing-group-counter-margin': 0 0 0 getCssVar('spacing', 'tight'), // 菜单分组项计数器间距
+  'font-text-fontSize': getCssVar('font-size', 'small'), // 菜单项文字字体大小
+  'font-icon-fontSize': getCssVar('height-control', 'default'), // 菜单项图标字体大小
+  'font-group-fontSize': getCssVar('font-size', 'header-6'), // 菜单分组项文字字体大小
+  'font-group-lineHeight': getCssVar('font-size', 'header-5'), // 菜单分组项文字字体大小
+  'icon-group-iconSize': getCssVar('width-icon', 'medium'), // 分组项图标大小
   'line-clamp-item-caption': 2, // 项文字行数限制
-  'icon-item-icon-size': getCssVar('height-control', 'default'), // 菜单项图标大小
 );
 
 @include b(control-appmenu-iconview) {
@@ -44,7 +35,7 @@ $control-appmenu-iconview: (
       width: 100%;
       height: 100%;
       padding: getCssVar('control-appmenu-iconview', 'spacing-item-padding');
-      color: getCssVar('control-appmenu-iconview', 'color-item-text');
+      color: getCssVar('control-appmenu-iconview', 'color-text');
     }
 
     @include m(icon) {
@@ -52,9 +43,9 @@ $control-appmenu-iconview: (
       display: flex;
       align-items: center;
       justify-content: center;
-      width: getCssVar('control-appmenu-iconview', 'icon-item-icon-size');
-      margin-bottom: getCssVar('control-appmenu-iconview', 'spacing-item-icon-margin');
-      font-size: getCssVar('control-appmenu-iconview', 'font-item-icon-font-size');
+      width: getCssVar('control-appmenu-iconview', 'font-icon-fontSize');
+      margin-bottom: getCssVar('control-appmenu-iconview', 'spacing-icon-gap');
+      font-size: getCssVar('control-appmenu-iconview', 'font-icon-fontSize');
 
       .#{bem(icon)} {
         width: 100%;
@@ -79,8 +70,8 @@ $control-appmenu-iconview: (
     @include m(counter) {
       position: absolute;
       top: 0;
-      left: getCssVar('control-appmenu-iconview', 'position-item-counter-left');
-      transform: translateY(-50%);
+      right: 0;
+      transform: translate(80%, -50%);
     }
 
     @include m(caption) {
@@ -88,7 +79,7 @@ $control-appmenu-iconview: (
       flex: 1;
       height: fit-content;
       overflow: hidden;
-      font-size: getCssVar('control-appmenu-iconview', 'font-item-text-font-size');
+      font-size: getCssVar('control-appmenu-iconview', 'font-text-fontSize');
       text-overflow: ellipsis;
 
       // 图标菜单最大俩行显示
@@ -106,23 +97,21 @@ $control-appmenu-iconview: (
 
   // 分组样式
   @include e(group-item) {
-    flex-basis: 100% !important;
     @include m(container) {
       width: 100%;
     }
     @include m(header) {
       display: flex;
       align-items: center;
-      padding: getCssVar('control-appmenu-iconview', 'spacing-group-item-padding');
-      font-size: getCssVar('control-appmenu-iconview', 'font-group-item-font-size');
-      color: getCssVar('control-appmenu-iconview', 'color-group-item-text');
-      background-color: getCssVar('control-appmenu-iconview', 'color-group-item-bg');
+      padding: getCssVar('control-appmenu-iconview', 'spacing-group-padding');
+      font-size: getCssVar('control-appmenu-iconview', 'font-group-fontSize');
+      color: getCssVar('control-appmenu-iconview', 'color-group-text');
+      background-color: getCssVar('control-appmenu-iconview', 'color-group-bg');
 
       .#{bem(icon)} {
-        min-width: getCssVar('control-appmenu-iconview', 'icon-group-item-icon-size');
-        margin: getCssVar(
+        margin-right: getCssVar(
           'control-appmenu-iconview',
-          'spacing-group-item-icon-margin'
+          'spacing-group-icon-gap'
         );
       }
     }
@@ -130,8 +119,11 @@ $control-appmenu-iconview: (
       display: flex;
       width: 100%;
     }
+    @include m(caption) {
+      line-height: getCssVar('control-appmenu-iconview', 'font-group-lineHeight');
+    }
     @include m(counter) {
-      margin: getCssVar('control-appmenu-iconview', 'spacing-group-item-counter-margin');
+      margin: getCssVar('control-appmenu-iconview', 'spacing-group-counter-margin');
     }
   }
 
@@ -142,8 +134,8 @@ $control-appmenu-iconview: (
 
 @include b(control-appmenu-iconview-no-data) {
   width: 100%;
-  padding: getCssVar(control-appmenu-iconview, spacing-nodata-ph-item-padding);
-  font-size: getCssVar(control-appmenu-iconview, font-nodata-ph-item-font-size);
-  color: getCssVar(control-appmenu-iconview, color-nodata-ph-item-text);
+  padding: getCssVar(control-appmenu-iconview, spacing-item-padding);
+  font-size: getCssVar(control-appmenu-iconview, font-item-fontSize);
+  color: getCssVar(control-appmenu-iconview, color-text);
   text-align: center;
 }
diff --git a/src/control/app-menu-icon-view/app-menu-icon-view.tsx b/src/control/app-menu-icon-view/app-menu-icon-view.tsx
index 070c32ec47b7e954faf8fd17cffdd1082dd765b2..4bcef085ae04c41f9690e310341f9321aef609d4 100644
--- a/src/control/app-menu-icon-view/app-menu-icon-view.tsx
+++ b/src/control/app-menu-icon-view/app-menu-icon-view.tsx
@@ -45,7 +45,9 @@ export const AppMenuIconViewControl = defineComponent({
                       <div class={ns.em('group-item', 'container')}>
                         <div class={ns.em('group-item', 'header')}>
                           {[
-                            <iBizIcon icon={menuItem.sysImage}></iBizIcon>,
+                            menuItem.sysImage ? (
+                              <iBizIcon icon={menuItem.sysImage}></iBizIcon>
+                            ) : null,
                             <span class={ns.em('group-item', 'caption')}>
                               {menuItem.caption}
                             </span>,
@@ -136,7 +138,7 @@ export const AppMenuIconViewControl = defineComponent({
       <div
         class={[this.ns.b(), this.ns.m(this.modelData.id?.toLocaleLowerCase())]}
       >
-        <van-grid clickable column-num={this.c.columnNum} border={false}>
+        <van-grid clickable column-num={1} border={false}>
           {state.mobMenuItems.map(item => this.renderMenuItem(item))}
         </van-grid>
         {model.enableCustomized && (
diff --git a/src/control/app-menu-list-view/app-menu-list-view.scss b/src/control/app-menu-list-view/app-menu-list-view.scss
index 603a29cadbea8f147db90ff8d56d9aad920caac0..7a2fd27165e679bb087e06409899a37c0ba9c47c 100644
--- a/src/control/app-menu-list-view/app-menu-list-view.scss
+++ b/src/control/app-menu-list-view/app-menu-list-view.scss
@@ -1,21 +1,12 @@
 $control-appmenu-listview: (
-  // Color
   color-item-bg: getCssVar(color, bg, 2),
   color-item-text: getCssVar(color, text, 0), // 菜单项文字颜色
-  color-nodata-ph-item-text: getCssVar('color', 'text', 0), // 菜单分组项无子数据时占位项文字颜色
-  // Spacing
   spacing-item-padding: getCssVar('spacing', 'tight') getCssVar('spacing', 'base'), // 菜单项间距
   spacing-group-item-icon-margin: 0 getCssVar('spacing', 'extra-tight') 0 0, // 分组项图标间距
   spacing-icon-counter-margin: 0 0 0 getCssVar('spacing', 'tight'), // 菜单项图标计数器间距
   spacing-item-icon-margin: 0 getCssVar('spacing', 'extra-tight') 0 0, // 菜单项图标间距
-  spacing-nodata-ph-item-padding: getCssVar('spacing', 'base-tight')
-    getCssVar('spacing', 'base'), // 菜单分组项无子数据时占位项间距
-  // Font
-  font-item-font-size: getCssVar(font-size, regular), // 菜单项字体大小
-  font-icon-font-size: getCssVar(font-size, regular), // 菜单项图标字体大小
-  font-nodata-ph-item-font-size: getCssVar('font-size', 'regular'), // 菜单分组项无子数据时占位项字体大小
-  // Other
-  icon-item-icon-size: getCssVar(font-size, regular), // 菜单项图标大小
+  font-item-fontSize: getCssVar(font-size, regular), // 菜单项字体大小
+  font-icon-fontSize: getCssVar(font-size, regular), // 菜单项图标字体大小
 );
 
 @include b(control-appmenu-listview) {
@@ -40,7 +31,7 @@ $control-appmenu-listview: (
   @include e(item) {
     &.#{bem(control-appmenu-listview, item)} {
       padding: getCssVar(control-appmenu-listview, spacing-item-padding);
-      font-size: getCssVar(control-appmenu-listview, font-item-font-size);
+      font-size: getCssVar(control-appmenu-listview, font-item-fontSize);
       color: getCssVar(control-appmenu-listview, color-item-text);
       background-color: getCssVar(control-appmenu-listview, color-item-bg);
 
@@ -62,15 +53,9 @@ $control-appmenu-listview: (
       display: flex;
       align-items: center;
       justify-content: center;
-      width: getCssVar(control-appmenu-listview, icon-item-icon-size);
+      width: getCssVar(control-appmenu-listview, font-icon-fontSize);
       margin: getCssVar(control-appmenu-listview, spacing-item-icon-margin);
-      font-size: getCssVar(control-appmenu-listview, font-icon-font-size);
-
-      @include b(icon) {
-        display: flex;
-        align-items: center;
-        margin-right: getCssVar(control-appmenu-listview, icon-text-margin);
-      }
+      font-size: getCssVar(control-appmenu-listview, font-icon-fontSize);
     }
 
     // 主文本样式
@@ -91,8 +76,8 @@ $control-appmenu-listview: (
 }
 
 @include b(control-appmenu-listview-no-data) {
-  padding: getCssVar(control-appmenu-listview, spacing-nodata-ph-item-padding);
-  font-size: getCssVar(control-appmenu-listview, font-nodata-ph-item-font-size);
-  color: getCssVar(control-appmenu-listview, color-nodata-ph-item-text);
+  padding: getCssVar(control-appmenu-listview, spacing-item-padding);
+  font-size: getCssVar(control-appmenu-listview, font-item-fontSize);
+  color: getCssVar(control-appmenu-listview, color-item-text);
   text-align: center;
 }
diff --git a/src/control/app-menu/app-menu.scss b/src/control/app-menu/app-menu.scss
index f12ec054e5a91958da6dc58fda924b799357faab..0d2574c12796bb214042c9e342fea68a1dd52b9a 100644
--- a/src/control/app-menu/app-menu.scss
+++ b/src/control/app-menu/app-menu.scss
@@ -1,10 +1,8 @@
 $control-appmenu: (
-  // Width/Height
+  // 宽高
   'height-menu': rem(50px), // 菜单高度
-  // Font
-  'font-item-font-size': getCssVar(font-size, header-6), // 项图标字体大小
-  // Other
-  'position-item-counter-left': calc(100% - getCssVar('spacing', 'extra-tight')), // 项计数器偏移距离
+  // 字体
+  'font-fontSize': getCssVar(font-size, header-6), // 项图标字体大小
 );
 
 @include b(control-appmenu) {
@@ -13,20 +11,20 @@ $control-appmenu: (
   width: 100%;
   height: 100%;
 
-  @include e(item-icon-container) {
+  @include e(item-icon) {
     position: relative;
     display: flex;
     align-items: center;
     width: auto;
-    font-size: getCssVar('control-appmenu', 'font-item-font-size');
+    font-size: getCssVar('control-appmenu', 'font-fontSize');
     text-align: center;
 
-    @include m(counter) {
-      position: absolute;
-      top: 0;
-      left: getCssVar('control-appmenu', 'position-item-counter-left');
-      transform: translateY(-50%);
-    }
+  }
+  @include e(counter) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(80%, -50%);
   }
 
   @include e(item-caption) {
diff --git a/src/control/app-menu/app-menu.tsx b/src/control/app-menu/app-menu.tsx
index ce616909b2103e0e95b45f5a911228a45acb7694..75656f97a4215af0fe23ebab663c6f6ef6fe958e 100644
--- a/src/control/app-menu/app-menu.tsx
+++ b/src/control/app-menu/app-menu.tsx
@@ -119,7 +119,7 @@ export const AppMenuControl = defineComponent({
               <van-tabbar-item name={item.id}>
                 {{
                   icon: () => (
-                    <div class={this.ns.e('item-icon-container')}>
+                    <div class={this.ns.e('item-icon')}>
                       <iBizIcon
                         slot='icon'
                         icon={
@@ -130,7 +130,7 @@ export const AppMenuControl = defineComponent({
                       ></iBizIcon>
                       {!isNil(counterNum) && (
                         <iBizBadge
-                          class={this.ns.em('item-icon-container', 'counter')}
+                          class={this.ns.e('counter')}
                           value={counterNum}
                         />
                       )}
diff --git a/src/control/data-view/data-view.scss b/src/control/data-view/data-view.scss
index 5d99d07eb8a4a467edf1ad13028a81beeb1a5efa..19b1f4cdeec418611fbfcbb7328ccef8200cc214 100644
--- a/src/control/data-view/data-view.scss
+++ b/src/control/data-view/data-view.scss
@@ -1,19 +1,19 @@
 $control-dataview: (
-  // Color
+  // 颜色
   color-text: getCssVar(color, text, 0),
   color-bg: getCssVar(color, bg, 0),
   color-item-active: getCssVar(color, primary, light, default),
   color-group-bg: getCssVar(color, bg, 0),
   color-group-text: getCssVar(color, text, 1),
-  // Spacing
+  // 间距
   spacing-item-padding: getCssVar(spacing, base-tight) getCssVar(spacing, base),
   spacing-padding: getCssVar(spacing, tight) getCssVar(spacing, base),
   spacing-item-gap: getCssVar(spacing, base, tight),
   spacing-group-padding: getCssVar(spacing, tight) getCssVar(spacing, base),
-  // Font
+  // 字体
   font-group-fontSize: getCssVar(font-size, header-6),
   font-group-lineHeight: getCssVar(height-control, default),
-  // Other
+  // 其他
   shadow: getCssVar(shadow, elevated),
 );
 
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 095be7d7a1a57bc6d210a37ea224e9ba387884a0..c2343e3a6dd0be5a3b3cd2697ef79492eab4b3ff 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,73 +1,55 @@
 /* stylelint-disable order/properties-order */
 $form-item-container: (
   // 颜色
-  require-mark-color: getCssVar(color, danger),
-  bg-color: getCssVar(color, bg, 2),
-  label-text-color: getCssVar(color, text, 0),
-  underline-color: getCssVar(color, border),
+  color-bg: getCssVar(color, bg, 2),
+  color-underline: getCssVar(color, border),
+  color-error: getCssVar(color, danger),
 
   // 宽度
-  label-width: rem(130px),
-  underline-width: calc(100% - getCssVar(spacing, base) * 2),
+  width-label: rem(130px),
+  width-underline: calc(100% - getCssVar(spacing, base) * 2),
+  width-border: calc(100% - getCssVar(spacing, base) * 2),
 
   // 高度
-  editor-min-height: calc(
-    getCssVar(editor, default, line-height) + 2 * getCssVar(spacing, extra-tight)
-  ),
-  border-editor-min-height: calc(
-    getCssVar(editor, default, line-height) + 2 * getCssVar(spacing, extra-tight)
-  ),
+  height-underLine: getCssVar('border-thickness', 'control'),
 
   // 间距
-  container-padding: getCssVar(spacing, base),
-  left-container-padding: getCssVar(spacing, base),
-  error-margin-top: getCssVar(spacing, extra-tight),
-  container-error-padding: 0 getCssVar(spacing, base),
-  editor-padding: getCssVar(spacing, extra-tight) getCssVar(spacing, none)
+  spacing-container-padding: getCssVar(spacing, base),
+  spacing-editor-padding: getCssVar(spacing, extra-tight) getCssVar(spacing, none)
   getCssVar(spacing, extra-tight) getCssVar(spacing, none),
-  border-editor-padding: getCssVar(spacing, tight),
+  spacing-border-editor-padding: getCssVar(spacing, tight),
 
   // 圆角
-  border-radius: rem(4px),
-  
-  // 字体大小
-  label-font-size: getCssVar(font-size, header-6),
+  radius-border: getCssVar(border-radius, small),
 
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
+  // 字体
+  font-fontSize: getCssVar(font-size, header-6),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-error-fontSize: getCssVar(font-size, regular),
 
   // 边框
-  border: rem(1px) getCssVar(color, border) solid,
-  border-width: calc(100% - getCssVar(spacing, base) * 2),
+  border: getCssVar('border-thickness', 'control') getCssVar(color, border) solid,
 );
 
 $form-item-label: (
   // 颜色
-  text-color: getCssVar(color, text, 0),
-
+  color-text: getCssVar(color, text, 0),
   // 间距
-  icon-padding-right: getCssVar(spacing, extra-tight),
-
-  // 字体大小
-  font-size: getCssVar(font-size, header-5),
-
-  // 行高
-  line-height: 1,
+  spacing-icon-gap: getCssVar(spacing, extra-tight),
 );
 
 $form-item-popover: (
   // 颜色
-  link-color: getCssVar(color, link),
-
+  color-link: getCssVar(color, link),
   // 间距
-  padding: getCssVar(spacing, tight),
-  cell-padding: getCssVar(spacing, extra-tight) getCssVar(spacing, tight),
+  spacing-padding: getCssVar(spacing, tight),
+  spacing-cell-padding: getCssVar(spacing, extra-tight) getCssVar(spacing, tight),
 
   // 字体大小
-  font-size: getCssVar(font-size, header-6),
+  font-fontSize: getCssVar(font-size, header-6),
 
   // 边框
-  cell-border: 1px solid getCssVar(color, border),
+  border: getCssVar('border-thickness', 'control') solid getCssVar(color, border),
 );
 
 // 表单项基础样式
@@ -78,39 +60,29 @@ $form-item-popover: (
   position: relative;
   width: 100%;
   height: 100%;
-  padding: getCssVar(form-item-container, container-padding);
-
-  // margin: getCssVar(form-item-container, container-margin);
-  font-size: getCssVar(form-item, font-size);
-  background-color: getCssVar(form-item-container, bg-color);
-  border-width: getCssVar(form-item-container, border-width);
-  border-radius: getCssVar(form-item-container, border-radius);
+  padding: getCssVar(form-item-container, spacing-container-padding);
+  font-size: getCssVar(form-item-container, font-fontSize);
+  background-color: getCssVar(form-item-container, color-bg);
+  border-width: getCssVar(form-item-container, width-border);
+  border-radius: getCssVar(form-item-container, radius-border);
 
   @include when(show-underLine) {
     &::after {
       position: absolute;
       z-index: 1;
-      width: getCssVar(form-item-container, underline-width);
-      height: rem(1px);
+      width: getCssVar(form-item-container, width-underline);
+      height: getCssVar(form-item-container, height-underLine);
       content: '';
-      background-color: getCssVar(form-item-container, underline-color);
+      background-color: getCssVar(form-item-container, color-underline);
       transform: scaleY(0.5);
     }
   }
 
   @include when(show-border) {
     .#{bem(form-item-container, editor)} {
-      margin-top: rem(4px);
-      min-height: getCssVar(form-item-container, border-editor-min-height);
       outline: getCssVar(form-item-container, border);
-      border-radius: getCssVar(form-item-container, border-radius);
-      padding: getCssVar(form-item-container, border-editor-padding);
-    }
-    &.#{bem(form-item-container, '', bottom)} {
-      .#{bem(form-item-container, editor)} {
-        margin-top: 0;
-        margin-bottom: rem(4px);
-      }
+      border-radius: getCssVar(form-item-container, radius-border);
+      padding: getCssVar(form-item-container, spacing-border-editor-padding);
     }
   }
 
@@ -118,7 +90,7 @@ $form-item-popover: (
     &.van-popover {
       @include set-component-css-var('form-item-popover', $form-item-popover);
 
-      font-size: getCssVar(form-item-popover, font-size);
+      font-size: getCssVar(form-item-popover, font-fontSize);
 
       table {
         border-spacing: 0;
@@ -127,18 +99,18 @@ $form-item-popover: (
 
       table tr td,
       table tr th {
-        border: getCssVar(form-item-popover, cell-border);
-        padding: getCssVar(form-item-popover, cell-padding);
+        border: getCssVar(form-item-popover, border);
+        padding: getCssVar(form-item-popover, spacing-padding);
       }
     }
 
     @include m(content) {
       overflow: auto;
       max-height: 30vh;
-      padding: getCssVar(form-item-popover, padding);
+      padding: getCssVar(form-item-popover, spacing-padding);
 
       a {
-        color: getCssVar(form-item-popover, link-color);
+        color: getCssVar(form-item-popover, color-link);
       }
     }
   }
@@ -148,14 +120,14 @@ $form-item-popover: (
     flex-shrink: 0;
     align-items: center;
     position: relative;
-    width: getCssVar(form-item-container, label-width);
+    width: getCssVar(form-item-container, width-label);
     overflow: visible;
-    color: getCssVar(form-item-label, text-color);
-    height: getCssVar(form-item-container, line-height);
-    line-height: getCssVar(form-item-container, line-height);
+    color: getCssVar(form-item-label, color-text);
+    height: getCssVar(form-item-container, font-lineHeight);
+    line-height: getCssVar(form-item-container, font-lineHeight);
 
     @include m('icon') {
-      padding-right: getCssVar(form-item-label, icon-padding-right);
+      padding-right: getCssVar(form-item-label, spacing-icon-gap);
     }
 
     span {
@@ -163,15 +135,13 @@ $form-item-popover: (
 
       display: inline-block;
       width: 100%;
-      font-size: getCssVar(form-item-container, label-font-size);
-      text-align: getCssVar(form-item-container, label-align);
+      text-align: getCssVar(form-item-container, font-textAlign);
     }
   }
 
   // 编辑器
   @include e(editor) {
     width: 100%;
-    min-height: getCssVar(form-item-container, editor-min-height);
   }
 
   // 必填图标 *
@@ -179,12 +149,9 @@ $form-item-popover: (
     @include e(label) {
       &::before {
         position: absolute;
-        top: rem(3px);
-        left: rem(-10px);
+        left: calc(-1 * getCssVar(spacing, tight));
         display: inline-block;
-        height: 100%;
-        font-size: rem(14px);
-        color: getCssVar(form-item, error-color);
+        color: getCssVar(form-item-container, color-error);
         content: '*';
       }
     }
@@ -193,14 +160,14 @@ $form-item-popover: (
   // 错误border
   &.is-error {
     &::after {
-      background-color: getCssVar(form-item, error-color);
+      background-color: getCssVar(form-item-container, color-error);
     }
   }
 
   // 错误border
   &.is-error {
     @include b(form-item-container-content) {
-      border-color: getCssVar('form-item', 'error-color');
+      border-color: getCssVar(form-item-container, color-error);
     }
   }
 }
@@ -208,7 +175,7 @@ $form-item-popover: (
 @include b(form-item-container) {
   @include m(left) {
     .#{bem(form-item-container, editor)} {
-      min-height: getCssVar(form-item-container, line-height);
+      min-height: getCssVar(form-item-container, font-lineHeight);
     }
 
     &::after {
@@ -218,7 +185,7 @@ $form-item-popover: (
 
   @include m(right) {
     .#{bem(form-item-container, editor)} {
-      min-height: getCssVar(form-item-container, line-height);
+      min-height: getCssVar(form-item-container, font-lineHeight);
     }
 
     &::after {
@@ -229,7 +196,7 @@ $form-item-popover: (
     @include when(required) {
       @include e(label) {
         &::before {
-          right: rem(-10px);
+          right: calc(-1 * getCssVar(spacing, tight));
           left: auto;
         }
       }
@@ -242,25 +209,25 @@ $form-item-popover: (
   @include m(right) {
     @include e(editor) {
       position: relative;
-      width: calc(100% - getCssVar('form-item-container', 'label-width'));
+      width: calc(100% - getCssVar('form-item-container', 'width-label'));
     }
   }
 
   @include m(left) {
     @include e(editor) {
-      width: calc(100% - getCssVar('form-item-container', 'label-width'));
+      width: calc(100% - getCssVar('form-item-container', 'width-label'));
     }
   }
 
   @include m(top) {
     @include e(editor) {
-      padding: getCssVar(form-item-container, editor-padding);
+      padding: getCssVar(form-item-container, spacing-editor-padding);
     }
   }
 
   @include m(bottom) {
     @include e(editor) {
-      padding: getCssVar(form-item-container, editor-padding);
+      padding: getCssVar(form-item-container, spacing-editor-padding);
     }
   }
 
@@ -287,9 +254,9 @@ $form-item-popover: (
 @include b(form-item-container-error) {
   position: absolute;
   bottom: 0;
-  width: getCssVar(form-item-container, underline-width);
-  font-size: getCssVar('form-item', 'error-font-size');
-  line-height: getCssVar('form-item', 'font-size');
-  color: getCssVar('form-item', 'error-color');
+  width: getCssVar(form-item-container, width-underline);
+  font-size: getCssVar('form-item-container', 'font-error-fontSize');
+  line-height: getCssVar('form-item-container', 'font-fontSize');
+  color: getCssVar('form-item-container', 'color-error');
   text-align: getCssVar(editor, default, text-align);
 }
diff --git a/src/control/form/form-detail/form-item/form-item-container/form-item-container.tsx b/src/control/form/form-detail/form-item/form-item-container/form-item-container.tsx
index dda84fd7fa5b415bd168c015411c665333008417..4e14d85d1addd351c0c92e54b93d94cf7ed50607 100644
--- a/src/control/form/form-detail/form-item/form-item-container/form-item-container.tsx
+++ b/src/control/form/form-detail/form-item/form-item-container/form-item-container.tsx
@@ -81,10 +81,11 @@ export const IBizFormItemContainer = defineComponent({
         editorAlign = editorContentAlign;
       }
       const result: IData = {
-        'label-align': labelAlign,
+        'font-textAlign': labelAlign,
       };
-      if (labelWidth !== 130) {
-        Object.assign(result, { 'label-width': `${labelWidth}px` });
+      if (labelWidth && labelWidth !== 130) {
+        // 宽度转换为rem，按照16px=1rem计算
+        Object.assign(result, { 'width-label': `${labelWidth / 16}rem` });
       }
       return {
         ...ns.cssVarBlock(result),
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 5c83fa6307171650cffe4638b73b5b9c45665620..74b1582b57ef53ffbb1963cd29b7c8a14401c5bd 100644
--- a/src/control/form/form-detail/form-item/form-item.scss
+++ b/src/control/form/form-detail/form-item/form-item.scss
@@ -1,32 +1,8 @@
 $form-item: (
-  label-color: getCssVar(color, text, 0),
-  text-color: getCssVar(color, text, 0),
-  bg-color: getCssVar(color, fill, 0),
-  hover-color: getCssVar(color, text, 0),
-  hover-bg-color: getCssVar(color, fill, 1),
-  readonly-color: getCssVar(color, text, 2),
-  border-color: transparent,
-  font-size: getCssVar(font-size, header-6),
-  error-font-size: getCssVar(font-size, regular),
-  error-color: getCssVar(color, danger),
-  placeholder-color: getCssVar(color, text, 2),
-  disabled-color: getCssVar(color, text, 3),
-  disabled-bg-color: transparent,
-  disabled-border-color: getCssVar(color, disabled, border),
-  active-bg: getCssVar(color, fill, 2),
-  active-border: getCssVar(active, bg),
-  focus-bg: getCssVar(color, fill, 0),
-  focus-border: getCssVar(color, focus, border),
-);
-
-$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);
 
   .van-field {
     height: 100%;
diff --git a/src/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.scss b/src/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.scss
index d6deb9c77f3f3e3b7d7644004e2701c0fd1f22f7..139597f9cb07c5d48bed18984ec4747f4b4f3438 100644
--- a/src/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.scss
+++ b/src/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.scss
@@ -1,32 +1,2 @@
-@include b(form-mdctrl-form) {
 
-}
-
-@include b(form-mdctrl-form-item) {
-  @include flex(row);
-
-  @include e(form){
-    flex-grow: 1;
-  }
-}
-
-@include b(form-mdctrl-form-item-actions) {
-  flex-shrink: 0;
-  width: 80px;
-  text-align: center;
-
-  .el-button+.el-button{
-    margin-left: 0;
-  }
-
-  @include e(btn){
-    margin-top: getCssVar(spacing, tight);
-  }
-}
-
-@include b(form-mdctrl-form-no-data) {
-  width: 100%;
-  @include flex(row, flex-end)
-
-}
 
diff --git a/src/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.tsx b/src/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.tsx
index 0e0880482f1356cde799a23cc32db01dad2f995d..cc03f17eda64600553c49eca95bd0c25d0dcc737 100644
--- a/src/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.tsx
+++ b/src/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.tsx
@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, resolveComponent } from 'vue';
+import { defineComponent, h, resolveComponent } from 'vue';
 import {
   EventBase,
   FormMDCtrlFormController,
@@ -18,30 +18,11 @@ export const FormMDCtrlForm = defineComponent({
   setup(props) {
     const ns = useNamespace('form-mdctrl-form');
 
-    /** 是否显示操作按钮 */
-    const showActions = computed(() => {
-      return props.controller.enableCreate || props.controller.enableDelete;
-    });
-
-    const renderAddBtn = () => {
-      return (
-        <van-button
-          class={[
-            ns.be('item-actions', 'create'),
-            ns.be('item-actions', 'btn'),
-          ]}
-          onClick={(): void => props.controller.create()}
-        >
-          {ibiz.i18n.t('app.add')}
-        </van-button>
-      );
-    };
-
     const onCreated = (id: string, event: EventBase): void => {
       props.controller.setFormController(id, event.ctrl as IEditFormController);
     };
 
-    return { ns, showActions, onCreated, renderAddBtn };
+    return { ns, onCreated };
   },
   render() {
     const { state, formProvider, model } = this.controller;
diff --git a/src/control/form/form-detail/form-mdctrl/form-mdctrl-md/form-mdctrl-md.scss b/src/control/form/form-detail/form-mdctrl/form-mdctrl-md/form-mdctrl-md.scss
index df1f2ab658da4cc966a62211594278e597fd9961..611e90565167a70aa0bbdd2e7d01e011b890519b 100644
--- a/src/control/form/form-detail/form-mdctrl/form-mdctrl-md/form-mdctrl-md.scss
+++ b/src/control/form/form-detail/form-mdctrl/form-mdctrl-md/form-mdctrl-md.scss
@@ -1,4 +1,13 @@
+$form-mdctrl-md: (
+  width-button: calc(100% - getCssVar(spacing, base) * 2),
+  spacing-content-margin: 0 getCssVar('spacing', 'tight'),
+  spacing-actions-gap: getCssVar('spacing', 'tight'),
+  spacing-actions-padding: getCssVar(spacing, tight) 0,
+  spacing-actions-margin: 0 getCssVar('spacing', 'tight'),
+);
+
 @include b(form-mdctrl-md) {
+  @include set-component-css-var('form-mdctrl-md', $form-mdctrl-md);
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -6,7 +15,7 @@
 
 @include b(form-mdctrl-md-content) {
   flex-grow: 1;
-  margin: 0 getCssVar('spacing', 'tight');
+  margin: getCssVar('form-mdctrl-md', 'spacing-content-margin');
 
   &.#{bem(control)}{
     width: auto;
@@ -15,15 +24,15 @@
 
 @include b(form-mdctrl-md-actions) {
   display: flex;
-  gap: getCssVar('spacing', 'tight');
-  padding: getCssVar(spacing, tight) 0;
-  margin: 0 getCssVar('spacing', 'tight');
+  gap: getCssVar('form-mdctrl-md', 'spacing-actions-gap');
+  padding: getCssVar('form-mdctrl-md', 'spacing-actions-padding');
+  margin: getCssVar('form-mdctrl-md', 'spacing-actions-margin');
 
   .van-button+.van-button {
     margin-left: 0;
   }
 
   @include e(btn) {
-    width: calc(100% - getCssVar(spacing, base) * 2);
+    width: getCssVar('form-mdctrl-md', 'width-button');
   }
 }
\ No newline at end of file
diff --git a/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.scss b/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.scss
index fea74ee76a299b7a2d72456144e346f0e1d80a59..0b3dfbec96754c19ca60f0254ba3c797f9deab19 100644
--- a/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.scss
+++ b/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.scss
@@ -1,22 +1,19 @@
 $repeater-grid: (
   // 颜色
-  th-color: getCssVar(color, text, 2),
-  td-color: getCssVar(color, text, 0),
-  btn-color: getCssVar(color, text, 2),
+  color-th: getCssVar(color, text, 2),
+  color-td: getCssVar(color, text, 0),
+  color-btn: getCssVar(color, text, 2),
 
   // 间距
-  cell-padding: getCssVar(spacing, extra-tight) getCssVar(spacing, tight),
-  btn-margin-left: getCssVar(spacing, tight),
+  spacing-padding: getCssVar(spacing, extra-tight) getCssVar(spacing, tight),
+  spacing-icon-gap: getCssVar(spacing, tight),
 
-  // 行高
-  cell-line-height: getCssVar(editor, default, line-height),
+  // 字体
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-icon-fontSize: getCssVar(width-icon, large),
 
   // 边框
-  cell-border: 1px solid getCssVar(color, border),
-  btn-border: 1px solid getCssVar(color, border),
-
-  // 大小
-  btn-size: getCssVar(width-icon, large),
+  border: getCssVar('border-thickness', 'control') solid getCssVar(color, border),
 );
 
 @include b(repeater-grid) {
@@ -32,24 +29,24 @@ $repeater-grid: (
 
   th {
     min-width: 0;
-    padding: getCssVar(repeater-grid, cell-padding);
+    padding: getCssVar(repeater-grid, spacing-padding);
     overflow: hidden;
-    line-height: getCssVar(repeater-grid, cell-line-height);
-    color: getCssVar(repeater-grid, th-color);
+    line-height: getCssVar(repeater-grid, font-lineHeight);
+    color: getCssVar(repeater-grid, color-th);
     text-align: center;
     text-overflow: ellipsis;
     white-space: nowrap;
-    border: getCssVar(repeater-grid, cell-border);
+    border: getCssVar(repeater-grid, border);
   }
 
   td {
     min-width: 0;
-    padding: getCssVar(repeater-grid, cell-padding);
+    padding: getCssVar(repeater-grid, spacing-padding);
     overflow: hidden;
-    line-height: getCssVar(repeater-grid, cell-line-height);
-    color: getCssVar(repeater-grid, td-color);
+    line-height: getCssVar(repeater-grid, font-lineHeight);
+    color: getCssVar(repeater-grid, color-td);
     text-align: center;
-    border: getCssVar(repeater-grid, cell-border);
+    border: getCssVar(repeater-grid, border);
   }
 
   @include b(repeater-grid-action-cell) {
@@ -61,24 +58,24 @@ $repeater-grid: (
   display: flex;
   align-items: center;
   justify-content: center;
-  height: getCssVar(repeater-grid, cell-line-height);
+  height: getCssVar(repeater-grid, font-lineHeight);
 
   ion-icon {
     box-sizing: border-box;
-    font-size: getCssVar(repeater-grid, btn-size);
-    color: getCssVar(repeater-grid, btn-color);
+    font-size: getCssVar(repeater-grid, font-icon-fontSize);
+    color: getCssVar(repeater-grid, color-btn);
     cursor: pointer;
-    border: getCssVar(repeater-grid, btn-border);
+    border: getCssVar(repeater-grid, border);
 
     + ion-icon {
-      margin-left: getCssVar(repeater-grid, btn-margin-left);
+      margin-left: getCssVar(repeater-grid, spacing-icon-gap);
     }
   }
 }
 
 @include b(repeater-grid-empty-content) {
   td {
-    color: getCssVar(repeater-grid, th-color);
+    color: getCssVar(repeater-grid, color-th);
   }
 }
 
diff --git a/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-single-form/repeater-single-form.scss b/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-single-form/repeater-single-form.scss
index 45d369e1429def11e4172f2c1e031fab1a2483a7..5bd3743ec0abf4d6d96e9685b33d3132a0021e1f 100644
--- a/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-single-form/repeater-single-form.scss
+++ b/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-single-form/repeater-single-form.scss
@@ -1,5 +1,4 @@
 $repeater-single-form: (
-  'header-height': 32px,
 );
 
 
@@ -10,9 +9,4 @@ $repeater-single-form: (
   @include e(content){
     width: 100%;
   }
-
-}
-
-@include b(repeater-single-form-header){
-  height: getCssVar(repeater-single-form, header-height);
 }
\ No newline at end of file
diff --git a/src/control/form/form-detail/form-mdctrl/form-mdctrl.scss b/src/control/form/form-detail/form-mdctrl/form-mdctrl.scss
index 53a8f4ec5c3fc4ead3f655ba890c4a65afd29f71..99705d835204395ad1d5ba89d24eb9787d771dab 100644
--- a/src/control/form/form-detail/form-mdctrl/form-mdctrl.scss
+++ b/src/control/form/form-detail/form-mdctrl/form-mdctrl.scss
@@ -1,21 +1,14 @@
-$form-mdctrl: (header-height: 32px);
-
-$form-mdctrl-header: (bg-color: getCssVar(color, bg, 1),
-  padding: getCssVar(spacing, tight) getCssVar(spacing, base),
-  border-color: getCssVar(color, border),
-);
-
-$form-mdctrl-caption: (text-color: getCssVar(color, text, 2),
-  font-size: getCssVar(font-size, header-6),
-  font-weight: getCssVar(font-weight, regular),
-  height: rem(32px),
-  line-height: rem(32px),
+$form-mdctrl: (
+  color-header-bg: getCssVar(color, bg, 0),
+  color-text: getCssVar(color, text, 1),
+  spacing-header-padding: getCssVar(spacing, base),
+  font-caption-fontSize: getCssVar(font-size, header-6),
+  font-caption-fontWeight: getCssVar(font-weight, regular),
+  font-caption-linHeight: getCssVar(font-size, header-5),
 );
 
 @include b(form-mdctrl) {
   @include set-component-css-var(form-mdctrl, $form-mdctrl);
-  @include set-component-css-var(form-mdctrl-header, $form-mdctrl-header);
-  @include set-component-css-var(form-mdctrl-caption, $form-mdctrl-caption);
 
   height: 100%;
 
@@ -23,11 +16,10 @@ $form-mdctrl-caption: (text-color: getCssVar(color, text, 2),
   @include e(title) {
     @include utils-ellipsis;
 
-    height: getCssVar(form-mdctrl-caption, height);
-    font-size: getCssVar(form-mdctrl-caption, font-size);
-    font-weight: getCssVar(form-mdctrl-caption, font-weight);
-    line-height: getCssVar(form-mdctrl-caption, line-height);
-    color: getCssVar(form-mdctrl-caption, text-color);
+    font-size: getCssVar(form-mdctrl, font-caption-fontSize);
+    font-weight: getCssVar(form-mdctrl, font-caption-fontWeight);
+    line-height: getCssVar(form-mdctrl, font-caption-linHeight);
+    color: getCssVar(form-mdctrl, color-text);
   }
 
   @include m(has-value) {
@@ -39,5 +31,6 @@ $form-mdctrl-caption: (text-color: getCssVar(color, text, 2),
 
 @include b(form-mdctrl-header) {
   display: flex;
-  padding: getCssVar(form-mdctrl-header, padding);
+  padding: getCssVar(form-mdctrl, spacing-header-padding);
+  background-color: getCssVar(form-mdctrl, color-header-bg);
 }
\ No newline at end of file
diff --git a/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.scss b/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.scss
index ba3fa70aedecdf82f624d72307b75106990b4cc9..cba116bb0b2eafcac22383d5793ddf3e338b11b5 100644
--- a/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.scss
+++ b/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.scss
@@ -1,27 +1,29 @@
-$mdctrl-container-header: (bg-color: transparent,
-  padding: getCssVar(spacing, tight) getCssVar(spacing, base),
-  border-color: getCssVar(color, border),
+$mdctrl-container-header: (
+  color-bg: getCssVar(color, bg, 0),
+  color-border: getCssVar(color, border),
+  spacing-padding: getCssVar(spacing, base),
 );
 
-$mdctrl-container-caption: (text-color: getCssVar(color, text, 2),
-  font-size: getCssVar(font-size, header-6),
-  font-weight: getCssVar(font-weight, regular),
-  height: rem(20px),
-  line-height: rem(20px),
+$mdctrl-container-caption: (
+  color-text: getCssVar(color, text, 2),
+  font-fontSize: getCssVar(font-size, header-6),
+  font-fontWeight: getCssVar(font-weight, regular),
+  font-lineHeight: getCssVar(font-size, header-5),
 );
-$mdctrl-container-button: (text-color: getCssVar(color, primary),
-  font-size: getCssVar(font-size, header-6),
-  font-weight: getCssVar(font-weight, regular),
+$mdctrl-container-button: (
+  color-text: getCssVar(color, primary),
+  font-fontSize: getCssVar(font-size, header-6),
+  font-fontWeight: getCssVar(font-weight, regular),
 );
 
 $mdctrl-container-content: (
-  bg-color: getCssVar(color, bg, 1),
+  color-bg: getCssVar(color, bg, 1),
 );
 
 $mdctrl-container-footer: (
-  font-size: getCssVar(font-size, header-5),
-  bg-color: getCssVar(color, bg, 1),
-  icon-margin-right: getCssVar(spacing, extra-tight),
+  font-fontSize: getCssVar(font-size, header-5),
+  color-bg: getCssVar(color, bg, 1),
+  spacing-icon-gap: getCssVar(spacing, extra-tight),
 );
 
 
@@ -34,25 +36,6 @@ $mdctrl-container-footer: (
 
   display: flex;
   flex-direction: column;
-
-  @include e(btn) {
-    width: auto;
-    padding: 0;
-    margin-left: 10px;
-    font-size: getCssVar('mdctrl-container-button', 'font-size');
-    color: getCssVar('mdctrl-container-button', 'text-color');
-    background-color: transparent;
-    border: none;
-
-    &:active {
-      background-color: transparent;
-
-      // 清除激活样式
-      &::before {
-        opacity: 0;
-      }
-    }
-  }
 }
 
 @include b(mdctrl-container-item) {
@@ -66,75 +49,38 @@ $mdctrl-container-footer: (
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    padding: getCssVar('mdctrl-container-header', 'padding');
-    background-color: getCssVar('mdctrl-container-header', 'bg-color');
+    padding: getCssVar('mdctrl-container-header', 'spacing-padding');
+    background-color: getCssVar('mdctrl-container-header', 'color-bg');
 
     @include e(caption) {
       flex-grow: 1;
-      height: getCssVar('mdctrl-container-caption', 'height');
-      font-size: getCssVar('mdctrl-container-caption', 'font-size');
-      font-weight: getCssVar('mdctrl-container-caption', 'font-weight');
-      line-height: getCssVar('mdctrl-container-caption', 'line-height');
-      color: getCssVar('mdctrl-container-caption', 'text-color');
+      font-size: getCssVar('mdctrl-container-caption', 'font-fontSize');
+      font-weight: getCssVar('mdctrl-container-caption', 'font-fontWeight');
+      line-height: getCssVar('mdctrl-container-caption', 'font-lineHeight');
+      color: getCssVar('mdctrl-container-caption', 'color-text');
       @include utils-ellipsis;
     }
-
-    @include e(action) {
-      --van-button-small-height: #{rem(20px)};
-
-      display: flex;
-      flex-grow: 1;
-      flex-shrink: 0;
-      justify-content: flex-end;
-      height: rem(20px);
-      line-height: rem(20px);
-      text-align: right;
-    }
   }
 
   @include b(mdctrl-container-item-content) {
-    background-color: getCssVar('mdctrl-container-content', 'bg-color');
+    background-color: getCssVar('mdctrl-container-content', 'color-bg');
 
     @include e(remove-btn) {
       height: 100%;
     }
   }
-
-  @include b(form-page-item) {
-    --ibiz-form-page-item-gap: 0;
-  }
-
-}
-
-
-@include b(mdctrl-container-no-data) {
-  width: 100%;
-  @include flex(row, flex-end)
 }
 
 @include b(mdctrl-container-footer) {
-  color: red;
-
   .#{bem('mdctrl-container', 'btn')} {
     width: 100%;
-    padding: 0;
-    margin-left: 0;
-    font-size: getCssVar('mdctrl-container-footer', 'font-size');
-    color: getCssVar('mdctrl-container-button', 'text-color');
-    background-color: getCssVar('mdctrl-container-footer', 'bg-color');
+    font-size: getCssVar('mdctrl-container-footer', 'font-fontSize');
+    color: getCssVar('mdctrl-container-button', 'color-text');
+    background-color: getCssVar('mdctrl-container-footer', 'color-bg');
     border: none;
 
-    &:active {
-      background-color: transparent;
-
-      // 清除激活样式
-      &::before {
-        opacity: .1;
-      }
-    }
-
     .van-icon {
-      margin-right: getCssVar('mdctrl-container-footer', 'icon-margin-right');
+      margin-right: getCssVar('mdctrl-container-footer', 'spacing-icon-gap');
     }
   }
 }
\ No newline at end of file
diff --git a/src/control/list/list/list.scss b/src/control/list/list/list.scss
index 0f91e0129c9a55995e63c5a9cf6924444e8a99ac..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/control/list/list/list.scss
+++ b/src/control/list/list/list.scss
@@ -1,113 +0,0 @@
-$control-list: ('text-color': getCssVar('color', 'text', 0),
-  'hover-bg-color': getCssVar('color', 'primary'),
-  'active-bg-color': getCssVar('color', 'primary'),
-  'padding': rem(10px),
-
-);
-
-@include b(control-list-item) {
-  @include set-component-css-var('control-list', $control-list);
-
-  cursor: pointer;
-
-  &:hover {
-    background-color: getCssVar('control-list', 'hover-bg-color');
-  }
-
-  @include when(active) {
-    background-color: getCssVar('control-list', 'active-bg-color');
-  }
-}
-
-@include b(control-list) {
-  height: 100%;
-  overflow: getCssVar(control, overflow);
-
-  // 加载更多样式
-  @include e(load-more) {
-    text-align: center;
-    cursor: pointer;
-  }
-
-  @include e(tag) {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    height: 100%;
-  }
-
-  @include e(item-icon) {
-    color: getCssVar(color, danger),
-  }
-
-  @include e(item-text) {
-    padding-right: getCssVar('spacing', 'tight');
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-@include b(control-list-simplelist) {
-  @include flex(row);
-
-  flex-wrap: wrap;
-
-  .van-tag__close {
-    position: absolute;
-    right: rem(5px);
-    margin-left: rem(2px);
-  }
-
-  @include b(control-list-item) {
-    min-width: 0;
-    padding: rem(5px);
-
-    @include e(delete) {
-      display: inline-block;
-      margin-left: rem(5px);
-    }
-
-
-
-    &:hover {
-      background-color: transparent;
-    }
-
-    @include when(active) {
-      background-color: transparent;
-    }
-  }
-}
-
-@include b(control-list-popup-header) {
-  @include set-component-css-var('control-list', $control-list);
-
-  padding: getCssVar('control-list', 'padding');
-  text-align: center;
-}
-
-@include b(control-list-popup) {
-  height: 50vh;
-}
-
-@include b(control-list-item-expand) {
-  flex-grow: 1;
-  min-width: 0;
-  min-height: 0;
-  color: getCssVar('color', 'primary');
-  text-align: center;
-}
-
-@include b(control-list-popup-container) {
-  @include flex(column);
-
-  height: 100%;
-}
-
-@include b(control-list-popup-content) {
-  flex-grow: 1;
-  min-width: 0;
-  min-height: 0;
-  overflow-y: scroll;
-}
\ No newline at end of file
diff --git a/src/control/list/list/list.tsx b/src/control/list/list/list.tsx
index c36814657118b1842653bb024f75a994cb6b00f5..84e17b52f2b43db798a16fede658c15e864e09ad 100644
--- a/src/control/list/list/list.tsx
+++ b/src/control/list/list/list.tsx
@@ -1,5 +1,5 @@
 import { IDEList } from '@ibiz/model-core';
-import { defineComponent, PropType, ref } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { IControlProvider, ListController } from '@ibiz-template/runtime';
 import './list.scss';
@@ -59,154 +59,45 @@ export const ListControl = defineComponent({
   setup(props) {
     const c = useControlController((...args) => new ListController(...args));
 
-    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
-    const ns2 = useNamespace(`control-mobmdctrl`);
+    // 列表与多数据部件为同一个样式
+    const ns = useNamespace(`control-mobmdctrl`);
 
-    const { renderItem, renderNoData, renderLoadMore } = useListRender(
-      props,
-      c,
-      ns2,
-    );
-
-    const showPicker = ref(false);
-    const openReviewList = () => {
-      showPicker.value = true;
-    };
-
-    // 绘制默认列表项
-    const renderDefaultItem = (item: IData) => {
-      // 是否选中数据
-      const findIndex = c.state.selectedData.findIndex(data => {
-        return data.srfkey === item.srfkey;
-      });
-      const itemClass = [ns.b('item'), ns.is('active', findIndex !== -1)];
-      const itemStyle = { flexBasis: `${100 / props.columnsCount}%` };
-      return (
-        <div class={itemClass} key={item.srfkey} style={itemStyle}>
-          <van-tag
-            onClick={() => c.onRowClick(item)}
-            class={ns.e('tag')}
-            onDblclick={() => c.onDbRowClick(item)}
-            closeable
-            plain
-            size='large'
-            type='primary'
-            onClose={() => c.setActive(item)}
-          >
-            <span class={ns.e('item-text')}>{item.srfmajortext || ''}</span>
-          </van-tag>
-        </div>
-      );
-    };
-    const renderReViewDefaultItem = (item: IData) => {
-      // 是否选中数据
-      const findIndex = c.state.selectedData.findIndex(data => {
-        return data.srfkey === item.srfkey;
-      });
-      const itemClass = [ns.b('item'), ns.is('active', findIndex !== -1)];
-      return (
-        <div class={itemClass} key={item.srfkey}>
-          <van-cell class={itemClass} is-link title={item.srfmajortext || ''}>
-            {{
-              'right-icon': () => {
-                return (
-                  <van-icon
-                    class={ns.e('item-icon')}
-                    onClick={() => c.setActive(item)}
-                    name='delete-o'
-                  />
-                );
-              },
-            }}
-          </van-cell>
-        </div>
-      );
-    };
+    const { renderItem, renderNoData, renderAddItem, renderScrollList } =
+      useListRender(props, c, ns);
 
-    // 绘制展开
-    const renderExpand = () => {
-      const itemClass = [ns.b('item'), ns.b('item-expand')];
-      return (
-        <div class={itemClass} onClick={openReviewList}>
-          {ibiz.i18n.t('control.list.expand')}
-        </div>
+    const renderDefault = () => {
+      const result = [];
+      result.push(
+        ...c.state.items.map((item: IData) => {
+          return renderItem(item);
+        }),
       );
-    };
-
-    // 绘制卡片内容
-    const renderListContent = () => {
-      return c.state.items.map((item, index) => {
-        if (index === props.rowsCount * props.columnsCount - 1) {
-          return renderExpand();
-        }
-        if (index > props.rowsCount * props.columnsCount - 1) {
-          return null;
-        }
-        return renderDefaultItem(item);
-      });
-    };
-    // 预览列表
-    const renderReViewListContent = () => {
-      if (c.state.items.length === 0) {
-        return renderNoData();
+      if (c.enableNew) {
+        result.push(renderAddItem());
       }
-      return c.state.items.map(item => {
-        return renderReViewDefaultItem(item);
-      });
-    };
-
-    const renderReviewList = () => {
-      return (
-        <van-popup
-          round
-          close-on-popstate={true}
-          position='bottom'
-          teleport='body'
-          v-model:show={showPicker.value}
-          class={ns.b('popup')}
-        >
-          <div class={ns.b('popup-container')}>
-            <div class={ns.b('popup-header')}>
-              <div>{ibiz.i18n.t('control.list.selectedData')}</div>
-            </div>
-            <div class={ns.b('popup-content')}>{renderReViewListContent()}</div>
-          </div>
-        </van-popup>
-      );
-    };
-
-    const renderDefaultList = () => {
-      // 绘制卡片内容
-      return (
-        <van-list finished={c.state.total <= c.state.items.length}>
-          {c.state.items.map((item: IData) => {
-            return renderItem(item);
-          })}
-        </van-list>
-      );
+      return result;
     };
 
-    const renderSelectList = () => {
-      return [renderListContent(), renderReviewList(), renderLoadMore()];
+    // 绘制列表内容
+    const renderMDContent = () => {
+      const slots = renderDefault();
+      return renderScrollList(slots);
     };
 
     return {
       c,
       ns,
-      ns2,
-      renderSelectList,
-      renderDefaultList,
+      renderMDContent,
+      renderNoData,
     };
   },
   render() {
     return (
-      <iBizControlBase
-        controller={this.c}
-        class={(this.ns.b(this.c.model.name), this.ns2.b())}
-      >
-        {this.c.state.isCreated && this.mode === 'LIST'
-          ? this.renderDefaultList()
-          : this.renderSelectList()}
+      <iBizControlBase controller={this.c} class={this.ns.b()}>
+        {this.c.state.isCreated &&
+          (this.c.state.items.length > 0
+            ? this.renderMDContent()
+            : this.renderNoData())}
       </iBizControlBase>
     );
   },
diff --git a/src/control/list/md-ctrl/md-ctrl.scss b/src/control/list/md-ctrl/md-ctrl.scss
index 8b9abac19ee13cc6faea9346eef5b5ce50a6671c..190bad73d4ffbe0fa873826dffdbc1ffb47e11a1 100644
--- a/src/control/list/md-ctrl/md-ctrl.scss
+++ b/src/control/list/md-ctrl/md-ctrl.scss
@@ -1,21 +1,21 @@
 $control-mobmdctrl: (
-  // Color
+  // 颜色
   color-text: getCssVar(color, text, 0),
   color-active-bg: getCssVar(color, primary, light, default),
   color-group-bg: getCssVar(color, bg, 0),
   color-group-text: getCssVar(color, text, 1),
-  // Width/Height
+  // 宽高
   width-img: getCssVar(width-icon, extra-large),
   height-img: getCssVar(width-icon, extra-large),
-  // Spacing
+  // 间距
   spacing-item-padding: getCssVar(spacing, tight) getCssVar(spacing, base),
   spacing-group-padding: getCssVar(spacing, tight) getCssVar(spacing, base),
   spacing-img-padding: getCssVar(spacing, tight),
   spacing-checkbox-gap: getCssVar('spacing', 'tight'),
   spacing-border-padding: getCssVar(spacing, base),
-  // Radius
+  // 圆角
   radius-img: getCssVar(border-radius, extra-small),
-  // Font
+  // 字体
   font-fontSize: getCssVar(font-size, regular),
   font-group-fontSize: getCssVar(font-size, header-6),
   font-group-lineHeight: getCssVar(height-control, default),
diff --git a/src/editor/array/ibiz-array/ibiz-array.scss b/src/editor/array/ibiz-array/ibiz-array.scss
index 49950bbe8f000cb177a3e6107ebb75b310097603..5f0fdfcce74707b36ee4f17d677053cceb1e8a58 100644
--- a/src/editor/array/ibiz-array/ibiz-array.scss
+++ b/src/editor/array/ibiz-array/ibiz-array.scss
@@ -1,28 +1,26 @@
 $array: (
   // 颜色
   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),
-  color-array-item-border: getCssVar(color, border),
-  // 字体大小
-  font-size: getCssVar(editor, default, font-size),
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
-  // 高度
-  min-height: getCssVar(editor, default, line-height),
+  color-placeholder: getCssVar(editor, default, placeholder-color),
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+  // 间距
   spacing-icons-gap: getCssVar(spacing, tight),
-  spacing-icons-margin-left: getCssVar(spacing, base)
+  spacing-icons-margin: 0 0 0 getCssVar(spacing, base),
+  // 字体
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
+  // 其他
+  border-item: getCssVarName('border-thickness', 'control') solid getCssVar(color, border),
 );
 
 @include b(array) {
   @include set-component-css-var('array', $array);
 
   height: 100%;
-  font-size: getCssVar(array, font-size);
-  line-height: getCssVar(array, line-height);
+  font-size: getCssVar(array, font-fontSize);
+  line-height: getCssVar(array, font-lineHeight);
   color: getCssVar(array, color);
   display: flex;
   align-items: end;
@@ -31,49 +29,45 @@ $array: (
   --van-field-input-text-color: #{getCssVar(array, color)};
   --van-cell-text-color: #{getCssVar(array, color)};
   --van-cell-value-color: #{getCssVar(array, color)};
-  --van-cell-line-height: #{getCssVar(array, line-height)};
-  --van-cell-font-size: #{getCssVar(array, font-size)};
-  --van-cell-value-font-size: #{getCssVar(array, font-size)};
-  --van-field-input-disabled-text-color: #{getCssVar(array, disabled-color)};
+  --van-cell-line-height: #{getCssVar(array, font-lineHeight)};
+  --van-cell-font-size: #{getCssVar(array, font-fontSize)};
+  --van-cell-value-font-size: #{getCssVar(array, font-fontSize)};
+  --van-field-input-disabled-text-color: #{getCssVar(array, color-disabled)};
 
   input::placeholder {
-    color: getCssVar(array, placeholder-color);
-    -webkit-text-fill-color: getCssVar(array, placeholder-color);
-  }
-
-  ion-icon {
-    cursor: pointer;
+    color: getCssVar(array, color-placeholder);
+    -webkit-text-fill-color: getCssVar(array, color-placeholder);
   }
 
   @include m(disabled) {
-    color: getCssVar(array, disabled-color);
+    color: getCssVar(array, color-disabled);
 
-    --van-field-input-disabled-text-color: #{getCssVar(array, disabled-color)};
+    --van-field-input-disabled-text-color: #{getCssVar(array, color-disabled)};
   }
 
   @include m(readonly) {
-    color: getCssVar(array, readonly-color);
+    color: getCssVar(array, color-readonly);
 
-    --van-field-input-text-color: #{getCssVar(array, readonly-color)};
+    --van-field-input-text-color: #{getCssVar(array, color-readonly)};
   }
 }
 
 @include b('array-item') {
   width: 100%;
-  border-bottom: 1px solid getCssVar(array, color-array-item-border);
+  border-bottom: getCssVar(array, border-item);
 }
 
 @include b(array-add-icon) {
   display: flex;
   align-items: center;
-  min-height: getCssVar(array, min-height);
+  min-height: getCssVar(array, font-lineHeight);
 }
 
 @include b(array-icons) {
   display: flex;
   align-items: center;
-  justify-content: getCssVar(array, text-align);
-  min-height: getCssVar(array, min-height);
-  margin-left: getCssVar(array, spacing-icons-margin-left);
+  justify-content: getCssVar(array, font-textAlign);
+  min-height: getCssVar(array, font-lineHeight);
+  margin: getCssVar(array, spacing-icons-margin);
   gap: getCssVar(array, spacing-icons-gap);
 }
diff --git a/src/editor/cascader/ibiz-cascader/ibiz-cascader.scss b/src/editor/cascader/ibiz-cascader/ibiz-cascader.scss
index 3f52fe85a6066e44529ea0b910487a6cdaeb0e9c..10f7c7bd1fa700cd25675105d517bdc5cf2cfcf7 100644
--- a/src/editor/cascader/ibiz-cascader/ibiz-cascader.scss
+++ b/src/editor/cascader/ibiz-cascader/ibiz-cascader.scss
@@ -1,18 +1,13 @@
 $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),
-
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
+  color-placeholder: getCssVar(editor, default, placeholder-color),
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+  // 字体
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
 );
 
 @include b(cascader) {
@@ -20,17 +15,17 @@ $cascader: (
 
 
   height: 100%;
-  font-size: getCssVar(cascader, font-size);
-  line-height: getCssVar(cascader, line-height);
+  font-size: getCssVar(cascader, font-fontSize);
+  line-height: getCssVar(cascader, font-lineHeight);
   color: getCssVar(cascader, color);
 
   --van-field-input-text-color: #{getCssVar(cascader, color)};
   --van-cell-text-color: #{getCssVar(cascader, color)};
   --van-cell-value-color: #{getCssVar(cascader, color)};
-  --van-cell-line-height: #{getCssVar(cascader, line-height)};
-  --van-cell-font-size: #{getCssVar(cascader, font-size)};
-  --van-cell-value-font-size: #{getCssVar(cascader, font-size)};
-  --van-field-input-disabled-text-color: #{getCssVar(cascader, disabled-color)};
+  --van-cell-line-height: #{getCssVar(cascader, font-lineHeight)};
+  --van-cell-font-size: #{getCssVar(cascader, font-fontSize)};
+  --van-cell-value-font-size: #{getCssVar(cascader, font-fontSize)};
+  --van-field-input-disabled-text-color: #{getCssVar(cascader, color-disabled)};
 
   .van-field {
     &::after {
@@ -43,26 +38,26 @@ $cascader: (
   }
 
   input::placeholder {
-    color: getCssVar(cascader, placeholder-color);
-    -webkit-text-fill-color: getCssVar(cascader, placeholder-color);
+    color: getCssVar(cascader, color-placeholder);
+    -webkit-text-fill-color: getCssVar(cascader, color-placeholder);
   }
 
   @include m(disabled) {
-    color: getCssVar(cascader, disabled-color);
+    color: getCssVar(cascader, color-disabled);
 
-    --van-field-input-disabled-text-color: #{getCssVar(cascader, disabled-color)};
+    --van-field-input-disabled-text-color: #{getCssVar(cascader, color-disabled)};
   }
 
   @include m(readonly) {
-    --van-field-input-text-color: #{getCssVar(cascader, readonly-color)};
+    --van-field-input-text-color: #{getCssVar(cascader, color-readonly)};
 
-    color: getCssVar(cascader, readonly-color);
+    color: getCssVar(cascader, color-readonly);
   }
 
   input {
-    text-align: getCssVar(cascader, text-align);
+    text-align: getCssVar(cascader, font-textAlign);
   }
   &.#{bem('cascader','','readonly')} {
-    text-align: getCssVar(cascader, text-align);
+    text-align: getCssVar(cascader, font-textAlign);
   }
 }
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 3cdcb3c5572d0867be6312f084efaa04d52ce258..53b84f4bc1242962401ef8f02e43ba6ca53097c8 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,19 +1,10 @@
 $checkbox-list: (
-  // 颜色
   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),
-
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
-
-  // 间距
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
   gap: getCssVar(spacing, tight),
 );
 
@@ -21,13 +12,13 @@ $checkbox-list: (
   @include set-component-css-var('checkbox-list', $checkbox-list);
 
   display: flex;
-  justify-content: getCssVar(checkbox-list, text-align);
+  justify-content: getCssVar(checkbox-list, font-textAlign);
   height: 100%;
-  font-size: getCssVar(checkbox-list, font-size);
-  line-height: getCssVar(checkbox-list, line-height);
+  font-size: getCssVar(checkbox-list, font-fontSize);
+  line-height: getCssVar(checkbox-list, font-lineHeight);
   color: getCssVar(checkbox-list, color);
 
-  --van-checkbox-size: #{getCssVar(checkbox-list, font-size)};
+  --van-checkbox-size: #{getCssVar(checkbox-list, font-fontSize)};
 
   .van-checkbox-group {
     height: 100%;
@@ -42,19 +33,19 @@ $checkbox-list: (
   }
 
   @include e('text') {
-    font-size: getCssVar(checkbox-list, font-size);
-    line-height: getCssVar(checkbox-list, line-height);
+    font-size: getCssVar(checkbox-list, font-fontSize);
+    line-height: getCssVar(checkbox-list, font-lineHeight);
     color: getCssVar(checkbox-list, color);
   }
 
   @include m(disabled) {
     @include e('text') {
-      color: getCssVar(checkbox-list, disabled-color);
+      color: getCssVar(checkbox-list, color-disabled);
     }
   }
 
   @include m(readonly) {
-    color: getCssVar(checkbox-list, readonly-color);
-    text-align: getCssVar(checkbox-list, text-align);
+    color: getCssVar(checkbox-list, color-readonly);
+    text-align: getCssVar(checkbox-list, font-textAlign);
   }
 }
\ No newline at end of file
diff --git a/src/editor/check-box/ibiz-checkbox/ibiz-checkbox.scss b/src/editor/check-box/ibiz-checkbox/ibiz-checkbox.scss
index 0ce250af323518e6beb5c7eab807bae91ce1cf41..d72b05e1dae1948eb268d42ed5381ceac085684d 100644
--- a/src/editor/check-box/ibiz-checkbox/ibiz-checkbox.scss
+++ b/src/editor/check-box/ibiz-checkbox/ibiz-checkbox.scss
@@ -1,9 +1,6 @@
 $checkbox: (
-  // 高度
-  min-height: getCssVar(editor, default, line-height),
-  
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
+  font-minHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
 );
 
 @include b(checkbox) {
@@ -11,6 +8,6 @@ $checkbox: (
 
   display: flex;
   align-items: center;
-  justify-content: getCssVar(checkbox, text-align);
-  min-height: getCssVar(checkbox, min-height);
+  justify-content: getCssVar(checkbox, font-textAlign);
+  min-height: getCssVar(checkbox, font-minHeight);
 }
diff --git a/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.scss b/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.scss
index 51dc68ca3c782aa344a0645f74738ed98296b308..f6a07a2621197a7a3c9995c77eb8244c8a324bfb 100644
--- a/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.scss
+++ b/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.scss
@@ -1,27 +1,14 @@
 $color-picker: (
-  // 颜色
+  width-picker: getCssVar(spacing, base-loose),
+  height-picker: getCssVar(spacing, base-loose),
   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),
-
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
-
-  // 宽度
-  picker-width: getCssVar(spacing, base-loose),
-
-  // 高度
-  picker-height: getCssVar(spacing, base-loose),
-
-  // 间隔
-  picker-margin-left: getCssVar(spacing, tight),
+  color-placeholder: getCssVar(editor, default, placeholder, color),
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
+  gap: getCssVar(spacing, tight),
 );
 
 @include b(color-picker) {
@@ -31,23 +18,23 @@ $color-picker: (
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: getCssVar(color-picker, text-align);
+  justify-content: getCssVar(color-picker, font-textAlign);
   height: 100%;
-  font-size: getCssVar(color-picker, font-size);
-  line-height: getCssVar(color-picker, line-height);
+  font-size: getCssVar(color-picker, font-fontSize);
+  line-height: getCssVar(color-picker, font-lineHeight);
   color: getCssVar(color-picker, color);
 
   --van-field-input-text-color: #{getCssVar(color-picker, color)};
   --van-cell-text-color: #{getCssVar(color-picker, color)};
   --van-cell-value-color: #{getCssVar(color-picker, color)};
-  --van-cell-line-height: #{getCssVar(color-picker, line-height)};
-  --van-cell-font-size: #{getCssVar(color-picker, font-size)};
-  --van-cell-value-font-size: #{getCssVar(color-picker, font-size)};
-  --van-field-input-disabled-text-color: #{getCssVar(color-picker, disabled-color)};
+  --van-cell-line-height: #{getCssVar(color-picker, font-lineHeight)};
+  --van-cell-font-size: #{getCssVar(color-picker, font-fontSize)};
+  --van-cell-value-font-size: #{getCssVar(color-picker, font-fontSize)};
+  --van-field-input-disabled-text-color: #{getCssVar(color-picker, color-disabled)};
 
   input::placeholder {
-    color: getCssVar(color-picker, placeholder-color);
-    -webkit-text-fill-color: getCssVar(color-picker, placeholder-color);
+    color: getCssVar(color-picker, color-placeholder);
+    -webkit-text-fill-color: getCssVar(color-picker, color-placeholder);
   }
 
   input::-webkit-color-swatch-wrapper {
@@ -58,13 +45,13 @@ $color-picker: (
     &.van-field {
       flex-shrink: 0;
       padding: 0;
-      margin-left: getCssVar(color-picker, picker-margin-left);
+      margin-left: getCssVar(color-picker, gap);
       background-color: transparent;
     }
 
     .van-field__control {
-      width: getCssVar(color-picker, picker-width);
-      height: getCssVar(color-picker, picker-height);
+      width: getCssVar(color-picker, width-picker);
+      height: getCssVar(color-picker, height-picker);
     }
   }
 
diff --git a/src/editor/common/data-mpicker/ibiz-data-mpicker.scss b/src/editor/common/data-mpicker/ibiz-data-mpicker.scss
index a6d1bc79467510cf36af010cf3c8992a09324697..ce45d719398b6781fd1bf748ebd56b59a611d1a1 100644
--- a/src/editor/common/data-mpicker/ibiz-data-mpicker.scss
+++ b/src/editor/common/data-mpicker/ibiz-data-mpicker.scss
@@ -1,11 +1,10 @@
 $data-mpicker: (
   // 颜色
-  cancel-color: getCssVar(color, text, 1),
-  confirm-color: getCssVar(color, primary),
-
+  color-cancel: getCssVar(color, text, 1),
+  color-confirm: getCssVar(color, primary),
   // 间距
-  toolbar-padding: getCssVar(spacing, base-tight),
-  cell-padding: getCssVar(spacing, base-tight),
+  padding-toolbar: getCssVar(spacing, base-tight),
+  padding-item: getCssVar(spacing, base-tight),
 );
 @include b(data-mpicker) {
   @include set-component-css-var(data-mpicker, $data-mpicker);
@@ -14,7 +13,7 @@ $data-mpicker: (
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: getCssVar(data-mpicker, toolbar-padding);
+    padding: getCssVar(data-mpicker, padding-toolbar);
 
     button {
       padding: 0;
@@ -23,11 +22,11 @@ $data-mpicker: (
     }
 
     @include e(confirm) {
-      color: getCssVar(data-mpicker, confirm-color);
+      color: getCssVar(data-mpicker, color-confirm);
     }
 
     @include e(cancel) {
-      color: getCssVar(data-mpicker, cancel-color);
+      color: getCssVar(data-mpicker, color-cancel);
     }
   }
 
@@ -43,7 +42,7 @@ $data-mpicker: (
 
     .van-cell {
       justify-content: flex-end;
-      padding: getCssVar(data-mpicker, cell-padding);
+      padding: getCssVar(data-mpicker, padding-item);
     }
   }
 
diff --git a/src/editor/common/right-icon/right-icon.scss b/src/editor/common/right-icon/right-icon.scss
index 6ade88b538184118160df740484067372f41e30e..8e1c16be03f71fdfc72d7706fc0f04be86fb2a16 100644
--- a/src/editor/common/right-icon/right-icon.scss
+++ b/src/editor/common/right-icon/right-icon.scss
@@ -1,10 +1,10 @@
 $editor-right-icon: (  
   // 字体大小
-  font-size: getCssVar(font-size, header-4),
+  font-fontSize: getCssVar(font-size, header-4),
 );
 
 @include b(editor-right-icon) {
   @include set-component-css-var(editor-right-icon, $editor-right-icon);
 
-  font-size: getCssVar(editor-right-icon, font-size);
+  font-size: getCssVar(editor-right-icon, font-fontSize);
 }
\ No newline at end of file
diff --git a/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss b/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss
index 5b1e85260f9b52242e69792dcf702257713ce379..c82f0dde1de0aa4a422456f531eefab696297bb1 100644
--- a/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss
+++ b/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss
@@ -1,45 +1,38 @@
 $mpicker: (
   // 颜色
   color: getCssVar(editor, default, text-color),
-  icon-color: var(--van-field-right-icon-color),
-  placeholder-color: getCssVar(editor, default, placeholder-color),
-  disabled-color: getCssVar(editor, disabled, text-color),
+  color-icon: var(--van-field-right-icon-color),
+  color-placeholder: getCssVar(editor, default, placeholder, color),
+  color-disabled: getCssVar(editor, disabled, text-color),
   readonly-color: getCssVar(editor, readonly, text-color),
-  select-item-bg-color: getCssVar(color, primary, light, default),
-
-  // 字体大小
-  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(editor, default, text-align),
-
-  // 圆角
-  select-item-border-radius: getCssVar(border-radius, small),
-
+  color-active: getCssVar(color, primary, light, default),
   // 间距
-  gap: getCssVar(spacing, tight),
-  select-item-gap: getCssVar(spacing, tight),
-  select-item-padding: 0 getCssVar(spacing, tight),
+  spacing-gap: getCssVar(spacing, extra-tight),
+  spacing-item-gap: 0 getCssVar(spacing, tight),
+  spacing-item-padding: 0 getCssVar(spacing, tight),
+  // 字体
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-icon-fontSize: getCssVar(font-size, header, 5),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
+  // 圆角
+  radius-item: getCssVar(border-radius, small),
 );
 
 /* mpicker 地址栏 */
 @include b(mpicker) {
   @include set-component-css-var(mpicker, $mpicker);
 
-  font-size: getCssVar(mpicker, font-size);
-  line-height: getCssVar(mpicker, line-height);
+  font-size: getCssVar(mpicker, font-fontSize);
+  line-height: getCssVar(mpicker, font-lineHeight);
   color: getCssVar(mpicker, color);
 
   --van-field-input-text-color: #{getCssVar(mpicker, color)};
   --van-cell-text-color: #{getCssVar(mpicker, color)};
   --van-cell-value-color: #{getCssVar(mpicker, color)};
-  --van-cell-line-height: #{getCssVar(mpicker, line-height)};
-  --van-cell-font-size: #{getCssVar(mpicker, font-size)};
-  --van-cell-value-font-size: #{getCssVar(mpicker, font-size)};
+  --van-cell-line-height: #{getCssVar(mpicker, font-lineHeight)};
+  --van-cell-font-size: #{getCssVar(mpicker, font-fontSize)};
+  --van-cell-value-font-size: #{getCssVar(mpicker, font-fontSize)};
 
   .van-field {
     &::after {
@@ -53,30 +46,30 @@ $mpicker: (
     justify-content: center;
 
     button {
-      height: getCssVar(mpicker, line-height);
+      height: getCssVar(mpicker, font-lineHeight);
       padding: 0;
-      color: getCssVar(mpicker, icon-color);
+      color: getCssVar(mpicker, color-icon);
       border: none;
     }
   }
 
   .van-field__control {
-    gap: getCssVar(mpicker, gap);
+    gap: getCssVar(mpicker, spacing-gap);
   }
 
   @include e('placeholder') {
-    color: getCssVar(mpicker, placeholder-color);
+    color: getCssVar(mpicker, color-placeholder);
   }
 
   @include e('pickup-search-icon'){
     display: flex;
-    font-size: getCssVar(mpicker, icon-font-size);
+    font-size: getCssVar(mpicker, font-icon-fontSize);
   }
 
   @include m(disabled) {
     pointer-events: none;
 
-    --van-field-input-text-color: #{getCssVar(mpicker, disabled-color)};
+    --van-field-input-text-color: #{getCssVar(mpicker, color-disabled)};
   }
 
   @include m(readonly) {
@@ -86,17 +79,17 @@ $mpicker: (
 
   @include b(mpicker-select-item) {
     display: flex;
-    gap: getCssVar(mpicker, select-item-gap);
+    gap: getCssVar(mpicker, spacing-item-gap);
     align-items: center;
     justify-content: space-between;
-    padding: getCssVar(mpicker, select-item-padding);
+    padding: getCssVar(mpicker, spacing-item-padding);
     overflow: hidden;
-    font-size: getCssVar(mpicker, font-size);
-    line-height: calc(getCssVar(mpicker, line-height) - #{rem(4px)});
+    font-size: getCssVar(mpicker, font-fontSize);
+    line-height: calc(getCssVar(mpicker, font-lineHeight) - getCssVar(mpicker, spacing-gap));
     text-overflow: ellipsis;
     white-space: nowrap;
-    background-color: getCssVar(mpicker, select-item-bg-color);
-    border-radius: getCssVar(mpicker, select-item-border-radius);
+    background-color: getCssVar(mpicker, color-active);
+    border-radius: getCssVar(mpicker, radius-item);
 
     @include e('text') {
       overflow: hidden;
@@ -120,9 +113,9 @@ $mpicker: (
   .van-field__control--custom {
     display: flex;
     flex-direction: row;
-    justify-content: getCssVar(mpicker, text-align);
+    justify-content: getCssVar(mpicker, font-textAlign);
   }
   &.#{bem('mpicker','','readonly')}{
-    text-align: getCssVar(mpicker, text-align);
+    text-align: getCssVar(mpicker, font-textAlign);
   }
 }
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 8000c90257bcdb416bdbb260b5b755755f772b3a..5b5754d59bada38c77e5f208da4659f3a200cf6f 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,41 +1,37 @@
 $picker-select-view: (
   // 颜色
   color: getCssVar(editor, default, text-color),
-  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(editor, default, text-align),
+  color-icon: var(--van-field-right-icon-color),
+  color-placeholder: getCssVar(editor, default, placeholder, color),
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+
+  // 字体
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-icon-fontSize: getCssVar(font-size, header, 5),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
 );
 
 @include b(picker-select-view) {
   @include set-component-css-var(picker-select-view, $picker-select-view);
 
   width: 100%;
-  font-size: getCssVar(picker-select-view, font-size);
-  line-height: getCssVar(picker-select-view, line-height);
+  font-size: getCssVar(picker-select-view, font-fontSize);
+  line-height: getCssVar(picker-select-view, font-lineHeight);
   color: getCssVar(picker-select-view, color);
 
   --van-field-input-text-color: #{getCssVar(picker-select-view, color)};
   --van-cell-text-color: #{getCssVar(picker-select-view, color)};
   --van-cell-value-color: #{getCssVar(picker-select-view, color)};
-  --van-cell-line-height: #{getCssVar(picker-select-view, line-height)};
-  --van-cell-font-size: #{getCssVar(picker-select-view, font-size)};
-  --van-cell-value-font-size: #{getCssVar(picker-select-view, font-size)};
-  --van-field-input-disabled-text-color: #{getCssVar(picker-select-view, disabled-color)};
+  --van-cell-line-height: #{getCssVar(picker-select-view, font-lineHeight)};
+  --van-cell-font-size: #{getCssVar(picker-select-view, font-fontSize)};
+  --van-cell-value-font-size: #{getCssVar(picker-select-view, font-fontSize)};
+  --van-field-input-disabled-text-color: #{getCssVar(picker-select-view, color-disabled)};
 
   @include e('pickup-search-icon'){
     display: flex;
-    font-size: getCssVar(picker-select-view, icon-font-size);
+    font-size: getCssVar(picker-select-view, font-icon-fontSize);
   }
 
   @include b(picker-select-view-view) {
@@ -48,9 +44,9 @@ $picker-select-view: (
     justify-content: center;
 
     button {
-      height: getCssVar(picker-select-view, line-height);
+      height: getCssVar(picker-select-view, font-lineHeight);
       padding: 0;
-      color: getCssVar(picker-select-view, icon-color);
+      color: getCssVar(picker-select-view, color-icon);
       border: none;
     }
 
@@ -62,27 +58,27 @@ $picker-select-view: (
   }
 
   input::placeholder {
-    color: getCssVar(picker-select-view, placeholder-color);
-    -webkit-text-fill-color: getCssVar(picker-select-view, placeholder-color);
+    color: getCssVar(picker-select-view, color-placeholder);
+    -webkit-text-fill-color: getCssVar(picker-select-view, color-placeholder);
   }
 
   @include m(disabled) {
-    --van-field-input-disabled-text-color: #{getCssVar(picker-select-view, disabled-color)};
+    --van-field-input-disabled-text-color: #{getCssVar(picker-select-view, color-disabled)};
 
-    color: getCssVar(picker-select-view, disabled-color);
+    color: getCssVar(picker-select-view, color-disabled);
     pointer-events: none;
   }
 
   @include m(readonly) {
-    --van-field-input-text-color: #{getCssVar(picker-select-view, readonly-color)};
+    --van-field-input-text-color: #{getCssVar(picker-select-view, color-readonly)};
 
-    color: getCssVar(picker-select-view, readonly-color);
+    color: getCssVar(picker-select-view, color-readonly);
   }
 
   input {
-    text-align: getCssVar(picker-select-view, text-align);
+    text-align: getCssVar(picker-select-view, font-textAlign);
   }
   &.#{bem('picker-select-view','','readonly')} {
-    text-align: getCssVar(picker-select-view, text-align);
+    text-align: getCssVar(picker-select-view, font-textAlign);
   }
 }
diff --git a/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx
index 14509f87c8e9b5c4437688cdddcd44140b663af4..be267175b932fefc4ce296e8c9776a28f60814be 100644
--- a/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx
+++ b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx
@@ -61,8 +61,8 @@ export const IBizPickerSelectView = defineComponent({
     watch(
       () => props.value,
       newVal => {
+        valueText.value = (newVal as string) || '';
         if (singleSelect.value) {
-          valueText.value = (newVal as string) || '';
           if (!props.data || !c.valueItem || !props.data[c.valueItem]) {
             ibiz.log.error('值项异常');
           } else {
diff --git a/src/editor/data-picker/ibiz-picker/ibiz-picker.scss b/src/editor/data-picker/ibiz-picker/ibiz-picker.scss
index 1f5e2780f542121e38d4a41a0392f2b10d94b759..9e24e38bae0854b537ad3b3e91ed07fb56c9b33c 100644
--- a/src/editor/data-picker/ibiz-picker/ibiz-picker.scss
+++ b/src/editor/data-picker/ibiz-picker/ibiz-picker.scss
@@ -1,39 +1,35 @@
 $picker: (
   // 颜色
   color: getCssVar(editor, default, text-color),
-  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),
-  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),
-
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
-
-  // 圆角
-  pop-search-border-radius: getCssVar(border-radius, medium),
-  pop-list-item-border-radius: getCssVar(spacing, base),
+  color-icon: var(--van-field-right-icon-color),
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+  
+  // 字体
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-icon-fontSize: getCssVar(font-size, header, 5),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
+);
 
+$picker-pop: (
+  // 颜色
+  color-search-bg: getCssVar(color, fill, 2),
+  color-placeholder: getCssVar(editor, default, placeholder, color),
+  color-active: getCssVar(color, primary),
   // 间距
-  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),
+  spacing-padding: getCssVar(spacing, base),
+  spacing-caption-margin-left: getCssVar(spacing, base),
+  spacing-search-margin-top: getCssVar(spacing, base),
+  spacing-search-padding: getCssVar(spacing, extra-tight),
+  spacing-search-icon-padding: 0 getCssVar(spacing, extra-tight),
+  spacing-item-padding: getCssVar(spacing, base) 0,
+  spacing-bg-item-padding: getCssVar(spacing, extra-tight) getCssVar(spacing, base),
+  // 圆角
+  radius-item: getCssVar(spacing, base),
 
   // 边框
-  pop-list-item-border-bottom: 1px solid getCssVar(color, border),
+  border: getCssVar('border-thickness', 'control') solid getCssVar(color, border),
 
   // 清除按钮样式
   clear-display: getCssVar(editor, default, required-style),
@@ -43,17 +39,17 @@ $picker: (
   @include set-component-css-var(picker, $picker);
 
   height: 100%;
-  font-size: getCssVar(picker, font-size);
-  line-height: getCssVar(picker, line-height);
+  font-size: getCssVar(picker, font-fontSize);
+  line-height: getCssVar(picker, font-lineHeight);
   color: getCssVar(picker, color);
 
   --van-field-input-text-color: #{getCssVar(picker, color)};
   --van-cell-text-color: #{getCssVar(picker, color)};
   --van-cell-value-color: #{getCssVar(picker, color)};
-  --van-cell-line-height: #{getCssVar(picker, line-height)};
-  --van-cell-font-size: #{getCssVar(picker, font-size)};
-  --van-cell-value-font-size: #{getCssVar(picker, font-size)};
-  --van-field-input-disabled-text-color: #{getCssVar(picker, disabled-color)};
+  --van-cell-line-height: #{getCssVar(picker, font-lineHeight)};
+  --van-cell-font-size: #{getCssVar(picker, font-fontSize)};
+  --van-cell-value-font-size: #{getCssVar(picker, font-fontSize)};
+  --van-field-input-disabled-text-color: #{getCssVar(picker, color-disabled)};
 
   .van-field {
     &::after {
@@ -67,9 +63,9 @@ $picker: (
     justify-content: center;
 
     button {
-      height: getCssVar(picker, line-height);
+      height: getCssVar(picker, font-lineHeight);
       padding: 0;
-      color: getCssVar(picker, icon-color);
+      color: getCssVar(picker, color-icon);
       border: none;
     }
   }
@@ -108,51 +104,51 @@ $picker: (
   @include m(readonly) {
     @include set-component-css-var(picker, $picker);
 
-    color: getCssVar(picker, readonly-color);
+    color: getCssVar(picker, color-readonly);
   }
 
   input::placeholder {
-    color: getCssVar(picker, placeholder-color);
-    -webkit-text-fill-color: getCssVar(picker, placeholder-color);
+    color: getCssVar(picker, color-placeholder);
+    -webkit-text-fill-color: getCssVar(picker, color-placeholder);
   }
 
   @include m(readonly) {
-    color: getCssVar(picker, readonly-color);
-    -webkit-text-fill-color: getCssVar(picker, readonly-color);
-    text-align: getCssVar(picker, text-align);
+    color: getCssVar(picker, color-readonly);
+    -webkit-text-fill-color: getCssVar(picker, color-readonly);
+    text-align: getCssVar(picker, font-textAlign);
   }
 
   input {
-    text-align: getCssVar(picker, text-align);
+    text-align: getCssVar(picker, font-textAlign);
   }
 
   @include e('pickup-search-icon'){
     display: flex;
-    font-size: getCssVar(picker, icon-font-size);
+    font-size: getCssVar(picker, font-icon-fontSize);
   }
   @include e('linkview-icon'){
     display: flex;
-    font-size: getCssVar(picker, icon-font-size);
+    font-size: getCssVar(picker, font-icon-fontSize);
   }
 }
 @include b(picker-pop){
-  @include set-component-css-var(picker, $picker);
+  @include set-component-css-var(picker-pop, $picker-pop);
 
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
-  padding: getCssVar(picker, pop-padding);
+  padding: getCssVar(picker-pop, spacing-padding);
   @include e('header'){
     display: flex;
     flex-shrink: 0;
     justify-content: space-between;
     opacity: 0.7;
     @include m('caption'){
-      margin-left: getCssVar(picker, pop-caption-margin-left);
+      margin-left: getCssVar(picker-pop, spacing-caption-margin-left);
     }
     @include m('right'){
-      display: getCssVar(picker, clear-display);
+      display: getCssVar(picker-pop, clear-display);
     }
   }
   @include e('content'){
@@ -165,20 +161,18 @@ $picker: (
   }
   @include e('search'){
     flex-shrink: 0;
-    padding: getCssVar(picker, pop-search-padding);
-    margin-top: getCssVar(picker, pop-search-margin-top);
+    margin-top: getCssVar(picker-pop, spacing-search-margin-top);
     overflow: hidden;
-    border-radius: getCssVar(picker, pop-search-border-radius);
 
     .van-field{
-      padding: getCssVar(picker, pop-search-input-padding);
+      padding: getCssVar(picker-pop, spacing-search-padding);
 
-      --van-cell-background:#{getCssVar(picker, pop-search-input-bg-color)};
+      --van-cell-background:#{getCssVar(picker-pop, color-search-bg)};
 
       .van-field__left-icon{
         display: flex;
         align-items: center;
-        padding: getCssVar(picker, pop-search-input-icon-padding);
+        padding: getCssVar(picker-pop, spacing-search-icon-padding);
       }
 
       .van-field__value{        
@@ -196,19 +190,19 @@ $picker: (
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: getCssVar(picker, pop-list-item-padding);
-      border-bottom: getCssVar(picker, pop-list-item-border-bottom);
+      padding: getCssVar(picker-pop, spacing-item-padding);
+      border-bottom: getCssVar(picker-pop, border);
     }
     @include m('item-text'){
-      color: getCssVar(dropdown, select-option-item-color);
-      background-color: getCssVar(dropdown, select-option-item-bkcolor);
-      border-radius: getCssVar(picker, pop-list-item-border-radius);
+      color: getCssVar(picker-pop, color-item);
+      background-color: getCssVar(picker-pop, color-item-bg);
+      border-radius: getCssVar(picker-pop, radius-item);
       @include when('bkcolor'){
-        padding: getCssVar(picker, pop-list-bg-item-padding);
+        padding: getCssVar(picker-pop, spacing-bg-item-padding);
       }
     }
     @include m('selected'){
-      color: getCssVar(picker, pop-list-item-selected-color);
+      color: getCssVar(picker-pop, color-active);
     }
   }
 }
diff --git a/src/editor/data-picker/ibiz-picker/ibiz-picker.tsx b/src/editor/data-picker/ibiz-picker/ibiz-picker.tsx
index 8027b004732311c799e2f58d53c17b94947b7f19..5862bffa186ffd53a4222dc402d3ad5a32e83ff2 100644
--- a/src/editor/data-picker/ibiz-picker/ibiz-picker.tsx
+++ b/src/editor/data-picker/ibiz-picker/ibiz-picker.tsx
@@ -335,10 +335,8 @@ export const IBizPicker = defineComponent({
                     style={
                       item?.color || item?.bkcolor
                         ? ns.cssVarBlock({
-                            'select-option-item-color': `${item.color || ''}`,
-                            'select-option-item-bkcolor': `${
-                              item.bkcolor || ''
-                            }`,
+                            'pop-color-item': `${item.color || ''}`,
+                            'pop-color-item-bg': `${item.bkcolor || ''}`,
                           })
                         : ''
                     }
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 dde6b9646062bf29e8d09d3bac445bb966c82329..f31116e0bf17d1f4bc2378119f727db1d21339dd 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,66 +1,62 @@
 $date-picker: (
   // 颜色
   color: getCssVar(editor, default, text-color),
-  bg-color: transparent,
-  placeholder-color: getCssVar(editor, default, placeholder-color),
-  disabled-color: getCssVar(editor, disabled, text-color),
-  readonly-color: getCssVar(editor, readonly, text-color),
+  color-bg: transparent,
+  color-placeholder: getCssVar(editor, default, placeholder, color),
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
   
-  // 字体大小
-  font-size: getCssVar(editor, default, font-size),
-
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
+  // 字体
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
 );
 
 
 @include b('date-picker') {
   @include set-component-css-var(date-picker, $date-picker);
 
-  font-size: getCssVar(date-picker, font-size);
-  line-height: getCssVar(date-picker, line-height);
+  font-size: getCssVar(date-picker, font-fontSize);
+  line-height: getCssVar(date-picker, font-lineHeight);
   color: getCssVar(date-picker, color);
 
   --van-field-input-text-color: #{getCssVar(date-picker, color)};
   --van-cell-text-color: #{getCssVar(date-picker, color)};
   --van-cell-value-color: #{getCssVar(date-picker, color)};
-  --van-cell-line-height: #{getCssVar(date-picker, line-height)};
-  --van-cell-font-size: #{getCssVar(date-picker, font-size)};
-  --van-cell-value-font-size: #{getCssVar(date-picker, font-size)};
+  --van-cell-line-height: #{getCssVar(date-picker, font-lineHeight)};
+  --van-cell-font-size: #{getCssVar(date-picker, font-fontSize)};
+  --van-cell-value-font-size: #{getCssVar(date-picker, font-fontSize)};
 
   input {
     width: 100%;
     padding: 0;
-    font-size: getCssVar(date-picker, font-size);
-    line-height: getCssVar(date-picker, line-height);
+    font-size: getCssVar(date-picker, font-fontSize);
+    line-height: getCssVar(date-picker, font-lineHeight);
     color: getCssVar(date-picker, color);
     text-align: inherit;
-    background-color: getCssVar(date-picker, bg-color);
+    background-color: getCssVar(date-picker, color-bg);
     border: none;
     box-shadow: none;
   }
 
   input::placeholder {
-    color: getCssVar(date-picker, placeholder-color);
-    -webkit-text-fill-color: getCssVar(date-picker, placeholder-color);
+    color: getCssVar(date-picker, color-placeholder);
+    -webkit-text-fill-color: getCssVar(date-picker, color-placeholder);
   }
 
   input[disabled] {
-    color: getCssVar(date-picker, disabled-color);
+    color: getCssVar(date-picker, color-disabled);
   }
 
   @include m(readonly) {
-    color: getCssVar(date-picker, readonly-color);
+    color: getCssVar(date-picker, color-readonly);
   }
 
   input {
-    text-align: getCssVar(date-picker, text-align);
+    text-align: getCssVar(date-picker, font-textAlign);
   }
   &.#{bem('date-picker','','readonly')}{
-    text-align: getCssVar(date-picker, text-align);
+    text-align: getCssVar(date-picker, font-textAlign);
   }
 }
 
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 eac007b97ab74fad93bce7849ad14bf36eff0c0e..1b5ca3d3ca4713fa5ab7b28609742b4525631674 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,22 +1,15 @@
 $date-range-picker: (
   // 颜色
   color: getCssVar(editor, default, text-color),
-  bg-color: transparent,
-  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),
-
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
-
-  // 高度
-  min-height: getCssVar(editor, default, line-height),
+  color-bg: transparent,
+  color-placeholder: getCssVar(editor, default, placeholder, color),
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+
+  // 字体
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
 );
 
 @include b(date-range-picker) {
@@ -26,24 +19,23 @@ $date-range-picker: (
   align-items: center;
   width: 100%;
   overflow: hidden;
-  font-size: getCssVar(date-range-picker, font-size);
-  line-height: getCssVar(date-range-picker, line-height);
+  font-size: getCssVar(date-range-picker, font-fontSize);
+  line-height: getCssVar(date-range-picker, font-lineHeight);
   color: getCssVar(date-range-picker, color);
-  text-align: getCssVar(date-range-picker, text-align);
+  text-align: getCssVar(date-range-picker, font-textAlign);
 
   --van-field-input-text-color: #{getCssVar(date-range-picker, color)};
   --van-cell-text-color: #{getCssVar(date-range-picker, color)};
   --van-cell-value-color: #{getCssVar(date-range-picker, color)};
-  --van-cell-line-height: #{getCssVar(date-range-picker, line-height)};
-  --van-cell-font-size: #{getCssVar(date-range-picker, font-size)};
-  --van-cell-value-font-size: #{getCssVar(date-range-picker, font-size)};
+  --van-cell-line-height: #{getCssVar(date-range-picker, font-lineHeight)};
+  --van-cell-font-size: #{getCssVar(date-range-picker, font-fontSize)};
+  --van-cell-value-font-size: #{getCssVar(date-range-picker, font-fontSize)};
 
   @include e(content) {
     position: relative;
     display: flex;
     flex: 1;
     align-items: center;
-    min-height: getCssVar(date-range-picker, min-height);
     input {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -75,53 +67,53 @@ $date-range-picker: (
   }
 
   .van-field {
-    line-height: getCssVar(date-range-picker, line-height);
+    line-height: getCssVar(date-range-picker, font-lineHeight);
 
     &::after {
       display: none;
     }
 
     .van-field__control--custom {
-      min-height: getCssVar(date-range-picker, line-height);
+      min-height: getCssVar(date-range-picker, font-lineHeight);
     }
   }
 
   input {
     width: 100%;
     padding: 0;
-    font-size: getCssVar(date-range-picker, font-size);
-    line-height: getCssVar(date-range-picker, line-height);
+    font-size: getCssVar(date-range-picker, font-fontSize);
+    line-height: getCssVar(date-range-picker, font-lineHeight);
     color: getCssVar(date-range-picker, color);
-    background-color: getCssVar(date-range-picker, bg-color);
+    background-color: getCssVar(date-range-picker, color-bg);
     border: none;
     box-shadow: none;
   }
 
   input::placeholder {
-    color: getCssVar(date-range-picker, placeholder-color);
-    -webkit-text-fill-color: getCssVar(date-range-picker, placeholder-color);
+    color: getCssVar(date-range-picker, color-placeholder);
+    -webkit-text-fill-color: getCssVar(date-range-picker, color-placeholder);
   }
 
   @include flex(row, center, center);
 
   @include m(disabled) {
-    --van-field-input-text-color: #{getCssVar(date-range-picker, disabled-color)};
+    --van-field-input-text-color: #{getCssVar(date-range-picker, color-disabled)};
 
-    color: getCssVar(date-range-picker, disabled-color);
+    color: getCssVar(date-range-picker, color-disabled);
 
 
     input {
-      color: getCssVar(date-range-picker, disabled-color);
+      color: getCssVar(date-range-picker, color-disabled);
     }
   }
 
   @include m(readonly) {
-    --van-field-input-text-color: #{getCssVar(date-range-picker, readonly-color)};
+    --van-field-input-text-color: #{getCssVar(date-range-picker, color-readonly)};
 
-    color: getCssVar(date-range-picker, readonly-color);
+    color: getCssVar(date-range-picker, color-readonly);
 
     input {
-      color: getCssVar(date-range-picker, readonly-color);
+      color: getCssVar(date-range-picker, color-readonly);
     }
   }
 }
diff --git a/src/editor/dropdown-list/ibiz-cascader-dropdown/ibiz-cascader-dropdown.scss b/src/editor/dropdown-list/ibiz-cascader-dropdown/ibiz-cascader-dropdown.scss
index 6131378b91a6a349913727aadf084da95696852c..75fcaacf66c9ca10803efe8a607e44fe81bf06fc 100644
--- a/src/editor/dropdown-list/ibiz-cascader-dropdown/ibiz-cascader-dropdown.scss
+++ b/src/editor/dropdown-list/ibiz-cascader-dropdown/ibiz-cascader-dropdown.scss
@@ -1,39 +1,35 @@
 $cascader-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),
-
-  // 字体大小
-  font-size: getCssVar(editor, default, font-size),
-
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+  color-placeholder: getCssVar(editor, default, placeholder, color),
+
+  // 字体
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
 );
 
 @include b(cascader-dropdown) {
   @include set-component-css-var(cascader-dropdown, $cascader-dropdown);
 
   height: 100%;
-  font-size: getCssVar(cascader-dropdown, font-size);
-  line-height: getCssVar(cascader-dropdown, line-height);
+  font-size: getCssVar(cascader-dropdown, font-fontSize);
+  line-height: getCssVar(cascader-dropdown, font-lineHeight);
   color: getCssVar(cascader-dropdown, color);
 
   --van-field-input-text-color: #{getCssVar(cascader-dropdown, color)};
   --van-cell-text-color: #{getCssVar(cascader-dropdown, color)};
   --van-cell-value-color: #{getCssVar(cascader-dropdown, color)};
-  --van-cell-line-height: #{getCssVar(cascader-dropdown, line-height)};
-  --van-cell-font-size: #{getCssVar(cascader-dropdown, font-size)};
-  --van-cell-value-font-size: #{getCssVar(cascader-dropdown, font-size)};
-  --van-field-input-disabled-text-color: #{getCssVar(cascader-dropdown, disabled-color)};
+  --van-cell-line-height: #{getCssVar(cascader-dropdown, font-lineHeight)};
+  --van-cell-font-size: #{getCssVar(cascader-dropdown, font-fontSize)};
+  --van-cell-value-font-size: #{getCssVar(cascader-dropdown, font-fontSize)};
+  --van-field-input-disabled-text-color: #{getCssVar(cascader-dropdown, color-disabled)};
 
   input::placeholder {
-    color: getCssVar(cascader-dropdown, placeholder-color);
-    -webkit-text-fill-color: getCssVar(cascader-dropdown, placeholder-color);
+    color: getCssVar(cascader-dropdown, color-placeholder);
+    -webkit-text-fill-color: getCssVar(cascader-dropdown, color-placeholder);
   }
 
   .van-field {
@@ -47,21 +43,21 @@ $cascader-dropdown: (
   }
 
   @include m(disabled) {
-    color: getCssVar(cascader-dropdown, disabled-color);
+    color: getCssVar(cascader-dropdown, color-disabled);
 
-    --van-field-input-disabled-text-color: #{getCssVar(cascader-dropdown, disabled-color)};
+    --van-field-input-disabled-text-color: #{getCssVar(cascader-dropdown, color-disabled)};
   }
 
   @include m(readonly) {
-    --van-field-input-text-color: #{getCssVar(cascader-dropdown, readonly-color)};
+    --van-field-input-text-color: #{getCssVar(cascader-dropdown, color-readonly)};
 
-    color: getCssVar(cascader-dropdown, readonly-color);
+    color: getCssVar(cascader-dropdown, color-readonly);
   }
 
   input {
-    text-align: getCssVar(cascader-dropdown, text-align);
+    text-align: getCssVar(cascader-dropdown, font-textAlign);
   }
   &.#{bem('cascader-dropdown','','readonly')} {
-    text-align: getCssVar(cascader-dropdown, text-align);
+    text-align: getCssVar(cascader-dropdown, font-textAlign);
   }
 }
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 6c9f05b5c48eb5845b4a1711bb8fe54b41325764..853b9968c0abcb1f0dfcc7e7ef3d6c9a694e541c 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,50 +1,43 @@
 $dropdown-list: (
   // 颜色
   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),
-  select-item-bg-color: getCssVar(color, primary, light, default),
-
-  // 字体大小
-  font-size: getCssVar(editor, default, font-size),
-
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
-
-  // 圆角
-  select-item-border-radius: getCssVar(border-radius, small),
-
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+  color-placeholder: getCssVar(editor, default, placeholder, color),
+  color-active: getCssVar(color, primary, light, default),
   // 间距
-  gap: getCssVar(spacing, tight),
-  select-item-gap: getCssVar(spacing, tight),
-  select-item-padding: 0 getCssVar(spacing, tight),
+  spacing-gap: getCssVar(spacing, tight),
+  spacing-item-gap: getCssVar(spacing, tight),
+  spacing-item-padding: 0 getCssVar(spacing, tight),
+  // 字体
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
+  // 圆角
+  radius-item: getCssVar(border-radius, small),
 );
 
 @include b(dropdown-list) {
   @include set-component-css-var(dropdown-list, $dropdown-list);
 
   height: 100%;
-  font-size: getCssVar(dropdown-list, font-size);
-  line-height: getCssVar(dropdown-list, line-height);
+  font-size: getCssVar(dropdown-list, font-fontSize);
+  line-height: getCssVar(dropdown-list, font-lineHeight);
   color: getCssVar(dropdown-list, color);
 
   --van-field-input-text-color: #{getCssVar(dropdown-list, color)};
   --van-cell-text-color: #{getCssVar(dropdown-list, color)};
   --van-cell-value-color: #{getCssVar(dropdown-list, color)};
-  --van-cell-line-height: #{getCssVar(dropdown-list, line-height)};
-  --van-cell-font-size: #{getCssVar(dropdown-list, font-size)};
-  --van-cell-value-font-size: #{getCssVar(dropdown-list, font-size)};
+  --van-cell-line-height: #{getCssVar(dropdown-list, font-lineHeight)};
+  --van-cell-font-size: #{getCssVar(dropdown-list, font-fontSize)};
+  --van-cell-value-font-size: #{getCssVar(dropdown-list, font-fontSize)};
 
   .van-field__control {
-    gap: getCssVar(dropdown-list, gap);
+    gap: getCssVar(dropdown-list, spacing-gap);
   }
 
   @include e('placeholder') {
-    color: getCssVar(dropdown-list, placeholder-color);
+    color: getCssVar(dropdown-list, color-placeholder);
   }
 
   @include m(disabled) {
@@ -52,24 +45,24 @@ $dropdown-list: (
   }
 
   @include m(readonly) {
-    color: getCssVar(dropdown-list, readonly-color);
-    -webkit-text-fill-color: getCssVar(dropdown-list, readonly-color);
-    text-align: getCssVar(dropdown-list, text-align);
+    color: getCssVar(dropdown-list, color-readonly);
+    -webkit-text-fill-color: getCssVar(dropdown-list, color-readonly);
+    text-align: getCssVar(dropdown-list, font-textAlign);
   }
 
   @include b(dropdown-list-select-item) {
     display: flex;
-    gap: getCssVar(dropdown-list, select-item-gap);
+    gap: getCssVar(dropdown-list, spacing-item-gap);
     align-items: center;
     justify-content: space-between;
-    padding: getCssVar(dropdown-list, select-item-padding);
+    padding: getCssVar(dropdown-list, spacing-item-padding);
     overflow: hidden;
-    font-size: getCssVar(dropdown-list, font-size);
-    line-height: calc(getCssVar(dropdown-list, line-height) - #{rem(4px)});
+    font-size: getCssVar(dropdown-list, font-fontSize);
+    line-height: calc(getCssVar(dropdown-list, font-lineHeight) - #{rem(4px)});
     text-overflow: ellipsis;
     white-space: nowrap;
-    background-color: getCssVar(dropdown-list, select-item-bg-color);
-    border-radius: getCssVar(dropdown-list, select-item-border-radius);
+    background-color: getCssVar(dropdown-list, color-active);
+    border-radius: getCssVar(dropdown-list, radius-item);
 
     @include e('text') {
       overflow: hidden;
@@ -93,7 +86,7 @@ $dropdown-list: (
   .van-field__control--custom {
     display: flex;
     flex-direction: row;
-    justify-content: getCssVar(dropdown-list, text-align);
+    justify-content: getCssVar(dropdown-list, font-textAlign);
   }
 }
 
diff --git a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss
index 00b5ecfda0b8c495409f108f2de83a99cd5a42fe..1747b8f999702436333327e67b3151ffd419c3b0 100644
--- a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss
+++ b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss
@@ -1,42 +1,40 @@
 $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(editor, default, text-align),
-
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+  color-placeholder: getCssVar(editor, default, placeholder, color),
+  // 间距
+  spacing-item-padding: 0,
+  spacing-bg-item-padding: 0 getCssVar(spacing, base),
   // 圆角
-  select-item-border-radius: getCssVar(spacing, base),
-  pop-search-border-radius: getCssVar(border-radius, medium),
-  pop-list-item-border-radius: getCssVar(spacing, base),
+  radius-item: getCssVar(spacing, base),
+  // 字体
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-icon-fontSize: getCssVar(font-size, header, 5),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
+);
 
+$dropdown-pop: (
+  // 颜色
+  color-search-bg: getCssVar(color, fill, 2),
+  color-placeholder: getCssVar(editor, default, placeholder, color),
+  color-active: getCssVar(color, primary),
   // 间距
-  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-item-icon-margin-right: getCssVar(spacing, tight),
-  pop-list-bg-item-padding: getCssVar(spacing, extra-tight)
-    getCssVar(spacing, base),
-  
+  spacing-padding: getCssVar(spacing, base),
+  spacing-caption-margin-left: getCssVar(spacing, base),
+  spacing-search-margin-top: getCssVar(spacing, base),
+  spacing-search-padding: getCssVar(spacing, extra-tight),
+  spacing-search-icon-padding: 0 getCssVar(spacing, extra-tight),
+  spacing-item-padding: getCssVar(spacing, base) 0,
+  spacing-bg-item-padding: getCssVar(spacing, extra-tight) getCssVar(spacing, base),
+  spacing-icon-gap: getCssVar(spacing, tight),
+  // 圆角
+  radius-item: getCssVar(spacing, base),
+
   // 边框
-  pop-list-item-border-bottom: 1px solid getCssVar(color,border),
+  border: getCssVar('border-thickness', 'control') solid getCssVar(color, border),
 
   // 清除按钮样式
   clear-display: getCssVar(editor, default, required-style),
@@ -46,30 +44,30 @@ $dropdown: (
   @include set-component-css-var(dropdown, $dropdown);
 
   height: 100%;
-  font-size: getCssVar(dropdown, font-size);
-  line-height: getCssVar(dropdown, line-height);
+  font-size: getCssVar(dropdown, font-fontSize);
+  line-height: getCssVar(dropdown, font-lineHeight);
   color: getCssVar(dropdown, color);
-  text-align: getCssVar(dropdown, text-align);
+  text-align: getCssVar(dropdown, font-textAlign);
 
   --van-field-input-text-color: #{getCssVar(dropdown, color)};
   --van-cell-text-color: #{getCssVar(dropdown, color)};
   --van-cell-value-color: #{getCssVar(dropdown, color)};
-  --van-cell-line-height: #{getCssVar(dropdown, line-height)};
-  --van-cell-font-size: #{getCssVar(dropdown, font-size)};
-  --van-cell-value-font-size: #{getCssVar(dropdown, font-size)};
+  --van-cell-line-height: #{getCssVar(dropdown, font-lineHeight)};
+  --van-cell-font-size: #{getCssVar(dropdown, font-fontSize)};
+  --van-cell-value-font-size: #{getCssVar(dropdown, font-fontSize)};
 
   @include e(select) {
     height: 100%;
-    font-size: getCssVar(dropdown, font-size);
+    font-size: getCssVar(dropdown, font-fontSize);
 
     .#{bem('dropdown','select-item')} {
-      padding: getCssVar(dropdown, select-item-padding);
-      color: getCssVar(dropdown, select-option-item-color);
-      background-color: getCssVar(dropdown, select-option-item-bkcolor);
-      border-radius: getCssVar(dropdown, select-item-border-radius);
+      padding: getCssVar(dropdown, spacing-item-padding);
+      color: getCssVar(dropdown, color-item);
+      background-color: getCssVar(dropdown, color-item-bg);
+      border-radius: getCssVar(dropdown, radius-item);
     }
     .#{bem('dropdown','select-item', 'has-bg')} {
-      padding: getCssVar(dropdown, select-bg-item-padding);
+      padding: getCssVar(dropdown, spacing-bg-item-padding);
     }
 
     &::after {
@@ -84,55 +82,54 @@ $dropdown: (
   }
 
   @include m(disabled) {
-    --van-field-input-text-color: #{getCssVar(dropdown, disabled-color)};
+    --van-field-input-text-color: #{getCssVar(dropdown, color-disabled)};
   }
 
 
   @include m(readonly) {
-    color: getCssVar(dropdown, readonly-color);
-    -webkit-text-fill-color: getCssVar(dropdown, readonly-color);
+    color: getCssVar(dropdown, color-readonly);
   }
 
   .van-field__control {
-    justify-content: getCssVar(dropdown, text-align);
+    justify-content: getCssVar(dropdown, font-textAlign);
   }
 
   @include e(placeholder) {
-    color: getCssVar(dropdown, placeholder-color);
+    color: getCssVar(dropdown, color-placeholder);
   }
 }
 
 @include b(dropdown-readonly-text-item) {
   display: inline-block;
-  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(dropdown, select-item-border-radius);
+  padding: getCssVar(dropdown, spacing-item-padding);
+  font-size: getCssVar(dropdown, font-fontSize);
+  line-height: getCssVar(dropdown, font-lineHeight);
+  color: getCssVar(dropdown, color-item);
+  background-color: getCssVar(dropdown, color-item-bg);
+  border-radius: getCssVar(dropdown, radius-item);
   @include m(has-bg) {
-    padding: getCssVar(dropdown, select-bg-item-padding);
+    padding: getCssVar(dropdown, spacing-bg-item-padding);
   }
 }
 
 @include b(dropdown-pop){
-  @include set-component-css-var(dropdown, $dropdown);
+  @include set-component-css-var(dropdown-pop, $dropdown-pop);
 
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
-  padding: getCssVar(dropdown, pop-padding);
+  padding: getCssVar(dropdown-pop, spacing-padding);
   @include e('header'){
     display: flex;
     flex-shrink: 0;
     justify-content: space-between;
     opacity: 0.7;
     @include m('caption'){
-      margin-left: getCssVar(dropdown, pop-caption-margin-left);
+      margin-left: getCssVar(dropdown-pop, spacing-caption-margin-left);
     }
     @include m('right'){
-      display: getCssVar(dropdown, clear-display);
+      display: getCssVar(dropdown-pop, clear-display);
     }
   }
   @include e('content'){
@@ -145,20 +142,18 @@ $dropdown: (
   }
   @include e('search'){
     flex-shrink: 0;
-    padding: getCssVar(dropdown, pop-search-padding);
-    margin-top: getCssVar(dropdown, pop-search-margin-top);
+    margin-top: getCssVar(dropdown-pop, spacing-search-margin-top);
     overflow: hidden;
-    border-radius: getCssVar(dropdown, pop-search-border-radius);
 
     .van-field{
-      padding: getCssVar(dropdown, pop-search-input-padding);
+      padding: getCssVar(dropdown-pop, spacing-search-padding);
 
-      --van-cell-background: #{getCssVar(dropdown, pop-search-input-bg-color)};
+      --van-cell-background: #{getCssVar(dropdown-pop, color-search-bg)};
 
       .van-field__left-icon{
         display: flex;
         align-items: center;
-        padding: getCssVar(dropdown, pop-search-input-icon-padding);
+        padding: getCssVar(dropdown-pop, spacing-search-icon-padding);
       }
 
       .van-field__value{
@@ -174,26 +169,25 @@ $dropdown: (
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: getCssVar(dropdown, pop-list-item-padding);
-      border-bottom: getCssVar(dropdown, pop-list-item-border-bottom);
+      padding: getCssVar(dropdown-pop, spacing-item-padding);
+      border-bottom: getCssVar(dropdown-pop, border);
     }
     @include m('item-text'){
-      color: getCssVar(dropdown, select-option-item-color);
-      background-color: getCssVar(dropdown, select-option-item-bkcolor);
-      border-radius: getCssVar(dropdown, pop-list-item-border-radius);
+      color: getCssVar(dropdown-pop, color-item);
+      background-color: getCssVar(dropdown-pop, color-item-bg);
+      border-radius: getCssVar(dropdown-pop, radius-item);
       display: flex;
       align-items: center;
       justify-content: center;
-      line-height: getCssVar(dropdown, line-height);
       @include when('bkcolor') {
-        padding: getCssVar(dropdown, pop-list-bg-item-padding);
+        padding: getCssVar(dropdown-pop, spacing-bg-item-padding);
       }
       .#{bem(icon)} {
-        margin-right: getCssVar(dropdown, pop-list-item-icon-margin-right); 
+        margin-right: getCssVar(dropdown-pop, spacing-icon-gap); 
       }
     }
     @include m('selected'){
-      color: getCssVar(dropdown, pop-list-item-selected-color);
+      color: getCssVar(dropdown-pop, color-active);
     }
   }
 }
\ No newline at end of file
diff --git a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx
index 615f9676af341873eb440d944e83bd6b4dd4781c..1b6189f3ec76fb7eef3a658b0086271b3c8b3824 100644
--- a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx
+++ b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx
@@ -204,10 +204,8 @@ export const IBizDropdown = defineComponent({
                     style={
                       item?.color || item?.bkcolor
                         ? ns.cssVarBlock({
-                            'select-option-item-color': `${item.color || ''}`,
-                            'select-option-item-bkcolor': `${
-                              item.bkcolor || ''
-                            }`,
+                            'pop-color-item': `${item.color || ''}`,
+                            'pop-color-item-bg': `${item.bkcolor || ''}`,
                           })
                         : ''
                     }
@@ -288,9 +286,9 @@ export const IBizDropdown = defineComponent({
           style={
             codeListItem?.color || codeListItem?.bkcolor
               ? this.ns.cssVarBlock({
-                  'readonly-text-item-color': `${codeListItem.color || ''}`,
-                  'select-option-item-color': `${codeListItem.color || ''}`,
-                  'select-option-item-bkcolor': `${codeListItem.bkcolor || ''}`,
+                  'color-readonly': `${codeListItem.color || ''}`,
+                  'color-item': `${codeListItem.color || ''}`,
+                  'color-item-bg': `${codeListItem.bkcolor || ''}`,
                 })
               : ''
           }
@@ -324,10 +322,8 @@ export const IBizDropdown = defineComponent({
             style={
               optionValue?.color || optionValue?.bkcolor
                 ? this.ns.cssVarBlock({
-                    'select-option-item-color': `${optionValue.color || ''}`,
-                    'select-option-item-bkcolor': `${
-                      optionValue.bkcolor || ''
-                    }`,
+                    'color-item': `${optionValue.color || ''}`,
+                    'color-item-bg': `${optionValue.bkcolor || ''}`,
                   })
                 : ''
             }
diff --git a/src/editor/dropdown-list/ibiz-emoji-picker/ibiz-emoji-picker.scss b/src/editor/dropdown-list/ibiz-emoji-picker/ibiz-emoji-picker.scss
index a265631966e09c1a8227387db70a6812a5b8f893..2fb5482586750852be4b17b724517cc2201947b9 100644
--- a/src/editor/dropdown-list/ibiz-emoji-picker/ibiz-emoji-picker.scss
+++ b/src/editor/dropdown-list/ibiz-emoji-picker/ibiz-emoji-picker.scss
@@ -1,26 +1,15 @@
 $emoji-picker: (
   // 颜色
   color: getCssVar(editor, default, text-color),
-  disabled-color: getCssVar(editor, disabled, text-color),
-  readonly-color: getCssVar(editor, readonly, text-color),
-  icon-color: var(--van-field-clear-icon-color),
-
-  // 字体大小
-  font-size: getCssVar(editor, default, font-size),
-  icon-font-size: var(--van-field-clear-icon-size),
-
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
-  
-  // 高度
-  min-height: getCssVar(editor, default, line-height),
-
-  // 间距
-  icon-margin-right: getCssVar('spacing', 'extra-tight'),
-  icon-margin-left: getCssVar('spacing', 'extra-tight'),
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+  color-icon: var(--van-field-clear-icon-color),
+  // 字体
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-icon-fontSize: getCssVar(font-size, header, 5),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
+  spacing-gap: getCssVar('spacing', 'extra-tight'),
 );
 @include b('emoji-picker') {
   @include set-component-css-var('emoji-picker', $emoji-picker);
@@ -29,23 +18,23 @@ $emoji-picker: (
   align-items: center;
   width: 100%;
   height: 100%;
-  font-size: getCssVar(emoji-picker, font-size);
-  line-height: getCssVar(emoji-picker, line-height);
+  font-size: getCssVar(emoji-picker, font-fontSize);
+  line-height: getCssVar(emoji-picker, font-lineHeight);
   color: getCssVar(emoji-picker, color);
 
   @include e('button-content') {
     display: flex;
     align-items: center;
-    line-height: getCssVar(emoji-picker, line-height);
+    line-height: getCssVar(emoji-picker, font-lineHeight);
 
     @include m('icon') {
-      margin-right: getCssVar(emoji-picker, icon-margin-right);
+      margin-right: getCssVar(emoji-picker, spacing-gap);
       fill: currentcolor;
     }
     @include m('icon-clear') {
-      margin-left: getCssVar(emoji-picker, icon-margin-left);
-      font-size: getCssVar(emoji-picker, icon-font-size);
-      fill: getCssVar(emoji-picker, icon-color);
+      margin-left: getCssVar(emoji-picker, spacing-gap);
+      font-size: getCssVar(emoji-picker, font-icon-fontSize);
+      fill: getCssVar(emoji-picker, color, icon);
     }
   }
 
@@ -59,19 +48,19 @@ $emoji-picker: (
   @include m('readonly') {
     display: flex;
     align-items: center;
-    color: getCssVar(emoji-picker, readonly-color);
+    color: getCssVar(emoji-picker, color-readonly);
     pointer-events: none;
   }
   @include m('disabled') {
     display: flex;
     align-items: center;
-    color: getCssVar(emoji-picker, disabled-color);
+    color: getCssVar(emoji-picker, color-disabled);
     pointer-events: none;
   }
 
   .#{bem('emoji-picker','button')} {
     display: flex;
     flex-direction: row;
-    justify-content: getCssVar(emoji-picker, text-align);
+    justify-content: getCssVar(emoji-picker, font-textAlign);
   }
 }
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 89864ce2db647db2318ef10e572cf1d84c090dd7..7a88ff5e63033793639b8fdf5835b03bc1258b2c 100644
--- a/src/editor/html/quill-editor-preview/quill-editor-preview.scss
+++ b/src/editor/html/quill-editor-preview/quill-editor-preview.scss
@@ -1,71 +1,70 @@
 $quill-preview: (
-  // 颜色
-  placeholder-color: getCssVar(editor, default, placeholder-color),
-  btn-color: getCssVar(color, primary),
-
   // 高度
-  height-min-height: rem(100px),
-
+  min-height: rem(100px),
+  // 颜色
+  color-placeholder: getCssVar(editor, default, placeholder, color),
+  color-btn: getCssVar(color, primary),
   // 字体大小
-  font-size: getCssVar(font-size, header-4),
-
+  font-fontSize: getCssVar(font-size, header-4),
   // 间距
-  editor-padding-right: rem(40px),
-  readonly-editor-padding-right: rem(15px),
-  disabled-editor-padding-right: rem(15px),
+  spacing-editor-padding-top: getCssVar('spacing', 'base-tight'),
+  spacing-editor-padding-right: getCssVar('spacing', 'base'),
+  spacing-padding-right: getCssVar('spacing', 'super-loose'),
+  spacing-readonly-padding-right: getCssVar('spacing', 'base'),
+  spacing-disabled-padding-right: getCssVar('spacing', 'base'),
 );
 
 @include b(quill-preview) {
-    @include set-component-css-var(quill-preview, $quill-preview);
+  @include set-component-css-var(quill-preview, $quill-preview);
 
-    position: relative;
-    min-height: getCssVar(quill-preview, height-min-height);
-    @include e(edit) {
-        position: absolute;
-        top: rem(12px);
-        right: rem(15px);
-        font-size: getCssVar(quill-preview, font-size);
-    }
+  position: relative;
+  min-height: getCssVar(quill-preview, min-height);
+  @include e(edit) {
+    position: absolute;
+    top: getCssVar(quill-preview, spacing-editor-padding-top);
+    right: getCssVar(quill-preview, spacing-editor-padding-right);
+    font-size: getCssVar(quill-preview, font-fontSize);
+  }
 
+  .ql-editor {
+    padding-right: getCssVar(quill-preview, spacing-padding-right);
+  }
+  @include m(readonly) {
     .ql-editor {
-        padding-right: getCssVar(quill-preview, editor-padding-right);
-    }
-    @include m(readonly) {
-        .ql-editor {
-            padding-right: getCssVar(quill-preview, readonly-editor-padding-right);
-        }
-    }
-    @include m(disabled) {
-        .ql-editor {
-            padding-right: getCssVar(quill-preview, disabled-editor-padding-right);
-        }
+      padding-right: getCssVar(quill-preview, spacing-readonly-padding-right);
     }
-    @include e(image-popup) {
-        overflow: visible;
-        background-color: transparent;
+  }
+  @include m(disabled) {
+    .ql-editor {
+      padding-right: getCssVar(quill-preview, spacing-disabled-padding-right);
     }
+  }
+  @include e(image-popup) {
+    overflow: visible;
+    background-color: transparent;
+  }
 
-    .ql-editor.ql-blank {
-        padding: 0;
+  .ql-editor.ql-blank {
+    padding: 0;
 
-        &::before {
-            left: 0;
-            font-style: normal;
-            color: getCssVar(quill-preview, placeholder-color);
-        }
+    &::before {
+      left: 0;
+      font-style: normal;
+      color: getCssVar(quill-preview, color-placeholder);
     }
-    @include m('show-collapse'){
-        @include when('collapse'){            
-            height: var(--default-height);
+  }
+  @include m('show-collapse') {
+    @include when('collapse') {
+      height: getCssVar(quill-preview, height-default);
 
-            .ql-editor{
-                overflow: hidden;
-            }
-        }
+      .ql-editor {
+        overflow: hidden;
+      }
     }
+  }
+}
+@include b('quill-preview-collapse-btn') {
+  display: flex;
+  align-items: center;
+  color: getCssVar(quill-preview, color-btn);
 }
-@include b('quill-preview-collapse-btn'){
-    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-preview/quill-editor-preview.tsx b/src/editor/html/quill-editor-preview/quill-editor-preview.tsx
index 9e40a3ddfecb0ea262969c84605ccd9d6cbd61a3..64d5590c4eecc744e349d260256cba0d28f7bfb6 100644
--- a/src/editor/html/quill-editor-preview/quill-editor-preview.tsx
+++ b/src/editor/html/quill-editor-preview/quill-editor-preview.tsx
@@ -169,7 +169,9 @@ const IBizQuillPreview: any = defineComponent({
           this.showCollapse ? this.ns.m('show-collapse') : '',
           this.ns.is('collapse', this.isCollapse),
         ]}
-        style={`--default-height: ${this.collapseHeight}`}
+        style={this.ns.cssVarBlock({
+          'height-default': `${this.collapseHeight || ''}`,
+        })}
       >
         <div ref='editorRef' onClick={this.handleContentClick}>
           {this.controller.valueMode === 'html' ? (
diff --git a/src/editor/html/quill-editor/quill-editor.scss b/src/editor/html/quill-editor/quill-editor.scss
index 32e0f00b7a180b1b87004d7505a4c0e4c13bcbc6..2578b28f8888dc05d279ec35b421894e212ccf9f 100644
--- a/src/editor/html/quill-editor/quill-editor.scss
+++ b/src/editor/html/quill-editor/quill-editor.scss
@@ -6,11 +6,11 @@ $quill: (
   color-border: getCssVar(color, border),
   color-active: getCssVar(editor, default, active-text-color),
   // 宽度
-  picker-width: rem(60px),
+  width-picker: rem(60px),
 
   // 间距
-  footer-padding: rem(10px),
-  footer-button-margin-left: getCssVar(spacing, tight),
+  spacing-footer-padding: getCssVar(spacing, tight),
+  spacing-btn-gap: getCssVar(spacing, tight),
 );
 
 @include b(quill) {
@@ -42,7 +42,7 @@ $quill: (
 
         .ql-toolbar.ql-snow {
             .ql-header.ql-picker {
-                width: getCssVar(quill, picker-width);
+                width: getCssVar(quill, width-picker);
             }
 
             & + .ql-container.ql-snow {
@@ -112,14 +112,14 @@ $quill: (
     @include e(footer) {
         display: flex;
         flex: none;
-        padding: getCssVar(quill, footer-padding);
+        padding: getCssVar(quill, spacing-footer-padding);
 
         .van-button {
             width: 100%;
         }
 
         .van-button + .van-button {
-            margin-left: getCssVar(quill, footer-button-margin-left);
+            margin-left: getCssVar(quill, spacing-btn-gap);
         }
     }
 
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 6f43c870a5a0986630719fbc93fc3502d1349269..a2c62edf7f272aeb4843c18cb61a7556cc22fdc5 100644
--- a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss
+++ b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss
@@ -1,13 +1,11 @@
 $markdown: (
   // 颜色
   color: getCssVar(editor, default, text-color),
-  color-md-toolbar-bg: getCssVar(color, bg, 2),
+  color-toolbar-bg: getCssVar(color, bg, 2),
   color-previewer-bg: getCssVar(color, bg, 1),
   color-active: getCssVar(editor, default, active-text-color),
-  disabled-color: getCssVar(editor, disabled, text-color),
-  readonly-color: getCssVar(editor, readonly, text-color),
-  // 宽度
-  width: 100%
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
 );
 
 @include b(markdown) {
@@ -15,7 +13,7 @@ $markdown: (
   @include b(markdown-cherry) {
     @include set-component-css-var('markdown', $markdown);
 
-    width: getCssVar('markdown', 'width');
+    width: 100%;
 
     .cherry {
       width: 100%;
@@ -69,7 +67,7 @@ $markdown: (
     .cherry-floatmenu,
     .cherry-toolbar,
     .cherry-dropdown {
-      background-color: getCssVar(markdown, color-md-toolbar-bg);
+      background-color: getCssVar(markdown, color-toolbar-bg);
     }
 
     // 工具栏与内容区的字体颜色
@@ -141,18 +139,18 @@ $markdown: (
   }
 
   @include m(disabled) {
-    color: getCssVar('markdown', 'disabled-color');
+    color: getCssVar('markdown', 'color-disabled');
 
     .cherry {
-      color: getCssVar('markdown', 'disabled-color');
+      color: getCssVar('markdown', 'color-disabled');
     }
   }
 
   @include m(readonly) {
-    --van-field-input-text-color: #{getCssVar('markdown', 'readonly-color')};
+    --van-field-input-text-color: #{getCssVar('markdown', 'color-readonly')};
 
     .cherry {
-      color: getCssVar('markdown', 'readonly-color');
+      color: getCssVar('markdown', 'color-readonly');
     }
   }
 }
diff --git a/src/editor/not-supported-editor/not-supported-editor.scss b/src/editor/not-supported-editor/not-supported-editor.scss
index d4f22c603b0ba40bc649648035225e37caa37079..1340d2cd6a63731612ec91afa38122c5716d13b2 100644
--- a/src/editor/not-supported-editor/not-supported-editor.scss
+++ b/src/editor/not-supported-editor/not-supported-editor.scss
@@ -1,18 +1,15 @@
 $not-supported-editor: (
   // 颜色
   color: getCssVar(color, danger),
-
-  // 字体大小
-  font-size: getCssVar(editor, default, font-size),
-
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
+  // 字体
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-lineHeight: getCssVar(editor, default, line-height),
 );
 
 @include b(not-supported-editor) {
   @include set-component-css-var(not-supported-editor, $not-supported-editor);
 
-  font-size: getCssVar(not-supported-editor, font-size);
-  line-height: getCssVar(not-supported-editor, line-height);
+  font-size: getCssVar(not-supported-editor, font-fontSize);
+  line-height: getCssVar(not-supported-editor, font-lineHeight);
   color: getCssVar(not-supported-editor, 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 fd4798421db4fbd4313d3adfd26953ecad448ec9..f74c5b3389fc5d5a5fe9c0f84ec61ce974f50687 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,18 +1,15 @@
 $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),
-  clear-color: var(--van-field-clear-icon-color),
+  color-placeholder: getCssVar(editor, default, placeholder, color),
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+  color-clear: var(--van-field-clear-icon-color),
 
-  // 字体大小
-  font-size: getCssVar(editor, default, font-size),
-  icon-font-size: getCssVar(font-size, header-4),
-  clear-font-size: var(--van-field-clear-icon-size),
-
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
+  // 字体
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-clear-fontSize: var(--van-field-clear-icon-size),
+  font-lineHeight: getCssVar(editor, default, line-height),
 
   // 清除按钮样式
   clear-display: getCssVar(editor, default, required-style),
@@ -22,17 +19,17 @@ $number-range-picker: (
   @include set-component-css-var(number-range-picker, $number-range-picker);
 
   width: 100%;
-  font-size: getCssVar(number-range-picker, font-size);
-  line-height: getCssVar(number-range-picker, line-height);
+  font-size: getCssVar(number-range-picker, font-fontSize);
+  line-height: getCssVar(number-range-picker, font-lineHeight);
   color: getCssVar(number-range-picker, color);
 
   --van-field-input-text-color: #{getCssVar(number-range-picker, color)};
   --van-cell-text-color: #{getCssVar(number-range-picker, color)};
   --van-cell-value-color: #{getCssVar(number-range-picker, color)};
-  --van-cell-line-height: #{getCssVar(number-range-picker, line-height)};
-  --van-cell-font-size: #{getCssVar(number-range-picker, font-size)};
-  --van-cell-value-font-size: #{getCssVar(number-range-picker, font-size)};
-  --van-field-input-disabled-text-color: #{getCssVar(number-range-picker, disabled-color)};
+  --van-cell-line-height: #{getCssVar(number-range-picker, font-lineHeight)};
+  --van-cell-font-size: #{getCssVar(number-range-picker, font-fontSize)};
+  --van-cell-value-font-size: #{getCssVar(number-range-picker, font-fontSize)};
+  --van-field-input-disabled-text-color: #{getCssVar(number-range-picker, color-disabled)};
 
   @include flex(row, center, center);
 
@@ -49,25 +46,25 @@ $number-range-picker: (
   }
 
   input::placeholder {
-    color: getCssVar(number-range-picker, placeholder-color);
-    -webkit-text-fill-color: getCssVar(number-range-picker, placeholder-color);
+    color: getCssVar(number-range-picker, color-placeholder);
+    -webkit-text-fill-color: getCssVar(number-range-picker, color-placeholder);
   }
 
   @include m(disabled) {
-    --van-field-input-disabled-text-color: #{getCssVar(number-range-picker, disabled-color)};
+    --van-field-input-disabled-text-color: #{getCssVar(number-range-picker, color-disabled)};
 
-    color: getCssVar(number-range-picker, disabled-color);
+    color: getCssVar(number-range-picker, color-disabled);
   }
 
   @include m(readonly) {
-    --van-field-input-text-color: #{getCssVar(number-range-picker, readonly-color)};
+    --van-field-input-text-color: #{getCssVar(number-range-picker, color-readonly)};
 
-    color: getCssVar(number-range-picker, readonly-color);
+    color: getCssVar(number-range-picker, color-readonly);
   }
 
   @include e('clear-icon'){
     display: getCssVar(number-range-picker, clear-display);
-    font-size: getCssVar(number-range-picker, clear-font-size);
-    color: getCssVar(number-range-picker, clear-color);
+    font-size: getCssVar(number-range-picker, font-clear-fontSize);
+    color: getCssVar(number-range-picker, color-clear);
   }
 }
\ No newline at end of file
diff --git a/src/editor/qrcode/ibiz-qrcode/ibiz-qrcode.scss b/src/editor/qrcode/ibiz-qrcode/ibiz-qrcode.scss
index ffa532dc61920662ea20ab26724f4147c750fdb6..fc4876a9cbf54740dbc331f7bbe10aecf75bf9a5 100644
--- a/src/editor/qrcode/ibiz-qrcode/ibiz-qrcode.scss
+++ b/src/editor/qrcode/ibiz-qrcode/ibiz-qrcode.scss
@@ -1,18 +1,12 @@
 $qrcode: (
-  // 颜色
   color: getCssVar(color, disabled, text),
   width: rem(300px),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
 );
 
 @include b(qrcode) {
   @include set-component-css-var(qrcode, $qrcode);
 
-  display: flex;
-  align-items: center;
-  justify-content: getCssVar(qrcode, text-align);
+  @include flex(row, center, center);
   width: 100%;
   height: 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 ab1211e7493598135a83baf28b46026fa6407ce9..97323706d1599fa9ece6f17f6bffeba9c683bdf6 100644
--- a/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss
+++ b/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss
@@ -1,38 +1,29 @@
 $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),
-
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
-
-  // 间距
-  item-gap: getCssVar(spacing, tight),
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+  spacing-gap: getCssVar(spacing, tight),
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
 );
 
 @include b('radio') {
   @include set-component-css-var(radio, $radio);
 
   height: 100%;
-  font-size: getCssVar(radio, font-size);
-  line-height: getCssVar(radio, line-height);
+  font-size: getCssVar(radio, font-fontSize);
+  line-height: getCssVar(radio, font-lineHeight);
   color: getCssVar(radio, color);
 
-  --van-radio-size: #{getCssVar(radio, font-size)};
+  --van-radio-size: #{getCssVar(radio, font-fontSize)};
 
   .van-radio--horizontal {
     margin-right: 0;
   }
 
   .van-radio-group--horizontal {
-    gap: getCssVar(radio, item-gap);
+    gap: getCssVar(radio, spacing-gap);
   }
 
   .van-radio-group {
@@ -40,26 +31,26 @@ $radio: (
   }
 
   @include e('text') {
-    font-size: getCssVar(radio, font-size);
-    line-height: getCssVar(radio, line-height);
+    font-size: getCssVar(radio, font-fontSize);
+    line-height: getCssVar(radio, font-lineHeight);
     color: getCssVar(radio, color);
   }
 
   @include m(disabled) {
     @include e('text') {
-      color: getCssVar(radio, disabled-color);
+      color: getCssVar(radio, color-disabled);
     }
   }
 
   @include m(readonly) {
-    color: getCssVar(radio, readonly-color);
+    color: getCssVar(radio, color-readonly);
   }
 
   .van-radio-group--horizontal {
     display: flex;
-    justify-content: getCssVar(radio, text-align);
+    justify-content: getCssVar(radio, font-textAlign);
   }
   &.#{bem('radio','','readonly')}{
-    text-align: getCssVar(radio, text-align);
+    text-align: getCssVar(radio, font-textAlign);
   }
 }
diff --git a/src/editor/rate/ibiz-rate/ibiz-rate.scss b/src/editor/rate/ibiz-rate/ibiz-rate.scss
index c2b0a5a6c8b6ef92eaf14c98c274c4d8d01fb0e1..6afb854000eda754169390c14d0c765424ad3211 100644
--- a/src/editor/rate/ibiz-rate/ibiz-rate.scss
+++ b/src/editor/rate/ibiz-rate/ibiz-rate.scss
@@ -1,12 +1,7 @@
 $stepper: (
-  // 颜色
-  icon-color: getCssVar(color, primary),
-
-  // 高度
   min-height: getCssVar(editor, default, line-height),
-  
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
+  color-icon: getCssVar(color, primary),
+  font-textAlign: getCssVar(editor, default, text-align),
 );
 
 @include b(rate) {
@@ -15,12 +10,12 @@ $stepper: (
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: getCssVar(stepper, text-align);
+  justify-content: getCssVar(stepper, font-textAlign);
   min-height: getCssVar(stepper, min-height);
 
   .van-rate {
     .van-rate__icon--full {
-      color: getCssVar(stepper, icon-color);
+      color: getCssVar(stepper, color-icon);
     }
   }
 }
diff --git a/src/editor/raw/ibiz-raw/ibiz-raw.scss b/src/editor/raw/ibiz-raw/ibiz-raw.scss
index bc1b702d993522478c8ea29da281d5a26487ddad..d88daae8d5680929e334ff5c19f3817a8ec74719 100644
--- a/src/editor/raw/ibiz-raw/ibiz-raw.scss
+++ b/src/editor/raw/ibiz-raw/ibiz-raw.scss
@@ -1,20 +1,15 @@
 $raw: (
-  // 颜色
   color: getCssVar(editor, default, text-color),
-
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
 );
 
 @include b(raw){
   @include set-component-css-var(raw, $raw);
 
-  line-height: getCssVar(raw, line-height);
+  line-height: getCssVar(raw, font-lineHeight);
   color:getCssVar(raw, color);
-  text-align: getCssVar(raw, text-align);
+  text-align: getCssVar(raw, font-textAlign);
 
   .van-notice-bar {
     text-align: left;
diff --git a/src/editor/slider/ibiz-slider/ibiz-slider.scss b/src/editor/slider/ibiz-slider/ibiz-slider.scss
index 542bbd70c380f2e22b5e289cd4cfcff4177661db..63be4d2d176f54fd7be3219b41eb10a8200b6ba4 100644
--- a/src/editor/slider/ibiz-slider/ibiz-slider.scss
+++ b/src/editor/slider/ibiz-slider/ibiz-slider.scss
@@ -1,26 +1,13 @@
 $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: getCssVar(editor, default, line-height),
-
-  // 宽度
-  button-width: rem(26px),
-
-  // 圆角
-  button-border-radius: rem(100px),
-
-  // 间距
-  padding: 0 rem(13px),
+  color-text: getCssVar(color, white),
+  color-bg: getCssVar(color, primary),
+  spacing-padding: 0 getCssVar(spacing, base-tight),
+  spacing-button-padding: 0 getCssVar(spacing, tight),
+  font-fontSize: getCssVar(font-size, regular),
+  font-button-fontSize: getCssVar(font-size, small),
+  font-button-lineHeight: getCssVar('font-size', 'header-5'),
+  radius-button: rem(100px),
 );
 
 @include b(slider) {
@@ -30,7 +17,7 @@ $slider: (
   min-height: getCssVar(slider, min-height);
   @include flex(row, flex-start, center);
 
-  padding: getCssVar(slider, padding);
+  padding: getCssVar(slider, spacing-padding);
 
   @include e('circle') {
     width: 100%;
@@ -41,7 +28,7 @@ $slider: (
       justify-content: center;
       width: 100%;
       height: 100%;
-      font-size: getCssVar(slider, font-size);
+      font-size: getCssVar(slider, font-fontSize);
     }
 
     .van-circle{
@@ -51,12 +38,12 @@ $slider: (
   }
   
   @include b(slider-button) {
-    width: getCssVar(slider, button-width);
-    font-size: getCssVar(slider, button-font-size);
-    line-height: getCssVar(slider, button-line-height);
-    color: getCssVar(slider, button-color);
+    padding: getCssVar(slider, spacing-button-padding);
+    font-size: getCssVar(slider, font-button-fontSize);
+    line-height: getCssVar(slider, font-button-lineHeight);
+    color: getCssVar(slider, color-text);
     text-align: center;
-    background-color: getCssVar(slider, button-bg-color);
-    border-radius: getCssVar(slider, button-border-radius);
+    background-color: getCssVar(slider, color-bg);
+    border-radius: getCssVar(slider, radius-button);
   }
 }
diff --git a/src/editor/span/span-link/span-link.scss b/src/editor/span/span-link/span-link.scss
index 8c95f605903d08a8bc90b74cacd6e0ce53e51d4a..bbe56abf0d1255a3d074780fd9c802dc52101c7a 100644
--- a/src/editor/span/span-link/span-link.scss
+++ b/src/editor/span/span-link/span-link.scss
@@ -1,33 +1,26 @@
 $span-link: (
-  // 颜色
   color: getCssVar(color, primary),
-  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),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
 );
 
 @include b(span-link) {
   @include set-component-css-var(span-link, $span-link);
 
-  font-size: getCssVar(span-link, font-size);
-  line-height: getCssVar(span-link, line-height);
+  font-size: getCssVar(span-link, font-fontSize);
+  line-height: getCssVar(span-link, font-lineHeight);
   color: getCssVar(span-link, color);
-  text-align: getCssVar(span-link, text-align);
+  text-align: getCssVar(span-link, font-textAlign);
   cursor: pointer;
 
   @include m(disabled) {
-    color: getCssVar(span-link, disabled-color);
+    color: getCssVar(span-link, color-disabled);
     cursor: not-allowed;
   }
   @include m(readonly) {
-    color: getCssVar(span-link, readonly-color);
+    color: getCssVar(span-link, color-readonly);
   }
 }
diff --git a/src/editor/span/span/span.scss b/src/editor/span/span/span.scss
index 40a96a260dfece35de919aae4d2f98a1f6fe1e5c..354faf9b211f7d6b76f982b8df6cf697d254711c 100644
--- a/src/editor/span/span/span.scss
+++ b/src/editor/span/span/span.scss
@@ -1,24 +1,13 @@
 $span: (
-  // 颜色
   color: getCssVar(editor, default, text-color),
-  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(editor, default, text-align),
-
-  // 间距
-  code-list-item-padding: 0 getCssVar(spacing, base-tight),
-
-  // 圆角
-  code-list-item-border-radius: getCssVar(border-radius, medium),
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+  color-code-list: getCssVar(color, white),
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
+  spacing-code-list-padding: 0 getCssVar(spacing, base-tight),
+  radius-code-list: getCssVar(border-radius, medium),
 );
 
 @include b('span') {
@@ -26,23 +15,23 @@ $span: (
 
   display: block;
   width: 100%;
-  font-size: getCssVar(span, font-size);
-  line-height: getCssVar(span, line-height);
+  font-size: getCssVar(span, font-fontSize);
+  line-height: getCssVar(span, font-lineHeight);
   color: getCssVar(span, color);
-  text-align: getCssVar(span, text-align);
+  text-align: getCssVar(span, font-textAlign);
   white-space: pre-line;
   @include utils-ellipsis;
 
   @include m(disabled) {
-    color: getCssVar(span, disabled-color);
+    color: getCssVar(span, color-disabled);
   }
 
   @include m(readonly) {
-    color: getCssVar(span, readonly-color);
+    color: getCssVar(span, color-readonly);
   }
   @include e('code-list') {
     @include m(icon) {
-      min-height: getCssVar(span, line-height);
+      min-height: getCssVar(span, font-lineHeight);
 
       &.#{bem('code-list')} .#{bem('icon')} {
         padding-right: 0;
@@ -51,16 +40,16 @@ $span: (
 
     @include when('reverse-color') {
       .#{bem('code-list','item')} {
-        padding: getCssVar(span, code-list-item-padding);
-        color: getCssVar(span, code-list-item-color);
+        padding: getCssVar(span, spacing-code-list-padding);
+        color: getCssVar(span, color-code-list);
         background-color: getCssVar('code-list', 'item-color');
-        border-radius: getCssVar(span, code-list-item-border-radius);
+        border-radius: getCssVar(span, radius-code-list);
       }
     }
   }
   .#{bem('span','code-list')}{
     display: flex;
     flex-direction: row;
-    justify-content: getCssVar(span, text-align);
+    justify-content: getCssVar(span, font-textAlign);
   }
 }
diff --git a/src/editor/stepper/ibiz-stepper/ibiz-stepper.scss b/src/editor/stepper/ibiz-stepper/ibiz-stepper.scss
index cb12fd1ca3fa8f47ed3ea4fbb4a7d5d8d3e9d14c..1f1a5bec3b88b31e2454f29d89e92f01f30708f8 100644
--- a/src/editor/stepper/ibiz-stepper/ibiz-stepper.scss
+++ b/src/editor/stepper/ibiz-stepper/ibiz-stepper.scss
@@ -1,19 +1,12 @@
 $stepper: (
-  // 颜色
   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),
-  bg-color: transparent,
-
-  // 字体大小
-  font-size: getCssVar(editor, default, font-size),
-
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
+  color-bg: transparent,
+  color-placeholder: getCssVar(editor, default, placeholder, color),
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
 );
 
 @include b(stepper) {
@@ -21,41 +14,41 @@ $stepper: (
 
   display: flex;
   flex-direction: row;
-  justify-content: getCssVar(stepper, text-align);
-  font-size: getCssVar(stepper, font-size);
-  line-height: getCssVar(stepper, line-height);
+  justify-content: getCssVar(stepper, font-textAlign);
+  font-size: getCssVar(stepper, font-fontSize);
+  line-height: getCssVar(stepper, font-lineHeight);
   color: getCssVar(stepper, color);
 
-  --van-stepper-input-font-size: #{getCssVar(stepper, font-size)};
-  --van-stepper-input-line-height: #{getCssVar(stepper, line-height)};
+  --van-stepper-input-font-size: #{getCssVar(stepper, font-fontSize)};
+  --van-stepper-input-line-height: #{getCssVar(stepper, font-lineHeight)};
   --van-stepper-input-text-color: #{getCssVar(stepper, color)};
-  --van-stepper-input-height: #{getCssVar(stepper, line-height)};
-  --van-stepper-input-disabled-text-color: #{getCssVar(stepper, disabled-color)};
+  --van-stepper-input-height: #{getCssVar(stepper, font-lineHeight)};
+  --van-stepper-input-disabled-text-color: #{getCssVar(stepper, color-disabled)};
 
   .van-stepper {
     display: flex;
 
     .van-stepper__minus,
     .van-stepper__plus {
-      background-color: getCssVar(stepper, bg-color);
+      background-color: getCssVar(stepper, color-bg);
     }
 
     .van-stepper__input {
-      background-color: getCssVar(stepper, bg-color);
+      background-color: getCssVar(stepper, color-bg);
     }
   }
 
   input::placeholder {
-    color: getCssVar(stepper, placeholder-color);
-    -webkit-text-fill-color: getCssVar(stepper, placeholder-color);
+    color: getCssVar(stepper, color-placeholder);
+    -webkit-text-fill-color: getCssVar(stepper, color-placeholder);
   }
 
   @include m(disabled) {
-    color: getCssVar(stepper, disabled-color);
+    color: getCssVar(stepper, color-disabled);
   }
 
   @include m(readonly) {
-    color: getCssVar(stepper, readonly-color);
+    color: getCssVar(stepper, color-readonly);
   }
 
 }
\ 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 70ccd125d641c36811e33f31fbb9fdad193be94c..fdd77e8fc39613cb8b338105db0a0845abbabd81 100644
--- a/src/editor/switch/ibiz-switch/ibiz-switch.scss
+++ b/src/editor/switch/ibiz-switch/ibiz-switch.scss
@@ -1,10 +1,6 @@
 $switch: (
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
-
-  // 高度
-  height: var(--van-switch-height),
   min-height: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
 );
 
 @include b('switch') {
@@ -13,14 +9,8 @@ $switch: (
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: getCssVar(switch, text-align);
+  justify-content: getCssVar(switch, font-textAlign);
   width: 100%;
   height: 100%;
   min-height: getCssVar(switch, min-height);
-
-  &.#{bem('switch')} {
-    .van-switch {
-      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 308d38bde8bb681ed191f0e6efff4c0facc3c020..12d07daa0a9679164faeaee8a92762726f92af4f 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,61 +1,50 @@
 $input-number: (
-  // 颜色
   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),
-
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
-
-  // 间距
-  unit-margin-left: rem(10px),
-
-  // 清除按钮样式
+  color-placeholder: getCssVar(editor, default, placeholder, color),
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
+  spacing-unit-gap: getCssVar(spacing, tight),
   clear-display: getCssVar(editor, default, required-style),
 );
 
 @include b('input-number') {
   @include set-component-css-var(input-number, $input-number);
 
+  display: flex;
   height: 100%;
-  font-size: getCssVar(input-number, font-size);
-  line-height: getCssVar(input-number, line-height);
+  font-size: getCssVar(input-number, font-fontSize);
+  line-height: getCssVar(input-number, font-lineHeight);
   color: getCssVar(input-number, color);
-  text-align: getCssVar(input-number, text-align);
+  text-align: getCssVar(input-number, font-textAlign);
 
   --van-field-input-text-color: #{getCssVar(input-number, color)};
   --van-cell-text-color: #{getCssVar(input-number, color)};
   --van-cell-value-color: #{getCssVar(input-number, color)};
-  --van-cell-line-height: #{getCssVar(input-number, line-height)};
-  --van-cell-font-size: #{getCssVar(input-number, font-size)};
-  --van-cell-value-font-size: #{getCssVar(input-number, font-size)};
-  --van-field-input-disabled-text-color: #{getCssVar(input-number, disabled-color)};
+  --van-cell-line-height: #{getCssVar(input-number, font-lineHeight)};
+  --van-cell-font-size: #{getCssVar(input-number, font-fontSize)};
+  --van-cell-value-font-size: #{getCssVar(input-number, font-fontSize)};
+  --van-field-input-disabled-text-color: #{getCssVar(input-number, color-disabled)};
 
 
   input::placeholder {
-    color: getCssVar(input-number, placeholder-color);
-    -webkit-text-fill-color: getCssVar(input-number, placeholder-color);
+    color: getCssVar(input-number, color-placeholder);
+    -webkit-text-fill-color: getCssVar(input-number, color-placeholder);
   }
 
   // 只读模式显示
   @include m(readonly) {
-    color: getCssVar(input-number, readonly-color);
-    -webkit-text-fill-color: getCssVar(input-number, readonly-color);
+    color: getCssVar(input-number, color-readonly);
+    -webkit-text-fill-color: getCssVar(input-number, color-readonly);
     @include overflow-wrap;
   }
 
   // 单位后缀样式
   .#{bem('input-number','unit')} {
-    margin-left: getCssVar(input-number, unit-margin-left);
-    font-size: getCssVar(input-number, font-size);
-    font-style: normal;
+    flex: none;
+    margin-left: getCssVar(input-number, spacing-unit-gap);
   }
 
   .van-field__clear{
diff --git a/src/editor/text-box/ibiz-input-number/ibiz-input-number.tsx b/src/editor/text-box/ibiz-input-number/ibiz-input-number.tsx
index 14fba590e5cbb21117a82bfc3955a8b219c1c2f6..e109b8e09f785dd10f97cfce7bb0882e60c1793e 100644
--- a/src/editor/text-box/ibiz-input-number/ibiz-input-number.tsx
+++ b/src/editor/text-box/ibiz-input-number/ibiz-input-number.tsx
@@ -121,7 +121,7 @@ export const IBizInputNumber = defineComponent({
           onInput={this.handleChange}
           {...useFilterAttribute(this.$attrs)}
         ></van-field>,
-        unitName && <i class={this.ns.e('unit')}>{unitName}</i>,
+        unitName && <span class={this.ns.e('unit')}>{unitName}</span>,
       ];
     }
 
diff --git a/src/editor/text-box/input/input.scss b/src/editor/text-box/input/input.scss
index 909b54585bf4f302a3cfda7bc531a07b2149a0e4..bd6de9e7860644b2079293616f3edbba08c649bb 100644
--- a/src/editor/text-box/input/input.scss
+++ b/src/editor/text-box/input/input.scss
@@ -1,19 +1,11 @@
 $input: (
-  // 颜色
   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),
-
-  // 行高
-  line-height: getCssVar(editor, default, line-height),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
-
+  color-placeholder: getCssVar(editor, default, placeholder, color),
+  color-disabled: getCssVar(editor, disabled, text-color),
+  color-readonly: getCssVar(editor, readonly, text-color),
+  font-fontSize: getCssVar(editor, default, font-size),
+  font-lineHeight: getCssVar(editor, default, line-height),
+  font-textAlign: getCssVar(editor, default, text-align),
   // 清除按钮样式
   clear-display: getCssVar(editor, default, required-style),
 );
@@ -22,32 +14,32 @@ $input: (
   @include set-component-css-var(input, $input);
 
   height: 100%;
-  font-size: getCssVar(input, font-size);
-  line-height: getCssVar(input, line-height);
+  font-size: getCssVar(input, font-fontSize);
+  line-height: getCssVar(input, font-lineHeight);
   color: getCssVar(input, color);
-  text-align: getCssVar(input, text-align);
+  text-align: getCssVar(input, font-textAlign);
 
   --van-field-input-text-color: #{getCssVar(input, color)};
   --van-cell-text-color: #{getCssVar(input, color)};
   --van-cell-value-color: #{getCssVar(input, color)};
-  --van-cell-line-height: #{getCssVar(input, line-height)};
-  --van-cell-font-size: #{getCssVar(input, font-size)};
-  --van-cell-value-font-size: #{getCssVar(input, font-size)};
-  --van-field-input-disabled-text-color: #{getCssVar(input, disabled-color)};
+  --van-cell-line-height: #{getCssVar(input, font-lineHeight)};
+  --van-cell-font-size: #{getCssVar(input, font-fontSize)};
+  --van-cell-value-font-size: #{getCssVar(input, font-fontSize)};
+  --van-field-input-disabled-text-color: #{getCssVar(input, color-disabled)};
 
   input::placeholder, textarea::placeholder {
-    color: getCssVar(input, placeholder-color);
-    -webkit-text-fill-color: getCssVar(input, placeholder-color);
+    color: getCssVar(input, color-placeholder);
+    -webkit-text-fill-color: getCssVar(input, color-placeholder);
   }
 
   @include m(readonly) {
-    color: getCssVar(input, readonly-color);
-    -webkit-text-fill-color: getCssVar(input, readonly-color);
+    color: getCssVar(input, color-readonly);
+    -webkit-text-fill-color: getCssVar(input, color-readonly);
   }
 
   // 单位后缀样式
   .#{bem('input','unit')} {
-    font-size: getCssVar(input, font-size);
+    font-size: getCssVar(input, font-fontSize);
     font-style: normal;
   }
 
diff --git a/src/editor/text-box/signature/signature.scss b/src/editor/text-box/signature/signature.scss
index 8b4935d2f420576c918005125f2de348aebda8d0..a97264cd8a1f82955b1d55ec329e3a9c7586c2d9 100644
--- a/src/editor/text-box/signature/signature.scss
+++ b/src/editor/text-box/signature/signature.scss
@@ -1,33 +1,18 @@
 /* stylelint-disable length-zero-no-unit */
 $signature: (
-  // 颜色
+  min-height: rem(120px),
+  width-remove: getCssVar('spacing', 'loose'),
+  height-remove: getCssVar('spacing', 'loose'),
   color: getCssVar('color', 'text', 2),
-  bg-color: getCssVar('color', 'black'),
-  btn-bg-color: var(--van-uploader-delete-background),
-  overlay-bg-color: getCssVar(color, bg, 1),
-
-  // 字体大小
-  font-size: getCssVar('font-size', 'header-6'),
-
-  // 宽度
-  btn-width: getCssVar('spacing', 'loose'),
-  
-  // 高度
-  min-height: 120px,
-  btn-height: getCssVar('spacing', 'loose'),
-
-  // 圆角
-  border-radius: getCssVar('border-radius', 'large'),
-
-  // 边框
-  border: var(--van-uploader-delete-background),
-
-  // 间距
-  btn-margin-left: getCssVar('spacing', 'loose'),
-  overlay-padding-bottom: 0px,
-  overlay-header-padding: getCssVar('spacing', 'extra-tight'),
-  footer-btn-padding: getCssVar('spacing', 'tight') getCssVar('spacing', 'loose'),
-  footer-margin-left: getCssVar('spacing', 'loose'),
+  color-bg: getCssVar('color', 'bg', overlay),
+  color-remove-bg: var(--van-uploader-delete-background),
+  color-overlay-bg: getCssVar(color, bg, 1),
+  spacing-safe: 0px,
+  spacing-overlay-header-padding: getCssVar('spacing', 'extra-tight'),
+  spacing-btn-padding: getCssVar('spacing', 'tight') getCssVar('spacing', 'loose'),
+  spacing-btn-spacing: getCssVar('spacing', 'loose'),
+  font-fontSize: getCssVar('font-size', 'header-6'),
+  radius: getCssVar('border-radius', 'large'),
 );
 
 @include b('signature') {
@@ -39,7 +24,7 @@ $signature: (
   min-height: getCssVar('signature', 'min-height');
   overflow: hidden;
   border: none;
-  border-radius: getCssVar('signature', 'border-radius');
+  border-radius: getCssVar('signature', 'radius');
 
   @include e('modal') {
     position: absolute;
@@ -53,7 +38,7 @@ $signature: (
     @include m('background') {
       width: 100%;
       height: 100%;
-      background-color: getCssVar('signature', 'bg-color');
+      background-color: getCssVar('signature', 'color-bg');
       opacity: 0.1;
     }
     @include m('caption') {
@@ -66,16 +51,12 @@ $signature: (
       right: getCssVar('spacing', 'tight');
 
       .van-button {
-        width: getCssVar('signature', 'btn-width');
+        width: getCssVar('signature', 'width-remove');
         height: auto;
-        height: getCssVar('signature', 'btn-height');
-        background-color: getCssVar('signature', 'btn-bg-color');
-        border: getCssVar('signature', 'border');
+        height: getCssVar('signature', 'height-remove');
+        background-color: getCssVar('signature', 'color-remove-bg');
+        border: none;
         opacity: 0.6;
-
-        & + .van-button {
-          margin-left: getCssVar('signature', 'btn-margin-left');
-        }
       }
     }
   }
@@ -102,7 +83,7 @@ $signature: (
   z-index: 1;
   width: 0;
   height: 0;
-  background-color: getCssVar('signature', 'overlay-bg-color');
+  background-color: getCssVar('signature', 'color-overlay-bg');
   opacity: 0;
 
   @include when('full-screen') {
@@ -117,7 +98,7 @@ $signature: (
       position: absolute;
       top: 0;
       left: 0;
-      width: calc(100vh - #{getCssVar('signature', 'overlay-padding-bottom')});
+      width: calc(100vh - #{getCssVar('signature', 'spacing-safe')});
       height: 100vw;
       transform: rotate(90deg) translateY(-100%);
       transform-origin: top left;
@@ -125,7 +106,7 @@ $signature: (
     @include e('header') {
       position: absolute;
       z-index: 6;
-      padding: getCssVar('signature', 'overlay-header-padding');
+      padding: getCssVar('signature', 'spacing-overlay-header-padding');
       text-align: left;
     }
 
@@ -137,11 +118,11 @@ $signature: (
 
       .van-button {
         height: auto;
-        padding: getCssVar('signature', 'footer-btn-padding');
-        font-size: getCssVar('signature', 'font-size');
+        padding: getCssVar('signature', 'spacing-btn-padding');
+        font-size: getCssVar('signature', font-fontSize);
 
         & + .van-button {
-          margin-left: getCssVar('signature', 'footer-margin-left');
+          margin-left: getCssVar('signature', 'spacing-btn-spacing');
         }
       }
     }
@@ -154,7 +135,7 @@ $signature: (
       top: 0;
       left: 0;
       width: 100vw;
-      height: calc(100vh - #{getCssVar('signature', 'overlay-padding-bottom')});
+      height: calc(100vh - #{getCssVar('signature', 'spacing-safe')});
       transform: rotate(-90deg) translateX(-100%);
       transform-origin: top left;
     }
diff --git a/src/editor/text-box/signature/signature.tsx b/src/editor/text-box/signature/signature.tsx
index 3d0f076c6b8644358f06b9d6a4505dd83612732a..2024637f7da3d121fc1391f293c3409bbe276e65 100644
--- a/src/editor/text-box/signature/signature.tsx
+++ b/src/editor/text-box/signature/signature.tsx
@@ -365,8 +365,7 @@ export const IBizSignature = defineComponent({
             this.ns.is('readonly', this.readonly),
           ]}
           style={{
-            [this.ns.cssVarBlockName('overlay-padding-bottom')]:
-              this.getSafeDistance(),
+            [this.ns.cssVarBlockName('spacing-safe')]: this.getSafeDistance(),
           }}
           onClick={this.handlePadContainerClick}
         >
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 a4fc557cbf395ad798dafd0e33c7a4c1dee6859c..12582564698f7d6492b21a02dce687092f882dc1 100644
--- a/src/editor/upload/ibiz-file-upload/ibiz-file-upload.scss
+++ b/src/editor/upload/ibiz-file-upload/ibiz-file-upload.scss
@@ -1,36 +1,19 @@
 $file-upload: (
-  // 颜色
-  btn-color: getCssVar(color, text, 2),
-  preview-item-bg-color: getCssVar(color, disabled, bg),
-
-  // 字体大小
-  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),
   min-height: getCssVar(editor, default, line-height),
-
-  // 间距
-  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),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
+  width-icon: getCssVar('width-icon', 'large'),
+  width-img: getCssVar('height-control', 'large'),
+  width-remove: getCssVar('width-icon', 'large'),
+  color-btn: getCssVar(color, text, 2),
+  color-preview: getCssVar(color, disabled, bg),
+  spacing-preview-gap: getCssVar(spacing, tight),
+  spacing-preview-padding: 0 getCssVar(spacing, tight),
+  spacing-img-padding: getCssVar(spacing, tight),
+  spacing-preview-text-gap: getCssVar(spacing, tight),
+  font-btn-fontSize: getCssVar(font-size, header-4),
+  font-preview-fontSize: getCssVar(font-size, regular),
+  font-textAlign: getCssVar(editor, default, text-align),
+  radius-preview: getCssVar(border-radius, small),
+  radius-img: getCssVar(border, radius, small),
 );
 
 @include b('file-upload') {
@@ -56,10 +39,10 @@ $file-upload: (
   }
 
   @include b('file-upload-button') {
-    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);
+    width: getCssVar(file-upload, width-icon);
+    height: getCssVar(file-upload, width-icon);
+    font-size: getCssVar(file-upload, font-btn-fontSize);
+    color: getCssVar(file-upload, color-btn);
     background: transparent;
     border: none;
     border-radius: 50%;
@@ -81,7 +64,7 @@ $file-upload: (
 
   @include b(file-upload-preview) {
     width: 100%;
-    margin-top: getCssVar(file-upload, preview-margin-top);
+    margin-top: getCssVar(file-upload, spacing-preview-gap);
   }
 
   @include b(file-upload-preview-item) {
@@ -89,10 +72,10 @@ $file-upload: (
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    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);
+    padding: getCssVar(file-upload, spacing-preview-padding);
+    margin-bottom: getCssVar(file-upload, spacing-preview-gap);
+    background: getCssVar(file-upload, color-preview);
+    border-radius: getCssVar(file-upload, radius-preview);
 
     &:last-child {
       margin: 0;
@@ -102,15 +85,15 @@ $file-upload: (
 
   @include b(file-upload-preview-item-img) {
     flex-shrink: 0;
-    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);
+    width: getCssVar(file-upload, width-img);
+    min-width: getCssVar(file-upload, width-img);
+    height: getCssVar(file-upload, width-img);
+    padding: getCssVar(file-upload, spacing-img-padding);
 
     img {
       width: 100%;
       height: 100%;
-      border-radius: getCssVar(file-upload, preview-item-img-border-radius);
+      border-radius: getCssVar(file-upload, radius-img);
     }
   }
 
@@ -118,16 +101,16 @@ $file-upload: (
     display: flex;
     flex-grow: 1;
     align-items: center;
-    width: calc(100% - #{getCssVar(file-upload, preview-item-action-width)});
+    width: calc(100% - #{getCssVar(file-upload, width-remove)});
   }
 
   @include b(file-upload-preview-item-text) {
     display: flex;
     flex: 1;
     align-items: center;
-    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);
+    width: calc(100% - #{getCssVar(file-upload, width-img)} - #{getCssVar(file-upload, width-remove)});
+    padding-left: getCssVar(file-upload, spacing-preview-text-gap);
+    font-size: getCssVar(file-upload, font-preview-fontSize);
   }
 
   @include b(file-upload-preview-item-name) {
@@ -143,7 +126,7 @@ $file-upload: (
     flex-shrink: 0;
     align-items: center;
     justify-content: flex-end;
-    width: getCssVar(file-upload, preview-item-action-width);
+    width: getCssVar(file-upload, width-remove);
     text-align: right;
   }
 
@@ -156,13 +139,13 @@ $file-upload: (
   .van-uploader__input-wrapper {
     display: flex;
     align-items: center;
-    justify-content: getCssVar(file-upload, text-align);
+    justify-content: getCssVar(file-upload, font-textAlign);
     width: 100%;
 
     input {
       right: 0;
       left: auto;
-      width: getCssVar(file-upload, input-width);
+      width: getCssVar(file-upload, width-icon);
     }
   }
 
diff --git a/src/editor/upload/ibiz-image-cropping/ibiz-image-cropping.scss b/src/editor/upload/ibiz-image-cropping/ibiz-image-cropping.scss
index 66e94a4c842ceae0b64892105c176075bb4e90d0..7e56f7ff9b6a63173a82c8fb409c9c448037c664 100644
--- a/src/editor/upload/ibiz-image-cropping/ibiz-image-cropping.scss
+++ b/src/editor/upload/ibiz-image-cropping/ibiz-image-cropping.scss
@@ -1,19 +1,11 @@
 $image-upload-cropping: (
-  // 间距
-  delete-btn-top: rem(-5px),
-  delete-btn-right: rem(-5px),
-
-  // 圆角
-  border-radius: rem(4px),
-
-  // 透明度
-  delete-btn-opacity: 0.6,
-
-  // 边框
-  upload-border: rem(1px) solid getCssVar(color, border),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
+  color-remove: var(--van-uploader-delete-color),
+  color-remove-bg: var(--van-uploader-delete-background),
+  radius: getCssVar(border, radius, small),
+  opacity-remove: 0.6,
+  border: getCssVar('border-thickness', 'control') solid getCssVar(color, border),
+  font-textAlign: getCssVar(editor, default, text-align),
+  font-icon-fontSize: var(--van-uploader-delete-icon-size),
 );
 
 @include b('image-upload-cropping') {
@@ -42,53 +34,50 @@ $image-upload-cropping: (
     align-items: center;
     justify-content: center;
     width: 100%;
-    font-size: rem(12px);
     line-height: initial;
-    color: #fff;
     text-align: center;
     background: transparent;
 
     img {
       width: 100%;
       height: 100%;
-      border-radius: getCssVar(image-upload-cropping, border-radius);
+      border-radius: getCssVar(image-upload-cropping, radius);
     }
   }
 
   .van-uploader {
     display: flex;
     flex-direction: row;
-    justify-content: getCssVar(image-upload-cropping, text-align);
+    justify-content: getCssVar(image-upload-cropping, font-textAlign);
   }
 
   .van-uploader__preview-delete--shadow {
-    top: getCssVar(image-upload-cropping, delete-btn-top);
-    right: getCssVar(image-upload-cropping, delete-btn-right);
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--van-uploader-delete-icon-size);
-    height: var(--van-uploader-delete-icon-size);
+    width: getCssVar(image-upload-cropping, font-icon-fontSize);
+    height: getCssVar(image-upload-cropping, font-icon-fontSize);
     text-align: center;
-    background: var(--van-uploader-delete-background);
+    background: getCssVar(image-upload-cropping, color-remove-bg);
     border-radius: 50%;
-    opacity: getCssVar(image-upload-cropping, delete-btn-opacity);
+    opacity: getCssVar(image-upload-cropping, opacity-remove);
+    transform: translate(50%, -50%);
   }
   
   .van-uploader__preview-delete-icon {
     position: absolute;
     top: 0;
     right: 0;
-    font-size: var(--van-uploader-delete-icon-size);
-    color: var(--van-uploader-delete-color);
+    font-size: getCssVar(image-upload-cropping, font-icon-fontSize);
+    color: getCssVar(image-upload-cropping, color-remove);
     transform: scale(0.7) translate(0%, -10%);
   }
   
   .van-uploader__upload {
     margin-right: 0;
     background: transparent;
-    border: getCssVar(image-upload-cropping, upload-border);
-    border-radius: getCssVar(image-upload-cropping, border-radius);
+    border: getCssVar(image-upload-cropping, border);
+    border-radius: getCssVar(image-upload-cropping, radius);
   }
   
   .van-uploader__upload--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 08fdf1a134983d62746493ec216d10d7fefc9845..9eedf6d91bb7553b5a962722d341468a675fae75 100644
--- a/src/editor/upload/ibiz-image-select/ibiz-image-select.scss
+++ b/src/editor/upload/ibiz-image-select/ibiz-image-select.scss
@@ -1,15 +1,7 @@
 $image-select: (
-  // 圆角
-  border-radius: rem(4px),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
-
-  // 宽度
   width: var(--van-uploader-size),
-
-  // 高度
-  height: 100%,
+  font-textAlign: getCssVar(editor, default, text-align),
+  radius: getCssVar(border, radius, small),
 );
 
 @include b('image-select') {
@@ -17,7 +9,7 @@ $image-select: (
 
   display: flex;
   flex-direction: row;
-  justify-content: getCssVar(image-select, text-align);
+  justify-content: getCssVar(image-select, font-textAlign);
 
   .van-uploader__preview {
     .van-uploader__file-icon {
@@ -62,6 +54,6 @@ $image-select: (
 
   .van-uploader {
     width: getCssVar(image-select, width);
-    height: getCssVar(image-select, height);
+    height: 100%;
   }
 }
\ 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 919f696fe897b6c8b5e1b37260826e63f79d269a..d2a2cad3abcefdf19e7369f69c99a8954265ab76 100644
--- a/src/editor/upload/ibiz-image-upload/ibiz-image-upload.scss
+++ b/src/editor/upload/ibiz-image-upload/ibiz-image-upload.scss
@@ -1,19 +1,11 @@
 $image-upload: (
-  // 间距
-  delete-btn-top: rem(-5px),
-  delete-btn-right: rem(-5px),
-
-  // 圆角
-  border-radius: rem(4px),
-
-  // 透明度
-  delete-btn-opacity: 0.6,
-
-  // 边框
-  upload-border: rem(1px) solid getCssVar(color, border),
-
-  // 文本对齐
-  text-align: getCssVar(editor, default, text-align),
+  color-remove: var(--van-uploader-delete-color),
+  color-remove-bg: var(--van-uploader-delete-background),
+  radius: getCssVar(border, radius, small),
+  opacity-remove: 0.6,
+  border: getCssVar('border-thickness', 'control') solid getCssVar(color, border),
+  font-textAlign: getCssVar(editor, default, text-align),
+  font-icon-fontSize: var(--van-uploader-delete-icon-size),
 );
 
 @include b('image-upload') {
@@ -38,53 +30,50 @@ $image-upload: (
     align-items: center;
     justify-content: center;
     width: 100%;
-    font-size: rem(12px);
     line-height: initial;
-    color: #fff;
     text-align: center;
     background: transparent;
 
     img {
       width: 100%;
       height: 100%;
-      border-radius: getCssVar(image-upload, border-radius);
+      border-radius: getCssVar(image-upload, radius);
     }
   }
 
   .van-uploader {
     display: flex;
     flex-direction: row;
-    justify-content: getCssVar(image-upload, text-align);
+    justify-content: getCssVar(image-upload, font-textAlign);
   }
 
   .van-uploader__preview-delete--shadow {
-    top: getCssVar(image-upload, delete-btn-top);
-    right: getCssVar(image-upload, delete-btn-right);
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--van-uploader-delete-icon-size);
-    height: var(--van-uploader-delete-icon-size);
+    width: getCssVar(image-upload, font-icon-fontSize);
+    height: getCssVar(image-upload, font-icon-fontSize);
     text-align: center;
-    background: var(--van-uploader-delete-background);
+    background: getCssVar(image-upload, color-remove-bg);
     border-radius: 50%;
-    opacity: getCssVar(image-upload, delete-btn-opacity);
+    opacity: getCssVar(image-upload, opacity-remove);
+    transform: translate(50%, -50%);
   }
   
   .van-uploader__preview-delete-icon {
     position: absolute;
     top: 0;
     right: 0;
-    font-size: var(--van-uploader-delete-icon-size);
-    color: var(--van-uploader-delete-color);
+    font-size: getCssVar(image-upload, font-icon-fontSize);
+    color: getCssVar(image-upload, color-remove);
     transform: scale(0.7) translate(0%, -10%);
   }
   
   .van-uploader__upload {
     margin-right: 0;
     background: transparent;
-    border: getCssVar(image-upload, upload-border);
-    border-radius: getCssVar(image-upload, border-radius);
+    border: getCssVar(image-upload, border);
+    border-radius: getCssVar(image-upload, radius);
   }
   
   .van-uploader__upload--readonly {