提交修改
This commit is contained in:
zeronline
@@ -30,7 +30,17 @@
|
||||
setPageLoading(false)
|
||||
}
|
||||
|
||||
if (loading || pageLoading) return <div style={{ padding: 40, textAlign: 'center', color: '#86868B' }}>加载中...</div>
|
||||
if (loading || pageLoading) {
|
||||
return (
|
||||
<>
|
||||
<NavBar title="成就徽章" showBack />
|
||||
<div className="loading-container">
|
||||
<div className="loading-spinner" />
|
||||
<div className="loading-text">加载中</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
if (!user) return null
|
||||
|
||||
const grouped = {
|
||||
@@ -43,21 +53,55 @@
|
||||
<>
|
||||
<NavBar title="成就徽章" showBack />
|
||||
|
||||
{/* 统计 */}
|
||||
<div className="card" style={{ marginTop: 16, display: 'flex', justifyContent: 'space-around', padding: '20px 16px' }}>
|
||||
<div className="page-container">
|
||||
{/* Stats */}
|
||||
<div className="card" style={{
|
||||
marginTop: 14,
|
||||
display: 'flex', justifyContent: 'space-around',
|
||||
padding: '20px 16px',
|
||||
background: 'linear-gradient(135deg, rgba(255, 179, 71, 0.03), rgba(255, 60, 126, 0.02))',
|
||||
}}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<p style={{ fontSize: 28, fontWeight: 700, color: '#FF6B35' }}>{unlockedIds.size}</p>
|
||||
<p style={{ fontSize: 13, color: '#86868B' }}>已获得</p>
|
||||
<p style={{
|
||||
fontSize: 26, fontWeight: 700, color: 'var(--color-gold)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{unlockedIds.size}
|
||||
</p>
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginTop: 2,
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
已获得
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<p style={{ fontSize: 28, fontWeight: 700, color: '#FF6B35' }}>{allAchievements.length}</p>
|
||||
<p style={{ fontSize: 13, color: '#86868B' }}>总成就</p>
|
||||
<p style={{
|
||||
fontSize: 26, fontWeight: 700, color: 'var(--color-text)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{allAchievements.length}
|
||||
</p>
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginTop: 2,
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
总成就
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<p style={{ fontSize: 28, fontWeight: 700, color: '#FF6B35' }}>
|
||||
<p style={{
|
||||
fontSize: 26, fontWeight: 700, color: 'var(--color-primary)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{allAchievements.length > 0 ? Math.round((unlockedIds.size / allAchievements.length) * 100) : 0}%
|
||||
</p>
|
||||
<p style={{ fontSize: 13, color: '#86868B' }}>完成度</p>
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginTop: 2,
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
完成度
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -67,30 +111,69 @@
|
||||
if (items.length === 0) return null
|
||||
return (
|
||||
<div key={rarity}>
|
||||
<h3 style={{ fontSize: 15, color: '#86868B', padding: '20px 16px 8px' }}>
|
||||
{config.label}质徽章 ({items.length})
|
||||
</h3>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10, margin: '0 16px' }}>
|
||||
<div className="section-title-bar" style={{ marginTop: 8 }}>
|
||||
<span className="section-title-bar-text">
|
||||
{config.label.toUpperCase()} ({items.length})
|
||||
</span>
|
||||
</div>
|
||||
<div style={{
|
||||
display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
|
||||
gap: 10, margin: '0 16px',
|
||||
}}>
|
||||
{items.map(a => {
|
||||
const unlocked = unlockedIds.has(a.id)
|
||||
return (
|
||||
<div key={a.id} style={{
|
||||
borderRadius: 12, padding: 16, textAlign: 'center',
|
||||
background: unlocked ? config.bg : '#F5F5F7',
|
||||
border: `1.5px solid ${unlocked ? config.color + '44' : '#E5E5EA'}`,
|
||||
borderRadius: 14, padding: 18, textAlign: 'center',
|
||||
background: unlocked
|
||||
? `linear-gradient(135deg, ${config.color}11, ${config.color}05)`
|
||||
: 'var(--color-card)',
|
||||
border: unlocked
|
||||
? `1px solid ${config.color}44`
|
||||
: '1px solid var(--color-border)',
|
||||
opacity: unlocked ? 1 : 0.5,
|
||||
transition: 'all 0.3s',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
{unlocked && (
|
||||
<div style={{
|
||||
width: 44, height: 44, borderRadius: 22, margin: '0 auto 8px',
|
||||
background: unlocked ? `linear-gradient(135deg, ${config.color}, ${config.color}88)` : '#E5E5EA',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 20,
|
||||
position: 'absolute', top: 0, right: 0,
|
||||
padding: '2px 8px',
|
||||
fontSize: 8, fontWeight: 700,
|
||||
background: config.color + '33',
|
||||
color: config.color,
|
||||
borderRadius: '0 14px 0 8px',
|
||||
fontFamily: 'var(--font-display)',
|
||||
letterSpacing: 1,
|
||||
}}>
|
||||
{unlocked ? '🏅' : '🔒'}
|
||||
{config.label}
|
||||
</div>
|
||||
<p style={{ fontSize: 13, fontWeight: 600, marginBottom: 2 }}>{a.name}</p>
|
||||
<p style={{ fontSize: 11, color: '#86868B' }}>{unlocked ? a.condition : '???'}</p>
|
||||
)}
|
||||
<div style={{
|
||||
width: 48, height: 48, borderRadius: 24,
|
||||
margin: '0 auto 10px',
|
||||
background: unlocked
|
||||
? `linear-gradient(135deg, ${config.color}, ${config.color}88)`
|
||||
: 'var(--color-progress-bg)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 22,
|
||||
boxShadow: unlocked ? `0 0 24px ${config.color}44` : 'none',
|
||||
}}>
|
||||
{unlocked ? '◈' : '◆'}
|
||||
</div>
|
||||
<p style={{
|
||||
fontSize: 13, fontWeight: 600, marginBottom: 3,
|
||||
color: unlocked ? 'var(--color-text)' : 'var(--color-text-muted)',
|
||||
}}>
|
||||
{a.name}
|
||||
</p>
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{unlocked ? a.condition : '???'}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
@@ -98,8 +181,7 @@
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
<div style={{ height: 80 }} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -83,78 +83,188 @@ function DetailPage() {
|
||||
loadData()
|
||||
}
|
||||
|
||||
if (pageLoading || !item) return <div style={{ padding: 40, textAlign: 'center', color: '#86868B' }}>加载中...</div>
|
||||
if (pageLoading || !item) {
|
||||
return (
|
||||
<>
|
||||
<NavBar title="任务详情" showBack />
|
||||
<div className="loading-container">
|
||||
<div className="loading-spinner" />
|
||||
<div className="loading-text">加载中</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
const cfg = CATEGORY_CONFIG[item.category] || CATEGORY_CONFIG.habit
|
||||
const daysInMonth = getDaysInMonth(year, month)
|
||||
const firstDay = getFirstDayOfMonth(year, month)
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavBar title={item.name} showBack />
|
||||
<div style={{ position: 'relative' }}>
|
||||
<NavBar title="任务详情" showBack />
|
||||
|
||||
<div className="page-container">
|
||||
{/* Action menu */}
|
||||
<div style={{ padding: '0 16px', display: 'flex', justifyContent: 'flex-end', position: 'relative' }}>
|
||||
<button onClick={() => setShowActions(!showActions)}
|
||||
style={{ position: 'absolute', right: 16, top: 12, background: 'none', border: 'none', fontSize: 20, cursor: 'pointer' }}>
|
||||
...
|
||||
className="btn-cyber" style={{ padding: '6px 12px', fontSize: 14 }}>
|
||||
●●●
|
||||
</button>
|
||||
{showActions && (
|
||||
<div className="card" style={{ position: 'absolute', right: 16, top: 44, zIndex: 10, minWidth: 140, padding: 0 }}>
|
||||
{item.status === 'active' ? (
|
||||
<div className="ios-list-item" onClick={handleTogglePause}><span>暂停打卡</span></div>
|
||||
) : (
|
||||
<div className="ios-list-item" onClick={handleTogglePause}><span>恢复打卡</span></div>
|
||||
)}
|
||||
<div className="ios-list-item" onClick={handleDelete} style={{ color: '#FF3B30' }}><span>删除</span></div>
|
||||
<div className="card" style={{
|
||||
position: 'absolute', right: 16, top: 44, zIndex: 10,
|
||||
minWidth: 150, padding: 0, margin: 0, overflow: 'hidden',
|
||||
}}>
|
||||
<button onClick={() => { handleTogglePause(); setShowActions(false) }}
|
||||
style={{
|
||||
display: 'block', width: '100%', padding: '14px 18px',
|
||||
border: 'none', borderBottom: '1px solid var(--color-border)',
|
||||
cursor: 'pointer', fontSize: 13, textAlign: 'left',
|
||||
background: 'transparent', color: 'var(--color-text)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
transition: 'background 0.2s',
|
||||
}}
|
||||
onMouseEnter={e => e.currentTarget.style.background = 'var(--color-card-hover)'}
|
||||
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
|
||||
>
|
||||
{item.status === 'active' ? '■ 暂停' : '► 恢复'}
|
||||
</button>
|
||||
<button onClick={() => { handleDelete(); setShowActions(false) }}
|
||||
style={{
|
||||
display: 'block', width: '100%', padding: '14px 18px',
|
||||
border: 'none', cursor: 'pointer', fontSize: 13, textAlign: 'left',
|
||||
background: 'transparent', color: 'var(--color-error)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
transition: 'background 0.2s',
|
||||
}}
|
||||
onMouseEnter={e => e.currentTarget.style.background = 'var(--color-card-hover)'}
|
||||
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
|
||||
>
|
||||
✕ 删除
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ marginTop: 8 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
{/* Item info */}
|
||||
<div className="card" style={{
|
||||
marginTop: 8,
|
||||
background: 'linear-gradient(135deg, rgba(0, 229, 255, 0.03), transparent)',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
|
||||
<div style={{
|
||||
width: 52, height: 52, borderRadius: 14,
|
||||
background: cfg.color + '20', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 26,
|
||||
}}>{item.icon || cfg.icon}</div>
|
||||
background: `linear-gradient(135deg, ${cfg.color}22, ${cfg.color}11)`,
|
||||
border: `1px solid ${cfg.color}33`,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 26,
|
||||
}}>
|
||||
{item.icon || cfg.icon}
|
||||
</div>
|
||||
<div>
|
||||
<p style={{ fontSize: 18, fontWeight: 700 }}>{item.name}</p>
|
||||
<p style={{ fontSize: 13, color: '#86868B', marginTop: 2 }}>
|
||||
{cfg.label} · {CYCLE_LABEL[item.cycleType]} · {item.status === 'active' ? '进行中' : item.status === 'paused' ? '已暂停' : item.status}
|
||||
<p style={{
|
||||
fontSize: 17, fontWeight: 700, color: 'var(--color-text)',
|
||||
}}>
|
||||
{item.name}
|
||||
</p>
|
||||
{item.dailyGoal && <p style={{ fontSize: 13, color: '#86868B', marginTop: 2 }}>目标: {item.dailyGoal}</p>}
|
||||
<p style={{
|
||||
fontSize: 12, color: 'var(--color-text-muted)', marginTop: 2,
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
<span style={{ color: cfg.color }}>▸</span> {cfg.label} / {CYCLE_LABEL[item.cycleType]}
|
||||
{' · '}
|
||||
{item.status === 'active' ? '进行中' : item.status === 'paused' ? '已暂停' : item.status}
|
||||
</p>
|
||||
{item.dailyGoal && (
|
||||
<p style={{
|
||||
fontSize: 12, color: 'var(--color-text-secondary)', marginTop: 2,
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
目标: {item.dailyGoal}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div style={{ display: 'flex', justifyContent: 'space-around', padding: '8px 0' }}>
|
||||
{/* Stats */}
|
||||
<div className="card" style={{ padding: '16px 20px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-around', padding: '4px 0' }}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<p style={{ fontSize: 28, fontWeight: 700, color: '#FF6B35' }}>{streak}</p>
|
||||
<p style={{ fontSize: 13, color: '#86868B' }}>连续天数</p>
|
||||
<p style={{
|
||||
fontSize: 26, fontWeight: 700, color: 'var(--color-gold)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{streak}
|
||||
</p>
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginTop: 2,
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
连续
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<p style={{ fontSize: 28, fontWeight: 700, color: '#FF6B35' }}>{records.length}</p>
|
||||
<p style={{ fontSize: 13, color: '#86868B' }}>本月打卡</p>
|
||||
<p style={{
|
||||
fontSize: 26, fontWeight: 700, color: 'var(--color-primary)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{records.length}
|
||||
</p>
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginTop: 2,
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
本月打卡
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<p style={{ fontSize: 28, fontWeight: 700, color: '#FF6B35' }}>
|
||||
<p style={{
|
||||
fontSize: 26, fontWeight: 700, color: 'var(--color-accent)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{daysInMonth > 0 ? Math.round((records.length / daysInMonth) * 100) : 0}%
|
||||
</p>
|
||||
<p style={{ fontSize: 13, color: '#86868B' }}>完成率</p>
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginTop: 2,
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
完成率
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
|
||||
{/* Calendar */}
|
||||
<div className="card" style={{ padding: '16px 18px' }}>
|
||||
<div style={{
|
||||
display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16,
|
||||
}}>
|
||||
<button onClick={() => { if (month === 1) { setYear(y => y - 1); setMonth(12) } else setMonth(m => m - 1) }}
|
||||
style={{ background: 'none', border: 'none', fontSize: 18, cursor: 'pointer', padding: 4 }}>←</button>
|
||||
<span style={{ fontSize: 16, fontWeight: 600 }}>{year} 年 {month} 月</span>
|
||||
className="btn-cyber" style={{ padding: '6px 10px', fontSize: 12 }}>
|
||||
←
|
||||
</button>
|
||||
<span style={{
|
||||
fontSize: 14, fontWeight: 600, color: 'var(--color-text)',
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
{year}.{String(month).padStart(2, '0')}
|
||||
</span>
|
||||
<button onClick={() => { if (month === 12) { setYear(y => y + 1); setMonth(1) } else setMonth(m => m + 1) }}
|
||||
style={{ background: 'none', border: 'none', fontSize: 18, cursor: 'pointer', padding: 4 }}>→</button>
|
||||
className="btn-cyber" style={{ padding: '6px 10px', fontSize: 12 }}>
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, textAlign: 'center' }}>
|
||||
{['日','一','二','三','四','五','六'].map(d => (
|
||||
<div key={d} style={{ fontSize: 12, color: '#86868B', padding: '6px 0' }}>{d}</div>
|
||||
<div style={{
|
||||
display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)',
|
||||
gap: 3, textAlign: 'center',
|
||||
}}>
|
||||
{['S', 'M', 'T', 'W', 'T', 'F', 'S'].map(d => (
|
||||
<div key={d} style={{
|
||||
fontSize: 10, color: 'var(--color-text-muted)',
|
||||
padding: '6px 0', fontFamily: 'var(--font-display)',
|
||||
}}>
|
||||
{d}
|
||||
</div>
|
||||
))}
|
||||
{Array.from({ length: firstDay }, (_, i) => <div key={'empty-' + i} />)}
|
||||
{Array.from({ length: daysInMonth }, (_, i) => {
|
||||
@@ -167,26 +277,44 @@ function DetailPage() {
|
||||
return (
|
||||
<div key={day} onClick={() => canMakeup && handleMakeup(dateStr)}
|
||||
style={{
|
||||
padding: '8px 0', fontSize: 14, borderRadius: 8, cursor: canMakeup ? 'pointer' : 'default',
|
||||
background: isToday ? '#FFF0EB' : 'transparent',
|
||||
padding: '7px 0', fontSize: 13, borderRadius: 8,
|
||||
cursor: canMakeup ? 'pointer' : 'default',
|
||||
background: isToday ? 'var(--color-primary-dim)' : 'transparent',
|
||||
fontWeight: isToday ? 600 : 400,
|
||||
}}>
|
||||
color: isToday ? 'var(--color-primary)' : 'var(--color-text)',
|
||||
border: isToday ? '1px solid rgba(0, 229, 255, 0.2)' : '1px solid transparent',
|
||||
position: 'relative',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
transition: 'background 0.2s',
|
||||
}}
|
||||
onMouseEnter={e => { if (canMakeup) e.currentTarget.style.background = 'rgba(255, 179, 71, 0.1)' }}
|
||||
onMouseLeave={e => { if (canMakeup) e.currentTarget.style.background = isToday ? 'var(--color-primary-dim)' : 'transparent' }}
|
||||
>
|
||||
{day}
|
||||
{checked && <div style={{
|
||||
width: 6, height: 6, borderRadius: 3, margin: '2px auto 0',
|
||||
background: isMakeup ? '#FF9500' : '#34C759',
|
||||
}} />}
|
||||
{!checked && isToday && <div style={{
|
||||
width: 6, height: 6, borderRadius: 3, margin: '2px auto 0',
|
||||
background: '#E5E5EA',
|
||||
}} />}
|
||||
{checked && (
|
||||
<div style={{
|
||||
position: 'absolute', bottom: 3, left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: 5, height: 5, borderRadius: '50%',
|
||||
background: isMakeup ? 'var(--color-warning)' : 'var(--color-accent)',
|
||||
boxShadow: isMakeup ? '0 0 6px rgba(255, 179, 71, 0.4)' : '0 0 6px rgba(0, 230, 118, 0.4)',
|
||||
}} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ height: 80 }} />
|
||||
<div style={{ padding: '0 16px', marginTop: 8 }}>
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', textAlign: 'center',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
点击过去未打卡的日期可补卡
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ const CYCLE_OPTIONS: { value: CycleType; label: string }[] = [
|
||||
{ value: 'daily', label: '每日' },
|
||||
{ value: 'weekly', label: '每周' },
|
||||
{ value: 'every_other_day', label: '隔日' },
|
||||
{ value: 'custom', label: '自定义间隔' },
|
||||
{ value: 'custom', label: '自定义' },
|
||||
]
|
||||
|
||||
function CreateCheckInPage() {
|
||||
@@ -51,43 +51,67 @@ function CreateCheckInPage() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavBar title="创建打卡项" showBack />
|
||||
<NavBar title="创建任务" showBack />
|
||||
<div className="page-container">
|
||||
<form onSubmit={handleSubmit} style={{ padding: 16 }}>
|
||||
{/* 名称 */}
|
||||
<label style={{ fontSize: 13, color: '#86868B', marginBottom: 6, display: 'block' }}>名称 *</label>
|
||||
<input className="input-field" value={name} onChange={e => setName(e.target.value)}
|
||||
{/* Name */}
|
||||
<label style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginBottom: 6, display: 'block',
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
任务名称 *
|
||||
</label>
|
||||
<input className="input-cyber" value={name} onChange={e => setName(e.target.value)}
|
||||
placeholder="如「每天背单词」" style={{ marginBottom: 20 }} maxLength={50} />
|
||||
|
||||
{/* 分类 */}
|
||||
<label style={{ fontSize: 13, color: '#86868B', marginBottom: 8, display: 'block' }}>分类</label>
|
||||
{/* Category */}
|
||||
<label style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginBottom: 8, display: 'block',
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
分类
|
||||
</label>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginBottom: 20 }}>
|
||||
{CATEGORIES.map(([key, cfg]) => (
|
||||
<button type="button" key={key}
|
||||
onClick={() => setCategory(key)}
|
||||
style={{
|
||||
padding: '12px 8px', borderRadius: 10, border: '2px solid',
|
||||
borderColor: category === key ? cfg.color : '#E5E5EA',
|
||||
background: category === key ? cfg.color + '15' : '#f8f8fa',
|
||||
cursor: 'pointer', fontSize: 13, textAlign: 'center', transition: 'all 0.2s',
|
||||
padding: '14px 8px', borderRadius: 12, border: '1px solid',
|
||||
borderColor: category === key ? cfg.color + '66' : 'var(--color-border)',
|
||||
background: category === key ? `${cfg.color}15` : 'transparent',
|
||||
cursor: 'pointer', fontSize: 12, textAlign: 'center',
|
||||
transition: 'all 0.2s',
|
||||
color: category === key ? cfg.color : 'var(--color-text-muted)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: 20 }}>{cfg.icon}</span>
|
||||
<p style={{ marginTop: 4, fontWeight: category === key ? 600 : 400 }}>{cfg.label}</p>
|
||||
<span style={{ fontSize: 22 }}>{cfg.icon}</span>
|
||||
<p style={{ marginTop: 4, fontWeight: category === key ? 600 : 400 }}>
|
||||
{cfg.label}
|
||||
</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 打卡周期 */}
|
||||
<label style={{ fontSize: 13, color: '#86868B', marginBottom: 6, display: 'block' }}>打卡周期</label>
|
||||
<div style={{ display: 'flex', gap: 8, marginBottom: 20, flexWrap: 'wrap' }}>
|
||||
{/* Cycle */}
|
||||
<label style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginBottom: 6, display: 'block',
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
周期
|
||||
</label>
|
||||
<div style={{
|
||||
display: 'flex', gap: 8, marginBottom: 20, flexWrap: 'wrap',
|
||||
}}>
|
||||
{CYCLE_OPTIONS.map(opt => (
|
||||
<button type="button" key={opt.value}
|
||||
onClick={() => setCycleType(opt.value)}
|
||||
className="btn-cyber"
|
||||
style={{
|
||||
padding: '8px 16px', borderRadius: 8, border: '1.5px solid',
|
||||
borderColor: cycleType === opt.value ? '#FF6B35' : '#E5E5EA',
|
||||
background: cycleType === opt.value ? '#FFF0EB' : '#f8f8fa',
|
||||
cursor: 'pointer', fontSize: 14, transition: 'all 0.2s',
|
||||
padding: '8px 16px', fontSize: 11, letterSpacing: 1,
|
||||
borderColor: cycleType === opt.value ? 'var(--color-primary)' : 'var(--color-border)',
|
||||
color: cycleType === opt.value ? 'var(--color-primary)' : 'var(--color-text-muted)',
|
||||
background: cycleType === opt.value ? 'rgba(0, 229, 255, 0.1)' : 'transparent',
|
||||
}}
|
||||
>
|
||||
{opt.label}
|
||||
@@ -95,26 +119,45 @@ function CreateCheckInPage() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 每日目标 */}
|
||||
<label style={{ fontSize: 13, color: '#86868B', marginBottom: 6, display: 'block' }}>每日目标（选填）</label>
|
||||
<input className="input-field" value={dailyGoal} onChange={e => setDailyGoal(e.target.value)}
|
||||
{/* Daily Goal */}
|
||||
<label style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginBottom: 6, display: 'block',
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
每日目标（选填）
|
||||
</label>
|
||||
<input className="input-cyber" value={dailyGoal} onChange={e => setDailyGoal(e.target.value)}
|
||||
placeholder="如「背 50 个单词」" style={{ marginBottom: 20 }} maxLength={200} />
|
||||
|
||||
{/* 隐私 */}
|
||||
<label style={{ fontSize: 13, color: '#86868B', marginBottom: 6, display: 'block' }}>隐私设置</label>
|
||||
<select className="input-field" value={privacy} onChange={e => setPrivacy(Number(e.target.value))}
|
||||
style={{ marginBottom: 24 }}>
|
||||
{/* Privacy */}
|
||||
<label style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginBottom: 6, display: 'block',
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
隐私设置
|
||||
</label>
|
||||
<select className="input-cyber" value={privacy} onChange={e => setPrivacy(Number(e.target.value))}
|
||||
style={{ marginBottom: 24, cursor: 'pointer', appearance: 'auto' }}>
|
||||
<option value={1}>公开</option>
|
||||
<option value={2}>仅好友可见</option>
|
||||
<option value={3}>仅自己可见</option>
|
||||
<option value={2}>好友可见</option>
|
||||
<option value={3}>私密</option>
|
||||
</select>
|
||||
|
||||
{error && <p style={{ fontSize: 13, color: '#FF3B30', marginBottom: 12, textAlign: 'center' }}>{error}</p>}
|
||||
{error && (
|
||||
<p style={{
|
||||
fontSize: 12, color: 'var(--color-error)', marginBottom: 12, textAlign: 'center',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
ERROR: {error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button className="btn-primary" type="submit" disabled={submitting}>
|
||||
{submitting ? '创建中...' : '创建打卡项'}
|
||||
<button className="btn-cyber btn-cyber--primary" type="submit" disabled={submitting}
|
||||
style={{ width: '100%', padding: 14, fontSize: 14, letterSpacing: 2 }}>
|
||||
{submitting ? '创建中...' : '创建任务'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
+543
-85
@@ -5,124 +5,582 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-primary: #FF6B35;
|
||||
--color-primary-light: #FF8C5A;
|
||||
--color-primary-gradient: linear-gradient(135deg, #FF6B35, #FF4D6D);
|
||||
--color-accent: #7209B7;
|
||||
--color-bg: #F5F5F7;
|
||||
--color-card: #FFFFFF;
|
||||
--color-text: #1D1D1F;
|
||||
--color-text-secondary: #86868B;
|
||||
--color-border: #E5E5EA;
|
||||
--color-nav-bg: rgba(245,245,247,0.92);
|
||||
--color-success: #34C759;
|
||||
--color-warning: #FF9500;
|
||||
--color-error: #FF3B30;
|
||||
--radius-card: 12px;
|
||||
--radius-button: 10px;
|
||||
--font-base: -apple-system, BlinkMacSystemFont, 'SF Pro', 'PingFang SC', sans-serif;
|
||||
--color-bg: #080C18;
|
||||
--color-bg-alt: #0C1124;
|
||||
--color-card: #0F1529;
|
||||
--color-card-hover: #161E3A;
|
||||
--color-border: #1A2245;
|
||||
--color-border-glow: rgba(0, 229, 255, 0.12);
|
||||
--color-primary: #00E5FF;
|
||||
--color-primary-dim: rgba(0, 229, 255, 0.08);
|
||||
--color-primary-glow: rgba(0, 229, 255, 0.3);
|
||||
--color-secondary: #3B82F6;
|
||||
--color-accent: #00E676;
|
||||
--color-gold: #FFB347;
|
||||
--color-social: #FF3C7E;
|
||||
--color-text: #E0E8FF;
|
||||
--color-text-secondary: #6B7BA3;
|
||||
--color-text-muted: #3D4F7A;
|
||||
--color-error: #FF1744;
|
||||
--color-success: #00E676;
|
||||
--color-warning: #FFB347;
|
||||
--color-progress-bg: rgba(26, 34, 69, 0.6);
|
||||
|
||||
--font-display: 'Orbitron', monospace;
|
||||
--font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 16px;
|
||||
--radius-xl: 20px;
|
||||
|
||||
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
|
||||
--shadow-glow-cyan: 0 0 20px rgba(0, 229, 255, 0.15);
|
||||
--shadow-glow-green: 0 0 20px rgba(0, 230, 118, 0.2);
|
||||
--shadow-glow-gold: 0 0 20px rgba(255, 179, 71, 0.15);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-bg: #1C1C1E;
|
||||
--color-card: #2C2C2E;
|
||||
--color-text: #F5F5F7;
|
||||
--color-text-secondary: #98989D;
|
||||
--color-border: #38383A;
|
||||
--color-nav-bg: rgba(28,28,30,0.92);
|
||||
--color-accent: #BB86FC;
|
||||
--color-error: #FF453A;
|
||||
[data-theme="light"] {
|
||||
--color-bg: #E8ECF4;
|
||||
--color-bg-alt: #DEE2EC;
|
||||
--color-card: #FFFFFF;
|
||||
--color-card-hover: #F0F4FF;
|
||||
--color-border: #D0D7E6;
|
||||
--color-border-glow: rgba(59, 130, 246, 0.12);
|
||||
--color-primary: #2563EB;
|
||||
--color-primary-dim: rgba(37, 99, 235, 0.06);
|
||||
--color-primary-glow: rgba(37, 99, 235, 0.15);
|
||||
--color-secondary: #3B82F6;
|
||||
--color-accent: #059669;
|
||||
--color-gold: #D97706;
|
||||
--color-social: #DB2777;
|
||||
--color-text: #1A1F36;
|
||||
--color-text-secondary: #5B6B8F;
|
||||
--color-text-muted: #95A5C9;
|
||||
--color-error: #DC2626;
|
||||
--color-success: #059669;
|
||||
--color-warning: #D97706;
|
||||
--color-progress-bg: #E5E9F0;
|
||||
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
--shadow-glow-cyan: 0 0 12px rgba(37, 99, 235, 0.1);
|
||||
--shadow-glow-green: 0 0 12px rgba(5, 150, 103, 0.1);
|
||||
--shadow-glow-gold: 0 0 12px rgba(217, 119, 6, 0.1);
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-base);
|
||||
font-family: var(--font-body);
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
line-height: 1.5;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* iOS 风格列表 */
|
||||
.ios-list {
|
||||
background: var(--color-card);
|
||||
border-radius: var(--radius-card);
|
||||
overflow: hidden;
|
||||
margin: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(0, 229, 255, 0.015) 2px,
|
||||
rgba(0, 229, 255, 0.015) 4px
|
||||
);
|
||||
}
|
||||
|
||||
.ios-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 0.5px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
.ios-list-item:last-child { border-bottom: none; }
|
||||
.ios-list-item:hover { background: #f8f8fa; }
|
||||
|
||||
.ios-list-item-label {
|
||||
font-size: 15px;
|
||||
#__next, main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(0, 229, 255, 0.25);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[data-theme="light"] ::selection {
|
||||
background: rgba(37, 99, 235, 0.2);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.ios-list-item-value {
|
||||
font-size: 15px;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-text-muted);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowPulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(0, 229, 255, 0.4), 0 0 40px rgba(0, 229, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowPulseGreen {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 8px rgba(0, 230, 118, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(0, 230, 118, 0.4), 0 0 40px rgba(0, 230, 118, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% center;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scanLine {
|
||||
0% {
|
||||
top: -10%;
|
||||
}
|
||||
100% {
|
||||
top: 110%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes borderRotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dataFlicker {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes orbitPulse {
|
||||
0%, 100% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Page Layout ===== */
|
||||
.page-container {
|
||||
padding-bottom: 100px;
|
||||
animation: fadeUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 16px 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 13px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* 按钮 */
|
||||
.btn-primary {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background: var(--color-primary-gradient);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--radius-button);
|
||||
font-size: 17px;
|
||||
.section-title-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.section-title-bar::before {
|
||||
content: '';
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
background: var(--color-primary);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 8px var(--color-primary-glow);
|
||||
}
|
||||
|
||||
.section-title-bar-text {
|
||||
font-family: var(--font-display);
|
||||
font-size: 13px;
|
||||
letter-spacing: 1px;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* ===== Cards ===== */
|
||||
.card {
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
margin: 8px 16px;
|
||||
padding: 16px;
|
||||
box-shadow: var(--shadow-card);
|
||||
transition: border-color 0.3s, box-shadow 0.3s, background 0.3s, transform 0.2s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--color-border-glow),
|
||||
transparent 40%,
|
||||
transparent 60%,
|
||||
var(--color-border-glow)
|
||||
);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: var(--color-primary-dim);
|
||||
}
|
||||
|
||||
.card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-glow {
|
||||
box-shadow: var(--shadow-card), var(--shadow-glow-cyan);
|
||||
}
|
||||
|
||||
/* ===== Ambient Orbs ===== */
|
||||
.ambient-orb {
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.ambient-orb--cyan {
|
||||
background: #00E5FF;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
top: -100px;
|
||||
right: -100px;
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.ambient-orb--blue {
|
||||
background: #3B82F6;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
bottom: 10%;
|
||||
left: -80px;
|
||||
animation: float 10s ease-in-out infinite 2s;
|
||||
}
|
||||
|
||||
.ambient-orb--pink {
|
||||
background: #FF3C7E;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
bottom: 20%;
|
||||
right: -50px;
|
||||
animation: float 12s ease-in-out infinite 1s;
|
||||
}
|
||||
|
||||
[data-theme="light"] .ambient-orb--cyan {
|
||||
opacity: 0.06;
|
||||
background: #3B82F6;
|
||||
}
|
||||
|
||||
[data-theme="light"] .ambient-orb--blue {
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
[data-theme="light"] .ambient-orb--pink {
|
||||
opacity: 0.04;
|
||||
}
|
||||
|
||||
/* ===== Buttons ===== */
|
||||
.btn-cyber {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 10px 20px;
|
||||
background: linear-gradient(135deg, rgba(0, 229, 255, 0.1), rgba(59, 130, 246, 0.1));
|
||||
border: 1px solid rgba(0, 229, 255, 0.25);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-primary);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.btn-primary:active { opacity: 0.8; }
|
||||
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
/* 输入框 */
|
||||
.input-field {
|
||||
.btn-cyber:hover {
|
||||
background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(59, 130, 246, 0.2));
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-cyber:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-cyber--primary {
|
||||
background: linear-gradient(135deg, #00E5FF, #3B82F6);
|
||||
border-color: transparent;
|
||||
color: #080C18;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn-cyber--primary:hover {
|
||||
background: linear-gradient(135deg, #33EAFF, #5B9BF7);
|
||||
box-shadow: 0 0 30px rgba(0, 229, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-cyber--primary:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-cyber--danger {
|
||||
border-color: rgba(255, 23, 68, 0.3);
|
||||
color: var(--color-error);
|
||||
background: rgba(255, 23, 68, 0.08);
|
||||
}
|
||||
|
||||
.btn-cyber--danger:hover {
|
||||
background: rgba(255, 23, 68, 0.15);
|
||||
border-color: var(--color-error);
|
||||
box-shadow: 0 0 20px rgba(255, 23, 68, 0.15);
|
||||
}
|
||||
|
||||
.btn-cyber:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* ===== Inputs ===== */
|
||||
.input-cyber {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
background: #f8f8fa;
|
||||
background: rgba(15, 21, 41, 0.6);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-button);
|
||||
font-size: 17px;
|
||||
font-family: var(--font-base);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
color: var(--color-text);
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.input-field:focus {
|
||||
border-color: var(--color-primary);
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
/* 页面标题 */
|
||||
.input-cyber:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.08);
|
||||
}
|
||||
|
||||
.input-cyber::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
[data-theme="light"] .input-cyber {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* ===== Typography ===== */
|
||||
.text-display {
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.text-mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #00E5FF, #3B82F6);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.text-gradient-gold {
|
||||
background: linear-gradient(135deg, #FFB347, #FF8C00);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.text-gradient-green {
|
||||
background: linear-gradient(135deg, #00E676, #00C853);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.text-gradient-pink {
|
||||
background: linear-gradient(135deg, #FF3C7E, #FF1744);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* ===== Loading ===== */
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 2px solid var(--color-border);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-family: var(--font-display);
|
||||
font-size: 11px;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-muted);
|
||||
animation: dataFlicker 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ===== Badge / Tag ===== */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.badge--cyan {
|
||||
background: rgba(0, 229, 255, 0.1);
|
||||
color: var(--color-primary);
|
||||
border: 1px solid rgba(0, 229, 255, 0.2);
|
||||
}
|
||||
|
||||
.badge--green {
|
||||
background: rgba(0, 230, 118, 0.1);
|
||||
color: var(--color-accent);
|
||||
border: 1px solid rgba(0, 230, 118, 0.2);
|
||||
}
|
||||
|
||||
.badge--gold {
|
||||
background: rgba(255, 179, 71, 0.1);
|
||||
color: var(--color-gold);
|
||||
border: 1px solid rgba(255, 179, 71, 0.2);
|
||||
}
|
||||
|
||||
/* ===== iOS compatibility ===== */
|
||||
.ios-safe-bottom {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Page title (legacy compat) */
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
padding: 20px 16px 8px;
|
||||
font-weight: 700;
|
||||
padding: 20px 16px 4px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-secondary);
|
||||
padding: 0 16px 20px;
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.card {
|
||||
background: var(--color-card);
|
||||
border-radius: var(--radius-card);
|
||||
margin: 8px 16px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
+18
-1
@@ -1,7 +1,20 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { Orbitron, JetBrains_Mono } from 'next/font/google'
|
||||
import './globals.css'
|
||||
import ThemeProvider from '@/components/ThemeProvider'
|
||||
|
||||
const orbitron = Orbitron({
|
||||
subsets: ['latin'],
|
||||
variable: '--font-display',
|
||||
display: 'swap',
|
||||
})
|
||||
|
||||
const jetbrainsMono = JetBrains_Mono({
|
||||
subsets: ['latin'],
|
||||
variable: '--font-mono',
|
||||
display: 'swap',
|
||||
})
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: '寸进 — 日日皆有成长',
|
||||
description: '寸进（InchStep）综合成长打卡平台',
|
||||
@@ -9,8 +22,12 @@ export const metadata: Metadata = {
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="zh-CN" suppressHydrationWarning>
|
||||
<html lang="zh-CN" suppressHydrationWarning
|
||||
className={`${orbitron.variable} ${jetbrainsMono.variable}`}>
|
||||
<body>
|
||||
<div className="ambient-orb ambient-orb--cyan" />
|
||||
<div className="ambient-orb ambient-orb--blue" />
|
||||
<div className="ambient-orb ambient-orb--pink" />
|
||||
<ThemeProvider>{children}</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+60
-12
@@ -28,24 +28,56 @@
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 32 }}>
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
padding: 32,
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
}}>
|
||||
{/* Logo */}
|
||||
<div style={{ textAlign: 'center', marginBottom: 48 }}>
|
||||
<div style={{
|
||||
width: 80, height: 80, borderRadius: 20,
|
||||
background: 'linear-gradient(135deg, #FF6B35, #FF4D6D)',
|
||||
background: 'linear-gradient(135deg, #00E5FF, #3B82F6)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
margin: '0 auto 16px', fontSize: 36
|
||||
margin: '0 auto 16px', fontSize: 32,
|
||||
boxShadow: '0 0 40px rgba(0, 229, 255, 0.2)',
|
||||
position: 'relative',
|
||||
}}>
|
||||
📈
|
||||
<div style={{
|
||||
position: 'absolute', inset: -3,
|
||||
borderRadius: 23,
|
||||
background: 'linear-gradient(135deg, rgba(0, 229, 255, 0.3), rgba(59, 130, 246, 0.1))',
|
||||
zIndex: -1,
|
||||
}} />
|
||||
◈
|
||||
</div>
|
||||
<h1 style={{ fontSize: 28, fontWeight: 700, marginBottom: 4 }}>寸进</h1>
|
||||
<p style={{ fontSize: 15, color: '#86868B' }}>日日皆有成长</p>
|
||||
<h1 style={{
|
||||
fontSize: 28, fontWeight: 700, marginBottom: 4,
|
||||
background: 'linear-gradient(135deg, #00E5FF, #3B82F6)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
fontFamily: 'var(--font-display)',
|
||||
letterSpacing: 4,
|
||||
}}>
|
||||
寸进
|
||||
</h1>
|
||||
<p style={{
|
||||
fontSize: 13, color: 'var(--color-text-muted)',
|
||||
fontFamily: 'var(--font-display)',
|
||||
letterSpacing: 2,
|
||||
}}>
|
||||
寸进 · 日日皆有成长
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<input
|
||||
className="input-field"
|
||||
className="input-cyber"
|
||||
type="tel"
|
||||
placeholder="手机号"
|
||||
maxLength={11}
|
||||
@@ -53,17 +85,33 @@
|
||||
onChange={e => { setPhone(e.target.value.replace(/\D/g, '')); setError('') }}
|
||||
style={{ marginBottom: 12 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p style={{ fontSize: 13, color: '#FF3B30', marginBottom: 12, textAlign: 'center' }}>{error}</p>
|
||||
<p style={{
|
||||
fontSize: 12, color: 'var(--color-error)',
|
||||
marginBottom: 12, textAlign: 'center',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
ERROR: {error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button className="btn-primary" type="submit" disabled={isLoading}>
|
||||
{isLoading ? '登录中...' : '登录 / 注册'}
|
||||
<button
|
||||
className="btn-cyber btn-cyber--primary"
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
style={{ width: '100%', padding: 14, fontSize: 15, letterSpacing: 2 }}
|
||||
>
|
||||
{isLoading ? '连接中...' : '登录 / 注册'}
|
||||
</button>
|
||||
|
||||
<p style={{ fontSize: 13, color: '#86868B', textAlign: 'center', marginTop: 16 }}>
|
||||
未注册的手机号将自动创建账号
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)',
|
||||
textAlign: 'center', marginTop: 16,
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
// 未注册的手机号将自动创建账号
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
+113
-28
@@ -43,70 +43,155 @@ function Dashboard() {
|
||||
|
||||
const activeItems = items.filter(i => i.status === 'active')
|
||||
const pausedItems = items.filter(i => i.status === 'paused')
|
||||
const doneCount = activeItems.filter(i => todayStatus[i.id]).length
|
||||
|
||||
if (loading || pageLoading) return <div style={{ padding: 40, textAlign: 'center', color: '#86868B' }}>加载中...</div>
|
||||
if (loading || pageLoading) {
|
||||
return (
|
||||
<>
|
||||
<NavBar title="寸进" />
|
||||
<div className="loading-container">
|
||||
<div className="loading-spinner" />
|
||||
<div className="loading-text">连接中</div>
|
||||
</div>
|
||||
<TabBar />
|
||||
</>
|
||||
)
|
||||
}
|
||||
if (!user) return null
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavBar title="寸进" />
|
||||
|
||||
<div className="card" style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div className="page-container">
|
||||
{/* Agent Status Card */}
|
||||
<div className="card" style={{
|
||||
marginTop: 14,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 14,
|
||||
padding: '18px 20px',
|
||||
background: 'linear-gradient(135deg, rgba(0, 229, 255, 0.04), rgba(59, 130, 246, 0.02))',
|
||||
border: '1px solid rgba(0, 229, 255, 0.12)',
|
||||
}}>
|
||||
<div style={{
|
||||
width: 44, height: 44, borderRadius: 22,
|
||||
background: 'linear-gradient(135deg, #FF6B35, #FF4D6D)',
|
||||
width: 48, height: 48, borderRadius: 14,
|
||||
background: 'linear-gradient(135deg, #00E5FF22, #3B82F611)',
|
||||
border: '1px solid rgba(0, 229, 255, 0.2)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 18, color: 'white', fontWeight: 600, flexShrink: 0,
|
||||
fontSize: 20, color: 'var(--color-primary)', fontWeight: 700, flexShrink: 0,
|
||||
}}>
|
||||
{user.nickname?.[0] || user.phone?.slice(-4) || '?'}
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<p style={{ fontSize: 16, fontWeight: 600 }}>{user.nickname || '用户'}</p>
|
||||
<p style={{ fontSize: 13, color: '#86868B' }}>积分 {user.points} · {activeItems.length} 个活跃项</p>
|
||||
<p style={{
|
||||
fontSize: 16, fontWeight: 600, color: 'var(--color-text)',
|
||||
letterSpacing: 0.5,
|
||||
}}>
|
||||
{user.nickname || '用户'}
|
||||
</p>
|
||||
<p style={{
|
||||
fontSize: 12, color: 'var(--color-text-secondary)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
display: 'flex', alignItems: 'center', gap: 6,
|
||||
}}>
|
||||
<span style={{ color: 'var(--color-gold)' }}>◆</span>
|
||||
<span>{user.points} 积分</span>
|
||||
<span style={{ color: 'var(--color-text-muted)' }}>|</span>
|
||||
<span style={{ color: 'var(--color-primary)' }}>◈ {activeItems.length}</span>
|
||||
<span>活跃</span>
|
||||
{doneCount > 0 && (
|
||||
<>
|
||||
<span style={{ color: 'var(--color-text-muted)' }}>|</span>
|
||||
<span style={{ color: 'var(--color-accent)' }}>✓ {doneCount}/{activeItems.length}</span>
|
||||
<span>今日</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={() => router.push('/profile')}
|
||||
style={{ background: 'none', border: 'none', fontSize: 14, color: '#FF6B35', cursor: 'pointer' }}>
|
||||
我的
|
||||
<button
|
||||
onClick={() => router.push('/profile')}
|
||||
className="btn-cyber"
|
||||
style={{ padding: '8px 14px', fontSize: 12, flexShrink: 0 }}
|
||||
>
|
||||
个人
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '20px 16px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<h2 style={{ fontSize: 20, fontWeight: 700 }}>今日打卡</h2>
|
||||
<button onClick={() => router.push('/checkin/create')}
|
||||
style={{
|
||||
padding: '6px 14px', borderRadius: 8, border: '1.5px solid #FF6B35',
|
||||
background: 'white', color: '#FF6B35', fontSize: 14, fontWeight: 600, cursor: 'pointer',
|
||||
}}>
|
||||
+ 创建
|
||||
</button>
|
||||
{/* Today's Missions */}
|
||||
<div className="section-title-bar" style={{ marginTop: 8 }}>
|
||||
<span className="section-title-bar-text">今日任务</span>
|
||||
</div>
|
||||
|
||||
{activeItems.length === 0 ? (
|
||||
<div className="card" style={{ textAlign: 'center', padding: '40px 16px' }}>
|
||||
<p style={{ fontSize: 40, marginBottom: 12 }}>📋</p>
|
||||
<p style={{ fontSize: 15, color: '#86868B' }}>
|
||||
还没有打卡项<br />
|
||||
<span style={{ fontSize: 13 }}>点击右上角"创建"开始你的成长之旅</span>
|
||||
<div className="card" style={{
|
||||
textAlign: 'center',
|
||||
padding: '48px 20px',
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
|
||||
}}>
|
||||
<div style={{
|
||||
width: 56, height: 56, borderRadius: 16,
|
||||
background: 'rgba(0, 229, 255, 0.08)',
|
||||
border: '1px solid rgba(0, 229, 255, 0.15)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 24,
|
||||
}}>
|
||||
◈
|
||||
</div>
|
||||
<p style={{ fontSize: 15, color: 'var(--color-text-secondary)', lineHeight: 1.6 }}>
|
||||
还没有活跃的打卡项
|
||||
</p>
|
||||
<p style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>
|
||||
点击下方按钮创建你的第一个任务
|
||||
</p>
|
||||
<button
|
||||
onClick={() => router.push('/checkin/create')}
|
||||
className="btn-cyber btn-cyber--primary"
|
||||
style={{ marginTop: 8 }}
|
||||
>
|
||||
+ 创建任务
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
activeItems.map(item => (
|
||||
<>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', padding: '0 16px 4px' }}>
|
||||
<button
|
||||
onClick={() => router.push('/checkin/create')}
|
||||
className="btn-cyber"
|
||||
style={{ padding: '6px 14px', fontSize: 11, letterSpacing: 1 }}
|
||||
>
|
||||
+ 新建
|
||||
</button>
|
||||
</div>
|
||||
{activeItems.map((item, i) => (
|
||||
<div key={item.id} style={{
|
||||
animation: 'fadeUp 0.5s ease-out',
|
||||
animationDelay: `${i * 0.08}s`,
|
||||
animationFillMode: 'both',
|
||||
}}>
|
||||
<CheckInCard key={item.id} item={item} streak={streaks[item.id]}
|
||||
isDone={todayStatus[item.id]}
|
||||
onCheckIn={(id) => setTodayStatus(s => ({ ...s, [id]: true }))} />
|
||||
))
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Paused Items */}
|
||||
{pausedItems.length > 0 && (
|
||||
<>
|
||||
<h3 style={{ fontSize: 15, color: '#86868B', padding: '20px 16px 4px' }}>已暂停 ({pausedItems.length})</h3>
|
||||
<div className="section-title-bar" style={{ marginTop: 16 }}>
|
||||
<span className="section-title-bar-text" style={{ color: 'var(--color-text-muted)' }}>
|
||||
已暂停 ({pausedItems.length})
|
||||
</span>
|
||||
</div>
|
||||
{pausedItems.map(item => (
|
||||
<CheckInCard key={item.id} item={item} />
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ height: 100 }} />
|
||||
<TabBar />
|
||||
</>
|
||||
)
|
||||
|
||||
+148
-46
@@ -42,88 +42,190 @@ function ProfilePage() {
|
||||
setEditing(true)
|
||||
}
|
||||
|
||||
if (loading || !profile) return <div style={{ padding: 40, textAlign: 'center', color: '#86868B' }}>加载中...</div>
|
||||
if (loading || !profile) {
|
||||
return (
|
||||
<>
|
||||
<NavBar title="个人主页" />
|
||||
<div className="loading-container">
|
||||
<div className="loading-spinner" />
|
||||
<div className="loading-text">加载中</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavBar title="个人主页" showBack />
|
||||
<NavBar title="个人主页" />
|
||||
|
||||
{/* 头像与基本信息 */}
|
||||
<div className="card" style={{ marginTop: 16, textAlign: 'center', padding: '32px 16px' }}>
|
||||
<div className="page-container">
|
||||
{/* Avatar & Bio */}
|
||||
<div className="card" style={{
|
||||
marginTop: 14,
|
||||
textAlign: 'center',
|
||||
padding: '36px 20px 28px',
|
||||
background: 'linear-gradient(135deg, rgba(0, 229, 255, 0.03), rgba(59, 130, 246, 0.02))',
|
||||
}}>
|
||||
<div style={{
|
||||
width: 72, height: 72, borderRadius: 36,
|
||||
background: 'linear-gradient(135deg, #FF6B35, #FF4D6D)',
|
||||
width: 72, height: 72, borderRadius: 18,
|
||||
background: 'linear-gradient(135deg, #00E5FF22, #3B82F611)',
|
||||
border: '2px solid rgba(0, 229, 255, 0.15)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
margin: '0 auto 12px', fontSize: 28, color: 'white', fontWeight: 600
|
||||
margin: '0 auto 14px', fontSize: 28, color: 'var(--color-primary)', fontWeight: 600,
|
||||
boxShadow: '0 0 30px rgba(0, 229, 255, 0.1)',
|
||||
}}>
|
||||
{profile.nickname?.[0] || profile.phone?.slice(-4) || '?'}
|
||||
</div>
|
||||
<h2 style={{ fontSize: 22, fontWeight: 700 }}>{profile.nickname || '未设置昵称'}</h2>
|
||||
<p style={{ fontSize: 14, color: '#86868B', marginTop: 4 }}>{profile.bio || '还没有个性签名'}</p>
|
||||
<h2 style={{
|
||||
fontSize: 20, fontWeight: 700, color: 'var(--color-text)',
|
||||
letterSpacing: 1,
|
||||
}}>
|
||||
{profile.nickname || '未设置昵称'}
|
||||
</h2>
|
||||
<p style={{
|
||||
fontSize: 12, color: 'var(--color-text-muted)', marginTop: 6,
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{profile.bio || '没有个性签名'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 统计数据 */}
|
||||
<div className="card">
|
||||
<div style={{ display: 'flex', justifyContent: 'space-around', padding: '8px 0' }}>
|
||||
{/* Stats */}
|
||||
<div className="card" style={{ padding: '16px 20px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-around', padding: '4px 0' }}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<p style={{ fontSize: 24, fontWeight: 700, color: '#FF6B35' }}>{profile.points}</p>
|
||||
<p style={{ fontSize: 13, color: '#86868B' }}>总积分</p>
|
||||
<p style={{
|
||||
fontSize: 22, fontWeight: 700, color: 'var(--color-gold)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{profile.points}
|
||||
</p>
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginTop: 2,
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
积分
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<p style={{ fontSize: 24, fontWeight: 700, color: '#FF6B35' }}>--</p>
|
||||
<p style={{ fontSize: 13, color: '#86868B' }}>连续天数</p>
|
||||
<p style={{
|
||||
fontSize: 22, fontWeight: 700, color: 'var(--color-primary)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
--
|
||||
</p>
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginTop: 2,
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
连续
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<p style={{ fontSize: 24, fontWeight: 700, color: '#FF6B35' }}>--</p>
|
||||
<p style={{ fontSize: 13, color: '#86868B' }}>徽章</p>
|
||||
<p style={{
|
||||
fontSize: 22, fontWeight: 700, color: 'var(--color-social)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
--
|
||||
</p>
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginTop: 2,
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
徽章
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 操作列表 */}
|
||||
<div className="ios-list">
|
||||
{/* Actions */}
|
||||
<div className="card" style={{ padding: 0, overflow: 'hidden' }}>
|
||||
{!editing ? (
|
||||
<>
|
||||
<div className="ios-list-item" onClick={startEdit}>
|
||||
<span className="ios-list-item-label">编辑资料</span>
|
||||
<span className="ios-list-item-value">→</span>
|
||||
</div>
|
||||
<div className="ios-list-item">
|
||||
<span className="ios-list-item-label">隐私设置</span>
|
||||
<span className="ios-list-item-value">
|
||||
{profile.privacy === 1 ? '公开' : profile.privacy === 2 ? '仅好友可见' : '仅自己可见'}
|
||||
<button onClick={startEdit} className="ios-list-item" style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
padding: '16px 20px', width: '100%', border: 'none', cursor: 'pointer',
|
||||
background: 'transparent', color: 'var(--color-text)', fontSize: 14,
|
||||
borderBottom: '1px solid var(--color-border)',
|
||||
transition: 'background 0.2s',
|
||||
}}
|
||||
onMouseEnter={e => { e.currentTarget.style.background = 'var(--color-card-hover)' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
|
||||
>
|
||||
<span>编辑资料</span>
|
||||
<span style={{ color: 'var(--color-text-muted)' }}>→</span>
|
||||
</button>
|
||||
<div className="ios-list-item" style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
padding: '16px 20px', width: '100%',
|
||||
borderBottom: '1px solid var(--color-border)',
|
||||
}}>
|
||||
<span style={{ fontSize: 14, color: 'var(--color-text)' }}>隐私设置</span>
|
||||
<span style={{
|
||||
fontSize: 12, color: 'var(--color-text-muted)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{profile.privacy === 1 ? '公开' : profile.privacy === 2 ? '好友可见' : '私密'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="ios-list-item" onClick={() => router.push('/achievements')}>
|
||||
<span className="ios-list-item-label">成就徽章</span>
|
||||
<span className="ios-list-item-value">→</span>
|
||||
</div>
|
||||
<div className="ios-list-item" onClick={logout}>
|
||||
<span className="ios-list-item-label" style={{ color: '#FF3B30' }}>退出登录</span>
|
||||
</div>
|
||||
<button onClick={() => router.push('/achievements')} className="ios-list-item" style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
padding: '16px 20px', width: '100%', border: 'none', cursor: 'pointer',
|
||||
background: 'transparent', color: 'var(--color-text)', fontSize: 14,
|
||||
borderBottom: '1px solid var(--color-border)',
|
||||
transition: 'background 0.2s',
|
||||
}}
|
||||
onMouseEnter={e => { e.currentTarget.style.background = 'var(--color-card-hover)' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
|
||||
>
|
||||
<span>成就徽章</span>
|
||||
<span style={{ color: 'var(--color-text-muted)' }}>→</span>
|
||||
</button>
|
||||
<button onClick={logout} className="ios-list-item" style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
padding: '16px 20px', width: '100%', border: 'none', cursor: 'pointer',
|
||||
background: 'transparent', fontSize: 14,
|
||||
transition: 'background 0.2s',
|
||||
}}
|
||||
onMouseEnter={e => { e.currentTarget.style.background = 'var(--color-card-hover)' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
|
||||
>
|
||||
<span style={{ color: 'var(--color-error)' }}>退出登录</span>
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<div style={{ padding: 16 }}>
|
||||
<label style={{ fontSize: 13, color: '#86868B', marginBottom: 6, display: 'block' }}>昵称</label>
|
||||
<input className="input-field" value={nickname} onChange={e => setNickname(e.target.value)} style={{ marginBottom: 12 }} placeholder="输入昵称" />
|
||||
<label style={{ fontSize: 13, color: '#86868B', marginBottom: 6, display: 'block' }}>个性签名</label>
|
||||
<input className="input-field" value={bio} onChange={e => setBio(e.target.value)} style={{ marginBottom: 16 }} placeholder="最多 50 字" maxLength={50} />
|
||||
<div style={{ padding: 20 }}>
|
||||
<label style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginBottom: 6, display: 'block',
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
昵称
|
||||
</label>
|
||||
<input className="input-cyber" value={nickname} onChange={e => setNickname(e.target.value)}
|
||||
style={{ marginBottom: 14 }} placeholder="输入昵称" />
|
||||
<label style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginBottom: 6, display: 'block',
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
签名
|
||||
</label>
|
||||
<input className="input-cyber" value={bio} onChange={e => setBio(e.target.value)}
|
||||
style={{ marginBottom: 18 }} placeholder="最多 50 字" maxLength={50} />
|
||||
<div style={{ display: 'flex', gap: 12 }}>
|
||||
<button className="btn-primary" onClick={handleSave} disabled={saving} style={{ flex: 1 }}>
|
||||
<button className="btn-cyber btn-cyber--primary" onClick={handleSave} disabled={saving}
|
||||
style={{ flex: 1, padding: 12, fontSize: 13 }}>
|
||||
{saving ? '保存中...' : '保存'}
|
||||
</button>
|
||||
<button onClick={() => setEditing(false)} style={{
|
||||
flex: 1, padding: 14, background: '#f8f8fa', border: '1px solid #E5E5EA',
|
||||
borderRadius: 10, fontSize: 17, cursor: 'pointer', color: '#86868B'
|
||||
}}>
|
||||
<button onClick={() => setEditing(false)} className="btn-cyber"
|
||||
style={{ flex: 1, padding: 12, fontSize: 13, opacity: 0.6 }}>
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ height: 100 }} />
|
||||
<TabBar />
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -53,68 +53,114 @@
|
||||
? friends.filter(f => f.nickname?.includes(search))
|
||||
: friends
|
||||
|
||||
if (loading || pageLoading) return <div style={{ padding: 40, textAlign: 'center', color: '#86868B' }}>加载中...</div>
|
||||
if (loading || pageLoading) {
|
||||
return (
|
||||
<>
|
||||
<NavBar title="好友" showBack />
|
||||
<div className="loading-container">
|
||||
<div className="loading-spinner" />
|
||||
<div className="loading-text">加载中</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
if (!user) return null
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavBar title="好友" showBack />
|
||||
|
||||
{/* 添加好友 */}
|
||||
<div className="card" style={{ marginTop: 16 }}>
|
||||
<p style={{ fontSize: 15, fontWeight: 600, marginBottom: 8 }}>添加好友</p>
|
||||
<div className="page-container">
|
||||
{/* Add friend */}
|
||||
<div className="card" style={{ marginTop: 14 }}>
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginBottom: 10,
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
添加好友
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<input className="input-field" value={addPhone} onChange={e => setAddPhone(e.target.value)}
|
||||
placeholder="输入手机号" style={{ flex: 1 }} />
|
||||
<input className="input-cyber" value={addPhone} onChange={e => setAddPhone(e.target.value)}
|
||||
placeholder="输入手机号" style={{ flex: 1, fontSize: 14 }} />
|
||||
<button onClick={handleAdd} disabled={adding || !addPhone.trim()}
|
||||
className="btn-cyber btn-cyber--primary"
|
||||
style={{
|
||||
padding: '0 16px', borderRadius: 10, border: 'none',
|
||||
background: addPhone.trim() ? '#FF6B35' : '#E5E5EA',
|
||||
color: 'white', fontSize: 14, cursor: addPhone.trim() ? 'pointer' : 'default',
|
||||
padding: '0 18px', fontSize: 12, letterSpacing: 1,
|
||||
opacity: addPhone.trim() ? 1 : 0.4,
|
||||
}}>
|
||||
添加
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 好友列表 */}
|
||||
<div style={{ padding: '20px 16px 8px', display: 'flex', justifyContent: 'space-between' }}>
|
||||
<h3 style={{ fontSize: 15, fontWeight: 600 }}>好友列表 ({friends.length})</h3>
|
||||
{/* Friends list */}
|
||||
<div style={{
|
||||
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||
padding: '20px 16px 12px',
|
||||
}}>
|
||||
<span style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)',
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
好友 ({friends.length})
|
||||
</span>
|
||||
{friends.length > 0 && (
|
||||
<input className="input-field" value={search} onChange={e => setSearch(e.target.value)}
|
||||
placeholder="搜索..." style={{ width: 140, fontSize: 13, padding: '6px 10px' }} />
|
||||
<input className="input-cyber" value={search} onChange={e => setSearch(e.target.value)}
|
||||
placeholder="搜索" style={{
|
||||
width: 130, fontSize: 11, padding: '6px 10px',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
<div className="card" style={{ textAlign: 'center', padding: '40px 16px' }}>
|
||||
<p style={{ fontSize: 15, color: '#86868B' }}>
|
||||
{search ? '未找到匹配的好友' : '还没有好友，输入手机号添加吧'}
|
||||
<div className="card" style={{
|
||||
textAlign: 'center', padding: '40px 16px',
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
|
||||
}}>
|
||||
<p style={{ fontSize: 15, color: 'var(--color-text-secondary)' }}>
|
||||
{search ? '未找到匹配的好友' : '还没有好友'}
|
||||
</p>
|
||||
{!search && (
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
输入手机号添加好友
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
filtered.map(f => (
|
||||
<div key={f.id} className="ios-list-item" style={{ margin: '0 16px', borderRadius: 12, background: 'white', padding: '12px 16px' }}>
|
||||
<div key={f.id} className="card" style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
padding: '12px 18px', margin: '4px 16px',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<div style={{
|
||||
width: 36, height: 36, borderRadius: 18,
|
||||
background: 'linear-gradient(135deg, #FF6B35, #FF4D6D)',
|
||||
width: 38, height: 38, borderRadius: 10,
|
||||
background: 'linear-gradient(135deg, rgba(255, 60, 126, 0.15), rgba(255, 23, 68, 0.08))',
|
||||
border: '1px solid rgba(255, 60, 126, 0.2)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 14, color: 'white', fontWeight: 600,
|
||||
fontSize: 14, color: 'var(--color-social)', fontWeight: 600,
|
||||
}}>
|
||||
{f.nickname?.[0] || '?'}
|
||||
</div>
|
||||
<span style={{ fontSize: 15 }}>{f.nickname || '用户'}</span>
|
||||
<span style={{
|
||||
fontSize: 14, color: 'var(--color-text)',
|
||||
}}>
|
||||
{f.nickname || '用户'}
|
||||
</span>
|
||||
</div>
|
||||
<button onClick={() => handleRemove(f.id)}
|
||||
style={{ background: 'none', border: 'none', fontSize: 13, color: '#FF3B30', cursor: 'pointer' }}>
|
||||
className="btn-cyber btn-cyber--danger"
|
||||
style={{ padding: '6px 14px', fontSize: 11 }}>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
<div style={{ height: 80 }} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
+91
-28
@@ -55,41 +55,79 @@
|
||||
<>
|
||||
<NavBar title="广场" />
|
||||
|
||||
{/* 发布动态入口 */}
|
||||
<div className="card" style={{ marginTop: 16, cursor: 'pointer' }} onClick={() => setShowCreate(true)}>
|
||||
<div className="page-container">
|
||||
{/* Create post entry */}
|
||||
<div className="card" style={{
|
||||
marginTop: 14, cursor: 'pointer',
|
||||
transition: 'all 0.2s',
|
||||
border: '1px solid rgba(255, 60, 126, 0.08)',
|
||||
}}
|
||||
onClick={() => setShowCreate(true)}
|
||||
onMouseEnter={e => {
|
||||
e.currentTarget.style.borderColor = 'rgba(255, 60, 126, 0.2)'
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
e.currentTarget.style.borderColor = 'rgba(255, 60, 126, 0.08)'
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<div style={{
|
||||
width: 36, height: 36, borderRadius: 18,
|
||||
background: 'linear-gradient(135deg, #FF6B35, #FF4D6D)',
|
||||
width: 38, height: 38, borderRadius: 10,
|
||||
background: 'rgba(255, 60, 126, 0.1)',
|
||||
border: '1px solid rgba(255, 60, 126, 0.2)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 14, color: 'white', fontWeight: 600,
|
||||
fontSize: 15, color: 'var(--color-social)', fontWeight: 600,
|
||||
}}>
|
||||
{user.nickname?.[0] || user.phone?.slice(-4) || '?'}
|
||||
</div>
|
||||
<span style={{ fontSize: 15, color: '#86868B' }}>分享你的打卡动态...</span>
|
||||
<span style={{
|
||||
fontSize: 14, color: 'var(--color-text-muted)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
分享你的打卡动态...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 创建动态弹层 */}
|
||||
{/* Create post modal */}
|
||||
{showCreate && (
|
||||
<div style={{
|
||||
position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(0,0,0,0.4)',
|
||||
position: 'fixed', inset: 0, zIndex: 200,
|
||||
background: 'rgba(8, 12, 24, 0.7)',
|
||||
backdropFilter: 'blur(8px)',
|
||||
display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
|
||||
}} onClick={() => setShowCreate(false)}>
|
||||
<div className="card" style={{ width: '100%', maxWidth: 500, margin: 0, borderRadius: '16px 16px 0 0' }}
|
||||
onClick={e => e.stopPropagation()}>
|
||||
<p style={{ fontSize: 17, fontWeight: 600, textAlign: 'center', marginBottom: 12 }}>发布动态</p>
|
||||
<div className="card" style={{
|
||||
width: '100%', maxWidth: 500, margin: 0,
|
||||
borderRadius: '20px 20px 0 0',
|
||||
padding: '24px 20px 32px',
|
||||
}} onClick={e => e.stopPropagation()}>
|
||||
<p style={{
|
||||
fontSize: 16, fontWeight: 600, textAlign: 'center', marginBottom: 16,
|
||||
color: 'var(--color-social)',
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
发布动态
|
||||
</p>
|
||||
<textarea ref={inputRef} value={newContent} onChange={e => setNewContent(e.target.value)}
|
||||
placeholder="分享你的打卡故事..." rows={4}
|
||||
style={{ width: '100%', border: '1px solid #E5E5EA', borderRadius: 10, padding: 12, fontSize: 15, resize: 'none', outline: 'none', fontFamily: 'inherit' }}
|
||||
placeholder="分享你的打卡故事..."
|
||||
rows={4}
|
||||
className="input-cyber"
|
||||
style={{
|
||||
width: '100%', padding: 14, fontSize: 14, resize: 'none',
|
||||
fontFamily: 'var(--font-body)',
|
||||
}}
|
||||
/>
|
||||
<div style={{ display: 'flex', gap: 12, marginTop: 12 }}>
|
||||
<div style={{ display: 'flex', gap: 12, marginTop: 14 }}>
|
||||
<button onClick={() => { setShowCreate(false); setNewContent('') }}
|
||||
style={{ flex: 1, padding: 12, background: '#f8f8fa', border: '1px solid #E5E5EA', borderRadius: 10, fontSize: 15, cursor: 'pointer' }}>
|
||||
className="btn-cyber" style={{ flex: 1, padding: 12, fontSize: 13 }}>
|
||||
取消
|
||||
</button>
|
||||
<button onClick={handleCreate} disabled={creating || !newContent.trim()}
|
||||
className="btn-primary" style={{ flex: 1, padding: 12 }}>
|
||||
className="btn-cyber btn-cyber--primary" style={{
|
||||
flex: 1, padding: 12, fontSize: 13,
|
||||
opacity: creating || !newContent.trim() ? 0.5 : 1,
|
||||
}}>
|
||||
{creating ? '发布中...' : '发布'}
|
||||
</button>
|
||||
</div>
|
||||
@@ -97,32 +135,57 @@
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Feed 列表 */}
|
||||
{/* Feed list */}
|
||||
{feedLoading ? (
|
||||
<div style={{ padding: 40, textAlign: 'center', color: '#86868B' }}>加载中...</div>
|
||||
<div className="loading-container">
|
||||
<div className="loading-spinner" />
|
||||
<div className="loading-text">加载中</div>
|
||||
</div>
|
||||
) : posts.length === 0 ? (
|
||||
<div className="card" style={{ textAlign: 'center', padding: '40px 16px' }}>
|
||||
<p style={{ fontSize: 40, marginBottom: 12 }}>🌊</p>
|
||||
<p style={{ fontSize: 15, color: '#86868B' }}>还没有动态，快来发布第一条吧</p>
|
||||
<div className="card" style={{
|
||||
textAlign: 'center',
|
||||
padding: '48px 20px',
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
|
||||
}}>
|
||||
<div style={{
|
||||
width: 56, height: 56, borderRadius: 16,
|
||||
background: 'rgba(255, 60, 126, 0.08)',
|
||||
border: '1px solid rgba(255, 60, 126, 0.15)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 24,
|
||||
}}>
|
||||
◎
|
||||
</div>
|
||||
<p style={{ fontSize: 15, color: 'var(--color-text-secondary)' }}>
|
||||
还没有动态
|
||||
</p>
|
||||
<p style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>
|
||||
快来发布第一条吧
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
posts.map(post => (
|
||||
posts.map((post, i) => (
|
||||
<div key={post.id} style={{
|
||||
animation: 'fadeUp 0.4s ease-out',
|
||||
animationDelay: `${i * 0.04}s`,
|
||||
animationFillMode: 'both',
|
||||
}}>
|
||||
<FeedCard key={post.id} post={post} onUpdate={loadFeed} />
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
{/* 加载更多 */}
|
||||
{/* Load more */}
|
||||
{posts.length < total && (
|
||||
<button onClick={() => setPage(p => p + 1)} style={{
|
||||
display: 'block', margin: '16px auto', padding: '10px 24px',
|
||||
background: 'white', border: '1px solid #E5E5EA', borderRadius: 8,
|
||||
fontSize: 14, color: '#86868B', cursor: 'pointer',
|
||||
<button onClick={() => setPage(p => p + 1)} className="btn-cyber" style={{
|
||||
display: 'block', margin: '16px auto', padding: '10px 28px',
|
||||
fontSize: 12, letterSpacing: 1,
|
||||
}}>
|
||||
加载更多
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ height: 100 }} />
|
||||
<TabBar />
|
||||
</>
|
||||
)
|
||||
|
||||
+177
-43
@@ -30,99 +30,233 @@ function StatsPage() {
|
||||
setPageLoading(false)
|
||||
}
|
||||
|
||||
if (loading || pageLoading) return <div style={{ padding: 40, textAlign: 'center', color: '#86868B' }}>加载中...</div>
|
||||
if (loading || pageLoading) {
|
||||
return (
|
||||
<>
|
||||
<NavBar title="统计" />
|
||||
<div className="loading-container">
|
||||
<div className="loading-spinner" />
|
||||
<div className="loading-text">分析中</div>
|
||||
</div>
|
||||
<TabBar />
|
||||
</>
|
||||
)
|
||||
}
|
||||
if (!user) return null
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavBar title="统计" />
|
||||
|
||||
{/* 月份切换 */}
|
||||
<div className="card" style={{ marginTop: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div className="page-container">
|
||||
{/* Month selector */}
|
||||
<div className="card" style={{
|
||||
marginTop: 14, display: 'flex', justifyContent: 'space-between',
|
||||
alignItems: 'center', padding: '14px 18px',
|
||||
}}>
|
||||
<button onClick={() => { if (month === 1) { setYear(y => y - 1); setMonth(12) } else setMonth(m => m - 1) }}
|
||||
style={{ background: 'none', border: 'none', fontSize: 18, cursor: 'pointer', padding: 8 }}>←</button>
|
||||
<span style={{ fontSize: 17, fontWeight: 600 }}>{year} 年 {month} 月</span>
|
||||
className="btn-cyber" style={{ padding: '6px 12px', fontSize: 14, border: '1px solid rgba(0, 229, 255, 0.15)' }}>
|
||||
←
|
||||
</button>
|
||||
<span style={{
|
||||
fontSize: 15, fontWeight: 600, color: 'var(--color-text)',
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 2,
|
||||
}}>
|
||||
{year}.{String(month).padStart(2, '0')}
|
||||
</span>
|
||||
<button onClick={() => { if (month === 12) { setYear(y => y + 1); setMonth(1) } else setMonth(m => m + 1) }}
|
||||
style={{ background: 'none', border: 'none', fontSize: 18, cursor: 'pointer', padding: 8 }}>→</button>
|
||||
className="btn-cyber" style={{ padding: '6px 12px', fontSize: 14, border: '1px solid rgba(0, 229, 255, 0.15)' }}>
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{data && (
|
||||
<>
|
||||
{/* 概览卡片 */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, margin: '8px 16px' }}>
|
||||
<div className="card" style={{ margin: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
|
||||
<ProgressRing percent={data.summary.completionRate} size={90} label="完成率" />
|
||||
{/* Overview */}
|
||||
<div style={{
|
||||
display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, margin: '8px 16px',
|
||||
}}>
|
||||
<div className="card card-glow" style={{ margin: 0, padding: '20px 12px', display: 'flex', justifyContent: 'center' }}>
|
||||
<ProgressRing percent={data.summary.completionRate} size={96} label="完成率" />
|
||||
</div>
|
||||
<div className="card" style={{ margin: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 12 }}>
|
||||
<div className="card" style={{
|
||||
margin: 0, display: 'flex', flexDirection: 'column',
|
||||
justifyContent: 'center', gap: 14, padding: '16px 18px',
|
||||
}}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<p style={{ fontSize: 24, fontWeight: 700, color: '#FF6B35' }}>{data.summary.totalRecords}</p>
|
||||
<p style={{ fontSize: 12, color: '#86868B' }}>本月打卡</p>
|
||||
<p style={{
|
||||
fontSize: 22, fontWeight: 700, color: 'var(--color-primary)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{data.summary.totalRecords}
|
||||
</p>
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginTop: 2,
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
打卡
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<p style={{ fontSize: 24, fontWeight: 700, color: '#FF6B35' }}>{data.summary.totalItems}</p>
|
||||
<p style={{ fontSize: 12, color: '#86868B' }}>活跃项</p>
|
||||
<p style={{
|
||||
fontSize: 22, fontWeight: 700, color: 'var(--color-primary)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{data.summary.totalItems}
|
||||
</p>
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)', marginTop: 2,
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1,
|
||||
}}>
|
||||
活跃项
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 最高连续天数 */}
|
||||
<div className="card" style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 20px' }}>
|
||||
<span style={{ fontSize: 32 }}>🔥</span>
|
||||
{/* Max streak */}
|
||||
<div className="card" style={{
|
||||
display: 'flex', alignItems: 'center', gap: 14, padding: '16px 20px',
|
||||
background: 'linear-gradient(135deg, rgba(255, 179, 71, 0.04), transparent)',
|
||||
border: '1px solid rgba(255, 179, 71, 0.12)',
|
||||
}}>
|
||||
<div style={{
|
||||
width: 44, height: 44, borderRadius: 12,
|
||||
background: 'rgba(255, 179, 71, 0.1)',
|
||||
border: '1px solid rgba(255, 179, 71, 0.2)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 20,
|
||||
}}>
|
||||
◆
|
||||
</div>
|
||||
<div>
|
||||
<p style={{ fontSize: 24, fontWeight: 700, color: '#FF6B35' }}>{data.summary.maxStreak} 天</p>
|
||||
<p style={{ fontSize: 13, color: '#86868B' }}>最高连续打卡</p>
|
||||
<p style={{
|
||||
fontSize: 22, fontWeight: 700, color: 'var(--color-gold)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{data.summary.maxStreak}
|
||||
<span style={{
|
||||
fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 400,
|
||||
color: 'var(--color-text-secondary)', marginLeft: 4,
|
||||
}}>天</span>
|
||||
</p>
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)',
|
||||
fontFamily: 'var(--font-display)', letterSpacing: 1, marginTop: 2,
|
||||
}}>
|
||||
最高连续
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 分类分布 */}
|
||||
<h3 style={{ fontSize: 15, color: '#86868B', padding: '20px 16px 8px' }}>分类分布</h3>
|
||||
<div className="card" style={{ padding: '12px 16px' }}>
|
||||
{data.byCategory.map(c => {
|
||||
{/* Category distribution */}
|
||||
<div className="section-title-bar" style={{ marginTop: 8 }}>
|
||||
<span className="section-title-bar-text">分类分布</span>
|
||||
</div>
|
||||
<div className="card" style={{ padding: '14px 18px' }}>
|
||||
{data.byCategory.map((c) => {
|
||||
const pct = data.summary.totalItems > 0 ? Math.round((c.count / data.summary.totalItems) * 100) : 0
|
||||
return (
|
||||
<div key={c.category} style={{ marginBottom: 10 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
|
||||
<span style={{ fontSize: 14 }}>{c.label}</span>
|
||||
<span style={{ fontSize: 13, color: '#86868B' }}>{c.count} 项 · {pct}%</span>
|
||||
<div key={c.category} style={{ marginBottom: 12 }}>
|
||||
<div style={{
|
||||
display: 'flex', justifyContent: 'space-between', marginBottom: 5,
|
||||
}}>
|
||||
<span style={{
|
||||
fontSize: 13, color: 'var(--color-text)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
<span style={{ color: c.color }}>▸</span> {c.label}
|
||||
</span>
|
||||
<span style={{
|
||||
fontSize: 12, color: 'var(--color-text-muted)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{c.count} 项 · {pct}%
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ height: 6, borderRadius: 3, background: '#F0F0F0', overflow: 'hidden' }}>
|
||||
<div style={{ height: '100%', borderRadius: 3, background: c.color, width: pct + '%', transition: 'width 0.5s' }} />
|
||||
<div style={{
|
||||
height: 5, borderRadius: 3,
|
||||
background: 'var(--color-progress-bg)',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<div style={{
|
||||
height: '100%', borderRadius: 3,
|
||||
background: c.color,
|
||||
width: pct + '%',
|
||||
transition: 'width 0.6s ease',
|
||||
boxShadow: `0 0 8px ${c.color}66`,
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 单项详情 */}
|
||||
<h3 style={{ fontSize: 15, color: '#86868B', padding: '20px 16px 8px' }}>单项统计</h3>
|
||||
{/* Per-item stats */}
|
||||
<div className="section-title-bar" style={{ marginTop: 8 }}>
|
||||
<span className="section-title-bar-text">单项统计</span>
|
||||
</div>
|
||||
{data.items.map((item: any) => {
|
||||
const rate = data.daysInMonth > 0 ? Math.round((item.monthlyCount / data.daysInMonth) * 100) : 0
|
||||
return (
|
||||
<div key={item.id} className="card" onClick={() => router.push(`/checkin/${item.id}`)}
|
||||
style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div key={item.id} className="card"
|
||||
onClick={() => router.push(`/checkin/${item.id}`)}
|
||||
style={{
|
||||
cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12,
|
||||
transition: 'all 0.2s',
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
e.currentTarget.style.borderColor = 'rgba(0, 229, 255, 0.2)'
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
e.currentTarget.style.borderColor = ''
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
width: 40, height: 40, borderRadius: 10,
|
||||
background: '#FFF0EB', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18,
|
||||
background: 'var(--color-primary-dim)',
|
||||
border: '1px solid rgba(0, 229, 255, 0.1)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18,
|
||||
}}>
|
||||
{item.icon || '📋'}
|
||||
{item.icon || '◈'}
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<p style={{ fontSize: 15, fontWeight: 600 }}>{item.name}</p>
|
||||
<p style={{ fontSize: 12, color: '#86868B' }}>
|
||||
打卡 {item.monthlyCount}/{data.daysInMonth} 天 · 连续 {item.streak} 天
|
||||
<p style={{
|
||||
fontSize: 14, fontWeight: 600, color: 'var(--color-text)',
|
||||
}}>
|
||||
{item.name}
|
||||
</p>
|
||||
<div style={{ height: 4, borderRadius: 2, background: '#F0F0F0', marginTop: 4, overflow: 'hidden' }}>
|
||||
<div style={{ height: '100%', borderRadius: 2, background: '#FF6B35', width: rate + '%', transition: 'width 0.5s' }} />
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{item.monthlyCount}/{data.daysInMonth} 天 · 连续 {item.streak} 天
|
||||
</p>
|
||||
<div style={{
|
||||
height: 3, borderRadius: 2,
|
||||
background: 'var(--color-progress-bg)', marginTop: 5, overflow: 'hidden',
|
||||
}}>
|
||||
<div style={{
|
||||
height: '100%', borderRadius: 2,
|
||||
background: 'var(--color-primary)',
|
||||
width: rate + '%',
|
||||
transition: 'width 0.6s ease',
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
<span style={{ fontSize: 14, fontWeight: 600, color: '#FF6B35' }}>{rate}%</span>
|
||||
<span style={{
|
||||
fontSize: 14, fontWeight: 700, color: 'var(--color-primary)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{rate}%
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ height: 100 }} />
|
||||
<TabBar />
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -31,53 +31,118 @@ export default function CheckInCard({ item, onCheckIn, streak, isDone }: CheckIn
|
||||
}
|
||||
}
|
||||
|
||||
const isActive = item.status === 'active'
|
||||
|
||||
return (
|
||||
<div
|
||||
className="card"
|
||||
onClick={() => router.push(`/checkin/${item.id}`)}
|
||||
style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px' }}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 14,
|
||||
padding: '16px 18px',
|
||||
margin: '6px 16px',
|
||||
animation: 'fadeUp 0.5s ease-out',
|
||||
opacity: isActive ? 1 : 0.5,
|
||||
transition: 'all 0.3s',
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
if (isActive) e.currentTarget.style.borderColor = 'rgba(0, 229, 255, 0.2)'
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
e.currentTarget.style.borderColor = ''
|
||||
}}
|
||||
>
|
||||
{/* 分类图标 */}
|
||||
{/* Category icon */}
|
||||
<div style={{
|
||||
width: 44, height: 44, borderRadius: 12,
|
||||
background: cfg.color + '20',
|
||||
background: `linear-gradient(135deg, ${cfg.color}22, ${cfg.color}11)`,
|
||||
border: `1px solid ${cfg.color}33`,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 22, flexShrink: 0,
|
||||
fontSize: 20, flexShrink: 0,
|
||||
position: 'relative',
|
||||
}}>
|
||||
{item.icon || cfg.icon}
|
||||
</div>
|
||||
|
||||
{/* 名称与信息 */}
|
||||
{/* Info */}
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<p style={{ fontSize: 16, fontWeight: 600, marginBottom: 2 }}>{item.name}</p>
|
||||
<p style={{ fontSize: 13, color: '#86868B', display: 'flex', gap: 8, alignItems: 'center' }}>
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3,
|
||||
}}>
|
||||
<p style={{
|
||||
fontSize: 15, fontWeight: 600, color: 'var(--color-text)',
|
||||
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||||
}}>
|
||||
{item.name}
|
||||
</p>
|
||||
{done && (
|
||||
<span className="badge badge--green" style={{ flexShrink: 0 }}>
|
||||
✓ 已打卡
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p style={{
|
||||
fontSize: 12, color: 'var(--color-text-muted)',
|
||||
display: 'flex', gap: 8, alignItems: 'center',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
<span style={{ color: cfg.color }}>▸</span>
|
||||
<span>{cfg.label}</span>
|
||||
<span>·</span>
|
||||
<span style={{ color: 'var(--color-text-muted)' }}>/</span>
|
||||
<span>{CYCLE_LABEL[item.cycleType] || item.cycleType}</span>
|
||||
{streak !== undefined && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<span style={{ color: '#FF6B35' }}>🔥 {streak} 天</span>
|
||||
<span style={{ color: 'var(--color-text-muted)' }}>/</span>
|
||||
<span style={{ color: 'var(--color-gold)' }}>
|
||||
◆ {streak}
|
||||
<span style={{ fontFamily: 'var(--font-body)', marginLeft: 2 }}>天</span>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 打卡按钮 */}
|
||||
{/* Check-in button */}
|
||||
<button
|
||||
onClick={handleCheckIn}
|
||||
disabled={checking || done}
|
||||
disabled={checking || done || !isActive}
|
||||
style={{
|
||||
width: 44, height: 44, borderRadius: 22, border: 'none', cursor: done ? 'default' : 'pointer',
|
||||
width: 46, height: 46, borderRadius: 14,
|
||||
border: done
|
||||
? '1px solid rgba(0, 230, 118, 0.3)'
|
||||
: '1px solid rgba(0, 229, 255, 0.2)',
|
||||
cursor: done || !isActive ? 'default' : 'pointer',
|
||||
background: done
|
||||
? 'linear-gradient(135deg, #34C759, #28A745)'
|
||||
: 'linear-gradient(135deg, #FF6B35, #FF4D6D)',
|
||||
color: 'white', fontSize: 18, fontWeight: 600, flexShrink: 0,
|
||||
transition: 'transform 0.2s, opacity 0.2s',
|
||||
? 'linear-gradient(135deg, #00E676, #00C853)'
|
||||
: 'linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(59, 130, 246, 0.15))',
|
||||
color: done ? '#080C18' : 'var(--color-primary)',
|
||||
fontSize: 20, fontWeight: 700, flexShrink: 0,
|
||||
transition: 'all 0.3s',
|
||||
opacity: checking ? 0.6 : 1,
|
||||
boxShadow: done ? '0 0 20px rgba(0, 230, 118, 0.25)' : 'none',
|
||||
animation: done ? 'glowPulseGreen 2s ease-in-out infinite' : 'none',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
if (!done && isActive) {
|
||||
e.currentTarget.style.background = 'linear-gradient(135deg, rgba(0, 229, 255, 0.25), rgba(59, 130, 246, 0.25))'
|
||||
e.currentTarget.style.boxShadow = '0 0 20px rgba(0, 229, 255, 0.15)'
|
||||
e.currentTarget.style.transform = 'scale(1.05)'
|
||||
}
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
if (!done) {
|
||||
e.currentTarget.style.background = 'linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(59, 130, 246, 0.15))'
|
||||
e.currentTarget.style.boxShadow = 'none'
|
||||
e.currentTarget.style.transform = 'scale(1)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{done ? '✓' : checking ? '...' : '+'}
|
||||
{done ? '✓' : checking ? '⋯' : '+'}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -38,43 +38,59 @@
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
// 解析图片数组
|
||||
let images: string[] = []
|
||||
try { if (post.images) images = JSON.parse(post.images) } catch { images = [] }
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
{/* 用户信息 */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
|
||||
<div className="card" style={{ animation: 'fadeUp 0.5s ease-out', padding: '18px 18px' }}>
|
||||
{/* User info */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
|
||||
<div style={{
|
||||
width: 36, height: 36, borderRadius: 18,
|
||||
background: 'linear-gradient(135deg, #FF6B35, #FF4D6D)',
|
||||
width: 38, height: 38, borderRadius: 10,
|
||||
background: 'linear-gradient(135deg, rgba(255, 60, 126, 0.2), rgba(255, 23, 68, 0.1))',
|
||||
border: '1px solid rgba(255, 60, 126, 0.25)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 14, color: 'white', fontWeight: 600, flexShrink: 0,
|
||||
fontSize: 15, color: 'var(--color-social)', fontWeight: 600, flexShrink: 0,
|
||||
}}>
|
||||
{post.user?.nickname?.[0] || '?'}
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<p style={{ fontSize: 14, fontWeight: 600 }}>{post.user?.nickname || '用户'}</p>
|
||||
<p style={{ fontSize: 12, color: '#86868B' }}>{timeStr}</p>
|
||||
<p style={{ fontSize: 14, fontWeight: 600, color: 'var(--color-text)' }}>
|
||||
{post.user?.nickname || '用户'}
|
||||
</p>
|
||||
<p style={{
|
||||
fontSize: 11, color: 'var(--color-text-muted)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
{timeStr}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 内容 */}
|
||||
{/* Content */}
|
||||
{post.content && (
|
||||
<p style={{ fontSize: 15, lineHeight: 1.5, marginBottom: images.length > 0 ? 10 : 0, whiteSpace: 'pre-wrap' }}>
|
||||
<p style={{
|
||||
fontSize: 14, lineHeight: 1.7, marginBottom: images.length > 0 ? 12 : 0,
|
||||
whiteSpace: 'pre-wrap', color: 'var(--color-text)',
|
||||
}}>
|
||||
{post.content}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* 图片 */}
|
||||
{/* Images */}
|
||||
{images.length > 0 && (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: images.length === 1 ? '1fr' : `repeat(${Math.min(images.length, 3)}, 1fr)`, gap: 4, marginBottom: 10 }}>
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: images.length === 1 ? '1fr' : `repeat(${Math.min(images.length, 3)}, 1fr)`,
|
||||
gap: 4, marginBottom: 12, borderRadius: 8, overflow: 'hidden',
|
||||
}}>
|
||||
{images.slice(0, 3).map((url, i) => (
|
||||
<div key={i} style={{
|
||||
aspectRatio: '1', borderRadius: 8, background: '#F0F0F0',
|
||||
aspectRatio: '1', borderRadius: 6,
|
||||
background: 'var(--color-bg)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 12, color: '#86868B', overflow: 'hidden',
|
||||
fontSize: 12, color: 'var(--color-text-muted)', overflow: 'hidden',
|
||||
border: '1px solid var(--color-border)',
|
||||
}}>
|
||||
<img src={url} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
|
||||
</div>
|
||||
@@ -82,30 +98,56 @@
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 互动按钮 */}
|
||||
<div style={{ display: 'flex', gap: 20, paddingTop: 8, borderTop: '0.5px solid #F0F0F0' }}>
|
||||
{/* Actions */}
|
||||
<div style={{
|
||||
display: 'flex', gap: 20, paddingTop: 10,
|
||||
borderTop: '1px solid var(--color-border)',
|
||||
}}>
|
||||
<button onClick={handleLike} disabled={liking}
|
||||
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 13, color: '#86868B', display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
{likes > 0 ? '❤️' : '🤍'} {likes}
|
||||
style={{
|
||||
background: 'none', border: 'none', cursor: 'pointer',
|
||||
fontSize: 12, color: likes > 0 ? 'var(--color-social)' : 'var(--color-text-muted)',
|
||||
display: 'flex', alignItems: 'center', gap: 5,
|
||||
transition: 'color 0.2s',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
<span style={{ fontSize: 14 }}>{likes > 0 ? '♥' : '♡'}</span>
|
||||
<span>{likes}</span>
|
||||
</button>
|
||||
<button onClick={() => setShowComment(!showComment)}
|
||||
style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 13, color: '#86868B', display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
💬 {comments}
|
||||
style={{
|
||||
background: 'none', border: 'none', cursor: 'pointer',
|
||||
fontSize: 12, color: 'var(--color-text-muted)',
|
||||
display: 'flex', alignItems: 'center', gap: 5,
|
||||
transition: 'color 0.2s',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}>
|
||||
<span style={{ fontSize: 14 }}>✎</span>
|
||||
<span>{comments}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 评论输入 */}
|
||||
{/* Comment input */}
|
||||
{showComment && (
|
||||
<div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
|
||||
<input className="input-field" value={commentText} onChange={e => setCommentText(e.target.value)}
|
||||
placeholder="说点什么..." style={{ flex: 1, fontSize: 14, padding: '8px 12px' }}
|
||||
onKeyDown={e => e.key === 'Enter' && handleComment()} />
|
||||
<button onClick={handleComment} disabled={!commentText.trim()}
|
||||
<div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
|
||||
<input
|
||||
className="input-cyber"
|
||||
value={commentText}
|
||||
onChange={e => setCommentText(e.target.value)}
|
||||
placeholder="说点什么..."
|
||||
style={{ flex: 1, fontSize: 13, padding: '10px 14px' }}
|
||||
onKeyDown={e => e.key === 'Enter' && handleComment()}
|
||||
/>
|
||||
<button
|
||||
onClick={handleComment}
|
||||
disabled={!commentText.trim()}
|
||||
className="btn-cyber"
|
||||
style={{
|
||||
padding: '8px 16px', borderRadius: 8, border: 'none',
|
||||
background: commentText.trim() ? '#FF6B35' : '#E5E5EA',
|
||||
color: 'white', fontSize: 14, cursor: commentText.trim() ? 'pointer' : 'default',
|
||||
}}>
|
||||
padding: '10px 18px',
|
||||
fontSize: 13,
|
||||
opacity: commentText.trim() ? 1 : 0.4,
|
||||
}}
|
||||
>
|
||||
发送
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -10,18 +10,17 @@ interface NavBarProps {
|
||||
showLogout?: boolean
|
||||
}
|
||||
|
||||
export default function NavBar({ title, showBack = false, showLogout = false }: NavBarProps) {
|
||||
const { logout, user } = useAuth()
|
||||
export default function NavBar({ title, showBack = false }: NavBarProps) {
|
||||
const router = useRouter()
|
||||
const { mode, toggle } = useTheme()
|
||||
|
||||
return (
|
||||
<nav style={{
|
||||
position: 'sticky', top: 0, zIndex: 100,
|
||||
background: 'var(--color-nav-bg)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
WebkitBackdropFilter: 'blur(20px)',
|
||||
borderBottom: '0.5px solid var(--color-border)',
|
||||
background: 'rgba(8, 12, 24, 0.85)',
|
||||
backdropFilter: 'blur(24px) saturate(1.4)',
|
||||
WebkitBackdropFilter: 'blur(24px) saturate(1.4)',
|
||||
borderBottom: '1px solid rgba(26, 34, 69, 0.6)',
|
||||
padding: '12px 16px',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
}}>
|
||||
@@ -29,42 +28,74 @@ export default function NavBar({ title, showBack = false, showLogout = false }:
|
||||
{showBack && (
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
style={{ background: 'none', border: 'none', fontSize: 20, cursor: 'pointer', padding: 4, color: 'var(--color-text)' }}
|
||||
style={{
|
||||
background: 'rgba(0, 229, 255, 0.08)',
|
||||
border: '1px solid rgba(0, 229, 255, 0.15)',
|
||||
borderRadius: 8,
|
||||
fontSize: 16,
|
||||
cursor: 'pointer',
|
||||
padding: '6px 10px',
|
||||
color: 'var(--color-primary)',
|
||||
transition: 'all 0.2s',
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
e.currentTarget.style.background = 'rgba(0, 229, 255, 0.15)'
|
||||
e.currentTarget.style.boxShadow = '0 0 12px rgba(0, 229, 255, 0.1)'
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
e.currentTarget.style.background = 'rgba(0, 229, 255, 0.08)'
|
||||
e.currentTarget.style.boxShadow = 'none'
|
||||
}}
|
||||
>
|
||||
←
|
||||
</button>
|
||||
)}
|
||||
{showLogout && user && (
|
||||
<button
|
||||
onClick={() => router.push('/profile')}
|
||||
style={{ background: 'none', border: 'none', fontSize: 15, cursor: 'pointer', color: 'var(--color-primary)', padding: 4 }}
|
||||
>
|
||||
我的
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<span style={{ fontSize: 17, fontWeight: 600, flex: 1, textAlign: 'center', color: 'var(--color-text)' }}>{title}</span>
|
||||
<div style={{
|
||||
fontSize: 16,
|
||||
fontWeight: 600,
|
||||
flex: 1,
|
||||
textAlign: 'center',
|
||||
color: 'var(--color-text)',
|
||||
fontFamily: 'var(--font-body)',
|
||||
letterSpacing: 1,
|
||||
}}>
|
||||
<span style={{
|
||||
background: 'linear-gradient(135deg, #00E5FF, #3B82F6)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
}}>
|
||||
{title}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8, minWidth: 60 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 6, minWidth: 60 }}>
|
||||
<button
|
||||
onClick={toggle}
|
||||
title={mode === 'light' ? '切换暗黑模式' : '切换明亮模式'}
|
||||
style={{
|
||||
background: 'none', border: 'none', fontSize: 18, cursor: 'pointer', padding: 4,
|
||||
color: 'var(--color-text-secondary)', lineHeight: 1,
|
||||
background: 'rgba(0, 229, 255, 0.08)',
|
||||
border: '1px solid rgba(0, 229, 255, 0.15)',
|
||||
borderRadius: 8,
|
||||
fontSize: 16,
|
||||
cursor: 'pointer',
|
||||
padding: '6px 10px',
|
||||
color: 'var(--color-primary)',
|
||||
lineHeight: 1,
|
||||
transition: 'all 0.2s',
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
e.currentTarget.style.background = 'rgba(0, 229, 255, 0.15)'
|
||||
e.currentTarget.style.boxShadow = '0 0 12px rgba(0, 229, 255, 0.1)'
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
e.currentTarget.style.background = 'rgba(0, 229, 255, 0.08)'
|
||||
e.currentTarget.style.boxShadow = 'none'
|
||||
}}
|
||||
>
|
||||
{mode === 'light' ? '🌙' : '☀️'}
|
||||
</button>
|
||||
{showLogout && (
|
||||
<button
|
||||
onClick={logout}
|
||||
style={{ background: 'none', border: 'none', fontSize: 15, cursor: 'pointer', color: 'var(--color-text-secondary)', padding: 4 }}
|
||||
>
|
||||
退出
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
|
||||
@@ -8,33 +8,57 @@
|
||||
label?: string
|
||||
}
|
||||
|
||||
export default function ProgressRing({ percent, size = 80, strokeWidth = 6, color = '#FF6B35', label }: ProgressRingProps) {
|
||||
export default function ProgressRing({ percent, size = 80, strokeWidth = 6, color, label }: ProgressRingProps) {
|
||||
const radius = (size - strokeWidth) / 2
|
||||
const circumference = 2 * Math.PI * radius
|
||||
const offset = circumference - (Math.min(percent, 100) / 100) * circumference
|
||||
const center = size / 2
|
||||
const ringColor = color || 'var(--color-primary)'
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
|
||||
<svg width={size} height={size}>
|
||||
{/* 背景圆环 */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
|
||||
<svg width={size} height={size} style={{ filter: `drop-shadow(0 0 6px ${ringColor}44)` }}>
|
||||
{/* Background ring */}
|
||||
<circle cx={center} cy={center} r={radius}
|
||||
fill="none" stroke="#F0F0F0" strokeWidth={strokeWidth} />
|
||||
{/* 进度圆环 */}
|
||||
fill="none" stroke="var(--color-progress-bg)" strokeWidth={strokeWidth} />
|
||||
{/* Progress ring */}
|
||||
<circle cx={center} cy={center} r={radius}
|
||||
fill="none" stroke={color} strokeWidth={strokeWidth}
|
||||
fill="none" stroke={ringColor} strokeWidth={strokeWidth}
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={offset}
|
||||
strokeLinecap="round"
|
||||
transform={`rotate(-90 ${center} ${center})`}
|
||||
style={{ transition: 'stroke-dashoffset 0.6s ease-out' }}
|
||||
style={{ transition: 'stroke-dashoffset 0.8s ease-out' }}
|
||||
/>
|
||||
{/* Glow dot at the end */}
|
||||
{percent > 0 && percent < 100 && (
|
||||
<circle cx={center} cy={center} r={radius}
|
||||
fill="none" stroke={ringColor} strokeWidth={strokeWidth + 4}
|
||||
strokeDasharray={`${(percent / 100) * circumference - 2} ${circumference}`}
|
||||
strokeDashoffset={offset}
|
||||
strokeLinecap="round"
|
||||
opacity={0.2}
|
||||
transform={`rotate(-90 ${center} ${center})`}
|
||||
style={{ transition: 'stroke-dashoffset 0.8s ease-out' }}
|
||||
/>
|
||||
)}
|
||||
<text x={center} y={center} textAnchor="middle" dominantBaseline="central"
|
||||
fontSize={size * 0.28} fontWeight={700} fill="#1D1D1F">
|
||||
fontSize={size * 0.26} fontWeight={700}
|
||||
fill="var(--color-text)"
|
||||
fontFamily="var(--font-mono)">
|
||||
{percent}%
|
||||
</text>
|
||||
</svg>
|
||||
{label && <span style={{ fontSize: 12, color: '#86868B' }}>{label}</span>}
|
||||
{label && (
|
||||
<span style={{
|
||||
fontSize: 11,
|
||||
color: 'var(--color-text-secondary)',
|
||||
fontFamily: 'var(--font-display)',
|
||||
letterSpacing: 1,
|
||||
}}>
|
||||
{label}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
import { usePathname, useRouter } from 'next/navigation'
|
||||
|
||||
const TABS = [
|
||||
{ path: '/', label: '打卡', icon: '📋' },
|
||||
{ path: '/social', label: '广场', icon: '🌊' },
|
||||
{ path: '/stats', label: '统计', icon: '📊' },
|
||||
{ path: '/profile', label: '我的', icon: '👤' },
|
||||
{ path: '/', label: '打卡', icon: '◈' },
|
||||
{ path: '/social', label: '广场', icon: '◎' },
|
||||
{ path: '/stats', label: '统计', icon: '◆' },
|
||||
{ path: '/profile', label: '我的', icon: '◇' },
|
||||
]
|
||||
|
||||
export default function TabBar() {
|
||||
@@ -23,12 +23,12 @@ export default function TabBar() {
|
||||
return (
|
||||
<nav style={{
|
||||
position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 100,
|
||||
background: 'var(--color-nav-bg)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
WebkitBackdropFilter: 'blur(20px)',
|
||||
borderTop: '0.5px solid var(--color-border)',
|
||||
background: 'rgba(8, 12, 24, 0.9)',
|
||||
backdropFilter: 'blur(24px) saturate(1.4)',
|
||||
WebkitBackdropFilter: 'blur(24px) saturate(1.4)',
|
||||
borderTop: '1px solid rgba(26, 34, 69, 0.6)',
|
||||
display: 'flex', justifyContent: 'space-around',
|
||||
padding: '6px 0 20px',
|
||||
padding: '6px 0 24px',
|
||||
}}>
|
||||
{TABS.map(tab => {
|
||||
const active = isActive(tab.path)
|
||||
@@ -36,12 +36,42 @@ export default function TabBar() {
|
||||
<button key={tab.path} onClick={() => router.push(tab.path)}
|
||||
style={{
|
||||
background: 'none', border: 'none', cursor: 'pointer',
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
|
||||
fontSize: 10, color: active ? 'var(--color-primary)' : 'var(--color-text-secondary)', fontWeight: active ? 600 : 400,
|
||||
transition: 'color 0.2s',
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
|
||||
fontSize: 12,
|
||||
color: active ? 'var(--color-primary)' : 'var(--color-text-muted)',
|
||||
fontFamily: 'var(--font-display)',
|
||||
letterSpacing: 1,
|
||||
transition: 'color 0.3s',
|
||||
position: 'relative',
|
||||
padding: '4px 12px',
|
||||
}}>
|
||||
<span style={{ fontSize: 22 }}>{tab.icon}</span>
|
||||
<span>{tab.label}</span>
|
||||
{active && (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: -7,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: 20,
|
||||
height: 2,
|
||||
background: 'var(--color-primary)',
|
||||
borderRadius: 1,
|
||||
boxShadow: '0 0 8px rgba(0, 229, 255, 0.5)',
|
||||
}} />
|
||||
)}
|
||||
<span style={{
|
||||
fontSize: 20,
|
||||
fontFamily: 'var(--font-body)',
|
||||
filter: active ? 'none' : 'none',
|
||||
textShadow: active ? '0 0 10px rgba(0, 229, 255, 0.3)' : 'none',
|
||||
}}>
|
||||
{tab.icon}
|
||||
</span>
|
||||
<span style={{
|
||||
fontSize: 11,
|
||||
fontWeight: active ? 600 : 400,
|
||||
}}>
|
||||
{tab.label}
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
|
||||
@@ -10,7 +10,7 @@ interface IThemeContext {
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<IThemeContext>({
|
||||
mode: 'light',
|
||||
mode: 'dark',
|
||||
toggle: () => {},
|
||||
setMode: () => {},
|
||||
})
|
||||
@@ -20,7 +20,7 @@ export function useTheme() {
|
||||
}
|
||||
|
||||
export default function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
const [mode, setModeState] = useState<ThemeMode>('light')
|
||||
const [mode, setModeState] = useState<ThemeMode>('dark')
|
||||
const [mounted, setMounted] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
@@ -29,6 +29,8 @@ export default function ThemeProvider({ children }: { children: React.ReactNode
|
||||
setModeState(stored)
|
||||
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
setModeState('dark')
|
||||
} else {
|
||||
setModeState('dark')
|
||||
}
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
+28
-28
@@ -17,34 +17,34 @@ export interface IThemeColors {
|
||||
}
|
||||
|
||||
export const THEME: Record<ThemeMode, IThemeColors> = {
|
||||
light: {
|
||||
primary: '#FF6B35',
|
||||
primaryLight: '#FF8C5A',
|
||||
primaryGradient: 'linear-gradient(135deg, #FF6B35, #FF4D6D)',
|
||||
accent: '#7209B7',
|
||||
bg: '#F5F5F7',
|
||||
card: '#FFFFFF',
|
||||
text: '#1D1D1F',
|
||||
textSecondary: '#86868B',
|
||||
border: '#E5E5EA',
|
||||
navBg: 'rgba(245,245,247,0.92)',
|
||||
success: '#34C759',
|
||||
warning: '#FF9500',
|
||||
error: '#FF3B30',
|
||||
},
|
||||
dark: {
|
||||
primary: '#FF6B35',
|
||||
primaryLight: '#FF8C5A',
|
||||
primaryGradient: 'linear-gradient(135deg, #FF6B35, #FF4D6D)',
|
||||
accent: '#BB86FC',
|
||||
bg: '#1C1C1E',
|
||||
card: '#2C2C2E',
|
||||
text: '#F5F5F7',
|
||||
textSecondary: '#98989D',
|
||||
border: '#38383A',
|
||||
navBg: 'rgba(28,28,30,0.92)',
|
||||
success: '#34C759',
|
||||
warning: '#FF9500',
|
||||
error: '#FF453A',
|
||||
primary: '#00E5FF',
|
||||
primaryLight: '#33EAFF',
|
||||
primaryGradient: 'linear-gradient(135deg, #00E5FF, #3B82F6)',
|
||||
accent: '#3B82F6',
|
||||
bg: '#080C18',
|
||||
card: '#0F1529',
|
||||
text: '#E0E8FF',
|
||||
textSecondary: '#6B7BA3',
|
||||
border: '#1A2245',
|
||||
navBg: 'rgba(8, 12, 24, 0.85)',
|
||||
success: '#00E676',
|
||||
warning: '#FFB347',
|
||||
error: '#FF1744',
|
||||
},
|
||||
light: {
|
||||
primary: '#2563EB',
|
||||
primaryLight: '#3B82F6',
|
||||
primaryGradient: 'linear-gradient(135deg, #2563EB, #3B82F6)',
|
||||
accent: '#3B82F6',
|
||||
bg: '#E8ECF4',
|
||||
card: '#FFFFFF',
|
||||
text: '#1A1F36',
|
||||
textSecondary: '#5B6B8F',
|
||||
border: '#D0D7E6',
|
||||
navBg: 'rgba(232, 236, 244, 0.9)',
|
||||
success: '#059669',
|
||||
warning: '#D97706',
|
||||
error: '#DC2626',
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user