feat(posts): writing-first layout and markdown editor on edit page

Made-with: Cursor

app/pages/me/posts/[id].vue

@@ -76,52 +76,75 @@ const shareUrl = computed(() => {
 </script>
 
 <template>
-  <UContainer class="py-8 max-w-3xl space-y-4">
-    <div class="flex justify-between">
-      <h1 class="text-2xl font-semibold">
+  <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>
+
     <div v-if="loading" class="text-muted">
       加载中…
     </div>
+
     <template v-else>
-      <UAlert
-        v-if="shareUrl"
-        title="仅链接分享"
-        :description="shareUrl"
-      />
-      <UForm :state="state" class="space-y-4" @submit.prevent="save">
-        <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="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">
+      <UForm :state="state" class="space-y-6" @submit.prevent="save">
+        <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">
+            <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">
+                <UAlert
+                  v-if="shareUrl"
+                  title="仅链接分享"
+                  :description="shareUrl"
+                />
+                <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="saving">
             保存
           </UButton>
-          <UButton color="error" variant="soft" @click="remove">
+          <UButton color="error" variant="soft" type="button" @click="remove">
             删除
           </UButton>
         </div>