Phase 86 · PC 后台「角色管理 / 用户管理」高保真效果图 v2
v2 结构性重做:以现网真实页面(origin/test)为底,逐字照搬结构/文案/类名,仅标出本期改动 · 2026-09-28
橙虚线框 + 右上标签「新增」或「改」= 本期改动
文字= 本期移除
= 现网原样(未标注)
A · 侧栏:现网 vs 改后 vs 客户账号视角
对比现网侧栏和改后侧栏:把「权限配置」改名「角色管理」、「用户管理」放回菜单里;右边是一个客户账号实际能看到的样子。
现网对应:web/app/(dashboard)/admin/AdminConsoleShell.tsx:33-106(navGroups)、240-247(logo)、279-320(nav渲染+底部)。为方便对比,三份侧栏都手动把「系统管理」组展开显示;现网默认该组是收起的(只有 platform/settlement/org_wecom 三组默认展开,见 AdminConsoleShell.tsx:181)。
现网
注:「用户管理」8-08 已从菜单摘除(AdminConsoleShell.tsx:39-40 注释),仅能直接输 URL /admin/users 进入,侧栏找不到入口。AI服务管理现网 admin 与机构管理员可见。
改后
改动:①组名「设置管理」→「系统管理」 ②「权限配置」→「角色管理」 ③「用户管理」移回本组 ④底部账号栏从「姓名 · 角色代码」简化为只显示账号名(现网是左边这种「系统管理员 · admin」格式) ⑤AI服务管理几页改后可在角色里勾选
客户账号(brand01·角色权限「品牌方」,可用 8 个页面)
机制不变:仍走 GET /api/me/menus 返回的 allowed_menus 过滤 navGroups(AdminConsoleShell.tsx:220-226),只是 allowed_menus 现在由「角色」而不是硬编码角色名决定;底部改为只显示账号名(brand01),不再显示「姓名·角色」,现网是「李经理 · 品牌方」这种「姓名 · 角色代码」格式(改)。
B · 角色管理 · 列表页(替换「权限配置」)
这是新的「角色管理」页面,用来替代原来的「权限配置」矩阵勾选页,管理员在这里新建、编辑、停用角色。
现网对应:web/app/(dashboard)/admin/role-permissions/page.tsx 全文(被替换);新列表版式照搬 web/app/(dashboard)/admin/users/page.tsx:88-251(标题区/表格卡片/分页文案)。
现网:权限配置页(被替换,缩小示意)
本期由「角色管理」替换(矩阵勾选 → 新建/编辑/停用角色 + 树形勾选 + 数据范围)
改后:角色管理列表页
角色管理
配置各角色可用的页面、页面内功能与数据范围(共 7 个角色)
| 角色名称 | 数据范围 | 可用页面数 | 用户数 | 状态 | 操作 |
admin 内置 · 拥有全部页面 · 不可改 |
全部机构 |
全部 |
2 |
启用 |
查看 |
平台员工 初始化预置 · 可改 |
全部机构 |
待核定 |
1 |
启用 |
编辑停用 |
机构管理员 初始化预置 · 可改 |
指定机构 |
4 |
0 |
启用 |
编辑停用 |
| 品牌方 |
指定机构 |
8 |
5 |
启用 |
编辑停用 |
| 门店运营 |
指定机构 |
3 |
2 |
启用 |
编辑停用 |
| 客服专员 |
全部机构 |
3 |
12 |
启用 |
编辑停用 |
| 只读审计员 |
全部机构 |
2 |
1 |
停用 |
编辑启用 |
注:系统只内置 admin 一个角色;用户管理、角色管理两页只有 admin 能用,不能分配给其他角色。平台员工、机构管理员在上线初始化时自动建好:现有平台员工账号自动挂到「平台员工」角色,只带入它现在真能打开的页面(现网勾了但打不开的几页不带,上线前逐页核定);机构管理员带入企微 4 页,数据范围为指定机构。
C · 新增 / 编辑角色页
新建一个角色要填什么:起个名字、选这个角色能看全部机构还是只能看指定机构、再勾选这个角色能用哪些页面和页面里的哪些功能。
版式照搬 web/app/(dashboard)/admin/users/new/page.tsx:89-236(顶部返回导航/标题/表单卡片/底部按钮);数据范围两卡片照搬 users/new/page.tsx:322-362 RoleCard 选中样式;功能树分组行照搬 role-permissions/page.tsx:200-206;勾选框照搬 role-permissions/page.tsx:219-226(accent-slate-900)。
角色管理 › 新增角色
新增角色
选择这个角色能看哪些机构的数据、能用哪些页面和页面里的哪些功能
注:页面内功能名称取自 phase86-permission-inventory-20260928.md §1.3(机构管理见第 45-70 行);本图只展开「机构管理」「席位」两处做示例,其余分组收起。用户管理、角色管理只有 admin 能用,所以树里不出现这两页。选「指定机构」时灰掉两类页面:看板、机构洞察、结算总览、结算列表、渠道管理(按机构的版本还没做,暂不可用);题库审核、价格管理、客服设置、系统监控(全平台共用一份,不可选)。
D · 保存确认弹窗(四个场景)
改角色权限或数据范围时会弹确认框,提醒管理员这个改动会立即影响到哪些人、影响多大。
版式照搬 web/app/(dashboard)/admin/users/new/page.tsx:238-317 凭证弹窗(遮罩 bg-slate-900/60、面板 rounded-2xl、头部 bg-amber-50/60)。
① 修改了已有用户的角色权限
权限变更将立即生效
该角色关联 5 人,保存后立即生效。
权限立即生效;对方已打开的页面,侧栏要刷新后才更新。
② 数据范围由「指定机构」改为「全部机构」
数据范围扩大将立即生效
这 5 个用户将能看到所有机构的数据(原来每人只能看自己账号上勾选的机构)。
如需收回,可再次编辑改回「指定机构」。
③ 停用角色
停用角色
「客服专员」下有 12 个用户,停用后他们登录将看不到任何页面。
④ 数据范围由「全部机构」改为「指定机构」
部分用户还没选机构
以下 2 个用户还没有选可看机构,保存后他们将看不到任何数据:support02、audit03。
请保存后到用户管理里为他们选择机构。
E · 用户列表页
用户列表副标题、筛选和列名都改了说法:用「角色权限」筛选和显示身份,「关联机构」改叫「可看机构」,还加了「到期日」列。
现网对应:web/app/(dashboard)/admin/users/page.tsx:88-251 全页原样照搬,逐条标改动点。
| 用户名 | 角色权限 | 真名 / 手机号 | 可看机构 | 到期日 | 最后登录 | 状态 | 操作 |
brand01 |
品牌方等2个 |
李经理 13800001111 |
示例眼视光 等 3 家 |
2027-09-28 |
2026-09-27 09:12 |
正常 |
编辑审计 |
support02 |
客服专员 |
王客服 13800002222 |
全部机构 |
2026-10-04(7 天内到期) |
2026-09-28 08:03 |
正常 |
编辑审计 |
audit03 |
只读审计员 |
赵审计 — |
全部机构 |
2026-09-20(已到期) |
从未登录 |
已到期 |
编辑审计 |
huawei_admin |
机构管理员 |
— — |
示例眼视光 |
长期有效 |
2026-09-15 14:20 |
正常 |
编辑审计 |
sysadmin |
admin |
系统管理员 — |
— |
长期有效 |
2026-09-28 07:50 |
正常 |
编辑审计 |
注:角色权限筛选下拉现网是 admin/org_admin/platform_staff/h5_user 英文 chip。角色权限名称、多角色「等N个」、「可看机构」机构名、「已到期」状态,均需扩展现网 RoleBadge/StatusBadge 组件(现网只认 4 种英文角色代码 + 4 种状态)及联表返回机构名,其余未标注部分与现网 users/page.tsx 逐字一致。
F · 新增用户页
新建用户页把选身份的方式从 3 张卡片改成「角色权限」可检索多选下拉;选中的角色决定这个人能用哪些页面、能看哪些机构。
现网对应:web/app/(dashboard)/admin/users/new/page.tsx:89-236 全页原样照搬(现网是 3 张 role-card,本期整块删除改用「角色权限」可检索下拉)。
用户管理 › 新增用户
新增用户
创建账号 · 系统将自动生成 12 位临时密码(一次性显示 · 7 天有效)
注:①「角色权限」检索范围=角色管理里建的角色,可多选,选中的角色决定能看哪些机构、能用哪些页面。一个人挂多个角色时,页面和功能取合集(都能用);只要有一个角色是「全部机构」,就能看全部机构。②可看机构框仅当所选角色数据范围=指定机构时展示,若角色是全部机构则不出现。③到期日:到期前 7 天账号列表行标黄,到期即失效。④原「机构管理员」卡片取消:想要机构管理员,就在角色管理里建一个角色,勾上 AI服务管理几页、选「指定机构」;可看机构多家时,企微页用现网已有的机构切换下拉(admin 现在就在用)。
G · 用户详情页
用户详情页里,「角色权限」变成可检索下拉可以改,还能改这个人能看的机构和到期日;原来的「软删除」卡片去掉,因为和下面的「账号启用」开关是同一件事。
现网对应:web/app/(dashboard)/admin/users/[id]/page.tsx:164-400 全页原样照搬(示例账号 brand01 · 角色权限「品牌方」)。
用户管理 › brand01
B
brand01
品牌方等2个
创建于 2026-06-01 10:00 · 最后登录 2026-09-27 09:12
重置密码
生成新临时密码 · 失效旧密码 · 写 audit log
解锁
清 locked_until · 重置失败计数 · 写 audit unlocked
查看审计日志
D11 · 10 类事件 · 6 月留存
原「软删除」卡片已移除:和下方「账号启用」开关是同一件事。
注:顶部徽章「品牌方 等2个」= 该用户同时挂了品牌方、门店运营两个角色(合并规则见 F 图注);需扩展现网 RoleBadge 组件才能显示自定义角色名和多角色。
H · 用户审计日志页
审计日志页事件名称全部改成中文,还加了 5 类新事件(新建账号、改角色权限等),方便查操作记录。
现网对应:web/app/(dashboard)/admin/users/[id]/audit/page.tsx:78-219 全页原样照搬;v1 版本在详情页新画了一块「操作记录」区域,v2 作废——改记进这个现有审计页。
用户管理 › 用户 118 › 审计日志
审计日志
D11 · 10 类事件 · 留存 180 天
登录成功
#4821
2026-09-27 09:12:03
IP: 116.22.x.x
改可看机构
#4820
2026-09-20 15:02:11
操作人:sysadmin · 由「2 家」改为「3 家」
注:现网 5 个事件是英文代码(login_success 等),本图改显示中文;审计表只允许 5 类事件(app/models/audit.py 约束),下方 5 类新事件均需扩展。
I · 客户视角三个小场景
客户实际会遇到的三个场景:手输网址进没权限的页面会看到什么、登录后会跳到哪、个人设置页里角色显示成什么样。
①现网对应 AdminConsoleShell.tsx:329(企微无权提示样式 text-sm text-destructive,本期扩展给所有页面)②现网登录后跳转 web/app/login/page.tsx:137(一律跳 /dashboard)③个人设置页 web/app/(dashboard)/settings/account/page.tsx:101-280。
① 手输网址进入没授权的页面
文案/样式复用现有企微无权提示(text-sm text-destructive),本期从「仅企微路径」扩展到「任何非授权路径」,现网非企微页面手输网址目前照样渲染(AdminConsoleShell.tsx:329 只判 isWecomPath)。底部账号栏同 A 屏改动,从「姓名·角色」简化为只显示账号名(改)。
② 登录后落地页(没有「看板」权限的账号)
改后
登录成功
→该账号可见菜单的第一项
(示例:机构管理)
注:现网登录后一律跳转 /dashboard(login/page.tsx:137)。
③ 个人设置页(品牌方视角)
B
个人设置
品牌方等2个
brand01
· id=118