From 1f0288be5605ebda27f6b58791e57031449e3afc Mon Sep 17 00:00:00 2001 From: pdsuwwz Date: Mon, 19 Jun 2023 14:41:44 +0800 Subject: [PATCH] feat: add nested routes --- README.md | 2 + src/base/index.ts | 3 +- src/components/Navigation/Side/SideLogo.vue | 4 +- .../HomeFront/components/QuickStart.vue | 16 ++- src/modules/NestedLevel/README.md | 16 +++ src/modules/NestedLevel/api/index.ts | 48 +++++++ .../NestedLevel/components/TestComponent.vue | 28 ++++ src/modules/NestedLevel/data/index.ts | 8 ++ src/modules/NestedLevel/pages/level-1-1.vue | 29 ++++ src/modules/NestedLevel/pages/level-1-2.vue | 29 ++++ src/modules/NestedLevel/pages/level-1-3.vue | 29 ++++ src/modules/NestedLevel/pages/level-1-4.vue | 29 ++++ src/modules/NestedLevel/pages/level-2-1.vue | 29 ++++ src/modules/NestedLevel/pages/level-2-2.vue | 29 ++++ src/modules/NestedLevel/pages/level-3-1.vue | 29 ++++ src/modules/NestedLevel/pages/level-3-2.vue | 29 ++++ src/modules/NestedLevel/pages/level-3-3.vue | 29 ++++ src/modules/NestedLevel/pages/level-4-1.vue | 29 ++++ src/modules/NestedLevel/pages/level-4-2.vue | 29 ++++ src/modules/NestedLevel/store/index.ts | 21 +++ src/router/frontend/constants.ts | 7 +- src/router/frontend/index.ts | 8 +- src/router/frontend/nested.ts | 134 ++++++++++++++++++ src/widgets/WorkTabs/TabsBack.vue | 24 ++-- 24 files changed, 613 insertions(+), 25 deletions(-) create mode 100644 src/modules/NestedLevel/README.md create mode 100755 src/modules/NestedLevel/api/index.ts create mode 100644 src/modules/NestedLevel/components/TestComponent.vue create mode 100644 src/modules/NestedLevel/data/index.ts create mode 100755 src/modules/NestedLevel/pages/level-1-1.vue create mode 100755 src/modules/NestedLevel/pages/level-1-2.vue create mode 100755 src/modules/NestedLevel/pages/level-1-3.vue create mode 100755 src/modules/NestedLevel/pages/level-1-4.vue create mode 100755 src/modules/NestedLevel/pages/level-2-1.vue create mode 100755 src/modules/NestedLevel/pages/level-2-2.vue create mode 100755 src/modules/NestedLevel/pages/level-3-1.vue create mode 100755 src/modules/NestedLevel/pages/level-3-2.vue create mode 100755 src/modules/NestedLevel/pages/level-3-3.vue create mode 100755 src/modules/NestedLevel/pages/level-4-1.vue create mode 100755 src/modules/NestedLevel/pages/level-4-2.vue create mode 100755 src/modules/NestedLevel/store/index.ts create mode 100644 src/router/frontend/nested.ts diff --git a/README.md b/README.md index 5a78a91..f59d543 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # vite-naive-template +带命名空间的 Tab 切换选项卡 + [![Deploy](https://github.com/pdsuwwz/vite-naive-template/workflows/gh-pages/badge.svg)](https://github.com/pdsuwwz/vite-naive-template/actions/workflows/deploy.yml) [![GitHub Workflow Status (branch)](https://img.shields.io/github/actions/workflow/status/pdsuwwz/vite-naive-template/deploy.yml?branch=main)](https://github.com/pdsuwwz/vite-naive-template/deployments/activity_log?environment=github-pages) [![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/pdsuwwz) diff --git a/src/base/index.ts b/src/base/index.ts index 547b541..59cfbe8 100644 --- a/src/base/index.ts +++ b/src/base/index.ts @@ -1,2 +1,3 @@ export const systemTitleEn = 'Vite Naive Template' -export const systemTitleZh = 'NaiveUI Template 项目' +// export const systemTitleZh = 'NaiveUI Template 项目' +export const systemTitleZh = '' diff --git a/src/components/Navigation/Side/SideLogo.vue b/src/components/Navigation/Side/SideLogo.vue index 1b4e7d6..2d78e6f 100644 --- a/src/components/Navigation/Side/SideLogo.vue +++ b/src/components/Navigation/Side/SideLogo.vue @@ -5,11 +5,11 @@ - 商标 + > -->

