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

package/README.md

@@ -12,6 +12,10 @@ pnpm dev:backend  # 只启动后端（backend/ 目录，tsx watch）
 
 一键启动命令通过 `npm-run-all2` 并行执行两个子命令，输出带 `[dev:frontend]` / `[dev:backend]` 前缀。
 
+## 全局布局
+
+应用外壳位于 `src/layout/index.vue`，由 `App.vue` 挂载，统一承载侧边导航、折叠状态和业务页面内容。菜单与页面的对应关系集中在文件顶部的 `menus` 配置中，新增业务页面时追加一项即可；页面切换由 `KeepAlive` 保留各自状态。
+
 ## 数字人民币头寸预报
 
 默认入口为数字人民币头寸预报，侧边菜单可切换至原有数字人民币授权页面；切换时保留各自列表状态。

package/package.json

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

package/src/{view/dcps/layout → layout}/index.vue

@@ -1,10 +1,38 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import DigitalRmbAuthorization from '../digital-rmb-authorization/index.vue'
-import DigitalRmbForecast from '../digital-rmb-forecast/index.vue'
+import { computed, onMounted, ref, type Component } from 'vue'
+import DigitalRmbAuthorization from '@/view/dcps/digital-rmb-authorization/index.vue'
+import DigitalRmbAccountBalance from '@/view/dcps/digital-rmb-account-balance/index.vue'
+import DigitalRmbForecast from '@/view/dcps/digital-rmb-forecast/index.vue'
+import DigitalRmbInjection from '@/view/dcps/digital-rmb-injection/index.vue'
+import DigitalRmbWriteOff from '@/view/dcps/digital-rmb-write-off/index.vue'
+import DigitalRmbPositionEstimation from '@/view/dcps/digital-rmb-position-estimation/index.vue'
+
+interface LayoutMenu {
+  /** 菜单唯一标识，同时作为 KeepAlive 内的页面缓存键。 */
+  key: string
+  title: string
+  compactTitle: string
+  component: Component
+}
 
+// 全局布局的菜单配置：新增业务页面时只需在这里追加一项。
+const menus: LayoutMenu[] = [
+  { key: 'digital-rmb-forecast', title: '数字人民币头寸预报', compactTitle: '头寸预报', component: DigitalRmbForecast },
+  { key: 'digital-rmb-position-estimation', title: '数字人民币头寸匡算', compactTitle: '匡算', component: DigitalRmbPositionEstimation },
+  { key: 'digital-rmb-injection', title: '数字人民币注资明细查询', compactTitle: '注资明细', component: DigitalRmbInjection },
+  { key: 'digital-rmb-account-balance', title: '数字人民币账户行余额查询申请', compactTitle: '余额查询', component: DigitalRmbAccountBalance },
+  { key: 'digital-rmb-authorization', title: '数字人民币授权', compactTitle: '授权', component: DigitalRmbAuthorization },
+  { key: 'digital-rmb-write-off', title: '数字人民币核销', compactTitle: '核销', component: DigitalRmbWriteOff },
+]
+
+const firstMenu = menus[0]!
 const collapsed = ref(false)
