diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d38c0273521cfcce4daa210fb923fb93c3f78e1..633c4feb759c3b5af74eb5a74acdb56bdb205e18 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,7 @@
 - 新增移动端编辑表单取消变更功能
 - 卡片部件支持项样式表配置
 - 向导面板支持步骤样式表
+- 日历新增支持默认选中天与月度日历
 
 ### Change
 
@@ -45,6 +46,10 @@
 - 优化重复器表单和多数据部件表单的操作行为样式
 - 多数据部件自定义排序设置采用布局实现
 - 用户消息无数据提示样式与部件一致
+- 视图消息组件样式变量抽取
+- 卡片部件样式变量抽取
+- 分页导航面板样式变量抽取
+- 向导面板样式变量抽取
 
 ### Fixed
 
diff --git a/src/common/view-message/view-message.scss b/src/common/view-message/view-message.scss
index 9427a5ecc39a9e19af2fc4120919a9a2d51b9335..8605fe98f2486effa0d99b5049b925886898f74e 100644
--- a/src/common/view-message/view-message.scss
+++ b/src/common/view-message/view-message.scss
@@ -1,17 +1,24 @@
 $view-message: (
+    info-bg: getCssVar(color, info, light, default),
+    info-color: getCssVar(color, info),
+    warn-bg: getCssVar(color, warning, light, default),
+    warn-color: getCssVar(color, warning),
+    error-bg: getCssVar(color, danger, light, default),
+    error-color: getCssVar(color, danger),
 );
 
 @include b(view-message) {
+    @include set-component-css-var('view-message', $view-message);
 	@include m(info) {
-        background-color: getCssVar(color, info, light, default);
-        color: getCssVar(color, info);
+        background-color: getCssVar(view-message, info-bg);
+        color: getCssVar(view-message, info-color);
     }
     @include m(warn) {
-        background-color: getCssVar(color, warning, light, default);
-        color: getCssVar(color, warning);
+        background-color: getCssVar(view-message, warn-bg);
+        color: getCssVar(view-message, warn-color);
     }
     @include m(error) {
-        background-color: getCssVar(color, danger, light, default);
-        color: getCssVar(color, danger);
+        background-color: getCssVar(view-message, error-bg);
+        color: getCssVar(view-message, error-color);
     }
 }
