diff --git a/CHANGELOG.md b/CHANGELOG.md
index 633c4feb759c3b5af74eb5a74acdb56bdb205e18..f9a63d32c756995d81658ee40b7b9a59d2d137a2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,7 @@
 
 ### Change
 
+- 更新面板组件样式变量抽取，组件内部不直接使用基础变量
 - 更新视图头预置返回按钮和视图内容区返回顶部按钮显隐逻辑
 - 更新所有编辑器在进行属性透传时，class和style属性不往下透传
 - 卡片部件样式调整，高度撑满视图内容
diff --git a/src/common/carousel/carousel.scss b/src/common/carousel/carousel.scss
index cc9e7ea350faf95c0add2ecf582a15807be5c9f1..60b6ef5f0aa72822f4b6fcfe766aa8b2498f5f36 100644
--- a/src/common/carousel/carousel.scss
+++ b/src/common/carousel/carousel.scss
@@ -12,8 +12,7 @@
             width: 100%;
             height: 100%;
             padding: rem(30px) rem(60px);
-            pointer-events: none;
-            background-color: var(--van-white);
+            pointer-events: none; 
         }
     }
 }
\ No newline at end of file
diff --git a/src/common/rawitem/rawitem.scss b/src/common/rawitem/rawitem.scss
index 5c2c3c72c60a2170c21cc2b4c6e1f6e8a1cf1d33..464641c15446d7043d929254c5c68af9fd8a0a4c 100644
--- a/src/common/rawitem/rawitem.scss
+++ b/src/common/rawitem/rawitem.scss
@@ -1,8 +1,14 @@
+$rawitem: (
+  font-size: getCssVar(font-size, regular),
+  text-color: getCssVar(editor, default, text-color),
+);
 @include b(rawitem) {
+  @include set-component-css-var('rawitem', $rawitem);
+
   width: 100%;
   height: 100%;
-  font-size: getCssVar(font-size, regular);
-  color: getCssVar(editor, default, text-color);
+  font-size: getCssVar(rawitem, font-size);
+  color: getCssVar(rawitem, text-color);
 
   @include b(icon) {
     width: 100%;
@@ -10,8 +16,8 @@
   }
 
   .van-notice-bar.info {
-    --van-notice-bar-text-color:#{getCssVar(color, primary)};
-    --van-notice-bar-background:#{getCssVar(color, primary, light, default)}
+    --van-notice-bar-text-color: #{getCssVar(color, primary)};
+    --van-notice-bar-background: #{getCssVar(color, primary, light, default)};
   }
 
   .van-notice-bar.warning {
@@ -22,4 +28,4 @@
     --van-notice-bar-text-color: #{getCssVar(color, danger)};
     --van-notice-bar-background: #{getCssVar(color, danger, light, default)};
   }
-}
\ No newline at end of file
+}
diff --git a/src/common/rawitem/rawitem.tsx b/src/common/rawitem/rawitem.tsx
index 66983e0f2b733fd376aad3322f80b02ff417d564..97e47f037e1ba08c9c2801d6f0d9d7603190be2f 100644
--- a/src/common/rawitem/rawitem.tsx
+++ b/src/common/rawitem/rawitem.tsx
@@ -88,6 +88,7 @@ export const IBizRawItem = defineComponent({
       closeabled: true,
       showIcon: false,
       class: '',
+      wrapable: false, // 是否多行展示
       'left-icon': '',
     });
 
