继续提交
This commit is contained in:
446
mengyadriftbottle-frontend/src/App.jsx
Normal file
446
mengyadriftbottle-frontend/src/App.jsx
Normal file
@@ -0,0 +1,446 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import '@fortawesome/fontawesome-free/css/all.min.css'
|
||||
import './App.css'
|
||||
|
||||
const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL || '/api').replace(/\/$/, '')
|
||||
const ADMIN_URL = import.meta.env.VITE_ADMIN_URL || 'http://localhost:5002/admin/login'
|
||||
const DEFAULT_FORM = Object.freeze({
|
||||
name: '',
|
||||
message: '',
|
||||
gender: '保密',
|
||||
qq: '',
|
||||
})
|
||||
|
||||
const BACKGROUND_IMAGES = Array.from({ length: 29 }, (_, index) => `/background/image${index + 1}.png`)
|
||||
|
||||
const formatCount = (value) => {
|
||||
const num = typeof value === 'number' ? value : Number(value || 0)
|
||||
return Number.isNaN(num) ? 0 : num
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [formData, setFormData] = useState({ ...DEFAULT_FORM })
|
||||
const [limits, setLimits] = useState({ name: 7, message: 100 })
|
||||
const [stats, setStats] = useState({ total_bottles: 0 })
|
||||
const [motto, setMotto] = useState('载入中...')
|
||||
const [throwStatus, setThrowStatus] = useState('')
|
||||
const [pickupStatus, setPickupStatus] = useState('')
|
||||
const [currentBottle, setCurrentBottle] = useState(null)
|
||||
const [cooldowns, setCooldowns] = useState({ throw: 0, pickup: 0 })
|
||||
const [loadingAction, setLoadingAction] = useState({ throw: false, pickup: false })
|
||||
const [reactionDisabled, setReactionDisabled] = useState(false)
|
||||
const isThrowing = loadingAction.throw
|
||||
const isPicking = loadingAction.pickup
|
||||
|
||||
const randomBackground = useMemo(() => {
|
||||
if (!BACKGROUND_IMAGES.length) {
|
||||
return ''
|
||||
}
|
||||
const index = Math.floor(Math.random() * BACKGROUND_IMAGES.length)
|
||||
return BACKGROUND_IMAGES[index]
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (randomBackground) {
|
||||
document.documentElement.style.setProperty('--app-background-image', `url(${randomBackground})`)
|
||||
}
|
||||
}, [randomBackground])
|
||||
|
||||
const startCooldown = useCallback((type, seconds = 5) => {
|
||||
const duration = Math.max(1, Math.ceil(seconds))
|
||||
setCooldowns((prev) => ({ ...prev, [type]: duration }))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCooldowns((prev) => {
|
||||
const next = {
|
||||
throw: prev.throw > 0 ? prev.throw - 1 : 0,
|
||||
pickup: prev.pickup > 0 ? prev.pickup - 1 : 0,
|
||||
}
|
||||
if (next.throw === prev.throw && next.pickup === prev.pickup) {
|
||||
return prev
|
||||
}
|
||||
return next
|
||||
})
|
||||
}, 1000)
|
||||
return () => clearInterval(timer)
|
||||
}, [])
|
||||
|
||||
const fetchConfig = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/config`)
|
||||
const data = await response.json()
|
||||
if (data.success && data.config) {
|
||||
setLimits({
|
||||
name: data.config.name_limit ?? 7,
|
||||
message: data.config.message_limit ?? 100,
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch config', error)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const fetchStats = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/stats`)
|
||||
const data = await response.json()
|
||||
if (data.success && data.stats) {
|
||||
setStats(data.stats)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch stats', error)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const fetchMotto = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/motto`)
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setMotto(data.motto)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch motto', error)
|
||||
setMotto('良言一句三冬暖，恶语伤人六月寒')
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchConfig()
|
||||
fetchStats()
|
||||
fetchMotto()
|
||||
}, [fetchConfig, fetchStats, fetchMotto])
|
||||
|
||||
const handleInputChange = useCallback((event) => {
|
||||
const { name, value } = event.target
|
||||
if (name === 'qq' && value && /[^0-9]/.test(value)) {
|
||||
return
|
||||
}
|
||||
setFormData((prev) => ({ ...prev, [name]: value }))
|
||||
}, [])
|
||||
|
||||
const resetForm = useCallback(() => {
|
||||
setFormData({ ...DEFAULT_FORM })
|
||||
}, [])
|
||||
|
||||
const handleThrowSubmit = useCallback(
|
||||
async (event) => {
|
||||
event.preventDefault()
|
||||
if (cooldowns.throw > 0 || isThrowing) {
|
||||
return
|
||||
}
|
||||
|
||||
setLoadingAction((prev) => ({ ...prev, throw: true }))
|
||||
setThrowStatus('正在扔瓶子...')
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/throw`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: formData.name,
|
||||
message: formData.message,
|
||||
gender: formData.gender,
|
||||
qq: formData.qq,
|
||||
}),
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
if (response.ok && data.success) {
|
||||
setThrowStatus('瓶子已成功扔出！祝你好运~')
|
||||
resetForm()
|
||||
fetchStats()
|
||||
startCooldown('throw', 5)
|
||||
} else {
|
||||
const waitTime = data.wait_time ?? 0
|
||||
setThrowStatus(`出错了: ${data.error || data.message || '未知错误'}`)
|
||||
if (waitTime) {
|
||||
startCooldown('throw', waitTime)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Throw request failed', error)
|
||||
setThrowStatus('请求失败，请检查网络连接。')
|
||||
} finally {
|
||||
setLoadingAction((prev) => ({ ...prev, throw: false }))
|
||||
}
|
||||
},
|
||||
[cooldowns.throw, isThrowing, formData, fetchStats, resetForm, startCooldown],
|
||||
)
|
||||
|
||||
const handlePickup = useCallback(async () => {
|
||||
if (cooldowns.pickup > 0 || isPicking) {
|
||||
return
|
||||
}
|
||||
setLoadingAction((prev) => ({ ...prev, pickup: true }))
|
||||
setPickupStatus('正在打捞瓶子...')
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/pickup`)
|
||||
const data = await response.json()
|
||||
if (response.ok && data.success && data.bottle) {
|
||||
setCurrentBottle(data.bottle)
|
||||
setReactionDisabled(false)
|
||||
setPickupStatus('捡到了一个瓶子！缘分来了~')
|
||||
startCooldown('pickup', 5)
|
||||
} else {
|
||||
setCurrentBottle(null)
|
||||
const waitTime = data.wait_time ?? 0
|
||||
setPickupStatus(data.message || data.error || '海里没有瓶子了，或者出错了。')
|
||||
if (waitTime) {
|
||||
startCooldown('pickup', waitTime)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Pickup request failed', error)
|
||||
setPickupStatus('请求失败，请检查网络连接。')
|
||||
setCurrentBottle(null)
|
||||
} finally {
|
||||
setLoadingAction((prev) => ({ ...prev, pickup: false }))
|
||||
}
|
||||
}, [cooldowns.pickup, isPicking, startCooldown])
|
||||
|
||||
const handleReaction = useCallback(
|
||||
async (reaction) => {
|
||||
if (!currentBottle) {
|
||||
return
|
||||
}
|
||||
setReactionDisabled(true)
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/react`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ bottle_id: currentBottle.id, reaction }),
|
||||
})
|
||||
const data = await response.json()
|
||||
if (response.ok && data.success) {
|
||||
setCurrentBottle((prev) =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
likes: reaction === 'like' ? formatCount(prev.likes) + 1 : prev.likes,
|
||||
dislikes: reaction === 'dislike' ? formatCount(prev.dislikes) + 1 : prev.dislikes,
|
||||
}
|
||||
: prev,
|
||||
)
|
||||
setPickupStatus(
|
||||
reaction === 'like' ? '感谢您的点赞！' : '已记录您的反馈，该瓶子被捡起的概率将会降低。',
|
||||
)
|
||||
} else {
|
||||
setPickupStatus(data.error || '记录反馈时出错。')
|
||||
setReactionDisabled(false)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Reaction request failed', error)
|
||||
setPickupStatus('请求失败，请稍后再试。')
|
||||
setReactionDisabled(false)
|
||||
}
|
||||
},
|
||||
[currentBottle],
|
||||
)
|
||||
|
||||
const nameCharCount = useMemo(() => formData.name.length, [formData.name])
|
||||
const messageCharCount = useMemo(() => formData.message.length, [formData.message])
|
||||
|
||||
return (
|
||||
<div className="page-wrapper">
|
||||
<div className="background-overlay" aria-hidden="true" />
|
||||
|
||||
<div className="container">
|
||||
<h1>
|
||||
<i className="fas fa-heart heart-icon" /> 萌芽漂流瓶{' '}
|
||||
<i className="fas fa-heart heart-icon" />
|
||||
</h1>
|
||||
<p className="tagline">让心意随海浪飘向远方，邂逅那个懂你的人(´,,•ω•,,)♡...</p>
|
||||
|
||||
|
||||
<div className="stats-container">
|
||||
<p>
|
||||
<i className="fas fa-wine-bottle" /> 海洋中共有{' '}
|
||||
<span id="total-bottles">{formatCount(stats.total_bottles)}</span> 个漂流瓶在寻找有缘人
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="action-section throw-section">
|
||||
<h2>
|
||||
<i className="fas fa-paper-plane" /> 扔一个漂流瓶(,,・ω・,,)
|
||||
</h2>
|
||||
<form id="throw-bottle-form" onSubmit={handleThrowSubmit}>
|
||||
<div>
|
||||
<label htmlFor="name">
|
||||
你的昵称:{' '}
|
||||
<span className={`char-count ${nameCharCount >= limits.name ? 'char-count-limit' : ''}`}>
|
||||
<span id="name-char-count">{nameCharCount}</span>/{' '}
|
||||
<span id="name-limit">{limits.name}</span>
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
maxLength={limits.name}
|
||||
placeholder="告诉对方你是谁..."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message">
|
||||
漂流瓶内容:{' '}
|
||||
<span
|
||||
className={`char-count ${
|
||||
messageCharCount >= limits.message ? 'char-count-limit' : ''
|
||||
}`}
|
||||
>
|
||||
<span id="message-char-count">{messageCharCount}</span>/{' '}
|
||||
<span id="message-limit">{limits.message}</span>
|
||||
</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
rows="4"
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
maxLength={limits.message}
|
||||
placeholder="写下你想说的话，也许会有人懂..."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="gender">性别:</label>
|
||||
<select id="gender" name="gender" value={formData.gender} onChange={handleInputChange}>
|
||||
<option value="保密">保密</option>
|
||||
<option value="男">男</option>
|
||||
<option value="女">女</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="qq">QQ号 (选填):</label>
|
||||
<input
|
||||
id="qq"
|
||||
name="qq"
|
||||
type="text"
|
||||
value={formData.qq}
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
onChange={handleInputChange}
|
||||
placeholder="填写QQ号展示头像..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{cooldowns.throw > 0 ? (
|
||||
<div id="throw-cooldown" className="cooldown-timer">
|
||||
<i className="fas fa-hourglass-half" /> 冷却中: <span id="throw-countdown">{cooldowns.throw}</span> 秒
|
||||
</div>
|
||||
) : (
|
||||
<button type="submit" id="throw-button" className="btn-throw" disabled={isThrowing}>
|
||||
<i className="fas fa-paper-plane" /> {isThrowing ? '正在扔瓶子...' : '扔出去'}
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
<p id="throw-status">{throwStatus}</p>
|
||||
</div>
|
||||
|
||||
<div className="action-section pickup-section">
|
||||
<h2>
|
||||
<i className="fas fa-search-location" /> 捡一个漂流瓶(,,・ω・,,)
|
||||
</h2>
|
||||
|
||||
{cooldowns.pickup > 0 ? (
|
||||
<div id="pickup-cooldown" className="cooldown-timer">
|
||||
<i className="fas fa-hourglass-half" /> 冷却中: <span id="pickup-countdown">{cooldowns.pickup}</span> 秒
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
id="pickup-bottle-button"
|
||||
className="btn-pickup"
|
||||
onClick={handlePickup}
|
||||
disabled={isPicking}
|
||||
>
|
||||
<i className="fas fa-hand-paper" /> {isPicking ? '正在打捞...' : '捡瓶子'}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{currentBottle && (
|
||||
<div id="bottle-display" className="appear">
|
||||
<div className="bottle-header">
|
||||
{currentBottle.qq_avatar_url ? (
|
||||
<img id="bottle-avatar" src={currentBottle.qq_avatar_url} alt="QQ Avatar" />
|
||||
) : null}
|
||||
<h3>
|
||||
来自 <span id="bottle-name">{currentBottle.name}</span>{' '}
|
||||
<span className="gender-badge" id="bottle-gender">
|
||||
{currentBottle.gender || '保密'}
|
||||
</span>{' '}
|
||||
的漂流瓶
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="message-content">
|
||||
<p id="bottle-message">{currentBottle.message}</p>
|
||||
</div>
|
||||
|
||||
<div className="bottle-footer">
|
||||
<div className="bottle-info">
|
||||
<small>
|
||||
<i className="far fa-clock" /> 时间: <span id="bottle-timestamp">{currentBottle.timestamp}</span>
|
||||
</small>
|
||||
<small>
|
||||
<i className="fas fa-map-marker-alt" /> IP:{' '}
|
||||
<span id="bottle-ip">{currentBottle.ip_address || '未知'}</span>
|
||||
</small>
|
||||
{currentBottle.qq_number ? (
|
||||
<small id="bottle-qq-number">
|
||||
<i className="fab fa-qq" /> QQ: <span id="qq-number-val">{currentBottle.qq_number}</span>
|
||||
</small>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="bottle-reactions">
|
||||
<button
|
||||
type="button"
|
||||
id="like-button"
|
||||
className="reaction-btn like-btn"
|
||||
onClick={() => handleReaction('like')}
|
||||
disabled={reactionDisabled}
|
||||
>
|
||||
<i className="far fa-thumbs-up" /> <span id="like-count">{formatCount(currentBottle.likes)}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
id="dislike-button"
|
||||
className="reaction-btn dislike-btn"
|
||||
onClick={() => handleReaction('dislike')}
|
||||
disabled={reactionDisabled}
|
||||
>
|
||||
<i className="far fa-thumbs-down" />{' '}
|
||||
<span id="dislike-count">{formatCount(currentBottle.dislikes)}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p id="pickup-status">{pickupStatus}</p>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
© 2025 萌芽漂流瓶-蜀ICP备2025151694号 <i className="fas fa-heart" />
|
||||
</p>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
Reference in New Issue
Block a user