feat(frontend): add posting compose component suite

新增了发帖相关的完整组件模块：包括顶部导航栏ComposeHeader、正文编辑区ComposeDocument，以及发布设置栏ComposeContextBar，同时添加了vite依赖缓存配置文件。
2026-08-07 17:45:50 +08:00
parent 94f6a9666b
commit 383440ed5b
12 changed files with 725 additions and 181 deletions
--- a/.vite/deps/_metadata.json
+++ b/.vite/deps/_metadata.json
@@ -0,0 +1,8 @@
+{
+  "hash": "de7e4cff",
+  "configHash": "9a7296da",
+  "lockfileHash": "e3b0c442",
+  "browserHash": "8c168d3c",
+  "optimized": {},
+  "chunks": {}
+}
--- a/.vite/deps/package.json
+++ b/.vite/deps/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
--- a/build.ps1
+++ b/build.ps1
@@ -91,17 +91,17 @@ switch ($Target) {
    'dev' {
        $root = (Get-Location).Path
        Write-Host ''
-        Write-Host '[dev] 前端热更新: http://localhost:5173' -ForegroundColor Green
-        Write-Host '[dev] 后端 API  : http://localhost:3000' -ForegroundColor Green
-        Write-Host '[dev] 后台管理  : http://localhost:3000/admin/dashboard' -ForegroundColor Green
-        Write-Host '[dev] 正在新窗口启动 Go 后端...' -ForegroundColor Cyan
+        Write-Host '[dev] 前端开发  : http://localhost:5173  (Vite HMR)' -ForegroundColor Green
+        Write-Host '[dev] 后端 API  : http://localhost:3000  (Go)' -ForegroundColor Green
+        Write-Host '[dev] 提示     : 请访问 5173 端口，Vite 会自动代理 API 到 3000' -ForegroundColor Yellow
+        Write-Host '[dev] 正在新窗口启动 Go 后端 (仅 API)...' -ForegroundColor Cyan
        Start-Process powershell -ArgumentList @(
            '-NoExit', '-Command',
-            "Set-Location '$root'; Write-Host '[backend] Go API on :3000' -ForegroundColor Cyan; go run $MainPkg"
+            "Set-Location '$root'; Write-Host '[backend] Go API on :3000' -ForegroundColor Cyan; go run $MainPkg --dev"
        ) | Out-Null
        Start-Sleep -Seconds 2
        Push-Location frontend
-    90|        try {
+        try {
            if (-not (Test-Path node_modules)) { npm install }
            npm run dev
        } finally {
--- a/config/config.go
+++ b/config/config.go
@@ -30,6 +30,8 @@ type Config struct {
 	LogFile string
 	// 系统服务控制动作：install|uninstall|start|stop|restart|status，空表示正常运行
 	ServiceAction string
+	// 开发模式：后端代理前端请求到 Vite 开发服务器（非内嵌静态资源）
+	DevMode bool
 }

 // Parse 解析命令行与 app.ini，并初始化数据目录
@@ -42,6 +44,7 @@ func Parse() (*Config, error) {
 	dataFlag := flag.String("data", "", "数据存储目录（覆盖配置文件）")
 	jwtFlag := flag.String("jwt-secret", "", "JWT 签名密钥（覆盖配置文件；留空则自动生成）")
 	serviceFlag := flag.String("service", "", "系统服务控制：install|uninstall|start|stop|restart|status")
+	devFlag := flag.Bool("dev", false, "开发模式：代理前端到 Vite 开发服务器（默认 http://localhost:5173）")
 	flag.Parse()

 	action := strings.ToLower(strings.TrimSpace(*serviceFlag))
@@ -96,6 +99,7 @@ func Parse() (*Config, error) {
 		JWTSecret:     jwtSecret,
 		LogFile:       filepath.Join(absData, "jiang13.log"),
 		ServiceAction: action,
+		DevMode:       *devFlag,
 	}

 	needDirs := action == "" || action == "install"
--- a/frontend/src/components/ArticleEditor.tsx
+++ b/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"
--- a/frontend/src/components/compose/ComposeContextBar.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/components/compose/ComposeDocument.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/components/compose/ComposeHeader.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/pages/ComposePage.tsx
+++ b/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(() => {
+          <ComposeHeader
+            isEdit={isEdit}
+            publishing={publishing}
+            editWindowHint={editWindowHint}
+            draftHint={draftHint}
+            onBack={() => 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>
+            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')}
+            <ComposeDocument
+              postType={postType}
+              title={title}
+              onTitleChange={setTitle}
+              content={content}
+              onContentChange={setContent}
+              limits={limits}
            >
-                  讨论
-                </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}
+              <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>
--- a/frontend/src/styles/global.css
+++ b/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 {
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -42,6 +42,8 @@ export default defineConfig({
      '/api': apiTarget,
      '/uploads': apiTarget,
      '/media': apiTarget,
+      '/oauth': apiTarget,
+      '/.well-known': apiTarget,
    },
  },
 });
--- a/router/router.go
+++ b/router/router.go
@@ -21,9 +21,15 @@ func Setup(cfg *config.Config) (*gin.Engine, error) {
 	r.Use(gin.Recovery())
 	r.Use(gin.Logger())

+	// dev 模式：跳过内嵌静态资源，前端由 Vite 开发服务器(:5173)提供
+	// 用户应访问 5173 端口，Vite 通过 proxy 将 /api 等请求转发到本服务(:3000)
+	if !cfg.DevMode {
 		if err := embed_static.SetupEmbed(r); err != nil {
 			return nil, err
 		}
+	} else {
+		fmt.Fprintf(os.Stderr, "[dev] 后端仅提供 API，前端请访问 http://localhost:5173\n")
+	}

 	filter := service.NewSensitiveFilter()
 	_ = service.WriteDefaultFilterWords(cfg.FilterWordsPath())
@@ -234,6 +240,8 @@ func Setup(cfg *config.Config) (*gin.Engine, error) {
 	}

 	// 后台管理页面由 React SPA 渲染（JSON API 见上方 /api/admin）
+	// dev 模式下前端由 Vite 提供，后台页面路由不在此注册
+	if !cfg.DevMode {
 		admin := r.Group("/admin")
 		{
 			admin.GET("/login", func(c *gin.Context) {
@@ -248,8 +256,18 @@ func Setup(cfg *config.Config) (*gin.Engine, error) {
 				}
 			}
 		}
+	}

-	// React SPA 入口（公开页注入 SEO meta / JSON-LD / 预渲染摘要）
+	// React SPA 入口
+	// dev 模式：前端由 Vite(:5173) 提供，非 API 请求返回开发提示
+	// 生产模式：注入 SEO meta / JSON-LD / 预渲染摘要
+	if cfg.DevMode {
+		r.NoRoute(func(c *gin.Context) {
+			c.JSON(http.StatusNotFound, gin.H{
+				"error": "dev 模式下前端由 Vite 提供，请访问 http://localhost:5173",
+			})
+		})
+	} else {
 		r.GET("/", h.ServePublicSPA)
 		r.NoRoute(func(c *gin.Context) {
 			if embed_static.IsSPARoute(c.Request.URL.Path) {
@@ -258,6 +276,7 @@ func Setup(cfg *config.Config) (*gin.Engine, error) {
 			}
 			c.JSON(http.StatusNotFound, gin.H{"error": "not found"})
 		})
+	}

 	return r, nil
 }