import { Dashboard as IconDashboard, - ReportMoney as IconReportMoney + ReportMoney as IconReportMoney, + Components as IconComponents } from '@vicons/tabler' import { TeamOutlined as IconTeamOutlined, - ProfileOutlined as IconProfileOutlined + ProfileOutlined as IconProfileOutlined, + MenuOutlined as IconMenuOutlined } from '@vicons/antd' @@ -77,14 +79,14 @@ const cardConfigOptions = shallowRef>([ routeName: 'CostBudgetManageRoot' }, { - title: '系统管理', - icon: IconReportMoney, + title: '组件示例', + icon: IconComponents, routeName: 'CostBudgetManageRoot' }, { - title: '基础组件', - icon: IconReportMoney, - routeName: 'CostBudgetManageRoot' + title: '多级菜单', + icon: IconMenuOutlined, + routeName: 'NestedLevelRoot' } ]) diff --git a/src/modules/NestedLevel/README.md b/src/modules/NestedLevel/README.md new file mode 100644 index 0000000..9837ef0 --- /dev/null +++ b/src/modules/NestedLevel/README.md @@ -0,0 +1,16 @@ +# 多级菜单 嵌套 + +``` +. +├── 一级菜单 1-1 +├── 一级菜单 1-2 （目录层级） +│   ├── 二级菜单 2-1 +│   └── 二级菜单 2-2 （目录层级） +│   ├── 三级菜单 3-1 +│   ├── 三级菜单 3-2 +│   └── 三级菜单 3-3 （目录层级） +│   ├── 四级菜单 4-1 +│   └── 四级菜单 4-2 +├── 一级菜单 1-3 +└── 一级菜单 1-4 +``` \ No newline at end of file diff --git a/src/modules/NestedLevel/api/index.ts b/src/modules/NestedLevel/api/index.ts new file mode 100755 index 0000000..78011ac --- /dev/null +++ b/src/modules/NestedLevel/api/index.ts @@ -0,0 +1,48 @@ +import request from '@/utils/request' + +export function getProjectList (params) { + return request({ + url: '/project/list', + method: 'get', + params + }) +} + +export function getProjectDetail (params) { + return request({ + url: '/project', + method: 'get', + params + }) +} + +export function createProject (data) { + return request({ + url: '/project', + method: 'post', + data + }) +} + +export function updateDemoTest (data) { + return request({ + url: `/api/demo_test/${data.demoId}`, + method: 'put', + data + }) +} + +export function deleteDemoTest (demoId) { + return request({ + url: `/api/demo_test/${demoId}`, + method: 'delete' + }) +} + +export function updateTogglePublishStatus (params) { + return request({ + url: '/project/toggle_status', + method: 'get', + params + }) +} diff --git a/src/modules/NestedLevel/components/TestComponent.vue b/src/modules/NestedLevel/components/TestComponent.vue new file mode 100644 index 0000000..eb01e8b --- /dev/null +++ b/src/modules/NestedLevel/components/TestComponent.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/src/modules/NestedLevel/data/index.ts b/src/modules/NestedLevel/data/index.ts new file mode 100644 index 0000000..9e85e87 --- /dev/null +++ b/src/modules/NestedLevel/data/index.ts @@ -0,0 +1,8 @@ +export const testData = { + id: Math.random(), + name: '测试项目', + corpName: '测试公司', + notes: '备注', + isPublished: false, + createTime: '2021.01.29' +} diff --git a/src/modules/NestedLevel/pages/level-1-1.vue b/src/modules/NestedLevel/pages/level-1-1.vue new file mode 100755 index 0000000..65d1654 --- /dev/null +++ b/src/modules/NestedLevel/pages/level-1-1.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/src/modules/NestedLevel/pages/level-1-2.vue b/src/modules/NestedLevel/pages/level-1-2.vue new file mode 100755 index 0000000..7cbd05d --- /dev/null +++ b/src/modules/NestedLevel/pages/level-1-2.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/src/modules/NestedLevel/pages/level-1-3.vue b/src/modules/NestedLevel/pages/level-1-3.vue new file mode 100755 index 0000000..63bcfe5 --- /dev/null +++ b/src/modules/NestedLevel/pages/level-1-3.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/src/modules/NestedLevel/pages/level-1-4.vue b/src/modules/NestedLevel/pages/level-1-4.vue new file mode 100755 index 0000000..ddaf7f3 --- /dev/null +++ b/src/modules/NestedLevel/pages/level-1-4.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/src/modules/NestedLevel/pages/level-2-1.vue b/src/modules/NestedLevel/pages/level-2-1.vue new file mode 100755 index 0000000..7dcd28b --- /dev/null +++ b/src/modules/NestedLevel/pages/level-2-1.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/src/modules/NestedLevel/pages/level-2-2.vue b/src/modules/NestedLevel/pages/level-2-2.vue new file mode 100755 index 0000000..13c7e1b --- /dev/null +++ b/src/modules/NestedLevel/pages/level-2-2.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/src/modules/NestedLevel/pages/level-3-1.vue b/src/modules/NestedLevel/pages/level-3-1.vue new file mode 100755 index 0000000..5f4be6f --- /dev/null +++ b/src/modules/NestedLevel/pages/level-3-1.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/src/modules/NestedLevel/pages/level-3-2.vue b/src/modules/NestedLevel/pages/level-3-2.vue new file mode 100755 index 0000000..8079ec3 --- /dev/null +++ b/src/modules/NestedLevel/pages/level-3-2.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/src/modules/NestedLevel/pages/level-3-3.vue b/src/modules/NestedLevel/pages/level-3-3.vue new file mode 100755 index 0000000..da467eb --- /dev/null +++ b/src/modules/NestedLevel/pages/level-3-3.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/src/modules/NestedLevel/pages/level-4-1.vue b/src/modules/NestedLevel/pages/level-4-1.vue new file mode 100755 index 0000000..9f85831 --- /dev/null +++ b/src/modules/NestedLevel/pages/level-4-1.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/src/modules/NestedLevel/pages/level-4-2.vue b/src/modules/NestedLevel/pages/level-4-2.vue new file mode 100755 index 0000000..753e566 --- /dev/null +++ b/src/modules/NestedLevel/pages/level-4-2.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/src/modules/NestedLevel/store/index.ts b/src/modules/NestedLevel/store/index.ts new file mode 100755 index 0000000..f412c2b --- /dev/null +++ b/src/modules/NestedLevel/store/index.ts @@ -0,0 +1,21 @@ +import { defineStore } from 'pinia' + +import { sleep } from '@/utils/request' +import * as NestedLevelAPI from '../api' + +export const useNestedLevelStore = defineStore('NestedLevel', { + state: () => { + return { + demoList: {} + } + }, + getters: { + }, + actions: { + async createProject (query) { + await sleep(200) + const res = await NestedLevelAPI.createProject(query) + return this.filterResponse(res) + } + } +}) diff --git a/src/router/frontend/constants.ts b/src/router/frontend/constants.ts index b2e4160..7e799d8 100644 --- a/src/router/frontend/constants.ts +++ b/src/router/frontend/constants.ts @@ -56,7 +56,12 @@ export const CacheSpaceKeys = { /** * 缓存空间 Key -> 成本核算管理-分析和报告 */ - costAnalysis: 'CacheSpaceKey_WorkPlatform_CostAnalysis' + costAnalysis: 'CacheSpaceKey_WorkPlatform_CostAnalysis', + /** + * 缓存空间 Key -> 多级菜单 + */ + nestedLevel: 'CacheSpaceKey_WorkPlatform_NestedLevel' + } diff --git a/src/router/frontend/index.ts b/src/router/frontend/index.ts index a8b2a2c..aa4f348 100644 --- a/src/router/frontend/index.ts +++ b/src/router/frontend/index.ts @@ -1,9 +1,11 @@ +import { CacheSpaceKeys } from './constants' + const Layout = () => import('@/components/Layout/index.vue') const LayoutWork = () => import('@/components/Layout/LayoutWork.vue') const LayoutWorkTabs = () => import('@/widgets/WorkTabs/index.vue') const LayoutView = () => import('@/components/Layout/LayoutView.vue') -import { CacheSpaceKeys } from './constants' +import { routesNested } from './nested' /** ------------------------- 工作台下的所有子页面 ------------------------- */ const _routesWorkPlatform: RouteRecordRaw = { @@ -511,9 +513,11 @@ const _routesWorkPlatform: RouteRecordRaw = { ] } ] - } + }, // ...... + routesNested + ] } diff --git a/src/router/frontend/nested.ts b/src/router/frontend/nested.ts new file mode 100644 index 0000000..d64fd53 --- /dev/null +++ b/src/router/frontend/nested.ts @@ -0,0 +1,134 @@ +const Layout = () => import('@/components/Layout/index.vue') +const LayoutWork = () => import('@/components/Layout/LayoutWork.vue') + +import { CacheSpaceKeys } from './constants' + +/** ------------------------- 多级菜单页面 ------------------------- */ + +export const routesNested = { + path: 'nested-level', + name: 'NestedLevelRoot', + component: LayoutWork, + redirect: { + name: 'NestedLevel11' + }, + children: [ + { + path: 'level-1-1', + name: 'NestedLevel11', + meta: { + title: '多级菜单 1-1', + cacheSpaceKey: CacheSpaceKeys.nestedLevel + }, + component: () => import('@/modules/NestedLevel/pages/level-1-1.vue') + }, + { + path: 'level-1-2', + name: 'NestedLevel12', + children: [ + { + path: '', + name: 'NestedLevel12', + meta: { + title: '多级菜单 1-2', + cacheSpaceKey: CacheSpaceKeys.nestedLevel + }, + component: () => import('@/modules/NestedLevel/pages/level-1-2.vue') + }, + { + path: 'level-2-1', + name: 'NestedLevel21', + meta: { + title: '多级菜单 2-1', + cacheSpaceKey: CacheSpaceKeys.nestedLevel + }, + component: () => import('@/modules/NestedLevel/pages/level-2-1.vue') + }, + { + path: 'level-2-2', + name: 'NestedLevel22', + children: [ + { + path: '', + name: 'NestedLevel22', + meta: { + title: '多级菜单 2-2', + cacheSpaceKey: CacheSpaceKeys.nestedLevel + }, + component: () => import('@/modules/NestedLevel/pages/level-2-2.vue') + }, + { + path: 'level-3-1', + name: 'NestedLevel31', + meta: { + title: '多级菜单 3-1', + cacheSpaceKey: CacheSpaceKeys.nestedLevel + }, + component: () => import('@/modules/NestedLevel/pages/level-3-1.vue') + }, + { + path: 'level-3-2', + name: 'NestedLevel32', + meta: { + title: '多级菜单 3-2', + cacheSpaceKey: CacheSpaceKeys.nestedLevel + }, + component: () => import('@/modules/NestedLevel/pages/level-3-2.vue') + }, + { + path: 'level-3-3', + name: 'NestedLevel33', + children: [ + { + path: '', + name: 'NestedLevel33', + meta: { + title: '多级菜单 3-3', + cacheSpaceKey: CacheSpaceKeys.nestedLevel + }, + component: () => import('@/modules/NestedLevel/pages/level-3-3.vue') + }, + { + path: 'level-4-1', + name: 'NestedLevel41', + meta: { + title: '多级菜单 4-1', + cacheSpaceKey: CacheSpaceKeys.nestedLevel + }, + component: () => import('@/modules/NestedLevel/pages/level-4-1.vue') + }, + { + path: 'level-4-2', + name: 'NestedLevel42', + meta: { + title: '多级菜单 4-2', + cacheSpaceKey: CacheSpaceKeys.nestedLevel + }, + component: () => import('@/modules/NestedLevel/pages/level-4-2.vue') + } + ] + } + ] + } + ] + }, + { + path: 'level-1-3', + name: 'NestedLevel13', + meta: { + title: '多级菜单 1-3', + cacheSpaceKey: CacheSpaceKeys.nestedLevel + }, + component: () => import('@/modules/NestedLevel/pages/level-1-3.vue') + }, + { + path: 'level-1-4', + name: 'NestedLevel14', + meta: { + title: '多级菜单 1-4', + cacheSpaceKey: CacheSpaceKeys.nestedLevel + }, + component: () => import('@/modules/NestedLevel/pages/level-1-4.vue') + } + ] +} diff --git a/src/widgets/WorkTabs/TabsBack.vue b/src/widgets/WorkTabs/TabsBack.vue index b2186fc..18744c5 100644 --- a/src/widgets/WorkTabs/TabsBack.vue +++ b/src/widgets/WorkTabs/TabsBack.vue @@ -1,20 +1,20 @@