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 02:23:11 +08:00
parent f2689520bd
commit 6c314f9808
10 changed files with 1058 additions and 533 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/PreviewGrid.tsx
View File

@@ -189,7 +189,7 @@ export const PaperSettingsPanel: React.FC<PaperSettingsPanelProps> = ({
>
{!isPs && !isMobile && (
<div className="flex items-center gap-2 mb-1">
<h3 className="text-sm font-bold text-gray-900 leading-none">整页排版 & PDF 设置</h3>
<h3 className="text-sm font-bold text-gray-900 leading-none">排版</h3>
</div>
)}
{isPs && (
@@ -410,6 +410,7 @@ export interface LayoutPreviewProps {
compact?: boolean;
collapsed?: boolean;
onToggleCollapsed?: () => void;
variant?: 'desktop' | 'mobile';
}
export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
@@ -431,8 +432,12 @@ export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
compact = false,
collapsed = false,
onToggleCollapsed,
variant = 'desktop',
}) => {
const [previewScale, setPreviewScale] = useState<number>(compact ? 1.4 : 3.3);
const isMobileVariant = variant === 'mobile';
const [previewScale, setPreviewScale] = useState<number>(
isMobileVariant ? 1.15 : compact ? 1.4 : 3.3
);
const [showAllPages, setShowAllPages] = useState(false);
const MAX_PREVIEW_PAGES = 3;
@@ -478,29 +483,33 @@ export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
className={`flex-1 flex flex-col min-h-0 min-w-0 layout-preview-panel ${compact && collapsed ? 'layout-preview-collapsed' : ''
}`}
>
<div className="ps-preview-toolbar">
<div className={`ps-preview-toolbar ${isMobileVariant ? 'mobile-preview-toolbar' : ''}`}>
<div className="flex items-center gap-2 text-[11px] text-[#aaa] min-w-0 flex-1">
<FileDown className="w-3.5 h-3.5 text-[#31a8ff] shrink-0" />
<span className="font-semibold text-[#e8e8e8]">排版预览</span>
<span className="text-[#666]">|</span>
<span>
{previewReady ? totalPages : draftTotalPages} 页 PDF
<span className="truncate">
{previewReady ? totalPages : draftTotalPages} 页
</span>
<span className="text-[#666]">|</span>
<span>
{(previewReady ? selectedCount : draftSelectedCount) < totalRowCount
? `${previewReady ? selectedCount : draftSelectedCount}/${totalRowCount} 行`
: `${totalRowCount} 行`}
</span>
{previewLayoutStale && previewReady && (
<span className="text-amber-500/90">预览待更新</span>
{!isMobileVariant && (
<>
<span className="text-[#666]">|</span>
<span>
{(previewReady ? selectedCount : draftSelectedCount) < totalRowCount
? `${previewReady ? selectedCount : draftSelectedCount}/${totalRowCount} 行`
: `${totalRowCount} 行`}
</span>
</>
)}
{previewReady && hasMorePages && !showAllPages && (
{previewLayoutStale && previewReady && (
<span className="text-amber-500/90 shrink-0">待更新</span>
)}
{previewReady && hasMorePages && !showAllPages && !isMobileVariant && (
<span className="text-amber-500/90">预览前 {MAX_PREVIEW_PAGES} 页</span>
)}
</div>
<div className="flex items-center gap-3 shrink-0">
<div className={`flex items-center gap-3 shrink-0 ${isMobileVariant ? 'hidden' : ''}`}>
{compact && onToggleCollapsed && (
<button
type="button"
@@ -558,16 +567,26 @@ export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
</div>
</div>
<div className="flex-1 overflow-auto ps-workspace-bg p-6 min-h-0 ps-preview-workspace">
<div
className={`flex-1 overflow-auto ps-workspace-bg min-h-0 ps-preview-workspace ${
isMobileVariant ? 'p-3 mobile-preview-workspace' : 'p-6'
}`}
>
{!previewReady ? (
<div className="h-full flex flex-col items-center justify-center text-center px-8 gap-3">
<div className="h-full flex flex-col items-center justify-center text-center px-6 gap-2">
<p className="text-sm text-[#aaa]">上传数据源并完成变量映射后</p>
<p className="text-xs text-[#666] max-w-[320px] leading-relaxed">
在右侧「数据源与变量绑定」中点击「应用数据」生成排版预览；纸张排版变更会自动更新
<p className="text-xs text-[#666] max-w-[280px] leading-relaxed">
{isMobileVariant
? '在下方「数据源与变量绑定」中上传 Excel，预览将自动更新'
: '在右侧「数据源与变量绑定」中点击「应用数据」生成排版预览；纸张排版变更会自动更新'}
</p>
</div>
) : (
<div className="space-y-8 pb-8 flex flex-col items-center">
<div
className={`flex flex-col items-center ${
isMobileVariant ? 'space-y-4 pb-4' : 'space-y-8 pb-8'
}`}
>
{visiblePages.map((pageRows, pageIdx) => (
<div
key={pageIdx}
@@ -695,15 +714,17 @@ export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
)}
</div>
<div className="ps-status-bar">
<div className={`ps-status-bar ${isMobileVariant ? 'mobile-preview-status' : ''}`}>
<span>
{previewReady
? `${gridInfo.cols} 列 × ${gridInfo.rows} 行 · 每页 ${labelsPerPage} 枚`
: `待绘制 · 预计 ${draftTotalPages} 页`}
</span>
<span>
{previewReady ? '点击标签可高亮对应数据行' : '数据变更后请在右侧面板手动刷新绘制'}
? `${gridInfo.cols}×${gridInfo.rows} · 每页 ${labelsPerPage} 枚`
: `预计 ${draftTotalPages} 页`}
</span>
{!isMobileVariant && (
<span>
{previewReady ? '点击标签可高亮对应数据行' : '数据变更后请在右侧面板手动刷新绘制'}
</span>
)}
</div>
</div>
);