From 080a964e34a6c1c07a26a84d700c34ab321bd569 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=90=A6?= <liqiworkers@gmail.com>
Date: Fri, 16 Jan 2026 11:16:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E5=8F=B0=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Header.vue    |   3 +
 client/src/pages/admin/PostForm.vue | 246 ++++++++++++++++------------
 2 files changed, 140 insertions(+), 109 deletions(-)

diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue
index fc514e3..b0c4cc1 100644
--- a/client/src/components/Header.vue
+++ b/client/src/components/Header.vue
@@ -48,6 +48,9 @@
       </nav>
       <div class="hidden md:flex items-center gap-4">
         <a href="#" class="text-art-muted hover:text-white transition-colors"><i data-lucide="github" class="w-5 h-5"></i></a>
+        <a href="/admin" target="_blank" class="text-art-muted hover:text-white transition-colors" title="后台管理">
+          <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
+        </a>
         <button @click="goTo('/services')" class="px-5 py-2 text-xs font-bold tracking-widest uppercase border border-white/20 hover:border-art-accent hover:text-art-accent transition-all rounded-full">
           合作
         </button>
diff --git a/client/src/pages/admin/PostForm.vue b/client/src/pages/admin/PostForm.vue
index c82b015..410e80a 100644
--- a/client/src/pages/admin/PostForm.vue
+++ b/client/src/pages/admin/PostForm.vue
@@ -1,7 +1,21 @@
 <template>
-  <div class="w-full animate-reveal">
-    <div class="flex items-center justify-between mb-6">
-      <h1 class="text-2xl font-serif italic text-white">{{ isEditing ? '编辑文章' : '新建文章' }}</h1>
+  <div class="w-full animate-reveal h-[calc(100vh-8rem)] flex flex-col">
+    <!-- Top Bar -->
+    <div class="flex items-center justify-between mb-4 shrink-0">
+      <div class="flex items-center gap-4">
+        <h1 class="text-2xl font-serif italic text-white">{{ isEditing ? '编辑文章' : '新建文章' }}</h1>
+        <button 
+          type="button" 
+          @click="toggleSidebar"
+          class="p-2 rounded-md hover:bg-white/5 text-art-muted hover:text-white transition-colors border border-transparent hover:border-white/10"
+          :title="isSidebarOpen ? '收起侧边栏' : '展开侧边栏'"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300" :class="{ 'rotate-180': !isSidebarOpen }">
+            <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
+            <line x1="15" x2="15" y1="3" y2="21"></line>
+          </svg>
+        </button>
+      </div>
       <div class="flex gap-3">
         <button type="button" class="admin-btn-secondary" @click="handleCancel">
           取消
@@ -12,117 +26,105 @@
       </div>
     </div>
 
-    <form @submit.prevent="handleSubmit" class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-      <!-- Left Column: Main Content -->
-      <div class="lg:col-span-2 space-y-6">
-        <div class="admin-card p-6 space-y-6">
-          <!-- Title Field -->
-          <div class="space-y-2">
-            <label for="title" class="block text-sm font-medium text-art-muted uppercase tracking-wider">文章标题</label>
-            <input
-                type="text"
-                id="title"
-                v-model="form.title"
-                class="admin-input text-lg font-medium placeholder-white/20"
-                placeholder="请输入文章标题"
-                required
-            />
-            <div class="text-art-error text-xs mt-1" v-if="errors.title">
-              {{ errors.title }}
-            </div>
-          </div>
-          
-          <!-- Content Field -->
-          <div class="space-y-2">
-            <label class="block text-sm font-medium text-art-muted uppercase tracking-wider">文章内容</label>
-            <div class="border border-white/10 rounded-lg overflow-hidden focus-within:border-art-accent focus-within:ring-1 focus-within:ring-art-accent transition-all duration-200">
-              <MdEditor
-                  v-model="form.content"
-                  theme="dark"
-                  :preview="false"
-                  placeholder="请输入 Markdown 内容..."
-                  class="custom-md-editor"
-              />
-            </div>
-            <div class="text-art-error text-xs mt-1" v-if="errors.content">
-              {{ errors.content }}
-            </div>
-          </div>
-          
-          <!-- Excerpt Field -->
-          <div class="space-y-2">
-            <label for="excerpt" class="block text-sm font-medium text-art-muted uppercase tracking-wider">文章摘要</label>
-            <textarea
-                id="excerpt"
-                v-model="form.excerpt"
-                rows="4"
-                class="admin-input resize-none"
-                placeholder="请输入文章摘要 (可选)"
-            ></textarea>
-            <div class="text-art-error text-xs mt-1" v-if="errors.excerpt">
-              {{ errors.excerpt }}
-            </div>
-          </div>
+    <form @submit.prevent="handleSubmit" class="flex-1 flex overflow-hidden gap-6 relative">
+      <!-- Left Column: Main Editor -->
+      <div class="flex-1 flex flex-col min-w-0 transition-all duration-300 ease-in-out h-full">
+        <div class="admin-card flex-1 flex flex-col overflow-hidden border border-white/10 focus-within:border-art-accent/50 transition-colors">
+          <MdEditor
+              v-model="form.content"
+              theme="dark"
+              :preview="false"
+              placeholder="开始创作..."
+              class="custom-md-editor flex-1"
+          />
         </div>
       </div>
       
