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

- 实现签到主页面,包含签到按钮、连续天数、今日状态展示
- 实现签到记录页面,包含日历视图和签到历史列表
- 实现个人中心页面,包含用户信息和签到统计
- 后端实现签到、查询状态、查询历史三个接口
- 使用 Supabase 存储签到记录数据
- 采用星空主题设计,深蓝紫渐变背景 + 金色星光强调色
- 完成所有接口测试和前后端匹配验证
- 通过 ESLint 检查和编译验证
This commit is contained in:
jaystar
2026-03-16 11:17:17 +08:00
commit e209fe02a4
64 changed files with 26475 additions and 0 deletions

105
src/pages/profile/index.tsx Normal file
View File

@@ -0,0 +1,105 @@
import { View, Text } from '@tarojs/components'
import { useDidShow } from '@tarojs/taro'
import { FC, useState } from 'react'
import { Network } from '@/network'
import './index.css'
interface SignInStatus {
todaySignedIn: boolean
continuousDays: number
totalDays: number
}
/**
* 个人中心页面
*/
const ProfilePage: FC = () => {
const [signInStatus, setSignInStatus] = useState<SignInStatus>({
todaySignedIn: false,
continuousDays: 0,
totalDays: 0
})
// 页面显示时获取签到统计
useDidShow(async () => {
await fetchSignInStatus()
})
// 获取签到状态
const fetchSignInStatus = async () => {
try {
const res = await Network.request({
url: '/api/signin/status',
method: 'GET'
})
console.log('签到状态:', res.data)
if (res.data?.code === 200 && res.data?.data) {
setSignInStatus(res.data.data)
}
} catch (error) {
console.error('获取签到状态失败:', error)
}
}
return (
<View className="min-h-screen bg-gray-900 px-4 py-6">
{/* 用户信息卡片 */}
<View className="bg-gradient-to-br from-blue-600 to-purple-600 rounded-2xl p-6 mb-6">
<View className="flex flex-row items-center gap-4 mb-4">
<View className="w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
<Text className="text-white text-2xl">👤</Text>
</View>
<View className="flex-1">
<Text className="block text-white text-xl font-bold"></Text>
<Text className="block text-blue-200 text-sm mt-1">ID: default_user</Text>
</View>
</View>
</View>
{/* 签到统计 */}
<View className="mb-6">
<Text className="block text-white text-lg font-bold mb-4"></Text>
<View className="flex flex-row gap-3">
<View className="flex-1 bg-gray-800 rounded-2xl p-4">
<Text className="block text-gray-400 text-xs"></Text>
<Text className="block text-white text-3xl font-bold mt-1">{signInStatus.continuousDays}</Text>
<Text className="block text-gray-400 text-xs mt-1"></Text>
</View>
<View className="flex-1 bg-gray-800 rounded-2xl p-4">
<Text className="block text-gray-400 text-xs"></Text>
<Text className="block text-white text-3xl font-bold mt-1">{signInStatus.totalDays}</Text>
<Text className="block text-gray-400 text-xs mt-1"></Text>
</View>
</View>
</View>
{/* 今日状态 */}
<View className="bg-gray-800 rounded-2xl p-4 mb-6">
<View className="flex flex-row items-center justify-between">
<View>
<Text className="block text-white text-base font-semibold"></Text>
<Text className="block text-gray-400 text-sm mt-1">
{signInStatus.todaySignedIn ? '已完成' : '未完成'}
</Text>
</View>
<View
className={`w-12 h-12 rounded-full flex items-center justify-center ${
signInStatus.todaySignedIn ? 'bg-green-500' : 'bg-gray-700'
}`}
>
<Text className="text-white text-xl">{signInStatus.todaySignedIn ? '✓' : '○'}</Text>
</View>
</View>
</View>
{/* 提示信息 */}
<View className="bg-gray-800 rounded-2xl p-4">
<Text className="block text-gray-400 text-sm leading-relaxed">
</Text>
</View>
</View>
)
}
export default ProfilePage