feat: 实现系统管理用户、角色与权限配置页面

补齐 RBAC 相关页面与 UI 设计图,并接入功能与视觉回归测试,便于后续持续验证。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-07-26 03:08:35 +08:00
parent c4872891f8
commit 77f718965d
24 changed files with 1869 additions and 14 deletions

View File

@@ -17,8 +17,8 @@ pnpm test:e2e:update # 确认 UI 改动后更新截图基线
- `visual/`:页面截图回归。
- `snapshots/`:由 `test:e2e:update` 生成的基线图。
模型列表、供应商管理的功能和视觉用例已启用。确认页面视觉改动符合预期后,执行
模型列表、供应商管理、用户管理、角色管理、权限配置的功能和视觉用例已启用。确认页面视觉改动符合预期后,执行
`pnpm test:e2e:update` 更新基线。
设计目标图位于 `docs/ui/llm/list/`;截图基线用于检测后续代码造成的
设计目标图位于 `docs/ui/`;截图基线用于检测后续代码造成的
视觉变化,不替代设计稿还原度审查。

View File

@@ -0,0 +1,45 @@
import { expect, test } from '../fixtures/auth';
test.describe('系统管理 / 权限配置', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/system/permission');
await page.getByText('菜单树', { exact: true }).waitFor();
});
test('展示菜单权限与详情', async ({ page }) => {
await expect(page.getByRole('tab', { name: '菜单权限' })).toBeVisible();
await expect(page.getByText('菜单树', { exact: true })).toBeVisible();
await expect(page.getByText('菜单详情', { exact: true })).toBeVisible();
await expect(page.getByLabel('菜单名称')).toHaveValue('用户管理');
await expect(page.getByLabel('权限标识')).toHaveValue('system:user:view');
});
test('可保存菜单详情', async ({ page }) => {
await page.getByLabel('菜单名称').fill('用户中心');
await page.getByRole('button', { name: '保 存' }).click();
await expect(page.getByText('菜单已保存')).toBeVisible();
await expect(page.getByRole('tree').getByText('用户中心')).toBeVisible();
});
test('可新增同级菜单', async ({ page }) => {
await page.getByRole('button', { name: '+ 新增同级' }).click();
await expect(page.getByText('已新增同级菜单')).toBeVisible();
await expect(page.getByLabel('菜单名称')).toHaveValue('新菜单');
});
test('可管理按钮权限', async ({ page }) => {
await page.getByRole('tab', { name: '按钮权限' }).click();
const buttonPanel = page.getByRole('tabpanel', { name: '按钮权限' });
await expect(buttonPanel.getByRole('button', { name: '新增按钮权限' })).toBeVisible();
await expect(buttonPanel.getByText('system:user:add')).toBeVisible();
await buttonPanel.getByRole('button', { name: '新增按钮权限' }).click();
const dialog = page.getByRole('dialog', { name: '新增按钮权限' });
await dialog.getByLabel('权限名称').fill('导入');
await dialog.getByLabel('权限码').fill('system:user:import');
await dialog.getByRole('button', { name: '保 存' }).click();
await expect(buttonPanel.getByText('system:user:import')).toBeVisible();
await expect(page.getByText('按钮权限已添加')).toBeVisible();
});
});

View File

@@ -0,0 +1,60 @@
import { expect, test } from '../fixtures/auth';
test.describe('系统管理 / 角色管理', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/system/role');
await page.getByRole('table').waitFor();
});
test('展示角色列表并支持筛选', async ({ page }) => {
await expect(page.getByRole('button', { name: '新增角色' })).toBeVisible();
await expect(page.getByText('超级管理员', { exact: true })).toBeVisible();
await expect(page.getByText('ROLE_ADMIN')).toBeVisible();
await page.getByPlaceholder('搜索角色名称').fill('只读');
await expect(page.getByText('只读', { exact: true })).toBeVisible();
await expect(page.getByText('超级管理员', { exact: true })).toHaveCount(0);
});
test('可新增角色', async ({ page }) => {
await page.getByRole('button', { name: '新增角色' }).click();
const dialog = page.getByRole('dialog', { name: '新增角色' });
await dialog.getByLabel('角色名称').fill('审计');
await dialog.getByLabel('角色编码').fill('ROLE_AUDIT');
await dialog.getByLabel('描述').fill('审计只读权限');
await dialog.getByRole('button', { name: '保 存' }).click();
await expect(page.getByText('审计', { exact: true })).toBeVisible();
await expect(page.getByText('角色已添加')).toBeVisible();
});
test('可切换状态并配置权限', async ({ page }) => {
const statusSwitch = page.getByRole('switch', { name: '运营状态' });
await expect(statusSwitch).toBeChecked();
await statusSwitch.click();
await expect(statusSwitch).not.toBeChecked();
const row = page.getByRole('row').filter({ hasText: '运营' });
await row.getByRole('button', { name: '权限配置' }).click();
await expect(page.getByText('配置权限 - 运营')).toBeVisible();
await expect(page.getByText('菜单权限')).toBeVisible();
await expect(page.getByText('按钮权限')).toBeVisible();
await page.getByRole('button', { name: '保 存' }).click();
await expect(page.getByText('权限已保存')).toBeVisible();
});
test('可编辑并删除角色', async ({ page }) => {
const row = page.getByRole('row').filter({ hasText: '只读' });
await row.getByRole('button', { name: '编辑' }).click();
const dialog = page.getByRole('dialog', { name: '编辑角色' });
await dialog.getByLabel('描述').fill('只读访问,不可修改');
await dialog.getByRole('button', { name: '保 存' }).click();
await expect(page.getByText('只读访问,不可修改')).toBeVisible();
await row.getByRole('button', { name: '删除' }).click();
await page.getByRole('button', { name: '确 定' }).click();
await expect(page.getByText('ROLE_VIEWER')).toHaveCount(0);
});
});

