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

23
src/components/DataImporter.tsx
View File

@@ -217,13 +217,11 @@ export const DataImporter: React.FC<DataImporterProps> = ({
isMobile
? `mobile-upload-zone ${dragActive ? 'active' : ''}`
: isPs
? `border border-dashed rounded py-8 px-4 text-center cursor-pointer transition flex flex-col items-center gap-2 ${
dragActive
? `border border-dashed rounded py-8 px-4 text-center cursor-pointer transition flex flex-col items-center gap-2 ${dragActive
? 'border-[#31a8ff] bg-[#1a3a4f]/30'
: '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 ${dragActive
? 'border-indigo-500 bg-indigo-50/20'
: 'border-gray-200 hover:border-indigo-400 hover:bg-gray-50/50'
}`
@@ -237,14 +235,12 @@ export const DataImporter: React.FC<DataImporterProps> = ({
className="hidden"
/>
<Upload
className={`${isMobile ? 'w-8 h-8' : 'w-6 h-6'} ${
isPs ? 'text-[#777]' : isMobile ? 'text-indigo-400' : 'text-gray-400'
className={`${isMobile ? 'w-8 h-8' : 'w-6 h-6'} ${isPs ? 'text-[#777]' : isMobile ? 'text-indigo-400' : 'text-gray-400'
}`}
/>
<div>
<p
className={`${
isMobile
className={`${isMobile
? 'text-[15px] font-semibold text-slate-700'
: isPs
? 'text-xs text-[#ccc]'
@@ -278,16 +274,14 @@ export const DataImporter: React.FC<DataImporterProps> = ({
/>
<div className="min-w-0 flex-1">
<p
className={`truncate ${
isMobile ? 'text-sm text-slate-800' : isPs ? 'text-xs text-[#e8e8e8]' : 'text-gray-800'
className={`truncate ${isMobile ? 'text-sm text-slate-800' : isPs ? 'text-xs text-[#e8e8e8]' : 'text-gray-800'
}`}
title={importData.fileName}
>
{importData.fileName}
</p>
<p
className={`mt-0.5 truncate ${
isMobile ? 'text-xs text-slate-500' : isPs ? 'text-[10px] text-[#777]' : 'text-[10px] text-gray-400'
className={`mt-0.5 truncate ${isMobile ? 'text-xs text-slate-500' : isPs ? 'text-[10px] text-[#777]' : 'text-[10px] text-gray-400'
}`}
title={
hasMultipleSheets
@@ -321,6 +315,9 @@ export const DataImporter: React.FC<DataImporterProps> = ({
</button>
</div>
</div>
)}
{hasMultipleSheets && (
<div className="space-y-1.5 w-full min-w-0">
<label
@@ -354,7 +351,5 @@ export const DataImporter: React.FC<DataImporterProps> = ({
</div>
)}
</div>
)}
</div>
);
};

9
src/components/PreviewGrid.tsx
View File

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

27
src/index.css
View File

@@ -350,6 +350,29 @@ body {
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-radius: 0.25rem;
--color-input-border: var(--color-ps-input-border);
@@ -399,7 +422,7 @@ body {
}
/* 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-border: #e2e8f0;
--color-input-size: 44px;
@@ -1173,7 +1196,7 @@ body {
margin: 0 0 8px;
}
.flex:has(.mobile-field) > .color-input:focus {
.flex:has(.mobile-field)>.color-input:focus {
border-color: #818cf8;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}