vue3-element-plus-app-chu 0.0.13 → 0.0.14

package/README.md

@@ -14,18 +14,18 @@ pnpm dev:backend  # 只启动后端（backend/ 目录，tsx watch）
 
 ## 全局布局
 
-应用外壳位于 `src/layout/index.vue`，由 `App.vue` 挂载，统一承载侧边导航、折叠状态和业务页面内容。菜单与页面的对应关系集中在文件顶部的 `menus` 配置中，新增业务页面时追加一项即可；页面切换由 `KeepAlive` 保留各自状态。
+应用外壳位于 `src/layout/index.vue`，由 `App.vue` 通过 `RouterView` 挂载，统一承载侧边导航、折叠状态和业务页面内容。菜单配置在 `src/router/menus.ts`，路由表在 `src/router/index.ts`，新增业务页面时两处各追加一项即可。业务地址、浏览器前进后退和刷新都由 vue-router 驱动；头寸预报列表页由 `KeepAlive` 缓存，返回时保留筛选和分页状态。
 
 ## 数字人民币头寸预报
 
-默认入口为数字人民币头寸预报，侧边菜单可切换至原有数字人民币授权页面；切换时保留各自列表状态。
+默认入口为数字人民币头寸预报（`/forecast`），侧边菜单可切换至其他数字人民币页面。
 
 - 列表页只保留筛选卡片和表格卡片；筛选条件压在一行，窗口过窄时才换行。
-- 新增、修改、详情不使用弹窗，在当前路由内切换为独立页面，页面顶部提供“返回列表”按钮；返回后列表的筛选和分页状态不变。
+- 新增、修改、详情不使用弹窗，分别对应 `/forecast/create`、`/forecast/:predRefNo/edit`、`/forecast/:predRefNo` 独立路由，页面顶部提供“返回列表”按钮；返回后列表的筛选和分页状态不变。
 - 支持交易日期、客户、交易对手、机构、金额范围及业务代码筛选，分页、详情、新增、修改和批量删除。
 - 金额、账号及流水号使用字符串处理。业务状态与类型代码保留接口原值，待服务端提供字典后再接入中文选项。
 - 导入、导出按钮保留在列表工具栏，文件由后端接口生成和解析，页面不再在前端拼装 CSV。
-- 模块目录与授权页面保持一致：`api.ts` 接口与日期、金额、表单校验等共用工具，`typs.ts` 类型，`runtime.ts` 默认交易日期，`index.vue` 为入口，`components/` 放页面外壳和列表、新增修改、详情页面。接口定义只维护在各自模块下，不再集中到 `src/api`。
+- 模块目录与授权页面保持一致：`api.ts` 只放接口定义，`utils.ts` 放日期、金额、表单校验等共用工具，`typs.ts` 类型，`runtime.ts` 默认交易日期，`index.vue` 为入口，`components/` 放页面外壳和列表、新增修改、详情页面。接口定义只维护在各自模块下，不再集中到 `src/api`。
 - 新增、修改、详情页面每行四列展示，窗口变窄后依次降为三列、两列、一列。
 
 本地后端的预报接口当前使用通用模拟响应，写入成功响应不代表真实持久化。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-element-plus-app-chu",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "private": false,
   "type": "module",
   "files": [
@@ -29,7 +29,8 @@
     "axios": "^1.20.0",
     "dayjs": "^1.11.23",
     "element-plus": "^2.14.7",
-    "vue": "^3.5.42"
+    "vue": "^3.5.42",
+    "vue-router": "^4.6.4"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.5",

package/src/layout/index.vue

@@ -1,38 +1,17 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, type Component } from 'vue'
-import DigitalRmbAuthorization from '@/view/dcps/auth/index.vue'
-import DigitalRmbAccountBalance from '@/view/dcps/balance/index.vue'
-import DigitalRmbForecast from '@/view/dcps/forecast/index.vue'
-import DigitalRmbInjection from '@/view/dcps/injection/index.vue'
-import DigitalRmbWriteOff from '@/view/dcps/write-off/index.vue'
-import DigitalRmbPositionEstimation from '@/view/dcps/estimation/index.vue'
-
-interface LayoutMenu {
-  /** 菜单唯一标识，同时作为 KeepAlive 内的页面缓存键。 */
-  key: string
-  title: string
-  compactTitle: string
-  component: Component
-}
-
-// 全局布局的菜单配置：新增业务页面时只需在这里追加一项。
-const menus: LayoutMenu[] = [
-  { key: 'forecast', title: '数字人民币头寸预报', compactTitle: '头寸预报', component: DigitalRmbForecast },
-  { key: 'estimation', title: '数字人民币头寸匡算', compactTitle: '匡算', component: DigitalRmbPositionEstimation },
-  { key: 'injection', title: '数字人民币注资明细查询', compactTitle: '注资明细', component: DigitalRmbInjection },
-  { key: 'balance', title: '数字人民币账户行余额查询申请', compactTitle: '余额查询', component: DigitalRmbAccountBalance },
-  { key: 'auth', title: '数字人民币授权', compactTitle: '授权', component: DigitalRmbAuthorization },
-  { key: 'write-off', title: '数字人民币核销', compactTitle: '核销', component: DigitalRmbWriteOff },
-]
+import { computed, onMounted, ref } from 'vue'
+import { RouterView, useRoute, useRouter } from 'vue-router'
+import { layoutMenus as menus } from '@/router/menus'
 
