完成AI问答模块

src/pages/ai/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: 'AI问答'
+})

src/pages/ai/index.scss

@@ -0,0 +1,289 @@
+.ai-chat {
+  height: 94vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
+
+  .chat-header {
+    background: linear-gradient(135deg, #a6ea66 0%, #ead1ff 100%);
+    color: white;
+    padding: 16px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: bold;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .chat-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .messages-container {
+    flex: 1;
+    padding: 16px;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 2px;
+    }
+  }
+
+  .message {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: flex-start;
+    animation: fadeInUp 0.3s ease-out;
+
+    &.user {
+      flex-direction: row-reverse;
+
+      .message-content {
+        background: linear-gradient(135deg, #ff3535 0%, #FF0000 100%);
+        color: white;
+        margin-left: 0;
+        margin-right: 12px;
+      }
+    }
+
+    &.ai {
+      flex-direction: row;
+
+      .message-content {
+        background: white;
+        color: #333;
+        margin-left: 12px;
+        margin-right: 0;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+    }
+
+    .avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      flex-shrink: 0;
+
+      &.user-avatar {
+        background: linear-gradient(135deg, #df2626 0%, #d10a0a 100%);
+        color: white;
+      }
+
+      &.ai-avatar {
+        background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
+        color: white;
+      }
+    }
+
+    .message-content {
+      max-width: 70%;
+      padding: 12px 16px;
+      border-radius: 18px;
+      word-wrap: break-word;
+      line-height: 1.5;
+      font-size: 14px;
+      position: relative;
+
+      .typing-indicator {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        .dot {
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          background-color: #999;
+          animation: typing 1.4s infinite ease-in-out;
+
+          &:nth-child(1) { animation-delay: -0.32s; }
+          &:nth-child(2) { animation-delay: -0.16s; }
+          &:nth-child(3) { animation-delay: 0s; }
+        }
+      }
+    }
+  }
+
+  .input-container {
+    background: white;
+    padding: 16px;
+    border-top: 1px solid #e0e0e0;
+    display: flex;
+    align-items: flex-end;
+    gap: 12px;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+
+    .input-wrapper {
+      flex: 1;
+      position: relative;
+    }
+
+    .message-input {
+      width: 100%;
+      min-height: 40px;
+      max-height: 120px;
+      padding: 10px 16px;
+      border: 1px solid #e0e0e0;
+      border-radius: 20px;
+      font-size: 14px;
+      line-height: 1.5;
+      resize: none;
+      outline: none;
+      background: #f9f9f9;
+      transition: all 0.3s ease;
+
+      &:focus {
+        border-color: #ffc6c6;
+        background: white;
+        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
+      }
+
+      &::placeholder {
+        color: #999;
+      }
+    }
+
+    .send-button {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #ff0000 0%, #af1403 100%);
+      border: none;
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+
+      &:hover {
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+      }
+
+      &:active {
+        transform: scale(0.95);
+      }
+
+      &:disabled {
+        background: #ccc;
+        cursor: not-allowed;
+        transform: none;
+        box-shadow: none;
+      }
+    }
+  }
+
+  .quick-questions {
+    padding: 16px;
+    background: white;
+    border-top: 1px solid #e0e0e0;
+
+    .quick-title {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 12px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .questions-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      .question-item {
+        padding: 12px 16px;
+        background: #f9f9f9;
+        border: 1px solid #e0e0e0;
+        border-radius: 12px;
+        font-size: 14px;
+        color: #333;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        text-align: left;
+
+        &:hover {
+          background: #667eea;
+          color: white;
+          border-color: #667eea;
+          transform: translateY(-1px);
+          box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+      }
+    }
+  }
+
+  .empty-state {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 20px;
+    text-align: center;
+
+    .empty-icon {
+      font-size: 64px;
+      margin-bottom: 16px;
+      opacity: 0.5;
+    }
+
+    .empty-title {
+      font-size: 18px;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 8px;
+    }
+
+    .empty-desc {
+      font-size: 14px;
+      color: #666;
+      line-height: 1.5;
+    }
+  }
+}
+
+@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;
+  }
+}

src/pages/ai/index.tsx

@@ -0,0 +1,269 @@
+import { useEffect, useState, useRef } from "react";
+import { View, Textarea } from '@tarojs/components';
+// import Toast from '@tarojs/taro';
+import Taro from '@tarojs/taro';
+import { Button } from '@nutui/nutui-react-taro';
+import { User, ArrowUp } from '@nutui/icons-react-taro';
+import { sendAiMessage, stopAiMessage } from '@/api/ai';
+import { createWebSocket } from '@/utils/websocket';
+import './index.scss';
+import {APP_API_URL} from "@/utils/server";
+
+// 消息类型
+interface Message {
+  id?: string;
+  type?: 'user' | 'ai';
+  query?: string;
+  timestamp?: number;
+  isTyping?: boolean;
+  user?: string;
+  responseMode?: string;
+}
+
+/**
+ * AI问答页面
+ */
+const AiChat = () => {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentTaskId, setCurrentTaskId] = useState<string>('');
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const wsRef = useRef<any>(null);
+
+  // 快捷问题
+  const quickQuestions = [
+    "当兵的注意事项？",
+    "男兵应征报名对象：",
+    "当兵公务员考试？",
+    "请问您还有什么问题吗？"
+  ];
+
+  // 滚动到底部
+  const scrollToBottom = () => {
+    setTimeout(() => {
+      messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, 100);
+  };
+
+  // 初始化WebSocket连接
+  const initWebSocket = () => {
+    const wsUrl = APP_API_URL.replace('https', 'ws') + '/chat/' + Taro.getStorageSync('UserId') || 'token';
+    // const wsUrl = 'ws://127.0.0.1:9000/chat/test'
+    wsRef.current = createWebSocket(wsUrl);
+
+    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);
+      // Toast.showToast({ title: '连接失败，请检查网络', icon: 'error'});
+    });
+
+    wsRef.current.connect().catch((error: any) => {
+      console.error('WebSocket连接失败:', error);
+    });
+  };
+
+  useEffect(() => {
+    initWebSocket();
+    Taro.hideTabBar();
+    return () => {
+      if (wsRef.current) {
+        wsRef.current.close();
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  // 发送消息
+  const handleSendMessage = async (content: string) => {
+    if (!content.trim() || isLoading) return;
+
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      type: 'user',
+      query: content.trim(),
+      timestamp: Date.now(),
+      user: `${Taro.getStorageSync('UserId')}`
+    };
+    setMessages(prev => [...prev, userMessage]);
+    setInputValue('');
+    setIsLoading(true);
+
+    try {
+      await sendAiMessage({
+        query: content.trim(),
+        user: `${Taro.getStorageSync('UserId')}`,
+        responseMode: 'streaming',
+      });
+    } catch (error) {
+      console.error('发送消息失败:', error);
+      // Toast.showToast({ title: '发送失败，请重试', icon: 'error'});
+      setIsLoading(false);
+    }
+  };
+
+  // 停止AI回复
+  const handleStopMessage = async () => {
+    if (currentTaskId) {
+      try {
+        await stopAiMessage({ taskId: currentTaskId });
+        setIsLoading(false);
+        setCurrentTaskId('');
+        setMessages(prev => prev.map(msg =>
+          msg.isTyping ? { ...msg, isTyping: false } : msg
+        ));
+      } catch (error) {
+        console.error('停止消息失败:', error);
+      }
+    }
+  };
+
+  // 处理快捷问题点击
+  const handleQuickQuestion = (question: string) => {
+    console.log(question,'qqq')
+    handleSendMessage(question);
+  };
+
+  return (
+    <View className="ai-chat">
+      {/*<View className="chat-header">*/}
+      {/*  AI智能问答*/}
+      {/*</View>*/}
+
+      <View className="chat-container">
+        <View className="messages-container">
+          {messages.length === 0 ? (
+            <View className="empty-state">
+              <View className="empty-icon">🤖</View>
+              <View className="empty-title">您好！我是AI助手</View>
+              <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 className="message-content">
+                  {message.isTyping ? (
+                    <View className="typing-indicator">
+                      <View className="dot"></View>
+                      <View className="dot"></View>
+                      <View className="dot"></View>
+                    </View>
+                  ) : (
+                    message.query
+                  )}
+                </View>
+              </View>
+            ))
+          )}
+          <View ref={messagesEndRef} />
+        </View>
+
+        {messages.length === 0 && (
+          <View className="quick-questions">
+            <View className="quick-title">
+              💡 您可以问我：
+            </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>
+  );
+};
+
+export default AiChat;

src/pages/index/Banner.tsx

@@ -10,7 +10,6 @@ const MyPage = () => {
 
   const reload = () => {
     pageCmsAd({keywords: '幻灯片'}).then(data => {
-      console.log(data,'幻灯片')
       if(data && data?.count > 0){
         const cmsAd = data.list[0];
         setHeight(cmsAd.height)

src/pages/index/Menu.tsx

@@ -10,8 +10,6 @@ const Page = () => {
 
     const reload = () => {
         getSiteInfo().then(res => {
-            console.log(res);
-            console.log(res.topNavs, 'top');
             setNavItems(res.topNavs || []);
         })
     };
@@ -21,19 +19,21 @@ const Page = () => {
     }, [])
 
     return (
-        <div className={'py-2 my-3 mx-2'}>
-            <div className={'bg-white grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-2'}>
-                {
-                    navItems.map((item) => (
-                        <div className={'flex flex-col justify-center items-center'} onClick={() => Taro.navigateTo({url: `/${item.model}/index?id=${item.navigationId}`})}>
-                            <Image className={'shadow-xl rounded-lg'} style={{borderRadius: '8px'}} src={item.icon}
-                                   height={90} width={90}/>
-                            <div className={'mt-2 text-gray-700'} style={{fontSize: '15px'}}>{item?.title}</div>
-                        </div>
-                    ))
-                }
+        <>
+            <div className={'py-2 my-3 mx-2'}>
+                <div className={'bg-white grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-2'}>
+                    {
+                        navItems?.map((item) => (
+                            <div className={'flex flex-col justify-center items-center'} onClick={() => Taro.navigateTo({url: `/${item.model}/index?id=${item.navigationId}`})}>
+                                <Image className={'shadow-xl rounded-lg'} style={{borderRadius: '8px'}} src={item.icon}
+                                       height={90} width={90}/>
+                                <div className={'mt-2 text-gray-700'} style={{fontSize: '15px'}}>{item?.title}</div>
+                            </div>
+                        ))
+                    }
+                </div>
             </div>
-        </div>
+        </>
     )
 }
 export default Page

src/pages/user/components/UserCard.tsx

@@ -1,4 +1,4 @@
-import {Avatar, Tag, Space} from '@nutui/nutui-react-taro'
+import {Avatar} from '@nutui/nutui-react-taro'
 import {useEffect, useState} from "react";
 import {User} from "@/api/system/user/model";
 import navTo from "@/utils/common";
@@ -15,9 +15,9 @@ function UserCard() {
     }, []);
 
     const reload = async () => {
-        setIsLogin(true)
-        if(Taro.getStorageSync('UserId')){
+        if (Taro.getStorageSync('UserId')) {
             setUserInfo(await getUserInfo())
+            setIsLogin(true)
         }
     };
 
@@ -35,7 +35,7 @@ function UserCard() {
                     }}
                 >
                     <div className={'user-card-header flex w-full justify-between items-center'}>
-                        <div className={'flex items-center mx-4'}>
+                        <div className={'flex items-center mx-1'}>
                             {
                                 IsLogin && (
                                     <Avatar size="large" src={userInfo?.avatar} shape="round"/>
@@ -43,24 +43,16 @@ function UserCard() {
                             }
                             {
                                 !IsLogin && (
-                                    <Avatar size="large" src={userInfo?.avatar} shape="round"/>
+                                    <Avatar size="large" onClick={() => Taro.navigateTo({url: '/passport/sms-login'})}
+                                            src={userInfo?.avatar} shape="round"/>
                                 )
                             }
-                            <div className={'user-info flex flex-col px-2'}>
-                                {IsLogin ? (
-                                    <Space className={'grade text-xs py-1'}>
-                                        <Tag type="warning" round>
-                                            <div className={'p-1'}>{'注册用户'}</div>
-                                        </Tag>
-                                        {/*{*/}
-                                        {/*  userInfo?.organizationName && (*/}
-                                        {/*    <Tag type="warning" round>*/}
-                                        {/*      <div className={'p-1'}>{userInfo?.organizationName}</div>*/}
-                                        {/*    </Tag>*/}
-                                        {/*  )*/}
-                                        {/*}*/}
-                                    </Space>
-                                ) : ''}
+                            <div className={'user-info flex flex-col px-1'}>
+                                {!IsLogin ? (
+                                        <div className={'p-1 text-sm text-white'}>{'点击登录'}</div>
+                                    ) :
+                                    <div className={'p-1 text-sm text-white'}>{userInfo?.mobile}</div>
+                                }
                             </div>
                         </div>
                         <div