sohelp-eleplus 1.1.24 → 1.1.25

package/sohelp-import/index.vue

@@ -12,17 +12,11 @@
         </div>
       </div>
       <div class="upload-area" @drop.prevent="onDrop" @dragover.prevent>
-        <el-upload
-          drag
-          :auto-upload="false"
-          :show-file-list="false"
-          :on-change="onFileChange"
-          :on-remove="onRemove"
-          :limit="1"
-          accept=".xls,.xlsx"
-          class="uploader"
-        >
-          <i class="el-icon"><UploadFilled /></i>
+        <el-upload drag :auto-upload="false" :show-file-list="false" :on-change="onFileChange" :on-remove="onRemove"
+          :limit="1" accept=".xls,.xlsx" class="uploader">
+          <i class="el-icon">
+            <UploadFilled />
+          </i>
           <div class="el-upload__text">拖拽文件到此处或点击上传</div>
           <div class="el-upload__tip">仅限 .xls/.xlsx，大小不超过 50MB</div>
         </el-upload>
@@ -66,14 +60,9 @@
       <el-button type="primary" @click="saveConfig">保存</el-button>
     </template>
   </ele-modal>
-  <ele-modal
-    :model-value="historyVisible"
-    title="导入历史"
-    :width="800"
-    @update:modelValue="(v) => (historyVisible = v)"
-  >
+  <ele-modal :model-value="historyVisible" title="导入历史" :width="800" @update:modelValue="(v) => (historyVisible = v)">
     <div class="history-wrap">
-      <vxe-grid :columns="historyColumns" :data="historyList" size="mini" border>
+      <sohelp-vxe-grid :gridOptions="gridOptions" :url="`/engine/web/import/history?refid=${props.refid}`" size="mini" border>
         <template #op="{ row }">
           <el-space :size="6">
             <el-button size="small" plain @click="downloadHistoryFile(row)">下载文件</el-button>
@@ -81,7 +70,7 @@
             <el-button size="small" plain type="danger" @click="deleteHistoryFile(row)">删除文件</el-button>
           </el-space>
         </template>
-      </vxe-grid>
+      </sohelp-vxe-grid>
     </div>
     <template #footer>
       <el-button @click="historyVisible = false">关闭</el-button>
@@ -89,382 +78,400 @@
   </ele-modal>
 </template>
 <script setup>
-  import { ref, computed } from 'vue';
-  import { ElMessage } from 'element-plus/es';
-  import { EleMessage } from '@/components/ele-admin-plus/components';
-  import { UploadFilled } from '@element-plus/icons-vue';
-  import SohelpHttp from '../http/SohelpHttp.js';
+import { ref, computed } from 'vue';
+import { ElMessage } from 'element-plus/es';
+import { EleMessage } from '@/components/ele-admin-plus/components';
+import { UploadFilled } from '@element-plus/icons-vue';
+import SohelpHttp from '../http/SohelpHttp.js';
 
-  const MAX_ROWS = 10000;
+const MAX_ROWS = 10000;
 
-  const props = defineProps({
-    modelValue: Boolean,
-    refid: {
-      type: String,
-      required: true
-    },
-    fields: {
-      type: Array,
-      default: () => []
-    }
-  });
-  const emit = defineEmits(['update:modelValue', 'close']);
+const props = defineProps({
+  modelValue: Boolean,
+  refid: {
+    type: String,
+    required: true
+  },
+  fields: {
+    type: Array,
+    default: () => []
+  }
+});
+const emit = defineEmits(['update:modelValue', 'close']);
 
-  const loading = ref(false);
-  const fileName = ref('');
-  const fileSize = ref(0);
-  const progress = ref(0);
-  const progressStatus = ref('success');
-  const rowCount = ref(0);
-  const fileId = ref('');
-  const previewVisible = ref(false);
-  const previewData = ref([]);
-  const previewColumns = ref([]);
+const loading = ref(false);
+const fileName = ref('');
+const fileSize = ref(0);
+const progress = ref(0);
+const progressStatus = ref('success');
+const rowCount = ref(0);
+const fileId = ref('');
+const previewVisible = ref(false);
+const previewData = ref([]);
+const previewColumns = ref([]);
 
