diff --git a/src/components/AdSection.tsx b/src/components/AdSection.tsx index d276b12..a1de203 100644 --- a/src/components/AdSection.tsx +++ b/src/components/AdSection.tsx @@ -17,6 +17,19 @@ interface AdBannerProps { } const AdSection: React.FC = ({ isOpen}) => { + const [isMobile, setIsMobile] = useState(false); + + React.useEffect(() => { + const checkDevice = () => { + setIsMobile(window.innerWidth <= 768); + }; + + checkDevice(); + window.addEventListener('resize', checkDevice); + + return () => window.removeEventListener('resize', checkDevice); + }, []); + return (
= ({ isOpen}) => {
万能的助手, 懂你的伙伴
由 驱动
- - - - - e.preventDefault()}> -
- 公众号二维码 -
- - - + ) : + ( + + + + + e.preventDefault()}> +
+ 公众号二维码 +
+ + ) + + } + + + + + {isMobile ? ( + + ) : ( + + )}
@@ -88,33 +133,38 @@ const AdBanner: React.FC = ({ show, closeAd }) => {
-
- - - - - e.preventDefault()}> -
- 公众号二维码 +
+
+ + + + + e.preventDefault()}> +
+ 公众号二维码 -
- - - +
+ + + +
@@ -125,4 +175,63 @@ const AdBanner: React.FC = ({ show, closeAd }) => { ); }; -export { AdSection, AdBanner }; \ No newline at end of file +const AdBannerMobile: React.FC = ({ show, closeAd }) => { + const [isMobile, setIsMobile] = useState(false); + + React.useEffect(() => { + const checkDevice = () => { + setIsMobile(window.innerWidth <= 768); + }; + + checkDevice(); + window.addEventListener('resize', checkDevice); + + return () => window.removeEventListener('resize', checkDevice); + }, []); + + if (!show) return null; + + return ( +
+
+ 广
告 +
+
+
+
+ +
+
+
+ + +
+ +
+
+
+
+ ); +}; + +export { AdSection, AdBanner, AdBannerMobile }; \ No newline at end of file diff --git a/src/components/ChatUI.tsx b/src/components/ChatUI.tsx index ce202c7..f0b42d6 100644 --- a/src/components/ChatUI.tsx +++ b/src/components/ChatUI.tsx @@ -22,7 +22,7 @@ import rehypeKatex from 'rehype-katex' import { SharePoster } from '@/components/SharePoster'; import { MembersManagement } from '@/components/MembersManagement'; import Sidebar from './Sidebar'; -import { AdBanner } from './AdSection'; +import { AdBanner, AdBannerMobile } from './AdSection'; // 使用本地头像数据，避免外部依赖 const getAvatarData = (name: string) => { const colors = ['#1abc9c', '#3498db', '#9b59b6', '#f1c40f', '#e67e22']; @@ -194,6 +194,12 @@ const ChatUI = () => { ); }; + useEffect(() => { + if (messages.length > 0) { + setShowAd(false); + } + }, [messages]); + const handleSendMessage = async () => { //判断是否Loding if (isLoading) return; @@ -493,7 +499,11 @@ const ChatUI = () => { {/* Main Chat Area */}
- + + +
+ setShowAd(false)} /> +
{messages.map((message) => (