nuxt4-demo/app/pages/me/posts/new.vue

<script setup lang="ts">
import { normalizePostSlugCandidate } from '../../../utils/post-slug'

usePageTitle('新建文章')

const { fetchData } = useClientApi()
const toast = useToast()

const state = reactive({
  title: '',
  slug: '',
  excerpt: '',
  bodyMarkdown: '',
  visibility: 'private',
})
const loading = ref(false)
const visibilityItems = [
  { label: '私密', value: 'private' },
  { label: '公开', value: 'public' },
  { label: '仅链接', value: 'unlisted' },
]

const bodyLength = computed(() => state.bodyMarkdown.trim().length)

function generateSlugFromTitle() {
  if (!state.title.trim()) {
    toast.add({ title: '请先填写标题', color: 'warning' })
    return
  }

  const previous = state.slug
  const normalized = normalizePostSlugCandidate(state.title)

  state.slug = normalized

  if (!state.slug) {
    toast.add({ title: '未生成 slug，请检查标题内容', color: 'warning' })
    return
  }

  if (state.slug === previous) {
    toast.add({ title: 'slug 未变化', color: 'neutral' })
    return
  }

  toast.add({ title: '已生成 slug', color: 'success' })
}

async function submit() {
  loading.value = true
  try {
    const { post } = await fetchData<{ post: { id: number } }>('/api/me/posts', {
      method: 'POST',
      body: {
        title: state.title,
        slug: state.slug,
        excerpt: state.excerpt,
        bodyMarkdown: state.bodyMarkdown,
        visibility: state.visibility,
      },
    })
    const id = post.id
    toast.add({ title: '文章已创建', color: 'success' })
    await navigateTo(`/me/posts/${id}`)
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <UContainer class="py-8 max-w-[1600px] space-y-6">
    <div class="flex flex-wrap items-center justify-between gap-3">
      <div class="space-y-1">
        <h1 class="text-2xl font-semibold tracking-tight">
          新建文章
        </h1>
        <p class="text-sm text-muted">
          先填写标题和正文，再在右侧完成发布设置。
        </p>
      </div>
      <div class="flex items-center gap-2">
        <UButton to="/me/posts" variant="ghost" color="neutral">
          返回列表
        </UButton>
        <UButton type="submit" form="new-post-form" :loading="loading">
          创建文章
        </UButton>
      </div>
    </div>

    <UForm
      id="new-post-form"
      :state="state"
      class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_280px]"
      @submit.prevent="submit"
    >
      <div class="space-y-6">
        <UCard :ui="{ body: 'p-4 sm:p-6 space-y-4' }">
          <UFormField label="标题" name="title" required class="w-full">
            <UInput
              v-model="state.title"
              class="w-full"
              placeholder="例如：我的 2026 开发工作流复盘"
            />
          </UFormField>

          <UFormField label="摘要" name="excerpt" required class="w-full">
            <UTextarea
              v-model="state.excerpt"
              class="w-full"
              :rows="3"
              autoresize
              placeholder="一句话概括文章核心内容，便于列表页快速浏览。"
            />
          </UFormField>
        </UCard>

        <UCard :ui="{ body: 'p-4 sm:p-6 space-y-3' }">
          <div class="flex items-center justify-between gap-3">
            <h2 class="text-base font-medium">
              正文内容
            </h2>
            <span class="text-xs text-muted">字数 {{ bodyLength }}</span>
          </div>
          <PostBodyMarkdownEditor v-model="state.bodyMarkdown" />
          <UFormField label="正文" name="bodyMarkdown" required class="sr-only" />
        </UCard>
      </div>

      <div class="space-y-6 xl:sticky xl:top-20 xl:self-start">
        <UCard :ui="{ body: 'p-4 sm:p-5 space-y-4' }">
          <h2 class="text-base font-medium">
            发布设置
          </h2>
          <UFormField label="slug" name="slug" required>
            <div class="flex items-center gap-2">
              <UInput v-model="state.slug" placeholder="my-post-slug" class="flex-1" />
              <UButton
                type="button"
                variant="soft"
                color="neutral"
                icon="i-lucide-wand-sparkles"
                label="生成"
                @click="generateSlugFromTitle"
              />
            </div>
          </UFormField>
          <UFormField label="可见性" name="visibility">
            <USelect v-model="state.visibility" :items="visibilityItems" />
          </UFormField>
        </UCard>

        <UCard :ui="{ body: 'p-4 sm:p-5 space-y-3' }">
          <h2 class="text-base font-medium">
            操作
          </h2>
          <UButton type="submit" :loading="loading" block>
            创建文章
          </UButton>
          <UButton to="/me/posts" variant="ghost" color="neutral" block>
            取消并返回
          </UButton>
        </UCard>
      </div>
    </UForm>
  </UContainer>
</template>