feat(system): 完成前端系统管理（布局框架、三个管理页面、e2e）
- BasicLayout：侧边栏/顶栏/面包屑/移动端抽屉；菜单从路由表派生； 路由守卫新增 requiresAdmin 层（菜单隐藏 + 直连 URL 弹回） - 用户/角色/日志三个页面：分页请求序号防竞态、确认动作流抽 useConfirmAction、 时间范围配 default-time、日志详情按需懒加载并缓存 - 空 catch 统一改 handledError 显式声明；词表/选项常量集中（与后端对齐）， 「停用」文案全站统一为「禁用」 - 品牌色提升为全局 token，Element Plus 主色指向赭金 - e2e：公共工具抽 common.py；系统管理 13 项（含详情懒加载脱敏断言）， 管理员密码改 E2E_ADMIN_PASSWORD 环境变量；login_flow 8 项回归通过 Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
liuwenxinandClaude Code committed
1 parent
c83287819a
commit
8355e0cc7d
26 files changed
+2785
-180
No files matched your search
@@ -0,0 +1,78 @@
|
||||
import { request } from './request'
|
||||
import type { PageData } from './types'
|
||||
|
||||
/** 操作日志列表项（对应后端 `OperationLogOut`；不含 request_data 大字段）。 */
|
||||
export interface OperationLogItem {
|
||||
id: number
|
||||
user_id: number | null
|
||||
username: string
|
||||
module: string
|
||||
action: string
|
||||
summary: string
|
||||
method: string | null
|
||||
path: string | null
|
||||
ip: string | null
|
||||
user_agent: string | null
|
||||
/** 1成功 0失败 */
|
||||
success: number
|
||||
error_message: string | null
|
||||
duration_ms: number | null
|
||||
create_time: string | null
|
||||
}
|
||||
|
||||
/** 操作日志详情（对应后端 `OperationLogDetailOut`；request_data 已脱敏） */
|
||||
export interface OperationLogDetail extends OperationLogItem {
|
||||
request_data: string | null
|
||||
}
|
||||
|
||||
export interface OperationLogQueryParams {
|
||||
pageNum?: number
|
||||
pageSize?: number
|
||||
username?: string
|
||||
module?: string
|
||||
action?: string
|
||||
success?: number
|
||||
/** 格式 YYYY-MM-DD HH:mm:ss（el-date-picker 需配 value-format） */
|
||||
start_time?: string
|
||||
end_time?: string
|
||||
}
|
||||
|
||||
/** 登录日志项（对应后端 `LoginLogOut`）。 */
|
||||
export interface LoginLogItem {
|
||||
id: number
|
||||
user_id: number | null
|
||||
username: string
|
||||
ip: string | null
|
||||
user_agent: string | null
|
||||
/** 1成功 0失败 */
|
||||
success: number
|
||||
fail_reason: string | null
|
||||
create_time: string | null
|
||||
}
|
||||
|
||||
export interface LoginLogQueryParams {
|
||||
pageNum?: number
|
||||
pageSize?: number
|
||||
username?: string
|
||||
ip?: string
|
||||
success?: number
|
||||
start_time?: string
|
||||
end_time?: string
|
||||
}
|
||||
|
||||
/** 分页查询操作日志（列表不含 request_data，详情走 getOperationLog） */
|
||||
export function listOperationLogs(
|
||||
params: OperationLogQueryParams,
|
||||
): Promise<PageData<OperationLogItem>> {
|
||||
return request({ url: '/v1/system/operation-logs', method: 'get', params })
|
||||
}
|
||||
|
||||
/** 操作日志详情（含已脱敏的请求参数，展开行时按需加载） */
|
||||
export function getOperationLog(logId: number): Promise<OperationLogDetail> {
|
||||
return request({ url: `/v1/system/operation-logs/${logId}`, method: 'get' })
|
||||
}
|
||||
|
||||
/** 分页查询登录日志 */
|
||||
export function listLoginLogs(params: LoginLogQueryParams): Promise<PageData<LoginLogItem>> {
|
||||
return request({ url: '/v1/system/login-logs', method: 'get', params })
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { request } from './request'
|
||||
import type { PageData, RoleOption } from './types'
|
||||
|
||||
/** 角色管理列表项（对应后端 `RoleManageOut`，比下拉多绑定用户数）。 */
|
||||
export interface RoleItem extends RoleOption {
|
||||
/** 绑定用户数：>0 的角色不可删除，前端据此禁用按钮 */
|
||||
user_count: number
|
||||
}
|
||||
|
||||
export interface RoleQueryParams {
|
||||
pageNum?: number
|
||||
pageSize?: number
|
||||
keyword?: string
|
||||
status?: number
|
||||
}
|
||||
|
||||
export interface RoleCreateParams {
|
||||
role_code: string
|
||||
role_name: string
|
||||
description?: string
|
||||
sort_order?: number
|
||||
}
|
||||
|
||||
/** 编辑：不含编码（编码是授权判定锚点，创建后不可改） */
|
||||
export interface RoleUpdateParams {
|
||||
role_name: string
|
||||
description?: string
|
||||
sort_order?: number
|
||||
}
|
||||
|
||||
/** 分页查询角色（含停用角色） */
|
||||
export function listRoles(params: RoleQueryParams): Promise<PageData<RoleItem>> {
|
||||
return request({ url: '/v1/system/roles', method: 'get', params })
|
||||
}
|
||||
|
||||
/** 新增角色 */
|
||||
export function createRole(data: RoleCreateParams): Promise<RoleItem> {
|
||||
return request({ url: '/v1/system/roles', method: 'post', data })
|
||||
}
|
||||
|
||||
/** 编辑角色 */
|
||||
export function updateRole(roleId: number, data: RoleUpdateParams): Promise<RoleItem> {
|
||||
return request({ url: `/v1/system/roles/${roleId}`, method: 'put', data })
|
||||
}
|
||||
|
||||
/** 启用 / 禁用角色（内置 admin 不可停用） */
|
||||
export function setRoleStatus(roleId: number, status: number): Promise<RoleItem> {
|
||||
return request({ url: `/v1/system/roles/${roleId}/status`, method: 'put', data: { status } })
|
||||
}
|
||||
|
||||
/** 删除角色（内置 admin 与仍有绑定用户的角色受后端保护） */
|
||||
export function deleteRole(roleId: number): Promise<null> {
|
||||
return request({ url: `/v1/system/roles/${roleId}`, method: 'delete' })
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
/** 请求/响应公共类型。 */
|
||||
|
||||
/**
|
||||
* 分页响应 —— 与后端 `PageResult` 的序列化字段一致。
|
||||
*
|
||||
* 分页字段是驼峰（list/total/pageNum/pageSize，规范约定），而业务筛选
|
||||
* 参数是蛇形（username、real_name…，与后端 Query 模型一致），
|
||||
* 这是既有契约，不要"顺手统一"。
|
||||
*/
|
||||
export interface PageData<T> {
|
||||
list: T[]
|
||||
total: number
|
||||
pageNum: number
|
||||
pageSize: number
|
||||
}
|
||||
|
||||
/** 已启用角色的下拉选项 */
|
||||
export interface RoleOption {
|
||||
id: number
|
||||
role_code: string
|
||||
role_name: string
|
||||
description: string | null
|
||||
sort_order: number
|
||||
status: number
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import { request } from './request'
|
||||
import type { PageData, RoleOption } from './types'
|
||||
|
||||
/** 用户列表项（对应后端 `UserOut`）。 */
|
||||
export interface UserItem {
|
||||
id: number
|
||||
username: string
|
||||
real_name: string | null
|
||||
phone: string | null
|
||||
email: string | null
|
||||
/** 1启用 0禁用 */
|
||||
status: number
|
||||
/** 角色编码列表 */
|
||||
roles: string[]
|
||||
last_login_time: string | null
|
||||
remark: string | null
|
||||
create_time: string | null
|
||||
}
|
||||
|
||||
/** 列表查询：分页参数为驼峰，业务筛选为蛇形（与后端契约一致，勿"统一"） */
|
||||
export interface UserQueryParams {
|
||||
pageNum?: number
|
||||
pageSize?: number
|
||||
username?: string
|
||||
real_name?: string
|
||||
status?: number
|
||||
role_code?: string
|
||||
}
|
||||
|
||||
export interface UserCreateParams {
|
||||
username: string
|
||||
password: string
|
||||
real_name?: string
|
||||
phone?: string
|
||||
email?: string
|
||||
roles: string[]
|
||||
remark?: string
|
||||
}
|
||||
|
||||
/** 编辑：不含用户名与密码（后者走专门的重置接口） */
|
||||
export interface UserUpdateParams {
|
||||
real_name?: string
|
||||
phone?: string
|
||||
email?: string
|
||||
roles?: string[]
|
||||
remark?: string
|
||||
}
|
||||
|
||||
/** 分页查询用户 */
|
||||
export function listUsers(params: UserQueryParams): Promise<PageData<UserItem>> {
|
||||
return request({ url: '/v1/system/users', method: 'get', params })
|
||||
}
|
||||
|
||||
/** 新增用户 */
|
||||
export function createUser(data: UserCreateParams): Promise<UserItem> {
|
||||
return request({ url: '/v1/system/users', method: 'post', data })
|
||||
}
|
||||
|
||||
/** 编辑用户 */
|
||||
export function updateUser(userId: number, data: UserUpdateParams): Promise<UserItem> {
|
||||
return request({ url: `/v1/system/users/${userId}`, method: 'put', data })
|
||||
}
|
||||
|
||||
/** 删除用户（物理删除，建议优先用禁用） */
|
||||
export function deleteUser(userId: number): Promise<null> {
|
||||
return request({ url: `/v1/system/users/${userId}`, method: 'delete' })
|
||||
}
|
||||
|
||||
/** 重置密码（该用户已签发的令牌立即失效，需重新登录） */
|
||||
export function resetPassword(userId: number, newPassword: string): Promise<null> {
|
||||
return request({
|
||||
url: `/v1/system/users/${userId}/password`,
|
||||
method: 'put',
|
||||
data: { new_password: newPassword },
|
||||
})
|
||||
}
|
||||
|
||||
/** 启用 / 禁用 */
|
||||
export function setUserStatus(userId: number, status: number): Promise<UserItem> {
|
||||
return request({ url: `/v1/system/users/${userId}/status`, method: 'put', data: { status } })
|
||||
}
|
||||
|
||||
/** 角色下拉选项（仅启用角色） */
|
||||
export function listRoleOptions(): Promise<RoleOption[]> {
|
||||
return request({ url: '/v1/system/users/meta/roles', method: 'get' })
|
||||
}
|
||||
@@ -1,4 +1,34 @@
|
||||
/* 全局样式：重置 + 基础版式 */
|
||||
/* 全局样式：重置 + 品牌 token + 基础版式 */
|
||||
|
||||
:root {
|
||||
/*
|
||||
* 品牌色：与登录页视觉体系同一套（原为登录页 scoped 局部变量，布局框架
|
||||
* 与系统管理页面共用后提升为全局 token）。
|
||||
* 金色分两档：亮金只用于深色底、深金只用于浅色底，保证两处对比度都达标。
|
||||
*/
|
||||
--ys-ink-900: #061a22;
|
||||
--ys-ink-800: #0a2833;
|
||||
--ys-ink-700: #0f3646;
|
||||
--ys-ink-600: #1a4f63;
|
||||
--ys-gold-bright: #c9a227;
|
||||
--ys-gold-deep: #8f6520;
|
||||
--ys-paper: #fafaf7;
|
||||
--ys-text: #16262d;
|
||||
--ys-muted: #6b7b84;
|
||||
|
||||
/*
|
||||
* Element Plus 主色 = 赭金（浅色底配白字约 6.2:1）。
|
||||
* 色阶为按 Element Plus 公式「主色与白色混合」预先算好的静态值 ——
|
||||
* 不用 color-mix()，避免依赖较新的浏览器特性。
|
||||
*/
|
||||
--el-color-primary: #8f6520;
|
||||
--el-color-primary-light-3: #b19363;
|
||||
--el-color-primary-light-5: #c7b290;
|
||||
--el-color-primary-light-7: #ddd1bc;
|
||||
--el-color-primary-light-8: #e9e0d2;
|
||||
--el-color-primary-light-9: #f4f0e9;
|
||||
--el-color-primary-dark-2: #72511a;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
@@ -20,3 +50,12 @@ body {
|
||||
background-color: #f5f7fa;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* 系统管理列表页共用的版式（原在三个页面 scoped 中各自重复） */
|
||||
.filter-form {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
import { useAppMenu } from '@/composables/useAppMenu'
|
||||
|
||||
/** 侧边导航菜单：桌面端 aside 与移动端抽屉复用同一份（路由派生）数据。 */
|
||||
const route = useRoute()
|
||||
const { topLevelMenus, groupedMenus } = useAppMenu()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-menu class="app-menu" :default-active="route.path" router>
|
||||
<el-menu-item v-for="item in topLevelMenus" :key="item.path" :index="item.path">
|
||||
{{ item.title }}
|
||||
</el-menu-item>
|
||||
<el-sub-menu v-for="group in groupedMenus" :key="group.name" :index="group.name">
|
||||
<template #title>{{ group.name }}</template>
|
||||
<el-menu-item v-for="item in group.items" :key="item.path" :index="item.path">
|
||||
{{ item.title }}
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/*
|
||||
* 深色底上的菜单：覆盖 Element Plus 的主题变量而非直接写颜色 ——
|
||||
* 后者与组件库规则同权重，受样式注入顺序影响而不稳定。
|
||||
* 激活色用亮金（深色底专用档，见 index.css 的金色两档约定）。
|
||||
*/
|
||||
.app-menu {
|
||||
--el-menu-bg-color: transparent;
|
||||
--el-menu-text-color: rgb(250 250 247 / 78%);
|
||||
--el-menu-active-color: var(--ys-gold-bright);
|
||||
--el-menu-hover-bg-color: rgb(255 255 255 / 6%);
|
||||
--el-menu-item-height: 44px;
|
||||
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.app-menu :deep(.el-menu-item.is-active) {
|
||||
background-color: rgb(201 162 39 / 12%);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.app-menu :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
|
||||
color: var(--ys-gold-bright);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,219 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
import AppMenu from '@/components/layout/AppMenu.vue'
|
||||
import { useUserStore } from '@/store/user'
|
||||
|
||||
/** 基础布局：左侧品牌导航（窄屏收为抽屉）+ 顶栏（面包屑/用户/退出）+ 内容区。 */
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const drawerVisible = ref(false)
|
||||
|
||||
/** 面包屑：首页 + 分组（如有）+ 当前页标题（首页自身不重复） */
|
||||
const breadcrumbs = computed<string[]>(() => {
|
||||
const items: string[] = []
|
||||
if (route.meta.group) items.push(route.meta.group)
|
||||
if (route.meta.title && route.path !== '/dashboard') items.push(route.meta.title)
|
||||
return items
|
||||
})
|
||||
|
||||
// 移动端在抽屉里点完菜单即收起（路由变化意味着导航已发生）
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
drawerVisible.value = false
|
||||
},
|
||||
)
|
||||
|
||||
async function handleLogout(): Promise<void> {
|
||||
await userStore.logout()
|
||||
ElMessage.success('已退出登录')
|
||||
await router.replace('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-container class="app-layout">
|
||||
<el-aside class="app-aside" width="220px">
|
||||
<div class="app-brand">
|
||||
<span class="app-brand__name">衍水集团</span>
|
||||
<span class="app-brand__sub">营销人员工资管理系统</span>
|
||||
</div>
|
||||
<AppMenu class="app-aside__menu" />
|
||||
</el-aside>
|
||||
|
||||
<el-container class="app-body">
|
||||
<el-header class="app-header">
|
||||
<div class="app-header__left">
|
||||
<button
|
||||
type="button"
|
||||
class="app-header__menu-toggle"
|
||||
aria-label="打开导航菜单"
|
||||
@click="drawerVisible = true"
|
||||
>
|
||||
<svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true">
|
||||
<path
|
||||
d="M3 5h14M3 10h14M3 15h14"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.6"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-for="item in breadcrumbs" :key="item">
|
||||
{{ item }}
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div class="app-header__user">
|
||||
<el-tag v-for="role in userStore.roles" :key="role" size="small" type="info">
|
||||
{{ role }}
|
||||
</el-tag>
|
||||
<span class="app-header__username">{{ userStore.displayName }}</span>
|
||||
<el-button link type="primary" @click="handleLogout">退出登录</el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
|
||||
<el-main class="app-main">
|
||||
<router-view />
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
<el-drawer
|
||||
v-model="drawerVisible"
|
||||
class="app-drawer"
|
||||
direction="ltr"
|
||||
size="240px"
|
||||
:with-header="false"
|
||||
>
|
||||
<div class="app-brand">
|
||||
<span class="app-brand__name">衍水集团</span>
|
||||
<span class="app-brand__sub">营销人员工资管理系统</span>
|
||||
</div>
|
||||
<AppMenu />
|
||||
</el-drawer>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-layout {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, var(--ys-ink-900) 0%, var(--ys-ink-700) 100%);
|
||||
}
|
||||
|
||||
.app-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 18px 20px 14px;
|
||||
}
|
||||
|
||||
.app-brand__name {
|
||||
font-family: 'Songti SC', SimSun, serif;
|
||||
font-size: 18px;
|
||||
letter-spacing: 2px;
|
||||
color: var(--ys-paper);
|
||||
}
|
||||
|
||||
.app-brand__sub {
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
color: rgb(250 250 247 / 55%);
|
||||
}
|
||||
|
||||
.app-aside__menu {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 56px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.app-header__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 窄屏才出现的汉堡按钮；不引入图标库，用内联 SVG */
|
||||
.app-header__menu-toggle {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
color: var(--ys-text);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.app-header__menu-toggle:hover {
|
||||
background-color: #f2f3f5;
|
||||
}
|
||||
|
||||
.app-header__menu-toggle:focus-visible {
|
||||
outline: 2px solid var(--ys-gold-deep);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.app-header__user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.app-header__username {
|
||||
font-size: 14px;
|
||||
color: var(--ys-text);
|
||||
}
|
||||
|
||||
.app-main {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-aside {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-header__menu-toggle {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.app-header__menu-toggle {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 抽屉内容铺满深色底（非 scoped：目标元素由 el-drawer 渲染在组件根之外） */
|
||||
.app-drawer .el-drawer__body {
|
||||
padding: 0;
|
||||
background: linear-gradient(180deg, var(--ys-ink-900) 0%, var(--ys-ink-700) 100%);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 分页条：统一四个列表页的布局与页码尺寸选项。
|
||||
* 与 `usePagedList` 的分页字段（pageNum/pageSize/total）配套使用。
|
||||
*/
|
||||
defineProps<{
|
||||
total: number
|
||||
pageNum: number
|
||||
pageSize: number
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e: 'page-change', page: number): void
|
||||
(e: 'size-change', size: number): void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-pagination
|
||||
class="app-pager"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
:current-page="pageNum"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
@current-change="$emit('page-change', $event)"
|
||||
@size-change="$emit('size-change', $event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-pager {
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 状态标签：0/1 语义的通用展示。
|
||||
*
|
||||
* 用户状态、角色状态、操作结果、登录结果四处共用，故提取；
|
||||
* 语义文字由调用方通过 props 定制（如同一组件展示「启用/禁用」与「成功/失败」）。
|
||||
*/
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value: number
|
||||
activeText?: string
|
||||
inactiveText?: string
|
||||
activeType?: 'success' | 'warning' | 'danger' | 'info' | 'primary'
|
||||
inactiveType?: 'success' | 'warning' | 'danger' | 'info' | 'primary'
|
||||
}>(),
|
||||
{
|
||||
activeText: '启用',
|
||||
inactiveText: '禁用',
|
||||
activeType: 'success',
|
||||
inactiveType: 'info',
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-tag :type="value === 1 ? activeType : inactiveType" size="small" disable-transitions>
|
||||
{{ value === 1 ? activeText : inactiveText }}
|
||||
</el-tag>
|
||||
</template>
|
||||
@@ -0,0 +1,65 @@
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { ROLE_ADMIN } from '@/utils/constants'
|
||||
|
||||
/** 菜单节点：从路由表派生，避免菜单标题与页面标题两处维护漂移。 */
|
||||
export interface MenuNode {
|
||||
path: string
|
||||
title: string
|
||||
order: number
|
||||
group?: string
|
||||
}
|
||||
|
||||
export interface MenuGroup {
|
||||
name: string
|
||||
items: MenuNode[]
|
||||
}
|
||||
|
||||
/**
|
||||
* 侧边菜单数据。
|
||||
*
|
||||
* 规则：
|
||||
* - 取路由表中带 `meta.title` 且未被 `meta.menu === false` 排除的记录
|
||||
* - `meta.requiresAdmin` 的项仅管理员可见（与路由守卫双保险，隐藏入口在前）
|
||||
* - `meta.group` 相同的项聚合为一个子菜单；无 group 的为顶层菜单项
|
||||
* - 按 `meta.order` 排序
|
||||
*/
|
||||
export function useAppMenu() {
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const isAdmin = computed(() => userStore.roles.includes(ROLE_ADMIN))
|
||||
|
||||
const menuNodes = computed<MenuNode[]>(() =>
|
||||
router
|
||||
.getRoutes()
|
||||
.filter((record) => Boolean(record.meta.title) && record.meta.menu !== false)
|
||||
.filter((record) => !record.meta.requiresAdmin || isAdmin.value)
|
||||
.map((record) => ({
|
||||
path: record.path,
|
||||
title: record.meta.title ?? '',
|
||||
order: record.meta.order ?? 99,
|
||||
group: record.meta.group,
|
||||
}))
|
||||
.sort((a, b) => a.order - b.order),
|
||||
)
|
||||
|
||||
/** 无分组的顶层菜单项 */
|
||||
const topLevelMenus = computed(() => menuNodes.value.filter((node) => !node.group))
|
||||
|
||||
/** 分组菜单（按 group 名聚合，组内保持 order 顺序） */
|
||||
const groupedMenus = computed<MenuGroup[]>(() => {
|
||||
const groups = new Map<string, MenuNode[]>()
|
||||
for (const node of menuNodes.value) {
|
||||
if (!node.group) continue
|
||||
const items = groups.get(node.group) ?? []
|
||||
items.push(node)
|
||||
groups.set(node.group, items)
|
||||
}
|
||||
return [...groups.entries()].map(([name, items]) => ({ name, items }))
|
||||
})
|
||||
|
||||
return { topLevelMenus, groupedMenus }
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
import { handledError } from '@/utils/error'
|
||||
|
||||
/**
|
||||
* 「确认框 → 执行 → 成功提示 → 收尾刷新」动作流。
|
||||
*
|
||||
* 用户/角色两页的启用禁用、删除共四处结构逐行相同，收敛到这里：
|
||||
* 取消确认静默返回 false；接口失败由请求拦截器统一提示，此处仅兜底
|
||||
* 阻止 Promise 继续传播（handledError 显式标注，不写空 catch）。
|
||||
*/
|
||||
export function useConfirmAction() {
|
||||
/**
|
||||
* 弹出确认框并执行；返回是否真正执行成功（用户取消或执行失败均为 false）。
|
||||
*/
|
||||
async function confirmAndRun(options: {
|
||||
/** 确认框正文 */
|
||||
confirmText: string
|
||||
/** 确认框标题 */
|
||||
title?: string
|
||||
/** 确认按钮文案 */
|
||||
confirmButtonText?: string
|
||||
/** 执行成功后的全局提示 */
|
||||
successText: string
|
||||
/** 真正的业务动作 */
|
||||
run: () => Promise<unknown>
|
||||
/** 成功后的收尾（如刷新列表） */
|
||||
after?: () => Promise<void> | void
|
||||
}): Promise<boolean> {
|
||||
try {
|
||||
await ElMessageBox.confirm(options.confirmText, options.title ?? '操作确认', {
|
||||
type: 'warning',
|
||||
confirmButtonText: options.confirmButtonText ?? '确定',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
} catch {
|
||||
return false // 用户取消，静默返回
|
||||
}
|
||||
|
||||
try {
|
||||
await options.run()
|
||||
ElMessage.success(options.successText)
|
||||
await options.after?.()
|
||||
return true
|
||||
} catch (error) {
|
||||
handledError(error) // 失败提示由请求拦截器统一完成
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return { confirmAndRun }
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import { ref, type Ref } from 'vue'
|
||||
|
||||
import type { PageData } from '@/api/types'
|
||||
import { handledError } from '@/utils/error'
|
||||
|
||||
/**
|
||||
* 分页列表状态管理。
|
||||
*
|
||||
* 四个列表页（用户/角色/操作日志/登录日志）共用同一套分页交互，要点：
|
||||
*
|
||||
* - 「删除当前页最后一条后页码回退」是高频踩坑点：不回退就会停在空页
|
||||
* - **请求序号防竞态**：快速翻页/改条件时并发请求乱序返回，只有最新
|
||||
* 请求的响应允许写入状态，否则旧数据会覆盖新数据、与分页器错位
|
||||
* - 请求失败不外抛（提示由拦截器统一完成），loading 仅由最新请求复位
|
||||
*/
|
||||
export function usePagedList<T, F extends object>(
|
||||
fetcher: (params: F & { pageNum: number; pageSize: number }) => Promise<PageData<T>>,
|
||||
getFilters: () => F,
|
||||
) {
|
||||
const records = ref([]) as Ref<T[]>
|
||||
const total = ref(0)
|
||||
const pageNum = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const loading = ref(false)
|
||||
|
||||
/** 自增请求序号：仅最新请求的响应可写入状态 */
|
||||
let requestSeq = 0
|
||||
|
||||
/** 按当前页码与筛选条件加载 */
|
||||
async function load(): Promise<void> {
|
||||
const seq = ++requestSeq
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await fetcher({
|
||||
...getFilters(),
|
||||
pageNum: pageNum.value,
|
||||
pageSize: pageSize.value,
|
||||
})
|
||||
if (seq !== requestSeq) return // 已有更新的请求发出，丢弃过期响应
|
||||
records.value = data.list
|
||||
total.value = data.total
|
||||
} catch (error) {
|
||||
handledError(error) // 失败提示由请求拦截器统一完成
|
||||
} finally {
|
||||
if (seq === requestSeq) loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 条件查询：回到第一页再加载（停留旧页码会查到空页） */
|
||||
function search(): void {
|
||||
pageNum.value = 1
|
||||
void load()
|
||||
}
|
||||
|
||||
function onPageChange(page: number): void {
|
||||
pageNum.value = page
|
||||
void load()
|
||||
}
|
||||
|
||||
function onSizeChange(size: number): void {
|
||||
pageSize.value = size
|
||||
pageNum.value = 1
|
||||
void load()
|
||||
}
|
||||
|
||||
/** 删除后刷新：当前页已被删空且不在第一页时，先回退页码再加载 */
|
||||
async function reloadAfterDelete(removedCount = 1): Promise<void> {
|
||||
if (records.value.length - removedCount <= 0 && pageNum.value > 1) {
|
||||
pageNum.value -= 1
|
||||
}
|
||||
await load()
|
||||
}
|
||||
|
||||
return {
|
||||
records,
|
||||
total,
|
||||
pageNum,
|
||||
pageSize,
|
||||
loading,
|
||||
load,
|
||||
search,
|
||||
onPageChange,
|
||||
onSizeChange,
|
||||
reloadAfterDelete,
|
||||
}
|
||||
}
|
||||
@@ -1,20 +1,64 @@
|
||||
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { ROLE_ADMIN } from '@/utils/constants'
|
||||
|
||||
declare module 'vue-router' {
|
||||
interface RouteMeta {
|
||||
/** 免登录页面（登录页） */
|
||||
public?: boolean
|
||||
/** 页面标题：浏览器标题 / 面包屑 / 菜单共用，新页面必须写 */
|
||||
title?: string
|
||||
/** 仅管理员可访问 —— 菜单隐藏 + 守卫兜底（直接输 URL 会被弹回首页） */
|
||||
requiresAdmin?: boolean
|
||||
/** 是否出现在侧边菜单（默认 true）；false 用于排除登录页等 */
|
||||
menu?: boolean
|
||||
/** 菜单分组名（同名聚合为一个子菜单）；不设则为顶层菜单项 */
|
||||
group?: string
|
||||
/** 菜单排序，越小越靠前 */
|
||||
order?: number
|
||||
}
|
||||
}
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{ path: '/', redirect: '/dashboard' },
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('@/views/login/index.vue'),
|
||||
meta: { public: true, title: '登录' },
|
||||
meta: { public: true, title: '登录', menu: false },
|
||||
},
|
||||
{
|
||||
path: '/dashboard',
|
||||
name: 'dashboard',
|
||||
component: () => import('@/views/dashboard/index.vue'),
|
||||
meta: { title: '首页' },
|
||||
// 应用主框架：菜单、顶栏、面包屑由布局提供，业务页面作为子路由渲染
|
||||
path: '/',
|
||||
component: () => import('@/components/layout/BasicLayout.vue'),
|
||||
redirect: '/dashboard',
|
||||
children: [
|
||||
{
|
||||
path: '/dashboard',
|
||||
name: 'dashboard',
|
||||
component: () => import('@/views/dashboard/index.vue'),
|
||||
meta: { title: '首页', order: 1 },
|
||||
},
|
||||
{
|
||||
path: '/system/users',
|
||||
name: 'system-users',
|
||||
component: () => import('@/views/system/users/index.vue'),
|
||||
meta: { title: '用户管理', group: '系统管理', requiresAdmin: true, order: 2 },
|
||||
},
|
||||
{
|
||||
path: '/system/roles',
|
||||
name: 'system-roles',
|
||||
component: () => import('@/views/system/roles/index.vue'),
|
||||
meta: { title: '角色管理', group: '系统管理', requiresAdmin: true, order: 3 },
|
||||
},
|
||||
{
|
||||
path: '/system/logs',
|
||||
name: 'system-logs',
|
||||
component: () => import('@/views/system/logs/index.vue'),
|
||||
meta: { title: '日志查询', group: '系统管理', requiresAdmin: true, order: 4 },
|
||||
},
|
||||
],
|
||||
},
|
||||
// 未匹配路由回首页；若未登录会被守卫拦到登录页
|
||||
{ path: '/:pathMatch(.*)*', redirect: '/dashboard' },
|
||||
@@ -28,11 +72,13 @@ const router = createRouter({
|
||||
/**
|
||||
* 全局前置守卫。
|
||||
*
|
||||
* 三层判断：
|
||||
* 四层判断：
|
||||
* 1. `meta.public` 标记的页面（登录页）直接放行
|
||||
* 2. 无令牌 → 跳登录页，并把原目标记在 query 里供登录后回跳
|
||||
* 3. 有令牌但内存中无用户信息（说明是刷新页面）→ 调 /me 恢复会话；
|
||||
* 失败则视为令牌已失效，清状态并跳登录页
|
||||
* 4. `meta.requiresAdmin` 的页面要求管理员角色 —— 此时用户信息已就绪，
|
||||
* 这是"隐藏菜单"之外的第二道防线（防手输 URL）
|
||||
*/
|
||||
router.beforeEach(async (to) => {
|
||||
const userStore = useUserStore()
|
||||
@@ -54,6 +100,11 @@ router.beforeEach(async (to) => {
|
||||
}
|
||||
}
|
||||
|
||||
if (to.meta.requiresAdmin && !userStore.roles.includes(ROLE_ADMIN)) {
|
||||
ElMessage.error('需要管理员权限')
|
||||
return { path: '/dashboard' }
|
||||
}
|
||||
|
||||
return true
|
||||
})
|
||||
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
/** 跨页面共享常量。 */
|
||||
|
||||
/** 系统管理员：可见「系统管理」菜单，全部管理接口可用（与后端 core/constants.py 一致） */
|
||||
export const ROLE_ADMIN = 'admin'
|
||||
|
||||
/**
|
||||
* 操作日志的模块 / 操作词表 —— 与后端 `core/constants.py` 的
|
||||
* `MODULE_*` / `ACTION_*` 保持一致；新增模块时两处同步（后端是权威来源）。
|
||||
*/
|
||||
export const MODULE_OPTIONS = ['用户管理', '角色管理'] as const
|
||||
export const ACTION_OPTIONS = ['新增', '修改', '删除', '重置密码', '启用', '禁用'] as const
|
||||
|
||||
/** 启用/禁用筛选选项（文案与 StatusTag 的展示一致） */
|
||||
export const STATUS_OPTIONS = [
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '禁用', value: 0 },
|
||||
] as const
|
||||
|
||||
/** 成功/失败筛选选项 */
|
||||
export const RESULT_OPTIONS = [
|
||||
{ label: '成功', value: 1 },
|
||||
{ label: '失败', value: 0 },
|
||||
] as const
|
||||
@@ -0,0 +1,13 @@
|
||||
/** 异常处理工具。 */
|
||||
|
||||
/**
|
||||
* 显式声明「异常已按约定处理」。
|
||||
*
|
||||
* 本项目请求失败的提示统一由 axios 拦截器完成，页面 catch 块只需阻止
|
||||
* Promise 继续传播；但**空 catch 会掩盖非预期异常**（如本地 TypeError），
|
||||
* 也违反「禁空 catch」规范，故以本函数显式标注意图并留痕。
|
||||
* 用 debug 级别：既不污染 e2e 收集的 error 级控制台信息，也便于排查时开启。
|
||||
*/
|
||||
export function handledError(error: unknown): void {
|
||||
console.debug('[handled]', error)
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
/** 显示格式化工具。 */
|
||||
|
||||
/**
|
||||
* 时间展示：把后端的时间串规范为 `YYYY-MM-DD HH:mm:ss`。
|
||||
*
|
||||
* Pydantic 序列化 datetime 为 ISO 8601（含 `T`），直接展示不友好；
|
||||
* 值缺失（空串/null/undefined）时返回占位符而非空白。
|
||||
*/
|
||||
export function formatDateTime(value?: string | null, placeholder = '—'): string {
|
||||
if (!value) return placeholder
|
||||
return value.replace('T', ' ').slice(0, 19)
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/** 表单校验工具。 */
|
||||
|
||||
/**
|
||||
* 密码校验：按 **UTF-8 字节数** 而非字符数。
|
||||
*
|
||||
* 后端 bcrypt 对超过 72 字节的密码直接拒绝；中文一个字符占 3 字节，
|
||||
* 24 个汉字即到顶 —— 按字符数校验（如 maxlength=20）根本拦不住，
|
||||
* 会出现"前端放行、后端 400"的错位体验。与后端 `PASSWORD_*_BYTES` 对齐。
|
||||
*/
|
||||
export const PASSWORD_MIN_BYTES = 8
|
||||
export const PASSWORD_MAX_BYTES = 72
|
||||
|
||||
const BYTE_HINT = '（中文一个字符约 3 字节）'
|
||||
|
||||
/** 计算 UTF-8 字节数 */
|
||||
export function passwordByteLength(value: string): number {
|
||||
return new TextEncoder().encode(value).length
|
||||
}
|
||||
|
||||
/** Element Plus 表单校验器（用于 el-form 的 rules.validator） */
|
||||
export function passwordRule(
|
||||
_rule: unknown,
|
||||
value: string,
|
||||
callback: (error?: Error) => void,
|
||||
): void {
|
||||
if (!value) {
|
||||
callback(new Error('请输入密码'))
|
||||
return
|
||||
}
|
||||
const length = passwordByteLength(value)
|
||||
if (length < PASSWORD_MIN_BYTES) {
|
||||
callback(new Error(`密码不足 ${PASSWORD_MIN_BYTES} 字节${BYTE_HINT}`))
|
||||
} else if (length > PASSWORD_MAX_BYTES) {
|
||||
callback(new Error(`密码超过 ${PASSWORD_MAX_BYTES} 字节上限${BYTE_HINT}`))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
@@ -1,98 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
|
||||
const router = useRouter()
|
||||
/**
|
||||
* 首页：登录链路验证页。
|
||||
*
|
||||
* 顶部栏（用户信息、退出登录）已由 BasicLayout 提供，本页只保留内容区；
|
||||
* 用户名等字段的展示是端到端脚本的断言对象，调整时需同步 e2e。
|
||||
*/
|
||||
const userStore = useUserStore()
|
||||
|
||||
async function handleLogout(): Promise<void> {
|
||||
await userStore.logout()
|
||||
ElMessage.success('已退出登录')
|
||||
await router.replace('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-container class="layout">
|
||||
<el-header class="layout-header">
|
||||
<span class="layout-title">衍水集团营销人员工资管理系统</span>
|
||||
<div class="layout-user">
|
||||
<el-tag v-for="role in userStore.roles" :key="role" size="small" type="info">
|
||||
{{ role }}
|
||||
</el-tag>
|
||||
<span class="layout-username">{{ userStore.displayName }}</span>
|
||||
<el-button link type="primary" @click="handleLogout">退出登录</el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<span>登录状态验证通过</span>
|
||||
</template>
|
||||
|
||||
<el-main class="layout-main">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<span>登录状态验证通过</span>
|
||||
</template>
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="用户 ID">{{ userStore.userInfo?.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="用户名">{{ userStore.userInfo?.username }}</el-descriptions-item>
|
||||
<el-descriptions-item label="姓名">
|
||||
{{ userStore.userInfo?.real_name || '—' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="角色">
|
||||
{{ userStore.roles.join('、') || '—' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="上次登录">
|
||||
{{ formatDateTime(userStore.userInfo?.last_login_time) }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="用户 ID">{{ userStore.userInfo?.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="用户名">{{ userStore.userInfo?.username }}</el-descriptions-item>
|
||||
<el-descriptions-item label="姓名">
|
||||
{{ userStore.userInfo?.real_name || '—' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="角色">
|
||||
{{ userStore.roles.join('、') || '—' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="上次登录">
|
||||
{{ userStore.userInfo?.last_login_time || '—' }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-alert
|
||||
class="layout-hint"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
title="这是登录链路的验证页"
|
||||
description="刷新页面可验证会话恢复（守卫会调用 /me）；点击右上角退出登录可验证令牌即时失效。业务模块页面将在后续阶段接入。"
|
||||
/>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<el-alert
|
||||
class="dashboard-hint"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
title="这是登录链路的验证页"
|
||||
description="刷新页面可验证会话恢复（守卫会调用 /me）；「系统管理」菜单已接入用户管理、角色管理与日志查询。"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.layout {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layout-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
background-color: #1f4e79;
|
||||
}
|
||||
|
||||
.layout-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.layout-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.layout-username {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.layout-main {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.layout-hint {
|
||||
.dashboard-hint {
|
||||
margin-top: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -182,19 +182,19 @@ onMounted(refreshCaptcha)
|
||||
|
||||
<style scoped>
|
||||
/*
|
||||
* 配色说明：金色分两档 —— 亮金只用于深色底、深金只用于浅色底，
|
||||
* 保证两处对比度都达标（深金配白字约 6.2:1）。
|
||||
* 配色：品牌 token 已提升为全局（见 assets/styles/index.css，布局框架与
|
||||
* 系统管理页面共用），此处只做局部别名，用法与取值均与原先一致。
|
||||
*/
|
||||
.login {
|
||||
--ink-900: #061a22;
|
||||
--ink-800: #0a2833;
|
||||
--ink-700: #0f3646;
|
||||
--ink-600: #1a4f63;
|
||||
--gold-bright: #c9a227;
|
||||
--gold-deep: #8f6520;
|
||||
--paper: #fafaf7;
|
||||
--text: #16262d;
|
||||
--muted: #6b7b84;
|
||||
--ink-900: var(--ys-ink-900);
|
||||
--ink-800: var(--ys-ink-800);
|
||||
--ink-700: var(--ys-ink-700);
|
||||
--ink-600: var(--ys-ink-600);
|
||||
--gold-bright: var(--ys-gold-bright);
|
||||
--gold-deep: var(--ys-gold-deep);
|
||||
--paper: var(--ys-paper);
|
||||
--text: var(--ys-text);
|
||||
--muted: var(--ys-muted);
|
||||
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
|
||||
@@ -0,0 +1,393 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, watch } from 'vue'
|
||||
|
||||
import * as logApi from '@/api/logs'
|
||||
import type {
|
||||
LoginLogItem,
|
||||
LoginLogQueryParams,
|
||||
OperationLogDetail,
|
||||
OperationLogItem,
|
||||
OperationLogQueryParams,
|
||||
} from '@/api/logs'
|
||||
import StatusTag from '@/components/table/StatusTag.vue'
|
||||
import AppPagination from '@/components/table/AppPagination.vue'
|
||||
import { usePagedList } from '@/composables/usePagedList'
|
||||
import { ACTION_OPTIONS, MODULE_OPTIONS, RESULT_OPTIONS } from '@/utils/constants'
|
||||
import { handledError } from '@/utils/error'
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
|
||||
/**
|
||||
* 日志查询（需求 2.5.1「支持日志查询」）。
|
||||
*
|
||||
* 操作日志与登录日志分开两个 tab（后端也是两个端点：字段与筛选项不同）。
|
||||
*
|
||||
* 时间筛选的两个关键点：
|
||||
* - 必须给 el-date-picker 指定 `value-format` —— 否则绑定值是 Date 对象，
|
||||
* axios 会序列化为 UTC ISO 串，随本地时区产生 8 小时偏移
|
||||
* - 必须配 `default-time` —— datetimerange 只选日期时时刻默认 00:00:00，
|
||||
* 跨天查询会漏掉结束日整天（起点补 00:00:00、终点补 23:59:59）
|
||||
*
|
||||
* 操作日志列表**不含请求参数**（大字段，随列表返回会让翻页负担随日志表
|
||||
* 增长）；展开行时按 id 调详情端点懒加载并缓存。
|
||||
*/
|
||||
|
||||
/** datetimerange 的起止时刻补全（与 value-format 配合） */
|
||||
const RANGE_DEFAULT_TIME: [Date, Date] = [
|
||||
new Date(2000, 0, 1, 0, 0, 0),
|
||||
new Date(2000, 0, 1, 23, 59, 59),
|
||||
]
|
||||
|
||||
const activeTab = ref('operation')
|
||||
|
||||
// ==================== 操作日志 ====================
|
||||
|
||||
const opFilters = reactive({
|
||||
username: '',
|
||||
module: undefined as string | undefined,
|
||||
action: undefined as string | undefined,
|
||||
success: undefined as number | undefined,
|
||||
})
|
||||
const opTimeRange = ref<[string, string] | null>(null)
|
||||
|
||||
const {
|
||||
records: opRecords,
|
||||
total: opTotal,
|
||||
pageNum: opPageNum,
|
||||
pageSize: opPageSize,
|
||||
loading: opLoading,
|
||||
load: loadOperationLogs,
|
||||
search: searchOperationLogs,
|
||||
onPageChange: onOpPageChange,
|
||||
onSizeChange: onOpSizeChange,
|
||||
} = usePagedList<OperationLogItem, OperationLogQueryParams>(logApi.listOperationLogs, () => ({
|
||||
username: opFilters.username,
|
||||
module: opFilters.module,
|
||||
action: opFilters.action,
|
||||
success: opFilters.success,
|
||||
start_time: opTimeRange.value?.[0],
|
||||
end_time: opTimeRange.value?.[1],
|
||||
}))
|
||||
|
||||
function resetOpFilters(): void {
|
||||
opFilters.username = ''
|
||||
opFilters.module = undefined
|
||||
opFilters.action = undefined
|
||||
opFilters.success = undefined
|
||||
opTimeRange.value = null
|
||||
searchOperationLogs()
|
||||
}
|
||||
|
||||
/** 详情缓存与加载中集合（列表无 request_data，展开时按需拉取） */
|
||||
const detailMap = reactive(new Map<number, OperationLogDetail>())
|
||||
const detailLoading = reactive(new Set<number>())
|
||||
|
||||
async function onExpandChange(row: OperationLogItem, expandedRows: OperationLogItem[]): Promise<void> {
|
||||
const isExpanded = expandedRows.some((item) => item.id === row.id)
|
||||
if (!isExpanded || detailMap.has(row.id)) return
|
||||
detailLoading.add(row.id)
|
||||
try {
|
||||
detailMap.set(row.id, await logApi.getOperationLog(row.id))
|
||||
} catch (error) {
|
||||
handledError(error) // 拦截器已提示，展开处显示占位
|
||||
} finally {
|
||||
detailLoading.delete(row.id)
|
||||
}
|
||||
}
|
||||
|
||||
/** 展开行展示的请求参数：加载中 / 暂无 / 格式化后的 JSON（已脱敏） */
|
||||
function detailText(logId: number): string {
|
||||
if (detailLoading.has(logId)) return '加载中…'
|
||||
const detail = detailMap.get(logId)
|
||||
if (!detail) return '—'
|
||||
return formatRequestData(detail.request_data)
|
||||
}
|
||||
|
||||
function formatRequestData(raw: string | null): string {
|
||||
if (!raw) return '—'
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(raw), null, 2)
|
||||
} catch {
|
||||
return raw
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 登录日志 ====================
|
||||
|
||||
const loginFilters = reactive({
|
||||
username: '',
|
||||
ip: '',
|
||||
success: undefined as number | undefined,
|
||||
})
|
||||
const loginTimeRange = ref<[string, string] | null>(null)
|
||||
|
||||
const {
|
||||
records: loginRecords,
|
||||
total: loginTotal,
|
||||
pageNum: loginPageNum,
|
||||
pageSize: loginPageSize,
|
||||
loading: loginLoading,
|
||||
load: loadLoginLogs,
|
||||
search: searchLoginLogs,
|
||||
onPageChange: onLoginPageChange,
|
||||
onSizeChange: onLoginSizeChange,
|
||||
} = usePagedList<LoginLogItem, LoginLogQueryParams>(logApi.listLoginLogs, () => ({
|
||||
username: loginFilters.username,
|
||||
ip: loginFilters.ip,
|
||||
success: loginFilters.success,
|
||||
start_time: loginTimeRange.value?.[0],
|
||||
end_time: loginTimeRange.value?.[1],
|
||||
}))
|
||||
|
||||
function resetLoginFilters(): void {
|
||||
loginFilters.username = ''
|
||||
loginFilters.ip = ''
|
||||
loginFilters.success = undefined
|
||||
loginTimeRange.value = null
|
||||
searchLoginLogs()
|
||||
}
|
||||
|
||||
// ==================== 初始化 ====================
|
||||
|
||||
onMounted(loadOperationLogs)
|
||||
|
||||
// 登录日志 tab 每次激活都刷新（首屏不打多余请求；此前"只加载一次"的
|
||||
// 标志在首次失败后不会重置，切回时停在空表且无从自查）
|
||||
watch(activeTab, (tab) => {
|
||||
if (tab === 'login') {
|
||||
void loadLoginLogs()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<el-tabs v-model="activeTab">
|
||||
<!-- 操作日志 -->
|
||||
<el-tab-pane label="操作日志" name="operation" lazy>
|
||||
<el-form class="filter-form" :inline="true" @submit.prevent>
|
||||
<el-form-item label="操作人">
|
||||
<el-input
|
||||
v-model="opFilters.username"
|
||||
placeholder="模糊匹配"
|
||||
clearable
|
||||
style="width: 140px"
|
||||
@keyup.enter="searchOperationLogs"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="模块">
|
||||
<el-select v-model="opFilters.module" placeholder="全部" clearable style="width: 130px">
|
||||
<el-option v-for="item in MODULE_OPTIONS" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作">
|
||||
<el-select v-model="opFilters.action" placeholder="全部" clearable style="width: 120px">
|
||||
<el-option v-for="item in ACTION_OPTIONS" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="结果">
|
||||
<el-select v-model="opFilters.success" placeholder="全部" clearable style="width: 110px">
|
||||
<el-option
|
||||
v-for="item in RESULT_OPTIONS"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间范围">
|
||||
<el-date-picker
|
||||
v-model="opTimeRange"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:default-time="RANGE_DEFAULT_TIME"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="searchOperationLogs">查询</el-button>
|
||||
<el-button @click="resetOpFilters">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table
|
||||
v-loading="opLoading"
|
||||
:data="opRecords"
|
||||
stripe
|
||||
@expand-change="onExpandChange"
|
||||
>
|
||||
<el-table-column type="expand">
|
||||
<template #default="{ row }">
|
||||
<div class="log-detail">
|
||||
<p>
|
||||
<span class="log-detail__label">请求：</span>
|
||||
{{ row.method || '—' }} {{ row.path || '—' }}
|
||||
</p>
|
||||
<p>
|
||||
<span class="log-detail__label">User-Agent：</span>
|
||||
{{ row.user_agent || '—' }}
|
||||
</p>
|
||||
<p class="log-detail__label">请求参数（已脱敏）：</p>
|
||||
<pre class="log-detail__data">{{ detailText(row.id) }}</pre>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="时间" min-width="165">
|
||||
<template #default="{ row }">{{ formatDateTime(row.create_time) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="username" label="操作人" min-width="110" />
|
||||
<el-table-column prop="module" label="模块" width="100" />
|
||||
<el-table-column prop="action" label="操作" width="90" />
|
||||
<el-table-column prop="summary" label="摘要" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="结果" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tooltip
|
||||
:content="row.error_message ?? ''"
|
||||
:disabled="row.success !== 0 || !row.error_message"
|
||||
placement="top"
|
||||
>
|
||||
<StatusTag
|
||||
:value="row.success"
|
||||
active-text="成功"
|
||||
inactive-text="失败"
|
||||
inactive-type="danger"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="耗时(ms)" width="90" align="right">
|
||||
<template #default="{ row }">{{ row.duration_ms ?? '—' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ip" label="IP" min-width="120">
|
||||
<template #default="{ row }">{{ row.ip || '—' }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<AppPagination
|
||||
:total="opTotal"
|
||||
:page-num="opPageNum"
|
||||
:page-size="opPageSize"
|
||||
@page-change="onOpPageChange"
|
||||
@size-change="onOpSizeChange"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 登录日志 -->
|
||||
<el-tab-pane label="登录日志" name="login" lazy>
|
||||
<el-form class="filter-form" :inline="true" @submit.prevent>
|
||||
<el-form-item label="用户名">
|
||||
<el-input
|
||||
v-model="loginFilters.username"
|
||||
placeholder="模糊匹配"
|
||||
clearable
|
||||
style="width: 160px"
|
||||
@keyup.enter="searchLoginLogs"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP">
|
||||
<el-input
|
||||
v-model="loginFilters.ip"
|
||||
placeholder="精确匹配"
|
||||
clearable
|
||||
style="width: 150px"
|
||||
@keyup.enter="searchLoginLogs"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结果">
|
||||
<el-select v-model="loginFilters.success" placeholder="全部" clearable style="width: 110px">
|
||||
<el-option
|
||||
v-for="item in RESULT_OPTIONS"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间范围">
|
||||
<el-date-picker
|
||||
v-model="loginTimeRange"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:default-time="RANGE_DEFAULT_TIME"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="searchLoginLogs">查询</el-button>
|
||||
<el-button @click="resetLoginFilters">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table v-loading="loginLoading" :data="loginRecords" stripe>
|
||||
<el-table-column label="时间" min-width="165">
|
||||
<template #default="{ row }">{{ formatDateTime(row.create_time) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="username" label="用户名" min-width="130" />
|
||||
<el-table-column label="结果" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<StatusTag
|
||||
:value="row.success"
|
||||
active-text="成功"
|
||||
inactive-text="失败"
|
||||
inactive-type="danger"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="fail_reason" label="失败原因" min-width="150">
|
||||
<template #default="{ row }">{{ row.fail_reason || '—' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ip" label="IP" min-width="120">
|
||||
<template #default="{ row }">{{ row.ip || '—' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="User-Agent" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<span class="ua-cell" :title="row.user_agent || ''">{{ row.user_agent || '—' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<AppPagination
|
||||
:total="loginTotal"
|
||||
:page-num="loginPageNum"
|
||||
:page-size="loginPageSize"
|
||||
@page-change="onLoginPageChange"
|
||||
@size-change="onLoginSizeChange"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.log-detail {
|
||||
padding: 4px 16px;
|
||||
color: var(--ys-text);
|
||||
}
|
||||
|
||||
.log-detail__label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-detail__data {
|
||||
padding: 8px 12px;
|
||||
margin: 6px 0 12px;
|
||||
overflow-x: auto;
|
||||
font-family: Consolas, 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
background-color: var(--ys-paper);
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ua-cell {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,305 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
|
||||
|
||||
import * as roleApi from '@/api/roles'
|
||||
import type { RoleItem, RoleQueryParams } from '@/api/roles'
|
||||
import AppPagination from '@/components/table/AppPagination.vue'
|
||||
import StatusTag from '@/components/table/StatusTag.vue'
|
||||
import { useConfirmAction } from '@/composables/useConfirmAction'
|
||||
import { usePagedList } from '@/composables/usePagedList'
|
||||
import { ROLE_ADMIN, STATUS_OPTIONS } from '@/utils/constants'
|
||||
import { handledError } from '@/utils/error'
|
||||
|
||||
/**
|
||||
* 角色管理（轻量版：不含权限点分配，权限清单待业务方给出后启用）。
|
||||
*
|
||||
* 与后端的保护规则对齐（后端是唯一防线，此处禁用按钮只是体验）：
|
||||
* - 内置 admin 角色不可删除、不可禁用
|
||||
* - 仍有绑定用户的角色不可删除（`user_roles` 外键是 CASCADE，
|
||||
* 直接删会静默剥离这些用户的权限）
|
||||
* - 编码创建后不可修改（授权判定的锚点）
|
||||
* - 禁用角色不再出现在用户表单下拉中，且**不可再分配给用户**；
|
||||
* 已绑定用户的既有授权不受影响
|
||||
*/
|
||||
const { confirmAndRun } = useConfirmAction()
|
||||
|
||||
const filters = reactive({
|
||||
keyword: '',
|
||||
status: undefined as number | undefined,
|
||||
})
|
||||
|
||||
const { records, total, pageNum, pageSize, loading, load, search, onPageChange, onSizeChange, reloadAfterDelete } =
|
||||
usePagedList<RoleItem, RoleQueryParams>(roleApi.listRoles, () => ({
|
||||
keyword: filters.keyword,
|
||||
status: filters.status,
|
||||
}))
|
||||
|
||||
function resetFilters(): void {
|
||||
filters.keyword = ''
|
||||
filters.status = undefined
|
||||
search()
|
||||
}
|
||||
|
||||
/** 内置管理员角色 */
|
||||
function isBuiltin(row: RoleItem): boolean {
|
||||
return row.role_code === ROLE_ADMIN
|
||||
}
|
||||
|
||||
/** 删除保护的悬停说明（禁用按钮自身不触发悬浮事件，由外层 span 提供 title） */
|
||||
function deleteHint(row: RoleItem): string {
|
||||
if (isBuiltin(row)) return '内置管理员角色不可删除'
|
||||
if (row.user_count > 0) return `仍有 ${row.user_count} 个用户绑定该角色，请先解除绑定`
|
||||
return ''
|
||||
}
|
||||
|
||||
// ==================== 新增 / 编辑 ====================
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const editingId = ref<number | null>(null)
|
||||
/** 单一状态源：编辑中 ⇔ editingId 非空（避免双状态漂移） */
|
||||
const isEdit = computed(() => editingId.value !== null)
|
||||
const formRef = ref<FormInstance>()
|
||||
const submitting = ref(false)
|
||||
|
||||
const form = reactive({
|
||||
role_code: '',
|
||||
role_name: '',
|
||||
description: '',
|
||||
sort_order: 0,
|
||||
})
|
||||
|
||||
const rules = computed<FormRules>(() => ({
|
||||
role_code: [
|
||||
{ required: true, message: '请输入角色编码', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^[a-z][a-z0-9_]{1,31}$/,
|
||||
message: '以小写字母开头，仅可含小写字母、数字与下划线（2–32 位）',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
role_name: [
|
||||
{ required: true, message: '请输入角色名称', trigger: 'blur' },
|
||||
{ max: 64, message: '最长 64 个字符', trigger: 'blur' },
|
||||
],
|
||||
description: [{ max: 255, message: '最长 255 个字符', trigger: 'blur' }],
|
||||
}))
|
||||
|
||||
function openCreate(): void {
|
||||
editingId.value = null
|
||||
Object.assign(form, { role_code: '', role_name: '', description: '', sort_order: 0 })
|
||||
dialogVisible.value = true
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
function openEdit(row: RoleItem): void {
|
||||
editingId.value = row.id
|
||||
Object.assign(form, {
|
||||
role_code: row.role_code,
|
||||
role_name: row.role_name,
|
||||
description: row.description ?? '',
|
||||
sort_order: row.sort_order,
|
||||
})
|
||||
dialogVisible.value = true
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
async function handleSubmit(): Promise<void> {
|
||||
const valid = await formRef.value?.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
if (editingId.value !== null) {
|
||||
await roleApi.updateRole(editingId.value, {
|
||||
role_name: form.role_name,
|
||||
description: form.description,
|
||||
// el-input-number 清空后为 undefined，被 JSON 省略时后端会取默认 0，
|
||||
// 排序被静默重置 —— 提交前兜底为 0 并明确表达「未填即 0」的意图
|
||||
sort_order: form.sort_order ?? 0,
|
||||
})
|
||||
ElMessage.success('已保存')
|
||||
} else {
|
||||
await roleApi.createRole({
|
||||
role_code: form.role_code,
|
||||
role_name: form.role_name,
|
||||
description: form.description || undefined,
|
||||
sort_order: form.sort_order ?? 0,
|
||||
})
|
||||
ElMessage.success('角色已创建')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
await load()
|
||||
} catch (error) {
|
||||
handledError(error) // 失败提示由请求拦截器统一完成
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 启停 / 删除 ====================
|
||||
|
||||
async function handleToggleStatus(row: RoleItem): Promise<void> {
|
||||
const next = row.status === 1 ? 0 : 1
|
||||
const action = next === 1 ? '启用' : '禁用'
|
||||
await confirmAndRun({
|
||||
confirmText:
|
||||
next === 0
|
||||
? `确定禁用角色「${row.role_name}」？禁用后该角色不再出现在用户表单的下拉中且不可再分配，但已绑定用户的权限不受影响。`
|
||||
: `确定启用角色「${row.role_name}」？`,
|
||||
title: `${action}确认`,
|
||||
confirmButtonText: action,
|
||||
successText: `已${action}`,
|
||||
run: () => roleApi.setRoleStatus(row.id, next),
|
||||
after: load,
|
||||
})
|
||||
}
|
||||
|
||||
async function handleDelete(row: RoleItem): Promise<void> {
|
||||
await confirmAndRun({
|
||||
confirmText: `确定删除角色「${row.role_name}」（${row.role_code}）？删除后不可恢复。`,
|
||||
title: '删除确认',
|
||||
confirmButtonText: '删除',
|
||||
successText: '角色已删除',
|
||||
run: () => roleApi.deleteRole(row.id),
|
||||
after: reloadAfterDelete,
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="never">
|
||||
<el-form class="filter-form" :inline="true" @submit.prevent>
|
||||
<el-form-item label="关键词">
|
||||
<el-input
|
||||
v-model="filters.keyword"
|
||||
placeholder="编码或名称，模糊匹配"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@keyup.enter="search"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="filters.status" placeholder="全部" clearable style="width: 110px">
|
||||
<el-option
|
||||
v-for="item in STATUS_OPTIONS"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="search">查询</el-button>
|
||||
<el-button @click="resetFilters">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="openCreate">新增角色</el-button>
|
||||
</div>
|
||||
|
||||
<el-table v-loading="loading" :data="records" stripe>
|
||||
<el-table-column label="编码" min-width="150">
|
||||
<template #default="{ row }">
|
||||
<span class="role-code">{{ row.role_code }}</span>
|
||||
<el-tag v-if="isBuiltin(row)" class="builtin-tag" size="small" type="warning" disable-transitions>
|
||||
内置
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="role_name" label="名称" min-width="120" />
|
||||
<el-table-column prop="description" label="说明" min-width="180">
|
||||
<template #default="{ row }">{{ row.description || '—' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort_order" label="排序" width="80" align="center" />
|
||||
<el-table-column label="状态" width="90" align="center">
|
||||
<template #default="{ row }">
|
||||
<StatusTag :value="row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户数" width="90" align="center">
|
||||
<template #default="{ row }">{{ row.user_count }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="170" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
|
||||
<span :title="isBuiltin(row) ? '内置管理员角色不可禁用' : ''">
|
||||
<el-button
|
||||
link
|
||||
type="warning"
|
||||
size="small"
|
||||
:disabled="isBuiltin(row)"
|
||||
@click="handleToggleStatus(row)"
|
||||
>
|
||||
{{ row.status === 1 ? '禁用' : '启用' }}
|
||||
</el-button>
|
||||
</span>
|
||||
<span :title="deleteHint(row)">
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
size="small"
|
||||
:disabled="isBuiltin(row) || row.user_count > 0"
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<AppPagination
|
||||
:total="total"
|
||||
:page-num="pageNum"
|
||||
:page-size="pageSize"
|
||||
@page-change="onPageChange"
|
||||
@size-change="onSizeChange"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="isEdit ? '编辑角色' : '新增角色'"
|
||||
width="480px"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
|
||||
<el-form-item label="角色编码" prop="role_code">
|
||||
<el-input
|
||||
v-model="form.role_code"
|
||||
:disabled="isEdit"
|
||||
placeholder="如 sales_manager，创建后不可修改"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色名称" prop="role_name">
|
||||
<el-input v-model="form.role_name" placeholder="如 销售主管" />
|
||||
</el-form-item>
|
||||
<el-form-item label="说明" prop="description">
|
||||
<el-input v-model="form.description" type="textarea" :rows="2" placeholder="选填" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort_order">
|
||||
<el-input-number v-model="form.sort_order" :min="0" :max="9999" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="handleSubmit">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.role-code {
|
||||
font-family: Consolas, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.builtin-tag {
|
||||
margin-left: 6px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,467 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
|
||||
|
||||
import type { RoleOption } from '@/api/types'
|
||||
import * as userApi from '@/api/users'
|
||||
import type { UserItem, UserQueryParams } from '@/api/users'
|
||||
import AppPagination from '@/components/table/AppPagination.vue'
|
||||
import StatusTag from '@/components/table/StatusTag.vue'
|
||||
import { useConfirmAction } from '@/composables/useConfirmAction'
|
||||
import { usePagedList } from '@/composables/usePagedList'
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { STATUS_OPTIONS } from '@/utils/constants'
|
||||
import { handledError } from '@/utils/error'
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
import { passwordRule } from '@/utils/validate'
|
||||
|
||||
/**
|
||||
* 用户管理（需求 2.5.1）。
|
||||
*
|
||||
* 与后端约定对齐：
|
||||
* - 不能删除/禁用自己、不能移除自己的管理员角色 —— 前端对当前登录行
|
||||
* 禁用相应按钮（后端仍会拦截，界面禁用只是体验）
|
||||
* - 密码按字节校验（8–72），中文一个字符占 3 字节
|
||||
* - 重置密码会使用户已登录的会话立即失效
|
||||
* - 编辑表单把未修改字段以空串提交，后端将 '' 归一为 NULL（清空即写回
|
||||
* NULL），前端无需特殊处理
|
||||
*/
|
||||
const userStore = useUserStore()
|
||||
const { confirmAndRun } = useConfirmAction()
|
||||
|
||||
// ==================== 列表 ====================
|
||||
|
||||
const filters = reactive({
|
||||
username: '',
|
||||
real_name: '',
|
||||
status: undefined as number | undefined,
|
||||
role_code: undefined as string | undefined,
|
||||
})
|
||||
|
||||
const { records, total, pageNum, pageSize, loading, load, search, onPageChange, onSizeChange, reloadAfterDelete } =
|
||||
usePagedList<UserItem, UserQueryParams>(userApi.listUsers, () => ({
|
||||
username: filters.username,
|
||||
real_name: filters.real_name,
|
||||
status: filters.status,
|
||||
role_code: filters.role_code,
|
||||
}))
|
||||
|
||||
const roleOptions = ref<RoleOption[]>([])
|
||||
|
||||
async function loadRoleOptions(): Promise<void> {
|
||||
try {
|
||||
roleOptions.value = await userApi.listRoleOptions()
|
||||
} catch (error) {
|
||||
handledError(error) // 拦截器已提示；下拉为空不阻断列表使用
|
||||
}
|
||||
}
|
||||
|
||||
function resetFilters(): void {
|
||||
filters.username = ''
|
||||
filters.real_name = ''
|
||||
filters.status = undefined
|
||||
filters.role_code = undefined
|
||||
search()
|
||||
}
|
||||
|
||||
/** 是否当前登录用户本人（其危险操作按钮需禁用） */
|
||||
function isSelf(row: UserItem): boolean {
|
||||
return row.id === userStore.userInfo?.id
|
||||
}
|
||||
|
||||
/** 自我保护提示：按钮外层 span 的 title（disabled 按钮自身不触发悬浮事件） */
|
||||
function selfHint(row: UserItem): string {
|
||||
return isSelf(row) ? '不能对自己执行此操作' : ''
|
||||
}
|
||||
|
||||
// ==================== 新增 / 编辑 ====================
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const editingId = ref<number | null>(null)
|
||||
/** 单一状态源：编辑中 ⇔ editingId 非空（避免双状态漂移） */
|
||||
const isEdit = computed(() => editingId.value !== null)
|
||||
const formRef = ref<FormInstance>()
|
||||
const submitting = ref(false)
|
||||
|
||||
const form = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
real_name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
roles: [] as string[],
|
||||
remark: '',
|
||||
})
|
||||
|
||||
/** 编辑时不校验密码（密码走专门的重置入口） */
|
||||
const rules = computed<FormRules>(() => ({
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 2, max: 64, message: '用户名长度 2–64 个字符', trigger: 'blur' },
|
||||
],
|
||||
...(isEdit.value ? {} : { password: [{ required: true, validator: passwordRule, trigger: 'blur' }] }),
|
||||
roles: [
|
||||
{ required: true, type: 'array', min: 1, message: '至少选择一个角色', trigger: 'change' },
|
||||
],
|
||||
phone: [{ max: 20, message: '手机号最长 20 个字符', trigger: 'blur' }],
|
||||
email: [{ max: 128, message: '邮箱最长 128 个字符', trigger: 'blur' }],
|
||||
remark: [{ max: 255, message: '备注最长 255 个字符', trigger: 'blur' }],
|
||||
}))
|
||||
|
||||
function openCreate(): void {
|
||||
editingId.value = null
|
||||
Object.assign(form, {
|
||||
username: '',
|
||||
password: '',
|
||||
real_name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
roles: [],
|
||||
remark: '',
|
||||
})
|
||||
dialogVisible.value = true
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
function openEdit(row: UserItem): void {
|
||||
editingId.value = row.id
|
||||
Object.assign(form, {
|
||||
username: row.username,
|
||||
password: '',
|
||||
real_name: row.real_name ?? '',
|
||||
phone: row.phone ?? '',
|
||||
email: row.email ?? '',
|
||||
roles: [...row.roles],
|
||||
remark: row.remark ?? '',
|
||||
})
|
||||
dialogVisible.value = true
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
async function handleSubmit(): Promise<void> {
|
||||
const valid = await formRef.value?.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
if (editingId.value !== null) {
|
||||
await userApi.updateUser(editingId.value, {
|
||||
real_name: form.real_name,
|
||||
phone: form.phone,
|
||||
email: form.email,
|
||||
roles: form.roles,
|
||||
remark: form.remark,
|
||||
})
|
||||
ElMessage.success('已保存')
|
||||
} else {
|
||||
await userApi.createUser({
|
||||
username: form.username,
|
||||
password: form.password,
|
||||
real_name: form.real_name || undefined,
|
||||
phone: form.phone || undefined,
|
||||
email: form.email || undefined,
|
||||
roles: form.roles,
|
||||
remark: form.remark || undefined,
|
||||
})
|
||||
ElMessage.success('用户已创建')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
await load()
|
||||
} catch (error) {
|
||||
handledError(error) // 失败提示由请求拦截器统一完成
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 重置密码 ====================
|
||||
|
||||
const resetVisible = ref(false)
|
||||
const resetFormRef = ref<FormInstance>()
|
||||
const resetSubmitting = ref(false)
|
||||
const resetTarget = reactive({ id: 0, username: '', isSelf: false })
|
||||
const resetForm = reactive({ newPassword: '' })
|
||||
|
||||
const resetRules: FormRules = {
|
||||
newPassword: [{ required: true, validator: passwordRule, trigger: 'blur' }],
|
||||
}
|
||||
|
||||
function openReset(row: UserItem): void {
|
||||
resetTarget.id = row.id
|
||||
resetTarget.username = row.username
|
||||
resetTarget.isSelf = isSelf(row)
|
||||
resetForm.newPassword = ''
|
||||
resetVisible.value = true
|
||||
resetFormRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
async function handleResetSubmit(): Promise<void> {
|
||||
const valid = await resetFormRef.value?.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
|
||||
resetSubmitting.value = true
|
||||
try {
|
||||
await userApi.resetPassword(resetTarget.id, resetForm.newPassword)
|
||||
ElMessage.success('密码已重置，该用户需重新登录')
|
||||
resetVisible.value = false
|
||||
} catch (error) {
|
||||
handledError(error) // 拦截器已提示
|
||||
} finally {
|
||||
resetSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 启停 / 删除 ====================
|
||||
|
||||
async function handleToggleStatus(row: UserItem): Promise<void> {
|
||||
const next = row.status === 1 ? 0 : 1
|
||||
const action = next === 1 ? '启用' : '禁用'
|
||||
await confirmAndRun({
|
||||
confirmText:
|
||||
next === 0
|
||||
? `确定禁用用户「${row.username}」？其已登录的会话将立即失效。`
|
||||
: `确定启用用户「${row.username}」？`,
|
||||
title: `${action}确认`,
|
||||
confirmButtonText: action,
|
||||
successText: `已${action}`,
|
||||
run: () => userApi.setUserStatus(row.id, next),
|
||||
after: load,
|
||||
})
|
||||
}
|
||||
|
||||
async function handleDelete(row: UserItem): Promise<void> {
|
||||
await confirmAndRun({
|
||||
confirmText: `确定删除用户「${row.username}」？删除为物理删除、不可恢复；如仅为停用账号，建议使用「禁用」以保留审计线索。`,
|
||||
title: '删除确认',
|
||||
confirmButtonText: '删除',
|
||||
successText: '用户已删除',
|
||||
run: () => userApi.deleteUser(row.id),
|
||||
after: reloadAfterDelete,
|
||||
})
|
||||
}
|
||||
|
||||
// ==================== 初始化 ====================
|
||||
|
||||
onMounted(() => {
|
||||
// 两个请求各自容错（load 内部已兜底），互不拖累
|
||||
void load()
|
||||
void loadRoleOptions()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="never">
|
||||
<el-form class="filter-form" :inline="true" @submit.prevent>
|
||||
<el-form-item label="用户名">
|
||||
<el-input
|
||||
v-model="filters.username"
|
||||
placeholder="模糊匹配"
|
||||
clearable
|
||||
style="width: 160px"
|
||||
@keyup.enter="search"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名">
|
||||
<el-input
|
||||
v-model="filters.real_name"
|
||||
placeholder="模糊匹配"
|
||||
clearable
|
||||
style="width: 140px"
|
||||
@keyup.enter="search"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="filters.status" placeholder="全部" clearable style="width: 110px">
|
||||
<el-option
|
||||
v-for="item in STATUS_OPTIONS"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色">
|
||||
<el-select v-model="filters.role_code" placeholder="全部" clearable style="width: 150px">
|
||||
<el-option
|
||||
v-for="role in roleOptions"
|
||||
:key="role.role_code"
|
||||
:label="role.role_name"
|
||||
:value="role.role_code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="search">查询</el-button>
|
||||
<el-button @click="resetFilters">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="openCreate">新增用户</el-button>
|
||||
</div>
|
||||
|
||||
<el-table v-loading="loading" :data="records" stripe>
|
||||
<el-table-column prop="username" label="用户名" min-width="120" />
|
||||
<el-table-column prop="real_name" label="姓名" min-width="100">
|
||||
<template #default="{ row }">{{ row.real_name || '—' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phone" label="手机号" min-width="120">
|
||||
<template #default="{ row }">{{ row.phone || '—' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="角色" min-width="140">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
v-for="role in row.roles"
|
||||
:key="role"
|
||||
class="role-tag"
|
||||
size="small"
|
||||
type="info"
|
||||
disable-transitions
|
||||
>
|
||||
{{ role }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="90" align="center">
|
||||
<template #default="{ row }">
|
||||
<StatusTag :value="row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="最后登录" min-width="170">
|
||||
<template #default="{ row }">{{ formatDateTime(row.last_login_time) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="250" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button link type="primary" size="small" @click="openReset(row)">
|
||||
重置密码
|
||||
</el-button>
|
||||
<span :title="selfHint(row)">
|
||||
<el-button
|
||||
link
|
||||
type="warning"
|
||||
size="small"
|
||||
:disabled="isSelf(row)"
|
||||
@click="handleToggleStatus(row)"
|
||||
>
|
||||
{{ row.status === 1 ? '禁用' : '启用' }}
|
||||
</el-button>
|
||||
</span>
|
||||
<span :title="selfHint(row)">
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
size="small"
|
||||
:disabled="isSelf(row)"
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<AppPagination
|
||||
:total="total"
|
||||
:page-num="pageNum"
|
||||
:page-size="pageSize"
|
||||
@page-change="onPageChange"
|
||||
@size-change="onSizeChange"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- 新增 / 编辑 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="isEdit ? '编辑用户' : '新增用户'"
|
||||
width="520px"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input
|
||||
v-model="form.username"
|
||||
:disabled="isEdit"
|
||||
placeholder="登录用户名，创建后不可修改"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="!isEdit" label="初始密码" prop="password">
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="8–72 字节（中文一个字符约 3 字节）"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="real_name">
|
||||
<el-input v-model="form.real_name" placeholder="真实姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="form.phone" placeholder="选填" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="选填" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色" prop="roles">
|
||||
<el-select v-model="form.roles" multiple placeholder="至少选择一个角色" style="width: 100%">
|
||||
<el-option
|
||||
v-for="role in roleOptions"
|
||||
:key="role.role_code"
|
||||
:label="`${role.role_name}（${role.role_code}）`"
|
||||
:value="role.role_code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="2" placeholder="选填" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="handleSubmit">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 重置密码 -->
|
||||
<el-dialog v-model="resetVisible" title="重置密码" width="440px" destroy-on-close>
|
||||
<p class="reset-tip">
|
||||
将重置用户「{{ resetTarget.username }}」的密码。
|
||||
重置后该用户<strong>已登录的所有会话立即失效</strong>，需用新密码重新登录。
|
||||
<template v-if="resetTarget.isSelf">
|
||||
<br />
|
||||
注意：<strong>你正在重置自己的密码</strong>，保存后当前会话也会失效。
|
||||
</template>
|
||||
</p>
|
||||
<el-form ref="resetFormRef" :model="resetForm" :rules="resetRules" label-width="80px">
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input
|
||||
v-model="resetForm.newPassword"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="8–72 字节（中文一个字符约 3 字节）"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="resetVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="resetSubmitting" @click="handleResetSubmit">
|
||||
确认重置
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.role-tag {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.reset-tip {
|
||||
margin: 0 0 16px;
|
||||
color: var(--ys-text);
|
||||
line-height: 1.7;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user