first commit

src/pages/admin/articles/components/CategoryEditDialog.vue

@@ -0,0 +1,160 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="isEdit ? '编辑分类' : '新增分类'"
+    width="500px"
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+    >
+      <el-form-item label="分类名称" prop="name">
+        <el-input
+          v-model="form.name"
+          placeholder="请输入分类名称"
+          maxlength="100"
+          show-word-limit
+        />
+      </el-form-item>
+
+      <el-form-item label="分类描述" prop="description">
+        <el-input
+          v-model="form.description"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入分类描述"
+          maxlength="500"
+          show-word-limit
+        />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="flex justify-end space-x-3">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="handleSubmit">
+          {{ isEdit ? '更新' : '创建' }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { articleApi } from '@/api'
+import { ElMessage } from 'element-plus'
+import { computed, reactive, ref, watch } from 'vue'
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  category: {
+    type: Object,
+    default: null
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'success'])
+
+// 响应式数据
+const formRef = ref(null)
+const loading = ref(false)
+
+// 表单数据
+const form = reactive({
+  name: '',
+  description: ''
+})
+
+// 表单验证规则
+const rules = {
+  name: [
+    { required: true, message: '请输入分类名称', trigger: 'blur' },
+    { min: 1, max: 100, message: '名称长度在 1 到 100 个字符', trigger: 'blur' }
+  ],
+  description: [
+    { max: 500, message: '描述长度不能超过 500 个字符', trigger: 'blur' }
+  ]
+}
+
+// 计算属性
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+const isEdit = computed(() => !!props.category)
+
+// 重置表单
+const resetForm = () => {
+  Object.assign(form, {
+    name: '',
+    description: ''
+  })
+
+  if (formRef.value) {
+    formRef.value.clearValidate()
+  }
+}
+
+// 监听分类数据变化，初始化表单
+watch(() => props.category, (newCategory) => {
+  if (newCategory) {
+    // 编辑模式，填充表单数据
+    Object.assign(form, {
+      name: newCategory.name || '',
+      description: newCategory.description || ''
+    })
+  } else {
+    // 新增模式，重置表单
+    resetForm()
+  }
+}, { immediate: true })
+
+// 关闭对话框
+const handleClose = () => {
+  dialogVisible.value = false
+  resetForm()
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  if (!formRef.value) return
+
+  try {
+    await formRef.value.validate()
+
+    loading.value = true
+
+    if (isEdit.value) {
+      // 编辑模式
+      await articleApi.updateCategory(props.category.id, form)
+      ElMessage.success('分类更新成功')
+    } else {
+      // 新增模式
+      await articleApi.createCategory(form)
+      ElMessage.success('分类创建成功')
+    }
+
+    emit('success')
+    handleClose()
+  } catch (error) {
+    if (error.message) {
+      ElMessage.error(error.message)
+    } else {
+      ElMessage.error(isEdit.value ? '更新分类失败' : '创建分类失败')
+    }
+    console.error('提交表单失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>