From 3a332ffc7189de9a50849f4119749dd568367559 Mon Sep 17 00:00:00 2001 From: hobby Date: Thu, 6 Mar 2025 00:40:32 +0800 Subject: [PATCH] add ad --- package-lock.json | 37 ++++++++++ package.json | 1 + src/components/AdSection.tsx | 128 ++++++++++++++++++++++++++++++++++ src/components/ChatUI.tsx | 9 ++- src/components/Sidebar.tsx | 6 +- src/components/ui/popover.tsx | 29 ++++++++ 6 files changed, 208 insertions(+), 2 deletions(-) create mode 100644 src/components/AdSection.tsx create mode 100644 src/components/ui/popover.tsx diff --git a/package-lock.json b/package-lock.json index 1f8074f..c558cb6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@radix-ui/react-avatar": "^1.1.3", "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-dropdown-menu": "^2.1.6", + "@radix-ui/react-popover": "^1.1.6", "@radix-ui/react-scroll-area": "^1.2.3", "@radix-ui/react-separator": "^1.1.2", "@radix-ui/react-slot": "^1.1.2", @@ -1619,6 +1620,42 @@ } } }, + "node_modules/@radix-ui/react-popover": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.6.tgz", + "integrity": "sha512-NQouW0x4/GnkFJ/pRqsIS3rM/k97VzKnVb2jB7Gq7VEGPy5g7uNV1ykySFt7eWSp3i2uSGFwaJcvIRJBAHmmFg==", + "dependencies": { + "@radix-ui/primitive": "1.1.1", + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-dismissable-layer": "1.1.5", + "@radix-ui/react-focus-guards": "1.1.1", + "@radix-ui/react-focus-scope": "1.1.2", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-popper": "1.2.2", + "@radix-ui/react-portal": "1.1.4", + "@radix-ui/react-presence": "1.1.2", + "@radix-ui/react-primitive": "2.0.2", + "@radix-ui/react-slot": "1.1.2", + "@radix-ui/react-use-controllable-state": "1.1.0", + "aria-hidden": "^1.2.4", + "react-remove-scroll": "^2.6.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-popper": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz", diff --git a/package.json b/package.json index fa400e6..8fa2622 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@radix-ui/react-avatar": "^1.1.3", "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-dropdown-menu": "^2.1.6", + "@radix-ui/react-popover": "^1.1.6", "@radix-ui/react-scroll-area": "^1.2.3", "@radix-ui/react-separator": "^1.1.2", "@radix-ui/react-slot": "^1.1.2", diff --git a/src/components/AdSection.tsx b/src/components/AdSection.tsx new file mode 100644 index 0000000..d276b12 --- /dev/null +++ b/src/components/AdSection.tsx @@ -0,0 +1,128 @@ +import React, { useState } from 'react'; +import { cn } from '../lib/utils'; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; + +interface AdSectionProps { + isOpen: boolean; + closeAd?: () => void; +} + +interface AdBannerProps { + show: boolean; + closeAd: () => void; +} + +const AdSection: React.FC = ({ isOpen}) => { + return ( +
+
+
+ 广告 +
+
+
+
+ +
+
万能的助手, 懂你的伙伴
+
由 驱动
+
+ + + + + e.preventDefault()}> +
+ 公众号二维码 +
+ + + +
+
+
+
+
+ ); +}; + +const AdBanner: React.FC = ({ show, closeAd }) => { + if (!show) return null; + + return ( +
+
+ 广
告 +
+
+
+
+ +
+
+ + + + + e.preventDefault()}> +
+ 公众号二维码 + +
+ + + + +
+
+
+
+ ); +}; + +export { AdSection, AdBanner }; \ No newline at end of file diff --git a/src/components/ChatUI.tsx b/src/components/ChatUI.tsx index b451b0b..ce202c7 100644 --- a/src/components/ChatUI.tsx +++ b/src/components/ChatUI.tsx @@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"; + import { Tooltip, TooltipContent, @@ -21,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'; // 使用本地头像数据，避免外部依赖 const getAvatarData = (name: string) => { const colors = ['#1abc9c', '#3498db', '#9b59b6', '#f1c40f', '#e67e22']; @@ -157,6 +158,7 @@ const ChatUI = () => { const [messages, setMessages] = useState([ ]); + const [showAd, setShowAd] = useState(true); const [inputMessage, setInputMessage] = useState(""); const [isLoading, setIsLoading] = useState(false); const [pendingContent, setPendingContent] = useState(""); @@ -444,9 +446,14 @@ const ChatUI = () => {

{group.name}({users.length})

+ {/* 右侧头像组和按钮 */}
+ {/* 广告位 手机端不展示*/} +
+ setShowAd(false)} /> +
{users.slice(0, 4).map((user) => { const avatarData = getAvatarData(user.name); diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index b960def..a879de7 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -5,6 +5,7 @@ import { cn } from "@/lib/utils"; import GitHubButton from 'react-github-btn'; import '@fontsource/audiowide'; import { groups } from "@/config/groups"; +import { AdSection } from './AdSection'; import { Tooltip, TooltipContent, @@ -118,8 +119,11 @@ const Sidebar = ({ isOpen, toggleSidebar, selectedGroupIndex = 0, onSelectGroup
+ {/* 广告位 */} + + {/* GitHub Star Button - 只在侧边栏打开时显示，放在底部 */} -