diff --git a/CHANGELOG.md b/CHANGELOG.md
index 864a453bacf8ac0b633eccd94500fd0c4c7316bc..475ff7502192d2ce4b5bcd25982bc9128ef09c1f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@
 - 数据看板的直接内容不显示标题栏
 - 操作栏门户部件不显示标题区的操作按钮
 - 优化树部件样式，增加面包屑样式权重
+- 表单成员组件样式变量整理，并转换像素单位为rem
 
 ### Fixed
 
diff --git a/src/control/form/edit-form/edit-form.scss b/src/control/form/edit-form/edit-form.scss
index 9ea2f731ba449a9a1615f142d6e01f89966d2e95..5ca6a13e703e929a88868f093d6fb2622cec993c 100644
--- a/src/control/form/edit-form/edit-form.scss
+++ b/src/control/form/edit-form/edit-form.scss
@@ -1,11 +1,11 @@
 $control-edit-form: (
   // 边距
-  sidebar-topright-top: calc(#{getCssVar(view-page-caption, line-height)} + 2 * #{getCssVar(spacing, tight)}),
-  sidebar-topright-right: rem(0px),
-  sidebar-bottomright-bottom: rem(0px),
-  sidebar-bottomright-right: rem(0px),
-  sidebar-middleright-top: 50%,
-  sidebar-middleright-right: rem(0px),
+  spacing-topright-top: calc(#{getCssVar(view-page-caption, line-height)} + 2 * #{getCssVar(spacing, tight)}),
+  spacing-topright-right: rem(0px),
+  spacing-bottomright-bottom: rem(0px),
+  spacing-bottomright-right: rem(0px),
+  spacing-middleright-top: 50%,
+  spacing-middleright-right: rem(0px),
 );
 
 @include b(control-edit-form) {
@@ -22,8 +22,8 @@ $control-edit-form: (
     // 右侧
     @include m(middleright) {
       .van-index-bar__sidebar {
-        top: getCssVar('control-edit-form', 'sidebar-middleright-top');
-        right: getCssVar('control-edit-form', 'sidebar-middleright-right');
+        top: getCssVar('control-edit-form', 'spacing-middleright-top');
+        right: getCssVar('control-edit-form', 'spacing-middleright-right');
       }
     }
 
@@ -31,8 +31,8 @@ $control-edit-form: (
     @include m(bottomright) {
       .van-index-bar__sidebar {
         top: auto;
-        right: getCssVar('control-edit-form', 'sidebar-bottomright-right');
-        bottom: getCssVar('control-edit-form', 'sidebar-bottomright-bottom');
+        right: getCssVar('control-edit-form', 'spacing-bottomright-right');
+        bottom: getCssVar('control-edit-form', 'spacing-bottomright-bottom');
         transform: none;
       }
     }
@@ -40,8 +40,8 @@ $control-edit-form: (
     // 右上角
     @include m(topright) {
       .van-index-bar__sidebar {
-        top: getCssVar('control-edit-form', 'sidebar-topright-top');
-        right: getCssVar('control-edit-form', 'sidebar-topright-right');
+        top: getCssVar('control-edit-form', 'spacing-topright-top');
+        right: getCssVar('control-edit-form', 'spacing-topright-right');
         transform: none;
       }
     }
diff --git a/src/control/form/form-detail/form-button-list/form-button-list.scss b/src/control/form/form-detail/form-button-list/form-button-list.scss
index 2248d4e876b1e686eb7ef3fd7c50e68b6207a435..0e480b6c83fc66a1ac8e20b178bfee051a45170f 100644
--- a/src/control/form/form-detail/form-button-list/form-button-list.scss
+++ b/src/control/form/form-detail/form-button-list/form-button-list.scss
@@ -1,9 +1,9 @@
 $form-button-list: (
-  padding: getCssVar(spacing, base),
+  spacing-padding: getCssVar(spacing, base),
 );
 @include b(form-button-list) {
   @include set-component-css-var('form-button-list', $form-button-list);
   width: 100%;
   height: 100%;
-  padding: getCssVar(form-button-list, padding);
+  padding: getCssVar(form-button-list, spacing-padding);
 }
diff --git a/src/control/form/form-detail/form-button/form-button.scss b/src/control/form/form-detail/form-button/form-button.scss
index 03638fee3164861f176fa5ecc29225a6f5f27320..b1947b8a5d8e993d56aaed43e40f96d827c676ff 100644
--- a/src/control/form/form-detail/form-button/form-button.scss
+++ b/src/control/form/form-detail/form-button/form-button.scss
@@ -1,8 +1,8 @@
 $form-button: (
-  padding: getCssVar(spacing, base) 0 getCssVar(spacing, base) getCssVar(spacing, base),
-  content-gap: getCssVar(spacing, extra, tight),
-  icon-max-width: getCssVar(width-icon, medium),
-  icon-max-height: getCssVar(width-icon, medium),
+  width-icon: getCssVar(width-icon, medium),
+  height-icon: getCssVar(width-icon, medium),
+  spacing-padding: getCssVar(spacing, base) 0 getCssVar(spacing, base) getCssVar(spacing, base),
+  spacing-gap: getCssVar(spacing, extra, tight),
 );
 
 @include b(form-button) {
@@ -10,7 +10,7 @@ $form-button: (
 
   width: 100%;
   height: 100%;
-  padding: getCssVar(form-button, padding);
+  padding: getCssVar(form-button, spacing-padding);
   overflow: hidden;
 
   .van-button {
@@ -18,13 +18,13 @@ $form-button: (
 
     @include b(form-button-content) {
       @include flex(row, flex-start, center);
-      gap: getCssVar(form-button, content-gap);
+      gap: getCssVar(form-button, spacing-gap);
       
       img,
       i {
         display: inline-block;
-        max-width: getCssVar(form-button, icon-max-width);
-        max-height: getCssVar(form-button, icon-max-height);
+        max-width: getCssVar(form-button, width-icon);
+        max-height: getCssVar(form-button, height-icon);
       }
     }
   }
diff --git a/src/control/form/form-detail/form-druipart/form-druipart.scss b/src/control/form/form-detail/form-druipart/form-druipart.scss
index a824a5e10c77e0704f1315547540faea2c404855..d6d7522bcb76e58ddb98fe282be7c3449f5053fc 100644
--- a/src/control/form/form-detail/form-druipart/form-druipart.scss
+++ b/src/control/form/form-detail/form-druipart/form-druipart.scss
@@ -1,13 +1,14 @@
 $form-druipart: (
-  'bg-color': getCssVar(color, bg, 1),
-  'padding': 0,
-  'border-radius': getCssVar('border-radius', 'small')
+  'color-bg': getCssVar(color, bg, 1),
+  'spacing-padding': 0,
+  'radius-border': getCssVar('border-radius', 'small'),
 );
 $form-druipart-caption: (
-  'text-color': getCssVar(color, text, 0),
-  'font-size': getCssVar('font-size', 'header-6'),
-  'font-weight': getCssVar(font-weight, bold),
-  'padding': getCssVar(spacing, base),
+  'color-text': getCssVar(color, text, 0),
+  'spacing-padding': getCssVar(spacing, base),
+  'font-fontSize': getCssVar('font-size', 'header-6'),
+  'font-fontWeight': getCssVar(font-weight, bold),
+  'font-lineHeight': getCssVar('font-size', 'header-5'),
 );
 
 @include b(form-druipart) {
@@ -16,18 +17,19 @@ $form-druipart-caption: (
 
   width: 100%;
   height: 100%;
-  padding: getCssVar('form-druipart', 'padding');
-  background-color: getCssVar('form-druipart', 'bg-color');
-  border-radius: getCssVar('form-druipart', 'border-radius');
+  padding: getCssVar('form-druipart', 'spacing-padding');
+  background-color: getCssVar('form-druipart', 'color-bg');
+  border-radius: getCssVar('form-druipart', 'radius-border');
 
   // 标题
   @include e(caption) {
     @include utils-ellipsis;
 
-    padding: getCssVar('form-druipart-caption', 'padding');
-    font-size: getCssVar('form-druipart-caption', 'font-size');
-    font-weight: getCssVar('form-druipart-caption', 'font-weight');
-    color: getCssVar('form-druipart-caption', 'text-color');
+    padding: getCssVar('form-druipart-caption', 'spacing-padding');
+    font-size: getCssVar('form-druipart-caption', 'font-fontSize');
+    font-weight: getCssVar('form-druipart-caption', 'font-fontWeight');
+    line-height: getCssVar('form-druipart-caption', 'font-lineHeight');
+    color: getCssVar('form-druipart-caption', 'color-text');
   }
 
   // 关系界面下的视图不margin
diff --git a/src/control/form/form-detail/form-group-panel/form-group-panel.scss b/src/control/form/form-detail/form-group-panel/form-group-panel.scss
index 563405ee0ec07f06c23bf5788824a5e43978e871..0fe4deb68b0f83f0bb07fa5de6c411d7577a40d7 100644
--- a/src/control/form/form-detail/form-group-panel/form-group-panel.scss
+++ b/src/control/form/form-detail/form-group-panel/form-group-panel.scss
@@ -1,30 +1,30 @@
 $form-group: (
-  bg-color: getCssVar(color, bg, 1),
-  footer-padding: getCssVar(spacing, tight) getCssVar(spacing, base),
-  show-more-color: getCssVar(color-primary),
-  padding: getCssVar(spacing-extra-tight),
-  loading-bg-color: rgba(var(#{getCssVarName(grey, 9)}), 0.1),
-  button-color: getCssVar(color, link),
+  color-bg: getCssVar(color, bg, 1),
+  color-more: getCssVar(color-primary),
+  color-loading-bg: rgba(var(#{getCssVarName(grey, 9)}), 0.1),
+  color-button: getCssVar(color, link),
+  spacing-padding: getCssVar(spacing-extra-tight),
+  spacing-footer-padding: getCssVar(spacing, tight) getCssVar(spacing, base),
 );
 
 $form-group-header: (
-  bg-color: getCssVar(color, bg, 0),
-  padding: getCssVar(spacing, base),
-  border-color: getCssVar(color, border),
+  color-bg: getCssVar(color, bg, 0),
+  color-border: getCssVar(color, border),
+  spacing-padding: getCssVar(spacing, base),
 );
 
 $form-group-caption: (
-  text-color: getCssVar(color, text, 1),
-  font-size: getCssVar(font-size, header-6),
-  font-weight: getCssVar(font-weight, regular),
-  line-height: var(--van-cell-group-title-line-height),
-  icon-padding-right: getCssVar(spacing, tight),
+  color-text: getCssVar(color, text, 1),
+  spacing-icon-gap: getCssVar(spacing, tight),
+  font-fontSize: getCssVar(font-size, header-6),
+  font-fontWeight: getCssVar(font-weight, regular),
+  font-lineHeight: var(--van-cell-group-title-line-height),
 );
 
 $form-group-content: (
-  bg-color: getCssVar(color, bg, 1),
-  padding: 0,
-  margin: 0,
+  color-bg: getCssVar(color, bg, 1),
+  spacing-padding: 0,
+  spacing-margin: 0,
 );
 
 @include b(form-group) {
@@ -37,19 +37,19 @@ $form-group-content: (
 // 分组基础样式
 @include b(form-group) {
   overflow: hidden;
-  background-color: getCssVar('form-group', 'bg-color');
+  background-color: getCssVar('form-group', 'color-bg');
 
   // 分组标题
   @include e(caption) {
     @include utils-ellipsis;
 
-    font-size: getCssVar('form-group-caption', 'font-size');
-    font-weight: getCssVar('form-group-caption', 'font-weight');
-    line-height: getCssVar('form-group-caption', 'line-height');
-    color: getCssVar('form-group-caption', 'text-color');
+    font-size: getCssVar('form-group-caption', 'font-fontSize');
+    font-weight: getCssVar('form-group-caption', 'font-fontWeight');
+    line-height: getCssVar('form-group-caption', 'font-lineHeight');
+    color: getCssVar('form-group-caption', 'color-text');
 
     @include m('icon') {
-      padding-right: getCssVar('form-group-caption', 'icon-padding-right');
+      padding-right: getCssVar('form-group-caption', 'spacing-icon-gap');
     }
   }
 
@@ -62,20 +62,20 @@ $form-group-content: (
   }
 
   @include e(content) {
-    padding: getCssVar('form-group-content', 'padding');
+    padding: getCssVar('form-group-content', 'spacing-padding');
   }
 
   @include m(style2) {
-    padding: getCssVar('form-group', 'padding');
-    background-color: getCssVar('form-group-header', 'bg-color');
+    padding: getCssVar('form-group', 'spacing-padding');
+    background-color: getCssVar('form-group-header', 'color-bg');
 
     >.#{bem(form-group-header)} {
-      background-color: getCssVar('form-group-content', 'bg-color');
-      border-bottom: 1px solid getCssVar('form-group-header', 'border-color');
+      background-color: getCssVar('form-group-content', 'color-bg');
+      border-bottom: 1px solid getCssVar('form-group-header', 'color-border');
     }
 
     .#{bem(form-group, content)} {
-      background-color: getCssVar('form-group-content', 'bg-color');
+      background-color: getCssVar('form-group-content', 'color-bg');
     }
   }
 
@@ -85,7 +85,7 @@ $form-group-content: (
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: getCssVar('form-group', 'loading-bg-color');
+    background-color: getCssVar('form-group', 'color-loading-bg');
   }
 
   @include when(loading) {
@@ -122,8 +122,8 @@ $form-group-content: (
   @include flex;
 
   align-items: center;
-  padding: getCssVar('form-group-header', 'padding');
-  background-color: getCssVar('form-group-header', 'bg-color');
+  padding: getCssVar('form-group-header', 'spacing-padding');
+  background-color: getCssVar('form-group-header', 'color-bg');
 
   @include e((left, right)) {
     display: inline-block;
@@ -138,7 +138,7 @@ $form-group-content: (
 
     .van-button {
       height: 100%;
-      color: getCssVar('form-group', 'button-color');
+      color: getCssVar('form-group', 'color-button');
       background: transparent;
       border: none;
     }
@@ -147,18 +147,18 @@ $form-group-content: (
 
 .#{bem('form-group', '', 'show-header')} {
   >.#{bem('form-group, content')} {
-    margin-bottom: getCssVar('form-group-content', 'margin');
-    background-color: getCssVar('form-group-content', 'bg-color');
+    margin-bottom: getCssVar('form-group-content', 'spacing-margin');
+    background-color: getCssVar('form-group-content', 'color-bg');
   }
 }
 
 // 分组底部
 @include b(form-group-footer) {
-  padding: getCssVar('form-group', 'footer-padding');
+  padding: getCssVar('form-group', 'spacing-footer-padding');
 
   @include e(show-more-button) {
     display: inline-block;
-    color: getCssVar('form-group', 'show-more-color');
+    color: getCssVar('form-group', 'color-more');
   }
 
 }
\ No newline at end of file
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..e83ff0721aa2ff5e6eed4d644e9c98da77b9f1ef 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,61 @@
 /* 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(
+  height-editor: calc(
     getCssVar(editor, default, line-height) + 2 * getCssVar(spacing, extra-tight)
   ),
-  border-editor-min-height: calc(
+  height-border-editor: calc(
     getCssVar(editor, default, line-height) + 2 * getCssVar(spacing, extra-tight)
   ),
+  height-border: 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 +66,30 @@ $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-border);
       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);
+      min-height: getCssVar(form-item-container, height-border-editor);
       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 +97,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 +106,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 +127,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 +142,14 @@ $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);
+    min-height: getCssVar(form-item-container, height-editor);
   }
 
   // 必填图标 *
@@ -179,12 +157,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 +168,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 +183,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 +193,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 +204,7 @@ $form-item-popover: (
     @include when(required) {
       @include e(label) {
         &::before {
-          right: rem(-10px);
+          right: calc(-1 * getCssVar(spacing, tight));
           left: auto;
         }
       }
@@ -242,25 +217,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 +262,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..03b5fbf0818b42328e69c396f820ca53b568c71b 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,10 @@ 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` });
+        Object.assign(result, { 'width-label': `rem(${labelWidth}px)` });
       }
       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-page/form-page-item/form-page-item.scss b/src/control/form/form-detail/form-page/form-page-item/form-page-item.scss
index 8dfbe859a513d03ad5b88415e1dda569ab6c1ec7..c21effb95363bd9b3829196345f34e359808f056 100644
--- a/src/control/form/form-detail/form-page/form-page-item/form-page-item.scss
+++ b/src/control/form/form-detail/form-page/form-page-item/form-page-item.scss
@@ -1,8 +1,9 @@
-$form-page-item: ('margin': 0 0 getCssVar('spacing', 'tight') 0,
+$form-page-item: (
+    radius: getCssVar('border-radius', 'small'),
 );
 
 @include b(form-page-item) {
     @include set-component-css-var('form-page-item', $form-page-item);
 
-    border-radius: getCssVar('border-radius', 'small');
+    border-radius: getCssVar('form-page-item', 'radius');
 }
\ No newline at end of file
diff --git a/src/control/form/form-detail/form-page/form-page.scss b/src/control/form/form-detail/form-page/form-page.scss
index b09a1c687cff20b1ba9aaeca260e413f92da362f..44f210475c8f495a725bb7e2088b4f5dc757a030 100644
--- a/src/control/form/form-detail/form-page/form-page.scss
+++ b/src/control/form/form-detail/form-page/form-page.scss
@@ -1,13 +1,4 @@
 $form-page: (
-  'font-size': getCssVar('font-size', 'regular'),
-  'header-border-color': getCssVar(color, border),
-  'text-color': getCssVar(color, text, 2),
-  'bg-color': transparent,
-  'hover-text-color': getCssVar(color, text, 0),
-  'hover-bg-color': transparent,
-  'active-text-color': getCssVar(color, text, 0),
-  'active-bg-color': transparent,
-  'active-border-color': getCssVar(color, primary),
 );
 
 @include b(form-page-header) {
diff --git a/src/control/form/form-detail/form-tab-panel/form-tab-panel.scss b/src/control/form/form-detail/form-tab-panel/form-tab-panel.scss
index 489331bffe393b1a63d0615bd0da2529293daec9..0d477f41c34369b33423bca55eaaa6295eb082c5 100644
--- a/src/control/form/form-detail/form-tab-panel/form-tab-panel.scss
+++ b/src/control/form/form-detail/form-tab-panel/form-tab-panel.scss
@@ -1,5 +1,5 @@
 $form-tab-panel: (
-  'bg-color': getCssVar(color, bg, 0),
+  'color-bg': getCssVar(color, bg, 1),
 );
 
 @include b(form-tab-panel) {
@@ -7,7 +7,7 @@ $form-tab-panel: (
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: getCssVar('form-tab-panel', 'bg-color');;
+  background-color: getCssVar('form-tab-panel', 'color-bg');;
 
   @include e(caption) {
     @include flex(row, center, center)
diff --git a/src/control/form/form/form.scss b/src/control/form/form/form.scss
index 638aff5ab5bddf24e595fa92992fc57832976afe..2d245c4433603453aef147b63f78594283a78f63 100644
--- a/src/control/form/form/form.scss
+++ b/src/control/form/form/form.scss
@@ -1,5 +1,5 @@
 $control-form: (
-  'bg-color': getCssVar(color, bg, 1)
+  'color-bg': getCssVar(color, bg, 1)
 );
 
 @include b(control-form) {
@@ -8,5 +8,5 @@ $control-form: (
 
 @include b(control-form) {
   width: 100%;
-  background-color: #{getCssVar('control-form', 'bg-color')};
+  background-color: #{getCssVar('control-form', 'color-bg')};
 }
\ No newline at end of file