fix router

src/components/KUNGalgameTopBar.vue

@@ -30,11 +30,11 @@ interface topBar {
 
 // 顶部导航栏的项目（这里一定要加上 '/' 不然子路由会出问题！！！）
 const topBarItem: topBar[] = [
-  { index: 1, name: 'pool', router: '/pool' },
-  { index: 2, name: 'create', router: '/edit' },
-  { index: 3, name: 'technique', router: '/technique' },
-  { index: 4, name: 'about', router: '/kungalgame' },
-  { index: 5, name: 'return', router: '/' },
+  { index: 1, name: 'pool', router: '/pool/index' },
+  { index: 2, name: 'create', router: '/edit/index' },
+  { index: 3, name: 'technique', router: '/technique/index' },
+  { index: 4, name: 'about', router: '/kungalgame/index' },
+  { index: 5, name: 'return', router: '/kun' },
 ]
 
 // 初始进入页面 header 没有附加样式

src/layout/KUNGalgameAPP.vue

@@ -35,5 +35,6 @@ import { currBackground } from '@/hooks/useBackgroundPicture'
   background-size: cover;
   background-attachment: fixed;
   background-color: var(--kungalgame-white);
+  min-width: 900px;
 }
 </style>

src/router/modules/anti-moe.ts

@@ -1,16 +0,0 @@
-import { type RouteRecordRaw } from 'vue-router'
-
-const nonMoe: RouteRecordRaw[] = [
-  // KUNGalgame 不萌萌页
-  {
-    name: 'NonMoe',
-    path: '/non-moe',
-    component: () => import('@/views/non-moe/NonMoe.vue'),
-    meta: {
-      permission: 'kungalgamer',
-      title: '不萌萌',
-    },
-  },
-]
-
-export default nonMoe

src/router/modules/balance.ts

@@ -1,15 +1,24 @@
 import { type RouteRecordRaw } from 'vue-router'
 
+const Layout = () => import('@/layout/KUNGalgameAPP.vue')
+
 const balance: RouteRecordRaw[] = [
   // KUNGalgame 收支公示
   {
-    name: 'Balance',
     path: '/balance',
-    component: () => import('@/views/balance/Balance.vue'),
-    meta: {
-      permission: 'kungalgamer',
-      title: '收支公示',
-    },
+    component: Layout,
+    redirect: '/balance/index',
+    children: [
+      {
+        name: 'Balance',
+        path: 'index',
+        component: () => import('@/views/balance/Balance.vue'),
+        meta: {
+          permission: 'kungalgamer',
+          title: '收支公示',
+        },
+      },
+    ],
   },
 ]
 

src/router/modules/edit.ts

@@ -1,15 +1,24 @@
 import { type RouteRecordRaw } from 'vue-router'
 
+const Layout = () => import('@/layout/KUNGalgameAPP.vue')
+
 const edit: RouteRecordRaw[] = [
   // KUNGalgame 编辑页面
   {
-    name: 'Edit',
     path: '/edit',
-    component: () => import('@/views/edit/Edit.vue'),
-    meta: {
-      permission: 'kungalgamer',
-      title: '编辑',
-    },
+    component: Layout,
+    redirect: '/edit/index',
+    children: [
+      {
+        name: 'Edit',
+        path: 'index',
+        component: () => import('@/views/edit/Edit.vue'),
+        meta: {
+          permission: 'kungalgamer',
+          title: '编辑',
+        },
+      },
+    ],
   },
 ]
 

src/router/modules/home.ts

