⭐️ Add pages to Navigation

Phinease · Phinease · commit 91f3e8d8a109 · 2025-11-18T13:05:43.000+08:00
diff --git a/frontend/app/[locale]/models/ModelsContent.tsx b/frontend/app/[locale]/models/ModelsContent.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, {useEffect, useRef, useState} from "react";
+import React, {useRef, useState} from "react";
 import {App} from "antd";
 import {motion} from "framer-motion";
 
diff --git a/frontend/app/[locale]/setup/page.tsx b/frontend/app/[locale]/setup/page.tsx
@@ -147,7 +147,7 @@ export default function SetupPage() {
   return (
     <NavigationLayout
       contentMode="scrollable"
-      showFooter={true}
+      showFooter={false}
       topNavbarLeftContent={
         <SetupHeaderLeftContent
           title={t("setup.header.title")}
@@ -173,11 +173,9 @@ export default function SetupPage() {
         nextText={t("setup.navigation.button.next")}
         completeText={t("setup.navigation.button.complete")}
       >
-        
         {/* Render content based on current step */}
         {currentStep === "models" && isAdmin && (
           <ModelsContent
-            showNavigation={true}
             onNext={handleNext}
             connectionStatus={connectionStatus}
             isCheckingConnection={isCheckingConnection}
@@ -187,10 +185,6 @@ export default function SetupPage() {
 
         {currentStep === "knowledges" && (
           <KnowledgesContent
-            showNavigation={true}
-            onBack={handleBack}
-            onNext={isAdmin ? handleNext : undefined}
-            onComplete={!isAdmin ? handleComplete : undefined}
             isSaving={isSaving}
             connectionStatus={connectionStatus}
             isCheckingConnection={isCheckingConnection}
@@ -201,9 +195,6 @@ export default function SetupPage() {
 
         {currentStep === "agents" && isAdmin && (
           <AgentsContent
-            showNavigation={true}
-            onBack={handleBack}
-            onComplete={handleComplete}
             isSaving={isSaving}
             connectionStatus={connectionStatus}
             isCheckingConnection={isCheckingConnection}
diff --git a/frontend/components/homepage/HomepageContent.tsx b/frontend/components/homepage/HomepageContent.tsx
@@ -65,35 +65,59 @@ export function HomepageContent({
           transition={{ duration: 0.8, delay: 0.4 }}
           className="flex flex-col sm:flex-row gap-4"
         >
-          <Link
-            href={isSpeedMode || user ? "/chat" : "#"}
-            onClick={onAuthRequired}
-          >
-            <Button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-6 rounded-full text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300 group">
+          {/* Start Chat Button */}
+          {isSpeedMode || user ? (
+            <Link href="/chat">
+              <Button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-6 rounded-full text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300 group">
+                <Bot className="mr-2 h-5 w-5 group-hover:animate-pulse" />
+                {t("page.startChat")}
+              </Button>
+            </Link>
+          ) : (
+            <Button 
+              onClick={onAuthRequired}
+              className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-6 rounded-full text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300 group"
+            >
               <Bot className="mr-2 h-5 w-5 group-hover:animate-pulse" />
               {t("page.startChat")}
             </Button>
-          </Link>
+          )}
 
-          <Link
-            href={isSpeedMode || user?.role === "admin" ? "/setup" : "#"}
-            onClick={onAdminRequired}
-          >
-            <Button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-6 rounded-full text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300 group">
+          {/* Quick Config Button */}
+          {isSpeedMode || user?.role === "admin" ? (
+            <Link href="/setup">
+              <Button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-6 rounded-full text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300 group">
+                <Zap className="mr-2 h-5 w-5 group-hover:animate-pulse" />
+                {t("page.quickConfig")}
+              </Button>
+            </Link>
+          ) : (
+            <Button 
+              onClick={onAdminRequired}
+              className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-6 rounded-full text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300 group"
+            >
               <Zap className="mr-2 h-5 w-5 group-hover:animate-pulse" />
               {t("page.quickConfig")}
             </Button>
-          </Link>
+          )}
 
-          <Link
-            href={isSpeedMode || user ? "/space" : "#"}
-            onClick={onAuthRequired}
-          >
-            <Button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-6 rounded-full text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300 group">
+          {/* Agent Space Button */}
+          {isSpeedMode || user ? (
+            <Link href="/space">
+              <Button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-6 rounded-full text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300 group">
+                <Globe className="mr-2 h-5 w-5 group-hover:animate-pulse" />
+                {t("page.agentSpace")}
+              </Button>
+            </Link>
+          ) : (
+            <Button 
+              onClick={onAuthRequired}
+              className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-6 rounded-full text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300 group"
+            >
               <Globe className="mr-2 h-5 w-5 group-hover:animate-pulse" />
               {t("page.agentSpace")}
             </Button>
-          </Link>
+          )}
         </motion.div>
 
         {/* Data protection notice - only shown in full version */}
diff --git a/frontend/components/navigation/SideNavigation.tsx b/frontend/components/navigation/SideNavigation.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { usePathname } from "next/navigation";
 import { Layout, Menu, ConfigProvider, Button } from "antd";
 import {
   Bot,
@@ -28,6 +29,28 @@ interface SideNavigationProps {
   onAdminRequired?: () => void;
 }
 
+/**
+ * Get menu key based on current pathname
+ */
+function getMenuKeyFromPathname(pathname: string): string {
+  // Remove locale prefix (e.g., /zh/, /en/)
+  const segments = pathname.split('/').filter(Boolean);
+  const pathWithoutLocale = segments.length > 1 ? segments[1] : '';
+  
+  // Map paths to menu keys
+  const pathToKeyMap: Record<string, string> = {
+    '': '0',           // Home page
+    'chat': '1',       // Start chat
+    'setup': '2',      // Quick config
+    'space': '3',      // Agent space
+    'agents': '5',     // Agent dev
+    'knowledges': '6', // Knowledge base
+    'models': '7',     // Model management
+  };
+  
+  return pathToKeyMap[pathWithoutLocale] || '0';
+}
+
 /**
  * Side navigation component with collapsible menu
  * Displays main navigation items for the application
@@ -38,8 +61,15 @@ export function SideNavigation({
 }: SideNavigationProps) {
   const { t } = useTranslation("common");
   const { user, isSpeedMode } = useAuth();
+  const pathname = usePathname();
   const [collapsed, setCollapsed] = useState(false);
-  const [selectedKey, setSelectedKey] = useState("1");
+  const [selectedKey, setSelectedKey] = useState("0");
+  
+  // Update selected key when pathname changes
+  useEffect(() => {
+    const key = getMenuKeyFromPathname(pathname);
+    setSelectedKey(key);
+  }, [pathname]);
 
   // Menu items configuration
   const menuItems: MenuProps["items"] = [
