e209fe02a4
- 实现签到主页面，包含签到按钮、连续天数、今日状态展示 - 实现签到记录页面，包含日历视图和签到历史列表 - 实现个人中心页面，包含用户信息和签到统计 - 后端实现签到、查询状态、查询历史三个接口 - 使用 Supabase 存储签到记录数据 - 采用星空主题设计，深蓝紫渐变背景 + 金色星光强调色 - 完成所有接口测试和前后端匹配验证 - 通过 ESLint 检查和编译验证
222 lines
5.5 KiB
Markdown
222 lines
5.5 KiB
Markdown
# 微博签到小程序设计指南
|
||
|
||
## 品牌定位
|
||
|
||
**应用定位**：微博签到打卡工具，帮助用户养成持续签到的习惯
|
||
**设计风格**：星空主题、仪式感、成就感
|
||
**目标用户**：微博用户，希望通过签到获得奖励的用户
|
||
|
||
**核心意象**：点亮星空——每次签到都是点亮夜空中的一颗星，连续签到让星空更加璀璨
|
||
|
||
---
|
||
|
||
## 配色方案
|
||
|
||
### 主色板
|
||
|
||
| 颜色名称 | Tailwind 类名 | 色值 | 意象来源 |
|
||
|---------|--------------|------|---------|
|
||
| 星空蓝（主色） | `bg-blue-600` | #2563eb | 深夜星空的底色 |
|
||
| 星光金（强调色） | `text-yellow-400` | #facc15 | 星星的光芒 |
|
||
| 月光蓝（辅助色） | `text-blue-300` | #93c5fd | 柔和的月光 |
|
||
|
||
### 中性色
|
||
|
||
| 颜色名称 | Tailwind 类名 | 色值 | 用途 |
|
||
|---------|--------------|------|------|
|
||
| 深空灰 | `bg-gray-900` | #111827 | 页面背景 |
|
||
| 夜空灰 | `bg-gray-800` | #1f2937 | 卡片背景 |
|
||
| 星云灰 | `bg-gray-700` | #374151 | 次级背景 |
|
||
| 银河白 | `text-white` | #ffffff | 主要文字 |
|
||
| 星尘灰 | `text-gray-400` | #9ca3af | 次要文字 |
|
||
|
||
### 语义色
|
||
|
||
| 状态 | Tailwind 类名 | 色值 |
|
||
|-----|--------------|------|
|
||
| 成功/已签到 | `text-green-400` | #4ade80 |
|
||
| 警告/未签到 | `text-orange-400` | #fb923c |
|
||
| 信息/提示 | `text-blue-400` | #60a5fa |
|
||
|
||
---
|
||
|
||
## 字体规范
|
||
|
||
### 字体选择
|
||
|
||
- **标题字体**：使用系统默认字体（微信小程序限制）
|
||
- **正文字体**：使用系统默认字体
|
||
|
||
### 字体层级
|
||
|
||
| 层级 | 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 | 说明文字 |
|
||
|
||
---
|
||
|
||
## 间距系统
|
||
|
||
### 页面边距
|
||
|
||
- 页面左右边距：`px-4`（16px）
|
||
- 页面上下边距：`py-6`（24px）
|
||
|
||
### 组件间距
|
||
|
||
- 卡片间距：`gap-4`（16px）
|
||
- 列表项间距：`gap-3`（12px）
|
||
- 按钮组间距：`gap-2`（8px）
|
||
|
||
---
|
||
|
||
## 组件规范
|
||
|
||
### 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>
|
||
</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>
|
||
</View>
|
||
```
|
||
|
||
### 2. 卡片容器
|
||
|
||
```tsx
|
||
<View className="bg-gray-800 rounded-2xl p-4 shadow-lg">
|
||
{/* 卡片内容 */}
|
||
</View>
|
||
```
|
||
|
||
### 3. 列表项
|
||
|
||
```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>
|
||
```
|
||
|
||
### 5. 空状态
|
||
|
||
```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>
|
||
</View>
|
||
```
|
||
|
||
---
|
||
|
||
## 导航结构
|
||
|
||
### TabBar 配置
|
||
|
||
```typescript
|
||
{
|
||
tabBar: {
|
||
color: '#9ca3af',
|
||
selectedColor: '#2563eb',
|
||
backgroundColor: '#111827',
|
||
borderStyle: 'black',
|
||
list: [
|
||
{
|
||
pagePath: 'pages/index/index',
|
||
text: '签到',
|
||
iconPath: './assets/tabbar/star.png',
|
||
selectedIconPath: './assets/tabbar/star-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'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
### 页面跳转规范
|
||
|
||
- TabBar 页面跳转：使用 `Taro.switchTab()`
|
||
- 普通页面跳转：使用 `Taro.navigateTo()`
|
||
|
||
---
|
||
|
||
## 小程序约束
|
||
|
||
### 包体积限制
|
||
|
||
- 主包大小：不超过 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
|
||
```
|
||
|
||
---
|
||
|
||
## 设计禁忌
|
||
|
||
**禁止使用**：
|
||
- ❌ 微博橙色默认配色
|
||
- ❌ 纯白色背景（不符合星空主题）
|
||
- ❌ 过于功能导向的冷冰冰设计
|
||
- ❌ 缺乏情感共鸣的界面元素
|
||
- ❌ 复杂的动画效果（影响性能）
|