定位打卡插件是基于 NocoBase 2.0 开发的可视化扩展插件，定位打卡是基于地理位置的考勤方式，通过H5页面获取用户设备的 GPS 坐标，与预设的打卡地点进行距离校验，判断员工是否在有效范围内完成打卡。
- 数据绑定模式：选择数据表字段映射，将员工信息、打卡信息等字段绑定。
- 支持手动打卡/自动打卡两种模式
- 手动打卡模式：员工手动点击“手动打卡”按钮，根据手动打卡照片是否必填开关，选择相机拍照上传打卡信息。
- 自动打卡模式：系统定时检测员工位置，根据自动打卡照片是否必填开关,选择相机拍照上传打卡信息或者自动打卡。
- 支持选择多个打卡点
- 支持设置打卡有效范围（如 50 米、100 米、300 米）
- 支持数据映射配置（打卡点经纬度、上班时间、下班时间、打卡状态等字段）
- 定位图标、地图主题色可自定义
- 支持配置手动打卡照片和自动打卡照片是否必填
- 支持配置手动打卡备注是否必填
| 分组 | 字段 | 类型 | 说明 |
|---|
| 基础字段 | locationField | 选择器 | 当前人员经纬度字段（Point 类型） |
| timeField | 选择器 | 打卡时间字段（DateTime 类型） |
| userField | 选择器 | 打卡人员字段（关联用户表） |
| photoField | 选择器 | 打卡照片字段（Attachment 类型） |
| statusField | 选择器 | 打卡状态字段（Enum 类型） |
| positionField | 选择器 | 打卡详细位置字段（Text 类型） |
| remarkField | 选择器 | 备注/手动打卡说明字段（Text 类型） |
| 打卡点配置 | checkpointField | 选择器 | 打卡经纬度字段（Point 类型） |
- H5 定位方案：标准浏览器环境下调用原生 HTML5 Geolocation API。
- 距离计算算法：前端获取坐标后，采用球面距离算法（如 Haversine 公式）计算实际位置与预设打卡点中心的距离，判断是否落在设定的容差半径（如 100 米）内。
- 强制拍照防作弊：在 H5 端利用
<input type="file" accept="image/*" capture="camera" /> 属性，强制唤起移动设备原生相机进行实时拍照，拦截从本地相册选取图片的行为。
- 防作弊规则： 设备指纹绑定，比如设备ID+手机号绑定，避免设备频繁更换作弊。
- 地图组件区：集成轻量级地图 SDK（如高德地图 Web API），在 H5 页面中直观展示当前定位蓝点，并通过覆盖物或标记点绘制打卡有效区域。
- 操作、状态区：
- 展示当前时间、定位状态（定位中 / 定位成功 / 定位失败并引导授权）。
- 展示打卡按钮。
- 若用户处于打卡圈内，根据强制拍照开关，决定按钮高亮显示“立即打卡”。
- 若用户处于打卡圈外，按钮可变为“手动打卡”并根据强制要求拍照开关决定是否拍照和填写备注。
- 定位失败引导：若定位失败，引导用户手动开启定位服务或重新尝试。
- 打卡失败引导：若打卡失败，提示用户重新尝试、联系管理员或切换成手动打卡模式。
- 入口位于创建区块中
- 在创建区块中找到定位打卡插件，选择要展示的数据表，打卡界面会展示在区块中。
- 首次加载时请求地理位置权限，若用户拒绝则提示授权引导。
- 用户选择区块右上角的配置，点击字段映射：
- 经纬度字段
- 打卡时间字段
- 打卡人员字段
- 打卡照片字段
- 打卡状态字段
- 打卡点字段
- 备注等字段
- 系统根据配置自动加载打卡点数据并在地图上标记
- 实时计算用户当前位置与最近打卡点的距离
- 用户点击打卡按钮，触发校验流程：
- 检查是否在有效范围内
- 根据配置是否开启强制拍照功能,若开启则调用相机拍照
- 提交数据至目标表
- 更新打卡状态
- 区块右上角”配置”按钮可设置：
- 字段映射
- 地图主题
- 标记颜色
- 打卡规则（有效范围、照片必填等开关）
- 用户进入打卡页面
- 系统自动获取当前位置
- 计算与最近打卡点的距离
- 若在有效范围内：
- 强制拍照开关开启:
- 按钮显示”立即打卡”并高亮
- 点击后唤起相机拍照
- 拍照成功则提交数据
- 提示打卡成功
- 强制拍照开关关闭:
- 按钮显示”立即打卡”并高亮
- 提交数据至目标表
- 提示打卡成功
- 若在范围外：
- 按钮显示”手动打卡”
- 根据开关是否点击后唤起相机拍照
- 根据开关是否强制填写手动打卡备注
- 提交数据至目标表
- 提示打卡成功
| 阶段 | 里程碑 | 交付物 |
|---|
| 1 | 核心功能开发 | 用户可正常手动打卡 + 自动打卡 |
| 2 | 增强功能实现 | 完成异常处理、权限引导、定位图标、地图主题色可自定义等功能 |
| 3 | 迭代优化 | 交互优化 + 用户体验 |
