习惯打卡APP前端页面原型设计（AI生成）

铛铛铛铛铛
铛铛铛铛铛
0阅读
本文摘要补充：前端页面原型文字说明+数据库表设计SQL+API接口文档（可直接交付UI/开发）以下是每个核心页面的详细原型说明，包含布局、核心元素、交互逻辑，同时补充完整的数据库表设计SQL和API接口文档，开发/设计可直接参照落地。第一部分：前端页面原型文字说明1. 启动页布局：全屏展示，背景为产品主色+简约习惯图标（如水杯/运动/日历）核心元素：产品Logo + 产品名称（如“习惯打卡Pro”）底部小...

补充：前端页面原型文字说明+数据库表设计SQL+API接口文档（可直接交付UI/开发）

以下是每个核心页面的详细原型说明，包含布局、核心元素、交互逻辑，同时补充完整的数据库表设计SQL和API接口文档，开发/设计可直接参照落地。

第一部分：前端页面原型文字说明

1. 启动页

  • 布局：全屏展示，背景为产品主色+简约习惯图标（如水杯/运动/日历）

  • 核心元素：

    • 产品Logo + 产品名称（如“习惯打卡Pro”）
    • 底部小字：“自律，从准时提醒开始”

  • 交互：

    • 首次启动：停留3秒自动跳转登录页
    • 非首次启动：停留1秒自动跳转首页
    • 支持点击屏幕跳过

2. 登录页

  • 布局：上下结构，顶部品牌区，中部登录区，底部协议区

  • 核心元素：

    • 顶部：产品Logo + “手机号快捷登录”标题

    • 中部：

      • 手机号输入框（带区号+位数校验）
      • 验证码输入框 + “获取验证码”按钮（倒计时60s）
      • “登录”按钮（禁用态：手机号/验证码为空时不可点击）

    • 底部：

      • 第三方登录：微信/QQ图标（可选）
      • 勾选框 + “同意《用户协议》《隐私政策》”（默认勾选）
      • 小字：“游客体验”（点击跳过登录，进入首页但数据仅本地）

  • 交互：

    • 验证码按钮：点击后校验手机号格式，合法则触发倒计时+发送验证码
    • 登录按钮：点击后校验验证码，合法则登录并跳转首页

3. 首页（核心）

  • 布局：顶部状态栏 + 今日概览 + 待办任务列表 + 快捷操作

  • 核心元素：

    • 顶部：

      • 用户名 + 头像（点击进入个人主页）
      • 今日数据卡片：“今日完成XX/XX | 完成率XX% | 连续打卡X天”

    • 中部（待办任务列表）：

      • 按时间排序的今日任务卡片（未完成在上，已完成在下）
      • 单任务卡片：
        ✅ 已完成：灰色背景 + 完成时间 + “已打卡”标签⚫ 未完成：白色背景 + 计划时间 + 习惯名称 + 图标 + “立即打卡”按钮

    • 底部：

      • 悬浮按钮“+”（点击跳转“创建习惯页”）
      • Tab栏：首页、数据、排行、社区、我的

  • 交互：

    • 未完成任务卡片：点击“立即打卡”→ 弹窗确认“完成打卡？”→ 确认后状态变为已完成，更新今日数据
    • 已完成任务卡片：点击可查看任务详情

4. 习惯管理页

  • 布局：顶部操作栏 + 习惯列表 + 底部创建按钮

  • 核心元素：

    • 顶部：

      • 标题“我的习惯”
      • 右侧“筛选”按钮（按类型/状态筛选：全部/启用/禁用）

    • 中部（习惯列表）：

      • 单习惯卡片：图标 + 习惯名称 + 提醒规则（如“每2小时 | 08:00-22:00”） + 启用开关
    • 底部：悬浮“+”按钮（同首页，跳转创建习惯页）

  • 交互：

    • 启用开关：点击切换“启用/禁用”，禁用后不再生成任务/提醒
    • 点击习惯卡片：跳转“编辑习惯页”
    • 长按习惯卡片：弹出操作菜单“编辑/删除/复制”

