From aaac8f8b5a00afdd0c184bcdf6f7886388dadf32 Mon Sep 17 00:00:00 2001
From: Roger Deng <13251150+rogerdigital@users.noreply.github.com>
Date: Tue, 23 Jun 2026 21:56:02 +0800
Subject: [PATCH 1/2] style(write): align mode toggle with native toolbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

源码/实时切换按钮原是带边框的胶囊控件，与 md-editor 原生平铺图标
按钮视觉割裂：

- 去掉容器边框和 overflow:hidden，改为无边框 inline-flex 平铺。
- 按钮圆角改 radius.xs（与原生按钮一致），hover/active 用 accentSoft
  背景，与原生 toolbar button:hover 完全一致。
- 给两个按钮补 title 属性，与原生命令按钮的浏览器原生 tooltip 行为
  对齐（之前只有 aria-label 无 title，hover 无提示）。
---
 .../components/editor/EditorModeToggle.tsx    |  2 ++
 apps/web/src/components/editor/editor.css.ts  | 23 +++++++++++++------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/editor/EditorModeToggle.tsx b/apps/web/src/components/editor/EditorModeToggle.tsx
index e5fa951..510f04b 100644
--- a/apps/web/src/components/editor/EditorModeToggle.tsx
+++ b/apps/web/src/components/editor/EditorModeToggle.tsx
@@ -12,6 +12,7 @@ export default function EditorModeToggle() {
         className={styles.modeToggleBtn({ active: editorMode === 'source' })}
         onClick={() => setEditorMode('source')}
         aria-label="源码模式"
+        title="源码模式（仅编辑，无预览）"
       >
         <Code size={13} />
         源码
@@ -21,6 +22,7 @@ export default function EditorModeToggle() {
         className={styles.modeToggleBtn({ active: editorMode === 'live' })}
         onClick={() => setEditorMode('live')}
         aria-label="实时预览模式"
+        title="实时预览（编辑与渲染并排）"
       >
         <Columns2 size={13} />
         实时
diff --git a/apps/web/src/components/editor/editor.css.ts b/apps/web/src/components/editor/editor.css.ts
index 6b29d10..7dcec5d 100644
--- a/apps/web/src/components/editor/editor.css.ts
+++ b/apps/web/src/components/editor/editor.css.ts
@@ -654,16 +654,23 @@ export const immersiveInner = style({
   maxWidth: '720px',
 });
 
+export const immersiveTitleRow = style({
+  display: 'flex',
+  alignItems: 'baseline',
+  gap: vars.spacing.lg,
+  marginBottom: vars.spacing['3xl'],
+});
+
 export const immersiveTitleInput = style({
   fontFamily: vars.font.serif,
-  width: '100%',
+  flex: 1,
+  minWidth: 0,
   border: 0,
   background: 'transparent',
   fontSize: '32px',
   lineHeight: 1.3,
   color: vars.color.text,
   outline: 'none',
-  marginBottom: vars.spacing['3xl'],
   '::placeholder': {
     color: vars.color.textMuted,
   },
@@ -762,12 +769,12 @@ export const immersiveEntryBtn = style({
 });
 
 // --- Editor Mode Toggle ---
+// 与 md-editor 工具栏原生按钮视觉对齐：无边框容器、小圆角、hover 用 accentSoft。
 
 export const modeToggle = style({
   display: 'inline-flex',
-  borderRadius: vars.radius.lg,
-  border: `1px solid ${vars.color.border}`,
-  overflow: 'hidden',
+  alignItems: 'center',
+  gap: vars.spacing['2xs'],
 });
 
 export const modeToggleBtn = recipe({
@@ -777,19 +784,21 @@ export const modeToggleBtn = recipe({
     gap: vars.spacing.xs,
     border: 'none',
     background: 'transparent',
-    padding: `${vars.spacing.xs} ${vars.spacing['md-lg']}`,
+    borderRadius: vars.radius.xs,
+    padding: `${vars.spacing.xs} ${vars.spacing.sm}`,
     fontSize: vars.fontSize.xs,
     color: vars.color.textMuted,
     cursor: 'pointer',
     transition: 'all 150ms',
     ':hover': {
+      background: vars.color.accentSoft,
       color: vars.color.text,
     },
   },
   variants: {
     active: {
       true: {
-        background: vars.color.bgElevated,
+        background: vars.color.accentSoft,
         color: vars.color.text,
         fontWeight: 500,
       },

From 72ca84cbbf76b2f7b1effb9c496b3734d63fabe9 Mon Sep 17 00:00:00 2001
From: Roger Deng <13251150+rogerdigital@users.noreply.github.com>
Date: Tue, 23 Jun 2026 21:56:09 +0800
Subject: [PATCH 2/2] feat(write): align immersive stats with editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

沉浸模式统计条目与写作台编辑区对齐：

- 标题输入框旁补字符限制 {titleCount}/{TITLE_LIMIT}（超限标红），并补
  IME 合成事件处理（之前沉浸标题输入无 composition 处理，拼音临时字符
  会计入统计）。
- footer 补全：字符 / CONTENT_LIMIT（超限标红）· 段落 · 标题数 · 阅读
  时间，复用 statsValue/statsUnit/statsDot 样式，与写作台底部统计栏
  完全一致。
---
 .../src/components/editor/MarkdownEditor.tsx  | 40 +++++++++++++++----
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/editor/MarkdownEditor.tsx b/apps/web/src/components/editor/MarkdownEditor.tsx
index 90179ca..81ef210 100644
--- a/apps/web/src/components/editor/MarkdownEditor.tsx
+++ b/apps/web/src/components/editor/MarkdownEditor.tsx
@@ -371,13 +371,25 @@ function MarkdownEditor({ activeTab, onSave, agentEnabled = false }: MarkdownEdi
           </div>
           <div className={styles.immersiveBody}>
             <div className={styles.immersiveInner}>
-              <input
-                type="text"
-                value={title}
-                onChange={(e) => setTitle(e.target.value)}
-                placeholder="给文章起个标题"
-                className={styles.immersiveTitleInput}
-              />
+              <div className={styles.immersiveTitleRow}>
+                <input
+                  type="text"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  onCompositionStart={() => {
+                    isComposingTitleRef.current = true;
+                  }}
+                  onCompositionEnd={(e) => {
+                    isComposingTitleRef.current = false;
+                    setConfirmedTitle(e.currentTarget.value);
+                  }}
+                  placeholder="给文章起个标题"
+                  className={styles.immersiveTitleInput}
+                />
+                <span className={styles.limitCount({ over: titleOver })}>
+                  {titleCount}/{TITLE_LIMIT}
+                </span>
+              </div>
               <div className={styles.immersiveEditorWrap}>
                 <Suspense fallback={<div style={{ height: 500 }} />}>
                   <MDEditor
@@ -396,7 +408,19 @@ function MarkdownEditor({ activeTab, onSave, agentEnabled = false }: MarkdownEdi
           </div>
           <div className={styles.immersiveFooter}>
             <span className={styles.immersiveFooterText}>
-              {stats.chars} 字符 · {stats.paragraphs} 段落 · 约 {stats.readTime} 阅读 · ESC 退出
+              <span className={styles.statsValue({ over: contentOver })}>{stats.chars}</span>{' '}
+              <span className={styles.statsUnit}>/ {CONTENT_LIMIT} 字符</span>
+              <span className={styles.statsDot}> · </span>
+              <span className={styles.statsValue()}>{stats.paragraphs}</span>{' '}
+              <span className={styles.statsUnit}>段落</span>
+              <span className={styles.statsDot}> · </span>
+              <span className={styles.statsValue()}>{stats.headings}</span>{' '}
+              <span className={styles.statsUnit}>标题</span>
+              <span className={styles.statsDot}> · </span>
+              <span className={styles.statsUnit}>约</span>{' '}
+              <span className={styles.statsValue()}>{stats.readTime}</span>{' '}
+              <span className={styles.statsUnit}>阅读</span>
+              <span className={styles.statsDot}> · ESC 退出</span>
             </span>
           </div>
         </div>