用户信息显示优化

admin/dashboard/templates/index.html

@@ -15,35 +15,37 @@
                 <el-row :gutter="20">
                     <!-- 左侧用户信息 -->
                     <el-col :span="6">
-                        <div v-if="currentUser.success" style="display: flex; flex-direction: column; align-items: center;">
+                        <div v-if="currentUser.success" class="user-info-container">
-                            <div v-if="currentUser.data.avatar" style="margin-bottom: 10px;">
+                            <div class="user-info-header">
-                                <img :src="'/static/' + currentUser.data.avatar" style="width: 80px; height: 80px; border-radius: 50%;" />
+                                <div v-if="currentUser.data.avatar" class="user-avatar">
-                            </div>
+                                    <img :src="'/static/' + currentUser.data.avatar" alt="用户头像" />
-                            <div style="text-align: center;">
+                                </div>
-                                <div style="font-size: 18px; font-weight: bold;">{% raw %}{{ currentUser.data.nickname }}{% endraw %}</div>
+                                <div class="user-details">
-                                <div style="font-size: 14px; color: #666; margin-top: 5px;">{% raw %}{{ currentUser.data.wx_id }}{% endraw %}</div>
+                                    <div class="user-nickname">{% raw %}{{ currentUser.data.nickname || '未知用户' }}{% endraw %}</div>
+                                    <div class="user-wxid">{% raw %}{{ currentUser.data.wx_id }}{% endraw %}</div>
+                                </div>
                             </div>
                         </div>
-                        <div v-else style="text-align: center; color: #999; padding: 20px 0;">
+                        <div v-else class="user-info-container user-info-empty">
-                            <i class="el-icon-warning" style="font-size: 24px;"></i>
+                            <i class="el-icon-warning"></i>
                             <div>{% raw %}{{ currentUser.message || '未获取到用户信息' }}{% endraw %}</div>
                         </div>
                     </el-col>
                     
                     <!-- 中间系统信息 -->
                     <el-col :span="6">
-                        <div class="system-info-item">
+                        <div class="system-info-container">
                             <div class="system-info-row">
-                                <span>操作系统:</span>
+                                <span class="info-label">操作系统:</span>
-                                <span>{% raw %}{{ systemInfo.os }} {{ systemInfo.os_version }}{% endraw %}</span>
+                                <span class="info-value">{% raw %}{{ systemInfo.os }} {{ systemInfo.os_version }}{% endraw %}</span>
                             </div>
                             <div class="system-info-row">
-                                <span>Python版本:</span>
+                                <span class="info-label">Python版本:</span>
-                                <span>{% raw %}{{ systemInfo.python_version }}{% endraw %}</span>
+                                <span class="info-value">{% raw %}{{ systemInfo.python_version }}{% endraw %}</span>
                             </div>
                             <div class="system-info-row">
-                                <span>运行时间:</span>
+                                <span class="info-label">运行时间:</span>
-                                <span>{% raw %}{{ formattedUptime }}{% endraw %}</span>
+                                <span class="info-value">{% raw %}{{ formattedUptime }}{% endraw %}</span>
                             </div>
                             <div class="system-update-time">最后更新: {% raw %}{{ systemInfo.timestamp }}{% endraw %}</div>
                         </div>
@@ -634,5 +636,95 @@
         color: #909399;
         margin-top: 10px;
     }
+    
+    /* 用户信息容器样式 */
+    .user-info-container {
+        background-color: #f9f9f9;
+        border-radius: 4px;
+        padding: 15px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+    
+    .user-info-empty {
+        text-align: center;
+        color: #909399;
+        font-size: 14px;
+    }
+    
+    .user-info-empty i {
+        font-size: 24px;
+        margin-bottom: 10px;
+    }
+    
+    .user-info-header {
+        display: flex;
+        align-items: center;
+    }
+    
+    .user-avatar {
+        margin-right: 15px;
+    }
+    
+    .user-avatar img {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        border: 2px solid #fff;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    }
+    
+    .user-details {
+        flex: 1;
+    }
+    
+    .user-nickname {
+        font-size: 18px;
+        font-weight: bold;
+        color: #303133;
+        margin-bottom: 5px;
+    }
+    
+    .user-wxid {
+        font-size: 14px;
+        color: #606266;
+    }
+    
+    /* 系统信息容器样式 */
+    .system-info-container {
+        background-color: #f9f9f9;
+        border-radius: 4px;
+        padding: 15px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+    
+    .system-info-row {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 12px;
+        line-height: 1.5;
+    }
+    
+    .info-label {
+        color: #606266;
+        font-weight: 500;
+    }
+    
+    .info-value {
+        color: #303133;
+        text-align: right;
+    }
+    
+    .system-update-time {
+        text-align: right;
+        font-size: 12px;
+        color: #909399;
+        margin-top: auto;
+    }
 </style>
 {% endblock %}