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

package/README.md

@@ -16,6 +16,8 @@ pnpm dev:backend  # 只启动后端（backend/ 目录，tsx watch）
 
 应用外壳位于 `src/layout/index.vue`，由 `App.vue` 通过 `RouterView` 挂载，统一承载侧边导航、折叠状态和业务页面内容。菜单配置在 `src/router/menus.ts`，路由表在 `src/router/index.ts`，新增业务页面时两处各追加一项即可。业务地址、浏览器前进后退和刷新都由 vue-router 驱动；头寸预报列表页由 `KeepAlive` 缓存，返回时保留筛选和分页状态。
 
+“注资/预注资管理”为一级分组菜单，下设“数字人民币注资明细查询”和“数字人民币账户行余额查询申请”。页面目录统一放在 `src/view/dcps/injection-management/` 下，路由分别为 `/injection-management/injection` 和 `/injection-management/balance`；旧地址 `/injection`、`/balance` 继续可用。
+
 ## 数字人民币头寸预报
 
 默认入口为数字人民币头寸预报（`/forecast`），侧边菜单可切换至其他数字人民币页面。

package/package.json

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

package/src/layout/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import type { MenuInstance } from 'element-plus'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 import { layoutMenus as menus } from '@/router/menus'
 
@@ -7,12 +8,19 @@ const route = useRoute()
 const router = useRouter()
 const firstMenu = menus[0]!
 const collapsed = ref(false)
-// 子页面通过 meta.menu 指向所属一级菜单，进入新增、详情时侧边栏仍保持高亮。
+const menuRef = ref<MenuInstance>()
+// 子页面通过 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 })
 }
 
+// 直接访问子页面或通过浏览器前进、后退切换时，自动展开所属一级菜单。
+watch([activeMenu, menuRef], ([name, menu]) => {
+  const parentMenu = menus.find((item) => item.children?.some((child) => child.name === name))
+  if (parentMenu) menu?.open(parentMenu.name)
+}, { flush: 'post' })
+
 onMounted(() => {
   collapsed.value = window.innerWidth <= 760
 })
