工作表

src/components/DataImporter.tsx

@@ -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 ${
+                ? `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-[#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 ${
+                : `border-2 border-dashed rounded-2xl py-10 px-6 text-center cursor-pointer transition flex flex-col items-center gap-3 ${dragActive
-                    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'} ${
+            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>
             <p
-              className={`${
+              className={`${isMobile
-                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 ${
+                  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}
                 >
                   {importData.fileName}
                 </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={
                     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>
   );
 };

src/components/PreviewGrid.tsx

@@ -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>
         ) : (

src/index.css

@@ -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);