@@ -11,7 +11,7 @@ const index: RouteRecordRaw[] = [
     children: [
       {
         name: 'index',
-        path: '/kun',
+        path: 'kun',
         component: () => import('@/views/Home/KUNGalgameMainPage.vue'),
         meta: {
           permission: 'kungalgamer',

src/router/modules/kungalgame.ts

@@ -1,5 +1,7 @@
 import { type RouteRecordRaw } from 'vue-router'
 
+const Layout = () => import('@/layout/KUNGalgameAPP.vue')
+
 const kungalgame: RouteRecordRaw[] = [
   // KUNGalgame 关于我们页
   {

src/router/modules/kungalgamer.ts

@@ -1,5 +1,7 @@
 import { type RouteRecordRaw } from 'vue-router'
 
+const Layout = () => import('@/layout/KUNGalgameAPP.vue')
+
 const kungalgamer: RouteRecordRaw[] = [
   // KUNGalgame 用户页
   {

src/router/modules/non-moe.ts

@@ -0,0 +1,25 @@
+import { type RouteRecordRaw } from 'vue-router'
+
+const Layout = () => import('@/layout/KUNGalgameAPP.vue')
+
+const nonMoe: RouteRecordRaw[] = [
+  // KUNGalgame 不萌萌页
+  {
+    path: '/non-moe',
+    component: Layout,
+    redirect: '/non-moe/index',
+    children: [
+      {
+        name: 'NonMoe',
+        path: 'index',
+        component: () => import('@/views/non-moe/NonMoe.vue'),
+        meta: {
+          permission: 'kungalgamer',
+          title: '不萌萌',
+        },
+      },
+    ],
+  },
+]
+
+export default nonMoe

src/router/modules/pool.ts

@@ -1,5 +1,7 @@
 import { type RouteRecordRaw } from 'vue-router'
 
+const Layout = () => import('@/layout/KUNGalgameAPP.vue')
+
 const pool: RouteRecordRaw[] = [
   // KUNGalgame 帖子池页
   {

src/router/modules/ranking.ts

@@ -1,5 +1,7 @@
 import { type RouteRecordRaw } from 'vue-router'
 
+const Layout = () => import('@/layout/KUNGalgameAPP.vue')
+
 const ranking: RouteRecordRaw[] = [
   // KUNGalgame 排行榜
   {

src/router/modules/regulations.ts

@@ -1,5 +1,7 @@
 import { type RouteRecordRaw } from 'vue-router'
 
+const Layout = () => import('@/layout/KUNGalgameAPP.vue')
+
 const bylaw: RouteRecordRaw[] = [
   // KUNGalgame 执行条例
   {

src/router/modules/technique.ts

@@ -1,5 +1,7 @@
 import { type RouteRecordRaw } from 'vue-router'
 
+const Layout = () => import('@/layout/KUNGalgameAPP.vue')
+
 const technique: RouteRecordRaw[] = [
   // KUNGalgame 技术交流页
   {

src/router/modules/thanks-list.ts

@@ -1,5 +1,7 @@
 import { type RouteRecordRaw } from 'vue-router'
 
+const Layout = () => import('@/layout/KUNGalgameAPP.vue')
+
 const thanksList: RouteRecordRaw[] = [
   // KUNGalgame 感谢名单
   {

src/router/modules/topic.ts

@@ -1,5 +1,7 @@
 import { type RouteRecordRaw } from 'vue-router'
 
+const Layout = () => import('@/layout/KUNGalgameAPP.vue')
+
 const topic: RouteRecordRaw[] = [
   // KUNgalgame 帖子详情页
   {

src/router/modules/update-log.ts

@@ -1,5 +1,7 @@
 import { type RouteRecordRaw } from 'vue-router'
 
+const Layout = () => import('@/layout/KUNGalgameAPP.vue')
+
 const updateLog: RouteRecordRaw[] = [
   // KUNGalgame 更新日志页
   {

src/views/Home/content/aside/aside-item.ts

@@ -9,12 +9,12 @@ interface aside {
 
 // 顶部导航栏的项目
 const asideItem: aside[] = [
-  { index: 1, name: 'update', router: '/update-log' },
-  { index: 2, name: 'balance', router: '/balance' },
-  { index: 3, name: 'ranking', router: '/ranking' },
-  { index: 4, name: 'bylaw', router: '/bylaw' },
-  { index: 5, name: 'contact', router: '/contact' },
-  { index: 6, name: 'nonMoe', router: '/non-moe' },
+  { index: 1, name: 'update', router: '/update-log/index' },
+  { index: 2, name: 'balance', router: '/balance/index' },
+  { index: 3, name: 'ranking', router: '/ranking/index' },
+  { index: 4, name: 'bylaw', router: '/bylaw/index' },
+  { index: 5, name: 'contact', router: '/contact/index' },
+  { index: 6, name: 'nonMoe', router: '/non-moe/index' },
 ]
 
 export default asideItem

src/views/Home/content/aside/components/AsideActive.vue

@@ -13,7 +13,7 @@ const props = defineProps(['isActive'])
     <!-- 发布新文章 -->
     <div class="new-article">
       <!-- 发布新文章的按钮 -->
-      <router-link to="/edit">
+      <router-link to="/edit/index">
         <button class="btn-new-article">
           {{ $t('mainPage.asideActive.create') }}
         </button>

src/views/balance/Balance.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
-import { currBackground } from '@/hooks/useBackgroundPicture'
 import Form from './components/Form.vue'
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 // 导入临时数据
@@ -8,7 +7,7 @@ import { calculateTotalAmount } from './log'
 </script>
 
 <template>
-  <div class="root" :style="{ backgroundImage: currBackground }">
+  <div class="root">
     <!-- 头部 -->
     <KUNGalgameTopBar />
     <!-- 文章部分 -->
@@ -58,12 +57,8 @@ import { calculateTotalAmount } from './log'
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
   min-width: 1100px;
   min-height: 600px;
-  background-color: var(--kungalgame-white);
 }
 /* 文章部分 */
 .article {

src/views/bylaw/Bylaw.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
-// 导入背景图片
-import { currBackground } from '@/hooks/useBackgroundPicture'
 </script>
 
 <template>
-  <div class="root" :style="{ backgroundImage: currBackground }">
+  <div class="root">
     <!-- 头部 -->
     <KUNGalgameTopBar />
     <!-- 总容器 -->
@@ -95,11 +93,7 @@ import { currBackground } from '@/hooks/useBackgroundPicture'
   height: 1500px;
   display: flex;
   flex-direction: column;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
   min-width: 800px;
-  background-color: var(--kungalgame-white);
 }
 /* 总容器 */
 .container {

src/views/edit/Edit.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
 import WangEditor from '@/components/WangEditor.vue'
-// 导入背景图片
-import { currBackground } from '@/hooks/useBackgroundPicture'
 </script>
 
 <template>
-  <div class="root" :style="{ backgroundImage: currBackground }">
+  <div class="root">
     <!-- 头部 -->
     <KUNGalgameTopBar />
     <!-- 内容区容器 -->
@@ -88,11 +86,6 @@ import { currBackground } from '@/hooks/useBackgroundPicture'
   min-width: 900px;
   display: flex;
   flex-direction: column;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-attachment: fixed;
-  background-size: cover;
-  background-color: var(--kungalgame-white);
 }
 /* 内容部分的总容器 */
 .container {

src/views/kungalgame/KUNGalgame.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
-// 导入背景图片
-import { currBackground } from '@/hooks/useBackgroundPicture'
 // 导入 Footer
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 // 导入 Aside
@@ -9,7 +7,7 @@ import Aside from './components/Aside.vue'
 </script>
 
 <template>
-  <div class="root" :style="{ backgroundImage: currBackground }">
+  <div class="root">
     <!-- 头部 -->
     <KUNGalgameTopBar />
     <!-- 内容区容器 -->
@@ -186,11 +184,7 @@ import Aside from './components/Aside.vue'
 
 <style lang="scss" scoped>
 .root {
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
   height: 1500px;
-  background-color: var(--kungalgame-white);
 }
 /* 内容区容器 */
 .content-container {

src/views/kungalgamer/KUNGalgamer.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
-// 导入背景图片
-import { currBackground } from '@/hooks/useBackgroundPicture'
 // 导入左侧交互部分
 import NavBar from './components/NavBar.vue'
 // 导入头部
@@ -11,7 +9,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 </script>
 
 <template>
-  <div class="root" :style="{ backgroundImage: currBackground }">
+  <div class="root">
     <KUNGalgameTopBar />
     <!-- 信息区域容器 -->
     <div class="container">
@@ -35,11 +33,6 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   min-height: 800px;
   display: flex;
   flex-direction: column;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-attachment: fixed;
-  background-size: cover;
-  background-color: var(--kungalgame-white);
 }
 /* 页面头部 */
 .container {

src/views/non-moe/NonMoe.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
-import { currBackground } from '@/hooks/useBackgroundPicture'
 import Log from './components/Log.vue'
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 </script>
 
 <template>
-  <div class="root" :style="{ backgroundImage: currBackground }">
+  <div class="root">
     <!-- 头部 -->
     <KUNGalgameTopBar />
     <!-- 内容区容器 -->
@@ -36,12 +35,8 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
   min-width: 800px;
   min-height: 750px;
-  background-color: var(--kungalgame-white);
 }
 /* 根容器 */
 .container {

src/views/pool/Pool.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
-// 导入背景图片
-import { currBackground } from '@/hooks/useBackgroundPicture'
 import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue'
 import Tags from './components/Tags.vue'
 import Line from './components/Line.vue'
@@ -56,7 +54,7 @@ const list = [
 
 <template>
   <div class="content-wrapper">
-    <div class="visual-wrapper" :style="{ backgroundImage: currBackground }">
+    <div class="visual-wrapper">
       <!-- 头部 -->
       <KUNGalgameTopBar />
       <!-- 帖子池容器 -->
@@ -81,11 +79,7 @@ const list = [
   height: 1500px;
   display: flex;
   flex-direction: column;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
   min-width: 700px;
-  background-color: var(--kungalgame-white);
 }
 /* 帖子池容器 */
 .pool-container {

src/views/ranking/Ranking.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
-// 导入背景图片
-import { currBackground } from '@/hooks/useBackgroundPicture'
 import Form from './components/Form.vue'
 import Temp from './components/Temp.vue'
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
@@ -9,7 +7,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 
 <template>
   <!-- 根容器 -->
-  <div class="root" :style="{ backgroundImage: currBackground }">
+  <div class="root">
     <!-- 头部 -->
     <KUNGalgameTopBar />
     <!-- 内容区 -->
@@ -27,12 +25,8 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
   min-width: 1000px;
   min-height: 1000px;
-  background-color: var(--kungalgame-white);
 }
 /* 内容区 */
 .article {

src/views/technique/Technique.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
-// 导入背景图片
-import { currBackground } from '@/hooks/useBackgroundPicture'
 import SingleTopic from './components/SingleTopic.vue'
 import Pagination from './components/Pagination.vue'
 import Aside from './components/Aside.vue'
 </script>
 
 <template>
-  <div class="root" :style="{ backgroundImage: currBackground }">
+  <div class="root">
     <!-- 头部 -->
     <KUNGalgameTopBar />
     <!-- 内容区 -->
@@ -42,11 +40,7 @@ import Aside from './components/Aside.vue'
   height: 1500px;
   display: flex;
   flex-direction: column;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
   min-width: 800px;
-  background-color: var(--kungalgame-white);
 }
 /* 内容区 */
 .content {

src/views/thanks-list/ThanksList.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
-// 导入背景图片
-import { currBackground } from '@/hooks/useBackgroundPicture'
 // 导入 Footer
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 </script>
 
 <template>
   <!-- 根容器 -->
-  <div class="root" :style="{ backgroundImage: currBackground }">
+  <div class="root">
     <!-- 头部 -->
     <KUNGalgameTopBar />
     <!-- 内容区容器 -->
@@ -94,11 +92,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 .root {
   display: flex;
   flex-direction: column;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
   height: 1500px;
-  background-color: var(--kungalgame-white);
 }
 .container {
   /* 固定宽高 */

src/views/topic/KUNGalgameTopicPage.vue

@@ -5,12 +5,10 @@
 import KUNGalgameTopBar from '../../components/KUNGalgameTopBar.vue'
 import KUNGalgameTopicAside from './aside/KUNGalgameTopicAside.vue'
 import KUNGalgameTopicContent from './content/KUNGalgameTopicContent.vue'
-// 导入背景图片
-import { currBackground } from '@/hooks/useBackgroundPicture'
 </script>
 <template>
   <!-- 总容器 -->
-  <div class="main-wrapper" :style="{ backgroundImage: currBackground }">
+  <div class="main-wrapper">
     <KUNGalgameTopBar :isMainPage="false" :isTopicPage="true" />
     <!-- 下面帖子详情区的容器 -->
     <div class="topic-wrapper">
@@ -29,11 +27,6 @@ import { currBackground } from '@/hooks/useBackgroundPicture'
   flex-shrink: 0;
   flex-direction: column;
   min-width: 1040px;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-attachment: fixed;
-  background-size: cover;
-  background-color: var(--kungalgame-white);
 }
 /* 下面帖子详情区的容器 */
 .topic-wrapper {

src/views/update-log/UpdateLog.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
-// 导入背景图片
-import { currBackground } from '@/hooks/useBackgroundPicture'
 import Next from './components/Next.vue'
 import History from './components/History.vue'
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 </script>
 
 <template>
-  <div class="root" :style="{ backgroundImage: currBackground }">
+  <div class="root">
     <!-- 头部 -->
     <KUNGalgameTopBar />
     <!-- 内容区容器 -->
@@ -40,12 +38,8 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
   min-width: 1000px;
   min-height: 650px;
-  background-color: var(--kungalgame-white);
 }
 /* 内容区容器 */
 .container {