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. 超话卡片（核心组件）

<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. 一键签到按钮

<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. 统计卡片

<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. 加载状态

<View className="flex justify-center py-8">
  <Text className="text-gray-400">加载中...</Text>
</View>

5. 空状态

<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 配置

{
  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. 完成后显示结果统计

刷新机制

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

---

小程序约束

权限说明

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

性能优化

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

---

设计禁忌

禁止使用：

• ❌ 深色背景（不符合微博风格）
• ❌ 过于复杂的动画
• ❌ 与微博风格冲突的配色
• ❌ 过长的加载时间