You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
2.9 KiB
98 lines
2.9 KiB
<script setup lang="ts">
|
|
import { request, unwrapApiBody, type ApiResponse } from '../../../utils/http/factory'
|
|
|
|
definePageMeta({ title: '新建文章' })
|
|
|
|
const state = reactive({
|
|
title: '',
|
|
slug: '',
|
|
excerpt: '',
|
|
bodyMarkdown: '',
|
|
visibility: 'private',
|
|
})
|
|
const loading = ref(false)
|
|
|
|
async function submit() {
|
|
loading.value = true
|
|
try {
|
|
const res = await request<ApiResponse<{ 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 = unwrapApiBody(res).post.id
|
|
await navigateTo(`/me/posts/${id}`)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<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>
|
|
</div>
|
|
</UForm>
|
|
</UContainer>
|
|
</template>
|
|
|