Merge branch 'wavelet-top-domain' into dev

Wavelet/frontend/app/(main)/components/dashboard/world-stage-map.tsx

@@ -100,8 +100,9 @@ type CountryRegionDatum = {
 let worldMapRegistrationAttempted = false;
 let worldMapRegistrationSucceeded = false;
 
-const baseWorldMapLayoutSizePercent = 168;
+const baseWorldMapLayoutSizePercent = 108;
 const baseWorldMapZoom = 1;
+const worldMapAspectRatio = 2 / 3;
 
 function buildNodeDetailHref(id?: number | null) {
   if (!id) {
@@ -378,17 +379,17 @@ export function WorldStageMap({
       return 1;
     }
 
-    const widthScale = Math.min(Math.max(width / 720, 0.48), 1.02);
+    const expectedWidth = height * worldMapAspectRatio;
-    const heightScale = Math.min(Math.max(height / 260, 0.65), 1.05);
+    const fitWidth = Math.min(width, expectedWidth);
-    const compactViewportScale = width < 640 ? 0.88 : 1;
+    const widthScale = Math.min(Math.max(fitWidth / 180, 0.72), 1.08);
+    const heightScale = Math.min(Math.max(height / 252, 0.72), 1.08);
 
-    return Number(
+    return Number(Math.min(widthScale, heightScale).toFixed(3));
-      (Math.min(widthScale, heightScale) * compactViewportScale).toFixed(3),
-    );
   }, [containerSize]);
 
   const computedLayoutSize = useMemo(
-    () => `${Math.round(baseWorldMapLayoutSizePercent * responsiveMapScale)}%`,
+    () =>
+      `${Math.round(baseWorldMapLayoutSizePercent * responsiveMapScale)}%`,
     [responsiveMapScale],
   );
   const computedZoom = useMemo(

Wavelet/frontend/app/(main)/components/dashboard/world-stage.tsx

@@ -226,30 +226,32 @@ export function WorldStage({
       </CardHeader>
 
       <CardContent className="pt-0">
-        <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_12.5rem] lg:gap-4">
+        <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_12.5rem] lg:gap-4 lg:items-center">
-          <div
+          <div className="flex min-w-0 items-center justify-center">
-            ref={mapViewportRef}
+            <div
-            className="relative h-[200px] min-h-[200px] min-w-0 overflow-hidden rounded-lg border border-dashed bg-muted/20 sm:h-[240px] sm:min-h-[240px] lg:h-[260px] lg:min-h-[260px]"
+              ref={mapViewportRef}
-          >
+              className="relative aspect-[2/3] h-[200px] w-auto overflow-hidden rounded-lg border border-dashed bg-muted/20 sm:h-[228px] lg:h-[252px]"
-            {shouldRenderMap ? (
+            >
-              <WorldStageMap nodes={nodes} sourceCountries={sourceCountries} />
+              {shouldRenderMap ? (
-            ) : (
+                <WorldStageMap nodes={nodes} sourceCountries={sourceCountries} />
-              <div className="flex h-full items-center justify-center px-4">
+              ) : (
-                <EmptyState
+                <div className="flex h-full items-center justify-center px-4">
-                  title="地图准备中"
+                  <EmptyState
-                  description="进入可视区域后加载"
+                    title="地图准备中"
-                  iconSize="sm"
+                    description="进入可视区域后加载"
-                />
+                    iconSize="sm"
-              </div>
+                  />
-            )}
+                </div>
+              )}
 
-            {shouldRenderMap && nodes.length === 0 ? (
+              {shouldRenderMap && nodes.length === 0 ? (
-              <div className="pointer-events-none absolute inset-x-3 bottom-2 z-10">
+                <div className="pointer-events-none absolute inset-x-3 bottom-2 z-10">
-                <p className="rounded-md border border-dashed bg-background/90 px-2.5 py-1.5 text-[10px] text-muted-foreground backdrop-blur-sm">
+                  <p className="rounded-md border border-dashed bg-background/90 px-2.5 py-1.5 text-[10px] text-muted-foreground backdrop-blur-sm">
-                  暂无节点，接入后将展示地理分布
+                    暂无节点，接入后将展示地理分布
-                </p>
+                  </p>
-              </div>
+                </div>
-            ) : null}
+              ) : null}
+            </div>
           </div>
 
           <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-1 lg:gap-0 lg:divide-y lg:divide-dashed lg:overflow-hidden lg:rounded-lg lg:border lg:border-dashed">

docs/changelog/index.md

@@ -23,6 +23,7 @@ sidebar: false
 - Wavelet 全球态势板视觉对齐系统风格：改用 `Card` / `Badge` / `Progress` 与虚线边框指标卡，地图配色与 tooltip 跟随主题 token。
 - Wavelet 全球态势板布局紧凑化：地图高度降至约 260px，指标改为侧栏密集单元格，图例改为行内色点标注。
 - 修复 Wavelet 全球态势板 ECharts 地图在紧凑布局下容器尺寸为 0 导致无法渲染的问题。
+- Wavelet 全球态势板地图容器调整为约 2:3（宽:高）比例，避免世界地图横向过度拉伸。
 
 - 将 `openflare-server` 后端业务域迁移至 `Wavelet/internal/apps/openflare/`，通过 `/api/*` legacy 兼容层保持旧前端 API 路径不变。
 - 新增 OpenFlare 业务表 goose 迁移（`of_options`、`of_origins`、`of_proxy_routes`、`of_nodes`、`of_waf_*`、`of_tls_*`、`of_config_versions`、`of_pages_*`、`of_apply_logs` 等）。