页面美化

src/components/UserTable.vue

@@ -1,7 +1,4 @@
 <template>
-  <div>
-    用户列表
-  </div>
   <el-table :data="users" style="width: 100%">
     <el-table-column prop="id" label="ID" width="100" />
     <el-table-column prop="username" label="用户名" />

src/views/ManagePage.vue

@@ -1,14 +1,24 @@
 <template>
   <div class="manage-page">
-    <el-button 
+    <el-card class="page-container">
-      type="danger" 
+      <div class="page-header">
-      class="logout-btn"
+        <div class="user-info">
-      @click="handleLogout"
+          <h2 class="page-title">用户管理</h2>
-    >
+          <div class="user-detail">
-      登出
+            <span class="username">{{ userStore.username }}</span>
-    </el-button>
+            <span class="role">({{ userStore.role }})</span>
-
+          </div>
-    <UserTable/>
+        </div>
+        <el-button
+          type="danger"
+          class="logout-btn"
+          @click="handleLogout"
+        >
+          登出
+        </el-button>
+      </div>
+      <UserTable/>
+    </el-card>
   </div>
 </template>
 
@@ -50,6 +60,26 @@ onMounted(() => {
   padding: 20px;
 }
 
+.user-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.user-detail {
+  margin-top: 4px;
+  color: #606266;
+  font-size: 14px;
+}
+
+.username {
+  font-weight: 500;
+}
+
+.role {
+  margin-left: 8px;
+  color: #909399;
+}
+
 .logout-btn {
   margin-bottom: 20px;
   float: right;