+
{{ $t('system.title') }}
-
-
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
-import { useLoading } from '@sa/hooks';
+import { getRgb } from '@sa/color';
+import { DARK_CLASS } from '@/constants/app';
import { fetchSocialLoginCallback } from '@/service/api';
import { useAuthStore } from '@/store/modules/auth';
import { useRouterPush } from '@/hooks/common/router';
+import { localStg } from '@/utils/storage';
+import { toggleHtmlClass } from '@/utils/common';
const route = useRoute();
const authStore = useAuthStore();
const { routerPushByKey } = useRouterPush();
-const { loading, startLoading, endLoading } = useLoading(true);
/**
* 接收Route传递的参数
@@ -41,7 +43,7 @@ const handleError = () => {
msg.value = '登录失败，1s 后即将跳转至登录页';
}, 1000);
setTimeout(() => {
- routerPushByKey('login');
+ // routerPushByKey('login');
}, 1000);
};
@@ -56,7 +58,6 @@ const callbackByCode = async (data: Api.Auth.SocialLoginForm) => {
return;
}
await processResponse();
- endLoading();
};
const loginByCode = async (data: Api.Auth.SocialLoginForm) => {
@@ -67,11 +68,9 @@ const loginByCode = async (data: Api.Auth.SocialLoginForm) => {
} catch {
handleError();
}
- endLoading();
};
const init = async () => {
- startLoading();
// 如果域名不相等 则重定向处理
const host = window.location.host;
if (domain !== host) {
@@ -99,17 +98,28 @@ const init = async () => {
onMounted(async () => {
await init();
});
+
+const themeColor = localStg.get('themeColor') || '#2080f0';
+const darkMode = localStg.get('darkMode') || false;
+const { r, g, b } = getRgb(themeColor);
+
+if (darkMode) {
+ toggleHtmlClass(DARK_CLASS).add();
+}
+
+const primaryColor = `--primary-color: ${r} ${g} ${b}`;
-
-
`;
if (app) {
diff --git a/src/styles/scss/loading.scss b/src/styles/scss/loading.scss
new file mode 100644
index 00000000..99617dd5
--- /dev/null
+++ b/src/styles/scss/loading.scss
@@ -0,0 +1,105 @@
+@use 'sass:math';
+
+$base-size: 100px;
+$em-to-px: math.div($base-size, 2.5);
+$loader-color-1: rgb(var(--error-color) / 75%);
+$loader-color-2: rgb(var(--primary-color) / 75%);
+$loader-color-3: rgb(var(--success-color) / 75%);
+$loader-color-4: rgb(var(--warning-color) / 75%);
+
+@function loader-size($em-value) {
+ @return $em-to-px * $em-value;
+}
+
+/* From Uiverse.io by SchawnnahJ */
+.loader {
+ position: relative;
+ width: loader-size(2.5);
+ height: loader-size(2.5);
+ transform: rotate(165deg);
+}
+
+.loader:before,
+.loader:after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ display: block;
+ width: loader-size(0.5);
+ height: loader-size(0.5);
+ border-radius: loader-size(0.25);
+ transform: translate(-50%, -50%);
+}
+
+.loader:before {
+ animation: before8 2s infinite;
+}
+
+.loader:after {
+ animation: after6 2s infinite;
+}
+
+@keyframes before8 {
+ 0% {
+ width: loader-size(0.5);
+ box-shadow:
+ loader-size(1) loader-size(-0.5) $loader-color-1,
+ loader-size(-1) loader-size(0.5) $loader-color-2;
+ }
+
+ 35% {
+ width: loader-size(2.5);
+ box-shadow:
+ 0 loader-size(-0.5) $loader-color-1,
+ 0 loader-size(0.5) $loader-color-2;
+ }
+
+ 70% {
+ width: loader-size(0.5);
+ box-shadow:
+ loader-size(-1) loader-size(-0.5) $loader-color-1,
+ loader-size(1) loader-size(0.5) $loader-color-2;
+ }
+
+ 100% {
+ box-shadow:
+ loader-size(1) loader-size(-0.5) $loader-color-1,
+ loader-size(-1) loader-size(0.5) $loader-color-2;
+ }
+}
+
+@keyframes after6 {
+ 0% {
+ height: loader-size(0.5);
+ box-shadow:
+ loader-size(0.5) loader-size(1) $loader-color-3,
+ loader-size(-0.5) loader-size(-1) $loader-color-4;
+ }
+
+ 35% {
+ height: loader-size(2.5);
+ box-shadow:
+ loader-size(0.5) 0 $loader-color-3,
+ loader-size(-0.5) 0 $loader-color-4;
+ }
+
+ 70% {
+ height: loader-size(0.5);
+ box-shadow:
+ loader-size(0.5) loader-size(-1) $loader-color-3,
+ loader-size(-0.5) loader-size(1) $loader-color-4;
+ }
+
+ 100% {
+ box-shadow:
+ loader-size(0.5) loader-size(1) $loader-color-3,
+ loader-size(-0.5) loader-size(-1) $loader-color-4;
+ }
+}
+
+.loader {
+ position: absolute;
+ top: calc(50% - #{math.div(loader-size(2.5), 2)});
+ left: calc(50% - #{math.div(loader-size(2.5), 2)});
+}
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index 9ba89538..dd12819a 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -34,6 +34,7 @@ declare module 'vue' {
IconIcRoundRefresh: typeof import('~icons/ic/round-refresh')['default']
IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
IconLocalBanner: typeof import('~icons/local/banner')['default']
+ IconLocalLogo: typeof import('~icons/local/logo')['default']
'IconMaterialSymbols:add': typeof import('~icons/material-symbols/add')['default']
'IconMaterialSymbols:deleteOutline': typeof import('~icons/material-symbols/delete-outline')['default']
'IconMaterialSymbols:downloadRounded': typeof import('~icons/material-symbols/download-rounded')['default']
diff --git a/src/views/_builtin/login/index.vue b/src/views/_builtin/login/index.vue
index 677d9b45..2dc9fb3e 100644
--- a/src/views/_builtin/login/index.vue
+++ b/src/views/_builtin/login/index.vue
@@ -56,7 +56,7 @@ const bgColor = computed(() => {
- 
-
+
+
+
- ${$t('system.title')}
+${$t('system.title')}
{{ $t('system.title') }}
-
-
- 
-
+
-
+
-
+
+
+
-