import React, { useState } from 'react'; import { Database, Layout, Printer, Settings } from 'lucide-react'; import { ImportData, PaperConfig, LabelTemplate, RecordRow, ExportRangeConfig, CutLineConfig, ElementVisibilityMode, VisibilityRule } from '../types'; import { DataImporter } from './DataImporter'; import { VariableMappingPanel } from './VariableMappingPanel'; import { PaperSettingsPanel, PageInput } from './PreviewGrid'; import { CollapsiblePanelSection } from './CollapsiblePanelSection'; import { DataRangeFields } from './DataRangeFields'; import { FieldSelect } from './PsSelect'; import { PrintModule } from './PrintModule'; import { LayoutPageBackgroundFields } from './LayoutPageBackgroundFields'; interface ExportSidebarProps { importData: ImportData | null; onDataLoaded: (data: ImportData) => void; onClear: () => void; templateName: string; templateVariables: string[]; dataColumns: string[]; variableColumnMapping: Record; onChangeMapping: (mapping: Record) => void; paper: PaperConfig; onChangePaper: (updated: PaperConfig) => void; template: LabelTemplate; onChangeTemplate: (updated: LabelTemplate) => void; rows: RecordRow[]; draftExportRange: ExportRangeConfig; onChangeDraftExportRange: (range: ExportRangeConfig) => void; onChangeDataFilterRules: (rules: VisibilityRule[]) => void; cutLine: CutLineConfig; onChangeCutLine: (cutLine: CutLineConfig) => void; previewReady: boolean; dataStale: boolean; previewLayoutStale: boolean; dataApplied: boolean; onApplyData: () => void; onRedrawPreview: () => void; draftSelectedCount: number; printing: boolean; onPrint: (printerId: string) => void; imagesExporting?: boolean; onExportImages?: () => void; exportImageFileNamePattern?: string; onChangeExportImageFileNamePattern?: (pattern: string) => void; exportImageFilterMode?: ElementVisibilityMode; exportImageFilterRules?: VisibilityRule[]; onChangeExportImageFilterMode?: (mode: ElementVisibilityMode) => void; onChangeExportImageFilterRules?: (rules: VisibilityRule[]) => void; printDisabled: boolean; /** 移动端精简：仅数据、映射、数据范围 */ compact?: boolean; } export const ExportSidebar: React.FC = ({ importData, onDataLoaded, onClear, templateName, templateVariables, dataColumns, variableColumnMapping, onChangeMapping, paper, onChangePaper, template, onChangeTemplate, rows, draftExportRange, onChangeDraftExportRange, onChangeDataFilterRules, cutLine, onChangeCutLine, previewReady, dataStale, previewLayoutStale, dataApplied, onApplyData, onRedrawPreview, draftSelectedCount, printing, onPrint, imagesExporting = false, onExportImages, exportImageFileNamePattern = '', onChangeExportImageFileNamePattern, exportImageFilterMode = 'always', exportImageFilterRules = [], onChangeExportImageFilterMode, onChangeExportImageFilterRules, printDisabled, compact = false, }) => { type ExportPanelKey = 'data' | 'layout' | 'print'; const [activePanel, setActivePanel] = useState('data'); const dataCollapsed = activePanel !== 'data'; const layoutCollapsed = activePanel !== 'layout'; const printCollapsed = activePanel !== 'print'; const toggleExportPanel = (key: ExportPanelKey) => { setActivePanel((prev) => (prev === key ? null : key)); }; const hasData = rows.length > 0; const dataRangeSection = ( ); const applyDataSection = (
{/* {dataStale && (

数据、映射或数据范围已变更，请先应用数据

)} {previewLayoutStale && previewReady && !dataStale && (

模板或排版已变更，请重新绘制预览

)} */}

应用数据后预览与 PDF 才使用最新映射与数据范围

); if (compact) { return ( ); } return ( ); };