tools/label-designer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据

Browse Source
This commit is contained in:
iqudoo
2026-06-14 04:12:21 +08:00
parent 1e03b7750a
commit ccb5b119de
6 changed files with 181 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.tsx
View File

@@ -703,7 +703,7 @@ export default function App() {
if (previewSnapshot !== null && appliedExportData !== null) {
setPreviewLayoutStale(true);
}
}, [workingTemplate.elements, workingTemplate.width, workingTemplate.height]);
}, [workingTemplate.elements, workingTemplate.width, workingTemplate.height, workingTemplate.dataFilterRules]);
useEffect(() => {
if (workflowStep !== 'print-view') return;
@@ -734,6 +734,7 @@ export default function App() {
appliedMappedRows,
workingTemplate.width,
workingTemplate.height,
workingTemplate.dataFilterRules,
]);
const pdfExportImage = useMemo(() => {
@@ -770,6 +771,14 @@ export default function App() {
});
};
const handleDataFilterRulesChange = (rules: VisibilityRule[]) => {
if (!activeTemplate) return;
handleTemplateChange({
...activeTemplate,
dataFilterRules: rules.length > 0 ? rules : undefined,
});
};
const renderAppliedLabelToDataUrl = useCallback(
(label: PrintableLabel) =>
renderLabelToDataUrl({
@@ -1440,6 +1449,7 @@ export default function App() {
rows={mappedRows}
draftExportRange={draftExportRange}
onChangeDraftExportRange={setDraftExportRange}
onChangeDataFilterRules={handleDataFilterRulesChange}
cutLine={cutLine}
onChangeCutLine={handleCutLineChange}
printablePages={previewSnapshot?.pages ?? []}
@@ -1561,6 +1571,7 @@ export default function App() {
rows={mappedRows}
draftExportRange={draftExportRange}
onChangeDraftExportRange={setDraftExportRange}
onChangeDataFilterRules={handleDataFilterRulesChange}
cutLine={cutLine}
onChangeCutLine={handleCutLineChange}
previewReady={previewSnapshot !== null}

132
src/components/DataRangeFields.tsx
View File

@@ -1,6 +1,10 @@
import React, { useMemo } from 'react';
import { ExportRangeConfig, LabelTemplate, PaperConfig, RecordRow } from '../types';
import { buildPrintablePages, extractTemplateVariables } from '../utils';
import { ExportRangeConfig, LabelTemplate, PaperConfig, RecordRow, VisibilityRule } from '../types';
import {
buildPrintablePages,
extractTemplateVariables,
getDataFilteredIndices,
} from '../utils';
import { PageInput } from './PreviewGrid';
import { FieldSelect } from './PsSelect';
import { VariableFilterRulesEditor } from './VariableFilterRulesEditor';
@@ -9,82 +13,104 @@ interface DataRangeFieldsProps {
variant?: 'ps' | 'mobile';
exportRange: ExportRangeConfig;
onChangeExportRange: (range: ExportRangeConfig) => void;
onChangeDataFilterRules: (rules: VisibilityRule[]) => void;
rows: RecordRow[];
paper: PaperConfig;
template: LabelTemplate;
disabled?: boolean;
/** 排版过滤在无数据时不可用；数据过滤始终可编辑 */
layoutDisabled?: boolean;
}
export const DataRangeFields: React.FC<DataRangeFieldsProps> = ({
variant = 'ps',
exportRange,
onChangeExportRange,
onChangeDataFilterRules,
rows,
paper,
template,
disabled = false,
layoutDisabled = false,
}) => {
const isMobile = variant === 'mobile';
const variableDefaults = template.variableDefaults ?? null;
const templateVariables = useMemo(() => extractTemplateVariables(template), [template]);
const dataFilteredCount = useMemo(
() => getDataFilteredIndices(rows, template, variableDefaults).length,
[rows, template, variableDefaults]
);
const rangeStats = buildPrintablePages(rows, paper, template, exportRange, variableDefaults);
const patchRange = (patch: Partial<ExportRangeConfig>) => {
onChangeExportRange({ ...exportRange, ...patch });
};
const sectionTitleClass = isMobile ? 'mobile-field-label mb-1 block' : 'ps-section-title';
const hintClass = isMobile ? 'text-[10px] text-slate-500' : 'text-[10px] text-[#888]';
return (
<div className={isMobile ? 'space-y-4' : 'space-y-2'}>
{!isMobile && <div className="ps-section-title">数据范围</div>}
<div>
{isMobile && <label className="mobile-field-label">范围</label>}
<FieldSelect
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>
<option value="conditional">按条件过滤</option>
</FieldSelect>
</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 className={isMobile ? 'space-y-4' : 'space-y-3'}>
<div className="space-y-2">
{rows.length > 0 && (
<div className="space-y-2">
<div className={sectionTitleClass}>排版过滤</div>
<p className={hintClass}>仅影响当前导出会话</p>
<div>
{isMobile && <label className="mobile-field-label">范围</label>}
<FieldSelect
value={exportRange.mode}
disabled={layoutDisabled}
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>
</FieldSelect>
</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={layoutDisabled}
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={hintClass}>
最终范围：{rangeStats.selectedCount} / {rows.length} 行
</p>
</div>
)}
<div className="space-y-3">
<div className={sectionTitleClass}>数据过滤</div>
<p className={hintClass}>条件写入模板；全部满足的数据行才参与排版与导出。</p>
<VariableFilterRulesEditor
rules={template.dataFilterRules ?? []}
templateVariables={templateVariables}
emptyHint="尚未添加过滤条件，将使用全部数据行"
description="按数据行与变量默认值判断；上传数据后可预览过滤结果。"
addTitle="添加数据过滤条件"
editTitle="编辑数据过滤条件"
onChangeRules={onChangeDataFilterRules}
/>
{rows.length > 0 && (
<p className={hintClass}>
数据过滤后：{dataFilteredCount} / {rows.length} 行
</p>
)}
</div>
)}
{exportRange.mode === 'conditional' && (
<VariableFilterRulesEditor
rules={exportRange.filterRules ?? []}
templateVariables={templateVariables}
disabled={disabled}
emptyHint="尚未添加过滤条件，将使用全部数据行"
description="全部条件满足的数据行才纳入排版与导出；按数据行与变量默认值判断。"
addTitle="添加数据范围条件"
editTitle="编辑数据范围条件"
onChangeRules={(filterRules) => patchRange({ filterRules })}
/>
)}
{rows.length > 0 && (
<p className={isMobile ? 'text-[10px] text-slate-500' : 'text-[10px] text-[#888]'}>
当前范围：{rangeStats.selectedCount} / {rows.length} 行
</p>
)}
</div>
</div>
);
};

9
src/components/ExportSidebar.tsx
View File

@@ -24,6 +24,7 @@ interface ExportSidebarProps {
rows: RecordRow[];
draftExportRange: ExportRangeConfig;
onChangeDraftExportRange: (range: ExportRangeConfig) => void;
onChangeDataFilterRules: (rules: VisibilityRule[]) => void;
cutLine: CutLineConfig;
onChangeCutLine: (cutLine: CutLineConfig) => void;
previewReady: boolean;
@@ -64,6 +65,7 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
rows,
draftExportRange,
onChangeDraftExportRange,
onChangeDataFilterRules,
cutLine,
onChangeCutLine,
previewReady,
@@ -102,10 +104,11 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
variant={compact ? 'ps' : 'ps'}
exportRange={draftExportRange}
onChangeExportRange={onChangeDraftExportRange}
onChangeDataFilterRules={onChangeDataFilterRules}
rows={rows}
paper={paper}
template={template}
disabled={rows.length === 0}
layoutDisabled={rows.length === 0}
/>
);
@@ -155,6 +158,7 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
templateVariables={templateVariables}
/>
</div>
{dataRangeSection}
{hasData && (
<>
<div>
@@ -167,7 +171,6 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
variableDefaults={template.variableDefaults}
/>
</div>
{dataRangeSection}
{applyDataSection}
</>
)}
@@ -194,6 +197,7 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
templateName={templateName}
templateVariables={templateVariables}
/>
{dataRangeSection}
{hasData && (
<>
<VariableMappingPanel
@@ -204,7 +208,6 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
onChangeMapping={onChangeMapping}
variableDefaults={template.variableDefaults}
/>
{dataRangeSection}
{applyDataSection}
</>
)}

39
src/components/MobileExportView.tsx
View File

@@ -53,6 +53,7 @@ interface MobileExportViewProps {
rows: RecordRow[];
draftExportRange: ExportRangeConfig;
onChangeDraftExportRange: (range: ExportRangeConfig) => void;
onChangeDataFilterRules: (rules: VisibilityRule[]) => void;
cutLine: CutLineConfig;
onChangeCutLine: (cutLine: CutLineConfig) => void;
printablePages: (PrintableLabel | null)[][];
@@ -97,6 +98,7 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
rows,
draftExportRange,
onChangeDraftExportRange,
onChangeDataFilterRules,
cutLine,
onChangeCutLine,
printablePages,
@@ -247,28 +249,27 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
templateVariables={templateVariables}
/>
{hasData && (
<>
<div>
<p className="text-[11px] font-semibold text-[#e8e8e8] mb-2">关联变量</p>
<VariableMappingPanel
variant="ps"
variables={templateVariables}
columns={dataColumns}
mapping={variableColumnMapping}
onChangeMapping={onChangeMapping}
variableDefaults={template.variableDefaults}
/>
</div>
<DataRangeFields
<div>
<p className="text-[11px] font-semibold text-[#e8e8e8] mb-2">关联变量</p>
<VariableMappingPanel
variant="ps"
exportRange={draftExportRange}
onChangeExportRange={onChangeDraftExportRange}
rows={rows}
paper={paper}
template={template}
variables={templateVariables}
columns={dataColumns}
mapping={variableColumnMapping}
onChangeMapping={onChangeMapping}
variableDefaults={template.variableDefaults}
/>
</>
</div>
)}
<DataRangeFields
variant="ps"
exportRange={draftExportRange}
onChangeExportRange={onChangeDraftExportRange}
onChangeDataFilterRules={onChangeDataFilterRules}
rows={rows}
paper={paper}
template={template}
/>
{/* {exportBlockedReason && !pdfGenerating && (
<p className="text-[10px] text-amber-500/90 text-center">{exportBlockedReason}</p>
)} */}

8
src/types.ts
View File

@@ -222,14 +222,12 @@ export interface CutLineConfig {
color: string;
}
export type ExportRangeMode = 'all' | 'odd' | 'even' | 'custom' | 'conditional';
export type ExportRangeMode = 'all' | 'odd' | 'even' | 'custom';
export interface ExportRangeConfig {
mode: ExportRangeMode;
/** 自定义范围：1-based 序号，如 "1,3,5-10" */
/** 自定义范围：1-based 序号，如 "1,3,5-10"（排版过滤，不写入模板） */
custom?: string;
/** mode=conditional 时，全部满足才纳入排版/导出范围 */
filterRules?: VisibilityRule[];
}
export interface LabelTemplate {
@@ -242,6 +240,8 @@ export interface LabelTemplate {
variableList?: string[];
/** 设计预览用：变量名 → 默认展示值 */
variableDefaults?: Record<string, string>;
/** 数据过滤条件（写入模板）；全部满足的数据行才参与排版/导出 */
dataFilterRules?: VisibilityRule[];
/** 整页排版配置（每模板独立） */
paper?: PaperConfig;
/** PDF 裁切参考线配置 */

94
src/utils.ts
View File

@@ -155,9 +155,63 @@ export function applyRowVariableMapping(
export const DEFAULT_EXPORT_RANGE: ExportRangeConfig = { mode: 'all' };
export const exportRangeEquals = (a: ExportRangeConfig, b: ExportRangeConfig) =>
a.mode === b.mode &&
(a.custom ?? '') === (b.custom ?? '') &&
JSON.stringify(a.filterRules ?? []) === JSON.stringify(b.filterRules ?? []);
a.mode === b.mode && (a.custom ?? '') === (b.custom ?? '');
/** 模板数据过滤规则（仅 variable 目标） */
export function resolveDataFilterRules(
template: Pick<LabelTemplate, 'dataFilterRules'>
): VisibilityRule[] {
return resolveVariableFilterRules(template.dataFilterRules);
}
/** 按模板数据过滤条件筛选 0-based 行索引 */
export function getDataFilteredIndices(
rows: RecordRow[],
template: Pick<LabelTemplate, 'dataFilterRules'>,
variableDefaults?: Record<string, string> | null
): number[] {
const total = rows.length;
if (total <= 0) return [];
const rules = getActiveVisibilityRules(resolveDataFilterRules(template));
if (rules.length === 0) return Array.from({ length: total }, (_, i) => i);
return Array.from({ length: total }, (_, i) => i).filter((i) =>
rowMatchesVariableFilterRules(rows[i], i, rules, variableDefaults)
);
}
/** 在候选行上应用排版过滤（奇偶/自定义序号，基于原始 1-based 行号） */
export function getLayoutRangeIndices(
candidateIndices: number[],
totalRows: number,
range: ExportRangeConfig
): number[] {
if (candidateIndices.length === 0) return [];
switch (range.mode) {
case 'odd':
return candidateIndices.filter((i) => (i + 1) % 2 === 1);
case 'even':
return candidateIndices.filter((i) => (i + 1) % 2 === 0);
case 'custom': {
const parsed = parseCustomExportRange(range.custom ?? '', totalRows);
const candidateSet = new Set(candidateIndices);
return parsed.filter((i) => candidateSet.has(i));
}
case 'all':
default:
return candidateIndices;
}
}
/** 按数据过滤 + 排版过滤得到最终 0-based 行索引（保持升序） */
export function getExportRangeIndices(
rows: RecordRow[],
range: ExportRangeConfig,
template: Pick<LabelTemplate, 'dataFilterRules'>,
variableDefaults?: Record<string, string> | null
): number[] {
const dataFiltered = getDataFilteredIndices(rows, template, variableDefaults);
return getLayoutRangeIndices(dataFiltered, rows.length, range);
}
export const DEFAULT_CUT_LINE_CONFIG: CutLineConfig = {
enabled: true,
@@ -247,34 +301,6 @@ export interface PrintableLabel {
sourceIndex: number;
}
/** 按导出范围筛选 0-based 行索引（保持升序） */
export function getExportRangeIndices(
rows: RecordRow[],
range: ExportRangeConfig,
variableDefaults?: Record<string, string> | null
): number[] {
const total = rows.length;
if (total <= 0) return [];
switch (range.mode) {
case 'odd':
return Array.from({ length: total }, (_, i) => i).filter((i) => (i + 1) % 2 === 1);
case 'even':
return Array.from({ length: total }, (_, i) => i).filter((i) => (i + 1) % 2 === 0);
case 'custom':
return parseCustomExportRange(range.custom ?? '', total);
case 'conditional': {
const rules = resolveVariableFilterRules(range.filterRules);
if (rules.length === 0) return Array.from({ length: total }, (_, i) => i);
return Array.from({ length: total }, (_, i) => i).filter((i) =>
rowMatchesVariableFilterRules(rows[i], i, rules, variableDefaults)
);
}
case 'all':
default:
return Array.from({ length: total }, (_, i) => i);
}
}
/** 解析自定义范围字符串（1-based 序号） */
export function parseCustomExportRange(input: string, total: number): number[] {
const trimmed = input.trim();
@@ -300,13 +326,13 @@ export function parseCustomExportRange(input: string, total: number): number[] {
export function buildPrintablePages(
rows: RecordRow[],
paper: PaperConfig,
labelSize: { width: number; height: number },
template: Pick<LabelTemplate, 'width' | 'height' | 'dataFilterRules'>,
exportRange: ExportRangeConfig,
variableDefaults?: Record<string, string> | null
) {
const gridInfo = calculateGrid(paper, labelSize);
const gridInfo = calculateGrid(paper, template);
const labelsPerPage = gridInfo.cols * gridInfo.rows;
const indices = getExportRangeIndices(rows, exportRange, variableDefaults);
const indices = getExportRangeIndices(rows, exportRange, template, variableDefaults);
const selected: PrintableLabel[] = indices.map((i) => ({ row: rows[i], sourceIndex: i }));
const totalPages = Math.ceil(selected.length / labelsPerPage) || 1;
const pages: (PrintableLabel | null)[][] = [];