xto-fronted 0.4.42 → 0.4.44

package/src/components/Layout/index.vue

@@ -1,189 +1,189 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useAppStore } from '@/stores/app'
-import { useMenuStore } from '@/stores/menu'
-import Sidebar from './Sidebar.vue'
-import Header from './Header.vue'
-import TopMenu from './TopMenu.vue'
-import MixTopMenu from './MixTopMenu.vue'
-
-const appStore = useAppStore()
-const menuStore = useMenuStore()
-
-const sidebarWidth = computed(() =>
-  appStore.isCollapsed ? '64px' : '210px'
-)
-
-// 布局模式
-const layoutMode = computed(() => appStore.layout)
-
-// 是否显示混合模式（mix模式）
-const isMixMode = computed(() => layoutMode.value === 'mix')
-
-// 左侧菜单数据
-// sidebar模式：显示全部菜单
-// mix模式：显示当前选中一级菜单的子菜单
-const sidebarMenuList = computed(() => {
-  if (layoutMode.value === 'sidebar') {
-    return menuStore.menuList
-  } else if (layoutMode.value === 'mix') {
-    // mix模式下显示当前选中一级菜单的子菜单
-    return appStore.mixSubMenus
-  }
-  return []
-})
-
-// mix模式下是否显示左侧菜单（有子菜单时才显示）
-const showMixSidebar = computed(() => {
-  if (!isMixMode.value) return false
-  return sidebarMenuList.value.length > 0
-})
-</script>
-
-<template>
-  <!-- sidebar模式：左侧菜单 + 顶部Header + 主内容 -->
-  <div v-if="layoutMode === 'sidebar'" class="layout layout--sidebar">
-    <aside class="layout__aside" :style="{ width: sidebarWidth }">
-      <Sidebar :menu-list="sidebarMenuList" :show-logo="true" :show-user="true" />
-    </aside>
-    <div class="layout__main">
-      <header class="layout__header">
-        <Header />
-      </header>
-      <main class="layout__content">
-        <router-view />
-      </main>
-    </div>
-  </div>
-
-  <!-- top模式：顶部菜单 + 主内容 -->
-  <div v-if="layoutMode === 'top'" class="layout layout--top">
-    <div class="layout__top-menu">
-      <TopMenu />
-    </div>
-    <div class="layout__main">
-      <main class="layout__content">
-        <router-view />
-      </main>
-    </div>
-  </div>
-
-  <!-- mix模式：顶部一级菜单 + (左侧子菜单 + 主内容) -->
-  <div v-if="layoutMode === 'mix'" class="layout layout--mix">
-    <!-- 顶部一级菜单 -->
-    <div class="layout__mix-top-menu">
-      <MixTopMenu />
-    </div>
-    <!-- 下方：左侧子菜单 + 主内容 -->
-    <div class="layout__mix-body">
-      <aside v-if="showMixSidebar" class="layout__aside" :style="{ width: sidebarWidth }">
-        <Sidebar :menu-list="sidebarMenuList" :show-logo="false" :show-user="false" />
-      </aside>
-      <main class="layout__content">
-        <router-view />
-      </main>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.layout {
-  display: flex;
-  width: 100%;
-  height: 100%;
-
-  // 左侧菜单模式
-  &--sidebar {
-    flex-direction: row;
-
-    .layout__aside {
-      height: 100%;
-    }
-
-    .layout__main {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-  }
-
-  // 顶部菜单模式
-  &--top {
-    flex-direction: column;
-
-    .layout__main {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      height: calc(100% - 50px);
-    }
-
-    .layout__content {
-      flex: 1;
-    }
-  }
-
-  // 混合菜单模式
-  &--mix {
-    flex-direction: column;
-
-    .layout__mix-top-menu {
-      width: 100%;
-      height: 50px;
-      background-color: var(--bg-color);
-      border-bottom: 1px solid var(--color-border-lighter);
-      flex-shrink: 0;
-    }
-
-    .layout__mix-body {
-      flex: 1;
-      display: flex;
-      flex-direction: row;
-      height: calc(100% - 50px);
-    }
-  }
-
-  &__aside {
-    transition: width 0.3s;
-    overflow: hidden;
-    flex-shrink: 0;
-    height: 100%;
-  }
-
-  &__top-menu {
-    width: 100%;
-    height: 50px;
-    background-color: var(--bg-color);
-    border-bottom: 1px solid var(--color-border-lighter);
-    flex-shrink: 0;
-  }
-
-  &__mix-top-menu {
-    width: 100%;
-    height: 50px;
-    flex-shrink: 0;
-  }
-
-  &__main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    height: 100%;
-  }
-
-  &__header {
-    height: 50px;
-    background-color: var(--bg-color);
-    border-bottom: 1px solid var(--color-border-lighter);
-    flex-shrink: 0;
-  }
-
-  &__content {
-    flex: 1;
-    overflow: auto;
-    background-color: var(--bg-color-page);
-  }
-}
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useAppStore } from '@/stores/app'
+import { useMenuStore } from '@/stores/menu'
+import Sidebar from './Sidebar.vue'
+import Header from './Header.vue'
+import TopMenu from './TopMenu.vue'
+import MixTopMenu from './MixTopMenu.vue'
+
+const appStore = useAppStore()
+const menuStore = useMenuStore()
+
+const sidebarWidth = computed(() =>
+  appStore.isCollapsed ? '64px' : '210px'
+)
+
+// 布局模式
+const layoutMode = computed(() => appStore.layout)
+
+// 是否显示混合模式（mix模式）
+const isMixMode = computed(() => layoutMode.value === 'mix')
+
+// 左侧菜单数据
+// sidebar模式：显示全部菜单
+// mix模式：显示当前选中一级菜单的子菜单
+const sidebarMenuList = computed(() => {
+  if (layoutMode.value === 'sidebar') {
+    return menuStore.menuList
+  } else if (layoutMode.value === 'mix') {
+    // mix模式下显示当前选中一级菜单的子菜单
+    return appStore.mixSubMenus
+  }
+  return []
+})
+
+// mix模式下是否显示左侧菜单（有子菜单时才显示）
+const showMixSidebar = computed(() => {
+  if (!isMixMode.value) return false
+  return sidebarMenuList.value.length > 0
+})
+</script>
+
+<template>
+  <!-- sidebar模式：左侧菜单 + 顶部Header + 主内容 -->
+  <div v-if="layoutMode === 'sidebar'" class="layout layout--sidebar">
+    <aside class="layout__aside" :style="{ width: sidebarWidth }">
+      <Sidebar :menu-list="sidebarMenuList" :show-logo="true" :show-user="true" />
+    </aside>
+    <div class="layout__main">
+      <header class="layout__header">
+        <Header />
+      </header>
+      <main class="layout__content">
+        <router-view />
+      </main>
+    </div>
+  </div>
+
+  <!-- top模式：顶部菜单 + 主内容 -->
+  <div v-if="layoutMode === 'top'" class="layout layout--top">
+    <div class="layout__top-menu">
+      <TopMenu />
+    </div>
+    <div class="layout__main">
+      <main class="layout__content">
+        <router-view />
+      </main>
+    </div>
+  </div>
+
+  <!-- mix模式：顶部一级菜单 + (左侧子菜单 + 主内容) -->
+  <div v-if="layoutMode === 'mix'" class="layout layout--mix">
+    <!-- 顶部一级菜单 -->
+    <div class="layout__mix-top-menu">
+      <MixTopMenu />
+    </div>
+    <!-- 下方：左侧子菜单 + 主内容 -->
+    <div class="layout__mix-body">
+      <aside v-if="showMixSidebar" class="layout__aside" :style="{ width: sidebarWidth }">
+        <Sidebar :menu-list="sidebarMenuList" :show-logo="false" :show-user="false" />
+      </aside>
+      <main class="layout__content">
+        <router-view />
+      </main>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.layout {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  // 左侧菜单模式
+  &--sidebar {
+    flex-direction: row;
+
+    .layout__aside {
+      height: 100%;
+    }
+
+    .layout__main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+  }
+
+  // 顶部菜单模式
+  &--top {
+    flex-direction: column;
+
+    .layout__main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      height: calc(100% - 50px);
+    }
+
+    .layout__content {
+      flex: 1;
+    }
+  }
+
+  // 混合菜单模式
+  &--mix {
+    flex-direction: column;
+
+    .layout__mix-top-menu {
+      width: 100%;
+      height: 50px;
+      background-color: var(--bg-color);
+      border-bottom: 1px solid var(--color-border-lighter);
+      flex-shrink: 0;
+    }
+
+    .layout__mix-body {
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      height: calc(100% - 50px);
+    }
+  }
+
+  &__aside {
+    transition: width 0.3s;
+    overflow: hidden;
+    flex-shrink: 0;
+    height: 100%;
+  }
+
+  &__top-menu {
+    width: 100%;
+    height: 50px;
+    background-color: var(--bg-color);
+    border-bottom: 1px solid var(--color-border-lighter);
+    flex-shrink: 0;
+  }
+
+  &__mix-top-menu {
+    width: 100%;
+    height: 50px;
+    flex-shrink: 0;
+  }
+
+  &__main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+  }
+
+  &__header {
+    height: 50px;
+    background-color: var(--bg-color);
+    border-bottom: 1px solid var(--color-border-lighter);
+    flex-shrink: 0;
+  }
+
+  &__content {
+    flex: 1;
+    overflow: auto;
+    background-color: var(--bg-color-page);
+  }
+}
 </style>

