From 12faefcd654f1ab6a4bac448abff6e4fc49f98ed Mon Sep 17 00:00:00 2001 From: chenxt <10125295+chen-xintao97@user.noreply.gitee.com> Date: Thu, 5 Feb 2026 16:02:00 +0800 Subject: [PATCH] ai语音弹窗 --- src/mobile/Ai/AiChatStyles.css | 56 +++++++++++++++++++++++++++++++++++++++++++++++++++----- src/mobile/Ai/AiChatStyles.less | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++------ src/mobile/Ai/newAi.jsx | 114 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------- src/mobile/common/CommobileList.js | 2 +- src/routes/mobile/IndexMobile.js | 2 +- src/utils/config.js | 2 +- 6 files changed, 175 insertions(+), 58 deletions(-) diff --git a/src/mobile/Ai/AiChatStyles.css b/src/mobile/Ai/AiChatStyles.css index cde0c2d..56714a0 100644 --- a/src/mobile/Ai/AiChatStyles.css +++ b/src/mobile/Ai/AiChatStyles.css @@ -78,7 +78,7 @@ body { height: 120px; position: fixed; top: 39px; - z-index: 999; + z-index: 200; width: 100%; } .header-left h1 { @@ -97,7 +97,12 @@ body { width: 40%; flex-wrap: wrap; } -.model-selectors, +.model-Button { + position: fixed; + right: 10px; + top: 50px; + z-index: 200; +} .model-selector { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -128,7 +133,7 @@ body { flex: 1; overflow: hidden; min-height: 0; - margin-top: 160px; + margin-top: 100px; } .chat-main { flex: 1; @@ -258,13 +263,17 @@ body { bottom: 0; left: 50%; transform: translateX(-50%); - z-index: 999; + z-index: 200; width: 100%; } .input-wrapper { display: flex; gap: 10px; position: relative; + align-items: center; +} +.input-icon { + font-size: 30px; } .message-input { padding: 15px 20px; @@ -273,7 +282,7 @@ body { font-size: 16px; outline: none; transition: border-color 0.3s; - width: 60%; + width: 80%; } .message-input:focus { border-color: #667eea; @@ -417,3 +426,40 @@ body { height: 100%; } } +.phone-model { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 201; + width: 100%; + height: 100%; +} +.phone-model .phone-zhezhao { + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 200; + width: 100%; + height: 100%; + background-color: #fff; +} +.phone-model .phone-phone { + position: absolute; + bottom: 40px; + left: 50%; + transform: translateX(-50%); + font-size: 50px; + z-index: 210; +} +.phone-model .phone-content { + position: absolute; + width: 90%; + height: 70%; + background-color: #f3f3f3; + z-index: 210; + left: 50%; + top: 10%; + transform: translateX(-50%); +} diff --git a/src/mobile/Ai/AiChatStyles.less b/src/mobile/Ai/AiChatStyles.less index a9b9b95..0f58a59 100644 --- a/src/mobile/Ai/AiChatStyles.less +++ b/src/mobile/Ai/AiChatStyles.less @@ -71,7 +71,7 @@ body { height: 120px; position: fixed; top: 39px; - z-index: 999; + z-index: 200; width: 100%; } @@ -93,7 +93,12 @@ body { width: 40%; flex-wrap: wrap; } -.model-selectors, +.model-Button { + position: fixed; + right: 10px; + top: 50px; + z-index: 200; +} .model-selector { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); @@ -126,7 +131,7 @@ body { flex: 1; overflow: hidden; min-height: 0; - margin-top: 160px; + margin-top: 100px; } .chat-main { @@ -277,7 +282,7 @@ body { bottom: 0; left: 50%; transform: translateX(-50%); - z-index: 999; + z-index: 200; width: 100%; } @@ -285,8 +290,11 @@ body { display: flex; gap: 10px; position: relative; + align-items: center; +} +.input-icon{ + font-size: 30px; } - .message-input { padding: 15px 20px; border: 2px solid #e9ecef; @@ -294,7 +302,7 @@ body { font-size: 16px; outline: none; transition: border-color 0.3s; - width: 60%; + width: 80%; } .message-input:focus { @@ -441,4 +449,41 @@ body { @keyframes wave { 0%, 100% { height: 20%; } 50% { height: 100%; } +} +.phone-model{ + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 201; + width: 100%; + height: 100%; + .phone-zhezhao{ + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 200; + width: 100%; + height: 100%; + background-color: #fff; + } + .phone-phone{ + position: absolute; + bottom: 40px; + left: 50%; + transform: translateX(-50%); + font-size: 50px; + z-index: 210; + } + .phone-content{ + position: absolute; + width: 90%; + height: 70%; + background-color: #f3f3f3; + z-index: 210; + left: 50%; + top: 10%; + transform: translateX(-50%); + } } \ No newline at end of file diff --git a/src/mobile/Ai/newAi.jsx b/src/mobile/Ai/newAi.jsx index b12c9be..91de968 100644 --- a/src/mobile/Ai/newAi.jsx +++ b/src/mobile/Ai/newAi.jsx @@ -1,7 +1,8 @@ import React, { useState, useEffect, useRef, useCallback } from 'react'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; -import { AudioOutline, AudioFill } from "antd-mobile-icons"; +import { Button } from "antd-mobile"; +import { LocationOutline, PhoneFill } from "antd-mobile-icons"; import './AiChatStyles.less'; const ChatInterface = () => { @@ -17,6 +18,7 @@ const ChatInterface = () => { const [welcomeContent, setWelcomeContent] = useState(''); // 语音输入状态 + const [isVoiceModel, setIsVoiceModel] = useState(false); const [isRecording, setIsRecording] = useState(false); const [isWsConnected, setIsWsConnected] = useState(false); const [isVoiceMode, setIsVoiceMode] = useState(false); @@ -205,9 +207,6 @@ const ChatInterface = () => { recordingTimerRef.current = setInterval(() => { setRecordingDuration(prev => prev + 1); }, 1000); - - console.log("录音已开始"); - } catch (e) { console.error("录音启动失败:", e); alert("录音启动失败：" + e.message); @@ -407,17 +406,17 @@ const ChatInterface = () => { } catch (error) { console.error('请求失败:', error); const errorMessage = ` -抱歉，请求出现错误：${error.message} + 抱歉，请求出现错误：${error.message} -**可能的原因：** -1. Spring Boot 后端服务未启动 -2. API 接口路径不正确 -3. 网络连接问题 + **可能的原因：** + 1. Spring Boot 后端服务未启动 + 2. API 接口路径不正确 + 3. 网络连接问题 -**检查步骤：** -1. 确保后端服务在端口 8099 运行 -2. 检查浏览器控制台查看详细错误 -3. 刷新页面重试 + **检查步骤：** + 1. 确保后端服务在端口 8099 运行 + 2. 检查浏览器控制台查看详细错误 + 3. 刷新页面重试 `; addMessage(errorMessage, 'ai', true); } finally { @@ -466,33 +465,21 @@ const ChatInterface = () => { const handleModelChange = (e) => { setCurrentModel(e.target.value); }; + // 录音弹窗 + const handlePhone = () => { + setIsVoiceModel(true) + startRecording(); + } // ==================== 渲染 ==================== return (
- {/* 头部 */} -
-
-

小羚羊Ai-agent智能体

-

AI 印刷助手

-
-
- - -
-
+ {/* 主体 */}
@@ -570,7 +557,7 @@ const ChatInterface = () => { {/* 输入区域 */}
{/* 语音模式提示 - 仅在录音时显示 */} - {isRecording && ( + {/* {isRecording && (
@@ -589,7 +576,7 @@ const ChatInterface = () => { 取消
- )} + )} */}
{ disabled={isLoading} readOnly={isRecording} /> + + {/* 语音按钮 - 点击切换录音状态 */} - + */} - + */}
+ { + isVoiceModel ? +
+
+
+ +
+ {/* 语音模式提示 - 仅在录音时显示 */} + {isRecording && ( +
+
+ + + + + +
+ + 正在录音 {formatDuration(recordingDuration)} + + +
+ )} +
{ + stopRecording() + setIsVoiceModel(false) + }}> + +
+ +
: '' + } +
); }; diff --git a/src/mobile/common/CommobileList.js b/src/mobile/common/CommobileList.js index 3e574b6..ba2becf 100644 --- a/src/mobile/common/CommobileList.js +++ b/src/mobile/common/CommobileList.js @@ -136,7 +136,7 @@ class CommobileList extends React.Component { {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions onClick={() => this.props.onCopyToClick(rowData)} */} {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */} -
  • this.handleDoubleClick(rowData)} > +
  • { true ?
    diff --git a/src/routes/mobile/IndexMobile.js b/src/routes/mobile/IndexMobile.js index 81f1b93..a3baf24 100644 --- a/src/routes/mobile/IndexMobile.js +++ b/src/routes/mobile/IndexMobile.js @@ -515,7 +515,7 @@ class IndexMobile extends React.Component { commonBusiness.clearSocketData({ token, value: {}, sModelsId: 100 }); this.setState({ selectedTab: "ai", - title: ai, + title: '小羚羊智能体', }); history.push("/indexMobile/ai"); }} diff --git a/src/utils/config.js b/src/utils/config.js index 2aa3ddd..41f86ca 100644 --- a/src/utils/config.js +++ b/src/utils/config.js @@ -9,7 +9,7 @@ const API = process.env.API; const bHttps = false; export const webSite = { faceAddress: isDev ? '//km5cjx.gnway.cc:36867/xlyFace' : '//' + location.host + '/xlyFace', - ipAddress: localStorage.ipAddress ? localStorage.ipAddress : isDev ? '//km5cjx.gnway.cc:37845/xlyEntry/' : '//' + location.host + '/xlyEntry/', + ipAddress: localStorage.ipAddress ? localStorage.ipAddress : isDev ? '//118.178.19.35:9198/xlyEntry_saas/' : '//' + location.host + '/xlyEntry/', // ipAddress: localStorage.ipAddress ? localStorage.ipAddress : isDev ? '//118.178.19.35:8088/xlyEntry/' : '//' + location.host + '/xlyEntry/', // ipAddress: localStorage.ipAddress ? localStorage.ipAddress : isDev ? '//km5cjx.gnway.cc:36867/xlyEntry/' : '//' + location.host + '/xlyEntry/', -- libgit2 0.22.2