# 窗帘工厂管理系统 - Vue3版本

## 项目简介

这是一个基于 Vue 3 + Vite + Pinia 构建的窗帘工厂管理系统，提供完整的客户管理、订单管理、生产管理、安装管理、财务管理等功能模块。

## 技术栈

- **前端框架**: Vue 3.3+ (Composition API + script setup)
- **构建工具**: Vite 4.4+
- **状态管理**: Pinia 2.1+
- **路由管理**: Vue Router 4.6+
- **图表库**: Chart.js 4.4+
- **UI设计**: 自定义CSS变量系统

## 项目结构

```
html-vue3/
├── public/                     # 静态资源
├── src/
│   ├── assets/                 # 资源文件
│   │   └── css/
│   │       └── global.css      # 全局样式
│   │
│   ├── components/             # 组件目录
│   │   ├── common/             # 通用组件
│   │   │   └── PagePlaceholder.vue
│   │   └── layout/             # 布局组件
│   │       ├── MainLayout.vue  # 主布局
│   │       ├── Sidebar.vue     # 侧边栏
│   │       └── TopBar.vue      # 顶部栏
│   │
│   ├── composables/            # 组合式函数
│   │   ├── useToast.js         # Toast提示
│   │   ├── usePagination.js    # 分页功能
│   │   ├── useSearch.js        # 搜索过滤
│   │   └── useModal.js         # 模态框管理
│   │
│   ├── stores/                 # Pinia状态管理
│   │   ├── userStore.js        # 用户状态
│   │   ├── customerStore.js    # 客户状态
│   │   └── orderStore.js       # 订单状态
│   │
│   ├── views/                  # 页面视图
│   │   ├── customer/           # 客户管理
│   │   ├── quote/              # 测量报价
│   │   ├── order/              # 订单管理
│   │   ├── production/         # 生产管理
│   │   ├── install/            # 安装管理
│   │   ├── aftersale/          # 售后管理
│   │   ├── finance/            # 财务管理
│   │   ├── purchase/           # 采购库存
│   │   ├── product/            # 产品管理
│   │   ├── staff/              # 人员管理
│   │   ├── system/             # 系统设置
│   │   └── analysis/           # 数据分析
│   │
│   ├── router/                 # 路由配置
│   │   └── index.js
│   │
│   ├── App.vue                 # 根组件
│   └── main.js                 # 入口文件
│
├── index.html                  # HTML模板
├── vite.config.js              # Vite配置
├── package.json                # 项目配置
└── start.bat                   # 启动脚本
```

## 功能模块

### 1. 首页与总览
- 经营仪表盘 - 实时KPI展示
- 功能流程图 - 业务流程展示

### 2. 客户管理
- 客户管理 - 客户信息CRUD
- 预约测量 - 预约管理
- 测量管理 - 测量记录

### 3. 测量报价
- 测量报价 - 产品测量和报价
- 报价表生成 - 生成专业报价单

### 4. 订单管理
- 订单管理 - 订单全流程管理
- 订单跟踪 - 物流跟踪
- 跟单页 - 跟单处理
- 定单明细 - 订单详情
- 成交定单 - 成交记录
- 复尺确认 - 尺寸确认

### 5. 生产管理
- 生产任务板 - 任务分配和跟踪
- 生产采购 - 物料采购
- 生产采购明细 - 采购记录

### 6. 安装管理
- 新增安装 - 创建安装任务
- 安装任务板 - 任务管理
- 安装人员排班表 - 排班管理
- 帘窗安装完成 - 完成记录

### 7. 售后管理
- 售后原因 - 问题记录分析
- 维修安排 - 维修任务

### 8. 财务管理
- 收尾款 - 尾款管理
- 发票管理 - 发票开具

### 9. 采购库存
- 采购订单 - 采购管理
- 供应商管理 - 供应商信息
- 库存管理 - 库存盘点

### 10. 产品管理
- 产品库管理 - 产品信息
- 面料配件库 - 面料配件

### 11. 人员管理
- 测量师管理 - 测量师信息
- 安装师傅管理 - 安装师傅信息

### 12. 系统设置
- 角色权限 - 权限配置
- 系统用户 - 用户管理
- 通知模板 - 消息模板
- 工作时间 - 时间设置
- 消息中心 - 消息管理

### 13. 数据分析
- 数据分析中心 - 综合分析
- 报表分析 - 图表报表
- 满意度调查 - 客户满意度
- 渠道管理 - 渠道统计

## 快速开始

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```
或双击 `start.bat` 文件

### 构建生产版本
```bash
npm run build
```

### 预览生产版本
```bash
npm run preview
```

## 开发规范

### 组件命名
- 组件文件: PascalCase (如 `CustomerList.vue`)
- 组合式函数: camelCase with use prefix (如 `useToast.js`)

### 代码组织
```vue
<script setup>
// 1. Imports
import { ref, computed } from 'vue'

// 2. Props & Emits
const props = defineProps({ ... })
const emit = defineEmits(['update'])

// 3. Reactive State
const data = ref({})

// 4. Computed
const computed = computed(() => { ... })

// 5. Methods
const handleClick = () => { ... }

// 6. Lifecycle
onMounted(() => { ... })
</script>
```

### 样式规范
- 使用 scoped 样式
- 使用 CSS 变量
- 遵循 BEM 命名约定

## 特性

- ✅ Vue 3 Composition API
- ✅ Pinia 状态管理
- ✅ Vue Router 路由守卫
- ✅ 响应式设计
- ✅ 组件化开发
- ✅ 组合式函数复用
- ✅ 模块化路由配置
- ✅ 全局样式系统

## 浏览器支持

- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## 许可证

MIT License

## 联系方式

如有问题或建议，请联系开发团队。