feat(frontend): add posting compose component suite

新增了发帖相关的完整组件模块：包括顶部导航栏ComposeHeader、正文编辑区ComposeDocument，以及发布设置栏ComposeContextBar，同时添加了vite依赖缓存配置文件。

frontend/src/components/ArticleEditor.tsx

@@ -774,14 +774,36 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
       <div className="article-editor-body">
         {mode === 'rich' ? (
           <div className="article-editor-pane article-editor-pane--rich">
-            <div className="article-editor-scroll">
+            <div
+              className="article-editor-scroll"
+              onPointerDown={e => {
+                // 点击编辑器外空白区域时，聚焦并将光标置于文末
+                if (editor && (e.target === e.currentTarget || (e.target as HTMLElement).classList.contains('article-editor-content'))) {
+                  e.preventDefault();
+                  editor.chain().focus('end').run();
+                }
+              }}
+            >
               <EditorContent editor={editor} className="article-editor-content" />
             </div>
           </div>
         ) : (
           <div className="article-editor-markdown">
             <div className="article-editor-pane article-editor-pane--source">
-              <div className="article-editor-scroll">
+              <div
+                className="article-editor-scroll"
+                onPointerDown={e => {
+                  if (e.target === e.currentTarget) {
+                    e.preventDefault();
+                    const ta = markdownRef.current;
+                    if (ta) {
+                      ta.focus();
+                      const len = ta.value.length;
+                      ta.setSelectionRange(len, len);
+                    }
+                  }
+                }}
+              >
                 <textarea
                   ref={markdownRef}
                   className="article-editor-markdown-input"

frontend/src/components/compose/ComposeContextBar.tsx

@@ -0,0 +1,105 @@
+import TagInput from '../TagInput';
+import BoardIconDisplay from '../BoardIconDisplay';
+import { getBoardThemeIndex } from '../../utils/boardTheme';
+import type { Board, ForumLimitsPublic } from '../../api/types';
+
+export type PostType = 'normal' | 'question';
+
+interface Props {
+  isEdit: boolean;
+  postType: PostType;
+  onPostTypeChange: (type: PostType) => void;
+  boards: Board[];
+  boardId: string;
+  onBoardChange: (boardId: string) => void;
+  tags: string;
+  onTagsChange: (tags: string) => void;
+  limits: ForumLimitsPublic;
+}
+
+/**
+ * 发帖页发布设置模块：帖子类型、板块、标签三行配置。
+ * 受控组件，所有状态由父级持有。
+ */
+export default function ComposeContextBar({
+  isEdit,
+  postType,
+  onPostTypeChange,
+  boards,
+  boardId,
+  onBoardChange,
+  tags,
+  onTagsChange,
+  limits,
+}: Props) {
+  return (
+    <section className="compose-context" aria-label="发布设置">
+      <div className="compose-context-row">
+        <span className="compose-context-label">类型</span>
+        <div className="compose-type-field">
+          <div className="compose-type-pills" role="radiogroup" aria-label="帖子类型">
+            <button
+              type="button"
+              role="radio"
+              aria-checked={postType === 'normal'}
+              className={`compose-type-pill${postType === 'normal' ? ' active' : ''}`}
+              onClick={() => onPostTypeChange('normal')}
+            >
+              讨论
+            </button>
+            <button
+              type="button"
+              role="radio"
+              aria-checked={postType === 'question'}
+              className={`compose-type-pill${postType === 'question' ? ' active' : ''}`}
+              onClick={() => onPostTypeChange('question')}
+            >
+              问答
+            </button>
+          </div>
+          {postType === 'question' && (
+            <span className="compose-type-hint">问答可标记解决状态</span>
+          )}
+        </div>
+      </div>
+      <div className="compose-context-row">
+        <span className="compose-context-label">板块</span>
+        <div
+          className="compose-board-pills"
+          role="listbox"
+          aria-label={isEdit ? '修改板块' : '选择板块'}
+        >
+          {boards.map(b => {
+            const themeIdx = getBoardThemeIndex(b);
+            const isActive = String(b.id) === boardId;
+            return (
+              <button
+                key={b.id}
+                type="button"
+                role="option"
+                aria-selected={isActive}
+                className={`compose-board-pill compose-board-pill--${themeIdx}${isActive ? ' active' : ''}`}
+                onClick={() => onBoardChange(String(b.id))}
+              >
+                <BoardIconDisplay
+                  board={b}
+                  className="compose-board-icon"
+                />
+                <span>{b.name}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+      <div className="compose-context-row compose-context-row--tags">
+        <span className="compose-context-label">标签</span>
+        <TagInput
+          value={tags}
+          onChange={onTagsChange}
+          placeholder="添加标签，回车确认"
+          maxLength={limits.post_tags_max > 0 ? limits.post_tags_max : undefined}
+        />
+      </div>
+    </section>
+  );
+}

frontend/src/components/compose/ComposeDocument.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+import ArticleEditor from '../ArticleEditor';
+import type { ForumLimitsPublic } from '../../api/types';
+import type { PostType } from './ComposeContextBar';
+
+interface Props {
+  postType: PostType;
+  title: string;
+  onTitleChange: (title: string) => void;
+  content: string;
+  onContentChange: (content: string) => void;
+  limits: ForumLimitsPublic;
+  /** 渲染于标题与编辑器之间的元信息条（如发布设置） */
+  children?: ReactNode;
+}
+
+/**
+ * 发帖页正文写作模块：标题输入框 + 富文本编辑器。
+ * 受控组件，标题与正文状态由父级持有。
+ */
+export default function ComposeDocument({
+  postType,
+  title,
+  onTitleChange,
+  content,
+  onContentChange,
+  limits,
+  children,
+}: Props) {
+  return (
+    <div className="compose-document">
+      <input
+        className="compose-title"
+        type="text"
+        placeholder={postType === 'question' ? '用一句话描述你的问题…' : '输入文章标题…'}
+        value={title}
+        onChange={e => onTitleChange(e.target.value)}
+        maxLength={limits.post_title_max > 0 ? limits.post_title_max : undefined}
+      />
+      {children}
+      <ArticleEditor
+        value={content}
+        onChange={onContentChange}
+        placeholder="开始写作。按回车分段，选中文字后用工具栏设置格式。"
+      />
+    </div>
+  );
+}

frontend/src/components/compose/ComposeHeader.tsx

@@ -0,0 +1,58 @@
+import { ArrowLeft, Send } from 'lucide-react';
+
+interface Props {
+  isEdit: boolean;
+  publishing: boolean;
+  /** 编辑场景下展示的可编辑剩余时间提示；新建时为空 */
+  editWindowHint: string;
+  /** 新建场景下展示的本地草稿提示；编辑时为空 */
+  draftHint: string;
+  onBack: () => void;
+  onPublish: () => void;
+}
+
+/**
+ * 发帖页顶部栏模块：返回按钮、页面标题、草稿/编辑时限提示与发布动作。
+ * 仅承担展示与事件回传，不持有业务状态。
+ */
+export default function ComposeHeader({
+  isEdit,
+  publishing,
+  editWindowHint,
+  draftHint,
+  onBack,
+  onPublish,
+}: Props) {
+  return (
+    <header className="compose-header">
+      <div className="compose-header-left">
+        <button type="button" className="compose-back" onClick={onBack}>
+          <ArrowLeft size={16} />
+          <span>返回</span>
+        </button>
+        <h1 className="compose-header-title">{isEdit ? '编辑帖子' : '写新帖'}</h1>
+        {editWindowHint && (
+          <span className="compose-draft-hint" title={editWindowHint}>
+            {editWindowHint}
+          </span>
+        )}
+        {!isEdit && draftHint && (
+          <span className="compose-draft-hint" title={draftHint}>
+            {draftHint}
+          </span>
+        )}
+      </div>
+      <div className="compose-header-actions">
+        <button
+          type="button"
+          className="compose-publish-btn"
+          disabled={publishing}
+          onClick={onPublish}
+        >
+          <Send size={16} />
+          <span>{publishing ? (isEdit ? '保存中…' : '发布中…') : (isEdit ? '保存修改' : '发布')}</span>
+        </button>
+      </div>
+    </header>
+  );
+}

frontend/src/pages/ComposePage.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { useNavigate, useSearchParams, useParams, useOutletContext } from 'react-router-dom';
-import { ArrowLeft, Send, Pencil } from 'lucide-react';
+import { Pencil } from 'lucide-react';
 import { notify } from '@/lib/notify';
 import { api } from '../api/client';
 import { useAuth } from '../hooks/useAuth';
@@ -8,10 +8,12 @@ import type { Board } from '../api/types';
 import { isHtmlEmpty } from '../utils/postContent';
 import { useForumLimits } from '../hooks/useForumLimits';
 import { useUnsavedChangesGuard } from '../hooks/useUnsavedChangesGuard';
-import ArticleEditor from '../components/ArticleEditor';
 import UnsavedChangesDialog from '../components/UnsavedChangesDialog';
-import TagInput, { serializeTags, parseTags } from '../components/TagInput';
+import { serializeTags, parseTags } from '../components/TagInput';
 import { Spinner } from '@/components/ui/spinner';
+import ComposeHeader from '../components/compose/ComposeHeader';
+import ComposeContextBar, { type PostType } from '../components/compose/ComposeContextBar';
+import ComposeDocument from '../components/compose/ComposeDocument';
 import { getCachedBoards } from '../utils/layoutCache';
 import type { LayoutCtx } from '../layouts/MainLayout';
 import { loginPath } from '../utils/authRedirect';
@@ -30,7 +32,7 @@ interface ComposeBaseline {
   tags: string;
   content: string;
   boardId: string;
-  postType: 'normal' | 'question';
+  postType: PostType;
 }
 
 function resolveBoards(ctxBoards?: Board[]): Board[] {
@@ -71,7 +73,7 @@ export default function ComposePage() {
   const [title, setTitle] = useState('');
   const [tags, setTags] = useState('');
   const [content, setContent] = useState('');
-  const [postType, setPostType] = useState<'normal' | 'question'>('normal');
+  const [postType, setPostType] = useState<PostType>('normal');
   const [publishing, setPublishing] = useState(false);
   const [loading, setLoading] = useState(isEdit);
   /** 新建帖：板块列表是否已就绪（避免请求中误显空态） */
@@ -338,115 +340,39 @@ export default function ComposePage() {
     <div className="compose-page">
       <div className="compose-canvas">
         <div className="compose-shell">
-          <header className="compose-header">
-            <div className="compose-header-left">
-              <button
-                type="button"
-                className="compose-back"
-                onClick={() => requestLeave(() => {
-                  if (isEdit) nav(postPath(editId!, limits));
-                  else nav(-1);
-                })}
-              >
-                <ArrowLeft size={16} />
-                <span>返回</span>
-              </button>
-              <h1 className="compose-header-title">{isEdit ? '编辑帖子' : '写新帖'}</h1>
-              {editWindowHint && (
-                <span className="compose-draft-hint" title={editWindowHint}>
-                  {editWindowHint}
-                </span>
-              )}
-              {!isEdit && draftHint && (
-                <span className="compose-draft-hint" title={draftHint}>
-                  {draftHint}
-                </span>
-              )}
-            </div>
-            <div className="compose-header-actions">
-              <button
-                type="button"
-                className="compose-publish-btn"
-                disabled={publishing}
-                onClick={handleSubmit}
-              >
-                <Send size={16} />
-                {publishing ? (isEdit ? '保存中…' : '发布中…') : (isEdit ? '保存修改' : '发布')}
-              </button>
-            </div>
-          </header>
+          <ComposeHeader
+            isEdit={isEdit}
+            publishing={publishing}
+            editWindowHint={editWindowHint}
+            draftHint={draftHint}
+            onBack={() => requestLeave(() => {
+              if (isEdit) nav(postPath(editId!, limits));
+              else nav(-1);
+            })}
+            onPublish={handleSubmit}
+          />
 
           <div className="compose-shell-body">
-          <section className="compose-context" aria-label="发布设置">
-            <div className="compose-context-row">
-              <span className="compose-context-label">类型</span>
-              <div className="compose-type-pills" role="radiogroup" aria-label="帖子类型">
-                <button
-                  type="button"
-                  role="radio"
-                  aria-checked={postType === 'normal'}
-                  className={`compose-type-pill${postType === 'normal' ? ' active' : ''}`}
-                  onClick={() => setPostType('normal')}
-                >
-                  讨论
-                </button>
-                <button
-                  type="button"
-                  role="radio"
-                  aria-checked={postType === 'question'}
-                  className={`compose-type-pill${postType === 'question' ? ' active' : ''}`}
-                  onClick={() => setPostType('question')}
-                >
-                  问答
-                </button>
-              </div>
-              {postType === 'question' && (
-                <span className="compose-type-hint">可标记未解决 / 已解决</span>
-              )}
-            </div>
-            <div className="compose-context-row">
-              <span className="compose-context-label">板块</span>
-              <div className="compose-board-pills" role="listbox" aria-label={isEdit ? '修改板块' : '选择板块'}>
-                {boards.map(b => (
-                  <button
-                    key={b.id}
-                    type="button"
-                    role="option"
-                    aria-selected={String(b.id) === boardId}
-                    className={`compose-board-pill${String(b.id) === boardId ? ' active' : ''}`}
-                    onClick={() => setBoardId(String(b.id))}
-                  >
-                    {b.name}
-                  </button>
-                ))}
-              </div>
-            </div>
-            <div className="compose-context-row compose-context-row--tags">
-              <span className="compose-context-label">标签</span>
-              <TagInput
-                value={tags}
-                onChange={setTags}
-                placeholder="添加标签，回车确认"
-                maxLength={limits.post_tags_max > 0 ? limits.post_tags_max : undefined}
+            <ComposeDocument
+              postType={postType}
+              title={title}
+              onTitleChange={setTitle}
+              content={content}
+              onContentChange={setContent}
+              limits={limits}
+            >
+              <ComposeContextBar
+                isEdit={isEdit}
+                postType={postType}
+                onPostTypeChange={setPostType}
+                boards={boards}
+                boardId={boardId}
+                onBoardChange={setBoardId}
+                tags={tags}
+                onTagsChange={setTags}
+                limits={limits}
               />
-            </div>
-          </section>
-
-          <div className="compose-document">
-            <input
-              className="compose-title"
-              type="text"
-              placeholder={postType === 'question' ? '用一句话描述你的问题…' : '输入文章标题…'}
-              value={title}
-              onChange={e => setTitle(e.target.value)}
-              maxLength={limits.post_title_max > 0 ? limits.post_title_max : undefined}
-            />
-            <ArticleEditor
-              value={content}
-              onChange={setContent}
-              placeholder="开始写作。按回车分段，选中文字后用工具栏设置格式。"
-            />
-          </div>
+            </ComposeDocument>
           </div>
         </div>
       </div>

frontend/src/styles/global.css

@@ -7200,9 +7200,11 @@ button.profile-stat:hover strong {
 
 .compose-context {
   display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 14px 20px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 18px;
+  padding: 10px 28px;
+  border-top: 1px solid var(--j13-border-light);
   border-bottom: 1px solid var(--j13-border-light);
   background: var(--j13-bg-surface);
   flex-shrink: 0;
@@ -7210,41 +7212,63 @@ button.profile-stat:hover strong {
 
 .compose-context-row {
   display: flex;
-  align-items: flex-start;
-  gap: 12px;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
   min-width: 0;
+  max-width: 100%;
+  padding: 0;
+  border: none;
+}
+
+.compose-context-row:last-child {
+  border-bottom: none;
 }
 
 .compose-context-label {
   flex-shrink: 0;
-  width: 32px;
-  margin-top: 6px;
+  width: auto;
+  margin: 0;
   font-size: 12px;
   font-weight: 500;
   color: var(--color-text-3);
+  letter-spacing: 0.02em;
 }
 
 .compose-context-row--tags .compose-context-label {
-  margin-top: 9px;
+  margin: 0;
 }
 
 .compose-context-row--tags .compose-tags-field {
-  flex: 1;
-  min-width: 0;
+  flex: 0 1 280px;
+  min-width: 160px;
 }
 
 .compose-board-pills {
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   gap: 8px;
   min-width: 0;
 }
 
+/* 类型：连体分段控件（二选一） */
 .compose-type-pills {
-  display: flex;
-  flex-wrap: wrap;
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  padding: 2px;
+  border: 1px solid var(--j13-border);
+  border-radius: 8px;
+  background: var(--j13-bg-block-muted);
+}
+
+.compose-type-field {
+  display: inline-flex;
+  align-items: center;
   gap: 8px;
   min-width: 0;
+  flex-wrap: wrap;
 }
 
 .compose-type-hint {
@@ -7253,12 +7277,38 @@ button.profile-stat:hover strong {
   align-self: center;
 }
 
-.compose-board-pill,
 .compose-type-pill {
-  padding: 5px 12px;
+  padding: 4px 14px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-text-2);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.3;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.compose-type-pill:hover:not(.active) {
+  color: var(--color-text-1);
+}
+
+.compose-type-pill.active {
+  background: var(--j13-green);
+  color: #fff;
+  font-weight: 600;
+}
+
+/* 板块：带图标的选择芯片 */
+.compose-board-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 11px 4px 9px;
   border: 1px solid var(--j13-border);
   border-radius: 999px;
-  background: var(--j13-bg-block-muted);
+  background: var(--j13-bg-surface);
   color: var(--color-text-2);
   font-size: 13px;
   line-height: 1.3;
@@ -7266,21 +7316,74 @@ button.profile-stat:hover strong {
   transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
 
-.compose-board-pill:hover,
-.compose-type-pill:hover {
-  border-color: var(--j13-green);
-  color: var(--j13-green);
-  background: var(--j13-green-bg);
+.compose-board-icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
 }
 
-.compose-board-pill.active,
-.compose-type-pill.active {
-  background: var(--j13-green);
+.compose-board-pill:hover {
   border-color: var(--j13-green);
-  color: #fff;
-  font-weight: 500;
+  color: var(--j13-green);
 }
 
+.compose-board-pill:hover .compose-board-icon {
+  opacity: 1;
+}
+
+.compose-board-pill.active {
+  background: var(--j13-green-bg);
+  border-color: var(--j13-green);
+  color: var(--j13-green);
+  font-weight: 600;
+}
+
+.compose-board-pill.active .compose-board-icon {
+  opacity: 1;
+}
+
+/* 板块主题色 —— 图标颜色 */
+.compose-board-pill--0 .compose-board-icon { color: var(--board-0-color); }
+.compose-board-pill--1 .compose-board-icon { color: var(--board-1-color); }
+.compose-board-pill--2 .compose-board-icon { color: var(--board-2-color); }
+.compose-board-pill--3 .compose-board-icon { color: var(--board-3-color); }
+.compose-board-pill--4 .compose-board-icon { color: var(--board-4-color); }
+.compose-board-pill--5 .compose-board-icon { color: var(--board-5-color); }
+.compose-board-pill--6 .compose-board-icon { color: var(--board-6-color); }
+.compose-board-pill--7 .compose-board-icon { color: var(--board-7-color); }
+
+/* 选中态：主题色背景 + 主题色图标 */
+.compose-board-pill.active.compose-board-pill--0 { background: var(--board-0-bg); border-color: var(--board-0-color); color: var(--board-0-color); }
+.compose-board-pill.active.compose-board-pill--1 { background: var(--board-1-bg); border-color: var(--board-1-color); color: var(--board-1-color); }
+.compose-board-pill.active.compose-board-pill--2 { background: var(--board-2-bg); border-color: var(--board-2-color); color: var(--board-2-color); }
+.compose-board-pill.active.compose-board-pill--3 { background: var(--board-3-bg); border-color: var(--board-3-color); color: var(--board-3-color); }
+.compose-board-pill.active.compose-board-pill--4 { background: var(--board-4-bg); border-color: var(--board-4-color); color: var(--board-4-color); }
+.compose-board-pill.active.compose-board-pill--5 { background: var(--board-5-bg); border-color: var(--board-5-color); color: var(--board-5-color); }
+.compose-board-pill.active.compose-board-pill--6 { background: var(--board-6-bg); border-color: var(--board-6-color); color: var(--board-6-color); }
+.compose-board-pill.active.compose-board-pill--7 { background: var(--board-7-bg); border-color: var(--board-7-color); color: var(--board-7-color); }
+
+.compose-board-pill.active.compose-board-pill--0 .compose-board-icon,
+.compose-board-pill.active.compose-board-pill--1 .compose-board-icon,
+.compose-board-pill.active.compose-board-pill--2 .compose-board-icon,
+.compose-board-pill.active.compose-board-pill--3 .compose-board-icon,
+.compose-board-pill.active.compose-board-pill--4 .compose-board-icon,
+.compose-board-pill.active.compose-board-pill--5 .compose-board-icon,
+.compose-board-pill.active.compose-board-pill--6 .compose-board-icon,
+.compose-board-pill.active.compose-board-pill--7 .compose-board-icon {
+  color: inherit;
+  opacity: 1;
+}
+
+/* hover 态：主题色图标 */
+.compose-board-pill:hover.compose-board-pill--0 .compose-board-icon { color: var(--board-0-color); }
+.compose-board-pill:hover.compose-board-pill--1 .compose-board-icon { color: var(--board-1-color); }
+.compose-board-pill:hover.compose-board-pill--2 .compose-board-icon { color: var(--board-2-color); }
+.compose-board-pill:hover.compose-board-pill--3 .compose-board-icon { color: var(--board-3-color); }
+.compose-board-pill:hover.compose-board-pill--4 .compose-board-icon { color: var(--board-4-color); }
+.compose-board-pill:hover.compose-board-pill--5 .compose-board-icon { color: var(--board-5-color); }
+.compose-board-pill:hover.compose-board-pill--6 .compose-board-icon { color: var(--board-6-color); }
+.compose-board-pill:hover.compose-board-pill--7 .compose-board-icon { color: var(--board-7-color); }
+
 .compose-tags-field {
   display: flex;
   align-items: flex-start;
@@ -7417,18 +7520,19 @@ button.profile-stat:hover strong {
   max-width: 100%;
   padding: 0;
   overflow: hidden;
+  background: var(--j13-bg-surface);
 }
 
 .compose-title {
   width: 100%;
   margin: 0;
-  padding: 20px 24px 12px;
+  padding: 28px 28px 14px;
   border: none;
   background: transparent;
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 1.35;
-  letter-spacing: -0.01em;
+  font-size: 26px;
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: -0.02em;
   color: var(--color-text-1);
   outline: none;
   flex-shrink: 0;
@@ -7436,7 +7540,7 @@ button.profile-stat:hover strong {
 
 .compose-title::placeholder {
   color: var(--color-text-4);
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .compose-subtitle {
@@ -7450,6 +7554,193 @@ button.profile-stat:hover strong {
   font-weight: 500;
 }
 
+/* ===== 发帖页移动端适配 ===== */
+@media (max-width: 640px) {
+  .compose-page {
+    --compose-header-sticky-h: 52px;
+  }
+
+  .compose-canvas {
+    padding: 8px 0;
+    max-width: 100%;
+  }
+
+  .compose-shell {
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+    box-shadow: none;
+  }
+
+  .compose-shell-body {
+    border-radius: 0;
+  }
+
+  .compose-header {
+    padding: 10px 12px;
+    gap: 8px;
+  }
+
+  .compose-header-left {
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .compose-header-title {
+    font-size: 14px;
+  }
+
+  .compose-back span {
+    display: none;
+  }
+
+  .compose-back {
+    padding: 6px;
+    border-radius: 8px;
+  }
+
+  .compose-draft-hint,
+  .compose-edit-window {
+    display: none;
+  }
+
+  .compose-publish-btn {
+    padding: 7px 12px;
+    font-size: 12px;
+  }
+
+  .compose-publish-btn span {
+    display: none;
+  }
+
+  .compose-context {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+    padding: 8px 12px;
+    border-top: 1px solid var(--j13-border-light);
+    border-bottom: 1px solid var(--j13-border-light);
+    background: var(--j13-bg-surface);
+  }
+
+  .compose-context-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 2px;
+  }
+
+  .compose-context-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--color-text-2);
+    letter-spacing: 0;
+  }
+
+  .compose-type-pills {
+    align-self: flex-start;
+  }
+
+  .compose-type-field {
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
+  .compose-type-hint {
+    font-size: 11px;
+    color: var(--color-text-4);
+    white-space: nowrap;
+  }
+
+  .compose-board-pills {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    -webkit-overflow-scrolling: touch;
+    padding-bottom: 4px;
+    scrollbar-width: none;
+  }
+
+  .compose-board-pills::-webkit-scrollbar {
+    display: none;
+  }
+
+  .compose-board-pill {
+    flex-shrink: 0;
+  }
+
+  .compose-context-row--tags .compose-tags-field {
+    flex: 1;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .compose-title {
+    padding: 20px 16px 12px;
+    font-size: 20px;
+    font-weight: 700;
+  }
+
+  .compose-tags-field {
+    padding: 6px 10px;
+  }
+
+  .article-editor-bar {
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 50 !important;
+    padding: 6px 10px;
+    gap: 6px;
+    background: var(--j13-bg-surface);
+    border-bottom: 1px solid var(--j13-border-light);
+    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
+  }
+
+  /* —— 移动端：解除上层 overflow:hidden 以支持 sticky —— */
+  .compose-page {
+    overflow: visible !important;
+  }
+
+  .compose-canvas {
+    overflow: visible !important;
+  }
+
+  .compose-shell {
+    overflow: visible !important;
+  }
+
+  .compose-shell-body {
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .compose-document {
+    overflow: visible !important;
+    flex: 1 0 auto;
+    min-height: 100%;
+  }
+
+  .article-editor {
+    overflow: visible !important;
+    flex: 1 0 auto;
+    min-height: 300px;
+  }
+
+  .article-editor-body {
+    overflow: visible !important;
+  }
+
+  .article-editor-scroll {
+    overflow: visible !important;
+    flex: none;
+  }
+
+  .article-editor-content .tiptap,
+  .article-prosemirror {
+    min-height: 200px;
+    flex: none;
+  }
+}
+
 /* 文章编辑器 */
 .article-editor {
   flex: 1;
@@ -7458,7 +7749,6 @@ button.profile-stat:hover strong {
   flex-direction: column;
   min-width: 0;
   max-width: 100%;
-  border-top: 1px solid var(--j13-border-light);
   overflow: hidden;
 }
 
@@ -7684,6 +7974,7 @@ button.profile-stat:hover strong {
   max-width: 100%;
   overflow: auto;
   background: transparent;
+  cursor: text;
 }
 
 .article-editor-pane--source .article-editor-scroll {
@@ -8344,9 +8635,12 @@ button.profile-stat:hover strong {
 }
 
 .article-editor--fullscreen .article-editor-bar {
+  position: relative;
   top: 0;
   margin: 0 auto;
   padding: 6px 8px;
+  z-index: auto;
+  box-shadow: none;
 }
 
 .article-editor--fullscreen .article-editor-status {
@@ -8606,14 +8900,44 @@ button.profile-stat:hover strong {
 @media (max-width: 768px) {
   .compose-page {
     --compose-header-sticky-h: 53px;
+    overflow: visible !important;
   }
 
   .compose-canvas {
     padding: 10px 12px 20px;
+    overflow: visible !important;
   }
 
   .compose-shell {
     border-radius: 10px;
+    overflow: visible !important;
+  }
+
+  .compose-shell-body {
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .compose-document {
+    overflow: visible !important;
+    flex: 1 0 auto;
+    min-height: 100%;
+  }
+
+  .article-editor {
+    overflow: visible !important;
+    flex: 1 0 auto;
+    min-height: 300px;
+  }
+
+  .article-editor-body {
+    overflow: visible !important;
+  }
+
+  .article-editor-scroll {
+    overflow: visible !important;
+    flex: none;
   }
 
   .compose-header {
@@ -8635,13 +8959,13 @@ button.profile-stat:hover strong {
   }
 
   .compose-context {
-    padding: 12px;
-    gap: 8px;
+    padding: 6px 12px;
   }
 
   .compose-context-row {
     flex-direction: column;
-    gap: 6px;
+    gap: 3px;
+    padding: 4px 0;
   }
 
   .compose-context-label,
@@ -8652,7 +8976,7 @@ button.profile-stat:hover strong {
 
   .compose-title {
     font-size: 20px;
-    padding: 14px 14px 8px;
+    padding: 18px 18px 12px;
   }
 
   .article-editor--fullscreen {
@@ -8660,8 +8984,11 @@ button.profile-stat:hover strong {
   }
 
   .article-editor--fullscreen .article-editor-bar {
+    position: relative;
     margin: 0;
     padding: 8px 0;
+    z-index: auto;
+    box-shadow: none;
   }
 
   .article-editor-markdown {
@@ -8684,7 +9011,13 @@ button.profile-stat:hover strong {
   }
 
   .article-editor-bar {
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 50 !important;
     padding: 8px 10px;
+    background: var(--j13-bg-surface);
+    border-bottom: 1px solid var(--j13-border-light);
+    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
   }
 
   .article-editor-content .tiptap,
@@ -8694,21 +9027,37 @@ button.profile-stat:hover strong {
   }
 
   .article-editor-status {
-    padding: 10px 12px;
-    flex-wrap: wrap;
-    align-items: flex-start;
+    padding: 4px 10px;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 8px;
     border-radius: 0 0 10px 10px;
   }
 
   .article-editor--fullscreen .article-editor-status {
     margin: 0 -12px;
-    padding: 10px 12px;
+    padding: 4px 12px;
     border-radius: 0;
   }
 
+  .article-editor-status-meta {
+    flex-wrap: nowrap;
+    gap: 4px;
+    min-width: 0;
+    overflow: hidden;
+  }
+
   .article-editor-status-actions {
-    width: 100%;
+    width: auto;
     justify-content: flex-end;
+    flex-shrink: 0;
+  }
+
+  .article-editor-view-btn {
+    padding: 4px 10px;
+    gap: 4px;
+    font-size: 12px;
+    white-space: nowrap;
   }
 
   .compose-tags-field {

frontend/vite.config.ts

@@ -42,6 +42,8 @@ export default defineConfig({
       '/api': apiTarget,
       '/uploads': apiTarget,
       '/media': apiTarget,
+      '/oauth': apiTarget,
+      '/.well-known': apiTarget,
     },
   },
 });