Merge branch 'milestone-20260107-用户画像记录'

src/views/PlatformData/UserOverview.vue

@@ -45,28 +45,39 @@
           </div>
         </div>
 
-        <div class="right-stats-col">
+        <div class="right-stats-grid">
           <!-- 会员总数 -->
           <div class="stat-card orange-gradient small-card">
             <div class="small-card-content">
-              <div class="left-part">
-                <div class="card-title">
-                  <el-icon><Trophy /></el-icon> 会员登陆总数
+              <div class="card-title">
+                <el-icon><Trophy /></el-icon> 会员登录总数
+              </div>
+              <div class="card-value-small">{{ overviewData.member }}</div>
+              <div class="card-tag-wrapper">
+                <div class="card-tag" :class="getGrowthClass(overviewData.member_growth)">
+                  {{ getGrowthText(overviewData.member_growth) }}
                 </div>
               </div>
-              <div class="right-part">
-                <div class="card-value-small">{{ overviewData.member }}</div>
-                <div class="card-tag-wrapper">
-                  <div class="card-tag" :class="getGrowthClass(overviewData.member_growth)">
-                    {{ getGrowthText(overviewData.member_growth) }}
-                  </div>
+            </div>
+          </div>
+          
+          <!-- 游客总数 -->
+          <div class="stat-card purple-gradient small-card">
+            <div class="small-card-content">
+              <div class="card-title">
+                <el-icon><User /></el-icon> 游客总数
+              </div>
+              <div class="card-value-small">{{ overviewData.visitor }}</div>
+              <div class="card-tag-wrapper">
+                <div class="card-tag" :class="getGrowthClass(overviewData.vistor_growth)">
+                  {{ getGrowthText(overviewData.vistor_growth) }}
                 </div>
               </div>
             </div>
           </div>
           
           <!-- 非网注册和登录总数 -->
-          <div class="stat-card blue-gradient small-card">
+          <div class="stat-card blue-gradient small-card full-width">
             <div class="small-card-row">
               <!-- 非网注册总数 -->
               <div class="small-card-item">
@@ -137,7 +148,7 @@
         />
         <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
         <el-button type="primary" class="reset-btn" @click="handleReset">重置</el-button>
-        <el-button type="danger" class="export-btn" @click="handleExport">数据导出</el-button>
+        <!-- <el-button type="danger" class="export-btn" @click="handleExport">数据导出</el-button> -->
       </div>
 
       <!-- 表格1: 用户构成明细 -->
@@ -248,6 +259,8 @@ const overviewData = ref({
   total_login_growth: '0%',
   member: 0,
   member_growth: '0%',
+  visitor: 0,
+  vistor_growth: '0%',
   normal_register: 0,
   normal_reg_growth: '0%',
   normal_login: 0,
@@ -654,7 +667,7 @@ onMounted(() => {
 
 .big-card {
   flex: 1;
-  height: 360px;
+  height: auto;
   border-radius: 12px;
   padding: 24px;
   display: flex;
@@ -675,11 +688,34 @@ onMounted(() => {
   background: linear-gradient(135deg, #9BB7FC 0%, #66a6ff 100%);
 }
 
-.right-stats-col {
+.right-stats-grid {
   flex: 2;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto;
+  gap: 20px;
+}
+
+.right-stats-grid .full-width {
+  grid-column: 1 / -1;
+}
+
+.right-stats-grid .small-card-content {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.right-stats-grid .small-card-content .card-title {
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+.right-stats-grid .small-card-content .card-value-small {
+  margin-bottom: 10px;
+  text-align: center;
 }
 .small-card {
   flex: 1;