优化角色管理页面展示与表格高度

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

memory/2026-05-03.md

@@ -445,3 +445,27 @@
     - `fl/执行目录-2025-11-20/Primary/LP_GanTa.txt`
     - `fl/执行目录-2025-11-20/Models`
   - 若运行环境无上述目录，`/api/v1/tower-models/seed/legacy` 将按设计返回 404 提示缺失来源。
+
+## Work Log - 角色管理页面优化（2026-05-03）
+
+- 背景：
+  - Issue `FL-196` 要求优化角色管理页面展示：
+    - 去掉“共 X 个角色”统计文案；
+    - 菜单列不要多行，超长需展示数量后省略；
+    - 表格高度对齐菜单管理页，避免页面出现总线滚动条。
+
+- 本次改动（最小闭环）：
+  - 文件：`web/src/app/admin/roles/page.tsx`
+  - 调整点：
+    - 删除角色列表顶部“共 X 个角色/匹配 X 个”文案。
+    - 将“菜单”列由 `Tag` 多行换行展示改为单行文本展示：
+      - 最多显示前 2 个菜单名；
+      - 超过 2 个时展示为“前2项 + 等N个...”；
+      - 保留 `title` 完整文本用于悬浮查看。
+    - 角色页表格高度参数与菜单管理页对齐：
+      - `ROLE_TABLE_VIEWPORT_GAP` 从 `8` 调整为 `40`；
+      - 分页增加 `style: { marginBottom: 0 }`，减少底部多余留白。
+
+- 风险与影响：
+  - 影响范围仅 `角色管理` 页面前端展示层，不涉及后端接口与数据结构。
+  - 菜单列文本改为汇总展示后，可读性更聚焦；完整菜单明细可通过悬浮提示查看。

web/src/app/admin/roles/page.tsx

@@ -17,7 +17,6 @@ import {
   Space,
   Spin,
   Table,
-  Tag,
   Typography,
   type CardProps,
 } from "antd";
@@ -46,7 +45,7 @@ const EMPTY_FORM: RoleFormValues = {
 };
 
 const ROLE_TABLE_MIN_SCROLL_Y = 180;
-const ROLE_TABLE_VIEWPORT_GAP = 8;
+const ROLE_TABLE_VIEWPORT_GAP = 40;
 const ROLE_TABLE_FALLBACK_RESERVE = 220;
 
 export default function AdminRolesPage() {
@@ -265,14 +264,25 @@ export default function AdminRolesPage() {
           if (value.length === 0) {
             return <Typography.Text type="secondary">未绑定菜单</Typography.Text>;
           }
+          const menuLabels = value.map((menuId) => menuNameById.get(menuId) ?? String(menuId));
+          const fullText = menuLabels.join("、");
+          const compactText = menuLabels.length > 2
+            ? `${menuLabels.slice(0, 2).join("、")}等${menuLabels.length}个...`
+            : fullText;
           return (
-            <Space wrap size={[4, 4]}>
-              {value.map((menuId) => (
-                <Tag color="blue" key={menuId}>
-                  {menuNameById.get(menuId) ?? String(menuId)}
-                </Tag>
-              ))}
-            </Space>
+            <Typography.Text
+              title={fullText}
+              style={{
+                display: "inline-block",
+                maxWidth: 420,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                verticalAlign: "bottom",
+              }}
+            >
+              {compactText}
+            </Typography.Text>
           );
         },
       },
@@ -441,9 +451,6 @@ export default function AdminRolesPage() {
             <Button onClick={() => setSearchKeyword("")}>重置筛选</Button>
           </Form.Item>
         </Form>
-        <Typography.Text type="secondary">
-          共 {roles.length} 个角色{searchKeyword.trim() ? `，匹配 ${filteredRoles.length} 个` : ""}
-        </Typography.Text>
         <div ref={tableScrollAnchorRef} className="mt-4">
           <Table<RoleItem>
             rowKey="id"
@@ -456,6 +463,7 @@ export default function AdminRolesPage() {
               showSizeChanger: true,
               pageSizeOptions: [10, 20, 50, 100],
               showTotal: (total) => `共 ${total} 条`,
+              style: { marginBottom: 0 },
             }}
             locale={{
               emptyText: <Empty description="未找到匹配角色，请调整搜索条件。" image={Empty.PRESENTED_IMAGE_SIMPLE} />,