修复:AI问答模块

This commit is contained in:
2025-07-09 10:19:03 +08:00
parent ada779f880
commit 5deb2e96b5
6 changed files with 319 additions and 270 deletions

View File

@@ -161,3 +161,37 @@ taro-rich-text-core[space]{
white-space: normal !important; white-space: normal !important;
line-height: 1.8; line-height: 1.8;
} }
html {
font-size: calc(100vw / 375 * 16); // 假设设计稿宽度为375px设置基础字体大小为16px
@media screen and (max-width: 375px) {
font-size: 16px; // 最小字体大小
}
@media screen and (min-width: 768px) {
font-size: 24px; // 平板或大屏设备上的字体大小
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes typing {
0%, 80%, 100% {
transform: scale(0);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}

View File

@@ -1,5 +1,19 @@
// ... existing code ...
html {
font-size: calc(100vw / 375 * 16); // 假设设计稿宽度为375px设置基础字体大小为16px
@media screen and (max-width: 375px) {
font-size: 16px; // 最小字体大小
}
@media screen and (min-width: 768px) {
font-size: 24px; // 平板或大屏设备上的字体大小
}
}
.ai-chat { .ai-chat {
height: 94vh; height: 98vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #f5f5f5; background-color: #f5f5f5;
@@ -9,7 +23,7 @@
color: white; color: white;
padding: 16px; padding: 16px;
text-align: center; text-align: center;
font-size: 18px; font-size: 1.2rem; // 使用 rem 单位
font-weight: bold; font-weight: bold;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} }
@@ -71,13 +85,13 @@
} }
.avatar { .avatar {
width: 40px; width: 60px;
height: 40px; height: 60px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 18px; font-size: 18px; // 可以保持不变或调整为 rem 单位
flex-shrink: 0; flex-shrink: 0;
&.user-avatar { &.user-avatar {
@@ -97,7 +111,7 @@
border-radius: 18px; border-radius: 18px;
word-wrap: break-word; word-wrap: break-word;
line-height: 1.5; line-height: 1.5;
font-size: 14px; font-size: 1rem; // 使用 rem 单位
position: relative; position: relative;
.typing-indicator { .typing-indicator {
@@ -136,16 +150,15 @@
.message-input { .message-input {
width: 100%; width: 100%;
min-height: 40px; min-height: 90px;
max-height: 120px; max-height: 120px;
padding: 10px 16px; padding: 10px 16px;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
border-radius: 20px; border-radius: 20px;
font-size: 14px; font-size: 1.2rem; // 使用 rem 单位
line-height: 1.5; line-height: 1.8;
resize: none; resize: none;
outline: none; outline: none;
background: #f9f9f9;
transition: all 0.3s ease; transition: all 0.3s ease;
&:focus { &:focus {
@@ -197,7 +210,7 @@
border-top: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0;
.quick-title { .quick-title {
font-size: 14px; font-size: 1rem; // 使用 rem 单位
color: #666; color: #666;
margin-bottom: 12px; margin-bottom: 12px;
display: flex; display: flex;
@@ -215,7 +228,7 @@
background: #f9f9f9; background: #f9f9f9;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
border-radius: 12px; border-radius: 12px;
font-size: 14px; font-size: 1rem; // 使用 rem 单位
color: #333; color: #333;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
@@ -246,20 +259,20 @@
text-align: center; text-align: center;
.empty-icon { .empty-icon {
font-size: 64px; font-size: 4rem; // 使用 rem 单位
margin-bottom: 16px; margin-bottom: 16px;
opacity: 0.5; opacity: 0.5;
} }
.empty-title { .empty-title {
font-size: 18px; font-size: 1.5rem; // 使用 rem 单位
font-weight: bold; font-weight: bold;
color: #333; color: #333;
margin-bottom: 8px; margin-bottom: 8px;
} }
.empty-desc { .empty-desc {
font-size: 14px; font-size: 1rem; // 使用 rem 单位
color: #666; color: #666;
line-height: 1.5; line-height: 1.5;
} }

View File

@@ -1,269 +1,273 @@
import { useEffect, useState, useRef } from "react"; import {useEffect, useState, useRef} from "react";
import { View, Textarea } from '@tarojs/components'; import {View, Textarea} from '@tarojs/components';
// import Toast from '@tarojs/taro';
import Taro from '@tarojs/taro'; import Taro from '@tarojs/taro';
import { Button } from '@nutui/nutui-react-taro'; import {Button} from '@nutui/nutui-react-taro';
import { User, ArrowUp } from '@nutui/icons-react-taro'; import {User, ArrowUp} from '@nutui/icons-react-taro';
import { sendAiMessage, stopAiMessage } from '@/api/ai'; import {sendAiMessage, stopAiMessage} from '@/api/ai';
import { createWebSocket } from '@/utils/websocket'; import {createWebSocket} from '@/utils/websocket';
import './index.scss'; import './index.scss';
import {APP_API_URL} from "@/utils/server"; import Header from "../index/Header";
import {WSS_API_URL} from "@/utils/server";
// 消息类型 // 消息类型
interface Message { interface Message {
id?: string; id?: string;
type?: 'user' | 'ai'; type?: 'user' | 'ai';
query?: string; query?: string;
timestamp?: number; timestamp?: number;
isTyping?: boolean; isTyping?: boolean;
user?: string; user?: string;
responseMode?: string; responseMode?: string;
} }
/** /**
* AI问答页面 * AI问答页面
*/ */
const AiChat = () => { const AiChat = () => {
const [messages, setMessages] = useState<Message[]>([]); const [messages, setMessages] = useState<Message[]>([]);
const [inputValue, setInputValue] = useState(''); const [inputValue, setInputValue] = useState('');
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [currentTaskId, setCurrentTaskId] = useState<string>(''); const [currentTaskId, setCurrentTaskId] = useState<string>('');
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
const wsRef = useRef<any>(null); const wsRef = useRef<any>(null);
// 快捷问题 // 快捷问题
const quickQuestions = [ const quickQuestions = [
"当兵的注意事项?", "当兵的注意事项?",
"男兵应征报名对象:", "男兵应征报名对象:",
"当兵公务员考试?", "当兵公务员考试?",
"请问您还有什么问题吗?" "请问您还有什么问题吗?"
]; ];
// 滚动到底部 // 滚动到底部
const scrollToBottom = () => { const scrollToBottom = () => {
setTimeout(() => { if (!Taro.getStorageSync('UserId')) {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); Taro.showToast({
}, 100); title: '请先登录',
}; icon: 'none',
duration: 2000
// 初始化WebSocket连接 });
const initWebSocket = () => { Taro.navigateTo({
const wsUrl = APP_API_URL.replace('https', 'ws') + '/chat/' + Taro.getStorageSync('UserId') || 'token'; url: '/passport/sms-login',
// const wsUrl = 'ws://127.0.0.1:9000/chat/test' })
wsRef.current = createWebSocket(wsUrl); return false;
wsRef.current.onMessage((data: any) => {
console.log('收到WebSocket消息:', data);
if (data.answer) {
if (data.answer === '__END__') {
// 消息结束移除typing状态
setMessages(prev => prev.map(msg =>
msg.isTyping ? { ...msg, isTyping: false } : msg
));
setIsLoading(false);
setCurrentTaskId('');
} else {
// 更新AI回复消息
setMessages(prev => {
const lastMessage = prev[prev.length - 1];
if (lastMessage && lastMessage.type === 'ai' && lastMessage.isTyping) {
// 更新最后一条AI消息
return prev.map((msg, index) =>
index === prev.length - 1
? { ...msg, query: msg.query + data.answer }
: msg
);
} else {
// 创建新的AI消息
return [...prev, {
id: Date.now().toString(),
type: 'ai',
query: data.answer,
timestamp: Date.now(),
isTyping: true
}];
}
});
if (data.taskId) {
setCurrentTaskId(data.taskId);
}
} }
setTimeout(() => {
messagesEndRef.current?.scrollIntoView({behavior: 'smooth'});
}, 100);
};
// 初始化WebSocket连接
const initWebSocket = () => {
// const wsUrl = APP_API_URL.replace('http', 'ws') + '/chat/' + Taro.getStorageSync('UserId') || 'token';
console.log(WSS_API_URL + "/chat/" + Taro.getStorageSync('UserId'), 'wsUrl')
wsRef.current = createWebSocket(WSS_API_URL + "/chat/" + Taro.getStorageSync('UserId'));
wsRef.current.onMessage((data: any) => {
console.log('收到WebSocket消息:', data);
if (data.answer) {
if (data.answer === '__END__') {
// 消息结束移除typing状态
setMessages(prev => prev.map(msg =>
msg.isTyping ? {...msg, isTyping: false} : msg
));
setIsLoading(false);
setCurrentTaskId('');
} else {
// 更新AI回复消息
setMessages(prev => {
const lastMessage = prev[prev.length - 1];
if (lastMessage && lastMessage.type === 'ai' && lastMessage.isTyping) {
// 更新最后一条AI消息
return prev.map((msg, index) =>
index === prev.length - 1
? {...msg, query: msg.query + data.answer}
: msg
);
} else {
// 创建新的AI消息
return [...prev, {
id: Date.now().toString(),
type: 'ai',
query: data.answer,
timestamp: Date.now(),
isTyping: true
}];
}
});
if (data.taskId) {
setCurrentTaskId(data.taskId);
}
}
scrollToBottom();
}
});
wsRef.current.onOpen(() => {
console.log('WebSocket连接成功');
});
wsRef.current.onError((error: any) => {
console.error('WebSocket连接错误:', error);
});
wsRef.current.connect().catch((error: any) => {
console.error('WebSocket连接失败:', error);
});
};
useEffect(() => {
initWebSocket();
Taro.hideTabBar();
return () => {
if (wsRef.current) {
wsRef.current.close();
}
};
}, []);
useEffect(() => {
scrollToBottom(); scrollToBottom();
} }, [messages]);
});
wsRef.current.onOpen(() => { // 发送消息
console.log('WebSocket连接成功'); const handleSendMessage = async (content: string) => {
}); if (!content.trim() || isLoading) return;
wsRef.current.onError((error: any) => { const userMessage: Message = {
console.error('WebSocket连接错误:', error); id: Date.now().toString(),
// Toast.showToast({ title: '连接失败,请检查网络', icon: 'error'}); type: 'user',
}); query: content.trim(),
timestamp: Date.now(),
user: `${Taro.getStorageSync('UserId')}`
};
setMessages(prev => [...prev, userMessage]);
setInputValue('');
setIsLoading(true);
wsRef.current.connect().catch((error: any) => { try {
console.error('WebSocket连接失败:', error); await sendAiMessage({
}); query: content.trim(),
}; user: `${Taro.getStorageSync('UserId')}`,
responseMode: 'streaming',
useEffect(() => { });
initWebSocket(); } catch (error) {
Taro.hideTabBar(); console.error('发送消息失败:', error);
return () => { setIsLoading(false);
if (wsRef.current) { }
wsRef.current.close();
}
}; };
}, []);
useEffect(() => { // 停止AI回复
scrollToBottom(); const handleStopMessage = async () => {
}, [messages]); if (currentTaskId) {
try {
// 发送消息 await stopAiMessage({taskId: currentTaskId});
const handleSendMessage = async (content: string) => { setIsLoading(false);
if (!content.trim() || isLoading) return; setCurrentTaskId('');
setMessages(prev => prev.map(msg =>
const userMessage: Message = { msg.isTyping ? {...msg, isTyping: false} : msg
id: Date.now().toString(), ));
type: 'user', } catch (error) {
query: content.trim(), console.error('停止消息失败:', error);
timestamp: Date.now(), }
user: `${Taro.getStorageSync('UserId')}` }
}; };
setMessages(prev => [...prev, userMessage]);
setInputValue('');
setIsLoading(true);
try { // 处理快捷问题点击
await sendAiMessage({ const handleQuickQuestion = (question: string) => {
query: content.trim(), handleSendMessage(question);
user: `${Taro.getStorageSync('UserId')}`, };
responseMode: 'streaming',
});
} catch (error) {
console.error('发送消息失败:', error);
// Toast.showToast({ title: '发送失败,请重试', icon: 'error'});
setIsLoading(false);
}
};
// 停止AI回复 return (
const handleStopMessage = async () => { <View className="ai-chat">
if (currentTaskId) { <Header/>
try { <View className="chat-container">
await stopAiMessage({ taskId: currentTaskId }); <View className="messages-container">
setIsLoading(false); {messages.length === 0 ? (
setCurrentTaskId(''); <View className="empty-state">
setMessages(prev => prev.map(msg => <View className="empty-icon">🤖</View>
msg.isTyping ? { ...msg, isTyping: false } : msg <View className="empty-title">AI助手</View>
)); <View className="empty-desc">
} catch (error) {
console.error('停止消息失败:', error); </View>
} </View>
} ) : (
}; messages.map((message) => (
<View key={message.id} className={`message ${message.type}`}>
// 处理快捷问题点击 <View className={`avatar ${message.type}-avatar`}>
const handleQuickQuestion = (question: string) => { {message.type === 'user' ? <User size={20}/> : '🤖'}
console.log(question,'qqq') </View>
handleSendMessage(question); <View className="message-content">
}; {message.isTyping ? (
<View className="typing-indicator">
return ( <View className="dot"></View>
<View className="ai-chat"> <View className="dot"></View>
{/*<View className="chat-header">*/} <View className="dot"></View>
{/* AI智能问答*/} </View>
{/*</View>*/} ) : (
message.query
<View className="chat-container"> )}
<View className="messages-container"> </View>
{messages.length === 0 ? ( </View>
<View className="empty-state"> ))
<View className="empty-icon">🤖</View> )}
<View className="empty-title">AI助手</View> <View ref={messagesEndRef}/>
<View className="empty-desc">
</View>
</View>
) : (
messages.map((message) => (
<View key={message.id} className={`message ${message.type}`}>
<View className={`avatar ${message.type}-avatar`}>
{message.type === 'user' ? <User size={20} /> : '🤖'}
</View> </View>
<View className="message-content">
{message.isTyping ? ( {messages.length === 0 && (
<View className="typing-indicator"> <View className="quick-questions">
<View className="dot"></View> <View className="quick-title">
<View className="dot"></View> 💡
<View className="dot"></View> </View>
<View className="questions-list">
{quickQuestions.map((question, index) => (
<View
key={index}
className="question-item"
onClick={() => handleQuickQuestion(question)}
>
{question}
</View>
))}
</View>
</View> </View>
) : ( )}
message.query
)} <View className="input-container">
<View className="input-wrapper">
<Textarea
className="message-input"
value={inputValue}
placeholder="请输入您的问题..."
onInput={(e) => setInputValue(e.detail.value)}
onConfirm={() => handleSendMessage(inputValue)}
autoHeight
maxlength={500}
/>
</View>
{isLoading ? (
<Button
onClick={handleStopMessage}
type="danger"
icon={<ArrowUp/>}
>
</Button>
) : (
<Button
type="danger"
onClick={() => handleSendMessage(inputValue)}
// disabled={!inputValue.trim()}
icon={<ArrowUp/>}
>
</Button>
)}
</View> </View>
</View>
))
)}
<View ref={messagesEndRef} />
</View>
{messages.length === 0 && (
<View className="quick-questions">
<View className="quick-title">
💡
</View> </View>
<View className="questions-list">
{quickQuestions.map((question, index) => (
<View
key={index}
className="question-item"
onClick={() => handleQuickQuestion(question)}
>
{question}
</View>
))}
</View>
</View>
)}
<View className="input-container">
<View className="input-wrapper">
<Textarea
className="message-input"
value={inputValue}
placeholder="请输入您的问题..."
onInput={(e) => setInputValue(e.detail.value)}
onConfirm={() => handleSendMessage(inputValue)}
disabled={isLoading}
autoHeight
maxlength={500}
/>
</View>
{isLoading ? (
<Button
onClick={handleStopMessage}
type="danger"
icon={<ArrowUp />}
>
</Button>
) : (
<Button
type="danger"
onClick={() => handleSendMessage(inputValue)}
disabled={!inputValue.trim()}
icon={<ArrowUp />}
>
</Button>
)}
</View> </View>
</View> );
</View>
);
}; };
export default AiChat; export default AiChat;

View File

@@ -1,7 +1,7 @@
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import Taro from '@tarojs/taro'; import Taro from '@tarojs/taro';
import {Button, Space} from '@nutui/nutui-react-taro' import {Button, Space} from '@nutui/nutui-react-taro'
import {TriangleDown} from '@nutui/icons-react-taro' import {TriangleDown,ArrowLeft} from '@nutui/icons-react-taro'
import {Popup, Avatar, NavBar} from '@nutui/nutui-react-taro' import {Popup, Avatar, NavBar} from '@nutui/nutui-react-taro'
import {TenantId} from "@/utils/config"; import {TenantId} from "@/utils/config";
@@ -10,15 +10,15 @@ const Header = (props: any) => {
const [showBasic, setShowBasic] = useState(false) const [showBasic, setShowBasic] = useState(false)
const [statusBarHeight, setStatusBarHeight] = useState<number>() const [statusBarHeight, setStatusBarHeight] = useState<number>()
const onNav = () => { // const onNav = () => {
if (!IsLogin) { // if (!IsLogin) {
//
return false; // return false;
} // }
Taro.switchTab({ // Taro.switchTab({
url: '/pages/user/user', // url: '/pages/user/user',
}) // })
} // }
const reload = () => { const reload = () => {
Taro.getSystemInfo({ Taro.getSystemInfo({
success: (res) => { success: (res) => {
@@ -92,13 +92,8 @@ const Header = (props: any) => {
<TriangleDown size={9}/> <TriangleDown size={9}/>
</div> </div>
) : ( ) : (
<div style={{display: 'flex', alignItems: 'center', gap: '8px'}} onClick={onNav}> <div style={{display: 'flex', alignItems: 'center', gap: '8px'}} onClick={() => Taro.switchTab({url: '/pages/index/index'})}>
<Avatar <Button icon={<ArrowLeft />} />
size="22"
src={props.user?.avatar}
/>
{props.user?.nickname}
<TriangleDown size={9}/>
</div> </div>
)}> )}>
</NavBar> </NavBar>

View File

@@ -156,6 +156,7 @@ const SmsLogin = () => {
return ( return (
<> <>
<div className={'flex flex-col justify-center px-5 pt-3'}> <div className={'flex flex-col justify-center px-5 pt-3'}>
<div className={'text-3xl text-center py-5 font-normal my-10'}></div>
<div className={'flex flex-col justify-between items-center my-2'}> <div className={'flex flex-col justify-between items-center my-2'}>
<Input <Input
type="number" type="number"

View File

@@ -9,6 +9,8 @@ export const SERVER_API_URL = 'https://server.gxwebsoft.com/api';
// 服务接口 // 服务接口
export const APP_API_URL = 'https://cms-api.websoft.top/api'; export const APP_API_URL = 'https://cms-api.websoft.top/api';
// export const APP_API_URL = 'http://127.0.0.1:9000/api'; // export const APP_API_URL = 'http://127.0.0.1:9000/api';
// WSS
export const WSS_API_URL = 'wss://cms-api.websoft.top/api';
/** /**
* 保存用户信息到本地存储 * 保存用户信息到本地存储
* @param token * @param token