xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-12-27 18:45:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

修复管理后台对话列表样式

Browse Source
This commit is contained in:
GeekMaster
2025-04-11 15:05:21 +08:00
parent e0b4e8970a
commit 79522d9ab5
6 changed files with 451 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -9,6 +9,7 @@
- 功能优化：替换瀑布流组件，优化用户体验。 - 功能优化：替换瀑布流组件，优化用户体验。
- 功能优化：生成思维导图时候自动缓存上一次的结果。 - 功能优化：生成思维导图时候自动缓存上一次的结果。
- 功能优化：优化 MJ 绘图页面，增加 MJ-V7 模型支持。 - 功能优化：优化 MJ 绘图页面，增加 MJ-V7 模型支持。
- 功能优化：后台管理增加生成一键登录链接地址功能
## v4.2.1 ## v4.2.1

178
web/src/components/admin/AdminSidebar.vue
View File

@@ -25,7 +25,11 @@
<template v-for="subItem in item.subs"> <template v-for="subItem in item.subs">
<el-sub-menu v-if="subItem.subs" :index="subItem.index" :key="subItem.index"> <el-sub-menu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
<template #title>{{ subItem.title }}</template> <template #title>{{ subItem.title }}</template>
<el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index"> <el-menu-item
v-for="(threeItem, i) in subItem.subs"
:key="i"
:index="threeItem.index"
>
{{ threeItem.title }} {{ threeItem.title }}
</el-menu-item> </el-menu-item>
</el-sub-menu> </el-sub-menu>
@@ -48,125 +52,135 @@
</template> </template>
<script setup> <script setup>
import { computed, ref, watch } from "vue"; import { useSharedStore } from '@/store/sharedata'
import { setMenuItems, useSidebarStore } from "@/store/sidebar"; import { setMenuItems, useSidebarStore } from '@/store/sidebar'
import { httpGet } from "@/utils/http"; import { httpGet } from '@/utils/http'
import { ElMessage } from "element-plus"; import { ElMessage } from 'element-plus'
import { useRoute } from "vue-router"; import { computed, ref, watch } from 'vue'
import { useSharedStore } from "@/store/sharedata"; import { useRoute } from 'vue-router'
const title = ref(""); const title = ref('')
const logo = ref(""); const logo = ref('')
// 加载系统配置 // 加载系统配置
httpGet("/api/admin/config/get?key=system") httpGet('/api/admin/config/get?key=system')
.then((res) => { .then((res) => {
title.value = res.data.admin_title; title.value = res.data.admin_title
logo.value = res.data.logo; logo.value = res.data.logo
}) })
.catch((e) => { .catch((e) => {
ElMessage.error("加载系统配置失败: " + e.message); ElMessage.error('加载系统配置失败: ' + e.message)
}); })
const store = useSharedStore(); const store = useSharedStore()
const theme = ref(store.theme); const theme = ref(store.theme)
watch( watch(
() => store.theme, () => store.theme,
(val) => { (val) => {
theme.value = val; theme.value = val
} }
); )
const items = [ const items = [
{ {
icon: "home", icon: 'home',
index: "/admin/dashboard", index: '/admin/dashboard',
title: "仪表盘", title: '仪表盘',
}, },
{ {
icon: "user-fill", icon: 'user-fill',
index: "/admin/user", index: '/admin/user',
title: "用户管理", title: '用户管理',
}, },
{ {
icon: "menu", icon: 'menu',
index: "1", index: '1',
title: "应用管理", title: '应用管理',
subs: [ subs: [
{ {
index: "/admin/app", index: '/admin/app',
title: "应用列表", title: '应用列表',
icon: 'sub-menu',
}, },
{ {
index: "/admin/app/type", index: '/admin/app/type',
title: "应用分类", title: '应用分类',
icon: 'chuangzuo',
}, },
], ],
}, },
{ {
icon: "api-key", icon: 'api-key',
index: "/admin/apikey", index: '/admin/apikey',
title: "API-KEY", title: 'API-KEY',
}, },
{ {
icon: "model", icon: 'model',
index: "/admin/chat/model", index: '/admin/chat/model',
title: "模型管理", title: '模型管理',
}, },
{ {
icon: "recharge", icon: 'recharge',
index: "/admin/product", index: '/admin/product',
title: "充值产品", title: '充值产品',
}, },
{ {
icon: "order", icon: 'order',
index: "/admin/order", index: '/admin/order',
title: "充值订单", title: '充值订单',
}, },
{ {
icon: "reward", icon: 'reward',
index: "/admin/redeem", index: '/admin/redeem',
title: "兑换码", title: '兑换码',
}, },
{ {
icon: "control", icon: 'control',
index: "/admin/functions", index: '/admin/functions',
title: "函数管理", title: '函数管理',
}, },
{ {
icon: "prompt", icon: 'menu',
index: "/admin/chats", index: '2',
title: "对话管理", title: '创作记录',
subs: [
{
icon: 'prompt',
index: '/admin/chats',
title: '对话记录',
},
{
icon: 'image',
index: '/admin/images',
title: '绘图记录',
},
{
icon: 'mp3',
index: '/admin/medias',
title: '音视频记录',
},
],
},
{
icon: 'role',
index: '/admin/manger',
title: '管理员',
}, },
{ {
icon: "image", icon: 'config',
index: "/admin/images", index: '/admin/system',
title: "绘图管理", title: '系统设置',
}, },
{ {
icon: "mp3", icon: 'log',
index: "/admin/medias", index: '/admin/powerLog',
title: "音视频管理", title: '用户算力日志',
}, },
{ {
icon: "role", icon: 'log',
index: "/admin/manger", index: '/admin/loginLog',
title: "管理员", title: '用户登录日志',
},
{
icon: "config",
index: "/admin/system",
title: "系统设置",
},
{
icon: "log",
index: "/admin/powerLog",
title: "用户算力日志",
},
{
icon: "log",
index: "/admin/loginLog",
title: "用户登录日志",
}, },
// { // {
// icon: 'menu', // icon: 'menu',
@@ -191,15 +205,15 @@ const items = [
// }, // },
// ], // ],
// }, // },
]; ]
const route = useRoute(); const route = useRoute()
const onRoutes = computed(() => { const onRoutes = computed(() => {
return route.path; return route.path
}); })
const sidebar = useSidebarStore(); const sidebar = useSidebarStore()
setMenuItems(items); setMenuItems(items)
</script> </script>
<style scoped lang="stylus"> <style scoped lang="stylus">

440
web/src/router.js
View File

@@ -5,352 +5,352 @@
// * @Author yangjian102621@163.com // * @Author yangjian102621@163.com
// * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ // * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
import {createRouter, createWebHistory} from "vue-router"; import { createRouter, createWebHistory } from 'vue-router'
const routes = [ const routes = [
{ {
name: "Index", name: 'Index',
path: "/", path: '/',
meta: { title: "首页" }, meta: { title: '首页' },
component: () => import("@/views/Index.vue"), component: () => import('@/views/Index.vue'),
}, },
{ {
name: "home", name: 'home',
path: "/home", path: '/home',
redirect: "/chat", redirect: '/chat',
component: () => import("@/views/Home.vue"), component: () => import('@/views/Home.vue'),
children: [ children: [
{ {
name: "chat", name: 'chat',
path: "/chat", path: '/chat',
meta: { title: "创作中心" }, meta: { title: '创作中心' },
component: () => import("@/views/ChatPlus.vue"), component: () => import('@/views/ChatPlus.vue'),
}, },
{ {
name: "chat-id", name: 'chat-id',
path: "/chat/:id", path: '/chat/:id',
meta: { title: "创作中心" }, meta: { title: '创作中心' },
component: () => import("@/views/ChatPlus.vue"), component: () => import('@/views/ChatPlus.vue'),
}, },
{ {
name: "image-mj", name: 'image-mj',
path: "/mj", path: '/mj',
meta: { title: "MidJourney 绘画中心" }, meta: { title: 'MidJourney 绘画中心' },
component: () => import("@/views/ImageMj.vue"), component: () => import('@/views/ImageMj.vue'),
}, },
{ {
name: "image-sd", name: 'image-sd',
path: "/sd", path: '/sd',
meta: { title: "stable diffusion 绘画中心" }, meta: { title: 'stable diffusion 绘画中心' },
component: () => import("@/views/ImageSd.vue"), component: () => import('@/views/ImageSd.vue'),
}, },
{ {
name: "member", name: 'member',
path: "/member", path: '/member',
meta: { title: "会员充值中心" }, meta: { title: '会员充值中心' },
component: () => import("@/views/Member.vue"), component: () => import('@/views/Member.vue'),
}, },
{ {
name: "chat-app", name: 'chat-app',
path: "/apps", path: '/apps',
meta: { title: "应用中心" }, meta: { title: '应用中心' },
component: () => import("@/views/ChatApps.vue"), component: () => import('@/views/ChatApps.vue'),
}, },
{ {
name: "images", name: 'images',
path: "/images-wall", path: '/images-wall',
meta: { title: "作品展示" }, meta: { title: '作品展示' },
component: () => import("@/views/ImagesWall.vue"), component: () => import('@/views/ImagesWall.vue'),
}, },
{ {
name: "user-invitation", name: 'user-invitation',
path: "/invite", path: '/invite',
meta: { title: "推广计划" }, meta: { title: '推广计划' },
component: () => import("@/views/Invitation.vue"), component: () => import('@/views/Invitation.vue'),
}, },
{ {
name: "powerLog", name: 'powerLog',
path: "/powerLog", path: '/powerLog',
meta: { title: "消费日志" }, meta: { title: '消费日志' },
component: () => import("@/views/PowerLog.vue"), component: () => import('@/views/PowerLog.vue'),
}, },
{ {
name: "xmind", name: 'xmind',
path: "/xmind", path: '/xmind',
meta: { title: "思维导图" }, meta: { title: '思维导图' },
component: () => import("@/views/MarkMap.vue"), component: () => import('@/views/MarkMap.vue'),
}, },
{ {
name: "dalle", name: 'dalle',
path: "/dalle", path: '/dalle',
meta: { title: "DALLE-3" }, meta: { title: 'DALLE-3' },
component: () => import("@/views/Dalle.vue"), component: () => import('@/views/Dalle.vue'),
}, },
{ {
name: "suno", name: 'suno',
path: "/suno", path: '/suno',
meta: { title: "Suno音乐创作" }, meta: { title: 'Suno音乐创作' },
component: () => import("@/views/Suno.vue"), component: () => import('@/views/Suno.vue'),
}, },
{ {
name: "ExternalLink", name: 'ExternalLink',
path: "/external", path: '/external',
component: () => import("@/views/ExternalPage.vue"), component: () => import('@/views/ExternalPage.vue'),
}, },
{ {
name: "song", name: 'song',
path: "/song/:id", path: '/song/:id',
meta: { title: "Suno音乐播放" }, meta: { title: 'Suno音乐播放' },
component: () => import("@/views/Song.vue"), component: () => import('@/views/Song.vue'),
}, },
{ {
name: "luma", name: 'luma',
path: "/luma", path: '/luma',
meta: { title: "Luma视频创作" }, meta: { title: 'Luma视频创作' },
component: () => import("@/views/Luma.vue"), component: () => import('@/views/Luma.vue'),
}, },
{ {
name: "keling", name: 'keling',
path: "/keling", path: '/keling',
meta: { title: "KeLing视频创作" }, meta: { title: 'KeLing视频创作' },
component: () => import("@/views/KeLing.vue"), component: () => import('@/views/KeLing.vue'),
}, },
], ],
}, },
{ {
name: "chat-export", name: 'chat-export',
path: "/chat/export", path: '/chat/export',
meta: { title: "导出会话记录" }, meta: { title: '导出会话记录' },
component: () => import("@/views/ChatExport.vue"), component: () => import('@/views/ChatExport.vue'),
}, },
{ {
name: "login", name: 'login',
path: "/login", path: '/login',
meta: { title: "用户登录" }, meta: { title: '用户登录' },
component: () => import("@/views/Login.vue"), component: () => import('@/views/Login.vue'),
}, },
{ {
name: "login-callback", name: 'login-callback',
path: "/login/callback", path: '/login/callback',
meta: { title: "用户登录" }, meta: { title: '用户登录' },
component: () => import("@/views/LoginCallback.vue"), component: () => import('@/views/LoginCallback.vue'),
}, },
{ {
name: "register", name: 'register',
path: "/register", path: '/register',
meta: { title: "用户注册" }, meta: { title: '用户注册' },
component: () => import("@/views/Register.vue"), component: () => import('@/views/Register.vue'),
}, },
{ {
name: "resetpassword", name: 'resetpassword',
path: "/resetpassword", path: '/resetpassword',
meta: { title: "重置密码" }, meta: { title: '重置密码' },
component: () => import("@/views/Resetpassword.vue"), component: () => import('@/views/Resetpassword.vue'),
}, },
{ {
path: "/admin/login", path: '/admin/login',
name: "admin-login", name: 'admin-login',
meta: { title: "控制台登录" }, meta: { title: '控制台登录' },
component: () => import("@/views/admin/Login.vue"), component: () => import('@/views/admin/Login.vue'),
}, },
{ {
path: "/payReturn", path: '/payReturn',
name: "pay-return", name: 'pay-return',
meta: { title: "支付回调" }, meta: { title: '支付回调' },
component: () => import("@/views/PayReturn.vue"), component: () => import('@/views/PayReturn.vue'),
}, },
{ {
name: "admin", name: 'admin',
path: "/admin", path: '/admin',
redirect: "/admin/dashboard", redirect: '/admin/dashboard',
component: () => import("@/views/admin/Home.vue"), component: () => import('@/views/admin/Home.vue'),
meta: { title: "Geek-AI 控制台" }, meta: { title: 'Geek-AI 控制台' },
children: [ children: [
{ {
path: "/admin/dashboard", path: '/admin/dashboard',
name: "admin-dashboard", name: 'admin-dashboard',
meta: { title: "仪表盘" }, meta: { title: '仪表盘' },
component: () => import("@/views/admin/Dashboard.vue"), component: () => import('@/views/admin/Dashboard.vue'),
}, },
{ {
path: "/admin/system", path: '/admin/system',
name: "admin-system", name: 'admin-system',
meta: { title: "系统设置" }, meta: { title: '系统设置' },
component: () => import("@/views/admin/SysConfig.vue"), component: () => import('@/views/admin/SysConfig.vue'),
}, },
{ {
path: "/admin/user", path: '/admin/user',
name: "admin-user", name: 'admin-user',
meta: { title: "用户管理" }, meta: { title: '用户管理' },
component: () => import("@/views/admin/Users.vue"), component: () => import('@/views/admin/Users.vue'),
}, },
{ {
path: "/admin/app", path: '/admin/app',
name: "admin-app", name: 'admin-app',
meta: { title: "应用列表" }, meta: { title: '应用列表' },
component: () => import("@/views/admin/Apps.vue"), component: () => import('@/views/admin/Apps.vue'),
}, },
{ {
path: "/admin/app/type", path: '/admin/app/type',
name: "admin-app-type", name: 'admin-app-type',
meta: { title: "应用分类" }, meta: { title: '应用分类' },
component: () => import("@/views/admin/AppType.vue"), component: () => import('@/views/admin/AppType.vue'),
}, },
{ {
path: "/admin/apikey", path: '/admin/apikey',
name: "admin-apikey", name: 'admin-apikey',
meta: { title: "API-KEY 管理" }, meta: { title: 'API-KEY 管理' },
component: () => import("@/views/admin/ApiKey.vue"), component: () => import('@/views/admin/ApiKey.vue'),
}, },
{ {
path: "/admin/chat/model", path: '/admin/chat/model',
name: "admin-chat-model", name: 'admin-chat-model',
meta: { title: "语言模型" }, meta: { title: '语言模型' },
component: () => import("@/views/admin/ChatModel.vue"), component: () => import('@/views/admin/ChatModel.vue'),
}, },
{ {
path: "/admin/product", path: '/admin/product',
name: "admin-product", name: 'admin-product',
meta: { title: "充值产品" }, meta: { title: '充值产品' },
component: () => import("@/views/admin/Product.vue"), component: () => import('@/views/admin/Product.vue'),
}, },
{ {
path: "/admin/order", path: '/admin/order',
name: "admin-order", name: 'admin-order',
meta: { title: "充值订单" }, meta: { title: '充值订单' },
component: () => import("@/views/admin/Order.vue"), component: () => import('@/views/admin/Order.vue'),
}, },
{ {
path: "/admin/redeem", path: '/admin/redeem',
name: "admin-redeem", name: 'admin-redeem',
meta: { title: "兑换码管理" }, meta: { title: '兑换码管理' },
component: () => import("@/views/admin/Redeem.vue"), component: () => import('@/views/admin/Redeem.vue'),
}, },
{ {
path: "/admin/loginLog", path: '/admin/loginLog',
name: "admin-loginLog", name: 'admin-loginLog',
meta: { title: "登录日志" }, meta: { title: '登录日志' },
component: () => import("@/views/admin/LoginLog.vue"), component: () => import('@/views/admin/LoginLog.vue'),
}, },
{ {
path: "/admin/functions", path: '/admin/functions',
name: "admin-functions", name: 'admin-functions',
meta: { title: "函数管理" }, meta: { title: '函数管理' },
component: () => import("@/views/admin/Functions.vue"), component: () => import('@/views/admin/Functions.vue'),
}, },
{ {
path: "/admin/chats", path: '/admin/chats',
name: "admin-chats", name: 'admin-chats',
meta: { title: "对话管理" }, meta: { title: '对话管理' },
component: () => import("@/views/admin/ChatList.vue"), component: () => import('@/views/admin/records/ChatList.vue'),
}, },
{ {
path: "/admin/images", path: '/admin/images',
name: "admin-images", name: 'admin-images',
meta: { title: "绘图管理" }, meta: { title: '绘图管理' },
component: () => import("@/views/admin/ImageList.vue"), component: () => import('@/views/admin/records/ImageList.vue'),
}, },
{ {
path: "/admin/medias", path: '/admin/medias',
name: "admin-medias", name: 'admin-medias',
meta: { title: "音视频管理" }, meta: { title: '音视频管理' },
component: () => import("@/views/admin/Medias.vue"), component: () => import('@/views/admin/records/Medias.vue'),
}, },
{ {
path: "/admin/powerLog", path: '/admin/powerLog',
name: "admin-power-log", name: 'admin-power-log',
meta: { title: "算力日志" }, meta: { title: '算力日志' },
component: () => import("@/views/admin/PowerLog.vue"), component: () => import('@/views/admin/PowerLog.vue'),
}, },
{ {
path: "/admin/manger", path: '/admin/manger',
name: "admin-manger", name: 'admin-manger',
meta: { title: "管理员" }, meta: { title: '管理员' },
component: () => import("@/views/admin/Manager.vue"), component: () => import('@/views/admin/Manager.vue'),
}, },
], ],
}, },
{ {
name: "mobile-login", name: 'mobile-login',
path: "/mobile/login", path: '/mobile/login',
meta: { title: "用户登录" }, meta: { title: '用户登录' },
component: () => import("@/views/mobile/Login.vue"), component: () => import('@/views/mobile/Login.vue'),
}, },
{ {
name: "mobile", name: 'mobile',
path: "/mobile", path: '/mobile',
meta: { title: "首页" }, meta: { title: '首页' },
component: () => import("@/views/mobile/Home.vue"), component: () => import('@/views/mobile/Home.vue'),
redirect: "/mobile/index", redirect: '/mobile/index',
children: [ children: [
{ {
path: "/mobile/index", path: '/mobile/index',
name: "mobile-index", name: 'mobile-index',
component: () => import("@/views/mobile/Index.vue"), component: () => import('@/views/mobile/Index.vue'),
}, },
{ {
path: "/mobile/chat", path: '/mobile/chat',
name: "mobile-chat", name: 'mobile-chat',
component: () => import("@/views/mobile/ChatList.vue"), component: () => import('@/views/mobile/ChatList.vue'),
}, },
{ {
path: "/mobile/image", path: '/mobile/image',
name: "mobile-image", name: 'mobile-image',
component: () => import("@/views/mobile/Image.vue"), component: () => import('@/views/mobile/Image.vue'),
}, },
{ {
path: "/mobile/profile", path: '/mobile/profile',
name: "mobile-profile", name: 'mobile-profile',
component: () => import("@/views/mobile/Profile.vue"), component: () => import('@/views/mobile/Profile.vue'),
}, },
{ {
path: "/mobile/imgWall", path: '/mobile/imgWall',
name: "mobile-img-wall", name: 'mobile-img-wall',
component: () => import("@/views/mobile/pages/ImgWall.vue"), component: () => import('@/views/mobile/pages/ImgWall.vue'),
}, },
{ {
path: "/mobile/chat/session", path: '/mobile/chat/session',
name: "mobile-chat-session", name: 'mobile-chat-session',
component: () => import("@/views/mobile/ChatSession.vue"), component: () => import('@/views/mobile/ChatSession.vue'),
}, },
{ {
path: "/mobile/chat/export", path: '/mobile/chat/export',
name: "mobile-chat-export", name: 'mobile-chat-export',
component: () => import("@/views/mobile/ChatExport.vue"), component: () => import('@/views/mobile/ChatExport.vue'),
}, },
], ],
}, },
{ {
name: "test", name: 'test',
path: "/test", path: '/test',
meta: { title: "测试页面" }, meta: { title: '测试页面' },
component: () => import("@/views/Test.vue"), component: () => import('@/views/Test.vue'),
}, },
{ {
name: "NotFound", name: 'NotFound',
path: "/:all(.*)", path: '/:all(.*)',
meta: { title: "页面没有找到" }, meta: { title: '页面没有找到' },
component: () => import("@/views/404.vue"), component: () => import('@/views/404.vue'),
}, },
]; ]
// console.log(MY_VARIABLE) // console.log(MY_VARIABLE)
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
routes: routes, routes: routes,
}); })
let prevRoute = null; let prevRoute = null
// dynamic change the title when router change // dynamic change the title when router change
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
document.title = to.meta.title; document.title = to.meta.title
prevRoute = from; prevRoute = from
next(); next()
}); })
export { router, prevRoute }; export { router, prevRoute }

