diff --git a/components.d.ts b/components.d.ts index 31dba0d5..3bcffa38 100644 --- a/components.d.ts +++ b/components.d.ts @@ -23,6 +23,7 @@ declare module 'vue' { KeyboardSetting: typeof import('./src/components/Setting/KeyboardSetting.vue')['default'] LocalSetting: typeof import('./src/components/Setting/LocalSetting.vue')['default'] Login: typeof import('./src/components/Modal/Login/Login.vue')['default'] + LoginCookie: typeof import('./src/components/Modal/Login/LoginCookie.vue')['default'] LoginPhone: typeof import('./src/components/Modal/Login/LoginPhone.vue')['default'] LoginQRCode: typeof import('./src/components/Modal/Login/LoginQRCode.vue')['default'] LoginUID: typeof import('./src/components/Modal/Login/LoginUID.vue')['default'] diff --git a/src/components/Layout/User.vue b/src/components/Layout/User.vue index ed629c43..474dc3b7 100644 --- a/src/components/Layout/User.vue +++ b/src/components/Layout/User.vue @@ -128,6 +128,7 @@ const checkLoginStatus = async () => { // 若还有用户数据,则登录过期 else if (dataStore.userData.userId !== 0) { dataStore.userLoginStatus = false; + dataStore.userData.userId = 0; window.$message.warning("登录已过期,请重新登录", { duration: 2000 }); openUserLogin(); } diff --git a/src/components/Modal/Login/Login.vue b/src/components/Modal/Login/Login.vue index e174b91f..fb8855d4 100644 --- a/src/components/Modal/Login/Login.vue +++ b/src/components/Modal/Login/Login.vue @@ -12,11 +12,13 @@ - + UID 登录 - Cookie 登录 + + Cookie 登录 + @@ -34,6 +36,7 @@ import { updateSpecialUserData, updateUserData } from "@/utils/auth"; import { useDataStore } from "@/stores"; import { LoginType } from "@/types/main"; import LoginUID from "./LoginUID.vue"; +import LoginCookie from "./LoginCookie.vue"; const emit = defineEmits<{ close: []; @@ -69,18 +72,24 @@ const saveLogin = async (loginData: any, type: LoginType = "qr") => { } }; -// UID 登录 -const saveLoginByUID = () => { +// 特殊登录 +const specialLogin = (type: "uid" | "cookie" = "uid") => { qrPause.value = true; const loginModal = window.$modal.create({ - title: "UID 登录", + title: type === "uid" ? "UID 登录" : "Cookie 登录", preset: "card", transformOrigin: "center", style: { width: "400px" }, content: () => { - return h(LoginUID, { onClose: () => loginModal.destroy(), onSaveLogin: saveLogin }); + return h(type === "uid" ? LoginUID : LoginCookie, { + onClose: () => loginModal.destroy(), + onSaveLogin: saveLogin, + }); + }, + onClose: () => { + qrPause.value = false; + loginModal.destroy(); }, - onClose: () => (qrPause.value = false), }); }; diff --git a/src/components/Modal/Login/LoginCookie.vue b/src/components/Modal/Login/LoginCookie.vue new file mode 100644 index 00000000..eb88c9ac --- /dev/null +++ b/src/components/Modal/Login/LoginCookie.vue @@ -0,0 +1,65 @@ + + + + + diff --git a/src/components/Modal/Login/LoginQRCode.vue b/src/components/Modal/Login/LoginQRCode.vue index b5fb0e01..d2ab0701 100644 --- a/src/components/Modal/Login/LoginQRCode.vue +++ b/src/components/Modal/Login/LoginQRCode.vue @@ -148,6 +148,8 @@ onBeforeUnmount(pauseCheck); .qr-img { display: flex; margin: 20px 0; + width: 180px; + height: 180px; border-radius: 12px; overflow: hidden; .qr { @@ -155,6 +157,8 @@ onBeforeUnmount(pauseCheck); display: flex; align-items: center; justify-content: center; + width: 100%; + height: 100%; .n-qr-code { padding: 0; height: 180px; diff --git a/src/components/Modal/Login/LoginUID.vue b/src/components/Modal/Login/LoginUID.vue index f915f621..3a5c627f 100644 --- a/src/components/Modal/Login/LoginUID.vue +++ b/src/components/Modal/Login/LoginUID.vue @@ -8,7 +8,7 @@ 网易云音乐 官网登录并前往个人中心,即可从地址栏获取到 UID,也可在客户端分享链接中获取 UID。 - + 登录