From 2c1a4cd3615f624fe039d7e073ab75a6f9f1dd4d Mon Sep 17 00:00:00 2001
From: chengkai3 <chengkai3@asiainfo.com>
Date: Sat, 20 Jun 2026 01:00:00 +0800
Subject: [PATCH] =?UTF-8?q?[feat]:[FL-152][=E8=A7=92=E8=89=B2=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2=E4=B8=80=E8=87=B4=E6=80=A7=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: multica-agent <github@multica.ai>
---
 memory/2026-06-20.md             | 19 +++++++++++++++++++
 web/src/app/admin/roles/page.tsx | 24 ++++++++++++++++++++----
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/memory/2026-06-20.md b/memory/2026-06-20.md
index 762d3a0..982c2d1 100644
--- a/memory/2026-06-20.md
+++ b/memory/2026-06-20.md
@@ -17,3 +17,22 @@
 
 - 风险与关注点：
   - 改动仅影响菜单管理页前端展示与提示机制，不改变菜单接口、字段结构或权限语义。
+
+# Work Log - 角色管理页对齐用户管理页规范（FL-152）
+
+- 背景：
+  - 角色管理页需对齐用户管理页的后台列表页布局、移动卡片、操作区换行和反馈规范。
+
+- 本次处理：
+  - 角色表格操作区改为与用户管理页一致的 `Space wrap`，避免小屏或窄列下按钮挤压。
+  - 角色移动卡片标题改为名称 + 编码横向信息结构，并补齐“角色编码 / 角色名称 / 菜单”字段网格，视觉和信息密度对齐用户移动卡片。
+  - 角色菜单多选保留现有接口与字段结构，不改动后端 RBAC 合约。
+
+- 验证：
+  - 基线：`npm --workspace web exec eslint src/app/admin/users/page.tsx src/app/admin/roles/page.tsx` 通过，仅用户页存在 1 条既有 unused eslint-disable warning。
+  - 修改后：`npm --workspace web exec eslint src/app/admin/roles/page.tsx --max-warnings=0` 通过。
+  - 修改后：`npm --workspace web exec eslint src/app/admin/users/page.tsx src/app/admin/roles/page.tsx` 通过，仍仅用户页 1 条既有 warning。
+  - 修改后：`npm --workspace web exec tsc --noEmit` 通过。
+
+- 风险与关注点：
+  - 改动仅影响角色管理页前端展示与交互排布，不改变接口路径、请求/响应字段、权限判断或角色 CRUD 语义。
diff --git a/web/src/app/admin/roles/page.tsx b/web/src/app/admin/roles/page.tsx
index 6a0aa19..33ae5b3 100644
--- a/web/src/app/admin/roles/page.tsx
+++ b/web/src/app/admin/roles/page.tsx
@@ -430,7 +430,7 @@ export default function AdminRolesPage() {
           const rowBusy = isDeleting || isSaving || createRoleMutation.isPending || updateRoleMutation.isPending;
 
           return (
-            <Space size="small">
+            <Space wrap>
               <Button
                 size="small"
                 disabled={rowBusy}
@@ -499,9 +499,11 @@ export default function AdminRolesPage() {
         className="admin-roles-role-card"
         size="small"
         title={
-          <Space direction="vertical" size={0}>
-            <Typography.Text strong>{role.name}</Typography.Text>
-            <Typography.Text type="secondary" style={{ fontSize: '12px' }}>
+          <Space className="min-w-0" size={8}>
+            <Typography.Text strong ellipsis={{ tooltip: role.name }}>
+              {role.name}
+            </Typography.Text>
+            <Typography.Text type="secondary" ellipsis={{ tooltip: role.code }}>
               {role.code}
             </Typography.Text>
           </Space>
@@ -529,6 +531,18 @@ export default function AdminRolesPage() {
         }
       >
         <Space direction="vertical" size={10} style={{ width: "100%" }}>
+          <div className="admin-roles-role-card-field">
+            <Typography.Text type="secondary">角色编码</Typography.Text>
+            <Typography.Text ellipsis={{ tooltip: role.code }}>
+              {role.code}
+            </Typography.Text>
+          </div>
+          <div className="admin-roles-role-card-field">
+            <Typography.Text type="secondary">角色名称</Typography.Text>
+            <Typography.Text ellipsis={{ tooltip: role.name }}>
+              {role.name}
+            </Typography.Text>
+          </div>
           <div className="admin-roles-role-card-field">
             <Typography.Text type="secondary">菜单</Typography.Text>
             <Typography.Text
@@ -785,6 +799,7 @@ export default function AdminRolesPage() {
           confirmLoading={createRoleMutation.isPending || updateRoleMutation.isPending}
           onCancel={closeDialog}
           onOk={() => void submit()}
+          width={760}
         >
           <Form<RoleFormValues>
             form={form}
@@ -821,6 +836,7 @@ export default function AdminRolesPage() {
                 <Form.Item label="可见菜单" name="menu_ids">
                   <Select
                     allowClear
+                    showSearch
                     mode="multiple"
                     optionFilterProp="label"
                     options={menuOptions}