RunForge-Frontend/src/pages/admin/aiChat/list.vue

<template>
  <div class="store-page">
    <Breadcrumb />
    <a-card title="AI 对话管理">
      <AppQueryFilter>
        <a-row class="query-row">
          <a-col :flex="'1000px'" class="query-main">
            <a-form class="app-query-form" :model="queryData" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }" label-align="left">
              <a-row :gutter="16">
                <a-col :span="6">
                  <a-form-item field="channel" label="消息通道">
                    <a-input v-model="queryData.channel" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item field="id" label="会话编号">
                    <a-input-number v-model="queryData.id" :precision="0" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item field="username" label="用户名">
                    <a-input v-model="queryData.username" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item field="create_user" label="用户UUID">
                    <a-input v-model="queryData.create_user" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item field="state" label="状态">
                    <a-select v-model="queryData.state">
                      <a-option :value="-1">全部</a-option>
                      <a-option :value="1">正常</a-option>
                      <a-option :value="2">已删除</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item field="queryTime" label="更新时间">
                    <a-range-picker v-model="queryData.queryTime" show-time value-format="x" popup-container="body" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
          <a-divider class="query-divider" style="height: 84px" direction="vertical" />
          <a-col :flex="1" class="app-query-actions">
            <a-space class="query-actions-space" direction="vertical" :size="18">
              <a-button type="primary" @click="search">
                <template #icon><icon-search /></template>
                搜索
              </a-button>
              <a-button @click="reset">
                <template #icon><icon-refresh /></template>
                重置
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </AppQueryFilter>

      <a-table
        class="table"
        :bordered="false"
        :data="data"
        :loading="loading"
        :columns="columns"
        :scroll="{ x: 1240 }"
        :pagination="{
          showPageSize: true,
          showJumper: true,
          showTotal: true,
          pageSize: pagination.pagesize,
          current: pagination.current,
          total: pagination.total
        }"
        @page-change="handlePageChange"
        @page-size-change="handlePageSizeChange"
      >
        <template #state="{ record }">
          <a-tag :color="record.state === 1 ? 'green' : 'gray'">{{ record.state === 1 ? '正常' : '已删除' }}</a-tag>
        </template>
        <template #last_message_time="{ record }">
          {{ formatTime(record.last_message_time) }}
        </template>
        <template #update_time="{ record }">
          {{ formatTime(record.update_time) }}
        </template>
        <template #optional="{ record }">
          <a-button @click="$router.push(`/aiManage/aiChat/detail/${record.id}`)">查看详情</a-button>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { Notification } from '@arco-design/web-vue'
import { adminListAIChatConversations } from '@/api/aiChat'
import { useResponsiveTable } from '@/hooks/useResponsiveTable'

const pagination = reactive({ current: 1, pagesize: 20, total: 0 })
const queryData = reactive({ id: '', channel: '', username: '', create_user: '', state: -1, queryTime: [] })
const data = ref([])
const loading = ref(false)

const columnDefs = [
  { title: '消息来源', dataIndex: 'channel', width: 100 },
  { title: '会话ID', dataIndex: 'id', width: 100 },
  { title: '标题', dataIndex: 'title', width: 180, ellipsis: true, tooltip: true },
  { title: '用户', dataIndex: 'username', width: 140, ellipsis: true, tooltip: true },
  { title: '最后消息', dataIndex: 'last_message_preview', width: 260, ellipsis: true, tooltip: true },
  { title: '最后消息时间', slotName: 'last_message_time', width: 170 },
  { title: '更新时间', slotName: 'update_time', width: 170 },
  { title: '状态', slotName: 'state', width: 100 },
  { title: '操作', slotName: 'optional', width: 120, fixed: 'right' }
]
const { useTableColumns } = useResponsiveTable()
const columns = useTableColumns(columnDefs)

const formatTime = (time) => time ? new Date(Number(time)).toLocaleString('zh-CN', { hour12: false }) : '-'

const fetchList = async () => {
  loading.value = true
  try {
    const res = await adminListAIChatConversations({
      ...queryData,
      current: pagination.current,
      pagesize: pagination.pagesize
    })
    if (!res || res.code !== 0) return Notification.error({ title: '获取 AI 对话失败', content: res?.msg || '请稍后再试' })
    data.value = res.data || []
    pagination.total = res.pagination?.total || 0
  } finally {
    loading.value = false
  }
}

const search = () => {
  pagination.current = 1
  fetchList()
}

const reset = () => {
  queryData.id = ''
  queryData.channel = ''
  queryData.username = ''
  queryData.create_user = ''
  queryData.state = -1
  queryData.queryTime = []
  search()
}

const handlePageChange = (page) => {
  pagination.current = page
  fetchList()
}

const handlePageSizeChange = (size) => {
  pagination.pagesize = size
  pagination.current = 1
  fetchList()
}

onMounted(fetchList)
</script>

<style scoped>
.query-row {
  margin-bottom: 10px;
}

.table {
  margin-top: 15px;
}

@media (max-width: 768px) {
  .query-row {
    display: block;
  }

  .query-divider {
    display: none;
  }

  .query-actions-space {
    margin-top: 4px;
    flex-direction: row !important;
    gap: 10px !important;
  }
}
</style>