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

fix

Browse Source
This commit is contained in:
iqudoo
2026-06-14 10:25:15 +08:00
parent ccb5b119de
commit 846061ab48
6 changed files with 56 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/LabelDesigner.tsx
View File

@@ -229,6 +229,13 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
[template.variableDefaults]
);
const showReferencePreview = useMemo(
() =>
!!template.previewReferenceBackground &&
template.enablePreviewReferenceBackground !== false,
[template.previewReferenceBackground, template.enablePreviewReferenceBackground]
);
const localElementsRef = useRef<TemplateElement[] | null>(null);
/** 交互开始时的元素快照：拖动底图分层、缩放节流重绘 */
const [interactionSnapshot, setInteractionSnapshot] = useState<TemplateElement[] | null>(
@@ -1654,10 +1661,10 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
<div
ref={canvasRef}
className={`absolute inset-0 shadow-[0_2px_20px_rgba(0,0,0,0.5)] select-none overflow-hidden ${
template.previewReferenceBackground ? '' : 'bg-white'
showReferencePreview ? '' : 'bg-white'
}`}
>
{template.previewReferenceBackground && (
{showReferencePreview && (
<img
src={template.previewReferenceBackground}
alt=""
@@ -1681,7 +1688,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
rowData={null}
rowIndex={0}
showBorder={false}
transparentBackground={!!template.previewReferenceBackground}
transparentBackground={showReferencePreview}
variableDefaults={previewDefaults}
renderScale={canvasRenderScale}
/>

23
src/components/PropSidebar.tsx
View File

@@ -858,7 +858,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
预览参考背景
</h5>
<p className="text-[9px] text-[#777] leading-relaxed">
上传底图作为设计参考，便于对照条件显示的背景元素；默认仅设计画布可见，可按需开启生成与打印输出。
上传底图作为设计参考；可分别控制设计预览与生成/打印输出是否显示。
</p>
<label className="ps-btn text-[10px] cursor-pointer inline-flex">
<Upload className="w-3.5 h-3.5" />
@@ -879,6 +879,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
template.previewReferenceBackgroundOpacity ?? 100,
previewReferenceBackgroundFit:
template.previewReferenceBackgroundFit ?? 'cover',
enablePreviewReferenceBackground: true,
});
reader.readAsDataURL(file);
e.target.value = '';
@@ -930,6 +931,25 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
className="w-full accent-[#31a8ff]"
/>
</div>
<label className="flex items-start gap-2">
<input
type="checkbox"
checked={template.enablePreviewReferenceBackground !== false}
onChange={(e) =>
onChangeTemplate({
...template,
enablePreviewReferenceBackground: e.target.checked ? true : false,
})
}
className="ps-checkbox mt-0.5"
/>
<span className="text-xs text-[#ccc] leading-normal">
设计预览中显示参考背景
<span className="block text-[9px] text-[#777] mt-0.5">
控制设计画布与模板列表缩略图；关闭后仍保留参考图，可随时重新开启
</span>
</span>
</label>
<label className="flex items-start gap-2">
<input
type="checkbox"
@@ -957,6 +977,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
previewReferenceBackground: undefined,
previewReferenceBackgroundOpacity: undefined,
previewReferenceBackgroundFit: undefined,
enablePreviewReferenceBackground: undefined,
includeReferenceBackgroundInOutput: undefined,
})
}

8
src/components/VisibilityRuleDialog.tsx
View File

@@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { X } from 'lucide-react';
import { VisibilityRule } from '../types';
import { visibilityOperatorNeedsValue } from '../utils';
@@ -65,7 +66,7 @@ export const VisibilityRuleDialog: React.FC<VisibilityRuleDialogProps> = ({
return () => window.removeEventListener('keydown', onKeyDown);
}, [open, onClose]);
if (!open) return null;
if (!open || typeof document === 'undefined') return null;
const target = draft.target ?? 'variable';
const canConfirm = target === 'content' || draft.variable.trim().length > 0;
@@ -86,7 +87,7 @@ export const VisibilityRuleDialog: React.FC<VisibilityRuleDialogProps> = ({
onClose();
};
return (
return createPortal(
<div className="ps-modal-overlay" onClick={onClose} role="presentation">
<div
className="ps-modal"
@@ -131,6 +132,7 @@ export const VisibilityRuleDialog: React.FC<VisibilityRuleDialogProps> = ({
</div>
</form>
</div>
</div>
</div>,
document.body
);
};

2
src/index.css
View File

@@ -590,7 +590,7 @@ html.app-dark-shell body {
.ps-modal-overlay {
position: fixed;
inset: 0;
z-index: 9000;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;

19
src/labelRenderer.ts
View File

@@ -588,7 +588,10 @@ export type ReferenceBackgroundRenderOptions = Pick<
type ReferenceBackgroundTemplate = Pick<
LabelTemplate,
'previewReferenceBackground' | 'previewReferenceBackgroundOpacity' | 'previewReferenceBackgroundFit'
| 'previewReferenceBackground'
| 'previewReferenceBackgroundOpacity'
| 'previewReferenceBackgroundFit'
| 'enablePreviewReferenceBackground'
>;
function buildReferenceBackgroundRenderOptions(
@@ -597,6 +600,9 @@ function buildReferenceBackgroundRenderOptions(
if (!template.previewReferenceBackground) {
return {};
}
if (template.enablePreviewReferenceBackground === false) {
return {};
}
return {
referenceBackground: template.previewReferenceBackground,
referenceBackgroundOpacity: template.previewReferenceBackgroundOpacity ?? 100,
@@ -604,7 +610,7 @@ function buildReferenceBackgroundRenderOptions(
};
}
/** 模板列表 / 设计预览等：有参考图即绘制 */
/** 模板列表 / 设计预览等：参考图且启用预览时绘制 */
export function resolveReferenceBackgroundForPreview(
template: ReferenceBackgroundTemplate
): ReferenceBackgroundRenderOptions {
@@ -619,7 +625,14 @@ export function resolveReferenceBackgroundForOutput(
if (!template.includeReferenceBackgroundInOutput) {
return {};
}
return buildReferenceBackgroundRenderOptions(template);
if (!template.previewReferenceBackground) {
return {};
}
return {
referenceBackground: template.previewReferenceBackground,
referenceBackgroundOpacity: template.previewReferenceBackgroundOpacity ?? 100,
referenceBackgroundFit: template.previewReferenceBackgroundFit ?? 'cover',
};
}
/** 离屏渲染标签为 PNG data URL */

2
src/types.ts
View File

@@ -252,6 +252,8 @@ export interface LabelTemplate {
previewReferenceBackgroundOpacity?: number;
/** 预览参考背景适应方式，默认 cover */
previewReferenceBackgroundFit?: 'contain' | 'cover' | 'fill';
/** 设计预览（画布、模板列表缩略图）是否显示参考背景，默认 true */
enablePreviewReferenceBackground?: boolean;
/** 生成 PDF / 打印 / 排版预览输出时是否绘制参考背景，默认 false */
includeReferenceBackgroundInOutput?: boolean;
/** 批量导出图片时的文件名模板，支持 {#SEQ}、{#INDEX}、{变量名}；留空则按序号补零命名 */