From 8e82b0ea99441817f130aa1a67443b148ccda654 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Mon, 26 Jan 2026 21:31:58 +0800
Subject: [PATCH] fix: use Button with router.push for reliable navigation

- Replace Link components with Button + router.push
- Add e.preventDefault() and e.stopPropagation() to prevent event issues
- Fix file list button click handler in CanvasChatPanel
- Ensures single click navigation works consistently
---
 app/canvas/[id]/page.tsx              |  6 ++-
 components/canvas/CanvasChatPanel.tsx | 11 ++++-
 components/top-navbar.tsx             | 67 +++++++++++++++++++--------
 3 files changed, 61 insertions(+), 23 deletions(-)

diff --git a/app/canvas/[id]/page.tsx b/app/canvas/[id]/page.tsx
index 9a03257..2b349f7 100644
--- a/app/canvas/[id]/page.tsx
+++ b/app/canvas/[id]/page.tsx
@@ -516,7 +516,11 @@ export default function CanvasEditorPage({ params }: PageProps) {
               {panelMode === 'chat' ? (
                 // AI 对话内容
                 <div className="flex-1 overflow-hidden">
-                  <CanvasChatPanel chatId={`canvas-${id}`} onClose={() => setIsPanelOpen(false)} />
+                  <CanvasChatPanel 
+                    chatId={`canvas-${id}`} 
+                    onClose={() => setIsPanelOpen(false)} 
+                    onOpenFileList={() => setPanelMode('fileList')}
+                  />
                 </div>
               ) : (
                 // 文件列表
diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index 0601e1d..087868a 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -27,6 +27,7 @@ interface CanvasChatPanelProps {
   chatId: string;
   initialMessages?: ChatMessage[];
   onClose?: () => void;
+  onOpenFileList?: () => void;
 }
 
 // 建议卡片数据 - 已移除
@@ -55,7 +56,7 @@ function extractImageUrls(text: string): string[] {
   return urls;
 }
 
-export function CanvasChatPanel({ chatId, initialMessages = [], onClose }: CanvasChatPanelProps) {
+export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenFileList }: CanvasChatPanelProps) {
   const [input, setInput] = useState("");
   const [attachments, setAttachments] = useState<Attachment[]>([]);
   const [selectedModelId, setSelectedModelId] = useState<string>("");
@@ -326,7 +327,13 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose }: Canva
           <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full hover:bg-muted">
             <Share2 className="h-4 w-4" />
           </Button>
-          <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full hover:bg-muted">
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            className="h-8 w-8 rounded-full hover:bg-muted"
+            onClick={onOpenFileList}
+            title="已生成文件列表"
+          >
             <LayoutGrid className="h-4 w-4" />
           </Button>
           <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full hover:bg-muted">
diff --git a/components/top-navbar.tsx b/components/top-navbar.tsx
index 9f5c9f0..2b00926 100644
--- a/components/top-navbar.tsx
+++ b/components/top-navbar.tsx
@@ -174,13 +174,21 @@ export function TopNavbar({
         )}
 
         {/* AI智能精选 */}
-        <Link
-          href="/featured"
-          className="flex items-center gap-1 h-8 px-3 text-white hover:bg-white/15 hover:text-white rounded-full transition-colors text-sm font-medium"
+        <Button
+          variant="ghost"
+          size="sm"
+          className="flex items-center gap-1 h-8 px-3 text-white hover:bg-white/15 hover:text-white rounded-full transition-colors"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            router.push("/featured");
+          }}
+          type="button"
+          title="AI智能精选"
         >
           <Sparkles className="h-4 w-4 text-yellow-400" />
-          <span>AI精选</span>
-        </Link>
+          <span className="text-sm font-medium">AI精选</span>
+        </Button>
 
         {/* 精选榜单 */}
         <DropdownMenu open={rankingOpen} onOpenChange={setRankingOpen}>
@@ -251,27 +259,39 @@ export function TopNavbar({
         </Button>
 
         {/* 无限画布 */}
-        <button
-          className="flex items-center gap-1 h-8 px-3 text-white hover:bg-white/15 hover:text-white rounded-full transition-colors text-sm font-medium"
-          onClick={() => {
+        <Button
+          variant="ghost"
+          size="sm"
+          className="flex items-center gap-1 h-8 px-3 text-white hover:bg-white/15 hover:text-white rounded-full transition-colors"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
             const newId = crypto.randomUUID();
-            window.location.href = `/canvas/${newId}`;
+            router.push(`/canvas/${newId}`);
           }}
           type="button"
           title="无限画布"
         >
           <LayoutGrid className="h-4 w-4 text-purple-400" />
-          <span>无限画布</span>
-        </button>
+          <span className="text-sm font-medium">无限画布</span>
+        </Button>
 
         {/* 我的图册 */}
-        <Link
-          href="/gallery"
-          className="flex items-center gap-1 h-8 px-3 text-white hover:bg-white/15 hover:text-white rounded-full transition-colors text-sm font-medium"
+        <Button
+          variant="ghost"
+          size="sm"
+          className="flex items-center gap-1 h-8 px-3 text-white hover:bg-white/15 hover:text-white rounded-full transition-colors"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            router.push("/gallery");
+          }}
+          type="button"
+          title="我的图册"
         >
           <Images className="h-4 w-4" />
-          <span>我的图册</span>
-        </Link>
+          <span className="text-sm font-medium">我的图册</span>
+        </Button>
 
         {/* 分隔线 (如果有链接或图册按钮，且是管理员) */}
         {isAdmin && (
@@ -280,13 +300,20 @@ export function TopNavbar({
 
         {/* 系统设置（仅管理员可见）*/}
         {isAdmin && (
-          <Link
-            href="/settings"
-            className="flex items-center justify-center h-8 w-8 text-white hover:bg-white/15 hover:text-white rounded-full"
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 w-8 p-0 text-white hover:bg-white/15 hover:text-white rounded-full"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              router.push("/settings");
+            }}
+            type="button"
             title="系统设置"
           >
             <Settings className="h-4 w-4" />
-          </Link>
+          </Button>
         )}
       </div>