# 前端开发手册

## 1. 项目概述

### 1.1 项目简介
本项目是 **EL-ADMIN** 前端管理系统，基于 Vue 2.x 技术栈构建，是一个功能完善的企业级后台管理系统。

### 1.2 技术栈

| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | 2.6.10 | 前端框架 |
| Vue Router | 3.0.2 | 路由管理 |
| Vuex | 3.1.0 | 状态管理 |
| Element UI | 2.15.8 | UI组件库 |
| Axios | 0.18.1 | HTTP客户端 |
| ECharts | 4.2.1 | 图表库 |
| LogicFlow | 1.2.1 | 流程图编辑器 |

### 1.3 主要功能模块

- **系统管理**：用户管理、角色管理、菜单管理、部门管理、数据字典等
- **ACS管理**：设备管理、任务管理、区域管理、路线规划等
- **布局管理**：地图管理、设备布局等
- **监控管理**：日志监控、在线监控、大屏展示等
- **轨迹管理**：轨迹配置、轨迹后台管理

---

## 2. 开发环境配置

### 2.1 环境要求

| 工具 | 最低版本 | 推荐版本 |
|------|----------|----------|
| Node.js | >= 8.9 | >= 14.x |
| npm | >= 3.0.0 | >= 6.x |

### 2.2 安装依赖

```bash
# 进入项目目录
cd d:\诺力git\stand_acs\acs2\nladmin-ui

# 安装依赖
npm install
```

### 2.3 开发命令

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

# 生产环境构建
npm run build:prod

# 测试环境构建
npm run build:stage

# ESLint代码检查
npm run lint

# 单元测试
npm run test:unit

# 生成新页面（模板）
npm run new
```

---

## 3. 项目结构

```
src/
├── api/                 # API接口定义
│   ├── acs/             # ACS模块接口
│   ├── layout/          # 布局模块接口
│   ├── system/          # 系统模块接口
│   ├── monitor/         # 监控模块接口
│   └── ...
├── assets/              # 静态资源
│   ├── icons/           # SVG图标
│   ├── images/          # 图片资源
│   ├── styles/          # 全局样式
│   └── js/              # 第三方JS库
├── components/          # 公共组件
│   ├── Crud/            # CRUD组件
│   ├── Dict/            # 数据字典组件
│   ├── Permission/      # 权限组件
│   └── IconSelect/      # 图标选择组件
├── layout/              # 布局组件
│   ├── components/      # 布局子组件
│   └── mixin/           # 布局混入
├── router/              # 路由配置
│   ├── index.js         # 路由权限控制
│   └── routers.js       # 路由定义
├── store/               # Vuex状态管理
│   ├── modules/         # 状态模块
│   ├── getters.js       # 计算属性
│   └── index.js         # 状态入口
├── utils/               # 工具函数
│   ├── request.js       # Axios封装
│   ├── auth.js          # 认证工具
│   └── nladmin.js       # 通用工具
├── views/               # 页面视图
│   ├── system/          # 系统管理页面
│   ├── acs/             # ACS管理页面
│   ├── monitor/         # 监控页面
│   └── dashboard/       # 仪表盘
├── i18n/                # 国际化配置
├── App.vue              # 根组件
├── main.js              # 入口文件
└── settings.js          # 系统配置
```

---

## 4. 核心模块说明

### 4.1 入口文件 (main.js)

**职责**：项目初始化、全局配置、第三方库注册

**关键配置**：
- Element UI 全局配置（默认尺寸、表格边框等）
- 全局方法挂载（parseTime、resetForm、selectDictLabel等）
- 国际化配置

### 4.2 路由管理

#### 4.2.1 路由定义 (router/routers.js)

路由采用异步路由加载方式，支持动态菜单加载：

```javascript
{
  path: '/system/user',
  component: Layout,
  redirect: '/system/user/index',
  name: 'User',
  meta: { title: 'user', icon: 'user', roles: ['admin', 'user'] },
  children: [
    {
      path: 'index',
      component: () => import('@/views/system/user/index'),
      name: 'UserIndex',
      meta: { title: 'userList', icon: 'user', roles: ['admin', 'user'] }
    }
  ]
}
```

#### 4.2.2 权限控制 (router/index.js)

实现了完整的路由守卫机制：
- 登录状态检查
- 动态菜单加载
- 权限验证

### 4.3 HTTP请求封装 (utils/request.js)

**核心特性**：
- 请求拦截器：自动添加Token、语言标识
- 响应拦截器：统一错误处理、401/403状态码处理
- 支持blob下载错误处理

```javascript
// 请求拦截器
service.interceptors.request.use(
  config => {
    if (getToken()) {
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    config.headers['Accept-Language'] = localStorage.getItem('lang')
    return config
  }
)
```

### 4.4 状态管理 (store/)

| 模块 | 职责 |
|------|------|
| app.js | 应用基础状态（侧边栏、设备信息等） |
| permission.js | 权限路由状态 |
| settings.js | 系统设置（主题、布局等） |
| tagsView.js | 标签页状态 |
| user.js | 用户信息状态 |

---

## 5. 开发规范

### 5.1 代码规范

#### 5.1.1 ESLint规则

项目使用 `eslint-plugin-vue` 进行代码检查，配置文件：`.eslintrc.js`

**核心规则**：
- 使用 4 空格缩进
- 语句结尾必须有分号
- 单引号优先
- 禁止未使用的变量
- Vue组件必须有name属性

#### 5.1.2 Git钩子

通过 `husky` 和 `lint-staged` 实现提交前代码检查：

```javascript
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,vue}": [
    "eslint --fix",
    "git add"
  ]
}
```

### 5.2 组件开发规范

#### 5.2.1 组件命名

- **组件名**：大驼峰命名（PascalCase），如 `UserList.vue`
- **组件文件**：放在对应模块目录下

#### 5.2.2 组件结构

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

<script>
export default {
  name: 'ComponentName',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped>
/* 样式 */
</style>
```

