diff --git a/CHANGELOG.md b/CHANGELOG.md
index f9a63d32c756995d81658ee40b7b9a59d2d137a2..aa9d76c82c7f01c5a51e6ffeda6f08ef652de54c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -51,6 +51,8 @@
 - 卡片部件样式变量抽取
 - 分页导航面板样式变量抽取
 - 向导面板样式变量抽取
+- 编辑表单样式变量抽取
+- 优化门户部件头部的呈现样式
 
 ### Fixed
 
diff --git a/src/control/dashboard/portlet/portlet-layout/portlet-layout.scss b/src/control/dashboard/portlet/portlet-layout/portlet-layout.scss
index e8d7a69d7696a3e156d809e75023fccc7c0da42a..6d5181daf41d65606d1c747acc129641279ec848 100644
--- a/src/control/dashboard/portlet/portlet-layout/portlet-layout.scss
+++ b/src/control/dashboard/portlet/portlet-layout/portlet-layout.scss
@@ -1,18 +1,19 @@
 $portlet-layout: (
-  header-height: rem(40px),
-  header-padding: 0 getCssVar(spacing, base),
+  header-height: rem(50px),
+  header-padding: getCssVar(spacing, base),
   header-margin: 0,
   bg-color: getCssVar(color, bg, 1),
-  header-bg-color: transparent,
+  header-bg-color: getCssVar(color, bg, 0),
   header-border-bottom: rem(1px) solid getCssVar(color, border),
   caption-max-width: rem(300px),
-  caption-font-weight: 600,
-  caption-font-size: getCssVar(font-size, header, 5),
+  caption-font-weight: getCssVar(font-weight, regular),
+  caption-font-size:getCssVar(font-size, header-6),
   caption-color: getCssVar(color, text, 1),
   content-bg-color: transparent,
-  content-padding: 0 0 getCssVar(border-radius, medium),
+  content-padding: getCssVar(spacing, tight) getCssVar(spacing, base),
   content-margin: 0,
   border-radius: getCssVar(border-radius, medium),
+  header-line-height: var(--van-cell-group-title-line-height),
 );
 
 @include b(portlet-layout) {
@@ -28,22 +29,26 @@ $portlet-layout: (
     max-width: getCssVar(portlet-layout, caption-max-width);
 
     @include e(caption-text) {
+      overflow: hidden;
       font-size: getCssVar(portlet-layout, caption-font-size);
       font-weight: getCssVar(portlet-layout, caption-font-weight);
       color: getCssVar(portlet-layout, caption-color);
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 
   @include e(toolbar) {
-    height: 100%;
     display: flex;
     align-items: center;
+    height: 100%;
   } 
 
   // 无头部时的样式
   @include when(no-header) {
     >.#{bem(portlet-layout-content)} {
       height: 100%;
+      padding: 0;
     }
   }
 }
@@ -75,7 +80,7 @@ $portlet-layout: (
   height: getCssVar(portlet-layout, header-height);
   padding: getCssVar(portlet-layout, header-padding);
   margin: getCssVar(portlet-layout, header-margin);
-  line-height: getCssVar(portlet-layout, header-height);
+  line-height: getCssVar(portlet-layout, header-line-height);
   background-color: getCssVar(portlet-layout, header-bg-color);
 
 }
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 bbd2fccdd700c269e89e3aac82970035f77e3798..35bf1e7db98ad2f82da0e71509415024744fe6a6 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
@@ -4,6 +4,7 @@ $form-group: (
   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),
 );
 
 $form-group-header: (
@@ -16,7 +17,7 @@ $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-line-height),
+  line-height: var(--van-cell-group-title-line-height),
   icon-padding-right: getCssVar(spacing, tight),
 );
 
