1、立项背景和目标
喵杂特是一个面向宠物爱好者的内容社交平台小程序端。随着用户和内容规模增长,运营团队需要一套高效的后台管理系统来管理平台内容、用户、社团、活动等业务。本系统目标是为运营人员提供一站式的数据管理和业务操作平台,提升运营效率。
2、软件功能、核心功能模块的介绍
- 内容管理:内容清单、跑团动态/活动、喵课堂、内容审核、话题标签、用户反馈,支持富文本编辑和多媒体管理
- 用户管理:用户列表、封禁管理、达人认证、用户标签体系,支持多维度筛选和批量操作
- 社团管理:社团/机构列表、猫卡管理、公告发布、申请审核、消息通知、快递查询
- 跑团管理:团长申请审核、团长列表、官方公告和个人公告发布
- 医生管理:医生列表、问诊订单、医生认证审核
- 账单管理:账单查询、人工支付、退款处理
- 数据统计:社团数据、猫卡数据等多维度可视化报表
- 系统配置:管理员账号、角色权限、首页/活动广场等运营位配置
3、业务流程、功能路径描述
运营人员通过统一登录系统获取Token后进入后台,根据角色权限显示对应菜单。典型流程:内容审核员进入内容管理→内容审核→查看待审内容→通过/拒绝→系统自动通知用户。社团管理员可管理社团申请、发布公告、查看数据报表。所有操作支持列表筛选、分页、详情查看、编辑提交的完整CRUD流程。
1、整体架构和设计
采用Vue 2 + Vue Router + Vuex架构,UI层使用Element UI为主、View Design为辅。HTTP层基于Axios封装,实现多环境自动切换(开发/测试/生产)和统一Token认证。富文本编辑使用TinyMCE 6.x,数据可视化使用ECharts + vue-echarts。权限控制通过路由守卫+动态菜单实现,状态管理按业务拆分为user、society等模块。
2、负责模块
独立完成除基础架构外的全部前端开发:
- 开发15+业务模块,累计50+页面组件
- 封装HTTP请求层,实现4个服务端点管理、Token自动注入、401统一处理
- 实现动态权限菜单系统,支持3种角色权限控制
- 完成数据统计模块,集成5种ECharts图表
- 参与10+版本迭代,项目稳定运行至今
3、难点和解决方案
- 双UI库冲突:Element UI和View Design样式冲突。解决:制定规范以Element UI为主,View Design仅用于Message等特定组件,CSS作用域隔离
- 多环境配置:不同环境API地址不同。解决:基于location.host自动识别环境,工厂模式管理API实例,零配置切换
- Token认证:统一登录通过URL传Token。解决:应用初始化前截获URL fragment中的token存入sessionStorage,Axios拦截器自动附加请求头
- 表单性能:复杂表单渲染卡顿。解决:分步表单、组件懒加载、v-if控制渲染时机