-      <!-- Right Column: Meta & Settings -->
-      <div class="space-y-6">
-        <div class="admin-card p-6 space-y-6 sticky top-6">
-          <h3 class="text-sm font-medium text-white border-b border-white/5 pb-4 mb-4 flex items-center gap-2">
-            <span class="text-art-accent">⚙️</span> 发布设置
-          </h3>
-           
-          <!-- Category Field -->
-          <div class="space-y-2">
-            <label for="category" class="block text-xs font-medium text-art-muted uppercase tracking-wider">分类</label>
-            <input
-                type="text"
-                id="category"
-                v-model="form.category"
-                class="admin-input"
-                placeholder="文章分类"
-                required
-            />
-            <div class="text-art-error text-xs mt-1" v-if="errors.category">
-              {{ errors.category }}
+      <!-- Right Column: Meta & Settings (Collapsible) -->
+      <div 
+        class="shrink-0 transition-all duration-300 ease-[cubic-bezier(0.25,0.8,0.25,1)] overflow-hidden flex flex-col h-full"
+        :class="[isSidebarOpen ? 'w-80 opacity-100 translate-x-0' : 'w-0 opacity-0 translate-x-10']"
+      >
+        <div class="w-80 space-y-6 overflow-y-auto pr-1 h-full custom-scrollbar pb-6">
+          <div class="admin-card p-6 space-y-6">
+            <h3 class="text-sm font-medium text-white border-b border-white/5 pb-4 mb-4 flex items-center gap-2">
+              <span class="text-art-accent">📝</span> 文章属性
+            </h3>
+
+            <!-- Title Field -->
+            <div class="space-y-2">
+              <label for="title" class="block text-xs font-medium text-art-muted uppercase tracking-wider">文章标题</label>
+              <input
+                  type="text"
+                  id="title"
+                  v-model="form.title"
+                  class="admin-input font-medium"
+                  placeholder="请输入标题"
+                  required
+              />
+              <div class="text-art-error text-xs mt-1" v-if="errors.title">
+                {{ errors.title }}
+              </div>
             </div>
-          </div>
-          
-          <!-- Date Field -->
-          <div class="space-y-2">
-            <label for="date" class="block text-xs font-medium text-art-muted uppercase tracking-wider">发布日期</label>
-            <input
-                type="date"
-                id="date"
-                v-model="form.date"
-                class="admin-input"
-                required
-            />
-            <div class="text-art-error text-xs mt-1" v-if="errors.date">
-              {{ errors.date }}
+
+            <!-- Excerpt Field -->
+            <div class="space-y-2">
+              <label for="excerpt" class="block text-xs font-medium text-art-muted uppercase tracking-wider">摘要</label>
+              <textarea
+                  id="excerpt"
+                  v-model="form.excerpt"
+                  rows="4"
+                  class="admin-input resize-none text-sm leading-relaxed"
+                  placeholder="简短的介绍..."
+              ></textarea>
+              <div class="text-art-error text-xs mt-1" v-if="errors.excerpt">
+                {{ errors.excerpt }}
+              </div>
             </div>
