工作表

2026-06-13 12:38:49 +08:00
parent 6534613098
commit 765d94b0b4
3 changed files with 77 additions and 60 deletions
--- a/src/components/DataImporter.tsx
+++ b/src/components/DataImporter.tsx
@@ -217,16 +217,14 @@ 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-[#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-indigo-500 bg-indigo-50/20'
-                      : 'border-gray-200 hover:border-indigo-400 hover:bg-gray-50/50'
-                  }`
+                ? `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-indigo-500 bg-indigo-50/20'
+                  : 'border-gray-200 hover:border-indigo-400 hover:bg-gray-50/50'
+                }`
          }
        >
          <input
@@ -237,19 +235,17 @@ 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]'
                    : 'text-xs text-gray-700'
-              }`}
+                }`}
            >
              {isMobile ? '点击选择 Excel / CSV' : '点击上传或拖拽文件到此处'}
            </p>
@@ -278,17 +274,15 @@ 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
                      ? `${importData.currentSheet} · ${rows.length} 条记录 · ${columns.length} 列`
@@ -321,37 +315,38 @@ export const DataImporter: React.FC<DataImporterProps> = ({
            </button>
          </div>

-          {hasMultipleSheets && (
-            <div className="space-y-1.5 w-full min-w-0">
-              <label
-                className={
-                  isMobile
-                    ? 'mobile-field-label'
-                    : isPs
-                      ? 'ps-field-label'
-                      : 'block text-[10px] text-gray-500'
-                }
-              >
-                工作表
-              </label>
-              <select
-                value={importData.currentSheet}
-                disabled={sheetLoading}
-                onChange={(e) => void handleSheetChange(e.target.value)}
-                className={sheetSelectClass}
-              >
-                {importData.sheets.map((sheet) => (
-                  <option key={sheet} value={sheet}>
-                    {sheet}
-                  </option>
-                ))}
-              </select>
-              {sheetLoading && (
-                <p className={`${isPs ? 'text-[10px] text-[#777]' : 'text-[10px] text-gray-400'}`}>
-                  切换中…
-                </p>
-              )}
-            </div>
+        </div>
+      )}
+
+      {hasMultipleSheets && (
+        <div className="space-y-1.5 w-full min-w-0">
+          <label
+            className={
+              isMobile
+                ? 'mobile-field-label'
+                : isPs
+                  ? 'ps-field-label'
+                  : 'block text-[10px] text-gray-500'
+            }
+          >
+            工作表
+          </label>
+          <select
+            value={importData.currentSheet}
+            disabled={sheetLoading}
+            onChange={(e) => void handleSheetChange(e.target.value)}
+            className={sheetSelectClass}
+          >
+            {importData.sheets.map((sheet) => (
+              <option key={sheet} value={sheet}>
+                {sheet}
+              </option>
+            ))}
+          </select>
+          {sheetLoading && (
+            <p className={`${isPs ? 'text-[10px] text-[#777]' : 'text-[10px] text-gray-400'}`}>
+              切换中…
+            </p>
          )}
        </div>
      )}
--- a/src/components/PreviewGrid.tsx
+++ b/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>
        ) : (
--- a/src/index.css
+++ b/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);
@@ -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);
  }