后台用户-ui优化

apps/frontend/src/components.d.ts

@@ -21,7 +21,6 @@ declare module 'vue' {
     AdminStatusTag: typeof import('./components/admin/AdminStatusTag.vue')['default']
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -31,7 +30,6 @@ declare module 'vue' {
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -44,7 +42,6 @@ declare module 'vue' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
-    ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
@@ -52,7 +49,6 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElStatistic: typeof import('element-plus/es')['ElStatistic']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']

apps/frontend/src/views/admin/AdminUsersView.vue

@@ -115,34 +115,36 @@ onMounted(loadUsers)
     <el-result v-if="!hasAdminRole('admin')" icon="warning" title="仅管理员可以访问用户管理。" />
 
     <template v-else>
-      <!-- 筛选 + 创建 -->
-      <el-card shadow="never" class="filter-card" style="margin-top: 16px">
+      <section class="users-tools">
         <div class="filter-row">
-          <el-input v-model="username" placeholder="账号筛选" clearable style="width: 140px" @keyup.enter="loadUsers(1)" />
-          <el-select v-model="role" placeholder="角色" clearable style="width: 120px">
+          <el-input v-model="username" class="filter-control filter-control--username" placeholder="账号筛选" clearable @keyup.enter="loadUsers(1)" />
+          <el-select v-model="role" class="filter-control filter-control--role" placeholder="角色" clearable>
             <el-option v-for="opt in adminUserRoleOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
           </el-select>
-          <el-select v-model="status" placeholder="状态" clearable style="width: 120px">
+          <el-select v-model="status" class="filter-control filter-control--status" placeholder="状态" clearable>
             <el-option v-for="opt in adminUserStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
           </el-select>
-          <el-button @click="loadUsers(1)">查询列表</el-button>
+          <el-button round type="primary" @click="loadUsers(1)">查询列表</el-button>
         </div>
-        <el-divider />
-        <div class="filter-row">
-          <el-input v-model="createUsername" placeholder="新账号" style="width: 140px" />
-          <el-input v-model="createPassword" type="password" show-password placeholder="新密码，至少 8 位" style="width: 180px" />
-          <el-select v-model="createRole" style="width: 120px">
+        <div class="create-row">
+          <el-input v-model="createUsername" class="filter-control filter-control--username" placeholder="新账号" />
+          <el-input v-model="createPassword" class="filter-control filter-control--password" type="password" show-password placeholder="新密码，至少 8 位" />
+          <el-select v-model="createRole" class="filter-control filter-control--role">
             <el-option value="operator" label="普通运营" />
             <el-option value="support" label="客服" />
             <el-option value="admin" label="管理员" />
           </el-select>
-          <el-button :loading="creating" type="primary" @click="submitCreate">新增用户</el-button>
+          <el-button round :loading="creating" type="primary" @click="submitCreate">新增用户</el-button>
         </div>
-      </el-card>
+      </section>
 
       <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
 
-      <el-card shadow="never" class="users-table-card" style="margin-top: 16px">
+      <section class="users-table-section">
+        <div class="users-table-toolbar">
+          <strong>用户列表</strong>
+          <span>共 {{ pagination.total }} 个账号</span>
+        </div>
         <el-table :data="items" stripe size="small" v-loading="loading" element-loading-text="用户列表加载中" class="users-table" style="width: 100%">
           <el-table-column prop="userId" label="ID" width="52" align="center" />
           <el-table-column prop="username" label="账号" width="112" show-overflow-tooltip />
@@ -198,16 +200,83 @@ onMounted(loadUsers)
           style="margin-top: 16px; justify-content: center"
           @current-change="loadUsers"
         />
-      </el-card>
+      </section>
     </template>
   </div>
 </template>
 
 <style scoped>
 .users-page { display: grid; gap: 0; }
-.filter-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
-.users-table-card { overflow: visible; }
-.users-table { width: 100%; }
+.users-tools {
+  display: grid;
+  gap: var(--space-3);
+  margin-top: var(--space-4);
+}
+.filter-row,
+.create-row {
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+  flex-wrap: wrap;
+}
+.create-row {
+  padding-top: var(--space-3);
+  border-top: 1px solid rgba(86, 108, 138, 0.12);
+}
+.filter-control { min-width: 0; }
+.filter-control--username { width: 150px; }
+.filter-control--role,
+.filter-control--status { width: 128px; }
+.filter-control--password { width: 210px; }
+.users-table-section {
+  margin-top: var(--space-5);
+  overflow: visible;
+}
+.users-table-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin-bottom: var(--space-2);
+}
+.users-table-toolbar strong {
+  color: var(--text-primary);
+  font-size: var(--text-base);
+}
+.users-table-toolbar span {
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+.users-table {
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.36);
+  --el-table-bg-color: transparent;
+  --el-table-tr-bg-color: transparent;
+  --el-table-header-bg-color: rgba(239, 246, 255, 0.72);
+  --el-table-row-hover-bg-color: rgba(239, 246, 255, 0.72);
+  --el-table-border-color: rgba(86, 108, 138, 0.1);
+}
+.users-table :deep(.el-table__inner-wrapper::before) { display: none; }
+.users-table :deep(th.el-table__cell) {
+  height: 42px;
+  background: var(--el-table-header-bg-color);
+  color: var(--text-secondary);
+  font-weight: 700;
+}
+.users-table :deep(td.el-table__cell) {
+  height: 44px;
+  background: rgba(255, 255, 255, 0.46);
+}
+.users-table :deep(.el-table__row--striped td.el-table__cell) {
+  background: rgba(255, 255, 255, 0.62);
+}
+.users-table :deep(.el-table__body tr:hover > td.el-table__cell) {
+  background: var(--el-table-row-hover-bg-color);
+}
 .inventory-tags { display: flex; gap: 4px; align-items: center; white-space: nowrap; }
 .inventory-tags :deep(.el-tag) { flex: 0 0 auto; }
 .date-cell { display: inline-block; white-space: nowrap; font-size: var(--text-xs); }
@@ -215,4 +284,19 @@ onMounted(loadUsers)
 .action-stack :deep(.el-button) { flex: 0 0 auto; margin-left: 0; padding: 5px 8px; }
 .action-stack :deep(.el-tag) { flex: 0 0 auto; padding: 0 7px; }
 .action-stack :deep(.el-icon--right) { margin-left: 4px; }
+
+@media (max-width: 640px) {
+  .filter-control,
+  .filter-control--username,
+  .filter-control--role,
+  .filter-control--status,
+  .filter-control--password {
+    width: 100%;
+  }
+
+  .filter-row :deep(.el-button),
+  .create-row :deep(.el-button) {
+    width: 100%;
+  }
+}
 </style>