抖音小程序 - 公司考勤

一、功能介绍

一款面向企业内部的考勤管理小程序，纯前端实现，无需后端接口，数据本地模拟、即装即用。覆盖员工日常考勤全流程，界面精美、交互流畅、自适应各机型。

核心功能模块

1. 工作台首页

• 渐变欢迎卡 + 出勤率展示
• 浮动统计卡：正常 / 迟到 / 缺勤 / 加班时长一目了然
• 快捷打卡入口 + 今日打卡状态
• 双列彩色快捷入口（打卡 / 考勤 / 审批 / 我的）
• 本月考勤概览与公司考勤提醒

2. 打卡签到

• 大号实时时钟 + 脉冲圆环动画
• 上班 / 下班一键打卡（自动判定正常、迟到、早退）
• 今日考勤汇总（上下班时间、工时、地点）
• 近期打卡记录列表

3. 考勤记录

• 关键字搜索（日期 / 备注 / 地点）
• 7 类状态筛选（全部 / 正常 / 迟到 / 早退 / 缺勤 / 请假 / 加班）
• 双列卡片展示，适配各种屏幕尺寸
• 点击查看详情，支持编辑与删除

4. 审批申请

• 请假 / 加班 / 补卡三类申请
• 申请单新建、编辑、撤回、删除（完整增删改查）
• 按类型与状态双层筛选
• 申请详情含时长、时间区间、事由、审批人、审批状态流转

5. 我的档案

• 个人信息卡（部门、岗位、工号）
• 本月出勤率环形图 + 出勤数据统计
• 考勤日历热力图（按状态颜色区分每日出勤情况）
• 考勤设置开关（打卡提醒、迟到预警、定位打卡、人脸识别）
• 一键重置本地数据

6. 考勤详情页

• 上下班打卡时间线展示
• 工时统计与出勤判定
• 备注信息查看与在线编辑

二、使用场景

• 企业内部考勤：中小企业日常员工出勤打卡与记录管理
• 考勤系统演示：可作为考勤类 SaaS 产品的前端原型或演示样例
• 学习参考：原生抖音小程序开发教学示例，含自定义导航、自定义 TabBar、模拟接口、列表筛选、表单交互等典型场景
• 二次开发基础：纯前端结构清晰，接入真实后端接口即可快速升级为线上产品

三、交付内容

技术特点

• 原生开发：基于抖音小程序原生框架（ttml / ttss / js / json），无第三方依赖
• 模拟接口：内置 mock-api，模拟打卡、记录、申请等完整增删改查，本地数据持久化
• 自适应布局：统一 rpx 单位 + CSS Grid 双列布局，各机型显示一致
• 设计体系：CSS 变量主题色、渐变卡片、毛玻璃导航、状态标签体系，界面精致统一
• 开箱即用：用抖音开发者工具导入源码目录即可预览运行

运行方式

1. 下载并解压源码 zip
2. 打开「抖音开发者工具」
3. 导入项目，选择解压后的源码目录
4. 自动编译运行即可预览全部功能