first commit

src/views/userManagement/AdminUsersView.vue

@@ -0,0 +1,131 @@
+<script setup>
+import { Plus, Search } from '@element-plus/icons-vue'
+import { roleData } from '@/data/roles'
+import { useAdminUsers } from '@/views/userManagement/composables/useAdminUsers'
+import PageHeading from '@/views/components/PageHeading.vue'
+
+const {
+  keyword,
+  roleFilter,
+  currentPage,
+  pageSize,
+  dialogVisible,
+  form,
+  filtered,
+  paginated,
+  queryUsers,
+  toggleStatus,
+  addUser,
+} = useAdminUsers()
+</script>
+
+<template>
+  <PageHeading eyebrow="后台管理" title="管理员用户列表" description="查询和维护后台管理员账号及权限角色。" />
+
+  <section class="panel admin-users-panel">
+    <div class="admin-user-toolbar">
+      <el-input
+        v-model="keyword"
+        :prefix-icon="Search"
+        clearable
+        placeholder="搜索用户ID或用户名"
+        @keyup.enter="queryUsers"
+        @clear="queryUsers"
+      />
+      <el-select
+        v-model="roleFilter"
+        clearable
+        placeholder="搜索权限角色"
+        @change="queryUsers"
+      >
+        <el-option
+          v-for="role in roleData"
+          :key="role.name"
+          :label="role.name"
+          :value="role.name"
+        />
+      </el-select>
+      <el-button type="primary" @click="queryUsers">查询</el-button>
+      <el-button type="primary" @click="dialogVisible = true">
+        <el-icon><Plus /></el-icon>
+        添加用户
+      </el-button>
+    </div>
+
+    <el-table
+      :data="paginated"
+      row-key="id"
+      border
+      class="drama-el-table admin-users-table"
+      empty-text="没有符合条件的管理员"
+    >
+      <el-table-column
+        type="index"
+        label="序号"
+        width="75"
+        :index="(currentPage - 1) * pageSize + 1"
+      />
+      <el-table-column prop="id" label="ID" width="90" />
+      <el-table-column prop="username" label="用户名" min-width="140" />
+      <el-table-column prop="name" label="姓名" min-width="130" />
+      <el-table-column prop="roleId" label="权限ID" width="110" />
+      <el-table-column prop="role" label="权限角色" min-width="150" />
+      <el-table-column prop="ipWhitelist" label="IP白名单" min-width="140" />
+      <el-table-column label="状态" width="110">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="toggleStatus(row)">
+            {{ row.status }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="2FA状态" width="120">
+        <template #default="{ row }">
+          <el-tag type="info" effect="plain">{{ row.twoFactor }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createdAt" label="创建时间" min-width="185" />
+      <el-table-column prop="lastLogin" label="最后登录" min-width="185" />
+    </el-table>
+
+    <div class="pagination">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="filtered.length"
+        layout="total, prev, pager, next, sizes, jumper"
+        background
+      />
+    </div>
+  </section>
+
+  <el-dialog v-model="dialogVisible" title="添加管理员" width="520px">
+    <el-form label-position="top">
+      <div class="form-row">
+        <el-form-item label="用户名" required>
+          <el-input v-model="form.username" />
+        </el-form-item>
+        <el-form-item label="姓名" required>
+          <el-input v-model="form.name" />
+        </el-form-item>
+      </div>
+      <el-form-item label="权限角色" required>
+        <el-select v-model="form.role" placeholder="请选择角色">
+          <el-option
+            v-for="role in roleData"
+            :key="role.name"
+            :label="role.name"
+            :value="role.name"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="IP白名单">
+        <el-input v-model="form.ipWhitelist" placeholder="选填，多个 IP 用逗号分隔" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" @click="addUser">确认添加</el-button>
+    </template>
+  </el-dialog>
+</template>