mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-09-17 16:56:38 +08:00
397 lines
12 KiB
Vue
397 lines
12 KiB
Vue
<template>
|
|
<div class="container chat-list">
|
|
<el-tabs v-model="activeName" @tab-change="handleChange">
|
|
<el-tab-pane label="对话列表" name="chat" v-loading="data.chat.loading">
|
|
<div class="handle-box">
|
|
<el-input v-model.number="data.chat.query.user_id" placeholder="账户ID" class="handle-input mr10"
|
|
@keyup="searchChat($event)"></el-input>
|
|
<el-input v-model="data.chat.query.title" placeholder="对话标题" class="handle-input mr10"
|
|
@keyup="searchChat($event)"></el-input>
|
|
<el-date-picker
|
|
v-model="data.chat.query.created_at"
|
|
type="daterange"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
style="margin-right: 10px;width: 200px; position: relative;top:3px;"
|
|
/>
|
|
<el-button type="primary" :icon="Search" @click="fetchChatData">搜索</el-button>
|
|
</div>
|
|
|
|
<el-row>
|
|
<el-table :data="data.chat.items" :row-key="row => row.id" table-layout="auto">
|
|
<el-table-column prop="user_id" label="账户ID"/>
|
|
<el-table-column prop="username" label="账户"/>
|
|
<el-table-column label="图标">
|
|
<template #default="scope">
|
|
<el-avatar :size="30" :src="scope.row.role.icon"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="角色">
|
|
<template #default="scope">
|
|
<span>{{ scope.row.role.name }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="model" label="模型"/>
|
|
<el-table-column prop="title" label="标题"/>
|
|
<el-table-column prop="msg_num" label="消息数量"/>
|
|
<el-table-column prop="token" label="消耗算力"/>
|
|
|
|
<el-table-column label="创建时间">
|
|
<template #default="scope">
|
|
<span>{{ dateFormat(scope.row['created_at']) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="操作" width="180">
|
|
<template #default="scope">
|
|
<el-button size="small" type="primary" @click="showMessages(scope.row)">查看</el-button>
|
|
<el-popconfirm title="确定要删除当前记录吗?" @confirm="removeChat(scope.row)">
|
|
<template #reference>
|
|
<el-button size="small" type="danger">删除</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-row>
|
|
|
|
<div class="pagination">
|
|
<el-pagination v-if="data.chat.total > 0" background
|
|
layout="total,prev, pager, next"
|
|
:hide-on-single-page="true"
|
|
v-model:current-page="data.chat.page"
|
|
v-model:page-size="data.chat.pageSize"
|
|
@current-change="fetchChatData()"
|
|
:total="data.chat.total"/>
|
|
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="消息记录" name="message">
|
|
<div class="handle-box">
|
|
<el-input v-model.number="data.message.query.user_id" placeholder="账户ID" class="handle-input mr10"
|
|
@keyup="searchMessage($event)"></el-input>
|
|
<el-input v-model="data.message.query.content" placeholder="消息内容" class="handle-input mr10"
|
|
@keyup="searchMessage($event)"></el-input>
|
|
<el-input v-model="data.message.query.model" placeholder="模型" class="handle-input mr10"
|
|
@keyup="searchMessage($event)"></el-input>
|
|
<el-date-picker
|
|
v-model="data.message.query.created_at"
|
|
type="daterange"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
style="margin-right: 10px;width: 200px; position: relative;top:3px;"
|
|
/>
|
|
<el-button type="primary" :icon="Search" @click="fetchMessageData">搜索</el-button>
|
|
</div>
|
|
|
|
<el-row>
|
|
<el-table :data="data.message.items" :row-key="row => row.id" table-layout="auto">
|
|
<el-table-column prop="user_id" label="账户ID"/>
|
|
<el-table-column prop="username" label="账户"/>
|
|
<el-table-column label="角色">
|
|
<template #default="scope">
|
|
<el-avatar :size="30" :src="scope.row.icon"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="model" label="模型"/>
|
|
|
|
<el-table-column label="消息内容">
|
|
<template #default="scope">
|
|
<el-text style="width: 200px" truncated @click="showContent(scope.row.content)">
|
|
{{ scope.row.content }}
|
|
</el-text>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="token" label="算力"/>
|
|
|
|
<el-table-column label="创建时间">
|
|
<template #default="scope">
|
|
<span>{{ dateFormat(scope.row['created_at']) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="操作" width="180">
|
|
<template #default="scope">
|
|
<el-button size="small" type="primary" @click="showContent(scope.row.content)">查看</el-button>
|
|
<el-popconfirm title="确定要删除当前记录吗?" @confirm="removeMessage(scope.row)">
|
|
<template #reference>
|
|
<el-button size="small" type="danger">删除</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-row>
|
|
|
|
<div class="pagination">
|
|
<el-pagination v-if="data.message.total > 0" background
|
|
layout="total,prev, pager, next"
|
|
:hide-on-single-page="true"
|
|
v-model:current-page="data.message.page"
|
|
v-model:page-size="data.message.pageSize"
|
|
@current-change="fetchMessageData()"
|
|
:total="data.message.total"/>
|
|
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
|
|
|
|
<el-dialog
|
|
v-model="showContentDialog"
|
|
title="消息详情"
|
|
>
|
|
<div v-html="dialogContent" style="overflow: auto; max-height: 300px"></div>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
v-model="showChatItemDialog"
|
|
title="对话详情"
|
|
>
|
|
<div class="chat-box chat-page">
|
|
<div v-for="item in messages" :key="item.id">
|
|
<chat-prompt
|
|
v-if="item.type==='prompt'"
|
|
:icon="item.icon"
|
|
:created-at="dateFormat(item['created_at'])"
|
|
:tokens="item['tokens']"
|
|
:model="item.model"
|
|
:content="item.content"/>
|
|
<chat-reply v-else-if="item.type==='reply'"
|
|
:read-only="true"
|
|
:data="item"/>
|
|
</div>
|
|
</div><!-- end chat box -->
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {onMounted, ref} from "vue";
|
|
import {httpGet, httpPost} from "@/utils/http";
|
|
import {ElMessage} from "element-plus";
|
|
import {dateFormat, processContent} from "@/utils/libs";
|
|
import {Search} from "@element-plus/icons-vue";
|
|
import 'highlight.js/styles/a11y-dark.css'
|
|
import hl from "highlight.js";
|
|
import ChatPrompt from "@/components/ChatPrompt.vue";
|
|
import ChatReply from "@/components/ChatReply.vue";
|
|
|
|
// 变量定义
|
|
const data = ref({
|
|
"chat": {
|
|
items: [],
|
|
query: {title: "", created_at: [], page: 1, page_size: 15},
|
|
total: 0,
|
|
page: 1,
|
|
pageSize: 15,
|
|
loading: true
|
|
},
|
|
"message": {
|
|
items: [],
|
|
query: {title: "", created_at: [], page: 1, page_size: 15},
|
|
total: 0,
|
|
page: 1,
|
|
pageSize: 15,
|
|
loading: true
|
|
}
|
|
})
|
|
const items = ref([])
|
|
const query = ref({title: "", created_at: []})
|
|
const total = ref(0)
|
|
const page = ref(1)
|
|
const pageSize = ref(15)
|
|
const loading = ref(true)
|
|
const activeName = ref("chat")
|
|
|
|
onMounted(() => {
|
|
fetchChatData()
|
|
})
|
|
|
|
const handleChange = (tab) => {
|
|
if (tab === "chat") {
|
|
fetchChatData()
|
|
} else if (tab === "message") {
|
|
fetchMessageData()
|
|
}
|
|
}
|
|
|
|
// 搜索对话
|
|
const searchChat = (evt) => {
|
|
if (evt.keyCode === 13) {
|
|
fetchChatData()
|
|
}
|
|
}
|
|
|
|
// 搜索消息
|
|
const searchMessage = (evt) => {
|
|
if (evt.keyCode === 13) {
|
|
fetchMessageData()
|
|
}
|
|
}
|
|
|
|
// 获取数据
|
|
const fetchChatData = () => {
|
|
const d = data.value.chat
|
|
d.query.page = d.page
|
|
d.query.page_size = d.pageSize
|
|
httpPost('/api/admin/chat/list', d.query).then((res) => {
|
|
if (res.data) {
|
|
d.items = res.data.items
|
|
d.total = res.data.total
|
|
d.page = res.data.page
|
|
d.pageSize = res.data.page_size
|
|
}
|
|
d.loading = false
|
|
}).catch(e => {
|
|
ElMessage.error("获取数据失败：" + e.message);
|
|
})
|
|
}
|
|
|
|
const fetchMessageData = () => {
|
|
const d = data.value.message
|
|
d.query.page = d.page
|
|
d.query.page_size = d.pageSize
|
|
httpPost('/api/admin/chat/message', d.query).then((res) => {
|
|
if (res.data) {
|
|
d.items = res.data.items
|
|
d.total = res.data.total
|
|
d.page = res.data.page
|
|
d.pageSize = res.data.page_size
|
|
}
|
|
d.loading = false
|
|
}).catch(e => {
|
|
ElMessage.error("获取数据失败：" + e.message);
|
|
})
|
|
}
|
|
|
|
const removeChat = function (row) {
|
|
httpGet('/api/admin/chat/remove?chat_id=' + row.chat_id).then(() => {
|
|
ElMessage.success("删除成功！")
|
|
fetchChatData()
|
|
}).catch((e) => {
|
|
ElMessage.error("删除失败：" + e.message)
|
|
})
|
|
}
|
|
|
|
const removeMessage = function (row) {
|
|
httpGet('/api/admin/chat/message/remove?id=' + row.id).then(() => {
|
|
ElMessage.success("删除成功！")
|
|
fetchMessageData()
|
|
}).catch((e) => {
|
|
ElMessage.error("删除失败：" + e.message)
|
|
})
|
|
}
|
|
|
|
const mathjaxPlugin = require('markdown-it-mathjax3')
|
|
const md = require('markdown-it')({
|
|
breaks: true,
|
|
html: true,
|
|
linkify: true,
|
|
typographer: true,
|
|
highlight: function (str, lang) {
|
|
if (lang && hl.getLanguage(lang)) {
|
|
// 处理代码高亮
|
|
const preCode = hl.highlight(lang, str, true).value
|
|
// 将代码包裹在 pre 中
|
|
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`
|
|
}
|
|
|
|
// 处理代码高亮
|
|
const preCode = md.utils.escapeHtml(str)
|
|
// 将代码包裹在 pre 中
|
|
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`
|
|
}
|
|
});
|
|
md.use(mathjaxPlugin)
|
|
|
|
const showContentDialog = ref(false)
|
|
const dialogContent = ref("")
|
|
const showContent = (content) => {
|
|
showContentDialog.value = true
|
|
dialogContent.value = md.render(processContent(content))
|
|
}
|
|
|
|
const showChatItemDialog = ref(false)
|
|
const messages = ref([])
|
|
const showMessages = (row) => {
|
|
showChatItemDialog.value = true
|
|
messages.value = []
|
|
httpGet('/api/admin/chat/history?chat_id=' + row.chat_id).then(res => {
|
|
const data = res.data
|
|
for (let i = 0; i < data.length; i++) {
|
|
data[i].orgContent = data[i].content;
|
|
data[i].content = md.render(processContent(data[i].content))
|
|
messages.value.push(data[i]);
|
|
}
|
|
}).catch(e => {
|
|
// TODO: 显示重新加载按钮
|
|
ElMessage.error('加载聊天记录失败：' + e.message);
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.chat-list {
|
|
.handle-box {
|
|
margin-bottom 20px
|
|
.handle-input {
|
|
max-width 150px;
|
|
margin-right 10px;
|
|
}
|
|
}
|
|
|
|
.opt-box {
|
|
padding-bottom: 10px;
|
|
display flex;
|
|
justify-content flex-end
|
|
|
|
.el-icon {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.el-select {
|
|
width: 100%
|
|
}
|
|
|
|
.pagination {
|
|
padding 20px 0
|
|
display flex
|
|
justify-content right
|
|
}
|
|
|
|
.chat-box {
|
|
overflow-y: auto;
|
|
overflow-x hidden
|
|
|
|
// 变量定义
|
|
--content-font-size: 16px;
|
|
--content-color: #c1c1c1;
|
|
|
|
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
|
height 90vh
|
|
|
|
.chat-line {
|
|
// 隐藏滚动条
|
|
|
|
::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |