admin-web/src/modules/master-data/express-companies/pages/ExpressCompaniesView.vue

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { Download, ExternalLink, FileSpreadsheet, Pencil, Plus, Power, Truck, Upload } from '@lucide/vue'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
import { useUnsavedWorkRegistration } from '@/core/unsaved-work/useUnsavedWorkRegistration'
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
import {
  changePlatformExpressCompanyStatus,
  createPlatformExpressCompany,
  downloadPlatformExpressCompanyImportTemplate,
  getPlatformExpressCompany,
  importPlatformExpressCompanies,
  listPlatformExpressCompanies,
  updatePlatformExpressCompany,
  type PlatformExpressCompanyImportResult,
  type PlatformExpressCompanyResource,
  type PlatformExpressCompanyStatus,
  type SavePlatformExpressCompanyRequest,
} from '@/modules/master-data/express-companies/api/platformExpressCompanies'
import { useAccessPreviewStore } from '@/core/access/accessPreview'

const fixedTenantId = 10001
const access = useAccessPreviewStore()
const loading = ref(false)
const saving = ref(false)
const editorOpen = ref(false)
const importOpen = ref(false)
const formRef = ref<FormInstance>()
const fileInputRef = ref<HTMLInputElement>()
const rows = ref<PlatformExpressCompanyResource[]>([])
const page = ref(1)
const pageSize = ref(20)
const total = ref(0)
const loadError = ref<ApiErrorDetails | null>(null)
const statusLoadingIds = ref(new Set<string>())
const editLoadingIds = ref(new Set<string>())
const downloadingTemplate = ref(false)
const importing = ref(false)
const importFile = ref<File | null>(null)
const importResult = ref<PlatformExpressCompanyImportResult | null>(null)
const importError = ref<ApiErrorDetails | null>(null)
type ExpressCompanyFilters = QueryModel & {
  keyword: string
  status: PlatformExpressCompanyStatus | ''
}
const filters = ref<ExpressCompanyFilters>({ keyword: '', status: '' })
const appliedFilters = ref<ExpressCompanyFilters>({ ...filters.value })
const queryFields: QueryField[] = [
  { key: 'keyword', type: 'input', placeholder: '快递公司名称或编码', props: { maxlength: 128, 'aria-label': '快递公司关键词' } },
  {
    key: 'status',
    type: 'select',
    placeholder: '全部状态',
    props: { 'aria-label': '快递公司状态' },
    options: [
      { label: '启用', value: 'ACTIVE' },
      { label: '停用', value: 'INACTIVE' },
    ],
  },
]
let loadSequence = 0

