feat(posts): align new post page with markdown editor layout

Made-with: Cursor

app/pages/me/posts/new.vue

@@ -34,40 +34,64 @@ async function submit() {
 </script>
 
 <template>
-  <UContainer class="py-8 max-w-3xl space-y-4">
-    <h1 class="text-2xl font-semibold">
-      新建文章
-    </h1>
-    <UForm :state="state" class="space-y-4" @submit.prevent="submit">
-      <UFormField label="标题" name="title" required>
-        <UInput v-model="state.title" />
-      </UFormField>
-      <UFormField label="slug" name="slug" required>
-        <UInput v-model="state.slug" />
-      </UFormField>
-      <UFormField label="摘要" name="excerpt" required>
-        <UInput v-model="state.excerpt" />
-      </UFormField>
-      <UFormField label="正文 Markdown" name="bodyMarkdown" required>
-        <UTextarea v-model="state.bodyMarkdown" :rows="16" class="w-full font-mono text-sm" />
-      </UFormField>
-      <UFormField label="可见性" name="visibility">
-        <USelect
-          v-model="state.visibility"
-          :items="[
-            { label: '私密', value: 'private' },
-            { label: '公开', value: 'public' },
-            { label: '仅链接', value: 'unlisted' },
-          ]"
-        />
-      </UFormField>
-      <div class="flex gap-2">
+  <UContainer class="py-8 max-w-6xl space-y-6">
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <h1 class="text-2xl font-semibold tracking-tight">
+        新建文章
+      </h1>
+      <UButton to="/me/posts" variant="ghost" color="neutral">
+        返回列表
+      </UButton>
+    </div>
+
+    <UForm :state="state" class="space-y-6" @submit.prevent="submit">
+      <UCard :ui="{ body: 'p-4 sm:p-6' }">
+        <PostBodyMarkdownEditor v-model="state.bodyMarkdown" />
+        <UFormField label="正文" name="bodyMarkdown" required class="sr-only" />
+      </UCard>
+
+      <UCard :ui="{ body: 'p-4 sm:p-6 space-y-4' }">
+        <UCollapsible :unmount-on-hide="false" :default-open="true">
+          <UButton
+            type="button"
+            color="neutral"
+            variant="subtle"
+            block
+            class="justify-between font-medium"
+            label="文章设置"
+            trailing
+            trailing-icon="i-lucide-chevron-down"
+          />
+          <template #content>
+            <div class="pt-4 space-y-4 border-t border-default mt-4">
+              <UFormField label="标题" name="title" required>
+                <UInput v-model="state.title" />
+              </UFormField>
+              <UFormField label="slug" name="slug" required>
+                <UInput v-model="state.slug" />
+              </UFormField>
+              <UFormField label="摘要" name="excerpt" required>
+                <UInput v-model="state.excerpt" />
+              </UFormField>
+              <UFormField label="可见性" name="visibility">
+                <USelect
+                  v-model="state.visibility"
+                  :items="[
+                    { label: '私密', value: 'private' },
+                    { label: '公开', value: 'public' },
+                    { label: '仅链接', value: 'unlisted' },
+                  ]"
+                />
+              </UFormField>
+            </div>
+          </template>
+        </UCollapsible>
+      </UCard>
+
+      <div class="flex flex-wrap gap-2">
         <UButton type="submit" :loading="loading">
           创建
         </UButton>
-        <UButton to="/me/posts" variant="ghost" color="neutral">
-          返回
-        </UButton>
       </div>
     </UForm>
   </UContainer>