@@ -312,6 +313,7 @@ export const IBizRawItem = defineComponent({
             text={this.alertParams.title}
             show-icon={this.alertParams.showIcon}
             class={this.alertParams.class}
+            wrapable={this.alertParams.wrapable}
             left-icon={
               this.alertParams.showIcon ? this.alertParams['left-icon'] : ''
             }
diff --git a/src/common/split-trigger/split-trigger.scss b/src/common/split-trigger/split-trigger.scss
index 91caeef5625f749c617dc0ff5f7ec93af13378ec..5dbd2a5ea8b44122c749e9e254a2dc58082f018c 100644
--- a/src/common/split-trigger/split-trigger.scss
+++ b/src/common/split-trigger/split-trigger.scss
@@ -1,16 +1,22 @@
-$trigger-bar-background: getCssVar(color, border);
-$trigger-width: 6px;
-$trigger-bar-width: 4px;
-$trigger-bar-offset: calc(($trigger-width - $trigger-bar-width) / 2);
-$trigger-bar-interval: 3px;
-$trigger-bar-weight: 1px;
-$trigger-bar-con-height: calc(($trigger-bar-weight + $trigger-bar-interval) * 8);
+$split-trigger: (
+  trigger-bar-background: getCssVar(color, border),
+  trigger-width: 6px,
+  trigger-bar-width: 4px,
+  trigger-bar-offset: calc(var(trigger-width) - var(trigger-bar-width) / 2),
+  trigger-bar-interval: 3px,
+  trigger-bar-weight: 1px,
+  trigger-bar-con-height: calc(
+      var(trigger-bar-weight) + var(trigger-bar-interval) * 8
+    ),
+);
 
 @include b(split-trigger) {
+  @include set-component-css-var('split-trigger', $split-trigger);
+
   border: 1px solid #{getCssVar(color, border)};
 
   @include m(vertical) {
-    width: $trigger-width;
+    width: getCssVar(split-trigger, trigger-width);
     height: 100%;
     cursor: col-resize;
     border-top: none;
@@ -18,16 +24,16 @@ $trigger-bar-con-height: calc(($trigger-bar-weight + $trigger-bar-interval) * 8)
 
     @include b(split-trigger-bar) {
       float: left;
-      width: $trigger-bar-width;
+      width: getCssVar(split-trigger, trigger-bar-width);
       height: 1px;
-      margin-top: $trigger-bar-interval;
-      background: $trigger-bar-background;
+      margin-top: getCssVar(split-trigger, trigger-bar-interval);
+      background: getCssVar(split-trigger, trigger-bar-background);
     }
   }
 
   @include m(horizontal) {
     width: 100%;
-    height: $trigger-width;
+    height: getCssVar(split-trigger, trigger-width);
     cursor: row-resize;
     border-right: none;
     border-left: none;
@@ -35,9 +41,9 @@ $trigger-bar-con-height: calc(($trigger-bar-weight + $trigger-bar-interval) * 8)
     @include b(split-trigger-bar) {
       float: left;
       width: 1px;
-      height: $trigger-bar-width;
-      margin-right: $trigger-bar-interval;
-      background: $trigger-bar-background;
+      height: getCssVar(split-trigger, trigger-bar-width);
+      margin-right: getCssVar(split-trigger, trigger-bar-interval);
+      background: getCssVar(split-trigger, trigger-bar-background);
     }
   }
 }
@@ -48,15 +54,15 @@ $trigger-bar-con-height: calc(($trigger-bar-weight + $trigger-bar-interval) * 8)
 
   @include m(vertical) {
     top: 50%;
-    left: $trigger-bar-offset;
-    height: $trigger-bar-con-height;
+    left: getCssVar(split-trigger, trigger-bar-offset);
+    height: getCssVar(split-trigger, trigger-bar-con-height);
     transform: translate(0, -50%);
   }
 
   @include m(horizontal) {
-    top: $trigger-bar-offset;
+    top: getCssVar(split-trigger, trigger-bar-offset);
     left: 50%;
-    width: $trigger-bar-con-height;
+    width: getCssVar(split-trigger, trigger-bar-con-height);
     transform: translate(-50%, 0);
   }
-}
\ No newline at end of file
+}
diff --git a/src/common/split/split.scss b/src/common/split/split.scss
index b8f4896a289308f5d412013be134f38652964134..ee9b4f9f1333c1fff26eb7798ec8d0f12977ea2e 100644
--- a/src/common/split/split.scss
+++ b/src/common/split/split.scss
@@ -1,6 +1,10 @@
-$trigger-width: 6px;
+$split-wrapper:(
+  trigger-width: 6px,
+);
 
 @include b(split-wrapper) {
+  @include set-component-css-var('split-wrapper', $split-wrapper);
+
   position: relative;
   width: 100%;
   height: 100%;
@@ -63,7 +67,7 @@ $trigger-width: 6px;
   @include b(split-pane) {
     position: unset;
     @include m(right){
-      padding-left: $trigger-width;
+      padding-left: getCssVar('split-wrapper','trigger-width');
     }
   }
 }
