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

37
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,16 +653,14 @@ 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 />
@@ -670,18 +668,15 @@ export default function App() {
<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>
)}
</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 && (
@@ -695,8 +690,7 @@ 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'
}`}
@@ -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,8 +849,7 @@ 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'
}`}
@@ -869,8 +862,7 @@ 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'
}`}
@@ -884,8 +876,7 @@ 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'
}`}

19
src/components/MobileExportView.tsx
View File

@@ -85,26 +85,23 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
return (
<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">
<div className="flex items-center gap-2 min-w-0 w-full">
<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 w-full min-h-[44px]">
<button
type="button"
onClick={onBack}
className="mobile-export-back"
className="mobile-export-back shrink-0"
aria-label="返回"
>
<ChevronLeft className="w-5 h-5" />
</button>
<div className="flex items-center gap-3 min-w-0 flex-1">
<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> */}
<p className="text-sm font-bold tracking-wider flex items-center gap-2 text-slate-100 uppercase" title={templateName}>
<p
className="flex-1 min-w-0 px-2 text-center text-sm font-bold tracking-wide text-slate-100 truncate"
title={templateName}
>
{templateName}
</p>
</div>
</div>
<div className="w-10 shrink-0" aria-hidden />
</div>
</header>

41
src/index.css
View File

@@ -4,9 +4,36 @@
html,
body,
#root {
height: 100%;
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 {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
@@ -714,7 +741,10 @@ body,
}
.mobile-export-header {
display: flex;
align-items: center;
padding-top: calc(12px + env(safe-area-inset-top, 0px));
padding-bottom: 12px;
}
.mobile-export-back {
@@ -723,7 +753,6 @@ body,
justify-content: center;
width: 40px;
height: 40px;
margin: -4px 0;
border: none;
border-radius: 10px;
background: transparent;
@@ -804,12 +833,20 @@ body,
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
padding: 16px;
padding-bottom: 20px;
display: block;
}
.mobile-export-content::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.mobile-export-content>.mobile-export-card+.mobile-export-card {
margin-top: 16px;
}
@@ -1136,7 +1173,7 @@ body,
cursor: not-allowed;
}
.mobile-template-header {
.mobile-template-header:not(.mobile-template-header-row) {
flex-direction: column;
align-items: stretch !important;
gap: 8px !important;