+const route = useRoute()
+const router = useRouter()
 const firstMenu = menus[0]!
 const collapsed = ref(false)
-const activeMenu = ref(firstMenu.key)
-
-// 当前菜单对应的页面组件；切换时由 KeepAlive 保留各自状态。
-const activeComponent = computed(
-  () => menus.find((menu) => menu.key === activeMenu.value)?.component ?? firstMenu.component,
-)
+// 子页面通过 meta.menu 指向所属一级菜单，进入新增、详情时侧边栏仍保持高亮。
+const activeMenu = computed(() => route.meta.menu ?? String(route.name ?? firstMenu.name))
+const selectMenu = (name: string) => {
+  if (name !== route.name) void router.push({ name })
+}
 
 onMounted(() => {
   collapsed.value = window.innerWidth <= 760
@@ -54,9 +33,9 @@ onMounted(() => {
       <el-menu
         class="dcps-menu"
         :default-active="activeMenu"
-        @select="(index: string) => activeMenu = index"
+        @select="selectMenu"
       >
-        <el-menu-item v-for="menu in menus" :key="menu.key" :index="menu.key">
+        <el-menu-item v-for="menu in menus" :key="menu.name" :index="menu.name">
           <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>
@@ -82,9 +61,15 @@ onMounted(() => {
     </aside>
 
     <div class="layout-content">
-      <KeepAlive>
-        <component :is="activeComponent" />
-      </KeepAlive>
+      <!-- 头寸预报列表进入新增、修改或详情后保持挂载，返回时筛选条件和分页不变。 -->
+      <RouterView v-slot="{ Component, route: currentRoute }">
+        <KeepAlive include="DcpsForecastPage">
+          <component
+            :is="Component"
+            :key="currentRoute.name === 'forecast' ? 'forecast' : currentRoute.fullPath"
+          />
+        </KeepAlive>
+      </RouterView>
     </div>
   </div>
 </template>

package/src/router/index.ts

@@ -0,0 +1,110 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+import AppLayout from '@/layout/index.vue'
+import DigitalRmbAuthorization from '@/view/dcps/auth/index.vue'
+import DigitalRmbAccountBalance from '@/view/dcps/balance/index.vue'
+import DigitalRmbForecast from '@/view/dcps/forecast/index.vue'
+import ForecastEditorView from '@/view/dcps/forecast/components/ForecastEditorView.vue'
+import ForecastDetailView from '@/view/dcps/forecast/components/ForecastDetailView.vue'
+import DigitalRmbInjection from '@/view/dcps/injection/index.vue'
+import DigitalRmbWriteOff from '@/view/dcps/write-off/index.vue'
+import DigitalRmbPositionEstimation from '@/view/dcps/estimation/index.vue'
+import { recallForecastRow } from '@/view/dcps/forecast/row-cache'
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    /** 一级菜单路由名；子页面用它保持侧边菜单高亮。 */
+    menu?: string
+    /** 浏览器标题使用的页面名称。 */
+    title?: string
+  }
+}
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: AppLayout,
+    redirect: { name: 'forecast' },
+    children: [
+      {
+        path: 'forecast',
+        name: 'forecast',
+        component: DigitalRmbForecast,
+        meta: { menu: 'forecast', title: '数字人民币头寸预报' },
+      },
+      {
+        path: 'forecast/create',
+        name: 'forecast-create',
+        component: ForecastEditorView,
+        meta: { menu: 'forecast', title: '新增数字人民币头寸预报' },
+        props: (route) => ({
+          mode: 'create',
+          tranDate: typeof route.query.tranDate === 'string' ? route.query.tranDate : undefined,
+        }),
+      },
+      {
+        path: 'forecast/:predRefNo/edit',
+        name: 'forecast-edit',
+        component: ForecastEditorView,
+        meta: { menu: 'forecast', title: '修改数字人民币头寸预报' },
+        props: (route) => {
+          const predRefNo = String(route.params.predRefNo ?? '')
+          return { mode: 'edit', predRefNo, row: recallForecastRow(predRefNo) }
+        },
+      },
+      {
+        path: 'forecast/:predRefNo',
+        name: 'forecast-detail',
+        component: ForecastDetailView,
+        meta: { menu: 'forecast', title: '数字人民币头寸预报详情' },
+        props: (route) => {
+          const predRefNo = String(route.params.predRefNo ?? '')
+          return { predRefNo, row: recallForecastRow(predRefNo) }
+        },
+      },
+      {
+        path: 'estimation',
+        name: 'estimation',
+        component: DigitalRmbPositionEstimation,
+        meta: { menu: 'estimation', title: '数字人民币头寸匡算' },
+      },
+      {
+        path: 'injection',
+        name: 'injection',
+        component: DigitalRmbInjection,
+        meta: { menu: 'injection', title: '数字人民币注资明细查询' },
+      },
+      {
+        path: 'balance',
+        name: 'balance',
+        component: DigitalRmbAccountBalance,
+        meta: { menu: 'balance', title: '数字人民币账户行余额查询申请' },
+      },
+      {
+        path: 'auth',
+        name: 'auth',
+        component: DigitalRmbAuthorization,
+        meta: { menu: 'auth', title: '数字人民币授权' },
+      },
+      {
+        path: 'write-off',
+        name: 'write-off',
+        component: DigitalRmbWriteOff,
+        meta: { menu: 'write-off', title: '数字人民币核销' },
+      },
+    ],
+  },
+  { path: '/:pathMatch(.*)*', redirect: { name: 'forecast' } },
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+  scrollBehavior: () => ({ top: 0 }),
+})
+
+router.afterEach((to) => {
+  const title = to.meta.title
+  document.title = title ? `${title} · DCPS` : 'DCPS 资金头寸管理'
+})
+
+export default router

package/src/router/menus.ts

@@ -0,0 +1,16 @@
+/** 侧边菜单项；name 与对应的一级路由名保持一致。 */
+export interface LayoutMenu {
+  name: string
+  title: string
+  compactTitle: string
+}
+
+// 侧边菜单配置：新增业务页面时在这里追加一项，并在 router 中添加对应路由。
+export const layoutMenus: LayoutMenu[] = [
+  { name: 'forecast', title: '数字人民币头寸预报', compactTitle: '头寸预报' },
+  { name: 'estimation', title: '数字人民币头寸匡算', compactTitle: '匡算' },
+  { name: 'injection', title: '数字人民币注资明细查询', compactTitle: '注资明细' },
+  { name: 'balance', title: '数字人民币账户行余额查询申请', compactTitle: '余额查询' },
+  { name: 'auth', title: '数字人民币授权', compactTitle: '授权' },
+  { name: 'write-off', title: '数字人民币核销', compactTitle: '核销' },
+]

package/src/view/dcps/README.md

@@ -0,0 +1,59 @@
+# DCPS 页面组件与路由对应关系
+
+本文档记录 `src/view/dcps` 下各组件的名称（`defineOptions({ name })`）与路由的对应关系。
+新增或调整页面时，请同步更新此文档。
+
+## 命名约定
+
+- 所有 `src/view/dcps` 下的 Vue 组件，`name` 统一以 `Dcps` 开头（PascalCase）。
+- 页面入口统一为各业务目录下的 `index.vue`，命名为 `Dcps<模块>Page`。
+- 页面内部的组件按职责命名：`...List` / `...Editor` / `...Detail` / `...Dialog` / `...Shell`。
+- 组件 `name` 与路由 `name` 是两套独立标识：路由名使用 kebab-case（如 `forecast-create`），组件名使用 PascalCase（如 `DcpsForecastEditor`）。
+
+## 路由与页面组件
+
+路由定义在 `src/router/index.ts`，所有业务页面都挂在 `AppLayout`（`src/layout/index.vue`）下。
+
+| 路由路径 | 路由 name | 页面文件 | 组件 name（defineOptions） | 页面标题（meta.title） |
+| --- | --- | --- | --- | --- |
+| `/forecast` | `forecast` | `forecast/index.vue` | `DcpsForecastPage` | 数字人民币头寸预报 |
+| `/forecast/create` | `forecast-create` | `forecast/components/ForecastEditorView.vue` | `DcpsForecastEditor` | 新增数字人民币头寸预报 |
+| `/forecast/:predRefNo/edit` | `forecast-edit` | `forecast/components/ForecastEditorView.vue` | `DcpsForecastEditor` | 修改数字人民币头寸预报 |
+| `/forecast/:predRefNo` | `forecast-detail` | `forecast/components/ForecastDetailView.vue` | `DcpsForecastDetail` | 数字人民币头寸预报详情 |
+| `/estimation` | `estimation` | `estimation/index.vue` | `DcpsEstimationPage` | 数字人民币头寸匡算 |
+| `/injection` | `injection` | `injection/index.vue` | `DcpsInjectionPage` | 数字人民币注资明细查询 |
+| `/balance` | `balance` | `balance/index.vue` | `DcpsBalancePage` | 数字人民币账户行余额查询申请 |
+| `/auth` | `auth` | `auth/index.vue` | `DcpsAuthPage` | 数字人民币授权 |
+| `/write-off` | `write-off` | `write-off/index.vue` | `DcpsWriteOffPage` | 数字人民币核销 |
+| `/` | — | 重定向到 `forecast` | — | — |
+| `/:pathMatch(.*)*` | — | 重定向到 `forecast`（404 兜底） | — | — |
+
+补充说明：
+
+- `forecast-create` 与 `forecast-edit` 共用同一组件 `DcpsForecastEditor`，通过 `props.mode`（`create` / `edit`）区分模式；修改模式通过 `props.predRefNo` 接收路由参数。
+- `forecast-detail` 通过 `props.predRefNo` 接收路由参数。
+- 侧边菜单配置在 `src/router/menus.ts`，其中 `name` 必须与对应的一级路由 `name` 保持一致。
+- `src/layout/index.vue` 使用 `<KeepAlive include="DcpsForecastPage">` 缓存头寸预报列表页，子页面通过 `meta.menu` 保持侧边菜单高亮。若其他页面也需要缓存，需要同时满足：页面组件定义 `name`，并把该名称加入 `include`。
+
+## 非路由子组件
+
+以下组件不直接对应路由，由页面组件在内部引用：
+
+| 组件文件 | 组件 name | 使用位置 | 说明 |
+| --- | --- | --- | --- |
+| `forecast/components/ForecastPageShell.vue` | `DcpsForecastPageShell` | `DcpsForecastEditor`、`DcpsForecastDetail` | 新增 / 修改 / 详情页共用外壳，提供返回按钮和标题 |
+| `forecast/components/ForecastListView.vue` | `DcpsForecastList` | `DcpsForecastPage` | 头寸预报列表，负责查询与展示，通过事件向外抛出新增 / 修改 / 详情 |
+| `estimation/components/EstimationDetailDialog.vue` | `DcpsEstimationDetailDialog` | `DcpsEstimationPage` | 匡算单元格详情弹窗 |
+| `injection/components/InjectionDetailDialog.vue` | `DcpsInjectionDetailDialog` | `DcpsInjectionPage` | 注资明细详情弹窗 |
+| `auth/components/AuthorizationDetailDialog.vue` | `DcpsAuthDetailDialog` | `DcpsAuthPage` | 授权任务详情弹窗 |
+| `write-off/components/ForecastWriteOffView.vue` | `DcpsForecastWriteOff` | `DcpsWriteOffPage` | 核销页上方预报信息表格 |
+| `write-off/components/FlowWriteOffView.vue` | `DcpsFlowWriteOff` | `DcpsWriteOffPage` | 核销页下方流水信息表格 |
+
+## 新增页面检查清单
+
+1. 在 `src/view/dcps/<模块>/` 下新建 `index.vue`，并添加 `defineOptions({ name: 'Dcps<模块>Page' })`。
+2. 同目录按需补充 `api.ts`、`typs.ts`、`utils.ts` 及 `components/` 子组件，子组件同样使用 `Dcps` 前缀命名。
+3. 在 `src/router/index.ts` 的 `children` 中新增路由，配置 `path`、`name`、`component`、`meta.menu`、`meta.title`。
+4. 如需出现在侧边菜单，在 `src/router/menus.ts` 中追加菜单项，`name` 与一级路由名一致。
+5. 如需缓存页面，把组件 `name` 加入 `src/layout/index.vue` 中 `<KeepAlive>` 的 `include`。
+6. 更新本文档的对应关系表。

package/src/view/dcps/auth/components/AuthorizationDetailDialog.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+defineOptions({ name: 'DcpsAuthDetailDialog' })
+
 // 父页面传入的弹窗状态、任务数据和操作权限。
 const props = defineProps<{
   // 是否显示详情弹窗。

package/src/view/dcps/auth/index.vue

@@ -7,6 +7,8 @@ import API from './api'
 import { authorizationRuntime } from '../runtime'
 import type { AuthorizationFilters, AuthorizationQueryParams, AuthorizationTask } from './typs'
 
+defineOptions({ name: 'DcpsAuthPage' })
+
 type Decision = 'approve' | 'reject'
 type AmountSortOrder = 'ascending' | 'descending' | null
 
@@ -513,16 +515,12 @@ onBeforeUnmount(() => {
 <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));
+  height: calc(100vh - var(--dpcs-host-layout-height));
+  height: calc(100dvh - var(--dpcs-host-layout-height));
   min-height: 0;
   min-width: 0;
   padding: 5px;

package/src/view/dcps/balance/index.vue

@@ -4,6 +4,8 @@ import { ElMessage } from 'element-plus'
 import API from './api'
 import type { AccountBalanceInfo, InjectionCreateParams } from './typs'
 
+defineOptions({ name: 'DcpsBalancePage' })
+
 // 余额信息、请求与加载状态。
 const balance = ref<AccountBalanceInfo | null>(null) // 当前展示的账户行余额信息，未查询到时为 null。
 const loading = ref(false) // 查询是否进行中，同时控制查询按钮状态。
@@ -335,16 +337,12 @@ onBeforeUnmount(() => {
 <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));
+  height: calc(100vh - var(--dpcs-host-layout-height));
+  height: calc(100dvh - var(--dpcs-host-layout-height));
   min-height: 0;
   min-width: 0;
   padding: 5px;

package/src/view/dcps/common.css

@@ -0,0 +1,7 @@
+/* DCPS 页面公共变量：统一在此维护，各页面直接使用 var(--dpcs-host-layout-height)。 */
+:root {
+  /* 手动修改这里：顶部导航/页签 + 底部状态栏 + 宿主上下留白的合计高度。
+     独立页面保持 0px；例如顶部 90px、底部 24px、上下留白 6px，填写 120px。
+     不包含浏览器标签栏、地址栏，也不包含本页面自身的 padding。 */
+  --dpcs-host-layout-height: 0px;
+}

package/src/view/dcps/estimation/api.ts

@@ -1,159 +1,34 @@
 import { postDigitalRmb } from '@/utils/digital-rmb-request'
-import type { ApiResponse } from '@/utils/request'
 import type {
-  EstimationAmounts, EstimationHistory, EstimationPredRow, EstimationQueryParams, EstimationTranRow,
-  Tam140503001InBody, Tam140503001OutBody, Tam140503002InBody, Tam140503002OutBody,
-  Tam140503003InBody, Tam140503003OutBody, Tam140503004InBody, Tam140503004OutBody,
+  EstimationQueryParams,
+  Tam140503001InBody,
+  Tam140503001OutBody,
+  Tam140503002InBody,
+  Tam140503002OutBody,
+  Tam140503003InBody,
+  Tam140503003OutBody,
+  Tam140503004InBody,
+  Tam140503004OutBody,
 } from './typs'
 
 /**
- * 数字人民币头寸匡算页面接口与共用工具。
- * 接口地址：查询 140503001、导出 140503002、详情 140503003、历史预计调拨金额 140503004；
- * 请求报文和接口类型均在本模块内维护。
+ * 数字人民币头寸匡算接口。
+ * 查询 140503001、导出 140503002、详情 140503003、历史预计调拨金额 140503004。
  */
-const API = {
-  /**
-   * 匡算查询（140503001）。
-   * @param params tranDate 为交易日期；predictAllotInAmt、predictAllotOutAmt
-   * 为今日预计调拨收入、支付金额。返回十个单元格金额，C11、D11 回显本次输入。
-   */
+export default {
+  /** 匡算查询；tranDate 为交易日期，返回十个单元格金额。 */
   queryListApi: (params: EstimationQueryParams) =>
     postDigitalRmb<Tam140503001InBody, Tam140503001OutBody>('/TAM/0001/140503001', params),
 
-  /**
-   * 匡算导出（140503002）：入参与查询完全一致，响应只有 fileName。
-   * 下载协议待文件服务确认，页面导出按钮暂未接线。
-   */
+  /** 匡算导出；入参与查询一致，响应只有 fileName。 */
   exportApi: (params: EstimationQueryParams) =>
     postDigitalRmb<Tam140503002InBody, Tam140503002OutBody>('/TAM/0001/140503002', params),
 
-  /**
-   * 匡算详情（140503003）。
-   * @param params position 为报表单元格位置编码，tranDate 为交易日期；
-   * 返回该单元格对应的预报列表、流水列表和总条数。
-   */
+  /** 匡算详情；position 为单元格位置编码，tranDate 为交易日期。 */
   getDetailApi: (params: Tam140503003InBody) =>
     postDigitalRmb<Tam140503003InBody, Tam140503003OutBody>('/TAM/0001/140503003', params),
 
-  /**
-   * 历史预计调拨金额查询（140503004）。
-   * @param tranDate 交易日期。返回该日期的预计调拨收支金额，用于预填查询条件。
-   */
+  /** 查询指定日期的历史预计调拨金额，用于预填查询条件。 */
   queryHistoryApi: (tranDate: string) =>
-    postDigitalRmb<Tam140503004InBody, Tam140503004OutBody>('/TAM/0001/140503004', { tranDate }),
+    postDigitalRmb<Tam140503004InBody, Tam140503004OutBody>('/TAM/0001/140503004', { 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/estimation/components/EstimationDetailDialog.vue

@@ -1,9 +1,12 @@
 <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 API from '../api'
+import { busiTypeLabels, dictLabel, displayText, formatAmount, getErrorMessage, payChannelLabels, payDirecLabels, verifyStatusLabels } from '../utils'
 import type { EstimationCell, EstimationPredRow, EstimationTranRow } from '../typs'
 
+defineOptions({ name: 'DcpsEstimationDetailDialog' })
+
 // 匡算详情弹窗：按 position、tranDate 查询单元格对应的预报与流水明细。
 // 弹窗开启时由父页面挂载（destroy-on-close），挂载后立即请求详情。
 

package/src/view/dcps/estimation/index.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import API, {
+import API from './api'
+import {
   calcGapAmount, ensureSuccess, formatAmount, getErrorMessage, getToday, isValidDate, normalizeAmount,
-} from './api'
+} from './utils'
 import EstimationDetailDialog from './components/EstimationDetailDialog.vue'
 import type { EstimationAmounts, EstimationCell, EstimationQueryParams } from './typs'
 
+defineOptions({ name: 'DcpsEstimationPage' })
+
 // 数字人民币头寸匡算页面：
 // 查询条件为交易日期加上今日预计调拨收入、支出金额；交易日期变化后调用
 // 历史预计调拨金额接口（140503004）预填金额，允许手工调整后重新匡算。
@@ -360,16 +363,12 @@ onBeforeUnmount(() => {
 <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));
+  height: calc(100vh - var(--dpcs-host-layout-height));
+  height: calc(100dvh - var(--dpcs-host-layout-height));
   min-height: 0;
   min-width: 0;
   padding: 5px;