From 241a6cb56269f7a310087d817e774f15132f56c4 Mon Sep 17 00:00:00 2001
From: "mula.liu" <mula.liu@163.com>
Date: Mon, 1 Dec 2025 16:36:17 +0800
Subject: [PATCH] fix: Replace hardcoded API URLs with dynamic configuration to
 support remote access

---
 frontend/src/components/DwarfPlanetOrbits.tsx | 34 +++++++------------
 frontend/src/components/OrbitRenderer.tsx     | 10 ++----
 frontend/src/components/Stars.tsx             | 10 ++----
 frontend/src/utils/request.ts                 | 13 ++++++-
 4 files changed, 30 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/DwarfPlanetOrbits.tsx b/frontend/src/components/DwarfPlanetOrbits.tsx
index dbccf31..d848991 100644
--- a/frontend/src/components/DwarfPlanetOrbits.tsx
+++ b/frontend/src/components/DwarfPlanetOrbits.tsx
@@ -7,6 +7,7 @@ import { useEffect, useState } from 'react';
 import { Line } from '@react-three/drei';
 import * as THREE from 'three';
 import { scalePosition } from '../utils/scaleDistance';
+import { request } from '../utils/request';
 
 interface OrbitData {
   bodyId: string;
@@ -38,14 +39,8 @@ export function DwarfPlanetOrbits() {
 
       try {
         // Step 1: Get list of dwarf planets from backend
-        const listResponse = await fetch('http://localhost:8000/api/celestial/list?body_type=dwarf_planet');
-        if (!listResponse.ok) {
-          console.warn('Failed to fetch dwarf planet list');
-          setLoading(false);
-          return;
-        }
-
-        const listData = await listResponse.json();
+        const listResponse = await request.get('/celestial/list?body_type=dwarf_planet');
+        const listData = listResponse.data;
         const dwarfPlanets = listData.bodies || [];
 
         if (dwarfPlanets.length === 0) {
@@ -64,21 +59,16 @@ export function DwarfPlanetOrbits() {
         // Use body_ids parameter to fetch all dwarf planets
         const bodyIds = dwarfPlanets.map((p: any) => p.id).join(',');
 
-        const response = await fetch(
-          `http://localhost:8000/api/celestial/positions?` +
-          `body_ids=${bodyIds}&` +
-          `start_time=${startDate.toISOString()}&` +
-          `end_time=${endDate.toISOString()}&` +
-          `step=30d`
-        );
+        const response = await request.get('/celestial/positions', {
+          params: {
+            body_ids: bodyIds,
+            start_time: startDate.toISOString(),
+            end_time: endDate.toISOString(),
+            step: '30d',
+          },
+        });
 
-        if (!response.ok) {
-          console.warn('Failed to fetch dwarf planet orbits');
-          setLoading(false);
-          return;
-        }
-
-        const data = await response.json();
+        const data = response.data;
 
         // Step 3: Process each dwarf planet's orbital data
         for (const planet of dwarfPlanets) {
diff --git a/frontend/src/components/OrbitRenderer.tsx b/frontend/src/components/OrbitRenderer.tsx
index cc9281d..4becc26 100644
--- a/frontend/src/components/OrbitRenderer.tsx
+++ b/frontend/src/components/OrbitRenderer.tsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
 import { Line } from '@react-three/drei';
 import * as THREE from 'three';
 import { scalePosition } from '../utils/scaleDistance';
+import { request } from '../utils/request';
 
 interface OrbitData {
   bodyId: string;
@@ -32,13 +33,8 @@ export function OrbitRenderer({ visible = true }: OrbitRendererProps) {
 
       try {
         // Fetch precomputed orbits from backend
-        const response = await fetch('http://localhost:8000/api/celestial/orbits');
-
-        if (!response.ok) {
-          throw new Error(`Failed to fetch orbits: ${response.statusText}`);
-        }
-
-        const data = await response.json();
+        const response = await request.get('/celestial/orbits');
+        const data = response.data;
 
         if (!data.orbits || data.orbits.length === 0) {
           console.warn('⚠️ No orbital data found in database');
diff --git a/frontend/src/components/Stars.tsx b/frontend/src/components/Stars.tsx
index 35814d4..b8e1b62 100644
--- a/frontend/src/components/Stars.tsx
+++ b/frontend/src/components/Stars.tsx
@@ -4,6 +4,7 @@
 import { useEffect, useState, useMemo } from 'react';
 import { Text, Billboard } from '@react-three/drei';
 import * as THREE from 'three';
+import { request } from '../utils/request';
 
 interface Star {
   name: string;
@@ -50,14 +51,9 @@ export function Stars() {
 
   useEffect(() => {
     // Load star data from API
-    fetch('http://localhost:8000/api/celestial/static/star')
+    request.get('/celestial/static/star')
       .then((res) => {
-        if (!res.ok) {
-          throw new Error(`HTTP error! status: ${res.status}`);
-        }
-        return res.json();
-      })
-      .then((data) => {
+        const data = res.data;
         // API returns { category, items: [{ id, name, name_zh, data: {...} }] }
         const starData = data.items.map((item: any) => ({
           name: item.name,
diff --git a/frontend/src/utils/request.ts b/frontend/src/utils/request.ts
index ccc3adb..54c391a 100644
--- a/frontend/src/utils/request.ts
+++ b/frontend/src/utils/request.ts
@@ -4,7 +4,18 @@
 import axios from 'axios';
 import { auth } from './auth';
 
-const API_BASE_URL = 'http://localhost:8000/api';
+// Dynamically determine API base URL
+const getBaseUrl = () => {
+  if (import.meta.env.VITE_API_BASE_URL) {
+    return import.meta.env.VITE_API_BASE_URL;
+  }
+  if (import.meta.env.DEV) {
+    return `http://${window.location.hostname}:8000/api`;
+  }
+  return '/api';
+};
+
+export const API_BASE_URL = getBaseUrl();
 
 // Create axios instance
 export const request = axios.create({