-  const configVisible = ref(false);
-  const whitelist = ref([]);
-  const mapping = ref({});
-  const historyVisible = ref(false);
-  const historyList = ref([]);
-  const downloadingTemplate = ref(false);
-  const historyColumns = ref([
-    { field: 'file', title: '文件名', align: 'center', minWidth: 160 },
-    { field: 'size', title: '大小', align: 'center', minWidth: 100 },
-    { field: 'rows', title: '记录数', align: 'center', minWidth: 90 },
-    { field: 'upload_user', title: '导入人员', align: 'center', minWidth: 120 },
-    { field: 'update_time', title: '导入时间', align: 'center', minWidth: 180 },
+const configVisible = ref(false);
+const whitelist = ref([]);
+const mapping = ref({});
+const historyVisible = ref(false);
+const historyList = ref([]);
+const downloadingTemplate = ref(false);
+const gridOptions = ref({
+  maxHeight: 500,
+  columns: [
+    { field: 'id', title: 'ID', align: 'center', width: 160 },
+    { field: 'filename', title: '文件名', align: 'center', minWidth: 160 },
+    { field: 'size', title: '大小', align: 'center', minWidth: 100,
+      formatter: ({ cellValue }) => formatSize(cellValue)
+     },
+    // { field: 'rows', title: '记录数', align: 'center', minWidth: 90 },
+    { field: 'upload_usernamme', title: '导入人员', align: 'center', minWidth: 120 },
+    { field: 'upload_time', title: '导入时间', align: 'center', minWidth: 180 },
     { field: 'op', title: '操作', align: 'center', minWidth: 220, slots: { default: 'op' } }
-  ]);
-
-  const canImport = computed(() => !!fileId.value && rowCount.value > 0 && rowCount.value <= MAX_ROWS);
+  ]
+});
 
-  const updateModelValue = (val) => {
-    emit('update:modelValue', val);
-    if (!val) {
-      onRemove();
-    }
-  };
+const canImport = computed(() => !!fileId.value && rowCount.value > 0 && rowCount.value <= MAX_ROWS);
 
-  const onClose = () => {
-    emit('update:modelValue', false);
-    emit('close');
+const updateModelValue = (val) => {
+  emit('update:modelValue', val);
+  if (!val) {
     onRemove();
-  };
+  }
+};
 
-  const formatSize = (n) => {
-    if (n < 1024) return n + 'B';
-    if (n < 1024 * 1024) return (n / 1024).toFixed(1) + 'KB';
-    return (n / 1024 / 1024).toFixed(1) + 'MB';
-  };
+const onClose = () => {
+  emit('update:modelValue', false);
+  emit('close');
+  onRemove();
+};
 
-  const openConfig = () => {
-    if (!whitelist.value.length) {
-      whitelist.value = props.fields.map((f) => f.name);
-    }
-    if (Object.keys(mapping.value).length === 0) {
-      props.fields.forEach((f) => (mapping.value[f.name] = f.label || f.name));
-    }
-    configVisible.value = true;
-  };
-  const updateConfigVisible = (v) => (configVisible.value = v);
-  const saveConfig = () => {
-    configVisible.value = false;
-  };
-  const getFieldLabel = (name) => props.fields.find((f) => f.name === name)?.label || name;
+const formatSize = (n) => {
+  if (n < 1024) return n + 'B';
+  if (n < 1024 * 1024) return (n / 1024).toFixed(1) + 'KB';
+  return (n / 1024 / 1024).toFixed(1) + 'MB';
+};
 