-          </div>
-          
-          <!-- Is Published Field -->
-          <div class="space-y-2">
-            <label for="isPublished" class="block text-xs font-medium text-art-muted uppercase tracking-wider">状态</label>
-            <CustomSelect
-                v-model="form.isPublished"
-                :options="publishStatusOptions"
-                placeholder="请选择发布状态"
-            />
-            <div class="text-art-error text-xs mt-1" v-if="errors.isPublished">
-              {{ errors.isPublished }}
+             
+            <!-- Category Field -->
+            <div class="space-y-2">
+              <label for="category" class="block text-xs font-medium text-art-muted uppercase tracking-wider">分类</label>
+              <input
+                  type="text"
+                  id="category"
+                  v-model="form.category"
+                  class="admin-input"
+                  placeholder="文章分类"
+                  required
+              />
+              <div class="text-art-error text-xs mt-1" v-if="errors.category">
+                {{ errors.category }}
+              </div>
+            </div>
+            
+            <!-- Date Field -->
+            <div class="space-y-2">
+              <label for="date" class="block text-xs font-medium text-art-muted uppercase tracking-wider">发布日期</label>
+              <input
+                  type="date"
+                  id="date"
+                  v-model="form.date"
+                  class="admin-input"
+                  required
+              />
+              <div class="text-art-error text-xs mt-1" v-if="errors.date">
+                {{ errors.date }}
+              </div>
+            </div>
+            
+            <!-- Is Published Field -->
+            <div class="space-y-2">
+              <label for="isPublished" class="block text-xs font-medium text-art-muted uppercase tracking-wider">状态</label>
+              <CustomSelect
+                  v-model="form.isPublished"
+                  :options="publishStatusOptions"
+                  placeholder="请选择发布状态"
+              />
+              <div class="text-art-error text-xs mt-1" v-if="errors.isPublished">
+                {{ errors.isPublished }}
+              </div>
             </div>
-          </div>
-          
-          <!-- Action Buttons (Mobile only, hidden on large screens) -->
-          <div class="lg:hidden pt-4 border-t border-white/5 flex flex-col gap-3">
-             <button type="button" class="admin-btn-primary w-full" @click="handleSubmit" :disabled="isSubmitting">
-               {{ isSubmitting ? '提交中...' : (isEditing ? '更新文章' : '发布文章') }}
-             </button>
-             <button type="button" class="admin-btn-secondary w-full" @click="handleCancel">取消</button>
           </div>
         </div>
       </div>
@@ -145,6 +147,12 @@ const router = useRouter()
 const route = useRoute()
 const toast = useToast()
 
+// Sidebar toggle state
+const isSidebarOpen = ref(true)
+const toggleSidebar = () => {
+  isSidebarOpen.value = !isSidebarOpen.value
+}
+
 // Form state
 const isSubmitting = ref(false)
 const isEditing = computed(() => !!route.params.id)
@@ -177,18 +185,22 @@ const validateForm = (): boolean => {
   if (!form.title.trim()) {
     errors.title = '文章标题不能为空'
     isValid = false
+    // Auto open sidebar if there are errors in it
+    isSidebarOpen.value = true
   }
 
   // Validate category
   if (!form.category.trim()) {
     errors.category = '文章分类不能为空'
     isValid = false
+    isSidebarOpen.value = true
   }
 
   // Validate date
   if (!form.date) {
     errors.date = '发布日期不能为空'
     isValid = false
+    isSidebarOpen.value = true
   }
 
   // Validate content
@@ -263,12 +275,13 @@ onMounted(async () => {
   --md-bk-color: transparent !important;
   --md-color: white !important;
   --md-border-color: transparent !important;
-  height: 600px;
+  height: 100% !important;
 }
 
 :deep(.md-editor-toolbar-wrapper) {
   background-color: rgba(255, 255, 255, 0.02) !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
+  padding: 4px 8px;
 }
 
 :deep(.md-editor-content) {
@@ -279,4 +292,19 @@ onMounted(async () => {
   background-color: rgba(255, 255, 255, 0.02) !important;
   border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
 }
+
+/* Custom Scrollbar for sidebar */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+}
+.custom-scrollbar:hover::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+}
 </style>