# Interface Management System

Vue.js 接口管理系统前端项目

## 项目简介

这是一个基于 Vue.js 3 + TypeScript + Arco Design 的接口管理系统前端项目，提供完整的接口管理、服务商管理、应用管理等功能

## 技术栈

- **框架**: Vue.js 3
- **语言**: TypeScript
- **UI 组件库**: Arco Design Vue
- **构建工具**: Vite
- **状态管理**: Pinia
- **路由**: Vue Router
- **样式**: Less
- **表格组件**: Handsontable

## 功能特性

### 系统管理
- 接口管理：接口配置、参数映射、服务商管理
- 应用管理：应用列表、接口绑定、状态管理
- 用户管理：用户权限、角色管理
- 日志管理：调用日志、统计报表

### 订单管理
- 价格查询：运费计算、价格对比
- 订单下单：批量导入、订单管理
- 订单跟踪：轨迹查询、状态更新

### 渠道管理
- 销售产品：产品配置、价格管理
- 服务渠道：渠道配置、买价管理
- 区域管理：黑名单区域、偏远区域
- 计重规则：计重规则、计重进位

### 轨迹中心
- 轨迹查询：订单轨迹、状态跟踪
- 预警管理：KPI 区域、预警配置
- 自动触发：触发规则、通知管理

## 项目结构

```
src/
├── api/                    # API 接口
├── assets/                 # 静态资源
├── components/             # 公共组件
├── composables/            # 组合式函数
├── hooks/                  # 自定义钩子
├── layout/                 # 布局组件
├── locale/                 # 国际化
├── router/                 # 路由配置
├── store/                  # 状态管理
├── utils/                  # 工具函数
├── views/                  # 页面组件
│   ├── channel/            # 渠道管理
│   ├── order/              # 订单管理
│   ├── system/             # 系统管理
│   └── trajectoryCenter/   # 轨迹中心
└── main.ts                 # 入口文件
```

## 开发指南

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 代码检查

```bash
npm run lint
```

## 部署说明

1. 安装依赖 `pnpm i`
2. 构建 `pnpm build`（生成 `dist/`）
3. **k3s（推荐）**：`Dockerfile.k3s` 多阶段构建，容器内用 `serve` 提供静态 SPA（`:80`）；**HTTPS 由 Traefik `websecure` + cert-manager（Let's Encrypt）终结**，经 Ingress(tls) → Service，不在前端容器内挂证书。
4. **本地简易 Docker**：先 `pnpm build`，再 `docker build -t web1 .`（`Dockerfile` 拷贝已有 `dist/`）

```bash
# 本地试跑静态容器（HTTP:7962 → 容器 80）
docker build -t web1 .
docker rm -f web
docker run -d -p 7962:80 --name web web1
docker ps | grep web
```

> 生产勿在前端镜像内配置 SSL；证书由集群 cert-manager 写入 Secret，Traefik Ingress 引用即可。

## 贡献指南

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

## 联系方式

如有问题或建议，请通过以下方式联系：

- 邮箱: your-email@example.com
- 项目地址: https://github.com/xiaoliutral/itfx-front