修复：AI问答模块

2025-07-09 10:19:03 +08:00
parent ada779f880
commit 5deb2e96b5
6 changed files with 319 additions and 270 deletions
--- a/src/app.scss
+++ b/src/app.scss
@@ -161,3 +161,37 @@ taro-rich-text-core[space]{
  white-space: normal !important;
  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;
+  }
+}
--- a/src/pages/ai/index.scss
+++ b/src/pages/ai/index.scss
@@ -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 {
-  height: 94vh;
+  height: 98vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
@@ -9,7 +23,7 @@
    color: white;
    padding: 16px;
    text-align: center;
-    font-size: 18px;
+    font-size: 1.2rem; // 使用 rem 单位
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
@@ -71,13 +85,13 @@
    }

    .avatar {
-      width: 40px;
-      height: 40px;
+      width: 60px;
+      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
-      font-size: 18px;
+      font-size: 18px; // 可以保持不变或调整为 rem 单位
      flex-shrink: 0;

      &.user-avatar {
@@ -97,7 +111,7 @@
      border-radius: 18px;
      word-wrap: break-word;
      line-height: 1.5;
-      font-size: 14px;
+      font-size: 1rem; // 使用 rem 单位
      position: relative;

      .typing-indicator {
@@ -136,16 +150,15 @@

    .message-input {
      width: 100%;
-      min-height: 40px;
+      min-height: 90px;
      max-height: 120px;
      padding: 10px 16px;
      border: 1px solid #e0e0e0;
      border-radius: 20px;
-      font-size: 14px;
-      line-height: 1.5;
+      font-size: 1.2rem; // 使用 rem 单位
+      line-height: 1.8;
      resize: none;
      outline: none;
-      background: #f9f9f9;
      transition: all 0.3s ease;

      &:focus {
@@ -197,7 +210,7 @@
    border-top: 1px solid #e0e0e0;

    .quick-title {
-      font-size: 14px;
+      font-size: 1rem; // 使用 rem 单位
      color: #666;
      margin-bottom: 12px;
      display: flex;
@@ -215,7 +228,7 @@
        background: #f9f9f9;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
-        font-size: 14px;
+        font-size: 1rem; // 使用 rem 单位
        color: #333;
        cursor: pointer;
        transition: all 0.3s ease;
@@ -246,20 +259,20 @@
    text-align: center;

    .empty-icon {
-      font-size: 64px;
+      font-size: 4rem; // 使用 rem 单位
      margin-bottom: 16px;
      opacity: 0.5;
    }

    .empty-title {
-      font-size: 18px;
+      font-size: 1.5rem; // 使用 rem 单位
      font-weight: bold;
      color: #333;
      margin-bottom: 8px;
    }

    .empty-desc {
-      font-size: 14px;
+      font-size: 1rem; // 使用 rem 单位
      color: #666;
      line-height: 1.5;
    }
--- a/src/pages/ai/index.tsx
+++ b/src/pages/ai/index.tsx
@@ -1,13 +1,13 @@
 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";
+import Header from "../index/Header";
+import {WSS_API_URL} from "@/utils/server";

 // 消息类型
 interface Message {
@@ -41,6 +41,17 @@ const AiChat = () => {

    // 滚动到底部
    const scrollToBottom = () => {
+        if (!Taro.getStorageSync('UserId')) {
+            Taro.showToast({
+                title: '请先登录',
+                icon: 'none',
+                duration: 2000
+            });
+            Taro.navigateTo({
+                url: '/passport/sms-login',
+            })
+            return false;
+        }
        setTimeout(() => {
            messagesEndRef.current?.scrollIntoView({behavior: 'smooth'});
        }, 100);
@@ -48,9 +59,9 @@ const AiChat = () => {

    // 初始化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);
+        // 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);
@@ -100,7 +111,6 @@ const AiChat = () => {

        wsRef.current.onError((error: any) => {
            console.error('WebSocket连接错误:', error);
-      // Toast.showToast({ title: '连接失败，请检查网络', icon: 'error'});
        });

        wsRef.current.connect().catch((error: any) => {
@@ -145,7 +155,6 @@ const AiChat = () => {
            });
        } catch (error) {
            console.error('发送消息失败:', error);
-      // Toast.showToast({ title: '发送失败，请重试', icon: 'error'});
            setIsLoading(false);
        }
    };
@@ -168,16 +177,12 @@ const AiChat = () => {

    // 处理快捷问题点击
    const handleQuickQuestion = (question: string) => {
-    console.log(question,'qqq')
        handleSendMessage(question);
    };

    return (
        <View className="ai-chat">
-      {/*<View className="chat-header">*/}
-      {/*  AI智能问答*/}
-      {/*</View>*/}
-
+            <Header/>
            <View className="chat-container">
                <View className="messages-container">
                    {messages.length === 0 ? (
@@ -238,7 +243,6 @@ const AiChat = () => {
                            placeholder="请输入您的问题..."
                            onInput={(e) => setInputValue(e.detail.value)}
                            onConfirm={() => handleSendMessage(inputValue)}
-              disabled={isLoading}
                            autoHeight
                            maxlength={500}
                        />
@@ -255,7 +259,7 @@ const AiChat = () => {
                        <Button
                            type="danger"
                            onClick={() => handleSendMessage(inputValue)}
-              disabled={!inputValue.trim()}
+                            // disabled={!inputValue.trim()}
                            icon={<ArrowUp/>}
                        >
                        </Button>
--- a/src/pages/index/Header.tsx
+++ b/src/pages/index/Header.tsx
@@ -1,7 +1,7 @@
 import {useEffect, useState} from "react";
 import Taro from '@tarojs/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 {TenantId} from "@/utils/config";

@@ -10,15 +10,15 @@ const Header = (props: any) => {
  const [showBasic, setShowBasic] = useState(false)
  const [statusBarHeight, setStatusBarHeight] = useState<number>()

-  const onNav = () => {
-    if (!IsLogin) {
-
-      return false;
-    }
-    Taro.switchTab({
-      url: '/pages/user/user',
-    })
-  }
+  // const onNav = () => {
+  //   if (!IsLogin) {
+  //
+  //     return false;
+  //   }
+  //   Taro.switchTab({
+  //     url: '/pages/user/user',
+  //   })
+  // }
  const reload = () => {
    Taro.getSystemInfo({
      success: (res) => {
@@ -92,13 +92,8 @@ const Header = (props: any) => {
              <TriangleDown size={9}/>
            </div>
          ) : (
-            <div style={{display: 'flex', alignItems: 'center', gap: '8px'}} onClick={onNav}>
-              <Avatar
-                size="22"
-                src={props.user?.avatar}
-              />
-              {props.user?.nickname}
-              <TriangleDown size={9}/>
+            <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}  onClick={() => Taro.switchTab({url: '/pages/index/index'})}>
+              <Button icon={<ArrowLeft />} />
            </div>
          )}>
      </NavBar>
--- a/src/passport/sms-login.tsx
+++ b/src/passport/sms-login.tsx
@@ -156,6 +156,7 @@ const SmsLogin = () => {
  return (
    <>
      <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'}>
          <Input
            type="number"
--- a/src/utils/server.ts
+++ b/src/utils/server.ts
@@ -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 = 'http://127.0.0.1:9000/api';
+// WSS
+export const WSS_API_URL = 'wss://cms-api.websoft.top/api';
 /**
 * 保存用户信息到本地存储
 * @param token