76 lines
7.0 KiB
TypeScript
76 lines
7.0 KiB
TypeScript
import { useMemo, useState } from "react";
|
||
import { evidenceUrl, type ResearchCandidateBatch, type ResearchSnapshot } from "@/lib/ai-research";
|
||
|
||
type CandidateStatus = ResearchCandidateBatch["records"][number]["status"];
|
||
const statusLabels: Record<CandidateStatus, string> = {
|
||
"pending-year": "成立年或主体待核", "pending-ai": "AI 主营待核", linked: "已关联公司",
|
||
"existing-outside-cohort": "已关联范围外对照", "outside-cohort": "范围外候选", promotion: "推广活动",
|
||
};
|
||
const pageSize = 20;
|
||
const sourceNames: Record<string, string> = {
|
||
S01: "Y Combinator", S02: "TechCrunch AI", S04: "Product Hunt", S05: "Sacra",
|
||
S10: "机器之心", S11: "36氪", S13: "TrustMRR", S14: "a16z Speedrun",
|
||
};
|
||
const sourceLabel = (id: string) => `${id} · ${sourceNames[id] ?? "其他来源"}`;
|
||
|
||
function SourceLink({ url, label }: { url: string | null; label: string }) {
|
||
const safe = url && evidenceUrl(url);
|
||
return safe ? <a href={safe} target="_blank" rel="noopener noreferrer">{label} ↗</a> : <span>{label}（链接未取得）</span>;
|
||
}
|
||
|
||
export default function ResearchCandidates({ data, onSelect, onChooseCategory }: {
|
||
data: ResearchSnapshot; onSelect: (id: string) => void; onChooseCategory: (id: string) => void;
|
||
}) {
|
||
const [source, setSource] = useState("");
|
||
const [batchId, setBatchId] = useState("");
|
||
const [category, setCategory] = useState("");
|
||
const [status, setStatus] = useState<CandidateStatus | "pending" | "">("pending");
|
||
const [query, setQuery] = useState("");
|
||
const [page, setPage] = useState(0);
|
||
const all = useMemo(() => (data.candidateBatches ?? []).flatMap((batch) => batch.records.map((record) => ({ batch, record }))), [data.candidateBatches]);
|
||
const sources = [...new Set(all.map(({ batch }) => batch.sourceId))].sort();
|
||
const batches = (data.candidateBatches ?? []).filter((batch) => !source || batch.sourceId === source);
|
||
const matched = all.filter(({ batch, record }) => (!source || batch.sourceId === source)
|
||
&& (!batchId || batch.id === batchId) && (!category || record.categoryId === category)
|
||
&& `${record.name} ${record.id} ${record.note}`.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()));
|
||
const pending = (value: CandidateStatus) => value === "pending-year" || value === "pending-ai";
|
||
const rows = matched.filter(({ record }) => !status || (status === "pending" ? pending(record.status) : record.status === status));
|
||
const companies = new Map(data.companies.map((company) => [company.id, company]));
|
||
const evidence = new Map(data.evidence.map((item) => [item.id, item]));
|
||
const categories = new Map(data.categories.map((item) => [item.id, item.name]));
|
||
return <section aria-labelledby="research-candidates-title">
|
||
<h3 id="research-candidates-title">候选与缺项</h3>
|
||
<p>展示已登记的有限来源批次及后续核查。默认显示成立年、主体或 AI 主营待核的条目；待核不是确认排除，也不计入公司表。每行是一次发现位置，同一公司或产品可以重复出现。</p>
|
||
<p className="research-muted">候选初分类与公司表数量分开，来源批次不等全年或全站名单。原始发现范围及后续结论见每行说明；暂无收入资料不作零，推广活动也不算公司。</p>
|
||
<div className="research-filters">
|
||
<label className="research-query">搜索候选<input type="search" value={query} placeholder="名称、编号或核查说明" onChange={(event) => { setQuery(event.target.value); setPage(0); }} /></label>
|
||
<label>发现来源<select value={source} onChange={(event) => { setSource(event.target.value); setBatchId(""); setPage(0); }}><option value="">全部已登记来源</option>{sources.map((id) => <option key={id} value={id}>{sourceLabel(id)}</option>)}</select></label>
|
||
<label>发现批次<select value={batchId} onChange={(event) => { setBatchId(event.target.value); setPage(0); }}><option value="">全部批次</option>{batches.map((batch) => <option key={batch.id} value={batch.id}>{batch.id}</option>)}</select></label>
|
||
<label>候选初分类<select value={category} onChange={(event) => { setCategory(event.target.value); setPage(0); }}><option value="">全部分类</option>{data.categories.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}</select></label>
|
||
<label>核查状态<select value={status} onChange={(event) => { setStatus(event.target.value as typeof status); setPage(0); }}>
|
||
<option value="">全部状态（{matched.length}）</option><option value="pending">全部待核（{matched.filter(({ record }) => pending(record.status)).length}）</option>
|
||
{Object.entries(statusLabels).map(([id, label]) => <option key={id} value={id}>{label}（{matched.filter(({ record }) => record.status === id).length}）</option>)}
|
||
</select></label>
|
||
</div>
|
||
<p role="status">{rows.length} 个发现位置匹配；不是独立公司数。</p>
|
||
<div className="research-table-wrap"><table>
|
||
<caption>有限来源候选与处理记录；选择关联公司查看主数据，原始证据直接链接来源</caption>
|
||
<thead><tr><th scope="col">候选</th><th scope="col">初分类 / 状态</th><th scope="col">来源及范围</th><th scope="col">核查结论 / 缺项</th><th scope="col">关联公司 / 证据</th></tr></thead>
|
||
<tbody>{rows.slice(page * pageSize, (page + 1) * pageSize).map(({ batch, record }) => {
|
||
const company = record.companyId && companies.get(record.companyId);
|
||
return <tr key={record.id}>
|
||
<td><SourceLink url={record.url} label={record.name} /><small>{record.id}</small></td>
|
||
<td><button onClick={() => onChooseCategory(record.categoryId)} aria-label={`查看${categories.get(record.categoryId)}分类内的公司`}>{categories.get(record.categoryId)}</button><small>{statusLabels[record.status]}</small></td>
|
||
<td><SourceLink url={batch.url} label={sourceLabel(batch.sourceId)} /><small>{batch.id} · 读取 {batch.accessedAt}</small><details><summary>发现批次范围</summary><p>{batch.scope}</p><p>{batch.complete ? "该批次标记已完成；不代表来源全站覆盖。" : "该批次仍保留覆盖缺项。"}</p></details></td>
|
||
<td>{record.note}</td>
|
||
<td>{company ? <button className="research-company-name" onClick={() => onSelect(company.id)}>{company.name}</button> : <small>尚未关联公司主记录</small>}
|
||
{record.evidenceIds?.map((id) => { const item = evidence.get(id); return item ? <p key={id}><SourceLink url={item.url} label={id} /></p> : null; })}
|
||
</td>
|
||
</tr>;
|
||
})}</tbody>
|
||
</table></div>
|
||
{!rows.length && <p>当前筛选没有已登记的候选记录；不代表该来源或分类没有公司。</p>}
|
||
{rows.length > pageSize && <nav className="research-pagination" aria-label="候选与缺项分页"><button disabled={page === 0} onClick={() => setPage((value) => value - 1)}>上一页</button><span>{page + 1} / {Math.ceil(rows.length / pageSize)}</span><button disabled={(page + 1) * pageSize >= rows.length} onClick={() => setPage((value) => value + 1)}>下一页</button></nav>}
|
||
</section>;
|
||
}
|