✨ feat: 支持 Cookie 登录

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']

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();
   }

src/components/Modal/Login/Login.vue

@@ -12,11 +12,13 @@
     </n-tabs>
     <!-- 其他方式 -->
     <n-flex align="center" class="other">
-      <n-button :focusable="false" size="small" quaternary round @click="saveLoginByUID">
+      <n-button :focusable="false" size="small" quaternary round @click="specialLogin('uid')">
         UID 登录
       </n-button>
       <n-divider vertical />
-      <n-button :focusable="false" size="small" quaternary round> Cookie 登录 </n-button>
+      <n-button :focusable="false" size="small" quaternary round @click="specialLogin('cookie')">
+        Cookie 登录
+      </n-button>
     </n-flex>
     <!-- 关闭登录 -->
     <n-button :focusable="false" class="close" strong secondary round @click="emit('close')">
@@ -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),
   });
 };
 

src/components/Modal/Login/LoginCookie.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="login-cookie">
+    <n-alert :bordered="false" title="如何获取 Cookie">
+      <template #icon>
+        <SvgIcon name="Help" />
+      </template>
+      可在官方的
+      <n-a href="https://music.163.com/" target="_blank">网页端</n-a>
+      和客户端的控制台中获取，详细步骤请自行搜索。
+    </n-alert>
+    <n-input
+      v-model:value="cookie"
+      :autosize="{ minRows: 3, maxRows: 6 }"
+      type="textarea"
+      placeholder="请输入 Cookie"
+    />
+    <n-button type="primary" @click="login">登录</n-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { LoginType } from "@/types/main";
+
+const emit = defineEmits<{
+  close: [];
+  saveLogin: [any, LoginType];
+}>();
+
+const cookie = ref<string>();
+
+// Cookie 登录
+const login = async () => {
+  if (!cookie.value) {
+    window.$message.warning("请输入 Cookie");
+    return;
+  }
+  // 写入 Cookie
+  try {
+    window.$message.success("登录成功");
+    // 保存登录信息
+    emit(
+      "saveLogin",
+      {
+        code: 200,
+        cookie: cookie.value,
+      },
+      "cookie",
+    );
+    emit("close");
+  } catch (error) {
+    window.$message.error("登录失败，请重试");
+    console.error("Cookie 登录出错：", error);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.login-cookie {
+  .n-input,
+  .n-button {
+    width: 100%;
+    margin-top: 20px;
+  }
+}
+</style>

src/components/Modal/Login/LoginQRCode.vue

@@ -148,13 +148,17 @@ onBeforeUnmount(pauseCheck);
   .qr-img {
     display: flex;
     margin: 20px 0;
+    width: 180px;
+    height: 180px;
     border-radius: 12px;
     overflow: hidden;
     .qr {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
+      width: 100%;
+      height: 100%;
       .n-qr-code {
         padding: 0;
         height: 180px;

src/components/Modal/Login/LoginUID.vue

@@ -8,7 +8,7 @@
       <n-a href="https://music.163.com/" target="_blank">网易云音乐</n-a>
       官网登录并前往个人中心，即可从地址栏获取到 UID，也可在客户端分享链接中获取 UID。
     </n-alert>
-    <n-input-number v-model:value="uid" :show-button="false" laceholder="请输入 UID" />
+    <n-input-number v-model:value="uid" :show-button="false" placeholder="请输入 UID" />
     <n-button :loading="!!loadingMsg" type="primary" @click="login">登录</n-button>
   </div>
 </template>