feat(web): 支持渠道列表手动调整列宽#5948
Merged
Calcium-Ion merged 4 commits intoJul 8, 2026
Merged
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
WalkthroughThis PR adds manual column resizing to the shared data table, persists column widths in browser storage, and enables it for the channels table with adjusted name-column sizing and layout. ChangesColumn Resizing Feature
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant ChannelsTable
participant DataTableHeader
participant useDataTable
participant localStorage
ChannelsTable->>useDataTable: enableColumnResizing + storage key
DataTableHeader->>useDataTable: onColumnSizingChange from drag/key resize
useDataTable->>localStorage: read and persist columnSizing
useDataTable-->>DataTableHeader: updated sizing state
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web/default/src/components/data-table/core/data-table-header.tsx`:
- Around line 65-79: The resize handle in data-table-header is mouse/touch only,
so make the separator keyboard operable. Update the inline separator element
returned by the header render path to add focusability and keyboard handling,
using the existing header.column resize/reset behavior from getResizeHandler()
and resetSize(). Add a sensible tab order and onKeyDown support for resize
actions and reset, while preserving the current aria-label/role='separator'
semantics.
In `@web/default/src/components/data-table/hooks/use-data-table.ts`:
- Around line 158-182: `readColumnSizing` currently accepts any positive
persisted width, which can let saved state تجاوز a column’s `minSize`/`maxSize`.
Update the hydration path in `use-data-table.ts` so each restored width is
validated against the matching column definition bounds before being returned.
Use the column metadata used by the table setup (especially the column
definitions that set `minSize`/`maxSize`, like the Channels name column) to
clamp or discard out-of-range values. Ensure only bounded widths are merged into
`ColumnSizingState`.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 8c830920-01e0-48bb-bb6a-09bbed8f9494
📒 Files selected for processing (5)
web/default/src/components/data-table/core/data-table-colgroup.tsxweb/default/src/components/data-table/core/data-table-header.tsxweb/default/src/components/data-table/hooks/use-data-table.tsweb/default/src/features/channels/components/channels-columns.tsxweb/default/src/features/channels/components/channels-table.tsx
Signed-off-by: zuiho <2324465096@qq.com>
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (2)
web/default/src/components/data-table/core/data-table-header.tsx (1)
66-84: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winExpose resize value on the focusable separator. Keyboard operability is now correctly handled (resolves the prior review), but a focusable
role="separator"acting as a resizer should follow the window-splitter pattern and exposearia-valuenow/aria-valuemin/aria-valuemaxso assistive tech can announce the current width during keyboard resizing.♿ Suggested ARIA additions
<div role='separator' aria-orientation='vertical' aria-label={t('Resize column')} + aria-valuenow={Math.round(header.column.getSize())} + aria-valuemin={header.column.columnDef.minSize} + aria-valuemax={header.column.columnDef.maxSize} tabIndex={0}As per path instructions, "add ARIA attributes when needed" for
web/default/**/*.tsxReact components.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/default/src/components/data-table/core/data-table-header.tsx` around lines 66 - 84, The focusable resize handle in data-table-header should expose the current size to assistive tech as a window-splitter style separator. Update the separator element in data-table-header.tsx (the one using shouldRenderColumnResizer, header.getResizeHandler, and handleColumnResizeKeyDown) to include aria-valuenow, aria-valuemin, and aria-valuemax based on the column’s resize bounds/current width, while keeping the existing keyboard resize behavior intact.Source: Path instructions
web/default/src/components/data-table/hooks/use-data-table.ts (1)
479-495: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winDebounce column-sizing persistence
columnResizeMode: 'onChange'updatescolumnSizingon every drag frame, so this effect does a synchronousJSON.stringify+localStorage.setItemper mousemove. Debounce the write or skip it while resizing is active.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/default/src/components/data-table/hooks/use-data-table.ts` around lines 479 - 495, The column-sizing persistence effect in useDataTable is writing to localStorage on every drag frame because it reacts directly to columnSizing changes. Update the React.useEffect logic to debounce the persistence work or gate it while resizing is active, so JSON.stringify and window.localStorage.setItem are not called on every mousemove. Keep the existing skipNextColumnSizingPersistRef and columnSizingStorageKey checks intact, and apply the fix within the useDataTable hook around the columnSizing persistence effect.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@web/default/src/components/data-table/core/data-table-header.tsx`:
- Around line 66-84: The focusable resize handle in data-table-header should
expose the current size to assistive tech as a window-splitter style separator.
Update the separator element in data-table-header.tsx (the one using
shouldRenderColumnResizer, header.getResizeHandler, and
handleColumnResizeKeyDown) to include aria-valuenow, aria-valuemin, and
aria-valuemax based on the column’s resize bounds/current width, while keeping
the existing keyboard resize behavior intact.
In `@web/default/src/components/data-table/hooks/use-data-table.ts`:
- Around line 479-495: The column-sizing persistence effect in useDataTable is
writing to localStorage on every drag frame because it reacts directly to
columnSizing changes. Update the React.useEffect logic to debounce the
persistence work or gate it while resizing is active, so JSON.stringify and
window.localStorage.setItem are not called on every mousemove. Keep the existing
skipNextColumnSizingPersistRef and columnSizingStorageKey checks intact, and
apply the fix within the useDataTable hook around the columnSizing persistence
effect.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 8ee30025-2759-4f35-bf18-3128809dd41f
📒 Files selected for processing (2)
web/default/src/components/data-table/core/data-table-header.tsxweb/default/src/components/data-table/hooks/use-data-table.ts
|
我也希望可以手动调整宽度 |
Signed-off-by: zuiho <2324465096@qq.com>
Member
|
拖拽的时候有localStorage 频繁写入的问题会很卡，然后移动端下可以禁用这个功能？ |
Contributor
Author
我看看优化一下，不行就ban了 |
Signed-off-by: zuiho <2324465096@qq.com>
Contributor
Author
|
@Calcium-Ion 做了250ms防抖+ban移动端 |
Calcium-Ion
approved these changes
Jul 8, 2026
Collaborator
渠道列表的默认宽度有点没充分利用可用宽度，可能要改下。 @zuiho-kai |
Contributor
Author
我的屏幕没那么宽。。，没发现，我改改 |
11 tasks
Contributor
Author
|
xiaomingchen
pushed a commit
to xiaomingchen/new-api
that referenced
this pull request
Jul 10, 2026
* 支持渠道表格列宽拖拽 * fix(web): address column resize review feedback * feat(web): auto-fit resized table columns * fix(web): reduce column resize persistence work --------- Signed-off-by: zuiho <2324465096@qq.com>
Jacobinwwey
pushed a commit
to Jacobinwwey/new-api
that referenced
this pull request
Jul 11, 2026
* 支持渠道表格列宽拖拽 * fix(web): address column resize review feedback * feat(web): auto-fit resized table columns * fix(web): reduce column resize persistence work --------- Signed-off-by: zuiho <2324465096@qq.com>
lizhongyi1209
pushed a commit
to lizhongyi1209/new-api
that referenced
this pull request
Jul 13, 2026
* 支持渠道表格列宽拖拽 * fix(web): address column resize review feedback * feat(web): auto-fit resized table columns * fix(web): reduce column resize persistence work --------- Signed-off-by: zuiho <2324465096@qq.com> (cherry picked from commit 8739c05)
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
4 participants
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.
Important
📝 变更描述 / Description
渠道列表的字段很多，渠道名称、模型、分组等内容也可能很长。固定列宽时，用户只能看到被截断后的内容，对比和排查渠道不方便。
本 PR 给渠道列表增加了可调整列宽：
实现上，列宽状态复用通用 DataTable 的 TanStack Table sizing 状态；只有渠道列表传入本地保存 key 并启用列宽调整，不影响未启用该能力的其他表格。
🚀 变更类型 / Type of change
🔗 关联任务 / Related Issue
✅ 提交前检查项 / Checklist
Bug fix。📸 运行证明 / Proof of Work
当前 PR head 已执行并通过：
Summary by CodeRabbit
New Features
Bug Fixes