feat: 添加环境变量示例，更新样式和依赖，增强全局状态管理
This commit is contained in:
232
pages/index.vue
232
pages/index.vue
@ -1,73 +1,207 @@
|
||||
<script lang="ts" setup>
|
||||
import { uuidv4 } from "@uniiem/uuid";
|
||||
import type { IWorkflowResponse, LocalMessage, VisitorRole } from "~/types";
|
||||
|
||||
const gstate = useGState();
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
|
||||
const getPopularInquiriesByRole = () => {
|
||||
return [
|
||||
{
|
||||
label: "新生入学",
|
||||
inquiries: [
|
||||
{
|
||||
question: "新生报到时间",
|
||||
},
|
||||
{
|
||||
question: "新生报到流程",
|
||||
},
|
||||
{
|
||||
question: "如何到达学院",
|
||||
},
|
||||
{
|
||||
question: "如何办理户口迁移",
|
||||
},
|
||||
{
|
||||
question: "学院 VPN 使用方法",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "学校概况",
|
||||
},
|
||||
{
|
||||
label: "学术学习",
|
||||
},
|
||||
{
|
||||
label: "生活服务",
|
||||
},
|
||||
{
|
||||
label: "就业辅导",
|
||||
},
|
||||
];
|
||||
return {
|
||||
stu: [
|
||||
{
|
||||
label: "新生入学",
|
||||
inquiries: [
|
||||
{
|
||||
question: "新生报到时间",
|
||||
},
|
||||
{
|
||||
question: "新生报到流程",
|
||||
},
|
||||
{
|
||||
question: "如何到达学院",
|
||||
},
|
||||
{
|
||||
question: "如何办理户口迁移",
|
||||
},
|
||||
{
|
||||
question: "学院 VPN 使用方法",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "学校概况",
|
||||
},
|
||||
{
|
||||
label: "学术学习",
|
||||
},
|
||||
{
|
||||
label: "生活服务",
|
||||
},
|
||||
{
|
||||
label: "就业辅导",
|
||||
},
|
||||
],
|
||||
tea: [
|
||||
{
|
||||
label: "教学管理",
|
||||
},
|
||||
{
|
||||
label: "科研管理",
|
||||
},
|
||||
{
|
||||
label: "学生管理",
|
||||
},
|
||||
{
|
||||
label: "教学资源",
|
||||
},
|
||||
{
|
||||
label: "教学评价",
|
||||
},
|
||||
],
|
||||
fans: [
|
||||
{
|
||||
label: "校园风光",
|
||||
},
|
||||
{
|
||||
label: "校园活动",
|
||||
},
|
||||
{
|
||||
label: "校园新闻",
|
||||
},
|
||||
{
|
||||
label: "校园文化",
|
||||
},
|
||||
{
|
||||
label: "校园历史",
|
||||
},
|
||||
],
|
||||
} as Record<
|
||||
VisitorRole,
|
||||
{ label: string; inquiries?: Array<{ question: string }> }[]
|
||||
>;
|
||||
};
|
||||
|
||||
const inquiries = computed(() => getPopularInquiriesByRole());
|
||||
const scrollArea = ref<HTMLDivElement | null>(null);
|
||||
// 滤除 details 标签正则
|
||||
const regex = /(?<=<\/details>\n\n)[\s\S]*/gm;
|
||||
|
||||
// 常见问题
|
||||
const inquiries = computed(
|
||||
() => getPopularInquiriesByRole()[gstate.currentRole]
|
||||
);
|
||||
|
||||
const responding = ref(false);
|
||||
const inquiryInput = ref("");
|
||||
const onInquirySubmit = async () => {
|
||||
if (inquiryInput.value) {
|
||||
gstate.insertOrUpdateMessage({
|
||||
id: uuidv4(),
|
||||
role: "user",
|
||||
message: inquiryInput.value,
|
||||
});
|
||||
responding.value = true;
|
||||
|
||||
scrollLastMessageIntoView();
|
||||
|
||||
let botMessageId = uuidv4();
|
||||
gstate.insertOrUpdateMessage({
|
||||
id: botMessageId,
|
||||
role: "bot",
|
||||
});
|
||||
|
||||
try {
|
||||
const resp = await useFetch<IWorkflowResponse>(
|
||||
`${runtimeConfig.public.DifyBaseURL}/workflows/run`,
|
||||
{
|
||||
method: "post",
|
||||
headers: {
|
||||
Authorization: `Bearer ${runtimeConfig.public.DifyApiKey}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
inputs: {
|
||||
question: inquiryInput.value,
|
||||
role: gstate.currentRole,
|
||||
},
|
||||
response_mode: "blocking",
|
||||
user: "abc-123",
|
||||
}),
|
||||
}
|
||||
);
|
||||
gstate.insertOrUpdateMessage({
|
||||
id: botMessageId,
|
||||
role: "bot",
|
||||
message:
|
||||
resp.data.value?.data.outputs.message.match(regex)?.[0] ||
|
||||
"网络繁忙，请稍后再试",
|
||||
});
|
||||
} catch (error) {
|
||||
gstate.insertOrUpdateMessage({
|
||||
id: botMessageId,
|
||||
role: "bot",
|
||||
message: "网络繁忙，请稍后再试",
|
||||
});
|
||||
}
|
||||
inquiryInput.value = "";
|
||||
|
||||
responding.value = false;
|
||||
scrollLastMessageIntoView();
|
||||
}
|
||||
};
|
||||
|
||||
const scrollLastMessageIntoView = () => {
|
||||
nextTick(() => {
|
||||
scrollArea.value?.scrollTo({
|
||||
top: scrollArea.value?.scrollHeight,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="p-4 h-full flex flex-col gap-4 mb-20">
|
||||
<PopularInquiries :inquiries-list="inquiries" />
|
||||
|
||||
<ChatUserMessage message="眩生花是什么？" />
|
||||
<ChatBotMessage
|
||||
name="AI 辅导员"
|
||||
message="眩生花是一家科技公司，全称为重庆眩生花科技有限公司。它专注于新一代人工智能技术的研发与应用，包括AI大模型、AIGC（生成式人工智能）、AI Agent、AI-First以及AGI（通用人工智能）等领域的创新解决方案。公司的目标是通过这些先进技术为高等教育、职业教育和基础教育等行业提供变革性的服务，助力教育生态的重塑。
|
||||
|
||||
眩生花秉承“以人为本、抱诚守真、求实创新”的价值观，致力于成为AI教育时代的变革者，推动教育方式的革新与进步。"
|
||||
<div ref="scrollArea" class="h-full overflow-auto overflow-x-hidden mb-20">
|
||||
<div class="p-4 h-full flex flex-col gap-4">
|
||||
<PopularInquiries
|
||||
:inquiries-list="inquiries"
|
||||
@select-inquiry="
|
||||
(inquiry) => {
|
||||
if (responding) return;
|
||||
inquiryInput = inquiry;
|
||||
onInquirySubmit();
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
||||
<ChatMessage
|
||||
v-for="message in gstate.messages"
|
||||
:name="gstate.botName"
|
||||
:key="message.id"
|
||||
:message="message"
|
||||
/>
|
||||
<ChatUserMessage message="这是前端测试示例消息" />
|
||||
<ChatBotMessage name="AI 辅导员" />
|
||||
</div>
|
||||
<div
|
||||
class="fixed inset-x-0 bottom-0 p-4 bg-white/90 rounded-t-2xl shadow-2xl dark:bg-neutral-800/90 backdrop-blur-2xl"
|
||||
>
|
||||
<img
|
||||
src="~/assets/image/pattern/ai_glow.png"
|
||||
class="absolute top-0 inset-x-0 opacity-50"
|
||||
class="absolute top-0 inset-x-0 opacity-50 pointer-events-none"
|
||||
/>
|
||||
<div class="w-full flex justify-between items-center gap-2">
|
||||
<UInput placeholder="请输入问题" class="flex-1" size="xl" />
|
||||
<UInput
|
||||
placeholder="请输入问题"
|
||||
class="flex-1"
|
||||
size="xl"
|
||||
v-model="inquiryInput"
|
||||
/>
|
||||
<UButton
|
||||
color="primary"
|
||||
variant="solid"
|
||||
size="xl"
|
||||
trailing
|
||||
trailing-icon="tabler:send-2"
|
||||
:loading="responding"
|
||||
loading-icon="svg-spinners:tadpole"
|
||||
@click="onInquirySubmit"
|
||||
>提问</UButton
|
||||
>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user