Add bilingual docs center and replace the guide modal
This commit is contained in:
2569718930@qq.com
@@ -0,0 +1,320 @@
|
||||
.docsShell {
|
||||
min-height: 100vh;
|
||||
color: rgba(226, 232, 240, 0.94);
|
||||
}
|
||||
|
||||
.docsHeader {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 18px 24px;
|
||||
background: rgba(2, 6, 23, 0.82);
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.brandWrap {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.brandLink {
|
||||
color: #67e8f9;
|
||||
font-size: 1.9rem;
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brandSubtitle {
|
||||
color: rgba(148, 163, 184, 0.88);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.headerActions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.headerButton,
|
||||
.headerGhost {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 38px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
background: rgba(15, 23, 42, 0.75);
|
||||
color: rgba(226, 232, 240, 0.95);
|
||||
text-decoration: none;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.headerGhost {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.langSwitch {
|
||||
display: flex;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.langButton {
|
||||
min-width: 54px;
|
||||
min-height: 38px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: rgba(148, 163, 184, 0.92);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.langButtonActive {
|
||||
background: rgba(34, 211, 238, 0.16);
|
||||
color: #67e8f9;
|
||||
}
|
||||
|
||||
.docsFrame {
|
||||
display: grid;
|
||||
grid-template-columns: 280px minmax(0, 1fr) 220px;
|
||||
gap: 28px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 86px;
|
||||
align-self: start;
|
||||
max-height: calc(100vh - 110px);
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.12);
|
||||
border-radius: 20px;
|
||||
background: rgba(15, 23, 42, 0.72);
|
||||
}
|
||||
|
||||
.sidebarGroup + .sidebarGroup {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.sidebarTitle {
|
||||
margin: 0 0 10px;
|
||||
color: rgba(148, 163, 184, 0.92);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sidebarLink {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
color: rgba(226, 232, 240, 0.88);
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.sidebarLinkActive {
|
||||
background: rgba(34, 211, 238, 0.12);
|
||||
color: #67e8f9;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.contentInner {
|
||||
padding: 12px 0 48px;
|
||||
}
|
||||
|
||||
.pageTitle {
|
||||
margin: 0;
|
||||
font-size: clamp(2.1rem, 4vw, 3.2rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.pageDescription {
|
||||
max-width: 820px;
|
||||
margin: 14px 0 0;
|
||||
color: rgba(191, 219, 254, 0.9);
|
||||
font-size: 1.03rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 40px;
|
||||
scroll-margin-top: 110px;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
margin: 0 0 16px;
|
||||
font-size: 1.65rem;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
margin: 0 0 16px;
|
||||
color: rgba(226, 232, 240, 0.94);
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.callout {
|
||||
margin: 18px 0;
|
||||
padding: 18px 20px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.16);
|
||||
border-radius: 18px;
|
||||
background: rgba(15, 23, 42, 0.72);
|
||||
}
|
||||
|
||||
.calloutInfo {
|
||||
border-color: rgba(34, 211, 238, 0.24);
|
||||
background: rgba(8, 47, 73, 0.26);
|
||||
}
|
||||
|
||||
.calloutWarning {
|
||||
border-color: rgba(251, 191, 36, 0.24);
|
||||
background: rgba(120, 53, 15, 0.2);
|
||||
}
|
||||
|
||||
.calloutSuccess {
|
||||
border-color: rgba(52, 211, 153, 0.24);
|
||||
background: rgba(6, 78, 59, 0.22);
|
||||
}
|
||||
|
||||
.calloutTitle {
|
||||
margin: 0 0 8px;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calloutText {
|
||||
margin: 0;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
color: rgba(226, 232, 240, 0.94);
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
.list li + li {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.toc {
|
||||
position: sticky;
|
||||
top: 86px;
|
||||
align-self: start;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.12);
|
||||
border-radius: 20px;
|
||||
background: rgba(15, 23, 42, 0.64);
|
||||
}
|
||||
|
||||
.tocTitle {
|
||||
margin: 0 0 12px;
|
||||
color: rgba(148, 163, 184, 0.92);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tocLink {
|
||||
display: block;
|
||||
color: rgba(226, 232, 240, 0.86);
|
||||
text-decoration: none;
|
||||
line-height: 1.7;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.mobileMenuButton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobileSidebarBackdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.docsFrame {
|
||||
grid-template-columns: 260px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.toc {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.docsHeader {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.docsFrame {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.mobileMenuButton {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 60;
|
||||
width: min(320px, 88vw);
|
||||
height: 100vh;
|
||||
max-height: none;
|
||||
border-radius: 0 20px 20px 0;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
||||
.sidebarOpen {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.mobileSidebarBackdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
background: rgba(2, 6, 23, 0.52);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.docsHeader {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.docsFrame {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.brandWrap {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.pageDescription {
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useMemo, useState } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import clsx from "clsx";
|
||||
import styles from "./DocsLayout.module.css";
|
||||
import {
|
||||
DocsLocale,
|
||||
DocsPage,
|
||||
DocsPageContent,
|
||||
} from "@/content/docs/docs";
|
||||
import { DOCS_GROUPS } from "@/content/docs/docs.config";
|
||||
import { DOCS_PAGES } from "@/content/docs/docs";
|
||||
import { useI18n } from "@/hooks/useI18n";
|
||||
|
||||
function DocsHeader() {
|
||||
const { locale, setLocale } = useI18n();
|
||||
|
||||
return (
|
||||
<header className={styles.docsHeader}>
|
||||
<div className={styles.brandWrap}>
|
||||
<Link href="/" className={styles.brandLink}>
|
||||
PolyWeather
|
||||
</Link>
|
||||
<span className={styles.brandSubtitle}>
|
||||
{locale === "zh-CN" ? "产品文档中心" : "Product Documentation"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.headerActions}>
|
||||
<Link href="/" className={styles.headerGhost}>
|
||||
{locale === "zh-CN" ? "返回主站" : "Back to App"}
|
||||
</Link>
|
||||
<div className={styles.langSwitch} role="group" aria-label="Language switch">
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(styles.langButton, locale === "zh-CN" && styles.langButtonActive)}
|
||||
onClick={() => setLocale("zh-CN")}
|
||||
>
|
||||
中文
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(styles.langButton, locale === "en-US" && styles.langButtonActive)}
|
||||
onClick={() => setLocale("en-US")}
|
||||
>
|
||||
EN
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function DocsSidebar({
|
||||
currentSlug,
|
||||
locale,
|
||||
open,
|
||||
onClose,
|
||||
}: {
|
||||
currentSlug: string;
|
||||
locale: DocsLocale;
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
{open && <button type="button" className={styles.mobileSidebarBackdrop} onClick={onClose} aria-label="Close menu" />}
|
||||
<aside className={clsx(styles.sidebar, open && styles.sidebarOpen)}>
|
||||
{DOCS_GROUPS.map((group) => {
|
||||
const pages = DOCS_PAGES.filter((page) => page.group === group.id);
|
||||
return (
|
||||
<div key={group.id} className={styles.sidebarGroup}>
|
||||
<div className={styles.sidebarTitle}>{group.title[locale]}</div>
|
||||
{pages.map((page) => {
|
||||
const title = page.content[locale].title;
|
||||
const href = `/docs/${page.slug}`;
|
||||
return (
|
||||
<Link
|
||||
key={page.slug}
|
||||
href={href}
|
||||
className={clsx(styles.sidebarLink, currentSlug === page.slug && styles.sidebarLinkActive)}
|
||||
onClick={onClose}
|
||||
>
|
||||
{title}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function DocsToc({ page, locale }: { page: DocsPageContent; locale: DocsLocale }) {
|
||||
return (
|
||||
<aside className={styles.toc}>
|
||||
<div className={styles.tocTitle}>{locale === "zh-CN" ? "本页目录" : "On this page"}</div>
|
||||
{page.sections.map((section) => (
|
||||
<a key={section.id} href={`#${section.id}`} className={styles.tocLink}>
|
||||
{section.title}
|
||||
</a>
|
||||
))}
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function BlockRenderer({ block }: { block: DocsPageContent["sections"][number]["blocks"][number] }) {
|
||||
switch (block.type) {
|
||||
case "paragraph":
|
||||
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)}>
|
||||
{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}>
|
||||
{block.items.map((item) => (
|
||||
<li key={item}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
case "image":
|
||||
return (
|
||||
<figure>
|
||||
<img src={block.src} alt={block.alt} />
|
||||
{block.caption ? <figcaption>{block.caption}</figcaption> : null}
|
||||
</figure>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function DocsScreen({ page }: { page: DocsPage }) {
|
||||
const pathname = usePathname();
|
||||
const { locale } = useI18n();
|
||||
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
||||
const localizedPage = useMemo(() => page.content[locale], [locale, page]);
|
||||
const currentSlug = pathname?.split("/").filter(Boolean).at(-1) || page.slug;
|
||||
|
||||
return (
|
||||
<div className={styles.docsShell}>
|
||||
<DocsHeader />
|
||||
<div className={styles.docsFrame}>
|
||||
<DocsSidebar
|
||||
currentSlug={currentSlug}
|
||||
locale={locale}
|
||||
open={mobileSidebarOpen}
|
||||
onClose={() => setMobileSidebarOpen(false)}
|
||||
/>
|
||||
|
||||
<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"}
|
||||
</button>
|
||||
<h1 className={styles.pageTitle}>{localizedPage.title}</h1>
|
||||
<p className={styles.pageDescription}>{localizedPage.description}</p>
|
||||
{localizedPage.sections.map((section) => (
|
||||
<section key={section.id} id={section.id} className={styles.section}>
|
||||
<h2 className={styles.sectionTitle}>{section.title}</h2>
|
||||
{section.blocks.map((block, index) => (
|
||||
<BlockRenderer key={`${section.id}-${index}`} block={block} />
|
||||
))}
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<DocsToc page={localizedPage} locale={locale} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user