From dd1f82920bcf0036243f3144b392d131b31fa8d8 Mon Sep 17 00:00:00 2001
From: NanamiAdmin <yzt114@yeah.net>
Date: Tue, 10 Mar 2026 14:53:42 +0800
Subject: [PATCH] fix(Users): fix user do not display in user management page
 and add user dialog box

- Change user property names to match API response (UserID, Username, Type, CreatedAt)
- Remove lastActive field from display
- Add error handling for user list loading
- Improve UI styling with better padding and background
- Add null checks for Username display
---
 src/views/Users.vue | 36 +++++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/views/Users.vue b/src/views/Users.vue
index c92c10f..e18f8db 100644
--- a/src/views/Users.vue
+++ b/src/views/Users.vue
@@ -7,14 +7,14 @@
             </button>
         </div>
         <div class="users-list">
-            <div v-for="user in users" :key="user.userID" class="user-item">
+            <div v-for="user in users" :key="user.UserID" class="user-item">
                 <div class="user-info">
-                    <div class="user-avatar">{{ user.username.charAt(0).toUpperCase() }}</div>
+                    <div class="avatar">{{ user.Username ? user.Username.charAt(0).toUpperCase() : '' }}</div>
                     <div class="user-details">
-                        <div class="user-name">{{ user.username }}</div>
+                        <div class="user-name">{{ user.Username || 'N/A' }}</div>
                         <div class="user-type">
-                            <span :class="['type-badge', user.type]">
-                                {{ getTypeLabel(user.type) }}
+                            <span :class="['type-badge', user.Type]">
+                                {{ getTypeLabel(user.Type) }}
                             </span>
                         </div>
                     </div>
@@ -22,18 +22,14 @@
                 <div class="user-meta">
                     <div class="meta-item">
                         <span class="meta-label">Created At:</span>
-                        <span class="meta-value">{{ formatDate(user.createdAt) }}</span>
-                    </div>
-                    <div class="meta-item">
-                        <span class="meta-label">Last Active:</span>
-                        <span class="meta-value">{{ formatDate(user.lastActive) }}</span>
+                        <span class="meta-value">{{ formatDate(user.CreatedAt) }}</span>
                     </div>
                 </div>
                 <div class="user-actions">
                     <button class="action-btn edit-btn" @click="editUser(user)">
                         Edit
                     </button>
-                    <button class="action-btn delete-btn" @click="deleteUser(user.userID)">
+                    <button class="action-btn delete-btn" @click="deleteUser(user.UserID)">
                         Delete
                     </button>
                 </div>
@@ -106,8 +102,9 @@ export default {
         const loadUsers = async () => {
             try {
                 const result = await userApi.listUsers();
-                users.value = result.data;
+                users.value = result.success ? (result.data || []) : [];
             } catch (error) {
+                console.error('Failed to load users:', error);
                 showNotification('Failed to load user list', 'error');
             }
         };
@@ -148,11 +145,11 @@ export default {
         };
 
         const editUser = (user) => {
-            editingUserId.value = user.userID;
+            editingUserId.value = user.UserID;
             formData.value = {
-                username: user.username,
+                username: user.Username,
                 passwd: '',
-                type: user.type
+                type: user.Type
             };
             showEditModal.value = true;
         };
@@ -223,6 +220,9 @@ export default {
     display: flex;
     align-items: center;
     gap: 20px;
+    padding: 12px;
+    border-radius: 8px;
+    background-color: #f9f9f9;
 }
 
 .user-info {
@@ -243,6 +243,12 @@ export default {
     font-weight: 600;
     color: var(--text-color);
     transition: color 0.3s;
+    word-break: break-all;
+}
+
+.user-type {
+    color: var(--text-color);
+    font-size: 14px;
 }
 
 .user-meta {