Initial k1412 research blog
This commit is contained in:
wuyang6
@@ -0,0 +1,93 @@
|
||||
---
|
||||
interface Item {
|
||||
id: string;
|
||||
data: {
|
||||
title: string;
|
||||
summary: string;
|
||||
topic: string;
|
||||
date: string;
|
||||
canonicalUrl: string;
|
||||
preview?: string;
|
||||
sourceRepo?: string;
|
||||
kind: "article" | "site";
|
||||
};
|
||||
}
|
||||
|
||||
interface Props { items: Item[] }
|
||||
const { items } = Astro.props;
|
||||
const topicLabels: Record<string, string> = {
|
||||
"agent-systems": "Agent 系统",
|
||||
"llm-systems": "LLM 系统",
|
||||
"ai-research": "AI 研究",
|
||||
"research-method": "研究方法"
|
||||
};
|
||||
const topics = [...new Set(items.map((item) => item.data.topic))];
|
||||
const linkFor = (item: Item) => item.data.kind === "article" ? `/articles/${item.id}/` : item.data.canonicalUrl;
|
||||
---
|
||||
|
||||
<section class="research-shell" id="research">
|
||||
<aside class="research-rail">
|
||||
<p class="eyebrow">INDEX / 2026</p>
|
||||
<h2>研究索引</h2>
|
||||
<p>文章、实验报告与独立交互专题按同一条研究脉络组织。</p>
|
||||
<div class="topic-filters" role="group" aria-label="按主题筛选">
|
||||
<button class="topic-filter is-active" data-topic="all" type="button">全部 <span>{items.length}</span></button>
|
||||
{topics.map((topic) => (
|
||||
<button class="topic-filter" data-topic={topic} type="button">
|
||||
{topicLabels[topic] ?? topic}
|
||||
<span>{items.filter((item) => item.data.topic === topic).length}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="research-list" aria-live="polite">
|
||||
{items.map((item, index) => (
|
||||
<article class="research-entry" data-entry data-topic={item.data.topic}>
|
||||
<span class="entry-number">{String(index + 1).padStart(2, "0")}</span>
|
||||
<div class="entry-copy">
|
||||
<div class="entry-meta">
|
||||
<span>{topicLabels[item.data.topic] ?? item.data.topic}</span>
|
||||
<span>{item.data.date}</span>
|
||||
<span>{item.data.kind === "site" ? "独立专题" : "文章"}</span>
|
||||
</div>
|
||||
<h3><a href={linkFor(item)}>{item.data.title}</a></h3>
|
||||
<p>{item.data.summary}</p>
|
||||
<div class="entry-links">
|
||||
<a class="text-link" href={linkFor(item)}>打开研究 <span aria-hidden="true">↗</span></a>
|
||||
{item.data.sourceRepo && <a class="muted-link" href={item.data.sourceRepo}>源码</a>}
|
||||
</div>
|
||||
</div>
|
||||
{item.data.preview ? (
|
||||
<a class="entry-preview" href={linkFor(item)} aria-label={`打开 ${item.data.title}`}>
|
||||
<img src={item.data.preview} alt="" loading="lazy" width="640" height="360" />
|
||||
</a>
|
||||
) : (
|
||||
<a class={`entry-abstract topic-${item.data.topic}`} href={linkFor(item)} aria-hidden="true" tabindex="-1">
|
||||
<span></span><span></span><span></span>
|
||||
</a>
|
||||
)}
|
||||
</article>
|
||||
))}
|
||||
<p class="empty-state" hidden data-empty>这个主题暂时没有公开内容。</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const buttons = Array.from(document.querySelectorAll<HTMLButtonElement>("[data-topic].topic-filter"));
|
||||
const entries = Array.from(document.querySelectorAll<HTMLElement>("[data-entry]"));
|
||||
const empty = document.querySelector<HTMLElement>("[data-empty]");
|
||||
for (const button of buttons) {
|
||||
button.addEventListener("click", () => {
|
||||
const topic = button.dataset.topic ?? "all";
|
||||
for (const candidate of buttons) candidate.classList.toggle("is-active", candidate === button);
|
||||
let visible = 0;
|
||||
for (const entry of entries) {
|
||||
const show = topic === "all" || entry.dataset.topic === topic;
|
||||
entry.hidden = !show;
|
||||
if (show) visible += 1;
|
||||
}
|
||||
if (empty) empty.hidden = visible !== 0;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,47 @@
|
||||
<div class="orbit" aria-label="研究从问题、证据、实验到公开成果的闭环示意图">
|
||||
<svg viewBox="0 0 720 520" role="img" aria-labelledby="orbit-title orbit-desc">
|
||||
<title id="orbit-title">研究闭环</title>
|
||||
<desc id="orbit-desc">问题地图连接来源核验、机制解释、实验比较和公开成果，验证结果再回到问题地图。</desc>
|
||||
<defs>
|
||||
<linearGradient id="arc" x1="0" x2="1">
|
||||
<stop offset="0" stop-color="#b2482d" />
|
||||
<stop offset="1" stop-color="#183c49" />
|
||||
</linearGradient>
|
||||
<filter id="glow" x="-40%" y="-40%" width="180%" height="180%">
|
||||
<feGaussianBlur stdDeviation="8" />
|
||||
</filter>
|
||||
</defs>
|
||||
<circle class="orbit-glow" cx="360" cy="258" r="150" />
|
||||
<ellipse class="orbit-path path-one" cx="360" cy="258" rx="272" ry="160" />
|
||||
<ellipse class="orbit-path path-two" cx="360" cy="258" rx="168" ry="264" transform="rotate(58 360 258)" />
|
||||
<path class="feedback" d="M150 360 C155 458 315 486 398 430" />
|
||||
<path class="feedback-arrow" d="m392 418 9 13-15 4" />
|
||||
|
||||
<g class="orbit-core">
|
||||
<circle cx="360" cy="258" r="92" />
|
||||
<text x="360" y="247" text-anchor="middle">可验证的</text>
|
||||
<text x="360" y="278" text-anchor="middle">公开研究</text>
|
||||
</g>
|
||||
|
||||
<g class="orbit-node node-a" transform="translate(104 124)">
|
||||
<circle r="7" />
|
||||
<text x="17" y="6">问题地图</text>
|
||||
</g>
|
||||
<g class="orbit-node node-b" transform="translate(564 117)">
|
||||
<circle r="7" />
|
||||
<text x="-17" y="6" text-anchor="end">来源核验</text>
|
||||
</g>
|
||||
<g class="orbit-node node-c" transform="translate(628 327)">
|
||||
<circle r="7" />
|
||||
<text x="-17" y="6" text-anchor="end">机制解释</text>
|
||||
</g>
|
||||
<g class="orbit-node node-d" transform="translate(400 474)">
|
||||
<circle r="7" />
|
||||
<text x="17" y="6">实验比较</text>
|
||||
</g>
|
||||
<g class="orbit-node node-e" transform="translate(122 373)">
|
||||
<circle r="7" />
|
||||
<text x="17" y="6">边界与反例</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
Reference in New Issue
Block a user