From 10c0d4beadf591d7390d9ae958dea8cb5b67fc80 Mon Sep 17 00:00:00 2001 From: Yaojia Wang Date: Sun, 21 Jun 2026 17:57:53 +0200 Subject: [PATCH 1/3] =?UTF-8?q?fix(ux):=20=E4=BF=AE=E6=B0=B4=E5=90=88?= =?UTF-8?q?=E5=91=8A=E8=AD=A6(=E6=89=A9=E5=B1=95=E6=B3=A8=E5=85=A5)=20+=20?= =?UTF-8?q?=E6=AD=A3=E6=96=87=E7=BC=96=E8=BE=91=E5=99=A8=E5=B5=8C=E5=A5=97?= =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1/=E4=B8=8D=E9=93=BA=E6=BB=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - layout: html/body 加 suppressHydrationWarning（浏览器扩展水合前注入 class/attr，非本应用 bug） - Editor: textarea 高度自适应内容 + overflow-hidden，消除内部嵌套滚动条、正文随内容铺满写作区，外层单一滚动条统管 --- apps/web/app/layout.tsx | 6 ++++-- apps/web/components/workbench/Editor.tsx | 17 ++++++++++++++++- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 2170895..8ce7d67 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -14,9 +14,11 @@ export default function RootLayout({ }: { children: React.ReactNode; }) { + // suppressHydrationWarning：浏览器扩展（如 Dark Reader/翻译插件）常在 html/body + // 注入 class/attr，水合前改 DOM → 仅这一层属性的水合告警，非本应用 bug。 return ( - - + + {children} diff --git a/apps/web/components/workbench/Editor.tsx b/apps/web/components/workbench/Editor.tsx index fedcd19..2a92fe7 100644 --- a/apps/web/components/workbench/Editor.tsx +++ b/apps/web/components/workbench/Editor.tsx @@ -1,5 +1,7 @@ "use client"; +import { useEffect, useRef } from "react"; + interface EditorProps { value: string; onChange: (value: string) => void; @@ -9,19 +11,32 @@ interface EditorProps { // 中栏正文编辑器：宋体、720px 居中、行高 1.9（UX §2.3 / §6.3）。 // 流式中显示朱砂光标提示（prefers-reduced-motion 下不闪烁，见 globals.css）。 export function Editor({ value, onChange, streaming }: EditorProps) { + const ref = useRef(null); + + // 自适应高度：textarea 高度=内容高度（overflow-hidden 不内部滚动），由外层写作区 + // 单一滚动条统管。修复正文出现嵌套滚动条 + 定高 60vh 不铺满展示区的怪象。 + // min-h-[60vh] 仍作空稿时的最小可写高度（内容更长时按内容增高、外层滚动）。 + useEffect(() => { + const el = ref.current; + if (!el) return; + el.style.height = "auto"; + el.style.height = `${el.scrollHeight}px`; + }, [value]); + return (