diff --git a/Wavelet/frontend/app/(main)/components/dashboard/world-stage-map.tsx b/Wavelet/frontend/app/(main)/components/dashboard/world-stage-map.tsx index 792d1722..9d5ef174 100644 --- a/Wavelet/frontend/app/(main)/components/dashboard/world-stage-map.tsx +++ b/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 heightScale = Math.min(Math.max(height / 260, 0.65), 1.05); - const compactViewportScale = width < 640 ? 0.88 : 1; + const expectedWidth = height * worldMapAspectRatio; + const fitWidth = Math.min(width, expectedWidth); + 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( - (Math.min(widthScale, heightScale) * compactViewportScale).toFixed(3), - ); + return Number(Math.min(widthScale, heightScale).toFixed(3)); }, [containerSize]); const computedLayoutSize = useMemo( - () => `${Math.round(baseWorldMapLayoutSizePercent * responsiveMapScale)}%`, + () => + `${Math.round(baseWorldMapLayoutSizePercent * responsiveMapScale)}%`, [responsiveMapScale], ); const computedZoom = useMemo( diff --git a/Wavelet/frontend/app/(main)/components/dashboard/world-stage.tsx b/Wavelet/frontend/app/(main)/components/dashboard/world-stage.tsx index 5b632469..1112ef75 100644 --- a/Wavelet/frontend/app/(main)/components/dashboard/world-stage.tsx +++ b/Wavelet/frontend/app/(main)/components/dashboard/world-stage.tsx @@ -226,30 +226,32 @@ export function WorldStage({ -
-
- {shouldRenderMap ? ( - - ) : ( -
- -
- )} +
+
+
+ {shouldRenderMap ? ( + + ) : ( +
+ +
+ )} - {shouldRenderMap && nodes.length === 0 ? ( -
-

- 暂无节点,接入后将展示地理分布 -

-
- ) : null} + {shouldRenderMap && nodes.length === 0 ? ( +
+

+ 暂无节点,接入后将展示地理分布 +

+
+ ) : null} +
diff --git a/docs/changelog/index.md b/docs/changelog/index.md index f3382395..9c328b18 100644 --- a/docs/changelog/index.md +++ b/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` 等)。