5. 创建/编辑习惯页

  • 布局：表单式布局，从上到下依次填写，底部保存按钮

  • 核心元素：

    • 顶部：

      • 创建页：标题“新建习惯” + 右侧“取消”按钮
      • 编辑页：标题“编辑习惯” + 右侧“删除”按钮

    • 表单项（必填项标*）：

      1. 习惯名称*：输入框（默认提示：喝水/起身运动/日总结）
      2. 选择图标*：点击区域展示默认图标，点击后弹出图标库（水杯/运动/日历/学习等）

      3. 提醒类型*：单选框（间隔小时/每日固定/每周固定/每几天）

        • 选“间隔小时”：显示“每\_\_小时”输入框 + “有效时段”选择器（08:00-22:00）
        • 选“每日固定”：显示时间选择器（可添加多个） + 星期选择（全选/自定义）
        • 选“每周固定”：显示星期选择 + 时间选择器
        • 选“每几天”：显示“每\_\_天”输入框 + 开始日期
      4. 提醒方式：多选框（铃声/振动/静音通知） + 铃声选择
      5. 备注：多行输入框（选填）
    • 底部：“保存”按钮（禁用态：必填项为空时不可点击）

  • 交互：

    • 提醒类型切换：动态显示/隐藏对应表单项
    • 时间选择器：支持滚轮选择小时/分钟
    • 保存按钮：点击后校验表单，合法则保存并返回习惯管理页

6. 任务详情/历史记录页

  • 布局：顶部筛选 + 列表展示

  • 核心元素：

    • 顶部：

      • 标题“历史记录”
      • 筛选栏：日期选择（今日/近7天/近30天/自定义） + 习惯筛选（全部/指定习惯）

    • 中部：按日期分组的任务列表

      • 单条记录：日期 + 习惯名称 + 计划时间 + 完成状态（已完成/未完成/跳过） + 实际完成时间（仅已完成）

  • 交互：

    • 筛选栏：选择后实时刷新列表
    • 单条记录：点击可查看打卡详情（如打卡方式：手动/自动）

7. 数据统计页

  • 布局：顶部切换栏 + 图表区 + 数据卡片区

  • 核心元素：

    • 顶部：切换标签（日/周/月/习惯维度）

    • 图表区：

      • 日视图：环形图（完成/未完成占比）
      • 周视图：柱状图（每日完成数）
      • 月视图：折线图（每日完成率趋势）
      • 习惯维度：饼图（各习惯完成占比）

    • 数据卡片区（3宫格）：

      • 卡片1：累计完成任务数
      • 卡片2：连续打卡天数
      • 卡片3：总完成率

  • 交互：

    • 切换标签：图表/数据实时切换
    • 图表：点击柱子/折线点，显示具体数值
    • 支持长按图表导出图片（可选）

8. 排行榜页

  • 布局：顶部切换栏 + 排行列表 + 我的排名卡片

  • 核心元素：

    • 顶部：切换标签（今日榜/本周榜/本月榜/连续打卡榜）

    • 我的排名卡片（置顶）：

      • 背景色突出 + “我的排名：第X名” + 完成数/连续天数

    • 排行列表：

      • TOP1-TOP3：特殊样式（金牌/银牌/铜牌图标 + 背景色）
      • 其余：排名数字 + 头像 + 昵称 + 核心数据（完成数/连续天数） + 完成率

  • 交互：

    • 切换标签：列表实时刷新
    • 点击用户头像：进入他人个人主页
    • 下拉刷新：更新排行数据

9. 动态广场页（类朋友圈）

  • 布局：顶部筛选 + 动态列表

  • 核心元素：

    • 顶部：

      • 标题“动态广场”
      • 筛选：全部/关注/推荐
      • 右侧“发布”按钮（点击跳转发布动态页）

    • 动态列表：

      • 单条动态：

        • 头部：头像 + 昵称 + 发布时间
        • 内容：文字 + 自动生成的打卡数据卡片（如“今日完成8/8个任务，完成率100%！”）
        • 底部：点赞按钮（显示点赞数） + 评论按钮（显示评论数）

  • 交互：

    • 点赞：点击后变色 + 数字+1，再次点击取消
    • 评论：点击弹出评论输入框 + 评论列表
    • 发布：点击后跳转发布页，支持手动输入文字 + 选择自动生成的打卡数据

10. 个人主页

  • 布局：顶部个人信息区 + 数据概览 + 功能入口

  • 核心元素：

    • 顶部：

      • 头像（点击可更换） + 昵称（点击可修改） + 个性签名
      • 关注/粉丝数（点击可查看列表）

    • 数据概览（4宫格）：

      • 总习惯数、总完成数、连续打卡天数、总完成率

    • 功能入口：

      • 我的小组、我的收藏、设置、帮助中心
    • 底部：我的动态（展示3条最新，点击“更多”查看全部）

  • 交互：

    • 头像/昵称/签名：点击进入编辑个人信息页
    • 功能入口：点击跳转对应页面

11. 小组列表页

  • 布局：顶部操作栏 + 小组列表 + 底部创建按钮

  • 核心元素：

    • 顶部：

      • 标题“我的小组”
      • 右侧“搜索”按钮（搜索小组名称）

    • 小组列表：

      • 单小组卡片：小组头像 + 小组名称 + 成员数 + 我的打卡率
    • 底部：“创建小组”按钮（点击跳转创建小组页）

  • 交互：

    • 点击小组卡片：进入小组详情页
    • 长按小组卡片：弹出“退出小组”选项（仅非组长）