\ No newline at end of file
diff --git a/src/control/calendar/calendar.tsx b/src/control/calendar/calendar.tsx
index 52455477c18b31f938a04fca6bfe8791a0610914..162e7cee5bb7c2fdf164e24eccd76913a6d72fb8 100644
--- a/src/control/calendar/calendar.tsx
+++ b/src/control/calendar/calendar.tsx
@@ -384,7 +384,8 @@ export const CalendarControl = defineComponent({
           <div class={this.ns.b('content')}>
             <VueHashCalendar
               ref='calendar'
-              show-week-view={true}
+              show-week-view={this.c.model.calendarStyle === 'WEEK'}
+              default-datetime={this.c.state.selectedDate}
               pickerType='date'
               onChange={date => {
                 this.dateChange(date);
diff --git a/src/control/data-view/data-view.scss b/src/control/data-view/data-view.scss
index 32b0d7b3606a1039fa1224c3af25d8f09375d630..e11c5c64f4ff3b74607195c069341ac1e987c009 100644
--- a/src/control/data-view/data-view.scss
+++ b/src/control/data-view/data-view.scss
@@ -5,6 +5,10 @@ $control-dataview: (
   item-gap: getCssVar(spacing, base, tight),
   pagination-height: var(--van-pagination-height),
   item-bg-color: transparent,
+  group-height: getCssVar(height, control, large),
+  group-padding: 0 getCssVar(spacing, base),
+  more-color: getCssVar(color, link),
+  item-shadow: getCssVar(shadow, elevated),
 );
 
 @include b(control-dataview) {
@@ -35,9 +39,9 @@ $control-dataview: (
 
   @include e(collapse-item) {
     .van-collapse-item__title {
-      height: getCssVar(height, control, large);
+      height: getCssVar(control-dataview, group-height);
       align-items: center;
-      padding: 0 getCssVar(spacing, base);
+      padding: getCssVar(control-dataview, group-padding);
     }
   }
 
@@ -51,13 +55,13 @@ $control-dataview: (
     @include flex(row, center, center);
     height: getCssVar(control-dataview, pagination-height);
     cursor: pointer;
-    color: getCssVar(color, link);
+    color: getCssVar(control-dataview, more-color);
   }
 }
 
 @include b(control-dataview-item) {
   padding: getCssVar(control-dataview, item-padding);
-  box-shadow: getCssVar(shadow, elevated);
+  box-shadow: getCssVar(control-dataview, item-shadow);
   background-color: getCssVar(control-dataview, item-bg-color);
   color: getCssVar(control-dataview, text-color);
   width: 100%;
diff --git a/src/control/tab-exp-panel/tab-exp-panel.scss b/src/control/tab-exp-panel/tab-exp-panel.scss
index 56c316074b1841c035f98618d56a60064685c528..e223643ff7bc391a29d26bb2f95f4c5dc717188d 100644
--- a/src/control/tab-exp-panel/tab-exp-panel.scss
+++ b/src/control/tab-exp-panel/tab-exp-panel.scss
@@ -1,30 +1,35 @@
 $control-tabexppanel: (
-  'active-color': getCssVar('color', 'primary'),
+  'side-padding': getCssVar(spacing, base),
+);
+
+$control-tabexppanel-flow: (
+  'header-padding': getCssVar(spacing, tight) getCssVar(spacing, base),
+  'font-size': getCssVar(font-size, regular),
+  'line-height': getCssVar(height-control, small),
+  'header-color': getCssVar(color, text, 2),
+  'header-bg': getCssVar(color, bg, 0),
 );
 
 @include b(control-tabexppanel-tab-item-header) {
-  padding: rem(8px) rem(16px);
+  @include set-component-css-var('control-tabexppanel-flow', $control-tabexppanel-flow);
+  padding: getCssVar(control-tabexppanel-flow, header-padding);
+  font-size: getCssVar(control-tabexppanel-flow, font-size);
+  line-height: getCssVar(control-tabexppanel-flow, line-height);
+  color: getCssVar(control-tabexppanel-flow, header-color);
   overflow: hidden;
-  font-size: getCssVar(font-size, regular);
-  line-height: var(--van-cell-line-height);
-  color: getCssVar(color, text, 2);
   text-overflow: ellipsis;
   white-space: nowrap;
-  background: getCssVar(color, bg, 0);
+  background: getCssVar(control-tabexppanel-flow, header-bg);
 }
 
 @include b(control-tabexppanel) {
   @include set-component-css-var('control-tabexppanel', $control-tabexppanel);
   @include e(sidebar) {
-    --van-sidebar-selected-border-color: #{getCssVar(control-tabexppanel, active-color)};
     @include m(left) {
-      margin-left: getCssVar(spacing, base);
+      margin-left: getCssVar(control-tabexppanel, side-padding);
     }
     @include m(right) {
-      margin-right: getCssVar(spacing, base);
-    }
-    .van-sidebar-item--select {
-      color: getCssVar(control-tabexppanel, active-color);
+      margin-right: getCssVar(control-tabexppanel, side-padding);
     }
   }
 }
diff --git a/src/control/wizard-panel/wizard-panel.scss b/src/control/wizard-panel/wizard-panel.scss
index 7c6b8b0059190a4001ea51cd63001a5f28989c0d..af962a35ef8ac77adba0ebf82ded41ae60cf8d74 100644
--- a/src/control/wizard-panel/wizard-panel.scss
+++ b/src/control/wizard-panel/wizard-panel.scss
@@ -1,15 +1,8 @@
-/* 向导 start */
-
 $control-wizard-panel: (
-  'header-height': 60px,
-  'footer-height': 40px,
-  margin: getCssVar('spacing', 'loose') getCssVar('spacing', 'tight'),
-  gap:getCssVar('spacing', 'tight'), 
-  'form-padding': getCssVar('spacing', 'loose'),
+  'footer-margin': getCssVar('spacing', 'loose') getCssVar('spacing', 'tight'),
+  'footer-gap': getCssVar('spacing', 'tight'),
 );
 
-
-/* 向导 end */
 @include b(control-wizardpanel) {
   @include set-component-css-var('control-wizard-panel', $control-wizard-panel);
 
@@ -17,39 +10,24 @@ $control-wizard-panel: (
   flex-direction: column;
   height: 100%;
 
+  .van-steps {
+    flex: none;
+  }
+
   @include e(form) {
     flex-grow: 1;
     overflow: auto;
-    padding: getCssVar('control-wizard-panel', 'form-padding');
   }
-
-  @include when(header) {
-    @include e(form) {
-      height: calc(100% - getCssVar('control-wizard-panel', 'footer-height') - getCssVar('control-wizard-panel', 'header-height'));
-    }
-  }
-}
-
-@include b(control-wizardpanel-header) {
-  height: getCssVar('control-wizard-panel', 'header-height');
 }
 
 
 @include b(control-wizardpanel-footer) {
   @include flex(row, flex-end, center);
 
-  gap: getCssVar('control-wizard-panel', 'gap');
-  height: getCssVar('control-wizard-panel', 'footer-height');
-  margin: getCssVar('control-wizard-panel', 'margin');
-
-
-  @include e(form) {
-    flex-grow: 1;
-    overflow: auto;
-  }
+  gap: getCssVar('control-wizard-panel', 'footer-gap');
+  margin: getCssVar('control-wizard-panel', 'footer-margin');
 
   button {
     flex-grow: 1;
-    height: 100%;
   }
 }
\ No newline at end of file