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>

src/views/userManagement/composables/useAdminUsers.js

@@ -0,0 +1,45 @@
+import { computed, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { roleData } from '../../../data/roles'
+import { demoAdminUsers } from '../data/adminUsers'
+
+export function useAdminUsers() {
+  const keyword = ref('')
+  const roleFilter = ref('')
+  const currentPage = ref(1)
+  const pageSize = ref(10)
+  const dialogVisible = ref(false)
+  const form = reactive({ username: '', name: '', role: '', ipWhitelist: '' })
+  const users = ref(demoAdminUsers.map(user => ({ ...user })))
+  const filtered = computed(() => users.value.filter(user => {
+    const query = keyword.value.trim().toLowerCase()
+    const matchesKeyword = !query || `${user.id} ${user.username} ${user.name}`.toLowerCase().includes(query)
+    return matchesKeyword && (!roleFilter.value || user.role === roleFilter.value)
+  }))
+  const paginated = computed(() => filtered.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value))
+
+  function queryUsers() { currentPage.value = 1 }
+  function toggleStatus(user) { user.status = user.status === '启用' ? '停用' : '启用' }
+  function addUser() {
+    if (!form.username.trim() || !form.name.trim() || !form.role) return ElMessage.warning('请填写用户名、姓名并选择权限角色')
+    const role = roleData.find(item => item.name === form.role)
+    users.value.unshift({
+      id: Math.max(0, ...users.value.map(user => user.id)) + 1,
+      username: form.username.trim(),
+      name: form.name.trim(),
+      roleId: role?.id || 0,
+      role: form.role,
+      ipWhitelist: form.ipWhitelist.trim() || '不限',
+      status: '启用',
+      twoFactor: '未开启',
+      createdAt: new Date().toLocaleString('sv-SE'),
+      lastLogin: '—',
+    })
+    Object.assign(form, { username: '', name: '', role: '', ipWhitelist: '' })
+    dialogVisible.value = false
+    currentPage.value = 1
+    ElMessage.success('管理员已添加')
+  }
+
+  return { keyword, roleFilter, currentPage, pageSize, dialogVisible, form, users, filtered, paginated, queryUsers, toggleStatus, addUser }
+}

src/views/userManagement/data/adminUsers.js

@@ -0,0 +1,7 @@
+export const demoAdminUsers = [
+  { id: 1001, username: 'lin.xiaoman', name: '林小满', roleId: 1, role: '超级管理员', ipWhitelist: '不限', status: '启用', twoFactor: '已开启', createdAt: '2026-09-18 09:30:00', lastLogin: '2026-10-12 09:41:22' },
+  { id: 1002, username: 'content.editor01', name: '陈一诺', roleId: 2, role: '内容运营', ipWhitelist: '不限', status: '启用', twoFactor: '未开启', createdAt: '2026-09-21 10:15:00', lastLogin: '2026-10-11 16:20:15' },
+  { id: 1003, username: 'content.editor02', name: '周子瑜', roleId: 2, role: '内容运营', ipWhitelist: '不限', status: '启用', twoFactor: '未开启', createdAt: '2026-09-25 14:20:00', lastLogin: '2026-10-11 13:34:10' },
+  { id: 1004, username: 'content.reviewer01', name: '林晓彤', roleId: 3, role: '审核专员', ipWhitelist: '不限', status: '启用', twoFactor: '已开启', createdAt: '2026-10-02 11:05:00', lastLogin: '2026-10-10 11:20:08' },
+  { id: 1005, username: 'data.analyst01', name: '程予安', roleId: 4, role: '数据分析师', ipWhitelist: '不限', status: '启用', twoFactor: '未开启', createdAt: '2026-10-05 13:02:00', lastLogin: '2026-10-09 14:10:02' },
+]