feat(mira): 7B.3g wiki UI 樹狀渲染 + 跨 wiki 連結
對應 polaris/mira/.agents/specs/mira-app/design.md §5.2 + §3.5.12。 `/mira/wiki/[pageName]`: - 抓 wiki-page 後平行撈所有 wiki-paragraph / triplet / wiki-page,client-side 用 parent_id filter (KBDB 沒 parent_id server filter,且 tag filter 還有 KI-3 bug) - 按 facet 分區渲染:facet 標題 + paragraph markdown + 該段的 triplets - facet 預設展開(看一篇要看內容)/ triplets 預設折疊(leo Logseq outliner 習慣) - **triplet A/B 拆字串 「A >> 關係 >> B」**,若 A 或 B 對得上既有 wiki entity → render 成 <Link> 跨 wiki 跳轉,是 Wikipedia-like 體驗的關鍵 - fallback:非 wiki-page block(schema/index/log 等)直接 render content `/mira/wiki`:列表用 wiki-page 的 content (= entity 名稱) 當標題,不是 page_name slug。 mira.css 加 `.mira-wiki-detail` 不破版 + h2 底線,避免長 cypher 字串撐爆右邊界。 TS check pass。
This commit is contained in:
@@ -755,3 +755,23 @@
|
||||
.mira-app .mira-rel-time {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* ── Wiki detail (7B.3g 樹狀渲染) ── */
|
||||
/* .mira-md 已在 §190+ 定義整套 markdown 樣式(河道+wiki 共用),這裡只加 wiki 細節頁的「不破版」保護 */
|
||||
.mira-app .mira-wiki-detail {
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* 防止長 cypher binding 字串 / URL 撐爆右邊界 */
|
||||
.mira-app .mira-wiki-detail .mira-md li,
|
||||
.mira-app .mira-wiki-detail .mira-md p {
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* wiki h2/h3 加底線分隔,更像文章 */
|
||||
.mira-app .mira-wiki-detail .mira-md h2 {
|
||||
border-bottom: 1px solid var(--mira-line-soft);
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
@@ -3,12 +3,13 @@
|
||||
export const runtime = 'edge';
|
||||
|
||||
// Mira Wiki 單篇頁
|
||||
// SDD: polaris/mira/.agents/specs/mira-app/design.md §5.2 + §3.5.7
|
||||
// 對應 task: 7C.2
|
||||
// SDD: polaris/mira/.agents/specs/mira-app/design.md §5.2 + §3.5.12
|
||||
// 對應 task: 7C.2 + 7B.3g
|
||||
// 路由:/mira/wiki/[pageName]
|
||||
// 顯示單一 wiki block + 它的 children(wiki-paragraph)
|
||||
// 顯示:wiki-page parent → wiki-paragraph children (按 facet 分區) → triplet grandchildren
|
||||
// 7B.3g 升級:樹狀渲染 + 折疊 + triplet 跨 wiki 連結化
|
||||
|
||||
import { useEffect, useState, use } from 'react';
|
||||
import { useEffect, useMemo, useState, use } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { MarkdownView } from '../../_shared/markdown';
|
||||
import '../../mira.css';
|
||||
@@ -18,15 +19,24 @@ const API_BASE = process.env.NEXT_PUBLIC_API_BASE ?? 'https://cypher.arcrun.dev'
|
||||
|
||||
type Block = {
|
||||
id: string;
|
||||
page_name: string;
|
||||
page_name: string | null;
|
||||
content: string;
|
||||
type: string;
|
||||
parent_id: string | null;
|
||||
tags_json: string | null;
|
||||
source: string | null;
|
||||
created_at: number;
|
||||
updated_at: number;
|
||||
};
|
||||
|
||||
type FacetGroup = {
|
||||
facet: string;
|
||||
paragraphs: Array<{
|
||||
block: Block;
|
||||
triplets: Block[];
|
||||
}>;
|
||||
};
|
||||
|
||||
export default function WikiPagePage({
|
||||
params,
|
||||
}: {
|
||||
@@ -34,8 +44,12 @@ export default function WikiPagePage({
|
||||
}) {
|
||||
const { pageName } = use(params);
|
||||
const decodedName = decodeURIComponent(pageName);
|
||||
|
||||
const [block, setBlock] = useState<Block | null>(null);
|
||||
const [siblings, setSiblings] = useState<Block[]>([]);
|
||||
const [paragraphs, setParagraphs] = useState<Block[]>([]);
|
||||
const [triplets, setTriplets] = useState<Block[]>([]);
|
||||
const [entitySet, setEntitySet] = useState<Set<string>>(new Set());
|
||||
const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
@@ -48,25 +62,61 @@ export default function WikiPagePage({
|
||||
const me = (await meRes.json()) as { api_key: string };
|
||||
const headers = { Authorization: `Bearer ${me.api_key}` };
|
||||
|
||||
const res = await fetch(
|
||||
// 1. 抓 wiki-page parent block by page_name
|
||||
const pageRes = await fetch(
|
||||
`${KBDB_BASE}/blocks?page_name=${encodeURIComponent(decodedName)}&limit=1`,
|
||||
{ headers },
|
||||
);
|
||||
if (!res.ok) throw new Error(`KBDB ${res.status}`);
|
||||
const data = await res.json();
|
||||
const found: Block | undefined = data.blocks?.[0];
|
||||
if (!pageRes.ok) throw new Error(`KBDB ${pageRes.status}`);
|
||||
const pageData = await pageRes.json();
|
||||
const wikiPage: Block | undefined = pageData.blocks?.[0];
|
||||
if (cancelled) return;
|
||||
if (!found) {
|
||||
if (!wikiPage) {
|
||||
setError(`找不到 wiki page:${decodedName}`);
|
||||
return;
|
||||
}
|
||||
setBlock(found);
|
||||
setBlock(wikiPage);
|
||||
|
||||
// 若這是個 child block,撈 parent 下其他 siblings 給導航用
|
||||
if (found.parent_id) {
|
||||
// KBDB 沒 children endpoint,用 page_name 找不到 siblings;先略過
|
||||
setSiblings([]);
|
||||
// 2. 平行撈所有 wiki-paragraph + triplet + wiki-page(跨 wiki 連結用),客戶端 filter by parent_id
|
||||
// KBDB 沒 parent_id server filter(兼 tag filter 還有 KI-3 bug),用 source+type 取再 client-side filter
|
||||
const [paraRes, tripRes, pageListRes] = await Promise.all([
|
||||
fetch(`${KBDB_BASE}/blocks?source=ai-canon-wiki&type=wiki-paragraph&limit=500`, { headers }),
|
||||
fetch(`${KBDB_BASE}/blocks?source=ai-canon-wiki&type=triplet&limit=1000`, { headers }),
|
||||
fetch(`${KBDB_BASE}/blocks?source=ai-canon-wiki&type=wiki-page&limit=500`, { headers }),
|
||||
]);
|
||||
if (!paraRes.ok || !tripRes.ok || !pageListRes.ok) {
|
||||
throw new Error('KBDB tree fetch failed');
|
||||
}
|
||||
const paraData = await paraRes.json();
|
||||
const tripData = await tripRes.json();
|
||||
const pageListData = await pageListRes.json();
|
||||
if (cancelled) return;
|
||||
|
||||
const allParas: Block[] = paraData.blocks ?? [];
|
||||
const allTrips: Block[] = tripData.blocks ?? [];
|
||||
const allPages: Block[] = pageListData.blocks ?? [];
|
||||
|
||||
// 該 wiki-page 的 paragraphs
|
||||
const myParas = allParas
|
||||
.filter((p) => p.parent_id === wikiPage.id)
|
||||
.sort((a, b) => a.created_at - b.created_at);
|
||||
setParagraphs(myParas);
|
||||
|
||||
// 該 wiki-page 範圍內所有 paragraph 的 triplets
|
||||
const paraIdSet = new Set(myParas.map((p) => p.id));
|
||||
const myTrips = allTrips.filter((t) => t.parent_id && paraIdSet.has(t.parent_id));
|
||||
setTriplets(myTrips);
|
||||
|
||||
// 跨 wiki 連結用:所有 wiki-page 的 entity 名稱(content 就是 entity)
|
||||
// 額外把 page_name 也加入(page_name=wiki-{entity})
|
||||
const eset = new Set<string>();
|
||||
for (const p of allPages) {
|
||||
if (p.content) eset.add(p.content.trim());
|
||||
if (p.page_name?.startsWith('wiki-')) {
|
||||
eset.add(p.page_name.slice(5).trim());
|
||||
}
|
||||
}
|
||||
setEntitySet(eset);
|
||||
} catch (e: any) {
|
||||
if (!cancelled) setError(e?.message ?? 'load failed');
|
||||
} finally {
|
||||
@@ -79,56 +129,79 @@ export default function WikiPagePage({
|
||||
};
|
||||
}, [decodedName]);
|
||||
|
||||
const tags = parseTags(block?.tags_json);
|
||||
const subtype = tags
|
||||
.find((t) => t.startsWith('subtype:'))
|
||||
?.replace('subtype:', '');
|
||||
// 按 facet 分區
|
||||
const facetGroups = useMemo<FacetGroup[]>(() => {
|
||||
const groups: Map<string, Array<{ block: Block; triplets: Block[] }>> = new Map();
|
||||
for (const p of paragraphs) {
|
||||
const facet = extractFacet(p.tags_json) ?? '未分類';
|
||||
const myTrips = triplets.filter((t) => t.parent_id === p.id);
|
||||
if (!groups.has(facet)) groups.set(facet, []);
|
||||
groups.get(facet)!.push({ block: p, triplets: myTrips });
|
||||
}
|
||||
return Array.from(groups.entries()).map(([facet, paragraphs]) => ({ facet, paragraphs }));
|
||||
}, [paragraphs, triplets]);
|
||||
|
||||
const entity = block?.content?.trim() || decodedName.replace(/^wiki-/, '');
|
||||
const isWikiPage = block?.type === 'wiki-page';
|
||||
|
||||
function toggleCollapse(key: string) {
|
||||
setCollapsed((c) => ({ ...c, [key]: !c[key] }));
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="mira-app">
|
||||
<div className="mira-content">
|
||||
<div className="mira-content mira-wiki-detail">
|
||||
<header style={{ padding: '24px 0 16px', borderBottom: '1px solid #2a2a2a' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 }}>
|
||||
<Link
|
||||
href="/mira/wiki"
|
||||
style={{ color: '#888', fontSize: 14, textDecoration: 'none' }}
|
||||
>
|
||||
← Wiki 索引
|
||||
</Link>
|
||||
</div>
|
||||
<h1 style={{ fontSize: 24, fontWeight: 700, color: '#fff', margin: 0 }}>
|
||||
{decodedName}
|
||||
<Link
|
||||
href="/mira/wiki"
|
||||
style={{ color: '#888', fontSize: 14, textDecoration: 'none' }}
|
||||
>
|
||||
← Wiki 索引
|
||||
</Link>
|
||||
<h1 style={{ fontSize: 28, fontWeight: 700, color: '#fff', margin: '8px 0 4px' }}>
|
||||
{entity}
|
||||
</h1>
|
||||
{subtype && (
|
||||
<div style={{ marginTop: 6 }}>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
padding: '2px 8px',
|
||||
fontSize: 11,
|
||||
background: '#2a2a3a',
|
||||
color: '#aab',
|
||||
borderRadius: 3,
|
||||
}}
|
||||
>
|
||||
subtype: {subtype}
|
||||
</span>
|
||||
{block && (
|
||||
<div style={{ color: '#666', fontSize: 12 }}>
|
||||
{block.type} ・ updated {new Date(block.updated_at * 1000).toLocaleString('zh-TW')}
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{loading && <div style={{ padding: 24, color: '#666' }}>載入中⋯</div>}
|
||||
{error && (
|
||||
<div style={{ padding: 24, color: '#e66' }}>{error}</div>
|
||||
)}
|
||||
{error && <div style={{ padding: 24, color: '#e66' }}>{error}</div>}
|
||||
|
||||
{block && !loading && !error && (
|
||||
<>
|
||||
<article style={{ padding: '20px 0' }}>
|
||||
<MarkdownView text={block.content} />
|
||||
</article>
|
||||
{/* wiki-page tree view */}
|
||||
{isWikiPage && facetGroups.length > 0 && (
|
||||
<article style={{ padding: '8px 0 24px' }}>
|
||||
{facetGroups.map((group) => (
|
||||
<FacetSection
|
||||
key={group.facet}
|
||||
group={group}
|
||||
entitySet={entitySet}
|
||||
collapsed={collapsed}
|
||||
toggleCollapse={toggleCollapse}
|
||||
/>
|
||||
))}
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* 7C.3 contribution log placeholder(此頁是 schema/index/log infra 而非 wiki-page,先不顯示) */}
|
||||
{/* wiki-page 但沒 children:fallback render content */}
|
||||
{isWikiPage && facetGroups.length === 0 && (
|
||||
<article style={{ padding: '8px 0 24px', color: '#888' }}>
|
||||
<em>尚無段落(wiki_synthesis 還沒跑出 children)</em>
|
||||
<MarkdownView text={block.content} />
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* 非 wiki-page(schema / index / log / index-entry 等):直接 render content */}
|
||||
{!isWikiPage && (
|
||||
<article style={{ padding: '20px 0' }}>
|
||||
<MarkdownView text={block.content} />
|
||||
</article>
|
||||
)}
|
||||
|
||||
<footer
|
||||
style={{
|
||||
@@ -140,13 +213,17 @@ export default function WikiPagePage({
|
||||
>
|
||||
<div>id: <span style={{ fontFamily: 'monospace' }}>{block.id}</span></div>
|
||||
<div>type: {block.type}</div>
|
||||
{block.source && <div>source: {block.source}</div>}
|
||||
{block.parent_id && (
|
||||
<div>
|
||||
parent: <span style={{ fontFamily: 'monospace' }}>{block.parent_id}</span>
|
||||
</div>
|
||||
)}
|
||||
{tags.length > 0 && <div>tags: {tags.join(', ')}</div>}
|
||||
<div>updated: {new Date(block.updated_at * 1000).toLocaleString('zh-TW')}</div>
|
||||
{paragraphs.length > 0 && (
|
||||
<div>
|
||||
{paragraphs.length} paragraph(s) ・ {triplets.length} triplet(s)
|
||||
</div>
|
||||
)}
|
||||
</footer>
|
||||
</>
|
||||
)}
|
||||
@@ -155,11 +232,159 @@ export default function WikiPagePage({
|
||||
);
|
||||
}
|
||||
|
||||
function parseTags(tags_json: string | null | undefined): string[] {
|
||||
if (!tags_json) return [];
|
||||
function FacetSection({
|
||||
group,
|
||||
entitySet,
|
||||
collapsed,
|
||||
toggleCollapse,
|
||||
}: {
|
||||
group: FacetGroup;
|
||||
entitySet: Set<string>;
|
||||
collapsed: Record<string, boolean>;
|
||||
toggleCollapse: (key: string) => void;
|
||||
}) {
|
||||
const key = `facet:${group.facet}`;
|
||||
const isCollapsed = collapsed[key] ?? false; // 預設展開(leo 看一篇 wiki 時要看內容)
|
||||
|
||||
return (
|
||||
<section style={{ margin: '16px 0', borderLeft: '3px solid #2a3a4a', paddingLeft: 14 }}>
|
||||
<button
|
||||
onClick={() => toggleCollapse(key)}
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
color: '#aab',
|
||||
fontSize: 16,
|
||||
fontWeight: 600,
|
||||
padding: '4px 0',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'left',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{isCollapsed ? '▸' : '▾'} {group.facet}
|
||||
<span style={{ color: '#555', fontWeight: 400, fontSize: 13, marginLeft: 8 }}>
|
||||
({group.paragraphs.length})
|
||||
</span>
|
||||
</button>
|
||||
{!isCollapsed &&
|
||||
group.paragraphs.map((p) => (
|
||||
<ParagraphBlock
|
||||
key={p.block.id}
|
||||
block={p.block}
|
||||
triplets={p.triplets}
|
||||
entitySet={entitySet}
|
||||
collapsed={collapsed}
|
||||
toggleCollapse={toggleCollapse}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ParagraphBlock({
|
||||
block,
|
||||
triplets,
|
||||
entitySet,
|
||||
collapsed,
|
||||
toggleCollapse,
|
||||
}: {
|
||||
block: Block;
|
||||
triplets: Block[];
|
||||
entitySet: Set<string>;
|
||||
collapsed: Record<string, boolean>;
|
||||
toggleCollapse: (key: string) => void;
|
||||
}) {
|
||||
const tripKey = `trip:${block.id}`;
|
||||
const tripsCollapsed = collapsed[tripKey] ?? true; // triplets 預設折疊
|
||||
|
||||
return (
|
||||
<div style={{ margin: '12px 0 16px', paddingLeft: 4 }}>
|
||||
<div style={{ color: '#ddd', lineHeight: 1.7 }}>
|
||||
<MarkdownView text={block.content} />
|
||||
</div>
|
||||
{triplets.length > 0 && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<button
|
||||
onClick={() => toggleCollapse(tripKey)}
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
color: '#666',
|
||||
fontSize: 12,
|
||||
padding: '2px 0',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{tripsCollapsed ? '▸' : '▾'} 關係 ({triplets.length})
|
||||
</button>
|
||||
{!tripsCollapsed && (
|
||||
<ul style={{ listStyle: 'none', padding: '4px 0 0 12px', margin: 0 }}>
|
||||
{triplets.map((t) => (
|
||||
<li
|
||||
key={t.id}
|
||||
style={{
|
||||
color: '#888',
|
||||
fontSize: 13,
|
||||
padding: '2px 0',
|
||||
fontFamily: 'monospace',
|
||||
}}
|
||||
>
|
||||
<TripletRender content={t.content} entitySet={entitySet} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Render triplet "A >> 關係 >> B" with A/B linkified if they match an existing wiki entity */
|
||||
function TripletRender({
|
||||
content,
|
||||
entitySet,
|
||||
}: {
|
||||
content: string;
|
||||
entitySet: Set<string>;
|
||||
}) {
|
||||
// 切「>>」分 A / 關係 / B
|
||||
const parts = content.split('>>').map((s) => s.trim());
|
||||
if (parts.length !== 3) {
|
||||
return <>{content}</>;
|
||||
}
|
||||
const [a, rel, b] = parts;
|
||||
return (
|
||||
<>
|
||||
<EntityLink name={a} entitySet={entitySet} />{' '}
|
||||
<span style={{ color: '#666' }}>>> {rel} >></span>{' '}
|
||||
<EntityLink name={b} entitySet={entitySet} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function EntityLink({ name, entitySet }: { name: string; entitySet: Set<string> }) {
|
||||
if (entitySet.has(name)) {
|
||||
return (
|
||||
<Link
|
||||
href={`/mira/wiki/${encodeURIComponent(`wiki-${name}`)}`}
|
||||
style={{ color: '#88c0ff', textDecoration: 'none' }}
|
||||
>
|
||||
{name}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
return <span style={{ color: '#ccc' }}>{name}</span>;
|
||||
}
|
||||
|
||||
function extractFacet(tags_json: string | null | undefined): string | null {
|
||||
if (!tags_json) return null;
|
||||
try {
|
||||
return JSON.parse(tags_json) as string[];
|
||||
const tags = JSON.parse(tags_json) as string[];
|
||||
const facetTag = tags.find((t) => t.startsWith('facet:'));
|
||||
return facetTag ? facetTag.slice(6) : null;
|
||||
} catch {
|
||||
return [];
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,15 +41,27 @@ export default function WikiIndexPage() {
|
||||
const me = (await meRes.json()) as { api_key: string };
|
||||
const headers = { Authorization: `Bearer ${me.api_key}` };
|
||||
|
||||
// 用 tag=mira-wiki 一次撈所有相關 blocks(KBDB list endpoint 2026-05-07 加了 tag filter)
|
||||
// 撈所有 type=wiki-page,再 client 端過濾 tags 含 'mira-wiki'
|
||||
// 原本 ?tag=mira-wiki 撞 KBDB worker D1 bug(malformed JSON),改 type filter
|
||||
// 待 KBDB 修 tag filter 後可改回(SDD 待開 kbdb-tag-filter-fix)
|
||||
const res = await fetch(
|
||||
`${KBDB_BASE}/blocks?tag=mira-wiki&limit=200`,
|
||||
`${KBDB_BASE}/blocks?type=wiki-page&limit=200`,
|
||||
{ headers },
|
||||
);
|
||||
if (!res.ok) throw new Error(`KBDB ${res.status}`);
|
||||
const data = await res.json();
|
||||
if (cancelled) return;
|
||||
const blocks: Block[] = data.blocks ?? [];
|
||||
const allWikiBlocks: Block[] = data.blocks ?? [];
|
||||
// Client 端過濾:只留 tags 含 'mira-wiki'
|
||||
const blocks: Block[] = allWikiBlocks.filter((b) => {
|
||||
if (!b.tags_json) return false;
|
||||
try {
|
||||
const tags = JSON.parse(b.tags_json) as string[];
|
||||
return tags.includes('mira-wiki');
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
const tagsOf = (b: Block): string[] => {
|
||||
if (!b.tags_json) return [];
|
||||
@@ -175,8 +187,12 @@ export default function WikiIndexPage() {
|
||||
<WikiCardLink
|
||||
key={p.id}
|
||||
page_name={p.page_name}
|
||||
title={p.page_name}
|
||||
excerpt={firstLineOf(p.content)}
|
||||
title={(p.content || '').trim() || p.page_name}
|
||||
excerpt={
|
||||
p.created_at
|
||||
? `建立 ${new Date(p.created_at * 1000).toLocaleString('zh-TW')}`
|
||||
: p.page_name
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user