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-13 03:41:20 +08:00
parent 979a565468
commit 3b9724beb3
7 changed files with 634 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/App.tsx
View File

@@ -25,6 +25,7 @@ import { exportLabelsPdfAsync, type PdfExportProgress } from './pdfExport';
import { useIsMobile } from './hooks/useIsMobile';
import { useUndoRedo } from './hooks/useUndoRedo';
import { useAppDialog } from './components/AppDialog';
import { AnchoredMenu } from './components/AnchoredMenu';
import {
FileDown,
Code,
@@ -153,7 +154,7 @@ export default function App() {
const [editingTemplateId, setEditingTemplateId] = useState<string | null>(null);
const [editTmplName, setEditTmplName] = useState<string>('');
const [templateMenuId, setTemplateMenuId] = useState<string | null>(null);
const templateMenuRef = useRef<HTMLDivElement | null>(null);
const templateMenuAnchorRef = useRef<HTMLDivElement | null>(null);
const [headerTemplateMenuOpen, setHeaderTemplateMenuOpen] = useState(false);
const headerTemplateMenuRef = useRef<HTMLDivElement | null>(null);
const importTemplateInputRef = useRef<HTMLInputElement | null>(null);
@@ -390,26 +391,6 @@ export default function App() {
const closeTemplateMenu = () => setTemplateMenuId(null);
useEffect(() => {
if (!templateMenuId) return;
const handlePointerDown = (e: PointerEvent) => {
if (templateMenuRef.current?.contains(e.target as Node)) return;
closeTemplateMenu();
};
document.addEventListener('pointerdown', handlePointerDown);
return () => document.removeEventListener('pointerdown', handlePointerDown);
}, [templateMenuId]);
useEffect(() => {
if (!headerTemplateMenuOpen) return;
const handlePointerDown = (e: PointerEvent) => {
if (headerTemplateMenuRef.current?.contains(e.target as Node)) return;
setHeaderTemplateMenuOpen(false);
};
document.addEventListener('pointerdown', handlePointerDown);
return () => document.removeEventListener('pointerdown', handlePointerDown);
}, [headerTemplateMenuOpen]);
const handleEditTemplateSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!editingTemplateId) return;
@@ -841,10 +822,11 @@ export default function App() {
>
<MoreHorizontal className="w-5 h-5 shrink-0" />
</button>
{headerTemplateMenuOpen && (
<div
role="menu"
className="absolute right-0 top-full mt-1 z-30 min-w-[148px] py-1 bg-white border border-gray-200 rounded-xl shadow-lg"
<AnchoredMenu
open={headerTemplateMenuOpen}
onClose={() => setHeaderTemplateMenuOpen(false)}
anchorRef={headerTemplateMenuRef}
className="min-w-[148px] py-1 bg-white border border-gray-200 rounded-xl shadow-lg"
>
<button
type="button"
@@ -870,8 +852,7 @@ export default function App() {
<Upload className="w-4 h-4 shrink-0" />
导入模板
</button>
</div>
)}
</AnchoredMenu>
</div>
</>
) : (
@@ -1067,7 +1048,7 @@ export default function App() {
{isMobile ? '生成' : '排版导出'}
</button>
<div
ref={templateMenuId === tmpl.id ? templateMenuRef : null}
ref={templateMenuId === tmpl.id ? templateMenuAnchorRef : null}
className="relative shrink-0"
>
<button
@@ -1085,11 +1066,11 @@ export default function App() {
>
<MoreHorizontal className={`${isMobile ? 'w-5 h-5' : 'w-4 h-4'} shrink-0`} />
</button>
{templateMenuId === tmpl.id && (
<div
role="menu"
className="absolute right-0 top-full mt-1 z-30 min-w-[90px] py-1 bg-white border border-gray-200 rounded-xl shadow-lg"
onClick={(e) => e.stopPropagation()}
<AnchoredMenu
open={templateMenuId === tmpl.id}
onClose={closeTemplateMenu}
anchorRef={templateMenuAnchorRef}
className="min-w-[120px] py-1 bg-white border border-gray-200 rounded-xl shadow-lg"
>
<button
type="button"
@@ -1130,8 +1111,7 @@ export default function App() {
<Trash2 className="w-4 h-4 shrink-0" />
删除
</button>
</div>
)}
</AnchoredMenu>
</div>
</div>
</div>

110
src/components/AnchoredMenu.tsx Normal file
View File

@@ -0,0 +1,110 @@
import React, { useLayoutEffect, useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
const MENU_GAP = 4;
const VIEWPORT_PAD = 8;
function useAnchoredMenuPosition(
open: boolean,
anchorRef: React.RefObject<HTMLElement | null>,
menuRef: React.RefObject<HTMLElement | null>
) {
const [coords, setCoords] = useState<{ top: number; left: number } | null>(null);
useLayoutEffect(() => {
if (!open) {
setCoords(null);
return;
}
const update = () => {
const anchor = anchorRef.current;
const menu = menuRef.current;
if (!anchor || !menu) return;
const anchorRect = anchor.getBoundingClientRect();
const menuWidth = menu.offsetWidth;
const menuHeight = menu.offsetHeight;
let top = anchorRect.bottom + MENU_GAP;
if (top + menuHeight > window.innerHeight - VIEWPORT_PAD) {
top = anchorRect.top - menuHeight - MENU_GAP;
}
top = Math.max(
VIEWPORT_PAD,
Math.min(top, window.innerHeight - menuHeight - VIEWPORT_PAD)
);
let left = anchorRect.right - menuWidth;
left = Math.max(
VIEWPORT_PAD,
Math.min(left, window.innerWidth - menuWidth - VIEWPORT_PAD)
);
setCoords({ top, left });
};
update();
const raf = requestAnimationFrame(update);
window.addEventListener('resize', update);
window.addEventListener('scroll', update, true);
return () => {
cancelAnimationFrame(raf);
window.removeEventListener('resize', update);
window.removeEventListener('scroll', update, true);
};
}, [open, anchorRef, menuRef]);
return coords;
}
interface AnchoredMenuProps {
open: boolean;
onClose: () => void;
anchorRef: React.RefObject<HTMLElement | null>;
children: React.ReactNode;
className?: string;
}
export const AnchoredMenu: React.FC<AnchoredMenuProps> = ({
open,
onClose,
anchorRef,
children,
className = '',
}) => {
const menuRef = useRef<HTMLDivElement | null>(null);
const coords = useAnchoredMenuPosition(open, anchorRef, menuRef);
useEffect(() => {
if (!open) return;
const handlePointerDown = (e: PointerEvent) => {
const target = e.target as Node;
if (menuRef.current?.contains(target) || anchorRef.current?.contains(target)) return;
onClose();
};
document.addEventListener('pointerdown', handlePointerDown);
return () => document.removeEventListener('pointerdown', handlePointerDown);
}, [open, onClose, anchorRef]);
if (!open) return null;
return createPortal(
<div
ref={menuRef}
role="menu"
className={className}
style={{
position: 'fixed',
top: coords?.top ?? 0,
left: coords?.left ?? 0,
visibility: coords ? 'visible' : 'hidden',
zIndex: 9999,
}}
onClick={(e) => e.stopPropagation()}
>
{children}
</div>,
document.body
);
};

73
src/components/ElementFloatPreview.tsx Normal file
View File

@@ -0,0 +1,73 @@
import React, { useState, useEffect, useMemo } from 'react';
import { TemplateElement } from '../types';
import { mmToPx } from '../utils';
import { renderLabelToDataUrl } from '../labelRenderer';
interface ElementFloatPreviewProps {
element: TemplateElement;
renderScale: number;
displayZoom: number;
variableDefaults?: Record<string, string> | null;
}
/** 单元素离屏绘制（不裁切到标签页边界），用于拖动/缩放浮层 */
export const ElementFloatPreview: React.FC<ElementFloatPreviewProps> = ({
element,
renderScale,
displayZoom,
variableDefaults = null,
}) => {
const [dataUrl, setDataUrl] = useState('');
const elementKey = useMemo(() => JSON.stringify(element), [element]);
useEffect(() => {
let active = true;
const normalized = { ...element, x: 0, y: 0 };
renderLabelToDataUrl({
widthMm: element.width,
heightMm: element.height,
elements: [normalized],
rowData: null,
rowIndex: 0,
showBorder: false,
transparentBackground: true,
variableDefaults,
mode: 'design',
scale: renderScale,
})
.then((url) => {
if (active) setDataUrl(url);
})
.catch((err) => {
console.error('Element float preview error:', err);
});
return () => {
active = false;
};
}, [element, elementKey, renderScale, variableDefaults]);
const left = mmToPx(element.x, displayZoom);
const top = mmToPx(element.y, displayZoom);
const width = mmToPx(element.width, displayZoom);
const height = mmToPx(element.height, displayZoom);
if (!dataUrl) return null;
return (
<img
src={dataUrl}
alt=""
className="absolute pointer-events-none select-none"
style={{
left: `${left}px`,
top: `${top}px`,
width: `${width}px`,
height: `${height}px`,
imageRendering: 'auto',
}}
/>
);
};

185
src/components/LabelDesigner.tsx
View File

@@ -3,6 +3,7 @@ import { LabelTemplate, TemplateElement } from '../types';
import { mmToPx, MM_TO_PX, shouldRenderElement } from '../utils';
import { useIsNarrowScreen } from '../hooks/useIsMobile';
import { CanvasLabelImage } from './CanvasLabelImage';
import { ElementFloatPreview } from './ElementFloatPreview';
import { useAppDialog } from './AppDialog';
import {
ZoomIn,
@@ -21,6 +22,8 @@ interface LabelDesignerProps {
selectedElementIds: string[];
onSelectElements: (ids: string[]) => void;
variant?: 'desktop' | 'mobile';
/** 微调等场景下隐藏选区框与缩放手柄 */
suppressSelectionChrome?: boolean;
}
type ActiveTool = 'move' | 'text' | 'barcode' | 'qrcode';
@@ -187,6 +190,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
selectedElementIds,
onSelectElements,
variant = 'desktop',
suppressSelectionChrome = false,
}) => {
const { showConfirm } = useAppDialog();
const selectedElementId = selectedElementIds[0] || null;
@@ -204,12 +208,20 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
[template.variableDefaults]
);
const [localElements, setLocalElements] = useState<TemplateElement[] | null>(null);
const localElementsRef = useRef<TemplateElement[] | null>(null);
/** 拖拽/缩放过程中冻结底图合成，仅更新选区框位置，避免每帧重绘闪动 */
const [frozenCanvasElements, setFrozenCanvasElements] = useState<TemplateElement[] | null>(null);
/** 交互开始时的元素快照：拖动底图分层、缩放节流重绘 */
const [interactionSnapshot, setInteractionSnapshot] = useState<TemplateElement[] | null>(
null
);
/** 缩放时仅重绘当前元素的浮层内容 */
const [interactionFloatElements, setInteractionFloatElements] = useState<
TemplateElement[] | null
>(null);
const dragRafRef = useRef<number | null>(null);
const pendingDragElementsRef = useRef<TemplateElement[] | null>(null);
const dragFloatLayerRef = useRef<HTMLDivElement | null>(null);
const interactionFloatPaintRef = useRef(0);
const interactionFloatTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const [dragState, setDragState] = useState<{
elementId: string;
@@ -466,6 +478,19 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
deleteSelectedElements,
]);
const clearInteractionCanvasState = useCallback(() => {
if (interactionFloatTimerRef.current !== null) {
clearTimeout(interactionFloatTimerRef.current);
interactionFloatTimerRef.current = null;
}
interactionFloatPaintRef.current = 0;
if (dragFloatLayerRef.current) {
dragFloatLayerRef.current.style.transform = '';
}
setInteractionSnapshot(null);
setInteractionFloatElements(null);
}, []);
const cancelActiveInteraction = useCallback(() => {
if (dragRafRef.current !== null) {
cancelAnimationFrame(dragRafRef.current);
@@ -473,12 +498,11 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
}
pendingDragElementsRef.current = null;
localElementsRef.current = null;
setLocalElements(null);
setFrozenCanvasElements(null);
clearInteractionCanvasState();
setDragState(null);
dragMovedRef.current = false;
setMarqueeState(null);
}, []);
}, [clearInteractionCanvasState]);
const shouldIgnoreTouchPointer = (e: { pointerType: string; isPrimary: boolean }) => {
if (multiTouchActiveRef.current) return true;
@@ -720,12 +744,14 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
};
});
pendingDragElementsRef.current = updated;
if (dragFloatLayerRef.current) {
dragFloatLayerRef.current.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
}
if (dragRafRef.current === null) {
dragRafRef.current = requestAnimationFrame(() => {
dragRafRef.current = null;
const next = pendingDragElementsRef.current;
if (next) {
setLocalElements(next);
localElementsRef.current = next;
}
});
@@ -763,13 +789,32 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
: el
);
pendingDragElementsRef.current = updated;
const paintInteractionFloat = () => {
interactionFloatPaintRef.current = performance.now();
interactionFloatTimerRef.current = null;
const pending = pendingDragElementsRef.current?.find(
(el) => el.id === dragState.elementId
);
if (pending) setInteractionFloatElements([pending]);
};
if (dragRafRef.current === null) {
dragRafRef.current = requestAnimationFrame(() => {
dragRafRef.current = null;
const next = pendingDragElementsRef.current;
if (next) {
setLocalElements(next);
localElementsRef.current = next;
const now = performance.now();
const elapsed = now - interactionFloatPaintRef.current;
if (elapsed >= 66 || interactionFloatPaintRef.current === 0) {
paintInteractionFloat();
} else if (interactionFloatTimerRef.current === null) {
interactionFloatTimerRef.current = setTimeout(
paintInteractionFloat,
66 - elapsed
);
}
}
});
}
@@ -797,8 +842,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
}
}
localElementsRef.current = null;
setLocalElements(null);
setFrozenCanvasElements(null);
clearInteractionCanvasState();
setDragState(null);
};
@@ -810,7 +854,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
window.removeEventListener('pointerup', handlePointerUp);
window.removeEventListener('pointercancel', handlePointerUp);
};
}, [dragState, template, displayZoom, onChange, cancelActiveInteraction]);
}, [dragState, template, displayZoom, onChange, cancelActiveInteraction, clearInteractionCanvasState]);
const buildGroupStartPositions = (element: TemplateElement) => {
const moveIds =
@@ -910,7 +954,9 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
if (element.locked) return;
e.currentTarget.setPointerCapture(e.pointerId);
setFrozenCanvasElements(template.elements);
setInteractionSnapshot(template.elements);
setInteractionFloatElements(null);
interactionFloatPaintRef.current = 0;
setDragState({
elementId: element.id,
type: actionType,
@@ -936,7 +982,9 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
if (element.locked) return;
e.currentTarget.setPointerCapture(e.pointerId);
setFrozenCanvasElements(template.elements);
setInteractionSnapshot(template.elements);
setInteractionFloatElements([element]);
interactionFloatPaintRef.current = 0;
setDragState({
elementId: element.id,
type: 'resize',
@@ -968,9 +1016,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
return () => window.clearTimeout(timer);
}, [isMobileLayout, template.width, template.height]);
const selectedElemObj = (localElements || template.elements).find(
(el) => el.id === selectedElementId
);
const selectedElemObj = template.elements.find((el) => el.id === selectedElementId);
const filterVisibleElements = useCallback(
(elements: TemplateElement[]) =>
@@ -980,10 +1026,51 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
[previewDefaults]
);
const canvasPreviewElements = filterVisibleElements(
frozenCanvasElements ?? template.elements
const dragMovingIdSet = useMemo(() => {
if (dragState?.type !== 'drag' || !dragState.groupStartPositions) return null;
return new Set(Object.keys(dragState.groupStartPositions));
}, [dragState]);
const staticCanvasElements = useMemo(() => {
if (dragState?.type === 'drag' && interactionSnapshot && dragMovingIdSet) {
return filterVisibleElements(
interactionSnapshot.filter((el) => !dragMovingIdSet.has(el.id))
);
const overlayElements = filterVisibleElements(localElements ?? template.elements);
}
if (dragState?.type === 'resize' && interactionSnapshot) {
return filterVisibleElements(
interactionSnapshot.filter((el) => el.id !== dragState.elementId)
);
}
return filterVisibleElements(template.elements);
}, [
dragState?.type,
dragState?.elementId,
interactionSnapshot,
dragMovingIdSet,
template.elements,
filterVisibleElements,
]);
const dragFloatElements = useMemo(() => {
if (dragState?.type !== 'drag' || !interactionSnapshot || !dragMovingIdSet) {
return null;
}
const moving = interactionSnapshot.filter((el) => dragMovingIdSet.has(el.id));
return moving.length > 0 ? filterVisibleElements(moving) : null;
}, [dragState?.type, interactionSnapshot, dragMovingIdSet, filterVisibleElements]);
const resizeFloatElements = useMemo(() => {
if (dragState?.type !== 'resize' || !interactionFloatElements?.length) return null;
return filterVisibleElements(interactionFloatElements);
}, [dragState?.type, interactionFloatElements, filterVisibleElements]);
const interactionFloatCanvasElements = dragFloatElements ?? resizeFloatElements;
const allowInteractionOverflow = dragState !== null;
const hideSelectionChrome = suppressSelectionChrome || dragState !== null;
const overlayElements = filterVisibleElements(template.elements);
const tools: { id: ActiveTool; icon: React.ReactNode; label: string; shortcut?: string }[] = [
{ id: 'move', icon: <Move className="w-[18px] h-[18px]" />, label: '移动工具', shortcut: 'V' },
@@ -1069,9 +1156,12 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
<div
className={
isMobileLayout
? 'mobile-design-canvas-shell flex flex-col flex-1 min-w-0 min-h-0'
? `mobile-design-canvas-shell flex flex-col flex-1 min-w-0 min-h-0${
allowInteractionOverflow ? ' mobile-design-canvas-shell-interaction' : ''
}`
: 'flex flex-1 min-w-0 min-h-0'
}
data-interaction-active={allowInteractionOverflow ? '' : undefined}
>
{!isMobileLayout && (
<div className="ps-toolbar flex flex-col">
@@ -1084,7 +1174,9 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
<div className="flex flex-col flex-1 min-w-0 min-h-0">
<div
ref={canvasAreaRef}
className="flex-1 overflow-auto ps-workspace-bg ps-design-canvas-touch flex items-center justify-center min-h-0 min-w-0 p-4"
className={`flex-1 ps-workspace-bg ps-design-canvas-touch flex items-center justify-center min-h-0 min-w-0 p-4 ${
allowInteractionOverflow ? 'overflow-visible' : 'overflow-auto'
}`}
onPointerDown={handleWorkspacePointerDown}
onClick={(e) => {
if (ignoreCanvasClickRef.current) {
@@ -1097,12 +1189,16 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
}}
>
<div
ref={canvasRef}
className="relative shrink-0 grow-0 bg-white shadow-[0_2px_20px_rgba(0,0,0,0.5)] select-none"
className="relative shrink-0 grow-0"
style={{
width: `${canvasDisplayW}px`,
height: `${canvasDisplayH}px`,
overflow: allowInteractionOverflow ? 'visible' : 'hidden',
}}
>
<div
ref={canvasRef}
className="absolute inset-0 bg-white shadow-[0_2px_20px_rgba(0,0,0,0.5)] select-none overflow-hidden"
>
{/* <div className="absolute -top-5 left-0 text-[10px] font-mono text-[#aaa]">
{template.width} mm
@@ -1119,7 +1215,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
<CanvasLabelImage
widthMm={template.width}
heightMm={template.height}
elements={canvasPreviewElements}
elements={staticCanvasElements}
rowData={null}
rowIndex={0}
showBorder={false}
@@ -1152,6 +1248,17 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
const isLocked = !!element.locked;
const isSelected = !isLocked && selectedElementIds.includes(element.id);
const isPrimary = selectedElementIds.indexOf(element.id) === 0;
const isBeingDragged =
dragState?.type === 'drag' && !!dragMovingIdSet?.has(element.id);
const isBeingResized =
dragState?.type === 'resize' && dragState.elementId === element.id;
if (isBeingDragged || isBeingResized) {
return null;
}
const showSelectionRing = isSelected && !hideSelectionChrome;
const showResizeHandles =
showSelectionRing && selectedElementIds.length === 1;
const elemX = mmToPx(element.x, displayZoom);
const elemY = mmToPx(element.y, displayZoom);
const elemW = mmToPx(element.width, displayZoom);
@@ -1164,8 +1271,10 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
className={`absolute group touch-none ${
isLocked
? 'pointer-events-none'
: isSelected
: showSelectionRing
? 'ps-selection-ring cursor-move'
: isSelected
? 'cursor-move'
: 'cursor-move hover:outline hover:outline-1 hover:outline-[#31a8ff]/40'
}`}
style={{
@@ -1192,7 +1301,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
</div>
)}
{isSelected && (
{showResizeHandles && (
<>
<div
className="ps-handle top-0 left-0 -translate-x-1/2 -translate-y-1/2 cursor-nw-resize"
@@ -1226,6 +1335,30 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
);
})}
</div>
{interactionFloatCanvasElements && interactionFloatCanvasElements.length > 0 && (
<div
ref={dragFloatLayerRef}
className="absolute top-0 left-0 pointer-events-none z-[10]"
style={{
width: `${canvasDisplayW}px`,
height: `${canvasDisplayH}px`,
overflow: 'visible',
willChange: dragState?.type === 'drag' ? 'transform' : undefined,
}}
>
{interactionFloatCanvasElements.map((el) => (
<ElementFloatPreview
key={el.id}
element={el}
renderScale={canvasRenderScale}
displayZoom={displayZoom}
variableDefaults={previewDefaults}
/>
))}
</div>
)}
</div>
</div>
{isMobileLayout ? (

9
src/components/MobileDesignView.tsx
View File

@@ -1,8 +1,8 @@
import React from 'react';
import React, { useState } from 'react';
import { ChevronLeft, Printer, Undo2, Redo2 } from 'lucide-react';
import { LabelTemplate, PaperConfig } from '../types';
import { LabelDesigner } from './LabelDesigner';
import { PropSidebar } from './PropSidebar';
import { PropSidebar, MobilePropModule } from './PropSidebar';
interface MobileDesignViewProps {
template: LabelTemplate;
@@ -31,6 +31,8 @@ export const MobileDesignView: React.FC<MobileDesignViewProps> = ({
onBack,
onExport,
}) => {
const [mobileModule, setMobileModule] = useState<MobilePropModule>('properties');
return (
<div className="mobile-design-view">
<header className="mobile-design-header">
@@ -80,6 +82,7 @@ export const MobileDesignView: React.FC<MobileDesignViewProps> = ({
onChange={onChangeTemplate}
selectedElementIds={selectedElementIds}
onSelectElements={onSelectElements}
suppressSelectionChrome={mobileModule === 'nudge'}
/>
</div>
@@ -93,6 +96,8 @@ export const MobileDesignView: React.FC<MobileDesignViewProps> = ({
activeTab="element"
onChangeTab={() => {}}
paper={paper}
mobileModule={mobileModule}
onMobileModuleChange={setMobileModule}
/>
</div>
</div>

124
src/components/PropSidebar.tsx
View File

@@ -37,6 +37,9 @@ import {
Unlock,
ArrowUp,
ArrowDown,
ArrowLeft,
ArrowRight,
Move,
Layers,
Trash2,
AlignHorizontalJustifyStart,
@@ -148,7 +151,9 @@ const PropTextarea: React.FC<PropTextareaProps> = ({ value, onCommit, ...props }
);
};
type MobilePropModule = 'content' | 'properties' | 'layers';
export type MobilePropModule = 'content' | 'properties' | 'layers' | 'nudge';
const MOBILE_NUDGE_STEP_MM = 0.5;
interface PropSidebarProps {
template: LabelTemplate;
@@ -159,10 +164,13 @@ interface PropSidebarProps {
paper: PaperConfig;
onSelectElements?: (ids: string[]) => void;
variant?: 'desktop' | 'mobile';
mobileModule?: MobilePropModule;
onMobileModuleChange?: (module: MobilePropModule) => void;
}
const MOBILE_PROP_MODULES: { id: MobilePropModule; label: string; icon: React.ReactNode }[] = [
{ id: 'properties', label: '属性', icon: <Sliders className="w-4 h-4" /> },
{ id: 'nudge', label: '微调', icon: <Move className="w-4 h-4" /> },
{ id: 'content', label: '内容', icon: <Link2 className="w-4 h-4" /> },
{ id: 'layers', label: '图层', icon: <Layers className="w-4 h-4" /> },
];
@@ -176,6 +184,8 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
paper,
onSelectElements,
variant = 'desktop',
mobileModule: mobileModuleProp,
onMobileModuleChange,
}) => {
const { showConfirm } = useAppDialog();
const isNarrowScreen = useIsNarrowScreen();
@@ -186,7 +196,15 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
{ mode: 'add' } | { mode: 'edit'; index: number } | null
>(null);
const [panelCollapsed, setPanelCollapsed] = useState<PanelCollapseState>(loadPanelCollapseState);
const [mobileModule, setMobileModule] = useState<MobilePropModule>('properties');
const [internalMobileModule, setInternalMobileModule] =
useState<MobilePropModule>('properties');
const mobileModule = mobileModuleProp ?? internalMobileModule;
const setMobileModule = (module: MobilePropModule) => {
onMobileModuleChange?.(module);
if (mobileModuleProp === undefined) {
setInternalMobileModule(module);
}
};
const togglePanel = (key: keyof PanelCollapseState) => {
setPanelCollapsed((prev) => {
@@ -242,6 +260,29 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
});
};
const nudgeableElementIds = useMemo(() => {
const idSet = new Set(selectedElementIds);
return template.elements
.filter((el) => idSet.has(el.id) && !el.locked)
.map((el) => el.id);
}, [selectedElementIds, template.elements]);
const nudgeSelectedElements = (deltaX: number, deltaY: number) => {
if (nudgeableElementIds.length === 0) return;
const idSet = new Set(nudgeableElementIds);
onChangeTemplate({
...template,
elements: template.elements.map((el) => {
if (!idSet.has(el.id)) return el;
return {
...el,
x: Math.round((el.x + deltaX) * 10) / 10,
y: Math.round((el.y + deltaY) * 10) / 10,
};
}),
});
};
const applyVisibilityRules = (next: VisibilityRule[]) => {
if (!selectedElem) return;
handleElemChange({
@@ -1841,6 +1882,82 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
</>
);
const renderNudgePanelBody = () => {
const canNudge = nudgeableElementIds.length > 0;
const primaryElem =
selectedElem && nudgeableElementIds.includes(selectedElem.id) ? selectedElem : null;
return (
<div className="mobile-nudge-panel">
<div className="mobile-nudge-header space-y-1 mb-4">
<h4 className="text-[10px] font-bold uppercase tracking-widest text-[#ccc]">微调位置</h4>
<p className="text-[10px] text-[#777]">每次移动 {MOBILE_NUDGE_STEP_MM} mm，与桌面方向键一致</p>
</div>
{!canNudge ? (
<div className="mobile-nudge-empty">
<Move className="w-8 h-8 text-[#555] mb-2" />
<p className="text-[12px] text-[#888]">请先选中未锁定的元素</p>
</div>
) : (
<>
<div className="mobile-nudge-pad" role="group" aria-label="位置微调">
<button
type="button"
className="mobile-nudge-btn"
onClick={() => nudgeSelectedElements(0, -MOBILE_NUDGE_STEP_MM)}
aria-label="向上微调"
>
<ArrowUp className="w-5 h-5" />
</button>
<div className="mobile-nudge-pad-row">
<button
type="button"
className="mobile-nudge-btn"
onClick={() => nudgeSelectedElements(-MOBILE_NUDGE_STEP_MM, 0)}
aria-label="向左微调"
>
<ArrowLeft className="w-5 h-5" />
</button>
<div className="mobile-nudge-pad-center" aria-hidden="true" />
<button
type="button"
className="mobile-nudge-btn"
onClick={() => nudgeSelectedElements(MOBILE_NUDGE_STEP_MM, 0)}
aria-label="向右微调"
>
<ArrowRight className="w-5 h-5" />
</button>
</div>
<button
type="button"
className="mobile-nudge-btn"
onClick={() => nudgeSelectedElements(0, MOBILE_NUDGE_STEP_MM)}
aria-label="向下微调"
>
<ArrowDown className="w-5 h-5" />
</button>
</div>
{primaryElem && (
<div className="mobile-nudge-info">
<p className="text-[12px] font-medium text-[#ddd] truncate">{primaryElem.name}</p>
<p className="text-[11px] font-mono text-[#31a8ff] mt-1">
X {primaryElem.x} · Y {primaryElem.y} mm
</p>
{nudgeableElementIds.length > 1 && (
<p className="text-[10px] text-[#888] mt-1">
已选 {nudgeableElementIds.length} 个元素，将一起移动
</p>
)}
</div>
)}
</>
)}
</div>
);
};
const visibilityRuleDialogNode = (
<VisibilityRuleDialog
open={visibilityRuleDialog !== null}
@@ -1876,6 +1993,9 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
{mobileModule === 'properties' && (
<div className="ps-panel-body p-3 space-y-4 min-h-0">{renderPropertiesPanelBody()}</div>
)}
{mobileModule === 'nudge' && (
<div className="ps-panel-body p-3 min-h-0">{renderNudgePanelBody()}</div>
)}
{mobileModule === 'layers' && (
<div className="ps-panel-body min-h-0 mobile-layers-panel">{renderLayersPanelBody()}</div>
)}

84
src/index.css
View File

@@ -1317,6 +1317,11 @@ body {
min-height: 0;
}
.mobile-design-canvas-wrap:has([data-interaction-active]),
.mobile-design-canvas-shell-interaction {
overflow: visible;
}
.mobile-design-props-wrap {
flex: 1 1 48%;
min-height: 220px;
@@ -1416,6 +1421,85 @@ body {
min-height: 40px !important;
flex-shrink: 0;
}
.mobile-nudge-panel {
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 100%;
padding-bottom: 12px;
}
.mobile-nudge-header {
width: 100%;
text-align: left;
}
.mobile-nudge-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
min-height: 160px;
text-align: center;
}
.mobile-nudge-pad {
display: flex;
flex-direction: column;
align-items: center;
align-self: center;
gap: 8px;
margin: 8px 0 20px;
}
.mobile-nudge-pad-row {
display: flex;
align-items: center;
gap: 8px;
}
.mobile-nudge-pad-center {
width: 52px;
height: 52px;
border-radius: 12px;
background: #333;
border: 1px dashed #4a4a4a;
}
.mobile-nudge-btn {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border: 1px solid #4a4a4a;
border-radius: 12px;
background: #383838;
color: #ddd;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mobile-nudge-btn:active {
background: #1e3a4f;
border-color: #31a8ff;
color: #fff;
}
.mobile-nudge-info {
align-self: center;
width: 100%;
max-width: 240px;
padding: 12px 14px;
border-radius: 10px;
background: #222222;
/* border: 1px solid #1f1f1f; */
text-align: center;
}
}
@media (min-width: 768px) {