Skip to content

Commit 3cb9543

Browse files
jiayuqi7813jiayuqi7813
committed
添加技术报告页面组件及相关样式，更新架构页面以使用新组件
1 parent 49293f6 commit 3cb9543

6 files changed

Lines changed: 722 additions & 7 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ It owns the protocol-facing explanation layer:
1212
- benchmark methodology and published benchmark presentation
1313

1414
The reference Python SDK and runtime live in
15-
[`zero-context-protocol-python`](https://github.com/jiayuqi7813/zero-context-protocol-python).
15+
[`zero-context-protocol-python`](https://github.com/FishCodeTech/zero-context-protocol-python).
1616

1717
## What This Repository Owns
1818

‎docs/web/app/[lang]/architecture/page.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { notFound } from "next/navigation";
22

3-
import { SimpleDocPage } from "../../_components/simple-doc-page";
3+
import { TechnicalReportPage } from "../../_components/technical-report-page";
44
import { normalizeLocale } from "../../lib/i18n";
5-
import { simplePageCopy } from "../../lib/site-copy";
65

76
export default async function LocalizedArchitecturePage({ params }: { params: Promise<{ lang: string }> }) {
87
const { lang } = await params;
@@ -11,5 +10,5 @@ export default async function LocalizedArchitecturePage({ params }: { params: Pr
1110
notFound();
1211
}
1312

14-
return <SimpleDocPage locale="zh" page={simplePageCopy.zh.architecture} />;
13+
return <TechnicalReportPage locale="zh" />;
1514
}

‎docs/web/app/_components/technical-report-page.tsx‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
import Link from "next/link";
2+
3+
import { getTechnicalReportCopy } from "../lib/technical-report";
4+
import { Locale, localeHref } from "../lib/i18n";
5+
6+
export function TechnicalReportPage({ locale }: { locale: Locale }) {
7+
const copy = getTechnicalReportCopy(locale);
8+
9+
return (
10+
<div className="site-shell article">
11+
<aside className="sidebar">
12+
<div className="eyebrow">{copy.navLabel}</div>
13+
<nav>
14+
{copy.nav.map((item) => (
15+
<a href={localeHref(locale, item.href)} key={item.href}>
16+
{item.label}
17+
</a>
18+
))}
19+
</nav>
20+
</aside>
21+
22+
<main className="prose report-paper">
23+
<header className="report-header">
24+
<h1>{copy.title}</h1>
25+
<div className="page-summary">
26+
<p>{copy.subtitle}</p>
27+
</div>
28+
<section className="report-abstract" id="abstract">
29+
<h2>{copy.abstractTitle}</h2>
30+
{copy.abstract.map((paragraph) => (
31+
<p key={paragraph}>{paragraph}</p>
32+
))}
33+
</section>
34+
<div className="report-metrics">
35+
{copy.metrics.map((metric) => (
36+
<div className="report-metric" key={metric.label}>
37+
<div className="report-metric-label">{metric.label}</div>
38+
<div className="report-metric-value">{metric.value}</div>
39+
<p>{metric.note}</p>
40+
</div>
41+
))}
42+
</div>
43+
</header>
44+
45+
<section className="simple-page-section" id="architecture-figure">
46+
<h2>{copy.figureArchitectureTitle}</h2>
47+
<p>{copy.figureArchitectureCaption}</p>
48+
<ArchitectureFigure locale={locale} />
49+
</section>
50+
51+
{copy.sections.map((section) => (
52+
<section className="simple-page-section" id={section.id} key={section.id}>
53+
<h2>{section.title}</h2>
54+
{section.paragraphs?.map((paragraph) => <p key={paragraph}>{paragraph}</p>)}
55+
{section.bullets ? (
56+
<ul className="summary-list">
57+
{section.bullets.map((bullet) => (
58+
<li key={bullet}>{bullet}</li>
59+
))}
60+
</ul>
61+
) : null}
62+
</section>
63+
))}
64+
65+
<section className="simple-page-section" id="principle-table">
66+
<h2>{locale === "zh" ? "表 1. 原理级对比" : "Table 1. Principle-Level Comparison"}</h2>
67+
<div className="table-wrap">
68+
<table className="content-table">
69+
<thead>
70+
<tr>
71+
{copy.principleHeaders.map((header) => (
72+
<th key={header}>{header}</th>
73+
))}
74+
</tr>
75+
</thead>
76+
<tbody>
77+
{copy.principleRows.map((row) => (
78+
<tr key={row.join("|")}>
79+
{row.map((cell) => (
80+
<td key={cell}>{cell}</td>
81+
))}
82+
</tr>
83+
))}
84+
</tbody>
85+
</table>
86+
</div>
87+
</section>
88+
89+
<section className="simple-page-section" id="execution-figure">
90+
<h2>{copy.figureExecutionTitle}</h2>
91+
<p>{copy.figureExecutionCaption}</p>
92+
<ExecutionFigure locale={locale} />
93+
</section>
94+
95+
<section className="simple-page-section" id="benchmarks-overall">
96+
<h2>{locale === "zh" ? "表 2. Overall Benchmark" : "Table 2. Overall Benchmark"}</h2>
97+
<div className="table-wrap">
98+
<table className="content-table">
99+
<thead>
100+
<tr>
101+
{copy.overallHeaders.map((header) => (
102+
<th key={header}>{header}</th>
103+
))}
104+
</tr>
105+
</thead>
106+
<tbody>
107+
{copy.overallRows.map((row) => (
108+
<tr key={row.join("|")}>
109+
{row.map((cell) => (
110+
<td key={cell}>{cell}</td>
111+
))}
112+
</tr>
113+
))}
114+
</tbody>
115+
</table>
116+
</div>
117+
</section>
118+
119+
<section className="simple-page-section" id="benchmarks-tier">
120+
<h2>{locale === "zh" ? "表 3. Tier Breakdown" : "Table 3. Tier Breakdown"}</h2>
121+
<div className="table-wrap">
122+
<table className="content-table">
123+
<thead>
124+
<tr>
125+
{copy.tierHeaders.map((header) => (
126+
<th key={header}>{header}</th>
127+
))}
128+
</tr>
129+
</thead>
130+
<tbody>
131+
{copy.tierRows.map((row) => (
132+
<tr key={row.join("|")}>
133+
{row.map((cell) => (
134+
<td key={cell}>{cell}</td>
135+
))}
136+
</tr>
137+
))}
138+
</tbody>
139+
</table>
140+
</div>
141+
</section>
142+
143+
<section className="simple-page-section" id="limits">
144+
<h2>{copy.limitsTitle}</h2>
145+
<ul className="summary-list">
146+
{copy.limits.map((item) => (
147+
<li key={item}>{item}</li>
148+
))}
149+
</ul>
150+
</section>
151+
152+
<section className="simple-page-section" id="conclusion">
153+
<h2>{copy.conclusionTitle}</h2>
154+
{copy.conclusion.map((paragraph) => (
155+
<p key={paragraph}>{paragraph}</p>
156+
))}
157+
</section>
158+
159+
<h2 id="read-next">{locale === "zh" ? "继续阅读" : "Read next"}</h2>
160+
<p>
161+
{copy.readNext.map((item, index) => (
162+
<span key={item.href}>
163+
{index > 0 ? ", " : ""}
164+
<Link href={localeHref(locale, item.href)}>{item.label}</Link>
165+
</span>
166+
))}
167+
.
168+
</p>
169+
</main>
170+
</div>
171+
);
172+
}
173+
174+
function ArchitectureFigure({ locale }: { locale: Locale }) {
175+
const labels = getTechnicalReportCopy(locale).figureLabels;
176+
return (
177+
<div className="report-figure">
178+
<div className="report-figure-grid">
179+
<div className="report-column">
180+
<div className="report-column-label">{labels.clients}</div>
181+
<div className="report-node report-node-strong">{labels.clientMcp}</div>
182+
<div className="report-node report-node-strong">{labels.clientZcp}</div>
183+
</div>
184+
<div className="report-column">
185+
<div className="report-column-label">{labels.surfaces}</div>
186+
<div className="report-node">{labels.mcpSurface}</div>
187+
<div className="report-node">{labels.nativeSurface}</div>
188+
</div>
189+
<div className="report-column">
190+
<div className="report-column-label">{labels.runtime}</div>
191+
<div className="report-node report-node-runtime">{labels.host}</div>
192+
<div className="report-node report-node-muted">{labels.policy}</div>
193+
</div>
194+
</div>
195+
</div>
196+
);
197+
}
198+
199+
function ExecutionFigure({ locale }: { locale: Locale }) {
200+
const labels = getTechnicalReportCopy(locale).figureLabels;
201+
return (
202+
<div className="report-comparison">
203+
<div className="report-track">
204+
<h3>{labels.mcpSurface}</h3>
205+
<div className="report-step">{labels.toolListAll}</div>
206+
<div className="report-arrow" />
207+
<div className="report-step">{labels.genericPlanning}</div>
208+
<div className="report-arrow" />
209+
<div className="report-step">{labels.verboseResults}</div>
210+
</div>
211+
<div className="report-track">
212+
<h3>{labels.nativeSurface}</h3>
213+
<div className="report-step report-step-accent">{labels.semanticSubset}</div>
214+
<div className="report-arrow" />
215+
<div className="report-step report-step-accent">{labels.stagedPlanning}</div>
216+
<div className="report-arrow" />
217+
<div className="report-step report-step-accent">{labels.compactResults}</div>
218+
<div className="report-feedback">{labels.feedbackLoop}</div>
219+
</div>
220+
</div>
221+
);
222+
}

‎docs/web/app/architecture/page.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { SimpleDocPage } from "../_components/simple-doc-page";
2-
import { simplePageCopy } from "../lib/site-copy";
1+
import { TechnicalReportPage } from "../_components/technical-report-page";
32

43
export default function ArchitecturePage() {
5-
return <SimpleDocPage locale="en" page={simplePageCopy.en.architecture} />;
4+
return <TechnicalReportPage locale="en" />;
65
}

0 commit comments

Comments
 (0)