306 lines
16 KiB
JavaScript
306 lines
16 KiB
JavaScript
/**
|
||
* YichensBoard - 一尘看板页面
|
||
* Version: 0.0.5 (2026-05-13)
|
||
* 更新：增加复制链接功能
|
||
*/
|
||
|
||
import React, { useState, useEffect } from 'react'
|
||
|
||
export default function YichensBoard() {
|
||
const [todayStats, setTodayStats] = useState({ total: 0, deals: 0, wants: 0, others: 0 })
|
||
const [todayCategory, setTodayCategory] = useState([])
|
||
const [posts, setPosts] = useState([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState(null)
|
||
const [expandedPosts, setExpandedPosts] = useState({})
|
||
const [postTypeFilter, setPostTypeFilter] = useState('all')
|
||
const [categoryFilter, setCategoryFilter] = useState('')
|
||
const [numberFilter, setNumberFilter] = useState('')
|
||
const [page, setPage] = useState(1)
|
||
const [totalPosts, setTotalPosts] = useState(0)
|
||
const [searchKeyword, setSearchKeyword] = useState('')
|
||
|
||
const today = new Date()
|
||
const dateStr = today.getFullYear() + '/' + (today.getMonth() + 1) + '/' + today.getDate()
|
||
|
||
useEffect(() => {
|
||
console.log('YichensBoard: 开始加载数据')
|
||
fetchTodayStats()
|
||
}, [])
|
||
|
||
const fetchTodayStats = async () => {
|
||
try {
|
||
console.log('YichensBoard: 请求 /api/yichens/stats/today')
|
||
const res = await fetch('/api/yichens/stats/today')
|
||
if (!res.ok) throw new Error('stats API error: ' + res.status)
|
||
const data = await res.json()
|
||
console.log('YichensBoard: stats data', data)
|
||
setTodayStats(data)
|
||
} catch(e) {
|
||
console.error('YichensBoard: fetchTodayStats error', e)
|
||
setError(e.message)
|
||
}
|
||
}
|
||
|
||
const fetchPosts = async (p, cat, kw, numFilter) => {
|
||
setLoading(true)
|
||
setError(null)
|
||
const currentPage = p !== undefined ? p : page
|
||
const currentCat = cat !== undefined ? cat : categoryFilter
|
||
const searchKw = kw !== undefined ? kw : searchKeyword
|
||
const numFilterVal = numFilter !== undefined ? numFilter : numberFilter
|
||
|
||
let url = '/api/yichens/posts?limit=390&offset=' + ((currentPage - 1) * 390)
|
||
if (postTypeFilter === 'deal') url += '&post_type=deal'
|
||
else if (postTypeFilter === 'want') url += '&post_type=want'
|
||
else if (postTypeFilter === 'other') url += '&post_type=normal'
|
||
if (searchKw && searchKw.trim()) url += '&keyword=' + encodeURIComponent(searchKw.trim())
|
||
if (numFilterVal && numFilterVal !== '') url += '&number_filter=' + encodeURIComponent(numFilterVal)
|
||
|
||
try {
|
||
console.log('YichensBoard: 请求 posts', url)
|
||
const res = await fetch(url)
|
||
if (!res.ok) throw new Error('posts API error: ' + res.status)
|
||
let data = await res.json() || []
|
||
// 确保data是数组
|
||
if (!Array.isArray(data)) {
|
||
data = data.posts || data.data || []
|
||
}
|
||
console.log('YichensBoard: posts data count', data.length)
|
||
if (currentCat && Array.isArray(data)) {
|
||
if (currentCat === '龙') {
|
||
data = data.filter(p => p.category && (p.category.includes('龙') || p.category.includes('纪念钞')))
|
||
} else if (currentCat === '蛇') {
|
||
data = data.filter(p => p.category && p.category.includes('蛇'))
|
||
} else if (currentCat === '马') {
|
||
data = data.filter(p => p.category && p.category.includes('马'))
|
||
} else if (currentCat === '其他') {
|
||
data = data.filter(p => p.category && !p.category.includes('龙') && !p.category.includes('纪念钞') && !p.category.includes('蛇') && !p.category.includes('马'))
|
||
}
|
||
}
|
||
// 号码特色筛选（根据标题和内容关键字）
|
||
if (numberFilter && Array.isArray(data)) {
|
||
const filterKeywords = {
|
||
'带4': ['带4', '带四', '通货', '标四'],
|
||
'无4': ['无4', '无四', '带7'],
|
||
'无47': ['无47', '无四七', '永恒'],
|
||
'无247': ['无247', '无二四七', '天马', '金山'],
|
||
'无347': ['无347', '无三四七', '钻石', '如意', '朦胧', '金马'],
|
||
'年份': ['年份', '生日', '生日号', '纪念'],
|
||
'特色': ['倒置', '圆圆', '豹子', '老虎', '狮子', '大象', '龙三', '龙二']
|
||
}
|
||
const kw = filterKeywords[numberFilter] || []
|
||
if (kw.length > 0) {
|
||
data = data.filter(p => {
|
||
const text = (p.title || '') + (p.content || '') + (p.description || '')
|
||
return kw.some(k => text.includes(k))
|
||
})
|
||
}
|
||
// 筛选后更新totalPosts
|
||
if (numberFilter && data.length > 0) {
|
||
setTotalPosts(data.length)
|
||
}
|
||
}
|
||
// 确保data是数组
|
||
if (!Array.isArray(data)) {
|
||
data = data.posts || data.data || []
|
||
}
|
||
console.log('YichensBoard: posts data count', data.length)
|
||
if (currentCat && Array.isArray(data)) {
|
||
if (currentCat === '龙') {
|
||
data = data.filter(p => p.category && (p.category.includes('龙') || p.category.includes('纪念钞')))
|
||
} else if (currentCat === '蛇') {
|
||
data = data.filter(p => p.category && p.category.includes('蛇'))
|
||
} else if (currentCat === '马') {
|
||
data = data.filter(p => p.category && p.category.includes('马'))
|
||
} else if (currentCat === '其他') {
|
||
data = data.filter(p => p.category && !p.category.includes('龙') && !p.category.includes('纪念钞') && !p.category.includes('蛇') && !p.category.includes('马'))
|
||
}
|
||
}
|
||
// 支持新格式 {posts:[], total:xxx} 或旧格式 [{},{}]
|
||
const postsArray = Array.isArray(data) ? data : (data.posts || [])
|
||
const totalCount = data.total || todayStats.total || postsArray.length
|
||
setPosts(postsArray)
|
||
setTotalPosts(totalCount)
|
||
} catch(e) {
|
||
console.error('YichensBoard: fetchPosts error', e)
|
||
setError(e.message)
|
||
setPosts([])
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (todayStats.total > 0) {
|
||
fetchPosts(1, categoryFilter, searchKeyword, numberFilter)
|
||
}
|
||
}, [todayStats, categoryFilter, postTypeFilter, numberFilter])
|
||
|
||
useEffect(() => {
|
||
setPage(1)
|
||
fetchPosts(1, categoryFilter, searchKeyword, numberFilter)
|
||
}, [searchKeyword, numberFilter])
|
||
|
||
const togglePost = id => setExpandedPosts(p => ({ ...p, [id]: !p[id] }))
|
||
|
||
const StatCard = ({ label, value, color, onClick }) => (
|
||
<div onClick={() => { setLoading(true); if (onClick) onClick(); }}
|
||
style={{
|
||
background: 'linear-gradient(145deg, #1f2937 0%, #111827 100%)',
|
||
borderRadius: 12, padding: '12px 8px', border: '1px solid #374151',
|
||
cursor: onClick ? 'pointer' : 'default',
|
||
textAlign: 'center'
|
||
}}>
|
||
<div style={{ color: '#9ca3af', fontSize: 11, marginBottom: 4 }}>{label}</div>
|
||
<div style={{ color: color || '#fff', fontSize: 20, fontWeight: 'bold' }}>{value}</div>
|
||
</div>
|
||
)
|
||
|
||
if (error) {
|
||
return (
|
||
<div style={{ padding: 20, textAlign: 'center', color: '#ef4444' }}>
|
||
<div>加载失败: {error}</div>
|
||
<button onClick={() => { setError(null); fetchTodayStats(); }} style={{ marginTop: 10, padding: '8px 16px', background: '#3b82f6', color: '#fff', border: 'none', borderRadius: 6, cursor: 'pointer' }}>
|
||
重试
|
||
</button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div style={{ padding: '0' }}>
|
||
<div style={{ marginBottom: 16 }}>
|
||
<div style={{ color: '#f9fafb', fontSize: 14, fontWeight: 600, marginBottom: 10 }}>
|
||
📈 连体钞/纪念钞 <span style={{ color: '#9ca3af', fontWeight: 400 }}>{dateStr}</span>
|
||
</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
|
||
<StatCard label='全部' value={todayStats.total} color='#3b82f6' onClick={() => { setPostTypeFilter('all'); setCategoryFilter(''); setPage(1); }} />
|
||
<StatCard label='出售' value={todayStats.deals} color='#10b981' onClick={() => { setPostTypeFilter('deal'); setCategoryFilter(''); setPage(1); }} />
|
||
<StatCard label='求购' value={todayStats.wants} color='#f59e0b' onClick={() => { setPostTypeFilter('want'); setCategoryFilter(''); setPage(1); }} />
|
||
<StatCard label='其他' value={todayStats.others || 0} color='#8b5cf6' onClick={() => { setPostTypeFilter('other'); setCategoryFilter(''); setPage(1); }} />
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ background: 'linear-gradient(145deg, #1f2937 0%, #111827 100%)', borderRadius: 12, padding: 12, marginBottom: 20, border: '1px solid #374151' }}>
|
||
<div style={{ color: '#f9fafb', fontSize: 14, fontWeight: 600, marginBottom: 8 }}>📊 今日分类统计</div>
|
||
<div style={{ color: '#9ca3af', fontSize: 12 }}>龙: {todayStats.dragons || 0} | 马: {todayStats.horses || 0} | 蛇: {todayStats.snakes || 0} | 天马: {todayStats.tianma || 0}</div>
|
||
</div>
|
||
|
||
<div style={{ marginBottom: 12 }}>
|
||
<div style={{ display: 'flex', gap: 8 }}>
|
||
<input
|
||
type="text"
|
||
placeholder="搜索标题、内容、分类..."
|
||
value={searchKeyword}
|
||
onChange={(e) => { const kw = e.target.value; setSearchKeyword(kw); setPage(1); fetchPosts(1, '', kw) }}
|
||
style={{ flex: 1, padding: '10px 14px', borderRadius: 8, border: '1px solid #374151', background: '#1f2937', color: '#fff', fontSize: 13, outline: 'none' }}
|
||
/>
|
||
<button
|
||
onClick={() => { setSearchKeyword(''); setPage(1); fetchPosts(1, '') }}
|
||
style={{ padding: '10px 16px', borderRadius: 8, border: 'none', background: '#4b5563', color: '#fff', cursor: 'pointer', fontSize: 13 }}>
|
||
清空
|
||
</button>
|
||
</div>
|
||
{searchKeyword && <div style={{ color: '#9ca3af', fontSize: 12, marginTop: 6 }}>搜索: "{searchKeyword}"，共找到 {totalPosts} 条结果</div>}
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
|
||
{[{key:'all',label:'全部'},{key:'deal',label:'出售'},{key:'want',label:'求购'},{key:'other',label:'其他'}].map(k => (
|
||
<button key={k.key} onClick={() => { setPostTypeFilter(k.key==='other'?'other':k.key); setCategoryFilter(''); setPage(1); }}
|
||
style={{ padding: '8px 16px', borderRadius: 8, border: 'none',
|
||
background: postTypeFilter===k.key ? 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)' : '#374151', color: '#fff', cursor: 'pointer', fontSize: 13 }}>
|
||
{k.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
|
||
{[{key:'',label:'全部'},{key:'龙',label:'龙钞'},{key:'蛇',label:'蛇钞'},{key:'马',label:'马钞'},{key:'其他',label:'其他'}].map(k => (
|
||
<button key={k.key} onClick={() => { setCategoryFilter(k.key); setPage(1); }}
|
||
style={{ padding: '8px 16px', borderRadius: 8, border: 'none',
|
||
background: categoryFilter===k.key ? 'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)' : '#374151', color: '#fff', cursor: 'pointer', fontSize: 13 }}>
|
||
{k.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
|
||
{[{key:'',label:'全部'},{key:'带4',label:'带4'},{key:'无4',label:'无4'},{key:'无47',label:'无47'},{key:'无247',label:'无247'},{key:'无347',label:'无347'},{key:'年份',label:'年份'},{key:'特色',label:'其他'}].map(k => (
|
||
<button key={k.key} onClick={() => { setNumberFilter(k.key); setPage(1); }}
|
||
style={{ padding: '8px 16px', borderRadius: 8, border: 'none',
|
||
background: numberFilter===k.key ? 'linear-gradient(135deg, #ec4899 0%, #db2777 100%)' : '#374151', color: '#fff', cursor: 'pointer', fontSize: 13 }}>
|
||
{k.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{loading ? <div style={{textAlign:'center',color:'#9ca3af',padding:40}}>加载中...</div> : (
|
||
<div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||
{posts.length === 0 ? (
|
||
<div style={{ textAlign: 'center', color: '#9ca3af', padding: 40 }}>暂无帖子数据</div>
|
||
) : (
|
||
posts.map(post => (
|
||
<div key={post.post_id} style={{ background: 'linear-gradient(145deg, #1f2937 0%, #111827 100%)', borderRadius: 12, padding: 16, border: '1px solid #374151' }}>
|
||
<div onClick={() => togglePost(post.post_id)} style={{ cursor: 'pointer' }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
|
||
<span style={{ color: '#fff', fontSize: 15, fontWeight: 500, flex: 1 }}>{post.title||'无标题'}</span>
|
||
<div style={{ display: 'flex', gap: 4 }}>
|
||
<span style={{ color: post.post_type==='deal'?'#10b981':post.post_type==='want'?'#f59e0b':post.post_type==='normal'?'#8b5cf6':'#9ca3af', fontSize: 12 }}>
|
||
{post.post_type==='deal'?'出售':post.post_type==='want'?'求购':post.post_type==='normal'?'其他':'普通'}
|
||
</span>
|
||
<span style={{ padding: '2px 8px', borderRadius: 4, fontSize: 11, background: post.category?.includes('龙') ? 'rgba(251,191,36,0.4)' : post.category?.includes('马') ? 'rgba(180,83,9,0.4)' : post.category?.includes('蛇') ? 'rgba(249,168,212,0.4)' : 'rgba(139,92,246,0.4)', color: post.category?.includes('龙') ? '#fde047' : post.category?.includes('马') ? '#d97706' : post.category?.includes('蛇') ? '#fbcfe8' : '#c4b5fd' }}>
|
||
{post.category || '-'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', color: '#9ca3af', fontSize: 12 }}>
|
||
<span>{post.author_username||'未知'}</span>
|
||
<span>{post.post_time?.substring(0,16)||''}</span>
|
||
</div>
|
||
</div>
|
||
{expandedPosts[post.post_id] && post.content && (
|
||
<div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid #374151' }}>
|
||
<div style={{ color: '#e2e8f0', fontSize: 13, lineHeight: 1.6, whiteSpace: 'pre-wrap', wordBreak: 'break-word', maxHeight: 300, overflowY: 'auto' }}>
|
||
{post.content}
|
||
</div>
|
||
{post.url && (
|
||
<div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
|
||
<a href={post.url} target='_blank' rel='noopener noreferrer' style={{ padding:'8px 16px', background:'rgba(59,130,246,0.2)', borderRadius:8, color:'#60a5fa', textDecoration:'none', fontSize:13 }}>查看原帖</a>
|
||
<button onClick={() => { navigator.clipboard.writeText(post.url); alert('链接已复制!'); }} style={{ padding:'8px 16px', background:'rgba(34,197,94,0.2)', borderRadius:8, color:'#22c55e', border:'none', cursor:'pointer', fontSize:13 }}>复制链接</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', background: '#1e293b', borderRadius: 12, marginTop: 16 }}>
|
||
<div style={{ color: '#9ca3af', fontSize: 12 }}>
|
||
共 {totalPosts} 条结果，{Math.ceil(totalPosts / 390)} 页，当前第 {page} 页
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 8 }}>
|
||
{page > 1 ? (
|
||
<button onClick={() => { const newPage = page - 1; setPage(newPage); fetchPosts(newPage, categoryFilter, searchKeyword, numberFilter) }} style={{ padding: '6px 12px', borderRadius: 6, border: 'none', background: '#3b82f6', color: '#fff', cursor: 'pointer', fontSize: 12 }}>上一页</button>
|
||
) : (
|
||
<span style={{ padding: '6px 12px', borderRadius: 6, background: '#374151', color: '#6b7280', fontSize: 12 }}>上一页</span>
|
||
)}
|
||
{posts.length >= 390 ? (
|
||
<button onClick={() => { const newPage = page + 1; setPage(newPage); fetchPosts(newPage, categoryFilter, searchKeyword, numberFilter) }} style={{ padding: '6px 12px', borderRadius: 6, border: 'none', background: '#3b82f6', color: '#fff', cursor: 'pointer', fontSize: 12 }}>下一页</button>
|
||
) : (
|
||
<span style={{ padding: '6px 12px', borderRadius: 6, background: '#374151', color: '#6b7280', fontSize: 12 }}>下一页</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 版本号显示 */}
|
||
<div style={{ position: 'fixed', bottom: '70px', right: '12px', color: 'rgba(255,255,255,0.2)', fontSize: '10px' }}>v0.0.3</div>
|
||
</div>
|
||
)
|
||
}
|