From e71452ae780d162de1be42ba0bb148f78a9f1825 Mon Sep 17 00:00:00 2001
From: iqudoo <iqudoo@qq.com>
Date: Fri, 12 Jun 2026 21:39:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                               |  48 ++-
 src/components/DataImporter.tsx           | 377 ++++++++++++----------
 src/components/DataRangeFields.tsx        |  15 +-
 src/components/MobileExportPropsPanel.tsx |  35 +-
 src/components/MobileExportView.tsx       | 119 ++-----
 src/components/PreviewGrid.tsx            |  13 +-
 src/index.css                             |  11 +-
 7 files changed, 296 insertions(+), 322 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7981b78..20b755c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useMemo, useEffect, useLayoutEffect } from 'react';
 import { LabelTemplate, PaperConfig, ImportData, RecordRow, ExportRangeConfig, CutLineConfig } from './types';
 import {
   stripTemplateForStorage,
@@ -442,6 +442,40 @@ export default function App() {
     return !exportRangeEquals(draftExportRange, appliedExportData.exportRange);
   }, [importData, variableColumnMapping, appliedExportData, draftExportRange]);
 
+  // 移动端导出页实时同步数据，无需手动「应用数据」
+  useLayoutEffect(() => {
+    if (!isMobile || workflowStep !== 'print-view') return;
+    if (!importData || activeRows.length === 0) return;
+
+    const nextExportRange = { ...draftExportRange };
+    setAppliedExportData({
+      fileName: importData.fileName,
+      currentSheet: importData.currentSheet,
+      rows: importData.rows,
+      mapping: { ...variableColumnMapping },
+      exportRange: nextExportRange,
+    });
+    setPreviewSnapshot({
+      pages: layoutResult.pages,
+      gridCols: layoutResult.gridCols,
+      labelsPerPage: layoutResult.labelsPerPage,
+      totalPages: layoutResult.totalPages,
+      selectedCount: layoutResult.selectedCount,
+      paper,
+      exportRange: nextExportRange,
+    });
+    setPreviewLayoutStale(false);
+  }, [
+    isMobile,
+    workflowStep,
+    importData,
+    activeRows,
+    variableColumnMapping,
+    draftExportRange,
+    layoutResult,
+    paper,
+  ]);
+
   const handleApplyData = async () => {
     if (!importData || activeRows.length === 0) {
       await showAlert('请先上传 Excel 或 CSV 数据。', { variant: 'warning' });
@@ -884,7 +918,7 @@ export default function App() {
               </span>
               <div className="flex-1" />
               <span className="hidden md:inline text-[10px] text-[#666]">
-                Shift/Ctrl+点击多选 · V 移动 · T 文本 · 图片工具栏
+                Shift/Ctrl+点击多选
               </span>
               <button
                 onClick={() => openPrintView()}
@@ -937,14 +971,8 @@ export default function App() {
             onChangeDraftExportRange={setDraftExportRange}
             cutLine={cutLine}
             onChangeCutLine={handleCutLineChange}
-            dataStale={dataStale}
-            dataApplied={appliedExportData !== null}
-            onApplyData={handleApplyData}
-            appliedSelectedCount={appliedLayoutResult.selectedCount}
-            appliedTotalPages={appliedLayoutResult.totalPages}
-            appliedGridCols={appliedLayoutResult.gridCols}
-            appliedGridRows={appliedLayoutResult.gridRows}
-            draftSelectedCount={selectedCount}
+            selectedCount={selectedCount}
+            totalPages={totalPages}
             pdfGenerating={pdfGenerating}
             onBack={() => setWorkflowStep('template-select')}
             onExportPdf={exportPdf}
diff --git a/src/components/DataImporter.tsx b/src/components/DataImporter.tsx
index b5fd661..487151a 100644
--- a/src/components/DataImporter.tsx
+++ b/src/components/DataImporter.tsx
@@ -13,6 +13,50 @@ export function downloadDataTemplate(templateName: string, templateVariables: st
   XLSX.writeFile(wb, `${safeName}_数据模板.xlsx`);
 }
 
+function readWorkbook(buffer: ArrayBuffer) {
+  return XLSX.read(new Uint8Array(buffer), { type: 'array' });
+}
+
+function parseWorksheet(
+  workbook: XLSX.WorkBook,
+  sheetName: string,
+  fileName: string
+): ImportData | null {
+  const worksheet = workbook.Sheets[sheetName];
+  if (!worksheet) return null;
+
+  const jsonData = XLSX.utils.sheet_to_json<unknown[]>(worksheet, { header: 1, defval: '' });
+  if (jsonData.length === 0) return null;
+
+  const rawColumns = jsonData[0] as string[];
+  const columns = rawColumns
+    .map((c, idx) => (c ? String(c).trim() : `列_${idx + 1}`))
+    .filter(Boolean);
+  const rows: RecordRow[] = [];
+
+  for (let i = 1; i < jsonData.length; i++) {
+    const rawRow = jsonData[i] as unknown[];
+    if (
+      rawRow.every((cell) => cell === undefined || cell === null || String(cell).trim() === '')
+    ) {
+      continue;
+    }
+    const row: RecordRow = {};
+    columns.forEach((col, colIdx) => {
+      row[col] = rawRow[colIdx] !== undefined ? String(rawRow[colIdx]).trim() : '';
+    });
+    rows.push(row);
+  }
+
+  return {
+    fileName,
+    sheets: workbook.SheetNames,
+    currentSheet: sheetName,
+    columns,
+    rows,
+  };
+}
+
 interface DataImporterProps {
   importData: ImportData | null;
   onDataLoaded: (data: ImportData) => void;
@@ -34,7 +78,10 @@ export const DataImporter: React.FC<DataImporterProps> = ({
   const isPs = variant === 'ps';
   const isMobile = variant === 'mobile';
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  /** 缓存已上传文件，切换工作表时无需依赖 input.files（拖拽上传时 input 为空） */
+  const workbookBufferRef = useRef<ArrayBuffer | null>(null);
   const [dragActive, setDragActive] = useState<boolean>(false);
+  const [sheetLoading, setSheetLoading] = useState(false);
 
   const handleDrag = (e: React.DragEvent) => {
     e.preventDefault();
@@ -51,139 +98,109 @@ export const DataImporter: React.FC<DataImporterProps> = ({
     e.stopPropagation();
     setDragActive(false);
     if (e.dataTransfer.files && e.dataTransfer.files[0]) {
-      processFile(e.dataTransfer.files[0]);
+      void processFile(e.dataTransfer.files[0]);
     }
   };
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files[0]) {
-      processFile(e.target.files[0]);
+      void processFile(e.target.files[0]);
     }
   };
 
-  const processFile = (file: File) => {
-    const reader = new FileReader();
-    reader.onload = async (e) => {
-      try {
-        const data = new Uint8Array(e.target?.result as ArrayBuffer);
-        const workbook = XLSX.read(data, { type: 'array' });
-        const firstSheetName = workbook.SheetNames[0];
-        const worksheet = workbook.Sheets[firstSheetName];
-        const jsonData = XLSX.utils.sheet_to_json<any[]>(worksheet, { header: 1, defval: '' });
+  const processFile = async (file: File) => {
+    try {
+      const buffer = await file.arrayBuffer();
+      workbookBufferRef.current = buffer;
+      const workbook = readWorkbook(buffer);
+      const firstSheetName = workbook.SheetNames[0];
+      const parsed = parseWorksheet(workbook, firstSheetName, file.name);
 
-        if (jsonData.length === 0) {
-          await showAlert('表格为空或格式不正确', { variant: 'warning' });
-          return;
-        }
-
-        const rawColumns = jsonData[0] as string[];
-        const columns = rawColumns.map((c, idx) => (c ? String(c).trim() : `列_${idx + 1}`)).filter(Boolean);
-        const rows: RecordRow[] = [];
-        for (let i = 1; i < jsonData.length; i++) {
-          const rawRow = jsonData[i] as any[];
-          if (rawRow.every((cell) => cell === undefined || cell === null || String(cell).trim() === '')) {
-            continue;
-          }
-          const row: RecordRow = {};
-          columns.forEach((col, colIdx) => {
-            row[col] = rawRow[colIdx] !== undefined ? String(rawRow[colIdx]).trim() : '';
-          });
-          rows.push(row);
-        }
-
-        onDataLoaded({
-          fileName: file.name,
-          sheets: workbook.SheetNames,
-          currentSheet: firstSheetName,
-          columns,
-          rows,
-        });
-      } catch (err) {
-        console.error(err);
-        await showAlert('解析文件出错，请确保是标准的 Excel 或 CSV 文件', { variant: 'error' });
+      if (!parsed || parsed.rows.length === 0) {
+        workbookBufferRef.current = null;
+        await showAlert('表格为空或格式不正确', { variant: 'warning' });
+        return;
       }
-    };
-    reader.readAsArrayBuffer(file);
+
+      onDataLoaded(parsed);
+    } catch (err) {
+      console.error(err);
+      workbookBufferRef.current = null;
+      await showAlert('解析文件出错，请确保是标准的 Excel 或 CSV 文件', { variant: 'error' });
+    }
   };
 
-  const handleSheetChange = (sheetName: string) => {
-    if (!fileInputRef.current?.files?.[0]) return;
-    const file = fileInputRef.current.files[0];
-    const reader = new FileReader();
-    reader.onload = async (e) => {
-      try {
-        const data = new Uint8Array(e.target?.result as ArrayBuffer);
-        const workbook = XLSX.read(data, { type: 'array' });
-        const worksheet = workbook.Sheets[sheetName];
-        const jsonData = XLSX.utils.sheet_to_json<any[]>(worksheet, { header: 1, defval: '' });
-        if (jsonData.length === 0) return;
+  const handleSheetChange = async (sheetName: string) => {
+    if (!importData || sheetName === importData.currentSheet) return;
 
-        const rawColumns = jsonData[0] as string[];
-        const columns = rawColumns.map((c, idx) => (c ? String(c).trim() : `列_${idx + 1}`)).filter(Boolean);
-        const rows: RecordRow[] = [];
-        for (let i = 1; i < jsonData.length; i++) {
-          const rawRow = jsonData[i] as any[];
-          if (rawRow.every((cell) => cell === undefined || cell === null || String(cell).trim() === '')) {
-            continue;
-          }
-          const row: RecordRow = {};
-          columns.forEach((col, colIdx) => {
-            row[col] = rawRow[colIdx] !== undefined ? String(rawRow[colIdx]).trim() : '';
-          });
-          rows.push(row);
-        }
+    const buffer = workbookBufferRef.current;
+    if (!buffer) {
+      await showAlert('无法切换工作表，请重新上传文件', { variant: 'warning' });
+      return;
+    }
 
-        onDataLoaded({
-          fileName: file.name,
-          sheets: workbook.SheetNames,
-          currentSheet: sheetName,
-          columns,
-          rows,
-        });
-      } catch {
-        await showAlert('切换工作表时出错', { variant: 'error' });
+    setSheetLoading(true);
+    try {
+      const workbook = readWorkbook(buffer);
+      const parsed = parseWorksheet(workbook, sheetName, importData.fileName);
+
+      if (!parsed) {
+        await showAlert('该工作表为空或无法解析', { variant: 'warning' });
+        return;
       }
-    };
-    reader.readAsArrayBuffer(file);
+
+      onDataLoaded(parsed);
+    } catch (err) {
+      console.error(err);
+      await showAlert('切换工作表时出错', { variant: 'error' });
+    } finally {
+      setSheetLoading(false);
+    }
+  };
+
+  const handleClear = () => {
+    workbookBufferRef.current = null;
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+    onClear();
   };
 
   const rows = importData?.rows || [];
   const columns = importData?.columns || [];
+  const hasMultipleSheets = (importData?.sheets.length ?? 0) > 1;
 
   const wrapperClass = isMobile
-    ? ''
+    ? 'min-w-0 w-full'
     : isPs
-    ? 'space-y-3'
-    : 'bg-white border border-gray-200 rounded-2xl p-6 shadow-sm flex flex-col gap-5';
+      ? 'space-y-3 min-w-0 w-full'
+      : 'bg-white border border-gray-200 rounded-2xl p-6 shadow-sm flex flex-col gap-5 min-w-0';
+
+  const sheetSelectClass = isMobile
+    ? 'mobile-field text-sm py-2 flex-1 min-w-0 max-w-full'
+    : isPs
+      ? 'ps-field text-[10px] py-1 flex-1 min-w-0 max-w-full'
+      : 'px-2.5 py-1 text-xs bg-white border border-gray-100 rounded-lg flex-1 min-w-0 max-w-full';
 
   return (
     <div className={wrapperClass}>
-      {/* {!isPs && (
-        <div className="flex flex-wrap items-center justify-between gap-4">
-          <div>
-            <h3 className="text-sm font-bold text-gray-900 leading-none">批量数据源导入</h3>
-            <p className="text-[11px] text-gray-400 mt-1">上传 Excel 或 CSV，绑定当前模板变量</p>
-          </div>
-        </div>
-      )} */}
-
       {!isMobile && (
-      <div className={`flex flex-wrap gap-2 ${isPs ? '' : 'justify-end'}`}>
-        <button
-          type="button"
-          onClick={() => downloadDataTemplate(templateName, templateVariables)}
-          className={
-            isMobile
-              ? 'mobile-secondary-btn w-full'
-              : isPs
-              ? 'ps-btn text-[10px] w-full justify-center'
-              : 'inline-flex items-center gap-1.5 px-3 py-1.5 border border-gray-200 text-gray-600 hover:bg-gray-50 rounded-lg text-xs font-semibold cursor-pointer'
-          }
-        >
-          <Download className="w-3.5 h-3.5" />
-          下载数据模板
-        </button>
-      </div>
+        <div className={`flex flex-wrap gap-2 ${isPs ? '' : 'justify-end'}`}>
+          <button
+            type="button"
+            onClick={() => downloadDataTemplate(templateName, templateVariables)}
+            className={
+              isMobile
+                ? 'mobile-secondary-btn w-full'
+                : isPs
+                  ? 'ps-btn text-[10px] w-full justify-center'
+                  : 'inline-flex items-center gap-1.5 px-3 py-1.5 border border-gray-200 text-gray-600 hover:bg-gray-50 rounded-lg text-xs font-semibold cursor-pointer'
+            }
+          >
+            <Download className="w-3.5 h-3.5" />
+            下载数据模板
+          </button>
+        </div>
       )}
 
       {!importData ? (
@@ -197,16 +214,16 @@ 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
@@ -227,16 +244,17 @@ export const DataImporter: React.FC<DataImporterProps> = ({
                 isMobile
                   ? 'text-[15px] font-semibold text-slate-700'
                   : isPs
-                  ? 'text-xs text-[#ccc]'
-                  : 'text-xs text-gray-700'
+                    ? 'text-xs text-[#ccc]'
+                    : 'text-xs text-gray-700'
               }`}
             >
               {isMobile ? '点击选择 Excel / CSV' : '点击上传或拖拽文件到此处'}
             </p>
             {isMobile && (
-              <p className="text-xs text-slate-400 leading-relaxed">
-                支持 .xlsx、.xls、.csv
-              </p>
+              <p className="text-xs text-slate-400 leading-relaxed">支持 .xlsx、.xls、.csv</p>
+            )}
+            {!isMobile && isPs && (
+              <p className="text-[10px] text-[#666] mt-1">多工作表文件可在导入后切换 Sheet</p>
             )}
           </div>
         </div>
@@ -246,43 +264,74 @@ export const DataImporter: React.FC<DataImporterProps> = ({
             isMobile
               ? 'mobile-file-card'
               : isPs
-              ? 'flex flex-wrap items-center justify-between p-2.5 bg-[#1e1e1e] border border-[#3a3a3a] rounded gap-3'
-              : 'flex flex-wrap items-center justify-between p-3.5 bg-gray-50 rounded-xl gap-4 border border-gray-100'
+                ? 'p-2.5 bg-[#1e1e1e] border border-[#3a3a3a] rounded space-y-2.5 min-w-0'
+                : 'p-3.5 bg-gray-50 rounded-xl border border-gray-100 space-y-3 min-w-0'
           }
         >
-          <div className="flex items-center gap-2 overflow-hidden min-w-0">
-            <FileSpreadsheet
-              className={`w-5 h-5 shrink-0 ${isPs ? 'text-emerald-400' : 'text-emerald-600'}`}
-            />
-            <div className="overflow-hidden min-w-0">
-              <p
-                className={`truncate ${
-                  isMobile ? 'text-sm text-slate-800' : isPs ? 'text-xs text-[#e8e8e8]' : 'text-gray-800'
-                }`}
-              >
-                {importData.fileName}
-              </p>
-              <p
-                className={`mt-0.5 ${
-                  isMobile ? 'text-xs text-slate-500' : isPs ? 'text-[10px] text-[#777]' : 'text-[10px] text-gray-400'
-                }`}
-              >
-                {rows.length} 条记录 · {columns.length} 列
-              </p>
+          <div className="flex items-start gap-2 w-full min-w-0">
+            <div className="flex items-start gap-2 min-w-0 flex-1">
+              <FileSpreadsheet
+                className={`w-5 h-5 shrink-0 mt-0.5 ${isPs ? 'text-emerald-400' : 'text-emerald-600'}`}
+              />
+              <div className="min-w-0 flex-1">
+                <p
+                  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'
+                  }`}
+                  title={
+                    hasMultipleSheets
+                      ? `${importData.currentSheet} · ${rows.length} 条记录 · ${columns.length} 列`
+                      : `${rows.length} 条记录 · ${columns.length} 列`
+                  }
+                >
+                  {hasMultipleSheets && (
+                    <span className={isPs ? 'text-[#31a8ff]' : 'text-indigo-600'}>
+                      {importData.currentSheet}
+                      {' · '}
+                    </span>
+                  )}
+                  {rows.length} 条记录 · {columns.length} 列
+                </p>
+              </div>
             </div>
+            <button
+              type="button"
+              onClick={handleClear}
+              className={
+                isMobile
+                  ? 'mobile-text-btn danger shrink-0'
+                  : isPs
+                    ? 'ps-btn text-[10px] text-rose-300 hover:text-rose-200 shrink-0'
+                    : 'flex items-center gap-1 text-xs font-semibold text-rose-600 hover:bg-rose-50 px-2.5 py-1.5 rounded-lg cursor-pointer shrink-0'
+              }
+            >
+              <Trash2 className="w-3.5 h-3.5" />
+              {!isMobile && !isPs && <span>清除</span>}
+            </button>
           </div>
-          <div className="flex items-center gap-2 shrink-0">
-            {importData.sheets.length > 1 && (
+
+          {hasMultipleSheets && (
+            <div className="flex items-center gap-2 w-full min-w-0">
+              <label
+                className={`shrink-0 ${
+                  isMobile ? 'text-xs text-slate-500' : isPs ? 'text-[10px] text-[#888]' : 'text-[10px] text-gray-500'
+                }`}
+              >
+                数据源工作表
+              </label>
               <select
                 value={importData.currentSheet}
-                onChange={(e) => handleSheetChange(e.target.value)}
-                className={
-                  isMobile
-                    ? 'mobile-field text-sm py-2'
-                    : isPs
-                    ? 'ps-field text-[10px] py-1'
-                    : 'px-2.5 py-1 text-xs bg-white border border-gray-100 rounded-lg'
-                }
+                disabled={sheetLoading}
+                onChange={(e) => void handleSheetChange(e.target.value)}
+                className={sheetSelectClass}
               >
                 {importData.sheets.map((sheet) => (
                   <option key={sheet} value={sheet}>
@@ -290,21 +339,13 @@ export const DataImporter: React.FC<DataImporterProps> = ({
                   </option>
                 ))}
               </select>
-            )}
-            <button
-              type="button"
-              onClick={onClear}
-              className={
-                isMobile
-                  ? 'mobile-text-btn danger'
-                  : isPs
-                  ? 'ps-btn text-[10px] text-rose-300 hover:text-rose-200'
-                  : 'flex items-center gap-1 text-xs font-semibold text-rose-600 hover:bg-rose-50 px-2.5 py-1.5 rounded-lg cursor-pointer'
-              }
-            >
-              <Trash2 className="w-3.5 h-3.5" />
-            </button>
-          </div>
+              {sheetLoading && (
+                <span className={`${isPs ? 'text-[10px] text-[#777]' : 'text-[10px] text-gray-400'}`}>
+                  切换中…
+                </span>
+              )}
+            </div>
+          )}
         </div>
       )}
     </div>
diff --git a/src/components/DataRangeFields.tsx b/src/components/DataRangeFields.tsx
index e7bba51..ae4592b 100644
--- a/src/components/DataRangeFields.tsx
+++ b/src/components/DataRangeFields.tsx
@@ -33,15 +33,6 @@ export const DataRangeFields: React.FC<DataRangeFieldsProps> = ({
   return (
     <div className={isMobile ? 'space-y-4' : 'space-y-2'}>
       {!isMobile && <div className="ps-section-title">数据范围</div>}
-      {isMobile && (
-        <div className="flex items-center gap-2">
-          <Filter className="w-4 h-4 text-indigo-500 shrink-0" />
-          <span className="text-sm font-semibold text-slate-800">数据范围</span>
-        </div>
-      )}
-      <p className={isMobile ? 'text-xs text-slate-500 leading-relaxed' : 'text-[10px] text-[#888] leading-relaxed'}>
-        序号指数据行顺序（从 1 开始），应用数据后生效。
-      </p>
       <div>
         {isMobile && <label className="mobile-field-label">范围</label>}
         {!isMobile && <label className="ps-field-label">范围</label>}
@@ -51,9 +42,9 @@ export const DataRangeFields: React.FC<DataRangeFieldsProps> = ({
           onChange={(e) => patchRange({ mode: e.target.value as ExportRangeConfig['mode'] })}
           className={isMobile ? 'mobile-field' : 'ps-field text-[11px]'}
         >
-          <option value="all">全部行</option>
-          <option value="odd">仅奇数序号</option>
-          <option value="even">仅偶数序号</option>
+          <option value="all">全部标签</option>
+          <option value="odd">仅限奇数序号的标签</option>
+          <option value="even">仅限偶数序号的标签</option>
           <option value="custom">自定义序号</option>
         </select>
       </div>
diff --git a/src/components/MobileExportPropsPanel.tsx b/src/components/MobileExportPropsPanel.tsx
index b138941..7a93774 100644
--- a/src/components/MobileExportPropsPanel.tsx
+++ b/src/components/MobileExportPropsPanel.tsx
@@ -32,46 +32,35 @@ export const MobileExportPropsPanel: React.FC<MobileExportPropsPanelProps> = ({
 }) => {
   const [open, setOpen] = useState(false);
 
+  if (locked) return null;
+
   const paperLabel =
     paper.type === 'custom' ? `${paper.width}×${paper.height} mm` : paper.type;
   const summary = `${paperLabel} · ${paper.orientation === 'portrait' ? '纵向' : '横向'}${
     cutLine.enabled ? ' · 裁切线' : ''
   }`;
 
-  const toggleOpen = () => {
-    if (locked) return;
-    setOpen((value) => !value);
-  };
-
   return (
-    <section
-      className={`mobile-export-card mobile-export-props-card ${open ? 'is-open' : ''} ${
-        locked ? 'mobile-export-card-locked' : ''
-      }`}
-      aria-disabled={locked}
-    >
+    <section className={`mobile-export-card mobile-export-props-card ${open ? 'is-open' : ''}`}>
       <button
         type="button"
         className="mobile-export-card-head mobile-export-props-head"
-        onClick={toggleOpen}
-        aria-expanded={open && !locked}
-        disabled={locked}
+        onClick={() => setOpen((value) => !value)}
+        aria-expanded={open}
       >
         <Settings className="w-4 h-4 text-indigo-500 shrink-0 mt-0.5" />
         <div className="flex-1 min-w-0 text-left">
           <h2>导出属性</h2>
-          <p>{locked ? '上传数据后可配置纸张与裁切线' : summary}</p>
+          <p>{summary}</p>
         </div>
-        {!locked && (
-          <ChevronDown
-            className={`w-5 h-5 text-slate-400 shrink-0 mt-0.5 transition-transform duration-200 ${
-              open ? 'rotate-180' : ''
-            }`}
-          />
-        )}
+        <ChevronDown
+          className={`w-5 h-5 text-slate-400 shrink-0 mt-0.5 transition-transform duration-200 ${
+            open ? 'rotate-180' : ''
+          }`}
+        />
       </button>
 
-      {open && !locked && (
+      {open && (
         <div className="mobile-export-card-body">
           <PaperSettingsPanel
             theme="mobile"
diff --git a/src/components/MobileExportView.tsx b/src/components/MobileExportView.tsx
index 99b7ba4..cacd2f9 100644
--- a/src/components/MobileExportView.tsx
+++ b/src/components/MobileExportView.tsx
@@ -3,8 +3,6 @@ import {
   ChevronLeft,
   FileDown,
   Loader2,
-  CheckCircle2,
-  Circle,
   Database,
   Link2,
   Download,
@@ -40,40 +38,13 @@ interface MobileExportViewProps {
   onChangeDraftExportRange: (range: ExportRangeConfig) => void;
   cutLine: CutLineConfig;
   onChangeCutLine: (cutLine: CutLineConfig) => void;
-  dataStale: boolean;
-  dataApplied: boolean;
-  onApplyData: () => void;
-  draftSelectedCount: number;
-  appliedSelectedCount: number;
-  appliedTotalPages: number;
+  selectedCount: number;
+  totalPages: number;
   pdfGenerating: boolean;
   onBack: () => void;
   onExportPdf: () => void;
 }
 
-function StepBadge({
-  done,
-  active,
-  number,
-}: {
-  done: boolean;
-  active: boolean;
-  number: number;
-}) {
-  if (done) {
-    return (
-      <span className="mobile-step-badge done">
-        <CheckCircle2 className="w-3.5 h-3.5" />
-      </span>
-    );
-  }
-  return (
-    <span className={`mobile-step-badge ${active ? 'active' : ''}`}>
-      {active ? number : <Circle className="w-3 h-3 opacity-50" />}
-    </span>
-  );
-}
-
 export const MobileExportView: React.FC<MobileExportViewProps> = ({
   template,
   templateName,
@@ -91,12 +62,8 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
   onChangeDraftExportRange,
   cutLine,
   onChangeCutLine,
-  dataStale,
-  dataApplied,
-  onApplyData,
-  draftSelectedCount,
-  appliedSelectedCount,
-  appliedTotalPages,
+  selectedCount,
+  totalPages,
   pdfGenerating,
   onBack,
   onExportPdf,
@@ -108,17 +75,13 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
   const needsMapping = templateVariables.length > 0;
   const mappingComplete = !needsMapping || (hasData && mappedCount === templateVariables.length);
 
-  const currentStep = !hasData ? 1 : !mappingComplete ? 2 : 3;
-
   const exportBlockedReason = !hasData
     ? '请先上传 Excel 数据'
     : !mappingComplete
-    ? `还有 ${templateVariables.length - mappedCount} 个变量未关联`
-    : dataStale || !dataApplied
-    ? '请先应用数据'
-    : appliedSelectedCount === 0
-    ? '当前数据范围内无标签'
-    : null;
+      ? `还有 ${templateVariables.length - mappedCount} 个变量未关联`
+      : selectedCount === 0
+        ? '当前数据范围内无标签'
+        : null;
 
   return (
     <div className="mobile-export-view">
@@ -130,34 +93,16 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
           <p className="mobile-export-title truncate">{templateName}</p>
           <p className="mobile-export-subtitle">
             {template.width}×{template.height} mm
-            {hasData && dataApplied && !dataStale && (
+            {hasData && selectedCount > 0 && (
               <span>
                 {' '}
-                · {appliedSelectedCount} 枚 · {appliedTotalPages} 页
+                · {selectedCount} 枚 · {totalPages} 页
               </span>
             )}
           </p>
         </div>
       </header>
 
-      <div className="mobile-export-steps" aria-label="导出步骤">
-        <div className={`mobile-export-step ${currentStep >= 1 ? 'active' : ''} ${hasData ? 'done' : ''}`}>
-          <StepBadge done={hasData} active={currentStep === 1} number={1} />
-          <span>数据</span>
-        </div>
-        <div className="mobile-export-step-line" />
-        <div
-          className={`mobile-export-step ${currentStep >= 2 ? 'active' : ''} ${mappingComplete && hasData ? 'done' : ''}`}
-        >
-          <StepBadge done={mappingComplete && hasData} active={currentStep === 2} number={2} />
-          <span>关联</span>
-        </div>
-        <div className={`mobile-export-step ${currentStep >= 3 ? 'active' : ''}`}>
-          <StepBadge done={dataApplied && !dataStale && mappingComplete} active={currentStep === 3} number={3} />
-          <span>导出</span>
-        </div>
-      </div>
-
       <main className="mobile-export-content">
         <section className="mobile-export-card">
           <div className="mobile-export-card-head">
@@ -165,7 +110,7 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
             <div className="flex-1 min-w-0">
               <div className="flex items-start justify-between gap-2">
                 <div className="min-w-0">
-                  <h2>步骤 1 · 数据源</h2>
+                  <h2>数据源</h2>
                   <p>{hasData ? '已上传，可设置数据范围' : '上传 Excel 或 CSV 文件'}</p>
                 </div>
                 <button
@@ -189,36 +134,14 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
               templateVariables={templateVariables}
             />
             {hasData && (
-              <>
-                <DataRangeFields
-                  variant="mobile"
-                  exportRange={draftExportRange}
-                  onChangeExportRange={onChangeDraftExportRange}
-                  rows={rows}
-                  paper={paper}
-                  template={template}
-                />
-                <div className="space-y-2 pt-1 border-t border-slate-100">
-                  {dataStale && (
-                    <p className="text-xs text-amber-600">数据或数据范围已变更，请先应用数据</p>
-                  )}
-                  <button
-                    type="button"
-                    onClick={onApplyData}
-                    disabled={draftSelectedCount === 0}
-                    className={`w-full inline-flex items-center justify-center gap-2 min-h-[44px] px-4 rounded-xl text-sm font-semibold transition cursor-pointer ${
-                      draftSelectedCount > 0
-                        ? dataStale || !dataApplied
-                          ? 'bg-indigo-600 text-white active:bg-indigo-700'
-                          : 'bg-slate-100 text-slate-600 border border-slate-200'
-                        : 'bg-slate-100 text-slate-400 cursor-not-allowed'
-                    }`}
-                  >
-                    <Database className="w-4 h-4 shrink-0" />
-                    应用数据
-                  </button>
-                </div>
-              </>
+              <DataRangeFields
+                variant="mobile"
+                exportRange={draftExportRange}
+                onChangeExportRange={onChangeDraftExportRange}
+                rows={rows}
+                paper={paper}
+                template={template}
+              />
             )}
           </div>
         </section>
@@ -228,7 +151,7 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
             <div className="mobile-export-card-head">
               <Link2 className="w-4 h-4 text-indigo-500 shrink-0" />
               <div className="flex-1 min-w-0">
-                <h2>步骤 2 · 关联变量</h2>
+                <h2>关联变量</h2>
                 <p>
                   {needsMapping
                     ? `已关联 ${mappedCount}/${templateVariables.length}`
@@ -281,7 +204,7 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
               <FileDown className="w-5 h-5 shrink-0" />
               {exportBlockedReason
                 ? '生成 PDF'
-                : `生成 PDF（${appliedSelectedCount} 枚 · ${appliedTotalPages} 页）`}
+                : `生成 PDF（${selectedCount} 枚 · ${totalPages} 页）`}
             </>
           )}
         </button>
diff --git a/src/components/PreviewGrid.tsx b/src/components/PreviewGrid.tsx
index 18a86e7..d03351f 100644
--- a/src/components/PreviewGrid.tsx
+++ b/src/components/PreviewGrid.tsx
@@ -91,7 +91,7 @@ export const PaperSettingsPanel: React.FC<PaperSettingsPanelProps> = ({
   const isPs = theme === 'ps';
   const isMobile = theme === 'mobile';
   const fieldClass = isMobile
-    ? 'mobile-field font-mono text-center'
+    ? 'mobile-field font-mono'
     : isPs
       ? 'ps-field font-mono text-center'
       : 'w-full px-2.5 py-1.5 bg-gray-50 border border-gray-100 rounded-lg text-xs text-center font-mono';
@@ -326,20 +326,19 @@ export const PaperSettingsPanel: React.FC<PaperSettingsPanelProps> = ({
                 />
               </div>
             ))}
-            <div>
-              <label className={labelClass}>自动计算边距</label>
+            <div className="col-span-2 flex justify-end -mt-0.5">
               <button
                 type="button"
                 onClick={autoCenterMargins}
                 className={
                   isPs
-                    ? 'ps-btn text-[10px]'
+                    ? 'text-[10px] text-[#777] hover:text-[#31a8ff] transition cursor-pointer'
                     : isMobile
-                      ? 'mobile-secondary-btn w-full'
-                      : 'w-full inline-flex items-center justify-center gap-1 bg-white hover:bg-gray-100 border border-gray-200 text-gray-600 py-1.5 px-3 rounded-lg text-[10px] font-bold cursor-pointer'
+                      ? 'text-xs text-slate-500 hover:text-indigo-600 font-normal py-1 cursor-pointer'
+                      : 'text-[10px] text-gray-500 hover:text-indigo-600 font-normal cursor-pointer'
                 }
               >
-                计算
+                自动计算边距
               </button>
             </div>
           </div>
diff --git a/src/index.css b/src/index.css
index 7353a44..10fe492 100644
--- a/src/index.css
+++ b/src/index.css
@@ -272,6 +272,7 @@ body,
 .ps-panel-body {
   color: var(--color-ps-text);
   overscroll-behavior: none;
+  min-width: 0;
 }
 
 .ps-panel-body input[type="number"],
@@ -845,6 +846,7 @@ body,
 
   .mobile-export-card-body {
     padding: 18px 18px 20px;
+    min-width: 0;
   }
 
   .mobile-export-card-locked {
@@ -927,10 +929,11 @@ body,
 
   .mobile-file-card {
     display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: 14px;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+    min-width: 0;
+    width: 100%;
     padding: 0;
     background: transparent;
     border: none;