feat: Add navigation buttons for channel edit form sections - #1844
Merged
seefs001 merged 3 commits intoOct 2, 2025
Conversation
Contributor
|
Caution Review failedThe pull request is closed. WalkthroughAdds section-based navigation to the EditChannelModal: per-section refs, currentSectionIndex and navigation helpers, 2FA verification state, a form container ref, and Up/Down chevron footer controls to scroll between sections. Navigation state resets on open/close and when relevant modal state updates. Changes
Sequence Diagram(s)sequenceDiagram
actor U as User
participant M as EditChannelModal
participant R as Section Refs
participant V as Viewport
U->>M: Open modal
activate M
M->>M: reset currentSectionIndex = 0
M->>R: attach refs to sections (basicInfo, apiConfig?, modelConfig, advancedSettings, channelExtraSettings)
M->>V: scrollToSection(0)
U->>M: Click ChevronDown
alt next section available
M->>M: currentSectionIndex++
M->>R: resolve target ref
M->>V: scrollToSection(target)
else no next
M->>M: noop
end
U->>M: Click ChevronUp
alt previous section available
M->>M: currentSectionIndex--
M->>R: resolve target ref
M->>V: scrollToSection(target)
else no previous
M->>M: noop
end
U->>M: Close/Reset modal
M->>M: reset currentSectionIndex = 0
deactivate M
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
web/src/components/table/channels/modals/EditChannelModal.jsx(11 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-08-27T02:15:25.448Z
Learnt from: AAEE86
PR: QuantumNous/new-api#1658
File: web/src/components/table/channels/modals/EditChannelModal.jsx:555-569
Timestamp: 2025-08-27T02:15:25.448Z
Learning: In EditChannelModal.jsx, the applyModelMapping function transforms the models list by replacing original model names (mapping values) with display names (mapping keys). The database stores this transformed list containing mapped keys. On channel load, data.models contains these mapped display names, making the initialization filter if (data.models.includes(key)) correct.
Applied to files:
web/src/components/table/channels/modals/EditChannelModal.jsx
Comment on lines
+256
to
+273
| const navigateToSection = (direction) => { | ||
| const availableSections = formSections.filter(section => { | ||
| if (section === 'apiConfig') { | ||
| return showApiConfigCard; | ||
| } | ||
| return true; | ||
| }); | ||
|
|
||
| let newIndex; | ||
| if (direction === 'up') { | ||
| newIndex = currentSectionIndex > 0 ? currentSectionIndex - 1 : availableSections.length - 1; | ||
| } else { | ||
| newIndex = currentSectionIndex < availableSections.length - 1 ? currentSectionIndex + 1 : 0; | ||
| } | ||
|
|
||
| setCurrentSectionIndex(newIndex); | ||
| scrollToSection(availableSections[newIndex]); | ||
| }; |
Contributor
There was a problem hiding this comment.
Fix navigation index when sections collapse.
When showApiConfigCard flips to false the buttons should skip the API block, but currentSectionIndex still points to the old slot from formSections. Pressing Down in that state jumps straight from “基本信息” to “高级设置”, because we increment a stale index. Same problem exists for the Up button.
Please normalise the current position against availableSections before advancing and then persist the canonical index (or switch to storing the section key). One way to address it:
- let newIndex;
- if (direction === 'up') {
- newIndex = currentSectionIndex > 0 ? currentSectionIndex - 1 : availableSections.length - 1;
- } else {
- newIndex = currentSectionIndex < availableSections.length - 1 ? currentSectionIndex + 1 : 0;
- }
-
- setCurrentSectionIndex(newIndex);
- scrollToSection(availableSections[newIndex]);
+ const currentKey = formSections[currentSectionIndex];
+ const normalizedIndex = Math.max(
+ availableSections.indexOf(currentKey),
+ 0,
+ );
+
+ let newIndex;
+ if (direction === 'up') {
+ newIndex =
+ normalizedIndex > 0
+ ? normalizedIndex - 1
+ : availableSections.length - 1;
+ } else {
+ newIndex =
+ normalizedIndex < availableSections.length - 1
+ ? normalizedIndex + 1
+ : 0;
+ }
+
+ const targetKey = availableSections[newIndex] ?? availableSections[0];
+ if (!targetKey) {
+ return;
+ }
+ setCurrentSectionIndex(formSections.indexOf(targetKey));
+ scrollToSection(targetKey);This keeps navigation aligned with the filtered list and prevents skipping sections.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const navigateToSection = (direction) => { | |
| const availableSections = formSections.filter(section => { | |
| if (section === 'apiConfig') { | |
| return showApiConfigCard; | |
| } | |
| return true; | |
| }); | |
| let newIndex; | |
| if (direction === 'up') { | |
| newIndex = currentSectionIndex > 0 ? currentSectionIndex - 1 : availableSections.length - 1; | |
| } else { | |
| newIndex = currentSectionIndex < availableSections.length - 1 ? currentSectionIndex + 1 : 0; | |
| } | |
| setCurrentSectionIndex(newIndex); | |
| scrollToSection(availableSections[newIndex]); | |
| }; | |
| const navigateToSection = (direction) => { | |
| const availableSections = formSections.filter(section => { | |
| if (section === 'apiConfig') { | |
| return showApiConfigCard; | |
| } | |
| return true; | |
| }); | |
| const currentKey = formSections[currentSectionIndex]; | |
| const normalizedIndex = Math.max( | |
| availableSections.indexOf(currentKey), | |
| 0, | |
| ); | |
| let newIndex; | |
| if (direction === 'up') { | |
| newIndex = | |
| normalizedIndex > 0 | |
| ? normalizedIndex - 1 | |
| : availableSections.length - 1; | |
| } else { | |
| newIndex = | |
| normalizedIndex < availableSections.length - 1 | |
| ? normalizedIndex + 1 | |
| : 0; | |
| } | |
| const targetKey = availableSections[newIndex] ?? availableSections[0]; | |
| if (!targetKey) { | |
| return; | |
| } | |
| setCurrentSectionIndex(formSections.indexOf(targetKey)); | |
| scrollToSection(targetKey); | |
| }; |
🤖 Prompt for AI Agents
In web/src/components/table/channels/modals/EditChannelModal.jsx around lines
256-273, the navigation uses a stale currentSectionIndex from the full
formSections list when showApiConfigCard toggles off, causing jumps; normalize
the current position against the filtered availableSections before advancing:
compute the current section key (e.g. formSections[currentSectionIndex]), find
its index in availableSections (fallback to 0 if missing), use that normalized
index to compute the up/down newIndex, then call
setCurrentSectionIndex(newIndex) and
scrollToSection(availableSections[newIndex]); alternatively persist section
selection by key instead of an index so toggling sections cannot leave an
invalid index.
x22x22
pushed a commit
to x22x22/new-api
that referenced
this pull request
Apr 24, 2026
…l-block-edit feat: Add navigation buttons for channel edit form sections
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
2 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.
Why / 为什么
The channel creation/editing form has become quite long with multiple configuration sections
(Basic Info, API Config, Model Config, Advanced Settings, Channel Extra Settings). Users need to
scroll extensively to navigate between different form sections, which creates a poor user
experience when filling out or reviewing channel configurations.
渠道新增、编辑表单现在很长，包含多个配置区块（基本信息、API配置、模型配置、高级设置、渠道额外设置
）。用户需要大量滚动才能在不同表单区块间导航，在填写或查看渠道配置时用户体验较差。
What / 做了什么
Summary by CodeRabbit