木雷消息服务管理后台

木雷消息服务的 Web 管理后台。基于 Vue 3、Vite、TypeScript 和 Ant Design Vue 构建，提供现代化、直观的消息服务运营管理界面。

中文 | English

功能特性

仪表盘 - 实时消息投递概览和统计监控
应用管理 - 创建和管理 API 应用，配置密钥凭证
通道管理 - 配置短信、邮件、企业微信、钉钉等通道及其绑定关系
服务商管理 - 管理服务商账号（阿里云、腾讯云、掌榕网）、签名和模板
模板管理 - 创建和管理支持变量替换的可复用消息模板
任务监控 - 查看推送任务日志、批量任务状态和投递报告
用户管理 - 管理员账号和访问控制

前置条件

运行管理后台前，请确保：

Node.js 20.10.0+
pnpm 9.12.0+
后端服务已启动（参见主项目 README）

快速开始

1. 安装依赖


cd admin-webui

# 启用 corepack 以使用 pnpm
npm i -g corepack

# 安装依赖
pnpm install

2. 配置 API 地址

管理后台需要连接后端 API。配置 API 基础地址：


# 开发环境：API 代理已在 vite.config.ts 中配置
# 生产环境：设置 VITE_API_URL 环境变量

3. 开发模式


# 启动开发服务器（Ant Design 版本）
pnpm dev:antd

# 或启动安装向导
pnpm dev:install

管理后台将在 http://localhost:5555 运行

4. 生产构建


# 构建主管理后台
pnpm build:antd

# 构建安装向导
pnpm build:install

# 构建所有应用
pnpm build

构建产物将输出到 apps/web-antd/dist/ 和 apps/web-install/dist/

项目结构


admin-webui/
├── apps/
│   ├── web-antd/              # 主管理后台
│   │   └── src/
│   │       ├── api/           # API 客户端模块
│   │       │   └── message-push/  # 消息推送相关 API
│   │       ├── views/         # 页面组件
│   │       │   ├── dashboard/     # 仪表盘
│   │       │   ├── applications/  # 应用管理
│   │       │   ├── channels/      # 通道管理
│   │       │   ├── providers/     # 服务商管理
│   │       │   ├── templates/     # 模板管理
│   │       │   ├── monitoring/    # 任务监控
│   │       │   └── users/         # 用户管理
│   │       └── router/        # 路由定义
│   └── web-install/           # 安装向导
├── packages/                  # 共享包
│   ├── @core/                 # 核心组件
│   ├── effects/               # UI 特效
│   ├── locales/               # 国际化翻译
│   └── stores/                # Pinia 状态管理
└── internal/                  # 构建工具和配置

可用命令

命令	说明
`pnpm dev:antd`	启动管理后台开发服务器
`pnpm dev:install`	启动安装向导开发服务器
`pnpm build:antd`	构建管理后台生产版本
`pnpm build:install`	构建安装向导
`pnpm build`	构建所有应用
`pnpm lint`	运行 ESLint 检查
`pnpm format`	使用 Prettier 格式化代码
`pnpm check:type`	TypeScript 类型检查

技术栈

组件	技术
框架	Vue 3.5+
构建工具	Vite 5.x
UI 组件库	Ant Design Vue 4.x
开发语言	TypeScript 5.x
状态管理	Pinia
样式	TailwindCSS
HTTP 客户端	Axios
Monorepo	Turborepo + pnpm