From aa72c522c2f04a88047af8ac4c14a6fa69170f2c Mon Sep 17 00:00:00 2001
From: Eric Wang <wangx184@chinatelecom.cn>
Date: Wed, 5 Aug 2026 10:00:16 +0800
Subject: [PATCH] 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.
---
 .../assistant-editor/prompt-editor.tsx        | 42 ++++------
 .../components/editor/section-anchor-tabs.tsx | 78 +++++++++++++++++++
 .../workflow/panels/PanelAnchorNavigation.tsx | 36 +++------
 3 files changed, 100 insertions(+), 56 deletions(-)
 create mode 100644 frontend/src/components/editor/section-anchor-tabs.tsx

diff --git a/frontend/src/components/assistant-editor/prompt-editor.tsx b/frontend/src/components/assistant-editor/prompt-editor.tsx
index ac87add..08a5474 100644
--- a/frontend/src/components/assistant-editor/prompt-editor.tsx
+++ b/frontend/src/components/assistant-editor/prompt-editor.tsx
@@ -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}
diff --git a/frontend/src/components/editor/section-anchor-tabs.tsx b/frontend/src/components/editor/section-anchor-tabs.tsx
new file mode 100644
index 0000000..6779505
--- /dev/null
+++ b/frontend/src/components/editor/section-anchor-tabs.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+/**
+ * Shared underline section tabs for prompt editor and workflow side panels.
+ * Equal-width columns; active state is a primary bottom border (not pill Tabs).
+ */
+
+import { cn } from "@/lib/utils";
+
+export type SectionAnchorTab = {
+  id: string;
+  label: string;
+};
+
+export function SectionAnchorTabs({
+  ariaLabel,
+  sections,
+  activeSectionId,
+  onSelect,
+  className,
+  contentClassName,
+}: {
+  ariaLabel: string;
+  sections: readonly SectionAnchorTab[];
+  activeSectionId: string;
+  onSelect: (sectionId: string) => void;
+  className?: string;
+  /** Optional width/centering wrapper around the tab row (prompt page uses max-w-7xl). */
+  contentClassName?: string;
+}) {
+  if (sections.length === 0) return null;
+
+  const list = (
+    <div
+      // w-full matters inside overflow-x-auto parents: without it the grid
+      // shrink-wraps to minWidth and tabs look left-clustered.
+      className="grid w-full border-b border-hairline"
+      style={{
+        gridTemplateColumns: `repeat(${sections.length}, minmax(0, 1fr))`,
+        minWidth: `${Math.max(sections.length * 5.6, 12)}rem`,
+      }}
+    >
+      {sections.map((section) => {
+        const active = activeSectionId === section.id;
+
+        return (
+          <button
+            key={section.id}
+            type="button"
+            aria-current={active ? "location" : undefined}
+            onClick={() => onSelect(section.id)}
+            className={cn(
+              "-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",
+            )}
+          >
+            {section.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+
+  return (
+    <nav
+      aria-label={ariaLabel}
+      className={cn("shrink-0 overflow-x-auto overscroll-none", className)}
+    >
+      {contentClassName ? (
+        <div className={contentClassName}>{list}</div>
+      ) : (
+        list
+      )}
+    </nav>
+  );
+}
diff --git a/frontend/src/components/workflow/panels/PanelAnchorNavigation.tsx b/frontend/src/components/workflow/panels/PanelAnchorNavigation.tsx
index 0294dd0..c3922fa 100644
--- a/frontend/src/components/workflow/panels/PanelAnchorNavigation.tsx
+++ b/frontend/src/components/workflow/panels/PanelAnchorNavigation.tsx
@@ -3,6 +3,8 @@
 import type { ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 
+import { SectionAnchorTabs } from "@/components/editor/section-anchor-tabs";
+
 export type PanelAnchorSection = {
   id: string;
   label: string;
@@ -128,33 +130,13 @@ export function PanelAnchorNavigation({
   return (
     <div className="flex min-h-0 flex-1 flex-col bg-canvas-soft">
       {sections.length > 1 && (
-        <nav
-          aria-label={ariaLabel}
-          className="shrink-0 overflow-x-auto overscroll-none border-b border-hairline bg-card px-4"
-        >
-          <div className="flex min-w-max">
-            {sections.map((section) => {
-              const active = resolvedActiveSection === section.id;
-
-              return (
-                <button
-                  key={section.id}
-                  type="button"
-                  aria-current={active ? "location" : undefined}
-                  onClick={() => scrollToSection(section.id)}
-                  className={[
-                    "-mb-px min-w-24 whitespace-nowrap border-b-2 px-3 py-2.5 text-center text-xs transition-colors",
-                    active
-                      ? "border-primary text-foreground"
-                      : "border-transparent text-muted-foreground hover:bg-surface-strong/50 hover:text-foreground",
-                  ].join(" ")}
-                >
-                  {section.label}
-                </button>
-              );
-            })}
-          </div>
-        </nav>
+        <SectionAnchorTabs
+          ariaLabel={ariaLabel}
+          sections={sections}
+          activeSectionId={resolvedActiveSection}
+          onSelect={scrollToSection}
+          className="bg-card px-4"
+        />
       )}
 
       <div