# fastdev_front

**Repository Path**: chen-superplus/fastdev_front

## Basic Information

- **Project Name**: fastdev_front
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-09
- **Last Updated**: 2026-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FastDev 前端项目

FastDev 是一个基于 Vue 3 + TypeScript + Element Plus 的后台管理系统前端项目。

##后端项目地址,https://gitee.com/chen-superplus/fastdev_serve

## 技术栈

- **框架**: Vue 3.4+
- **语言**: TypeScript 5.3+
- **构建工具**: Vite 5.0+
- **UI 组件库**: Element Plus 2.5+
- **状态管理**: Pinia 2.1+
- **路由**: Vue Router 4.2+
- **HTTP 客户端**: Axios 1.6+
- **图标**: @element-plus/icons-vue
- **CSS 预处理器**: Sass

## 项目结构

```
fastdev_front/
├── src/
│   ├── api/              # API 接口定义
│   │   ├── auth.ts       # 认证相关接口
│   │   ├── user.ts       # 用户管理接口
│   │   ├── role.ts       # 角色管理接口
│   │   ├── menu.ts       # 菜单管理接口
│   │   ├── dept.ts       # 部门管理接口
│   │   ├── dict.ts       # 字典管理接口
│   │   ├── config.ts     # 系统配置接口
│   │   ├── notice.ts     # 通知公告接口
│   │   ├── gen.ts        # 代码生成接口
│   │   ├── server.ts     # 服务器监控接口
│   │   ├── cache.ts      # 缓存管理接口
│   │   ├── online.ts     # 在线用户接口
│   │   ├── logininfor.ts # 登录日志接口
│   │   ├── operlog.ts    # 操作日志接口
│   │   └── profile.ts    # 个人中心接口
│   ├── layouts/          # 布局组件
│   │   ├── components/   # 布局子组件
│   │   │   ├── MenuItem.vue      # 菜单项组件
│   │   │   ├── NotificationBell.vue  # 通知铃铛组件
│   │   │   └── SidebarMenu.vue   # 侧边栏菜单组件
│   │   └── index.vue     # 主布局页面
│   ├── router/           # 路由配置
│   │   ├── index.ts      # 路由主配置
│   │   └── utils.ts      # 路由工具函数
│   ├── stores/           # Pinia 状态管理
│   │   └── user.ts       # 用户状态管理
│   ├── types/            # TypeScript 类型定义
│   │   └── api.ts        # API 相关类型
│   ├── utils/            # 工具函数
│   │   └── request.ts    # Axios 请求封装
│   ├── views/            # 页面视图
│   │   ├── dashboard/    # 仪表盘
│   │   ├── login/        # 登录页面
│   │   ├── system/       # 系统管理
│   │   │   ├── user/     # 用户管理
│   │   │   ├── role/     # 角色管理
│   │   │   ├── menu/     # 菜单管理
│   │   │   ├── dept/     # 部门管理
│   │   │   ├── dict/     # 字典管理
│   │   │   ├── config/   # 参数配置
│   │   │   └── notice/   # 通知公告
│   │   ├── monitor/      # 系统监控
│   │   │   ├── online/   # 在线用户
│   │   │   ├── logininfor/  # 登录日志
│   │   │   ├── operlog/  # 操作日志
│   │   │   ├── cache/    # 缓存管理
│   │   │   └── server/   # 服务器监控
│   │   ├── tool/         # 系统工具
│   │   │   └── gen/      # 代码生成
│   │   ├── profile/      # 个人中心
│   │   └── error/        # 错误页面
│   ├── App.vue           # 根组件
│   └── main.ts           # 入口文件
├── index.html            # HTML 模板
├── package.json          # 项目依赖
├── tsconfig.json         # TypeScript 配置
├── tsconfig.node.json    # Node TypeScript 配置
└── vite.config.ts        # Vite 配置
```

## 功能模块

### 系统管理
- **用户管理**: 系统用户的增删改查、状态管理
- **角色管理**: 角色权限分配、数据权限设置
- **菜单管理**: 系统菜单配置、权限标识管理
- **部门管理**: 组织机构管理、层级关系维护
- **字典管理**: 数据字典维护、字典类型管理
- **参数配置**: 系统运行参数配置
- **通知公告**: 系统公告发布与管理

### 系统监控
- **在线用户**: 查看当前登录用户、强制下线
- **登录日志**: 用户登录记录查询
- **操作日志**: 系统操作记录审计
- **缓存管理**: Redis 缓存监控与清理
- **服务器监控**: 服务器性能监控（CPU、内存、磁盘、JVM）

### 系统工具
- **代码生成**: 根据数据库表自动生成前后端代码

## 开发环境要求

- Node.js 18+
- npm 9+ 或 pnpm 8+

## 安装与运行

### 1. 安装依赖

```bash
npm install
```

### 2. 开发模式运行

```bash
npm run dev
```

### 3. 构建生产环境

```bash
npm run build
```

### 4. 预览生产构建

```bash
npm run preview
```

### 5. 代码检查与格式化

```bash
# ESLint 检查并修复
npm run lint

# Prettier 格式化
npm run format
```

## 环境配置

### 开发环境代理配置

在 `vite.config.ts` 中配置代理：

```typescript
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}
```

## 代码规范

- 使用 ESLint 进行代码检查
- 使用 Prettier 进行代码格式化
- 遵循 Vue 3 组合式 API 风格
- 使用 TypeScript 严格类型检查

## 浏览器支持

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

## 后端接口

后端服务默认运行在 `http://localhost:8080`，详细配置请参考后端项目的 [application.properties](../fastdev_serve/src/main/resources/application.properties)。