init commit

src/components/DataRangeFields.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Filter } from 'lucide-react';
+import { ExportRangeConfig, LabelTemplate, PaperConfig, RecordRow } from '../types';
+import { buildPrintablePages } from '../utils';
+import { PageInput } from './PreviewGrid';
+
+interface DataRangeFieldsProps {
+  variant?: 'ps' | 'mobile';
+  exportRange: ExportRangeConfig;
+  onChangeExportRange: (range: ExportRangeConfig) => void;
+  rows: RecordRow[];
+  paper: PaperConfig;
+  template: LabelTemplate;
+  disabled?: boolean;
+}
+
+export const DataRangeFields: React.FC<DataRangeFieldsProps> = ({
+  variant = 'ps',
+  exportRange,
+  onChangeExportRange,
+  rows,
+  paper,
+  template,
+  disabled = false,
+}) => {
+  const isMobile = variant === 'mobile';
+  const rangeStats = buildPrintablePages(rows, paper, template, exportRange);
+
+  const patchRange = (patch: Partial<ExportRangeConfig>) => {
+    onChangeExportRange({ ...exportRange, ...patch });
+  };
+
+  return (
+    <div className={isMobile ? 'space-y-4' : 'space-y-2'}>
+      {!isMobile && <div className="ps-section-title">数据范围</div>}
+      {isMobile && (
+        <div className="flex items-center gap-2">
+          <Filter className="w-4 h-4 text-indigo-500 shrink-0" />
+          <span className="text-sm font-semibold text-slate-800">数据范围</span>
+        </div>
+      )}
+      <p className={isMobile ? 'text-xs text-slate-500 leading-relaxed' : 'text-[10px] text-[#888] leading-relaxed'}>
+        序号指数据行顺序（从 1 开始），应用数据后生效。
+      </p>
+      <div>
+        {isMobile && <label className="mobile-field-label">范围</label>}
+        {!isMobile && <label className="ps-field-label">范围</label>}
+        <select
+          value={exportRange.mode}
+          disabled={disabled}
+          onChange={(e) => patchRange({ mode: e.target.value as ExportRangeConfig['mode'] })}
+          className={isMobile ? 'mobile-field' : 'ps-field text-[11px]'}
+        >
+          <option value="all">全部行</option>
+          <option value="odd">仅奇数序号</option>
+          <option value="even">仅偶数序号</option>
+          <option value="custom">自定义序号</option>
+        </select>
+      </div>
+      {exportRange.mode === 'custom' && (
+        <div>
+          {isMobile ? (
+            <label className="mobile-field-label">自定义序号</label>
+          ) : (
+            <label className="ps-field-label">自定义序号</label>
+          )}
+          <PageInput
+            type="text"
+            value={exportRange.custom ?? ''}
+            disabled={disabled}
+            onCommit={(val) => patchRange({ custom: val })}
+            placeholder="如 1,3,5-10"
+            inputClassName={isMobile ? 'mobile-field font-mono' : 'ps-field font-mono text-[11px]'}
+          />
+        </div>
+      )}
+      <p className={isMobile ? 'text-xs text-slate-500' : 'text-[10px] text-[#777]'}>
+        将选 {rangeStats.selectedCount} 枚
+        {rangeStats.selectedCount < rows.length && ` / 共 ${rows.length} 行`}
+        {isMobile && rangeStats.selectedCount > 0 && (
+          <span>
+            {' '}
+            · 约 {rangeStats.totalPages} 页 PDF
+          </span>
+        )}
+      </p>
+    </div>
+  );
+};