[feat]:[FL-152][角色管理页面一致性优化]

Co-authored-by: multica-agent <github@multica.ai>

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 语义。

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}