抖音小程序 - 校园考勤
纯前端原生抖音小程序，用于校园学生考勤管理。含课程签到、考勤记录查询、请假/补签审批、数据统计与周课表等功能，数据本地模拟无需后端，界面精美自适应，开箱即用。
商品详情介绍
抖音小程序 - 校园考勤
一、功能介绍
一款面向高校学生的校园考勤管理小程序，纯前端实现，无需后端接口，数据本地模拟（JSON 种子 + 本地存储），即装即用。覆盖学生课程签到、考勤记录、请假审批、数据统计全流程，界面精美、交互流畅、自适应各机型。
核心功能模块
1. 首页（工作台）
深色渐变头部 + 出勤率环形进度
欢迎卡：实时问候、个人信息、出勤率/正常/异常/请假汇总
四宫格快捷入口（签到 / 请假 / 记录 / 统计）
「下一节课」悬浮卡片，一键跳转签到
今日课程时间轴列表（彩色课程标识）
校园公告模块
2. 课程签到
大号实时时钟 + 旋转脉冲圆环动画
今日全部课程列表，支持「立即签到」
自动判定正常 / 迟到状态（按上课时间）
已签到课程展示签到时间与状态
今日签到进度汇总
3. 周课表
周一至周日星期切换条（高亮今日）
时间轴课程卡片（按节次排列，彩色课程标签）
课程详情弹层（时间 / 地点 / 教师 / 周次）
4. 考勤记录
顶部搜索框（课程 / 教室）
四宫格汇总（正常 / 迟到 / 缺勤 / 请假）
5 类状态筛选 chips
按日期分组的签到记录列表
点击进入详情，支持备注编辑与删除（增删改查）
5. 请假 / 补签审批
请假 / 补签两类申请
申请单新建、查看、撤销（完整增删改查）
4 类状态筛选（全部 / 待审批 / 已通过 / 已驳回）
病假 / 事假 / 公假 / 漏签到等多分类
6. 数据统计
月度出勤率大数字 + 趋势对比
纯 CSS 环形图（签到状态分布占比）
周度出勤率柱状图（动画填充）
各课程出勤进度条
班级出勤排行榜（金银铜奖牌样式）
7. 我的
个人资料卡（含头像、班级、学号、宿舍）
资料编辑（昵称 / 宿舍，模拟修改接口）
开关设置（签到提醒 / 迟到预警 / 审批提醒）
菜单分组（考勤服务 / 其他）
演示数据重置（一键恢复）
二、技术特点
特性 | 说明 |
|---|---|
原生开发 | 抖音小程序原生框架（ttml + ttss + js），不依赖任何 UI 框架，纯净可控 |
模拟接口 |
|
数据可重置 | 每次启动清空旧缓存，保证真机调试数据与代码均为最新 |
自适应布局 | 全面使用 |
自定义导航 |
|
图标库 | 内置 7 套配色（蓝/灰/绿/橙/紫/红/白）共 469 枚 PNG 图标，按需引用 |
纯 CSS 图表 | 环形图（conic-gradient）、柱状图、进度条全部用 CSS 实现，零依赖 |
UTF-8 编码 | 全部源码文件 UTF-8 编码 |
三、项目结构
源码_校园考勤/
├── app.js # 应用入口（清缓存、导航尺寸）
├── app.json # 全局配置（页面注册、自定义导航）
├── app.ttss # 全局样式（主题变量、工具类、卡片、按钮）
├── project.config.json # 抖音开发者工具配置
├── assets/icons/ # 图标库（blue/gray/green/orange/purple/red/white）
├── components/
│ ├── tabbar/ # 底部导航（含中央签到凸起按钮）
│ ├── nav-bar/ # 子页面自定义导航栏
│ └── empty/ # 空状态组件
├── data/
│ └── mock-data.js # 种子数据（学校/学生/课表/记录/审批/公告）
├── utils/
│ └── mock-api.js # 模拟接口层（CRUD + 异步延迟）
└── pages/
├── index/ # 首页
├── schedule/ # 课表
├── clock/ # 签到
├── records/ # 考勤记录
├── record-detail/ # 记录详情
├── leave/ # 请假审批
├── leave-form/ # 新建申请
├── stats/ # 数据统计
└── my/ # 我的四、运行方式
打开「抖音开发者工具」
导入项目，目录选择
源码_校园考勤AppID 填写
ttdd76abcb4313506501（或使用测试号）点击编译即可预览
真机调试：扫码后在手机查看，每次启动自动清空旧缓存
五、注意事项
所有学校、人员、地点信息均为「某某」占位，无真实信息
数据为本地模拟，不调用任何真实 API
每次发版前在
app.js中自增APP_VER可强制清空旧版缓存