fix(projects): 修复登录页刷新跳404

src/components/common/LoginBg/index.vue

@@ -1,15 +1,27 @@
 <template>
   <div class="absolute-lt w-full h-full overflow-hidden">
     <div class="absolute -right-300px -top-900px">
-      <corner-top />
+      <corner-top :start-color="firstColor" :end-color="secondColor" />
     </div>
     <div class="absolute -left-200px -bottom-400px">
-      <corner-bottom />
+      <corner-bottom :start-color="firstColor" :end-color="secondColor" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue';
+import { brightenColor, darkenColor } from '@/utils';
 import { CornerTop, CornerBottom } from './components';
+
+const props = defineProps({
+  themeColor: {
+    type: String,
+    default: '#409EFF'
+  }
+});
+
+const firstColor = computed(() => darkenColor(props.themeColor));
+const secondColor = computed(() => brightenColor(props.themeColor));
 </script>
 <style scoped></style>

src/components/common/SystemLogo/components/SvgFillLogo.vue

@@ -35,7 +35,7 @@ defineProps({
   },
   foreground: {
     type: String,
-    default: '#fefefe00'
+    default: '#fefefe'
   }
 });
 </script>

src/components/custom/ButtonTab/index.vue

@@ -29,7 +29,7 @@
 import { computed } from 'vue';
 import { useBoolean } from '@/hooks';
 import { IconClose } from '@/components';
