fix(app): 统一笔记三滚动面底部留白（约视区高 1/3）

Author: Aparencia

app/src/components/NoteEditView.tsx

@@ -18,6 +18,8 @@ import {
 } from "./markdownEdit";
 // v0.16.1：正文多色荧光笔——色板复用（选中色 → 包裹 ==[色]…==）
 import NoteColorPicker from "./NoteColorPicker";
+// 批 3（用户问题9）：降级 textarea 底部留白与阅读/CM 同源（滚动行程一致）
+import { BOTTOM_BREATHER_CSS } from "../utils/contentBreather";
 
 interface Props {
   note: Note;
@@ -397,7 +399,7 @@ const NoteEditView = forwardRef<NoteEditHandle, Props>(function NoteEditView({ n
         onPaste={(e) => { handleImagePaste(e); }}
         onBlur={() => { if (dirty) void saveDraft(false); }}
         autoFocus // v0.12.2：新建即编辑态聚焦首行（去摩擦——零对话框新建后直接可输入）
-        style={{ flex: 1, padding: 16, fontSize: 14, lineHeight: 1.8, border: "none", outline: "none", resize: "none", fontFamily: "monospace", background: "#fcfcfc" }}
+        style={{ flex: 1, padding: `16px 16px ${BOTTOM_BREATHER_CSS}`, fontSize: 14, lineHeight: 1.8, border: "none", outline: "none", resize: "none", fontFamily: "monospace", background: "#fcfcfc" }}
         placeholder="在此编辑笔记内容…"
       />
 

app/src/components/NoteReadingView.tsx

@@ -15,6 +15,8 @@ import type { Note } from "../types";
 import NoteMarkdown from "./NoteMarkdown";
 import ColumnBar from "./ColumnBar";
 import { fmtDate, parseTags } from "./NoteListView";
+// 批 3（用户问题9）：阅读容器底部留白与编辑双面同源（末段不再贴底无法上移）
+import { BOTTOM_BREATHER_CSS } from "../utils/contentBreather";
 
 interface Props {
   note: Note;
@@ -240,7 +242,7 @@ export default function NoteReadingView({
         {editing ? (
           editor
         ) : (
-          <div ref={contentRef} style={{ flex: 1, overflowY: "auto", padding: 16, fontSize: 14, lineHeight: 1.8 }}>
+          <div ref={contentRef} style={{ flex: 1, overflowY: "auto", padding: `16px 16px ${BOTTOM_BREATHER_CSS}`, fontSize: 14, lineHeight: 1.8 }}>
             {auxPanels}
             <NoteMarkdown
               note={note}

app/src/components/RichEditorView.tsx

@@ -26,6 +26,8 @@ import { clearDraft, readDraft } from "../utils/draftStore";
 import NoteEditView, { type NoteEditHandle } from "./NoteEditView";
 // v0.16.1：正文多色荧光笔——色板复用（选中色 → 包裹 ==[色]…==）
 import NoteColorPicker from "./NoteColorPicker";
+// 批 3（用户问题9）：CM 内容底部留白与阅读/textarea 同源（末行可滚离底边）
+import { BOTTOM_BREATHER_CSS } from "../utils/contentBreather";
 
 interface Props {
   note: Note;
@@ -43,7 +45,8 @@ const TOOLBAR_BTN: React.CSSProperties = {
 const editorTheme = EditorView.theme({
   "&": { height: "100%", backgroundColor: "#fcfcfc" },
   ".cm-scroller": { fontFamily: "monospace", fontSize: "14px", lineHeight: "1.8" },
-  ".cm-content": { padding: "16px 0" },
+  // 底部留白 token 与阅读/textarea 同源（上 16 保留原观感；左右 0 不变）
+  ".cm-content": { padding: `16px 0 ${BOTTOM_BREATHER_CSS}` },
   "&.cm-focused": { outline: "none" },
 });
 

app/src/utils/contentBreather.ts

@@ -0,0 +1,25 @@
+/**
+ * 笔记正文滚动面统一底部留白 token（批 3 / 用户问题9）。
+ *
+ * @ai-context: 三个滚动面——NoteReadingView 阅读容器、RichEditorView
+ *              CodeMirror 的 .cm-content、NoteEditView 降级 textarea——
+ *              引用同一 padding-bottom 值。Why：滚动行程在内容末尾耗尽
+ *              （无底部留白），末行贴住容器底边、无法上移至视区中央留出
+ *              呼吸空间；三面同源避免改一处漏一处。
+ * Why vh + max()：仓库 inline-style 为主（无共享 CSS 类基建）；flex 布局
+ *              下各滚动容器高 ≈ 窗口高 − 固定页头，用窗口相对单位 vh 近似
+ *              「视区高 × 1/3」无需 ResizeObserver 测量（CM 主题在模块
+ *              作用域构造，也无法注入测量值）。max() 提供矮窗下限，防留白
+ *              随视口收缩塌没；高窗按 1/3 等比放大，观感一致。
+ * 边界：非精确的容器比例——页头/工具栏高度使实际留白比例略小于 1/3，
+ *      符合授权口径「约视区高 1/3」，不做 JS 测量（YAGNI）。
+ */
+
+/** 留白下限（px）——滚动容器很矮（<288px）时 vh 项不足 1/3 也有呼吸空间 */
+export const BOTTOM_BREATHER_MIN_PX = 96;
+
+/** 留白与视口高之比（约 1/3——超出则末段滚动行程过长、浪费屏高） */
+export const BOTTOM_BREATHER_VIEWPORT_RATIO = 1 / 3;
+
+/** 统一底部留白 CSS 值（三滚动面 padding-bottom 唯一数据源） */
+export const BOTTOM_BREATHER_CSS = `max(${BOTTOM_BREATHER_MIN_PX}px, ${Math.round(BOTTOM_BREATHER_VIEWPORT_RATIO * 100)}vh)`;