upush-admin

upush-admin 是 upush 推送服务的后台管理面板，提供完整的推送运营、用户管理、设备管理、版本发布等能力。

当前管理面板已是一个功能较完整的运维后台，适合配合 upushServer 和 upush-app 进行全链路管理和运营操作。

技术栈

• Vue 3 — Composition API + <script setup>
• Vite — 构建工具
• Vue Router — 路由，history 模式，路由守卫鉴权
• Pinia — 状态管理
• Element Plus — UI 组件库
• ECharts — 图表渲染
• @wangeditor/editor — 富文本编辑器（协议编辑页）
• Axios — HTTP 请求，含 401 自动跳登录、请求/响应拦截器

项目结构

src/
  api/
    index.js           # 统一接口封装 + axios 实例 + 鉴权拦截器
  components/
    AdminPageHero.vue       # 页面顶部 Hero 区
    AdminPageHeader.vue     # 页头组件（标题/副标题/按钮）
    AdminInsightStrip.vue   # 数据指标条
    AdminSectionHeader.vue  # 区块标题
    AdminPageLayout.vue     # 页面布局壳
    AdminSidebar.vue        # 侧边导航栏
    PushCreateForm.vue      # 新建推送表单（页内 drawer）
  router/
    index.js           # 路由配置 + beforeEach 鉴权守卫
  styles/
    admin-ui.css       # 统一 UI 风格（Hero/Insight/Section/Table/Card）
    index.css          # 全局通用样式
  views/
    DashboardView.vue          # Dashboard — 推送数据概览
    PushRecordsView.vue        # 推送批次列表
    PushBatchDetailView.vue    # 推送批次详情（设备级结果）
    LogsView.vue               # 日志中心 — 检索与排障
    UsersView.vue              # 用户管理 — 列表/详情/状态操作
    DevicesView.vue            # 设备管理 — 列表/详情/删除
    FeedbackView.vue           # 反馈中心 — 查看与回复
    AgreementsView.vue         # 协议管理 — 协议列表
    AgreementEditorView.vue    # 协议编辑页 — 富文本独立页面
    VersionsView.vue           # 版本管理 — 客户端版本列表
    VersionEditorView.vue      # 版本编辑页 — 含更新包上传
    SettingsView.vue           # 系统设置
    LoginView.vue              # 登录页
    PlaceholderView.vue        # 占位页面（备用）
  App.vue
  main.js

docs/
  plans/               # 设计稿与实施计划
  2026-04-06_log.md    # 开发日志

dist/                  # 构建产物，部署到 upushServer public/admin

功能模块

📊 Dashboard

• 今日推送 KPI（发送、成功、失败、待处理）
• 趋势图（7d / 30d / 24h 推送量折线）
• 最近推送结果
• 最近异常日志摘要
• 快捷入口（新建推送、推送记录、日志中心）

📨 推送记录

• 批次列表，按创建时间倒序
• 批次详情页，查看每台设备的结果明细
• 新建推送（页内 drawer 表单）

📋 日志中心

• 日志检索，支持 level / keyword / 时间筛选
• 按 date, level, message 等字段过滤

👥 用户管理

• 用户列表，支持模糊搜索
• 用户详情（基本信息、设备数、注册来源）
• 用户状态管理（启用/禁用）

📱 设备管理

• 设备列表，支持按 userId 筛选
• 设备详情
• 设备删除（带二次确认）

💬 反馈中心

• 用户反馈列表
• 反馈详情查看与回复

📝 协议管理

• 协议列表（已发布/未发布）
• 新建/编辑协议（独立页面，wangeditor 富文本编辑器）
• 未保存离开提醒、页头状态指示
• 发布协议

📦 版本管理

• 版本列表（按 versionCode 降序）
• 新建/编辑版本（独立页面）
• 更新包上传（支持 apk/ipa/zip/exe/msi/dmg/AppImage/wgt）
• 上传进度条
• 上传后自动从文件名解析预填版本信息
• 保存并发布、二次确认

⚙️ 系统设置

• 推送配置、日志配置、界面偏好

🔐 鉴权

• 登录页
• 路由守卫（beforeEach 自动检测 token）
• 请求 401 自动跳转登录 + 重定向回原页
• Token 持久化与清除

页面设计风格

当前后台采用统一的 UI 风格体系：

• Hero 区 — 页面标题 + 简介 + 可选操作按钮
• Insight Strip — 核心指标行，支持数字大号展示
• Section Header — 区块标题 + 可选子操作
• 表格壳 / 通用卡片 — 统一圆角与间距

公共组件均位于 src/components/，全局样式在 src/styles/admin-ui.css。

本地开发

1. 安装依赖

npm install

2. 启动开发环境

npm run dev

默认由 Vite 启动。开发端口已配置为 127.0.0.1:8080。

3. 构建

npm run build

4. 部署到 upushServer

构建完成后，在 upushServer 目录执行：

node scripts/deploy-admin.js

该脚本会将 dist/ 复制到 public/admin/，使后端可直接托管管理面板的静态文件。

后端依赖

所有 API 请求默认指向 http://127.0.0.1:3000，通过 Axios 拦截器注入鉴权 Token。

接口前缀统一为 /api/admin/*，具体包括：

模块	接口
鉴权	/api/admin/auth/login, /me, /logout
Dashboard	/api/admin/dashboard
推送批次	/api/admin/push-batches
日志	/api/logs
用户	/api/admin/users/*
设备	/api/admin/devices/*
反馈	/api/admin/feedback/*
协议	/api/admin/agreements/*
版本	/api/admin/versions/*
上传	/api/admin/upload/package
设置	/api/admin/settings

请先确保 upushServer 已启动，并可通过 http://127.0.0.1:3000/health 验证。

相关项目

• 前端 App：upush-app（UniApp，E:\Desktop\upush\upush-app）
• 后端服务：upushServer（Express + MongoDB，E:\Desktop\upush\upushServer）
• GitHub：git@github.com:fenglbl/upush-admin.git

当前状态

当前管理面板功能已覆盖推送运营和运维的核心场景。后续可继续优化的方向包括：

• 权限细分（多角色管理）
• WebSocket 实时数据推送（活跃设备、实时推送状态）
• 更细粒度的日志查询（时间范围选择、导出）
• 编辑页信息栏统一补充（如版本编辑页协议编辑风格的信息栏）
• 更多模块的联调验证