返回简历
核心业务平台

任务中心

四端一体化任务管理平台 · AI 智能外呼下发 · 覆盖运营、骑手、H5 全场景

2023.06 - 至今 项目负责人 / 前端开发 四端覆盖
Vue 2 React Native (MRN) MobX TypeScript H5 Formily Ant Design 5 TanStack Query

项目概览

项目定位

面向骑手运营场景的四端任务管理平台,统一管理运营侧任务配置与骑手侧任务执行,打通后台、App、H5 全链路。

服务对象

运营人员(烽火台后台 + 星火 App)、骑手(骑手 App)、H5 工作日志页面,覆盖任务全生命周期管理。

技术架构

Vue 2 驱动后台管理端,React Native + MobX 驱动 App 端,H5 工作日志独立部署,四端共享接口协议。

四端架构全景

烽火台后台

PC 管理端
Vue 2

运营人员的任务配置与管理中心,支持任务全生命周期的创建、配置、发布与数据监控。

任务模板创建与配置管理
任务发布、暂停、下线全流程
骑手任务完成数据看板
多维度任务筛选与批量操作

星火 App

运营管理 App
React Native

运营人员移动端管理工具,支持随时随地查看任务执行情况,处理异常任务与骑手反馈。

任务执行进度实时监控
骑手任务完成情况查询
异常任务快速处理
消息推送与任务提醒

骑手 App

骑手执行端
React Native

骑手侧任务中心,展示可参与任务列表,支持任务报名、进度查看与奖励领取。

任务列表展示与筛选
一键报名与任务接受
任务进度与完成状态追踪
奖励明细与历史记录

H5 工作日志

轻量 H5 页面
H5

骑手工作日志 H5 页面,记录每日工作轨迹与任务完成情况,支持分享与存档。

每日工作数据汇总展示
任务完成时间线记录
分享海报生成
历史日志查询

技术亮点

01

AI 站长工作台:智能外呼任务下发

在站长工作台(PC 端)实现 AI 驱动的任务创建与下发能力。运营人员配置任务场景、骑手范围与通话技能模板后,系统通过智能外呼(AI 电话)自动触达骑手,完成出勤检核、骑手招募等运营任务,无需人工逐一联系。

AI 外呼任务自动化站长工作台
02

Schema 驱动的动态扩展表单

基于 Formily 设计 Schema 注册表机制,不同任务场景(出勤检核、骑手招募等)的差异化表单字段由 JSON Schema 配置驱动,主表单无需感知场景细节。新增任务场景只需注册一份 Schema 文件,零改动主流程代码。骑手招募场景中,运力线、签约期数等字段通过 useAsyncDataSource 从接口动态拉取选项,并支持字段间联动(选运力线后自动过滤对应期数)。

FormilySchema 注册表动态表单字段联动
03

双模式骑手圈选 + 文件上传

骑手范围支持「画像选择」与「上传骑手 ID 文件」两种模式灵活切换。画像模式对接骑手画像平台,实时展示匹配人数;文件模式支持 CSV/Excel 拖拽上传,模板与通话技能模板绑定,切换技能模板时自动清空已上传文件,防止数据错配。

骑手画像文件上传双模式切换
04

MobX 状态管理 + TanStack Query 数据层

App 端采用 MobX 管理全局任务状态,实现跨组件响应式更新;PC 端任务创建弹窗使用 TanStack Query 统一管理异步请求(场景列表、骑手画像、任务提交),通过 queryKey 精确控制缓存与重新请求时机,避免重复请求与状态不一致。

MobXTanStack Query缓存策略
05

从零到一主导建设

主导骑手任务中心从 0 到 1 的完整建设,深度参与需求评审、技术方案设计、开发实现及上线全流程,积累了完整的平台化产品前端架构设计经验。

从零到一架构设计全流程

技术栈详情

Vue 2

后台管理端(烽火台)核心框架,配合 Element UI 构建复杂表单与数据表格,支撑运营侧任务配置全流程。

React Native (MRN)

App 端核心框架,实现星火 App 与骑手 App 的任务中心模块,保证 iOS/Android 双端一致体验。

MobX

App 端状态管理方案,通过 observable/action/computed 三层架构管理任务状态,实现高效响应式更新。

TypeScript

全端类型约束,为任务数据模型、接口协议、Schema 定义、组件 Props 提供完整类型覆盖,提升代码可维护性。

Formily

阿里开源表单解决方案,用于 PC 端站长工作台任务创建弹窗的动态扩展表单,支持 Schema 驱动渲染、字段联动与异步数据源。

Ant Design 5

PC 端 UI 组件库,提供 Form、Select、DatePicker、Upload 等核心组件,支撑站长工作台任务创建的完整交互流程。

TanStack Query

PC 端异步数据管理库,统一处理场景列表、骑手画像等接口请求的缓存、加载状态与错误处理,避免重复请求。