fix(blog-plan): 修就地编辑后文章不刷新(articleNonce 强制重挂载)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
cc 2026-06-25 22:54:23 +08:00
parent d08a23cced
commit c2016a8ea5

View File

@ -1258,6 +1258,9 @@ export function BlogPage({ username, token, initialPostId, onSignOut }: BlogPage
// 编辑器浮层editing=true 时无视路由优先显示编辑器editingPost=null 为新建。
const [editing, setEditing] = useState(false)
const [editingPost, setEditingPost] = useState<Post | null>(null)
// 文章重挂载计数:保存编辑后 bump作为 PostArticle 的 key 强制重拉
// (否则 id 不变时其 useEffect 不会重新 fetch显示旧内容
const [articleNonce, setArticleNonce] = useState(0)
const refresh = useCallback(() => {
setLoading(true)
@ -1288,9 +1291,11 @@ export function BlogPage({ username, token, initialPostId, onSignOut }: BlogPage
setEditing(true)
}
const onEditorSaved = () => {
// 编辑既有文章hash 仍是 #post/<id>,关掉编辑器即回到该文章(会重拉)。
// 编辑既有文章hash 仍是 #post/<id>关掉编辑器即回到该文章bump
// articleNonce 让 PostArticle 重挂载、重拉到最新内容。
// 新建hash 为空,关掉后回列表。两种都刷新列表数据。
setEditing(false)
setArticleNonce((n) => n + 1)
refresh()
}
@ -1309,6 +1314,7 @@ export function BlogPage({ username, token, initialPostId, onSignOut }: BlogPage
} else if (initialPostId) {
center = (
<PostArticle
key={`${initialPostId}-${articleNonce}`}
token={token}
id={initialPostId}
onBack={backToList}
@ -1507,5 +1513,7 @@ Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>"
- **Spec coverage**:存储/上限/接口/鉴权Task 1-2api 封装 + 派生Task 3MarkdownTask 4编辑器Task 5阅读页Task 6列表改造 + `#post/<id>` 路由 + 边界态Task 7。spec 各节均有对应任务。
- **路由真相源**:列表↔文章统一由 `App.tsx` 经 hash 决定(`initialPostId``BlogPage` 仅管编辑器浮层,避免双方争用 URL。编辑器不进 URL不可分享符合 spec
- **类型一致**`Post`/`PostInput`/`PostError` 在 Task 3 定义Task 5/6/7 一致引用;后端 `Post` camelCase 与前端字段对齐。
- **就地编辑刷新**`PostArticle` 的 fetch effect 依赖 `[token, id]`id 不变时不会重拉;故编辑保存后 bump `articleNonce` 并用作 `key` 强制重挂载保证文章页显示最新内容Task 7
- **Markdown code 边界**:以 `language-` 类名区分行内/块级,未指定语言的 ```围栏块``` 会被当作行内样式——个人博客可接受(写 ```lang 即可),不为此引 `node` 判定增复杂度。
- **已知取舍**:返回列表用 `window.location.hash = ''` 会留下一个光秃秃的 `#`cosmetic换页/刷新无副作用;如介意可在 `backToList` 改用 `history.pushState` + 手动置空 `initialPostId`,但那会让 BlogPage 也参与路由、复杂度上升,故不采用。
```