12. 小组详情页

  • 布局：顶部小组信息 + 功能标签 + 内容区

  • 核心元素：

    • 顶部：

      • 小组头像 + 小组名称 + 公告（点击可查看全文）
      • 右侧“更多”按钮（组长：编辑/解散；成员：退出）
    • 功能标签：小组排行/小组动态/成员列表

    • 内容区（默认显示小组排行）：

      • 小组排行：同全局排行，但仅展示本小组成员
      • 小组动态：仅展示本小组成员的动态
      • 成员列表：头像 + 昵称 + 今日完成数 + 操作（组长：踢人；成员：无）

  • 交互：

    • 标签切换：内容区实时切换
    • 成员列表：点击头像进入他人主页

13. 设置页

  • 布局：列表式布局，分组展示设置项

  • 核心元素：

    • 第一组（提醒设置）：

      • 消息通知开关（总开关）
      • 铃声设置（跳转铃声选择页）
      • 振动开关
      • 夜间免打扰（设置时段：22:00-08:00）

    • 第二组（系统设置）：

      • 权限管理（点击跳转手机系统权限页）
      • 清除缓存（显示缓存大小，点击确认清除）
      • 数据备份/恢复（可选）

    • 第三组（关于）：

      • 版本号
      • 用户协议
      • 隐私政策
      • 意见反馈
      • 退出登录

  • 交互：

    • 开关项：点击直接切换状态
    • 跳转项：点击跳转对应页面
    • 清除缓存/退出登录：点击后弹窗确认

14. 关于/协议页

  • 布局：全屏文本展示

  • 核心元素：

    • 顶部：标题（如“用户协议”） + 返回按钮
    • 中部：滚动文本区（展示协议全文）
    • 底部：无

  • 交互：

    • 支持上下滑动查看全文
    • 支持文本放大/缩小（可选）

页面原型总结

  1. 所有页面遵循简洁、统一的设计规范，核心操作（打卡/创建/切换）需突出且易点击，适配手机端单手操作；
  2. 交互逻辑以“最少步骤完成核心操作”为原则，如一键打卡、快捷创建习惯；
  3. 数据类页面（统计/排行）需实时刷新，提醒类功能需优先保障权限引导和稳定性。

第二部分：数据库表设计SQL（MySQL）

说明：所有表均添加主键、索引，适配APP高并发查询；字段类型贴合业务场景，避免冗余；支持用户数据云端同步、游客数据本地存储（游客user\_id为本地生成唯一标识）。

1. 用户表（user）


CREATE TABLE `user` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '用户唯一ID（主键）',
  `phone` varchar(20) DEFAULT NULL COMMENT '手机号（登录账号）',
  `wechat_openid` varchar(50) DEFAULT NULL COMMENT '微信第三方登录openid',
  `qq_openid` varchar(50) DEFAULT NULL COMMENT 'QQ第三方登录openid',
  `nickname` varchar(50) NOT NULL DEFAULT '习惯达人' COMMENT '用户昵称',
  `avatar` varchar(255) DEFAULT '默认头像URL' COMMENT '用户头像URL',
  `signature` varchar(200) DEFAULT '' COMMENT '个性签名',
  `register_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '注册时间',
  `last_login_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '最后登录时间',
  `is_visitor` tinyint(1) NOT NULL DEFAULT 0 COMMENT '是否为游客（0=非游客，1=游客）',
  `visitor_id` varchar(50) DEFAULT NULL COMMENT '游客唯一标识（本地生成）',
  `continuous_days` int(11) NOT NULL DEFAULT 0 COMMENT '连续打卡天数',
  `total_complete` int(11) NOT NULL DEFAULT 0 COMMENT '累计完成任务数',
  `total_rate` decimal(5,2) NOT NULL DEFAULT 0.00 COMMENT '总完成率（保留2位小数）',
  `follow_count` int(11) NOT NULL DEFAULT 0 COMMENT '关注数',
  `fans_count` int(11) NOT NULL DEFAULT 0 COMMENT '粉丝数',
  `status` tinyint(1) NOT NULL DEFAULT 1 COMMENT '账号状态（1=正常，0=禁用）',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_phone` (`phone`),
  UNIQUE KEY `uk_wechat_openid` (`wechat_openid`),
  UNIQUE KEY `uk_qq_openid` (`qq_openid`),
  UNIQUE KEY `uk_visitor_id` (`visitor_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表（含游客）';

2. 习惯表（habit）


