From 358d4e8a1992aa040b909ae580470a0fd2142f5f Mon Sep 17 00:00:00 2001
From: Soybean <2570172956@qq.com>
Date: Wed, 20 Oct 2021 16:38:43 +0800
Subject: [PATCH] =?UTF-8?q?fix(projects):=20=E4=BF=AE=E5=A4=8D=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=A1=B5=E5=88=B7=E6=96=B0=E8=B7=B3404?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LoginBg/index.vue       | 16 ++++++++++++--
 .../SystemLogo/components/SvgFillLogo.vue     |  2 +-
 src/components/custom/ButtonTab/index.vue     |  6 ++---
 .../ChromeTab/components/SvgRadiusBg.vue      |  4 ++--
 src/hooks/common/useRouterChange.ts           | 10 ++++-----
 .../components/GlobalHeader/index.vue         |  4 +++-
 src/router/helpers/index.ts                   |  5 +----
 src/router/routes/constant.ts                 |  6 ++---
 src/store/modules/theme/index.ts              |  4 ++--
 src/utils/auth/index.ts                       |  2 +-
 src/utils/auth/user.ts                        |  7 ------
 src/utils/common/color.ts                     | 22 +++++++------------
 src/utils/common/index.ts                     |  2 +-
 src/utils/index.ts                            |  3 +--
 src/views/system/login/index.vue              | 12 +++++++---
 15 files changed, 54 insertions(+), 51 deletions(-)

diff --git a/src/components/common/LoginBg/index.vue b/src/components/common/LoginBg/index.vue
index 81a0c6c0..fac0b2e9 100644
--- a/src/components/common/LoginBg/index.vue
+++ b/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>
diff --git a/src/components/common/SystemLogo/components/SvgFillLogo.vue b/src/components/common/SystemLogo/components/SvgFillLogo.vue
index 027d289b..21ea0f30 100644
--- a/src/components/common/SystemLogo/components/SvgFillLogo.vue
+++ b/src/components/common/SystemLogo/components/SvgFillLogo.vue
@@ -35,7 +35,7 @@ defineProps({
   },
   foreground: {
     type: String,
-    default: '#fefefe00'
+    default: '#fefefe'
   }
 });
 </script>
diff --git a/src/components/custom/ButtonTab/index.vue b/src/components/custom/ButtonTab/index.vue
index a806229c..91ab4625 100644
--- a/src/components/custom/ButtonTab/index.vue
+++ b/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;
diff --git a/src/components/custom/ChromeTab/components/SvgRadiusBg.vue b/src/components/custom/ChromeTab/components/SvgRadiusBg.vue
index c022fa1e..d9ca7d59 100644
--- a/src/components/custom/ChromeTab/components/SvgRadiusBg.vue
+++ b/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;
 });
diff --git a/src/hooks/common/useRouterChange.ts b/src/hooks/common/useRouterChange.ts
index 73ad5031..cb6eec54 100644
--- a/src/hooks/common/useRouterChange.ts
+++ b/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 } });
     }
   }
 
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/index.vue b/src/layouts/BasicLayout/components/GlobalHeader/index.vue
index 8937a9f0..ea88b28a 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/index.vue
+++ b/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 {
diff --git a/src/router/helpers/index.ts b/src/router/helpers/index.ts
index 254be7fb..71293c10 100644
--- a/src/router/helpers/index.ts
+++ b/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 };
diff --git a/src/router/routes/constant.ts b/src/router/routes/constant.ts
index 641405b5..add82cca 100644
--- a/src/router/routes/constant.ts
+++ b/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
           };
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index 1237f90c..17fe1d8a 100644
--- a/src/store/modules/theme/index.ts
+++ b/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
diff --git a/src/utils/auth/index.ts b/src/utils/auth/index.ts
index c03e7693..60bc1e91 100644
--- a/src/utils/auth/index.ts
+++ b/src/utils/auth/index.ts
@@ -1 +1 @@
-export { getToken, setToken, removeToken, getUserInfo, resetAuthStorage, getLoginModuleRegExp } from './user';
+export { getToken, setToken, removeToken, getUserInfo, resetAuthStorage } from './user';
diff --git a/src/utils/auth/user.ts b/src/utils/auth/user.ts
index d1c217e1..1d48f9dc 100644
--- a/src/utils/auth/user.ts
+++ b/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('|');
-}
diff --git a/src/utils/common/color.ts b/src/utils/common/color.ts
index 81d1fb4e..7db6cff2 100644
--- a/src/utils/common/color.ts
+++ b/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();
 }
 
 /**
diff --git a/src/utils/common/index.ts b/src/utils/common/index.ts
index 2268bd44..fd61f2d5 100644
--- a/src/utils/common/index.ts
+++ b/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';
diff --git a/src/utils/index.ts b/src/utils/index.ts
index b9de2e1d..0f4aff0d 100644
--- a/src/utils/index.ts
+++ b/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
diff --git a/src/views/system/login/index.vue b/src/views/system/login/index.vue
index 1d7744d2..85561c23 100644
--- a/src/views/system/login/index.vue
+++ b/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>