feat: add nested routes

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)

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 = ''

src/components/Navigation/Side/SideLogo.vue

@@ -5,11 +5,11 @@
     <router-link
       :to="`/`"
     >
-      <img
+      <!-- <img
         class="side-logo-img"
         src="@/assets/brand/logo-naive.svg?url"
         alt="商标"
-      >
+      > -->
       <h1
         class="side-logo-title c-#303133 dark:c-#fff"
         :class="{

src/modules/HomeFront/components/QuickStart.vue

@@ -32,11 +32,13 @@
 <script lang="ts" setup>
 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<Array<CardConfig>>([
     routeName: 'CostBudgetManageRoot'
   },
   {
-    title: '系统管理',
-    icon: IconReportMoney,
+    title: '组件示例',
+    icon: IconComponents,
     routeName: 'CostBudgetManageRoot'
   },
   {
-    title: '基础组件',
-    icon: IconReportMoney,
-    routeName: 'CostBudgetManageRoot'
+    title: '多级菜单',
+    icon: IconMenuOutlined,
+    routeName: 'NestedLevelRoot'
   }
 ])
 

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
+```

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
+  })
+}

src/modules/NestedLevel/components/TestComponent.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="p-16px">
+    <h1>{{ pageTitle }}</h1>
+    <n-input v-model:value="inputValue" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+/**
+ * TestComponent
+ */
+defineOptions({
+  name: 'TestComponent'
+})
+
+const route = useRoute()
+const router = useRouter()
+
+const pageTitle = ref('TestComponent')
+
+const inputValue = ref(pageTitle.value)
+
+
+</script>
+
+<style lang="scss" scoped>
+</style>

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'
+}

src/modules/NestedLevel/pages/level-1-1.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="p-16px">
+    <h1>{{ pageTitle }}</h1>
+    <n-input v-model:value="inputValue" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+/**
+ * NestedLevel1-1 多级菜单 一级菜单 1-1
+ */
+defineOptions({
+  name: 'NestedLevel11'
+})
+
+const route = useRoute()
+
+const router = useRouter()
+
+const pageTitle = ref('NestedLevel1-1 多级菜单 一级菜单 1-1')
+
+const inputValue = ref(pageTitle.value)
+
+
+</script>
+
+<style lang="scss" scoped>
+</style>

src/modules/NestedLevel/pages/level-1-2.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="p-16px">
+    <h1>{{ pageTitle }}</h1>
+    <n-input v-model:value="inputValue" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+/**
+ * NestedLevel1-2 多级菜单 一级菜单 1-2 （目录层级）
+ */
+defineOptions({
+  name: 'NestedLevel12'
+})
+
+const route = useRoute()
+
+const router = useRouter()
+
+const pageTitle = ref('NestedLevel1-2 多级菜单 一级菜单 1-2 （目录层级）')
+
+const inputValue = ref(pageTitle.value)
+
+
+</script>
+
+<style lang="scss" scoped>
+</style>

src/modules/NestedLevel/pages/level-1-3.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="p-16px">
+    <h1>{{ pageTitle }}</h1>
+    <n-input v-model:value="inputValue" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+/**
+ * NestedLevel1-3 多级菜单 一级菜单 1-3
+ */
+defineOptions({
+  name: 'NestedLevel13'
+})
+
+const route = useRoute()
+
+const router = useRouter()
+
+const pageTitle = ref('NestedLevel1-3 多级菜单 一级菜单 1-3')
+
+const inputValue = ref(pageTitle.value)
+
+
+</script>
+
+<style lang="scss" scoped>
+</style>

src/modules/NestedLevel/pages/level-1-4.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="p-16px">
+    <h1>{{ pageTitle }}</h1>
+    <n-input v-model:value="inputValue" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+/**
+ * NestedLevel1-4 多级菜单 一级菜单 1-4
+ */
+defineOptions({
+  name: 'NestedLevel14'
+})
+
+const route = useRoute()
+
+const router = useRouter()
+
+const pageTitle = ref('NestedLevel1-4 多级菜单 一级菜单 1-4')
+
+const inputValue = ref(pageTitle.value)
+
+
+</script>
+
+<style lang="scss" scoped>
+</style>

src/modules/NestedLevel/pages/level-2-1.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="p-16px">
+    <h1>{{ pageTitle }}</h1>
+    <n-input v-model:value="inputValue" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+/**
+ * NestedLevel2-1 多级菜单 二级菜单 2-1
+ */
+defineOptions({
+  name: 'NestedLevel21'
+})
+
+const route = useRoute()
+
+const router = useRouter()
+
+const pageTitle = ref('NestedLevel2-1 多级菜单 二级菜单 2-1')
+
+const inputValue = ref(pageTitle.value)
+
+
+</script>
+
+<style lang="scss" scoped>
+</style>

src/modules/NestedLevel/pages/level-2-2.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="p-16px">
+    <h1>{{ pageTitle }}</h1>
+    <n-input v-model:value="inputValue" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+/**
+ * NestedLevel2-2 多级菜单 二级菜单 2-2 （目录层级）
+ */
+defineOptions({
+  name: 'NestedLevel22'
+})
+
+const route = useRoute()
+
+const router = useRouter()
+
+const pageTitle = ref('NestedLevel2-2 多级菜单 二级菜单 2-2 （目录层级）')
+
+const inputValue = ref(pageTitle.value)
+
+
+</script>
+
+<style lang="scss" scoped>
+</style>

src/modules/NestedLevel/pages/level-3-1.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="p-16px">
+    <h1>{{ pageTitle }}</h1>
+    <n-input v-model:value="inputValue" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+/**
+ * NestedLevel3-1 多级菜单 三级菜单 3-1
+ */
+defineOptions({
+  name: 'NestedLevel31'
+})
+
+const route = useRoute()
+
+const router = useRouter()
+
+const pageTitle = ref('NestedLevel3-1 多级菜单 三级菜单 3-1')
+
+const inputValue = ref(pageTitle.value)
+
+
+</script>
+
+<style lang="scss" scoped>
+</style>