Rebuild guidance wiki as a unified SaaS workspace
This commit is contained in:
@@ -0,0 +1,495 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type FormEvent,
|
||||
} from "react";
|
||||
import {
|
||||
ArrowRight,
|
||||
ArrowUpRight,
|
||||
Bot,
|
||||
ChevronRight,
|
||||
FileText,
|
||||
Plus,
|
||||
Search,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import GuidanceShell, { useGuidanceAccount } from "@/components/GuidanceShell";
|
||||
import {
|
||||
EmptyState,
|
||||
KindBadge,
|
||||
KindIcon,
|
||||
Notice,
|
||||
PageHeading,
|
||||
kindNames,
|
||||
Tabs,
|
||||
} from "@/components/GuidanceUI";
|
||||
import { guides, type Guidance } from "@/content/guides/catalog";
|
||||
import s from "@/styles/guidance.module.css";
|
||||
|
||||
type Summary = {
|
||||
id: string;
|
||||
revision: number;
|
||||
title: string;
|
||||
summary: string;
|
||||
kind: Guidance["kind"];
|
||||
author?: string;
|
||||
tags?: string[];
|
||||
source: "community" | "example";
|
||||
};
|
||||
type Source = "all" | "published" | "examples";
|
||||
const kinds = ["all", "guide", "context", "evidence"] as const;
|
||||
const examples: Summary[] = guides.map((g) => ({ ...g, source: "example" }));
|
||||
export default function DocumentDirectory({
|
||||
communityOnly = false,
|
||||
}: {
|
||||
communityOnly?: boolean;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const mine = communityOnly && router.query.scope === "mine";
|
||||
return (
|
||||
<GuidanceShell
|
||||
title={mine ? "我的文档" : communityOnly ? "社区文档" : "探索文档"}
|
||||
>
|
||||
<DirectoryContent communityOnly={communityOnly} mine={mine} />
|
||||
</GuidanceShell>
|
||||
);
|
||||
}
|
||||
function DirectoryContent({
|
||||
communityOnly,
|
||||
mine,
|
||||
}: {
|
||||
communityOnly: boolean;
|
||||
mine: boolean;
|
||||
}) {
|
||||
const router = useRouter(),
|
||||
account = useGuidanceAccount();
|
||||
const [published, setPublished] = useState<Summary[]>([]),
|
||||
[loading, setLoading] = useState(true),
|
||||
[error, setError] = useState("");
|
||||
const [q, setQ] = useState(""),
|
||||
[kind, setKind] = useState("all"),
|
||||
[source, setSource] = useState<Source>(communityOnly ? "published" : "all"),
|
||||
[sort, setSort] = useState("default");
|
||||
const controller = useRef<AbortController | null>(null);
|
||||
const refresh = useCallback(async () => {
|
||||
controller.current?.abort();
|
||||
const abort = new AbortController();
|
||||
controller.current = abort;
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const r = await fetch(
|
||||
"/api/documents" +
|
||||
(mine && account.user ? "?author=" + account.user.id : ""),
|
||||
{ signal: abort.signal },
|
||||
);
|
||||
const b = await r.json();
|
||||
if (!r.ok) throw Error(b.error || "目录暂时不可用");
|
||||
if (!Array.isArray(b.documents)) throw Error("目录返回异常，请稍后重试");
|
||||
setPublished(
|
||||
b.documents.map((d: Omit<Summary, "source">) => ({
|
||||
...d,
|
||||
source: "community",
|
||||
})),
|
||||
);
|
||||
} catch (e) {
|
||||
if (!abort.signal.aborted)
|
||||
setError(e instanceof Error ? e.message : "目录暂时不可用");
|
||||
} finally {
|
||||
if (!abort.signal.aborted) setLoading(false);
|
||||
}
|
||||
}, [mine, account.user?.id]);
|
||||
useEffect(() => {
|
||||
void refresh();
|
||||
return () => controller.current?.abort();
|
||||
}, [refresh]);
|
||||
useEffect(() => {
|
||||
if (!router.isReady) return;
|
||||
setQ(typeof router.query.q === "string" ? router.query.q : "");
|
||||
setKind(
|
||||
typeof router.query.kind === "string" &&
|
||||
kinds.some((k) => k === router.query.kind)
|
||||
? router.query.kind
|
||||
: "all",
|
||||
);
|
||||
setSource(
|
||||
communityOnly
|
||||
? "published"
|
||||
: router.query.source === "published" ||
|
||||
router.query.source === "examples"
|
||||
? router.query.source
|
||||
: "all",
|
||||
);
|
||||
setSort(router.query.sort === "title" ? "title" : "default");
|
||||
}, [
|
||||
router.isReady,
|
||||
router.query.q,
|
||||
router.query.kind,
|
||||
router.query.source,
|
||||
router.query.sort,
|
||||
communityOnly,
|
||||
]);
|
||||
function remember(
|
||||
next: { q?: string; kind?: string; source?: Source; sort?: string } = {},
|
||||
) {
|
||||
const values = { q, kind, source, sort, ...next },
|
||||
query: Record<string, string> = {};
|
||||
if (values.q) query.q = values.q;
|
||||
if (values.kind !== "all") query.kind = values.kind;
|
||||
if (!communityOnly && values.source !== "all") query.source = values.source;
|
||||
if (values.sort !== "default") query.sort = values.sort;
|
||||
if (mine) query.scope = "mine";
|
||||
void router.push(
|
||||
{ pathname: communityOnly ? "/documents" : "/", query },
|
||||
undefined,
|
||||
{ shallow: true, scroll: false },
|
||||
);
|
||||
}
|
||||
function search(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
remember();
|
||||
}
|
||||
function clear() {
|
||||
setQ("");
|
||||
setKind("all");
|
||||
setSource(communityOnly ? "published" : "all");
|
||||
setSort("default");
|
||||
remember({
|
||||
q: "",
|
||||
kind: "all",
|
||||
source: communityOnly ? "published" : "all",
|
||||
sort: "default",
|
||||
});
|
||||
}
|
||||
const all: Summary[] = communityOnly
|
||||
? published
|
||||
: [...published, ...examples];
|
||||
const term = q.trim().toLocaleLowerCase();
|
||||
const found = all.filter(
|
||||
(d) =>
|
||||
(!mine || d.author === account.user?.id) &&
|
||||
(source === "all" ||
|
||||
(source === "published" && d.source === "community") ||
|
||||
(source === "examples" && d.source === "example")) &&
|
||||
`${d.title} ${d.summary} ${d.id} ${d.tags?.join(" ") || ""}`
|
||||
.toLocaleLowerCase()
|
||||
.includes(term),
|
||||
);
|
||||
const documents = found.filter((d) => kind === "all" || d.kind === kind);
|
||||
if (sort === "title")
|
||||
documents.sort((a, b) => a.title.localeCompare(b.title, "zh-CN"));
|
||||
const waiting = loading || (mine && account.loading),
|
||||
filtered =
|
||||
!!q ||
|
||||
kind !== "all" ||
|
||||
(!communityOnly && source !== "all") ||
|
||||
sort !== "default";
|
||||
const heading = mine ? "我的文档" : communityOnly ? "社区文档" : "探索文档";
|
||||
return (
|
||||
<>
|
||||
<PageHeading
|
||||
title={heading}
|
||||
description={
|
||||
mine
|
||||
? "在这里管理你发布的文档，修改会创建新的固定版本。"
|
||||
: communityOnly
|
||||
? "来自真实作者的独立文档。找到有用的知识，从一篇开始阅读。"
|
||||
: "为当前任务找到有用的指导，按需连接下一篇知识。"
|
||||
}
|
||||
eyebrow={
|
||||
mine
|
||||
? "YOUR KNOWLEDGE"
|
||||
: communityOnly
|
||||
? "COMMUNITY LIBRARY"
|
||||
: "DISCOVER KNOWLEDGE"
|
||||
}
|
||||
>
|
||||
<Link
|
||||
className={s.secondaryButton}
|
||||
href="/agent/index.md"
|
||||
target="_blank"
|
||||
>
|
||||
<Bot size={15} />
|
||||
Agent 入口
|
||||
<ArrowUpRight size={13} />
|
||||
</Link>
|
||||
</PageHeading>
|
||||
{!communityOnly && (
|
||||
<>
|
||||
<section className={s.introCard}>
|
||||
<span className={s.introIcon}>
|
||||
<Bot size={23} />
|
||||
</span>
|
||||
<div>
|
||||
<h2>好用的知识，从不必整套加载。</h2>
|
||||
<p>
|
||||
每篇文档都有适用条件和固定版本。需要更多时，再沿着有用的链接继续阅读。
|
||||
</p>
|
||||
</div>
|
||||
<div className={s.introDiagram} aria-hidden="true">
|
||||
<span>
|
||||
<FileText size={13} />
|
||||
一篇文档
|
||||
</span>
|
||||
<ArrowRight size={15} />
|
||||
<span>
|
||||
<FileText size={13} />
|
||||
下一页
|
||||
</span>
|
||||
</div>
|
||||
<Link className={s.textLink} href="/protocol">
|
||||
了解工作原理
|
||||
<ArrowUpRight size={13} />
|
||||
</Link>
|
||||
</section>
|
||||
<div className={s.topics}>
|
||||
<span>试试这些任务</span>
|
||||
{["代码审查", "规划", "验证"].map((t) => (
|
||||
<button
|
||||
type="button"
|
||||
key={t}
|
||||
onClick={() => {
|
||||
setQ(t);
|
||||
remember({ q: t });
|
||||
}}
|
||||
>
|
||||
{t}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{mine && !account.loading && !account.user ? (
|
||||
<section className={s.panel}>
|
||||
{account.error && (
|
||||
<div className={s.panelBody}>
|
||||
<Notice tone="error">
|
||||
{account.error}{" "}
|
||||
<button type="button" onClick={() => void account.refresh()}>
|
||||
重新检查
|
||||
</button>
|
||||
</Notice>
|
||||
</div>
|
||||
)}
|
||||
<EmptyState
|
||||
title="登录后，管理你的知识"
|
||||
description="使用已验证的邮箱账户发布文档、更新版本，并随时回到这里继续编辑。"
|
||||
>
|
||||
<Link
|
||||
className={s.primaryButton}
|
||||
href="/account?next=%2Fdocuments%3Fscope%3Dmine"
|
||||
>
|
||||
登录 / 创建账户
|
||||
<ArrowRight size={15} />
|
||||
</Link>
|
||||
</EmptyState>
|
||||
</section>
|
||||
) : (
|
||||
<>
|
||||
<section className={s.panel} aria-label="文档目录">
|
||||
<Tabs
|
||||
tabs={kinds.map((k) => ({
|
||||
id: k,
|
||||
label: k === "all" ? "全部文档" : kindNames[k],
|
||||
count: found.filter((d) => k === "all" || d.kind === k).length,
|
||||
}))}
|
||||
value={kind}
|
||||
onChange={(value) => {
|
||||
setKind(value);
|
||||
remember({ kind: value });
|
||||
}}
|
||||
/>
|
||||
<div className={s.catalogToolbar}>
|
||||
<form className={s.catalogSearch} role="search" onSubmit={search}>
|
||||
<Search size={16} />
|
||||
<input
|
||||
aria-label="搜索文档"
|
||||
placeholder="搜索标题、摘要或文档 ID…"
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
/>
|
||||
{q && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="清空关键词"
|
||||
onClick={() => {
|
||||
setQ("");
|
||||
remember({ q: "" });
|
||||
}}
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
)}
|
||||
<button type="submit" aria-label="提交搜索">
|
||||
<ArrowRight size={15} />
|
||||
</button>
|
||||
</form>
|
||||
<div className={s.catalogTools}>
|
||||
{!communityOnly && (
|
||||
<select
|
||||
aria-label="文档来源"
|
||||
value={source}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as Source;
|
||||
setSource(value);
|
||||
remember({ source: value });
|
||||
}}
|
||||
>
|
||||
<option value="all">全部来源</option>
|
||||
<option value="published">社区发布</option>
|
||||
<option value="examples">协议样例</option>
|
||||
</select>
|
||||
)}
|
||||
<select
|
||||
aria-label="文档排序"
|
||||
value={sort}
|
||||
onChange={(e) => {
|
||||
setSort(e.target.value);
|
||||
remember({ sort: e.target.value });
|
||||
}}
|
||||
>
|
||||
<option value="default">默认顺序</option>
|
||||
<option value="title">按标题排序</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.catalogStatus}>
|
||||
<p role="status">
|
||||
{waiting
|
||||
? "正在加载文档…"
|
||||
: error
|
||||
? `当前显示 ${documents.length} 篇，社区目录加载失败`
|
||||
: `找到 ${documents.length} 篇文档`}
|
||||
</p>
|
||||
{filtered ? (
|
||||
<button type="button" aria-label="清除所有筛选" onClick={clear}>
|
||||
清除所有筛选
|
||||
</button>
|
||||
) : (
|
||||
<span>最多展示最近 100 篇社区文档</span>
|
||||
)}
|
||||
</div>
|
||||
{error && (
|
||||
<div className={s.panelBody}>
|
||||
<Notice tone="error">
|
||||
{error}{" "}
|
||||
<button
|
||||
type="button"
|
||||
className={s.textLink}
|
||||
onClick={() => void refresh()}
|
||||
>
|
||||
重新加载
|
||||
</button>
|
||||
</Notice>
|
||||
</div>
|
||||
)}
|
||||
<div className={s.tableHeader} aria-hidden="true">
|
||||
<span>文档</span>
|
||||
<span>类型</span>
|
||||
<span>版本</span>
|
||||
<span className={s.tableSource}>来源</span>
|
||||
<span />
|
||||
</div>
|
||||
{waiting && (!documents.length || communityOnly) ? (
|
||||
<div aria-label="正在加载文档" aria-busy="true">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div className={s.skeletonRow} key={i}>
|
||||
<div className={s.skeletonBox} />
|
||||
<div className={s.skeletonLines}>
|
||||
<div className={s.skeletonLine} />
|
||||
<div className={s.skeletonLine} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
documents.map((d) => (
|
||||
<Link
|
||||
href={`${d.source === "example" ? "/guide/" : "/documents/"}${d.id}?revision=${d.revision}`}
|
||||
key={d.id}
|
||||
className={s.documentRow}
|
||||
>
|
||||
<div className={s.documentPrimary}>
|
||||
<span className={s.documentIcon}>
|
||||
<KindIcon kind={d.kind} />
|
||||
</span>
|
||||
<div className={s.documentDetails}>
|
||||
<h2 className={s.documentTitle}>{d.title}</h2>
|
||||
<p className={s.documentSummary}>{d.summary}</p>
|
||||
<p className={s.documentId} title={d.id}>
|
||||
{d.id}
|
||||
</p>
|
||||
<div className={s.documentMobileMeta}>
|
||||
<KindBadge kind={d.kind} />
|
||||
<span>v{d.revision}</span>
|
||||
<span>
|
||||
{d.source === "example" ? "协议样例" : "社区发布"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className={s.documentKind}>
|
||||
<KindBadge kind={d.kind} />
|
||||
</span>
|
||||
<span className={s.documentVersion}>v{d.revision}</span>
|
||||
<span className={s.documentSource}>
|
||||
{d.source === "example" ? "协议样例" : "社区发布"}
|
||||
</span>
|
||||
<ChevronRight size={16} className={s.documentArrow} />
|
||||
</Link>
|
||||
))
|
||||
)}
|
||||
{!waiting && !documents.length && !error && (
|
||||
<EmptyState
|
||||
title={
|
||||
filtered
|
||||
? "没有匹配文档"
|
||||
: mine
|
||||
? "你的第一篇文档，从这里开始"
|
||||
: "这里还没有社区文档"
|
||||
}
|
||||
description={
|
||||
filtered
|
||||
? "试试其他关键词或清除筛选，发现更多适合当前任务的知识。"
|
||||
: mine
|
||||
? "把你反复使用的方法写下来，让 Agent 在需要时找到它。"
|
||||
: "你可以先阅读协议样例，也可以发布第一篇独立文档。"
|
||||
}
|
||||
>
|
||||
{filtered ? (
|
||||
<button
|
||||
type="button"
|
||||
className={s.secondaryButton}
|
||||
onClick={clear}
|
||||
>
|
||||
重置筛选
|
||||
</button>
|
||||
) : (
|
||||
<Link className={s.primaryButton} href="/write">
|
||||
<Plus size={15} />
|
||||
发布一篇文档
|
||||
</Link>
|
||||
)}
|
||||
</EmptyState>
|
||||
)}
|
||||
</section>
|
||||
<div className={s.catalogFootnote}>
|
||||
<span>
|
||||
{mine
|
||||
? "只有你可以更新自己的文档，已发布的历史版本保持不变。"
|
||||
: "社区文档与协议样例分别标识，采用前请确认适用条件与版本。"}
|
||||
</span>
|
||||
<Link href="/protocol">
|
||||
了解读取规范
|
||||
<ArrowUpRight size={12} />
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,462 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
ArrowLeft,
|
||||
ArrowUpRight,
|
||||
BookOpen,
|
||||
Braces,
|
||||
CalendarDays,
|
||||
CheckSquare,
|
||||
ChevronRight,
|
||||
FileText,
|
||||
GitBranch,
|
||||
Globe2,
|
||||
ListChecks,
|
||||
Link2,
|
||||
Pencil,
|
||||
Target,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import GuidanceShell from "@/components/GuidanceShell";
|
||||
import {
|
||||
CopyButton,
|
||||
KindBadge,
|
||||
Notice,
|
||||
Tabs,
|
||||
kindNames,
|
||||
} from "@/components/GuidanceUI";
|
||||
import { guidanceXml, type Guidance } from "@/content/guides/catalog";
|
||||
import s from "@/styles/guidance.module.css";
|
||||
|
||||
export type ReadingVersion = { revision: number; createdAt?: string };
|
||||
export type ReadingLink = Guidance["links"][number] & { resolved: boolean };
|
||||
export type ReaderProps = {
|
||||
document: Guidance;
|
||||
source: "example" | "community";
|
||||
links: ReadingLink[];
|
||||
versions: ReadingVersion[];
|
||||
backlinks?: {
|
||||
id: string;
|
||||
revision?: number;
|
||||
title: string;
|
||||
source?: "example" | "community";
|
||||
}[];
|
||||
canEdit?: boolean;
|
||||
withdrawn?: boolean;
|
||||
};
|
||||
const relationNames = {
|
||||
guide: "可选指导",
|
||||
context: "背景参考",
|
||||
evidence: "事实依据",
|
||||
};
|
||||
function dateLabel(value?: string) {
|
||||
return value
|
||||
? new Intl.DateTimeFormat("zh-CN", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
timeZone: "UTC",
|
||||
}).format(new Date(value))
|
||||
: "协议样例";
|
||||
}
|
||||
export default function GuidanceReader({
|
||||
document: doc,
|
||||
source,
|
||||
links,
|
||||
versions,
|
||||
backlinks = [],
|
||||
canEdit = false,
|
||||
withdrawn = false,
|
||||
}: ReaderProps) {
|
||||
const router = useRouter(),
|
||||
dialog = useRef<HTMLDialogElement>(null);
|
||||
const [tab, setTab] = useState("overview"),
|
||||
[busy, setBusy] = useState(false),
|
||||
[error, setError] = useState(""),
|
||||
[isWithdrawn, setWithdrawn] = useState(withdrawn);
|
||||
useEffect(() => {
|
||||
setWithdrawn(withdrawn);
|
||||
setError("");
|
||||
setTab("overview");
|
||||
}, [doc.id, withdrawn]);
|
||||
const api = `/api/${source === "example" ? "guides" : "documents"}/${doc.id}?revision=${doc.revision}&format=xml`;
|
||||
const current = versions.find((v) => v.revision === doc.revision),
|
||||
xml = guidanceXml(doc);
|
||||
const route = source === "example" ? "/guide/" : "/documents/";
|
||||
const sectionLinks = [
|
||||
["applies", "适用条件"],
|
||||
["content", "指导正文"],
|
||||
...(doc.steps.length ? [["steps", "建议步骤"]] : []),
|
||||
...(doc.checks.length ? [["checks", "完成检查"]] : []),
|
||||
["related", "条件链接"],
|
||||
];
|
||||
async function withdraw() {
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
const response = await fetch("/api/documents/" + doc.id, {
|
||||
method: "DELETE",
|
||||
});
|
||||
const body = await response.json();
|
||||
if (!response.ok) throw Error(body.error || "撤下失败，请稍后重试");
|
||||
setWithdrawn(true);
|
||||
dialog.current?.close();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "撤下失败，请稍后重试");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<GuidanceShell title="文档详情">
|
||||
<header className={s.readingHeader}>
|
||||
<Link
|
||||
className={s.backLink}
|
||||
href={source === "example" ? "/" : "/documents"}
|
||||
>
|
||||
<ArrowLeft size={13} />
|
||||
{source === "example" ? "返回探索文档" : "返回社区文档"}
|
||||
</Link>
|
||||
<div className={s.documentBadges}>
|
||||
<KindBadge kind={doc.kind} />
|
||||
<span className={s.neutralBadge}>
|
||||
{source === "example" ? "协议样例" : "社区发布"}
|
||||
</span>
|
||||
<span className={s.neutralBadge}>v{doc.revision}</span>
|
||||
{isWithdrawn && (
|
||||
<span className={s.neutralBadge}>已撤下 · 历史版本</span>
|
||||
)}
|
||||
</div>
|
||||
<h1>{doc.title}</h1>
|
||||
<p className={s.readingSummary}>{doc.summary}</p>
|
||||
<div className={s.readingMeta}>
|
||||
<span>
|
||||
<Globe2 size={13} />
|
||||
公开文档
|
||||
</span>
|
||||
<span>
|
||||
<GitBranch size={13} />
|
||||
固定版本 {doc.revision}
|
||||
</span>
|
||||
{current?.createdAt && (
|
||||
<span>
|
||||
<CalendarDays size={13} />
|
||||
{dateLabel(current.createdAt)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={s.readingActions}>
|
||||
<CopyButton
|
||||
label="复制 Agent 读取地址"
|
||||
value={() => window.location.origin + api}
|
||||
/>
|
||||
<a
|
||||
href={api}
|
||||
className={s.secondaryButton}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Braces size={15} />
|
||||
读取规范 XML
|
||||
<ArrowUpRight size={13} />
|
||||
</a>
|
||||
{canEdit && !isWithdrawn && (
|
||||
<Link className={s.secondaryButton} href={"/write?id=" + doc.id}>
|
||||
<Pencil size={14} />
|
||||
编辑最新版本
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
{isWithdrawn && (
|
||||
<Notice tone="warning">
|
||||
这篇文档已从公开目录撤下。你正在阅读固定历史版本，已有引用仍可继续使用。
|
||||
</Notice>
|
||||
)}
|
||||
<div className={s.readingLayout}>
|
||||
<section className={s.panel}>
|
||||
<Tabs
|
||||
tabs={[
|
||||
{ id: "overview", label: "文档概览" },
|
||||
{ id: "xml", label: "XML 源文档" },
|
||||
{ id: "versions", label: "版本记录", count: versions.length },
|
||||
]}
|
||||
value={tab}
|
||||
onChange={setTab}
|
||||
/>
|
||||
{tab === "overview" ? (
|
||||
<article className={s.readingArticle}>
|
||||
<section
|
||||
id="applies"
|
||||
className={`${s.proseSection} ${s.appliesCard}`}
|
||||
>
|
||||
<h2>
|
||||
<Target size={16} />
|
||||
何时使用这篇文档
|
||||
</h2>
|
||||
<p>{doc.applies}</p>
|
||||
</section>
|
||||
<section id="content" className={s.proseSection}>
|
||||
<h2>
|
||||
<FileText size={16} />
|
||||
指导正文
|
||||
</h2>
|
||||
<div className={s.proseBody}>{doc.body}</div>
|
||||
</section>
|
||||
{!!doc.steps.length && (
|
||||
<section id="steps" className={s.proseSection}>
|
||||
<h2>
|
||||
<ListChecks size={17} />
|
||||
建议步骤
|
||||
</h2>
|
||||
<ol className={s.stepList}>
|
||||
{doc.steps.map((step, index) => (
|
||||
<li key={index}>{step}</li>
|
||||
))}
|
||||
</ol>
|
||||
</section>
|
||||
)}
|
||||
{!!doc.checks.length && (
|
||||
<section id="checks" className={s.proseSection}>
|
||||
<h2>
|
||||
<CheckSquare size={16} />
|
||||
完成检查
|
||||
</h2>
|
||||
<ul className={s.checkList}>
|
||||
{doc.checks.map((check, index) => (
|
||||
<li key={index}>{check}</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
<section id="related" className={s.proseSection}>
|
||||
<h2>
|
||||
<Link2 size={16} />
|
||||
按需继续阅读
|
||||
<span className={s.neutralBadge}>{links.length}</span>
|
||||
</h2>
|
||||
<p className={s.formDescription}>
|
||||
只在条件适用、且当前任务需要时，打开下一篇文档。
|
||||
</p>
|
||||
{links.map((link, index) => {
|
||||
const content = (
|
||||
<>
|
||||
<div>
|
||||
<strong>{link.label}</strong>
|
||||
<p>当{link.when}</p>
|
||||
<small>
|
||||
<span>{relationNames[link.relation]}</span>
|
||||
<span>·</span>
|
||||
<span>v{link.revision}</span>
|
||||
{!link.resolved && (
|
||||
<span>· 固定版本缺失，请跳过</span>
|
||||
)}
|
||||
</small>
|
||||
</div>
|
||||
{link.resolved && <ArrowUpRight size={15} />}
|
||||
</>
|
||||
);
|
||||
return link.resolved ? (
|
||||
<Link
|
||||
className={s.relationCard}
|
||||
key={index}
|
||||
href={
|
||||
(link.target.startsWith("user-")
|
||||
? "/documents/"
|
||||
: "/guide/") +
|
||||
link.target +
|
||||
"?revision=" +
|
||||
link.revision
|
||||
}
|
||||
>
|
||||
{content}
|
||||
</Link>
|
||||
) : (
|
||||
<div
|
||||
className={`${s.relationCard} ${s.unresolved}`}
|
||||
key={index}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{!links.length && (
|
||||
<p className={s.proseBody}>
|
||||
这篇文档可以独立使用，没有需要继续读取的关联文档。
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
</article>
|
||||
) : tab === "xml" ? (
|
||||
<>
|
||||
<div className={s.xmlToolbar}>
|
||||
<span>{doc.id}.xml</span>
|
||||
<CopyButton value={xml} label="复制 XML" />
|
||||
</div>
|
||||
<pre className={s.codeBlock}>{xml}</pre>
|
||||
</>
|
||||
) : (
|
||||
<div className={s.versionsList}>
|
||||
{versions.map((version) => (
|
||||
<div className={s.versionRow} key={version.revision}>
|
||||
<div>
|
||||
<div className={s.buttonRow}>
|
||||
<strong>版本 {version.revision}</strong>
|
||||
{version.revision === doc.revision && (
|
||||
<span className={s.neutralBadge}>当前阅读</span>
|
||||
)}
|
||||
</div>
|
||||
<p>{dateLabel(version.createdAt)} · 固定版本</p>
|
||||
</div>
|
||||
<Link
|
||||
className={s.textLink}
|
||||
href={route + doc.id + "?revision=" + version.revision}
|
||||
>
|
||||
读取
|
||||
<ChevronRight size={13} />
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
<aside className={s.readingSidebar}>
|
||||
<section className={s.sideCard}>
|
||||
<h3>文档信息</h3>
|
||||
<dl className={s.metadataList}>
|
||||
<div>
|
||||
<dt>类型</dt>
|
||||
<dd>{kindNames[doc.kind]}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>来源</dt>
|
||||
<dd>
|
||||
{source === "example"
|
||||
? "织页协议样例"
|
||||
: canEdit
|
||||
? "你的文档"
|
||||
: "社区作者"}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>当前版本</dt>
|
||||
<dd>
|
||||
<select
|
||||
aria-label="选择阅读版本"
|
||||
value={doc.revision}
|
||||
onChange={(e) =>
|
||||
void router.push(
|
||||
route + doc.id + "?revision=" + e.target.value,
|
||||
)
|
||||
}
|
||||
>
|
||||
{versions.map((v) => (
|
||||
<option key={v.revision} value={v.revision}>
|
||||
v{v.revision}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>可见范围</dt>
|
||||
<dd>{isWithdrawn ? "仅固定历史版本" : "公开读取"}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<code className={s.machineAddress}>{doc.id}</code>
|
||||
{canEdit && !isWithdrawn && (
|
||||
<div className={s.authorActions}>
|
||||
<Link
|
||||
className={s.secondaryButton}
|
||||
href={"/write?id=" + doc.id}
|
||||
>
|
||||
<Pencil size={13} />
|
||||
编辑文档
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className={s.quietButton}
|
||||
onClick={() => dialog.current?.showModal()}
|
||||
>
|
||||
<Trash2 size={13} />
|
||||
撤下文档
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
<section className={`${s.sideCard} ${s.tocCard}`}>
|
||||
<h3>本篇目录</h3>
|
||||
<nav className={s.toc} aria-label="本篇目录">
|
||||
{sectionLinks.map(([id, label]) => (
|
||||
<a key={id} href={"#" + id} onClick={() => setTab("overview")}>
|
||||
{label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</section>
|
||||
<section className={s.sideCard}>
|
||||
<h3>
|
||||
<BookOpen size={15} /> 采用这一篇
|
||||
</h3>
|
||||
<p>
|
||||
把固定版本的读取地址交给 Agent。关联文档是候选帮助，无需一起加载。
|
||||
</p>
|
||||
<code className={s.machineAddress}>{api}</code>
|
||||
<CopyButton
|
||||
label="复制读取地址"
|
||||
value={() => window.location.origin + api}
|
||||
/>
|
||||
</section>
|
||||
{!!backlinks.length && (
|
||||
<section className={s.sideCard}>
|
||||
<h3>被这些文档引用</h3>
|
||||
<div className={s.sideLinks}>
|
||||
{backlinks.map((b) => (
|
||||
<Link
|
||||
key={b.id}
|
||||
href={
|
||||
(b.source === "community" ? "/documents/" : "/guide/") +
|
||||
b.id +
|
||||
(b.revision ? "?revision=" + b.revision : "")
|
||||
}
|
||||
>
|
||||
{b.title}
|
||||
<ArrowUpRight size={11} />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</aside>
|
||||
</div>
|
||||
<dialog ref={dialog} className={s.modal} aria-labelledby="withdraw-title">
|
||||
<div className={s.modalBody}>
|
||||
<h2 id="withdraw-title">撤下这篇文档？</h2>
|
||||
<p>
|
||||
它将不再出现在目录中。已发布的固定历史版本会保留，已有引用仍然可以访问。
|
||||
</p>
|
||||
{error && <Notice tone="error">{error}</Notice>}
|
||||
</div>
|
||||
<div className={s.modalActions}>
|
||||
<button
|
||||
type="button"
|
||||
disabled={busy}
|
||||
className={s.secondaryButton}
|
||||
onClick={() => dialog.current?.close()}
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={busy}
|
||||
className={s.dangerButton}
|
||||
onClick={() => void withdraw()}
|
||||
>
|
||||
{busy ? "正在撤下…" : "确认撤下"}
|
||||
</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</GuidanceShell>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,265 @@
|
||||
import Link from 'next/link';
|
||||
import type {ReactNode} from 'react';
|
||||
import s from '@/styles/guidance.module.css';
|
||||
export default function GuidanceShell({children}:{children:ReactNode}){return <div className={s.site}><header className={s.header}><Link className={s.brand} href="/">↗ 织页 <small>实验版</small></Link><nav><Link href="/">探索文档</Link><Link href="/documents">用户文档</Link><Link href="/write">发布文档</Link><Link href="/protocol">协议草案</Link></nav><Link className={s.account} href="/account">登录 / 注册 ↗</Link></header>{children}<footer className={s.footer}><span>织页 · Linked Guidance · 名称与协议仍在探索中</span><Link href="/protocol">让每一页都能成为起点 ↗</Link></footer></div>}
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
import {
|
||||
ArrowUpRight,
|
||||
BookOpen,
|
||||
Bot,
|
||||
ChevronRight,
|
||||
Compass,
|
||||
Files,
|
||||
Globe2,
|
||||
LogIn,
|
||||
Menu,
|
||||
Plus,
|
||||
SquarePen,
|
||||
UserRound,
|
||||
Waypoints,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import s from "@/styles/guidance.module.css";
|
||||
|
||||
export type AccountUser = { id: string; email: string; verified_at: string };
|
||||
type AccountState = {
|
||||
user: AccountUser | null;
|
||||
loading: boolean;
|
||||
error: string;
|
||||
refresh: () => Promise<void>;
|
||||
};
|
||||
const AccountContext = createContext<AccountState>({
|
||||
user: null,
|
||||
loading: true,
|
||||
error: "",
|
||||
refresh: async () => {},
|
||||
});
|
||||
export const useGuidanceAccount = () => useContext(AccountContext);
|
||||
|
||||
export default function GuidanceShell({
|
||||
children,
|
||||
title = "探索文档",
|
||||
}: {
|
||||
children: ReactNode;
|
||||
title?: string;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const dialog = useRef<HTMLDialogElement>(null);
|
||||
const [user, setUser] = useState<AccountUser | null>(null),
|
||||
[loading, setLoading] = useState(true),
|
||||
[error, setError] = useState("");
|
||||
const refresh = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const r = await fetch("/api/account/session");
|
||||
const b = await r.json();
|
||||
if (!r.ok) throw Error(b.error || "账户暂时不可用");
|
||||
setUser(b.user || null);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "账户暂时不可用");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
void refresh();
|
||||
}, [refresh]);
|
||||
useEffect(() => {
|
||||
dialog.current?.close();
|
||||
}, [router.pathname, router.query.scope]);
|
||||
const mine = router.query.scope === "mine";
|
||||
const nav = [
|
||||
{
|
||||
href: "/",
|
||||
label: "探索文档",
|
||||
Icon: Compass,
|
||||
active: router.pathname === "/" || router.pathname.startsWith("/guide/"),
|
||||
},
|
||||
{
|
||||
href: "/documents",
|
||||
label: "社区文档",
|
||||
Icon: Files,
|
||||
active: router.pathname.startsWith("/documents") && !mine,
|
||||
},
|
||||
{
|
||||
href: "/documents?scope=mine",
|
||||
label: "我的文档",
|
||||
Icon: BookOpen,
|
||||
active: router.pathname === "/documents" && mine,
|
||||
},
|
||||
{
|
||||
href: "/write",
|
||||
label: "发布文档",
|
||||
Icon: SquarePen,
|
||||
active: router.pathname === "/write",
|
||||
},
|
||||
];
|
||||
function navigation(mobile = false) {
|
||||
return (
|
||||
<>
|
||||
<Link
|
||||
className={s.brand}
|
||||
href="/"
|
||||
onClick={() => dialog.current?.close()}
|
||||
>
|
||||
<span className={s.brandMark}>
|
||||
<Waypoints size={22} strokeWidth={2.2} />
|
||||
</span>
|
||||
<span>
|
||||
织页<small>KNOWLEDGE FOR AGENTS</small>
|
||||
</span>
|
||||
</Link>
|
||||
<div className={s.workspaceLabel}>
|
||||
<Globe2 size={16} />
|
||||
<span>公共知识空间</span>
|
||||
<span className={s.workspaceTag}>Public</span>
|
||||
</div>
|
||||
<p className={s.navLabel}>工作空间</p>
|
||||
<nav
|
||||
aria-label={mobile ? "移动端主导航" : "主导航"}
|
||||
className={s.navigation}
|
||||
>
|
||||
{nav.map(({ href, label, Icon, active }) => (
|
||||
<Link
|
||||
href={href}
|
||||
key={href}
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={active ? s.navActive : ""}
|
||||
onClick={() => dialog.current?.close()}
|
||||
>
|
||||
<Icon size={18} />
|
||||
<span>{label}</span>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
<p className={s.navLabel}>资源</p>
|
||||
<nav
|
||||
aria-label={mobile ? "移动端资源" : "资源导航"}
|
||||
className={s.navigation}
|
||||
>
|
||||
<Link
|
||||
href="/protocol"
|
||||
aria-current={router.pathname === "/protocol" ? "page" : undefined}
|
||||
className={router.pathname === "/protocol" ? s.navActive : ""}
|
||||
onClick={() => dialog.current?.close()}
|
||||
>
|
||||
<BookOpen size={18} />
|
||||
<span>文档协议</span>
|
||||
</Link>
|
||||
<a href="/agent/index.md" target="_blank" rel="noreferrer">
|
||||
<Bot size={18} />
|
||||
<span>Agent 读取入口</span>
|
||||
<ArrowUpRight size={14} className={s.navExternal} />
|
||||
</a>
|
||||
</nav>
|
||||
<div className={s.sidebarBottom}>
|
||||
<div className={s.sidebarHelp}>
|
||||
<span className={s.smallLabel}>从一篇文档开始</span>
|
||||
<p>选择适用的指导，需要更多背景时，再沿链接继续阅读。</p>
|
||||
<Link href="/protocol">
|
||||
了解使用方法 <ArrowUpRight size={13} />
|
||||
</Link>
|
||||
</div>
|
||||
<Link href="/account" className={s.userArea}>
|
||||
<span className={s.avatar}>
|
||||
{user ? (
|
||||
user.email.slice(0, 1).toUpperCase()
|
||||
) : (
|
||||
<UserRound size={18} />
|
||||
)}
|
||||
</span>
|
||||
<span className={s.userInfo}>
|
||||
<strong>
|
||||
{user ? user.email : loading ? "正在检查账户…" : "登录你的账户"}
|
||||
</strong>
|
||||
<small>
|
||||
{user ? "管理与发布你的文档" : "邮箱登录 · 开始发布"}
|
||||
</small>
|
||||
</span>
|
||||
<ChevronRight size={15} />
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<AccountContext.Provider value={{ user, loading, error, refresh }}>
|
||||
<div className={s.site}>
|
||||
<Head>
|
||||
<title>{`${title} · 织页`}</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="为 Agent 编写、发现和连接可独立使用的指导文档。"
|
||||
/>
|
||||
</Head>
|
||||
<a className={s.skipLink} href="#workspace-content">
|
||||
跳到正文
|
||||
</a>
|
||||
<aside className={s.sidebar}>{navigation()}</aside>
|
||||
<dialog ref={dialog} className={s.mobileDialog} aria-label="工作区导航">
|
||||
<button
|
||||
type="button"
|
||||
className={s.mobileClose}
|
||||
aria-label="关闭导航"
|
||||
onClick={() => dialog.current?.close()}
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
{navigation(true)}
|
||||
</dialog>
|
||||
<div className={s.workspace}>
|
||||
<header className={s.topbar}>
|
||||
<div className={s.breadcrumb}>
|
||||
<button
|
||||
type="button"
|
||||
className={s.mobileMenu}
|
||||
aria-label="打开导航"
|
||||
onClick={() => dialog.current?.showModal()}
|
||||
>
|
||||
<Menu size={20} />
|
||||
</button>
|
||||
<span className={s.breadcrumbSpace}>工作空间</span>
|
||||
<ChevronRight size={14} />
|
||||
<strong>{title}</strong>
|
||||
</div>
|
||||
<div className={s.topbarActions}>
|
||||
<Link className={s.topbarProtocol} href="/protocol">
|
||||
<span className={s.statusDot} />
|
||||
Linked Guidance 0.1
|
||||
</Link>
|
||||
{router.pathname !== "/write" && (
|
||||
<Link className={s.primaryButton} href="/write">
|
||||
<Plus size={16} />
|
||||
创建文档
|
||||
</Link>
|
||||
)}
|
||||
{!user && !loading && (
|
||||
<Link className={s.topbarLogin} href="/account">
|
||||
<LogIn size={16} />
|
||||
<span>登录</span>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
<main className={s.content} id="workspace-content">
|
||||
{children}
|
||||
</main>
|
||||
<footer className={s.workspaceFooter}>
|
||||
<span>织页 · 让知识按需连接</span>
|
||||
<Link href="/protocol">
|
||||
文档协议 <ArrowUpRight size={12} />
|
||||
</Link>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</AccountContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,190 @@
|
||||
import { useId, useRef, useState, type ReactNode } from "react";
|
||||
import {
|
||||
BookOpen,
|
||||
Check,
|
||||
CheckCircle2,
|
||||
Copy,
|
||||
FileCheck2,
|
||||
FileText,
|
||||
Info,
|
||||
TriangleAlert,
|
||||
} from "lucide-react";
|
||||
import type { Guidance } from "@/content/guides/catalog";
|
||||
import s from "@/styles/guidance.module.css";
|
||||
export const kindNames: Record<Guidance["kind"], string> = {
|
||||
guide: "操作指导",
|
||||
context: "背景知识",
|
||||
evidence: "事实依据",
|
||||
};
|
||||
export function KindIcon({
|
||||
kind,
|
||||
size = 18,
|
||||
}: {
|
||||
kind: Guidance["kind"];
|
||||
size?: number;
|
||||
}) {
|
||||
const Icon =
|
||||
kind === "guide" ? FileText : kind === "context" ? BookOpen : FileCheck2;
|
||||
return <Icon size={size} aria-hidden="true" />;
|
||||
}
|
||||
export function KindBadge({ kind }: { kind: Guidance["kind"] }) {
|
||||
return (
|
||||
<span className={`${s.kindBadge} ${s[kind]}`}>
|
||||
<KindIcon kind={kind} size={13} />
|
||||
{kindNames[kind]}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
export function CopyButton({
|
||||
value,
|
||||
label = "复制地址",
|
||||
className = "",
|
||||
}: {
|
||||
value: string | (() => string);
|
||||
label?: string;
|
||||
className?: string;
|
||||
}) {
|
||||
const [state, setState] = useState<"idle" | "copied" | "error">("idle");
|
||||
async function copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(
|
||||
typeof value === "function" ? value() : value,
|
||||
);
|
||||
setState("copied");
|
||||
} catch {
|
||||
setState("error");
|
||||
}
|
||||
}
|
||||
return (
|
||||
<span className={s.copyControl}>
|
||||
<button
|
||||
type="button"
|
||||
className={className || s.secondaryButton}
|
||||
onClick={() => void copy()}
|
||||
>
|
||||
{state === "copied" ? <Check size={15} /> : <Copy size={15} />}
|
||||
<span>{state === "copied" ? "已复制" : label}</span>
|
||||
</button>
|
||||
<span className={s.srOnly} role="status">
|
||||
{state === "error"
|
||||
? "无法自动复制，请选择下方地址手动复制。"
|
||||
: state === "copied"
|
||||
? "已复制到剪贴板。"
|
||||
: ""}
|
||||
</span>
|
||||
{state === "error" && (
|
||||
<small className={s.copyError}>请手动复制下方地址</small>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
export function Notice({
|
||||
children,
|
||||
tone = "info",
|
||||
}: {
|
||||
children: ReactNode;
|
||||
tone?: "info" | "success" | "error" | "warning";
|
||||
}) {
|
||||
const Icon =
|
||||
tone === "error" || tone === "warning"
|
||||
? TriangleAlert
|
||||
: tone === "success"
|
||||
? CheckCircle2
|
||||
: Info;
|
||||
return (
|
||||
<div
|
||||
className={`${s.notice} ${s["notice" + tone]}`}
|
||||
role={tone === "error" ? "alert" : "status"}
|
||||
>
|
||||
<Icon size={18} />
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export function PageHeading({
|
||||
title,
|
||||
description,
|
||||
eyebrow,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
description?: string;
|
||||
eyebrow?: string;
|
||||
children?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<header className={s.pageHeading}>
|
||||
<div>
|
||||
{eyebrow && <span className={s.eyebrow}>{eyebrow}</span>}
|
||||
<h1>{title}</h1>
|
||||
{description && <p>{description}</p>}
|
||||
</div>
|
||||
{children && <div className={s.headingActions}>{children}</div>}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
export function EmptyState({
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
children?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className={s.emptyState}>
|
||||
<span className={s.emptyIcon}>
|
||||
<BookOpen size={24} />
|
||||
</span>
|
||||
<h3>{title}</h3>
|
||||
<p>{description}</p>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export function Tabs({
|
||||
tabs,
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
tabs: { id: string; label: string; count?: number }[];
|
||||
value: string;
|
||||
onChange: (id: string) => void;
|
||||
}) {
|
||||
const group = useId(),
|
||||
refs = useRef<(HTMLButtonElement | null)[]>([]);
|
||||
return (
|
||||
<div role="tablist" aria-label="内容视图" className={s.tabs}>
|
||||
{tabs.map((tab, index) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
ref={(el) => {
|
||||
refs.current[index] = el;
|
||||
}}
|
||||
id={`${group}-${tab.id}`}
|
||||
role="tab"
|
||||
type="button"
|
||||
aria-selected={value === tab.id}
|
||||
tabIndex={value === tab.id ? 0 : -1}
|
||||
onClick={() => onChange(tab.id)}
|
||||
onKeyDown={(e) => {
|
||||
let next = index;
|
||||
if (e.key === "ArrowRight") next = (index + 1) % tabs.length;
|
||||
else if (e.key === "ArrowLeft")
|
||||
next = (index - 1 + tabs.length) % tabs.length;
|
||||
else if (e.key === "Home") next = 0;
|
||||
else if (e.key === "End") next = tabs.length - 1;
|
||||
else return;
|
||||
e.preventDefault();
|
||||
onChange(tabs[next].id);
|
||||
refs.current[next]?.focus();
|
||||
}}
|
||||
>
|
||||
{tab.label}
|
||||
{tab.count !== undefined && <span>{tab.count}</span>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user