# bugFixAgent

**Repository Path**: xqrong/bug-fix-agent

## Basic Information

- **Project Name**: bugFixAgent
- **Description**: AI自动修复bug
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-12
- **Last Updated**: 2025-12-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# bugAutoFix - 现代化后台管理系统

<div align="center">
  <h2>Vue3 + Ant Design Vue + Pinia 后台管理系统</h2>

  ![Vue.js](https://img.shields.io/badge/vue-3.4+-4FC08D?style=flat-square&logo=vue.js&logoColor=white)
  ![TypeScript](https://img.shields.io/badge/TypeScript-5.4+-3178C6?style=flat-square&logo=TypeScript&logoColor=white)
  ![Ant Design Vue](https://img.shields.io/badge/Ant%20Design%20Vue-4.2+-1890FF?style=flat-square&logo=antdesign&logoColor=white)
  ![Pinia](https://img.shields.io/badge/Pinia-2.1+-FFD43B?style=flat-square&logo=pinia&logoColor=black)
  ![Vite](https://img.shields.io/badge/Vite-5.2+-646CFF?style=flat-square&logo=Vite&logoColor=white)

  [![license](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
  ![build](https://img.shields.io/badge/build-passing-brightgreen.svg)
</div>

## 📖 项目简介

bugAutoFix 是一个基于 Vue3、Ant Design Vue、Pinia 和 TypeScript 构建的现代化后台管理系统基础架构。本项目采用最新的前端技术栈，提供了完整的权限管理、路由守卫、状态管理、HTTP 服务封装等企业级应用所需的核心功能。

### ✨ 核心特性

- 🚀 **最新技术栈**: Vue 3.4 + TypeScript 5.4 + Vite 5.2
- 🎨 **UI 框架**: Ant Design Vue 4.2，提供丰富的企业级组件
- 📦 **状态管理**: Pinia 2.1，Vue 3 官方推荐的状态管理库
- 🛣️ **路由管理**: Vue Router 4，支持路由守卫和权限控制
- 🔐 **权限系统**: 基于 RBAC 的完整权限管理方案
- 🌐 **HTTP 封装**: 基于 Axios 的网络请求库，支持拦截器和错误处理
- 💾 **存储管理**: 封装的本地存储服务，支持过期时间管理
- 📱 **响应式设计**: 支持移动端适配和暗色主题切换
- 🔧 **开发工具**: ESLint + Prettier + TypeScript，保证代码质量
- 📊 **可扩展**: 模块化设计，易于扩展和维护

## 🚀 快速开始

### 环境要求

- Node.js >= 18.0.0
- npm >= 8.0.0 或 yarn >= 1.22.0

### 安装依赖

```bash
# 克隆项目
git clone https://gitee.com/xqrong/bug-fix-agent.git
cd bug-fix-agent

# 安装依赖
npm install

# 或使用 yarn
yarn install
```

### 开发环境

```bash
# 启动开发服务器
npm run dev

# 或使用 yarn
yarn dev
```

访问 [http://localhost:5173](http://localhost:5173) 查看项目。

### 构建生产版本

```bash
# 构建生产版本
npm run build

# 预览构建结果
npm run preview
```

## 📁 项目结构

```
vue3-admin-init/
├── public/                 # 静态资源
│   └── logo.svg           # 应用Logo
├── src/                   # 源代码目录
│   ├── assets/           # 项目资源
│   ├── components/       # 公共组件
│   │   ├── auth/        # 认证相关组件
│   │   └── layout/      # 布局组件
│   ├── services/         # 服务层
│   │   ├── api.ts       # API接口定义
│   │   ├── http.ts      # HTTP请求封装
│   │   ├── permission.ts # 权限管理
│   │   └── storage.ts   # 存储服务
│   ├── stores/          # Pinia状态管理
│   │   ├── auth.ts      # 认证状态
│   │   ├── app.ts       # 应用状态
│   │   └── user.ts      # 用户状态
│   ├── types/           # TypeScript类型定义
│   ├── views/           # 页面组件
│   │   ├── Dashboard.vue
│   │   ├── Login.vue
│   │   └── 404.vue
│   ├── router/          # 路由配置
│   ├── App.vue          # 根组件
│   └── main.ts          # 应用入口
├── .env.development      # 开发环境变量
├── .env.production       # 生产环境变量
├── .editorconfig        # 编辑器配置
├── .eslintrc.js         # ESLint配置
├── .gitignore           # Git忽略规则
├── .prettierrc          # Prettier配置
├── package.json         # 项目配置
├── tsconfig.json        # TypeScript配置
├── vite.config.ts       # Vite配置
└── README.md            # 项目说明
```

## 🛠️ 技术栈详情

### 核心框架
- **Vue 3.4+**: 采用 Composition API，提供更好的逻辑复用和类型推导
- **TypeScript 5.4+**: 强类型支持，提供更好的开发体验和代码质量
- **Vite 5.2+**: 极速的开发服务器和构建工具

### UI 组件库
- **Ant Design Vue 4.2+**: 企业级 UI 设计语言和组件库
- **@ant-design/icons-vue**: 丰富的图标组件

### 状态管理
- **Pinia 2.1+**: Vue 3 官方推荐的状态管理库，简洁且类型安全

### 路由管理
- **Vue Router 4.3+**: 支持路由守卫、动态路由、路由元信息

### 网络请求
- **Axios 1.6+**: 基于 Promise 的 HTTP 客户端
- 请求/响应拦截器
- 错误处理和重试机制
- 请求取消功能

### 开发工具
- **ESLint**: 代码质量检查
- **Prettier**: 代码格式化
- **EditorConfig**: 编辑器配置统一

## 📦 可用脚本

```bash
# 开发
npm run dev              # 启动开发服务器

# 构建
npm run build            # 构建生产版本
npm run preview          # 预览构建结果

# 代码质量
npm run lint             # 运行 ESLint 并自动修复
npm run lint:check       # 检查 ESLint 问题
npm run format           # 格式化代码
npm run format:check     # 检查代码格式
npm run type-check       # TypeScript 类型检查

# 工具
npm run clean            # 清理构建目录
npm run clean:all        # 清理所有生成文件和依赖
npm run reinstall        # 重新安装依赖
npm run analyze          # 分析构建包大小
```

## 🔧 配置说明

### 环境变量

项目支持多环境配置，通过 `.env` 文件管理：

- `.env.development`: 开发环境配置
- `.env.production`: 生产环境配置

主要配置项：
```bash
VITE_APP_ENV=development|production    # 环境类型
VITE_APP_TITLE=应用标题                  # 应用标题
VITE_API_BASE_URL=API地址               # API 基础地址
VITE_APP_DEBUG=true|false               # 调试模式
```

### 权限配置

项目内置了完整的 RBAC 权限管理系统：

- **角色管理**: 支持多角色用户
- **权限控制**: 基于路由、组件、操作的多层级权限控制
- **动态权限**: 支持权限动态更新和缓存

### 主题配置

支持明暗主题切换和自定义主题：

- 自动跟随系统主题
- 手动切换主题
- 主题状态持久化

## 🎯 核心功能

### 1. 用户认证
- 用户登录/登出
- Token 管理
- 自动刷新 Token
- 登录状态持久化

### 2. 权限管理
- 基于角色的权限控制 (RBAC)
- 路由权限守卫
- 组件级权限控制
- 操作级权限验证

### 3. 布局系统
- 响应式侧边栏
- 动态面包屑
- 用户信息中心
- 主题切换
- 全屏模式

### 4. 状态管理
- 用户状态管理
- 应用全局状态
- 权限状态管理
- 持久化存储

### 5. 网络请求
- 统一的 API 接口管理
- 请求/响应拦截器
- 错误处理机制
- 加载状态管理

## 🔒 权限系统

项目实现了完整的 RBAC 权限管理系统：

```typescript
// 检查用户权限
import { permissionService } from '@/services/permission'

// 检查单个权限
const hasPermission = permissionService.hasPermission('user:read')

// 检查多个权限
const hasAnyPermission = permissionService.hasAnyPermission(['user:read', 'user:write'])

// 检查角色
const hasRole = permissionService.hasRole('admin')
```

### 权限指令

```vue
<!-- 在模板中使用权限指令 -->
<template>
  <a-button v-permission="['user:create']">创建用户</a-button>
  <a-button v-role="['admin']">管理员功能</a-button>
</template>
```

### 路由守卫

```typescript
// 路由配置中设置权限要求
{
  path: '/users',
  component: Users,
  meta: {
    requiresAuth: true,
    permissions: ['user:read'],
    roles: ['admin', 'manager']
  }
}
```

## 🎨 样式指南

### CSS 规范

- 使用 Ant Design Vue 的设计规范
- 遵循 BEM 命名规范
- 使用 CSS 变量支持主题切换

### 组件规范

- 使用 Composition API
- TypeScript 严格模式
- 单文件组件 (SFC)
- Props 类型定义

## 📱 浏览器支持

- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## 🤝 贡献指南

我们欢迎所有形式的贡献！

### 提交问题

如果您发现了 Bug 或有功能建议，请：

1. 搜索现有 issues，避免重复
2. 使用详细的标题描述问题
3. 提供复现步骤和环境信息
4. 添加相关标签

### 提交代码

1. Fork 本仓库
2. 创建功能分支: `git checkout -b feature/amazing-feature`
3. 提交更改: `git commit -m 'Add some amazing feature'`
4. 推送分支: `git push origin feature/amazing-feature`
5. 创建 Pull Request

### 代码规范

- 遵循 ESLint 和 Prettier 配置
- 编写有意义的提交信息
- 添加必要的测试用例
- 更新相关文档

## 📄 许可证

本项目基于 [MIT](LICENSE) 许可证开源。

## 🙏 致谢

感谢以下开源项目：

- [Vue.js](https://vuejs.org/)
- [Ant Design Vue](https://www.antdv.com/)
- [Pinia](https://pinia.vuejs.org/)
- [Vite](https://vitejs.dev/)
- [TypeScript](https://www.typescriptlang.org/)

## 📞 联系方式

如有问题或建议，请通过以下方式联系我们：

- 提交 [Issue](https://gitee.com/xqrong/bug-fix-agent/issues)
- 发送邮件到: [your-email@example.com]

---

<div align="center">
  Made with ❤️ by bugAutoFix Team
</div>