# StdProject Frontend

基于 Vue 3 + Vite + Element Plus 的现代化前端管理系统

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Vite** - 下一代前端构建工具
- **Element Plus** - 基于 Vue 3 的组件库
- **Vue Router** - Vue.js 官方路由管理器
- **Pinia** - Vue 的状态管理库
- **Axios** - HTTP 客户端
- **SCSS** - CSS 预处理器
- **ESLint** - 代码质量检查工具

## 项目结构

```
frontend/
├── src/
│   ├── api/                 # API 接口
│   │   ├── auth.js         # 认证相关接口
│   │   ├── user.js         # 用户管理接口
│   │   ├── role.js         # 角色管理接口
│   │   ├── organization.js # 组织管理接口
│   │   └── dictionary.js   # 字典管理接口
│   ├── components/         # 公共组件
│   ├── router/             # 路由配置
│   │   └── index.js        # 路由定义
│   ├── store/              # 状态管理
│   │   ├── app.js          # 应用状态
│   │   └── user.js         # 用户状态
│   ├── styles/             # 样式文件
│   │   └── index.scss      # 全局样式
│   ├── utils/              # 工具函数
│   │   ├── index.js        # 通用工具函数
│   │   └── request.js      # HTTP 请求封装
│   ├── views/              # 页面组件
│   │   ├── Login.vue       # 登录页
│   │   ├── Dashboard.vue   # 仪表盘
│   │   ├── Users.vue       # 用户管理
│   │   ├── Roles.vue       # 角色管理
│   │   ├── Organizations.vue # 组织管理
│   │   └── Dictionaries.vue # 字典管理
│   ├── App.vue             # 根组件
│   └── main.js             # 应用入口
├── package.json            # 项目依赖
├── vite.config.js          # Vite 配置
└── README.md               # 项目说明
```

## 功能特性

### 🔐 认证授权
- JWT Token 认证
- 登录/登出
- 路由守卫
- 权限控制

### 👥 用户管理
- 用户列表查询
- 用户增删改查
- 用户状态管理
- 密码重置
- 批量操作

### 🛡️ 角色管理
- 角色列表查询
- 角色增删改查
- 权限分配
- 批量操作

### 🏢 组织管理
- 组织树形结构
- 组织增删改查
- 层级管理
- 拖拽排序

### 📚 字典管理
- 字典分类管理
- 字典数据管理
- 动态配置
- 缓存机制

### 📊 仪表盘
- 数据统计
- 图表展示
- 快捷操作
- 系统概览

## 开发指南

### 环境要求

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

### 安装依赖

```bash
# 使用 npm
npm install

# 或使用 yarn
yarn install
```

### 开发模式

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

# 或
yarn dev
```

访问 http://localhost:3000

### 构建生产版本

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

# 或
yarn build
```

### 代码检查

```bash
# 运行 ESLint
npm run lint

# 或
yarn lint
```

### 预览生产版本

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

# 或
yarn preview
```

## 配置说明

### 环境变量

创建 `.env.local` 文件配置本地环境变量：

```env
# API 基础地址
VITE_API_BASE_URL=http://localhost:8080

# 应用标题
VITE_APP_TITLE=StdProject 管理系统
```

### 代理配置

开发环境下，Vite 会自动将 `/api` 开头的请求代理到后端服务器：

```javascript
// vite.config.js
server: {
  port: 3000,
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true
    }
  }
}
```

## API 接口

### 认证接口

- `POST /api/auth/login` - 用户登录
- `POST /api/auth/logout` - 用户登出
- `GET /api/auth/captcha` - 获取验证码
- `POST /api/auth/refresh` - 刷新 Token

### 用户接口

- `GET /api/users` - 获取用户列表
- `POST /api/users` - 创建用户
- `PUT /api/users/:id` - 更新用户
- `DELETE /api/users/:id` - 删除用户

### 角色接口

- `GET /api/roles` - 获取角色列表
- `POST /api/roles` - 创建角色
- `PUT /api/roles/:id` - 更新角色
- `DELETE /api/roles/:id` - 删除角色

### 组织接口

- `GET /api/organizations/tree` - 获取组织树
- `POST /api/organizations` - 创建组织
- `PUT /api/organizations/:id` - 更新组织
- `DELETE /api/organizations/:id` - 删除组织

### 字典接口

- `GET /api/dictionaries` - 获取字典列表
- `POST /api/dictionaries` - 创建字典
- `PUT /api/dictionaries/:id` - 更新字典
- `DELETE /api/dictionaries/:id` - 删除字典

## 开发规范

### 代码风格

- 使用 ESLint 进行代码检查
- 遵循 Vue 3 Composition API 规范
- 使用 SCSS 编写样式
- 组件命名使用 PascalCase
- 文件命名使用 kebab-case

### 组件开发

```vue
<template>
  <!-- 模板内容 -->
</template>

<script setup>
// 使用 Composition API
import { ref, reactive, onMounted } from 'vue'

// 响应式数据
const loading = ref(false)
const form = reactive({})

// 生命周期
onMounted(() => {
  // 初始化逻辑
})
</script>

<style lang="scss" scoped>
// 组件样式
</style>
```

### 状态管理

使用 Pinia 进行状态管理：

```javascript
// store/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: null
  }),
  
  actions: {
    async login(credentials) {
      // 登录逻辑
    }
  }
})
```

## 部署说明

### 构建部署

1. 构建生产版本：
   ```bash
   npm run build
   ```

2. 将 `dist` 目录部署到 Web 服务器

### Nginx 配置

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;
    
    # 处理 Vue Router 的 history 模式
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # API 代理
    location /api {
        proxy_pass http://backend-server:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

## 常见问题

### Q: 如何添加新的页面？

A: 
1. 在 `src/views` 目录下创建新的 Vue 组件
2. 在 `src/router/index.js` 中添加路由配置
3. 如需要，在导航菜单中添加对应链接

### Q: 如何添加新的 API 接口？

A:
1. 在 `src/api` 目录下对应的文件中添加接口函数
2. 使用 `request` 工具发送 HTTP 请求
3. 在组件中导入并使用

### Q: 如何自定义主题？

A:
1. 修改 `src/styles/index.scss` 中的 CSS 变量
2. 覆盖 Element Plus 的主题变量
3. 重新构建项目

## 贡献指南

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) 文件了解详情

## 联系方式

- 项目地址：[GitHub Repository](https://github.com/your-username/stdproject)
- 问题反馈：[Issues](https://github.com/your-username/stdproject/issues)
- 邮箱：your-email@example.com