vue3-element-plus-app-chu 0.0.10 → 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.10",
+  "version": "0.0.11",
   "private": false,
   "type": "module",
   "files": [

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

@@ -1,22 +1,38 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import DigitalRmbAuthorization from '../digital-rmb-authorization/index.vue'
-import DigitalRmbAccountBalance from '../digital-rmb-account-balance/index.vue'
-import DigitalRmbForecast from '../digital-rmb-forecast/index.vue'
-import DigitalRmbInjection from '../digital-rmb-injection/index.vue'
-import DigitalRmbWriteOff from '../digital-rmb-write-off/index.vue'
-
-// 菜单标识对应的页面组件，切换时由 KeepAlive 保留各自状态。
-const pageComponents = {
-  'digital-rmb-forecast': DigitalRmbForecast,
-  'digital-rmb-injection': DigitalRmbInjection,
-  'digital-rmb-account-balance': DigitalRmbAccountBalance,
-  'digital-rmb-authorization': DigitalRmbAuthorization,
-  'digital-rmb-write-off': DigitalRmbWriteOff,
-} as const
+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
@@ -24,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>
@@ -40,25 +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-injection">
-          <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-account-balance">
-          <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>
-        <el-menu-item index="digital-rmb-write-off">
-          <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>
 
@@ -83,14 +83,14 @@ onMounted(() => {
 
     <div class="layout-content">
       <KeepAlive>
-        <component :is="pageComponents[activeMenu as keyof typeof pageComponents]" />
+        <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-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[]) {

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

@@ -4,7 +4,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import API, {
   compareAmounts, ensureSuccess, formatAmount, formatDate, getErrorMessage, normalizeAmount,
 } from '../api'
-import runtime from '../runtime'
+import { forecastRuntime } from '../../runtime'
 import { ArtDataTable, type ColumnOption, type PaginationOptions, type TableSettings } from '@/components/table'
 import type { ForecastFilters, ForecastRow } from '../typs'
 
@@ -19,7 +19,7 @@ const emit = defineEmits<{
 
 type ListMutation = 'delete' | null
 const createFilters = (): ForecastFilters => ({
-  tranDate: runtime.tranDate, clientName: '', competName: '', payDirec: '', busiType: '', payChannel: '',
+  tranDate: forecastRuntime.tranDate, clientName: '', competName: '', payDirec: '', busiType: '', payChannel: '',
   groundBranch: '', predStatus: '', verifyStatus: '', startTransAmt: '', endTransAmt: '', sortRule: '',
 })
 const filters = ref(createFilters())

package/src/view/dcps/digital-rmb-position-estimation/api.ts

@@ -0,0 +1,154 @@
+import sharedEstimationApi from '@/api/modules/digital-rmb/position-estimation'
+import type { ApiResponse } from '@/utils/request'
+import type {
+  EstimationAmounts, EstimationHistory, EstimationPredRow, EstimationQueryParams, EstimationTranRow,
+} from './typs'
+
+/**
+ * 数字人民币头寸匡算页面接口与共用工具。
+ * 接口地址：查询 140503001、导出 140503002、详情 140503003、历史预计调拨金额 140503004；
+ * 请求报文沿用 @/api 中的数币接口定义。
+ */
+const API = {
+  /**
+   * 匡算查询（140503001）。
+   * @param params tranDate 为交易日期；predictAllotInAmt、predictAllotOutAmt
+   * 为今日预计调拨收入、支付金额。返回十个单元格金额，C11、D11 回显本次输入。
+   */
+  queryListApi: (params: EstimationQueryParams) => sharedEstimationApi.queryListApi(params),
+
+  /**
+   * 匡算导出（140503002）：入参与查询完全一致，响应只有 fileName。
+   * 下载协议待文件服务确认，页面导出按钮暂未接线。
+   */
+  exportApi: (params: EstimationQueryParams) => sharedEstimationApi.exportApi(params),
+
+  /**
+   * 匡算详情（140503003）。
+   * @param params position 为报表单元格位置编码，tranDate 为交易日期；
+   * 返回该单元格对应的预报列表、流水列表和总条数。
+   */
+  getDetailApi: (params: { position: string; tranDate: string }) =>
+    sharedEstimationApi.getDetailApi(params),
+
+  /**
+   * 历史预计调拨金额查询（140503004）。
+   * @param tranDate 交易日期。返回该日期的预计调拨收支金额，用于预填查询条件。
+   */
+  queryHistoryApi: (tranDate: string) => sharedEstimationApi.queryHistoryApi({ tranDate }),
+}
+
+/** 校验公共响应头；retCode 不是 00000 时按服务端提示或 fallback 抛错。 */
+export function ensureSuccess<T>(response: ApiResponse<T>, fallback: string): T | null {
+  if (response?.head?.retCode !== '00000') {
+    throw new Error(response?.head?.retMsg?.trim() || fallback)
+  }
+  return response.body
+}
+
+/** 提取可展示的错误信息；无法识别时给出统一提示。 */
+export function getErrorMessage(error: unknown): string {
+  if (error instanceof Error && error.message.trim()) return error.message
+  if (typeof error === 'string' && error.trim()) return error
+  return '操作失败，请稍后重试'
+}
+
+/** 业务日期始终按上海时区生成，不依赖浏览器所在时区，格式为 YYYYMMDD。 */
+export function getToday(): string {
+  const parts = new Intl.DateTimeFormat('en-CA', {
+    timeZone: 'Asia/Shanghai', year: 'numeric', month: '2-digit', day: '2-digit',
+  }).formatToParts(new Date())
+  const read = (type: Intl.DateTimeFormatPartTypes) => parts.find((part) => part.type === type)?.value || ''
+  return read('year') + read('month') + read('day')
+}
+
+/** 判断是否为合法的 YYYYMMDD 日期。 */
+export function isValidDate(value: string): boolean {
+  if (!/^\d{8}$/.test(value)) return false
+  const year = Number(value.slice(0, 4))
+  const month = Number(value.slice(4, 6))
+  const day = Number(value.slice(6, 8))
+  if (year < 1 || month < 1 || month > 12 || day < 1) return false
+  const leap = year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)
+  const monthDays = [31, leap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+  return day <= (monthDays[month - 1] || 0)
+}
+
+/** 只接受十进制文本和合法千分位；保留全部小数位，避免改变输入精度。 */
+export function normalizeAmount(value: string): string {
+  let text = value.trim()
+  if (text.includes(',')) {
+    if (!/^[+-]?\d{1,3}(?:,\d{3})+(?:\.\d*)?$/.test(text)) return ''
+    text = text.replace(/,/g, '')
+  }
+  const match = /^([+-]?)(\d*)(?:\.(\d*))?$/.exec(text)
+  if (!match || (!match[2] && !match[3])) return ''
+  const integer = (match[2] || '0').replace(/^0+(?=\d)/, '')
+  const fraction = match[3] || ''
+  const negative = match[1] === '-' && /[1-9]/.test(integer + fraction)
+  return `${negative ? '-' : ''}${integer}${fraction ? `.${fraction}` : ''}`
+}
+
+/** 千分位展示至少两位小数，超过两位的小数原样保留，不做浮点数转换或舍入。 */
+export function formatAmount(value?: string): string {
+  const original = value?.trim() || ''
+  if (!original) return '—'
+  const normalized = normalizeAmount(original)
+  if (!normalized) return original
+  const negative = normalized.startsWith('-')
+  const [integer = '0', fraction = ''] = (negative ? normalized.slice(1) : normalized).split('.')
+  const grouped = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return `${negative ? '-' : ''}${grouped}.${fraction.padEnd(2, '0')}`
+}
+
+/**
+ * 计算轧差（收入减支出）；任一金额无法解析时返回空字符串。
+ * 两侧金额按小数位对齐后用 BigInt 相减，避免浮点误差；
+ * emptyAsZero 为 true 时空文本按 0 参与计算（用于输入框的实时轧差）。
+ */
+export function calcGapAmount(inAmt: string, outAmt: string, emptyAsZero = false): string {
+  const parse = (value: string) => {
+    if (!value?.trim() && emptyAsZero) value = '0'
+    const normalized = normalizeAmount(value)
+    if (!normalized) return null
+    const negative = normalized.startsWith('-')
+    const [integer = '0', fraction = ''] = (negative ? normalized.slice(1) : normalized).split('.')
+    return { negative, integer, fraction }
+  }
+  const inPart = parse(inAmt)
+  const outPart = parse(outAmt)
+  if (!inPart || !outPart) return ''
+  const scale = Math.max(inPart.fraction.length, outPart.fraction.length)
+  const toScaled = (part: { negative: boolean; integer: string; fraction: string }): bigint => {
+    const digits = `${part.integer}${part.fraction.padEnd(scale, '0')}`
+    return BigInt(digits) * (part.negative ? -1n : 1n)
+  }
+  const diff = toScaled(inPart) - toScaled(outPart)
+  const negative = diff < 0n
+  const digits = (negative ? -diff : diff).toString().padStart(scale + 1, '0')
+  const integer = digits.slice(0, digits.length - scale)
+  const fraction = scale ? digits.slice(digits.length - scale) : ''
+  return formatAmount(`${negative ? '-' : ''}${integer}${fraction ? `.${fraction}` : ''}`)
+}
+
+/** 收支方向字典：I 来账、O 往账。 */
+export const payDirecLabels: Record<string, string> = { I: '来账', O: '往账' }
+/** 支付渠道：预报与流水的数字人民币分别为 8、5；其余渠道保留原文。 */
+export const payChannelLabels: Record<string, string> = { '5': '数字人民币', '8': '数字人民币' }
+/** 核销状态字典：1 未核销、2 已核销。 */
+export const verifyStatusLabels: Record<string, string> = { '1': '未核销', '2': '已核销' }
+/** 业务类型字典：201 兑回、202 兑出、203 付现；与核销预报使用同一套枚举。 */
+export const busiTypeLabels: Record<string, string> = { '201': '兑回', '202': '兑出', '203': '付现' }
+
+/** 读取字典文案；空值显示横线，未登记的代码保留原文展示。 */
+export function dictLabel(labels: Record<string, string>, value?: string): string {
+  const text = value?.trim() || ''
+  return text ? labels[text] ?? text : '—'
+}
+
+/** 详情明细展示的统一空值处理；空值显示横线。 */
+export function displayText(value?: string): string {
+  return value?.trim() || '—'
+}
+
+export default API

package/src/view/dcps/digital-rmb-position-estimation/components/EstimationDetailDialog.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import API, { busiTypeLabels, dictLabel, displayText, formatAmount, getErrorMessage, payChannelLabels, payDirecLabels, verifyStatusLabels } from '../api'
+import type { EstimationCell, EstimationPredRow, EstimationTranRow } from '../typs'
+
+// 匡算详情弹窗：按 position、tranDate 查询单元格对应的预报与流水明细。
+// 弹窗开启时由父页面挂载（destroy-on-close），挂载后立即请求详情。
+
+// 父页面传入的弹窗显隐状态、单击的报表单元格和本次匡算的交易日期。
+const props = defineProps<{
+  modelValue: boolean // 弹窗是否显示。
+  cell: EstimationCell | null // 单击的单元格，含位置编码、展示名称和金额文本。
+  tranDate: string // 详情查询的交易日期，取自最近一次匡算查询。
+}>()
+const emit = defineEmits<{
+  'update:modelValue': [visible: boolean] // 向父页面同步弹窗显隐状态。
+}>()
+
+// 详情数据与加载状态。
+const predList = ref<EstimationPredRow[]>([]) // 详情返回的预报明细列表。
+const tranList = ref<EstimationTranRow[]>([]) // 详情返回的流水明细列表。
+const totalCount = ref('') // 详情返回的明细总条数。
+const loading = ref(false) // 详情请求是否进行中。
+const hasError = ref(false) // 详情请求是否失败，失败时提示重新打开再试。
+let requestId = 0 // 最新请求的序号，用于忽略过期响应。
+let disposed = false // 弹窗是否已卸载，避免未完成请求继续更新界面。
+
+/** 查询单元格明细；cell 或交易日期缺失时不发起请求，直接呈现空态。 */
+const query = async () => {
+  const position = props.cell?.position?.trim()
+  const date = props.tranDate.trim()
+  if (!position || !date) return
+  const currentRequestId = ++requestId
+  loading.value = true
+  try {
+    const { head, body } = await API.getDetailApi({ position, tranDate: date }) as any
+    if (currentRequestId !== requestId || disposed) return
+    if (head?.retCode !== '00000') {
+      throw new Error(head?.retMsg || '查询失败')
+    }
+    predList.value = Array.isArray(body?.predList) ? body.predList : []
+    tranList.value = Array.isArray(body?.tranList) ? body.tranList : []
+    totalCount.value = String(body?.totalCount ?? '').trim()
+    hasError.value = false
+  } catch (error) { // error 为详情请求或响应数据校验异常。
+    if (currentRequestId !== requestId || disposed) return
+    predList.value = []
+    tranList.value = []
+    totalCount.value = ''
+    hasError.value = true
+    ElMessage.error(getErrorMessage(error))
+  } finally {
+    if (currentRequestId === requestId) loading.value = false
+  }
+}
+
+// 弹窗内容配合 destroy-on-close 每次打开重新挂载表格；明细请求由 el-dialog 的 open 事件触发，
+// 组件实例常驻不重复挂载，onMounted 只会执行一次而不能承担每次打开的查询。
+// 弹窗关闭后，未完成的请求不再更新界面或弹出消息。
+onBeforeUnmount(() => {
+  disposed = true
+  requestId += 1
+})
+
+/** 合并预报、流水列表得到明细总条数；接口 totalCount 缺失时按列表长度兜底展示。 */
+const resolveTotal = () => {
+  if (/^\d+$/.test(totalCount.value)) return totalCount.value
+  return String(predList.value.length + tranList.value.length)
+}
+
+// 预报信息表格的行键：预报流水号可能缺失或重复，固定追加下标保证唯一。
+const predRowKey = (row: EstimationPredRow, index: number) => `${row.predRefNo?.trim() || 'pred'}-${index}`
+// 流水信息表格的行键：交易参考号同理追加下标保证唯一。
+const tranRowKey = (row: EstimationTranRow, index: number) => `${row.refNo?.trim() || 'tran'}-${index}`
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    :title="cell ? `匡算明细 - ${cell.label}` : '匡算明细'"
+    width="min(1080px, calc(100vw - 32px))"
+    top="16px"
+    append-to-body
+    destroy-on-close
+    @open="query"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <el-scrollbar class="detail-scrollbar">
+      <div class="detail-content">
+        <!-- 上下文摘要：被点击单元格的位置、金额与详情查询的交易日期。 -->
+        <header class="detail-summary">
+          <div>
+            <span class="detail-label">位置编码</span>
+            <strong class="detail-position">{{ cell?.position || '—' }}</strong>
+          </div>
+          <div>
+            <span class="detail-label">单元格金额（元）</span>
+            <strong class="detail-amount">{{ formatAmount(cell?.amount) }}</strong>
+          </div>
+          <div>
+            <span class="detail-label">交易日期</span>
+            <strong>{{ tranDate }}</strong>
+          </div>
+          <div class="detail-reference">
+            <span class="detail-label">明细总条数</span>
+            <strong>{{ resolveTotal() }}</strong>
+          </div>
+        </header>
+
+        <div v-loading="loading" class="detail-tables">
+          <!-- 预报信息明细；列表为空时展示统一空态。 -->
+          <div class="dialog-section-title">预报信息</div>
+          <el-table :data="predList" size="small" border max-height="240px" empty-text="暂无预报信息">
+            <el-table-column label="预报流水号" min-width="150" show-overflow-tooltip>
+              <template #default="{ row }">{{ displayText(row.predRefNo) }}</template>
+            </el-table-column>
+            <el-table-column label="业务类型" width="90" align="center">
+              <template #default="{ row }">{{ dictLabel(busiTypeLabels, row.busiType) }}</template>
+            </el-table-column>
+            <el-table-column label="客户名称" min-width="140" show-overflow-tooltip>
+              <template #default="{ row }">{{ displayText(row.clientName) }}</template>
+            </el-table-column>
+            <el-table-column label="交易对手名称" min-width="140" show-overflow-tooltip>
+              <template #default="{ row }">{{ displayText(row.competName) }}</template>
+            </el-table-column>
+            <el-table-column label="收支方向" width="80" align="center">
+              <template #default="{ row }">{{ dictLabel(payDirecLabels, row.payDirec) }}</template>
+            </el-table-column>
+            <el-table-column label="支付渠道" width="110" align="center">
+              <template #default="{ row }">{{ dictLabel(payChannelLabels, row.payChannel) }}</template>
+            </el-table-column>
+            <el-table-column label="预报金额（元）" width="140" align="right">
+              <template #default="{ row }"><span class="amount-cell">{{ formatAmount(row.predAmt) }}</span></template>
+            </el-table-column>
+            <el-table-column label="已核销金额（元）" width="140" align="right">
+              <template #default="{ row }"><span class="amount-cell">{{ formatAmount(row.verifyAmt) }}</span></template>
+            </el-table-column>
+            <el-table-column label="核销状态" width="90" align="center">
+              <template #default="{ row }">{{ dictLabel(verifyStatusLabels, row.verifyStatus) }}</template>
+            </el-table-column>
+            <el-table-column label="落地支行" min-width="130" show-overflow-tooltip>
+              <template #default="{ row }">{{ displayText(row.groundBranch) }}</template>
+            </el-table-column>
+            <el-table-column label="上级单位" min-width="130" show-overflow-tooltip>
+              <template #default="{ row }">{{ displayText(row.upOrg) }}</template>
+            </el-table-column>
+          </el-table>
+
+          <!-- 流水信息明细；失败的详情可重新打开弹窗重试。 -->
+          <div class="dialog-section-title">流水信息</div>
+          <el-table :data="tranList" size="small" border max-height="240px" empty-text="暂无流水信息">
+            <el-table-column label="交易参考号" min-width="150" show-overflow-tooltip>
+              <template #default="{ row }">{{ displayText(row.refNo) }}</template>
+            </el-table-column>
+            <el-table-column label="业务类型" width="90" align="center">
+              <template #default="{ row }">{{ dictLabel(busiTypeLabels, row.busiType) }}</template>
+            </el-table-column>
+            <el-table-column label="付款人名称" min-width="140" show-overflow-tooltip>
+              <template #default="{ row }">{{ displayText(row.payerName) }}</template>
+            </el-table-column>
+            <el-table-column label="收款人名称" min-width="140" show-overflow-tooltip>
+              <template #default="{ row }">{{ displayText(row.payeeName) }}</template>
+            </el-table-column>
+            <el-table-column label="收支方向" width="80" align="center">
+              <template #default="{ row }">{{ dictLabel(payDirecLabels, row.payDirec) }}</template>
+            </el-table-column>
+            <el-table-column label="支付渠道" width="110" align="center">
+              <template #default="{ row }">{{ dictLabel(payChannelLabels, row.payChannel) }}</template>
+            </el-table-column>
+            <el-table-column label="金额（元）" width="140" align="right">
+              <template #default="{ row }"><span class="amount-cell">{{ formatAmount(row.amt) }}</span></template>
+            </el-table-column>
+            <el-table-column label="核销状态" width="90" align="center">
+              <template #default="{ row }">{{ dictLabel(verifyStatusLabels, row.verifyStatus) }}</template>
+            </el-table-column>
+            <el-table-column label="落地支行" min-width="130" show-overflow-tooltip>
+              <template #default="{ row }">{{ displayText(row.groundBranch) }}</template>
+            </el-table-column>
+            <el-table-column label="上级单位" min-width="130" show-overflow-tooltip>
+              <template #default="{ row }">{{ displayText(row.upOrg) }}</template>
+            </el-table-column>
+          </el-table>
+
+          <div v-if="hasError" class="detail-retry">详情查询失败，关闭弹窗后重新打开可重试。</div>
+        </div>
+      </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 4px; }
+
+/* 摘要区：位置编码、金额、日期放在一行，便于确认明细上下文。 */
+.detail-summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px 36px;
+  margin-bottom: 12px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: var(--el-fill-color-light);
+}
+.detail-label { display: block; margin-bottom: 5px; color: var(--el-text-color-secondary); font-size: 11px; }
+.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; }
+
+.dialog-section-title { margin: 12px 0 6px; color: var(--el-text-color-regular); font-size: 13px; font-weight: 600; }
+.detail-tables .el-table + .el-table { margin-top: 2px; }
+.detail-tables { min-height: 160px; }
+.detail-tables .dialog-section-title:first-child { margin-top: 0; }
+.amount-cell { color: var(--el-text-color-primary); font-variant-numeric: tabular-nums; }
+.detail-retry { margin-top: 10px; color: var(--el-color-danger); font-size: 12px; text-align: center; }
+</style>

package/src/view/dcps/digital-rmb-position-estimation/index.vue

@@ -0,0 +1,484 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import API, {
+  calcGapAmount, ensureSuccess, formatAmount, getErrorMessage, getToday, isValidDate, normalizeAmount,
+} from './api'
+import EstimationDetailDialog from './components/EstimationDetailDialog.vue'
+import type { EstimationAmounts, EstimationCell, EstimationQueryParams } from './typs'
+
+// 数字人民币头寸匡算页面：
+// 查询条件为交易日期加上今日预计调拨收入、支出金额；交易日期变化后调用
+// 历史预计调拨金额接口（140503004）预填金额，允许手工调整后重新匡算。
+// 匡算结果（140503001）以合并单元格的头寸匡算表展示，样式与业务原型一致；
+// 「今日预计调拨金额」行的收入、支付单元格就是查询条件输入框，随历史记录预填；
+// 导出按钮暂未接线（下载协议待确认）；单击其余金额单元格按位置编码查询详情（140503003）。
+
+// 接口字段编码与图中报表位置的对应关系：
+// C3 城商行支付清算账户前一日余额；C6/D6 报备金额；C7/D7 未核销金额；
+// C8/D8 未核销业务流水；C11/D11 今日预计调拨金额（查询条件输入框，不查详情）；
+// B15 当日实时余额。轧差列由前端按「收入减支出」计算：结果行随查询结果更新，
+// 调拨行随输入实时更新；日初可用资金、预留金额及两条空行暂无接口字段，先按原型占位留空。
+const cellLabels: Record<string, string> = {
+  C3: '城商行支付清算账户前一日余额',
+  C6: '报备金额（收入）',
+  D6: '报备金额（支付）',
+  C7: '未核销金额（收入）',
+  D7: '未核销金额（支付）',
+  C8: '未核销业务流水（收入）',
+  D8: '未核销业务流水（支付）',
+  B15: '当日实时余额',
+}
+
+// 读取接口金额文本；未返回的编码保持空字符串，展示为空白。
+const amountOf = (position: string): string => {
+  const source = amounts.value as unknown as Record<string, unknown> | null
+  const value = source?.[position]
+  return typeof value === 'string' ? value.trim() : ''
+}
+
+/** 结果单元格展示文本；金额缺失时显示空白（按要求不显示占位横线）。 */
+const amountText = (position: string): string => {
+  const value = amountOf(position)
+  return value ? formatAmount(value) : ''
+}
+
+/** 组装单元格对象供详情弹窗使用：位置编码、展示名称与当前金额一起带入。 */
+const cellOf = (position: string): EstimationCell => ({
+  position,
+  label: cellLabels[position] ?? position,
+  amount: amountOf(position),
+})
+
+// 查询条件：日期默认当天；预计调拨收支金额由历史接口预填。
+const queryForm = reactive({ tranDate: getToday(), predictAllotInAmt: '', predictAllotOutAmt: '' })
+// 各金额输入的校验提示，空字符串表示没有错误。
+const formError = reactive({ predictAllotInAmt: '', predictAllotOutAmt: '' })
+
+// 查询与预填可能并行；各自独立控制按钮加载状态。
+const querying = ref(false) // 匡算查询是否进行中。
+const prefilling = ref(false) // 历史预计调拨金额预填是否进行中。
+let prefillRequestId = 0 // 最新预填请求的序号，用于忽略过期响应。
+let disposed = false // 页面是否已卸载，避免未完成请求继续更新界面。
+
+// 最近一次查询的结果与提交参数；未查询时为 null。
+const amounts = ref<EstimationAmounts | null>(null)
+const lastQueryParams = ref<EstimationQueryParams | null>(null)
+
+/** 匡算结果是否就绪：就绪前其余单元格显示占位横线且不可点击。 */
+const resultReady = computed(() => amounts.value !== null)
+
+/** 详情查询的交易日期：优先取生成当前报表的查询日期，兜底当前选择的日期。 */
+const queriedTranDate = computed(() => lastQueryParams.value?.tranDate || queryForm.tranDate)
+
+/** 结果行的轧差文本（收入减支出）；结果未就绪或金额缺失时显示空白。 */
+const gapText = (inPosition: string, outPosition: string): string => {
+  if (!resultReady.value) return ''
+  return calcGapAmount(amountOf(inPosition), amountOf(outPosition))
+}
+
+/** 今日预计调拨金额行的实时轧差：随输入即时计算，空输入按 0 参与计算。 */
+const inputGapText = computed(() =>
+  calcGapAmount(queryForm.predictAllotInAmt, queryForm.predictAllotOutAmt, true))
+
+/** 校验金额文本：须为不小于 0、最多两位小数的十进制金额；返回错误提示文本。 */
+const checkAmount = (value: string): string => {
+  const normalized = normalizeAmount(value)
+  if (!normalized || normalized.startsWith('-') || (normalized.split('.')[1]?.length || 0) > 2) {
+    return '须为不小于 0 的金额，最多保留两位小数'
+  }
+  return ''
+}
+
+/** 汇总查询参数；校验不通过时写入字段错误并返回 null，查询与导出共用。 */
+const collectQueryParams = (): EstimationQueryParams | null => {
+  const tranDate = queryForm.tranDate.trim()
+  if (!isValidDate(tranDate)) {
+    ElMessage.warning('请选择有效的交易日期')
+    return null
+  }
+  formError.predictAllotInAmt = checkAmount(queryForm.predictAllotInAmt)
+  formError.predictAllotOutAmt = checkAmount(queryForm.predictAllotOutAmt)
+  if (formError.predictAllotInAmt || formError.predictAllotOutAmt) return null
+  return {
+    tranDate,
+    predictAllotInAmt: normalizeAmount(queryForm.predictAllotInAmt),
+    predictAllotOutAmt: normalizeAmount(queryForm.predictAllotOutAmt),
+  }
+}
+
+/** 按交易日期预填预计调拨收支金额；仅在预填请求为最新请求时允许更新表单。 */
+const prefillHistory = async () => {
+  const tranDate = queryForm.tranDate.trim()
+  if (!isValidDate(tranDate)) return
+  const currentRequestId = ++prefillRequestId
+  prefilling.value = true
+  try {
+    const { head, body } = await API.queryHistoryApi(tranDate) as any
+    if (currentRequestId !== prefillRequestId || disposed) return
+    if (head?.retCode !== '00000') {
+      throw new Error(head?.retMsg || '查询失败')
+    }
+    queryForm.predictAllotInAmt = String(body?.predictAllotInAmt ?? '').trim()
+    queryForm.predictAllotOutAmt = String(body?.predictAllotOutAmt ?? '').trim()
+    formError.predictAllotInAmt = ''
+    formError.predictAllotOutAmt = ''
+  } catch (error) { // error 为历史接口请求或响应数据校验异常。
+    if (currentRequestId !== prefillRequestId || disposed) return
+    ElMessage.error(getErrorMessage(error))
+  } finally {
+    if (currentRequestId === prefillRequestId) prefilling.value = false
+  }
+}
+
+/** 交易日期变化：旧报表基于旧日期不再有效，清空结果并按新日期重新预填。 */
+const onDateChange = () => {
+  amounts.value = null
+  lastQueryParams.value = null
+  formError.predictAllotInAmt = ''
+  formError.predictAllotOutAmt = ''
+  void prefillHistory()
+}
+
+/** 匡算查询：成功后展示头寸匡算表，失败时清空结果并提示错误。 */
+const submitQuery = async () => {
+  if (querying.value) return
+  const params = collectQueryParams()
+  if (!params) return
+  querying.value = true
+  try {
+    const { head, body } = await API.queryListApi(params) as any
+    if (head?.retCode !== '00000') {
+      throw new Error(head?.retMsg || '匡算查询失败')
+    }
+    if (!body || typeof body !== 'object') {
+      throw new Error('服务端未返回匡算结果')
+    }
+    amounts.value = body as EstimationAmounts
+    lastQueryParams.value = params
+  } catch (error) { // error 为查询请求或响应数据校验异常。
+    amounts.value = null
+    lastQueryParams.value = null
+    ElMessage.error(getErrorMessage(error))
+  } finally {
+    querying.value = false
+  }
+}
+
+// 详情弹窗状态：cell 为被单击的报表单元格。
+const detailVisible = ref(false)
+const detailCell = ref<EstimationCell | null>(null)
+
+/** 打开单元格明细弹窗；结果就绪前其余单元格为占位横线，不发起详情查询。 */
+const openDetail = (cell?: EstimationCell) => {
+  if (!cell || !resultReady.value) return
+  detailCell.value = cell
+  detailVisible.value = true
+}
+
+// 页面首次显示时按默认日期预填预计调拨收支金额。
+onMounted(prefillHistory)
+// 页面离开后，未完成的预填请求不再更新表单或弹出消息。
+onBeforeUnmount(() => {
+  disposed = true
+  prefillRequestId += 1
+})
+</script>
+
+<template>
+  <main class="dcps-page">
+    <!-- 顶部操作区：交易日期选择与导出、查询入口（收支金额在下方表格内填写）。 -->
+    <el-card class="estimation-header" shadow="never" :body-style="{ padding: '10px 14px' }">
+      <div class="estimation-heading">
+        <div class="filter-field">
+          <label>交易日期</label>
+          <el-date-picker
+            v-model="queryForm.tranDate"
+            class="filter-date"
+            type="date"
+            value-format="YYYYMMDD"
+            :clearable="false"
+            @change="onDateChange"
+          />
+        </div>
+        <el-button type="primary" :loading="querying" @click="submitQuery">查询</el-button>
+        <el-button>导出</el-button>
+      </div>
+    </el-card>
+
+    <!-- 匡算报表：合并单元格的头寸匡算表，与业务原型一致；表格常显，结果就绪前金额显示占位。 -->
+    <el-card class="estimation-report" shadow="never" :body-style="{ padding: '12px 14px' }">
+      <div class="report-scroll">
+        <table class="report-table" :class="{ 'is-ready': resultReady }">
+            <!-- 列：两个左侧标签列、收入、支付、轧差。 -->
+            <colgroup>
+              <col class="col-l1"><col class="col-l2"><col class="col-in"><col class="col-out"><col class="col-net">
+            </colgroup>
+            <tbody>
+              <!-- 表头标题：头寸匡算表。 -->
+              <tr>
+                <td colspan="5" class="report-title">头寸匡算表</td>
+              </tr>
+              <!-- 前一日余额：C3 横跨收入、支付两列，右侧标注单位。 -->
+              <tr>
+                <td colspan="2" class="report-label">城商行支付清算账户前一日余额</td>
+                <td colspan="2" class="report-data">
+                  <button type="button" class="report-value" @click="openDetail(cellOf('C3'))">
+                    <span class="report-amount">{{ amountText('C3') }}</span>
+                    <span class="report-tag">C3</span>
+                  </button>
+                </td>
+                <td class="report-label report-label--unit">单位：元</td>
+              </tr>
+              <!-- 收支表头：收入、支付、轧差。 -->
+              <tr>
+                <td colspan="2" class="report-label"></td>
+                <td class="report-label report-label--center">收入</td>
+                <td class="report-label report-label--center">支付</td>
+                <td class="report-label report-label--center">轧差</td>
+              </tr>
+              <!-- 报备情况组：报备金额（C6/D6）、未核销金额（C7/D7），轧差暂空。 -->
+              <tr>
+                <td rowspan="2" class="report-label">今日大额收付款报备情况</td>
+                <td class="report-label">报备金额</td>
+                <td class="report-data">
+                  <button type="button" class="report-value" @click="openDetail(cellOf('C6'))">
+                    <span class="report-amount">{{ amountText('C6') }}</span>
+                    <span class="report-tag">C6</span>
+                  </button>
+                </td>
+                <td class="report-data">
+                  <button type="button" class="report-value" @click="openDetail(cellOf('D6'))">
+                    <span class="report-amount">{{ amountText('D6') }}</span>
+                    <span class="report-tag">D6</span>
+                  </button>
+                </td>
+                <td class="report-gap" title="轧差 = 收入 − 支出（前端计算）">{{ gapText('C6', 'D6') }}</td>
+              </tr>
+              <tr>
+                <td class="report-label">未核销金额</td>
+                <td class="report-data">
+                  <button type="button" class="report-value" @click="openDetail(cellOf('C7'))">
+                    <span class="report-amount">{{ amountText('C7') }}</span>
+                    <span class="report-tag">C7</span>
+                  </button>
+                </td>
+                <td class="report-data">
+                  <button type="button" class="report-value" @click="openDetail(cellOf('D7'))">
+                    <span class="report-amount">{{ amountText('D7') }}</span>
+                    <span class="report-tag">D7</span>
+                  </button>
+                </td>
+                <td class="report-gap" title="轧差 = 收入 − 支出（前端计算）">{{ gapText('C7', 'D7') }}</td>
+              </tr>
+              <!-- 未核销业务流水：C8/D8，轧差暂空。 -->
+              <tr>
+                <td colspan="2" class="report-label">未核销业务流水</td>
+                <td class="report-data">
+                  <button type="button" class="report-value" @click="openDetail(cellOf('C8'))">
+                    <span class="report-amount">{{ amountText('C8') }}</span>
+                    <span class="report-tag">C8</span>
+                  </button>
+                </td>
+                <td class="report-data">
+                  <button type="button" class="report-value" @click="openDetail(cellOf('D8'))">
+                    <span class="report-amount">{{ amountText('D8') }}</span>
+                    <span class="report-tag">D8</span>
+                  </button>
+                </td>
+                <td class="report-gap" title="轧差 = 收入 − 支出（前端计算）">{{ gapText('C8', 'D8') }}</td>
+              </tr>
+              <!-- 日初可用资金：暂无接口字段，按原型留空。 -->
+              <tr>
+                <td colspan="2" class="report-label">日初可用资金</td>
+                <td colspan="3" class="report-blank"></td>
+              </tr>
+              <!-- 占位空行；与原型保持一致，后续接入新字段时在此填充。 -->
+              <tr>
+                <td colspan="5" class="report-blank report-blank--tall"></td>
+              </tr>
+              <!-- 今日预计调拨金额：C11/D11 为查询条件输入框，随历史记录预填，底色高亮。 -->
+              <tr>
+                <td colspan="2" class="report-label">今日预计调拨金额</td>
+                <td class="report-data report-data--high report-data--input">
+                  <el-input
+                    v-model="queryForm.predictAllotInAmt"
+                    class="report-input"
+                    inputmode="decimal"
+                    placeholder="输入调拨收入金额"
+                    :maxlength="40"
+                    @input="formError.predictAllotInAmt = ''"
+                  />
+                  <div v-if="formError.predictAllotInAmt" class="report-error">{{ formError.predictAllotInAmt }}</div>
+                </td>
+                <td class="report-data report-data--high report-data--input">
+                  <el-input
+                    v-model="queryForm.predictAllotOutAmt"
+                    class="report-input"
+                    inputmode="decimal"
+                    placeholder="输入调拨支出金额"
+                    :maxlength="40"
+                    @input="formError.predictAllotOutAmt = ''"
+                  />
+                  <div v-if="formError.predictAllotOutAmt" class="report-error">{{ formError.predictAllotOutAmt }}</div>
+                </td>
+                <td class="report-gap" title="轧差 = 收入 − 支出（前端计算）">{{ inputGapText }}</td>
+              </tr>
+              <!-- 清算账户预留金额：暂无接口字段，按原型留空。 -->
+              <tr>
+                <td colspan="2" class="report-label">城商行支付清算账户预留金额</td>
+                <td colspan="3" class="report-blank"></td>
+              </tr>
+              <!-- 占位空行。 -->
+              <tr>
+                <td colspan="5" class="report-blank report-blank--tall"></td>
+              </tr>
+              <!-- 分节标题：实时余额。 -->
+              <tr>
+                <td colspan="5" class="report-section">实时余额</td>
+              </tr>
+              <!-- 当日实时余额：B15 横跨收入、支付、轧差三列。 -->
+              <tr>
+                <td colspan="2" class="report-label">当日实时余额</td>
+                <td colspan="3" class="report-data">
+                  <button type="button" class="report-value" @click="openDetail(cellOf('B15'))">
+                    <span class="report-amount">{{ amountText('B15') }}</span>
+                    <span class="report-tag">B15</span>
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+    </el-card>
+
+    <!-- 单元格明细弹窗：按位置编码查询预报与流水列表。 -->
+    <EstimationDetailDialog v-model="detailVisible" :cell="detailCell" :tran-date="queriedTranDate" />
+  </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);
+}
+.estimation-header { flex: 0 0 auto; }
+.estimation-heading { display: flex; align-items: flex-end; gap: 6px 14px; }
+
+.filter-field label { display: block; margin-bottom: 5px; color: var(--el-text-color-secondary); font-size: 11px; }
+/* 交易日期设定宽度：el-date-editor 默认宽度更高，其根节点不带本页
+   scoped 属性，需要经 :deep 从宿主命中。 */
+.estimation-heading :deep(.filter-date) { width: 140px; }
+
+.estimation-report { flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
+
+/* 头寸匡算表：合并单元格布局，深色细边框模拟原型报表。 */
+.report-scroll { max-height: 100%; overflow: auto; }
+.report-table {
+  /* 列宽参照原型：左标签区约三分之一，收入、支付列等宽，轧差列最窄。 */
+  --report-line: var(--el-text-color-primary, #303133);
+  width: 100%;
+  min-width: 760px;
+  border-collapse: collapse;
+  table-layout: fixed;
+  color: var(--el-text-color-primary);
+}
+.col-l1 { width: 20%; }
+.col-l2 { width: 12%; }
+.col-in { width: 29.5%; }
+.col-out { width: 29.5%; }
+.col-net { width: 9%; }
+
+.report-table td {
+  border: 1px solid var(--report-line);
+  padding: 9px 12px;
+  font-size: 12px;
+  vertical-align: middle;
+}
+
+/* 标题与分节：红色居中，与原型一致。 */
+.report-title { height: 40px; font-size: 17px; font-weight: 700; text-align: center; }
+.report-section { height: 52px; font-size: 15px; font-weight: 700; text-align: center; }
+.report-title,
+.report-section { color: var(--el-color-danger); }
+
+/* 标签单元格：左侧自然对齐，表头行与单位列不强调。 */
+.report-label { color: var(--el-text-color-primary); }
+.report-label--center,
+.report-label--unit { text-align: center; }
+.report-label--unit { white-space: nowrap; }
+
+/* 占位空单元格：日初可用资金与预留金额两行，整体稍矮、空行更高。 */
+.report-blank { min-width: 0; }
+.report-blank--tall { height: 34px; }
+
+/* 轧差单元格：前端计算的净值（收入减支出），结果行随查询结果、调拨行随输入实时更新。 */
+.report-gap { padding: 5px 12px; color: var(--el-text-color-regular); font-variant-numeric: tabular-nums; }
+
+/* 高亮单元格：今日预计调拨金额按原型使用浅蓝底色。 */
+.report-data--high { background: var(--el-color-primary-light-8); }
+
+/* 输入单元格：收入、支付为查询条件，输入框与高亮底色融为一体。
+   使用 td 前缀提高优先级，避免被后方 .report-data 的 padding: 0 覆盖。 */
+td.report-data--input { padding: 5px 8px; }
+.report-input {
+  --el-input-text-color: var(--el-text-color-primary);
+}
+.report-input :deep(.el-input__wrapper) {
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+}
+.report-input :deep(.el-input__inner) { height: 26px; line-height: 26px; }
+.report-input :deep(.el-input__wrapper.is-focus) { box-shadow: inset 0 0 0 1px var(--el-color-primary); border-radius: 4px; }
+.report-input :deep(.el-input__inner::placeholder) { color: var(--el-text-color-placeholder); font-weight: 400; }
+.report-error { margin-top: 2px; color: var(--el-color-danger); font-size: 10px; line-height: 1.3; }
+
+/* 结果就绪前：单元格不可交互，仅展示占位横线。 */
+.report-table:not(.is-ready) .report-value { cursor: default; }
+.report-table:not(.is-ready) .report-value:hover { background: transparent; }
+
+/* 金额单元格按钮：重置按钮样式，提示可点击查看明细。 */
+.report-data { padding: 0; }
+.report-value {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 35px;
+  padding: 4px 12px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.report-value:hover { background: var(--el-fill-color-light); }
+.report-value:focus-visible { outline: 2px solid var(--el-color-primary); outline-offset: -2px; }
+.report-amount { color: var(--el-color-primary-dark-2); font-variant-numeric: tabular-nums; font-weight: 600; }
+.report-tag {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  border-radius: 4px;
+  color: var(--el-text-color-secondary);
+  background: var(--el-fill-color-light);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10px;
+  letter-spacing: 0.02em;
+}
+</style>

package/src/view/dcps/digital-rmb-position-estimation/typs.ts

@@ -0,0 +1,29 @@
+import type {
+  Tam140503001InBody,
+  Tam140503001OutBody,
+  Tam140503003OutBodyPredList,
+  Tam140503003OutBodyTranList,
+  Tam140503004OutBody,
+} from '@/api'
+
+/** 匡算查询与导出（140503001、140503002）的业务参数：交易日期与预计调拨收支金额均为必填。 */
+export type EstimationQueryParams = Required<Tam140503001InBody>
+
+/** 匡算查询（140503001）返回的十个报表单元格金额；字段名即单元格位置编码。 */
+export type EstimationAmounts = Tam140503001OutBody
+
+/** 历史预计调拨金额查询（140503004）返回，用于预填查询条件。 */
+export type EstimationHistory = Required<Tam140503004OutBody>
+
+/** 匡算详情（140503003）返回的单条预报明细。 */
+export type EstimationPredRow = Tam140503003OutBodyPredList
+
+/** 匡算详情（140503003）返回的单条流水明细。 */
+export type EstimationTranRow = Tam140503003OutBodyTranList
+
+/** 匡算报表单元格：位置为接口字段编码，label 为中文展示名称，amount 为接口金额文本。 */
+export interface EstimationCell {
+  position: string // 单元格位置编码，同接口字段名；详情接口按此提交 position。
+  label: string // 单元格展示名称，如 报备金额（收入）。
+  amount?: string // 接口返回的原始金额文本；未查询时可为空。
+}

package/src/view/dcps/runtime.ts

@@ -0,0 +1,38 @@
+/**
+ * dcps 各模块的运行时配置；原先分散在各模块目录的 runtime.ts 统一汇总到本文件，
+ * 页面通过 `../../runtime` 按需引入对应模块的配置。
+ */
+
+/**
+ * 业务日期始终按上海时区生成，不依赖浏览器所在时区，格式为 YYYYMMDD。
+ * 与各模块 api.ts 中的 getToday 逻辑保持一致，供运行时配置计算默认日期。
+ */
+const getToday = (): string => {
+  const parts = new Intl.DateTimeFormat('en-CA', {
+    timeZone: 'Asia/Shanghai', year: 'numeric', month: '2-digit', day: '2-digit',
+  }).formatToParts(new Date())
+  const read = (type: Intl.DateTimeFormatPartTypes) => parts.find((part) => part.type === type)?.value || ''
+  return read('year') + read('month') + read('day')
+}
+
+/** 预报页面的默认查询日期；日期格式为 YYYYMMDD。 */
+export const forecastRuntime = {
+  tranDate: getToday(), // 默认交易日期，查询和重置时使用。
+}
+
+/** 授权页面的默认创建日期，格式为 YYYYMMDD；当前使用固定日期。 */
+const authorizationToday = '20261012'
+
+/** 授权页面的审批人和默认创建日期；日期格式为 YYYYMMDD。 */
+export const authorizationRuntime = {
+  approverId: '10092', // 审批人工号。
+  approverName: '王干事', // 审批人姓名。
+  createTmBegin: authorizationToday, // 默认创建开始日期，格式为 YYYYMMDD。
+  createTmEnd: authorizationToday, // 默认创建结束日期，格式为 YYYYMMDD。
+}
+
+/** 按模块名聚合的运行时配置；也可从本文件直接引入单个模块的配置。 */
+export default {
+  forecast: forecastRuntime,
+  authorization: authorizationRuntime,
+}

package/src/view/dcps/digital-rmb-authorization/runtime.ts

@@ -1,16 +0,0 @@
-// 返回配置的默认查询日期，格式为 YYYYMMDD；当前使用固定日期。
-const getLocalDate = () => {
-  return `20261012`
-}
-
-const today = getLocalDate() // 默认查询日期，取自上方函数中的固定配置。
-
-/** 授权页面的审批人和默认创建日期；日期格式为 YYYYMMDD。 */
-const runtime = {
-  approverId: '10092', // 审批人工号。
-  approverName: '王干事', // 审批人姓名。
-  createTmBegin: today, // 默认创建开始日期，格式为 YYYYMMDD。
-  createTmEnd: today, // 默认创建结束日期，格式为 YYYYMMDD。
-}
-
-export default runtime

package/src/view/dcps/digital-rmb-forecast/runtime.ts

@@ -1,8 +0,0 @@
-import { getToday } from './api'
-
-/** 预报页面的默认查询日期；日期格式为 YYYYMMDD。 */
-const runtime = {
-  tranDate: getToday(), // 默认交易日期，查询和重置时使用。
-}
-
-export default runtime