init

frontend/src/pages/TicketDetailPage.tsx

@@ -7,7 +7,7 @@ import {
   BarChart3, ChevronDown, ChevronUp, Link2,
 } from 'lucide-react';
 import { ticketApi } from '@/api/ticket';
-import { statusMap, statusColorMap } from '@/lib/mock';
+import { statusMap, statusColorMap } from '@/lib/constants';
 import { useAuth } from '@/hooks/useAuth';
 import SqlEditor from '@/components/SqlEditor';
 
@@ -129,14 +129,25 @@ export default function TicketDetailPage() {
     }
   }, [ticketId]);
 
-  // Mock related tickets fetch
+  // Fetch related tickets from API
   const fetchRelated = useCallback(async () => {
-    // In real implementation: await ticketApi.related(ticketId)
-    setRelatedTickets([
-      { id: ticketId - 1, title: '用户表索引优化', status: 'success', applicant_name: '张三', create_time: '2024-01-14 10:00:00' },
-      { id: ticketId + 1, title: '订单数据归档', status: 'approved', applicant_name: '李四', create_time: '2024-01-15 14:00:00' },
-    ]);
-  }, [ticketId]);
+    try {
+      const res = await ticketApi.list({ instance_id: ticket?.instance_id, limit: 5 }) as { items?: any[] };
+      const items = (res?.items || [])
+        .filter((t: any) => t.id !== ticketId)
+        .slice(0, 5)
+        .map((t: any) => ({
+          id: t.id,
+          title: t.title,
+          status: t.status,
+          applicant_name: t.applicant_name || t.created_by_name,
+          create_time: t.created_at || t.create_time,
+        }));
+      setRelatedTickets(items);
+    } catch {
+      setRelatedTickets([]);
+    }
+  }, [ticketId, ticket?.instance_id]);
 
   useEffect(() => {
     if (!isNaN(ticketId)) {