-import { shallowColor } from '@/utils';
+import { addColorAlpha } from '@/utils';
 
 const props = defineProps({
   isActive: {
@@ -62,10 +62,10 @@ const buttonStyle = computed(() => {
   const style: { [key: string]: string } = {};
   if (props.isActive || isHover.value) {
     style.color = props.primaryColor;
-    style.borderColor = shallowColor(props.primaryColor, 0.3);
+    style.borderColor = addColorAlpha(props.primaryColor, 0.3);
     if (props.isActive) {
       const alpha = props.darkMode ? 0.15 : 0.1;
-      style.backgroundColor = shallowColor(props.primaryColor, alpha);
+      style.backgroundColor = addColorAlpha(props.primaryColor, alpha);
     }
   }
   return style;

src/components/custom/ChromeTab/components/SvgRadiusBg.vue

@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { shallowColor } from '@/utils';
+import { addColorAlpha } from '@/utils';
 
 /** 填充的背景颜色： [默认颜色, 暗黑主题颜色] */
 type FillColor = [string, string];
@@ -66,7 +66,7 @@ const fill = computed(() => {
   }
   if (props.isActive) {
     const alpha = props.darkMode ? 0.15 : 0.1;
-    color = shallowColor(props.primaryColor, alpha);
+    color = addColorAlpha(props.primaryColor, alpha);
   }
   return color;
 });

src/hooks/common/useRouterChange.ts

@@ -1,7 +1,7 @@
 import { useRouter, useRoute } from 'vue-router';
 import type { RouteLocationRaw } from 'vue-router';
 import { EnumRoutePath } from '@/enum';
-import { router as globalRouter, RouteNameMap } from '@/router';
+import { router as globalRouter } from '@/router';
 import type { LoginModuleType } from '@/interface';
 
 /**
@@ -30,15 +30,15 @@ export default function useRouterChange(inSetup: boolean = true) {
    */
   function toLogin(module: LoginModuleType = 'pwd-login', redirectUrl?: LoginRedirect) {
     const routeLocation: RouteLocationRaw = {
-      name: RouteNameMap.get('login'),
-      params: { module }
+      path: EnumRoutePath.login,
+      query: { module }
     };
     if (redirectUrl) {
       let url = redirectUrl;
       if (redirectUrl === 'current') {
         url = router.currentRoute.value.fullPath as EnumRoutePath;
       }
-      routeLocation.query = { redirectUrl: url };
+      routeLocation.query!.redirectUrl = url;
     }
     router.push(routeLocation);
   }
@@ -51,7 +51,7 @@ export default function useRouterChange(inSetup: boolean = true) {
   function toCurrentLogin(module: LoginModuleType) {
     if (route) {
       const { query } = route;
-      router.push({ name: RouteNameMap.get('login'), params: { module }, query });
+      router.push({ path: EnumRoutePath.login, query: { ...query, module } });
     }
   }
 

src/layouts/BasicLayout/components/GlobalHeader/index.vue

@@ -20,7 +20,7 @@
         <gihub-site />
         <full-screen />
         <user-avatar />
-        <setting-drawer-button />
+        <setting-drawer-button v-if="showSettingButton" />
       </div>
     </div>
   </n-layout-header>
@@ -60,6 +60,8 @@ const menuWidth = computed(() => {
 
   return `${width}px`;
 });
+
+const showSettingButton = import.meta.env.DEV || import.meta.env.VITE_HTTP_ENV === 'STAGING';
 </script>
 <style scoped>
 .global-header {

src/router/helpers/index.ts

@@ -1,5 +1,5 @@
 import type { Component } from 'vue';
-import { getLoginModuleRegExp, getRouteNameMap } from '@/utils';
+import { getRouteNameMap } from '@/utils';
 import getCacheRoutes from './cache';
 import transformRouteToMenu from './menus';
 
@@ -13,7 +13,4 @@ export function setCacheName(component: Component, name?: string) {
 /** 路由name map */
 export const RouteNameMap = getRouteNameMap();
 
-/** 登录模块的正则字符串 */
-export const loginModuleRegExp = getLoginModuleRegExp();
-
 export { getCacheRoutes, transformRouteToMenu };

src/router/routes/constant.ts

@@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
 import { EnumRoutePath, EnumRouteTitle } from '@/enum';
 import { BlankLayout } from '@/layouts';
 import type { LoginModuleType } from '@/interface';
-import { RouteNameMap, loginModuleRegExp } from '../helpers';
+import { RouteNameMap } from '../helpers';
 import { Login, NoPermission, NotFound, ServiceError } from '../components';
 
 /**
@@ -23,10 +23,10 @@ const constantRoutes: RouteRecordRaw[] = [
       // 登录
       {
         name: RouteNameMap.get('login'),
-        path: `${EnumRoutePath.login}/:module(/${loginModuleRegExp}/)?`,
+        path: EnumRoutePath.login,
         component: Login,
         props: route => {
-          const moduleType: LoginModuleType = (route.params.module as LoginModuleType) || 'pwd-login';
+          const moduleType: LoginModuleType = (route.query?.module as LoginModuleType) || 'pwd-login';
           return {
             module: moduleType
           };

src/store/modules/theme/index.ts

@@ -3,7 +3,7 @@ import type { GlobalThemeOverrides } from 'naive-ui';
 import { themeSettings, defaultThemeSettings } from '@/settings';
 import { store } from '@/store';
 import type { ThemeSettings, NavMode, MultiTabMode, AnimateType, HorizontalMenuPosition } from '@/interface';
-import { shallowColor } from '@/utils';
+import { addColorAlpha } from '@/utils';
 import { getHoverAndPressedColor } from './helpers';
 
 type ThemeState = ThemeSettings;
@@ -64,7 +64,7 @@ const themeStore = defineStore({
       };
     },
     relativeThemeColor(): relativeThemeColor {
-      const shallow = shallowColor(this.themeColor, 0.1);
+      const shallow = addColorAlpha(this.themeColor, 0.1);
       return {
         ...getHoverAndPressedColor(this.themeColor),
         shallow

src/utils/auth/index.ts

@@ -1 +1 @@
-export { getToken, setToken, removeToken, getUserInfo, resetAuthStorage, getLoginModuleRegExp } from './user';
+export { getToken, setToken, removeToken, getUserInfo, resetAuthStorage } from './user';

src/utils/auth/user.ts

@@ -1,5 +1,4 @@
 import { EnumStorageKey } from '@/enum';
-import type { LoginModuleType } from '@/interface';
 import { setLocal, getLocal, removeLocal } from '../storage';
 
 /** 设置token */
@@ -39,9 +38,3 @@ export function resetAuthStorage() {
   removeToken();
   removeRefreshToken();
 }
-
-/** 获取登录模块的正则字符串 */
-export function getLoginModuleRegExp() {
-  const arr: LoginModuleType[] = ['pwd-login', 'code-login', 'register', 'reset-pwd', 'bind-wechat'];
-  return arr.join('|');
-}

src/utils/common/color.ts

@@ -2,26 +2,20 @@ import chroma from 'chroma-js';
 
 /**
  * 更亮的颜色
- * @param color
+ * @param color - 颜色
+ * @param deep - 效果层次
  */
-export function brightenColor(color: string) {
-  return chroma(color).brighten(0.5).hex();
-}
-
-/**
- * 更浅的颜色
- * @param color
- */
-export function shallowColor(color: string, alpha: number = 0.5) {
-  return chroma(color).alpha(alpha).hex();
+export function brightenColor(color: string, deep: number = 0.5) {
+  return chroma(color).brighten(deep).hex();
 }
 
 /**
  * 更暗的颜色
- * @param color
+ * @param color - 颜色
+ * @param deep - 效果层次
  */
-export function darkenColor(color: string) {
-  return chroma(color).darken(0.5).hex();
+export function darkenColor(color: string, deep: number = 0.5) {
+  return chroma(color).darken(deep).hex();
 }
 
 /**

src/utils/common/index.ts

@@ -12,6 +12,6 @@ export {
   isMap
 } from './typeof';
 
-export { brightenColor, shallowColor, darkenColor, addColorAlpha } from './color';
+export { brightenColor, darkenColor, addColorAlpha } from './color';
 
 export { dynamicIconRender } from './icon';

src/utils/index.ts

@@ -1,4 +1,4 @@
-export { setToken, getToken, removeToken, getUserInfo, resetAuthStorage, getLoginModuleRegExp } from './auth';
+export { setToken, getToken, removeToken, getUserInfo, resetAuthStorage } from './auth';
 
 export {
   isNumber,
@@ -13,7 +13,6 @@ export {
   isSet,
   isMap,
   brightenColor,
-  shallowColor,
   darkenColor,
   addColorAlpha,
   dynamicIconRender

src/views/system/login/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="relative flex-center w-full h-full bg-[#DBE0F9]">
+  <div class="relative flex-center w-full h-full" :style="{ backgroundColor: bgColor }">
     <div class="w-400px p-40px bg-white rounded-20px z-10">
       <header class="flex-y-center justify-between">
         <div class="w-70px h-70px rounded-35px overflow-hidden">
-          <system-logo class="w-full h-full" :fill="true" />
+          <system-logo class="w-full h-full" :fill="true" :color="theme.themeColor" />
         </div>
         <n-gradient-text type="primary" :size="28">{{ title }}</n-gradient-text>
       </header>
@@ -14,18 +14,21 @@
         </div>
       </main>
     </div>
-    <login-bg />
+    <login-bg :theme-color="theme.themeColor" />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue';
 import type { Component, PropType } from 'vue';
 import { NGradientText } from 'naive-ui';
 import { SystemLogo, LoginBg } from '@/components';
 import { useAppTitle } from '@/hooks';
 import { EnumLoginModule } from '@/enum';
+import { addColorAlpha } from '@/utils';
 import type { LoginModuleType } from '@/interface';
 import { PwdLogin, CodeLogin, Register, ResetPwd, BindWechat } from './components';
+import { useThemeStore } from '@/store';
 
 interface LoginModule {
   key: LoginModuleType;
@@ -40,6 +43,7 @@ defineProps({
   }
 });
 
+const theme = useThemeStore();
 const title = useAppTitle();
 
 const modules: LoginModule[] = [
@@ -49,5 +53,7 @@ const modules: LoginModule[] = [
   { key: 'reset-pwd', label: EnumLoginModule['reset-pwd'], component: ResetPwd },
   { key: 'bind-wechat', label: EnumLoginModule['bind-wechat'], component: BindWechat }
 ];
+
+const bgColor = computed(() => addColorAlpha(theme.themeColor, 0.1));
 </script>
 <style scoped></style>