CREATE TABLE `habit` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '习惯唯一ID（主键）',
  `user_id` bigint(20) NOT NULL COMMENT '关联用户ID（外键，关联user.id）',
  `habit_name` varchar(50) NOT NULL COMMENT '习惯名称（如：喝水、起身运动）',
  `icon` varchar(255) NOT NULL COMMENT '习惯图标URL',
  `remind_type` tinyint(2) NOT NULL COMMENT '提醒类型（1=间隔小时，2=每日固定，3=每周固定，4=每几天）',
  `interval_hour` int(11) DEFAULT NULL COMMENT '间隔小时数（仅remind_type=1时有效）',
  `start_time` varchar(5) DEFAULT NULL COMMENT '有效时段开始时间（如：08:00，仅remind_type=1时有效）',
  `end_time` varchar(5) DEFAULT NULL COMMENT '有效时段结束时间（如：22:00，仅remind_type=1时有效）',
  `daily_times` varchar(100) DEFAULT NULL COMMENT '每日固定时间（多个时间用逗号分隔，如：08:00,10:00，仅remind_type=2时有效）',
  `week_days` varchar(20) DEFAULT NULL COMMENT '每周固定星期（多个星期用逗号分隔，如：1,3,5，1=周一，仅remind_type=3时有效）',
  `week_time` varchar(5) DEFAULT NULL COMMENT '每周固定时间（如：20:00，仅remind_type=3时有效）',
  `interval_day` int(11) DEFAULT NULL COMMENT '间隔天数（仅remind_type=4时有效）',
  `start_date` date DEFAULT NULL COMMENT '开始日期（仅remind_type=4时有效）',
  `remind_way` varchar(20) NOT NULL DEFAULT 'ring' COMMENT '提醒方式（ring=铃声，vibrate=振动，silent=静音通知，多方式用逗号分隔）',
  `ring_url` varchar(255) DEFAULT '默认铃声URL' COMMENT '铃声URL',
  `remark` varchar(200) DEFAULT '' COMMENT '备注（选填）',
  `is_enable` tinyint(1) NOT NULL DEFAULT 1 COMMENT '是否启用（1=启用，0=禁用）',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`),
  KEY `idx_user_id` (`user_id`) COMMENT '用户ID索引，优化查询'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='习惯表（关联用户，存储提醒规则）';

3. 任务表（task）


CREATE TABLE `task` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '任务唯一ID（主键）',
  `user_id` bigint(20) NOT NULL COMMENT '关联用户ID（外键，关联user.id）',
  `habit_id` bigint(20) NOT NULL COMMENT '关联习惯ID（外键，关联habit.id）',
  `plan_time` datetime NOT NULL COMMENT '计划执行时间',
  `status` tinyint(2) NOT NULL DEFAULT 0 COMMENT '任务状态（0=未完成，1=已完成，2=已跳过）',
  `complete_time` datetime DEFAULT NULL COMMENT '实际完成时间（仅status=1时有效）',
  `complete_type` tinyint(1) DEFAULT NULL COMMENT '完成方式（1=手动打卡，2=自动打卡）',
  `task_date` date NOT NULL COMMENT '任务所属日期（用于按日期筛选）',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '任务生成时间',
  PRIMARY KEY (`id`),
  KEY `idx_user_id_task_date` (`user_id`,`task_date`) COMMENT '用户+日期索引，优化历史记录查询',
  KEY `idx_habit_id` (`habit_id`) COMMENT '习惯ID索引'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='任务表（系统自动生成，存储每日待办任务）';

4. 成就徽章表（achievement）


CREATE TABLE `achievement` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '成就唯一ID（主键）',
  `name` varchar(50) NOT NULL COMMENT '成就名称（如：新手徽章、坚持7天）',
  `icon` varchar(255) NOT NULL COMMENT '成就图标URL',
  `type` tinyint(2) NOT NULL COMMENT '成就类型（1=新手类，2=坚持类，3=行为类，4=社交类）',
  `condition` varchar(100) NOT NULL COMMENT '达成条件（如：连续打卡7天、发布动态10次）',
  `sort` int(11) NOT NULL DEFAULT 0 COMMENT '排序（数字越小越靠前）',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='成就徽章表（全局统一配置）';

5. 用户成就关联表（user\_achievement）


CREATE TABLE `user_achievement` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '关联ID（主键）',
  `user_id` bigint(20) NOT NULL COMMENT '关联用户ID（外键，关联user.id）',
  `achievement_id` bigint(20) NOT NULL COMMENT '关联成就ID（外键，关联achievement.id）',
  `get_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '获得时间',
  `is_show` tinyint(1) NOT NULL DEFAULT 1 COMMENT '是否在个人主页展示（1=展示，0=隐藏）',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_user_achievement` (`user_id`,`achievement_id`) COMMENT '用户+成就唯一，避免重复获得',
  KEY `idx_achievement_id` (`achievement_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户成就关联表（存储用户获得的成就）';

6. 动态表（dynamic）