package/src/router/dynamicRoutes.ts

@@ -4,7 +4,7 @@
 
 import type { RouteRecordRaw } from 'vue-router'
 
-// 布局路由（包含默认子路由）
+// 布局路由（包含默认子路由和 catch-all 404）
 export const layoutRoute: RouteRecordRaw = {
   path: '/',
   name: 'Layout',
@@ -51,6 +51,16 @@ export const layoutRoute: RouteRecordRaw = {
         icon: 'menu',
         keepAlive: true
       }
+    },
+    // catch-all 路由：让 404 在 Layout 内部渲染，保持左侧菜单显示
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'CatchAll',
+      component: () => import('@/views/error/404.vue'),
+      meta: {
+        title: '404',
+        hidden: true
+      }
     }
   ]
 }

package/src/router/index.ts

@@ -3,7 +3,7 @@
  */
 
 import { createRouter, createWebHistory } from 'vue-router'
-import { staticRoutes, errorRoute } from './staticRoutes'
+import { staticRoutes } from './staticRoutes'
 import { layoutRoute } from './dynamicRoutes'
 import { hasToken } from '@/utils/auth'
 import { getAppId } from '@/utils/config'
@@ -14,12 +14,12 @@ import { mockMenuData } from './dynamicRoutes'
 
 const router = createRouter({
   history: createWebHistory(),
-  routes: [...staticRoutes, layoutRoute, errorRoute],
+  routes: [...staticRoutes, layoutRoute],
   scrollBehavior: () => ({ left: 0, top: 0 })
 })
 
 // 白名单路由
