From 0afaed7e06a0a8f1882c8ebd97693352e63ac008 Mon Sep 17 00:00:00 2001
From: Mohan <jtkjcmh@126.com>
Date: Wed, 12 Aug 2026 17:13:59 +0800
Subject: [PATCH] fix(page): mobile single-column editor with quick actions

---
 src/views/admin/ArticleEditorView.vue | 111 +++++++++++++++++++++-----
 1 file changed, 89 insertions(+), 22 deletions(-)

diff --git a/src/views/admin/ArticleEditorView.vue b/src/views/admin/ArticleEditorView.vue
index 665c042..d400670 100644
--- a/src/views/admin/ArticleEditorView.vue
+++ b/src/views/admin/ArticleEditorView.vue
@@ -310,14 +310,38 @@ onBeforeUnmount(() => {
       </div>
 
       <aside class="editor-sidebar">
-        <div class="side-section">
-          <h3 class="side-title">发布设置</h3>
-          <button class="btn-primary" type="button" :disabled="saving" @click="onSubmit">
-            {{ saving ? '保存中...' : isEdit ? '更新文章' : '发布文章' }}
-          </button>
+        <div class="side-section side-section--actions">
+          <h3 class="side-title">快捷操作</h3>
+          <table class="quick-table">
+            <tr>
+              <th class="quick-label">保存</th>
+              <td>
+                <button class="btn-primary" type="button" :disabled="saving" @click="onSubmit">
+                  {{ saving ? '保存中...' : isEdit ? '更新文章' : '发布文章' }}
+                </button>
+              </td>
+            </tr>
+            <tr>
+              <th class="quick-label">退出</th>
+              <td>
+                <router-link to="/admin/articles" class="btn-cancel">取消</router-link>
+              </td>
+            </tr>
+          </table>
         </div>
 
-        <div class="side-section">
+        <div class="side-section side-section--tags">
+          <h3 class="side-title">标签</h3>
+          <div class="tag-picker">
+            <label v-for="tag in tags" :key="tag.id" class="tag-option">
+              <input type="checkbox" :checked="selectedTagIds.includes(tag.id)" @change="toggleTag(tag.id)" />
+              {{ tag.name }}
+            </label>
+            <span v-if="tags.length === 0" class="hint-text">暂无标签</span>
+          </div>
+        </div>
+
+        <div class="side-section side-section--summary">
           <h3 class="side-title">摘要</h3>
           <textarea
             v-model="summary"
@@ -328,7 +352,7 @@ onBeforeUnmount(() => {
           />
         </div>
 
-        <div class="side-section">
+        <div class="side-section side-section--cover">
           <h3 class="side-title">封面图</h3>
           <div v-if="coverImage" class="cover-preview-wrap">
             <img :src="coverImage" class="cover-preview" alt="封面" />
@@ -339,21 +363,6 @@ onBeforeUnmount(() => {
             <input type="file" accept="image/*" class="upload-input" @change="onUpload" />
           </label>
         </div>
-
-        <div class="side-section">
-          <h3 class="side-title">标签</h3>
-          <div class="tag-picker">
-            <label v-for="tag in tags" :key="tag.id" class="tag-option">
-              <input type="checkbox" :checked="selectedTagIds.includes(tag.id)" @change="toggleTag(tag.id)" />
-              {{ tag.name }}
-            </label>
-            <span v-if="tags.length === 0" class="hint-text">暂无标签</span>
-          </div>
-        </div>
-
-        <div class="side-section">
-          <router-link to="/admin/articles" class="btn-cancel">取消</router-link>
-        </div>
       </aside>
     </div>
   </div>
@@ -449,6 +458,43 @@ onBeforeUnmount(() => {
   gap: 16px;
 }
 
+/* 桌面端顺序：快捷操作 → 摘要 → 封面 → 标签 */
+.side-section--actions { order: 0; }
+.side-section--summary { order: 1; }
+.side-section--cover { order: 2; }
+.side-section--tags { order: 3; }
+
+.quick-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.quick-table th,
+.quick-table td {
+  padding: 5px 0;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.quick-label {
+  width: 52px;
+  font-weight: 400;
+  color: var(--ac-text-secondary);
+  font-size: 13px;
+}
+
+.quick-table .btn-primary {
+  width: auto;
+  min-width: 130px;
+  padding: 8px 18px;
+}
+
+.quick-table .btn-cancel {
+  display: inline-block;
+  min-width: 130px;
+  padding: 8px 18px;
+}
+
 .side-section {
   background: var(--ac-bg-card);
   border: 1px solid var(--ac-border-strong);
@@ -581,4 +627,25 @@ onBeforeUnmount(() => {
   border-color: var(--ac-danger-ink);
   color: var(--ac-danger-ink);
 }
+
+/* 手机端单栏：编辑区 + 快捷操作独占首屏，标签/摘要/封面后置 */
+@media (max-width: 640px) {
+  .editor-layout {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .editor-main {
+    order: 1;
+  }
+
+  .editor-sidebar {
+    order: 2;
+    width: 100%;
+  }
+
+  .side-section--tags { order: 1; }
+  .side-section--summary { order: 2; }
+  .side-section--cover { order: 3; }
+}
 </style>
\ No newline at end of file