Refresh product docs and observation freshness
This commit is contained in:
2569718930@qq.com
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user