@@ -66,7 +67,7 @@ $form-group-content: (
 
   @include m(style2) {
     padding: getCssVar('form-group', 'padding');
-    background-color: getCssVar(color, bg, 0);
+    background-color: getCssVar('form-group-header', 'bg-color');
 
     >.#{bem(form-group-header)} {
       background-color: getCssVar('form-group-content', 'bg-color');
@@ -137,7 +138,7 @@ $form-group-content: (
 
     .van-button {
       height: 100%;
-      color: getCssVar(color, link);
+      color: getCssVar('form-group', 'button-color');
       background: transparent;
       border: none;
     }
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 a05d980fc4d029229f9bb01a08560b8cf37bed80..b9a043fcb39f3543329c81a51fc8c4e944cab3e7 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
@@ -11,15 +11,33 @@ $form-item-container: (
   label-text-color: getCssVar(color, text, 0),
   container-error-padding: 0 getCssVar(spacing, base),
   editor-padding: getCssVar(spacing, tight) getCssVar(spacing, none)
-    getCssVar(spacing, tight) getCssVar(spacing, none),
+  getCssVar(spacing, tight) getCssVar(spacing, none),
   border: rem(1px) getCssVar(color, border) solid,
   border-radius: rem(4px),
+  border-width: calc(100% - getCssVar(spacing, base) * 2),
+  underline-color: getCssVar(color, border),
+  editor-min-height: calc(
+    getCssVar(form-item, line-height) + 2 * getCssVar(spacing, tight)
+  ),
+  border-editor-padding: getCssVar(spacing, tight),
+  border-editor-min-height: calc(
+    getCssVar(form-item, line-height) + 2 * getCssVar(spacing, tight)
+  ),
 );
 
 $form-item-label: (
   line-height: 1,
   font-size: getCssVar(font-size, header-5),
   text-color: getCssVar(color, text, 0),
+  icon-padding-right: getCssVar(spacing, extra-tight),
+);
+
+$form-item-popover: (
+  font-size: getCssVar(font-size, header-6),
+  padding: getCssVar(spacing, tight),
+  cell-border: 1px solid getCssVar(color, border),
+  cell-padding: getCssVar(spacing, extra-tight) getCssVar(spacing, tight),
+  link-color: getCssVar(color, link),
 );
 
 // 表单项基础样式
@@ -35,8 +53,8 @@ $form-item-label: (
   // margin: getCssVar(form-item-container, container-margin);
   font-size: getCssVar(form-item, font-size);
   background-color: getCssVar(form-item-container, bg-color);
-  border-width: calc(100% - getCssVar(spacing, base) * 2);
-  border-radius: getCssVar(border-radius, small);
+  border-width: getCssVar(form-item-container, border-width);
+  border-radius: getCssVar(form-item-container, border-radius);
 
   @include when(show-underLine) {
     &::after {
@@ -45,7 +63,7 @@ $form-item-label: (
       width: 100%;
       height: rem(1px);
       content: '';
-      background-color: getCssVar(color, border);
+      background-color: getCssVar(form-item-container, underline-color);
       transform: scaleY(0.5);
     }
   }
@@ -53,12 +71,10 @@ $form-item-label: (
   @include when(show-border) {
     .#{bem(form-item-container, editor)} {
       margin-top: rem(4px);
-      min-height: calc(
-        getCssVar(form-item, line-height) + 2 * getCssVar(spacing, tight)
-      );
+      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(spacing, tight);
+      padding: getCssVar(form-item-container, border-editor-padding);
     }
     &.#{bem(form-item-container, '', bottom)} {
       .#{bem(form-item-container, editor)} {
@@ -70,7 +86,9 @@ $form-item-label: (
 
   @include e(popover) {
     &.van-popover {
-      font-size: getCssVar(font-size, header-6);
+      @include set-component-css-var('form-item-popover', $form-item-popover);
+
+      font-size: getCssVar(form-item-popover, font-size);
 
       table {
         border-spacing: 0;
@@ -79,18 +97,18 @@ $form-item-label: (
 
       table tr td,
       table tr th {
-        border: 1px solid getCssVar(color, border);
-        padding: getCssVar(spacing, extra-tight) getCssVar(spacing, tight);
+        border: getCssVar(form-item-popover, cell-border);
+        padding: getCssVar(form-item-popover, cell-padding);
       }
     }
 
     @include m(content) {
       overflow: auto;
       max-height: 30vh;
-      padding: getCssVar(spacing, tight);
+      padding: getCssVar(form-item-popover, padding);
 
       a {
-        color: getCssVar(color, link);
+        color: getCssVar(form-item-popover, link-color);
       }
     }
   }
@@ -107,7 +125,7 @@ $form-item-label: (
     line-height: getCssVar(form-item, line-height);
 
     @include m('icon') {
-      padding-right: getCssVar(spacing, extra-tight);
+      padding-right: getCssVar(form-item-label, icon-padding-right);
     }
 
     span {
@@ -124,9 +142,7 @@ $form-item-label: (
   @include e(editor) {
     width: 100%;
     text-align: getCssVar(form-item-container, editor-align);
-    min-height: calc(
-      getCssVar(form-item, line-height) + 2 * getCssVar(spacing, tight)
-    );
+    min-height: getCssVar(form-item-container, editor-min-height);
     #{--van-cell-line-height}: getCssVar(form-item, line-height);
     #{--van-cell-line-height}: getCssVar(form-item, line-height);
 
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 aad077b61861f70fdede3810e95242f2ccc3d326..ba3fa70aedecdf82f624d72307b75106990b4cc9 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
@@ -9,16 +9,28 @@ $mdctrl-container-caption: (text-color: getCssVar(color, text, 2),
   height: rem(20px),
   line-height: rem(20px),
 );
-$mdctrl-container-button: (text-color: getCssVar(color, info),
+$mdctrl-container-button: (text-color: getCssVar(color, primary),
   font-size: getCssVar(font-size, header-6),
   font-weight: getCssVar(font-weight, regular),
 );
 
+$mdctrl-container-content: (
+  bg-color: 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),
+);
+
 
 @include b(mdctrl-container) {
   @include set-component-css-var('mdctrl-container-header', $mdctrl-container-header);
   @include set-component-css-var('mdctrl-container-caption', $mdctrl-container-caption);
   @include set-component-css-var('mdctrl-container-button', $mdctrl-container-button);
+  @include set-component-css-var('mdctrl-container-content', $mdctrl-container-content);
+  @include set-component-css-var('mdctrl-container-footer', $mdctrl-container-footer);
 
   display: flex;
   flex-direction: column;
@@ -81,7 +93,7 @@ $mdctrl-container-button: (text-color: getCssVar(color, info),
   }
 
   @include b(mdctrl-container-item-content) {
-    background-color: getCssVar(color, bg, 1);
+    background-color: getCssVar('mdctrl-container-content', 'bg-color');
 
     @include e(remove-btn) {
       height: 100%;
@@ -107,9 +119,9 @@ $mdctrl-container-button: (text-color: getCssVar(color, info),
     width: 100%;
     padding: 0;
     margin-left: 0;
-    font-size: getCssVar(font-size, header-5);
+    font-size: getCssVar('mdctrl-container-footer', 'font-size');
     color: getCssVar('mdctrl-container-button', 'text-color');
-    background-color: getCssVar(color, bg, 1);
+    background-color: getCssVar('mdctrl-container-footer', 'bg-color');
     border: none;
 
     &:active {
@@ -122,7 +134,7 @@ $mdctrl-container-button: (text-color: getCssVar(color, info),
     }
 
     .van-icon {
-      margin-right: getCssVar(spacing, extra-tight);
+      margin-right: getCssVar('mdctrl-container-footer', 'icon-margin-right');
     }
   }
 }
\ No newline at end of file