haiwei-ui 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haiwei-ui",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "HaiWei前端组件库",
   "author": "Eric",
   "license": "ISC",

package/packages/components/list/components/import/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <component v-bind:is="`nm-${options.showMode || 'drawer'}`" header footer draggable :padding="10" :title="title" :icon="icon" :width="width" :height="height" :visible.sync="visible_">
+  <component v-bind:is="`nm-${options.showMode || 'drawer'}`" header footer draggable :padding="10" :title="title"
+    :icon="icon" :width="width" :height="height" :visible.sync="visible_">
     <div class="import-container">
       <!-- 步骤指示器 -->
       <el-steps :active="currentStep" align-center class="import-steps" simple>
@@ -18,24 +19,14 @@
               <span class="step-subtitle">支持 .xlsx 和 .xls 格式，最大10MB</span>
             </div>
             <div class="header-right">
-              <el-upload
-                ref="upload"
-                :action="uploadUrl"
-                :headers="headers"
-                :before-upload="beforeUpload"
-                :on-success="onUploadSuccess"
-                :on-error="onUploadError"
-                :on-remove="onFileRemove"
-                :file-list="fileList"
-                :limit="1"
-                accept=".xlsx,.xls"
-                :show-file-list="false"
-              >
+              <el-upload ref="upload" :action="uploadUrl" :headers="headers" :before-upload="beforeUpload"
+                :on-success="onUploadSuccess" :on-error="onUploadError" :on-remove="onFileRemove" :file-list="fileList"
+                :limit="1" accept=".xlsx,.xls" :show-file-list="false">
                 <nm-button type="primary" icon="upload" text="选择文件" />
               </el-upload>
             </div>
           </div>
-          
+
           <div v-if="fileInfo" class="file-info">
             <el-descriptions :column="2" border size="small">
               <el-descriptions-item label="文件名">
@@ -53,7 +44,8 @@
               <el-form :model="model" label-width="120px" size="small">
                 <el-form-item label="选择工作表：">
                   <el-select v-model="model.selectedSheet" placeholder="请选择要导入的工作表" style="width: 100%">
-                    <el-option v-for="sheet in fileInfo.sheets" :key="sheet.index" :label="sheet.name" :value="sheet.index">
+                    <el-option v-for="sheet in fileInfo.sheets" :key="sheet.index" :label="sheet.name"
+                      :value="sheet.index">
                       <span style="float: left">{{ sheet.name }}</span>
                       <span style="float: right; color: #8492a6; font-size: 12px">
                         {{ sheet.rowCount }}行 × {{ sheet.columnCount }}列
@@ -64,7 +56,7 @@
               </el-form>
             </div>
           </div>
-          
+
           <div v-else class="upload-placeholder">
             <div class="placeholder-content">
               <i class="el-icon-document placeholder-icon"></i>
@@ -87,41 +79,33 @@
             <el-form-item label="是否包含表头：">
               <el-switch v-model="model.hasHeader" />
             </el-form-item>
-            
+
             <el-form-item label="跳过空行：">
               <el-switch v-model="model.skipEmptyRows" />
             </el-form-item>
-            
+
             <el-form-item label="表头行行号：">
-              <el-input-number
-                v-model="model.headerRowIndex"
-                :min="0"
-                :max="100"
-                controls-position="right"
-                style="width: 100%"
-                size="small"
-              />
+              <el-input-number v-model="model.headerRowIndex" :min="0" :max="100" controls-position="right"
+                style="width: 100%" size="small" />
             </el-form-item>
-            
+
             <el-form-item label="最大预览行数：">
-              <el-input-number
-                v-model="model.maxPreviewRows"
-                :min="1"
-                :max="1000"
-                controls-position="right"
-                style="width: 100%"
-                size="small"
-              />
+              <div style="display: flex; align-items: center; gap: 8px">
+                <el-input-number v-model="model.maxPreviewRows" :min="1" :max="50000" controls-position="right"
+                  style="flex: 1" size="small" />
+                <el-button type="primary" size="small" @click="model.maxPreviewRows = 50000" plain>
+                  选择全部
+                </el-button>
+              </div>
+              <div style="font-size: 12px; color: #909399; margin-top: 4px">
+                最大可预览50000行数据
+              </div>
             </el-form-item>
