zhaojie/chaohua_coze
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 实现超话列表页面，显示关注超话和签到状态
- 实现一键批量签到功能，可一次性签到所有未签到超话
- 实现签到记录页面，包含日历视图和历史记录
- 实现个人中心页面，显示用户信息和签到统计
- 后端实现超话列表、签到、记录查询、用户信息四个接口
- 使用 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
Download Patch File Download Diff File Expand all files Collapse all files

253
design_guidelines.md
View File

@@ -1,61 +1,61 @@
# 微博签到小程序设计指南
# 微博超话签到小程序设计指南
## 品牌定位
**应用定位**：微博签到打卡工具，帮助用户养成持续签到的习惯
**设计风格**：星空主题、仪式感、成就感
**目标用户**：微博用户，希望通过签到获得奖励的用户
**应用定位**：微博超话签到工具，帮助用户快速完成关注的超话签到
**设计风格**：简洁高效、微博风格、橙色调
**目标用户**：微博用户，需要每日签到多个超话的用户
**核心意象**：点亮星空——每次签到都是点亮夜空中的一颗星，连续签到让星空更加璀璨
**核心功能**：
- 获取用户关注的超话列表
- 一键批量签到所有超话
- 查看签到状态和历史记录
---
## 配色方案
### 主色板
### 主色板（微博风格）
| 颜色名称 | Tailwind 类名 | 色值 | 意象来源 |
|---------|--------------|------|---------|
| 星空蓝（主色） | `bg-blue-600` | #2563eb | 深夜星空的底色 |
| 星光金（强调色） | `text-yellow-400` | #facc15 | 星星的光芒 |
| 月光蓝（辅助色） | `text-blue-300` | #93c5fd | 柔和的月光 |
| 颜色名称 | Tailwind 类名 | 色值 | 用途 |
|---------|--------------|------|------|
| 微博橙（主色） | `bg-orange-500` | #f97316 | 主按钮、强调元素 |
| 微博橙深 | `bg-orange-600` | #ea580c | 按钮hover态 |
| 橙色浅 | `text-orange-100` | #ffedd5 | 浅色背景 |
### 中性色
| 颜色名称 | Tailwind 类名 | 色值 | 用途 |
|---------|--------------|------|------|
| 深空灰 | `bg-gray-900` | #111827 | 页面背景 |
| 夜空灰 | `bg-gray-800` | #1f2937 | 卡片背景 |
| 星云灰 | `bg-gray-700` | #374151 | 次级背景 |
| 银河白 | `text-white` | #ffffff | 主要文字 |
| 星尘灰 | `text-gray-400` | #9ca3af | 次要文字 |
| 白色背景 | `bg-white` | #ffffff | 页面背景 |
| 浅灰背景 | `bg-gray-50` | #f9fafb | 卡片背景 |
| 边框灰 | `border-gray-200` | #e5e7eb | 分割线 |
| 主文字 | `text-gray-900` | #111827 | 主要文字 |
| 次文字 | `text-gray-600` | #4b5563 | 次要文字 |
| 辅助文字 | `text-gray-400` | #9ca3af | 说明文字 |
### 语义色
| 状态 | Tailwind 类名 | 色值 |
|-----|--------------|------|
| 成功/已签到 | `text-green-400` | #4ade80 |
| 警告/未签到 | `text-orange-400` | #fb923c |
| 信息/提示 | `text-blue-400` | #60a5fa |
| 成功/已签到 | `text-green-500` | #22c55e |
| 失败/未签到 | `text-red-500` | #ef4444 |
| 进行中 | `text-blue-500` | #3b82f6 |
| 警告 | `text-yellow-500` | #eab308 |
---
## 字体规范
### 字体选择
- **标题字体**：使用系统默认字体（微信小程序限制）
- **正文字体**：使用系统默认字体
### 字体层级
| 层级 | Tailwind 类名 | 字号 | 行高 | 用途 |
|-----|--------------|------|------|------|
| H1 | `text-3xl font-bold` | 30px | 36px | 签到主标题 |
| H2 | `text-2xl font-bold` | 24px | 32px | 页面标题 |
| H3 | `text-xl font-semibold` | 20px | 28px | 卡片标题 |
| Body | `text-base` | 16px | 24px | 正文内容 |
| Caption | `text-sm` | 14px | 20px | 说明文字 |
| 层级 | Tailwind 类名 | 字号 | 用途 |
|-----|--------------|------|------|
| H1 | `text-2xl font-bold` | 24px | 页面标题 |
| H2 | `text-lg font-semibold` | 18px | 卡片标题 |
| Body | `text-base` | 16px | 正文内容 |
| Caption | `text-sm` | 14px | 说明文字 |
| Small | `text-xs` | 12px | 辅助信息 |
---
@@ -64,58 +64,74 @@
### 页面边距
- 页面左右边距：`px-4`（16px）
- 页面上下边距：`py-6`（24px）
- 页面上下边距：`py-4`（16px）
### 组件间距
- 卡片间距：`gap-4`（16px）
- 列表项间距：`gap-3`（12px）
- 卡片间距：`gap-3`（12px）
- 列表项间距：`gap-2`（8px）
- 按钮组间距：`gap-2`（8px）
---
## 组件规范
### 1. 签到按钮（核心组件）
### 1. 超话卡片（核心组件）
```tsx
// 主签到按钮
<View className="flex justify-center items-center">
<View className="w-40 h-40 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-lg shadow-blue-500/50">
<Text className="text-white text-2xl font-bold">签到</Text>
<View className="bg-white rounded-lg p-4 mb-3 shadow-sm border border-gray-100">
<View className="flex flex-row items-center">
{/* 超话封面 */}
<Image className="w-12 h-12 rounded-lg" src={coverUrl} />
{/* 超话信息 */}
<View className="flex-1 ml-3">
<Text className="text-gray-900 font-semibold text-base">{name}</Text>
<Text className="text-gray-400 text-xs mt-1">{memberCount} 成员</Text>
</View>
{/* 签到状态 */}
<View className={`px-3 py-1 rounded-full ${isSignedIn ? 'bg-green-100' : 'bg-orange-100'}`}>
<Text className={`text-xs ${isSignedIn ? 'text-green-600' : 'text-orange-600'}`}>
{isSignedIn ? '已签到' : '未签到'}
</Text>
</View>
</View>
</View>
```
// 已签到状态
<View className="w-40 h-40 rounded-full bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center shadow-lg shadow-green-500/50">
<Text className="text-white text-2xl font-bold">已签到</Text>
### 2. 一键签到按钮
```tsx
<View className="px-4">
<View className="bg-orange-500 rounded-full py-3 flex items-center justify-center">
<Text className="text-white text-base font-semibold">一键签到全部超话</Text>
</View>
</View>
```
### 2. 卡片容器
### 3. 统计卡片
```tsx
<View className="bg-gray-800 rounded-2xl p-4 shadow-lg">
{/* 卡片内容 */}
<View className="flex flex-row gap-3 mb-4">
<View className="flex-1 bg-orange-50 rounded-lg p-3">
<Text className="text-gray-600 text-xs">已关注</Text>
<Text className="text-orange-600 text-2xl font-bold">{total}</Text>
</View>
<View className="flex-1 bg-green-50 rounded-lg p-3">
<Text className="text-gray-600 text-xs">已签到</Text>
<Text className="text-green-600 text-2xl font-bold">{signedIn}</Text>
</View>
<View className="flex-1 bg-gray-50 rounded-lg p-3">
<Text className="text-gray-600 text-xs">未签到</Text>
<Text className="text-gray-600 text-2xl font-bold">{notSignedIn}</Text>
</View>
</View>
```
### 3. 列表项
### 4. 加载状态
```tsx
<View className="flex flex-row items-center gap-3 py-3 border-b border-gray-700">
<View className="w-2 h-2 rounded-full bg-blue-500" />
<Text className="text-white flex-1">内容</Text>
<Text className="text-gray-400 text-sm">时间</Text>
</View>
```
### 4. 统计卡片
```tsx
<View className="bg-gradient-to-br from-blue-600 to-purple-600 rounded-2xl p-6">
<Text className="text-blue-200 text-sm">连续签到</Text>
<Text className="text-white text-4xl font-bold mt-2">7 天</Text>
<View className="flex justify-center py-8">
<Text className="text-gray-400">加载中...</Text>
</View>
```
@@ -123,8 +139,8 @@
```tsx
<View className="flex flex-col items-center justify-center py-20">
<Text className="text-gray-500 text-lg">暂无签到记录</Text>
<Text className="text-gray-600 text-sm mt-2">开始你的第一次签到吧</Text>
<Text className="text-gray-400 text-base">暂无关注的超话</Text>
<Text className="text-gray-300 text-sm mt-2">去微博关注一些超话吧</Text>
</View>
```
@@ -138,19 +154,19 @@
{
tabBar: {
color: '#9ca3af',
selectedColor: '#2563eb',
backgroundColor: '#111827',
selectedColor: '#f97316',
backgroundColor: '#ffffff',
borderStyle: 'black',
list: [
{
pagePath: 'pages/index/index',
text: '签到',
iconPath: './assets/tabbar/star.png',
selectedIconPath: './assets/tabbar/star-active.png'
text: '超话列表',
iconPath: './assets/tabbar/list.png',
selectedIconPath: './assets/tabbar/list-active.png'
},
{
pagePath: 'pages/record/index',
text: '记录',
text: '签到记录',
iconPath: './assets/tabbar/calendar.png',
selectedIconPath: './assets/tabbar/calendar-active.png'
},
@@ -165,57 +181,86 @@
}
```
### 页面跳转规范
---
- TabBar 页面跳转：使用 `Taro.switchTab()`
- 普通页面跳转：使用 `Taro.navigateTo()`
## 页面结构
### 1. 超话列表页（首页）
**顶部区域**：
- 页面标题"微博超话签到"
- 一键签到按钮
**统计区域**：
- 已关注数量
- 已签到数量
- 未签到数量
**超话列表**：
- 超话封面
- 超话名称
- 成员数量
- 签到状态标签
### 2. 签到记录页
**日历视图**：
- 当月日历
- 签到日期标记
**统计信息**：
- 连续签到天数
- 累计签到天数
### 3. 个人中心页
**用户信息**：
- 微博昵称
- 微博头像
**配置选项**：
- 自动签到开关
- 签到时间设置
- 清除缓存
---
## 交互规范
### 签到流程
1. 用户点击"一键签到"
2. 显示loading状态
3. 依次调用签到接口
4. 实时更新签到状态
5. 完成后显示结果统计
### 刷新机制
- 下拉刷新超话列表
- 自动获取最新签到状态
---
## 小程序约束
### 包体积限制
### 权限说明
- 主包大小：不超过 2MB
- 分包大小：单个分包不超过 2MB
- 总大小：不超过 20MB
### 图片策略
- 使用 CDN 图片链接
- 本地图标使用 PNG 格式（TabBar 必须是本地 PNG）
- 图片压缩后使用
- 需要用户授权微博登录
- 需要访问微博超话数据权限
### 性能优化
- 避免过深的组件嵌套
- 列表使用虚拟滚动（长列表场景）
- 超话列表分页加载
- 签到接口并发控制
- 图片懒加载
- 避免频繁的 `setState`
---
## 跨端兼容注意事项
### H5/小程序兼容
- Text 换行：垂直排列的 Text 必须添加 `block` 类
- Input 样式：必须用 View 包裹，样式放外层
- Fixed 布局：使用 inline style，避免 Tailwind fixed+flex 失效
### 平台检测
```tsx
const isWeapp = Taro.getEnv() === Taro.ENV_TYPE.WEAPP
```
---
## 设计禁忌
**禁止使用**：
- ❌ 微博橙色默认配色
- ❌ 纯白色背景（不符合星空主题）
- ❌ 过于功能导向的冷冰冰设计
- ❌ 缺乏情感共鸣的界面元素
- ❌ 复杂的动画效果（影响性能）
- ❌ 深色背景（不符合微博风格）
- ❌ 过于复杂的动画
- ❌ 与微博风格冲突的配色
- ❌ 过长的加载时间