feat(web): 地址栏驱动视图,刷新详情页不再回首页

- 新增 data/view.ts 与 useViewRoute:视图与地址双向同步,支持前进后退
- 条目地址带上所属分组,刷新 / 收藏后「返回」有确定落点
- 服务端只把 /c/** 回落到 index.html,其余路径仍返回 404
- 明细页返回按钮去掉左侧箭头图标
This commit is contained in:
2026-10-24 17:18:30 +08:00
parent 41fed5e64d
commit 19ead7b716
22 changed files with 2098 additions and 1321 deletions
@@ -1,12 +1,12 @@
import type { ArticleItem } from '../../data/types'
import { ArrowLeftIcon } from '../common/Icon'
import { ArticleBody } from './ArticleBody'
/**
* 文章详情页(对应模板图二):
* 大标题 + [编辑] + 元信息行 + 白色正文卡(段落 / 小标题 / 配图混排)。
* 大标题 + [编辑] + 元信息行 + 白色正文卡。
*
* 正文是 block 数组,后端以后可以直接把富文本结构映射过来,
* 不用再改渲染层。
* 正文是一整段 Markdown,交给 ArticleBody 解析渲染;
* 渲染细节(支持哪些语法)都收在那一个组件里。
*/
type ArticleDetailViewProps = {
article: ArticleItem
@@ -21,7 +21,6 @@ export function ArticleDetailView({ article, categoryTitle, onBack }: ArticleDet
<div className="detail-view article-view">
<div className="detail-nav card-box">
<button type="button" className="detail-back" onClick={onBack}>
<ArrowLeftIcon />
返回
</button>
<span className="detail-breadcrumb">{categoryTitle} / 文章</span>
@@ -46,33 +45,7 @@ export function ArticleDetailView({ article, categoryTitle, onBack }: ArticleDet
</header>
<article className="article-body card-box">
{(article.blocks ?? []).map((block, index) => {
if (block.type === 'heading') {
return (
<h3 className="article-body-heading" key={index}>
{block.text}
</h3>
)
}
if (block.type === 'image') {
return (
<img
className="article-body-image"
key={index}
src={block.src}
alt=""
loading="lazy"
/>
)
}
return (
<p className="article-body-text" key={index}>
{block.text}
</p>
)
})}
<ArticleBody markdown={article.body} />
</article>
</div>
)