Refresh product docs and observation freshness

This commit is contained in:
2569718930@qq.com
2026-06-06 21:46:23 +08:00
parent 524ae7c8cf
commit 11fd482378
24 changed files with 997 additions and 592 deletions
+2 -2
View File
@@ -19,8 +19,8 @@ export function createAccountCopy(isEn: boolean): Record<string, string> {
weatherEngine: isEn ? "Weather Engine" : "气象引擎",
intradayAnalysis: isEn ? "Intraday Analysis" : "今日内分析",
historyFuture: isEn
? "Future-date + Decision Card Analysis"
: "未来日期分析 + 城市决策卡",
? "Future-date + Multi-city Chart Monitoring"
: "未来日期分析 + 城市图表巡检",
smartPush: isEn
? "Cross-platform Smart Weather Push"
: "全平台智能气象查询",
@@ -12,6 +12,7 @@ const OBSERVATION_LABEL_EN: Record<string, string> = {
"CWA (10分钟)": "CWA (10m)",
"气象站实测": "Weather Station Live",
"跑道实测 (1分钟)": "Runway Live (1m)",
"跑道实测 (3分钟)": "Runway Live (3m)",
"机场报文": "Airport METAR",
"METAR 结算 (30分钟)": "METAR Settlement (30m)",
};
@@ -1,4 +1,6 @@
import { getDocsPage } from "@/content/docs/docs";
import { DOCS_PAGES } from "@/content/docs/docs";
import { DOCS_GROUPS } from "@/content/docs/docs.config";
function assert(condition: unknown, message: string): asserts condition {
if (!condition) throw new Error(message);
@@ -24,16 +26,42 @@ function pageText(slug: string, locale: "zh-CN" | "en-US") {
}
export function runTests() {
const publicDocSlugs = DOCS_PAGES.map((page) => page.slug);
assert(
publicDocSlugs.join(",") === "intro,chart-guide,realtime-sources,settlement-sources,extension",
"public docs navigation should only expose current shipped user-facing surfaces",
);
for (const group of DOCS_GROUPS) {
assert(
DOCS_PAGES.some((page) => page.group === group.id),
`docs navigation group should not be empty: ${group.id}`,
);
}
const allDocsZh = publicDocSlugs.map((slug) => pageText(slug, "zh-CN")).join("\n");
const allDocsEn = publicDocSlugs.map((slug) => pageText(slug, "en-US")).join("\n");
for (const staleTerm of ["从地图进入", "机会榜", "日历", "EMOS", "LGBM", "城市决策卡", "付费判断台", "刷新锁"]) {
assert(!allDocsZh.includes(staleTerm), `public Chinese docs should not expose stale term: ${staleTerm}`);
}
for (const staleTerm of ["map-launched", "opportunity board", "calendar", "EMOS", "LGBM", "city decision card", "paid decision workspace", "refresh lock"]) {
assert(!allDocsEn.includes(staleTerm), `public English docs should not expose stale term: ${staleTerm}`);
}
const introZh = pageText("intro", "zh-CN");
assert(
introZh.includes("结算源优先") && introZh.includes("实时实测终端"),
"intro should position PolyWeather as a settlement-source-first live terminal",
introZh.includes("结算源优先") && introZh.includes("天气决策台"),
"intro should position PolyWeather as a settlement-source-first decision terminal",
);
assert(
introZh.includes("1-9 个图表槽位") && introZh.includes("天气决策 / 训练数据 / 使用指南"),
"intro should match the current terminal navigation and chart-slot workflow",
);
const chartGuideZh = pageText("chart-guide", "zh-CN");
assert(chartGuideZh.includes("如何读 PolyWeather 图表"), "chart guide title should be present");
assert(chartGuideZh.includes("高级气象变量") && chartGuideZh.includes("默认隐藏"), "chart guide should explain advanced variables as hidden-by-default context");
assert(chartGuideZh.includes("不要把概率温度带当成实测曲线"), "chart guide should warn against reading probability as observation");
assert(chartGuideZh.includes("高温 / 全天"), "chart guide should document the current chart view modes");
const realtimeSourcesZh = pageText("realtime-sources", "zh-CN");
assert(realtimeSourcesZh.includes("AMSC 180s"), "realtime sources should document the AMSC 180s cadence");
@@ -54,4 +82,5 @@ export function runTests() {
const chartGuideEn = pageText("chart-guide", "en-US");
assert(chartGuideEn.includes("How To Read PolyWeather Charts"), "English chart guide should exist");
assert(chartGuideEn.includes("hidden by default"), "English chart guide should describe hidden-by-default advanced variables");
assert(chartGuideEn.includes("Peak / All Day"), "English chart guide should document the current chart view modes");
}
@@ -28,6 +28,7 @@ export function runTests() {
const now = new Date("2026-05-14T12:00:00Z");
assert.equal(getObservationSourceProfile("amos").nativeUpdateIntervalSec, 60);
assert.equal(getObservationSourceProfile("amsc_awos").nativeUpdateIntervalSec, 180);
assert.equal(getObservationSourceProfile("metar").nativeUpdateIntervalSec, 900);
const amosFresh = buildObservationFreshness({
@@ -109,4 +110,28 @@ export function runTests() {
},
});
assert.equal(getObservationFreshness(amosDetail)?.source_code, "amos");
const amscDetail = detail({
amos: {
observation_time: "2026-05-14T11:57:20Z",
runway_obs: {
runway_pairs: [["35R", "17L"]],
temperatures: [[25.2, null]],
},
source: "amsc_awos",
source_label: "AMSC AWOS",
},
});
const amscFreshness = getObservationFreshness(amscDetail);
assert.equal(amscFreshness?.source_code, "amsc_awos");
assert.equal(amscFreshness?.native_update_interval_sec, 180);
const amscExpectedWait = buildObservationFreshness({
now,
observedAt: "2026-05-14T11:56:40Z",
sourceCode: "amsc_awos",
sourceLabel: "AMSC AWOS",
});
assert.equal(amscExpectedWait.native_update_interval_sec, 180);
assert.equal(amscExpectedWait.freshness_status, "expected_wait");
}
@@ -1170,6 +1170,29 @@ export function runTests() {
"Panama City high label should use airport METAR report wording, not weather-station or runway wording",
);
const shanghaiLabels = __getLiveObservationLabelsForTest(
{
city: "shanghai",
local_date: "2026-06-06",
local_time: "21:03",
tz_offset_seconds: 8 * 60 * 60,
} as any,
{
amos: {
source: "amsc_awos",
source_label: "AMSC AWOS",
},
airportPrimary: {
source_code: "amsc_awos",
source_label: "AMSC AWOS",
},
} as any,
);
assert(
shanghaiLabels.runwayHeaderLabel === "跑道实测 (3分钟)",
"AMSC runway cities should advertise the 3-minute source cadence instead of the AMOS 1-minute cadence",
);
const newYorkWithMadis = __buildTemperatureChartDataForTest(
{
city: "new york",
@@ -36,6 +36,18 @@ export function runTests() {
assert(shenzhen.runwayHigh === "HKO Live", "Shenzhen high summary should translate 天文台实测");
assert(shenzhen.metarHigh === "HKO", "Shenzhen high summary should translate 天文台");
const shanghai = __buildTemperatureStatsLabelsForTest({
isEn: true,
isShenzhen: false,
runwayHeaderLabel: "跑道实测 (3分钟)",
metarHeaderLabel: "METAR 结算 (30分钟)",
runwayHighLabel: "跑道实测",
metarHighLabel: "METAR 官方",
});
assert(shanghai.primary === "Runway Live (3m)", "AMSC English primary label should match 跑道实测 (3分钟)");
assert(shanghai.runwayHigh === "Runway", "AMSC runway high label should remain Runway");
const zh = __buildTemperatureStatsLabelsForTest({
isEn: false,
isShenzhen: true,
@@ -16,6 +16,10 @@ const ROLLING_WINDOW_BEFORE_MS = 12 * 60 * 60 * 1000;
const ROLLING_WINDOW_AFTER_LIVE_MS = 2 * 60 * 60 * 1000;
const ROLLING_WINDOW_AFTER_FORECAST_MS = 8 * 60 * 60 * 1000;
const DAY_MS = 24 * 60 * 60 * 1000;
const AMSC_RUNWAY_CITIES = new Set([
"beijing", "shanghai", "guangzhou", "qingdao",
"chengdu", "chongqing", "wuhan",
]);
const SETTLEMENT_RUNWAY_PAIRS: Record<string, Array<[string, string]>> = {
shanghai: [["17L", "35R"]],
@@ -1298,6 +1302,9 @@ function getLiveObservationLabels(
weatherStationCities.has(normalizedKey) ||
/\b(mgm|turkey_mgm|jma_amedas|fmi|knmi|cowin_obs|ims|ncm|aeroweb|madis_hfmetar|singapore_mss)\b/.test(sourceTokens);
const isRunwaySensorCity = runwaySensorCities.has(normalizedKey);
const isAmscRunwayCity =
AMSC_RUNWAY_CITIES.has(normalizedKey) ||
/\bamsc(?:_awos)?\b|\bawos\b/.test(sourceTokens);
const isWeatherStation = !runwaySensorCities.has(normalizedKey)
&& !isHKO && !isShenzhen && !isTokyo && !isSingapore && !isParis && !isTaipei
&& hasRealStationNetwork;
@@ -1309,7 +1316,7 @@ function getLiveObservationLabels(
: isParis ? "官方机场观测 (15分钟)"
: isTaipei ? "CWA (10分钟)"
: isWeatherStation ? "气象站实测"
: isRunwaySensorCity ? "跑道实测 (1分钟)"
: isRunwaySensorCity ? `跑道实测 (${isAmscRunwayCity ? "3分钟" : "1分钟"})`
: "机场报文";
const metarHeaderLabel = (isShenzhen || isHKO) ? "天文台实测 (10分钟)"
+329 -111
View File
@@ -1,8 +1,10 @@
.docsShell {
min-height: 100vh;
background:
linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
color: #0f172a;
linear-gradient(90deg, rgba(216, 224, 236, 0.38) 1px, transparent 1px),
linear-gradient(180deg, #f8fbff 0%, #eef4fb 54%, #f5f8fc 100%);
background-size: 44px 44px, auto;
color: var(--color-text-primary, #0f172a);
}
.docsHeader {
@@ -12,35 +14,44 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 24px;
background: rgba(255, 255, 255, 0.94);
border-bottom: 1px solid #d9e3ef;
gap: 18px;
min-height: 58px;
padding: 10px 24px;
border-bottom: 1px solid rgba(184, 196, 214, 0.74);
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
backdrop-filter: blur(14px);
backdrop-filter: blur(16px);
}
.brandWrap {
display: flex;
align-items: baseline;
gap: 12px;
min-width: 0;
}
.brandLink {
color: #0891b2;
font-size: 1.55rem;
font-weight: 800;
color: #0f172a;
font-size: 1.24rem;
font-weight: 850;
letter-spacing: 0;
text-decoration: none;
}
.brandLink::first-letter {
color: var(--color-accent-primary, #2563eb);
}
.brandSubtitle {
color: #64748b;
font-size: 0.92rem;
font-size: 0.88rem;
white-space: nowrap;
}
.headerActions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
@@ -49,101 +60,121 @@
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 38px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid #cbd5e1;
background: #ffffff;
color: #334155;
padding: 0 13px;
border: 1px solid var(--color-border-default, #d8e0ec);
border-radius: 10px;
background: var(--color-bg-raised, #ffffff);
color: #1e293b;
text-decoration: none;
font-size: 0.92rem;
font-weight: 700;
font-size: 0.9rem;
font-weight: 800;
cursor: pointer;
transition:
border-color 160ms ease,
color 160ms ease,
background 160ms ease;
background 160ms ease,
box-shadow 160ms ease;
}
.headerButton:hover,
.headerGhost:hover {
border-color: #38bdf8;
color: #075985;
background: #f0f9ff;
border-color: #93c5fd;
color: #1d4ed8;
background: #eff6ff;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.1);
}
.headerGhost svg,
.mobileMenuButton svg {
flex: 0 0 auto;
}
.langSwitch {
display: flex;
border: 1px solid #cbd5e1;
border-radius: 999px;
overflow: hidden;
background: #ffffff;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px;
border: 1px solid var(--color-border-default, #d8e0ec);
border-radius: 10px;
background: #e8edf5;
}
.langButton {
min-width: 54px;
min-height: 38px;
min-width: 48px;
min-height: 32px;
padding: 0 9px;
border: 0;
border-radius: 8px;
background: transparent;
color: #64748b;
font-weight: 800;
font-size: 0.82rem;
font-weight: 850;
cursor: pointer;
}
.langButtonActive {
background: #e0f2fe;
color: #0369a1;
background: #ffffff;
color: #0f172a;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.docsFrame {
display: grid;
grid-template-columns: 260px minmax(0, 820px) 220px;
grid-template-columns: 268px minmax(0, 850px) 226px;
justify-content: center;
gap: 28px;
gap: 24px;
width: 100%;
max-width: 1440px;
max-width: 1480px;
margin: 0 auto;
padding: 24px;
padding: 28px 24px 68px;
}
.sidebar {
position: sticky;
top: 84px;
top: 82px;
align-self: start;
max-height: calc(100vh - 108px);
max-height: calc(100vh - 106px);
overflow: auto;
padding: 16px;
border: 1px solid #d8e3ef;
border-radius: 16px;
padding: 14px;
border: 1px solid rgba(184, 196, 214, 0.72);
border-radius: 10px;
background: #ffffff;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
box-shadow: var(--shadow-elevation-2, 0 8px 24px rgba(15, 23, 42, 0.06));
}
.sidebarGroup + .sidebarGroup {
margin-top: 22px;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid #e8edf5;
}
.sidebarTitle {
margin: 0 0 8px;
padding: 0 8px;
color: #64748b;
font-size: 0.78rem;
font-weight: 800;
font-size: 0.74rem;
font-weight: 850;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.sidebarLink {
position: relative;
display: block;
margin-bottom: 4px;
padding: 9px 10px;
margin-bottom: 3px;
padding: 9px 10px 9px 14px;
border-radius: 8px;
color: #334155;
text-decoration: none;
font-size: 0.94rem;
font-size: 0.92rem;
font-weight: 650;
line-height: 1.35;
transition:
background 160ms ease,
color 160ms ease;
color 160ms ease,
box-shadow 160ms ease;
}
.sidebarLink:hover {
@@ -152,9 +183,10 @@
}
.sidebarLinkActive {
background: #e0f2fe;
color: #0369a1;
font-weight: 800;
background: #eff6ff;
color: #1d4ed8;
font-weight: 850;
box-shadow: inset 3px 0 0 var(--color-accent-primary, #2563eb);
}
.content {
@@ -162,39 +194,106 @@
}
.contentInner {
padding: 16px 0 56px;
padding: 0 0 52px;
}
.pageIntro {
padding: 28px 30px;
border: 1px solid rgba(184, 196, 214, 0.72);
border-radius: 12px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.96));
box-shadow: var(--shadow-elevation-2, 0 8px 24px rgba(15, 23, 42, 0.06));
}
.introKicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
color: #047857;
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.introKicker svg {
color: #00897b;
}
.pageTitle {
margin: 0;
color: #0f172a;
font-size: clamp(2rem, 4vw, 3.05rem);
font-size: clamp(2rem, 3vw, 2.72rem);
font-weight: 850;
line-height: 1.12;
letter-spacing: 0;
line-height: 1.1;
}
.pageDescription {
max-width: 760px;
margin: 14px 0 0;
color: #475569;
font-size: 1.03rem;
font-size: 1.02rem;
line-height: 1.75;
}
.pageMeta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.pageMeta span {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 10px;
border: 1px solid #dbeafe;
border-radius: 8px;
background: #eff6ff;
color: #1d4ed8;
font-size: 0.78rem;
font-weight: 850;
}
.section {
margin-top: 40px;
scroll-margin-top: 104px;
margin-top: 0;
padding: 34px 2px 30px;
border-bottom: 1px solid rgba(216, 224, 236, 0.78);
scroll-margin-top: 92px;
}
.section:last-child {
border-bottom: 0;
}
.sectionTitle {
margin: 0 0 14px;
color: #1e293b;
font-size: 1.45rem;
font-weight: 800;
line-height: 1.25;
position: relative;
margin: 0 0 16px;
padding-left: 14px;
color: #172033;
font-size: 1.34rem;
font-weight: 850;
letter-spacing: 0;
line-height: 1.3;
}
.sectionTitle::before {
content: "";
position: absolute;
left: 0;
top: 0.16em;
bottom: 0.16em;
width: 4px;
border-radius: 4px;
background: linear-gradient(180deg, #2563eb, #00897b);
}
.paragraph {
max-width: 780px;
margin: 0 0 15px;
color: #334155;
font-size: 1rem;
@@ -202,34 +301,37 @@
}
.callout {
position: relative;
max-width: 790px;
margin: 20px 0;
padding: 18px 20px;
border: 1px solid #d8e3ef;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
padding: 17px 18px 17px 20px;
border: 1px solid #d8e0ec;
border-left-width: 4px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}
.calloutInfo {
border-color: #bae6fd;
background: #f0f9ff;
border-left-color: var(--color-accent-primary, #2563eb);
background: #f5f9ff;
}
.calloutWarning {
border-color: #fde68a;
background: #fffbeb;
border-left-color: #d97706;
background: #fffaf0;
}
.calloutSuccess {
border-color: #bbf7d0;
background: #f0fdf4;
border-left-color: #00897b;
background: #f0fdfa;
}
.calloutTitle {
margin: 0 0 8px;
margin: 0 0 7px;
color: #0f172a;
font-size: 0.98rem;
font-weight: 800;
font-weight: 850;
}
.calloutText {
@@ -239,14 +341,68 @@
}
.list {
margin: 0 0 16px;
padding-left: 22px;
max-width: 800px;
margin: 0 0 18px;
padding: 0;
color: #334155;
line-height: 1.8;
line-height: 1.75;
}
.list li + li {
margin-top: 8px;
margin-top: 9px;
}
.bulletList {
list-style: none;
}
.bulletList li {
position: relative;
padding-left: 22px;
}
.bulletList li::before {
content: "";
position: absolute;
left: 3px;
top: 0.72em;
width: 7px;
height: 7px;
border-radius: 999px;
background: #00897b;
box-shadow: 0 0 0 4px rgba(0, 137, 123, 0.1);
}
.stepList {
list-style: none;
counter-reset: docs-step;
}
.stepList li {
counter-increment: docs-step;
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: 12px;
align-items: start;
padding: 12px 14px;
border: 1px solid rgba(216, 224, 236, 0.88);
border-radius: 10px;
background: rgba(255, 255, 255, 0.72);
}
.stepList li::before {
content: counter(docs-step);
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #0f172a;
color: #ffffff;
font-size: 0.76rem;
font-weight: 900;
font-variant-numeric: tabular-nums;
}
.linkCard {
@@ -254,17 +410,24 @@
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 16px;
border-radius: 999px;
border: 1px solid #38bdf8;
background: #e0f2fe;
color: #0369a1;
padding: 0 15px;
border: 1px solid #93c5fd;
border-radius: 10px;
background: #eff6ff;
color: #1d4ed8;
text-decoration: none;
font-weight: 800;
font-weight: 850;
}
.linkCard::after {
content: "->";
margin-left: 8px;
font-family: var(--font-mono, monospace);
}
.linkCard:hover {
background: #bae6fd;
border-color: #60a5fa;
background: #dbeafe;
}
.linkCaption {
@@ -273,42 +436,65 @@
line-height: 1.7;
}
.content figure {
max-width: 800px;
margin: 22px 0;
}
.content img {
display: block;
width: 100%;
height: auto;
border: 1px solid #d8e0ec;
border-radius: 10px;
background: #ffffff;
}
.content figcaption {
margin-top: 9px;
color: #64748b;
font-size: 0.9rem;
line-height: 1.6;
}
.toc {
position: sticky;
top: 84px;
top: 82px;
align-self: start;
padding: 16px;
border: 1px solid #d8e3ef;
border-radius: 16px;
padding: 14px;
border: 1px solid rgba(184, 196, 214, 0.72);
border-radius: 10px;
background: #ffffff;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
box-shadow: var(--shadow-elevation-1, 0 1px 3px rgba(15, 23, 42, 0.05));
}
.tocTitle {
margin: 0 0 10px;
color: #64748b;
font-size: 0.78rem;
font-weight: 800;
font-size: 0.74rem;
font-weight: 850;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.tocLink {
display: block;
padding: 5px 0;
padding: 7px 0 7px 12px;
border-left: 2px solid #e8edf5;
color: #475569;
text-decoration: none;
line-height: 1.55;
font-size: 0.92rem;
line-height: 1.45;
font-size: 0.88rem;
}
.tocLink:hover {
color: #0369a1;
border-left-color: #2563eb;
color: #1d4ed8;
}
.mobileMenuButton {
display: none;
margin-bottom: 18px;
margin-bottom: 14px;
}
.mobileSidebarBackdrop {
@@ -317,7 +503,7 @@
@media (max-width: 1200px) {
.docsFrame {
grid-template-columns: 240px minmax(0, 820px);
grid-template-columns: 248px minmax(0, 850px);
justify-content: start;
}
@@ -330,10 +516,12 @@
.docsHeader {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
.docsFrame {
grid-template-columns: minmax(0, 1fr);
padding-top: 18px;
}
.mobileMenuButton {
@@ -345,10 +533,12 @@
top: 0;
left: 0;
z-index: 60;
width: min(320px, 88vw);
width: min(326px, 88vw);
height: 100vh;
height: 100dvh;
max-height: none;
border-radius: 0 16px 16px 0;
padding: 18px 14px;
border-radius: 0 10px 10px 0;
transform: translateX(-100%);
transition: transform 180ms ease-out;
}
@@ -361,37 +551,65 @@
position: fixed;
inset: 0;
z-index: 50;
background: rgba(15, 23, 42, 0.48);
display: block;
border: 0;
background: rgba(15, 23, 42, 0.48);
}
}
@media (max-width: 640px) {
.docsHeader {
padding: 14px 16px;
}
.docsFrame {
padding: 16px;
padding: 12px 14px;
}
.brandWrap {
flex-direction: column;
align-items: flex-start;
gap: 4px;
gap: 2px;
}
.brandSubtitle {
white-space: normal;
}
.headerActions {
width: 100%;
align-items: stretch;
justify-content: space-between;
}
.headerGhost,
.langSwitch {
flex: 1 1 auto;
}
.langSwitch {
justify-content: center;
}
.docsFrame {
padding: 14px 14px 48px;
}
.pageIntro {
padding: 22px 18px;
}
.pageTitle {
font-size: 2rem;
font-size: 1.9rem;
}
.pageDescription,
.paragraph {
font-size: 1rem;
font-size: 0.98rem;
}
.section {
padding: 28px 0 26px;
}
.stepList li {
grid-template-columns: 30px minmax(0, 1fr);
padding: 11px 12px;
}
}
+31 -6
View File
@@ -4,6 +4,7 @@ import Link from "next/link";
import { useMemo, useState } from "react";
import { usePathname } from "next/navigation";
import clsx from "clsx";
import { ArrowLeft, BookOpen, Menu } from "lucide-react";
import styles from "./DocsLayout.module.css";
import {
DocsLocale,
@@ -30,6 +31,7 @@ function DocsHeader() {
<div className={styles.headerActions}>
<Link href="/" className={styles.headerGhost}>
<ArrowLeft size={16} aria-hidden="true" />
{locale === "zh-CN" ? "返回主站" : "Back to App"}
</Link>
<div className={styles.langSwitch} role="group" aria-label="Language switch">
@@ -81,6 +83,7 @@ function DocsSidebar({
key={page.slug}
href={href}
className={clsx(styles.sidebarLink, currentSlug === page.slug && styles.sidebarLinkActive)}
aria-current={currentSlug === page.slug ? "page" : undefined}
onClick={onClose}
>
{title}
@@ -114,20 +117,30 @@ function BlockRenderer({ block }: { block: DocsPageContent["sections"][number]["
return <p className={styles.paragraph}>{block.text}</p>;
case "callout":
return (
<div className={clsx(styles.callout, block.tone === "warning" && styles.calloutWarning, block.tone === "success" && styles.calloutSuccess, (!block.tone || block.tone === "info") && styles.calloutInfo)}>
<div
className={clsx(styles.callout, block.tone === "warning" && styles.calloutWarning, block.tone === "success" && styles.calloutSuccess, (!block.tone || block.tone === "info") && styles.calloutInfo)}
role="note"
>
{block.title ? <div className={styles.calloutTitle}>{block.title}</div> : null}
<p className={styles.calloutText}>{block.text}</p>
</div>
);
case "bullets":
case "steps":
return (
<ul className={styles.list}>
<ul className={clsx(styles.list, styles.bulletList)}>
{block.items.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
);
case "steps":
return (
<ol className={clsx(styles.list, styles.stepList)}>
{block.items.map((item) => (
<li key={item}>{item}</li>
))}
</ol>
);
case "link":
return (
<div>
@@ -175,10 +188,22 @@ export function DocsScreen({ page }: { page: DocsPage }) {
<main className={styles.content}>
<div className={styles.contentInner}>
<button type="button" className={clsx(styles.headerButton, styles.mobileMenuButton)} onClick={() => setMobileSidebarOpen(true)}>
{locale === "zh-CN" ? "打开导航" : "Open navigation"}
<Menu size={16} aria-hidden="true" />
{locale === "zh-CN" ? "目录" : "Contents"}
</button>
<h1 className={styles.pageTitle}>{localizedPage.title}</h1>
<p className={styles.pageDescription}>{localizedPage.description}</p>
<div className={styles.pageIntro}>
<div className={styles.introKicker}>
<BookOpen size={16} aria-hidden="true" />
{locale === "zh-CN" ? "PolyWeather 产品手册" : "PolyWeather Product Manual"}
</div>
<h1 className={styles.pageTitle}>{localizedPage.title}</h1>
<p className={styles.pageDescription}>{localizedPage.description}</p>
<div className={styles.pageMeta} aria-label={locale === "zh-CN" ? "文档范围" : "Document scope"}>
<span>{locale === "zh-CN" ? "当前工作台" : "Current terminal"}</span>
<span>{locale === "zh-CN" ? `${DOCS_PAGES.length} 篇文档` : `${DOCS_PAGES.length} docs`}</span>
<span>{locale === "zh-CN" ? `${localizedPage.sections.length} 个章节` : `${localizedPage.sections.length} sections`}</span>
</div>
</div>
{localizedPage.sections.map((section) => (
<section key={section.id} id={section.id} className={styles.section}>
<h2 className={styles.sectionTitle}>{section.title}</h2>
@@ -60,13 +60,13 @@ const FEATURES = {
"zh-CN": [
"市场扫描台 + V4-Pro 深度复核",
"今日日内机场报文规则分析(含高温时段)",
"未来日期分析 + 城市决策卡",
"多城市图表巡检 + 未来日期分析",
"全平台智能气象推送",
],
"en-US": [
"Market Scan Terminal + V4-Pro review",
"Intraday METAR rule-based analysis with peak-time window",
"Future-date analysis + city decision cards",
"Multi-city chart monitoring + future-date analysis",
"Cross-platform alerts",
],
};