完善前端项目
This commit is contained in:
@@ -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