# smart-finance-admin

**Repository Path**: it4/smart-finance-admin

## Basic Information

- **Project Name**: smart-finance-admin
- **Description**: 智能记账管家 Web 运营管理后台专为平台运维管理人员打造，基于 Vue 3 + Element Plus + ECharts 构建。经过底层的系统重构与升级，本项目构建工具链已全面平滑升级至 Vite 8.x，在拥有毫秒级热更新开发体验的同时，提供了极其稳健的现代化前端架构体系。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-27
- **Last Updated**: 2026-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# 智能记账管家 — Web 运营管理端 (smart-finance-admin)

智能记账管家 Web 运营管理后台专为平台运维管理人员打造，基于 **Vue 3 + Element Plus + ECharts** 构建。经过底层的系统重构与升级，本项目构建工具链已全面平滑升级至 **Vite 8.x**，在拥有毫秒级热更新开发体验的同时，提供了极其稳健的现代化前端架构体系。支持系统多维度数据可视化图表展示、用户账号禁用/启用控制、记账明细全量审计、每日动态 Banner 配置以及批量点数充值卡密的智能流式生成。

---

## 💻 1. 管理端控制台界面展示

![web管理端首页图](./web管理端首页图.png)

---

## 🛠️ 2. 技术栈介绍

*   **核心前端框架**：Vue 3.x (基于组件化架构，使用组合式 API 模式开发)。
*   **开发与构建构建工具**：Vite 8.0.x (毫秒级打包与响应，现代浏览器原生 ESM 规范)。
*   **路由管理器**：Vue Router 4.x (包含全局路由守卫导航拦截、身份鉴权拦截保护)。
*   **UI 组件库**：Element Plus (提供极简奢华的按钮、弹窗、高级表格、分页器、侧边栏菜单等全套响应式布局组件)。
*   **数据可视化**：ECharts 5.x (用于统计分析：生成包括月度收支双向环比柱状曲线、账单分类占比饼状图、平台活跃度趋势图等可视化图表看板)。
*   **HTTP 客户端**：Axios (封装防抖控制，注入全局统一令牌身份头拦截器，提供简洁的请求响应处理)。

---

## 📁 3. 项目目录结构

```text
smart-finance-admin/
├── src/
│   ├── api/                    # 运营端统一异步 API (Login, User, Record, Banner, Redemption, Dashboard)
│   ├── assets/                 # 全局 CSS 变量、图标、静态资产文件
│   ├── components/             # 公共可复用组件 (ECharts 专用报表面板组件)
│   ├── router/                 # 运营后台动态路由配置、登录状态鉴定守卫
│   ├── views/                  # 功能视图模块
│   │   ├── login/              # 玻璃毛玻璃登录入口（配备动态线条防刷人机验证码）
│   │   ├── dashboard/          # 【控制台】系统数据漏斗统计卡片、ECharts 收支/品类多角度统计图表
│   │   ├── user/               # 【用户管理】小程序注册用户列表，支持账号一键禁用/启用封锁
│   │   ├── record/             # 【记账审计】审计全平台用户消费流水，支持多维度组合搜索与全量 Excel 导出
│   │   ├── banner/             # 【广告图配置】动态管理小程序端 Swiper 广告轮播图，支持增删改排序
│   │   └── redemption/         # 【卡密管理】批量一键流式生成 16 位大额积分充值卡密，提供快捷复制表格
│   ├── App.vue                 # 前端应用入口级容器
│   └── main.js                 # 全局实例化、挂载 Element Plus、ECharts、Router 插件的中心类
├── vite.config.js              # Vite 8 构建优化配置文件
├── package.json                # 项目依赖管理文件
└── README.md                   # 本说明文件
```

---

## 🚀 4. 使用与部署教程

### 4.1 环境准备
确认您的本地开发机已安装了 **Node.js 18.x** 或更高版本，且具备常用的包管理器（`npm` 或 `yarn` / `pnpm`）。

### 4.2 安装项目依赖
在管理后台根目录 `smart-finance-admin` 下打开您的终端：
```bash
npm install
```

### 4.3 开启开发热更新环境 (运行)
得益于升级后的 Vite 8 引擎，开发服务将实现光速冷启动：
```bash
npm run dev
```
开发服务器启动后默认会监听在 `http://localhost:5173`。在浏览器中打开即可开始访问。

### 4.4 登录与使用
1.  **登录控制**：
    *   **账号**：`admin`
    *   **密码**：`admin123`
    *   **验证码**：直接输入右侧滑稽波浪线条中显示的 4 位数字或字母（点击可以快速刷新验证码）。
2.  **首页看板**：成功登入后，控制台会通过后台的 `/admin/stats` 接口进行聚合计算，并通过 ECharts 渲染出精美直观的平台消费与活跃趋势折线图。
3.  **核心卡密生产**：进入卡密兑换管理菜单，点击“生成卡密”，在弹出的毛玻璃对话框中输入生成张数与对应的单张积分数值，即可极速生成一串不重复的 16 位随机高级卡号，供小程序端用户签到积分不够时用于激活换取点数！