From 5f45eac9464ea9378220926c7932839e60571c7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8?= <frankyang0820@outlook.com>
Date: Fri, 12 Jun 2026 17:02:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=99=E9=A2=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/agent/user/index.vue                |   4 +-
 src/views/dashboard/components/view/index.vue | 621 +++++++++++-------
 2 files changed, 393 insertions(+), 232 deletions(-)

diff --git a/src/views/agent/user/index.vue b/src/views/agent/user/index.vue
index 4d065bd..ab88068 100644
--- a/src/views/agent/user/index.vue
+++ b/src/views/agent/user/index.vue
@@ -555,7 +555,7 @@ const handleSubmit = async () => {
 
       // 调用接口
       try {
-        await editCustomerApi({ ...params, point_diffs_json: JSON.stringify(marginRatioJSON) })
+        await editCustomerApi({ ...params, point_diffs_json: JSON.stringify(marginRatioJSON), base_ts:null })
         dialogVisible.value = false
         await getCustomerList(userId.value)
       } catch (err) {
@@ -567,7 +567,7 @@ const handleSubmit = async () => {
       try {
         await editCustomerApi({
           ...params,
-          fee_handling_percent: commissionRatioForm.value.commissionRatio,
+          fee_handling_percent: commissionRatioForm.value.commissionRatio, base_ts:null
         })
         dialogVisible.value = false
         await getCustomerList(userId.value)
diff --git a/src/views/dashboard/components/view/index.vue b/src/views/dashboard/components/view/index.vue
index b500589..ceb42b1 100644
--- a/src/views/dashboard/components/view/index.vue
+++ b/src/views/dashboard/components/view/index.vue
@@ -1,119 +1,154 @@
 <template>
   <div class="personal-center">
-    <!-- 如何开始 -->
-    <section class="section getting-started">
-      <h2 class="section-title">
-        <el-icon><MagicStick /></el-icon>
-        如何开始
-      </h2>
-      <div class="progress-steps">
-        <div
-          v-for="(step, index) in startSteps"
-          :key="index"
-          class="step-item"
-          :class="{ completed: step.completed, active: index === currentStep }"
-        >
-          <div class="step-icon">
-            <el-icon v-if="step.completed"><Check /></el-icon>
-            <span v-else>{{ index + 1 }}</span>
-          </div>
-          <div class="step-info">
-            <router-link :to="step.path" class="step-title">{{ step.title }}</router-link>
-            <span class="step-desc">{{ step.desc }}</span>
-          </div>
-          <div v-if="index < startSteps.length - 1" class="step-connector">
-            <div class="connector-line" :class="{ filled: step.completed }"></div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- 常用功能 -->
-    <section class="section quick-actions">
-      <h2 class="section-title">
-        <el-icon><Grid /></el-icon>
-        常用功能
-      </h2>
-      <div class="action-cards">
-        <router-link
-          v-for="action in quickActions"
-          :key="action.id"
-          :to="action.path"
-          class="action-card"
-        >
-          <div class="card-icon" :style="{ background: action.bgColor }">
-            <el-icon :size="32" :color="action.iconColor">
-              <component :is="action.icon" />
-            </el-icon>
-          </div>
-          <div class="card-content">
-            <h3>{{ action.title }}</h3>
-            <p>{{ action.desc }}</p>
-          </div>
-          <div class="card-arrow">
-            <el-icon><ArrowRight /></el-icon>
-          </div>
-        </router-link>
-      </div>
-    </section>
-
-    <!-- 我的钱包 -->
-    <section class="section my-wallet">
-      <h2 class="section-title">
-        <el-icon><Wallet /></el-icon>
-        我的钱包
-        <span class="wallet-badge">USD 主钱包</span>
-      </h2>
-      <div class="wallet-card" @click="handleWalletClick">
-        <div class="wallet-main">
-          <div class="balance-section">
-            <div class="balance-label">总金额</div>
-            <div class="balance-value">
-              <AnimatedNumber :value="walletCapital.amount_total || 0" :decimals="2" />
+    <!-- 顶部区域：快速开始 + 常用功能 -->
+    <div class="top-section">
+      <!-- 如何开始 -->
+      <section class="section getting-started">
+        <h2 class="section-title">
+          <el-icon><MagicStick /></el-icon>
+          快速开始
+        </h2>
+        <div class="progress-steps">
+          <div
+            v-for="(step, index) in startSteps"
+            :key="index"
+            class="step-item"
+            :class="{ completed: step.completed, active: index === currentStep }"
+          >
+            <div class="step-icon">
+              <el-icon v-if="step.completed"><Check /></el-icon>
+              <span v-else>{{ index + 1 }}</span>
+            </div>
+            <div class="step-info">
+              <router-link :to="step.path" class="step-title">{{ step.title }}</router-link>
+              <span class="step-desc">{{ step.desc }}</span>
+            </div>
+            <div v-if="index < startSteps.length - 1" class="step-connector">
+              <div class="connector-line" :class="{ filled: step.completed }"></div>
             </div>
           </div>
-          <div class="balance-detail">
-            <div class="detail-item">
-              <span class="label">可用资金</span>
-              <span class="value">
-                <AnimatedNumber :value="walletCapital.amount || 0" :decimals="2" />
-              </span>
+        </div>
+      </section>
+
+      <!-- 常用功能 -->
+      <section class="section quick-actions">
+        <h2 class="section-title">
+          <el-icon><Grid /></el-icon>
+          常用功能
+        </h2>
+        <div class="action-cards">
+          <router-link
+            v-for="action in quickActions"
+            :key="action.id"
+            :to="action.path"
+            class="action-card"
+          >
+            <div class="card-icon" :style="{ background: action.bgColor }">
+              <el-icon :size="28" :color="action.iconColor">
+                <component :is="action.icon" />
+              </el-icon>
             </div>
-            <template v-if="isAgent">
-              <div class="detail-item">
-                <span class="label">点差</span>
-                <span class="value">{{ walletCapital.commission_point_diff || '0.00' }}</span>
+            <div class="card-content">
+              <h3>{{ action.title }}</h3>
+              <p>{{ action.desc }}</p>
+            </div>
+            <div class="card-arrow">
+              <el-icon><ArrowRight /></el-icon>
+            </div>
+          </router-link>
+        </div>
+      </section>
+    </div>
+
+    <!-- 中部区域：用户信息 + 钱包 -->
+    <div class="middle-section">
+      <!-- 用户信息面板 -->
+      <section class="section user-info-panel">
+        <div class="info-panel">
+          <div class="section-title">
+            <el-icon><User /></el-icon>
+            <span>当前用户</span>
+          </div>
+          <div class="panel-content">
+            <div class="user-info">
+              <div class="user-avatar">
+                <el-icon :size="32"><UserFilled /></el-icon>
               </div>
-              <div class="detail-item">
-                <span class="label">手续费</span>
-                <span class="value">{{ walletCapital.commission_fee_handling || '0.00' }}</span>
+              <div class="user-details">
+                <span class="user-name">{{ userStore.userInfo?.username || '-' }}</span>
               </div>
-            </template>
+            </div>
+            <div class="info-row">
+              <span class="info-label">用户ID</span>
+              <span class="info-value">{{ userStore.userInfo?.id || '-' }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">最后登录</span>
+              <span class="info-value">{{ userStore.userInfo?.last_login || '-' }}</span>
+            </div>
           </div>
         </div>
-        <div class="wallet-actions">
-          <router-link to="/capital/transfer" class="action-btn">
-            <el-icon><RefreshLeft /></el-icon>
-            转账
-          </router-link>
-          <router-link to="/capital/withdraw" class="action-btn">
-            <el-icon><Money /></el-icon>
-            取款
-          </router-link>
-          <router-link to="/capital/fundFlow" class="action-btn">
-            <el-icon><List /></el-icon>
-            资金明细
-          </router-link>
+      </section>
+
+      <!-- 我的钱包 -->
+      <section class="section my-wallet">
+        <h2 class="section-title">
+          <el-icon><Wallet /></el-icon>
+          我的钱包
+          <span class="wallet-badge">USD 主钱包</span>
+        </h2>
+        <div class="wallet-card" @click="handleWalletClick">
+          <div class="wallet-main">
+            <div class="balance-section">
+              <div class="balance-label">总金额 (USD)</div>
+              <div class="balance-value">
+                <AnimatedNumber :value="walletCapital.amount_total || 0" :decimals="2" />
+              </div>
+            </div>
+            <div class="balance-detail">
+              <div class="detail-item">
+                <span class="label">可用资金</span>
+                <span class="value">
+                  <AnimatedNumber :value="walletCapital.amount || 0" :decimals="2" />
+                </span>
+              </div>
+              <template v-if="isAgent">
+                <div class="detail-item">
+                  <span class="label">点差</span>
+                  <span class="value">{{ walletCapital.commission_point_diff || '0.00' }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">手续费</span>
+                  <span class="value">{{ walletCapital.commission_fee_handling || '0.00' }}</span>
+                </div>
+              </template>
+            </div>
+          </div>
+          <div class="wallet-actions">
+            <router-link to="/capital/transfer" class="action-btn">
+              <el-icon><RefreshLeft /></el-icon>
+              转账
+            </router-link>
+            <router-link to="/capital/withdraw" class="action-btn">
+              <el-icon><Money /></el-icon>
+              取款
+            </router-link>
+            <router-link to="/capital/fundFlow" class="action-btn">
+              <el-icon><List /></el-icon>
+              资金明细
+            </router-link>
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+
+    </div>
 
     <!-- 个人账户 -->
     <section class="section my-accounts">
       <h2 class="section-title">
         <el-icon><User /></el-icon>
         个人账户
-        <el-button type="primary" @click="handleAddSubAccount" v-auth="'user_createAccount'">
+        <el-button type="primary" size="small" @click="handleAddSubAccount" v-auth="'user_createAccount'">
           <el-icon><Plus /></el-icon>
           添加子账户
         </el-button>
@@ -138,10 +173,10 @@
               />
             </div>
             <div class="account-actions">
-              <el-icon size="20" @click.stop="handleEdit(item.account_name, item.account_id)">
+              <el-icon size="18" @click.stop="handleEdit(item.account_name, item.account_id)">
                 <EditPen />
               </el-icon>
-              <el-icon size="20" @click.stop="handleSetting(item.account_id)">
+              <el-icon size="18" @click.stop="handleSetting(item.account_id)">
                 <Setting />
               </el-icon>
             </div>
@@ -171,34 +206,32 @@
       </div>
     </section>
 
-    <!-- 推广板块 -->
-    <section class="section promotion" v-if="userInfo.type * 1 === 2 && userInfo.role_id * 1 === 5">
-      <h2 class="section-title">
-        <el-icon><Share /></el-icon>
-        推广中心
-        <span class="promotion-time">统计起始时间: {{ promotionStats.startTime }}</span>
-      </h2>
-      <div class="promotion-content">
-        <div class="promotion-link">
-          <h4>推广链接</h4>
-          <div class="link-box">
-            <input type="text" :value="copyText" readonly class="link-input" />
-            <el-button type="primary" @click="handleCopyUrl" class="copy-btn">
-              <el-icon><DocumentCopy /></el-icon>
-              复制链接
-            </el-button>
+      <!-- 推广板块 -->
+      <section class="section promotion" v-if="userInfo.type * 1 === 2 && userInfo.role_id * 1 === 5">
+        <h2 class="section-title">
+          <el-icon><Share /></el-icon>
+          推广中心
+        </h2>
+        <div class="promotion-content">
+          <div class="promotion-link">
+            <h4>推广链接</h4>
+            <div class="link-box">
+              <input type="text" :value="copyText" readonly class="link-input" />
+              <el-button type="primary" size="small" @click="handleCopyUrl" class="copy-btn">
+                <el-icon><DocumentCopy /></el-icon>
+                复制
+              </el-button>
+            </div>
+          </div>
+          <div class="promotion-qrcode">
+            <h4>推广二维码</h4>
+            <div class="qrcode-card">
+              <canvas ref="qrCanvas"></canvas>
+              <p>扫码注册</p>
+            </div>
           </div>
         </div>
-        <div class="promotion-qrcode">
-          <h4>推广二维码</h4>
-          <div class="qrcode-card">
-            <canvas ref="qrCanvas"></canvas>
-            <p>扫码注册</p>
-          </div>
-        </div>
-      </div>
-    </section>
-
+      </section>
     <!-- 添加/编辑子账户弹窗 -->
     <AgentDialog
       :visible="dialogVisible"
@@ -254,8 +287,9 @@ import {
   Setting,
   DocumentCopy,
   MagicStick,
-  CircleCheckFilled, 
-  TrendCharts
+  CircleCheckFilled,
+  TrendCharts,
+  UserFilled
 } from '@element-plus/icons-vue'
 import AgentDialog from '@/components/common/Dialog.vue'
 import AgentForm from '@/components/common/Form.vue'
@@ -598,11 +632,26 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
   min-height: 100%;
 }
 
+// 顶部区域布局
+.top-section {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+// 中部区域布局
+.middle-section {
+  display: grid;
+  grid-template-columns: 0.8fr 1fr;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
 .section {
   background: #ffffff;
   border-radius: 12px;
-  padding: 24px;
-  margin-bottom: 20px;
+  padding: 20px;
   box-shadow: $shadow-light;
   transition: box-shadow 0.3s ease;
 
@@ -612,10 +661,10 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
 }
 
 .section-title {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 600;
   color: $text-primary;
-  margin-bottom: 24px;
+  margin-bottom: 20px;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -624,8 +673,7 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
     color: $primary-color;
   }
 
-  .wallet-badge,
-  .promotion-time {
+  .wallet-badge {
     font-size: 12px;
     font-weight: normal;
     color: $text-tertiary;
@@ -635,10 +683,6 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
     margin-left: auto;
   }
 
-  .promotion-time {
-    font-size: 13px;
-  }
-
   .el-button {
     margin-left: auto;
   }
@@ -648,9 +692,9 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
 .getting-started {
   .progress-steps {
     display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    padding: 20px 0;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 0;
   }
 
   .step-item {
@@ -658,7 +702,6 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
     align-items: center;
     position: relative;
     flex: 1;
-    max-width: 200px;
     justify-content: center;
 
     &:last-child {
@@ -669,22 +712,22 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
   }
 
   .step-icon {
-    width: 48px;
-    height: 48px;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
     background: $bg-light;
     border: 2px solid $border-color;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 600;
     color: $text-tertiary;
     transition: all 0.3s ease;
     z-index: 2;
 
     .el-icon {
-      font-size: 24px;
+      font-size: 20px;
       color: #ffffff;
     }
   }
@@ -692,11 +735,11 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
   .step-info {
     display: flex;
     flex-direction: column;
-    margin-left: 12px;
+    margin-left: 10px;
   }
 
   .step-title {
-    font-size: 15px;
+    font-size: 14px;
     font-weight: 600;
     color: $text-primary;
     text-decoration: none;
@@ -708,18 +751,18 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
   }
 
   .step-desc {
-    font-size: 12px;
+    font-size: 11px;
     color: $text-tertiary;
-    margin-top: 4px;
+    margin-top: 2px;
   }
 
   .step-connector {
-    flex: 1;
+    flex: 0.5;
     height: 2px;
     background: $border-color;
-    margin: 0 16px;
+    margin: 0 12px;
     position: relative;
-    margin-top: -24px;
+    margin-top: -20px;
   }
 
   .connector-line {
@@ -764,22 +807,22 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
   .action-cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
+    gap: 12px;
   }
 
   .action-card {
     display: flex;
     align-items: center;
-    padding: 24px;
+    padding: 16px;
     background: #ffffff;
     border: 1px solid $border-color;
-    border-radius: 12px;
+    border-radius: 10px;
     text-decoration: none;
     transition: all 0.3s ease;
     cursor: pointer;
 
     &:hover {
-      transform: translateY(-4px);
+      transform: translateY(-2px);
       box-shadow: $shadow-hover;
       border-color: $primary-color;
 
@@ -791,9 +834,9 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
   }
 
   .card-icon {
-    width: 64px;
-    height: 64px;
-    border-radius: 16px;
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -802,17 +845,17 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
 
   .card-content {
     flex: 1;
-    margin-left: 16px;
+    margin-left: 12px;
 
     h3 {
-      font-size: 16px;
+      font-size: 14px;
       font-weight: 600;
       color: $text-primary;
-      margin: 0 0 4px 0;
+      margin: 0 0 2px 0;
     }
 
     p {
-      font-size: 13px;
+      font-size: 12px;
       color: $text-tertiary;
       margin: 0;
     }
@@ -823,7 +866,7 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
     transition: all 0.3s ease;
 
     .el-icon {
-      font-size: 20px;
+      font-size: 18px;
     }
   }
 }
@@ -833,8 +876,8 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
   .wallet-card {
     background: linear-gradient(135deg, #f0f5ff 0%, #e6f0ff 100%);
     border: 1px solid rgba(22, 93, 255, 0.1);
-    border-radius: 12px;
-    padding: 32px;
+    border-radius: 10px;
+    padding: 24px;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
@@ -851,17 +894,17 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
   }
 
   .balance-section {
-    margin-bottom: 24px;
+    margin-bottom: 16px;
   }
 
   .balance-label {
-    font-size: 14px;
+    font-size: 13px;
     color: $text-tertiary;
-    margin-bottom: 8px;
+    margin-bottom: 6px;
   }
 
   .balance-value {
-    font-size: 42px;
+    font-size: 32px;
     font-weight: 700;
     color: $primary-color;
     letter-spacing: -1px;
@@ -873,7 +916,7 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
 
   .balance-detail {
     display: flex;
-    gap: 40px;
+    gap: 32px;
   }
 
   .detail-item {
@@ -881,13 +924,13 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
     flex-direction: column;
 
     .label {
-      font-size: 13px;
+      font-size: 12px;
       color: $text-tertiary;
       margin-bottom: 4px;
     }
 
     .value {
-      font-size: 20px;
+      font-size: 16px;
       font-weight: 600;
       color: $text-primary;
     }
@@ -895,25 +938,25 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
 
   .wallet-actions {
     display: flex;
-    gap: 12px;
+    gap: 10px;
   }
 
   .action-btn {
     display: flex;
     align-items: center;
     gap: 6px;
-    padding: 10px 20px;
+    padding: 8px 16px;
     background: #ffffff;
     border: 1px solid $border-color;
-    border-radius: 8px;
+    border-radius: 6px;
     color: $text-primary;
     text-decoration: none;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
     transition: all 0.3s ease;
 
     .el-icon {
-      font-size: 16px;
+      font-size: 14px;
     }
 
     &:hover {
@@ -926,22 +969,23 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
 
 // 个人账户 - 横向卡片网格
 .my-accounts {
+  margin-bottom: 20px;
   .account-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 20px;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 16px;
   }
 
   .account-card {
     background: #ffffff;
     border: 1px solid $border-color;
-    border-radius: 12px;
-    padding: 20px;
+    border-radius: 10px;
+    padding: 16px;
     transition: all 0.3s ease;
     cursor: pointer;
 
     &:hover {
-      transform: translateY(-4px);
+      transform: translateY(-2px);
       box-shadow: $shadow-hover;
       border-color: $primary-color;
     }
@@ -951,27 +995,27 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 16px;
-    padding-bottom: 12px;
+    margin-bottom: 12px;
+    padding-bottom: 10px;
     border-bottom: 1px solid $border-color;
   }
 
   .account-name {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 600;
     color: $text-primary;
 
     .el-input {
-      width: 150px;
+      width: 120px;
     }
   }
 
   .account-actions {
     display: flex;
-    gap: 8px;
+    gap: 6px;
 
     .el-icon {
-      font-size: 16px;
+      font-size: 14px;
       color: $text-tertiary;
       cursor: pointer;
       padding: 4px;
@@ -986,16 +1030,16 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
   }
 
   .account-number {
-    font-size: 13px;
+    font-size: 12px;
     color: $text-tertiary;
-    margin-bottom: 16px;
+    margin-bottom: 12px;
     font-family: 'Monaco', 'Menlo', monospace;
   }
 
   .account-stats {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 12px;
+    gap: 8px;
   }
 
   .stat-item {
@@ -1006,33 +1050,33 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
   }
 
   .stat-label {
-    font-size: 12px;
+    font-size: 11px;
     color: $text-tertiary;
-    margin-bottom: 4px;
+    margin-bottom: 2px;
   }
 
   .stat-value {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 600;
     color: $text-primary;
   }
 
   .account-loss {
-    margin-top: 16px;
-    padding: 12px;
+    margin-top: 12px;
+    padding: 10px;
     background: rgba(255, 77, 79, 0.05);
-    border-radius: 8px;
+    border-radius: 6px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 
     .loss-label {
-      font-size: 13px;
+      font-size: 12px;
       color: $danger-color;
     }
 
     .loss-value {
-      font-size: 18px;
+      font-size: 16px;
       font-weight: 700;
       color: $danger-color;
     }
@@ -1041,32 +1085,33 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
 
 // 推广中心 - 左右布局
 .promotion {
+  margin-bottom: 20px;
   .promotion-content {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
   }
 
   .promotion-link,
   .promotion-qrcode {
     h4 {
-      font-size: 14px;
+      font-size: 13px;
       color: $text-secondary;
-      margin: 0 0 12px 0;
+      margin: 0 0 10px 0;
       font-weight: 500;
     }
   }
 
   .link-box {
     display: flex;
-    gap: 12px;
+    gap: 10px;
 
     .link-input {
       flex: 1;
-      padding: 12px 16px;
+      padding: 10px 14px;
       border: 1px solid $border-color;
-      border-radius: 8px;
-      font-size: 14px;
+      border-radius: 6px;
+      font-size: 13px;
       color: $text-primary;
       background: $bg-light;
       outline: none;
@@ -1080,24 +1125,24 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
       flex-shrink: 0;
       display: flex;
       align-items: center;
-      gap: 6px;
+      gap: 4px;
     }
   }
 
   .qrcode-card {
     background: $bg-light;
-    border-radius: 12px;
-    padding: 24px;
+    border-radius: 10px;
+    padding: 20px;
     text-align: center;
 
     canvas {
       display: block;
-      margin: 0 auto 12px;
+      margin: 0 auto 10px;
     }
 
     p {
       margin: 0;
-      font-size: 13px;
+      font-size: 12px;
       color: $text-tertiary;
     }
   }
@@ -1111,10 +1156,28 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
 }
 
 // 响应式适配
+@media (max-width: 1400px) {
+  .top-section {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .middle-section {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
 @media (max-width: 1200px) {
+  .top-section {
+    grid-template-columns: 1fr;
+  }
+
+  .middle-section {
+    grid-template-columns: 1fr;
+  }
+
   .quick-actions {
     .action-cards {
-      grid-template-columns: repeat(2, 1fr);
+      grid-template-columns: repeat(3, 1fr);
     }
   }
 }
@@ -1126,19 +1189,24 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
 
   .section {
     padding: 16px;
-    margin-bottom: 16px;
+  }
+
+  .top-section,
+  .middle-section {
+    grid-template-columns: 1fr;
+    gap: 16px;
   }
 
   .getting-started {
     .progress-steps {
       flex-direction: column;
       align-items: center;
-      gap: 20px;
+      gap: 16px;
     }
 
     .step-item {
-      max-width: 100%;
       width: 100%;
+      max-width: 280px;
       justify-content: flex-start;
       padding-left: 20px;
     }
@@ -1157,16 +1225,16 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
   .my-wallet {
     .wallet-card {
       flex-direction: column;
-      gap: 20px;
+      gap: 16px;
     }
 
     .balance-value {
-      font-size: 32px;
+      font-size: 28px;
     }
 
     .balance-detail {
       flex-wrap: wrap;
-      gap: 20px;
+      gap: 16px;
     }
 
     .wallet-actions {
@@ -1175,16 +1243,109 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
     }
   }
 
-  .promotion {
-    .promotion-content {
-      grid-template-columns: 1fr;
-    }
-  }
-
   .my-accounts {
     .account-grid {
       grid-template-columns: 1fr;
     }
   }
+
+  .user-info-panel {
+    .info-panel {
+      height: 100%;
+    }
+  }
+}
+
+// 用户信息面板样式
+.user-info-panel {
+  .info-panel {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .panel-header {
+    
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-bottom: 12px;
+    margin-bottom: 16px;
+    border-bottom: 1px solid $border-color;
+
+    .el-icon {
+      font-size: 18px;
+      color: $primary-color;
+    }
+
+    span {
+      font-size: 14px;
+      font-weight: 600;
+      color: $text-primary;
+    }
+  }
+
+  .panel-content {
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    
+    .user-info {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+
+    .user-avatar {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #e6f4ff 0%, #bae0ff 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .el-icon {
+        color: $primary-color;
+      }
+    }
+
+    .user-details {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .user-name {
+      font-size: 16px;
+      font-weight: 600;
+      color: $text-primary;
+    }
+
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 0;
+      border-bottom: 1px solid $bg-light;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    .info-label {
+      font-size: 13px;
+      color: $text-tertiary;
+    }
+
+    .info-value {
+      font-size: 13px;
+      color: $text-primary;
+      font-weight: 500;
+    }
+  }
 }
 </style>