修复端口没有跟随设置更改的问题

packages/editor-app/src/components/PortManager.tsx

@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react';
 import { invoke } from '@tauri-apps/api/core';
-import { X, Server, WifiOff } from 'lucide-react';
+import { X, Server, WifiOff, Wifi } from 'lucide-react';
+import { SettingsService } from '../services/SettingsService';
+import { ProfilerService } from '../services/ProfilerService';
 import '../styles/PortManager.css';
 
 interface PortManagerProps {
@@ -9,9 +11,28 @@ interface PortManagerProps {
 
 export function PortManager({ onClose }: PortManagerProps) {
   const [isServerRunning, setIsServerRunning] = useState(false);
-  const [serverPort] = useState<number>(8080);
+  const [serverPort, setServerPort] = useState<string>('8080');
   const [isChecking, setIsChecking] = useState(false);
   const [isStopping, setIsStopping] = useState(false);
+  const [isStarting, setIsStarting] = useState(false);
+
+  useEffect(() => {
+    const settings = SettingsService.getInstance();
+    setServerPort(settings.get('profiler.port', '8080'));
+
+    const handleSettingsChange = ((event: CustomEvent) => {
+      const newPort = event.detail['profiler.port'];
+      if (newPort) {
+        setServerPort(newPort);
+      }
+    }) as EventListener;
+
+    window.addEventListener('settings:changed', handleSettingsChange);
+
+    return () => {
+      window.removeEventListener('settings:changed', handleSettingsChange);
+    };
+  }, []);
 
   useEffect(() => {
     checkServerStatus();
@@ -33,9 +54,11 @@ export function PortManager({ onClose }: PortManagerProps) {
   const handleStopServer = async () => {
     setIsStopping(true);
     try {
-      const result = await invoke<string>('stop_profiler_server');
+      const profilerService = (window as any).__PROFILER_SERVICE__ as ProfilerService | undefined;
-      console.log('[PortManager]', result);
+      if (profilerService) {
+        await profilerService.manualStopServer();
         setIsServerRunning(false);
+      }
     } catch (error) {
       console.error('[PortManager] Failed to stop server:', error);
     } finally {
@@ -43,6 +66,22 @@ export function PortManager({ onClose }: PortManagerProps) {
     }
   };
 
+  const handleStartServer = async () => {
+    setIsStarting(true);
+    try {
+      const profilerService = (window as any).__PROFILER_SERVICE__ as ProfilerService | undefined;
+      if (profilerService) {
+        await profilerService.manualStartServer();
+        await new Promise(resolve => setTimeout(resolve, 500));
+        await checkServerStatus();
+      }
+    } catch (error) {
+      console.error('[PortManager] Failed to start server:', error);
+    } finally {
+      setIsStarting(false);
+    }
+  };
+
   return (
     <div className="port-manager-overlay" onClick={onClose}>
       <div className="port-manager" onClick={(e) => e.stopPropagation()}>
@@ -88,10 +127,22 @@ export function PortManager({ onClose }: PortManagerProps) {
             )}
 
             {!isServerRunning && (
+              <>
+                <div className="port-actions">
+                  <button
+                    className="action-btn primary"
+                    onClick={handleStartServer}
+                    disabled={isStarting}
+                  >
+                    <Wifi size={16} />
+                    <span>{isStarting ? 'Starting...' : 'Start Server'}</span>
+                  </button>
+                </div>
                 <div className="port-hint">
                   <p>No server is currently running.</p>
-                <p className="hint-text">Open Profiler window to start the server.</p>
+                  <p className="hint-text">Click "Start Server" to start the profiler server.</p>
                 </div>
+              </>
             )}
           </div>
 
@@ -100,7 +151,7 @@ export function PortManager({ onClose }: PortManagerProps) {
             <ul>
               <li>Use this when the Profiler server port is stuck and cannot be restarted</li>
               <li>The server will automatically stop when the Profiler window is closed</li>
-              <li>Default port: 8080</li>
+              <li>Current configured port: {serverPort}</li>
             </ul>
           </div>
         </div>

packages/editor-app/src/components/SceneHierarchy.tsx

@@ -19,6 +19,7 @@ export function SceneHierarchy({ entityStore, messageHub }: SceneHierarchyProps)
   const [selectedId, setSelectedId] = useState<number | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [sceneName, setSceneName] = useState<string>('Untitled');
+  const [remoteSceneName, setRemoteSceneName] = useState<string | null>(null);
   const [sceneFilePath, setSceneFilePath] = useState<string | null>(null);
   const [isSceneModified, setIsSceneModified] = useState<boolean>(false);
   const { t, locale } = useLocale();
@@ -97,6 +98,9 @@ export function SceneHierarchy({ entityStore, messageHub }: SceneHierarchyProps)
       return;
     }
 
+    const initiallyConnected = profilerService.isConnected();
+    setIsRemoteConnected(initiallyConnected);
+
     const unsubscribe = profilerService.subscribe((data) => {
       const connected = profilerService.isConnected();
       setIsRemoteConnected(connected);
@@ -119,12 +123,31 @@ export function SceneHierarchy({ entityStore, messageHub }: SceneHierarchyProps)
 
           return hasChanged ? data.entities! : prev;
         });
+
+        // 请求第一个实体的详情以获取场景名称
+        if (!remoteSceneName && data.entities.length > 0) {
+          profilerService.requestEntityDetails(data.entities[0].id);
+        }
       } else if (!connected) {
         setRemoteEntities([]);
+        setRemoteSceneName(null);
       }
     });
 
     return () => unsubscribe();
+  }, [remoteSceneName]);
+
+  // Listen for entity details to get remote scene name
+  useEffect(() => {
+    const handleEntityDetails = ((event: CustomEvent) => {
+      const details = event.detail;
+      if (details && details.sceneName) {
+        setRemoteSceneName(details.sceneName);
+      }
+    }) as EventListener;
+
+    window.addEventListener('profiler:entity-details', handleEntityDetails);
+    return () => window.removeEventListener('profiler:entity-details', handleEntityDetails);
   }, []);
 
   const handleEntityClick = (entity: Entity) => {
@@ -243,6 +266,7 @@ export function SceneHierarchy({ entityStore, messageHub }: SceneHierarchyProps)
     ? filterRemoteEntities(remoteEntities)
     : filterLocalEntities(entities);
   const showRemoteIndicator = isRemoteConnected && remoteEntities.length > 0;
+  const displaySceneName = isRemoteConnected && remoteSceneName ? remoteSceneName : sceneName;
 
   return (
     <div className="scene-hierarchy">
@@ -250,12 +274,12 @@ export function SceneHierarchy({ entityStore, messageHub }: SceneHierarchyProps)
         <Layers size={16} className="hierarchy-header-icon" />
         <h3>{t('hierarchy.title')}</h3>
         <div
-          className="scene-name-container clickable"
+          className={`scene-name-container ${!isRemoteConnected && sceneFilePath ? 'clickable' : ''}`}
-          onClick={handleSceneNameClick}
+          onClick={!isRemoteConnected ? handleSceneNameClick : undefined}
-          title={sceneFilePath ? `${sceneName} - 点击跳转到文件` : sceneName}
+          title={!isRemoteConnected && sceneFilePath ? `${displaySceneName} - 点击跳转到文件` : displaySceneName}
         >
           <span className="scene-name">
-            {sceneName}{isSceneModified ? '*' : ''}
+            {displaySceneName}{!isRemoteConnected && isSceneModified ? '*' : ''}
           </span>
         </div>
         {showRemoteIndicator && (

packages/editor-app/src/services/ProfilerService.ts

@@ -65,13 +65,20 @@ export class ProfilerService {
   private checkServerInterval: NodeJS.Timeout | null = null;
   private reconnectTimeout: NodeJS.Timeout | null = null;
   private clientIdMap: Map<string, string> = new Map(); // 客户端地址 -> 客户端ID映射
+  private autoStart: boolean;
 
   constructor() {
     const settings = SettingsService.getInstance();
     this.wsPort = settings.get('profiler.port', '8080');
+    this.autoStart = settings.get('profiler.autoStart', true);
 
     this.startServerCheck();
     this.listenToSettingsChanges();
+
+    // 如果设置了自动启动，则启动服务器
+    if (this.autoStart) {
+      this.manualStartServer();
+    }
   }
 
   private listenToSettingsChanges(): void {
@@ -123,6 +130,26 @@ export class ProfilerService {
     return this.isServerRunning;
   }
 
+  /**
+   * 手动启动服务器
+   */
+  public async manualStartServer(): Promise<void> {
+    await this.startServer();
+  }
+
+  /**
+   * 手动停止服务器
+   */
+  public async manualStopServer(): Promise<void> {
+    try {
+      await invoke('stop_profiler_server');
+      this.isServerRunning = false;
+      this.disconnect();
+    } catch (error) {
+      console.error('[ProfilerService] Failed to stop server:', error);
+    }
+  }
+
   private startServerCheck(): void {
     this.checkServerStatus();
     this.checkServerInterval = setInterval(() => {
@@ -136,12 +163,6 @@ export class ProfilerService {
       const wasRunning = this.isServerRunning;
       this.isServerRunning = status;
 
-      // 如果服务器还没运行，自动启动它
-      if (!status) {
-        await this.startServer();
-        return;
-      }
-
       // 服务器启动了，尝试连接
       if (status && !this.ws) {
         this.connectToServer();
@@ -149,7 +170,6 @@ export class ProfilerService {
 
       // 服务器从运行变为停止
       if (wasRunning && !status) {
-        console.log('[ProfilerService] Server stopped');
         this.disconnect();
       }
     } catch (error) {
@@ -180,6 +200,11 @@ export class ProfilerService {
       ws.onclose = () => {
         this.ws = null;
 
+        // 通知监听器连接已断开
+        if (this.currentData) {
+          this.notifyListeners(this.currentData);
+        }
+
         // 如果服务器还在运行，尝试重连
         if (this.isServerRunning && !this.reconnectTimeout) {
           this.reconnectTimeout = setTimeout(() => {
@@ -192,6 +217,11 @@ export class ProfilerService {
       ws.onerror = (error) => {
         console.error('[ProfilerService] WebSocket error:', error);
         this.ws = null;
+
+        // 通知监听器连接出错
+        if (this.currentData) {
+          this.notifyListeners(this.currentData);
+        }
       };
 
       ws.onmessage = (event) => {
@@ -404,6 +434,8 @@ export class ProfilerService {
   }
 
   private disconnect(): void {
+    const hadConnection = this.ws !== null;
+
     if (this.ws) {
       this.ws.close();
       this.ws = null;
@@ -413,6 +445,11 @@ export class ProfilerService {
       clearTimeout(this.reconnectTimeout);
       this.reconnectTimeout = null;
     }
+
+    // 如果有连接且手动断开，通知监听器
+    if (hadConnection && this.currentData) {
+      this.notifyListeners(this.currentData);
+    }
   }
 
   public destroy(): void {

packages/editor-app/src/styles/PortManager.css

@@ -167,6 +167,15 @@
   transition: all var(--transition-fast);
 }
 
+.action-btn.primary {
+  background: var(--color-primary);
+  color: white;
+}
+
+.action-btn.primary:hover:not(:disabled) {
+  background: var(--color-primary-dark);
+}
+
 .action-btn.danger {
   background: var(--color-danger);
   color: white;