完善前端项目
This commit is contained in:
BBIT-Kai
@@ -26,6 +26,7 @@
|
||||
"#/*": "./src/*"
|
||||
},
|
||||
"dependencies": {
|
||||
"@handsontable/vue3": "^16.0.1",
|
||||
"@vben/access": "workspace:*",
|
||||
"@vben/common-ui": "workspace:*",
|
||||
"@vben/constants": "workspace:*",
|
||||
@@ -43,6 +44,7 @@
|
||||
"@vueuse/core": "catalog:",
|
||||
"ant-design-vue": "catalog:",
|
||||
"dayjs": "catalog:",
|
||||
"handsontable": "^16.0.1",
|
||||
"js-sha256": "^0.11.0",
|
||||
"markdown-it": "^14.1.0",
|
||||
"markdown-it-container": "^4.0.0",
|
||||
|
||||
@@ -2,15 +2,15 @@ import { pyRequestClient } from '#/api/request';
|
||||
/**
|
||||
* 获取AI列表
|
||||
*/
|
||||
export async function getAIList() {
|
||||
return pyRequestClient.get('/llm/aiList');
|
||||
export async function getAIBotList() {
|
||||
return pyRequestClient.get('/llm/aiListForBot');
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取对话列表
|
||||
*/
|
||||
export async function getSessions() {
|
||||
return pyRequestClient.get('/llm/sessions');
|
||||
return pyRequestClient.get('/llm/sessionsForBot');
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -23,12 +23,12 @@ export async function getHistory(sessionId: string) {
|
||||
/**
|
||||
* 聊天
|
||||
*/
|
||||
export async function chat(
|
||||
export async function chatWithBot(
|
||||
aiId: string,
|
||||
sessionId: null | string,
|
||||
userInput: string,
|
||||
) {
|
||||
return pyRequestClient.post('/llm/chat', {
|
||||
return pyRequestClient.post('/llm/chatForBot', {
|
||||
aiId,
|
||||
sessionId,
|
||||
userInput,
|
||||
|
||||
@@ -1,2 +1,6 @@
|
||||
export * from './bot';
|
||||
export * from './report';
|
||||
export * from './report-bot';
|
||||
export * from './report-data';
|
||||
export * from './service';
|
||||
export * from './service-knowledge';
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
import { pyRequestClient } from '#/api/request';
|
||||
/**
|
||||
* 获取AI列表
|
||||
*/
|
||||
export async function getAIReportList() {
|
||||
return pyRequestClient.get('/llm/aiListForReport');
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取报表列表
|
||||
*/
|
||||
export async function getReports() {
|
||||
return pyRequestClient.get('/llm/reports');
|
||||
}
|
||||
|
||||
export async function getReport(reportId: string) {
|
||||
return pyRequestClient.get('/llm/report', { params: { reportId } });
|
||||
}
|
||||
/**
|
||||
* 保存
|
||||
*/
|
||||
export async function saveReport(data: { reportId: string }) {
|
||||
return pyRequestClient.post('/llm/saveReport', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取
|
||||
*/
|
||||
export async function getHistory1(sessionId: string) {
|
||||
return pyRequestClient.get('/llm/history', { params: { sessionId } });
|
||||
}
|
||||
|
||||
/**
|
||||
* 聊天
|
||||
*/
|
||||
export async function chatWithReport(
|
||||
aiId: string,
|
||||
companyId: null | string,
|
||||
reportId: null | string,
|
||||
userInput: string,
|
||||
) {
|
||||
return pyRequestClient.post('/llm/chatWithReport', {
|
||||
aiId,
|
||||
companyId,
|
||||
reportId,
|
||||
userInput,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取租户列表
|
||||
*/
|
||||
export async function getCompany() {
|
||||
return pyRequestClient.get('/llm/companyList');
|
||||
}
|
||||
|
||||
@@ -9,10 +9,10 @@ export const overridesPreferences = defineOverridesPreferences({
|
||||
// overrides
|
||||
app: {
|
||||
name: import.meta.env.VITE_APP_TITLE,
|
||||
layout: 'header-sidebar-nav', // 布局方式
|
||||
layout: 'sidebar-mixed-nav',
|
||||
defaultHomePath: '/workspace', // 默认首页路径
|
||||
enablePreferences: false, // 是否启用偏好设置
|
||||
loginExpiredMode: 'modal', // 登录过期模式 弹窗登录
|
||||
loginExpiredMode: 'page', // 登录过期模式 不用弹窗登录 跳转到页面登录，防止一些界面不会再加载
|
||||
},
|
||||
theme: {
|
||||
mode: 'light',
|
||||
|
||||
@@ -2,6 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
|
||||
|
||||
import { $t } from '#/locales';
|
||||
|
||||
const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
meta: {
|
||||
@@ -47,6 +48,17 @@ const routes: RouteRecordRaw[] = [
|
||||
},
|
||||
component: () => import('#/views/cv/ysa/index.vue'),
|
||||
},
|
||||
{
|
||||
name: 'CVAT',
|
||||
path: '/cv/cvat',
|
||||
component: IFrameView,
|
||||
meta: {
|
||||
icon: 'mdi:abjad-arabic',
|
||||
link: 'http://171.212.101.199:13013/',
|
||||
keepAlive: true,
|
||||
title: '标注平台入口',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -6,7 +6,7 @@ const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
meta: {
|
||||
icon: 'ic:baseline-view-in-ar',
|
||||
authority: ['bot', 'report'],
|
||||
authority: ['bot', 'report', 'service'],
|
||||
keepAlive: false,
|
||||
order: 2,
|
||||
title: $t('大语言模型'),
|
||||
@@ -19,22 +19,116 @@ const routes: RouteRecordRaw[] = [
|
||||
path: '/llm/bot',
|
||||
meta: {
|
||||
authority: ['bot'],
|
||||
icon: 'mdi:face-woman-shimmer',
|
||||
title: $t('智能体对话'),
|
||||
icon: 'mdi:face-agent',
|
||||
title: $t('通用智能体'),
|
||||
keepAlive: true,
|
||||
},
|
||||
component: () => import('#/views/llm/bot/index.vue'),
|
||||
},
|
||||
// 嵌套菜单
|
||||
{
|
||||
name: 'SDP',
|
||||
path: '/llm/report',
|
||||
meta: {
|
||||
authority: ['report'],
|
||||
icon: 'mdi:hoop-house',
|
||||
title: $t('智农观数阁'),
|
||||
keepAlive: false,
|
||||
authority: ['report'],
|
||||
},
|
||||
component: () => import('#/views/llm/report/index.vue'),
|
||||
name: 'SDP',
|
||||
path: '/llm/report',
|
||||
children: [
|
||||
{
|
||||
name: 'SDP-chat',
|
||||
path: '/llm/report/report-chat',
|
||||
meta: {
|
||||
authority: ['report'],
|
||||
icon: 'mdi:set-center',
|
||||
title: $t('报表中心'),
|
||||
keepAlive: true,
|
||||
},
|
||||
component: () => import('#/views/llm/report/report-chat/index.vue'),
|
||||
},
|
||||
{
|
||||
name: 'SDP-bot',
|
||||
path: '/llm/report/report-bot',
|
||||
meta: {
|
||||
authority: ['report-bot'],
|
||||
icon: 'mdi:face-woman-shimmer',
|
||||
title: $t('智能体'),
|
||||
keepAlive: true,
|
||||
},
|
||||
component: () => import('#/views/llm/report/report-bot/index.vue'),
|
||||
},
|
||||
{
|
||||
name: 'SDP-data',
|
||||
path: '/llm/report/report-data',
|
||||
meta: {
|
||||
authority: ['report-data'],
|
||||
icon: 'ic:round-settings',
|
||||
title: $t('数据源'),
|
||||
keepAlive: true,
|
||||
},
|
||||
component: () => import('#/views/llm/report/report-data/index.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
// 嵌套菜单
|
||||
{
|
||||
meta: {
|
||||
icon: 'mdi:greenhouse',
|
||||
title: $t('灵思智服阁'),
|
||||
authority: ['service'],
|
||||
},
|
||||
name: 'CSC',
|
||||
path: '/llm/service',
|
||||
children: [
|
||||
{
|
||||
name: 'CSC-chat',
|
||||
path: '/llm/service/service-chat',
|
||||
meta: {
|
||||
authority: ['service'],
|
||||
icon: 'mdi:android-head',
|
||||
title: $t('灵思对话'),
|
||||
keepAlive: true,
|
||||
},
|
||||
component: () =>
|
||||
import('#/views/llm/service/service-chat/index.vue'),
|
||||
},
|
||||
{
|
||||
name: 'CSC-bot',
|
||||
path: '/llm/service/service-bot',
|
||||
meta: {
|
||||
authority: ['service-bot'],
|
||||
icon: 'mdi:face-woman',
|
||||
title: $t('智能体'),
|
||||
keepAlive: true,
|
||||
},
|
||||
component: () =>
|
||||
import('#/views/llm/service/service-bot/index.vue'),
|
||||
},
|
||||
{
|
||||
name: 'CSC-knowledge',
|
||||
path: '/llm/service/service-knowledge',
|
||||
meta: {
|
||||
authority: ['service-knowledge'],
|
||||
icon: 'ic:round-book',
|
||||
title: $t('知识库'),
|
||||
keepAlive: true,
|
||||
},
|
||||
component: () =>
|
||||
import('#/views/llm/service/service-knowledge/index.vue'),
|
||||
},
|
||||
{
|
||||
name: 'CSC-mem',
|
||||
path: '/llm/service/service-mem',
|
||||
meta: {
|
||||
authority: ['service-mem'],
|
||||
icon: 'mdi:brain',
|
||||
title: $t('记忆库'),
|
||||
keepAlive: true,
|
||||
},
|
||||
component: () =>
|
||||
import('#/views/llm/service/service-mem/index.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -24,18 +24,7 @@ const routes: RouteRecordRaw[] = [
|
||||
icon: 'mdi:wall-fire',
|
||||
iframeSrc: 'http://s1.ronsunny.cn:13010/',
|
||||
keepAlive: false,
|
||||
title: '检索增强生成',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'CVAT',
|
||||
path: '/out/cvat',
|
||||
component: IFrameView,
|
||||
meta: {
|
||||
icon: 'mdi:abjad-arabic',
|
||||
link: 'http://171.212.101.199:13013/',
|
||||
keepAlive: true,
|
||||
title: '标注平台入口',
|
||||
title: 'RAG Flow',
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@@ -2,232 +2,109 @@
|
||||
import type {
|
||||
WorkbenchProjectItem,
|
||||
WorkbenchQuickNavItem,
|
||||
WorkbenchTodoItem,
|
||||
WorkbenchTrendItem,
|
||||
} from '@vben/common-ui';
|
||||
} from "@vben/common-ui";
|
||||
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { WorkbenchHeader } from '@vben/common-ui';
|
||||
import { preferences } from '@vben/preferences';
|
||||
import { useUserStore } from '@vben/stores';
|
||||
import { openWindow } from '@vben/utils';
|
||||
import { useRouter } from "vue-router";
|
||||
import { WorkbenchHeader, WorkbenchQuickNav } from "@vben/common-ui";
|
||||
import { preferences } from "@vben/preferences";
|
||||
import { useUserStore } from "@vben/stores";
|
||||
import { openWindow } from "@vben/utils";
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 这是一个示例数据，实际项目中需要根据实际情况进行调整
|
||||
// url 也可以是内部路由，在 navTo 方法中识别处理，进行内部跳转
|
||||
// 例如：url: /dashboard/workspace
|
||||
const projectItems: WorkbenchProjectItem[] = [
|
||||
{
|
||||
color: '',
|
||||
content: '不要等待机会，而要创造机会。',
|
||||
date: '2021-04-01',
|
||||
group: '开源组',
|
||||
icon: 'carbon:logo-github',
|
||||
title: 'Github',
|
||||
url: 'https://github.com',
|
||||
},
|
||||
{
|
||||
color: '#3fb27f',
|
||||
content: '现在的你决定将来的你。',
|
||||
date: '2021-04-01',
|
||||
group: '算法组',
|
||||
icon: 'ion:logo-vue',
|
||||
title: 'Vue',
|
||||
url: 'https://vuejs.org',
|
||||
},
|
||||
{
|
||||
color: '#e18525',
|
||||
content: '没有什么才能比努力更重要。',
|
||||
date: '2021-04-01',
|
||||
group: '上班摸鱼',
|
||||
icon: 'ion:logo-html5',
|
||||
title: 'Html5',
|
||||
url: 'https://developer.mozilla.org/zh-CN/docs/Web/HTML',
|
||||
},
|
||||
{
|
||||
color: '#bf0c2c',
|
||||
content: '热情和欲望可以突破一切难关。',
|
||||
date: '2021-04-01',
|
||||
group: 'UI',
|
||||
icon: 'ion:logo-angular',
|
||||
title: 'Angular',
|
||||
url: 'https://angular.io',
|
||||
},
|
||||
{
|
||||
color: '#00d8ff',
|
||||
content: '健康的身体是实现目标的基石。',
|
||||
date: '2021-04-01',
|
||||
group: '技术牛',
|
||||
icon: 'bx:bxl-react',
|
||||
title: 'React',
|
||||
url: 'https://reactjs.org',
|
||||
},
|
||||
{
|
||||
color: '#EBD94E',
|
||||
content: '路是走出来的，而不是空想出来的。',
|
||||
date: '2021-04-01',
|
||||
group: '架构组',
|
||||
icon: 'ion:logo-javascript',
|
||||
title: 'Js',
|
||||
url: 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript',
|
||||
},
|
||||
];
|
||||
|
||||
// 同样，这里的 url 也可以使用以 http 开头的外部链接
|
||||
const quickNavItems: WorkbenchQuickNavItem[] = [
|
||||
const cv: WorkbenchQuickNavItem[] = [
|
||||
{
|
||||
color: '#1fdaca',
|
||||
icon: 'ion:home-outline',
|
||||
title: '首页',
|
||||
url: '/',
|
||||
color: "#3fb27f",
|
||||
authority: ['iva'],
|
||||
icon: "mdi:video",
|
||||
title: "视频智能分析",
|
||||
url: "/cv/iva"
|
||||
},
|
||||
{
|
||||
color: '#bf0c2c',
|
||||
color: "#3fb27f",
|
||||
authority: ['sca'],
|
||||
icon: "mdi:ice-cream",
|
||||
title: "蚕茧仪评分析",
|
||||
url: "/cv/sca"
|
||||
},
|
||||
{
|
||||
color: "#3fb27f",
|
||||
authority: ['ysa'],
|
||||
icon: "mdi:waveform",
|
||||
title: "催青阶段分析",
|
||||
url: "/cv/ysa"
|
||||
},
|
||||
{
|
||||
color: "#3fb27f",
|
||||
icon: "ion:bar-chart-outline",
|
||||
title: "标注平台入口",
|
||||
authority: ['user'],
|
||||
url: "http://171.212.101.199:13013/"
|
||||
},
|
||||
];
|
||||
const llm: WorkbenchQuickNavItem[] = [
|
||||
{
|
||||
color: "#1fdaca",
|
||||
authority: ['bot'],
|
||||
icon: "mdi:face-agent",
|
||||
title: "通用智能体",
|
||||
url: "/llm/bot"
|
||||
},
|
||||
{
|
||||
color: "#1fdaca",
|
||||
authority: ['report'],
|
||||
icon: 'mdi:set-center',
|
||||
title: "智农观数阁",
|
||||
url: "/llm/report/report-chat"
|
||||
},
|
||||
{
|
||||
color: "#1fdaca",
|
||||
authority: ['service'],
|
||||
icon: 'mdi:android-head',
|
||||
title: "灵思智服阁",
|
||||
url: "/llm/service/service-chat"
|
||||
},
|
||||
];
|
||||
const common: WorkbenchQuickNavItem[] = [
|
||||
{
|
||||
color: "#bf0c2c",
|
||||
authority: ['remote'],
|
||||
icon: "carbon:workspace",
|
||||
title: "设备远程控制",
|
||||
url: "/remote"
|
||||
},
|
||||
{
|
||||
color: "#bf0c2c",
|
||||
icon: 'ion:grid-outline',
|
||||
title: '仪表盘',
|
||||
url: '/dashboard',
|
||||
},
|
||||
{
|
||||
color: '#e18525',
|
||||
icon: 'ion:layers-outline',
|
||||
title: '组件',
|
||||
url: '/demos/features/icons',
|
||||
},
|
||||
{
|
||||
color: '#3fb27f',
|
||||
icon: 'ion:settings-outline',
|
||||
title: '系统管理',
|
||||
url: '/demos/features/login-expired', // 这里的 URL 是示例，实际项目中需要根据实际情况进行调整
|
||||
},
|
||||
{
|
||||
color: '#4daf1bc9',
|
||||
icon: 'ion:key-outline',
|
||||
title: '权限管理',
|
||||
url: '/demos/access/page-control',
|
||||
},
|
||||
{
|
||||
color: '#00d8ff',
|
||||
icon: 'ion:bar-chart-outline',
|
||||
title: '图表',
|
||||
url: '/analytics',
|
||||
title: "RAGFlow",
|
||||
authority: ['user'],
|
||||
url: "/out/rag"
|
||||
},
|
||||
];
|
||||
|
||||
const todoItems = ref<WorkbenchTodoItem[]>([
|
||||
{
|
||||
completed: false,
|
||||
content: `审查最近提交到Git仓库的前端代码，确保代码质量和规范。`,
|
||||
date: '2024-07-30 11:00:00',
|
||||
title: '审查前端代码提交',
|
||||
},
|
||||
{
|
||||
completed: true,
|
||||
content: `检查并优化系统性能，降低CPU使用率。`,
|
||||
date: '2024-07-30 11:00:00',
|
||||
title: '系统性能优化',
|
||||
},
|
||||
{
|
||||
completed: false,
|
||||
content: `进行系统安全检查，确保没有安全漏洞或未授权的访问。 `,
|
||||
date: '2024-07-30 11:00:00',
|
||||
title: '安全检查',
|
||||
},
|
||||
{
|
||||
completed: false,
|
||||
content: `更新项目中的所有npm依赖包，确保使用最新版本。`,
|
||||
date: '2024-07-30 11:00:00',
|
||||
title: '更新项目依赖',
|
||||
},
|
||||
{
|
||||
completed: false,
|
||||
content: `修复用户报告的页面UI显示问题，确保在不同浏览器中显示一致。 `,
|
||||
date: '2024-07-30 11:00:00',
|
||||
title: '修复UI显示问题',
|
||||
},
|
||||
]);
|
||||
const trendItems: WorkbenchTrendItem[] = [
|
||||
{
|
||||
avatar: 'svg:avatar-1',
|
||||
content: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`,
|
||||
date: '刚刚',
|
||||
title: '威廉',
|
||||
},
|
||||
{
|
||||
avatar: 'svg:avatar-2',
|
||||
content: `关注了 <a>威廉</a> `,
|
||||
date: '1个小时前',
|
||||
title: '艾文',
|
||||
},
|
||||
{
|
||||
avatar: 'svg:avatar-3',
|
||||
content: `发布了 <a>个人动态</a> `,
|
||||
date: '1天前',
|
||||
title: '克里斯',
|
||||
},
|
||||
{
|
||||
avatar: 'svg:avatar-4',
|
||||
content: `发表文章 <a>如何编写一个Vite插件</a> `,
|
||||
date: '2天前',
|
||||
title: 'Vben',
|
||||
},
|
||||
{
|
||||
avatar: 'svg:avatar-1',
|
||||
content: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
|
||||
date: '3天前',
|
||||
title: '皮特',
|
||||
},
|
||||
{
|
||||
avatar: 'svg:avatar-2',
|
||||
content: `关闭了问题 <a>如何运行项目</a> `,
|
||||
date: '1周前',
|
||||
title: '杰克',
|
||||
},
|
||||
{
|
||||
avatar: 'svg:avatar-3',
|
||||
content: `发布了 <a>个人动态</a> `,
|
||||
date: '1周前',
|
||||
title: '威廉',
|
||||
},
|
||||
{
|
||||
avatar: 'svg:avatar-4',
|
||||
content: `推送了代码到 <a>Github</a>`,
|
||||
date: '2021-04-01 20:00',
|
||||
title: '威廉',
|
||||
},
|
||||
{
|
||||
avatar: 'svg:avatar-4',
|
||||
content: `发表文章 <a>如何编写使用 Admin Vben</a> `,
|
||||
date: '2021-03-01 20:00',
|
||||
title: 'Vben',
|
||||
},
|
||||
];
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 这是一个示例方法，实际项目中需要根据实际情况进行调整
|
||||
// This is a sample method, adjust according to the actual project requirements
|
||||
function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
|
||||
if (nav.url?.startsWith('http')) {
|
||||
if (nav.url?.startsWith("http")) {
|
||||
openWindow(nav.url);
|
||||
return;
|
||||
}
|
||||
if (nav.url?.startsWith('/')) {
|
||||
if (nav.url?.startsWith("/")) {
|
||||
router.push(nav.url).catch((error) => {
|
||||
console.error('Navigation failed:', error);
|
||||
console.error("Navigation failed:", error);
|
||||
});
|
||||
} else {
|
||||
console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
|
||||
}
|
||||
}
|
||||
|
||||
function getGreeting() {
|
||||
const hour = new Date().getHours();
|
||||
if (hour < 6) return '凌晨好';
|
||||
if (hour < 12) return '早安';
|
||||
if (hour < 18) return '下午好';
|
||||
return '晚上好';
|
||||
if (hour < 6) return "凌晨好";
|
||||
if (hour < 12) return "早安";
|
||||
if (hour < 18) return "下午好";
|
||||
return "晚上好";
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -240,7 +117,38 @@ function getGreeting() {
|
||||
{{ getGreeting() }}, {{ userStore.userInfo?.username }},
|
||||
开始您一天的工作吧！
|
||||
</template>
|
||||
<template #description> 欢迎使用主干AI实验室 </template>
|
||||
<template #description> 欢迎使用主干AI实验室</template>
|
||||
</WorkbenchHeader>
|
||||
|
||||
<div class="mt-5 flex flex-col lg:flex-row">
|
||||
<div class="w-full">
|
||||
<WorkbenchQuickNav
|
||||
:items="cv"
|
||||
class="mt-5 lg:mt-0"
|
||||
title="计算机视觉"
|
||||
@click="navTo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 flex flex-col lg:flex-row">
|
||||
<div class="w-full">
|
||||
<WorkbenchQuickNav
|
||||
:items="llm"
|
||||
class="mt-5 lg:mt-0"
|
||||
title="大语言模型"
|
||||
@click="navTo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 flex flex-col lg:flex-row">
|
||||
<div class="w-full">
|
||||
<WorkbenchQuickNav
|
||||
:items="common"
|
||||
class="mt-5 lg:mt-0"
|
||||
title="其他应用"
|
||||
@click="navTo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,40 +1,39 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, nextTick, onMounted, reactive, ref } from 'vue';
|
||||
import { computed, nextTick, onMounted, reactive, ref } from "vue";
|
||||
|
||||
import MarkdownIt from 'markdown-it';
|
||||
import { markdownItTable } from 'markdown-it-table';
|
||||
import MarkdownIt from "markdown-it";
|
||||
import { markdownItTable } from "markdown-it-table";
|
||||
|
||||
import * as api from '#/api';
|
||||
import * as api from "#/api";
|
||||
|
||||
const md = new MarkdownIt({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true,
|
||||
typographer: true
|
||||
}).use(markdownItTable);
|
||||
|
||||
// AI 实体
|
||||
interface AgentItem {
|
||||
id: string;
|
||||
title: string;
|
||||
welcome_words: string;
|
||||
}
|
||||
|
||||
// 输入框内容
|
||||
const inputMessage = ref('');
|
||||
const inputMessage = ref("");
|
||||
|
||||
// 对话列表
|
||||
const conversations = ref<{ id: string; title: string; updatedAt: string }[]>(
|
||||
[],
|
||||
);
|
||||
const conversations = ref<AgentItem[]>([]);
|
||||
// AI列表
|
||||
const aiOptions = ref<{ id: string; name: string; welcomeWords?: string }[]>(
|
||||
[],
|
||||
);
|
||||
const aiOptions = ref<AgentItem[]>([]);
|
||||
|
||||
// 当前选中的AI
|
||||
const selectedAI = ref<null | {
|
||||
id: string;
|
||||
name: string;
|
||||
welcomeWords?: string;
|
||||
}>(null);
|
||||
const selectedAI = ref<AgentItem | null>(null);
|
||||
// 当前选中的对话
|
||||
const currentSession = ref<null | string>(null);
|
||||
|
||||
// 聊天记录
|
||||
const messages = reactive<{ content: string; sender: 'ai' | 'user' }[]>([]);
|
||||
const messages = reactive<{ content: string; sender: "ai" | "user" }[]>([]);
|
||||
|
||||
// 计算第一次聊天状态
|
||||
const isInitial = computed(() => messages.length === 0);
|
||||
@@ -57,15 +56,15 @@ function handleEnter(e: KeyboardEvent) {
|
||||
function autoResize(e: Event) {
|
||||
const target = e.target as HTMLTextAreaElement;
|
||||
if (!target) return;
|
||||
target.style.height = 'auto';
|
||||
target.style.height = "auto";
|
||||
target.style.height = `${target.scrollHeight}px`;
|
||||
}
|
||||
|
||||
// 滚动到底部
|
||||
function scrollToBottom() {
|
||||
const container = document.querySelector('#chat-container');
|
||||
const container = document.querySelector("#chat-container");
|
||||
if (container)
|
||||
container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
|
||||
container.scrollTo({ top: container.scrollHeight, behavior: "smooth" });
|
||||
}
|
||||
|
||||
// 模拟接口获取对话列表
|
||||
@@ -92,30 +91,30 @@ async function sendMessage() {
|
||||
const content = inputMessage.value.trim();
|
||||
if (!content) return;
|
||||
|
||||
messages.push({ type: 'human', content });
|
||||
inputMessage.value = '';
|
||||
messages.push({ type: "human", content });
|
||||
inputMessage.value = "";
|
||||
|
||||
nextTick(() => scrollToBottom());
|
||||
|
||||
// 发送消息
|
||||
const answer = await api.chat(
|
||||
selectedAI.value?.id || '',
|
||||
const answer = await api.chatWithBot(
|
||||
selectedAI.value?.id || "",
|
||||
currentSession.value,
|
||||
content,
|
||||
content
|
||||
);
|
||||
currentSession.value = answer.sessionId;
|
||||
if (answer.isNewSession) {
|
||||
conversations.value.unshift({
|
||||
id: answer.sessionId,
|
||||
updatedAt: formatDate(new Date()),
|
||||
title: answer.sessionName,
|
||||
title: answer.sessionName
|
||||
});
|
||||
}
|
||||
messages.push({ type: 'ai', content: answer.content });
|
||||
messages.push({ type: "ai", content: answer.content });
|
||||
nextTick(() => scrollToBottom());
|
||||
// 焦点回到输入框
|
||||
const textarea = document.querySelector(
|
||||
'textarea[placeholder="输入消息开始聊天..."], textarea[placeholder="输入消息..."]',
|
||||
"textarea[placeholder=\"输入消息开始聊天...\"], textarea[placeholder=\"输入消息...\"]"
|
||||
) as HTMLTextAreaElement;
|
||||
if (textarea) {
|
||||
textarea.focus();
|
||||
@@ -131,22 +130,24 @@ function createNewConversation() {
|
||||
// 获取AI列表
|
||||
const fetchOptions = async () => {
|
||||
try {
|
||||
aiOptions.value = await api.getAIList();
|
||||
aiOptions.value = await api.getAIBotList();
|
||||
if (aiOptions.value.length > 0 && aiOptions.value[0] !== undefined) {
|
||||
selectedAI.value = aiOptions.value[0]!;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取下拉选项失败:', error);
|
||||
console.error("获取下拉选项失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
function formatDate(date: Date): string {
|
||||
const pad = (n: number) => n.toString().padStart(2, '0');
|
||||
const pad = (n: number) => n.toString().padStart(2, "0");
|
||||
|
||||
return (
|
||||
`${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ` +
|
||||
`${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
|
||||
);
|
||||
}
|
||||
|
||||
// 页面加载时调用接口
|
||||
onMounted(() => {
|
||||
fetchOptions();
|
||||
@@ -188,7 +189,7 @@ onMounted(() => {
|
||||
class="flex-1 rounded border border-gray-300 p-1"
|
||||
>
|
||||
<option v-for="item in aiOptions" :key="item.id" :value="item">
|
||||
{{ item.name }}
|
||||
{{ item.title }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -225,7 +226,7 @@ onMounted(() => {
|
||||
<div class="flex w-full flex-col items-center space-y-4">
|
||||
<!-- 欢迎词 -->
|
||||
<div class="text-center text-lg text-gray-700">
|
||||
{{ selectedAI?.welcomeWords }}
|
||||
{{ selectedAI?.welcome_words }}
|
||||
</div>
|
||||
|
||||
<!-- 输入框 -->
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>正在开发中，敬请期待</h1>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user