Update BackendStatus.tsx

Author: tobenot

src/games/demo-with-backend/components/BackendStatus.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { trpc } from '../services/trpc';
 
 export const BackendStatus: React.FC = () => {
 	const [status, setStatus] = useState<'checking' | 'connected' | 'error'>('checking');
@@ -7,24 +8,14 @@ export const BackendStatus: React.FC = () => {
 	useEffect(() => {
 		const checkBackend = async () => {
 			try {
-				const response = await fetch('http://localhost:3000/api/trpc/auth.healthCheck', {
-					method: 'GET',
-					headers: {
-						'Content-Type': 'application/json',
-					}
-				});
-
-				if (response.ok) {
-					const data = await response.json();
-					if (data.result?.data?.status === 'ok') {
-						setStatus('connected');
-					} else {
-						setStatus('error');
-						setError('后端服务异常');
-					}
+				// 使用 tRPC 的 healthCheck 方法来检查后端连接
+				const result = await trpc.auth.healthCheck.query();
+				
+				if (result.status === 'ok') {
+					setStatus('connected');
 				} else {
 					setStatus('error');
-					setError(`HTTP ${response.status}: ${response.statusText}`);
+					setError('后端服务异常: ' + (result.message || '未知错误'));
 				}
 			} catch (err) {
 				setStatus('error');
@@ -54,7 +45,7 @@ export const BackendStatus: React.FC = () => {
 					<p>请确保后端服务正在运行：</p>
 					<p>1. 启动 Basic-Web-Game-Backend 项目</p>
 					<p>2. 运行 npm run dev</p>
-					<p>3. 确保服务运行在 http://localhost:3000</p>
+					<p>3. 确保服务运行在 ${import.meta.env.VITE_BACKEND_URL || 'http://localhost:3000'}</p>
 				</div>
 			)}
 		</div>