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 12:38:49 +08:00
parent 6534613098
commit 765d94b0b4
3 changed files with 77 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/DataImporter.tsx
View File

@@ -217,16 +217,14 @@ export const DataImporter: React.FC<DataImporterProps> = ({
isMobile isMobile
? `mobile-upload-zone ${dragActive ? 'active' : ''}` ? `mobile-upload-zone ${dragActive ? 'active' : ''}`
: isPs : isPs
? `border border-dashed rounded py-8 px-4 text-center cursor-pointer transition flex flex-col items-center gap-2 ${ ? `border border-dashed rounded py-8 px-4 text-center cursor-pointer transition flex flex-col items-center gap-2 ${dragActive
dragActive ? 'border-[#31a8ff] bg-[#1a3a4f]/30'
? 'border-[#31a8ff] bg-[#1a3a4f]/30' : 'border-[#4a4a4a] hover:border-[#31a8ff]/60 hover:bg-[#1e1e1e]'
: 'border-[#4a4a4a] hover:border-[#31a8ff]/60 hover:bg-[#1e1e1e]' }`
}` : `border-2 border-dashed rounded-2xl py-10 px-6 text-center cursor-pointer transition flex flex-col items-center gap-3 ${dragActive
: `border-2 border-dashed rounded-2xl py-10 px-6 text-center cursor-pointer transition flex flex-col items-center gap-3 ${ ? 'border-indigo-500 bg-indigo-50/20'
dragActive : 'border-gray-200 hover:border-indigo-400 hover:bg-gray-50/50'
? 'border-indigo-500 bg-indigo-50/20' }`
: 'border-gray-200 hover:border-indigo-400 hover:bg-gray-50/50'
}`
} }
> >
<input <input
@@ -237,19 +235,17 @@ export const DataImporter: React.FC<DataImporterProps> = ({
className="hidden" className="hidden"
/> />
<Upload <Upload
className={`${isMobile ? 'w-8 h-8' : 'w-6 h-6'} ${ className={`${isMobile ? 'w-8 h-8' : 'w-6 h-6'} ${isPs ? 'text-[#777]' : isMobile ? 'text-indigo-400' : 'text-gray-400'
isPs ? 'text-[#777]' : isMobile ? 'text-indigo-400' : 'text-gray-400' }`}
}`}
/> />
<div> <div>
<p <p
className={`${ className={`${isMobile
isMobile
? 'text-[15px] font-semibold text-slate-700' ? 'text-[15px] font-semibold text-slate-700'
: isPs : isPs
? 'text-xs text-[#ccc]' ? 'text-xs text-[#ccc]'
: 'text-xs text-gray-700' : 'text-xs text-gray-700'
}`} }`}
> >
{isMobile ? '点击选择 Excel / CSV' : '点击上传或拖拽文件到此处'} {isMobile ? '点击选择 Excel / CSV' : '点击上传或拖拽文件到此处'}
</p> </p>
@@ -278,17 +274,15 @@ export const DataImporter: React.FC<DataImporterProps> = ({
/> />
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p <p
className={`truncate ${ className={`truncate ${isMobile ? 'text-sm text-slate-800' : isPs ? 'text-xs text-[#e8e8e8]' : 'text-gray-800'
isMobile ? 'text-sm text-slate-800' : isPs ? 'text-xs text-[#e8e8e8]' : 'text-gray-800' }`}
}`}
title={importData.fileName} title={importData.fileName}
> >
{importData.fileName} {importData.fileName}
</p> </p>
<p <p
className={`mt-0.5 truncate ${ className={`mt-0.5 truncate ${isMobile ? 'text-xs text-slate-500' : isPs ? 'text-[10px] text-[#777]' : 'text-[10px] text-gray-400'
isMobile ? 'text-xs text-slate-500' : isPs ? 'text-[10px] text-[#777]' : 'text-[10px] text-gray-400' }`}
}`}
title={ title={
hasMultipleSheets hasMultipleSheets
? `${importData.currentSheet} · ${rows.length} 条记录 · ${columns.length} 列` ? `${importData.currentSheet} · ${rows.length} 条记录 · ${columns.length} 列`
@@ -321,37 +315,38 @@ export const DataImporter: React.FC<DataImporterProps> = ({
</button> </button>
</div> </div>
{hasMultipleSheets && ( </div>
<div className="space-y-1.5 w-full min-w-0"> )}
<label
className={ {hasMultipleSheets && (
isMobile <div className="space-y-1.5 w-full min-w-0">
? 'mobile-field-label' <label
: isPs className={
? 'ps-field-label' isMobile
: 'block text-[10px] text-gray-500' ? 'mobile-field-label'
} : isPs
> ? 'ps-field-label'
工作表 : 'block text-[10px] text-gray-500'
</label> }
<select >
value={importData.currentSheet} 工作表
disabled={sheetLoading} </label>
onChange={(e) => void handleSheetChange(e.target.value)} <select
className={sheetSelectClass} value={importData.currentSheet}
> disabled={sheetLoading}
{importData.sheets.map((sheet) => ( onChange={(e) => void handleSheetChange(e.target.value)}
<option key={sheet} value={sheet}> className={sheetSelectClass}
{sheet} >
</option> {importData.sheets.map((sheet) => (
))} <option key={sheet} value={sheet}>
</select> {sheet}
{sheetLoading && ( </option>
<p className={`${isPs ? 'text-[10px] text-[#777]' : 'text-[10px] text-gray-400'}`}> ))}
切换中… </select>
</p> {sheetLoading && (
)} <p className={`${isPs ? 'text-[10px] text-[#777]' : 'text-[10px] text-gray-400'}`}>
</div> 切换中…
</p>
)} )}
</div> </div>
)} )}

9
src/components/PreviewGrid.tsx
View File

@@ -228,7 +228,6 @@ export const PaperSettingsPanel: React.FC<PaperSettingsPanelProps> = ({
? createPortal( ? createPortal(
<div <div
className="ps-modal-overlay" className="ps-modal-overlay"
onClick={closeAutoLayoutDialog}
role="presentation" role="presentation"
> >
<div <div
@@ -269,7 +268,7 @@ export const PaperSettingsPanel: React.FC<PaperSettingsPanelProps> = ({
id="auto-layout-min-margin" id="auto-layout-min-margin"
ref={autoLayoutInputRef} ref={autoLayoutInputRef}
type="number" type="number"
min="0.1" min="0"
max="100" max="100"
step="0.1" step="0.1"
value={autoLayoutMinMargin} value={autoLayoutMinMargin}
@@ -699,11 +698,11 @@ export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
> >
{!previewReady ? ( {!previewReady ? (
<div className="h-full flex flex-col items-center justify-center text-center px-6 gap-2"> <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-sm text-[#aaa]">请先添加数据源以生成排版预览</p>
<p className="text-xs text-[#666] max-w-[280px] leading-relaxed"> <p className="text-xs text-[#666] max-w-[280px] leading-relaxed">
{isMobileVariant {isMobileVariant
? '在下方「数据源」中上传 Excel，预览将自动更新' ? '在下方「数据源」中添加数据源并关联数据，预览将自动更新'
: '在右侧「数据源」中点击「应用数据」生成排版预览；纸张排版变更会自动更新'} : '在右侧「数据源」中添加数据源并关联数据，点击「应用数据」生成排版预览'}
</p> </p>
</div> </div>
) : ( ) : (

27
src/index.css
View File

@@ -350,6 +350,29 @@ body {
cursor: not-allowed; cursor: not-allowed;
} }
/* 数值输入框步进按钮与 ps-field 暗色风格一致 */
.ps-field[type='number'],
.ps-panel-body input[type='number'],
.ps-modal input[type='number'] {
color-scheme: dark;
}
.ps-field[type='number']::-webkit-inner-spin-button,
.ps-panel-body input[type='number']::-webkit-inner-spin-button,
.ps-modal input[type='number']::-webkit-inner-spin-button {
opacity: 1;
cursor: pointer;
margin: 0;
align-self: stretch;
}
.ps-field[type='number']::-webkit-outer-spin-button,
.ps-panel-body input[type='number']::-webkit-outer-spin-button,
.ps-modal input[type='number']::-webkit-outer-spin-button {
opacity: 1;
margin: 0;
}
.color-input { .color-input {
--color-input-radius: 0.25rem; --color-input-radius: 0.25rem;
--color-input-border: var(--color-ps-input-border); --color-input-border: var(--color-ps-input-border);
@@ -399,7 +422,7 @@ body {
} }
/* mobile-field 行内与输入框同高（44px）；ps-field 使用默认 calc 与 ps-field 一致 */ /* mobile-field 行内与输入框同高（44px）；ps-field 使用默认 calc 与 ps-field 一致 */
.flex:has(.mobile-field) > .color-input { .flex:has(.mobile-field)>.color-input {
--color-input-radius: 10px; --color-input-radius: 10px;
--color-input-border: #e2e8f0; --color-input-border: #e2e8f0;
--color-input-size: 44px; --color-input-size: 44px;
@@ -1173,7 +1196,7 @@ body {
margin: 0 0 8px; margin: 0 0 8px;
} }
.flex:has(.mobile-field) > .color-input:focus { .flex:has(.mobile-field)>.color-input:focus {
border-color: #818cf8; border-color: #818cf8;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
} }