From cbd849444fc4e292626dbabd09125a135be94daa Mon Sep 17 00:00:00 2001
From: ouyangxq <775153912@qq.com>
Date: Mon, 19 Oct 2026 20:46:28 +0800
Subject: [PATCH] style(admin): show contextual guidance as hover info icons

---
 .../AppointmentCreatePanel.vue                |  3 +-
 .../appointment-calendar/WorkDispatchForm.vue |  2 +-
 .../WorkExistingDispatchForm.vue              |  2 +-
 .../pages/SmartLoadingWorkbenchView.vue       |  2 +-
 src/modules/inbounds/fee/InboundFeePanel.vue  |  6 +-
 .../pages/TripDetailView.vue                  |  3 +-
 .../pages/realApiMount.test.ts                |  2 +-
 .../self-operated/components/SkuTrend.vue     |  3 +-
 src/shared/components/InlineHelp.test.ts      | 56 +++++++++++++++++++
 src/shared/components/InlineHelp.vue          | 18 +++---
 10 files changed, 77 insertions(+), 20 deletions(-)
 create mode 100644 src/shared/components/InlineHelp.test.ts

diff --git a/src/modules/appointment-calendar/AppointmentCreatePanel.vue b/src/modules/appointment-calendar/AppointmentCreatePanel.vue
index b9ccfb2f..fc804ce0 100644
--- a/src/modules/appointment-calendar/AppointmentCreatePanel.vue
+++ b/src/modules/appointment-calendar/AppointmentCreatePanel.vue
@@ -132,10 +132,9 @@ onBeforeUnmount(() => { ++generation; ++selectionGeneration; ++destinationsReque
       <WorkCreateAppointmentForm :sources="references" :can-write="canWrite" @saved="saved" />
     </template>
     <template v-else>
-      <InlineHelp title="选货说明"><p>选择需要送往FBA的已有货物；同一起运仓、同一目的仓可合并多个客户的货物。跨页选择会保留。</p></InlineHelp>
       <DataTable :data="rows" :columns="columns" :page="page" :page-size="20" :page-sizes="[20]" :total="total" :loading="loading" :results-visible="!error" :row-key="key" empty-text="暂无可预约货物" @update:page="load($event)">
         <template #filters><QueryToolbar v-model="query" ariaLabel="新增预约货物查询" :fields="fields" :loading="loading || resolving" @search="search" /></template>
-        <template #toolbar-actions><el-button :disabled="!selectedRows.length || resolving" @click="selected = {}; selectionError = null">清空选择</el-button><el-button type="primary" :disabled="!canWrite || !selectedRows.length || loading || !!error" :loading="resolving" @click="prepare">下一步：填写预约（{{ selectedRows.length }}）</el-button></template>
+        <template #toolbar-actions><InlineHelp title="选货说明"><p>选择需要送往FBA的已有货物；同一起运仓、同一目的仓可合并多个客户的货物。跨页选择会保留。</p></InlineHelp><el-button :disabled="!selectedRows.length || resolving" @click="selected = {}; selectionError = null">清空选择</el-button><el-button type="primary" :disabled="!canWrite || !selectedRows.length || loading || !!error" :loading="resolving" @click="prepare">下一步：填写预约（{{ selectedRows.length }}）</el-button></template>
         <template #pagination-left>已选 {{ selectedRows.length }}/100 票</template>
         <template #notices><LoadErrorState v-if="destinationError" title="目的FBA仓选项读取失败" :message="destinationError.message" :loading="destinationsLoading" @retry="loadDestinations"><template #details><ApiErrorMeta :details="destinationError" /></template></LoadErrorState><LoadErrorState v-if="error" title="可预约货物读取失败" :message="error.message" :loading="loading" @retry="load()"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState><LoadErrorState v-if="selectionError" title="所选货物核对失败" :message="selectionError.message" :show-retry="false"><template #details><ApiErrorMeta :details="selectionError" /></template></LoadErrorState></template>
         <template #select="{ row }"><el-checkbox :model-value="!!selected[key(row as PlanningCargo)]" :aria-label="`选择 ${row.inboundCode || row.containerNo || '未提供业务编号的货物'}`" :disabled="!canWrite || resolving || (!selected[key(row as PlanningCargo)] && !!reason(row as PlanningCargo))" @change="toggle(row as PlanningCargo, $event)" /></template>
diff --git a/src/modules/appointment-calendar/WorkDispatchForm.vue b/src/modules/appointment-calendar/WorkDispatchForm.vue
index 23a282d0..3f7c3ba8 100644
--- a/src/modules/appointment-calendar/WorkDispatchForm.vue
+++ b/src/modules/appointment-calendar/WorkDispatchForm.vue
@@ -200,7 +200,7 @@ onBeforeUnmount(() => { generation++ })
 </script>
 <template>
   <section class="work-form" aria-label="按预约批次创建整车排车">
-    <h3>{{ existing.length ? '沿用本批已有排车单' : '按批次选择同仓真实货物' }}</h3><InlineHelp title="排车说明"><p>同一张排车单可装同仓多个客户与目的仓，客户和预约归属逐来源保留。</p></InlineHelp>
+    <h3>{{ existing.length ? '沿用本批已有排车单' : '按批次选择同仓真实货物' }} <InlineHelp title="排车说明"><p>同一张排车单可装同仓多个客户与目的仓，客户和预约归属逐来源保留。</p></InlineHelp></h3>
     <p v-if="!readable">读取批次实物需要预约、尾程订单、入仓单和排车列表权限。</p>
     <LoadErrorState v-if="error" title="批次可排实物读取失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
     <p v-if="loading">正在核对批次、客户、起运仓与实物来源…</p>
diff --git a/src/modules/appointment-calendar/WorkExistingDispatchForm.vue b/src/modules/appointment-calendar/WorkExistingDispatchForm.vue
index 44777ece..a038bf2d 100644
--- a/src/modules/appointment-calendar/WorkExistingDispatchForm.vue
+++ b/src/modules/appointment-calendar/WorkExistingDispatchForm.vue
@@ -52,7 +52,7 @@ watch(() => props.dispatches, load, { immediate: true, deep: true })
 onBeforeUnmount(() => { generation++ })
 </script>
 <template>
-  <section aria-label="沿用原整车排车"><h3>沿用原整车排车</h3><InlineHelp title="排车说明"><p>在原排车单维护车辆、司机和货物；一张排车单就是一趟车。</p></InlineHelp>
+  <section aria-label="沿用原整车排车"><h3>沿用原整车排车 <InlineHelp title="排车说明"><p>在原排车单维护车辆、司机和货物；一张排车单就是一趟车。</p></InlineHelp></h3>
     <p v-if="!readable">查看原排车单及批次关联需要相应列表权限。</p><p v-if="loading">正在核对原排车单与批次…</p>
     <LoadErrorState v-if="error" title="原排车单读取失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
     <table v-if="!loading && !error && readable" class="density-table"><thead><tr><th>操作</th><th>排车单号</th><th>车牌号</th><th>箱数</th><th>阶段</th></tr></thead><tbody><tr v-for="row in rows" :key="row.dispatchNo"><td><el-button v-if="canEdit(row)" :disabled="addingBusy" @click="emit('external', path(row.dispatchNo))">继续维护本车</el-button><el-button v-if="canAdd(row)" :disabled="addingBusy" @click="add(row)">为本车添加同仓货物</el-button><el-button @click="emit('external', path(row.dispatchNo))">查看原排车单</el-button></td><td>{{ row.dispatchNo }}</td><td>{{ row.vehicleInfo.vehicle?.plate || '—' }}</td><td>{{ row.counts.packageCount }}</td><td>{{ stageLabel(row.stage) }}</td></tr></tbody></table>
diff --git a/src/modules/container-loading/pages/SmartLoadingWorkbenchView.vue b/src/modules/container-loading/pages/SmartLoadingWorkbenchView.vue
index d629200e..7ea1e9b0 100644
--- a/src/modules/container-loading/pages/SmartLoadingWorkbenchView.vue
+++ b/src/modules/container-loading/pages/SmartLoadingWorkbenchView.vue
@@ -387,7 +387,7 @@ onMounted(load)
         <el-alert v-if="plan.status === 'LOADING' && plan.canEdit" type="warning" :closable="false" show-icon title="已下发 PDA，仍可维护未完成的装柜明细" description="新增、增加或移除未拣明细会刷新 PDA 明细与版本；PDA 端需要刷新后继续操作。" />
         <el-alert v-else-if="!plan.canEdit" :type="plan.finalCompletionStatus === 'COMPLETED' ? 'success' : 'info'" :closable="false" show-icon :title="plan.finalCompletionStatus === 'IN_PROGRESS' ? '正在最终确认，装柜方案暂时只读' : plan.finalCompletionStatus === 'COMPLETED' ? '装柜已完成，方案永久只读' : '当前装柜方案只读'" :description="plan.blockedReason || '请刷新计划获取最新作业状态。'" />
         <DataTable :data="displayedPlanItems" :columns="itemColumns" :loading="loading || mutating" stripe preference-key="smart-loading-items" column-settings-mode="hide" empty-text="暂无已分配货物">
-          <template #toolbar-start><div><h2>{{ displayContainerNo(container) }} 装柜方案</h2><InlineHelp title="装柜说明"><p>智能建议必须经人工核对。</p><p>系统基于装柜仓库、物流渠道、可用箱数及 150% 容量上限校验。</p></InlineHelp></div></template>
+          <template #toolbar-start><div><h2>{{ displayContainerNo(container) }} 装柜方案 <InlineHelp title="装柜说明"><p>智能建议必须经人工核对。</p><p>系统基于装柜仓库、物流渠道、可用箱数及 150% 容量上限校验。</p></InlineHelp></h2></div></template>
           <template #actions="{ row }"><div class="row-actions density-actions"><el-button data-tone="danger" class="density-action" v-if="canDelete && editable && row.canRemove" size="small" type="danger" plain @click="remove(row)">删除</el-button></div></template>
           <template #order="{ row }"><SmartLoadingCandidateInbounds :members="row.palletMembers" :sealed-pallet="row.unitType === 'SEALED_PALLET'" :fallback-inbound-code="row.inboundCode" /></template>
           <template #customerName="{ row }"><LineClampText :content="row.customerName" /></template>
diff --git a/src/modules/inbounds/fee/InboundFeePanel.vue b/src/modules/inbounds/fee/InboundFeePanel.vue
index f70bce48..227bea61 100644
--- a/src/modules/inbounds/fee/InboundFeePanel.vue
+++ b/src/modules/inbounds/fee/InboundFeePanel.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { computed, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
 import { Check, CircleDollarSign, PencilLine, RefreshCw, Send } from '@lucide/vue'
@@ -379,15 +380,14 @@ defineExpose({ reload: loadFee })
 <template>
   <section class="inbound-fee-panel" :aria-busy="loading" aria-labelledby="inbound-fee-title">
     <header class="fee-heading" :class="{ 'fee-heading--compact': compact }">
-      <h3 v-if="compact" id="inbound-fee-title" class="fee-heading-title--compact">头程自动初算</h3>
+      <h3 v-if="compact" id="inbound-fee-title" class="fee-heading-title--compact">头程自动初算 <InlineHelp title="计费说明"><p>测量审核完成后，系统会自动生成初算费用；人工确认后才发布。</p><p>实际重量与体积重量取大后计费，金额以服务端快照为准。</p></InlineHelp></h3>
       <div v-else class="fee-heading-copy">
         <span class="fee-heading-icon" aria-hidden="true"><CircleDollarSign :size="20" /></span>
         <div>
-          <h3 id="inbound-fee-title">入库费用快照</h3>
+          <h3 id="inbound-fee-title">入库费用快照 <InlineHelp title="计费说明"><p>测量审核完成后，系统会自动生成初算费用；人工确认后才发布。</p><p>实际重量与体积重量取大后计费，金额以服务端快照为准。</p></InlineHelp></h3>
         </div>
       </div>
       <div class="fee-heading-actions">
-        <el-popover title="计费说明" trigger="click" placement="bottom-end" :width="340"><template #reference><el-button link aria-label="查看计费说明">计费说明</el-button></template><p>测量审核完成后，系统会自动生成初算费用；人工确认后才发布。</p><p>实际重量与体积重量取大后计费，金额以服务端快照为准。</p></el-popover>
         <el-tooltip content="刷新费用快照" placement="top">
           <el-button
             class="fee-refresh-button"
diff --git a/src/modules/overseas-master-data/pages/TripDetailView.vue b/src/modules/overseas-master-data/pages/TripDetailView.vue
index 8276a0bc..2103b93e 100644
--- a/src/modules/overseas-master-data/pages/TripDetailView.vue
+++ b/src/modules/overseas-master-data/pages/TripDetailView.vue
@@ -207,8 +207,7 @@ onBeforeUnmount(() => { generation++; inspectionSequence++; historySequence++ })
       <div v-if="activeTab === 'overview' || isPickup" v-show="activeTab === 'overview'">
         <FormSection v-if="planned && access.can(permission.tripAssign)" class="density-form-section" title="车辆与司机"><TripAssignmentPanel v-if="!pickupLocked" :key="detail.trip.tripNo" :detail="detail" @saved="accept" /></FormSection>
         <TripPickupPanel v-if="isPickup" :detail="detail" @saved="accept" @locked="pickupLocked = $event" />
-        <FormSection v-else class="density-form-section" title="本车排车单"><div v-if="editable" class="trip-inline"><TripDispatchSelector v-model="dispatchNo" :trip-no="detail.trip.tripNo" :disabled="!!busy" /><el-button type="primary" :loading="busy === 'bind'" :disabled="!!busy || !detail.trip.vehicleId" @click="bind">关联排车单</el-button><el-button :loading="busy === 'stops'" :disabled="!!busy || !detail.dispatches.length" @click="matchStops">按货物匹配卸货站</el-button></div>
-          <InlineHelp title="操作说明"><p>先分配车辆和司机，选择待运排车单后自动匹配卸货站。每单调度审核通过后拣货，确认实际装载并通过理货审核后整车发车。</p></InlineHelp>
+        <FormSection v-else class="density-form-section" title="本车排车单"><div v-if="editable" class="trip-inline"><TripDispatchSelector v-model="dispatchNo" :trip-no="detail.trip.tripNo" :disabled="!!busy" /><el-button type="primary" :loading="busy === 'bind'" :disabled="!!busy || !detail.trip.vehicleId" @click="bind">关联排车单</el-button><el-button :loading="busy === 'stops'" :disabled="!!busy || !detail.dispatches.length" @click="matchStops">按货物匹配卸货站</el-button><InlineHelp title="操作说明"><p>先分配车辆和司机，选择待运排车单后自动匹配卸货站。每单调度审核通过后拣货，确认实际装载并通过理货审核后整车发车。</p></InlineHelp></div>
           <DataTable :data="detail.dispatches" :columns="bindingsColumns" row-key="dispatchNo" empty-text="尚未关联排车单"><template #actions="{ row }"><div class="density-actions"><el-button v-if="access.can('platform:overseas-warehouse:dispatch:list')" class="density-action" @click="router.push({ name: 'overseas-dispatch-detail', params: { dispatchNo: row.dispatchNo } })">详情</el-button><el-button v-if="editable" class="density-action" data-tone="danger" :disabled="!!busy" @click="unbind(row.dispatchNo)">解除关联</el-button><el-button v-if="planned && access.can(permission.tripDispatchReview)" class="density-action" :disabled="!!busy || row.review.status === 'APPROVED'" @click="review('APPROVED', row.dispatchNo)">审核通过</el-button><el-button v-if="planned && access.can(permission.tripDispatchReview)" class="density-action" data-tone="danger" :disabled="!!busy" @click="review('REJECTED', row.dispatchNo)">打回</el-button></div></template><template #review="{ row }"><span>{{ tripReviewLabels[row.review.status as keyof typeof tripReviewLabels] }}</span><p v-if="row.review.reason">{{ row.review.reason }}</p><span v-if="row.review.reviewedAt">{{ time(row.review.reviewedAt) }}</span></template><template #boundAt="{ row }">{{ time(row.boundAt) }}</template></DataTable>
         </FormSection>
       </div>
diff --git a/src/modules/overseas-warehouse/pages/realApiMount.test.ts b/src/modules/overseas-warehouse/pages/realApiMount.test.ts
index 21ec28eb..8bd3d689 100644
--- a/src/modules/overseas-warehouse/pages/realApiMount.test.ts
+++ b/src/modules/overseas-warehouse/pages/realApiMount.test.ts
@@ -79,6 +79,6 @@ describe('overseas warehouse mounted real API pages', () => {
     expect(wrapper.text()).toContain('详情缺少客户范围')
     expect(wrapper.text()).not.toContain('9007199254740995')
   })
-  it('mounts inventory ledger as localized read-only business facts without exposing internal ids', async () => { const wrapper = mount(InventoryTransactionsView, { global: { plugins: [createPinia(), ElementPlus] } }); await flushPromises(); expect(listInventoryLedger).toHaveBeenCalledWith(expect.objectContaining({ page: 1, size: 10 })); expect(listInventoryLedger).not.toHaveBeenCalledWith(expect.objectContaining({ customerId: expect.anything() })); expect(wrapper.text()).toContain('客户甲'); expect(wrapper.text()).toContain('NYEXX2608300001'); expect(wrapper.text()).not.toContain('10001'); expect(wrapper.text()).toContain('IP-1'); expect(wrapper.text()).toContain('10'); expect(wrapper.text()).toContain('入库'); expect(wrapper.text()).not.toContain('STOCK_IN'); expect(wrapper.text()).toContain('不提供出库单跳转'); expect(wrapper.text()).not.toContain('当前流水 DTO'); expect(wrapper.text()).not.toContain('操作人名称待补充') })
+  it('mounts inventory ledger as localized read-only business facts without exposing internal ids', async () => { const wrapper = mount(InventoryTransactionsView, { global: { plugins: [createPinia(), ElementPlus] } }); await flushPromises(); expect(listInventoryLedger).toHaveBeenCalledWith(expect.objectContaining({ page: 1, size: 10 })); expect(listInventoryLedger).not.toHaveBeenCalledWith(expect.objectContaining({ customerId: expect.anything() })); expect(wrapper.text()).toContain('客户甲'); expect(wrapper.text()).toContain('NYEXX2608300001'); expect(wrapper.text()).not.toContain('10001'); expect(wrapper.text()).toContain('IP-1'); expect(wrapper.text()).toContain('10'); expect(wrapper.text()).toContain('入库'); expect(wrapper.text()).not.toContain('STOCK_IN'); expect(wrapper.find('.read-only-boundary').exists()).toBe(false); expect(wrapper.text()).not.toContain('当前流水 DTO'); expect(wrapper.text()).not.toContain('操作人名称待补充') })
   it('renders complete business references with single-line ellipsis and titles', async () => { routing.route.params = { orderId: '9007199254740999' }; const wrapper = mount(LastMileOrderDetailView, { global: { plugins: [createPinia(), ElementPlus] } }); await flushPromises(); expect(getLastMileOrder).toHaveBeenCalledWith('9007199254740999'); expect(wrapper.text()).toContain('华远贸易'); expect(wrapper.text()).toContain('LMO-260827-0001'); expect(wrapper.text()).toContain('货柜节点'); expect(wrapper.text()).toContain('已清关、可提柜'); expect(wrapper.text()).not.toContain('清关状态'); expect(wrapper.get('.order-reference-text').attributes('title')).toBe('LMO-260827-0001'); const businessValues = wrapper.findAll('.detail-field-value--business'); expect(businessValues.map((item) => item.attributes('title'))).toEqual(expect.arrayContaining(['NYEXX2608280033', 'TSTU0000061'])); expect(businessValues.every((item) => item.text().length > 0)).toBe(true) })
 })
diff --git a/src/modules/self-operated/components/SkuTrend.vue b/src/modules/self-operated/components/SkuTrend.vue
index 7b872b46..ace8908b 100644
--- a/src/modules/self-operated/components/SkuTrend.vue
+++ b/src/modules/self-operated/components/SkuTrend.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { computed } from 'vue'
 import ChartDetailsDialog from './ChartDetailsDialog.vue'
 import AnalyticsChart from './AnalyticsChart.vue'
@@ -11,7 +12,7 @@ const hasData = computed(() => props.data.points.some(point => point.dataStatus
 </script>
 <template>
   <section aria-label="SKU每日出库趋势">
-    <h3>{{ data.summary.sku }} · 每日出库趋势 <el-popover title="图例说明" trigger="click" placement="bottom" :width="340"><template #reference><el-button link aria-label="查看出库趋势图例说明">图例说明</el-button></template><p class="trend-legend">实线／实心点：完整日 · 虚线／空心点：未完整日 · 空缺：未知，缺失日期断线</p></el-popover></h3>
+    <h3>{{ data.summary.sku }} · 每日出库趋势 <InlineHelp title="出库趋势图例说明"><p class="trend-legend">实线／实心点：完整日 · 虚线／空心点：未完整日 · 空缺：未知，缺失日期断线</p></InlineHelp></h3>
     <p>所属货主：{{ data.summary.customerCode || '—' }} · {{ data.summary.productName || '—' }}</p>
     <p>{{ data.summary.dataStatus === 'COMPLETE' ? '完整出库量' : '已采集出库量' }}：{{ quantityText(shownQuantity(data.summary)) }} {{ data.summary.quantityUnit === 'PCS' ? '件' : '单位未知' }}；{{ label(data.summary.dataStatus) }}。今日为已采集累计。</p>
     <p v-if="!hasData">所选范围尚无可靠数据，未知日期不作为零销量。</p>
diff --git a/src/shared/components/InlineHelp.test.ts b/src/shared/components/InlineHelp.test.ts
new file mode 100644
index 00000000..098756ef
--- /dev/null
+++ b/src/shared/components/InlineHelp.test.ts
@@ -0,0 +1,56 @@
+import ElementPlus from 'element-plus'
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import InlineHelp from './InlineHelp.vue'
+
+enableAutoUnmount(afterEach)
+afterEach(() => vi.useRealTimers())
+
+function help() {
+  vi.useFakeTimers()
+  return mount(InlineHelp, {
+    props: { title: '计费说明' },
+    slots: { default: '<p>实重与体积重取大计费。</p><p>费用确认后才发布。</p>' },
+    attachTo: document.body,
+    global: { plugins: [ElementPlus] },
+  })
+}
+
+function visiblePopup() {
+  const popup = document.querySelector('.inline-help__content')?.closest<HTMLElement>('[role="tooltip"]')
+  return popup && popup.getAttribute('aria-hidden') !== 'true' && popup.style.display !== 'none' ? popup : null
+}
+
+describe('InlineHelp', () => {
+  it('renders an accessible icon without an expandable row or inline rule text', () => {
+    const wrapper = help()
+    expect(wrapper.get('button').attributes('aria-label')).toBe('查看计费说明')
+    expect(wrapper.find('svg').exists()).toBe(true)
+    expect(wrapper.find('details').exists()).toBe(false)
+    expect(wrapper.find('p').exists()).toBe(false)
+    expect(visiblePopup()).toBeNull()
+  })
+
+  it('shows rules on hover in a floating tooltip and hides them after leaving', async () => {
+    const wrapper = help()
+    await wrapper.get('button').trigger('mouseenter')
+    await vi.advanceTimersByTimeAsync(250)
+    await flushPromises()
+    expect(visiblePopup()?.textContent).toContain('实重与体积重取大计费。')
+    expect(visiblePopup()?.textContent).toContain('费用确认后才发布。')
+    expect(wrapper.find('p').exists()).toBe(false)
+    await wrapper.get('button').trigger('mouseleave')
+    await vi.advanceTimersByTimeAsync(250)
+    await flushPromises()
+    expect(visiblePopup()).toBeNull()
+  })
+
+  it('also exposes rules to keyboard focus without expanding the page', async () => {
+    const wrapper = help()
+    await wrapper.get('button').trigger('focus')
+    await vi.advanceTimersByTimeAsync(250)
+    await flushPromises()
+    expect(visiblePopup()?.textContent).toContain('费用确认后才发布。')
+    expect(wrapper.find('details').exists()).toBe(false)
+  })
+})
diff --git a/src/shared/components/InlineHelp.vue b/src/shared/components/InlineHelp.vue
index 0fdb5f44..37e10138 100644
--- a/src/shared/components/InlineHelp.vue
+++ b/src/shared/components/InlineHelp.vue
@@ -1,19 +1,21 @@
 <script setup lang="ts">
+import { Info } from '@lucide/vue'
 withDefaults(defineProps<{ title?: string }>(), { title: '操作说明' })
 </script>
 
 <template>
-  <details class="inline-help">
-    <summary>{{ title }}</summary>
-    <div class="inline-help__content"><slot /></div>
-  </details>
+  <el-tooltip :trigger="['hover', 'focus']" placement="top" effect="light" :show-after="150" :hide-after="100" :enterable="true">
+    <template #content><div class="inline-help__content"><strong>{{ title }}</strong><slot /></div></template>
+    <button type="button" class="inline-help__trigger" :aria-label="`查看${title}`"><Info :size="14" aria-hidden="true" /></button>
+  </el-tooltip>
 </template>
 
 <style scoped>
-.inline-help { min-width: 0; color: var(--cc-muted, #667085); font-size: var(--admin-font-caption, 12px); line-height: 1.6; }
-.inline-help > summary { width: fit-content; color: var(--cc-primary, #1677ff); cursor: pointer; }
-.inline-help > summary:focus-visible { outline: 2px solid var(--cc-primary, #1677ff); outline-offset: 2px; }
-.inline-help__content { margin-top: var(--admin-space-1, 4px); }
+.inline-help__trigger { 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(--cc-muted, #667085); cursor: help; vertical-align: middle; }
+.inline-help__trigger:hover, .inline-help__trigger:focus-visible { color: var(--cc-primary, #1677ff); }
+.inline-help__trigger:focus-visible { outline: 2px solid var(--cc-primary, #1677ff); outline-offset: 2px; }
+.inline-help__content { max-width: 320px; color: var(--cc-text, #172033); font-size: var(--admin-font-caption, 12px); font-weight: 400; line-height: 1.6; white-space: normal; }
+.inline-help__content > strong { display: block; margin-bottom: var(--admin-space-1, 4px); }
 .inline-help__content :deep(p) { margin: 0; }
 .inline-help__content :deep(p + p) { margin-top: var(--admin-space-1, 4px); }
 </style>