View File

@@ -0,0 +1,72 @@
import { expect, test } from '../fixtures/auth';
test.describe('系统管理 / 用户管理', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/system/user');
await page.getByRole('table').waitFor();
});
test('展示用户列表并支持筛选', async ({ page }) => {
await expect(page.getByRole('button', { name: '新增用户' })).toBeVisible();
await expect(page.getByText('admin', { exact: true })).toBeVisible();
await page.getByPlaceholder('搜索用户名 / 邮箱 / 手机号').fill('viewer');
await expect(page.getByText('viewer', { exact: true })).toBeVisible();
await expect(page.getByText('admin', { exact: true })).toHaveCount(0);
});
test('可新增用户', async ({ page }) => {
await page.getByRole('button', { name: '新增用户' }).click();
const dialog = page.getByRole('dialog', { name: '新增用户' });
await dialog.getByLabel('用户名').fill('tester');
await dialog.getByLabel('昵称').fill('测试用户');
await dialog.getByLabel('邮箱').fill('tester@chatone.ai');
await dialog.getByLabel('手机号').fill('13800000009');
await dialog.getByLabel('初始密码').fill('Test123456');
await dialog.getByRole('button', { name: '保 存' }).click();
await expect(page.getByText('tester', { exact: true })).toBeVisible();
await expect(page.getByText('用户已添加')).toBeVisible();
});
test('可切换状态并重置密码', async ({ page }) => {
const statusSwitch = page.getByRole('switch', { name: 'operator状态' });
await expect(statusSwitch).toBeChecked();
await statusSwitch.click();
await expect(statusSwitch).not.toBeChecked();
const row = page.getByRole('row').filter({ hasText: 'operator' });
await row.getByRole('button', { name: '重置密码' }).click();
const dialog = page.getByRole('dialog', { name: '重置密码 - operator' });
await dialog.getByLabel('新密码').fill('NewPass123');
await dialog.getByLabel('确认密码').fill('NewPass123');
await dialog.getByRole('button', { name: '确认重置' }).click();
await expect(page.getByText('密码已重置')).toBeVisible();
});
test('可编辑并删除用户', async ({ page }) => {
const operatorRow = page.getByRole('row').filter({ hasText: 'operator' });
await operatorRow.getByRole('button', { name: '编辑' }).click();
const dialog = page.getByRole('dialog', { name: '编辑用户' });
await dialog.getByLabel('昵称').fill('新运营');
await dialog.getByRole('button', { name: '保 存' }).click();
await expect(page.getByText('新运营', { exact: true })).toBeVisible();
const viewerRow = page.getByRole('row').filter({ hasText: 'viewer' });
await viewerRow.getByRole('button', { name: '删除' }).click();
await page.getByRole('button', { name: '确 定' }).click();
await expect(page.getByText('viewer', { exact: true })).toHaveCount(0);
});
test('可批量禁用用户', async ({ page }) => {
const row = page.getByRole('row').filter({ hasText: 'operator' });
await row.getByRole('checkbox').check();
await page.getByRole('button', { name: '批量禁用' }).click();
await page.getByRole('button', { name: '确 定' }).click();
await expect(page.getByRole('switch', { name: 'operator状态' })).not.toBeChecked();
await expect(page.getByText('已禁用 1 个用户')).toBeVisible();
});
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

View File

@@ -0,0 +1,12 @@
import { expect, test } from '../fixtures/auth';
test('权限配置视觉基线', async ({ page }) => {
await page.setViewportSize({ width: 1440, height: 900 });
await page.goto('/system/permission');
await page.getByText('菜单树', { exact: true }).waitFor();
await page.evaluate(() => document.fonts.ready);
await expect(page).toHaveScreenshot('system-permission.png', {
fullPage: true,
});
});

View File

@@ -0,0 +1,12 @@
import { expect, test } from '../fixtures/auth';
test('角色管理视觉基线', async ({ page }) => {
await page.setViewportSize({ width: 1440, height: 900 });
await page.goto('/system/role');
await page.getByRole('table').waitFor();
await page.evaluate(() => document.fonts.ready);
await expect(page).toHaveScreenshot('system-roles-list.png', {
fullPage: true,
});
});

View File

@@ -0,0 +1,12 @@
import { expect, test } from '../fixtures/auth';
test('用户管理视觉基线', async ({ page }) => {
await page.setViewportSize({ width: 1440, height: 900 });
await page.goto('/system/user');
await page.getByRole('table').waitFor();
await page.evaluate(() => document.fonts.ready);
await expect(page).toHaveScreenshot('system-users-list.png', {
fullPage: true,
});
});