@@ -31,14 +39,27 @@ onMounted(() => {
 
       <div v-if="!collapsed" class="rail-caption">OPERATIONS</div>
       <el-menu
+        ref="menuRef"
         class="dcps-menu"
         :default-active="activeMenu"
         @select="selectMenu"
       >
-        <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>
+        <template v-for="menu in menus" :key="menu.name">
+          <el-sub-menu v-if="menu.children?.length" :index="menu.name">
+            <template #title>
+              <span v-if="collapsed" class="menu-label menu-label--compact">{{ menu.compactTitle }}</span>
+              <span v-else class="menu-label">{{ menu.title }}</span>
+            </template>
+            <el-menu-item v-for="child in menu.children" :key="child.name" :index="child.name">
+              <span v-if="collapsed" class="menu-label menu-label--compact">{{ child.compactTitle }}</span>
+              <span v-else class="menu-label menu-label--child">{{ child.title }}</span>
+            </el-menu-item>
+          </el-sub-menu>
+          <el-menu-item v-else :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>
+        </template>
       </el-menu>
 
       <div class="rail-bottom">
@@ -99,7 +120,9 @@ onMounted(() => {
 
 .is-collapsed .side-rail { width: 76px; }
 
-.is-collapsed .dcps-menu :deep(.el-menu-item) { padding: 0 6px !important; }
+.is-collapsed .dcps-menu :deep(.el-menu-item),
+.is-collapsed .dcps-menu :deep(.el-sub-menu__title) { padding: 0 6px !important; }
+.is-collapsed .dcps-menu :deep(.el-sub-menu__icon-arrow) { display: none; }
 
 .rail-brand {
   display: flex;
@@ -141,7 +164,8 @@ onMounted(() => {
   border-right: 0;
 }
 
-.dcps-menu :deep(.el-menu-item) {
+.dcps-menu :deep(.el-menu-item),
+.dcps-menu :deep(.el-sub-menu__title) {
   height: 46px;
   margin: 3px 0;
   padding: 0 12px !important;
@@ -150,10 +174,14 @@ onMounted(() => {
   font-size: 12px;
 }
 
+.dcps-menu :deep(.el-sub-menu .el-menu-item) { height: auto; min-height: 46px; padding: 9px 12px 9px 24px !important; }
+.dcps-menu :deep(.el-sub-menu__title) { padding-right: 32px !important; }
+.dcps-menu :deep(.el-sub-menu.is-active > .el-sub-menu__title) { color: var(--el-color-primary); }
 .dcps-menu :deep(.el-menu-item:hover) { color: var(--el-color-primary); }
 .dcps-menu :deep(.el-menu-item.is-active) { border-color: var(--el-color-primary-light-8); color: var(--el-color-primary); background: var(--el-color-primary-light-9); }
 .dcps-menu :deep(.el-menu-item.is-active::before) { position: absolute; left: 0; width: 3px; height: 19px; border-radius: 0 4px 4px 0; background: var(--el-color-primary); content: ''; }
 .menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
+.menu-label--child { white-space: normal; }
 
 .menu-label--compact {
   width: 26px;
@@ -212,6 +240,7 @@ onMounted(() => {
   .rail-bottom { justify-content: center; margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; }
   .collapse-button { justify-content: center; padding: 0; }
   .is-collapsed .side-rail { width: 64px; }
-  .dcps-menu :deep(.el-menu-item) { justify-content: center; padding: 0 !important; }
+  .dcps-menu :deep(.el-menu-item),
+  .dcps-menu :deep(.el-sub-menu__title) { justify-content: center; padding: 0 !important; }
 }
 </style>

package/src/router/index.ts

@@ -1,18 +1,15 @@
 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 DigitalRmbAccountBalance from '@/view/dcps/injection-management/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 DigitalRmbInjection from '@/view/dcps/injection-management/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
@@ -34,7 +31,7 @@ const routes: RouteRecordRaw[] = [
       {
         path: 'forecast/create',
         name: 'forecast-create',
-        component: ForecastEditorView,
+        component: DigitalRmbForecast,
         meta: { menu: 'forecast', title: '新增数字人民币头寸预报' },
         props: (route) => ({
           mode: 'create',
@@ -44,22 +41,22 @@ const routes: RouteRecordRaw[] = [
       {
         path: 'forecast/:predRefNo/edit',
         name: 'forecast-edit',
-        component: ForecastEditorView,
+        component: DigitalRmbForecast,
         meta: { menu: 'forecast', title: '修改数字人民币头寸预报' },
-        props: (route) => {
-          const predRefNo = String(route.params.predRefNo ?? '')
-          return { mode: 'edit', predRefNo, row: recallForecastRow(predRefNo) }
-        },
+        props: (route) => ({
+          mode: 'edit',
+          predRefNo: String(route.params.predRefNo ?? ''),
+        }),
       },
       {
         path: 'forecast/:predRefNo',
         name: 'forecast-detail',
-        component: ForecastDetailView,
+        component: DigitalRmbForecast,
         meta: { menu: 'forecast', title: '数字人民币头寸预报详情' },
-        props: (route) => {
-          const predRefNo = String(route.params.predRefNo ?? '')
-          return { predRefNo, row: recallForecastRow(predRefNo) }
-        },
+        props: (route) => ({
+          mode: 'detail',
+          predRefNo: String(route.params.predRefNo ?? ''),
+        }),
       },
       {
         path: 'estimation',
@@ -68,16 +65,26 @@ const routes: RouteRecordRaw[] = [
         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: 'injection-management',
+        name: 'injection-management',
+        redirect: { name: 'injection' },
+        meta: { title: '注资/预注资管理' },
+        children: [
+          {
+            path: 'injection',
+            alias: '/injection',
+            name: 'injection',
+            component: DigitalRmbInjection,
+            meta: { menu: 'injection', title: '数字人民币注资明细查询' },
+          },
+          {
+            path: 'balance',
+            alias: '/balance',
+            name: 'balance',
+            component: DigitalRmbAccountBalance,
+            meta: { menu: 'balance', title: '数字人民币账户行余额查询申请' },
+          },
+        ],
       },
       {
         path: 'auth',

package/src/router/menus.ts

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

package/src/utils/request.ts

@@ -46,12 +46,14 @@ export interface StandardApiResponse<T = unknown> {
 export type HttpRequestConfig = AxiosRequestConfig
 
 // 默认将操作类型分配到 appHead，公共字段分配到 head，其余字段分配到 body。
+// tranDate 在数币业务接口中是业务字段（如 140501001、140503001），平铺入参统一保留在 body；
+// 需要作为公共交易日期时，请显式传入 { head: { tranDate } }。
 const appHeadFields = new Set(['ip', 'opType'])
 const headFields = new Set([
   'adminUserId', 'agentBranchId', 'apprUserId', 'areaCode', 'batch',
   'branchId', 'consumerId', 'consumerSeqNo', 'ctrlBits', 'digitalSign',
   'extra', 'fileFlag', 'filePath', 'isBatch', 'msgId', 'origSender',
-  'pageIndex', 'pageSize', 'spanId', 'traceId', 'tranCode', 'tranDate',
+  'pageIndex', 'pageSize', 'spanId', 'traceId', 'tranCode',
   'tranTimestamp', 'userId', 'verifyUserId', 'versionId',
 ])
 

package/src/view/dcps/README.md

@@ -1,59 +1,56 @@
-# DCPS 页面组件与路由对应关系
+# DCPS 页面文件结构
 
-本文档记录 `src/view/dcps` 下各组件的名称（`defineOptions({ name })`）与路由的对应关系。
-新增或调整页面时，请同步更新此文档。
+`src/view/dcps` 下每个业务页面统一保持三个文件，不再拆分子组件、工具文件或运行时配置：
+
+一级菜单为分组时，页面放在该分组目录下。例如“注资/预注资管理”的两个页面分别位于 `injection-management/injection/` 和 `injection-management/balance/`，各自保留下面三个文件。
+
+| 文件 | 用途 |
+| --- | --- |
+| `api.ts` | 当前页面用到的接口定义。 |
+| `typs.ts` | 当前页面用到的接口类型、页面类型。 |
+| `index.vue` | 页面入口，包含模板、页面内子视图（列表 / 表单 / 详情 / 弹窗）和页面内工具函数。 |
+
+公共样式变量仍放在 `common.css`，由 `src/main.ts` 统一引入。
 
 ## 命名约定
 
-- 所有 `src/view/dcps` 下的 Vue 组件，`name` 统一以 `Dcps` 开头（PascalCase）。
-- 页面入口统一为各业务目录下的 `index.vue`，命名为 `Dcps<模块>Page`。
-- 页面内部的组件按职责命名：`...List` / `...Editor` / `...Detail` / `...Dialog` / `...Shell`。
-- 组件 `name` 与路由 `name` 是两套独立标识：路由名使用 kebab-case（如 `forecast-create`），组件名使用 PascalCase（如 `DcpsForecastEditor`）。
+- 所有页面组件的 `defineOptions({ name })` 统一以 `Dcps` 开头（PascalCase）。
+- 页面入口统一命名为 `Dcps<模块>Page`。
+- 页面内部的弹窗、表格、表单不再单独拆文件，直接写在 `index.vue` 中，相关状态和方法使用页面前缀区分。
+- 路由名使用 kebab-case（如 `forecast-create`）。
 
-## 路由与页面组件
+## 路由与页面文件
 
 路由定义在 `src/router/index.ts`，所有业务页面都挂在 `AppLayout`（`src/layout/index.vue`）下。
 
-| 路由路径 | 路由 name | 页面文件 | 组件 name（defineOptions） | 页面标题（meta.title） |
+| 路由路径 | 路由 name | 页面文件 | 页面形态 | 页面标题（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` | `forecast` | `forecast/index.vue` | 列表 | 数字人民币头寸预报 |
+| `/forecast/create` | `forecast-create` | `forecast/index.vue` | 新增（`mode: 'create'`） | 新增数字人民币头寸预报 |
+| `/forecast/:predRefNo/edit` | `forecast-edit` | `forecast/index.vue` | 修改（`mode: 'edit'`） | 修改数字人民币头寸预报 |
+| `/forecast/:predRefNo` | `forecast-detail` | `forecast/index.vue` | 详情（`mode: 'detail'`） | 数字人民币头寸预报详情 |
+| `/estimation` | `estimation` | `estimation/index.vue` | 页面 | 数字人民币头寸匡算 |
+| `/injection-management` | `injection-management` | — | 重定向到 `injection` | 注资/预注资管理 |
+| `/injection-management/injection` | `injection` | `injection-management/injection/index.vue` | 页面 | 数字人民币注资明细查询 |
+| `/injection-management/balance` | `balance` | `injection-management/balance/index.vue` | 页面 | 数字人民币账户行余额查询申请 |
+| `/auth` | `auth` | `auth/index.vue` | 页面 | 数字人民币授权 |
+| `/write-off` | `write-off` | `write-off/index.vue` | 页面 | 数字人民币核销 |
 | `/` | — | 重定向到 `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` | 核销页下方流水信息表格 |
+- 头寸预报的列表、新增、修改、详情共用 `forecast/index.vue`，通过路由 `props.mode` 切换页面形态；修改和详情通过 `props.predRefNo` 接收路由参数。
+- `forecast/index.vue` 顶部使用一个普通 `<script>` 块保存列表记录缓存，跳转修改或详情前暂存列表行，用于补齐详情接口未返回的字段。
+- 侧边菜单配置在 `src/router/menus.ts`，其中 `name` 必须与对应路由的 `name` 保持一致；分组菜单通过 `children` 配置二级页面，页面的 `meta.menu` 指向自己的菜单项。
+- “注资/预注资管理”对应 `injection-management` 分组，包含注资明细查询和账户行余额查询申请两个页面；访问子页面时自动展开父菜单。旧地址 `/injection`、`/balance` 保留为对应页面的别名。
+- `src/layout/index.vue` 使用 `<KeepAlive include="DcpsForecastPage">` 缓存头寸预报页面；新增、修改、详情按路由 `key` 分别缓存，返回列表时自动重新查询。
 
 ## 新增页面检查清单
 
-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`。
+1. 在 `src/view/dcps/<模块>/` 下新建 `index.vue`；如归属某个分组，放在 `src/view/dcps/<分组>/<模块>/` 下，并添加 `defineOptions({ name: 'Dcps<模块>Page' })`。
+2. 同目录补充 `api.ts`、`typs.ts`；不要再创建 `components/`、`utils.ts`、`runtime.ts` 等额外文件。
+3. 弹窗、子表格、表单直接写在 `index.vue` 中；工具函数写在 `index.vue` 的 `<script setup>` 内。
+4. 在 `src/router/index.ts` 中新增路由；分组页面添加到对应分组路由的 `children` 下，配置 `path`、`name`、`component`、`meta.menu`、`meta.title`。
+5. 如需出现在侧边菜单，在 `src/router/menus.ts` 中追加菜单项或添加到分组的 `children` 中，`name` 与对应路由名一致。
 6. 更新本文档的对应关系表。

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

@@ -2,14 +2,20 @@
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 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 { authorizationRuntime } from '../runtime'
 import type { AuthorizationFilters, AuthorizationQueryParams, AuthorizationTask } from './typs'
 
 defineOptions({ name: 'DcpsAuthPage' })
 
 type Decision = 'approve' | 'reject'
+
+// 授权页面的审批人和默认创建日期；日期格式为 YYYYMMDD。
+const authorizationRuntime = {
+  approverId: '10092', // 审批人工号。
+  approverName: '王干事', // 审批人姓名。
+  createTmBegin: '20261012', // 默认创建开始日期。
+  createTmEnd: '20261012', // 默认创建结束日期。
+}
 type AmountSortOrder = 'ascending' | 'descending' | null
 
 // 初始查询条件；空字符串表示不限制该条件，重置时恢复此配置。
@@ -56,6 +62,52 @@ let disposed = false // 页面是否已卸载，避免未完成请求继续更
 const detailDialogVisible = ref(false) // 详情弹窗是否显示。
 const detailTask = ref<any>(null) // 当前查看详情的原始任务，未选择时为 null。
 
+// 详情分组配置；title 为分组标题，fields 每项为 [任务字段名, 展示名称]。
+const detailGroups = [
+  {
+    title: '任务信息',
+    fields: [
+      ['id', '任务 ID'],
+      ['bizType', '业务类型'],
+      ['createTm', '创建时间'],
+      ['txnTm', '交易发起时间'],
+    ],
+  },
+  {
+    title: '交易信息',
+    fields: [
+      ['collePayerName', '付款人名称'],
+      ['payeeName', '收款人名称'],
+      ['payWltId', '付款钱包 ID'],
+    ],
+  },
+  {
+    title: '机构信息',
+    fields: [
+      ['authoOrgName', '授权机构名称'],
+      ['authoOrgNo', '授权机构编号'],
+      ['paySideAcctBeloOrgName', '付款方账户所属机构名称'],
+      ['paySideAcctBeloOrgNo', '付款方账户所属机构编号'],
+      ['collSideAcctBeloOrgName', '收款方账户所属机构名称'],
+      ['collSideAcctBeloOrgNo', '收款方账户所属机构编号'],
+      ['subBrchName', '落地支行名称'],
+      ['subBrchBankNo', '落地支行行号'],
+    ],
+  },
+  {
+    title: '审批信息',
+    fields: [
+      ['apprvrId', '审批人 ID'],
+      ['apprvrName', '审批人名称'],
+      ['approveTm', '审批时间'],
+      ['rmk', '审批备注'],
+    ],
+  },
+] as const
+
+/** 读取详情展示值，空值显示占位符；field 为任务字段名。 */
+const detailValue = (field: string) => detailValues.value?.[field]?.trim() || '—'
+
 // 审批弹窗状态。
 const dialogVisible = ref(false) // 审批弹窗是否显示。
 const selectedTask = ref<any>(null) // 本次待处理的任务，提交时读取平台流水号。
@@ -441,13 +493,66 @@ onBeforeUnmount(() => {
       </ArtDataTable>
     </div>
 
-    <AuthorizationDetailDialog
+    <!-- 授权详情弹窗：按任务字段分组展示，底部可直接进入审批。 -->
+    <el-dialog
       v-model="detailDialogVisible"
-      :task="detailTask"
-      :display-values="detailValues"
-      :disabled="loading || !!pendingDecision"
-      @approve="openDecisionDialog"
-    />
+      title="数字人民币授权详情"
+      style="--el-dialog-padding-primary: 10px; padding: 10px 16px; margin-bottom: 16px"
+      width="min(1280px, calc(100vw - 32px))"
+      top="16px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-scrollbar class="detail-scrollbar">
+        <div v-if="detailTask" class="detail-content">
+          <!-- 交易摘要 -->
+          <header class="detail-summary">
+            <div>
+              <span class="detail-label">交易金额（元）</span>
+              <strong class="detail-amount">{{ detailValue('txnAmt') }}</strong>
+            </div>
+            <div>
+              <span class="detail-label">任务状态</span>
+              <strong class="detail-status">{{ detailValue('taskSts') }}</strong>
+            </div>
+            <div class="detail-reference">
+              <span class="detail-label">平台流水号</span>
+              <strong>{{ detailValue('platfSeqNo') }}</strong>
+            </div>
+          </header>
+
+          <!-- group 为当前详情分组，包含标题和字段配置。 -->
+          <section v-for="group in detailGroups" :key="group.title" class="detail-group" :aria-label="group.title">
+            <h3>{{ group.title }}</h3>
+            <dl class="detail-fields">
+              <!-- field 为任务字段名，label 为字段的中文展示名称。 -->
+              <div
+                v-for="[field, label] in group.fields"
+                :key="field"
+                class="detail-field"
+                :class="{ 'detail-field--remark': field === 'rmk' }"
+              >
+                <dt>{{ label }}</dt>
+                <dd>{{ detailValue(field) }}</dd>
+              </div>
+            </dl>
+          </section>
+        </div>
+        <el-empty v-else description="暂无任务详情" :image-size="64" />
+      </el-scrollbar>
+
+      <template #footer>
+        <el-button size="small" @click="detailDialogVisible = false">关闭</el-button>
+        <el-button
+          size="small"
+          type="primary"
+          :disabled="loading || !!pendingDecision || !canApprove(detailTask)"
+          @click="openDecisionDialog(detailTask)"
+        >
+          审批
+        </el-button>
+      </template>
+    </el-dialog>
     <!-- 审批提交期间禁止关闭弹窗，等待服务端返回结果。 -->
     <el-dialog
       v-model="dialogVisible"
@@ -546,6 +651,40 @@ onBeforeUnmount(() => {
 .filter-actions { flex-shrink: 0; margin-left: auto; }
 .amount-cell { color: var(--el-color-primary-dark-2); font-variant-numeric: tabular-nums; font-weight: 600; }
 .decision-summary { margin-bottom: 20px; overflow-wrap: anywhere; }
+
+/* ---------- 授权详情弹窗 ---------- */
+/* 为弹窗边距、标题和底部按钮预留空间，其余高度用于完整展示详情。 */
+.detail-scrollbar :deep(.el-scrollbar__wrap) {
+  max-height: calc(100vh - 120px);
+  max-height: calc(100dvh - 120px);
+}
+.detail-content { display: grid; gap: 8px; font-size: 13px; line-height: 1.4; }
+.detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px; border-radius: 8px; background: var(--el-color-primary-light-9); overflow-wrap: anywhere; }
+.detail-label,
+.detail-field dt { color: var(--el-text-color-secondary); font-size: 12px; }
+.detail-amount { display: block; margin-top: 4px; color: var(--el-color-primary-dark-2); font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.3; }
+.detail-status { display: block; margin-top: 6px; color: var(--el-text-color-primary); font-size: 15px; }
+.detail-reference { display: grid; grid-column: span 2; align-content: start; gap: 4px; }
+.detail-group { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 8px; padding: 12px; border: 1px solid var(--el-border-color-lighter); border-radius: 8px; }
+.detail-group h3 { margin: 4px 0 0; padding-left: 8px; border-left: 3px solid var(--el-color-primary); color: var(--el-text-color-primary); font-size: 14px; line-height: 20px; }
+.detail-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
+.detail-field { min-width: 0; padding: 8px 12px; border-radius: 6px; background: var(--el-fill-color-lighter); }
+.detail-field--remark { grid-column: 1 / -1; }
+.detail-field dd { margin: 2px 0 0; color: var(--el-text-color-primary); font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
+
+@media (max-width: 1024px) {
+  .detail-group { grid-template-columns: minmax(0, 1fr); }
+  .detail-group h3 { margin-top: 0; }
+  .detail-summary,
+  .detail-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (max-width: 600px) {
+  .detail-summary,
+  .detail-fields { grid-template-columns: minmax(0, 1fr); }
+  .detail-reference { grid-column: auto; }
+}
+
 @media (max-width: 540px) {
   .filter-form :deep(.el-form-item) { flex-basis: 100%; }
   .filter-actions { margin-left: 0; }

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

@@ -1,34 +1,29 @@
-import { postDigitalRmb } from '@/utils/digital-rmb-request'
-import type {
-  EstimationQueryParams,
-  Tam140503001InBody,
-  Tam140503001OutBody,
-  Tam140503002InBody,
-  Tam140503002OutBody,
-  Tam140503003InBody,
-  Tam140503003OutBody,
-  Tam140503004InBody,
-  Tam140503004OutBody,
-} from './typs'
+import baseHttpClient from "@chic/http"
 
-/**
- * 数字人民币头寸匡算接口。
- * 查询 140503001、导出 140503002、详情 140503003、历史预计调拨金额 140503004。
- */
 export default {
-  /** 匡算查询；tranDate 为交易日期，返回十个单元格金额。 */
-  queryListApi: (params: EstimationQueryParams) =>
-    postDigitalRmb<Tam140503001InBody, Tam140503001OutBody>('/TAM/0001/140503001', params),
-
-  /** 匡算导出；入参与查询一致，响应只有 fileName。 */
-  exportApi: (params: EstimationQueryParams) =>
-    postDigitalRmb<Tam140503002InBody, Tam140503002OutBody>('/TAM/0001/140503002', params),
-
-  /** 匡算详情；position 为单元格位置编码，tranDate 为交易日期。 */
-  getDetailApi: (params: Tam140503003InBody) =>
-    postDigitalRmb<Tam140503003InBody, Tam140503003OutBody>('/TAM/0001/140503003', params),
-
-  /** 查询指定日期的历史预计调拨金额，用于预填查询条件。 */
+  /**
+   * 查询数字人民币头寸匡算结果。
+   * @param params 查询参数：tranDate 为交易日期（YYYYMMDD），
+   * predictAllotInAmt、predictAllotOutAmt 为今日预计调拨收入、支出金额。
+   * 返回 B15、C3、C6、C7、C8、C11、D6、D7、D8、D11 十个单元格金额。
+   */
+  queryListApi: (params: unknown) => baseHttpClient.post<any>("/TAM/0001/140503001", params),
+  /**
+   * 导出数字人民币头寸匡算结果。
+   * @param params 导出参数与查询一致：tranDate、predictAllotInAmt、predictAllotOutAmt；
+   * 响应只返回导出文件名 fileName。
+   */
+  exportApi: (params: unknown) => baseHttpClient.post<any>("/TAM/0001/140503002", params),
+  /**
+   * 查询匡算单元格明细。
+   * @param params 查询参数：position 为单元格位置编码，tranDate 为交易日期（YYYYMMDD）。
+   * 响应包含预报明细 predList、流水明细 tranList 和总条数 totalCount。
+   */
+  getDetailApi: (params: unknown) => baseHttpClient.post<any>("/TAM/0001/140503003", params),
+  /**
+   * 查询指定日期的历史预计调拨金额，用于预填查询条件。
+   * @param tranDate 交易日期，格式为 YYYYMMDD。
+   */
   queryHistoryApi: (tranDate: string) =>
-    postDigitalRmb<Tam140503004InBody, Tam140503004OutBody>('/TAM/0001/140503004', { tranDate })
+    baseHttpClient.post<any>("/TAM/0001/140503004", { tranDate })
 }