Super-frpc/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(Users): fix user do not display in user management page and add user dialog box

Browse Source 
- 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
This commit is contained in:
NanamiAdmin
2026-03-10 14:53:42 +08:00
parent ffaa78be94
commit dd1f82920b
1 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/views/Users.vue
View File

@@ -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 {