fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

加载动画优化

Browse Source
This commit is contained in:
超级老白兔
2025-10-27 17:08:37 +08:00
parent 8cff6750f9
commit 3d8c656224
2 changed files with 71 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageEnter/MessageEnter.module.scss
View File

@@ -436,3 +436,41 @@
opacity: 1;
}
}
// 加载文字和取消按钮同行容器
.aiLoadingTextRow {
display: flex;
align-items: center;
gap: 12px;
}
// 取消AI按钮（显眼版）
.cancelAiButton {
height: 28px;
padding: 0 12px;
font-size: 13px;
border-radius: 6px;
border: 1px solid #ff7875;
background: #fff;
color: #ff4d4f;
font-weight: 500;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(255, 77, 79, 0.15);
&:hover {
color: #fff;
background: #ff4d4f;
border-color: #ff4d4f;
box-shadow: 0 4px 8px rgba(255, 77, 79, 0.3);
transform: translateY(-1px);
}
&:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(255, 77, 79, 0.2);
}
.anticon {
font-size: 12px;
}
}

41
Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageEnter/index.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import { Layout, Input, Button, Modal } from "antd";
import { Layout, Input, Button, Modal, message } from "antd";
import {
SendOutlined,
FolderOutlined,
@@ -46,12 +46,27 @@ const MessageEnter: React.FC<MessageEnterProps> = ({ contract }) => {
state => state.quoteMessageContent,
);
const isLoadingAiChat = useWeChatStore(state => state.isLoadingAiChat);
const updateIsLoadingAiChat = useWeChatStore(
state => state.updateIsLoadingAiChat,
);
const updateQuoteMessageContent = useWeChatStore(
state => state.updateQuoteMessageContent,
);
useEffect(() => {
if (quoteMessageContent) {
setInputValue(quoteMessageContent);
}
}, [quoteMessageContent]);
// 取消AI生成
const handleCancelAi = () => {
// 停止AI加载状态
updateIsLoadingAiChat(false);
// 清空AI回复内容
updateQuoteMessageContent("");
message.info("已取消AI生成");
};
const handleSend = async () => {
if (!inputValue.trim()) return;
const messageId = +Date.now();
@@ -219,13 +234,23 @@ const MessageEnter: React.FC<MessageEnterProps> = ({ contract }) => {
<div className={styles.wave3}></div>
</div>
</div>
<div className={styles.aiLoadingText}>
<span className={styles.loadingTextMain}>AI 正在思考</span>
<span className={styles.loadingDots}>
<span>.</span>
<span>.</span>
<span>.</span>
</span>
<div className={styles.aiLoadingTextRow}>
<div className={styles.aiLoadingText}>
<span className={styles.loadingTextMain}>AI 正在思考</span>
<span className={styles.loadingDots}>
<span>.</span>
<span>.</span>
<span>.</span>
</span>
</div>
<Button
className={styles.cancelAiButton}
onClick={handleCancelAi}
size="small"
icon={<CloseOutlined />}
>
取消生成
</Button>
</div>
<div className={styles.aiLoadingSubText}>
正在分析消息内容，为您生成智能回复