-            
+
             <el-form-item label="数据去重：">
               <el-switch v-model="model.deduplicate" />
             </el-form-item>
 
-            <div class="form-actions">
-              <nm-button type="primary" :loading="parsing" @click="onParse" text="解析文件" />
-              <nm-button @click="currentStep = 1" text="返回上一步" />
-            </div>
           </el-form>
         </el-card>
       </div>
@@ -137,31 +121,13 @@
 
           <div v-if="parseResult" class="mapping-container">
             <div class="preview-section">
-              <el-alert
-                :title="`已解析 ${parseResult.previewData.length} 行数据，${parseResult.columns.length} 列`"
-                type="info"
-                show-icon
-                :closable="false"
-                class="preview-alert"
-              />
-              
-              <el-table
-                :data="parseResult.previewData"
-                border
-                stripe
-                size="mini"
-                max-height="200"
-                v-loading="parsing"
-                class="preview-table"
-              >
-                <el-table-column
-                  v-for="(col, index) in parseResult.columns"
-                  :key="index"
-                  :prop="col.name"
-                  :label="col.label"
-                  :width="col.width"
-                  show-overflow-tooltip
-                />
+              <el-alert :title="`已解析 ${parseResult.previewData.length} 行数据，${parseResult.columns.length} 列`" type="info"
+                show-icon :closable="false" class="preview-alert" />
+
+              <el-table :data="parseResult.previewData" border stripe size="mini" max-height="200" v-loading="parsing"
+                class="preview-table">
+                <el-table-column v-for="(col, index) in parseResult.columns" :key="index" :prop="col.name"
+                  :label="col.label" :width="col.width" show-overflow-tooltip />
               </el-table>
             </div>
 
@@ -176,21 +142,10 @@
                 </el-table-column>
                 <el-table-column prop="targetColumn" label="目标字段" width="180">
                   <template v-slot="{ row }">
-                    <el-select
-                      v-model="row.targetColumn"
-                      placeholder="请选择目标字段"
-                      style="width: 100%"
-                      clearable
-                      filterable
-                      size="mini"
-                    >
+                    <el-select v-model="row.targetColumn" placeholder="请选择目标字段" style="width: 100%" clearable filterable
+                      size="mini">
                       <el-option label="不导入此列" :value="null"></el-option>
-                      <el-option
-                        v-for="col in targetColumns"
-                        :key="col.name"
-                        :label="col.label"
-                        :value="col.name"
-                      />
+                      <el-option v-for="col in targetColumns" :key="col.name" :label="col.label" :value="col.name" />
                     </el-select>
                   </template>
                 </el-table-column>
@@ -202,11 +157,6 @@
               </el-table>
             </div>
 
-            <div class="form-actions">
-              <nm-button type="primary" @click="currentStep = 4" text="下一步：确认导入" />
-              <nm-button @click="currentStep = 2" text="返回上一步" />
-              <nm-button type="info" @click="onParse" :loading="parsing" text="重新解析" />
-            </div>
           </div>
         </el-card>
       </div>
@@ -221,13 +171,9 @@
           </div>
 
           <div class="import-summary">
-            <el-alert
-              :title="`准备导入 ${parseResult ? parseResult.previewData.length : 0} 条数据`"
-              type="warning"
-              show-icon
-              :closable="false"
-            />
-            
+            <el-alert :title="`准备导入 ${confirmImportTotalRows} 条数据（${model.deduplicate ? '已去重' : '未去重'}）`" type="warning"
+              show-icon :closable="false" />
+
             <div class="mapping-summary">
               <el-descriptions :column="2" border size="small">
                 <el-descriptions-item label="Excel文件">
@@ -236,29 +182,72 @@
                 <el-descriptions-item label="工作表">
                   <el-tag size="small">{{ getSelectedSheetName() }}</el-tag>
                 </el-descriptions-item>
