docs: typography

This commit is contained in:
Simon
2026-01-30 16:34:27 +08:00
parent d11a2593b3
commit 6cd3e3726c
9 changed files with 61 additions and 29 deletions

View File

@@ -3,6 +3,8 @@
word-break: break-word;
overflow-wrap: break-word;
font-family: monospace;
font-size: 13px;
line-height: 1;
color: #171717;
}

View File

@@ -71,7 +71,43 @@ html.dark,
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Noto Sans',
'Liberation Sans',
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji';
}
/* 文档正文排版优化 */
.prose {
letter-spacing: 0.01em;
font-weight: 380;
}
.prose p {
line-height: 1.6;
}
/* 标题使用中等字重(相对细体更重,但比默认 bold 更轻) */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
font-weight: 480;
}
/* strong/b 也用中等字重 */
.prose strong,
.prose b {
font-weight: 480;
}
/* 确保文档页面标题在暗色模式下可见 - 只针对 prose 内的标题 */

View File

@@ -101,7 +101,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
<path d={siGooglechrome.path} fill="currentColor" />
</svg>
<SparklesText
className="text-[length:inherit] font-[inherit]"
className="text-[length:inherit] font-[inherit] font-medium"
sparklesCount={3}
>
{item.title}
@@ -123,7 +123,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
{/* Main Content */}
<main className="flex-1 min-w-0" id="main-content" role="main">
<div className="prose prose-lg dark:prose-invert max-w-none">{children}</div>
<div className="prose dark:prose-invert max-w-none">{children}</div>
</main>
</div>
</div>

View File

@@ -50,8 +50,8 @@ export default function CustomUIDocs() {
<h2 className="text-2xl font-semibold mb-4">{isZh ? '两个事件流' : 'Two Event Streams'}</h2>
<p className="text-gray-600 dark:text-gray-400 mb-4">
{isZh
? 'PageAgentCore 提供两种不同性质的事件流,服务于不同的 UI 需求'
: 'PageAgentCore provides two distinct event streams for different UI needs:'}
? 'PageAgentCore 提供两种不同性质的事件流,方便 UI 渲染'
: 'PageAgentCore provides two distinct event streams for UI rendering:'}
</p>
{/* Comparison Table */}
@@ -59,9 +59,7 @@ export default function CustomUIDocs() {
<table className="w-full border-collapse border border-gray-300 dark:border-gray-600">
<thead>
<tr className="bg-gray-100 dark:bg-gray-800">
<th className="border border-gray-300 dark:border-gray-600 px-4 py-2 text-left">
{isZh ? '特性' : 'Feature'}
</th>
<th className="border border-gray-300 dark:border-gray-600 px-4 py-2 text-left"></th>
<th className="border border-gray-300 dark:border-gray-600 px-4 py-2 text-left">
Historical Events
</th>
@@ -90,7 +88,7 @@ export default function CustomUIDocs() {
{isZh ? '持久化到 agent.history' : 'Persisted in agent.history'}
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-2">
{isZh ? '瞬态,无存储' : 'Transient, not stored'}
{isZh ? '瞬态' : 'Transient'}
</td>
</tr>
<tr>

View File

@@ -193,9 +193,7 @@ agent.panel.dispose()`}
<table className="w-full text-sm">
<thead>
<tr className="bg-gray-50 dark:bg-gray-800/50">
<th className="px-4 py-3 text-left font-medium text-gray-600 dark:text-gray-300">
{isZh ? '特性' : 'Feature'}
</th>
<th className="px-4 py-3 text-left font-medium text-gray-600 dark:text-gray-300"></th>
<th className="px-4 py-3 text-center font-medium text-gray-600 dark:text-gray-300">
PageAgent
</th>

View File

@@ -47,7 +47,7 @@ const customTools = {
// remove internal tool
const customTools = {
ask_user: null // never ask user questions
scroll: null, // never scroll
}
const pageAgent = new PageAgent({customTools})

View File

@@ -30,7 +30,7 @@ export default function CdnSetup() {
<CodeEditor
className="mb-3"
code={`<script src="${CDN_DEMO_URL}" crossorigin="true"></script>`}
code={`<script src="DEMO_CDN_URL" crossorigin="true"></script>`}
/>
<div className="bg-yellow-50 dark:bg-yellow-900/20 px-4 py-3 rounded-lg mb-4 text-sm">

View File

@@ -117,9 +117,7 @@ export default function Overview() {
<table className="w-full border-collapse border border-gray-300 dark:border-gray-600">
<thead>
<tr className="bg-gray-50 dark:bg-gray-800">
<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left">
{isZh ? '特性' : 'Feature'}
</th>
<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left"></th>
<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left">
page-agent
</th>

View File

@@ -29,7 +29,7 @@ export default function QuickStart() {
</span>
</div>
<CodeEditor
code={`<script src="${isZh ? CDN_DEMO_CN_URL : CDN_DEMO_URL}" crossorigin="true"></script>`}
code={`<script src="DEMO_CDN_URL" crossorigin="true"></script>`}
language="html"
/>
<table className="w-full border-collapse text-sm">