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

Made-with: Cursor

app/pages/me/posts/new.vue

@@ -34,11 +34,36 @@ async function submit() {
 </script>
 
 <template>
-  <UContainer class="py-8 max-w-3xl space-y-4">
+  <UContainer class="py-8 max-w-6xl space-y-6">
-    <h1 class="text-2xl font-semibold">
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <h1 class="text-2xl font-semibold tracking-tight">
         新建文章
       </h1>
-    <UForm :state="state" class="space-y-4" @submit.prevent="submit">
+      <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>
@@ -48,9 +73,6 @@ async function submit() {
               <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"
@@ -61,13 +83,15 @@ async function submit() {
                   ]"
                 />
               </UFormField>
-      <div class="flex gap-2">
+            </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>