229
web/src/views/admin/ChatList.vue → web/src/views/admin/records/ChatList.vue
View File

@@ -3,8 +3,18 @@
<el-tabs v-model="activeName" @tab-change="handleChange"> <el-tabs v-model="activeName" @tab-change="handleChange">
<el-tab-pane label="对话列表" name="chat" v-loading="data.chat.loading"> <el-tab-pane label="对话列表" name="chat" v-loading="data.chat.loading">
<div class="handle-box"> <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
<el-input v-model="data.chat.query.title" placeholder="对话标题" class="handle-input mr10" @keyup="searchChat($event)"></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 <el-date-picker
v-model="data.chat.query.created_at" v-model="data.chat.query.created_at"
type="daterange" type="daterange"
@@ -38,13 +48,15 @@
<el-table-column label="创建时间"> <el-table-column label="创建时间">
<template #default="scope"> <template #default="scope">
<span>{{ dateFormat(scope.row["created_at"]) }}</span> <span>{{ dateFormat(scope.row['created_at']) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="180"> <el-table-column label="操作" width="180">
<template #default="scope"> <template #default="scope">
<el-button size="small" type="primary" @click="showMessages(scope.row)">查看</el-button> <el-button size="small" type="primary" @click="showMessages(scope.row)"
>查看</el-button
>
<el-popconfirm title="确定要删除当前记录吗?" @confirm="removeChat(scope.row)"> <el-popconfirm title="确定要删除当前记录吗?" @confirm="removeChat(scope.row)">
<template #reference> <template #reference>
<el-button size="small" type="danger">删除</el-button> <el-button size="small" type="danger">删除</el-button>
@@ -70,9 +82,24 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="消息记录" name="message"> <el-tab-pane label="消息记录" name="message">
<div class="handle-box"> <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
<el-input v-model="data.message.query.content" placeholder="消息内容" class="handle-input mr10" @keyup="searchMessage($event)"></el-input> v-model.number="data.message.query.user_id"
<el-input v-model="data.message.query.model" placeholder="模型" class="handle-input mr10" @keyup="searchMessage($event)"></el-input> 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 <el-date-picker
v-model="data.message.query.created_at" v-model="data.message.query.created_at"
type="daterange" type="daterange"
@@ -108,13 +135,15 @@
<el-table-column label="创建时间"> <el-table-column label="创建时间">
<template #default="scope"> <template #default="scope">
<span>{{ dateFormat(scope.row["created_at"]) }}</span> <span>{{ dateFormat(scope.row['created_at']) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="180"> <el-table-column label="操作" width="180">
<template #default="scope"> <template #default="scope">
<el-button size="small" type="primary" @click="showContent(scope.row.content)">查看</el-button> <el-button size="small" type="primary" @click="showContent(scope.row.content)"
>查看</el-button
>
<el-popconfirm title="确定要删除当前记录吗?" @confirm="removeMessage(scope.row)"> <el-popconfirm title="确定要删除当前记录吗?" @confirm="removeMessage(scope.row)">
<template #reference> <template #reference>
<el-button size="small" type="danger">删除</el-button> <el-button size="small" type="danger">删除</el-button>
@@ -140,13 +169,23 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<el-dialog v-model="showContentDialog" title="消息详情" class="chat-dialog" style="--el-dialog-width: 60%"> <el-dialog
v-model="showContentDialog"
title="消息详情"
class="chat-dialog"
style="--el-dialog-width: 60%"
>
<div class="chat-detail"> <div class="chat-detail">
<div class="chat-line" v-html="dialogContent"></div> <div class="chat-line" v-html="dialogContent"></div>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog v-model="showChatItemDialog" title="对话详情" class="chat-dialog" style="--el-dialog-width: 60%"> <el-dialog
v-model="showChatItemDialog"
title="对话详情"
class="chat-dialog"
style="--el-dialog-width: 60%"
>
<div class="chat-box chat-page"> <div class="chat-box chat-page">
<div v-for="item in messages" :key="item.id"> <div v-for="item in messages" :key="item.id">
<chat-prompt v-if="item.type === 'prompt'" :data="item" /> <chat-prompt v-if="item.type === 'prompt'" :data="item" />
@@ -159,21 +198,21 @@
</template> </template>
<script setup> <script setup>
import { onMounted, ref } from "vue"; import ChatPrompt from '@/components/ChatPrompt.vue'
import { httpGet, httpPost } from "@/utils/http"; import ChatReply from '@/components/ChatReply.vue'
import { ElMessage } from "element-plus"; import { httpGet, httpPost } from '@/utils/http'
import { dateFormat, processContent } from "@/utils/libs"; import { dateFormat, processContent } from '@/utils/libs'
import { Search } from "@element-plus/icons-vue"; import { Search } from '@element-plus/icons-vue'
import "highlight.js/styles/a11y-dark.css"; import { ElMessage } from 'element-plus'
import hl from "highlight.js"; import hl from 'highlight.js'
import ChatPrompt from "@/components/ChatPrompt.vue"; import 'highlight.js/styles/a11y-dark.css'
import ChatReply from "@/components/ChatReply.vue"; import { onMounted, ref } from 'vue'
// 变量定义 // 变量定义
const data = ref({ const data = ref({
chat: { chat: {
items: [], items: [],
query: { title: "", created_at: [], page: 1, page_size: 15 }, query: { title: '', created_at: [], page: 1, page_size: 15 },
total: 0, total: 0,
page: 1, page: 1,
pageSize: 15, pageSize: 15,
@@ -181,104 +220,104 @@ const data = ref({
}, },
message: { message: {
items: [], items: [],
query: { title: "", created_at: [], page: 1, page_size: 15 }, query: { title: '', created_at: [], page: 1, page_size: 15 },
total: 0, total: 0,
page: 1, page: 1,
pageSize: 15, pageSize: 15,
loading: true, loading: true,
}, },
}); })
const activeName = ref("chat"); const activeName = ref('chat')
onMounted(() => { onMounted(() => {
fetchChatData(); fetchChatData()
}); })
const handleChange = (tab) => { const handleChange = (tab) => {
if (tab === "chat") { if (tab === 'chat') {
fetchChatData(); fetchChatData()
} else if (tab === "message") { } else if (tab === 'message') {
fetchMessageData(); fetchMessageData()
} }
}; }
// 搜索对话 // 搜索对话
const searchChat = (evt) => { const searchChat = (evt) => {
if (evt.keyCode === 13) { if (evt.keyCode === 13) {
fetchChatData(); fetchChatData()
} }
}; }
// 搜索消息 // 搜索消息
const searchMessage = (evt) => { const searchMessage = (evt) => {
if (evt.keyCode === 13) { if (evt.keyCode === 13) {
fetchMessageData(); fetchMessageData()
} }
}; }
// 获取数据 // 获取数据
const fetchChatData = () => { const fetchChatData = () => {
const d = data.value.chat; const d = data.value.chat
d.query.page = d.page; d.query.page = d.page
d.query.page_size = d.pageSize; d.query.page_size = d.pageSize
httpPost("/api/admin/chat/list", d.query) httpPost('/api/admin/chat/list', d.query)
.then((res) => { .then((res) => {
if (res.data) { if (res.data) {
d.items = res.data.items; d.items = res.data.items
d.total = res.data.total; d.total = res.data.total
d.page = res.data.page; d.page = res.data.page
d.pageSize = res.data.page_size; d.pageSize = res.data.page_size
} }
d.loading = false; d.loading = false
}) })
.catch((e) => { .catch((e) => {
ElMessage.error("获取数据失败：" + e.message); ElMessage.error('获取数据失败：' + e.message)
}); })
}; }
const fetchMessageData = () => { const fetchMessageData = () => {
const d = data.value.message; const d = data.value.message
d.query.page = d.page; d.query.page = d.page
d.query.page_size = d.pageSize; d.query.page_size = d.pageSize
httpPost("/api/admin/chat/message", d.query) httpPost('/api/admin/chat/message', d.query)
.then((res) => { .then((res) => {
if (res.data) { if (res.data) {
d.items = res.data.items; d.items = res.data.items
d.total = res.data.total; d.total = res.data.total
d.page = res.data.page; d.page = res.data.page
d.pageSize = res.data.page_size; d.pageSize = res.data.page_size
} }
d.loading = false; d.loading = false
}) })
.catch((e) => { .catch((e) => {
ElMessage.error("获取数据失败：" + e.message); ElMessage.error('获取数据失败：' + e.message)
}); })
}; }
const removeChat = function (row) { const removeChat = function (row) {
httpGet("/api/admin/chat/remove?chat_id=" + row.chat_id) httpGet('/api/admin/chat/remove?chat_id=' + row.chat_id)
.then(() => { .then(() => {
ElMessage.success("删除成功！"); ElMessage.success('删除成功！')
fetchChatData(); fetchChatData()
}) })
.catch((e) => { .catch((e) => {
ElMessage.error("删除失败：" + e.message); ElMessage.error('删除失败：' + e.message)
}); })
}; }
const removeMessage = function (row) { const removeMessage = function (row) {
httpGet("/api/admin/chat/message/remove?id=" + row.id) httpGet('/api/admin/chat/message/remove?id=' + row.id)
.then(() => { .then(() => {
ElMessage.success("删除成功！"); ElMessage.success('删除成功！')
fetchMessageData(); fetchMessageData()
}) })
.catch((e) => { .catch((e) => {
ElMessage.error("删除失败：" + e.message); ElMessage.error('删除失败：' + e.message)
}); })
}; }
const mathjaxPlugin = require("markdown-it-mathjax3"); const mathjaxPlugin = require('markdown-it-mathjax3')
const md = require("markdown-it")({ const md = require('markdown-it')({
breaks: true, breaks: true,
html: true, html: true,
linkify: true, linkify: true,
@@ -286,43 +325,43 @@ const md = require("markdown-it")({
highlight: function (str, lang) { highlight: function (str, lang) {
if (lang && hl.getLanguage(lang)) { if (lang && hl.getLanguage(lang)) {
// 处理代码高亮 // 处理代码高亮
const preCode = hl.highlight(lang, str, true).value; const preCode = hl.highlight(lang, str, true).value
// 将代码包裹在 pre 中 // 将代码包裹在 pre 中
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`; return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`
} }
// 处理代码高亮 // 处理代码高亮
const preCode = md.utils.escapeHtml(str); const preCode = md.utils.escapeHtml(str)
// 将代码包裹在 pre 中 // 将代码包裹在 pre 中
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`; return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`
}, },
}); })
md.use(mathjaxPlugin); md.use(mathjaxPlugin)
const showContentDialog = ref(false); const showContentDialog = ref(false)
const dialogContent = ref(""); const dialogContent = ref('')
const showContent = (content) => { const showContent = (content) => {
showContentDialog.value = true; showContentDialog.value = true
dialogContent.value = md.render(processContent(content)); dialogContent.value = md.render(processContent(content))
}; }
const showChatItemDialog = ref(false); const showChatItemDialog = ref(false)
const messages = ref([]); const messages = ref([])
const showMessages = (row) => { const showMessages = (row) => {
showChatItemDialog.value = true; showChatItemDialog.value = true
messages.value = []; messages.value = []
httpGet("/api/admin/chat/history?chat_id=" + row.chat_id) httpGet('/api/admin/chat/history?chat_id=' + row.chat_id)
.then((res) => { .then((res) => {
const data = res.data; const data = res.data
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
messages.value.push(data[i]); messages.value.push(data[i])
} }
}) })
.catch((e) => { .catch((e) => {
// TODO: 显示重新加载按钮 // TODO: 显示重新加载按钮
ElMessage.error("加载聊天记录失败：" + e.message); ElMessage.error('加载聊天记录失败：' + e.message)
}); })
}; }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@@ -380,7 +419,7 @@ const showMessages = (row) => {
font-size: 14px; font-size: 14px;
display: flex; display: flex;
align-items: flex-start; justify-content: flex-start;
} }
} }

0
web/src/views/admin/ImageList.vue → web/src/views/admin/records/ImageList.vue
View File

0
web/src/views/admin/Medias.vue → web/src/views/admin/records/Medias.vue
View File