CREATE TABLE `dynamic` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '动态唯一ID（主键）',
  `user_id` bigint(20) NOT NULL COMMENT '发布用户ID（外键，关联user.id）',
  `content` varchar(500) NOT NULL COMMENT '动态内容（文字）',
  `data_card` varchar(200) DEFAULT NULL COMMENT '打卡数据卡片（如：今日完成8/8个任务，完成率100%）',
  `like_count` int(11) NOT NULL DEFAULT 0 COMMENT '点赞数',
  `comment_count` int(11) NOT NULL DEFAULT 0 COMMENT '评论数',
  `is_auto` tinyint(1) NOT NULL DEFAULT 0 COMMENT '是否自动发布（0=手动，1=自动）',
  `is_public` tinyint(1) NOT NULL DEFAULT 1 COMMENT '是否公开（1=公开，0=仅自己可见）',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '发布时间',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`),
  KEY `idx_user_id` (`user_id`) COMMENT '用户ID索引，优化个人动态查询',
  KEY `idx_create_time` (`create_time`) COMMENT '发布时间索引，优化广场动态排序'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='动态表（类朋友圈）';

7. 动态点赞表（dynamic\_like）


CREATE TABLE `dynamic_like` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '点赞ID（主键）',
  `dynamic_id` bigint(20) NOT NULL COMMENT '关联动态ID（外键，关联dynamic.id）',
  `user_id` bigint(20) NOT NULL COMMENT '点赞用户ID（外键，关联user.id）',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '点赞时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_dynamic_user` (`dynamic_id`,`user_id`) COMMENT '动态+用户唯一，避免重复点赞',
  KEY `idx_dynamic_id` (`dynamic_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='动态点赞表';

8. 动态评论表（dynamic\_comment）


CREATE TABLE `dynamic_comment` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '评论ID（主键）',
  `dynamic_id` bigint(20) NOT NULL COMMENT '关联动态ID（外键，关联dynamic.id）',
  `user_id` bigint(20) NOT NULL COMMENT '评论用户ID（外键，关联user.id）',
  `content` varchar(300) NOT NULL COMMENT '评论内容',
  `parent_id` bigint(20) DEFAULT 0 COMMENT '父评论ID（0=一级评论，非0=回复评论）',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '评论时间',
  PRIMARY KEY (`id`),
  KEY `idx_dynamic_id` (`dynamic_id`) COMMENT '动态ID索引，优化评论列表查询',
  KEY `idx_parent_id` (`parent_id`) COMMENT '父评论ID索引，优化回复查询'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='动态评论表';

9. 小组表（group\_info）


CREATE TABLE `group_info` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '小组唯一ID（主键）',
  `group_name` varchar(50) NOT NULL COMMENT '小组名称',
  `group_avatar` varchar(255) DEFAULT '默认小组头像URL' COMMENT '小组头像URL',
  `leader_id` bigint(20) NOT NULL COMMENT '组长ID（外键，关联user.id）',
  `announcement` varchar(500) DEFAULT '' COMMENT '小组公告',
  `is_public` tinyint(1) NOT NULL DEFAULT 1 COMMENT '是否公开（1=公开，0=私密）',
  `member_count` int(11) NOT NULL DEFAULT 1 COMMENT '成员数（默认1人=组长）',
  `total_complete` int(11) NOT NULL DEFAULT 0 COMMENT '小组累计完成任务数',
  `avg_rate` decimal(5,2) NOT NULL DEFAULT 0.00 COMMENT '小组人均完成率',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`),
  KEY `idx_leader_id` (`leader_id`) COMMENT '组长ID索引',
  KEY `idx_group_name` (`group_name`) COMMENT '小组名称索引，优化搜索'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='小组表';

10. 小组成员表（group\_member）


CREATE TABLE `group_member` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '成员关联ID（主键）',
  `group_id` bigint(20) NOT NULL COMMENT '关联小组ID（外键，关联group_info.id）',
  `user_id` bigint(20) NOT NULL COMMENT '关联用户ID（外键，关联user.id）',
  `role` tinyint(2) NOT NULL DEFAULT 2 COMMENT '成员角色（1=组长，2=普通成员）',
  `join_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '加入时间',
  `today_complete` int(11) NOT NULL DEFAULT 0 COMMENT '今日完成任务数',
  `join_days` int(11) NOT NULL DEFAULT 1 COMMENT '加入天数',
  `member_rate` decimal(5,2) NOT NULL DEFAULT 0.00 COMMENT '成员个人打卡率',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_group_user` (`group_id`,`user_id`) COMMENT '小组+用户唯一，避免重复加入',
  KEY `idx_group_id` (`group_id`) COMMENT '小组ID索引，优化成员列表查询',
  KEY `idx_user_id` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='小组成员表';

