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:24:25 +08:00
parent 10d96084e6
commit d1ac4cc405
3 changed files with 72 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/App.tsx
View File

@@ -639,10 +639,10 @@ export default function App() {
return (
<div
className={`min-h-screen flex flex-col font-sans ${workflowStep === 'template-design' || (workflowStep === 'print-view' && !isMobile)
? 'bg-[#323232] text-[#e8e8e8] h-screen overflow-hidden'
className={`flex flex-col font-sans h-dvh max-h-dvh overflow-hidden ${workflowStep === 'template-design' || (workflowStep === 'print-view' && !isMobile)
? 'bg-[#323232] text-[#e8e8e8]'
: workflowStep === 'print-view' && isMobile
? 'bg-slate-100 text-slate-800 h-screen overflow-hidden'
? 'bg-slate-100 text-slate-800'
: 'bg-slate-50 text-slate-800'
}`}
>
@@ -653,36 +653,31 @@ 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 ${
isMobile && workflowStep === 'template-select' && hasTemplates
className={`no-print bg-indigo-700 border-b border-indigo-900 shrink-0 shadow flex flex-wrap items-center justify-between gap-4 mobile-template-header app-header-sticky ${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'}`}
} 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 ${
isMobile && workflowStep === 'template-select' && hasTemplates ? 'flex-1' : ''
}`}
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-[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">
所见即所得
</p>
)}
<p className="text-[11px] text-slate-400">
所见即所得
</p>
</div>
</div>
{workflowStep === 'template-select' && hasTemplates && (
<div
className={`flex items-center gap-2 shrink-0 ${
isMobile ? 'ml-auto' : 'flex-wrap'
}`}
className={`flex items-center gap-2 shrink-0 ${isMobile ? 'ml-auto' : 'flex-wrap'
}`}
>
{!isMobile && (
<button
@@ -695,11 +690,10 @@ export default function App() {
</button>
)}
<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
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`} />
导入模板
@@ -717,9 +711,9 @@ export default function App() {
{/* Primary Workspace scroll container */}
<main
className={`no-print flex-1 flex flex-col w-full ${workflowStep === 'template-design' || workflowStep === 'print-view'
? 'overflow-hidden min-h-0'
: 'overflow-auto p-4 md:p-6 max-w-[1720px] mx-auto gap-6'
className={`no-print flex-1 flex flex-col w-full min-h-0 ${workflowStep === 'template-design' || workflowStep === 'print-view'
? 'overflow-hidden'
: 'overflow-y-auto scrollbar-hide overscroll-contain p-4 md:p-6 max-w-[1720px] mx-auto gap-6'
}`}
>
@@ -855,11 +849,10 @@ export default function App() {
e.stopPropagation();
openPrintView(tmpl.id!);
}}
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
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'
}`}
}`}
>
<Printer className={`${isMobile ? 'w-4 h-4' : 'w-3.5 h-3.5'} shrink-0`} />
{isMobile ? '排版生成标签' : '排版导出'}
@@ -869,11 +862,10 @@ export default function App() {
e.stopPropagation();
handleExportTemplate(tmpl);
}}
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
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="导出模板"
>
@@ -884,11 +876,10 @@ export default function App() {
e.stopPropagation();
handleDeleteTemplate(tmpl.id!);
}}
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
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="删除模板"
>