RAG/src/main/resources/static/components/ConversationManager.js

/**
 * 💬 会话管理组件
 * 展示会话列表、消息详情、删除、导出功能
 */
import { ref } from 'vue'
import { listConversations, deleteConversation, getConversationMessages, getConversationStats, exportConversation, getRoleList } from '../js/api.js'
import { toast, formatDate } from '../js/utils.js'

export default {
  template: `
    <div class="card">
      <h2>会话列表</h2>

      <!-- 统计卡片 -->
      <div class="stat-grid" v-if="stats" style="margin-bottom:16px;">
        <div class="stat-card">
          <div class="number">{{ stats.totalConversations || 0 }}</div>
          <div class="label">总会话数</div>
        </div>
        <div class="stat-card">
          <div class="number">{{ stats.totalMessages || 0 }}</div>
          <div class="label">总消息数</div>
        </div>
        <div class="stat-card">
          <div class="number">{{ stats.todayConversations || 0 }}</div>
          <div class="label">今日会话</div>
        </div>
        <div class="stat-card">
          <div class="number">{{ stats.todayMessages || 0 }}</div>
          <div class="label">今日消息</div>
        </div>
      </div>

      <!-- 搜索栏 -->
      <div class="input-row">
        <input type="text" class="input" v-model="keyword" placeholder="搜索会话ID或消息内容..." @keyup.enter="load(1)">
        <input type="text" class="input" v-model="accountFilter" placeholder="外部用户ID(accountId)" @keyup.enter="load(1)">
        <select class="select" v-model="roleFilter">
          <option value="">全部角色</option>
          <option v-for="role in roles" :key="role.id" :value="role.id">{{ role.name }}</option>
        </select>
        <button class="btn btn-primary btn-sm" @click="load(1)">搜索</button>
        <button class="btn btn-outline btn-sm" @click="load()">刷新</button>
      </div>

      <!-- 会话列表表格 -->
      <div style="overflow-x:auto;">
        <table class="data-table">
          <thead>
            <tr>
              <th>会话ID</th>
              <th>外部用户ID</th>
              <th>角色</th>
              <th>消息数</th>
              <th>最后消息时间</th>
              <th>最后消息预览</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-if="conversations.length === 0">
              <td colspan="7" style="text-align:center;color:var(--sub);">暂无会话记录</td>
            </tr>
            <tr v-for="c in conversations" :key="c.conversationId">
              <td>
                <code style="font-size:12px;background:#f3f4f6;padding:2px 6px;border-radius:4px;">{{ c.conversationId }}</code>
              </td>
              <td>{{ c.accountId || '-' }}</td>
              <td>{{ c.roleName || '-' }}</td>
              <td>{{ c.messageCount }}</td>
              <td>{{ formatDate(c.lastMessageTime) }}</td>
              <td style="max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                {{ c.lastMessagePreview || '-' }}
              </td>
              <td>
                <button class="btn btn-sm btn-outline" @click="viewMessages(c.conversationId)">查看消息</button>
                <button class="btn btn-sm btn-primary" @click="downloadExport(c.conversationId)">导出</button>
                <button class="btn btn-sm btn-danger" @click="remove(c.conversationId)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="pagination" v-if="pages > 1">
        <button :disabled="page <= 1" @click="load(page - 1)">上一页</button>
        <template v-for="i in pages" :key="i">
          <button v-if="i === 1 || i === pages || (i >= page - 2 && i <= page + 2)"
            :class="{ active: i === page }" @click="load(i)">{{ i }}</button>
          <span v-else-if="i === page - 3 || i === page + 3" style="padding:6px;">...</span>
        </template>
        <button :disabled="page >= pages" @click="load(page + 1)">下一页</button>
      </div>
    </div>

    <!-- 消息详情弹窗 -->
    <div class="modal-overlay" :class="{ active: messageModal.visible }" @click.self="closeMessageModal">
      <div class="modal-box" style="max-width:900px;">
        <button class="modal-close" @click="closeMessageModal">×</button>
        <h2>会话消息详情</h2>
        <p style="font-size:13px;color:var(--sub);margin-bottom:12px;">
          会话ID: <code>{{ messageModal.conversationId }}</code>
          <span v-if="messageModal.roleName"> · 角色：{{ messageModal.roleName }}</span>
          · 共 {{ messageModal.messages.length }} 条消息
        </p>

        <div v-if="messageModal.messages.length === 0" style="text-align:center;color:var(--sub);padding:40px;">
          暂无消息
        </div>

        <div v-else class="message-list" style="max-height:500px;overflow-y:auto;">
          <div v-for="msg in messageModal.messages" :key="msg.id"
            :class="['msg-item', msg.messageType === 'USER' ? 'msg-user' : msg.messageType === 'ASSISTANT' ? 'msg-assistant' : 'msg-system']"
            style="margin-bottom:12px;padding:12px;border-radius:8px;">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
              <span class="badge" :class="msg.messageType === 'USER' ? 'badge-get' : msg.messageType === 'ASSISTANT' ? 'badge-post' : ''">
                {{ msg.messageType === 'USER' ? '用户' : msg.messageType === 'ASSISTANT' ? 'AI助手' : '系统' }}
              </span>
              <span style="font-size:11px;color:var(--sub);">{{ formatDate(msg.createTime) }}</span>
            </div>
            <div style="font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word;">{{ msg.content }}</div>
          </div>
        </div>
      </div>
    </div>
  `,
  setup() {
    const conversations = ref([])
    const page = ref(1)
    const pages = ref(1)
    const total = ref(0)
    const keyword = ref('')
    const roleFilter = ref('')
    const accountFilter = ref('')
    const roles = ref([])
    const stats = ref(null)

    // 消息详情弹窗
    const messageModal = ref({
      visible: false,
      conversationId: '',
      roleName: '',
      messages: []
    })

    async function load(p = 1) {
      page.value = p
      try {
        const json = await listConversations(
          p, 10,
          keyword.value || undefined,
          accountFilter.value || undefined,
          roleFilter.value || undefined
        )
        if (json.success) {
          conversations.value = json.data || []
          total.value = json.total || 0
          pages.value = json.pages || 1
        } else {
          toast(json.message || '查询失败', 'error')
        }
      } catch (e) {
        toast('加载会话失败：' + e.message, 'error')
      }
    }

    async function loadFilters() {
      try {
        const roleJson = await getRoleList()
        if (roleJson.success) roles.value = roleJson.data || []
      } catch (e) {
        console.error('加载筛选项失败', e)
      }
    }
    async function loadStats() {
      try {
        const json = await getConversationStats()
        if (json.success) {
          stats.value = json.data
        }
      } catch (e) {
        console.error('加载会话统计失败', e)
      }
    }

    async function viewMessages(conversationId) {
      try {
        const json = await getConversationMessages(conversationId)
        if (json.success) {
          messageModal.value.conversationId = conversationId
          messageModal.value.messages = json.data || []
          const current = conversations.value.find(item => item.conversationId === conversationId)
          messageModal.value.roleName = current?.roleName || ''
          messageModal.value.visible = true
        } else {
          toast(json.message || '加载消息失败', 'error')
        }
      } catch (e) {
        toast('加载消息失败：' + e.message, 'error')
      }
    }

    function closeMessageModal() {
      messageModal.value.visible = false
      messageModal.value.conversationId = ''
      messageModal.value.roleName = ''
      messageModal.value.messages = []
    }

    async function remove(conversationId) {
      if (!confirm('确定删除此会话？该会话下的所有消息将被逻辑删除')) return
      try {
        const json = await deleteConversation(conversationId)
        if (json.success) {
          toast(`会话删除成功，共删除 ${json.deletedMessages || 0} 条消息`, 'success')
          load(page.value)
          loadStats()
        } else {
          toast(json.message || '删除失败', 'error')
        }
      } catch (e) {
        toast('删除失败：' + e.message, 'error')
      }
    }

    async function downloadExport(conversationId) {
      try {
        const content = await exportConversation(conversationId)
        const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `conversation_${conversationId}.txt`
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        URL.revokeObjectURL(url)
        toast('导出成功', 'success')
      } catch (e) {
        toast('导出失败：' + e.message, 'error')
      }
    }

    // 初始加载
    loadFilters()
    load()
    loadStats()

    return {
      conversations, page, pages, total, keyword, accountFilter, roleFilter, roles, stats, messageModal,
      load, loadStats, viewMessages, closeMessageModal, remove, downloadExport, formatDate
    }
  }
}