Add AI company research workbench backed by the shared site database
Verify and deploy Tabularium / verify-and-deploy (pull_request) Failing after 5m57s
Verify and deploy Tabularium / verify-and-deploy (pull_request) Failing after 5m57s
This commit is contained in:
@@ -0,0 +1,145 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
categorySummary, evidenceUrl, type ResearchEvidence, type ResearchSnapshot,
|
||||
} from "@/lib/ai-research";
|
||||
|
||||
const pageSize = 12;
|
||||
const revenueLabels = { self: "公司披露，待核口径", estimate: "仅第三方估算", unknown: "本轮未找到收入数字" };
|
||||
const useLabels: Record<string, string> = {
|
||||
signal: "公司披露信号", estimate: "第三方估算", historical: "历史里程碑",
|
||||
"historical-estimate": "历史估算", excluded: "排除收入比较", scale: "团队规模",
|
||||
funding: "融资", crosscheck: "同一里程碑的其他资料",
|
||||
};
|
||||
const money = (value: number, unit = "USD") => unit === "USD"
|
||||
? new Intl.NumberFormat("zh-CN", { style: "currency", currency: "USD", maximumFractionDigits: 0 }).format(value)
|
||||
: `${new Intl.NumberFormat("zh-CN").format(value)} ${unit}`;
|
||||
|
||||
function External({ url, children }: { url: string; children: React.ReactNode }) {
|
||||
const safe = evidenceUrl(url);
|
||||
return safe ? <a href={safe} target="_blank" rel="noopener noreferrer">{children} ↗</a> : <span>{children}</span>;
|
||||
}
|
||||
function Evidence({ item, prefix = "evidence" }: { item: ResearchEvidence; prefix?: string }) {
|
||||
return <li id={`${prefix}-${item.id}`} className="research-evidence">
|
||||
<div><code>{item.id}</code><span className="research-tag">{item.kind}</span></div>
|
||||
<strong><External url={item.url}>{item.title}</External></strong>
|
||||
<p>{item.summary}</p><p className="research-muted">{item.limitation}</p>
|
||||
<small>发布：{item.publishedAt ?? "未注明"} 读取：{item.accessedAt}</small>
|
||||
</li>;
|
||||
}
|
||||
|
||||
export default function AICompanyResearch() {
|
||||
const [data, setData] = useState<ResearchSnapshot | null>(null);
|
||||
const [error, setError] = useState(false);
|
||||
const [attempt, setAttempt] = useState(0);
|
||||
const [query, setQuery] = useState("");
|
||||
const [category, setCategory] = useState("");
|
||||
const [cohort, setCohort] = useState("");
|
||||
const [income, setIncome] = useState("");
|
||||
const [page, setPage] = useState(0);
|
||||
const [selected, setSelected] = useState<string | null>(null);
|
||||
const [tab, setTab] = useState<"companies" | "revenue" | "sources" | "reviews">("companies");
|
||||
const companySection = useRef<HTMLElement>(null);
|
||||
const detailSection = useRef<HTMLElement>(null);
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
fetch("/api/research/ai-companies", { signal: controller.signal, cache: "no-store" })
|
||||
.then(async (response) => {
|
||||
if (!response.ok) throw new Error("Research unavailable");
|
||||
const snapshot: ResearchSnapshot = await response.json();
|
||||
setData(snapshot);
|
||||
}).catch(() => { if (!controller.signal.aborted) setError(true); });
|
||||
return () => controller.abort();
|
||||
}, [attempt]);
|
||||
useEffect(() => { if (selected) detailSection.current?.focus(); }, [selected]);
|
||||
const summaries = useMemo(() => data ? categorySummary(data) : [], [data]);
|
||||
const filtered = useMemo(() => data?.companies.filter((c) => {
|
||||
const search = `${c.name} ${c.business} ${c.location ?? ""} ${c.buyer}`.toLocaleLowerCase();
|
||||
const yearMatch = !cohort || (cohort === "other" ? ![2025, 2026].includes(c.year ?? 0) : c.year === Number(cohort));
|
||||
return (!category || c.cat === category) && yearMatch && (!income || c.revenueStatus === income)
|
||||
&& search.includes(query.trim().toLocaleLowerCase());
|
||||
}) ?? [], [data, query, category, cohort, income]);
|
||||
if (error) return <div className="research-message" role="alert">研究数据库暂时不可用。<button onClick={() => { setError(false); setAttempt((n) => n + 1); }}>重新读取</button></div>;
|
||||
if (!data) return <p className="research-message" role="status">正在读取研究数据库…</p>;
|
||||
const categories = new Map(data.categories.map((c) => [c.id, c]));
|
||||
const selectedCompany = data.companies.find((c) => c.id === selected);
|
||||
const observed = data.observations.filter((o) => ["signal", "estimate"].includes(o.selection));
|
||||
const revenueCompanies = new Set(observed.map((o) => o.company)).size;
|
||||
const selectedObservations = data.observations.filter((o) => o.company === selected);
|
||||
const selectedEvidenceIds = new Set([
|
||||
...(selectedCompany?.evidenceIds ?? []), ...(selectedCompany?.pricingEvidence ? [selectedCompany.pricingEvidence] : []),
|
||||
...selectedObservations.map((o) => o.evidence),
|
||||
]);
|
||||
const selectedEvidence = data.evidence.filter((e) => e.companyId === selected || selectedEvidenceIds.has(e.id));
|
||||
function chooseCategory(id: string) {
|
||||
setCategory(id); setPage(0); setTab("companies");
|
||||
companySection.current?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
return <div className="ai-research not-prose">
|
||||
<div className="research-meta"><span>资料截至 {data.asOf}</span><span>首批研究 · 持续补全</span></div>
|
||||
<div className="research-stats">
|
||||
<div><strong>{data.companies.length}</strong><span>已收录公司</span></div>
|
||||
<div><strong>{data.categories.length}</strong><span>业务类别</span></div>
|
||||
<div><strong>{revenueCompanies}</strong><span>找到收入信号的公司</span></div>
|
||||
<div><strong>{data.evidence.length}</strong><span>证据记录</span></div>
|
||||
</div>
|
||||
<div className="research-scope"><p>{data.scope}</p>
|
||||
<details><summary>数据口径与覆盖限制</summary><ul>{data.limitations.map((note) => <li key={note}>{note}</li>)}</ul>
|
||||
<p>来源以 YC、公司官网、投资机构名录与经营案例为主。同一披露的转载不构成独立验证。团队人数包含公司自报的 Team Size，与正式员工口径可能不同。</p>
|
||||
</details>
|
||||
</div>
|
||||
<section aria-labelledby="research-categories-title" className="research-section">
|
||||
<h2 id="research-categories-title">业务分类</h2><p className="research-muted">点击类别查看对应公司。数量反映本次采集覆盖，不是市场份额。</p>
|
||||
<div className="research-categories">{summaries.map((c) => <button key={c.id} onClick={() => chooseCategory(c.id)} aria-label={`查看${c.name}的${c.count}家公司`}>
|
||||
<div><span>{c.name}</span><strong>{c.count}</strong></div>
|
||||
<span className="research-bar" aria-hidden="true"><i style={{ width: `${c.count / Math.max(1, ...summaries.map((s) => s.count)) * 100}%` }} /></span>
|
||||
<small>{c.description}</small>
|
||||
</button>)}</div>
|
||||
</section>
|
||||
<section ref={companySection} className="research-section" aria-labelledby="research-records-title">
|
||||
<h2 id="research-records-title">研究数据</h2>
|
||||
<div className="research-tabs" role="group" aria-label="研究数据视图">
|
||||
{([['companies','公司数据'],['revenue','收入观测'],['sources','原始证据'],['reviews','核查记录']] as const).map(([id,label]) =>
|
||||
<button key={id} aria-pressed={tab === id} onClick={() => setTab(id)}>{label}</button>)}
|
||||
</div>
|
||||
{tab === "companies" && <>
|
||||
<div className="research-filters">
|
||||
<label className="research-query">搜索公司<input type="search" value={query} placeholder="名称、业务、地区或买家" onChange={(e) => { setQuery(e.target.value); setPage(0); }} /></label>
|
||||
<label>业务类别<select value={category} onChange={(e) => { setCategory(e.target.value); setPage(0); }}><option value="">全部类别</option>{data.categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}</select></label>
|
||||
<label>成立或发布<select value={cohort} onChange={(e) => { setCohort(e.target.value); setPage(0); }}><option value="">全部组别</option><option value="2025">2025 年成立</option><option value="2026">2026 年成立</option><option value="other">公开发布与转型对照</option></select></label>
|
||||
<label>收入资料<select value={income} onChange={(e) => { setIncome(e.target.value); setPage(0); }}><option value="">全部状态</option><option value="self">找到公司披露</option><option value="estimate">仅第三方估算</option><option value="unknown">本轮未找到数字</option></select></label>
|
||||
</div>
|
||||
<div className="research-result-count" role="status">{filtered.length} 家匹配公司<button onClick={() => { setCategory(""); setQuery(""); setCohort(""); setIncome(""); setPage(0); }}>清除筛选</button></div>
|
||||
<div className="research-table-wrap"><table><caption className="sr-only">公司分类与经营资料。选择公司名称查看指标和原始证据。</caption><thead><tr><th>公司 / 地区</th><th>业务与买家</th><th>成立 / 发布组别</th><th>团队规模</th><th>收入资料</th></tr></thead><tbody>
|
||||
{filtered.slice(page * pageSize, (page + 1) * pageSize).map((c) => <tr key={c.id} data-selected={selected === c.id || undefined}>
|
||||
<td><button className="research-company-name" aria-expanded={selected === c.id} aria-controls="research-company-detail" onClick={() => setSelected(c.id)}>{c.name}</button><small>{c.location ?? "地区未注明"}</small></td>
|
||||
<td><span className="research-tag">{categories.get(c.cat)?.name}</span><p>{c.business}</p><small>买家：{c.buyer}</small></td>
|
||||
<td>{c.cohort}</td><td>{c.team ?? "未披露"}{c.team !== null && " 人"}</td><td>{revenueLabels[c.revenueStatus]}</td>
|
||||
</tr>)}
|
||||
</tbody></table></div>
|
||||
{!filtered.length && <p className="research-message">没有匹配公司，请调整筛选条件。</p>}
|
||||
{filtered.length > pageSize && <nav className="research-pagination" aria-label="公司数据分页"><button disabled={page === 0} onClick={() => setPage((n) => n - 1)}>上一页</button><span>{page + 1} / {Math.ceil(filtered.length / pageSize)}</span><button disabled={(page + 1) * pageSize >= filtered.length} onClick={() => setPage((n) => n + 1)}>下一页</button></nav>}
|
||||
</>}
|
||||
{tab === "revenue" && <>
|
||||
<p className="research-notice">目前找到 {revenueCompanies} 家公司的收入信号。大多是缺少日历时点的历史里程碑，且 ARR 与年化收入尚未统一。领域均值和离散度暂不计算。</p>
|
||||
<div className="research-revenue-chart" aria-label="不同时间的公开收入里程碑，线性长度，非同行排名">{observed.map((o) => <div key={o.id}>
|
||||
<div><button onClick={() => setSelected(o.company)}>{o.name}</button><strong>{money(o.value, o.unit)}</strong></div>
|
||||
<span className="research-bar" data-estimate={o.selection === "estimate" || undefined} aria-hidden="true"><i style={{width: `${o.value / Math.max(...observed.map((v) => v.value)) * 100}%`}} /></span>
|
||||
<small>{o.kind} · {useLabels[o.selection]} · {o.timing}</small>
|
||||
</div>)}</div>
|
||||
<div className="research-table-wrap"><table><caption>各领域收入可得性；未建立同期、同龄、同口径比较组</caption><thead><tr><th>业务分类</th><th>公司披露数</th><th>仅估算数</th><th>本轮未找到数字</th><th>同期均值 / 离散度</th></tr></thead><tbody>{summaries.map((c) => <tr key={c.id}><td><button onClick={() => chooseCategory(c.id)}>{c.name}</button></td><td>{c.self}</td><td>{c.estimate}</td><td>{c.unknown}</td><td>条件不足</td></tr>)}</tbody></table></div>
|
||||
<p className="research-muted">离散度用于筛选值得核查的异常，还需排除公司年龄、口径和披露偏差；不能据此认定财务造假。</p>
|
||||
</>}
|
||||
{tab === "sources" && <><p className="research-muted">来源链接保留原始位置。相同 URL 的记录可能属于同一披露，不能按记录数计算独立证据数量。</p><ul className="research-evidence-list">{data.evidence.map((e) => <Evidence key={e.id} item={e} />)}</ul></>}
|
||||
{tab === "reviews" && <ul className="research-review-list">{data.reviews.map((r) => <li key={r.id}><span className="research-tag">{r.type}</span><h3>{r.company}</h3><p>{r.summary}</p><p>{r.handling}</p><div>{r.evidenceIds.map((id) => { const e=data.evidence.find((item) => item.id === id); return e ? <External key={id} url={e.url}>{id}</External> : null; })}</div></li>)}</ul>}
|
||||
</section>
|
||||
{selectedCompany && <section id="research-company-detail" ref={detailSection} tabIndex={-1} className="research-detail research-section" aria-label={`${selectedCompany.name}公司明细`}>
|
||||
<div className="research-detail-heading"><h2>{selectedCompany.name}</h2><button onClick={() => setSelected(null)} aria-label="关闭公司明细">关闭</button></div>
|
||||
<p><External url={selectedCompany.url}>公司资料入口</External> {selectedCompany.extraUrl && <External url={selectedCompany.extraUrl}>额外核验入口</External>}</p>
|
||||
<dl className="research-company-facts"><div><dt>主营业务</dt><dd>{selectedCompany.business}</dd></div><div><dt>样本组别</dt><dd>{selectedCompany.cohort}</dd></div><div><dt>买家</dt><dd>{selectedCompany.buyer}</dd></div><div><dt>收费方式</dt><dd>{selectedCompany.price}</dd></div><div><dt>交付证据</dt><dd>{selectedCompany.delivery}</dd></div><div><dt>团队口径</dt><dd>{selectedCompany.teamBasis ?? "本轮未核验人数"}</dd></div><div><dt>技术水平</dt><dd>尚未独立测试，不据融资或收入作能力排名。</dd></div><div><dt>身份与限制</dt><dd>{selectedCompany.notes}</dd></div></dl>
|
||||
<h3>经营指标与排除记录</h3>
|
||||
{selectedObservations.length ? <div className="research-table-wrap"><table><thead><tr><th>指标 / 归属</th><th>原始数值</th><th>数据时点</th><th>用途及限制</th><th>证据</th></tr></thead><tbody>{selectedObservations.map((o) => <tr key={o.id}><td>{o.kind}<small>{o.scope}</small></td><td>{o.bound !== "=" && o.bound}{money(o.value,o.unit)}</td><td>{o.timing}</td><td>{useLabels[o.selection] ?? o.selection}<small>{o.reason}</small></td><td><a href={`#detail-evidence-${o.evidence}`}>{o.evidence}</a></td></tr>)}</tbody></table></div> : <p>本轮尚未找到可记录的量化经营指标。收入保持未知。</p>}
|
||||
<h3>原始证据</h3><ul className="research-evidence-list">{selectedEvidence.map((e) => <Evidence key={e.id} prefix="detail-evidence" item={e} />)}</ul>
|
||||
</section>}
|
||||
<p className="research-footnote">数据版本 {data.version}。当前为首批资料，覆盖、收入定义、财务透明度与商业模式评估将随核验补充。</p>
|
||||
</div>;
|
||||
}
|
||||
Reference in New Issue
Block a user