mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-09-29 05:56:38 +08:00
style(wavelet): 全球态势板地图调整为 2:3 比例
固定宽:高约 2:3 的竖向视口并居中展示,降低 ECharts 横向拉伸。
This commit is contained in:
@@ -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(
|
||||
|
||||
@@ -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
|
||||
ref={mapViewportRef}
|
||||
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]"
|
||||
>
|
||||
{shouldRenderMap ? (
|
||||
<WorldStageMap nodes={nodes} sourceCountries={sourceCountries} />
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center px-4">
|
||||
<EmptyState
|
||||
title="地图准备中"
|
||||
description="进入可视区域后加载"
|
||||
iconSize="sm"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_12.5rem] lg:gap-4 lg:items-center">
|
||||
<div className="flex min-w-0 items-center justify-center">
|
||||
<div
|
||||
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} />
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center px-4">
|
||||
<EmptyState
|
||||
title="地图准备中"
|
||||
description="进入可视区域后加载"
|
||||
iconSize="sm"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{shouldRenderMap && nodes.length === 0 ? (
|
||||
<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>
|
||||
</div>
|
||||
) : null}
|
||||
{shouldRenderMap && nodes.length === 0 ? (
|
||||
<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>
|
||||
</div>
|
||||
) : 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">
|
||||
|
||||
@@ -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` 等)。
|
||||
|
||||
Reference in New Issue
Block a user