fix: 修复 TypeScript 类型错误

src/app/[locale]/keyword-cloud/components/CloudWord.tsx

@@ -10,7 +10,7 @@ interface VisualConfig {
   rotation?: string;
 }
 
-interface KeywordData {
+export interface KeywordData {
   id: number;
   word: string;
   trendScore: number;

src/app/[locale]/keyword-cloud/components/KeywordCloud.tsx

@@ -1,34 +1,11 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { CloudWord } from './CloudWord';
+import { CloudWord, type KeywordData } from './CloudWord';
 import { QuarterNavigator } from './QuarterNavigator';
 import { ProgressIndicator } from './ProgressIndicator';
 import { useKeywordCloud } from '@/hooks/useKeywordCloudClient';
 
-interface KeywordData {
-  id: number;
-  word: string;
-  trendScore: number;
-  description: string;
-  detailPoints: string[];
-  visualConfig: {
-    color: string;
-    size: string;
-    border: string;
-    rotation?: string;
-  };
-}
-
-interface QuarterData {
-  quarter: string;
-  title: string;
-  titleEn?: string;
-  subtitle?: string;
-  subtitleEn?: string;
-  keywords: KeywordData[];
-}
-
 export function KeywordCloud({ initialQuarter }: { initialQuarter: string }) {
   const [currentQuarter, setCurrentQuarter] = useState(initialQuarter);
   const [quarters, setQuarters] = useState<string[]>([]);
@@ -44,8 +21,8 @@ export function KeywordCloud({ initialQuarter }: { initialQuarter: string }) {
           const quarterStrings = json.quarters.map((q: any) => q.quarter);
           setQuarters(quarterStrings);
         }
-      } catch (error) {
-        console.error('Failed to load quarters:', error);
+      } catch (err) {
+        console.error('Failed to load quarters:', err);
       }
     }
     loadQuarters();
@@ -88,6 +65,8 @@ export function KeywordCloud({ initialQuarter }: { initialQuarter: string }) {
     );
   }
 
+  const firstKeyword = data.keywords[0];
+
   return (
     <div className="bg-white/50 dark:bg-black/20 backdrop-blur-sm border-4 border-black p-8 md:p-12 shadow-hard relative overflow-visible">
       {/* 进度条 */}
@@ -107,16 +86,16 @@ export function KeywordCloud({ initialQuarter }: { initialQuarter: string }) {
       {/* 词云区域 */}
       <div className="relative py-12 px-4">
         <div className="word-cluster flex flex-wrap gap-3 items-center justify-center max-w-full">
-          {data.keywords.map((keyword: KeywordData) => (
+          {data.keywords.map((keyword) => (
             <CloudWord key={keyword.id} data={keyword} />
           ))}
         </div>
       </div>
 
       {/* 装饰元素 */}
-      {data.keywords.length > 0 && (
+      {data.keywords.length > 0 && firstKeyword && (
         <div className="absolute -top-16 -right-8 md:right-0 bg-black text-white p-5 rounded-xl text-sm md:text-base font-display w-64 shadow-hard rotate-6 hidden lg:block">
-          "{data.keywords[0].word}" 是本季度最热门词汇!
+          "{firstKeyword.word}" 是本季度最热门词汇!
           <div className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-black transform rotate-45" />
         </div>
       )}

src/app/[locale]/keyword-cloud/components/QuarterNavigator.tsx

@@ -15,6 +15,20 @@ export function QuarterNavigator({ current, quarters, onNavigate }: QuarterNavig
   const canGoPrev = currentIndex > 0;
   const canGoNext = currentIndex < quarters.length - 1;
 
+  const handlePrev = () => {
+    if (canGoPrev) {
+      const prevQuarter = quarters[currentIndex - 1];
+      if (prevQuarter) onNavigate(prevQuarter);
+    }
+  };
+
+  const handleNext = () => {
+    if (canGoNext) {
+      const nextQuarter = quarters[currentIndex + 1];
+      if (nextQuarter) onNavigate(nextQuarter);
+    }
+  };
+
   return (
     <div className="flex flex-col md:flex-row items-center justify-between gap-8 mb-12">
       {/* 上一个季度按钮 */}
@@ -32,7 +46,7 @@ export function QuarterNavigator({ current, quarters, onNavigate }: QuarterNavig
           'transition-all',
           !canGoPrev && 'opacity-50 cursor-not-allowed'
         )}
-        onClick={() => canGoPrev && onNavigate(quarters[currentIndex - 1])}
+        onClick={handlePrev}
         aria-label="Previous quarter"
       >
         <ChevronLeft className="w-8 h-8 md:w-10 md:h-10" />
@@ -60,7 +74,7 @@ export function QuarterNavigator({ current, quarters, onNavigate }: QuarterNavig
           'transition-all',
           !canGoNext && 'opacity-50 cursor-not-allowed'
         )}
-        onClick={() => canGoNext && onNavigate(quarters[currentIndex + 1])}
+        onClick={handleNext}
         aria-label="Next quarter"
       >
         <ChevronRight className="w-8 h-8 md:w-10 md:h-10" />

src/hooks/useKeywordCloudClient.ts

@@ -1,20 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-
-interface KeywordData {
-  id: number;
-  word: string;
-  trendScore: number;
-  description: string;
-  detailPoints: string[];
-  visualConfig: {
-    color: string;
-    size: string;
-    border: string;
-    rotation?: string;
-  };
-}
+import type { KeywordData } from '@/app/[locale]/keyword-cloud/components/CloudWord';
 
 interface QuarterData {
   quarter: string;