Editor UI polish: toolbar mode toggle + immersive stats

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} />
         实时

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>

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,
       },