const emptyForm = (): SavePlatformExpressCompanyRequest & { id: string } => ({
  id: '',
  companyCode: '',
  companyName: '',
  servicePhone: null,
  website: null,
  trackingUrlTemplate: null,
  status: 'ACTIVE',
  remark: null,
})
const form = reactive(emptyForm())
const rules: FormRules<typeof form> = {
  companyCode: [{ required: true, message: '请输入快递公司编码', trigger: 'blur' }],
  companyName: [{ required: true, message: '请输入快递公司名称', trigger: 'blur' }],
  website: [{ type: 'url', message: '请输入以 http:// 或 https:// 开头的完整网址', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
}
const editorTitle = computed(() => form.id ? '编辑快递公司' : '新增快递公司')
const editorPermission = computed(() => form.id ? 'platform:express:edit' : 'platform:express:create')
const displayedImportErrors = computed(() => importResult.value?.errors.slice(0, 100) || [])
const { captureBaseline } = useUnsavedWorkRegistration({
  key: 'express-company-editor',
  label: editorTitle,
  isOpen: editorOpen,
  model: form,
  requiredPermission: editorPermission,
})

watch(
  () => access.can(editorPermission.value),
  (canWrite) => {
    if (canWrite || !editorOpen.value) return
    editorOpen.value = false
    Object.assign(form, emptyForm())
  },
  { flush: 'sync' },
)

function optionalText(value: string | null) {
  const trimmed = value?.trim()
  return trimmed || null
}

function safeHttpUrl(value: string | null) {
  if (!value) return null
  try {
    const url = new URL(value)
    return ['http:', 'https:'].includes(url.protocol) ? url.toString() : null
  } catch {
    return null
  }
}

function formatUpdatedAt(value?: string | null) {
  return value?.replace('T', ' ').slice(0, 16) || '—'
}

const expressCompanyColumns: DataTableColumn[] = [
  { key: 'actions', label: '操作', width: 170, fixed: 'left', slotName: 'actions' },
  { key: 'company', label: '快递公司', minWidth: 210, slotName: 'company' },
  { prop: 'servicePhone', label: '客服电话', minWidth: 130, formatter: (row: PlatformExpressCompanyResource) => row.servicePhone || '—' },
  { key: 'website', label: '官方网站', minWidth: 210, slotName: 'website' },
  { key: 'trackingUrlTemplate', label: '轨迹查询模板', minWidth: 260, slotName: 'trackingUrlTemplate' },
  { key: 'remark', label: '备注', minWidth: 200, slotName: 'remark' },
  { prop: 'updatedAt', label: '更新时间', minWidth: 150, formatter: (row: PlatformExpressCompanyResource) => formatUpdatedAt(row.updatedAt) },
  { key: 'status', label: '状态', width: 100, slotName: 'status' },
]

async function loadExpressCompanies() {
  const sequence = ++loadSequence
  loading.value = true
  loadError.value = null
  try {
    const result = await listPlatformExpressCompanies(
      fixedTenantId,
      page.value,
      pageSize.value,
      appliedFilters.value.keyword,
      appliedFilters.value.status,
    )
    if (sequence !== loadSequence) return
    rows.value = result.records
    total.value = result.total
  } catch (error) {
    if (sequence !== loadSequence) return
    rows.value = []
    total.value = 0
    loadError.value = getApiErrorDetails(error, '快递公司加载失败，请稍后重试')
  } finally {
    if (sequence === loadSequence) loading.value = false
  }
}

function applyFilters(model: QueryModel) {
  appliedFilters.value = {
    keyword: String(model.keyword || ''),
    status: (model.status || '') as PlatformExpressCompanyStatus | '',
  }
  if (page.value === 1) {
    void loadExpressCompanies()
    return
  }
  page.value = 1
}

function openCreate() {
  Object.assign(form, emptyForm())
  captureBaseline()
  editorOpen.value = true
  void formRef.value?.clearValidate()
}

function assignEditor(row: PlatformExpressCompanyResource) {
  Object.assign(form, {
    id: String(row.id),
    companyCode: row.companyCode,
    companyName: row.companyName,
    servicePhone: row.servicePhone,
    website: row.website,
    trackingUrlTemplate: row.trackingUrlTemplate,
    status: row.status,
    remark: row.remark,
  })
  captureBaseline()
  editorOpen.value = true
  void formRef.value?.clearValidate()
}

async function openEdit(row: PlatformExpressCompanyResource) {
  const id = String(row.id)
  const pending = new Set(editLoadingIds.value)
  pending.add(id)
  editLoadingIds.value = pending
  try {
    assignEditor(await getPlatformExpressCompany(fixedTenantId, row.id))
  } catch (error) {
    const details = getApiErrorDetails(error, '快递公司详情加载失败，请稍后重试')
    ElMessage.error(details.requestId ? `${details.message}（requestId: ${details.requestId}）` : details.message)
  } finally {
    const next = new Set(editLoadingIds.value)
    next.delete(id)
    editLoadingIds.value = next
  }
}

function openImport() {
  importFile.value = null
  importResult.value = null
  importError.value = null
  if (fileInputRef.value) fileInputRef.value.value = ''
  importOpen.value = true
}

function saveBlob(blob: Blob, fileName: string) {
  const url = URL.createObjectURL(blob)
  const anchor = document.createElement('a')
  anchor.href = url
  anchor.download = fileName
  anchor.click()
  URL.revokeObjectURL(url)
}

async function downloadImportTemplate() {
  downloadingTemplate.value = true
  try {
    const blob = await downloadPlatformExpressCompanyImportTemplate()
    saveBlob(blob, '快递公司批量导入模板-v1.xlsx')
  } catch (error) {
    const details = getApiErrorDetails(error, '导入模板下载失败，请稍后重试')
    ElMessage.error(details.requestId ? `${details.message}（requestId: ${details.requestId}）` : details.message)
  } finally {
    downloadingTemplate.value = false
  }
}

function selectImportFile(event: Event) {
  const file = (event.target as HTMLInputElement).files?.[0] || null
  importResult.value = null
  importError.value = null
  if (!file) {
    importFile.value = null
    return
  }
  if (!file.name.toLowerCase().endsWith('.xlsx')) {
    importFile.value = null
    ElMessage.error('请选择 .xlsx 格式的标准模板文件')
    if (fileInputRef.value) fileInputRef.value.value = ''
    return
  }
  if (file.size > 5 * 1024 * 1024) {
    importFile.value = null
    ElMessage.error('导入文件不能超过 5MB')
    if (fileInputRef.value) fileInputRef.value.value = ''
    return
  }
  importFile.value = file
}

async function submitImport() {
  if (!importFile.value) {
    ElMessage.warning('请先选择填写完成的 XLSX 文件')
    return
  }
  importing.value = true
  importError.value = null
  importResult.value = null
  try {
    const result = await importPlatformExpressCompanies(fixedTenantId, importFile.value)
    importResult.value = result
    if (result.success) {
      ElMessage.success(`成功导入 ${result.importedRows} 家快递公司`)
      importFile.value = null
      if (fileInputRef.value) fileInputRef.value.value = ''
      await loadExpressCompanies()
    }
  } catch (error) {
    importError.value = getApiErrorDetails(error, '快递公司导入失败，请稍后重试')
  } finally {
    importing.value = false
  }
}

function downloadImportErrors() {
  if (!importResult.value?.errors.length) return
  const csvCell = (value: string | number) => `"${String(value).replaceAll('"', '""')}"`
  const lines = [
    ['行号', '字段', '错误原因'].map(csvCell).join(','),
    ...importResult.value.errors.map((item) => [item.row || '文件', item.field, item.message].map(csvCell).join(',')),
  ]
  saveBlob(new Blob([`\ufeff${lines.join('\r\n')}`], { type: 'text/csv;charset=utf-8' }), '快递公司导入错误报告.csv')
}

function buildPayload(): SavePlatformExpressCompanyRequest {
  return {
    companyCode: form.companyCode.trim(),
    companyName: form.companyName.trim(),
    servicePhone: optionalText(form.servicePhone),
    website: optionalText(form.website),
    trackingUrlTemplate: optionalText(form.trackingUrlTemplate),
    status: form.status,
    remark: optionalText(form.remark),
  }
}

async function saveExpressCompany() {
  const valid = await formRef.value?.validate().catch(() => false)
  if (!valid) return
  saving.value = true
  try {
    const payload = buildPayload()
    if (form.id) await updatePlatformExpressCompany(fixedTenantId, form.id, payload)
    else await createPlatformExpressCompany(fixedTenantId, payload)
    editorOpen.value = false
    ElMessage.success(form.id ? '快递公司资料已更新' : '快递公司已创建')
    await loadExpressCompanies()
  } catch (error) {
    const details = getApiErrorDetails(error, '快递公司保存失败，请检查后重试')
    ElMessage.error(details.requestId ? `${details.message}（requestId: ${details.requestId}）` : details.message)
  } finally {
    saving.value = false
  }
}

async function toggleStatus(row: PlatformExpressCompanyResource) {
  const nextStatus: PlatformExpressCompanyStatus = row.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE'
  const action = nextStatus === 'ACTIVE' ? '启用' : '停用'
  try {
    await ElMessageBox.confirm(
      `确定${action}“${row.companyName}”吗？${nextStatus === 'INACTIVE' ? '停用后不会再作为可用快递公司。' : ''}`,
      `${action}快递公司`,
      { type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: `确认${action}`, cancelButtonText: '取消' },
    )
  } catch {
    return
  }
  const id = String(row.id)
  const pending = new Set(statusLoadingIds.value)
  pending.add(id)
  statusLoadingIds.value = pending
  try {
    await changePlatformExpressCompanyStatus(fixedTenantId, row.id, nextStatus)
    ElMessage.success(`已${action}${row.companyName}`)
    await loadExpressCompanies()
  } catch (error) {
    const details = getApiErrorDetails(error, `${action}快递公司失败`)
    ElMessage.error(details.requestId ? `${details.message}（requestId: ${details.requestId}）` : details.message)
  } finally {
    const next = new Set(statusLoadingIds.value)
    next.delete(id)
    statusLoadingIds.value = next
  }
}

watch([page, pageSize], () => { void loadExpressCompanies() })

onMounted(() => {
  void loadExpressCompanies()
})
</script>

<template>
  <div class="business-page express-company-page">
    <el-alert v-if="loadError" type="error" :closable="false" show-icon class="state-alert">
      <template #title>快递公司加载失败</template>
      <p>{{ loadError.message }}</p>
      <ApiErrorMeta :details="loadError" />
      <el-button size="small" @click="loadExpressCompanies">重新查询</el-button>
    </el-alert>

    <QueryToolbar v-model="filters" class="surface-panel" ariaLabel="快递公司筛选" :fields="queryFields" @search="applyFilters" />

    <section class="surface-panel table-panel">
      <div class="panel-heading">
        <div>
          <h2>快递公司列表</h2>
          <p>共 {{ total }} 家快递公司</p>
        </div>
        <div class="panel-actions">
          <el-button v-if="access.can('platform:express:import')" @click="openImport"><Upload :size="16" />批量导入</el-button>
          <el-button v-if="access.can('platform:express:create')" type="primary" @click="openCreate"><Plus :size="16" />新增快递公司</el-button>
        </div>
      </div>
      <DataTable
        v-model:page="page"
        v-model:page-size="pageSize"
        :data="rows"
        :columns="expressCompanyColumns"
        :loading="loading"
        :total="total"
        :page-sizes="[20, 50, 100]"
        aria-label="快递公司列表"
        row-key="id"
        :empty-text="appliedFilters.keyword.trim() || appliedFilters.status ? '暂无符合筛选条件的快递公司' : '暂无快递公司档案'"
      >
        <template #actions="{ row }">
          <div v-if="access.can('platform:express:edit') || access.can('platform:express:status')" class="table-actions">
            <el-button
              v-if="access.can('platform:express:edit')"
              link
              type="primary"
              :loading="editLoadingIds.has(String((row as PlatformExpressCompanyResource).id))"
              @click="openEdit(row as PlatformExpressCompanyResource)"
            ><Pencil :size="15" />编辑</el-button>
            <el-button
              v-if="access.can('platform:express:status')"
              link
              :type="(row as PlatformExpressCompanyResource).status === 'ACTIVE' ? 'danger' : 'success'"
              :loading="statusLoadingIds.has(String((row as PlatformExpressCompanyResource).id))"
              @click="toggleStatus(row as PlatformExpressCompanyResource)"
            ><Power :size="15" />{{ (row as PlatformExpressCompanyResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
          </div>
          <span v-else class="muted-value">仅查看</span>
        </template>
        <template #company="{ row }"><div class="express-company-cell"><span><Truck :size="17" /></span><div><strong>{{ (row as PlatformExpressCompanyResource).companyName }}</strong><small>{{ (row as PlatformExpressCompanyResource).companyCode }}</small></div></div></template>
        <template #website="{ row }">
          <a v-if="safeHttpUrl((row as PlatformExpressCompanyResource).website)" class="external-link" :href="safeHttpUrl((row as PlatformExpressCompanyResource).website)!" target="_blank" rel="noopener noreferrer">访问官网<ExternalLink :size="13" /></a>
          <span v-else class="muted-value">{{ (row as PlatformExpressCompanyResource).website || '—' }}</span>
        </template>
        <template #trackingUrlTemplate="{ row }"><code class="tracking-template">{{ (row as PlatformExpressCompanyResource).trackingUrlTemplate || '—' }}</code></template>
        <template #remark="{ row }"><span class="remark-cell">{{ (row as PlatformExpressCompanyResource).remark || '—' }}</span></template>
        <template #status="{ row }"><el-tag :type="(row as PlatformExpressCompanyResource).status === 'ACTIVE' ? 'success' : 'info'" effect="light">{{ (row as PlatformExpressCompanyResource).status === 'ACTIVE' ? '启用' : '停用' }}</el-tag></template>
        <template #empty>
          <el-empty v-if="!loading" :description="appliedFilters.keyword.trim() || appliedFilters.status ? '暂无符合筛选条件的快递公司' : '暂无快递公司档案'">
            <el-button v-if="!appliedFilters.keyword.trim() && !appliedFilters.status && access.can('platform:express:create')" type="primary" @click="openCreate"><Plus :size="16" />新增第一家快递公司</el-button>
          </el-empty>
        </template>
        <template #pagination-left="{ total: tableTotal }"><span>共 {{ tableTotal }} 家快递公司</span></template>
      </DataTable>
    </section>

    <el-dialog
      v-model="importOpen"
      title="批量导入快递公司"
      width="min(680px, calc(100vw - 32px))"
      :close-on-click-modal="false"
      :close-on-press-escape="!importing"
      :show-close="!importing"
      class="import-dialog"
    >
      <div class="import-flow">
        <section class="import-step">
          <div class="step-heading"><span>1</span><div><strong>下载标准模板</strong><p>请勿修改模板版本或表头，仅填写模板中的数据行。</p></div></div>
          <el-button :loading="downloadingTemplate" @click="downloadImportTemplate"><Download :size="16" />下载模板</el-button>
        </section>
        <section class="import-step">
          <div class="step-heading"><span>2</span><div><strong>选择填写后的文件</strong><p>仅支持 .xlsx，最大 5MB、1000 行；本期只新增，不更新已有档案。</p></div></div>
          <label class="file-picker" :class="{ disabled: importing }">
            <input ref="fileInputRef" type="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" :disabled="importing" @change="selectImportFile" />
            <FileSpreadsheet :size="20" />
            <span>{{ importFile?.name || '选择 XLSX 文件' }}</span>
          </label>
        </section>

        <el-alert type="info" :closable="false" show-icon title="整批校验通过后才会写入；任一行有误时整批不写入。" />
        <el-alert v-if="importError" type="error" :closable="false" show-icon title="导入请求失败">
          <p>{{ importError.message }}</p>
          <ApiErrorMeta :details="importError" />
        </el-alert>
        <el-alert v-if="importResult?.success" type="success" :closable="false" show-icon :title="`导入完成：成功新增 ${importResult.importedRows} 家快递公司`" />

        <section v-if="importResult && !importResult.success" class="import-errors" aria-live="polite">
          <div class="error-heading">
            <div><strong>校验未通过，未写入任何数据</strong><p>发现 {{ importResult.errors.length }} 项问题，请修正后重新上传。</p></div>
            <el-button size="small" @click="downloadImportErrors"><Download :size="14" />下载错误报告</el-button>
          </div>
          <div class="error-list">
            <div v-for="(item, index) in displayedImportErrors" :key="`${item.row}-${item.field}-${index}`" class="error-item">
              <span>{{ item.row > 0 ? `第 ${item.row} 行` : '文件' }}</span>
              <strong>{{ item.field }}</strong>
              <p>{{ item.message }}</p>
            </div>
            <p v-if="importResult.errors.length > displayedImportErrors.length" class="error-overflow-note">
              仅展示前 {{ displayedImportErrors.length }} 项，完整内容请下载错误报告。
            </p>
          </div>
        </section>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button :disabled="importing" @click="importOpen = false">关闭</el-button>
          <el-button type="primary" :loading="importing" :disabled="!importFile" @click="submitImport"><Upload :size="16" />开始导入</el-button>
        </div>
      </template>
    </el-dialog>

    <el-drawer v-model="editorOpen" :title="editorTitle" size="580px" class="business-drawer editor-drawer" :close-on-click-modal="false">
      <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="drawer-form" :disabled="saving">
        <div class="form-section">
          <h3>公司标识</h3>
          <div class="form-grid two-cols">
            <el-form-item label="快递公司编码" prop="companyCode" required><el-input v-model.trim="form.companyCode" maxlength="50" placeholder="例如 SF" /></el-form-item>
            <el-form-item label="快递公司名称" prop="companyName" required><el-input v-model.trim="form.companyName" maxlength="128" placeholder="例如 顺丰速运" /></el-form-item>
          </div>
          <el-form-item label="状态" prop="status" required><el-radio-group v-model="form.status"><el-radio-button value="ACTIVE">启用</el-radio-button><el-radio-button value="INACTIVE">停用</el-radio-button></el-radio-group></el-form-item>
        </div>
        <div class="form-section">
          <h3>服务与查询</h3>
          <div class="form-grid two-cols">
            <el-form-item label="客服电话"><el-input v-model.trim="form.servicePhone" maxlength="32" placeholder="例如 95338" /></el-form-item>
            <el-form-item label="官方网站" prop="website"><el-input v-model.trim="form.website" maxlength="255" placeholder="https://www.example.com" /></el-form-item>
          </div>
          <el-form-item label="轨迹查询地址模板"><el-input v-model.trim="form.trackingUrlTemplate" maxlength="500" placeholder="https://example.com/track/{trackingNo}" /></el-form-item>
          <p class="form-help">可使用 <code>{trackingNo}</code> 作为快递单号占位符；一期不包含轨迹订阅和自动回传。</p>
        </div>
        <div class="form-section"><h3>备注</h3><el-form-item label="内部说明"><el-input v-model.trim="form.remark" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入适用范围、服务限制或其他说明" /></el-form-item></div>
      </el-form>
      <template #footer><div class="drawer-footer"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="saveExpressCompany">保存快递公司</el-button></div></template>
    </el-drawer>
  </div>
</template>

<style scoped>
.state-alert p { margin: 6px 0 0; line-height: 1.55; }
.state-alert .el-button { margin-top: 10px; }
.express-company-cell { display: flex; min-width: 0; align-items: center; gap: 10px; }
.express-company-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 7px; background: #eef3fa; color: var(--cc-primary); }
.express-company-cell > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.express-company-cell strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.express-company-cell small { color: var(--cc-muted); font-size: 11px; }
.external-link { display: inline-flex; align-items: center; gap: 5px; color: var(--cc-primary); font-size: 12px; text-decoration: none; }
.external-link:hover { text-decoration: underline; }
.tracking-template { display: block; max-width: 100%; color: #475467; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }
.remark-cell { display: -webkit-box; overflow: hidden; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.form-help code { color: #475467; font-family: "Cascadia Code", Consolas, monospace; }
.panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.panel-actions .el-button { margin-left: 0; }
.import-flow { display: grid; gap: 16px; }
.import-step { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px; border: 1px solid var(--cc-border); border-radius: 8px; background: #fafbfc; }
.step-heading { display: flex; min-width: 0; align-items: flex-start; gap: 12px; }
.step-heading > span { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; background: var(--cc-primary); color: #fff; font-size: 12px; font-weight: 700; }
.step-heading strong, .error-heading strong { color: var(--cc-text); font-size: 14px; }
.step-heading p, .error-heading p { margin: 4px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.55; }
.file-picker { display: inline-flex; min-width: 180px; max-width: 260px; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--cc-border); border-radius: 6px; background: #fff; color: var(--cc-primary); cursor: pointer; }
.file-picker:hover { border-color: var(--cc-primary); }
.file-picker:focus-within { outline: 2px solid color-mix(in srgb, var(--cc-primary) 28%, transparent); outline-offset: 2px; }
.file-picker.disabled { cursor: not-allowed; opacity: .6; }
.file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.file-picker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-flow .el-alert p { margin: 5px 0 0; }
.import-errors { overflow: hidden; border: 1px solid #f4c7c7; border-radius: 8px; }
.error-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: #fff5f5; }
.error-list { max-height: 220px; overflow: auto; }
.error-item { display: grid; grid-template-columns: 72px 130px minmax(0, 1fr); gap: 10px; padding: 10px 16px; border-top: 1px solid #f4dddd; font-size: 12px; }
.error-item span { color: #b42318; font-weight: 600; }
.error-item p { margin: 0; overflow-wrap: anywhere; }
.error-overflow-note { margin: 0; padding: 10px 16px; border-top: 1px solid #f4dddd; color: var(--cc-muted); font-size: 12px; }

@media (max-width: 720px) {
  .panel-actions, .panel-actions .el-button { width: 100%; }
  .import-step, .error-heading { align-items: stretch; flex-direction: column; }
  .file-picker, .import-step > .el-button { width: 100%; max-width: none; }
  .error-item { grid-template-columns: 64px minmax(0, 1fr); }
  .error-item p { grid-column: 1 / -1; }
}
</style>