-                <el-descriptions-item label="总行数">
+                <el-descriptions-item label="原始总行数">
                   <el-tag type="info" size="small">{{ parseResult.basicInfo.totalRows }}</el-tag>
                 </el-descriptions-item>
+                <el-descriptions-item label="确认导入总行数">
+                  <el-tag type="success" size="small">{{ confirmImportTotalRows }}</el-tag>
+                </el-descriptions-item>
                 <el-descriptions-item label="已配置映射">
                   <el-tag type="success" size="small">{{ getMappedColumnsCount() }}列</el-tag>
                 </el-descriptions-item>
+                <el-descriptions-item label="数据去重">
+                  <el-tag :type="model.deduplicate ? 'success' : 'info'" size="small">
+                    {{ model.deduplicate ? '已启用' : '未启用' }}
+                  </el-tag>
+                </el-descriptions-item>
               </el-descriptions>
             </div>
-          </div>
 
-          <div class="form-actions">
-            <nm-button type="success" :loading="importing" @click="onImport" text="开始导入" />
-            <nm-button @click="currentStep = 3" text="返回上一步" />
+            <!-- 去重后的数据预览 -->
+            <div v-if="deduplicatedPreviewData.length > 0" class="confirm-preview-section">
+              <el-alert :title="`去重后数据预览（仅显示已配置映射的字段，共 ${confirmImportColumns.length} 列）`" type="info" show-icon
+                :closable="false" class="preview-alert" />
+
+              <el-table :data="deduplicatedPreviewData" border stripe size="mini" max-height="200"
+                class="preview-table">
+                <el-table-column v-for="(col, index) in confirmImportColumns" :key="index" :prop="col.name"
+                  :label="col.label" :width="col.width" show-overflow-tooltip />
+              </el-table>
+            </div>
+            <div v-else class="no-data-preview">
+              <el-alert title="没有可导入的数据，请检查字段映射配置" type="warning" show-icon :closable="false" />
+            </div>
           </div>
+
         </el-card>
       </div>
     </div>
 
     <!--底部-->
     <template v-slot:footer>
-      <nm-button v-if="currentStep > 1" @click="currentStep--" text="上一步" />
-      <nm-button v-if="currentStep < 4 && fileInfo" type="primary" @click="currentStep++" text="下一步" />
-      <nm-button type="info" @click="hide" text="取消" />
+      <!-- 步骤1：选择文件 -->
+      <template v-if="currentStep === 1">
+        <nm-button v-if="fileInfo" type="primary" @click="currentStep++" text="下一步" />
+        <nm-button type="info" @click="hide" text="取消" />
+      </template>
+
+      <!-- 步骤2：配置选项 -->
+      <template v-else-if="currentStep === 2">
+        <nm-button @click="currentStep--" text="返回上一步" />
+        <nm-button type="primary" :loading="parsing" @click="onParse" text="解析文件" />
+        <nm-button type="info" @click="hide" text="取消" />
+      </template>
+
+      <!-- 步骤3：数据映射 -->
+      <template v-else-if="currentStep === 3">
+        <nm-button @click="currentStep--" text="返回上一步" />
+        <nm-button type="primary" @click="currentStep++" text="下一步：确认导入" />
+        <nm-button type="info" @click="onParse" :loading="parsing" text="重新解析" />
+        <nm-button type="info" @click="hide" text="取消" />
+      </template>
+
+      <!-- 步骤4：确认导入 -->
+      <template v-else-if="currentStep === 4">
+        <nm-button @click="currentStep--" text="返回上一步" />
+        <nm-button type="success" :loading="importing" @click="onImport" text="开始导入" />
+        <nm-button type="info" @click="hide" text="取消" />
+      </template>
     </template>
   </component>
 </template>
