chaohua_coze/design_guidelines.md

# 微博超话签到小程序设计指南

## 品牌定位

**应用定位**：微博超话签到工具，帮助用户快速完成关注的超话签到  
**设计风格**：简洁高效、微博风格、橙色调  
**目标用户**：微博用户，需要每日签到多个超话的用户

**核心功能**：
- 获取用户关注的超话列表
- 一键批量签到所有超话
- 查看签到状态和历史记录

---

## 配色方案

### 主色板（微博风格）

| 颜色名称 | 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. 完成后显示结果统计

### 刷新机制

- 下拉刷新超话列表
- 自动获取最新签到状态

---

## 小程序约束

### 权限说明

- 需要用户授权微博登录
- 需要访问微博超话数据权限

### 性能优化

- 超话列表分页加载
- 签到接口并发控制
- 图片懒加载

---

## 设计禁忌

**禁止使用**：
- ❌ 深色背景（不符合微博风格）
- ❌ 过于复杂的动画
- ❌ 与微博风格冲突的配色
- ❌ 过长的加载时间