ed4caca2fb
- 实现超话列表页面，显示关注超话和签到状态 - 实现一键批量签到功能，可一次性签到所有未签到超话 - 实现签到记录页面，包含日历视图和历史记录 - 实现个人中心页面，显示用户信息和签到统计 - 后端实现超话列表、签到、记录查询、用户信息四个接口 - 使用 Supabase 存储签到记录数据 - 采用微博风格设计，橙色主题 + 白色背景 - 完成所有接口测试和前后端匹配验证 - 通过 ESLint 检查和编译验证
267 lines
6.1 KiB
Markdown
267 lines
6.1 KiB
Markdown
# 微博超话签到小程序设计指南
|
||
|
||
## 品牌定位
|
||
|
||
**应用定位**：微博超话签到工具，帮助用户快速完成关注的超话签到
|
||
**设计风格**：简洁高效、微博风格、橙色调
|
||
**目标用户**：微博用户，需要每日签到多个超话的用户
|
||
|
||
**核心功能**：
|
||
- 获取用户关注的超话列表
|
||
- 一键批量签到所有超话
|
||
- 查看签到状态和历史记录
|
||
|
||
---
|
||
|
||
## 配色方案
|
||
|
||
### 主色板（微博风格）
|
||
|
||
| 颜色名称 | Tailwind 类名 | 色值 | 用途 |
|
||
|---------|--------------|------|------|
|
||
| 微博橙（主色） | `bg-orange-500` | #f97316 | 主按钮、强调元素 |
|
||
| 微博橙深 | `bg-orange-600` | #ea580c | 按钮hover态 |
|
||
| 橙色浅 | `text-orange-100` | #ffedd5 | 浅色背景 |
|
||
|
||
### 中性色
|
||
|
||
| 颜色名称 | Tailwind 类名 | 色值 | 用途 |
|
||
|---------|--------------|------|------|
|
||
| 白色背景 | `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-500` | #22c55e |
|
||
| 失败/未签到 | `text-red-500` | #ef4444 |
|
||
| 进行中 | `text-blue-500` | #3b82f6 |
|
||
| 警告 | `text-yellow-500` | #eab308 |
|
||
|
||
---
|
||
|
||
## 字体规范
|
||
|
||
### 字体层级
|
||
|
||
| 层级 | 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 | 辅助信息 |
|
||
|
||
---
|
||
|
||
## 间距系统
|
||
|
||
### 页面边距
|
||
|
||
- 页面左右边距：`px-4`（16px）
|
||
- 页面上下边距：`py-4`（16px）
|
||
|
||
### 组件间距
|
||
|
||
- 卡片间距：`gap-3`（12px）
|
||
- 列表项间距：`gap-2`（8px）
|
||
- 按钮组间距：`gap-2`（8px）
|
||
|
||
---
|
||
|
||
## 组件规范
|
||
|
||
### 1. 超话卡片（核心组件）
|
||
|
||
```tsx
|
||
<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>
|
||
```
|
||
|
||
### 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>
|
||
```
|
||
|
||
### 3. 统计卡片
|
||
|
||
```tsx
|
||
<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>
|
||
```
|
||
|
||
### 4. 加载状态
|
||
|
||
```tsx
|
||
<View className="flex justify-center py-8">
|
||
<Text className="text-gray-400">加载中...</Text>
|
||
</View>
|
||
```
|
||
|
||
### 5. 空状态
|
||
|
||
```tsx
|
||
<View className="flex flex-col items-center justify-center py-20">
|
||
<Text className="text-gray-400 text-base">暂无关注的超话</Text>
|
||
<Text className="text-gray-300 text-sm mt-2">去微博关注一些超话吧</Text>
|
||
</View>
|
||
```
|
||
|
||
---
|
||
|
||
## 导航结构
|
||
|
||
### TabBar 配置
|
||
|
||
```typescript
|
||
{
|
||
tabBar: {
|
||
color: '#9ca3af',
|
||
selectedColor: '#f97316',
|
||
backgroundColor: '#ffffff',
|
||
borderStyle: 'black',
|
||
list: [
|
||
{
|
||
pagePath: 'pages/index/index',
|
||
text: '超话列表',
|
||
iconPath: './assets/tabbar/list.png',
|
||
selectedIconPath: './assets/tabbar/list-active.png'
|
||
},
|
||
{
|
||
pagePath: 'pages/record/index',
|
||
text: '签到记录',
|
||
iconPath: './assets/tabbar/calendar.png',
|
||
selectedIconPath: './assets/tabbar/calendar-active.png'
|
||
},
|
||
{
|
||
pagePath: 'pages/profile/index',
|
||
text: '我的',
|
||
iconPath: './assets/tabbar/user.png',
|
||
selectedIconPath: './assets/tabbar/user-active.png'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 页面结构
|
||
|
||
### 1. 超话列表页（首页）
|
||
|
||
**顶部区域**：
|
||
- 页面标题"微博超话签到"
|
||
- 一键签到按钮
|
||
|
||
**统计区域**：
|
||
- 已关注数量
|
||
- 已签到数量
|
||
- 未签到数量
|
||
|
||
**超话列表**：
|
||
- 超话封面
|
||
- 超话名称
|
||
- 成员数量
|
||
- 签到状态标签
|
||
|
||
### 2. 签到记录页
|
||
|
||
**日历视图**：
|
||
- 当月日历
|
||
- 签到日期标记
|
||
|
||
**统计信息**：
|
||
- 连续签到天数
|
||
- 累计签到天数
|
||
|
||
### 3. 个人中心页
|
||
|
||
**用户信息**：
|
||
- 微博昵称
|
||
- 微博头像
|
||
|
||
**配置选项**：
|
||
- 自动签到开关
|
||
- 签到时间设置
|
||
- 清除缓存
|
||
|
||
---
|
||
|
||
## 交互规范
|
||
|
||
### 签到流程
|
||
|
||
1. 用户点击"一键签到"
|
||
2. 显示loading状态
|
||
3. 依次调用签到接口
|
||
4. 实时更新签到状态
|
||
5. 完成后显示结果统计
|
||
|
||
### 刷新机制
|
||
|
||
- 下拉刷新超话列表
|
||
- 自动获取最新签到状态
|
||
|
||
---
|
||
|
||
## 小程序约束
|
||
|
||
### 权限说明
|
||
|
||
- 需要用户授权微博登录
|
||
- 需要访问微博超话数据权限
|
||
|
||
### 性能优化
|
||
|
||
- 超话列表分页加载
|
||
- 签到接口并发控制
|
||
- 图片懒加载
|
||
|
||
---
|
||
|
||
## 设计禁忌
|
||
|
||
**禁止使用**：
|
||
- ❌ 深色背景（不符合微博风格）
|
||
- ❌ 过于复杂的动画
|
||
- ❌ 与微博风格冲突的配色
|
||
- ❌ 过长的加载时间
|