11. 关注表（follow）


CREATE TABLE `follow` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '关注ID（主键）',
  `user_id` bigint(20) NOT NULL COMMENT '关注者ID（外键，关联user.id）',
  `followed_id` bigint(20) NOT NULL COMMENT '被关注者ID（外键，关联user.id）',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '关注时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_user_followed` (`user_id`,`followed_id`) COMMENT '关注者+被关注者唯一，避免重复关注',
  KEY `idx_user_id` (`user_id`),
  KEY `idx_followed_id` (`followed_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='关注表（用户关注关系）';

12. 用户设置表（user\_setting）


CREATE TABLE `user_setting` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '设置ID（主键）',
  `user_id` bigint(20) NOT NULL COMMENT '关联用户ID（外键，关联user.id）',
  `notify_switch` tinyint(1) NOT NULL DEFAULT 1 COMMENT '消息通知总开关（1=开启，0=关闭）',
  `ring_switch` tinyint(1) NOT NULL DEFAULT 1 COMMENT '铃声开关（1=开启，0=关闭）',
  `vibrate_switch` tinyint(1) NOT NULL DEFAULT 1 COMMENT '振动开关（1=开启，0=关闭）',
  `night_mode` tinyint(1) NOT NULL DEFAULT 0 COMMENT '夜间模式（1=开启，0=关闭）',
  `do_not_disturb` tinyint(1) NOT NULL DEFAULT 0 COMMENT '夜间免打扰（1=开启，0=关闭）',
  `dn_start_time` varchar(5) DEFAULT '22:00' COMMENT '免打扰开始时间',
  `dn_end_time` varchar(5) DEFAULT '08:00' COMMENT '免打扰结束时间',
  `cache_size` decimal(10,2) DEFAULT 0.00 COMMENT '缓存大小（单位：MB）',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_user_id` (`user_id`) COMMENT '用户唯一，一个用户一条设置'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户设置表';

第三部分：API接口文档（RESTful风格）

说明：所有接口统一返回格式；请求方式标注明确；参数说明含类型、是否必填、备注；适配前后端分离开发，支持JSON格式交互；token为用户登录后获取的身份凭证，放在请求头Authorization中。

一、通用返回格式


// 成功返回
{
  "code": 200,
  "message": "操作成功",
  "data": {} // 具体返回数据，根据接口不同变化
}

// 失败返回
{
  "code": 400, // 401=未登录，403=无权限，404=资源不存在，500=服务器错误
  "message": "操作失败（具体原因）",
  "data": null
}

二、用户模块接口

1. 手机号验证码登录

  • 请求方式：POST
  • 接口地址：/api/user/login/phone
  • 请求头：无（未登录）
  • 请求参数：
    `{
    "phone": "13800138000", // string，必填，手机号
    "code": "123456" // string，必填，验证码
    }`

  • 返回数据：
    `{
    "code": 200,
    "message": "登录成功",
    "data": {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", // 身份凭证，后续请求需携带
    "userInfo": {

    "id": 10001,
"nickname": "习惯达人",
"avatar": "https://xxx.com/avatar.jpg",
"continuousDays": 3,
"totalComplete": 25,
"totalRate": 92.50

    }
    }
    }`

2. 获取验证码

  • 请求方式：GET
  • 接口地址：/api/user/send/code?phone\=13800138000
  • 请求头：无
  • 请求参数：phone（string，必填，手机号）
  • 返回数据：
    `{
    "code": 200,
    "message": "验证码发送成功，请注意查收",
    "data": null
    }`

3. 第三方登录（微信/QQ）

  • 请求方式：POST
  • 接口地址：/api/user/login/third
  • 请求头：无
  • 请求参数：
    `{
    "type": 1, // int，必填，登录类型（1=微信，2=QQ）
    "openid": "o6_bmjrPTlm6_2sgVt7hMZOPfL2M" // string，必填，第三方openid
    }`
  • 返回数据：同手机号登录

4. 游客登录

  • 请求方式：POST
  • 接口地址：/api/user/login/visitor
  • 请求头：无
  • 请求参数：
    `{
    "visitorId": "local_123456789" // string，必填，本地生成的游客唯一标识
    }`
  • 返回数据：同手机号登录（token有效期较短，绑定手机号后永久有效）
（注：文档部分内容可能由 AI 生成）

第三部分：前端页面原型UI提示词

以下是针对每个页面量身定制的UI设计提示词，适配移动端（iOS/Android双端）、符合现代简约风格且贴合年轻人审美，涵盖色彩、布局、风格、细节等核心维度：

1. 启动页

移动端APP启动页，现代简约风格，产品主色（推荐柔和莫兰迪蓝/薄荷绿）全屏渐变背景，搭配简约线性习惯图标（水杯/运动/日历，低饱和度单色），居中展示圆润无衬线字体的产品Logo+“习惯打卡Pro”名称，底部小字“自律，从准时提醒开始”（浅灰色细体），整体视觉干净透气，无多余元素，适配全面屏，视觉焦点集中在品牌区域，动态效果：轻微的图标呼吸动效，色彩统一且柔和，符合年轻人极简审美，高分辨率，适配暗黑/浅色模式

2. 登录页

移动端APP登录页，上下分层布局，顶部品牌区（简约Logo+“手机号快捷登录”标题，轻量级无衬线字体），中部登录区（圆角输入框，浅灰色边框，聚焦时渐变高亮，验证码按钮与登录按钮采用产品主色填充，倒计时状态为浅灰色禁用态），底部协议区（极简勾选框，第三方登录为线性微信/QQ图标，“游客体验”小字浅灰色），整体白色底色+产品主色点缀，留白充足，交互反馈清晰（输入错误红色提示、按钮点击波纹效），适配单手操作，按钮尺寸≥44px，现代扁平化风格，年轻化视觉，高对比度文字

3. 首页（核心）

移动端APP首页，卡片式布局，顶部状态栏（圆形头像+昵称，极简排版），今日数据卡片（圆角渐变卡片，产品主色描边，数据数字加粗放大，其余文字轻量级），待办任务列表（未完成卡片白色底色+产品主色“立即打卡”按钮，已完成卡片浅灰色底色+灰色“已打卡”标签，时间文字小号浅灰），底部悬浮“+”按钮（产品主色填充，圆形，轻微阴影），Tab栏（线性图标+文字，选中态产品主色，未选中浅灰色），整体视觉层次分明，卡片间距均匀，无冗余装饰，适配暗黑模式，数据可视化简洁直观，符合年轻人高效操作习惯

4. 习惯管理页

移动端APP习惯管理页，极简列表布局，顶部操作栏（“我的习惯”标题加粗，右侧筛选按钮为线性图标+文字，浅灰色），习惯列表（单卡片左侧图标+中间习惯名称/提醒规则+右侧启用开关，开关为产品主色开启态/浅灰色关闭态），底部悬浮“+”按钮（同首页），卡片采用轻微圆角+hover/点击阴影，列表项间距适中，筛选弹窗为半透明毛玻璃效果，整体浅白色底色，卡片无边框（仅分割线浅灰色），现代扁平化，操作反馈清晰（开关切换动效），适配单手滑动操作

5. 创建/编辑习惯页

移动端APP表单页，纵向流式布局，顶部标题栏（“新建/编辑习惯”加粗，右侧取消/删除按钮浅灰色，点击变红），表单项（必填项*标红，输入框圆角浅灰底，图标选择区为圆形点击区+默认图标，提醒类型单选框为胶囊式选中态（产品主色），时间选择器滚轮式，多选框为方形极简样式），底部保存按钮（产品主色填充，禁用态浅灰色），整体表单间距均匀，动效流畅（切换提醒类型时表单平滑显示/隐藏），文字层级清晰（标题>标签>提示文字），年轻化简约风格，适配小屏手机滚动体验

6. 任务详情/历史记录页

移动端APP列表页，顶部筛选栏（日期选择为下拉胶囊式，习惯筛选为弹窗选择，筛选按钮线性图标），中部列表（按日期分组，组标题浅灰色，单条记录左侧习惯图标+中间名称/时间+右侧完成状态标签（已完成绿色/未完成橙色/跳过灰色），实际完成时间小号浅灰），列表项无边框，轻微点击背景色，整体白色底色，筛选栏固定顶部，列表可滑动，数据展示直观，无冗余装饰，现代极简风格，适配暗黑模式，文字大小适配阅读

7. 数据统计页

移动端APP数据可视化页，顶部切换标签（胶囊式标签，选中态产品主色填充，未选中浅灰边框），图表区（日视图环形图/周视图柱状图/月视图折线图/习惯维度饼图，图表配色为产品主色+辅助浅色系，无多余网格线，数值标注简洁），数据卡片区（3宫格，卡片圆角+轻微阴影，数字加粗放大，文字浅灰），图表交互（点击柱子/折线点弹出数值气泡，长按导出为轻微动效），整体色彩统一（产品主色为核心图表色），数据层级清晰，可视化简约易懂，符合年轻人数据审美，适配横屏/竖屏，高分辨率图表

8. 排行榜页

移动端APP排行页，顶部切换标签（同数据页胶囊式），我的排名卡片（产品主色渐变背景，白色文字，排名数字放大加粗，卡片圆角+轻微阴影，置顶展示），排行列表（TOP1-3带金牌/银牌/铜牌线性图标+对应浅金/银/铜背景色，其余列表项左侧排名数字+中间头像/昵称+右侧核心数据/完成率），列表项间距均匀，点击头像有轻微缩放动效，下拉刷新为极简加载动效，整体色彩活力（奖牌色+产品主色点缀），视觉焦点突出（我的排名+TOP3），年轻化竞技风格，无冗余装饰，适配滑动加载更多

9. 动态广场页（类朋友圈）

移动端APP社交动态页，顶部筛选栏（“全部/关注/推荐”胶囊标签，发布按钮为产品主色圆形+加号），动态列表（单条动态头部圆形头像+昵称+发布时间（浅灰小字），内容区文字+圆角数据卡片（产品主色描边，数据高亮），底部点赞/评论线性图标+数字，点赞变红+数字+1动效），评论输入框为底部弹出式，极简圆角设计，整体白色底色，动态卡片轻微阴影，社交感轻量化，文字排版舒适，符合年轻人朋友圈审美，交互反馈自然（点赞动效、评论弹出）

10. 个人主页

移动端APP个人主页，顶部信息区（圆形大头像+昵称（加粗）+个性签名（浅灰小字），关注/粉丝数为数字+文字，点击有下划线提示），数据概览4宫格（卡片极简圆角，数字加粗，文字浅灰），功能入口（线性图标+文字，网格布局，图标产品主色），底部我的动态（3条缩略，“更多”按钮浅灰色），整体布局分层清晰（信息区-数据区-功能区-动态区），头像可点击更换（轻微缩放动效），色彩柔和（产品主色点缀，底色浅白），个人化简约风格，适配头像裁剪/昵称编辑交互

11. 小组列表页

移动端APP小组列表页，顶部操作栏（“我的小组”标题+右侧搜索线性图标），小组列表（单卡片左侧圆形小组头像+中间小组名称/成员数+右侧我的打卡率（数字+百分比），卡片圆角无边框，轻微点击阴影），底部“创建小组”按钮（产品主色填充，圆角胶囊式），整体列表布局宽松，搜索弹窗为顶部输入框+取消按钮，长按卡片弹出操作菜单（半透明毛玻璃），年轻化简约风格，适配滑动刷新，视觉焦点在小组名称/打卡率

12. 小组详情页

移动端APP小组详情页，顶部小组信息区（圆形小组头像+名称+公告（省略号），右侧更多按钮线性图标），功能标签（“小组排行/小组动态/成员列表”胶囊标签，选中态产品主色），内容区（排行同全局排行但仅小组内，动态同广场但仅小组内，成员列表头像+昵称+今日完成数+操作按钮（组长可见踢人按钮，红色）），标签切换平滑过渡，成员列表操作按钮hover变红，整体色彩统一（产品主色+小组专属浅色系），布局分层清晰，适配小组公告全屏展示交互

13. 设置页

移动端APP设置页，列表式分组布局，每组标题浅灰色大写小字，设置项（开关项为极简滑动开关，开启态产品主色；跳转项右侧箭头线性图标；清除缓存/退出登录项右侧文字浅灰，点击弹窗确认），提醒设置组/系统设置组/关于组采用浅灰色分割线，弹窗为圆角+轻微阴影，确认按钮产品主色，取消按钮浅灰色，整体白色底色，列表项高度统一，操作反馈清晰（开关动效、弹窗弹出），极简功能型设计，符合年轻人设置页使用习惯，文字层级分明

14. 关于/协议页

移动端APP文本展示页，顶部标题栏（“用户协议/隐私政策”标题+左侧返回线性图标），中部滚动文本区（文字大小14px，行间距1.5，浅黑色文字，白色底色，支持双指放大/缩小），无多余装饰，文本区占满屏幕80%宽度，左右留白充足，滚动流畅，适配暗黑模式（文字浅白，底色深灰），极简阅读型设计，符合协议文本展示规范，操作仅保留返回，无冗余元素

通用设计补充提示

所有页面统一遵循：

  • 色彩体系：主色1种（如#4A90E2）+辅助色2种（浅灰/浅蓝）+强调色1种（红/橙），无过多杂色；
  • 字体体系：全局使用无衬线字体（苹方/思源黑体），标题字重600，正文400，提示文字300；
  • 交互规范：按钮点击有波纹/缩放动效，弹窗为半透明毛玻璃+圆角，列表滑动流畅无卡顿；
  • 适配规范：兼容375px-428px宽度，关键按钮/输入框≥44px，文字最小12px，适配暗黑/浅色模式无缝切换。

觉得内容不错？我要

版权声明
本文作者：铛铛铛铛铛
本文链接：http://blog.dangdang.site/index.php/archives/6/
转载需注明文章出处，若本文内容有侵犯到您合法权益，请联系站长删除
评论 暂无评论
暂无评论，快来抢沙发吧~