feat(table): EnhancedTable align style #2118
Draft
Fiona2016 wants to merge 32 commits into
Draft
Conversation
EnhancedTable：继承 antd TableProps 全透传，传 rowActions 即自动生成固定右侧「操作」列（inline 放出文字链接 / menu 收进三点，danger 自动分割线+危险色）。视觉基线另走全局 theme/table.less。 样板表 taskTpl(/job-tpls)：操作列由 4 个内联 Link 改为 EnhancedTable 声明式 —— 立即执行放出、编辑/克隆/删除收进三点。迁移≈改标签名 + 一段 rowActions 配置。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- 移植共享 Tags 组件（components/TableTags/Tags，自适应 +N Popover）+ tags_popover_title i18n。 - taskTpl 取 0517 整表设计：标题列聚合(主标题+ID/业务组两行)、标签列 Tags(outline)、创建人两行、更新时间两行。 - 操作列改用 EnhancedTable 声明式 rowActions（立即执行放出、编辑/克隆/删除收三点）。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
只抽象「几乎每张表都一样」的 date/user/tags 三种列；标题等差异大的列继续手写。助手返回标准 antd column，可在同一 columns 数组里与手写列任意混用、任意覆盖。taskTpl 的 tags/创建人/时间三列由手写 render 改为助手调用（标题保持手写）。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add RowAction.icon (lucide map); menu items render icon+text, inline stays text-only. taskTpl: edit/copy/delete icons. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- taskTpl 卡片(fc-border rounded-lg p-4 flex:1) 加 overflow-y:auto，内容超高时卡片内滚动，圆角边框始终包住分页（不再溢出底边）。通用写法，铺开时统一处理。 - EnhancedTable 操作列单元格 justify-content flex-end→flex-start，与左对齐的「操作」表头对齐。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Table -> EnhancedTable; operation column -> declarative rowActions (clone + delete in kebab menu, delete danger) - datasource_ids: @/components/Tags -> rich @/components/TableTags/Tags (width=70 -> maxWidth=120, auto-fit +N popover) - update_at -> dateColumn (two-line date/time) - keep hand-written: group_id, note, cate logo, tag-expr column, cause, time(expired/periodic), update_by, enabled switch Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Ported back the global table baseline that was lost when 0601 was rebuilt from main (the file the EnhancedTable comment already references): - fixed-column bleed fix: opaque bg (--fc-fill-2 / hover --fc-fill-2-5) + z-index layering on .ant-table-cell-fix-*; overrides n9e's translucent row-hover bg (rgb(var(--fc-fill-5-rgb)/0.2)) which caused scrolled content to bleed through fixed columns. Covers light + dark, no !important. - design-system sort/filter icons (lucide masks), non-gold; gold theme keeps its own sorter icons. - import wired in theme/index.less; removed the now-superseded antd caret sorter block from App.less (matches 0517). Verified on /alert-mutes: compiles, fixed cell opaque on hover+scroll (z-index 6/7/8 applied), no bleed. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…obal sorter icon restyle The 0517 sort/filter icon restyle (hover-expands sorter 0->24px) is a global rule; on un-migrated auto-width tables (e.g. /alert-rules) it makes the sortable header width jump on hover (118px->164px). That restyle isn't needed for the fixed-column bleed fix, so keep only the fixed-column block and restore App.less's default antd caret sorter. Sort/filter icon baseline deferred to a dedicated step (to be scoped to .fc-enhanced-table or applied per-table with reserved widths). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The 标签 column rendered filter expressions as plain divs; switch to the
shared Tags component (outline, maxWidth 180), mapping each {key,func,value}
to a tag pill — matches jser's 0517 shield table.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Fiona2016
changed the title
Mirror jser's 0517 restructure of the alert-rules table: - 状态: bare icon -> filled-color pill (Tags fill, red/green, lucide icon), clickable -> events drawer - 名称: fold 业务组 column into name as a second (soft) line - 数据源: fold 类型(cate) logo inline + rich Tags (outline, +N) - 级别: rich Tags fill with S1/S2/S3 color map - 附加标签 / 通知对象 / 通知规则: rich Tags (outline) - 更新时间: dateColumn (two-line date/time) - 用户名: userColumn (two-line user+nickname), drop separate 昵称 column - 操作: inline links -> EnhancedTable rowActions kebab (clone / brain conditional / delete danger) - constants.ts: column-config updated (drop cate + update_by_nickname, reorder datasource_ids after severities) - add status_triggered / status_normal / notify_rule_not_found i18n (5 locales) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…able Add the design-system table-style-preview sort entry (ArrowUpDown / ArrowUp / ArrowDown lucide masks) to sortable headers, but ONLY within .fc-enhanced-table (migrated tables); un-migrated tables keep App.less default antd carets. Jitter-free unlike the earlier global attempt: the icon hit-area reserves a constant 24px width and toggles only opacity (0 idle -> 1 on header hover or when sorted), so sortable column widths never shift on hover. Verified on /alert-rules 更新时间: width 100px idle == 100px sorted. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Fix three mismatches vs table-style-preview: - snug to text: style .ant-table-column-sorters (inline-flex, gap 6px) and .ant-table-column-title (no grow) so the icon sits right after the header text instead of floating to the column's right edge - icon glyph: use the preview's exact lucide paths (24-viewBox, stroke-2) for ArrowUpDown/ArrowUp/ArrowDown instead of the 0517 14-viewBox variant - hover/active background: ghost-quaternary-xs states — hover fill-5/0.4 + text-2, active fill-5/0.7 + text-1, sorted text-3 (transparent), sorted+hover fill-5/0.4 Still scoped to .fc-enhanced-table, 24px hit-area + opacity-only (no jitter). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…tem) Two preview mismatches reported: - hovering a sortable column header showed no background -> add thead th:hover background rgb(var(--fc-fill-5-rgb)/0.4) (design-system thead th:hover) and the sorted-column background (.ant-table-column-sort, = preview th:has(.is-sorted)) - the sort icon's own hover box looked like a lone floating rect because the column-header highlight was missing; with the header bg present it nests correctly, matching the preview Scoped to .fc-enhanced-table; excludes fixed-column headers so the translucent hover bg can't re-introduce the fixed-column bleed. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Correct the header-bg behavior to match design-system preview + spec: - hover ANY column header (incl. non-sortable) -> fill-5/0.4. antd v4 only applies hover bg to sortable headers (@table-header-sort-active-bg) and has no token for arbitrary-header hover, so this is CSS (scoped, excludes fixed cols to avoid bleed). - sorted column gets NO extra background: rely on antd token @table-header-sort-bg = var(--fc-fill-2-5) (== header bg, invisible); removed my earlier wrong override that painted sorted columns fill-5/0.4. Research note: table colors are already antd-v4 tokens via vite.config.ts modifyVars (table-header-sort-active-bg / -sort-bg / row-hover-bg / etc.); only the no-token gaps stay in CSS. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Change antd-v4 token table-header-sort-bg from var(--fc-fill-2-5) (invisible) to rgb(var(--fc-fill-5-rgb)/0.4) so sorted column headers are visually distinguished (aligns design-system th:has(.is-sorted)). Token layer, not CSS; applies on dev-server restart (vite modifyVars read at startup). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Table -> EnhancedTable; declarative rowActions: inline 执行记录 link + kebab (clone/edit/delete danger), matching 0517 收/放. - use_case/trigger_mode -> outline Tags; disabled -> green/red fill pill. - teams/update_by/update_at -> tagsColumn/userColumn/dateColumn helpers. - surface use_case + trigger_mode filters (align 0517; uses pre-existing fields + locale keys, no new strings). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…e column
- New reusable EllipsisText: single-line truncate (no wrap), full text in a
tooltip on hover, shown only when actually overflowing (lazy measure on hover
via controlled Tooltip).
- Apply to event-pipelines 备注 column with ellipsis:{showTitle:false}, which
flips antd to fixed table-layout so the cell is bounded and truncation engages.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- antd v4 Tooltip color + overlayInnerStyle (no global CSS, scoped to this tooltip): background var(--fc-fill-2), text var(--fc-text-1), border var(--fc-border-color). Tokens auto-flip, so dark mode renders a dark surface + light text. color also drives the arrow (--antd-arrow-bg). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Table -> EnhancedTable; keep the two header filters (type + status funnels) and sorters untouched. - Operations collapse into rowActions kebab: enable/disable (settings), cloudwatch label-mapping (conditional), delete (danger, only when disabled). - Extend RowAction with optional node: render a custom menu item as-is (used for the cloudwatch LabelMapping parcel button). text now optional. - enable/disable uses Modal.confirm (rowActions has no Popconfirm slot; same UX as delete). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- table-body-sort-bg -> transparent: sorted column body cells no longer get a per-column tint (only the header tints; body follows row hover/selection), matching the design-system table spec. Fixes the inconsistency where a default-sorted column looked different from the rest. - Filter funnel: swap antd's solid funnel for the design-system lucide Funnel (14px mask), 24px ghost hit-area, hidden until header-hover/open/filtered, violet-9 when filtered; scoped to .fc-enhanced-table. - Move the funnel next to the sort icon (filter-column flex-start) instead of antd's far-right space-between. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ign 0517)
Sweep of all remaining fe list tables jser reworked in 0517, mapped to the
0601 abstractions: Table -> EnhancedTable, operations column -> declarative
rowActions (inline 收/放 + kebab menu, danger delete, conditional via _.compact,
bespoke items via node), column helpers (tags/user/date) where shapes match,
note/description columns -> EllipsisText + ellipsis:{showTitle:false}.
Done via multi-agent workflow (one agent per file, each aligned to its 0517
reference). No shared components / theme / global locale touched. tsc clean.
Files: aiConfig (agents/llmConfigs/mcpServers/skills), alertCurEvent, builtIn
(AlertRules/CollectTpls/Dashboards/Metrics), contacts (+component +help), dashboard,
embeddedProduct, event, historyEvents, log/IndexPatterns, metricsBuiltin,
notificationChannels (List/ListNG), notificationRules, recordingRules, task
(index/result), user (business/groups/users), variableConfigs, warning/subscribe.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Root cause: a disabled <Button> wrapped in <Tooltip> (the node hack used for
llm-configs/mcp-servers delete) makes antd move the button's className onto a
compat <span>, so .fc-table-action-menu-btn/.is-danger fell off -> delete
rendered with antd default styling (grey rgba, 12px pad, no danger color,
misaligned vs edit) and the tooltip never fired on the disabled button.
- EnhancedTable: add RowAction.tooltip; render tooltip items as
<Tooltip><span>{button}</span></Tooltip> with the Menu.Item left enabled, so
the hint shows even when the button is disabled and the button keeps its classes.
- llm-configs/mcp-servers: drop the node hack -> plain {icon:'delete',danger,
disabled,tooltip} item (aligned, danger-colored, working hint).
- agents/notification-channels ListNG: restore the dropped disable hints via tooltip.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Add size='small' to the 启用 Switch in contacts/List, help Channels, help Contacts (were default-size, bigger than every other table; pre-existing, surfaced during redesign review). - Metrics clone/edit menu items: bare <a> (no icon, misaligned) -> styled fc-table-action-menu-btn Button with lucide Copy/Pencil, matching other kebab items. FormModal's own wrapper handles the open click, so the trigger swap is safe. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The 0517 redesign added an eventColumnExpanded toggle (collapse the event_name tags to the first 3 + a +N more-tag, expand to show all). The EnhancedTable sweep dropped it on this table (the agent deemed it out-of-scope). Restore it, aligning with 0517: - AlertTable: eventColumnExpanded prop; tags.slice(0,3) + alert-event-more-tag when collapsed; alert-event-tags is-expanded/is-collapsed classes. - List/index: eventColumnExpanded state + toolbar toggle (ListChevrons icons, common:btn.expand/collapse) passed to AlertTable. - style.less: alert-event-summary-toolbar/-expand-btn/-content/-title/-tags. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- raise sorter z-index above .ant-table-column-sorters so hover reaches it - re-assert sorter color over antd's hover-grey rule; add hover pill like the funnel - bump default-arrow stroke-width to 2.4 and tighten sort/filter icon viewBoxes Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…filter funnel spacing - white-space:nowrap on .ant-table-column-title so non-ellipsis CJK headers (更新人/启用/周期) don't wrap char-by-char under sort/filter icons - shrink .ant-table-filter-column .ant-table-column-sorters to flex:0 1 auto so the funnel sits right after the sort icon instead of overflowing/clipped
- 公共 Tags 组件新增 maxCount prop：设置后只展示前 N 个 + 溢出弹层（与按宽度自适应互斥），用于和旧的「前 N 个 + N」逻辑对齐 - 告警事件 AlertTable 标签列收起态改用 Tags maxCount=3，替换原手写 slice(0,3)+纯 +N： - +N 获得悬浮弹层（展示全部标签 + 复制按钮），原手写版无任何 hover - maxCount=3 对齐原展示，且只渲染 3 个标签避免 +N 溢到右侧固定列后面 - 展开态仍内联铺开全部标签；单击标签加入筛选 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
列 ellipsis 会把 tableLayout 切成 fixed，窄屏下无宽度列被无限压缩； 改 EllipsisText+maxWidth(对齐 plus 口径)，并加 scroll x max-content， 变窄时走横向滚动、操作列吸右带阴影。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
背景
table改为从 main 重开，按统一架构重做。** 旧 PR（#2102 等）已关闭。
方案
TableProps全透传（rowSelection/scroll/components…）；传rowActions即自动生成固定右侧「操作」列（inline 放出文字 / menu 收三点，danger 自动分割线+危险色）。迁移≈把<Table>改名为<EnhancedTable>。EnhancedTable/columns）：tagsColumn/userColumn/dateColumn—— 只抽「几乎每张表都一样」的三种列，返回标准 antd column，可与手写列任意混用、任意覆盖；标题等差异大的列继续手写。+NPopover 的Tags组件。theme/table.less—— 排序/筛选图标、固定列穿透修复、gold 主题排除。已完成
tags_popover_titlei18n。进行中（draft）
theme/table.less视觉基线。🤖 Generated with Claude Code