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

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.15",
   "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,107 @@
+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 DigitalRmbInjection from '@/view/dcps/injection/index.vue'
+import DigitalRmbWriteOff from '@/view/dcps/write-off/index.vue'
+import DigitalRmbPositionEstimation from '@/view/dcps/estimation/index.vue'
+
+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: DigitalRmbForecast,
+        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: DigitalRmbForecast,
+        meta: { menu: 'forecast', title: '修改数字人民币头寸预报' },
+        props: (route) => ({
+          mode: 'edit',
+          predRefNo: String(route.params.predRefNo ?? ''),
+        }),
+      },
+      {
+        path: 'forecast/:predRefNo',
+        name: 'forecast-detail',
+        component: DigitalRmbForecast,
+        meta: { menu: 'forecast', title: '数字人民币头寸预报详情' },
+        props: (route) => ({
+          mode: 'detail',
+          predRefNo: String(route.params.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/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

@@ -0,0 +1,52 @@
+# DCPS 页面文件结构
+
+`src/view/dcps` 下每个业务页面统一保持三个文件，不再拆分子组件、工具文件或运行时配置：
+
+| 文件 | 用途 |
+| --- | --- |
+| `api.ts` | 当前页面用到的接口定义。 |
+| `typs.ts` | 当前页面用到的接口类型、页面类型。 |
+| `index.vue` | 页面入口，包含模板、页面内子视图（列表 / 表单 / 详情 / 弹窗）和页面内工具函数。 |
+
+公共样式变量仍放在 `common.css`，由 `src/main.ts` 统一引入。
+
+## 命名约定
+
+- 所有页面组件的 `defineOptions({ name })` 统一以 `Dcps` 开头（PascalCase）。
+- 页面入口统一命名为 `Dcps<模块>Page`。
+- 页面内部的弹窗、表格、表单不再单独拆文件，直接写在 `index.vue` 中，相关状态和方法使用页面前缀区分。
+- 路由名使用 kebab-case（如 `forecast-create`）。
+
+## 路由与页面文件
+
+路由定义在 `src/router/index.ts`，所有业务页面都挂在 `AppLayout`（`src/layout/index.vue`）下。
+
+| 路由路径 | 路由 name | 页面文件 | 页面形态 | 页面标题（meta.title） |
+| --- | --- | --- | --- | --- |
+| `/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` | `injection` | `injection/index.vue` | 页面 | 数字人民币注资明细查询 |
+| `/balance` | `balance` | `balance/index.vue` | 页面 | 数字人民币账户行余额查询申请 |
+| `/auth` | `auth` | `auth/index.vue` | 页面 | 数字人民币授权 |
+| `/write-off` | `write-off` | `write-off/index.vue` | 页面 | 数字人民币核销 |
+| `/` | — | 重定向到 `forecast` | — | — |
+| `/:pathMatch(.*)*` | — | 重定向到 `forecast`（404 兜底） | — | — |
+
+补充说明：
+
+- 头寸预报的列表、新增、修改、详情共用 `forecast/index.vue`，通过路由 `props.mode` 切换页面形态；修改和详情通过 `props.predRefNo` 接收路由参数。
+- `forecast/index.vue` 顶部使用一个普通 `<script>` 块保存列表记录缓存，跳转修改或详情前暂存列表行，用于补齐详情接口未返回的字段。
+- 侧边菜单配置在 `src/router/menus.ts`，其中 `name` 必须与对应的一级路由 `name` 保持一致。
+- `src/layout/index.vue` 使用 `<KeepAlive include="DcpsForecastPage">` 缓存头寸预报页面；新增、修改、详情按路由 `key` 分别缓存，返回列表时自动重新查询。
+
+## 新增页面检查清单
+
+1. 在 `src/view/dcps/<模块>/` 下新建 `index.vue`，并添加 `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` 中追加菜单项，`name` 与一级路由名一致。
+6. 更新本文档的对应关系表。

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

@@ -2,12 +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
 
 // 初始查询条件；空字符串表示不限制该条件，重置时恢复此配置。
@@ -54,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) // 本次待处理的任务，提交时读取平台流水号。
@@ -439,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"
@@ -513,16 +620,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;
@@ -548,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/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;
+}