# 订单管理系统组件需求文档

## 项目概述
订单管理系统的核心组件库，包含工单卡片、工单列表、咨询栏等核心功能组件。

## TopNavBar 组件

### 功能要求
- 顶部导航栏展示
- 支持自定义标题内容
- 支持插槽扩展

### 设计要求
- 固定在页面顶部
- 背景色与主题一致
- 高度适中，不占用过多空间

## Tabs 组件

### 功能要求
- 标签页切换功能
- 支持默认激活项
- 切换动画效果
- 事件回调

### 设计要求
- 标签间距均匀
- 激活状态明显
- 切换动画流畅
- 响应式适配

## OrderCard 组件

### 功能要求
- 展示工单基本信息（标题、时间、联系人、状态等）
- 支持点击事件
- 支持呼叫功能
- 支持完成操作
- 状态标识清晰

### 设计要求
- 卡片式布局，圆角设计
- 信息层次分明
- 操作按钮位置合理
- 状态颜色区分明显
- 支持不同状态的视觉反馈

## OrderList 组件

### 功能要求
- 显示工单列表
- 集成z-paging组件，支持虚拟列表
- 支持自定义下拉刷新（文案、样式、阈值）
- 支持自定义上拉加载更多（文案、样式、阈值）
- 自动管理空数据状态
- 支持固定高度和自适应高度模式
- 完整的事件回调机制
- 加载状态管理

### 设计要求
- 列表项间距合理
- 加载动画流畅
- 空状态友好提示
- 响应式布局
- 虚拟列表优化大数据渲染性能

### z-paging配置
- `useVirtualList`: 是否启用虚拟列表（默认true）
- `virtualListHeight`: 虚拟列表高度（默认100%）
- `cellHeightMode`: 单元格高度模式（auto/fixed）
- `fixedHeight`: 固定高度值（当cellHeightMode为fixed时使用）
- `customEmptyView`: 是否使用自定义空状态

## ConsultationBar 组件

### 功能要求
- 底部固定咨询栏
- 显示客服信息和联系方式
- 支持立即咨询功能
- 默认隐藏，点击"立即呼叫"按钮后显示
- "立即咨询"按钮单独一行显示
- 支持显示/隐藏动画效果

### 设计要求
- 固定在页面底部
- 背景半透明或纯色
- 按钮样式与主题一致
- 信息布局清晰
- 支持安全区域适配
- 显示/隐藏动画流畅

## 数据结构

### 工单数据结构
```javascript
{
  id: String,           // 工单ID
  title: String,        // 工单标题
  createTime: String,   // 创建时间
  contactName: String,  // 联系人姓名
  contactPhone: String, // 联系电话
  status: String,       // 状态：pending-待处理, processing-处理中, completed-已完成, cancelled-已取消
  type: String          // 类型：service-服务工单, order-普通订单
}
```

### Tab数据结构
```javascript
{
  label: String,  // 显示文本
  value: String   // 值
}
```

## 技术要求

### 框架和库
- Vue 3 Composition API
- uni-app框架
- z-paging组件（用于列表优化）
- SCSS样式预处理

### 性能优化
- 虚拟列表支持大数据量渲染
- 图片懒加载
- 组件按需加载
- 合理的缓存策略

### 兼容性
- 支持微信小程序
- 支持H5
- 支持APP
- 响应式设计，适配不同屏幕尺寸

## 更新日志

### v1.2.0 (最新)
- ✅ 集成z-paging组件到OrderList
- ✅ 支持虚拟列表，提升大数据渲染性能
- ✅ 自定义下拉刷新和上拉加载更多
- ✅ 自动管理空数据状态
- ✅ 支持固定高度和自适应高度模式
- ✅ 完整的事件回调机制
- ✅ 创建OrderList演示页面

### v1.1.0
- ✅ 修改ConsultationBar组件布局
- ✅ "立即咨询"按钮单独一行显示
- ✅ 默认隐藏，点击"立即呼叫"后显示
- ✅ 添加显示/隐藏动画效果
- ✅ 更新相关样式和交互逻辑

### v1.0.0
- ✅ 完成OrderCard组件开发
- ✅ 完成OrderList组件开发
- ✅ 完成ConsultationBar组件开发
- ✅ 完成TopNavBar组件开发
- ✅ 完成Tabs组件开发
- ✅ 完成订单管理页面集成
- ✅ 创建组件演示页面
- ✅ 编写技术文档