补充错误路由重定向错误页

src/components/RayGlobalProvider/index.tsx

@@ -6,6 +6,7 @@ import {
   NConfigProvider,
   createDiscreteApi,
   darkTheme,
+  NGlobalStyle,
 } from 'naive-ui'
 import { useSetting } from '@/store'
 
@@ -24,9 +25,9 @@ const GlobalProvider = defineComponent({
     const { message, notification, dialog, loadingBar } = createDiscreteApi(
       ['message', 'dialog', 'notification', 'loadingBar'],
       {
-        configProviderProps: {
+        configProviderProps: computed(() => ({
           theme: modelThemeValue.value,
-        },
+        })),
       },
     )
 
@@ -50,6 +51,7 @@ const GlobalProvider = defineComponent({
           <NMessageProvider>
             <NDialogProvider>
               <NNotificationProvider>
+                <NGlobalStyle />
                 {this.$slots.default?.()}
               </NNotificationProvider>
             </NDialogProvider>

src/router/routes.ts

@@ -14,6 +14,11 @@ export const constantRoutes = [
     component: Layout,
     children: childrenRoutes,
   },
+  {
+    path: '/:catchAll(.*)',
+    name: 'error-page',
+    component: () => import('@/views/error/index'),
+  },
 ]
 
 /**

src/views/error/index.scss

@@ -0,0 +1,5 @@
+.error-page {
+  width: 100%;
+  height: 100vh;
+  @include flexCenter;
+}

src/views/error/index.tsx

@@ -0,0 +1,32 @@
+import './index.scss'
+import { NResult, NButton } from 'naive-ui'
+
+const ErrorPage = defineComponent({
+  name: 'ErrorPage',
+  setup() {
+    const router = useRouter()
+
+    const handleBack = () => {
+      router.push('/dashboard')
+    }
+
+    return {
+      handleBack,
+    }
+  },
+  render() {
+    return (
+      <div class="error-page">
+        <NResult status="500" title="小调皮你走错地方了">
+          {{
+            footer: () => (
+              <NButton onClick={this.handleBack.bind(this)}>返回首页</NButton>
+            ),
+          }}
+        </NResult>
+      </div>
+    )
+  },
+})
+
+export default ErrorPage

src/views/login/index.scss

@@ -3,11 +3,6 @@
   flex-direction: column;
   font-size: 36px;
 
-  &.login--dark {
-    background-color: #101014;
-    color: #ffffff;
-  }
-
   & .login-title {
     padding: 18px 0;
   }

src/views/login/index.tsx

@@ -35,10 +35,7 @@ const Login = defineComponent({
   },
   render() {
     return (
-      <div
-        class={['login', this.themeValue ? 'login--dark' : '']}
-        style={[`height: ${this.windowHeight}px`]}
-      >
+      <div class={['login']} style={[`height: ${this.windowHeight}px`]}>
         <NSpace>
           <NGradientText class="login-title" type="info">
             Ray Template