-const whiteList = ['/login', '/404', '/403']
+const whiteList = ['/login']
 
 // 路由守卫
 router.beforeEach(async (to, _from, next) => {
@@ -72,7 +72,7 @@ router.beforeEach(async (to, _from, next) => {
 export function resetRouter() {
   const newRouter = createRouter({
     history: createWebHistory(),
-    routes: [...staticRoutes, layoutRoute, errorRoute]
+    routes: [...staticRoutes, layoutRoute]
   })
   ;(router as any).matcher = (newRouter as any).matcher
 }

package/src/router/layoutRoute.ts

@@ -22,12 +22,22 @@ export function createLayoutRoute(
 ): RouteRecordRaw {
   const indexPath = options.indexPath || '/dashboard'
 
+  // 添加 catch-all 路由，让404在Layout内部渲染，保持左侧菜单显示
+  const catchAllRoute: RouteRecordRaw = {
+    path: '/:pathMatch(.*)*',
+    name: 'CatchAll',
+    component: () => import('@/views/error/404.vue'),
+    meta: {
+      title: '404'
+    }
+  }
+
   return {
     path: '/',
     name: 'Layout',
     component: Layout,
     redirect: indexPath,
-    children
+    children: [...children, catchAllRoute]
   }
 }
 

package/src/router/staticRoutes.ts

@@ -1,43 +1,19 @@
-/**
- * 静态路由
- */
-
-import type { RouteRecordRaw } from 'vue-router'
-
-export const staticRoutes: RouteRecordRaw[] = [
-  {
-    path: '/login',
-    name: 'Login',
-    component: () => import('@/views/login/index.vue'),
-    meta: {
-      title: '登录',
-      hidden: true
-    }
-  },
-  {
-    path: '/404',
-    name: 'NotFound',
-    component: () => import('@/views/error/404.vue'),
-    meta: {
-      title: '404',
-      hidden: true
-    }
-  },
-  {
-    path: '/403',
-    name: 'Forbidden',
-    component: () => import('@/views/error/403.vue'),
-    meta: {
-      title: '403',
-      hidden: true
-    }
-  }
-]
-
-export const errorRoute: RouteRecordRaw = {
-  path: '/:pathMatch(.*)*',
-  redirect: '/404',
-  meta: {
-    hidden: true
-  }
-}
+/**
+ * 静态路由
+ */
+
+import type { RouteRecordRaw } from 'vue-router'
+
+export const staticRoutes: RouteRecordRaw[] = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/login/index.vue'),
+    meta: {
+      title: '登录',
+      hidden: true
+    }
+  }
+]
+
+// 注意：404 和 403 路由已在 layoutRoute.ts 的 catch-all 中处理，确保在 Layout 内部渲染

package/src/views/error/403.vue

@@ -23,7 +23,7 @@ const goBack = () => {
 <style lang="scss" scoped>
 .error-page {
   width: 100%;
-  height: 100vh;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;

package/src/views/error/404.vue

@@ -23,7 +23,7 @@ const goBack = () => {
 <style lang="scss" scoped>
 .error-page {
   width: 100%;
-  height: 100vh;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;