### 5.3 API接口规范

#### 5.3.1 接口定义

每个模块对应一个API文件，统一放在 `src/api/` 目录下：

```javascript
import request from '@/utils/request'

export function getList(params) {
  return request({
    url: '/api/system/user',
    method: 'get',
    params
  })
}
```

#### 5.3.2 接口命名

| 操作 | 方法 | 命名示例 |
|------|------|----------|
| 查询列表 | GET | `getList` |
| 查询详情 | GET | `getInfo` |
| 新增 | POST | `add` |
| 更新 | PUT | `update` |
| 删除 | DELETE | `delete` |

### 5.4 国际化规范

项目支持中文、英文、印尼语三种语言，配置文件位于 `src/i18n/langs/`

**使用方式**：

```vue
<template>
  <span>{{ $t('user.userName') }}</span>
</template>

<script>
export default {
  mounted() {
    console.log(this.$t('common.success'))
  }
}
</script>
```

---

## 6. 常用工具函数

### 6.1 时间处理

```javascript
// 格式化时间
this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
```

### 6.2 数据字典

```javascript
// 获取字典标签
this.selectDictLabel(dictList, value)

// 获取多个字典标签
this.selectDictLabels(dictList, values, ',')
```

### 6.3 表单操作

```javascript
// 重置表单
this.resetForm('formName')

// 添加日期范围
this.addDateRange(params, startDate, endDate)
```

### 6.4 树结构处理

```javascript
// 处理树形数据
const treeData = this.handleTree(data, 'id', 'parentId')
```

---

## 7. CRUD开发指南

### 7.1 使用Crud组件

项目提供了通用的Crud组件，简化增删改查操作：

```vue
<template>
  <div class="app-container">
    <Crud ref="crud" :option="crudOption" />
  </div>
</template>

<script>
import { crud } from '@/mixins/crud'

export default {
  name: 'User',
  mixins: [crud],
  data() {
    return {
      crudOption: {
        title: 'user',
        url: '/api/system/user',
        columns: [
          { label: 'userName', prop: 'username' },
          { label: 'email', prop: 'email' }
        ]
      }
    }
  }
}
</script>
```

### 7.2 自定义表单

```vue
<template>
  <el-dialog :title="title" :visible.sync="visible">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-dialog>
</template>
```

---

## 8. 权限管理

### 8.1 按钮权限

使用 `v-permission` 指令控制按钮显示：

```vue
<el-button v-permission="['admin', 'user:edit']" type="primary">编辑</el-button>
```

### 8.2 角色权限

路由配置中通过 `meta.roles` 控制访问权限：

```javascript
{
  path: 'index',
  component: () => import('@/views/system/user/index'),
  meta: { roles: ['admin', 'user'] }
}
```

---

## 9. 构建部署

### 9.1 环境变量

| 文件 | 环境 | 说明 |
|------|------|------|
| .env.development | 开发环境 | 本地开发配置 |
| .env.production | 生产环境 | 生产部署配置 |

### 9.2 构建命令

```bash
# 生产构建
npm run build:prod

# 构建产物目录：dist/
```

### 9.3 部署方式

1. 将 `dist/` 目录部署到静态服务器
2. 配置Nginx反向代理：

```nginx
server {
  listen 80;
  server_name your-domain.com;
  
  location / {
    root /path/to/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
  
  location /api {
    proxy_pass http://backend-server:8080;
    proxy_set_header Host $host;
  }
}
```

---