# webSystemFrame

**Repository Path**: hyperzhang/webSystemFrame

## Basic Information

- **Project Name**: webSystemFrame
- **Description**: 通用型后台管理系统，vite+TS+pinia
- **Primary Language**: JavaScript
- **License**: MulanPubL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-11
- **Last Updated**: 2025-10-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 后台管理系统框架

基于 Vue 3 + TypeScript + Element Plus 的现代化后台管理系统框架。

## 🚀 技术栈

- **前端框架**: Vue 3 + TypeScript
- **UI组件库**: Element Plus
- **状态管理**: Pinia
- **路由管理**: Vue Router 4
- **构建工具**: Vite
- **样式预处理器**: Sass
- **CSS框架**: Tailwind CSS

## 📦 项目结构

```
src/
├── api/           # API接口管理
├── assets/        # 静态资源
├── components/    # 公共组件
├── config/        # 应用配置
├── enum/          # 枚举定义
├── hooks/         # 自定义Hooks
├── layouts/       # 布局组件
├── plugins/       # 插件配置
├── router/        # 路由配置
├── store/         # 状态管理
├── types/         # 类型定义
├── utils/         # 工具函数
└── views/         # 页面组件
```

## ✨ 核心特性

### 🔐 权限管理
- 动态路由生成
- 角色权限控制
- 按钮级权限验证
- 路由守卫

### 🛡️ 安全防护
- XSS攻击防护
- CSRF Token验证
- 请求防抖/节流
- 输入验证

### 🎨 主题系统
- 亮色/暗色主题切换
- 自定义主题色
- 响应式布局

### 📊 数据管理
- 统一数据字典
- 表格组件封装
- 文件上传组件
- 分页管理

### 🔧 开发工具
- 全局错误处理
- 请求拦截器
- 代码规范检查
- 热重载开发

## 🚀 快速开始

### 环境要求

- Node.js >= 16.0
- npm >= 7.0 或 yarn >= 1.22

### 安装依赖

```bash
npm install
# 或
yarn install
```

### 开发环境

```bash
npm run dev
# 或
yarn dev
```

### 生产构建

```bash
npm run build
# 或
yarn build
```

## 📋 功能模块

### 系统管理
- 用户管理
- 角色管理
- 菜单管理
- 组织管理

### 系统监控
- 操作日志
- 系统信息
- 性能监控

### 数据字典
- 字典类型管理
- 字典数据管理

## 🔧 配置说明

### 环境配置

项目支持多环境配置，配置文件位于 `config/` 目录：

- `.env.dev` - 开发环境
- `.env.test` - 测试环境  
- `.env.pro` - 生产环境

### API配置

在 `src/utils/request.ts` 中配置请求拦截器和响应处理器。

### 路由配置

在 `src/router/index.ts` 中配置路由和权限控制。

## 🎯 开发规范

### 代码规范

- 使用 TypeScript 严格模式
- 遵循 ESLint 代码规范
- 使用 Prettier 代码格式化

### 组件开发

- 使用 Composition API
- 遵循单一职责原则
- 提供完整的 TypeScript 类型定义

### 状态管理

- 使用 Pinia 进行状态管理
- 模块化状态设计
- 类型安全的状态操作

## 🔄 更新日志

### v1.0.0 (2024-01-01)

#### 新增功能
- ✅ 基础框架搭建
- ✅ 权限管理系统
- ✅ 主题切换功能
- ✅ 响应式布局

#### 优化改进
- 🔧 代码结构优化
- 🔧 性能优化
- 🔧 安全性增强

## 🤝 贡献指南

1. Fork 本项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 🙏 致谢

感谢以下开源项目的支持：

- [Vue.js](https://vuejs.org/)
- [Element Plus](https://element-plus.org/)
- [Vite](https://vitejs.dev/)
- [TypeScript](https://www.typescriptlang.org/)

---

**注意**: 本项目仍在持续开发中，如有问题或建议，欢迎提交 Issue 或 Pull Request。