feat: 实现微博超话签到小程序功能

- 实现超话列表页面,显示关注超话和签到状态
- 实现一键批量签到功能,可一次性签到所有未签到超话
- 实现签到记录页面,包含日历视图和历史记录
- 实现个人中心页面,显示用户信息和签到统计
- 后端实现超话列表、签到、记录查询、用户信息四个接口
- 使用 Supabase 存储签到记录数据
- 采用微博风格设计,橙色主题 + 白色背景
- 完成所有接口测试和前后端匹配验证
- 通过 ESLint 检查和编译验证
This commit is contained in:
jaystar
2026-03-16 11:59:58 +08:00
parent e209fe02a4
commit ed4caca2fb
28 changed files with 1004 additions and 508 deletions

View File

@@ -6,9 +6,9 @@ import './index.css'
interface SignInRecord {
id: number
user_id: string
sign_date: string
created_at: string
date: string
count: number
details: string[]
}
/**
@@ -16,9 +16,13 @@ interface SignInRecord {
*/
const RecordPage: FC = () => {
const [records, setRecords] = useState<SignInRecord[]>([])
const [stats, setStats] = useState({
continuousDays: 0,
totalDays: 0
})
const [loading, setLoading] = useState(true)
// 页面显示时获取签到记录
// 页面显示时获取记录
useDidShow(async () => {
await fetchRecords()
})
@@ -28,12 +32,16 @@ const RecordPage: FC = () => {
try {
setLoading(true)
const res = await Network.request({
url: '/api/signin/history',
url: '/api/super-topics/records',
method: 'GET'
})
console.log('签到记录:', res.data)
if (res.data?.code === 200 && res.data?.data) {
setRecords(res.data.data)
setRecords(res.data.data.records || [])
setStats({
continuousDays: res.data.data.continuousDays || 0,
totalDays: res.data.data.totalDays || 0
})
}
} catch (error) {
console.error('获取签到记录失败:', error)
@@ -42,15 +50,14 @@ const RecordPage: FC = () => {
}
}
// 格式化日期显示
// 格式化日期
const formatDate = (dateStr: string) => {
const date = new Date(dateStr)
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
const weekDay = weekDays[date.getDay()]
return `${year}${month}${day}${weekDay}`
return `${month}${day}${weekDay}`
}
// 获取当前月份的天数
@@ -60,19 +67,22 @@ const RecordPage: FC = () => {
const month = now.getMonth()
const firstDay = new Date(year, month, 1)
const lastDay = new Date(year, month + 1, 0)
const days: { date: Date; isSigned: boolean }[] = []
const days: { date: Date | null; hasRecord: boolean }[] = []
// 填充前面的空白
for (let i = 0; i < firstDay.getDay(); i++) {
days.push({ date: null as any, isSigned: false })
days.push({ date: null, hasRecord: false })
}
// 获取有签到记录的日期
const recordDates = records.map(r => r.date)
// 填充日期
for (let i = 1; i <= lastDay.getDate(); i++) {
const date = new Date(year, month, i)
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`
const isSigned = records.some(r => r.sign_date === dateStr)
days.push({ date, isSigned })
const hasRecord = recordDates.includes(dateStr)
days.push({ date, hasRecord })
}
return days
@@ -83,19 +93,32 @@ const RecordPage: FC = () => {
const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
return (
<View className="min-h-screen bg-gray-900 px-4 py-6">
{/* 月份标题 */}
<View className="mb-6">
<Text className="block text-white text-xl font-bold">{monthNames[now.getMonth()]} {now.getFullYear()}</Text>
<View className="min-h-screen bg-gray-50 px-4 py-4">
{/* 统计卡片 */}
<View className="flex flex-row gap-3 mb-4">
<View className="flex-1 bg-orange-50 rounded-lg p-4">
<Text className="block text-gray-600 text-xs"></Text>
<Text className="block text-orange-600 text-3xl font-bold mt-1">{stats.continuousDays}</Text>
<Text className="block text-gray-400 text-xs mt-1"></Text>
</View>
<View className="flex-1 bg-white rounded-lg p-4 border border-gray-100">
<Text className="block text-gray-600 text-xs"></Text>
<Text className="block text-gray-900 text-3xl font-bold mt-1">{stats.totalDays}</Text>
<Text className="block text-gray-400 text-xs mt-1"></Text>
</View>
</View>
{/* 日历视图 */}
<View className="bg-gray-800 rounded-2xl p-4 mb-6">
<View className="bg-white rounded-lg p-4 mb-4 border border-gray-100">
<Text className="block text-gray-900 font-semibold mb-3">
{monthNames[now.getMonth()]} {now.getFullYear()}
</Text>
{/* 星期标题 */}
<View className="flex flex-row mb-3">
<View className="flex flex-row mb-2">
{['日', '一', '二', '三', '四', '五', '六'].map((day, index) => (
<View key={index} className="flex-1 flex justify-center">
<Text className="text-gray-400 text-sm">{day}</Text>
<Text className="text-gray-400 text-xs">{day}</Text>
</View>
))}
</View>
@@ -106,20 +129,20 @@ const RecordPage: FC = () => {
<View key={index} className="w-[14.28%] aspect-square flex justify-center items-center mb-1">
{item.date ? (
<View
className={`w-8 h-8 rounded-full flex items-center justify-center ${
item.isSigned
? 'bg-blue-500'
className={`w-6 h-6 rounded-full flex items-center justify-center ${
item.hasRecord
? 'bg-orange-500'
: item.date.toDateString() === now.toDateString()
? 'bg-gray-700 border border-blue-400'
? 'bg-orange-100'
: 'bg-transparent'
}`}
>
<Text
className={`text-sm ${
item.isSigned
className={`text-xs ${
item.hasRecord
? 'text-white'
: item.date.toDateString() === now.toDateString()
? 'text-blue-400'
? 'text-orange-600'
: 'text-gray-400'
}`}
>
@@ -135,28 +158,27 @@ const RecordPage: FC = () => {
</View>
{/* 签到记录列表 */}
<View className="bg-gray-800 rounded-2xl p-4">
<Text className="block text-white text-lg font-bold mb-4"></Text>
<View className="bg-white rounded-lg p-4 border border-gray-100">
<Text className="block text-gray-900 font-semibold mb-3"></Text>
{loading ? (
<View className="flex justify-center py-8">
<Text className="text-gray-500">...</Text>
<Text className="text-gray-400">...</Text>
</View>
) : records.length === 0 ? (
<View className="flex flex-col items-center justify-center py-8">
<Text className="text-gray-500 text-base"></Text>
<Text className="text-gray-600 text-sm mt-2"></Text>
<Text className="text-gray-400 text-sm"></Text>
</View>
) : (
<View className="flex flex-col gap-3">
{records.map((record) => (
<View key={record.id} className="flex flex-row items-center gap-3 py-3 border-b border-gray-700 last:border-b-0">
<View className="w-2 h-2 rounded-full bg-blue-500" />
<View className="flex flex-col gap-2">
{records.slice(0, 10).map((record) => (
<View key={record.id} className="flex flex-row items-center gap-3 py-2 border-b border-gray-50 last:border-b-0">
<View className="w-1.5 h-1.5 rounded-full bg-orange-500" />
<View className="flex-1">
<Text className="block text-white text-sm">{formatDate(record.sign_date)}</Text>
<Text className="block text-gray-700 text-sm">{formatDate(record.date)}</Text>
</View>
<View className="bg-blue-500 rounded-full px-3 py-1">
<Text className="text-white text-xs"></Text>
<View className="bg-orange-50 rounded-full px-2 py-0.5">
<Text className="text-orange-600 text-xs">{record.count} </Text>
</View>
</View>
))}