369 lines
8.6 KiB
Vue
369 lines
8.6 KiB
Vue
|
<template>
|
||
|
|
<div class="post-form-container">
|
||
|
|
<h1 class="page-title">{{ isEditing ? '编辑文章' : '新建文章' }}</h1>
|
||
|
|
|
||
|
|
<div class="form-container">
|
||
|
|
<form @submit.prevent="handleSubmit" class="post-form">
|
||
|
|
<!-- Title Field -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="title">文章标题</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id="title"
|
||
|
|
v-model="form.title"
|
||
|
|
placeholder="请输入文章标题"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
<div class="error-message" v-if="errors.title">
|
||
|
|
{{ errors.title }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Category Field -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="category">分类</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id="category"
|
||
|
|
v-model="form.category"
|
||
|
|
placeholder="请输入文章分类"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
<div class="error-message" v-if="errors.category">
|
||
|
|
{{ errors.category }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Date Field -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="date">发布日期</label>
|
||
|
|
<input
|
||
|
|
type="date"
|
||
|
|
id="date"
|
||
|
|
v-model="form.date"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
<div class="error-message" v-if="errors.date">
|
||
|
|
{{ errors.date }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Excerpt Field -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="excerpt">文章摘要</label>
|
||
|
|
<textarea
|
||
|
|
id="excerpt"
|
||
|
|
v-model="form.excerpt"
|
||
|
|
placeholder="请输入文章摘要"
|
||
|
|
rows="3"
|
||
|
|
></textarea>
|
||
|
|
<div class="error-message" v-if="errors.excerpt">
|
||
|
|
{{ errors.excerpt }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Content Field -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="content">文章内容</label>
|
||
|
|
<textarea
|
||
|
|
id="content"
|
||
|
|
v-model="form.content"
|
||
|
|
placeholder="请输入文章内容"
|
||
|
|
rows="10"
|
||
|
|
required
|
||
|
|
></textarea>
|
||
|
|
<div class="error-message" v-if="errors.content">
|
||
|
|
{{ errors.content }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Is Published Field -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="isPublished">发布状态</label>
|
||
|
|
<CustomSelect
|
||
|
|
v-model="form.isPublished"
|
||
|
|
:options="publishStatusOptions"
|
||
|
|
placeholder="请选择发布状态"
|
||
|
|
/>
|
||
|
|
<div class="error-message" v-if="errors.isPublished">
|
||
|
|
{{ errors.isPublished }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Submit Buttons -->
|
||
|
|
<div class="form-actions">
|
||
|
|
<button type="button" class="cancel-btn" @click="handleCancel">
|
||
|
|
取消
|
||
|
|
</button>
|
||
|
|
<button type="submit" class="submit-btn" :disabled="isSubmitting">
|
||
|
|
{{ isSubmitting ? '提交中...' : (isEditing ? '更新文章' : '创建文章') }}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, reactive, onMounted, computed } from 'vue'
|
||
|
|
import { useRouter, useRoute } from 'vue-router'
|
||
|
|
import { useToast } from '../../composables/useToast'
|
||
|
|
import { createPost, updatePost, fetchPost } from '../../services/api'
|
||
|
|
import CustomSelect from '../../components/CustomSelect.vue'
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
const route = useRoute()
|
||
|
|
const toast = useToast()
|
||
|
|
|
||
|
|
// Form state
|
||
|
|
const isSubmitting = ref(false)
|
||
|
|
const isEditing = computed(() => !!route.params.id)
|
||
|
|
const errors = reactive<Record<string, string>>({})
|
||
|
|
|
||
|
|
// Form data
|
||
|
|
const form = reactive({
|
||
|
|
title: '',
|
||
|
|
category: '',
|
||
|
|
date: new Date().toISOString().split('T')[0],
|
||
|
|
excerpt: '',
|
||
|
|
content: '',
|
||
|
|
isPublished: 1
|
||
|
|
})
|
||
|
|
|
||
|
|
// Select options
|
||
|
|
const publishStatusOptions = [
|
||
|
|
{ value: 1, label: '已发布' },
|
||
|
|
{ value: 0, label: '草稿' }
|
||
|
|
]
|
||
|
|
|
||
|
|
// Validation function
|
||
|
|
const validateForm = (): boolean => {
|
||
|
|
// Reset errors
|
||
|
|
Object.keys(errors).forEach(key => delete errors[key])
|
||
|
|
|
||
|
|
let isValid = true
|
||
|
|
|
||
|
|
// Validate title
|
||
|
|
if (!form.title.trim()) {
|
||
|
|
errors.title = '文章标题不能为空'
|
||
|
|
isValid = false
|
||
|
|
}
|
||
|
|
|
||
|
|
// Validate category
|
||
|
|
if (!form.category.trim()) {
|
||
|
|
errors.category = '文章分类不能为空'
|
||
|
|
isValid = false
|
||
|
|
}
|
||
|
|
|
||
|
|
// Validate date
|
||
|
|
if (!form.date) {
|
||
|
|
errors.date = '发布日期不能为空'
|
||
|
|
isValid = false
|
||
|
|
}
|
||
|
|
|
||
|
|
// Validate content
|
||
|
|
if (!form.content.trim()) {
|
||
|
|
errors.content = '文章内容不能为空'
|
||
|
|
isValid = false
|
||
|
|
}
|
||
|
|
|
||
|
|
return isValid
|
||
|
|
}
|
||
|
|
|
||
|
|
// Submit handler
|
||
|
|
const handleSubmit = async () => {
|
||
|
|
if (!validateForm()) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
isSubmitting.value = true
|
||
|
|
|
||
|
|
try {
|
||
|
|
if (isEditing.value) {
|
||
|
|
// Update existing post
|
||
|
|
await updatePost(route.params.id as string, form)
|
||
|
|
toast.success('文章更新成功')
|
||
|
|
} else {
|
||
|
|
// Create new post
|
||
|
|
await createPost(form)
|
||
|
|
toast.success('文章创建成功')
|
||
|
|
}
|
||
|
|
|
||
|
|
// Redirect to posts list
|
||
|
|
router.push('/admin/posts')
|
||
|
|
} catch (error: any) {
|
||
|
|
console.error('Error submitting form:', error)
|
||
|
|
toast.error(error.message || (isEditing.value ? '更新文章失败' : '创建文章失败'))
|
||
|
|
} finally {
|
||
|
|
isSubmitting.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Cancel handler
|
||
|
|
const handleCancel = () => {
|
||
|
|
router.push('/admin/posts')
|
||
|
|
}
|
||
|
|
|
||
|
|
// Lifecycle
|
||
|
|
onMounted(async () => {
|
||
|
|
// If editing, load post data from API
|
||
|
|
if (isEditing.value) {
|
||
|
|
try {
|
||
|
|
const postId = route.params.id as string
|
||
|
|
const post = await fetchPost(postId)
|
||
|
|
|
||
|
|
// Populate form with post data
|
||
|
|
form.title = post.title
|
||
|
|
form.category = post.category
|
||
|
|
form.date = post.date
|
||
|
|
form.excerpt = post.excerpt || ''
|
||
|
|
form.content = post.content || ''
|
||
|
|
form.isPublished = post.isPublished === 1 ? 1 : 0
|
||
|
|
} catch (error: any) {
|
||
|
|
console.error('Failed to fetch post data:', error)
|
||
|
|
toast.error('加载文章数据失败: ' + (error.message || '未知错误'))
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.post-form-container {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-title {
|
||
|
|
font-size: 1.75rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #d4b383;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-container {
|
||
|
|
background: rgba(255, 255, 255, 0.05);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
-webkit-backdrop-filter: blur(10px);
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-form {
|
||
|
|
max-width: 800px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group {
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group label {
|
||
|
|
display: block;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
font-weight: 500;
|
||
|
|
color: rgba(255, 255, 255, 0.8);
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group input,
|
||
|
|
.form-group textarea,
|
||
|
|
.form-group select {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0.75rem;
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
background: rgba(255, 255, 255, 0.05);
|
||
|
|
color: white;
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
resize: vertical;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group input::placeholder,
|
||
|
|
.form-group textarea::placeholder,
|
||
|
|
.form-group select::placeholder {
|
||
|
|
color: rgba(255, 255, 255, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group input:focus,
|
||
|
|
.form-group textarea:focus,
|
||
|
|
.form-group select:focus {
|
||
|
|
outline: none;
|
||
|
|
border-color: #d4b383;
|
||
|
|
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.error-message {
|
||
|
|
color: #ef4444;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
margin-top: 0.25rem;
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-actions {
|
||
|
|
display: flex;
|
||
|
|
gap: 1rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cancel-btn {
|
||
|
|
padding: 0.75rem 1.5rem;
|
||
|
|
background: rgba(255, 255, 255, 0.1);
|
||
|
|
color: rgba(255, 255, 255, 0.8);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
cursor: pointer;
|
||
|
|
font-weight: 500;
|
||
|
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cancel-btn:hover {
|
||
|
|
background: rgba(212, 179, 131, 0.1);
|
||
|
|
border-color: #d4b383;
|
||
|
|
color: #d4b383;
|
||
|
|
}
|
||
|
|
|
||
|
|
.submit-btn {
|
||
|
|
padding: 0.75rem 1.5rem;
|
||
|
|
background-color: #d4b383;
|
||
|
|
color: #050505;
|
||
|
|
border: 1px solid #d4b383;
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
cursor: pointer;
|
||
|
|
font-weight: 500;
|
||
|
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.submit-btn:hover:not(:disabled) {
|
||
|
|
background-color: transparent;
|
||
|
|
color: #d4b383;
|
||
|
|
transform: translateY(-1px);
|
||
|
|
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.submit-btn:disabled {
|
||
|
|
opacity: 0.5;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive Design */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.form-container {
|
||
|
|
padding: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-actions {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cancel-btn,
|
||
|
|
.submit-btn {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|