@@ -78,7 +82,7 @@ $trigger-width: 6px;
   @include b(split-pane) {
     position: absolute;
     @include m(bottom){
-      padding-top: $trigger-width;
+      padding-top: getCssVar('split-wrapper','trigger-width');
     }
   }
 }
diff --git a/src/panel-component/panel-button/panel-button.scss b/src/panel-component/panel-button/panel-button.scss
index 1d3a2e89c5e474314950534b9ec9d6a6892d953b..fa63a11808882fa8e46803a4669d10b042b7adae 100644
--- a/src/panel-component/panel-button/panel-button.scss
+++ b/src/panel-component/panel-button/panel-button.scss
@@ -1,20 +1,28 @@
+$panel-button: (
+  'login-btn-bg-color': getCssVar(color, primary),
+  'login-btn-color': getCssVar(color, fill, 1),
+  'login-btn-font-size': getCssVar(font-size, header, 4),
+  'content-gap': getCssVar(spacing, extra, tight),
+  'content-icon-size': getCssVar(width-icon, medium),
+);
 @include b(panel-button) {
+  @include set-component-css-var('panel-button', $panel-button);
+
   width: 100%;
-  height: 100%;
   @include when('login-btn') {
-    background-color: getCssVar(color, primary);
-    color: getCssVar(color, fill, 1);
-    font-size: getCssVar(font-size, header, 4);
+    background-color: getCssVar(panel-button, login-btn-bg-color);
+    color: getCssVar(panel-button, login-btn-color);
+    font-size: getCssVar(panel-button, login-btn-font-size);
   }
 
   @include b(panel-button-content) {
     @include flex(row, flex-start, center);
-    gap: getCssVar(spacing, extra, tight);
+    gap: getCssVar(panel-button, content-gap);
     img,
     i {
       display: inline-block;
-      max-width: getCssVar(width-icon, medium);
-      max-height: getCssVar(width-icon, medium);
+      max-width: getCssVar(panel-button, content-icon-size);
+      max-height: getCssVar(panel-button, content-icon-size);
     }
   }
 }
diff --git a/src/panel-component/user-message/user-message.scss b/src/panel-component/user-message/user-message.scss
index 16d6ec21ed48a4e578aacdc76c235371c27ac226..bd29c7d25f02e4c7a00475f990f7492f9999df66 100644
--- a/src/panel-component/user-message/user-message.scss
+++ b/src/panel-component/user-message/user-message.scss
@@ -1,4 +1,9 @@
+$user-message: (
+  'item-bg-color': getCssVar(color, border),
+  'tab-header-height': getCssVar(height-control-large)
+);
 @include b(user-message) {
+  @include set-component-css-var('user-message', $user-message);
   position: relative;
   height: 100%;
 
@@ -15,12 +20,12 @@
     &::after {
       position: relative;
       bottom: -0.875rem;
-      left: 1rem;
+      left: 0rem;
       display: block;
-      width: calc(100% - 2rem);
+      width: calc(100%);
       height: rem(1px);
       content: '';
-      background-color: getCssVar(color, border);
+      background-color: getCssVar(user-message, item-bg-color);
     }
   }
 
@@ -51,9 +56,9 @@
     height: 100%;
 
     .van-tabs__content {
-      height: calc(100% - var(--van-tabs-line-height));
+      height: calc(100% - getCssVar(user-message, tab-header-height));
 
-      >div {
+      > div {
         height: 100%;
       }
     }
@@ -62,4 +67,4 @@
   .van-tabs__wrap {
     padding-right: rem(40px);
   }
-}
\ No newline at end of file
+}