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

CHANGELOG.md

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

web/src/components/admin/AdminSidebar.vue

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

web/src/router.js

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

web/src/views/admin/records/ChatList.vue

@@ -3,8 +3,18 @@
     <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-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"
@@ -38,13 +48,15 @@
 
             <el-table-column label="创建时间">
               <template #default="scope">
-                <span>{{ dateFormat(scope.row["created_at"]) }}</span>
+                <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-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>
@@ -70,9 +82,24 @@
       </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-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"
@@ -108,13 +135,15 @@
 
             <el-table-column label="创建时间">
               <template #default="scope">
-                <span>{{ dateFormat(scope.row["created_at"]) }}</span>
+                <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-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>
@@ -140,13 +169,23 @@
       </el-tab-pane>
     </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-line" v-html="dialogContent"></div>
       </div>
     </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 v-for="item in messages" :key="item.id">
           <chat-prompt v-if="item.type === 'prompt'" :data="item" />
@@ -159,21 +198,21 @@
 </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";
+import ChatPrompt from '@/components/ChatPrompt.vue'
+import ChatReply from '@/components/ChatReply.vue'
+import { httpGet, httpPost } from '@/utils/http'
+import { dateFormat, processContent } from '@/utils/libs'
+import { Search } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import hl from 'highlight.js'
+import 'highlight.js/styles/a11y-dark.css'
+import { onMounted, ref } from 'vue'
 
 // 变量定义
 const data = ref({
   chat: {
     items: [],
-    query: { title: "", created_at: [], page: 1, page_size: 15 },
+    query: { title: '', created_at: [], page: 1, page_size: 15 },
     total: 0,
     page: 1,
     pageSize: 15,
@@ -181,104 +220,104 @@ const data = ref({
   },
   message: {
     items: [],
-    query: { title: "", created_at: [], page: 1, page_size: 15 },
+    query: { title: '', created_at: [], page: 1, page_size: 15 },
     total: 0,
     page: 1,
     pageSize: 15,
     loading: true,
   },
-});
-const activeName = ref("chat");
+})
+const activeName = ref('chat')
 
 onMounted(() => {
-  fetchChatData();
-});
+  fetchChatData()
+})
 
 const handleChange = (tab) => {
-  if (tab === "chat") {
-    fetchChatData();
-  } else if (tab === "message") {
-    fetchMessageData();
+  if (tab === 'chat') {
+    fetchChatData()
+  } else if (tab === 'message') {
+    fetchMessageData()
   }
-};
+}
 
 // 搜索对话
 const searchChat = (evt) => {
   if (evt.keyCode === 13) {
-    fetchChatData();
+    fetchChatData()
   }
-};
+}
 
 // 搜索消息
 const searchMessage = (evt) => {
   if (evt.keyCode === 13) {
-    fetchMessageData();
+    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)
+  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.items = res.data.items
+        d.total = res.data.total
+        d.page = res.data.page
+        d.pageSize = res.data.page_size
       }
-      d.loading = false;
+      d.loading = false
     })
     .catch((e) => {
-      ElMessage.error("获取数据失败：" + e.message);
-    });
-};
+      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)
+  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.items = res.data.items
+        d.total = res.data.total
+        d.page = res.data.page
+        d.pageSize = res.data.page_size
       }
-      d.loading = false;
+      d.loading = false
     })
     .catch((e) => {
-      ElMessage.error("获取数据失败：" + e.message);
-    });
-};
+      ElMessage.error('获取数据失败：' + e.message)
+    })
+}
 
 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(() => {
-      ElMessage.success("删除成功！");
-      fetchChatData();
+      ElMessage.success('删除成功！')
+      fetchChatData()
     })
     .catch((e) => {
-      ElMessage.error("删除失败：" + e.message);
-    });
-};
+      ElMessage.error('删除失败：' + e.message)
+    })
+}
 
 const removeMessage = function (row) {
-  httpGet("/api/admin/chat/message/remove?id=" + row.id)
+  httpGet('/api/admin/chat/message/remove?id=' + row.id)
     .then(() => {
-      ElMessage.success("删除成功！");
-      fetchMessageData();
+      ElMessage.success('删除成功！')
+      fetchMessageData()
     })
     .catch((e) => {
-      ElMessage.error("删除失败：" + e.message);
-    });
-};
+      ElMessage.error('删除失败：' + e.message)
+    })
+}
 
-const mathjaxPlugin = require("markdown-it-mathjax3");
-const md = require("markdown-it")({
+const mathjaxPlugin = require('markdown-it-mathjax3')
+const md = require('markdown-it')({
   breaks: true,
   html: true,
   linkify: true,
@@ -286,43 +325,43 @@ const md = require("markdown-it")({
   highlight: function (str, lang) {
     if (lang && hl.getLanguage(lang)) {
       // 处理代码高亮
-      const preCode = hl.highlight(lang, str, true).value;
+      const preCode = hl.highlight(lang, str, true).value
       // 将代码包裹在 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 中
-    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 dialogContent = ref("");
+const showContentDialog = ref(false)
+const dialogContent = ref('')
 const showContent = (content) => {
-  showContentDialog.value = true;
-  dialogContent.value = md.render(processContent(content));
-};
+  showContentDialog.value = true
+  dialogContent.value = md.render(processContent(content))
+}
 
-const showChatItemDialog = ref(false);
-const messages = ref([]);
+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)
+  showChatItemDialog.value = true
+  messages.value = []
+  httpGet('/api/admin/chat/history?chat_id=' + row.chat_id)
     .then((res) => {
-      const data = res.data;
+      const data = res.data
       for (let i = 0; i < data.length; i++) {
-        messages.value.push(data[i]);
+        messages.value.push(data[i])
       }
     })
     .catch((e) => {
       // TODO: 显示重新加载按钮
-      ElMessage.error("加载聊天记录失败：" + e.message);
-    });
-};
+      ElMessage.error('加载聊天记录失败：' + e.message)
+    })
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -380,7 +419,7 @@ const showMessages = (row) => {
 
       font-size: 14px;
       display: flex;
-      align-items: flex-start;
+      justify-content: flex-start;
 
     }
   }