feat(frontend): implement SectionAnchorTabs for improved navigation
- Replaced the existing navigation in PromptEditor and PanelAnchorNavigation with the new SectionAnchorTabs component for better code reuse and consistency. - The SectionAnchorTabs component provides a shared interface for section navigation with equal-width columns and an active state indicator.
This commit is contained in:
@@ -30,6 +30,7 @@ import {
|
||||
ToolPicker,
|
||||
} from "@/components/assistant-editor/editor-controls";
|
||||
import type { AssistantForm } from "@/components/assistant-editor/types";
|
||||
import { SectionAnchorTabs } from "@/components/editor/section-anchor-tabs";
|
||||
import { SectionCard } from "@/components/editor/section-card";
|
||||
import { VisionConfigSection } from "@/components/editor/vision-config-section";
|
||||
import { TurnConfigEditor } from "@/components/turn-config-editor";
|
||||
@@ -315,35 +316,18 @@ export function PromptEditor({
|
||||
className="flex h-full min-h-0 overflow-hidden bg-background"
|
||||
>
|
||||
<div className="flex min-h-0 min-w-0 flex-1 flex-col">
|
||||
<nav
|
||||
aria-label="提示词配置分区"
|
||||
className="shrink-0 overflow-x-auto overscroll-none bg-background px-4 pt-3 sm:px-6 sm:pt-4 lg:px-8"
|
||||
>
|
||||
<div className={debugOpen ? "w-full" : "mx-auto w-full max-w-7xl"}>
|
||||
<div className="grid min-w-[28rem] grid-cols-5 border-b border-hairline">
|
||||
{promptSections.map((section) => {
|
||||
const active = activeSection === section.id;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={section.id}
|
||||
type="button"
|
||||
aria-current={active ? "location" : undefined}
|
||||
onClick={() => scrollToSection(section.id)}
|
||||
className={[
|
||||
"-mb-px whitespace-nowrap border-b-2 px-2 py-2.5 text-center text-xs transition-colors sm:px-3 sm:text-sm",
|
||||
active
|
||||
? "border-primary text-foreground"
|
||||
: "border-transparent text-muted-foreground hover:bg-surface-strong/50 hover:text-foreground",
|
||||
].join(" ")}
|
||||
>
|
||||
{section.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<SectionAnchorTabs
|
||||
ariaLabel="提示词配置分区"
|
||||
sections={promptSections}
|
||||
activeSectionId={activeSection}
|
||||
onSelect={(sectionId) =>
|
||||
scrollToSection(sectionId as PromptSectionId)
|
||||
}
|
||||
className="bg-background px-4 pt-3 sm:px-6 sm:pt-4 lg:px-8"
|
||||
contentClassName={
|
||||
debugOpen ? "w-full" : "mx-auto w-full max-w-7xl"
|
||||
}
|
||||
/>
|
||||
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
|
||||
Reference in New Issue
Block a user