# Admin 前端配置说明

## 📁 配置文件结构

```
admin/
├── config/
│   ├── index.js          # 主配置文件（支持多环境）
│   └── README.md         # 配置说明文档（本文件）
├── env.development       # 开发环境变量
├── env.test             # 测试环境变量
└── env.production       # 生产环境变量
```

---

## ⚙️ 配置项说明

### 基础配置

| 配置项 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| `title` | String | 'Tennis管理系统' | 系统标题 |
| `apiUrl` | String | - | 后端 API 地址 |
| `uploadUrl` | String | - | 文件上传地址 |
| `showSettings` | Boolean | true | 是否显示设置按钮 |
| `showTagsView` | Boolean | true | 是否显示标签栏 |
| `fixedHeader` | Boolean | true | 是否固定头部 |
| `sidebarLogo` | Boolean | true | 是否显示侧边栏 Logo |
| `cookieExpires` | Number | 1 | Token 在 Cookie 中存储的天数 |
| `themeColor` | String | '#2d8cf0' | 系统主题色 |
| `debug` | Boolean | false | 是否开启调试模式 |

---

## 🌍 环境配置

### 开发环境（development）

```javascript
{
  apiUrl: 'http://localhost:9098/admin_api/',
  uploadUrl: 'http://localhost:9098/admin_api/upload',
  debug: true  // 开发环境显示调试信息
}
```

**启动命令**：
```bash
npm run serve
```

### 测试环境（test）

```javascript
{
  apiUrl: 'http://test.yourdomain.com/admin_api/',
  uploadUrl: 'http://test.yourdomain.com/admin_api/upload',
  debug: false
}
```

**启动命令**：
```bash
npm run build:test
```

### 生产环境（production）

```javascript
{
  apiUrl: 'https://api.yourdomain.com/admin_api/',
  uploadUrl: 'https://api.yourdomain.com/admin_api/upload',
  debug: false
}
```

**启动命令**：
```bash
npm run build
```

---

## 🔧 使用方法

### 在组件中使用配置

框架已将配置挂载到 `Vue.prototype.$config`，可以在任何组件中使用：

```vue
<template>
  <div>
    <h1>{{ $config.title }}</h1>
    <p>API 地址: {{ $config.apiUrl }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('系统标题:', this.$config.title)
    console.log('API 地址:', this.$config.apiUrl)
    console.log('是否调试模式:', this.$config.debug)
  }
}
</script>
```

### 在 API 服务中使用配置

HTTP 工具已自动使用 `apiUrl` 作为基础路径：

```javascript
// 无需手动拼接 apiUrl，框架会自动处理
this.$http.get('/user/list')  
// 实际请求: http://localhost:9098/admin_api/user/list
```

---

## 📝 修改配置

### 修改基础配置

编辑 `config/index.js` 中的 `baseConfig`：

```javascript
const baseConfig = {
  title: '你的系统名称',  // 修改系统标题
  themeColor: '#409EFF',  // 修改主题色
  // ... 其他配置
}
```

### 修改环境配置

编辑对应环境的配置对象：

```javascript
// 开发环境配置
const developmentConfig = {
  ...baseConfig,
  apiUrl: 'http://localhost:9098/admin_api/',  // 修改开发环境 API 地址
  uploadUrl: 'http://localhost:9098/admin_api/upload',
  debug: true
}

// 生产环境配置
const productionConfig = {
  ...baseConfig,
  apiUrl: 'https://api.yourdomain.com/admin_api/',  // 修改生产环境 API 地址
  uploadUrl: 'https://api.yourdomain.com/admin_api/upload',
  debug: false
}
```

### 添加自定义配置

可以在任何环境配置中添加自定义字段：

```javascript
const developmentConfig = {
  ...baseConfig,
  apiUrl: 'http://localhost:9098/admin_api/',
  uploadUrl: 'http://localhost:9098/admin_api/upload',
  
  // 自定义配置
  enableMock: true,
  websocketUrl: 'ws://localhost:9099',
  maxFileSize: 10 * 1024 * 1024,  // 10MB
  allowedFileTypes: ['image/jpeg', 'image/png', 'application/pdf']
}
```

然后在组件中使用：

```javascript
if (this.$config.enableMock) {
  console.log('启用 Mock 数据')
}

const ws = new WebSocket(this.$config.websocketUrl)
```

---

## 🚀 部署说明

### 开发环境部署

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

# 或使用 yarn
yarn serve
```

### 测试环境部署

```bash
# 构建测试环境代码
npm run build:test

# 将 dist 目录部署到测试服务器
```

### 生产环境部署

```bash
# 构建生产环境代码
npm run build

# 将 dist 目录部署到生产服务器
```

---

## ⚠️ 注意事项

1. **不要将敏感信息写入配置文件**
   - API 密钥、数据库密码等敏感信息应通过环境变量传递
   - 使用 `process.env.VUE_APP_*` 格式定义环境变量

2. **修改配置后需要重启**
   - 修改配置文件后，需要重启开发服务器才能生效
   - `Ctrl + C` 停止服务器，然后重新运行 `npm run serve`

3. **生产环境配置检查**
   - 部署前务必检查生产环境的 `apiUrl` 是否正确
   - 确保关闭 `debug` 模式

4. **跨域问题**
   - 开发环境如遇到跨域问题，可以在 `vue.config.js` 中配置代理
   - 生产环境需要后端配置 CORS

---

## 📚 相关文档

- [Vue CLI 环境变量和模式](https://cli.vuejs.org/zh/guide/mode-and-env.html)
- [AdminFramework 完整文档](../../_doc/admin_core完整使用文档.md)

---

**最后更新**: 2025-10-10