用户信息显示优化

admin/dashboard/templates/index.html

@@ -21,7 +21,8 @@
                 <el-row :gutter="20">
                     <!-- 左侧用户信息 -->
                     <el-col :span="6">
-                        <el-card shadow="hover" class="user-card">
+                        <div class="chart-container pie-chart-container user-info-chart">
+                            <h4>用户信息</h4>
                             <div v-if="currentUser.success" class="user-info-container">
                                 <div class="user-avatar-container">
                                     <img :src="'/static/' + currentUser.data.avatar" alt="用户头像" />
@@ -49,7 +50,7 @@
                                 <i class="el-icon-warning"></i>
                                 <div>{% raw %}{{ currentUser.message || '未获取到用户信息' }}{% endraw %}</div>
                             </div>
-                        </el-card>
+                        </div>
                     </el-col>
                     
                     <!-- 移除中间系统信息部分，改为占位 -->
@@ -645,21 +646,29 @@
         margin-top: 10px;
     }
     
-    /* 用户信息容器样式 */
-    /* 用户卡片样式 */
-    .user-card {
+    /* 用户信息图表容器样式 */
+    .user-info-chart {
+        text-align: center;
         height: 100%;
+        display: flex;
+        flex-direction: column;
+        padding: 5px;
+        margin-bottom: 0;
+        box-shadow: none;
     }
     
-    .user-card .el-card__body {
-        padding: 8px;
+    .user-info-chart h4 {
+        margin-top: 0;
+        margin-bottom: 5px;
+        font-size: 12px;
+        color: #606266;
     }
     
     .user-info-container {
         padding: 0;
         display: flex;
         flex-direction: column;
-        height: 100%;
+        flex: 1;
         justify-content: center;
     }
     
@@ -669,8 +678,8 @@
     }
     
     .user-avatar-container img {
-        width: 56px;  /* 原来80px的70% */
-        height: 56px; /* 原来80px的70% */
+        width: 56px;
+        height: 56px;
         border-radius: 50%;
         border: 2px solid #fff;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
@@ -679,40 +688,53 @@
     .user-info-details {
         display: flex;
         flex-direction: column;
-        gap: 5px;  /* 原来8px的缩小版 */
+        gap: 5px;
     }
     
     .user-info-item {
         display: flex;
         align-items: center;
-        font-size: 12px;  /* 缩小字体 */
+        font-size: 12px;
+        justify-content: center;
     }
     
     .user-info-label {
-        width: 50px;  /* 原来70px的缩小版 */
+        width: 50px;
         color: #606266;
         font-weight: 500;
         flex-shrink: 0;
+        text-align: right;
+        padding-right: 5px;
     }
     
     .user-info-value {
         color: #303133;
         flex: 1;
         word-break: break-all;
+        text-align: left;
+        max-width: 120px;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
     
     .user-home-path {
-        font-size: 10px;  /* 原来12px的缩小版 */
+        font-size: 10px;
     }
     
-    /* 移除不再需要的样式 */
-    .user-info-header,
-    .user-avatar,
-    .user-details,
-    .user-nickname,
-    .user-wxid,
-    .system-info-container {
-        /* 这些类不再需要，但保留以防其他地方使用 */
+    .user-info-empty {
+        text-align: center;
+        color: #909399;
+        padding: 20px 0;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+    
+    .user-info-empty i {
+        font-size: 24px;
+        margin-bottom: 10px;
     }
     
     .user-info-row {