fix(web): 版本历史与列表加载失败时展示错误提示；移除 emoji 改用 Lucide 图标#15
Conversation
Made-with: Cursor
There was a problem hiding this comment.
Pull request overview
该 PR 主要提升 Web 端在“列表/版本历史加载失败”时的用户反馈，并将部分页面上的 emoji 展示替换为 Lucide 图标，以统一视觉风格并提升可读性。
Changes:
- 列表页（基因/基因组/模板/联邦搜索）加载失败时展示错误提示文案
- 详情页（基因/基因组/模板）版本历史加载失败时展示错误提示
- 部分 UI 将 emoji 替换为 Lucide 图标（Home 信息条、联邦搜索卡片、Browse/GeneDetail 空态/错误态等）
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/web/src/pages/TemplateDetail.tsx | 版本历史加载失败时提示错误信息 |
| packages/web/src/pages/TemplateBrowse.tsx | 列表加载失败时提示错误信息 |
| packages/web/src/pages/Home.tsx | 将首页信息条 emoji 替换为 Lucide 图标 |
| packages/web/src/pages/GenomeDetail.tsx | 版本历史加载失败时提示错误信息 |
| packages/web/src/pages/GenomeBrowse.tsx | 列表加载失败时提示错误信息 |
| packages/web/src/pages/GeneDetail.tsx | 版本历史加载失败提示；错误态图标改为 Lucide |
| packages/web/src/pages/Browse.tsx | 本地/联邦搜索加载失败提示；空态图标改为 Lucide |
| packages/web/src/components/FederatedSearchCard.tsx | 卡片头部 emoji 改为 Lucide 图标 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -58,6 +60,7 @@ export default function GenomeBrowse() { | |||
| .catch(() => { | |||
| setGenomes([]); | |||
| setTotal(0); | |||
There was a problem hiding this comment.
列表请求失败时只重置了 genomes/total，但没有重置 totalPages。如果用户先成功加载过多页数据，再遇到一次失败，会在错误提示下方仍然显示旧的分页控件（因为 totalPages 还是旧值）。建议在 catch 分支里同时将 totalPages 置为 0（或 1），以避免展示陈旧分页。
| setTotal(0); | |
| setTotal(0); | |
| setTotalPages(0); |
| setGenes(data.items); | ||
| setTotal(data.total); | ||
| setTotalPages(data.total_pages); | ||
| }) | ||
| .catch(() => { | ||
| setGenes([]); | ||
| setTotal(0); | ||
| setListError('列表加载失败，请刷新重试'); | ||
| }) | ||
| .finally(() => setLoading(false)); |
There was a problem hiding this comment.
本地列表请求失败时没有重置 totalPages。如果之前成功加载过多页数据，再发生一次失败，当前会在错误提示下方仍显示旧分页（totalPages 旧值），与错误状态不一致。建议在该 catch 分支里补充 setTotalPages(0/1)。
| setFederatedItems([]); | ||
| setTotal(0); |
There was a problem hiding this comment.
联邦搜索失败时只清空了 federatedItems/total，但没有重置 federatedSources。如果用户上一次联邦搜索成功过，失败后 Header 仍可能显示旧的来源计数（本地/ClawHub），与当前错误状态不一致。建议在该 catch 分支里同时将 federatedSources 重置为 0 计数（必要时也可重置 totalPages）。
| setFederatedItems([]); | |
| setTotal(0); | |
| setFederatedItems([]); | |
| setFederatedSources({ local: 0, clawhub: 0 }); | |
| setTotal(0); | |
| setTotalPages(0); |
| <div className="mt-6 flex justify-center items-center gap-4 text-sm text-white/60 flex-wrap"> | ||
| <span className="flex items-center gap-1.5"> | ||
| <Dna className="w-4 h-4 shrink-0" /> | ||
| {totalGenes > 0 ? `${totalGenes} 个基因` : '基因持续上新'} | ||
| </span> | ||
| <span>•</span> | ||
| <span>🚀 L0-L3 学习协议</span> | ||
| <span className="flex items-center gap-1.5"> | ||
| <Rocket className="w-4 h-4 shrink-0" /> | ||
| L0-L3 学习协议 | ||
| </span> | ||
| <span>•</span> | ||
| <span>🔌 多平台兼容</span> | ||
| <span className="flex items-center gap-1.5"> | ||
| <Plug className="w-4 h-4 shrink-0" /> | ||
| 多平台兼容 | ||
| </span> | ||
| <span>•</span> | ||
| <span>🤖 AI Curator 自动审核</span> | ||
| <span className="flex items-center gap-1.5"> | ||
| <Bot className="w-4 h-4 shrink-0" /> | ||
| AI Curator 自动审核 | ||
| </span> | ||
| </div> |
There was a problem hiding this comment.
PR 标题提到“移除 emoji 改用 Lucide 图标”，但当前仓库里仍保留了一些 emoji（例如本文件的 CATEGORIES 里仍用 emoji 作为分类图标，另外 GenomeBrowse 的空状态也仍有 emoji）。如果目标是全量移除，建议继续替换；如果只是替换部分场景，建议调整标题以避免误导。
| useEffect(() => { | ||
| if (!slug) return; | ||
| getTemplate(slug) | ||
| .then(setTemplate) | ||
| .catch(() => setError('找不到该 AI 员工模板')); | ||
| setVersionsError(null); | ||
| getTemplateVersions(slug) | ||
| .then(setVersions) | ||
| .catch(() => {}); | ||
| .catch(() => setVersionsError('版本历史加载失败，请刷新重试')); | ||
| }, [slug]); |
There was a problem hiding this comment.
error 状态在 slug 变化时没有重置：如果先进入一个不存在的模板导致 setError(...)，随后在 SPA 内导航到一个有效的 slug，该组件会复用同一实例，error 仍为真从而一直停留在错误页。建议在 effect 开始时清空 error（并可同时将 template 置空以回到 loading skeleton），再发起新的请求。
| useEffect(() => { | ||
| if (!slug) return; | ||
| getGenome(slug) | ||
| .then(setGenome) | ||
| .catch(() => setError('找不到该基因组')); | ||
| setVersionsError(null); | ||
| getGenomeVersions(slug) | ||
| .then(setVersions) | ||
| .catch(() => {}); | ||
| .catch(() => setVersionsError('版本历史加载失败，请刷新重试')); | ||
| }, [slug]); |
There was a problem hiding this comment.
error 状态在 slug 变化时没有重置：如果先进入一个不存在的基因组导致 setError(...)，随后在 SPA 内导航到一个有效的 slug，组件复用会让 error 持续为真而一直显示错误页。建议在 effect 开始时清空 error（并可同时将 genome 置空以回到 loading skeleton），再发起新的请求。
| useEffect(() => { | ||
| if (!slug) return; | ||
| getGene(slug) | ||
| .then(setGene) | ||
| .catch(() => setError('找不到该基因')); | ||
| setVersionsError(null); | ||
| getGeneVersions(slug) | ||
| .then(setVersions) | ||
| .catch(() => {}); | ||
| .catch(() => setVersionsError('版本历史加载失败，请刷新重试')); | ||
| }, [slug]); |
There was a problem hiding this comment.
error 状态在 slug 变化时没有重置：如果先进入一个不存在的基因导致 setError(...)，随后在 SPA 内导航到一个有效的 slug，组件复用会让 error 持续为真而一直显示错误页。建议在 effect 开始时清空 error（并可同时将 gene 置空以回到 loading skeleton），再发起新的请求。
| @@ -58,6 +60,7 @@ export default function TemplateBrowse() { | |||
| .catch(() => { | |||
| setTemplates([]); | |||
| setTotal(0); | |||
There was a problem hiding this comment.
列表请求失败时只重置了 templates/total，但没有重置 totalPages。如果用户先成功加载过多页数据，再遇到一次失败，现在会在错误提示下方仍然显示旧的分页控件（因为 totalPages 还是旧值）。建议在 catch 分支里同时将 totalPages 置为 0（或 1），以避免展示陈旧分页。
| setTotal(0); | |
| setTotal(0); | |
| setTotalPages(0); |
Made-with: Cursor