vue3-element-plus-app-chu 0.0.9 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-element-plus-app-chu",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "private": false,
   "type": "module",
   "files": [

package/src/view/dcps/digital-rmb-account-balance/api.ts

@@ -0,0 +1,17 @@
+import baseHttpClient from "@chic/http"
+
+export default {
+  /**
+   * 头寸-账户余额查询申请。
+   * @param params 请求参数；接口未声明筛选字段，保持空对象即可。
+   * 页面在进入和点击查询时各发起一次请求，展示返回的单条账户行余额信息。
+   */
+  queryBalanceApi: (params: unknown = {}) => baseHttpClient.post<any>("/TAM/0001/140506001", params),
+  /**
+   * 注资、预注资管理-注资/预注资发起。
+   * @param params 提交参数：adjustType 为调整类型（PRFD 注资调增、FDRD 注资调减、
+   * FFIC 预注资调增、FFRD 预注资调减），tranAmt 为调整金额（元）。
+   * 提交成功后重新查询账户行余额。
+   */
+  createApi: (params: unknown) => baseHttpClient.post<any>("/TAM/0001/120506001", params)
+}

package/src/view/dcps/digital-rmb-account-balance/index.vue

@@ -0,0 +1,428 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import API from './api'
+import type { AccountBalanceInfo, InjectionCreateParams } from './typs'
+
+// 余额信息、请求与加载状态。
+const balance = ref<AccountBalanceInfo | null>(null) // 当前展示的账户行余额信息，未查询到时为 null。
+const loading = ref(false) // 查询是否进行中，同时控制查询按钮状态。
+const lastQueryTime = ref('') // 最近一次成功查询的本地时间，展示在标题区。
+let requestId = 0 // 最新请求的序号，用于忽略过期响应。
+let disposed = false // 页面是否已卸载，避免未完成请求继续更新界面。
+
+// 提取异常提示；error 为捕获到的请求或处理异常。
+const getErrorMessage = (error: unknown) => error instanceof Error ? error.message : '请求失败，请稍后重试'
+
+// 将接口时间 value 转为浏览器本地时间，空值显示横线，无效时间保留原文。
+const formatDateTime = (value?: string) => {
+  if (!value?.trim()) return '—'
+  const date = new Date(value) // 解析后的日期对象，用于判断接口时间是否有效。
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString('zh-CN', { hour12: false })
+}
+
+// 将金额字符串 value 拆成符号、整数和小数，避免转为浮点数后丢失精度。
+const parseAmount = (value?: string) => {
+  const text = String(value ?? '').trim()
+  // 仅去掉合法千分位分隔符，避免把格式错误的 1,23 当成正常金额。
+  const normalized = /^[+-]?\d{1,3}(?:,\d{3})+(?:\.\d*)?$/.test(text) ? text.replace(/,/g, '') : text
+  const match = /^([+-]?)(\d*)(?:\.(\d*))?$/.exec(normalized) // 匹配结果：1 为符号，2 为整数，3 为小数。
+  if (!match || (!match[2] && !match[3])) return null
+
+  return {
+    negative: match[1] === '-', // 是否为负数。
+    integer: (match[2] || '0').replace(/^0+(?=\d)/, ''), // 去掉前导零的整数部分。
+    fraction: (match[3] || '').replace(/0+$/, ''), // 去掉末尾零的小数部分。
+  }
+}
+
+// 格式化金额 value：先四舍五入到分，再添加千分位，统一展示两位小数。
+const formatAmount = (value?: string) => {
+  const amount = parseAmount(value) // 解析后的十进制金额，无法识别时为 null。
+  if (!amount) return String(value ?? '').trim() || '—'
+
+  const fraction = amount.fraction.padEnd(3, '0') // 至少保留三位小数，第三位用于判断进位。
+  let cents = BigInt(amount.integer + fraction.slice(0, 2)) // 金额绝对值对应的整数分，使用 BigInt 保证精度。
+  if (fraction.charAt(2) >= '5') cents += 1n
+
+  const digits = cents.toString().padStart(3, '0') // 进位后的分字符串，至少三位以保证整数部分存在。
+  const integer = digits.slice(0, -2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') // 带千分位的元整数部分。
+  const sign = amount.negative ? '-' : '' // 展示用的金额符号。
+  return `${sign}${integer}.${digits.slice(-2)}`
+}
+
+// 钱包状态展示：接口暂未提供字典，保留原值；有映射时优先展示中文。
+const walletStatusLabels: Record<string, string> = {}
+const formatWalletStatus = (value?: string) => value?.trim() ? (walletStatusLabels[value.trim()] ?? value.trim()) : '—'
+
+// 注资/预注资发起弹窗状态。
+const dialogVisible = ref(false) // 发起弹窗是否显示。
+const formError = reactive({ adjustType: '', tranAmt: '' }) // 每个表单项的校验提示，空字符串表示没有错误。
+const createForm = reactive({ adjustType: '', tranAmt: '' }) // 正在编辑的调整类型与调整金额。
+const pendingCreate = ref(false) // 提交是否进行中，避免重复提交。
+
+// 调整类型字典：接口已声明枚举与中文含义。
+const adjustTypeOptions = [
+  { value: 'PRFD', label: '注资调增' },
+  { value: 'FDRD', label: '注资调减' },
+  { value: 'FFIC', label: '预注资调增' },
+  { value: 'FFRD', label: '预注资调减' },
+] as const
+
+// 打开发起弹窗，恢复默认表单。
+const openCreateDialog = () => {
+  createForm.adjustType = ''
+  createForm.tranAmt = ''
+  formError.adjustType = ''
+  formError.tranAmt = ''
+  dialogVisible.value = true
+}
+
+// 校验表单；返回是否通过，同时填写各字段错误提示。
+const validateForm = () => {
+  const adjustType = createForm.adjustType // 调整类型，字典值必选。
+  const amountText = createForm.tranAmt.trim() // 去除首尾空白后的调整金额。
+  formError.adjustType = adjustType ? '' : '请选择调整类型'
+  formError.tranAmt = /^\d+(?:\.\d+)?$/.test(amountText) && /^[1-9]/.test(amountText)
+    ? '' // 正数金额：整数或小数，不允许负数、前导零以外形态。
+    : '请输入大于 0 的调整金额'
+  return !formError.adjustType && !formError.tranAmt
+}
+
+// 提交注资/预注资发起；成功后关闭弹窗，并重新查询账户行余额。
+const submitCreate = async () => {
+  if (pendingCreate.value || loading.value) return
+  if (!validateForm()) return
+  const params: InjectionCreateParams = {
+    adjustType: createForm.adjustType as InjectionCreateParams['adjustType'],
+    tranAmt: createForm.tranAmt.trim(),
+  }
+  pendingCreate.value = true
+  try {
+    // head 为公共响应头，请求是否成功统一以 retCode 判断；接口未声明业务返回字段。
+    const { head } = await API.createApi(params) as any
+    if (disposed) return
+    if (head?.retCode !== '00000') {
+      throw new Error(head?.retMsg || '提交失败')
+    }
+    ElMessage.success('注资/预注资发起已提交')
+    dialogVisible.value = false
+    void query() // 重新查询账户行余额，展示最新余额。
+  } catch (error) { // error 为提交请求或业务处理失败信息。
+    if (!disposed) ElMessage.error(getErrorMessage(error))
+  } finally {
+    pendingCreate.value = false
+  }
+}
+
+// 摘要金额：接口字段 → 卡片标题，顺序即展示顺序。
+const summaryAmounts = [
+  ['bal', '结算钱包余额'],
+  ['amount', '实时余额'],
+  ['enableAmount', '其中：可用余额'],
+  ['yesterdayAmount', '昨日余额'],
+  ['nonBal', '对立账户余额（预注资金额）'],
+] as const
+
+// 明细分组配置；title 为分组标题，fields 每项为 [字段名, 展示名称, 是否金额]。
+const detailGroups = [
+  {
+    title: '机构与账户',
+    fields: [
+      ['bankName', '机构名称', false],
+      ['bankCode', '机构编码', false],
+      ['innerName', '行内名称', false],
+      ['innerAccount', '行内账号', false],
+    ],
+  },
+  {
+    title: '结算钱包',
+    fields: [
+      ['sttlmWlltNm', '结算钱包名称', false],
+      ['sttlmWlltId', '结算钱包 ID', false],
+      ['sttlmWlltSts', '结算钱包状态', false],
+      ['openDate', '开立时间', false],
+    ],
+  },
+  {
+    title: '注资参数',
+    fields: [
+      ['ciSts', '注资预注资状态', false],
+      ['ciLmt', '注资最低金额（元）', true],
+      ['realTmTxLmt', '实时业务注资下限（元）', true],
+      ['wltWarnAmt', '钱包预警金额（元）', true],
+    ],
+  },
+  {
+    title: '轧差保证金',
+    fields: [
+      ['ntQt', '净额轧差保证金（元）', true],
+      ['ntQtAmt', '轧差保证金定额（元）', true],
+      ['ntQtLmt', '净额轧差保证金下限（元）', true],
+    ],
+  },
+  {
+    title: '报文信息',
+    fields: [
+      ['refNo', '流水号', false],
+      ['replyRefNo', '应答流水号', false],
+      ['ptMsgId', '报文标识号', false],
+      ['prtryDataType', '报文类型', false],
+      ['sendOrganizeCode', '发起机构', false],
+      ['rcvOrganizeCode', '接收机构', false],
+      ['msgSendTime', '业务处理时间', false],
+    ],
+  },
+  {
+    title: '备注',
+    fields: [
+      ['remark', '备注', false],
+      ['rmk', '交易备注', false],
+    ],
+  },
+] as const
+
+// 展示数据：金额统一千分位、时间本地化，字段名 → 展示值。
+const displayValues = computed<Record<string, string> | null>(() => {
+  if (!balance.value) return null
+  const raw = balance.value as unknown as Record<string, string | undefined>
+  return Object.fromEntries(Object.entries(raw).map(([key, value]) => {
+    const isAmount = detailGroups.some(group => group.fields.some(([field, , isMoney]) => field === key && isMoney))
+      || summaryAmounts.some(([field]) => field === key) // 摘要金额同样千分位展示。
+    const isTime = key === 'msgSendTime'
+    if (key === 'sttlmWlltSts') return [key, formatWalletStatus(value)] // 钱包状态：先按字典映射，缺字典时保留原值。
+    return [key, isAmount ? formatAmount(value) : isTime ? formatDateTime(value) : String(value ?? '')]
+  }))
+})
+
+// 读取展示值，空值显示占位符；field 为字段名。
+const displayValue = (field: string) => displayValues.value?.[field]?.trim() || '—'
+
+// 发起查询申请；接口未声明筛选条件，固定空参数。
+const query = async () => {
+  if (disposed) return
+  const currentRequestId = ++requestId // 本次请求序号，仅与最新序号相等时允许更新界面。
+  loading.value = true
+  try {
+    // head 为公共响应头，body 为单条账户行余额信息。
+    const { head, body } = await API.queryBalanceApi() as any
+    if (currentRequestId !== requestId) return
+    if (head?.retCode !== '00000') {
+      throw new Error(head?.retMsg || '查询失败')
+    }
+    if (!body || typeof body !== 'object') {
+      throw new Error('查询结果格式异常')
+    }
+    balance.value = body
+    lastQueryTime.value = formatDateTime(new Date().toISOString())
+  } catch (error) { // error 为接口请求或响应数据校验异常。
+    if (currentRequestId !== requestId) return
+    balance.value = null
+    lastQueryTime.value = ''
+    ElMessage.error(getErrorMessage(error))
+  } finally {
+    if (currentRequestId === requestId) loading.value = false
+  }
+}
+
+// 页面首次显示时自动发起查询申请。
+onMounted(query)
+// 页面离开后，未完成的请求不再更新界面或弹出消息。
+onBeforeUnmount(() => {
+  disposed = true
+  requestId += 1
+})
+</script>
+
+<template>
+  <main class="dcps-page">
+    <!-- 标题区：页面名称、最近查询时间、发起入口与查询按钮。 -->
+    <el-card class="balance-header" shadow="never" :body-style="{ padding: '10px 14px' }">
+      <div class="balance-heading">
+        <h1 class="balance-title">数字人民币账户行余额查询申请</h1>
+        <span v-if="lastQueryTime" class="balance-updated">最近查询：{{ lastQueryTime }}</span>
+        <span class="balance-actions">
+          <el-button @click="openCreateDialog">注资/预注资发起</el-button>
+          <el-button type="primary" :loading="loading">查询</el-button>
+        </span>
+      </div>
+    </el-card>
+
+    <el-scrollbar class="balance-scroll">
+      <div class="balance-content">
+        <!-- 余额摘要：钱包识别信息与关键金额。 -->
+        <el-card v-if="balance" class="balance-summary" shadow="never" :body-style="{ padding: '12px 14px' }">
+          <header class="wallet-head">
+            <div class="wallet-identity">
+              <strong>{{ displayValue('sttlmWlltNm') }}</strong>
+              <span>{{ displayValue('sttlmWlltId') }} · {{ displayValue('bankName') }}</span>
+            </div>
+            <el-tag class="wallet-status" type="warning" effect="light">{{ displayValue('sttlmWlltSts') }}</el-tag>
+          </header>
+          <!-- item 为摘要金额配置，value 为格式化后的展示值。 -->
+          <div class="amount-grid">
+            <div v-for="[field, label] in summaryAmounts" :key="field" class="amount-card">
+              <span class="amount-label">{{ label }}</span>
+              <strong class="amount-value">{{ displayValue(field) }}</strong>
+              <span class="amount-unit">元</span>
+            </div>
+          </div>
+        </el-card>
+
+        <!-- 明细分组；group 为当前分组，包含标题和字段配置。无数据时展示空状态。 -->
+        <el-card class="balance-detail" shadow="never" :body-style="{ padding: '12px 14px' }">
+          <template v-if="balance">
+            <!-- field 为字段名，isMoney 为金额标记，label 为展示名称。 -->
+            <section v-for="group in detailGroups" :key="group.title" class="detail-group" :aria-label="group.title">
+              <h3>{{ group.title }}</h3>
+              <dl class="detail-fields">
+                <div v-for="[field, label] in group.fields" :key="field" class="detail-field">
+                  <dt>{{ label }}</dt>
+                  <dd :class="{ 'detail-money': group.fields.some(([f, , isMoney]) => f === field && isMoney) }">
+                    {{ displayValue(field) }}
+                  </dd>
+                </div>
+              </dl>
+            </section>
+          </template>
+          <el-empty v-else-if="!loading" description="暂无账户行余额信息，请点击查询" />
+          <div v-else class="balance-loading">正在查询账户行余额…</div>
+        </el-card>
+      </div>
+    </el-scrollbar>
+
+    <!-- 注资/预注资发起弹窗：提交期间禁止关闭，等待服务端返回结果。 -->
+    <el-dialog
+      v-model="dialogVisible"
+      title="注资/预注资发起"
+      width="min(460px, calc(100vw - 32px))"
+      append-to-body
+      destroy-on-close
+      :show-close="!pendingCreate"
+      :close-on-click-modal="!pendingCreate"
+      :close-on-press-escape="!pendingCreate"
+    >
+      <el-form :disabled="pendingCreate" label-position="top" @submit.prevent="submitCreate()">
+        <!-- value 为接口调整类型枚举，label 为中文含义。 -->
+        <el-form-item label="调整类型" :error="formError.adjustType">
+          <el-select v-model="createForm.adjustType" placeholder="请选择调整类型" clearable>
+            <el-option
+              v-for="option in adjustTypeOptions"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="调整金额（元）" :error="formError.tranAmt">
+          <el-input
+            v-model="createForm.tranAmt"
+            placeholder="输入大于 0 的调整金额"
+            maxlength="15"
+            clearable
+            @input="formError.tranAmt = ''"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button :disabled="pendingCreate" @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="pendingCreate" @click="submitCreate()">提交</el-button>
+      </template>
+    </el-dialog>
+  </main>
+</template>
+
+<style scoped>
+/* 页面先扣除宿主占用高度，再使用 flex 分配剩余高度，内容由滚动区承载。 */
+.dcps-page {
+  /* 手动修改这里：顶部导航/页签 + 底部状态栏 + 宿主上下留白的合计高度。
+     独立页面保持 0px；例如顶部 90px、底部 24px、上下留白 6px，填写 120px。
+     不包含浏览器标签栏、地址栏，也不包含本页面自身的 padding。 */
+  --host-layout-height: 0px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  height: calc(100vh - var(--host-layout-height));
+  height: calc(100dvh - var(--host-layout-height));
+  min-height: 0;
+  min-width: 0;
+  padding: 5px;
+  overflow: hidden;
+  background: var(--el-bg-color-page, #f7f8fa);
+}
+.balance-header { flex: 0 0 auto; }
+.balance-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
+.balance-title { margin: 0; color: var(--el-text-color-primary); font-size: 16px; font-weight: 600; line-height: 22px; }
+.balance-updated { color: var(--el-text-color-secondary); font-size: 12px; }
+.balance-actions { margin-left: auto; display: flex; }
+.balance-actions :deep(.el-button + .el-button) { margin-left: 8px; }
+
+.balance-scroll { flex: 1; min-height: 0; min-width: 0; }
+.balance-content { display: flex; flex-direction: column; gap: 5px; padding-bottom: 12px; }
+
+/* 摘要卡片：钱包识别信息一行，关键金额等宽排布。 */
+.wallet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
+.wallet-identity strong { display: block; color: var(--el-text-color-primary); font-size: 14px; }
+.wallet-identity span { margin-top: 3px; color: var(--el-text-color-secondary); font-size: 12px; overflow-wrap: anywhere; }
+.wallet-status { margin-left: auto; }
+.amount-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 8px;
+}
+.amount-card {
+  min-width: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  background: var(--el-fill-color-light);
+}
+.amount-label { display: block; margin-bottom: 6px; color: var(--el-text-color-secondary); font-size: 11px; }
+.amount-value { color: var(--el-color-primary-dark-2); font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 600; overflow-wrap: anywhere; }
+.amount-unit { margin-left: 4px; color: var(--el-text-color-secondary); font-size: 11px; }
+
+.balance-detail .detail-group { margin-top: 14px; }
+.balance-detail .detail-group:first-child { margin-top: 0; }
+.balance-detail .detail-group h3 {
+  margin: 0 0 8px;
+  color: var(--el-text-color-primary);
+  font-size: 13px;
+}
+.detail-fields {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin: 0;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.detail-field {
+  margin: 0;
+  padding: 9px 14px;
+  border-right: 1px solid var(--el-border-color-lighter);
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+.detail-field:nth-child(4n) { border-right: 0; }
+.detail-field dt { margin-bottom: 4px; color: var(--el-text-color-secondary); font-size: 11px; }
+.detail-field dd { margin: 0; color: var(--el-text-color-primary); overflow-wrap: anywhere; font-size: 12px; }
+.detail-money { color: var(--el-color-primary-dark-2); font-variant-numeric: tabular-nums; font-weight: 600; }
+.balance-loading { padding: 40px 0; color: var(--el-text-color-secondary); text-align: center; }
+
+@media (max-width: 1200px) {
+  .detail-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .detail-field:nth-child(4n) { border-right: 1px solid var(--el-border-color-lighter); }
+  .detail-field:nth-child(3n) { border-right: 0; }
+  .amount-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@media (max-width: 900px) {
+  .detail-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .detail-field:nth-child(3n) { border-right: 1px solid var(--el-border-color-lighter); }
+  .detail-field:nth-child(2n) { border-right: 0; }
+}
+@media (max-width: 560px) {
+  .detail-fields { grid-template-columns: minmax(0, 1fr); }
+  .detail-field { border-right: 0 !important; }
+  .amount-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+</style>

package/src/view/dcps/digital-rmb-account-balance/typs.ts

@@ -0,0 +1,38 @@
+/** 接口返回的数字人民币账户行余额信息；单条对象，金额单位为元，保留字符串精度。 */
+export interface AccountBalanceInfo {
+  amount?: string // 实时余额。
+  bal?: string // 结算钱包余额。
+  bankCode?: string // 机构编码。
+  bankName?: string // 机构名称。
+  ciLmt?: string // 注资最低金额。
+  ciSts?: string // 注资预注资状态。
+  enableAmount?: string // 其中：可用余额。
+  innerAccount?: string // 行内账号。
+  innerName?: string // 行内名称。
+  msgSendTime?: string // 业务处理时间。
+  nonBal?: string // 对立账户余额（预注资金额）。
+  ntQt?: string // 净额轧差保证金。
+  ntQtAmt?: string // 轧差保证金定额。
+  ntQtLmt?: string // 净额轧差保证金下限。
+  openDate?: string // 开立时间。
+  prtryDataType?: string // 报文类型。
+  ptMsgId?: string // 报文标识号。
+  rcvOrganizeCode?: string // 接收机构。
+  realTmTxLmt?: string // 实时业务注资下限。
+  refNo?: string // 流水号。
+  remark?: string // 备注。
+  replyRefNo?: string // 应答流水号。
+  rmk?: string // 交易备注。
+  sendOrganizeCode?: string // 发起机构。
+  sttlmWlltId?: string // 结算钱包 ID。
+  sttlmWlltNm?: string // 结算钱包名称。
+  sttlmWlltSts?: string // 结算钱包状态。
+  wltWarnAmt?: string // 钱包预警金额。
+  yesterdayAmount?: string // 昨日余额。
+}
+
+/** 注资/预注资发起提交参数。 */
+export interface InjectionCreateParams {
+  adjustType: 'PRFD' | 'FDRD' | 'FFIC' | 'FFRD' // 调整类型：PRFD 注资调增、FDRD 注资调减、FFIC 预注资调增、FFRD 预注资调减。
+  tranAmt: string // 调整金额，单位为元，十进制字符串。
+}

package/src/view/dcps/digital-rmb-injection/api.ts

@@ -0,0 +1,11 @@
+import baseHttpClient from "@chic/http"
+
+export default {
+  /**
+   * 头寸-数字人民币注资明细查询。
+   * @param params 查询参数：capAdjustType 为调整类型，txnProceSts 为交易处理状态；
+   * 空值字段不发送，表示不限制该条件。
+   * 接口未声明分页请求参数，列表在页面内按返回结果本地分页。
+   */
+  queryListApi: (params: unknown) => baseHttpClient.post<any>("/TAM/0001/140504001", params)
+}

package/src/view/dcps/digital-rmb-injection/components/InjectionDetailDialog.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+// 父页面传入的弹窗状态、注资明细原始数据和格式化后的展示数据。
+const props = defineProps<{
+  // 是否显示详情弹窗。
+  modelValue: boolean
+  // 原始注资明细数据，未选择时为 null。
+  record: any
+  // 父页面格式化后的金额和时间，仅用于展示。
+  displayValues: any
+}>()
+// 向父页面同步弹窗显隐状态。
+const emit = defineEmits<{
+  // visible 为更新后的弹窗显隐状态。
+  'update:modelValue': [visible: boolean]
+}>()
+
+// 详情分组配置；title 为分组标题，fields 每项为 [明细字段名, 展示名称]。
+const detailGroups = [
+  {
+    title: '交易信息',
+    fields: [
+      ['txnDt', '交易日期'],
+      ['txnTm', '交易时间'],
+      ['refNo', '参考号'],
+      ['bkkpSeqNo', '记账流水号'],
+      ['capAdjustType', '调整类型'],
+      ['ciMode', '注资方式'],
+      ['txnProceSts', '交易处理状态'],
+      ['pbocSts', '人行状态'],
+    ],
+  },
+  {
+    title: '金额信息',
+    fields: [
+      ['adjustAmt', '调整金额（元）'],
+      ['ciLowestLimitamt', '注资最低限额（元）'],
+      ['netAmtNettgGuaranty', '轧差注资定额（元）'],
+    ],
+  },
+  {
+    title: '账户信息',
+    fields: [
+      ['payerAcctNo', '付款人账号'],
+      ['payerName', '付款人名称'],
+      ['payeeAcctNo', '收款人账号'],
+      ['payeeAcctName', '收款人账户名称'],
+    ],
+  },
+  {
+    title: '报文信息',
+    fields: [
+      ['msgNo', '报文编号'],
+      ['msgIndNo', '报文标识号'],
+      ['origMsgCd', '原报文类型'],
+      ['origMsgIndNo', '原报文标识号'],
+      ['proceDt', '处理日期'],
+      ['createTm', '创建时间'],
+    ],
+  },
+] as const
+
+/** 读取详情展示值，空值显示占位符；field 为明细字段名。 */
+const displayValue = (field: string) => props.displayValues?.[field]?.trim() || '—'
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="数字人民币注资明细"
+    style="--el-dialog-padding-primary: 10px; padding: 10px 16px; margin-bottom: 16px"
+    width="min(1180px, calc(100vw - 32px))"
+    top="16px"
+    append-to-body
+    destroy-on-close
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <el-scrollbar class="detail-scrollbar">
+      <div v-if="record" class="detail-content">
+        <!-- 金额摘要 -->
+        <header class="detail-summary">
+          <div>
+            <span class="detail-label">调整金额（元）</span>
+            <strong class="detail-amount">{{ displayValue('adjustAmt') }}</strong>
+          </div>
+          <div>
+            <span class="detail-label">交易处理状态</span>
+            <strong class="detail-status">{{ displayValue('txnProceSts') }}</strong>
+          </div>
+          <div class="detail-reference">
+            <span class="detail-label">记账流水号</span>
+            <strong>{{ displayValue('bkkpSeqNo') }}</strong>
+          </div>
+        </header>
+
+        <!-- group 为当前详情分组，包含标题和字段配置。 -->
+        <section v-for="group in detailGroups" :key="group.title" class="detail-group" :aria-label="group.title">
+          <h3>{{ group.title }}</h3>
+          <dl class="detail-fields">
+            <!-- field 为明细字段名，label 为字段的中文展示名称。 -->
+            <div
+              v-for="[field, label] in group.fields"
+              :key="field"
+              class="detail-field"
+            >
+              <dt>{{ label }}</dt>
+              <dd>{{ displayValue(field) }}</dd>
+            </div>
+          </dl>
+        </section>
+      </div>
+    </el-scrollbar>
+    <template #footer>
+      <el-button @click="emit('update:modelValue', false)">关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.detail-scrollbar { max-height: calc(100vh - 240px); }
+.detail-content { padding: 2px 4px 8px; }
+
+.detail-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 36px;
+  align-items: center;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: var(--el-fill-color-light);
+}
+.detail-label { margin-bottom: 5px; color: var(--el-text-color-secondary); font-size: 11px; display: block; }
+.detail-summary strong { overflow-wrap: anywhere; font-size: 13px; }
+.detail-amount { color: var(--el-color-primary-dark-2); font-variant-numeric: tabular-nums; }
+.detail-reference { margin-left: auto; }
+.detail-reference strong { font-weight: 600; }
+
+.detail-group { margin-top: 16px; }
+.detail-group h3 { margin: 0 0 10px; color: var(--el-text-color-primary); font-size: 13px; }
+.detail-fields {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin: 0;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.detail-field {
+  margin: 0;
+  padding: 10px 14px;
+  border-right: 1px solid var(--el-border-color-lighter);
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+.detail-field:nth-child(4n) { border-right: 0; }
+.detail-field dt { margin-bottom: 4px; color: var(--el-text-color-secondary); font-size: 11px; }
+.detail-field dd { margin: 0; color: var(--el-text-color-primary); overflow-wrap: anywhere; font-size: 12px; }
+
+@media (max-width: 1200px) {
+  .detail-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .detail-field:nth-child(4n) { border-right: 1px solid var(--el-border-color-lighter); }
+  .detail-field:nth-child(3n) { border-right: 0; }
+}
+@media (max-width: 900px) {
+  .detail-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .detail-field:nth-child(3n) { border-right: 1px solid var(--el-border-color-lighter); }
+  .detail-field:nth-child(2n) { border-right: 0; }
+}
+@media (max-width: 560px) {
+  .detail-fields { grid-template-columns: minmax(0, 1fr); }
+  .detail-field { border-right: 0 !important; }
+}
+</style>