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>

            <div class="adm-table-wrap">
<el-table :data="list" border stripe v-loading="loading" empty-text="暂无数据" style="width:100%" height="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="240" 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="showVersions(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>
      </div>

      <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>

    <!-- 版本历史弹窗 -->
    <el-dialog title="版本历史" :visible.sync="versionDialog.visible" width="900px">
      <div style="margin-bottom:12px; color:#666; font-size:13px;">
        当前提示词: <strong>{{ versionDialog.promptKey }}</strong> — {{ versionDialog.title }}
      </div>
      <el-table :data="versionDialog.versions" border stripe size="small" max-height="400">
        <el-table-column prop="version" label="版本号" width="80" align="center">
          <template slot-scope="{ row }">
            <el-tag :type="row.version === currentVersion ? "primary" : "default"" size="mini">
              v{{ row.version }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作人" width="100" />
        <el-table-column prop="remark" label="说明" min-width="120" show-overflow-tooltip />
        <el-table-column prop="createdAt" label="时间" width="160">
          <template slot-scope="{ row }">{{ formatTime(row.createdAt) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="{ row }">
            <el-button 
              v-if="row.version !== currentVersion"
              type="text" size="small" 
              @click="doRollback(versionDialog.promptKey, row.version, row.title)"
              :disabled="row.version === currentVersion">
              回滚到 v{{ row.version }}
            </el-button>
            <span v-else style="color:#909399; font-size:12px;">当前版本</span>
          </template>
        </el-table-column>
      <div slot="footer">
        <el-button size="small" @click="versionDialog.visible = false">关闭</el-button>
      </div>
    </el-dialog>
  
  </el-table>
  </div>
</template>

<script>
import ListStateMixin from '@/mixins/ListStateMixin'
import { getPromptList, savePrompt, resetPrompt, deletePrompt, listVersions, rollbackPrompt } from "@/api/systemPrompt"

export default {
  name: 'SystemPromptManagement',
  mixins: [ListStateMixin],
  data() {
    return {
      list: [],
      loading: false,
      filters: { keyword: "" },
      page: 1,
      size: 20,
      total: 0,
      dialog: { visible: false, isEdit: false, form: {} },
      saving: false,
      previewVisible: false,
      previewContent: "",
      versionDialog: { visible: false, promptKey: "", title: "", versions: [], currentVersion: 0 }
    }
  },
  created() {
    this.fetchList()
  },
  methods: {

    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
    },
    async showVersions(row) {
      this.versionDialog.promptKey = row.promptKey
      this.versionDialog.title = row.title
      this.versionDialog.currentVersion = row.version
      this.versionDialog.versions = []
      this.versionDialog.visible = true
      try {
        const res = await listVersions(row.promptKey)
        if (res && res.data) {
          this.versionDialog.versions = res.data
        }
      } catch (e) {
        this.$message.error("加载版本历史失败")
      }
    },
    async doRollback(promptKey, targetVersion, targetTitle) {
      this.$confirm(`确定要回滚到 v${targetVersion}（${targetTitle}）吗？当前版本将被备份后恢复。`, "确认回滚", { type: "warning" }).then(async () => {
        try {
          await rollbackPrompt(promptKey, targetVersion)
          this.$message.success("回滚成功")
          this.versionDialog.visible = false
          this.fetchList()
        } catch (e) {
          this.$message.error("回滚失败")
        }
      }).catch(() => {})
    },
    handlePageChange(page) {
      this.page = page
      this.fetchList()
    }
  }
}
</script>

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