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-12 22:09:49 +08:00
parent bc94c1d830
commit 10d96084e6
4 changed files with 97 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/assets/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=1.0, user-scalable=no" />
<title>智能标签排版设计与打印生成器</title>
<title>标签设计生成器</title>
</head>
<body>
<div id="root"></div>

6
metadata.json
View File

@@ -1,6 +0,0 @@
{
"name": "批量标签排版设计与打印生成器",
"description": "支持可视化绘制条码、二维码及多行文本标签模版，支持Excel/CSV数据批量导入与动态变量映射排版，一键平衡居中生成A4多页精细网格裁切图层，实现工业级无卷曲实体打印。",
"requestFramePermissions": [],
"majorCapabilities": ["MAJOR_CAPABILITY_SERVER_SIDE_GEMINI_API"]
}

80
src/App.tsx
View File

@@ -30,6 +30,7 @@ import {
Plus,
Download,
Upload,
Printer,
Trash2,
X,
} from 'lucide-react';
@@ -652,26 +653,38 @@ export default function App() {
*/}
{!(isMobile && workflowStep === 'print-view') && (
<header
className={`no-print bg-slate-950 border-b border-slate-900 shrink-0 shadow flex flex-wrap items-center justify-between gap-4 mobile-template-header ${workflowStep === 'template-design' || workflowStep === 'print-view' ? 'px-4 py-2' : 'px-4 py-3 md:px-6 md:py-4'
}`}
className={`no-print bg-slate-950 border-b border-slate-900 shrink-0 shadow flex flex-wrap items-center justify-between gap-4 mobile-template-header ${
isMobile && workflowStep === 'template-select' && hasTemplates
? 'mobile-template-header-row'
: ''
} ${workflowStep === 'template-design' || workflowStep === 'print-view' ? 'px-4 py-2' : 'px-4 py-3 md:px-6 md:py-4'}`}
>
{/* Title logo and slogan description */}
<div className="flex items-center gap-3 min-w-0">
<div
className={`flex items-center gap-3 min-w-0 ${
isMobile && workflowStep === 'template-select' && hasTemplates ? 'flex-1' : ''
}`}
>
<img src={logoUrl} alt="" className="w-10 h-10" aria-hidden />
<div className="min-w-0">
<h1 className="text-sm font-bold tracking-wider flex items-center gap-2 text-slate-100 uppercase">
<span className="truncate">批量标签排版印刷生成器</span>
<h1 className="text-[18px] font-bold tracking-wider flex items-center gap-2 text-slate-100 uppercase">
<span className="truncate">标签设计生成器</span>
</h1>
{workflowStep !== 'template-design' && workflowStep !== 'print-view' && (
<p className="text-[11px] text-slate-400">
所见即所得，上传Excel批量排版生成标签
所见即所得
</p>
)}
</div>
</div>
{workflowStep === 'template-select' && hasTemplates && !isMobile && (
<div className="flex flex-wrap items-center gap-2 shrink-0">
{workflowStep === 'template-select' && hasTemplates && (
<div
className={`flex items-center gap-2 shrink-0 ${
isMobile ? 'ml-auto' : 'flex-wrap'
}`}
>
{!isMobile && (
<button
type="button"
onClick={() => setShowAddTmplForm(true)}
@@ -680,8 +693,15 @@ export default function App() {
<Plus className="w-4 h-4 shrink-0" />
新建模板
</button>
<label className="inline-flex items-center gap-1.5 px-4 py-2 bg-white/10 hover:bg-white/15 border border-slate-700 text-slate-100 rounded-xl text-xs font-semibold whitespace-nowrap transition shadow-sm cursor-pointer">
<Upload className="w-4 h-4 shrink-0" />
)}
<label
className={`inline-flex items-center gap-1.5 bg-white/10 hover:bg-white/15 active:bg-white/20 border border-slate-700 text-slate-100 rounded-xl font-semibold whitespace-nowrap transition shadow-sm cursor-pointer ${
isMobile
? 'min-h-[40px] px-3 py-2 text-[11px]'
: 'px-4 py-2 text-xs'
}`}
>
<Upload className={`${isMobile ? 'w-3.5 h-3.5' : 'w-4 h-4'} shrink-0`} />
导入模板
<input
type="file"
@@ -713,7 +733,7 @@ export default function App() {
<h2 className="text-base font-bold text-gray-900">标签模板库</h2>
<p className="text-xs text-gray-400 mt-1">
{isMobile
? '选择模板 → 上传 Excel → 关联变量 → 生成 PDF'
? '选择模板 → 上传 Excel → 关联变量 → 排版生成标签'
: '选择模板规格后进行设计与排版导出，或使用右上角按钮新建、导入模板。'}
</p>
</div>
@@ -767,18 +787,19 @@ export default function App() {
key={tmpl.id}
onClick={() => handleSelectTemplate(tmpl.id!)}
className={`bg-white border rounded-2xl p-5 shadow-xs transition-all flex flex-col cursor-pointer relative overflow-hidden group select-none ${isActive
? 'ring-2 ring-indigo-500 border-indigo-500 bg-indigo-50/5'
// ? 'ring-2 ring-indigo-500 border-indigo-500 bg-indigo-50/5'
? 'border-gray-200 hover:shadow-md hover:border-indigo-200'
: 'border-gray-200 hover:shadow-md hover:border-indigo-200'
}`}
>
{isActive && (
{/* {isActive && (
<div
className="absolute top-0 right-0 py-1.5 px-3 text-[10px] font-bold rounded-bl-xl text-white"
style={{ backgroundColor: '#6366f1' }}
>
当前选中
</div>
)}
)} */}
<div className="space-y-1 pr-12 mb-3">
<span className="text-[10px] font-mono font-extrabold text-indigo-700 bg-indigo-50 px-2 py-0.5 rounded-lg border border-indigo-100">
@@ -834,36 +855,45 @@ export default function App() {
e.stopPropagation();
openPrintView(tmpl.id!);
}}
className={`shrink-0 whitespace-nowrap inline-flex items-center gap-1 px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-[11px] font-bold transition shadow-xs cursor-pointer ${isMobile ? 'mobile-primary-btn flex-1' : ''
className={`inline-flex items-center gap-1.5 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white transition shadow-xs cursor-pointer ${
isMobile
? 'mobile-primary-btn flex-1 min-w-0 justify-center min-h-[44px] px-4 py-2.5 rounded-xl text-[13px] font-semibold'
: 'shrink-0 whitespace-nowrap px-3 py-1.5 rounded-lg text-[11px] font-bold'
}`}
>
<FileDown className="w-3.5 h-3.5 shrink-0" />
{isMobile ? '上传数据并导出 PDF' : '排版导出'}
<Printer className={`${isMobile ? 'w-4 h-4' : 'w-3.5 h-3.5'} shrink-0`} />
{isMobile ? '排版生成标签' : '排版导出'}
</button>
{!isMobile && (
<>
<button
onClick={(e) => {
e.stopPropagation();
handleExportTemplate(tmpl);
}}
className="shrink-0 p-1.5 bg-gray-50 text-gray-500 hover:bg-gray-100 border border-gray-100 hover:border-gray-300 rounded-lg inline-flex items-center justify-center transition cursor-pointer"
className={`shrink-0 bg-gray-50 text-gray-500 hover:bg-gray-100 active:bg-gray-200 border border-gray-100 hover:border-gray-300 inline-flex items-center justify-center transition cursor-pointer ${
isMobile
? 'mobile-icon-btn min-w-[44px] min-h-[44px] rounded-xl'
: 'p-1.5 rounded-lg'
}`}
title="导出"
aria-label="导出模板"
>
<Download className="w-3.5 h-3.5" />
<Download className={`${isMobile ? 'w-5 h-5' : 'w-3.5 h-3.5'}`} />
</button>
<button
onClick={(e) => {
e.stopPropagation();
handleDeleteTemplate(tmpl.id!);
}}
className="shrink-0 p-1.5 bg-gray-50 text-rose-500 hover:text-white hover:bg-rose-600 border border-gray-100 rounded-lg inline-flex items-center justify-center transition cursor-pointer"
className={`shrink-0 bg-gray-50 text-rose-500 hover:text-white hover:bg-rose-600 active:bg-rose-700 border border-gray-100 inline-flex items-center justify-center transition cursor-pointer ${
isMobile
? 'mobile-icon-btn min-w-[44px] min-h-[44px] rounded-xl'
: 'p-1.5 rounded-lg'
}`}
title="删除模板"
aria-label="删除模板"
>
<Trash2 className="w-3.5 h-3.5" />
<Trash2 className={`${isMobile ? 'w-5 h-5' : 'w-3.5 h-3.5'}`} />
</button>
</>
)}
</div>
</div>
);

8
src/index.css
View File

@@ -1142,6 +1142,14 @@ body,
gap: 8px !important;
}
.mobile-template-header.mobile-template-header-row {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}
.mobile-template-header h1 span:first-child {
font-size: 12px;
}