nl-blogs/client/src/pages/admin/PostForm.vue

<template>
  <div class="w-full animate-reveal">
    <div class="flex items-center justify-between mb-6">
      <h1 class="text-2xl font-serif italic text-white">{{ isEditing ? '编辑文章' : '新建文章' }}</h1>
      <div class="flex gap-3">
        <button type="button" class="admin-btn-secondary" @click="handleCancel">
          取消
        </button>
        <button type="button" class="admin-btn-primary" @click="handleSubmit" :disabled="isSubmitting">
          {{ isSubmitting ? '提交中...' : (isEditing ? '更新文章' : '发布文章') }}
        </button>
      </div>
    </div>

    <form @submit.prevent="handleSubmit" class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- Left Column: Main Content -->
      <div class="lg:col-span-2 space-y-6">
        <div class="admin-card p-6 space-y-6">
          <!-- Title Field -->
          <div class="space-y-2">
            <label for="title" class="block text-sm font-medium text-art-muted uppercase tracking-wider">文章标题</label>
            <input
                type="text"
                id="title"
                v-model="form.title"
                class="admin-input text-lg font-medium placeholder-white/20"
                placeholder="请输入文章标题"
                required
            />
            <div class="text-art-error text-xs mt-1" v-if="errors.title">
              {{ errors.title }}
            </div>
          </div>
          
          <!-- Content Field -->
          <div class="space-y-2">
            <label class="block text-sm font-medium text-art-muted uppercase tracking-wider">文章内容</label>
            <div class="border border-white/10 rounded-lg overflow-hidden focus-within:border-art-accent focus-within:ring-1 focus-within:ring-art-accent transition-all duration-200">
              <MdEditor
                  v-model="form.content"
                  theme="dark"
                  :preview="false"
                  placeholder="请输入 Markdown 内容..."
                  class="custom-md-editor"
              />
            </div>
            <div class="text-art-error text-xs mt-1" v-if="errors.content">
              {{ errors.content }}
            </div>
          </div>
          
          <!-- Excerpt Field -->
          <div class="space-y-2">
            <label for="excerpt" class="block text-sm font-medium text-art-muted uppercase tracking-wider">文章摘要</label>
            <textarea
                id="excerpt"
                v-model="form.excerpt"
                rows="4"
                class="admin-input resize-none"
                placeholder="请输入文章摘要 (可选)"
            ></textarea>
            <div class="text-art-error text-xs mt-1" v-if="errors.excerpt">
              {{ errors.excerpt }}
            </div>
          </div>
        </div>
      </div>
      
      <!-- Right Column: Meta & Settings -->
      <div class="space-y-6">
        <div class="admin-card p-6 space-y-6 sticky top-6">
          <h3 class="text-sm font-medium text-white border-b border-white/5 pb-4 mb-4 flex items-center gap-2">
            <span class="text-art-accent">⚙️</span> 发布设置
          </h3>
           
          <!-- Category Field -->
          <div class="space-y-2">
            <label for="category" class="block text-xs font-medium text-art-muted uppercase tracking-wider">分类</label>
            <input
                type="text"
                id="category"
                v-model="form.category"
                class="admin-input"
                placeholder="文章分类"
                required
            />
            <div class="text-art-error text-xs mt-1" v-if="errors.category">
              {{ errors.category }}
            </div>
          </div>
          
          <!-- Date Field -->
          <div class="space-y-2">
            <label for="date" class="block text-xs font-medium text-art-muted uppercase tracking-wider">发布日期</label>
            <input
                type="date"
                id="date"
                v-model="form.date"
                class="admin-input"
                required
            />
            <div class="text-art-error text-xs mt-1" v-if="errors.date">
              {{ errors.date }}
            </div>
          </div>
          
          <!-- Is Published Field -->
          <div class="space-y-2">
            <label for="isPublished" class="block text-xs font-medium text-art-muted uppercase tracking-wider">状态</label>
            <CustomSelect
                v-model="form.isPublished"
                :options="publishStatusOptions"
                placeholder="请选择发布状态"
            />
            <div class="text-art-error text-xs mt-1" v-if="errors.isPublished">
              {{ errors.isPublished }}
            </div>
          </div>
          
          <!-- Action Buttons (Mobile only, hidden on large screens) -->
          <div class="lg:hidden pt-4 border-t border-white/5 flex flex-col gap-3">
             <button type="button" class="admin-btn-primary w-full" @click="handleSubmit" :disabled="isSubmitting">
               {{ isSubmitting ? '提交中...' : (isEditing ? '更新文章' : '发布文章') }}
             </button>
             <button type="button" class="admin-btn-secondary w-full" @click="handleCancel">取消</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
// 引入 md-editor-v3
import { MdEditor } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'

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.showToast('文章更新成功', 'success')
    } else {
      // Create new post
      await createPost(form)
      toast.showToast('文章创建成功', 'success')
    }

    // Redirect to posts list
    router.push('/admin/posts')
  } catch (error: any) {
    console.error('Error submitting form:', error)
    toast.showToast(error.message || (isEditing.value ? '更新文章失败' : '创建文章失败'), 'error')
  } 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.showToast('加载文章数据失败: ' + (error.message || '未知错误'), 'error')
    }
  }
})
</script>

<style scoped>
:deep(.custom-md-editor) {
  background-color: transparent !important;
  --md-bk-color: transparent !important;
  --md-color: white !important;
  --md-border-color: transparent !important;
  height: 600px;
}

:deep(.md-editor-toolbar-wrapper) {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

:deep(.md-editor-content) {
  background-color: transparent !important;
}

:deep(.md-editor-footer) {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}
</style>