smartcut-frontend

智裁云前端项目

基于 Vue 3 + TypeScript + Vite 的现代化前端项目(Monorepo架构)

项目结构

smartcut-frontend/
├── apps/                          # 应用目录
│   ├── platform-app/              # 系统管理后台
│   ├── factory-app/               # 工厂管理后台
│   └── worker-app/                # 工人端
├── packages/                      # 共享包目录
│   ├── types/                     # TypeScript类型定义
│   ├── api-client/                # 统一API封装
│   ├── shared-utils/              # 共享工具函数
│   └── shared-components/         # 共享组件库
└── pnpm-workspace.yaml            # pnpm workspace配置

技术栈

• 前端框架: Vue 3 + Composition API
• UI组件库: Ant Design Vue 4.x
• 状态管理: Pinia 2.x
• 路由管理: Vue Router 4.x
• 构建工具: Vite 5.x
• CSS方案: TailwindCSS + Ant Design Vue
• HTTP客户端: Axios
• 代码规范: ESLint + Prettier
• 类型安全: TypeScript 5.3+

开发指南

安装依赖

pnpm install

开发模式

# 系统管理后台
pnpm dev:platform

# 工厂管理后台
pnpm dev:factory

# 工人端
pnpm dev:worker

构建生产版本

# 构建单个应用
pnpm build:platform
pnpm build:factory
pnpm build:worker

# 构建所有应用
pnpm build:all

代码规范

# 代码检查
pnpm lint

# 代码格式化
pnpm format

关键特性

• ✅ 完全重写前端: 拒绝向后兼容,现代化架构
• ✅ Monorepo统一管理: 共享代码、统一依赖
• ✅ TypeScript类型安全: 全栈类型约束
• ✅ Query参数传递factory_id: 废弃路径参数模式
• ✅ 独立域名部署: 前端完全独立
• ✅ 响应式设计: PC + 移动端统一适配

参考文档

详细设计方案请参考: ../smartcut/.trae/documents/前后端分离设计方案.md