feat(frontend): add posting compose component suite

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

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 {