19 个页面、暗黑模式、国际化、全 Mock 数据，开箱即用。

前言

大家好，我是张大鹏。最近我在用 Claude Code 二次开发一个基于 Vue3 + Arco Design 的后台管理系统 VueAdminArco，已经做了不少改造，包括品牌定制、登录账号配置、图片本地化等。

今天这篇文章，我把项目的功能做一个完整的梳理，方便大家了解这个系统能做什么，也给后续想基于它做二次开发的同学一个参考。

项目概览

VueAdminArco 是一个基于 Vue3 + Vite + TypeScript + Arco Design 的后台管理系统模板。它的前身是字节跳动开源的 arco-design-pro-vue，在此基础上做了大量改造。

技术栈：

• Vue 3 — 组合式 API
• Vite — 构建工具
• TypeScript — 全量类型支持
• Pinia — 状态管理
• Arco Design — 字节跳动出品的 UI 组件库
• vue-i18n — 国际化
• ECharts — 数据可视化
• Mock.js — API 模拟

页面功能一览

1. 登录页

支持两种登录方式：

• 账号密码登录 — 默认账号 ruyi / ruyi123456
• 扫码登录 — 二维码展示（演示用）

登录页有记住密码功能，勾选后下次打开会自动填充。

2. 仪表盘 — 工作台

工作台是登录后的默认首页，包含：

• 数据面板 — 4 个核心指标卡片（在线内容量、投放量、日新增、较昨日增长率）
• 轮播图 — 5 张轮播 Banner
• 我的项目 — 6 个项目卡片，展示项目名称、描述、人数
• 最新动态 — 最近的操作记录列表

3. 仪表盘 — 监控页

实时监控页面，包含：

• 视频直播预览 — 直播画面展示
• 数据统计列表 — 直播数据列表

4. 表单页

两种表单布局模式：

• 分组表单 — 多个区域的长表单，适合复杂数据录入
• 分步表单 — 步骤式提交，适合需要分阶段填写的场景

5. 列表页

两种列表展示方式：

• 卡片列表 — 网格布局，适合图片、产品等展示
• 搜索表格 — 带筛选条件、分页的表格，适合数据管理

6. 详情页

基础详情页，展示完整的数据信息。

7. 结果页

操作结果反馈：

• 成功页 — 操作完成的正向反馈
• 失败页 — 操作失败的提示

8. 异常页

系统异常页面：

• 403 — 无权限
• 404 — 页面不存在
• 500 — 服务器错误

9. 用户中心

• 个人信息 — 展示用户资料
• 用户设置 — 账号相关配置

10. 数据可视化

两个可视化页面：

• 数据分析 — 基于 ECharts 的图表看板
• 多维分析 — 多维度数据交叉分析

核心特性

暗黑模式

右上角一键切换亮色/暗色主题，全局适配，包括侧边栏、表格、表单等所有组件。

国际化

支持中英文切换，基于 vue-i18n 实现。翻译文件按模块组织，扩展方便。

响应式布局

基于 Arco Design 的栅格系统，自动适配 PC、平板、手机等不同屏幕尺寸。

全 Mock 数据

所有 API 都通过 Mock.js 模拟，不需要任何后端服务，克隆代码后直接 pnpm install && pnpm dev 就能跑起来。

本地化

所有图片、图标已从外部 CDN 下载到本地 public/images/ 目录，不依赖外网，离线可用。

快速开始

# 克隆项目
git clone git@github.com:DaPengRuYi/VueAdminArco.git

# 安装依赖
pnpm install

# 启动开发服务器（端口 21889）
pnpm dev

# 构建生产版本
pnpm build

默认登录账号：ruyi / ruyi123456

适合谁用？

• 想快速搭建后台管理系统的前端开发者
• 需要一个开箱即用的 Vue3 + Arco Design 参考项目
• 想学习 Vue3 + TypeScript + Pinia 最佳实践的同学

总结

VueAdminArco 包含 19 个页面，覆盖了后台管理系统最常见的场景：仪表盘、表单、列表、详情、用户中心、数据可视化。加上暗黑模式、国际化、全 Mock 数据等特性，是一个比较完整的后台管理模板。

如果你正在找一个 Vue3 + Arco Design 的后台系统模板，可以试试这个项目。有问题欢迎在评论区交流。

参考链接

• 原始仓库：zxwk1998/vue-admin-arco
• 二次开发：DaPengRuYi/VueAdminArco