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

安装依赖

npm install

开发模式

npm run dev

构建生产版本

npm run build

代码检查

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/）

# 本地试跑静态容器（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 文件了解详情

联系方式

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

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