cfc/cfc-web/src/views/admin/SystemPromptManagement.vue

<template>
  <div class="system-prompt-page">
    <el-card>
      <div slot="header" class="clearfix">
        <span>系统提示词管理</span>
        <div style="float:right; display:flex; gap:10px;">
          <el-button size="mini" type="info" @click="fetchList">刷新</el-button>
          <el-button size="mini" type="primary" @click="showEdit(null)">新增提示词</el-button>
        </div>
      </div>

      <el-form :model="filters" inline size="small" style="margin-bottom:16px;">
        <el-form-item label="关键词">
          <el-input v-model="filters.keyword" placeholder="搜索标题或键名" clearable @input="fetchList" />
        </el-form-item>
      </el-form>

      <el-table :data="list" border stripe v-loading="loading" empty-text="暂无数据" style="width:100%">
        <el-table-column prop="promptKey" label="提示词键" width="160" />
        <el-table-column prop="title" label="标题" width="140" />
        <el-table-column prop="content" label="内容" min-width="300" show-overflow-tooltip />
        <el-table-column prop="version" label="版本" width="60" />
        <el-table-column prop="status" label="状态" width="70">
          <template slot-scope="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">
              {{ row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" width="160">
          <template slot-scope="{ row }">
            {{ row.updatedAt ? formatTime(row.updatedAt) : '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="showEdit(row)">编辑</el-button>
            <el-button type="text" size="small" @click="showPreview(row)">预览</el-button>
            <el-button type="text" size="small" @click="resetToDefault(row)">重置</el-button>
            <el-button type="text" size="small" style="color:#f56c6c" @click="deleteRow(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 16px; text-align: right"
        :current-page="page"
        :page-size="size"
        :total="total"
        layout="total, prev, pager, next"
        @current-change="handlePageChange"
      />
    </el-card>

    <!-- 编辑弹窗 -->
    <el-dialog :visible.sync="dialog.visible" :title="dialog.isEdit ? '编辑提示词' : '新增提示词'" width="700px" :close-on-click-modal="false">
      <el-form :model="dialog.form" label-width="100px" size="small">
        <el-form-item label="提示词键" :required="!dialog.isEdit">
          <el-input v-model="dialog.form.promptKey" placeholder="如 health_coach（英文下划线）" :disabled="dialog.isEdit" />
        </el-form-item>
        <el-form-item label="标题" required>
          <el-input v-model="dialog.form.title" placeholder="如 儿童健康教练" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="dialog.form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内容" required>
          <el-input v-model="dialog.form.content" type="textarea" :rows="18" placeholder="输入系统提示词内容..." />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="dialog.form.remark" placeholder="用途说明" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="small" @click="dialog.visible = false">取消</el-button>
        <el-button size="small" type="primary" :loading="saving" @click="savePrompt">保存</el-button>
      </div>
    </el-dialog>

    <!-- 预览弹窗 -->
    <el-dialog title="提示词预览" :visible.sync="previewVisible" width="600px">
      <el-card shadow="never" style="white-space: pre-wrap; font-family: monospace; font-size: 13px; line-height: 1.8; background: #fafafa;">
        {{ previewContent }}
      </el-card>
      <div slot="footer">
        <el-button size="small" @click="previewVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPromptList, savePrompt, resetPrompt, deletePrompt } from '@/api/systemPrompt'

export default {
  name: 'SystemPromptManagement',
  data() {
    return {
      list: [],
      loading: false,
      filters: { keyword: '' },
      page: 1,
      size: 20,
      total: 0,
      dialog: { visible: false, isEdit: false, form: {} },
      saving: false,
      previewVisible: false,
      previewContent: ''
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    formatTime(ts) {
      if (!ts) return ''
      const d = new Date(ts)
      return d.toLocaleString('zh-CN', { hour12: false })
    },
    async fetchList() {
      this.loading = true
      try {
        const res = await getPromptList({ keyword: this.filters.keyword, page: this.page, size: this.size })
        if (res && res.data) {
          this.list = res.data.records || []
          this.total = res.data.total || 0
        }
      } finally {
        this.loading = false
      }
    },
    showEdit(row) {
      this.dialog.isEdit = !!row
      this.dialog.form = row ? Object.assign({}, row) : { promptKey: '', title: '', content: '', status: 1, remark: '' }
      this.dialog.visible = true
    },
    async savePrompt() {
      const form = this.dialog.form
      if (!form.promptKey || !form.title || !form.content) {
        this.$message.warning('请填写完整')
        return
      }
      this.saving = true
      try {
        await savePrompt(form)
        this.$message.success('保存成功')
        this.dialog.visible = false
        this.fetchList()
      } finally {
        this.saving = false
      }
    },
    async resetToDefault(row) {
      this.$confirm('确定要重置为出厂默认内容吗？', '提示', { type: 'warning' }).then(async () => {
        await resetPrompt(row.promptKey)
        this.$message.success('已重置')
        this.fetchList()
      }).catch(() => {})
    },
    deleteRow(row) {
      this.$confirm('确定要删除该提示词吗？', '提示', { type: 'warning' }).then(async () => {
        await deletePrompt(row.id)
        this.$message.success('删除成功')
        this.fetchList()
      }).catch(() => {})
    },
    showPreview(row) {
      this.previewContent = row.content
      this.previewVisible = true
    },
    handlePageChange(page) {
      this.page = page
      this.fetchList()
    }
  }
}
</script>

<style scoped>
.system-prompt-page {
  padding: 0;
}
</style>