系统设置：用户管理页面设计与实现
概述
系统管理模块负责平台的全局配置，核心功能包括用户管理、角色管理、菜单管理和系统日志等。本节完成用户管理页面的完整设计与实现，包括路由配置、i18n 国际化支持和页面布局。
模块架构
系统设置/
├── 用户管理 ← 本节重点
├── 角色管理
├── 菜单管理
└── 系统日志/
├── 登录日志
└── 操作日志
text
用户管理页面结构：
- 顶部：筛选条件 + 快捷操作（新增用户按钮）
- 中部：用户数据表格
- 底部：分页器
- 弹层：新增/编辑用户的模态框（Drawer 或 Dialog）
路由配置
页面路由定义
// pages/settings/index.vue
<script setup lang="ts">
definePage({
meta: {
title: 'pages.settings',
icon: 'settings',
},
})
</script>
<template>
<RouterView />
</template>
typescript
子路由结构
pages/settings/
├── index.vue # 系统设置首页（带 RouterView）
└── users/
└── index.vue # 用户管理页面
text
i18n 国际化配置
在 public/locales/ 中添加对应的翻译键值：
// public/locales/zh-CN/page.json
{
"pages": {
"settings": "系统设置",
"settings.users": "用户管理",
"settings.roles": "角色管理",
"settings.menus": "菜单管理"
}
}
json
// public/locales/en/page.json
{
"pages": {
"settings": "System Settings",
"settings.users": "User Management",
"settings.roles": "Role Management",
"settings.menus": "Menu Management"
}
}
json
用户管理页面实现
页面结构
<!-- pages/settings/users/index.vue -->
<template>
<div class="user-management">
<!-- 搜索与操作栏 -->
<div class="toolbar">
<el-form :model="queryForm" inline>
<el-form-item label="用户名">
<el-input v-model="queryForm.username" placeholder="请输入用户名" clearable />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="queryForm.status" placeholder="请选择">
<el-option label="启用" value="active" />
<el-option label="禁用" value="disabled" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
<el-button type="primary" @click="handleAdd">新增用户</el-button>
</div>
<!-- 数据表格 -->
<el-table :data="userList" border stripe>
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="username" label="用户名" />
<el-table-column prop="email" label="邮箱" />
<el-table-column prop="role" label="角色" />
<el-table-column prop="status" label="状态">
<template #default="{ row }">
<el-tag :type="row.status === 'active' ? 'success' : 'danger'">
{{ row.status === 'active' ? '启用' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="createdAt" label="创建时间" />
<el-table-column label="操作" width="200">
<template #default="{ row }">
<el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
<el-button link type="danger" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
v-model:current-page="pagination.page"
v-model:page-size="pagination.pageSize"
:total="pagination.total"
layout="total, sizes, prev, pager, next, jumper"
/>
</div>
</template>
vue
实践要点
- 系统设置页面采用与其他模块一致的布局结构（搜索+表格+分页）
- i18n 翻译键使用
pages.settings格式，与项目现有的国际化规范保持一致 - 角色管理、菜单管理等页面结构与用户管理高度相似，可自行参照完成
- 系统日志（登录日志、操作日志）以表格展示为主，实现方式相同
- 新增/编辑用户的交互方式根据产品需求选择 Dialog 或 Drawer
↑