一、立项背景与目标
当前短信广告投放存在“同内容群发、转化低、运营人工干预多”的痛点。企业已经积累了大量用户行为、属性、偏好等基础数据,并经整理沉淀为可复用的“标签”资产。本项目旨在:
将标签结构化、可视化,降低运营理解与选取成本。
通过标签组合构建细粒度“用户群”,支撑差异化短信营销。
以项目为载体管理投放生命周期(创建、进度、成员协作、结果归档)。
提供营销效果分析(触达量、意向量、意向率等),形成数据闭环。
面向运营人员,提升投放精准度、响应效率与过程可追溯性,减少盲目触达与资源浪费。
二、软件功能与核心模块
首页仪表盘
我的项目:展示项目总览、进度百分比、状态、成员头像(首位为负责人)
系统通知:运营平台公告、功能变更提醒
我的待办:工单列表,支持分页与状态色标
快捷操作:直达“标签广场 / 项目管理 / 用户群管理 / 审批 / 营销管理 / 统计分析”
标签模块
平台数据统计:标签分类数、标签定义数、标签总量、覆盖人群数(自动格式化万/亿单位)
标签上新 / 热门标签:快速浏览最新或高使用频次标签
标签地图:按“消费行为 / 出行偏好 / 生活阶段 / 兴趣偏好 / 内容行为 / 设备属性 / 地域特征 / 会员特征 / 渠道来源 / 场景人群”等维度分层展示,支持点击跳转详情
用户群管理
用户群列表:名称、编码、人数、最后更新时间、计算状态、推送状态、更新方式、创建方式
操作能力:详情、下载申请 / 取消申请 / 下载、扩展(人群再加工)、画像生成 / 查看 / 重新生成
项目管理
统计卡:项目总数 + 各状态数量分布
列表:基本信息(图标、名称)、状态标签、进度条、最后更新时间拆分显示、成员头像、操作
支持按状态 Tab 与名称关键词筛选
营销分析
过滤条件:项目、推送配置、日期范围
效果概览:堆叠柱图展示“有意向 vs 其他”数量,动态高度自适配
数据明细:计划名称、关联项目、通道类型、推送人群、推送时间、推送人数、意向人数、意向率、城市
支撑投放效果复盘与优先级策略优化
工单与审批:支撑运营流程化、责任明晰化
三、业务流程 / 功能路径
登录进入首页:获取个人信息、项目概览、通知与待办 → 识别需处理事项
进入“标签”模块:理解可用数据资产与结构 → 发现可组合的特征因子
在“用户群管理”中:基于标签规则或导入构建目标人群 → 运行与维护(更新策略、暂停、画像生成、下载)
在“项目管理”中:创建营销项目 → 选择匹配用户群 → 分配成员 → 跟踪进度与协作
进入“营销分析”:查看阶段或汇总效果 → 分析意向率差异 → 反向指导标签与人群策略迭代
必要时通过工单 / 审批通道保障合规与流程闭环。
整体形成“标签沉淀 → 人群构建 → 项目投放 → 效果分析 → 策略回流”闭环,持续提升精准触达与营销 ROI。
架构与设计思路
系统采用前后端分离:前端 Vue2 + Vue Router + Vuex + ElementUI 构建业务界面与交互,ECharts 用于营销分析可视化;后端为 Java Web。静态资源按模块归档,公共组件如复用状态与样式。路由层以“首页 → 标签 → 用户群管理 → 项目管理 → 营销分析”串联业务闭环;菜单与顶部快捷入口保持路径一致性避免相对路由叠加问题。数据流设计遵循“标签沉淀 → 规则/导入组合成用户群 → 绑定项目执行投放 → 效果埋点回流 → 再优化标签/人群”的闭环。状态分层:局部交互(表格分页 / Tab / 搜索)使用组件内部 data;跨页面(用户信息、权限、字典缓存)放入 Vuex;可视化部分通过按需计算 chartData 并延迟 nextTick 初始化 ECharts,动态高度自适配数据行数。样式方面采用 scoped + 语义化结构。
个人负责内容与结果
承担全部前端架构、组件规范、路由体系、权限指令接入(v-hasPermi)、可视化实现、表格/弹窗交互、状态管理策略与性能微调(减少重复渲染与大列表重排)。独立完成“标签总览、用户群(创建/导入/扩展/下载/画像)、项目管理(状态统计 + 进度 + 成员头像叠加)、营销分析(堆叠横向柱图 + 过滤联动)、工单待办、系统公告、快捷导航”全链路。
项目成功对接广州移动场景投放,稳定迭代近两年,功能成熟,月均创收50W+ ,显著提升运营投放精准度与配置效率。
难点与解决方案
(1) 多层级嵌套选择 + 组合逻辑表达:用户群创建时多个一级/二级 Select 需要表达交集/并集/序列逻辑。做法:为每个选择单元建立结构化对象 {level,parentKey,logicKey,valueList},按层级聚合入数组;提交前 JSON.stringify,后端按 key 解析,避免平铺字段命名爆炸与赋值错位。
(2) 复杂回显:编辑用户群需把后端返回的序列化规则还原成多个 Select 组件初始值。方案:解析 JSON → 递归分组(按 level / logicKey 建立索引 Map)→ 重建同构数组 → 按组件 ref / 动态 v-for 顺序回填,确保顺序与依赖关系不乱。
(3) 深层与跨组件数据共享频繁:头像叠加、字典标签、状态彩色标、权限控制多处复用。方案:抽取 DictTag / 通用格式化方法(numberFormat / sliceArr / splitStrBySpace)+ Vuex 缓存用户、字典、权限集合;减少 props 链条与事件“楼梯”式冒泡。
总结:通过结构化规则表达 + 规范化状态分层 + 组件抽象 + 路由命名治理 + 可视化自适配策略,项目实现高扩展、易维护与业务闭环支撑。