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/ 目录，不依赖外网，离线可用。
快速开始
bash
# 克隆项目
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 的后台系统模板，可以试试这个项目。有问题欢迎在评论区交流。