-  /**
-   * 下载导入模板
-   * - 绑定click事件监听器到 button 元素
-   * - 在事件处理函数中动态获取当前列表的refid值
-   * - 构造完整下载URL：/engine/web/import/downloadTemplate?refid=${动态获取的refid}
-   * - 使用SohelpHttp.download方法发起请求，参数格式为：{refid: '动态refid值'}
-   * - 错误处理：捕获refid无效、网络错误、服务器错误，并实现重试
-   * - 用户体验：显示loading，下载进度
-   */
-  const downloadTemplate = async () => {
-    // 验证 refid 参数
-    if (!props.refid) {
-      EleMessage.error('请选择有效的模板');
-      return;
-    }
+const openConfig = () => {
+  if (!whitelist.value.length) {
+    whitelist.value = props.fields.map((f) => f.name);
+  }
+  if (Object.keys(mapping.value).length === 0) {
+    props.fields.forEach((f) => (mapping.value[f.name] = f.label || f.name));
+  }
+  configVisible.value = true;
+};
+const updateConfigVisible = (v) => (configVisible.value = v);
+const saveConfig = () => {
+  configVisible.value = false;
+};
+const getFieldLabel = (name) => props.fields.find((f) => f.name === name)?.label || name;
 
-    downloadingTemplate.value = true;
-    const maxRetries = 3;
-    let retryCount = 0;
-    let lastError = null;
+/**
+ * 下载导入模板
+ * - 绑定click事件监听器到 button 元素
+ * - 在事件处理函数中动态获取当前列表的refid值
+ * - 构造完整下载URL：/engine/web/import/downloadTemplate?refid=${动态获取的refid}
+ * - 使用SohelpHttp.download方法发起请求，参数格式为：{refid: '动态refid值'}
+ * - 错误处理：捕获refid无效、网络错误、服务器错误，并实现重试
+ * - 用户体验：显示loading，下载进度
+ */
+const downloadTemplate = async () => {
+  // 验证 refid 参数
+  if (!props.refid) {
+    EleMessage.error('请选择有效的模板');
+    return;
+  }
+
+  downloadingTemplate.value = true;
+  const maxRetries = 3;
+  let retryCount = 0;
+  let lastError = null;
 
-    // 错误重试机制（最多3次）
-    while (retryCount <= maxRetries) {
-      try {
-        await SohelpHttp.download(
-          '/engine/web/import/downloadTemplate',
-          { refid: props.refid },
-          '导入模板.xlsx',
-          (loaded, total) => {
-            // 大文件下载时显示进度条
-            // 这里可以对接UI的进度条，目前简单处理，如果需要更复杂的UI交互可以扩展
-            if (total > 0) {
-              const percent = Math.floor((loaded / total) * 100);
-              // console.log(`下载进度: ${percent}%`);
-            }
-          },
-          { timeout: 30000 } // 实现请求超时机制，默认设置为30秒
-        );
-        EleMessage.success('模板下载成功');
-        downloadingTemplate.value = false;
-        return;
-      } catch (error) {
-        lastError = error;
-        retryCount++;
-        if (retryCount <= maxRetries) {
-          // 简单的指数退避或固定等待
-          await new Promise((resolve) => setTimeout(resolve, 1000));
-        }
+  // 错误重试机制（最多3次）
+  while (retryCount <= maxRetries) {
+    try {
+      await SohelpHttp.download(
+        '/engine/web/import/downloadTemplate',
+        { refid: props.refid },
+        '导入模板.xlsx',
+        (loaded, total) => {
+          // 大文件下载时显示进度条
+          // 这里可以对接UI的进度条，目前简单处理，如果需要更复杂的UI交互可以扩展
+          if (total > 0) {
+            const percent = Math.floor((loaded / total) * 100);
+            console.log(`下载进度: ${percent}%`);
+          }
+        },
+        { timeout: 30000 } // 实现请求超时机制，默认设置为30秒
+      );
+      EleMessage.success('模板下载成功');
+      downloadingTemplate.value = false;
+      return;
+    } catch (error) {
+      lastError = error;
+      retryCount++;
+      if (retryCount <= maxRetries) {
+        // 简单的指数退避或固定等待
+        await new Promise((resolve) => setTimeout(resolve, 1000));
       }
     }
+  }
 
-    downloadingTemplate.value = false;
-    // 错误处理机制
-    const errorMsg = String(lastError);
-    if (errorMsg.includes('timeout') || errorMsg.includes('Network Error')) {
-      EleMessage.error('网络连接异常，请稍后重试');
-    } else {
-      EleMessage.error(errorMsg || '下载失败');
-    }
-  };
+  downloadingTemplate.value = false;
+  // 错误处理机制
+  const errorMsg = String(lastError);
+  if (errorMsg.includes('timeout') || errorMsg.includes('Network Error')) {
+    EleMessage.error('网络连接异常，请稍后重试');
+  } else {
+    EleMessage.error(errorMsg || '下载失败');
+  }
+};
 
-  const onDrop = async (e) => {
-    const file = e.dataTransfer.files?.[0];
-    if (file) await handleFile(file);
-  };
-  const onFileChange = async (file) => {
-    const f = file?.raw || file;
-    if (f) await handleFile(f);
-  };
-  const onRemove = () => {
-    fileName.value = '';
-    fileSize.value = 0;
-    progress.value = 0;
-    rowCount.value = 0;
-    previewVisible.value = false;
-    fileId.value = '';
-    previewData.value = [];
-    previewColumns.value = [];
-    progressStatus.value = 'success';
-    loading.value = false;
-  };
+const onDrop = async (e) => {
+  const file = e.dataTransfer.files?.[0];
+  if (file) await handleFile(file);
+};
+const onFileChange = async (file) => {
+  const f = file?.raw || file;
+  if (f) await handleFile(f);
+};
+const onRemove = () => {
+  fileName.value = '';
+  fileSize.value = 0;
+  progress.value = 0;
+  rowCount.value = 0;
+  previewVisible.value = false;
+  fileId.value = '';
+  previewData.value = [];
+  previewColumns.value = [];
+  progressStatus.value = 'success';
+  loading.value = false;
+};
 
-  const handleFile = async (file) => {
-    const ext = file.name.toLowerCase().split('.').pop();
-    if (!['xls', 'xlsx'].includes(ext)) {
-      ElMessage.error('仅支持 .xls 或 .xlsx 文件');
-      return;
-    }
-    if (file.size > 50 * 1024 * 1024) {
-      ElMessage.error('文件大小超过 50MB 限制');
+const handleFile = async (file) => {
+  const ext = file.name.toLowerCase().split('.').pop();
+  if (!['xls', 'xlsx'].includes(ext)) {
+    ElMessage.error('仅支持 .xls 或 .xlsx 文件');
+    return;
+  }
+  if (file.size > 50 * 1024 * 1024) {
+    ElMessage.error('文件大小超过 50MB 限制');
+    return;
+  }
+  fileName.value = file.name;
+  fileSize.value = file.size;
+  progress.value = 10;
+  const form = new FormData();
+  form.append('refid', props.refid);
+  form.append('file', file);
+  try {
+    const res = await SohelpHttp.post('/engine/web/import/upload', form);
+    if (!res.meta.success) {
+      progressStatus.value = 'exception';
+      ElMessage.error(res.meta.message || '上传失败');
       return;
     }
-    fileName.value = file.name;
-    fileSize.value = file.size;
-    progress.value = 10;
-    const form = new FormData();
-    form.append('refid', props.refid);
-    form.append('file', file);
-    try {
-      const res = await SohelpHttp.post('/engine/web/import/upload', form);
-      if (!res.meta.success) {
-        progressStatus.value = 'exception';
-        ElMessage.error(res.meta.message || '上传失败');
-        return;
-      }
-      fileId.value = res.data?.fileId || '';
-      rowCount.value = res.data?.rows || 0;
-      if (rowCount.value > MAX_ROWS) {
-        progressStatus.value = 'exception';
-        ElMessage.error('超过最大行数限制（10,000）');
-        return;
-      }
-      progress.value = 60;
-      await loadPreview();
-      progress.value = 100;
-      progressStatus.value = 'success';
-      // 默认不显示预览数据
-      previewVisible.value = false;
-    } catch (e) {
+    fileId.value = res.data?.fileId || '';
+    rowCount.value = res.data?.rows || 0;
+    if (rowCount.value > MAX_ROWS) {
       progressStatus.value = 'exception';
-      ElMessage.error(String(e));
-    }
-  };
-
-  const togglePreview = () => {
-    previewVisible.value = !previewVisible.value;
-  };
-  const downloadProcessed = () => {
-    if (!fileId.value) {
-      ElMessage.error('请先上传导入文件');
+      ElMessage.error('超过最大行数限制（10,000）');
       return;
     }
-    SohelpHttp.download(
-      '/engine/web/import/download',
-      { fileId: fileId.value },
-      fileName.value || '导入数据.xlsx'
-    ).catch((e) => ElMessage.error(String(e)));
-  };
-  const viewHistory = async () => {
-    try {
-      const res = await SohelpHttp.get('/engine/web/import/history', { refid: props.refid });
-      if (res.meta.success) {
-        const list = res.data?.results || [];
-        historyList.value = list;
-        historyVisible.value = true;
-      } else {
-        ElMessage.error(res.meta.message || '获取历史失败');
-      }
-    } catch (e) {
-      ElMessage.error(String(e));
-    }
-  };
-  const commitImport = async () => {
-    if (!canImport.value) {
-      ElMessage.error('请上传有效的导入文件');
-      return;
+    progress.value = 60;
+    await loadPreview();
+    progress.value = 100;
+    progressStatus.value = 'success';
+    // 默认不显示预览数据
+    previewVisible.value = false;
+  } catch (e) {
+    progressStatus.value = 'exception';
+    ElMessage.error(String(e));
+  }
+};
+
+const togglePreview = () => {
+  previewVisible.value = !previewVisible.value;
+};
+const downloadProcessed = () => {
+  if (!fileId.value) {
+    ElMessage.error('请先上传导入文件');
+    return;
+  }
+  SohelpHttp.download(
+    '/engine/web/import/download',
+    { fileId: fileId.value },
+    fileName.value || '导入数据.xlsx'
+  ).catch((e) => ElMessage.error(String(e)));
+};
+const viewHistory = async () => {
+  try {
+    const res = await SohelpHttp.get('/engine/web/import/history', { refid: props.refid });
+    if (res.meta.success) {
+      const list = res.data?.results || [];
+      historyList.value = list;
+      historyVisible.value = true;
+    } else {
+      ElMessage.error(res.meta.message || '获取历史失败');
     }
-    const loadingTip = EleMessage.loading('导入中..');
-    try {
-      loading.value = true;
-      const res = await SohelpHttp.post('/engine/web/import/confirm', { fileId: fileId.value, refid: props.refid });
-      if (res.meta.success) {
-        ElMessage.success(res.meta.message || '导入完成');
-        emit('update:modelValue', false);
-      } else {
-        ElMessage.error(res.meta.message || '导入失败');
-      }
-    } catch (e) {
-      ElMessage.error(String(e));
-    } finally {
-      loadingTip.close();
-      loading.value = false;
+  } catch (e) {
+    ElMessage.error(String(e));
+  }
+};
+const commitImport = async () => {
+  if (!canImport.value) {
+    ElMessage.error('请上传有效的导入文件');
+    return;
+  }
+  const loadingTip = EleMessage.loading('导入中..');
+  try {
+    loading.value = true;
+    const res = await SohelpHttp.post('/engine/web/import/confirm', { fileId: fileId.value, refid: props.refid });
+    if (res.meta.success) {
+      ElMessage.success(res.meta.message || '导入完成');
+      emit('update:modelValue', false);
+    } else {
+      ElMessage.error(res.meta.message || '导入失败');
     }
-  };
+  } catch (e) {
+    ElMessage.error(String(e));
+  } finally {
+    loadingTip.close();
+    loading.value = false;
+  }
+};
 
-  const loadPreview = async () => {
-    try {
-      const res = await SohelpHttp.get('/engine/web/import/preview', { refid: props.refid, fileId: fileId.value });
-      if (res.meta.success) {
-        const rows = Array.isArray(res.data.results) ? res.data.results : [];
-        previewData.value = rows.slice(0, 50);
-        const keys = rows.length
-          ? Object.keys(rows[0])
-          : whitelist.value.length
-            ? whitelist.value
-            : props.fields.map((f) => f.name);
-        previewColumns.value = keys.map((k) => ({
-          field: k,
-          title: getFieldLabel(k),
-          align: 'center',
-          minWidth: 120
-        }));
-        // previewVisible.value = true; // 加载数据后不自动显示
-      } else {
-        ElMessage.error(res.meta.message || '预览失败');
-      }
-    } catch (e) {
-      ElMessage.error(String(e));
+const loadPreview = async () => {
+  try {
+    const res = await SohelpHttp.get('/engine/web/import/preview', { refid: props.refid, fileId: fileId.value });
+    if (res.meta.success) {
+      const rows = Array.isArray(res.data.results) ? res.data.results : [];
+      previewData.value = rows.slice(0, 50);
+      const keys = rows.length
+        ? Object.keys(rows[0])
+        : whitelist.value.length
+          ? whitelist.value
+          : props.fields.map((f) => f.name);
+      previewColumns.value = keys.map((k) => ({
+        field: k,
+        title: getFieldLabel(k),
+        align: 'center',
+        minWidth: 120
+      }));
+      // previewVisible.value = true; // 加载数据后不自动显示
+    } else {
+      ElMessage.error(res.meta.message || '预览失败');
     }
-  };
+  } catch (e) {
+    ElMessage.error(String(e));
+  }
+};
 
-  const downloadHistoryFile = (row) => {
-    SohelpHttp.download('/engine/web/import/download', { fileId: row.file_uuid }, row.file).catch((e) =>
-      ElMessage.error(String(e))
-    );
-  };
-  const restoreHistoryFile = async (row) => {
-    try {
-      const res = await SohelpHttp.post('/engine/web/import/restore', { fileId: row.file_uuid, refid: props.refid });
-      if (res.meta.success) {
-        ElMessage.success(res.meta.message || '恢复成功');
-      } else {
-        ElMessage.error(res.meta.message || '恢复失败');
-      }
-    } catch (e) {
-      ElMessage.error(String(e));
+const downloadHistoryFile = (row) => {
+  SohelpHttp.download('/engine/web/import/download', { fileId: row.file_uuid }, row.file).catch((e) =>
+    ElMessage.error(String(e))
+  );
+};
+const restoreHistoryFile = async (row) => {
+  try {
+    const res = await SohelpHttp.post('/engine/web/import/restore', { fileId: row.file_uuid, refid: props.refid });
+    if (res.meta.success) {
+      ElMessage.success(res.meta.message || '恢复成功');
+    } else {
+      ElMessage.error(res.meta.message || '恢复失败');
     }
-  };
-  const deleteHistoryFile = async (row) => {
-    try {
-      const res = await SohelpHttp.post('/engine/web/import/delete', { fileId: row.file_uuid, refid: props.refid });
-      if (res.meta.success) {
-        ElMessage.success(res.meta.message || '删除成功');
-        await viewHistory();
-      } else {
-        ElMessage.error(res.meta.message || '删除失败');
-      }
-    } catch (e) {
-      ElMessage.error(String(e));
+  } catch (e) {
+    ElMessage.error(String(e));
+  }
+};
+const deleteHistoryFile = async (row) => {
+  try {
+    const res = await SohelpHttp.post('/engine/web/import/delete', { fileId: row.file_uuid, refid: props.refid });
+    if (res.meta.success) {
+      ElMessage.success(res.meta.message || '删除成功');
+      await viewHistory();
+    } else {
+      ElMessage.error(res.meta.message || '删除失败');
     }
-  };
+  } catch (e) {
+    ElMessage.error(String(e));
+  }
+};
 </script>
 <style scoped lang="scss">
-  .import-wrap {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-  .import-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .actions {
-    display: flex;
-    gap: 10px;
-  }
-  .actions :deep(.el-button:hover) {
-    opacity: 0.9;
-  }
-  .upload-area {
-    min-width: 300px;
-    min-height: 200px;
-    border: 1px dashed #bbb;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    border-radius: 6px;
-  }
-  .uploader {
-    width: 100%;
-  }
-  .status {
-    width: 100%;
-    margin-top: 10px;
-  }
-  .result-actions {
-    display: flex;
-    gap: 10px;
-  }
-  .config-wrap {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-  .mapping {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-  .mapping .row {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-  .mapping .label {
-    width: 160px;
-  }
-  .history-wrap {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
+.import-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.import-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.actions {
+  display: flex;
+  gap: 10px;
+}
+
+.actions :deep(.el-button:hover) {
+  opacity: 0.9;
+}
+
+.upload-area {
+  min-width: 300px;
+  min-height: 200px;
+  border: 1px dashed #bbb;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  border-radius: 6px;
+}
+
+.uploader {
+  width: 100%;
+}
+
+.status {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.result-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.config-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.mapping {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mapping .row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mapping .label {
+  width: 160px;
+}
+
+.history-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
 </style>