vue3-element-plus-app-chu 0.0.15 → 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.15",
+  "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,15 +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 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'
 
 declare module 'vue-router' {
   interface RouteMeta {
-    /** 一级菜单路由名；子页面用它保持侧边菜单高亮。 */
+    /** 所属页面菜单的路由名；新增、详情等子页面用它保持侧边菜单高亮。 */
     menu?: string
     /** 浏览器标题使用的页面名称。 */
     title?: string
@@ -65,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/view/dcps/README.md

@@ -2,6 +2,8 @@
 
 `src/view/dcps` 下每个业务页面统一保持三个文件，不再拆分子组件、工具文件或运行时配置：
 
+一级菜单为分组时，页面放在该分组目录下。例如“注资/预注资管理”的两个页面分别位于 `injection-management/injection/` 和 `injection-management/balance/`，各自保留下面三个文件。
+
 | 文件 | 用途 |
 | --- | --- |
 | `api.ts` | 当前页面用到的接口定义。 |
@@ -28,8 +30,9 @@
 | `/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` | 页面 | 数字人民币账户行余额查询申请 |
+| `/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` | — | — |
@@ -39,14 +42,15 @@
 
 - 头寸预报的列表、新增、修改、详情共用 `forecast/index.vue`，通过路由 `props.mode` 切换页面形态；修改和详情通过 `props.predRefNo` 接收路由参数。
 - `forecast/index.vue` 顶部使用一个普通 `<script>` 块保存列表记录缓存，跳转修改或详情前暂存列表行，用于补齐详情接口未返回的字段。
-- 侧边菜单配置在 `src/router/menus.ts`，其中 `name` 必须与对应的一级路由 `name` 保持一致。
+- 侧边菜单配置在 `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' })`。
+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` 中追加菜单项，`name` 与一级路由名一致。
+4. 在 `src/router/index.ts` 中新增路由；分组页面添加到对应分组路由的 `children` 下，配置 `path`、`name`、`component`、`meta.menu`、`meta.title`。
+5. 如需出现在侧边菜单，在 `src/router/menus.ts` 中追加菜单项或添加到分组的 `children` 中，`name` 与对应路由名一致。
 6. 更新本文档的对应关系表。