-const activeMenu = ref('digital-rmb-forecast')
+const activeMenu = ref(firstMenu.key)
+
+// 当前菜单对应的页面组件；切换时由 KeepAlive 保留各自状态。
+const activeComponent = computed(
+  () => menus.find((menu) => menu.key === activeMenu.value)?.component ?? firstMenu.component,
+)
 
 onMounted(() => {
   collapsed.value = window.innerWidth <= 760
@@ -12,7 +40,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="dcps-layout" :class="{ 'is-collapsed': collapsed }">
+  <div class="app-layout" :class="{ 'is-collapsed': collapsed }">
     <aside class="side-rail">
       <div class="rail-brand">
         <div class="brand-symbol">¥</div>
@@ -28,13 +56,9 @@ onMounted(() => {
         :default-active="activeMenu"
         @select="(index: string) => activeMenu = index"
       >
-        <el-menu-item index="digital-rmb-forecast">
-          <span v-if="collapsed" class="menu-label menu-label--compact">头寸预报</span>
-          <span v-else class="menu-label">数字人民币头寸预报</span>
-        </el-menu-item>
-        <el-menu-item index="digital-rmb-authorization">
-          <span v-if="collapsed" class="menu-label menu-label--compact">授权</span>
-          <span v-else class="menu-label">数字人民币授权</span>
+        <el-menu-item v-for="menu in menus" :key="menu.key" :index="menu.key">
+          <span v-if="collapsed" class="menu-label menu-label--compact">{{ menu.compactTitle }}</span>
+          <span v-else class="menu-label">{{ menu.title }}</span>
         </el-menu-item>
       </el-menu>
 
@@ -59,14 +83,14 @@ onMounted(() => {
 
     <div class="layout-content">
       <KeepAlive>
-        <component :is="activeMenu === 'digital-rmb-forecast' ? DigitalRmbForecast : DigitalRmbAuthorization" />
+        <component :is="activeComponent" />
       </KeepAlive>
     </div>
   </div>
 </template>
 
 <style scoped>
-.dcps-layout {
+.app-layout {
   display: flex;
   min-height: 100vh;
   background: #f7f8fa;

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-authorization/index.vue

@@ -4,7 +4,7 @@ import { ElMessage } from 'element-plus'
 import { ArtDataTable, type ColumnOption, type PaginationOptions, type TableSettings } from '@/components/table'
 import AuthorizationDetailDialog from './components/AuthorizationDetailDialog.vue'
 import API from './api'
-import runtime from './runtime'
+import { authorizationRuntime } from '../runtime'
 import type { AuthorizationFilters, AuthorizationQueryParams, AuthorizationTask } from './typs'
 
 type Decision = 'approve' | 'reject'
@@ -20,8 +20,8 @@ const defaultFilters: AuthorizationFilters = {
 }
 // 默认创建日期范围：[开始日期, 结束日期]，格式为 YYYYMMDD，查询重置时使用。
 const defaultDates: [string, string] = [
-  runtime.createTmBegin,
-  runtime.createTmEnd,
+  authorizationRuntime.createTmBegin,
+  authorizationRuntime.createTmEnd,
 ]
 
 // 重复输入项共用一份配置，依次为字段、名称和长度限制。
@@ -223,8 +223,8 @@ const getQueryFilters = () => ({
   payeeName: filters.value.payeeName.trim(), // 收款人名称。
   platfSeqNo: filters.value.platfSeqNo.trim(), // 平台流水号。
   taskSts: filters.value.taskSts, // 任务状态，空值表示全部。
-  createTmBegin: dateRange.value?.[0] || runtime.createTmBegin, // 创建开始日期，格式为 YYYYMMDD，未选择时取默认值。
-  createTmEnd: dateRange.value?.[1] || dateRange.value?.[0] || runtime.createTmEnd, // 创建结束日期，格式为 YYYYMMDD，缺失时回退到开始日期或默认值。
+  createTmBegin: dateRange.value?.[0] || authorizationRuntime.createTmBegin, // 创建开始日期，格式为 YYYYMMDD，未选择时取默认值。
+  createTmEnd: dateRange.value?.[1] || dateRange.value?.[0] || authorizationRuntime.createTmEnd, // 创建结束日期，格式为 YYYYMMDD，缺失时回退到开始日期或默认值。
 })
 // 仅查询、重置时更新；翻页和刷新沿用这份条件。
 let appliedQuery = getQueryFilters()
@@ -308,8 +308,8 @@ const openDecisionDialog = (task: any) => {
 const submitDecision = async (decision: Decision) => {
   const platfSeqNo = selectedTask.value?.platfSeqNo?.trim() // 本次审批任务的平台流水号，用于唯一定位任务。
   if (!canApprove(selectedTask.value) || !platfSeqNo || pendingDecision.value || loading.value) return
-  const approverId = runtime.approverId.trim() // 本次提交的审批人工号，同时作为公共用户标识。
-  const approverName = runtime.approverName.trim() // 本次提交的审批人姓名。
+  const approverId = authorizationRuntime.approverId.trim() // 本次提交的审批人工号，同时作为公共用户标识。
+  const approverName = authorizationRuntime.approverName.trim() // 本次提交的审批人姓名。
   const remarkText = remark.value.trim() // 去除首尾空白后的备注或拒绝原因。
   if (!approverId || !approverName) {
     ElMessage.warning('审批人信息未设置')
@@ -471,12 +471,12 @@ onBeforeUnmount(() => {
         <el-row :gutter="14">
           <el-col :xs="24" :sm="12">
             <el-form-item label="审批人工号">
-              <el-input :model-value="runtime.approverId" disabled />
+              <el-input :model-value="authorizationRuntime.approverId" disabled />
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12">
             <el-form-item label="审批人姓名">
-              <el-input :model-value="runtime.approverName" readonly />
+              <el-input :model-value="authorizationRuntime.approverName" readonly />
             </el-form-item>
           </el-col>
         </el-row>

package/src/view/dcps/digital-rmb-forecast/components/ForecastEditorView.vue

@@ -5,7 +5,7 @@ import ForecastPageShell from './ForecastPageShell.vue'
 import API, {
   createFormValues, ensureSuccess, getErrorMessage, getToday, normalizeAmount, validateForm,
 } from '../api'
-import runtime from '../runtime'
+import { forecastRuntime } from '../../runtime'
 import type {
   ForecastCreateBody,
   ForecastDetail,
@@ -115,7 +115,7 @@ const fieldPlaceholder = (field: EditorField) => {
 const initializeForm = () => {
   const nextValues = createFormValues()
   if (props.mode === 'create') {
-    nextValues.tranDate = props.tranDate || runtime.tranDate
+    nextValues.tranDate = props.tranDate || forecastRuntime.tranDate
     nextValues.predDate = getToday()
   } else {
     for (const key of Object.keys(nextValues) as FieldKey[]) {