Merge branch 'main' into release/gh-page

README.md

@@ -15,7 +15,7 @@ A vue admin template powered by vite + typescript + vue3 + vue-router + pinia +
 - :heavy_check_mark: System control.
 - :heavy_check_mark: Api repo management.
 - :heavy_check_mark: Login page.
-- :construction: 404 page.
+- :heavy_check_mark: 404 page.
 - :heavy_check_mark: Tags view navigation.
 - :heavy_check_mark: Side menu navigation.
 - :heavy_check_mark: Internationalization.

src/layouts/default/AppMain.vue

@@ -33,5 +33,6 @@ const key = computed(() => route.path)
 <style lang="scss" scoped>
 .app-main {
   height: var(--app-main-height);
+  background-color: #f2f6fc;
 }
 </style>

src/permission.ts

@@ -12,6 +12,11 @@ export const initPermissionGuard = (router: Router) => {
     // start progress bar
     tricklingProgress.start()
 
+    if (!router.hasRoute(to.name || '')) {
+      next('/404')
+      return
+    }
+
     const UserStore = useUserStore()
     const PermissionStore = usePermissionStore()
 

src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import { constantRoutes } from './staticRoutes'
 
 const router = createRouter({
+  strict: true,
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: constantRoutes
 })

src/router/staticRoutes/index.ts

@@ -10,6 +10,7 @@ export const constantRoutes: IRouteRecord[] = (
   [
     {
       path: '/',
+      name: 'Home',
       component: LayoutDefault,
       redirect: '/dashboard',
       children: [
@@ -29,10 +30,10 @@ export const constantRoutes: IRouteRecord[] = (
   ] as IRouteRecord[]
 ).concat(labRoutes, hiddenRoutes)
 
-// 基础的动态路由，带有通配符 * 的路由应该始终放置在路由表的最后面，会拼接到验权生成的动态路由后面
-export const latestRoutes = [
+// 捕获 404 页面
+export const latestRoutes: IRouteRecord[] = [
   {
-    path: '*',
+    path: '/:pathMatch(.*)*',
     redirect: '/404',
     meta: { hidden: true }
   }

src/styles/common.scss

@@ -0,0 +1,21 @@
+/* 滚动条 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+/* 滚动条轨道样式 */
+::-webkit-scrollbar-track {
+  background: #EEEEEE;
+}
+
+/* 滚动条滑块样式 */
+::-webkit-scrollbar-thumb {
+  background-color: #BDBDBD;
+  border-radius: 10px;
+}
+
+/* 滚动条滑块鼠标悬停样式 */
+::-webkit-scrollbar-thumb:hover {
+  background-color: #BDBDBD;
+}

src/styles/element/cover.scss

@@ -0,0 +1,10 @@
+// For cover some element-plus styles
+
+.el-dialog {
+  --el-dialog-margin-top: 8vh !important;
+
+  &__header {
+    background-color: #E0E0E0;
+    margin-right: 0px !important;
+  }
+}

src/styles/element/index.scss

@@ -2,7 +2,16 @@
 @forward 'element-plus/theme-chalk/src/common/var.scss' with (
   $colors: (
     'primary': (
-      'base': #409EFF,
+      'base': #42A5F5,
     ),
+    'success': (
+      'base': #4CAF50,
+    ),
+    'danger': (
+      'base': #FF5252,
+    ),
+    'warning': (
+      'base': #FFC107,
+    )
   ),
 );

src/styles/main.scss

@@ -1,4 +1,6 @@
 @use './reset.scss';
-@use './layout.module.scss';
+@use './layout.scss';
 @use './transition.scss';
-@use './utils.scss';
+@use './utils.scss';
+@use './common.scss';
+@use './element/cover.scss';

src/styles/reset.scss

@@ -245,15 +245,4 @@ a:hover {
 
 div:focus {
   outline: none;
-}
-
-.clearfix {
-  &::after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: " ";
-    clear: both;
-    height: 0;
-  }
 }

src/styles/utils.scss

@@ -6,19 +6,22 @@
 
 .color {
   &--primary {
-    color: var(--el-color-primary);
+    color: var(--el-color-primary) !important;
+  }
+
+  &--success {
+    color: var(--el-color-success) !important;
   }
 
   &--danger {
-    color: var(--el-color-danger);
+    color: var(--el-color-danger) !important;
   }
 
   &--warning {
-    color: var(--el-color-warning);
+    color: var(--el-color-warning) !important;
   }
 
   &--info {
-    color: var(--el-color-info);
+    color: var(--el-color-info) !important;
   }
-
 }