[优化] 交互优化

atsf_server/web/features/dashboard/components/world-stage-map.tsx

@@ -91,7 +91,7 @@ type CountryRegionDatum = {
 let worldMapRegistrationAttempted = false;
 let worldMapRegistrationSucceeded = false;
 
-const baseWorldMapLayoutSizePercent = 180;
+const baseWorldMapLayoutSizePercent = 168;
 const baseWorldMapZoom = 1;
 
 function buildNodeDetailHref(id?: number | null) {
@@ -435,10 +435,13 @@ export function WorldStageMap({
       return 1;
     }
 
-    const widthScale = Math.min(Math.max(width / 960, 0.76), 1.18);
+    const widthScale = Math.min(Math.max(width / 960, 0.52), 1.08);
-    const heightScale = Math.min(Math.max(height / 520, 0.82), 1.12);
+    const heightScale = Math.min(Math.max(height / 520, 0.72), 1.1);
+    const compactViewportScale = width < 640 ? 0.9 : 1;
 
-    return Number(Math.min(widthScale, heightScale).toFixed(3));
+    return Number(
+      (Math.min(widthScale, heightScale) * compactViewportScale).toFixed(3),
+    );
   }, [containerSize]);
 
   const computedLayoutSize = useMemo(
@@ -489,11 +492,15 @@ export function WorldStageMap({
       },
       geo: {
         map: 'world',
-        roam: false,
+        roam: true,
         silent: true,
         layoutCenter: ['50%', '50%'],
         layoutSize: computedLayoutSize,
         zoom: computedZoom,
+        scaleLimit: {
+          min: Math.max(Number((computedZoom * 0.78).toFixed(3)), 0.35),
+          max: Math.max(Number((computedZoom * 2.2).toFixed(3)), 1.4),
+        },
         regions: countryRegions,
         itemStyle: {
           areaColor: mapPalette.areaColor,

atsf_server/web/features/dashboard/components/world-stage.tsx

@@ -275,6 +275,17 @@ export function WorldStage({
               {geoConfiguredNodes > 0 ? '节点地理坐标' : '节点覆盖信号'}
             </div>
 
+            <div
+              className={cn(
+                'absolute left-6 top-16 z-10 rounded-full px-3 py-1 text-[11px] backdrop-blur',
+                isDark
+                  ? 'bg-slate-900/45 text-slate-200'
+                  : 'bg-white/85 text-slate-600 shadow-[0_10px_24px_rgba(148,163,184,0.16)]',
+              )}
+            >
+              拖动平移，滚轮缩放
+            </div>
+
             <div className="absolute right-4 top-4 z-10 flex flex-wrap gap-2">
               <LegendPill label="绿色: 运行正常" tone="healthy" isDark={isDark} />
               <LegendPill label="黄色: 资源承压" tone="warning" isDark={isDark} />
@@ -285,7 +296,7 @@ export function WorldStage({
               ref={mapViewportRef}
               className="absolute inset-x-3 top-16 bottom-28 flex items-center justify-center md:inset-x-4 md:top-18 md:bottom-32"
             >
-              <div className="h-full max-w-full aspect-[2/1]">
+              <div className="h-full w-full min-w-0 overflow-hidden">
                 {shouldRenderMap ? (
                   <WorldStageMap isDark={isDark} nodes={nodes} />
                 ) : (