sionrui/frontend/app/web-gold/src/views/content-style/components/SavePromptModal.vue

<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { UserPromptApi } from '@/api/userPrompt'
import { useUserStore } from '@/stores/user'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  promptContent: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:visible', 'success'])

const userStore = useUserStore()
const savingPrompt = ref(false)
const savePromptForm = ref({
  name: '',
  category: '',
  content: '',
})

watch(() => props.visible, (newVal) => {
  if (newVal) {
    savePromptForm.value = {
      name: '',
      category: '',
      content: props.promptContent,
    }
  }
})

async function handleSave() {
  if (!savePromptForm.value.name.trim()) {
    message.warning('请输入提示词名称')
    return
  }
  
  if (!savePromptForm.value.content.trim()) {
    message.warning('提示词内容不能为空')
    return
  }
  
  const userId = Number(userStore.userId)
  if (!userId) {
    message.error('无法获取用户ID，请先登录')
    return
  }
  
  savingPrompt.value = true
  try {
    // 确保 content 字段有值
    const content = savePromptForm.value.content?.trim() || ''
    if (!content) {
      message.error('提示词内容不能为空')
      savingPrompt.value = false
      return
    }
    
    const payload = {
      userId: userId,
      name: savePromptForm.value.name.trim(),
      content: content, // 确保 content 有值
      category: savePromptForm.value.category?.trim() || null,
      isPublic: false,
      sort: 0,
      useCount: 0,
      status: 1,
    }
    
    console.log('[SavePromptModal] 发送请求参数:', payload)
    
    const response = await UserPromptApi.createUserPrompt(payload)
    
    if (response && (response.code === 0 || response.code === 200)) {
      message.success('提示词保存成功')
      emit('update:visible', false)
      emit('success')
      // 重置表单
      savePromptForm.value = {
        name: '',
        category: '',
        content: '',
      }
    } else {
      throw new Error(response?.msg || response?.message || '保存失败')
    }
  } catch (error) {
    console.error('保存提示词失败:', error)
    message.error(error?.message || '保存失败，请稍后重试')
  } finally {
    savingPrompt.value = false
  }
}

function handleCancel() {
  emit('update:visible', false)
}
</script>

<template>
  <a-modal
    :open="visible"
    title="保存提示词"
    :width="600"
    :maskClosable="false"
    @cancel="handleCancel">
    <a-form :model="savePromptForm" layout="vertical">
      <a-form-item label="提示词名称" required>
        <a-input 
          v-model:value="savePromptForm.name" 
          placeholder="请输入提示词名称"
          :maxlength="50"
          show-count />
      </a-form-item>
      <a-form-item label="分类/标签">
        <a-input 
          v-model:value="savePromptForm.category" 
          placeholder="可选：输入分类或标签"
          :maxlength="20" />
      </a-form-item>
      <a-form-item label="提示词内容">
        <a-textarea 
          v-model:value="savePromptForm.content" 
          :rows="8" 
          :readonly="true"
          placeholder="提示词内容" />
      </a-form-item>
    </a-form>
    
    <template #footer>
      <a-space>
        <a-button @click="handleCancel">取消</a-button>
        <a-button 
          type="primary" 
          :loading="savingPrompt"
          :disabled="!savePromptForm.name.trim()"
          @click="handleSave">保存</a-button>
      </a-space>
    </template>
  </a-modal>
</template>