# 智步楼梯灯AI订单助手 - 导出格式优化方案

## 问题描述
订单导出时数据没有正常换行，导致格式混乱。

## 优化方案

### 方案1：CSV格式导出（推荐）

```javascript
// 导出订单为CSV格式，确保换行正常
function exportOrderToCSV(orderData) {
    // CSV表头
    const headers = ['楼层', '踏步编号', '尺寸(mm)', '数量', '备注'];
    
    // 构建CSV内容
    let csvContent = '\uFEFF'; // 添加BOM，确保中文不乱码
    csvContent += headers.join(',') + '\n'; // 表头换行
    
    // 添加数据行
    orderData.items.forEach(item => {
        const row = [
            item.floor || '',
            item.stepNumber || '',
            item.size || '',
            item.quantity || 1,
            item.note || ''
        ];
        // 处理包含逗号的字段，用引号包裹
        const formattedRow = row.map(cell => {
            if (cell && cell.toString().includes(',')) {
                return `"${cell}"`;
            }
            return cell;
        });
        csvContent += formattedRow.join(',') + '\n'; // 每行数据换行
    });
    
    // 添加订单汇总信息
    csvContent += '\n'; // 空行
    csvContent += '订单信息,\n';
    csvContent += `订单编号,${orderData.orderId}\n`;
    csvContent += `客户名称,${orderData.customerName}\n`;
    csvContent += `联系电话,${orderData.phone}\n`;
    csvContent += `订单日期,${orderData.date}\n`;
    csvContent += `总数量,${orderData.totalQuantity}\n`;
    csvContent += `总金额,${orderData.totalAmount}\n`;
    
    // 创建并下载文件
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', `楼梯灯订单_${orderData.orderId}_${new Date().toISOString().slice(0,10)}.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
```

### 方案2：Excel格式导出（xlsx）

```javascript
// 使用SheetJS库导出Excel
function exportOrderToExcel(orderData) {
    // 构建工作表数据
    const wsData = [
        ['智步楼梯灯订单'], // 标题
        [], // 空行
        ['楼层', '踏步编号', '尺寸(mm)', '数量', '备注'] // 表头
    ];
    
    // 添加数据行
    orderData.items.forEach(item => {
        wsData.push([
            item.floor || '',
            item.stepNumber || '',
            item.size || '',
            item.quantity || 1,
            item.note || ''
        ]);
    });
    
    // 添加空行和订单信息
    wsData.push([]);
    wsData.push(['订单信息']);
    wsData.push(['订单编号', orderData.orderId]);
    wsData.push(['客户名称', orderData.customerName]);
    wsData.push(['联系电话', orderData.phone]);
    wsData.push(['订单日期', orderData.date]);
    wsData.push(['总数量', orderData.totalQuantity]);
    wsData.push(['总金额', orderData.totalAmount]);
    
    // 创建工作簿
    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.aoa_to_sheet(wsData);
    
    // 设置列宽
    ws['!cols'] = [
        {wch: 10}, // 楼层
        {wch: 12}, // 踏步编号
        {wch: 15}, // 尺寸
        {wch: 8},  // 数量
        {wch: 20}  // 备注
    ];
    
    // 添加工作表到工作簿
    XLSX.utils.book_append_sheet(wb, ws, '订单详情');
    
    // 下载文件
    XLSX.writeFile(wb, `楼梯灯订单_${orderData.orderId}_${new Date().toISOString().slice(0,10)}.xlsx`);
}
```

### 方案3：文本格式导出（TXT）

```javascript
// 导出为易读的文本格式
function exportOrderToText(orderData) {
    let textContent = '';
    
    // 标题
    textContent += '================================\n';
    textContent += '      智步楼梯灯订单\n';
    textContent += '================================\n\n';
    
    // 订单信息
    textContent += '【订单信息】\n';
    textContent += `订单编号：${orderData.orderId}\n`;
    textContent += `客户名称：${orderData.customerName}\n`;
    textContent += `联系电话：${orderData.phone}\n`;
    textContent += `订单日期：${orderData.date}\n\n`;
    
    // 产品明细
    textContent += '【产品明细】\n';
    textContent += '--------------------------------\n';
    textContent += '楼层  |  踏步编号  |  尺寸(mm)  |  数量  |  备注\n';
    textContent += '--------------------------------\n';
    
    orderData.items.forEach(item => {
        textContent += `${(item.floor || '').padEnd(6)}|  `;
        textContent += `${(item.stepNumber || '').padEnd(10)}|  `;
        textContent += `${(item.size || '').padEnd(12)}|  `;
        textContent += `${(item.quantity || 1).toString().padEnd(6)}|  `;
        textContent += `${item.note || ''}\n`;
    });
    
    textContent += '--------------------------------\n\n';
    
    // 汇总
    textContent += '【订单汇总】\n';
    textContent += `总数量：${orderData.totalQuantity} 套\n`;
    textContent += `总金额：¥${orderData.totalAmount}\n\n`;
    
    // 备注
    textContent += '【备注】\n';
    textContent += `${orderData.remark || '无'}\n\n`;
    
    textContent += '================================\n';
    textContent += '智步智能照明 www.we-smart.cn\n';
    textContent += '================================\n';
    
    // 下载文件
    const blob = new Blob([textContent], { type: 'text/plain;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', `楼梯灯订单_${orderData.orderId}_${new Date().toISOString().slice(0,10)}.txt`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
```

### 方案4：PDF格式导出

```javascript
// 使用jsPDF导出PDF格式订单
function exportOrderToPDF(orderData) {
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();
    
    // 设置中文字体（需要引入中文字体文件）
    doc.setFont('helvetica');
    
    // 标题
    doc.setFontSize(20);
    doc.text('智步楼梯灯订单', 105, 20, { align: 'center' });
    
    // 订单信息
    doc.setFontSize(12);
    doc.text('【订单信息】', 20, 40);
    doc.setFontSize(10);
    doc.text(`订单编号：${orderData.orderId}`, 20, 50);
    doc.text(`客户名称：${orderData.customerName}`, 20, 58);
    doc.text(`联系电话：${orderData.phone}`, 20, 66);
    doc.text(`订单日期：${orderData.date}`, 20, 74);
    
    // 产品明细表格
    doc.setFontSize(12);
    doc.text('【产品明细】', 20, 90);
    
    // 表头
    const headers = ['楼层', '踏步编号', '尺寸(mm)', '数量', '备注'];
    const startY = 100;
    const rowHeight = 10;
    const colWidths = [25, 35, 35, 20, 55];
    
    // 绘制表头
    doc.setFillColor(200, 200, 200);
    doc.rect(20, startY - 5, 170, rowHeight, 'F');
    doc.setFontSize(10);
    let x = 20;
    headers.forEach((header, i) => {
        doc.text(header, x + 2, startY + 2);
        x += colWidths[i];
    });
    
    // 绘制数据行
    let y = startY + rowHeight;
    orderData.items.forEach((item, index) => {
        // 隔行变色
        if (index % 2 === 1) {
            doc.setFillColor(240, 240, 240);
            doc.rect(20, y - 5, 170, rowHeight, 'F');
        }
        
        x = 20;
        doc.text(item.floor || '', x + 2, y + 2);
        x += colWidths[0];
        doc.text(item.stepNumber || '', x + 2, y + 2);
        x += colWidths[1];
        doc.text(item.size || '', x + 2, y + 2);
        x += colWidths[2];
        doc.text((item.quantity || 1).toString(), x + 2, y + 2);
        x += colWidths[3];
        doc.text(item.note || '', x + 2, y + 2);
        
        y += rowHeight;
        
        // 分页处理
        if (y > 270) {
            doc.addPage();
            y = 30;
        }
    });
    
    // 汇总信息
    y += 10;
    doc.setFontSize(12);
    doc.text('【订单汇总】', 20, y);
    doc.setFontSize(10);
    doc.text(`总数量：${orderData.totalQuantity} 套`, 20, y + 10);
    doc.text(`总金额：¥${orderData.totalAmount}`, 20, y + 18);
    
    // 页脚
    doc.setFontSize(8);
    doc.text('智步智能照明 www.we-smart.cn', 105, 290, { align: 'center' });
    
    // 保存PDF
    doc.save(`楼梯灯订单_${orderData.orderId}_${new Date().toISOString().slice(0,10)}.pdf`);
}
```

## 推荐的导出按钮设计

```html
<!-- 导出选项下拉菜单 -->
<div class="export-dropdown">
    <button class="export-btn">
        📥 导出订单
        <span class="arrow">▼</span>
    </button>
    <div class="export-options">
        <button onclick="exportOrderToCSV(orderData)">
            📄 导出为CSV
        </button>
        <button onclick="exportOrderToExcel(orderData)">
            📊 导出为Excel
        </button>
        <button onclick="exportOrderToText(orderData)">
            📝 导出为文本
        </button>
        <button onclick="exportOrderToPDF(orderData)">
            📑 导出为PDF
        </button>
    </div>
</div>

<style>
.export-dropdown {
    position: relative;
    display: inline-block;
}

.export-btn {
    background: #1890ff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.export-btn:hover {
    background: #40a9ff;
}

.export-options {
    display: none;
    position: absolute;
    background: white;
    min-width: 160px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 4px;
    z-index: 1000;
    margin-top: 5px;
}

.export-options button {
    display: block;
    width: 100%;
    padding: 10px 15px;
    border: none;
    background: white;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
}

.export-options button:hover {
    background: #f5f5f5;
}

.export-dropdown:hover .export-options {
    display: block;
}
</style>
```

## 数据格式示例

```javascript
// 订单数据结构示例
const orderData = {
    orderId: 'ORDER202504210001',
    customerName: '张先生',
    phone: '13800138000',
    date: '2026-04-21',
    items: [
        { floor: '1楼', stepNumber: '1-15', size: '800x300', quantity: 15, note: '直梯' },
        { floor: '2楼', stepNumber: '16-30', size: '800x300', quantity: 15, note: '直梯' },
        { floor: '3楼', stepNumber: '31-45', size: '800x300', quantity: 15, note: '直梯' }
    ],
    totalQuantity: 45,
    totalAmount: '4860.00',
    remark: '需要米家款，请尽快发货'
};
```

## 实施建议

1. **首选CSV格式**：兼容性好，可以用Excel打开，换行正常
2. **Excel格式作为高级选项**：需要引入SheetJS库，但体验更好
3. **文本格式作为备用**：简单直观，适合快速查看
4. **PDF格式用于正式**：排版美观，适合打印和存档

## 依赖库

```html
<!-- Excel导出需要 -->
<script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>

<!-- PDF导出需要 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
```

---

**文档结束**

> 以上代码可以直接复制到 stair-order 系统的 JavaScript 文件中使用，解决导出格式换行问题。