@@ -316,6 +305,50 @@ export default {
       return {
         'Authorization': `Bearer ${accessToken}`
       }
+    },
+    // 去重后的数据（用于确认导入步骤显示）
+    deduplicatedPreviewData() {
+      if (!this.parseResult || !this.parseResult.previewData) {
+        return []
+      }
+
+      // 获取有效的列映射（有目标字段的映射）
+      const validMappings = this.columnMapping.filter(mapping => mapping.targetColumn)
+
+      if (validMappings.length === 0) {
+        return []
+      }
+
+      // 转换每一行数据，只包含已配置映射的字段
+      const allData = this.parseResult.previewData.map(row => {
+        const item = {}
+        validMappings.forEach(mapping => {
+          const excelColumnName = mapping.excelColumn.name
+          const targetColumn = mapping.targetColumn
+          item[targetColumn] = row[excelColumnName]
+        })
+        return item
+      })
+
+      // 如果启用了去重，进行去重处理
+      if (this.model.deduplicate) {
+        return this.deduplicateModels(allData)
+      }
+
+      return allData
+    },
+    // 确认导入的总行数
+    confirmImportTotalRows() {
+      return this.deduplicatedPreviewData.length
+    },
+    // 确认导入的列（只显示已配置映射的字段）
+    confirmImportColumns() {
+      const validMappings = this.columnMapping.filter(mapping => mapping.targetColumn)
+      return validMappings.map(mapping => ({
+        name: mapping.targetColumn,
+        label: this.getTargetColumnLabel(mapping.targetColumn),
+        width: 120
+      }))
     }
   },
   methods: {
@@ -327,15 +360,15 @@ export default {
       this.parsing = false
       this.importing = false
       this.columnMapping = []
-      
+
       this.initTargetColumns()
-      
+
       const { hasHeader = true, maxPreviewRows = 100, skipEmptyRows = false } = this.options
       this.model.hasHeader = hasHeader
       this.model.maxPreviewRows = maxPreviewRows
       this.model.skipEmptyRows = skipEmptyRows
     },
-    
+
     initTargetColumns() {
       if (this.cols && this.cols.length > 0) {
         this.targetColumns = this.cols
@@ -349,12 +382,12 @@ export default {
         this.targetColumns = []
       }
     },
-    
+
     beforeUpload(file) {
-      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || 
-                     file.type === 'application/vnd.ms-excel'
+      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+        file.type === 'application/vnd.ms-excel'
       const isLt10M = file.size / 1024 / 1024 < 10
-      
+
       if (!isExcel) {
         this._error('只能上传Excel文件!')
         return false
@@ -363,11 +396,11 @@ export default {
         this._error('文件大小不能超过10MB!')
         return false
       }
-      
+
       this.model.file = file
       return true
     },
-    
+
     onUploadSuccess(response, file, fileList) {
       if (response && response.code === 1) {
         this.fileInfo = response.data
@@ -377,12 +410,12 @@ export default {
         this.$refs.upload.clearFiles()
       }
     },
-    
+
     onUploadError(err, file, fileList) {
       this._error('文件上传失败')
       this.$refs.upload.clearFiles()
     },
-    
+
     onFileRemove(file, fileList) {
       this.model.file = null
       this.fileInfo = null
@@ -390,25 +423,25 @@ export default {
       this.columnMapping = []
       this.currentStep = 1
     },
-    
+
     onParse() {
       if (!this.model.file) {
         this._error('请先选择文件')
         return
       }
-      
+
       this.parsing = true
       const formData = new FormData()
       formData.append('file', this.model.file)
-      
+
       // 获取选中的工作表名称
       const selectedSheet = this.fileInfo.sheets.find(sheet => sheet.index === this.model.selectedSheet)
       const sheetName = selectedSheet ? selectedSheet.name : null
-      
+
       // 从token模块获取token
       const t = token.get()
       const accessToken = t && t.accessToken ? t.accessToken : ''
-      
+
       // 构建解析URL - 使用与uploadUrl相同的方式
       let baseURL = this.$http?.axios?.defaults?.baseURL || window.__HAIWEI_API_BASE_URL__ || '/api'
       if (!baseURL.endsWith('/')) {
@@ -416,7 +449,7 @@ export default {
       }
       const path = 'admin/excel/parseexcel'.replace(/^\//, '')
       const parseUrl = baseURL + path
-      
+
       // 添加查询参数
       const queryParams = new URLSearchParams()
       queryParams.append('hasHeader', this.model.hasHeader)
@@ -426,9 +459,9 @@ export default {
       if (sheetName) {
         queryParams.append('sheetName', sheetName)
       }
-      
+
       const fullUrl = `${parseUrl}?${queryParams.toString()}`
-      
+
       // 使用fetch API发送请求，避免axios依赖问题
       fetch(fullUrl, {
         method: 'POST',
@@ -438,97 +471,97 @@ export default {
           // 注意：不要设置Content-Type，让浏览器自动设置multipart/form-data的boundary
         }
       })
-      .then(response => response.json())
-      .then(data => {
-        if (data && data.code === 1) {
-          this.fileInfo = data.data.basicInfo
-          this.parseResult = {
-            basicInfo: data.data.basicInfo,
-            columns: data.data.headers.map((header, index) => ({
-              name: `col${index}`,
-              label: header.name,
-              width: 120
-            })),
-            previewData: data.data.data.map(row => {
-              const obj = {}
-              data.data.headers.forEach((header, colIndex) => {
-                obj[`col${colIndex}`] = row[colIndex]
+        .then(response => response.json())
+        .then(data => {
+          if (data && data.code === 1) {
+            this.fileInfo = data.data.basicInfo
+            this.parseResult = {
+              basicInfo: data.data.basicInfo,
+              columns: data.data.headers.map((header, index) => ({
+                name: `col${index}`,
+                label: header.name,
+                width: 120
+              })),
+              previewData: data.data.data.map(row => {
+                const obj = {}
+                data.data.headers.forEach((header, colIndex) => {
+                  obj[`col${colIndex}`] = row[colIndex]
+                })
+                return obj
               })
-              return obj
-            })
+            }
+            this.initColumnMapping()
+            this.currentStep = 3
+            this._success('文件解析成功')
+          } else {
+            this._error(data.msg || '文件解析失败')
           }
-          this.initColumnMapping()
-          this.currentStep = 3
-          this._success('文件解析成功')
-        } else {
-          this._error(data.msg || '文件解析失败')
-        }
-      })
-      .catch(error => {
-        this._error('文件解析失败：' + (error.message || '未知错误'))
-      })
-      .finally(() => {
-        this.parsing = false
-      })
+        })
+        .catch(error => {
+          this._error('文件解析失败：' + (error.message || '未知错误'))
+        })
+        .finally(() => {
+          this.parsing = false
+        })
     },
-    
+
     initColumnMapping() {
       if (!this.parseResult || !this.parseResult.columns) return
-      
+
       this.columnMapping = this.parseResult.columns.map(col => ({
         excelColumn: col,
         targetColumn: this.findBestMatch(col),
         required: false
       }))
     },
-    
+
     findBestMatch(excelColumn) {
       if (!this.targetColumns || this.targetColumns.length === 0) return null
-      
+
       const excelLabel = excelColumn.label.toLowerCase()
-      
+
       // 尝试完全匹配标签
       let match = this.targetColumns.find(col => col.label.toLowerCase() === excelLabel)
       if (match) return match.name
-      
+
       // 尝试包含匹配
-      match = this.targetColumns.find(col => 
-        excelLabel.includes(col.label.toLowerCase()) || 
+      match = this.targetColumns.find(col =>
+        excelLabel.includes(col.label.toLowerCase()) ||
         col.label.toLowerCase().includes(excelLabel)
       )
       if (match) return match.name
-      
+
       return null
     },
-    
+
     onImport() {
       if (!this.parseResult) {
         this._error('请先解析文件')
         return
       }
-      
+
       // 验证必填字段
       const missingRequired = this.columnMapping
         .filter(mapping => mapping.required && !mapping.targetColumn)
         .map(mapping => mapping.excelColumn.label)
-      
+
       if (missingRequired.length > 0) {
         this._error(`以下必填字段未配置映射：${missingRequired.join('、')}`)
         return
       }
-      
+
       this.importing = true
-      
+
       try {
         // 根据列映射配置生成AddModel列表
         const addModels = this.generateAddModels()
-        
+
         if (addModels.length === 0) {
           this._error('没有可导入的数据')
           this.importing = false
           return
         }
-        
+
         // 调用导入方法，传递AddModel列表
         if (this.action && typeof this.action === 'function') {
           this.action(addModels)
@@ -552,90 +585,88 @@ export default {
         this.importing = false
       }
     },
-    
+
     generateAddModels() {
       if (!this.parseResult || !this.parseResult.previewData) {
         return []
       }
-      
+
       // 获取有效的列映射（有目标字段的映射）
       const validMappings = this.columnMapping.filter(mapping => mapping.targetColumn)
-      
+
       // 转换每一行数据为AddModel
-      const allAddModels = this.parseResult.previewData.map((row, rowIndex) => {
+      const allAddModels = this.parseResult.previewData.map(row => {
         const addModel = {}
-        
+
         // 根据列映射配置设置字段值
         validMappings.forEach(mapping => {
           const excelColumnName = mapping.excelColumn.name
           const targetColumn = mapping.targetColumn
-          let value = row[excelColumnName]
-          
-          // 设置到AddModel中
-          addModel[targetColumn] = value
+          addModel[targetColumn] = row[excelColumnName]
         })
-        
+
         return addModel
       })
-      
+
       // 如果启用了去重，进行去重处理
       if (this.model.deduplicate && allAddModels.length > 0) {
-        return this.deduplicateAddModels(allAddModels)
+        return this.deduplicateModels(allAddModels)
       }
-      
+
       return allAddModels
     },
-    
-    deduplicateAddModels(addModels) {
-      if (!addModels || addModels.length === 0) {
+
+    // 通用的去重方法，可用于数据和模型
+    deduplicateModels(models) {
+      if (!models || models.length === 0) {
         return []
       }
-      
+
       // 获取所有已配置的目标字段
       const targetFields = this.columnMapping
         .filter(mapping => mapping.targetColumn)
         .map(mapping => mapping.targetColumn)
-      
+
       // 如果没有目标字段，无法去重
       if (targetFields.length === 0) {
-        return addModels
+        return models
       }
-      
+
       // 使用第一个目标字段作为去重依据
       const deduplicateField = targetFields[0]
-      
+
       // 使用Map进行去重，保留第一次出现的数据
       const uniqueMap = new Map()
-      const deduplicatedModels = []
-      
-      for (const model of addModels) {
-        const key = model[deduplicateField]
-        
+      const deduplicatedItems = []
+
+      for (const item of models) {
+        const key = item[deduplicateField]
+
         // 如果key为空，跳过去重
         if (key === null || key === undefined || key === '') {
-          deduplicatedModels.push(model)
+          deduplicatedItems.push(item)
           continue
         }
-        
+
         // 如果还没有这个key，添加到Map和结果列表
         if (!uniqueMap.has(key)) {
           uniqueMap.set(key, true)
-          deduplicatedModels.push(model)
+          deduplicatedItems.push(item)
         }
       }
-      
+
       // 记录去重统计
-      const originalCount = addModels.length
-      const deduplicatedCount = deduplicatedModels.length
+      const originalCount = models.length
+      const deduplicatedCount = deduplicatedItems.length
       const removedCount = originalCount - deduplicatedCount
-      
+
       if (removedCount > 0) {
         this._success(`数据去重：原始 ${originalCount} 条，去重后 ${deduplicatedCount} 条，移除 ${removedCount} 条重复数据`)
       }
-      
-      return deduplicatedModels
+
+      return deduplicatedItems
     },
-    
+
     formatFileSize(bytes) {
       if (bytes === 0) return '0 B'
       const k = 1024
@@ -643,17 +674,25 @@ export default {
       const i = Math.floor(Math.log(bytes) / Math.log(k))
       return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
     },
-    
+
     getSelectedSheetName() {
       if (!this.fileInfo || !this.fileInfo.sheets) return ''
       const selectedSheet = this.fileInfo.sheets.find(sheet => sheet.index === this.model.selectedSheet)
       return selectedSheet ? selectedSheet.name : ''
     },
-    
+
     getMappedColumnsCount() {
       if (!this.columnMapping) return 0
       return this.columnMapping.filter(mapping => mapping.targetColumn).length
-    }
+    },
+
+    // 获取目标字段的标签
+    getTargetColumnLabel(columnName) {
+      if (!columnName) return ''
+      const targetCol = this.targetColumns.find(col => col.name === columnName)
+      return targetCol ? targetCol.label : columnName
+    },
+
   },
   created() {
     this.init()
@@ -666,37 +705,37 @@ export default {
   .import-steps {
     margin-bottom: 20px;
   }
-  
+
   .step-content {
     .step-card {
-      border: 1px solid #dcdfe6;
-      border-radius: 4px;
-      
+      border: 1px solid var(--el-border-color-light);
+      border-radius: var(--el-border-radius-base);
+
       .step-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 12px 16px;
-        border-bottom: 1px solid #dcdfe6;
-        background-color: #f5f7fa;
-        
+        border-bottom: 1px solid var(--el-border-color-light);
+        background-color: var(--el-fill-color-light);
+
         .header-left {
           display: flex;
           flex-direction: column;
-          
+
           .step-title {
-            font-size: 14px;
-            font-weight: 600;
-            color: #303133;
+            font-size: var(--el-font-size-medium);
+            font-weight: var(--el-font-weight-primary);
+            color: var(--el-text-color-primary);
             margin-bottom: 4px;
           }
-          
+
           .step-subtitle {
-            font-size: 12px;
-            color: #909399;
+            font-size: var(--el-font-size-extra-small);
+            color: var(--el-text-color-placeholder);
           }
         }
-        
+
         .header-right {
           display: flex;
           align-items: center;
@@ -704,7 +743,7 @@ export default {
       }
     }
   }
-  
+
   .upload-placeholder {
     display: flex;
     flex-direction: column;
@@ -712,68 +751,64 @@ export default {
     justify-content: center;
     padding: 40px 16px;
     text-align: center;
-    
+
     .placeholder-content {
       .placeholder-icon {
         font-size: 36px;
-        color: #c0c4cc;
+        color: var(--el-text-color-placeholder);
         margin-bottom: 16px;
       }
-      
+
       .placeholder-text {
-        font-size: 14px;
-        color: #606266;
+        font-size: var(--el-font-size-medium);
+        color: var(--el-text-color-regular);
         margin-bottom: 8px;
-        font-weight: 500;
+        font-weight: var(--el-font-weight-primary);
       }
     }
   }
-  
+
   .file-info {
-    margin-top: 16px;
-    padding: 16px;
-    background-color: #f8f9fa;
-    border-radius: 4px;
-    
+    margin-top: var(--el-margin);
+    padding: var(--el-padding);
+    background-color: var(--el-fill-color-lighter);
+    border-radius: var(--el-border-radius-base);
+
     .sheet-select {
-      margin-top: 16px;
+      margin-top: var(--el-margin);
     }
   }
-  
-  .form-actions {
-    display: flex;
-    justify-content: center;
-    margin-top: 24px;
-    padding-top: 16px;
-    border-top: 1px solid #dcdfe6;
-  }
-  
+
   .mapping-container {
     .preview-section {
       margin-bottom: 24px;
-      
-      .preview-alert {
-        margin-bottom: 12px;
-      }
-      
-      .preview-table {
-        margin-bottom: 8px;
-      }
     }
-    
+
     .mapping-section {
       .mapping-table {
         .excel-column {
           .column-label {
-            font-weight: 500;
+            font-weight: var(--el-font-weight-primary);
           }
         }
       }
     }
   }
-  
+
   .import-summary {
-    margin: 16px 0;
+    margin: var(--el-margin) 0;
+
+    .mapping-summary {
+      margin: var(--el-margin) 0;
+    }
+
+    .confirm-preview-section {
+      margin-top: 24px;
+    }
+
+    .no-data-preview {
+      margin-top: var(--el-margin);
+    }
   }
 }
 </style>