# 爱视（aishi）管理后台前端

基于 **Vue 3**、**Vite**、**Element Plus** 的后台管理界面，与后端通过 **HTTP API** 对接。开发环境下请求统一走 Vite 代理，避免浏览器跨域问题。

## 技术栈

| 类别 | 技术 |
|------|------|
| 框架 | Vue 3（Composition API、`script setup`） |
| 构建 | Vite 8、TypeScript、`vue-tsc` |
| UI | Element Plus、SCSS、UnoCSS |
| 路由与状态 | Vue Router 5、Pinia |
| HTTP | Axios、`qs` |
| 其他 | Lodash、xlsx（导入导出）、部分图标与区域数据组件 |

## 环境要求

建议使用 **Node.js** 当前 LTS 版本；包管理统一使用 **[pnpm](https://pnpm.io/)**（安装：`npm install -g pnpm` 或见官网）。

## 快速开始

```bash
# 安装依赖
pnpm install

# 本地开发（默认读取 .env.development）
pnpm dev
```

## pnpm 脚本

| 命令 | 说明 |
|------|------|
| `pnpm dev` | 启动开发服务器（Vite） |
| `pnpm build` | 类型检查（`vue-tsc`）后生产构建 |
| `pnpm build:dev` | 以 `development` 模式构建 |
| `pnpm build:test` | 以 `test` 模式构建 |
| `pnpm preview` | 本地预览构建产物 |
| `pnpm typecheck` | 仅执行 TypeScript / 模板类型检查 |

## 环境变量

前缀均为 `VITE_`，在 `vite.config.js` 中通过 `loadEnv` 加载。常见配置：

| 变量 | 说明 |
|------|------|
| `VITE_APP_PROXY_TARGET` | 开发代理目标地址（后端服务 origin），如 `http://127.0.0.1:8083` |
| `VITE_DEV_PORT` | 开发服务器端口，未设置时默认 **3000** |

各环境的示例或覆盖见项目根目录 `.env`、`.env.development`、`.env.production`、`.env.test`。**不要将含密钥的 `.env` 文件提交到版本库。**

### 代理说明

开发模式下，`/api` 会代理到 `VITE_APP_PROXY_TARGET`，并将路径前缀 `/api` 重写为后端的实际前缀（见 `vite.config.js`）。接口客户端里的 `baseApi` 需与此约定一致。

## 目录结构（简要）

```
src/
├── api/           # 接口封装
├── assets/        # 静态资源
├── components/    # 全局组件
├── layout/        # 布局与框架页
├── router/        # 路由
├── stores/        # Pinia
├── utils/         # 工具函数
└── views/         # 业务页面（按模块划分，如 modules/sys、modules/device）
```

路径别名：`@` → `src`，`@assets` → `src/assets`（见 `vite.config.js`）。