From b52ad0c3e3ce11295792286bf51086c95b112b67 Mon Sep 17 00:00:00 2001
From: ouyangxq <775153912@qq.com>
Date: Tue, 20 Oct 2026 14:24:55 +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

---
 .../components/CustomsDocumentsDialog.vue     |  9 ++++----
 .../first-leg/components/CustomsHelp.vue      | 21 +++++++++++++++++++
 .../first-leg/views/CustomsDocumentsView.vue  |  4 +++-
 3 files changed, 29 insertions(+), 5 deletions(-)
 create mode 100644 src/modules/first-leg/components/CustomsHelp.vue

diff --git a/src/modules/first-leg/components/CustomsDocumentsDialog.vue b/src/modules/first-leg/components/CustomsDocumentsDialog.vue
index 0e101dc..ab065c4 100644
--- a/src/modules/first-leg/components/CustomsDocumentsDialog.vue
+++ b/src/modules/first-leg/components/CustomsDocumentsDialog.vue
@@ -2,6 +2,7 @@
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Download, FileText, LockKeyhole, Pencil, Trash2, Upload } from '@lucide/vue'
+import CustomsHelp from './CustomsHelp.vue'
 import {
   MERCHANT_CUSTOMS_STATUS_LABELS,
   deleteMerchantCustomsDocument,
@@ -367,7 +368,7 @@ function clearanceResultStatusLabel(value: MerchantClearanceResult) {
 
       <section class="customs-section">
         <div class="customs-section-title">
-          <div><h3>上传资料</h3><p>支持任意格式，单个文件不超过 50MB；可关联同柜内当前企业的一票或多票退税入仓码。</p></div>
+          <div class="customs-help-heading"><h3>上传资料</h3><CustomsHelp title="报关资料上传说明"><p>支持任意格式，单个文件不超过 50MB；可关联同柜内当前企业的一票或多票退税入仓码。</p></CustomsHelp></div>
           <el-button v-if="canEdit && !locked" type="primary" :loading="mutating" @click="chooseUpload"><Upload :size="16" />选择文件上传</el-button>
         </div>
         <el-checkbox-group v-model="selectedInboundIds" class="customs-inbound-options" :disabled="!canEdit || locked" aria-label="选择资料关联入仓码">
@@ -382,7 +383,7 @@ function clearanceResultStatusLabel(value: MerchantClearanceResult) {
 
       <section class="customs-section clearance-results-section">
         <div class="customs-section-title">
-          <div><h3>海关申报结果</h3><p>平台完成正式申报后，客户可查看与本订单相关的查验、补充资料和放行结果。</p></div>
+          <h3>海关申报结果</h3>
         </div>
         <div v-if="clearanceError" class="customs-error" role="alert">
           <strong>海关申报结果加载失败</strong>
@@ -402,7 +403,7 @@ function clearanceResultStatusLabel(value: MerchantClearanceResult) {
 
       <section class="customs-section">
         <div class="customs-section-title">
-          <div><h3>资料版本历史</h3><p>每份当前资料展示服务端版本、关联票和上传时间；覆盖及删除操作由服务端保留不可变历史。</p></div>
+          <h3>资料版本历史</h3>
         </div>
         <el-empty v-if="!detail.documents.length" description="尚未上传退税报关资料" :image-size="54" />
         <div v-else class="customs-document-list">
@@ -468,7 +469,7 @@ function clearanceResultStatusLabel(value: MerchantClearanceResult) {
 .clearance-result-row p { grid-column:1 / -1; margin:0; color:var(--navy); font-size:12px; }
 .customs-section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
 .customs-section-title h3 { margin: 0; color: var(--navy); font-size: 14px; }
-.customs-section-title p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
+.customs-help-heading { display: flex; align-items: center; gap: 4px; }
 .customs-inbound-options { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 13px 15px; border: 1px solid var(--border); }
 .customs-inbound-options :deep(.el-checkbox) { margin-right: 0; }
 .customs-inbound-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
diff --git a/src/modules/first-leg/components/CustomsHelp.vue b/src/modules/first-leg/components/CustomsHelp.vue
new file mode 100644
index 0000000..95ff8f0
--- /dev/null
+++ b/src/modules/first-leg/components/CustomsHelp.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Info } from '@lucide/vue'
+
+defineProps<{ title: string }>()
+</script>
+
+<template>
+  <el-tooltip :trigger="['hover', 'focus']" placement="top" effect="light" :show-after="150" :hide-after="100" :enterable="true">
+    <template #content><div class="customs-help-content"><strong>{{ title }}</strong><slot /></div></template>
+    <button type="button" class="customs-help" :aria-label="`查看${title}`"><Info :size="14" aria-hidden="true" /></button>
+  </el-tooltip>
+</template>
+
+<style scoped>
+.customs-help { display: inline-flex; width: 24px; height: 24px; flex: 0 0 24px; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: help; vertical-align: middle; }
+.customs-help:hover,.customs-help:focus-visible { color: var(--primary); }
+.customs-help:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
+.customs-help-content { max-width: 320px; color: var(--navy); font-size: 12px; font-weight: 400; line-height: 1.6; white-space: normal; }
+.customs-help-content > strong { display: block; margin-bottom: 4px; }
+.customs-help-content :deep(p) { margin: 0; }
+</style>
diff --git a/src/modules/first-leg/views/CustomsDocumentsView.vue b/src/modules/first-leg/views/CustomsDocumentsView.vue
index 1542db8..dd94485 100644
--- a/src/modules/first-leg/views/CustomsDocumentsView.vue
+++ b/src/modules/first-leg/views/CustomsDocumentsView.vue
@@ -7,6 +7,7 @@ import type { TableAction } from '@/components/common/tableActions'
 import { MERCHANT_CUSTOMS_STATUS_LABELS, type MerchantCustomsContainer } from '../api/customs'
 import { readCustomsDocuments, type CustomsDocumentRow } from '../utils/customsDocumentsReader'
 import CustomsDocumentsDialog from '../components/CustomsDocumentsDialog.vue'
+import CustomsHelp from '../components/CustomsHelp.vue'
 
 import { useCustomsPendingStore } from '../store/customsPending'
 
@@ -98,7 +99,7 @@ onMounted(() => { void load() })
     <QueryToolbar v-model="queryModel" layout="grid" ariaLabel="报关资料查询条件" :fields="queryFields" @search="search" />
     <section class="customs-card">
       <DataTable v-model:page="page" v-model:page-size="pageSize" :data="pagedRecords" :columns="columns" :loading="loading" :total="filteredRecords.length" :page-sizes="[10, 20, 50, 100]" :row-actions="rowActions" row-key="order.id" :empty-text="emptyText">
-        <template #toolbar><strong>资料列表</strong><span>统计为本客户同柜退税货物汇总，资料覆盖按入仓码计。</span></template>
+        <template #toolbar><strong class="customs-list-heading">资料列表<CustomsHelp title="资料统计口径"><p>统计为本客户同柜退税货物汇总，资料覆盖按入仓码计。</p></CustomsHelp></strong></template>
         <template #toolbar-actions><el-button :loading="loading" @click="load"><RefreshCcw :size="16" />刷新</el-button></template>
         <template v-if="errorMessage" #error><div class="state-error" role="alert"><span>{{ errorMessage }}</span><el-button :loading="loading" @click="load">重新加载</el-button></div></template>
         <template #orderNo="{ row }">{{ row.order.orderNo || '—' }}</template>
@@ -114,6 +115,7 @@ onMounted(() => { void load() })
 
 <style scoped>
 .customs-page { display: grid; gap: var(--client-section-gap); }
+.customs-list-heading { display: flex; align-items: center; gap: 4px; }
 .customs-card { overflow: hidden; border: 1px solid var(--client-border); border-radius: var(--client-radius); background: #fff; }
 .state-error { display: flex; min-height: 84px; align-items: center; justify-content: center; gap: 12px; padding: 14px; color: #b42318; }
 </style>