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 ( return (
<div <div
className={`min-h-screen flex flex-col font-sans ${workflowStep === 'template-design' || (workflowStep === 'print-view' && !isMobile) className={`flex flex-col font-sans h-dvh max-h-dvh overflow-hidden ${workflowStep === 'template-design' || (workflowStep === 'print-view' && !isMobile)
? 'bg-[#323232] text-[#e8e8e8] h-screen overflow-hidden' ? 'bg-[#323232] text-[#e8e8e8]'
: workflowStep === 'print-view' && isMobile : 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' : 'bg-slate-50 text-slate-800'
}`} }`}
> >
@@ -653,36 +653,31 @@ export default function App() {
*/} */}
{!(isMobile && workflowStep === 'print-view') && ( {!(isMobile && workflowStep === 'print-view') && (
<header <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 ${ 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
isMobile && workflowStep === 'template-select' && hasTemplates
? 'mobile-template-header-row' ? '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 */} {/* Title logo and slogan description */}
<div <div
className={`flex items-center gap-3 min-w-0 ${ className={`flex items-center gap-3 min-w-0 ${isMobile && workflowStep === 'template-select' && hasTemplates ? 'flex-1' : ''
isMobile && workflowStep === 'template-select' && hasTemplates ? 'flex-1' : '' }`}
}`}
> >
<img src={logoUrl} alt="" className="w-10 h-10" aria-hidden /> <img src={logoUrl} alt="" className="w-10 h-10" aria-hidden />
<div className="min-w-0"> <div className="min-w-0">
<h1 className="text-[18px] font-bold tracking-wider flex items-center gap-2 text-slate-100 uppercase"> <h1 className="text-[18px] font-bold tracking-wider flex items-center gap-2 text-slate-100 uppercase">
<span className="truncate">标签设计生成器</span> <span className="truncate">标签设计生成器</span>
</h1> </h1>
{workflowStep !== 'template-design' && workflowStep !== 'print-view' && ( <p className="text-[11px] text-slate-400">
<p className="text-[11px] text-slate-400"> 所见即所得
所见即所得 </p>
</p>
)}
</div> </div>
</div> </div>
{workflowStep === 'template-select' && hasTemplates && ( {workflowStep === 'template-select' && hasTemplates && (
<div <div
className={`flex items-center gap-2 shrink-0 ${ className={`flex items-center gap-2 shrink-0 ${isMobile ? 'ml-auto' : 'flex-wrap'
isMobile ? 'ml-auto' : 'flex-wrap' }`}
}`}
> >
{!isMobile && ( {!isMobile && (
<button <button
@@ -695,11 +690,10 @@ export default function App() {
</button> </button>
)} )}
<label <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 ${ 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
isMobile
? 'min-h-[40px] px-3 py-2 text-[11px]' ? 'min-h-[40px] px-3 py-2 text-[11px]'
: 'px-4 py-2 text-xs' : 'px-4 py-2 text-xs'
}`} }`}
> >
<Upload className={`${isMobile ? 'w-3.5 h-3.5' : 'w-4 h-4'} shrink-0`} /> <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 */} {/* Primary Workspace scroll container */}
<main <main
className={`no-print flex-1 flex flex-col w-full ${workflowStep === 'template-design' || workflowStep === 'print-view' className={`no-print flex-1 flex flex-col w-full min-h-0 ${workflowStep === 'template-design' || workflowStep === 'print-view'
? 'overflow-hidden min-h-0' ? 'overflow-hidden'
: 'overflow-auto p-4 md:p-6 max-w-[1720px] mx-auto gap-6' : '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(); e.stopPropagation();
openPrintView(tmpl.id!); 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 ${ 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
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' ? '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' : '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`} /> <Printer className={`${isMobile ? 'w-4 h-4' : 'w-3.5 h-3.5'} shrink-0`} />
{isMobile ? '排版生成标签' : '排版导出'} {isMobile ? '排版生成标签' : '排版导出'}
@@ -869,11 +862,10 @@ export default function App() {
e.stopPropagation(); e.stopPropagation();
handleExportTemplate(tmpl); 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 ${ 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
isMobile
? 'mobile-icon-btn min-w-[44px] min-h-[44px] rounded-xl' ? 'mobile-icon-btn min-w-[44px] min-h-[44px] rounded-xl'
: 'p-1.5 rounded-lg' : 'p-1.5 rounded-lg'
}`} }`}
title="导出" title="导出"
aria-label="导出模板" aria-label="导出模板"
> >
@@ -884,11 +876,10 @@ export default function App() {
e.stopPropagation(); e.stopPropagation();
handleDeleteTemplate(tmpl.id!); 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 ${ 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
isMobile
? 'mobile-icon-btn min-w-[44px] min-h-[44px] rounded-xl' ? 'mobile-icon-btn min-w-[44px] min-h-[44px] rounded-xl'
: 'p-1.5 rounded-lg' : 'p-1.5 rounded-lg'
}`} }`}
title="删除模板" title="删除模板"
aria-label="删除模板" aria-label="删除模板"
> >

23
src/components/MobileExportView.tsx
View File

@@ -85,26 +85,23 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
return ( return (
<div className="mobile-export-view"> <div className="mobile-export-view">
<header className="no-print bg-slate-950 border-b border-slate-900 shrink-0 shadow mobile-export-header mobile-template-header px-4 py-3"> <header className="no-print bg-indigo-700 border-b border-indigo-900 shrink-0 shadow mobile-export-header px-4">
<div className="flex items-center gap-2 min-w-0 w-full"> <div className="flex items-center w-full min-h-[44px]">
<button <button
type="button" type="button"
onClick={onBack} onClick={onBack}
className="mobile-export-back" className="mobile-export-back shrink-0"
aria-label="返回" aria-label="返回"
> >
<ChevronLeft className="w-5 h-5" /> <ChevronLeft className="w-5 h-5" />
</button> </button>
<div className="flex items-center gap-3 min-w-0 flex-1"> <p
<div className="min-w-0"> className="flex-1 min-w-0 px-2 text-center text-sm font-bold tracking-wide text-slate-100 truncate"
{/* <h1 className="text-sm font-bold tracking-wider flex items-center gap-2 text-slate-100 uppercase"> title={templateName}
<span className="truncate">批量标签排版印刷生成器</span> >
</h1> */} {templateName}
<p className="text-sm font-bold tracking-wider flex items-center gap-2 text-slate-100 uppercase" title={templateName}> </p>
{templateName} <div className="w-10 shrink-0" aria-hidden />
</p>
</div>
</div>
</div> </div>
</header> </header>

41
src/index.css
View File

@@ -4,9 +4,36 @@
html, html,
body, body,
#root { #root {
height: 100%;
overscroll-behavior: none; overscroll-behavior: none;
} }
html,
body {
overflow: hidden;
}
/* 可滚动区域隐藏滚动条 */
.scrollbar-hide {
scrollbar-width: none;
-ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.app-header-sticky {
position: sticky;
top: 0;
z-index: 50;
align-items: center !important;
padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
padding-bottom: 0.75rem;
}
@theme { @theme {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
@@ -714,7 +741,10 @@ body,
} }
.mobile-export-header { .mobile-export-header {
display: flex;
align-items: center;
padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-top: calc(12px + env(safe-area-inset-top, 0px));
padding-bottom: 12px;
} }
.mobile-export-back { .mobile-export-back {
@@ -723,7 +753,6 @@ body,
justify-content: center; justify-content: center;
width: 40px; width: 40px;
height: 40px; height: 40px;
margin: -4px 0;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
background: transparent; background: transparent;
@@ -804,12 +833,20 @@ body,
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
padding: 16px; padding: 16px;
padding-bottom: 20px; padding-bottom: 20px;
display: block; display: block;
} }
.mobile-export-content::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.mobile-export-content>.mobile-export-card+.mobile-export-card { .mobile-export-content>.mobile-export-card+.mobile-export-card {
margin-top: 16px; margin-top: 16px;
} }
@@ -1136,7 +1173,7 @@ body,
cursor: not-allowed; cursor: not-allowed;
} }
.mobile-template-header { .mobile-template-header:not(.mobile-template-header-row) {
flex-direction: column; flex-direction: column;
align-items: stretch !important; align-items: stretch !important;
gap: 8px !important; gap: 8px !important;