feat: 完整重构小程序匹配功能 + 修复UI对齐 + 文章数据API
主要更新: 1. 按H5网页端完全重构匹配功能(match页面) - 4种匹配类型: 创业合伙/资源对接/导师顾问/团队招募 - 资源对接等类型弹出手机号/微信号输入框 - 去掉重新匹配按钮，改为返回按钮 2. 修复所有卡片对齐和宽度问题 - 目录页附录卡片居中 - 首页阅读进度卡片满宽度 - 我的页面菜单卡片对齐 - 推广中心分享卡片统一宽度 3. 修复目录页图标和文字对齐 - section-icon固定40rpx宽高 - section-title与图标垂直居中 4. 更新真实完整文章标题(62篇) - 从book目录读取真实markdown文件名 - 替换之前的简化标题 5. 新增文章数据API - /api/db/chapters - 获取完整书籍结构 - 支持按ID获取单篇文章内容
This commit is contained in:
卡若
291
components/modules/distribution/auto-withdraw-modal.tsx
Normal file
291
components/modules/distribution/auto-withdraw-modal.tsx
Normal file
@@ -0,0 +1,291 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { X, Settings, CheckCircle, AlertCircle, Zap } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { useStore } from "@/lib/store"
|
||||
|
||||
interface AutoWithdrawModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
interface AutoWithdrawConfig {
|
||||
enabled: boolean
|
||||
minAmount: number
|
||||
method: 'wechat' | 'alipay'
|
||||
account: string
|
||||
name: string
|
||||
}
|
||||
|
||||
export function AutoWithdrawModal({ isOpen, onClose }: AutoWithdrawModalProps) {
|
||||
const { user } = useStore()
|
||||
const [config, setConfig] = useState<AutoWithdrawConfig>({
|
||||
enabled: false,
|
||||
minAmount: 100,
|
||||
method: 'wechat',
|
||||
account: '',
|
||||
name: '',
|
||||
})
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [isSuccess, setIsSuccess] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// 加载已保存的配置
|
||||
useEffect(() => {
|
||||
if (isOpen && user?.id) {
|
||||
const savedConfig = localStorage.getItem(`auto_withdraw_config_${user.id}`)
|
||||
if (savedConfig) {
|
||||
try {
|
||||
setConfig(JSON.parse(savedConfig))
|
||||
} catch {
|
||||
// 忽略解析错误
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [isOpen, user?.id])
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!user?.id) return
|
||||
|
||||
// 验证
|
||||
if (config.enabled) {
|
||||
if (config.minAmount < 10) {
|
||||
setError('最低提现金额不能少于10元')
|
||||
return
|
||||
}
|
||||
if (!config.account) {
|
||||
setError('请填写提现账号')
|
||||
return
|
||||
}
|
||||
if (!config.name) {
|
||||
setError('请填写真实姓名')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
// 保存配置到本地存储
|
||||
localStorage.setItem(`auto_withdraw_config_${user.id}`, JSON.stringify(config))
|
||||
|
||||
// 如果启用了自动提现，也发送到服务器
|
||||
if (config.enabled) {
|
||||
await fetch('/api/distribution/auto-withdraw-config', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
userId: user.id,
|
||||
...config,
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
setIsSuccess(true)
|
||||
} catch (err) {
|
||||
setError('保存失败，请重试')
|
||||
console.error('保存自动提现配置失败:', err)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
setIsSuccess(false)
|
||||
setError(null)
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
{/* 遮罩 */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/80 backdrop-blur-sm"
|
||||
onClick={handleClose}
|
||||
/>
|
||||
|
||||
{/* 弹窗内容 */}
|
||||
<div className="relative w-full max-w-md bg-gradient-to-b from-[#1a1a2e] to-[#0f0f1a] rounded-2xl overflow-hidden shadow-2xl border border-white/10 animate-in fade-in zoom-in-95 duration-200">
|
||||
{/* 关闭按钮 */}
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="absolute top-4 right-4 p-2 rounded-full bg-white/5 hover:bg-white/10 transition-colors z-10"
|
||||
>
|
||||
<X className="w-5 h-5 text-gray-400" />
|
||||
</button>
|
||||
|
||||
{isSuccess ? (
|
||||
/* 成功状态 */
|
||||
<div className="p-8 flex flex-col items-center text-center">
|
||||
<div className="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center mb-4">
|
||||
<CheckCircle className="w-10 h-10 text-green-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-2">设置保存成功</h3>
|
||||
<p className="text-gray-400 text-sm mb-6">
|
||||
{config.enabled
|
||||
? `当可提现金额达到 ¥${config.minAmount} 时，将自动打款到您的${config.method === 'wechat' ? '微信' : '支付宝'}账户`
|
||||
: '自动提现已关闭'
|
||||
}
|
||||
</p>
|
||||
<Button
|
||||
onClick={handleClose}
|
||||
className="w-full bg-[#38bdac] hover:bg-[#2da396] text-white"
|
||||
>
|
||||
完成
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
/* 设置表单 */
|
||||
<div className="p-6">
|
||||
{/* 标题 */}
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 bg-[#38bdac]/20 rounded-xl flex items-center justify-center">
|
||||
<Zap className="w-6 h-6 text-[#38bdac]" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-white">自动提现设置</h3>
|
||||
<p className="text-sm text-gray-400">达到金额自动打款到账户</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 错误提示 */}
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg flex items-center gap-2">
|
||||
<AlertCircle className="w-4 h-4 text-red-400" />
|
||||
<span className="text-sm text-red-400">{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-5">
|
||||
{/* 启用开关 */}
|
||||
<div className="flex items-center justify-between p-4 bg-white/5 rounded-xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<Settings className="w-5 h-5 text-gray-400" />
|
||||
<span className="text-white font-medium">启用自动提现</span>
|
||||
</div>
|
||||
<Switch
|
||||
checked={config.enabled}
|
||||
onCheckedChange={(checked) => setConfig({ ...config, enabled: checked })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{config.enabled && (
|
||||
<>
|
||||
{/* 最低金额 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-gray-400">达到金额自动提现</Label>
|
||||
<div className="relative">
|
||||
<span className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 font-medium">¥</span>
|
||||
<Input
|
||||
type="number"
|
||||
min="10"
|
||||
step="10"
|
||||
value={config.minAmount}
|
||||
onChange={(e) => setConfig({ ...config, minAmount: Number(e.target.value) })}
|
||||
className="pl-8 bg-white/5 border-white/10 text-white h-12"
|
||||
placeholder="100"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">最低提现金额为10元</p>
|
||||
</div>
|
||||
|
||||
{/* 提现方式 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-gray-400">提现方式</Label>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setConfig({ ...config, method: 'wechat' })}
|
||||
className={`flex-1 py-3 px-4 rounded-xl border text-sm font-medium transition-all ${
|
||||
config.method === 'wechat'
|
||||
? 'border-green-500 bg-green-500/10 text-green-400'
|
||||
: 'border-white/10 bg-white/5 text-gray-400 hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 01.213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 00.167-.054l1.903-1.114a.864.864 0 01.717-.098c1.044.303 2.166.468 3.339.468h.319c-.081-.3-.126-.613-.126-.94 0-3.497 3.32-6.336 7.42-6.336.168 0 .335.005.5.015-.591-3.61-4.195-6.286-8.615-6.286z"/>
|
||||
<path d="M18.695 9.37c-3.442 0-6.236 2.302-6.236 5.145 0 2.843 2.794 5.145 6.236 5.145.852 0 1.666-.135 2.412-.384a.632.632 0 01.523.072l1.394.816a.235.235 0 00.122.04.214.214 0 00.213-.215c0-.052-.021-.104-.035-.155l-.285-1.082a.434.434 0 01.156-.484c1.34-.987 2.195-2.443 2.195-4.073 0-2.843-2.794-5.145-6.236-5.145z"/>
|
||||
</svg>
|
||||
微信
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setConfig({ ...config, method: 'alipay' })}
|
||||
className={`flex-1 py-3 px-4 rounded-xl border text-sm font-medium transition-all ${
|
||||
config.method === 'alipay'
|
||||
? 'border-blue-500 bg-blue-500/10 text-blue-400'
|
||||
: 'border-white/10 bg-white/5 text-gray-400 hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19.5 3h-15A1.5 1.5 0 003 4.5v15A1.5 1.5 0 004.5 21h15a1.5 1.5 0 001.5-1.5v-15A1.5 1.5 0 0019.5 3zm-8.35 13.42c-2.16 0-3.92-1.75-3.92-3.92s1.76-3.92 3.92-3.92 3.92 1.75 3.92 3.92-1.76 3.92-3.92 3.92zm6.52.98c-.87-.4-1.75-.8-2.64-1.18.67-.91 1.16-1.96 1.44-3.08h-2.16v-.85h2.58v-.5h-2.58v-.99h1.85c-.1-.35-.25-.68-.44-.99h-1.41V8.96h3.23v.85h1.16v.85h-1.7c.19.31.34.64.44.99h1.26v.85h-2.33c-.28 1.12-.77 2.17-1.44 3.08.89.38 1.77.78 2.64 1.18-.31.55-.63 1.1-.9 1.64z"/>
|
||||
</svg>
|
||||
支付宝
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 收款账号 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-gray-400">
|
||||
{config.method === 'wechat' ? '微信openid' : '支付宝账号'}
|
||||
</Label>
|
||||
<Input
|
||||
value={config.account}
|
||||
onChange={(e) => setConfig({ ...config, account: e.target.value })}
|
||||
className="bg-white/5 border-white/10 text-white h-12"
|
||||
placeholder={config.method === 'wechat' ? '请输入微信openid' : '请输入支付宝账号'}
|
||||
/>
|
||||
{config.method === 'wechat' && (
|
||||
<p className="text-xs text-gray-500">需要用户授权获取的openid，而非微信号</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 真实姓名 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-gray-400">真实姓名</Label>
|
||||
<Input
|
||||
value={config.name}
|
||||
onChange={(e) => setConfig({ ...config, name: e.target.value })}
|
||||
className="bg-white/5 border-white/10 text-white h-12"
|
||||
placeholder="请输入收款人真实姓名"
|
||||
/>
|
||||
<p className="text-xs text-gray-500">必须与收款账户实名一致</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 保存按钮 */}
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={isLoading}
|
||||
className="w-full mt-6 h-12 bg-[#38bdac] hover:bg-[#2da396] text-white font-medium"
|
||||
>
|
||||
{isLoading ? '保存中...' : '保存设置'}
|
||||
</Button>
|
||||
|
||||
{/* 提示 */}
|
||||
<div className="mt-4 p-3 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
|
||||
<p className="text-xs text-yellow-400/80 leading-relaxed">
|
||||
💡 提示：启用自动提现后，当您的可提现金额达到设定值时，系统将自动发起打款。
|
||||
微信打款需要用户openid（通过公众号授权获取），支付宝打款需要实名认证的账号。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
307
components/modules/distribution/realtime-notification.tsx
Normal file
307
components/modules/distribution/realtime-notification.tsx
Normal file
@@ -0,0 +1,307 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { Bell, X, CheckCircle, AlertCircle, Clock, Wallet, Gift, Info } from 'lucide-react'
|
||||
import { useStore } from '@/lib/store'
|
||||
|
||||
// 消息类型
|
||||
interface NotificationMessage {
|
||||
messageId: string
|
||||
type: string
|
||||
data: {
|
||||
message?: string
|
||||
title?: string
|
||||
content?: string
|
||||
amount?: number
|
||||
commission?: number
|
||||
daysRemaining?: number
|
||||
[key: string]: unknown
|
||||
}
|
||||
timestamp: string
|
||||
}
|
||||
|
||||
interface RealtimeNotificationProps {
|
||||
onNewMessage?: (message: NotificationMessage) => void
|
||||
}
|
||||
|
||||
export function RealtimeNotification({ onNewMessage }: RealtimeNotificationProps) {
|
||||
const { user, isLoggedIn } = useStore()
|
||||
const [notifications, setNotifications] = useState<NotificationMessage[]>([])
|
||||
const [unreadCount, setUnreadCount] = useState(0)
|
||||
const [showPanel, setShowPanel] = useState(false)
|
||||
const [lastTimestamp, setLastTimestamp] = useState(new Date().toISOString())
|
||||
|
||||
// 获取消息
|
||||
const fetchMessages = useCallback(async () => {
|
||||
if (!isLoggedIn || !user?.id) return
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/distribution/messages?userId=${user.id}&since=${encodeURIComponent(lastTimestamp)}`
|
||||
)
|
||||
|
||||
if (!response.ok) return
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success && data.messages?.length > 0) {
|
||||
setNotifications(prev => {
|
||||
const newMessages = data.messages.filter(
|
||||
(m: NotificationMessage) => !prev.some(p => p.messageId === m.messageId)
|
||||
)
|
||||
|
||||
if (newMessages.length > 0) {
|
||||
// 更新未读数
|
||||
setUnreadCount(c => c + newMessages.length)
|
||||
|
||||
// 显示Toast通知
|
||||
newMessages.forEach((msg: NotificationMessage) => {
|
||||
showToast(msg)
|
||||
onNewMessage?.(msg)
|
||||
})
|
||||
|
||||
// 更新最后时间戳
|
||||
const latestTime = newMessages.reduce(
|
||||
(max: string, m: NotificationMessage) => m.timestamp > max ? m.timestamp : max,
|
||||
lastTimestamp
|
||||
)
|
||||
setLastTimestamp(latestTime)
|
||||
|
||||
return [...newMessages, ...prev].slice(0, 50) // 保留最近50条
|
||||
}
|
||||
|
||||
return prev
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[RealtimeNotification] 获取消息失败:', error)
|
||||
}
|
||||
}, [isLoggedIn, user?.id, lastTimestamp, onNewMessage])
|
||||
|
||||
// 轮询获取消息
|
||||
useEffect(() => {
|
||||
if (!isLoggedIn || !user?.id) return
|
||||
|
||||
// 立即获取一次
|
||||
fetchMessages()
|
||||
|
||||
// 每5秒轮询一次
|
||||
const intervalId = setInterval(fetchMessages, 5000)
|
||||
|
||||
return () => clearInterval(intervalId)
|
||||
}, [isLoggedIn, user?.id, fetchMessages])
|
||||
|
||||
// 显示Toast通知
|
||||
const showToast = (message: NotificationMessage) => {
|
||||
// 创建Toast元素
|
||||
const toast = document.createElement('div')
|
||||
toast.className = 'fixed top-20 right-4 z-[100] animate-in slide-in-from-right duration-300'
|
||||
toast.innerHTML = `
|
||||
<div class="bg-[#1a1a2e] border border-gray-700 rounded-xl p-4 shadow-xl max-w-sm">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 rounded-full ${getIconBgClass(message.type)} flex items-center justify-center flex-shrink-0">
|
||||
${getIconSvg(message.type)}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-white font-medium text-sm">${getTitle(message.type)}</p>
|
||||
<p class="text-gray-400 text-xs mt-1 line-clamp-2">${message.data.message || message.data.content || ''}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
document.body.appendChild(toast)
|
||||
|
||||
// 3秒后移除
|
||||
setTimeout(() => {
|
||||
toast.classList.add('animate-out', 'slide-out-to-right')
|
||||
setTimeout(() => toast.remove(), 300)
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
// 获取图标背景色
|
||||
const getIconBgClass = (type: string): string => {
|
||||
switch (type) {
|
||||
case 'binding_expiring':
|
||||
return 'bg-orange-500/20'
|
||||
case 'binding_expired':
|
||||
return 'bg-red-500/20'
|
||||
case 'binding_converted':
|
||||
case 'earnings_added':
|
||||
return 'bg-green-500/20'
|
||||
case 'withdrawal_completed':
|
||||
return 'bg-[#38bdac]/20'
|
||||
case 'withdrawal_rejected':
|
||||
return 'bg-red-500/20'
|
||||
default:
|
||||
return 'bg-blue-500/20'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取图标SVG
|
||||
const getIconSvg = (type: string): string => {
|
||||
switch (type) {
|
||||
case 'binding_expiring':
|
||||
return '<svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
|
||||
case 'binding_expired':
|
||||
return '<svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
|
||||
case 'binding_converted':
|
||||
case 'earnings_added':
|
||||
return '<svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
|
||||
case 'withdrawal_completed':
|
||||
return '<svg class="w-5 h-5 text-[#38bdac]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
|
||||
case 'withdrawal_rejected':
|
||||
return '<svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
|
||||
default:
|
||||
return '<svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取标题
|
||||
const getTitle = (type: string): string => {
|
||||
switch (type) {
|
||||
case 'binding_expiring':
|
||||
return '绑定即将过期'
|
||||
case 'binding_expired':
|
||||
return '绑定已过期'
|
||||
case 'binding_converted':
|
||||
return '用户已付款'
|
||||
case 'earnings_added':
|
||||
return '收益增加'
|
||||
case 'withdrawal_approved':
|
||||
return '提现已通过'
|
||||
case 'withdrawal_completed':
|
||||
return '提现已到账'
|
||||
case 'withdrawal_rejected':
|
||||
return '提现被拒绝'
|
||||
case 'system_notice':
|
||||
return '系统通知'
|
||||
default:
|
||||
return '消息通知'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取图标组件
|
||||
const getIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'binding_expiring':
|
||||
return <Clock className="w-5 h-5 text-orange-400" />
|
||||
case 'binding_expired':
|
||||
return <AlertCircle className="w-5 h-5 text-red-400" />
|
||||
case 'binding_converted':
|
||||
case 'earnings_added':
|
||||
return <Gift className="w-5 h-5 text-green-400" />
|
||||
case 'withdrawal_completed':
|
||||
return <CheckCircle className="w-5 h-5 text-[#38bdac]" />
|
||||
case 'withdrawal_rejected':
|
||||
return <AlertCircle className="w-5 h-5 text-red-400" />
|
||||
default:
|
||||
return <Info className="w-5 h-5 text-blue-400" />
|
||||
}
|
||||
}
|
||||
|
||||
// 标记消息已读
|
||||
const markAsRead = async () => {
|
||||
if (!user?.id || notifications.length === 0) return
|
||||
|
||||
const messageIds = notifications.slice(0, 10).map(n => n.messageId)
|
||||
|
||||
try {
|
||||
await fetch('/api/distribution/messages', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ userId: user.id, messageIds }),
|
||||
})
|
||||
|
||||
setUnreadCount(0)
|
||||
} catch (error) {
|
||||
console.error('[RealtimeNotification] 标记已读失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 打开面板时标记已读
|
||||
const handleOpenPanel = () => {
|
||||
setShowPanel(true)
|
||||
if (unreadCount > 0) {
|
||||
markAsRead()
|
||||
}
|
||||
}
|
||||
|
||||
if (!isLoggedIn || !user) return null
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 通知铃铛按钮 */}
|
||||
<button
|
||||
onClick={handleOpenPanel}
|
||||
className="relative p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors"
|
||||
>
|
||||
<Bell className="w-5 h-5 text-white" />
|
||||
{unreadCount > 0 && (
|
||||
<span className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center text-xs text-white font-bold">
|
||||
{unreadCount > 9 ? '9+' : unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* 通知面板 */}
|
||||
{showPanel && (
|
||||
<div className="fixed inset-0 z-50">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||||
onClick={() => setShowPanel(false)}
|
||||
/>
|
||||
|
||||
<div className="absolute top-16 right-4 w-80 max-h-[70vh] bg-[#1a1a2e] border border-gray-700 rounded-xl shadow-2xl overflow-hidden animate-in slide-in-from-top-2 duration-200">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-700">
|
||||
<h3 className="text-white font-semibold">消息通知</h3>
|
||||
<button
|
||||
onClick={() => setShowPanel(false)}
|
||||
className="p-1 rounded-full hover:bg-white/10 transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5 text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 消息列表 */}
|
||||
<div className="max-h-[50vh] overflow-auto">
|
||||
{notifications.length === 0 ? (
|
||||
<div className="py-12 text-center">
|
||||
<Bell className="w-10 h-10 text-gray-600 mx-auto mb-2" />
|
||||
<p className="text-gray-500 text-sm">暂无消息</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-700/50">
|
||||
{notifications.map((notification) => (
|
||||
<div
|
||||
key={notification.messageId}
|
||||
className="p-4 hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`w-10 h-10 rounded-full ${getIconBgClass(notification.type)} flex items-center justify-center flex-shrink-0`}>
|
||||
{getIcon(notification.type)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-white font-medium text-sm">
|
||||
{getTitle(notification.type)}
|
||||
</p>
|
||||
<p className="text-gray-400 text-xs mt-1 line-clamp-2">
|
||||
{notification.data.message || notification.data.content || ''}
|
||||
</p>
|
||||
<p className="text-gray-500 text-xs mt-2">
|
||||
{new Date(notification.timestamp).toLocaleString('zh-CN')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user