fix(editor): 修复草稿被默认文本覆盖的数据丢失 bug 与编辑器无法滚动

- 编辑器初始化等待文章和草稿两个查询都返回,此前草稿接口先返回
  空内容时会用默认文本初始化并被自动保存覆盖真实草稿
- CodeMirror 容器加 min-h-0(flex 子项默认 min-height:auto 会被
  内容撑开),并约束 .cm-editor 高度为 100% 使内部滚动生效
- 修复规则必须放在 @layer 外,否则被 Tailwind 当作未使用样式裁剪
This commit is contained in:
2026-07-19 14:56:47 +08:00
parent 3e22d3b12e
commit 693e08d67b
3 changed files with 13 additions and 5 deletions
+6
View File
@@ -285,3 +285,9 @@
@apply shadow-[0_0_0_3px_rgba(129,140,248,0.2)];
}
}
/* CodeMirror 编辑器内部滚动(必须是无层级的普通 CSS,
放在 @layer 里会被 Tailwind 当作未使用样式裁剪掉) */
.cm-editor {
height: 100%;
}
@@ -234,7 +234,7 @@ export function AdminProfilePage() {
theme={theme === 'dark' ? oneDark : 'light'}
extensions={[markdown()]}
onChange={(value) => setContent(value)}
className="flex-1 text-sm"
className="flex-1 min-h-0 text-sm"
basicSetup={{ lineNumbers: true, highlightActiveLineGutter: true, highlightActiveLine: true, foldGutter: false }}
/>
</div>
+6 -4
View File
@@ -53,14 +53,16 @@ export function EditorPage() {
enabled: isEdit,
});
const { data: draft } = useQuery({
const { data: draft, isLoading: draftLoading } = useQuery({
queryKey: ['admin-draft', id],
queryFn: () => api.getDraft(id!),
enabled: isEdit,
});
// 必须等文章和草稿两个查询都返回后再初始化,
// 否则会先用默认文本渲染,自动保存随即覆盖掉真实草稿(数据丢失)
useEffect(() => {
if (!initialized && (post || draft)) {
if (!initialized && !isLoading && !draftLoading && (post || draft)) {
setTitle(post?.title || '');
setSlug(post?.slug || '');
setSummary(post?.summary || '');
@@ -70,7 +72,7 @@ export function EditorPage() {
setContentMd(md);
setInitialized(true);
}
}, [post, draft, initialized]);
}, [post, draft, isLoading, draftLoading, initialized]);
// 自动保存草稿
useEffect(() => {
@@ -356,7 +358,7 @@ export function EditorPage() {
theme={theme === 'dark' ? oneDark : 'light'}
extensions={[markdown()]}
onChange={(value) => setContentMd(value)}
className="flex-1 text-sm"
className="flex-1 min-h-0 text-sm"
basicSetup={{
lineNumbers: true,
highlightActiveLineGutter: true,