[teamai] Push 87 resource(s) from XingfenD
This commit is contained in:
@@ -0,0 +1,172 @@
|
||||
// Cover.tsx —— 文章封面（独立于 Article，位于 TOC + 正文 + colophon 之上）
|
||||
//
|
||||
// 这一文件是 article-specific 的（跟 Article.tsx / sections/*.tsx 同等地位）。
|
||||
// 主 Agent 在 Phase 4 First Spread 把下面的【封面内容区】替换成按 **主题 + 文章主旨**
|
||||
// 定制的设计。**外壳（3:4 比例、定位、PDF 分页）不要动**。
|
||||
//
|
||||
// 硬约束（详见 references/cover.md）：
|
||||
// 1. **3:4 比例固定（屏幕 + PDF）**：不要改 aspectRatio；打印时 .ra-cover 会自动
|
||||
// 独占首页，保持屏幕版 3:4 构图以避免 Chromium print 裁切内部布局。
|
||||
// 让内部元素用百分比 / aspect-ratio / inset 自适应，不要写绝对 px 高度。
|
||||
// 2. **图文并茂**：必须有视觉元素 + 简短文字（标题 + 可选副题 / 小标签）。
|
||||
// **禁止纯文字封面**。视觉用什么技术由你选（见约束 5）。
|
||||
// 3. **主题忠实**：颜色 / 字号 / 字重 / 边框 / 律动**只能用 `--ra-*` token**。
|
||||
// 切主题时封面要跟随刷新；不要写死颜色 / 字体名 / 像素字号。
|
||||
// 4. **内容忠实**：封面的视觉主图与文字要呼应正文主旨（看一眼能猜出文章是讲什么的）。
|
||||
// 5. **技术自由**：内联 SVG / CSS 几何 / Canvas / 复杂 React 组件 / 字体艺术 / 多层
|
||||
// gradient / mask / clip-path / 任意组合 —— 任选，最终效果好就行。**唯一禁止**：
|
||||
// 远程图片（offline-first）；base64 raster 仅当 Plan Checkpoint "配图模式" 是
|
||||
// user-assets / ai-generated 才允许。
|
||||
// 6. **封面不承担正文**：不要把 Lead 第一段、TOC、阅读时间塞进来 —— 封面只承担
|
||||
// "识别 + 风格信号 + 引起阅读欲望"，正文从下面的 Article 开始。
|
||||
|
||||
export function Cover() {
|
||||
return (
|
||||
<section
|
||||
className="ra-cover"
|
||||
aria-label="文章封面"
|
||||
data-ra-cover=""
|
||||
style={{
|
||||
// ── 外壳（请不要动） ──
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
// 屏幕上像"一本立着的书"：限宽 48rem（768px）；同时**从视口高度反推宽度**
|
||||
// (100vh - 8rem) * 3/4，确保整个 3:4 封面**一屏看全、不用下拉**。8rem
|
||||
// (128px) 给顶栏 / 边距 / site nav 等留出充足呼吸（典型场景 site nav 60 +
|
||||
// 容器顶 padding 32 + 边框 1 ≈ 93px，仍有 35px 余量）。
|
||||
// 3:4 比例由 aspect-ratio 保证不破。
|
||||
maxWidth: "min(100%, 48rem, calc((100vh - 8rem) * 3 / 4))",
|
||||
margin: "0 auto var(--ra-space-7, 3rem) auto",
|
||||
aspectRatio: "3 / 4",
|
||||
overflow: "hidden",
|
||||
// 背景透明：让外层 .ra-root / .gx-reader 的 --ra-color-bg "纸面色" 直接透上来。
|
||||
// 整片视觉是一张连续的纸，封面不再"自带一块色"。封面的辨识度由内部插画 + 边框
|
||||
// + 内容排版承担。如果你的封面**确实需要**整体着色（如孟菲斯主题大色块覆盖），
|
||||
// 可以改成 surface / surface-2 / accent-soft 等任意主题 token。
|
||||
background: "transparent",
|
||||
color: "var(--ra-color-fg, inherit)",
|
||||
borderRadius: "var(--ra-radius-md, 0)",
|
||||
border: "1px solid var(--ra-color-border, currentColor)",
|
||||
// 让 ::before 之类的几何装饰可以铺满
|
||||
isolation: "isolate",
|
||||
}}
|
||||
>
|
||||
{/*
|
||||
─── 封面内容区 · 在这里写 ───
|
||||
默认占位长这样：
|
||||
• 一层主题感的几何装饰（SVG 网格 + 一个 accent 圆 + 描边斜线）
|
||||
• 居中的占位标题、副题、小标签
|
||||
构建时**替换为按文章 + 主题定制的封面**。占位是为了
|
||||
"即使忘了替换，也不会渲染出一团乱"，但**不能交付出去**。
|
||||
*/}
|
||||
<CoverPlaceholder />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
// 占位实现 —— 主 Agent 把 <CoverPlaceholder /> 替换成本文真正的封面。
|
||||
// 删掉这个 function 也行；保留它能让占位回退更友好。
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
function CoverPlaceholder() {
|
||||
return (
|
||||
<>
|
||||
{/* 默认占位用了 SVG 是图省事，**不代表"应该用 SVG"** —— 你完全可以删掉这个
|
||||
* <svg>，换成 CSS 渐变层、Canvas、复杂 React 组件、字体艺术拼贴等任何能产生
|
||||
* 漂亮视觉的方式。视觉技术由你选，效果好就行。 */}
|
||||
<svg
|
||||
viewBox="0 0 1200 1600"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
color: "var(--ra-color-border, currentColor)",
|
||||
opacity: 0.55,
|
||||
zIndex: 0,
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
<pattern id="ra-cover-grid" width="80" height="80" patternUnits="userSpaceOnUse">
|
||||
<path
|
||||
d="M 80 0 L 0 0 0 80"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0.6"
|
||||
/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="1200" height="1600" fill="url(#ra-cover-grid)" />
|
||||
<circle
|
||||
cx="900"
|
||||
cy="1180"
|
||||
r="220"
|
||||
fill="var(--ra-color-accent, currentColor)"
|
||||
opacity="0.18"
|
||||
/>
|
||||
<line
|
||||
x1="80"
|
||||
y1="1400"
|
||||
x2="560"
|
||||
y2="1400"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* 文字层 */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
zIndex: 1,
|
||||
display: "grid",
|
||||
alignContent: "center",
|
||||
justifyItems: "start",
|
||||
padding:
|
||||
"var(--ra-space-7, 3rem) var(--ra-space-8, 4rem) var(--ra-space-7, 3rem) var(--ra-space-8, 4rem)",
|
||||
gap: "var(--ra-space-3, 0.75rem)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "var(--ra-text-xs, 0.75rem)",
|
||||
letterSpacing: "0.22em",
|
||||
textTransform: "uppercase",
|
||||
color: "var(--ra-color-muted, inherit)",
|
||||
opacity: 0.85,
|
||||
}}
|
||||
>
|
||||
COVER · 3 : 4 · 占位
|
||||
</span>
|
||||
<h1
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: "clamp(1.6rem, 4.6vw, var(--ra-text-4xl, 3rem))",
|
||||
lineHeight: 1.05,
|
||||
fontWeight: "var(--ra-font-weight-bold, 700)",
|
||||
color: "var(--ra-color-fg, inherit)",
|
||||
maxWidth: "70%",
|
||||
}}
|
||||
>
|
||||
按文章主旨 + 主题，在此处设计封面
|
||||
</h1>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: "var(--ra-text-sm, 0.95rem)",
|
||||
color: "var(--ra-color-muted, inherit)",
|
||||
maxWidth: "70%",
|
||||
lineHeight: 1.4,
|
||||
}}
|
||||
>
|
||||
先读 <code>references/cover.md</code> 与选定主题的 <code>theme-profiles/<id>.md</code>，
|
||||
再替换 <code>CoverPlaceholder</code> 为本文专属的图文构图。视觉用什么技术（SVG /
|
||||
CSS / Canvas / 复杂 React 组件 / 任意混搭）由你选，效果好就行；唯一禁止远程图片。
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user