并行开发与集成 — 前后端+CLI 三模块同步推进#

// Props 接口定义
interface ExportConfigProps {
  /** 可导出的字段列表 */
  fields: FieldOption[]
  /** 已选择的字段键集合 */
  selected: Set<string>
  /** 字段选择变更回调 */
  onSelectionChange: (selected: Set<string>) => void
  /** 导出格式 */
  format: 'csv' | 'excel' | 'json'
  /** 格式切换回调 */
  onFormatChange: (format: 'csv' | 'excel' | 'json') => void
  /** 日期范围 [start, end] */
  dateRange: [Date, Date]
  /** 日期范围变更回调 */
  onDateRangeChange: (range: [Date, Date]) => void
  /** 导出进度（0-100）*/
  progress?: number
  /** 提交导出请求 */
  onSubmit: () => void
  /** 是否正在导出中 */
  loading?: boolean
}

interface FieldOption {
  key: string
  label: string
  required?: boolean
}

// src/components/ExportConfig/ExportConfig.tsx
import { useState, useCallback, useMemo } from 'react'
import type { ExportConfigProps, FieldOption } from './types'

const FORMATS = ['csv', 'excel', 'json'] as const

export function ExportConfig({
  fields,
  selected,
  onSelectionChange,
  format,
  onFormatChange,
  dateRange,
  onDateRangeChange,
  progress = 0,
  onSubmit,
  loading = false,
}: ExportConfigProps) {
  const allSelected = selected.size === fields.length

  const toggleAll = useCallback(() => {
    if (allSelected) {
      onSelectionChange(new Set(fields.filter(f => f.required).map(f => f.key)))
    } else {
      onSelectionChange(new Set(fields.map(f => f.key)))
    }
  }, [allSelected, fields, onSelectionChange])

  const toggleField = useCallback((key: string) => {
    const next = new Set(selected)
    const field = fields.find(f => f.key === key)
    if (field?.required) return // 必选字段不可取消
    if (next.has(key)) next.delete(key)
    else next.add(key)
    onSelectionChange(next)
  }, [selected, fields, onSelectionChange])

  return (
    <div className="export-config">
      {/* 格式选择器 */}
      <section className="export-config__section">
        <h3>导出格式</h3>
        <div className="export-config__format-group">
          {FORMATS.map(f => (
            <label key={f} className={format === f ? 'active' : ''}>
              <input
                type="radio"
                name="format"
                value={f}
                checked={format === f}
                onChange={() => onFormatChange(f)}
              />
              {f.toUpperCase()}
            </label>
          ))}
        </div>
      </section>

      {/* 字段选择器 */}
      <section className="export-config__section">
        <h3>导出字段</h3>
        <label>
          <input type="checkbox" checked={allSelected} onChange={toggleAll} />
          全选
        </label>
        {fields.map(f => (
          <label key={f.key}>
            <input
              type="checkbox"
              checked={selected.has(f.key)}
              disabled={f.required}
              onChange={() => toggleField(f.key)}
            />
            {f.label}{f.required ? ' (必选)' : ''}
          </label>
        ))}
      </section>

      {/* 日期范围 */}
      <section className="export-config__section">
        <h3>日期范围</h3>
        <input
          type="date"
          value={dateRange[0].toISOString().slice(0, 10)}
          onChange={e => onDateRangeChange([new Date(e.target.value), dateRange[1]])}
        />
        <span>至</span>
        <input
          type="date"
          value={dateRange[1].toISOString().slice(0, 10)}
          onChange={e => onDateRangeChange([dateRange[0], new Date(e.target.value)])}
        />
      </section>

      {/* 进度条 */}
      {progress > 0 && (
        <section className="export-config__section">
          <div className="export-config__progress">
            <div className="export-config__progress-bar" style={{ width: `${progress}%` }} />
          </div>
          <span>{progress}%</span>
        </section>
      )}

      {/* 提交按钮 */}
      <button
        className="export-config__submit"
        disabled={loading || selected.size === 0}
        onClick={onSubmit}
      >
        {loading ? '导出中...' : '开始导出'}
      </button>
    </div>
  )
}

// src/api/exports/router.ts
import { Router } from 'express'
import { v4 as uuid } from 'uuid'
import { exportQueue } from './queue'
import type { Request, Response } from 'express'

const router = Router()

// 创建导出任务
router.post('/api/exports', async (req: Request, res: Response) => {
  const { format, fields, dateRange } = req.body

  // 参数校验
  if (!['csv', 'excel', 'json'].includes(format)) {
    return res.status(400).json({ error: '不支持的导出格式' })
  }
  if (!fields || fields.length === 0) {
    return res.status(400).json({ error: '至少选择一个导出字段' })
  }

  const id = uuid()
  await exportQueue.add('export', { id, format, fields, dateRange })

  res.status(201).json({ id, status: 'queued' })
})

// 查询任务状态
router.get('/api/exports/:id', async (req: Request, res: Response) => {
  const job = await exportQueue.getJob(req.params.id)

  if (!job) {
    return res.status(404).json({ error: '任务不存在' })
  }

  const state = await job.getState()
  const progress = job.progress

  res.json({
    id: job.id,
    status: state, // 'queued' | 'processing' | 'completed' | 'failed'
    progress,
  })
})

// 下载导出文件
router.get('/api/exports/:id/download', async (req: Request, res: Response) => {
  const job = await exportQueue.getJob(req.params.id)
  const state = await job.getState()

  if (state !== 'completed') {
    return res.status(400).json({ error: '任务未完成，无法下载' })
  }

  const filePath = job.returnvalue?.filePath
  res.download(filePath)
})

export { router }

// src/api/exports/queue.ts
import { Queue, Worker } from 'bullmq'
import type { Job } from 'bullmq'

const connection = { host: 'localhost', port: 6379 }

export const exportQueue = new Queue('exports', { connection })

const worker = new Worker('exports', async (job: Job) => {
  const { id, format, fields } = job.data

  // 模拟数据处理和文件生成
  await job.updateProgress(10)
  // ... 从数据库查询数据
  await job.updateProgress(50)
  // ... 生成对应格式文件
  await job.updateProgress(90)
  // ... 写入磁盘并返回路径
  await job.updateProgress(100)

  return { filePath: `/tmp/exports/${id}.${format === 'excel' ? 'xlsx' : format}` }
}, { connection })

// src/cli/index.ts
import { Command } from 'commander'
import { createExport, pollUntilDone, downloadFile } from './api'

const program = new Command()

program
  .name('cli-export')
  .description('批量数据导出工具')
  .requiredOption('--format <type>', '导出格式: csv | excel | json')
  .option('--fields <list>', '导出字段，逗号分隔（默认全部）', val => val.split(','))
  .option('--start <date>', '起始日期 YYYY-MM-DD')
  .option('--end <date>', '结束日期 YYYY-MM-DD')
  .option('--output <dir>', '输出目录', './exports')
  .action(async (opts) => {
    console.log('创建导出任务...')
    const { id } = await createExport({
      format: opts.format,
      fields: opts.fields,
      dateRange: {
        start: opts.start,
        end: opts.end,
      },
    })

    console.log(`任务已创建: ${id}，等待完成...`)
    const result = await pollUntilDone(id)

    console.log('下载文件...')
    await downloadFile(id, opts.output)

    console.log(`导出完成！文件已保存到 ${opts.output}`)
  })

program.parse()