From d5f23fe9ed01f1193fb0419208d6922e1e8550ac Mon Sep 17 00:00:00 2001
From: Jeff Gu <idevs@foxmail.com>
Date: Fri, 10 Apr 2026 14:54:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(routes):=20=E6=B7=BB=E5=8A=A0=E6=96=B0?=
 =?UTF-8?q?=E9=A2=91=E9=81=93=E5=92=8C=E4=BB=A4=E7=89=8C=E7=9A=84=E5=8F=97?=
 =?UTF-8?q?=E4=BF=9D=E6=8A=A4=E8=B7=AF=E7=94=B1=20feat(channels):=20?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=88=9B=E5=BB=BA=E6=A8=A1=E5=BC=8F=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=A1=A8=E5=8D=95=E5=A4=84=E7=90=86=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=20feat(tokens):=20=E6=94=AF=E6=8C=81=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E6=A8=A1=E5=BC=8F=EF=BC=8C=E4=BC=98=E5=8C=96=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91=20fix(sidebar):?=
 =?UTF-8?q?=20=E4=BF=AE=E5=A4=8D=E5=AF=BC=E8=88=AA=E9=93=BE=E6=8E=A5?=
 =?UTF-8?q?=E7=9A=84=E6=BF=80=E6=B4=BB=E7=8A=B6=E6=80=81=E5=88=A4=E6=96=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                       | 16 +++++++++
 frontend/src/components/layout/Sidebar.tsx |  2 +-
 frontend/src/pages/Channels.tsx            | 38 +++++++++++++++-----
 frontend/src/pages/Tokens.tsx              | 42 ++++++++++++++++------
 4 files changed, 77 insertions(+), 21 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5469c55..7d85e16 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -77,6 +77,14 @@ function App() {
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="/channels/new"
+              element={
+                <ProtectedRoute>
+                  <Channels createMode />
+                </ProtectedRoute>
+              }
+            />
             <Route
               path="/tokens"
               element={
@@ -85,6 +93,14 @@ function App() {
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="/tokens/new"
+              element={
+                <ProtectedRoute>
+                  <Tokens createMode />
+                </ProtectedRoute>
+              }
+            />
             <Route
               path="/pricing"
               element={
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 87da217..971d86a 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -80,7 +80,7 @@ export function Sidebar({
   };
 
   const NavLink = ({ item }: { item: NavItem }) => {
-    const isActive = location.pathname === item.href;
+    const isActive = location.pathname === item.href || location.pathname.startsWith(`${item.href}/`);
     return (
       <Link
         to={item.href}
diff --git a/frontend/src/pages/Channels.tsx b/frontend/src/pages/Channels.tsx
index 8455458..4120ac4 100644
--- a/frontend/src/pages/Channels.tsx
+++ b/frontend/src/pages/Channels.tsx
@@ -1,5 +1,6 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from 'react-router-dom'
 import { apiClient } from '@/api/client'
 import { Channel, ChannelConfig, ChannelModelMapping } from '@/types'
 import { Card, CardContent } from '@/components/ui/card'
@@ -365,8 +366,9 @@ const getChannelEndpointPreview = (type: string | undefined, endpoint: string):
   return buildFallbackEndpointPreview(trimmedEndpoint, requestPath)
 }
 
-export function Channels() {
-  const [view, setView] = useState<'list' | 'form'>('list')
+export function Channels({ createMode = false }: { createMode?: boolean }) {
+  const navigate = useNavigate()
+  const [view, setView] = useState<'list' | 'form'>(createMode ? 'form' : 'list')
   const [editMode, setEditMode] = useState<EditMode>('form')
   const [modelEditorMode, setModelEditorMode] = useState<ModelEditorMode>('visual')
   const [editingKey, setEditingKey] = useState<string | null>(null)
@@ -426,8 +428,7 @@ export function Channels() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['channels'] })
       addToast(editingKey ? '渠道更新成功' : '渠道添加成功', 'success')
-      resetForm()
-      setView('list')
+      closeForm()
     },
     onError: (error: Error) => {
       addToast('保存失败：' + error.message, 'error')
@@ -464,7 +465,7 @@ export function Channels() {
     },
   })
 
-  const resetForm = () => {
+  const resetForm = useCallback(() => {
     setFormData(createDefaultChannelFormData())
     setChannelKey('')
     setJsonValue('')
@@ -474,11 +475,30 @@ export function Channels() {
     setModelEditorMode('visual')
     setEditingKey(null)
     setEditMode('form')
+  }, [])
+
+  useEffect(() => {
+    if (createMode) {
+      resetForm()
+      setView('form')
+      return
+    }
+
+    setView('list')
+  }, [createMode, resetForm])
+
+  const closeForm = () => {
+    resetForm()
+    setView('list')
+
+    if (createMode) {
+      navigate('/channels', { replace: true })
+    }
   }
 
   const handleAdd = () => {
     resetForm()
-    setView('form')
+    navigate('/channels/new')
   }
 
   const handleEdit = (channel: Channel) => {
@@ -827,7 +847,7 @@ export function Channels() {
     <div className="p-4 md:p-6 lg:p-8 animate-in">
       <div className="max-w-4xl mx-auto">
         <div className="mb-6">
-          <Button variant="ghost" size="sm" className="mb-3 -ml-2 text-muted-foreground" onClick={() => setView('list')}>
+          <Button variant="ghost" size="sm" className="mb-3 -ml-2 text-muted-foreground" onClick={closeForm}>
             <ArrowLeft className="h-4 w-4 mr-1" />
             返回列表
           </Button>
@@ -1051,7 +1071,7 @@ export function Channels() {
           )}
 
           <div className="flex items-center justify-end gap-3 pt-2">
-            <Button variant="outline" onClick={() => setView('list')}>
+            <Button variant="outline" onClick={closeForm}>
               取消
             </Button>
             <Button onClick={handleSave} disabled={saveMutation.isPending}>
diff --git a/frontend/src/pages/Tokens.tsx b/frontend/src/pages/Tokens.tsx
index c06d018..198be59 100644
--- a/frontend/src/pages/Tokens.tsx
+++ b/frontend/src/pages/Tokens.tsx
@@ -1,5 +1,6 @@
-import { useState, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from 'react-router-dom'
 import { apiClient } from '@/api/client'
 import { Token, TokenConfig, Channel } from '@/types'
 import { Card, CardContent } from '@/components/ui/card'
@@ -32,8 +33,9 @@ import { PageContainer } from '@/components/ui/page-container'
 
 type EditMode = 'form' | 'json'
 
-export function Tokens() {
-  const [view, setView] = useState<'list' | 'form'>('list')
+export function Tokens({ createMode = false }: { createMode?: boolean }) {
+  const navigate = useNavigate()
+  const [view, setView] = useState<'list' | 'form'>(createMode ? 'form' : 'list')
   const [editMode, setEditMode] = useState<EditMode>('form')
   const [editingKey, setEditingKey] = useState<string | null>(null)
   const [formData, setFormData] = useState<TokenConfig>({
@@ -41,7 +43,7 @@ export function Tokens() {
     channel_keys: [],
     total_quota: 0,
   })
-  const [tokenKey, setTokenKey] = useState('')
+  const [tokenKey, setTokenKey] = useState(() => (createMode ? generateTokenKey() : ''))
   const [jsonValue, setJsonValue] = useState('')
   const [availableChannels, setAvailableChannels] = useState<string[]>([])
   const [selectedChannels, setSelectedChannels] = useState<string[]>([])
@@ -86,8 +88,7 @@ export function Tokens() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['tokens'] })
       addToast(editingKey ? '令牌更新成功' : '令牌添加成功', 'success')
-      resetForm()
-      setView('list')
+      closeForm()
     },
     onError: (error: any) => {
       addToast('保存失败：' + error.message, 'error')
@@ -120,19 +121,38 @@ export function Tokens() {
     },
   })
 
-  const resetForm = () => {
+  const resetForm = useCallback(() => {
     setFormData({ name: '', channel_keys: [], total_quota: 0 })
     setTokenKey('')
     setJsonValue('')
     setSelectedChannels([])
     setEditingKey(null)
     setEditMode('form')
+  }, [])
+
+  useEffect(() => {
+    if (createMode) {
+      resetForm()
+      setTokenKey(generateTokenKey())
+      setView('form')
+      return
+    }
+
+    setView('list')
+  }, [createMode, resetForm])
+
+  const closeForm = () => {
+    resetForm()
+    setView('list')
+
+    if (createMode) {
+      navigate('/tokens', { replace: true })
+    }
   }
 
   const handleAdd = () => {
     resetForm()
-    setTokenKey(generateTokenKey())
-    setView('form')
+    navigate('/tokens/new')
   }
 
   const handleEdit = (token: Token) => {
@@ -448,7 +468,7 @@ export function Tokens() {
       <div className="max-w-2xl mx-auto">
         {/* Header */}
         <div className="mb-6">
-          <Button variant="ghost" size="sm" className="mb-3 -ml-2 text-muted-foreground" onClick={() => setView('list')}>
+          <Button variant="ghost" size="sm" className="mb-3 -ml-2 text-muted-foreground" onClick={closeForm}>
             <ArrowLeft className="h-4 w-4 mr-1" />
             返回列表
           </Button>
@@ -597,7 +617,7 @@ export function Tokens() {
 
         {/* Actions */}
         <div className="flex items-center justify-end gap-3 pt-2">
-          <Button variant="outline" onClick={() => setView('list')}>
+          <Button variant="outline" onClick={closeForm}>
             取消
           </Button>
           <Button onClick={handleSave} disabled={saveMutation.isPending}>