# ukwcs-frontend

**Repository Path**: openwcs/ukwcs-frontend

## Basic Information

- **Project Name**: ukwcs-frontend
- **Description**: 一个基于 Vue 3 + TypeScript + Element Plus 的现代化仓储控制系统（WCS - Warehouse Control System）前端项目。基础模板，参考学习。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-28
- **Last Updated**: 2025-08-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WCS 仓储控制系统前端

一个基于 Vue 3 + TypeScript + Element Plus 的现代化仓储控制系统（WCS - Warehouse Control System）前端项目。

## 体验地址:[体验地址](http://ukiot.cn/)

## 预览 
![预览](images/preview.gif)

## ✨ 特性

- 🚀 **现代技术栈**: Vue 3 + TypeScript + Vite + Element Plus
- 🎨 **科技感UI**: 暗色主题 + 发光效果 + 流畅动画
- 🌍 **国际化支持**: 中文/英文切换
- 🎯 **主题切换**: 深色/浅色模式 + 多种主题色
- 📱 **响应式设计**: 支持桌面端和移动端
- 🔐 **权限控制**: 基于角色的动态路由
- 🛠 **Mock支持**: 内置Mock数据，支持真实API切换
- 📊 **数据可视化**: 集成ECharts图表库
- ⚡ **性能优化**: 自动导入 + 代码分割 + 懒加载

## 🏗 系统架构

```
src/
├── api/              # API接口层
│   ├── request.ts    # HTTP客户端
│   ├── auth.ts       # 认证API
│   └── ...
├── assets/           # 静态资源
├── components/       # 通用组件
├── layout/           # 布局组件
│   ├── index.vue     # 主布局
│   └── components/   # 布局子组件
├── locales/          # 国际化语言包
├── router/           # 路由配置
├── stores/           # 状态管理(Pinia)
├── styles/           # 全局样式
├── views/            # 页面组件
└── main.ts           # 应用入口

types/                # TypeScript类型定义
├── auth.ts           # 认证相关类型
├── equipment.ts      # 设备管理类型
└── task.ts           # 任务管理类型
```

## 🎯 功能模块

### 系统管理
- 👥 **用户管理**: 用户CRUD、角色分配、状态管理
- 🎭 **角色管理**: 角色CRUD、权限配置
- 🔒 **权限管理**: 菜单权限、按钮权限、API权限

### 设备管理
- 🚛 **AGV管理**: AGV设备的增删改查、实时监控、调试功能
- 🤖 **Robot管理**: 机械臂设备的增删改查、实时监控、调试功能
- 📦 **IRack管理**: 智能货架的增删查、容量管理
- 🗄 **Cabinet管理**: 智能柜的增删查、分区管理

### 任务管理
- 📋 **任务分配**: 智能任务分配算法
- ▶️ **任务执行**: 实时任务执行监控
- 📊 **任务监控**: 任务状态可视化
- 📈 **任务统计**: 任务数据分析报表

### 日志管理
- 📝 **操作日志**: 用户操作记录
- 🔍 **系统日志**: 系统运行日志
- ⚠️ **错误日志**: 异常信息追踪

### 规则管理
- 🎯 **分配规则**: 任务分配策略配置
- 🛣 **路径规则**: AGV路径规划规则
- ⚡ **优化规则**: 系统性能优化规则

## 🚀 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0 或 yarn >= 1.22.0

### 安装依赖

```bash
# 使用 npm
npm install

# 或使用 yarn
yarn install

# 或使用 pnpm
pnpm install
```

### 启动开发服务器

```bash
# 使用 npm
npm run dev

# 或使用 yarn
yarn dev

# 或使用 pnpm
pnpm dev
```

项目将在 http://localhost:3000 启动

### 构建生产版本

```bash
# 使用 npm
npm run build

# 或使用 yarn
yarn build

# 或使用 pnpm
pnpm build
```

## 🔧 配置说明

### 环境变量

创建 `.env.local` 文件配置环境变量：

```env
# API配置
VITE_API_BASE_URL=http://localhost:8080/api
VITE_USE_MOCK=true

# 应用配置
VITE_APP_TITLE=WCS仓储控制系统
VITE_APP_VERSION=1.0.0
```

### Mock 数据

默认使用 Mock 数据，无需后端服务即可运行。如需连接真实后端API：

1. 设置环境变量 `VITE_USE_MOCK=false`
2. 配置正确的 `VITE_API_BASE_URL`

### 默认账户

| 用户名 | 密码 | 角色 | 说明 |
|--------|------|------|------|
| admin | 123456 | 管理员 | 拥有所有权限 |
| operator | 123456 | 操作员 | 设备和任务管理权限 |
| viewer | 123456 | 观察员 | 只读权限 |

## 🎨 UI设计特色

### 科技感主题
- **深色基调**: 专业的深色配色方案
- **发光效果**: 按钮和卡片的霓虹发光效果
- **流畅动画**: 页面切换和交互动画
- **渐变色彩**: 科技感的渐变背景

### 响应式设计
- **桌面优先**: 专为管理后台优化
- **移动适配**: 支持平板和手机访问
- **自适应布局**: 智能调整组件大小

### 主题定制
- **多种主题色**: 10种预设主题色
- **深浅模式**: 支持深色/浅色切换
- **个性化设置**: 用户可自定义界面

## 📱 快捷键

| 快捷键 | 功能 |
|--------|------|
| `Ctrl + K` | 打开全局搜索 |
| `Ctrl + ,` | 打开系统设置 |
| `Ctrl + B` | 切换侧边栏 |
| `Ctrl + Shift + T` | 切换主题模式 |

## 🔗 技术栈

### 核心框架
- [Vue 3](https://vuejs.org/) - 渐进式JavaScript框架
- [TypeScript](https://www.typescriptlang.org/) - JavaScript的超集
- [Vite](https://vitejs.dev/) - 下一代前端构建工具

### UI组件库
- [Element Plus](https://element-plus.org/) - Vue 3组件库
- [Element Plus Icons](https://element-plus.org/zh-CN/component/icon.html) - 图标库

### 状态管理
- [Pinia](https://pinia.vuejs.org/) - Vue状态管理
- [pinia-plugin-persistedstate](https://github.com/prazdevs/pinia-plugin-persistedstate) - 状态持久化

### 路由管理
- [Vue Router 4](https://router.vuejs.org/) - Vue官方路由

### 网络请求
- [Axios](https://axios-http.com/) - HTTP客户端

### 国际化
- [Vue I18n](https://vue-i18n.intlify.dev/) - Vue国际化插件

### 数据可视化
- [ECharts](https://echarts.apache.org/) - 数据可视化图表库
- [Vue ECharts](https://vue-echarts.dev/) - Vue ECharts组件

### 样式处理
- [Sass](https://sass-lang.com/) - CSS预处理器

### 开发工具
- [ESLint](https://eslint.org/) - 代码检查工具
- [Prettier](https://prettier.io/) - 代码格式化工具

## 📄 许可证

[MIT License](LICENSE)

## 🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进项目。

## 📞 支持

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

- 提交 [Issue](https://gitee.com/openwcs/ukwcs/issues)

---

⭐ 如果这个项目对你有帮助，请给它一个星标！