添加google登录及绑定

package-lock.json

@@ -44,6 +44,7 @@
 				"xlsx": "^0.18.5"
 			},
 			"devDependencies": {
+				"@types/node": "^22.15.3",
 				"@vitejs/plugin-vue": "^3.0.0",
 				"@vue/compiler-sfc": "^3.1.2",
 				"typescript": "^4.6.4",
@@ -920,6 +921,15 @@
 			"resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
 			"integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA=="
 		},
+		"node_modules/@types/node": {
+			"version": "22.15.3",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.3.tgz",
+			"integrity": "sha512-lX7HFZeHf4QG/J7tBZqrCAXwz9J5RD56Y6MpP0eJkka8p+K0RY/yBTW7CYFJ4VGCclxqOLKmiGP5juQc6MKgcw==",
+			"dev": true,
+			"dependencies": {
+				"undici-types": "~6.21.0"
+			}
+		},
 		"node_modules/@types/trusted-types": {
 			"version": "2.0.7",
 			"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -5034,6 +5044,12 @@
 			"resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
 			"integrity": "sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ=="
 		},
+		"node_modules/undici-types": {
+			"version": "6.21.0",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+			"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+			"dev": true
+		},
 		"node_modules/unimport": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/unimport/-/unimport-1.3.0.tgz",

package.json

@@ -44,6 +44,7 @@
 		"xlsx": "^0.18.5"
 	},
 	"devDependencies": {
+		"@types/node": "^22.15.3",
 		"@vitejs/plugin-vue": "^3.0.0",
 		"@vue/compiler-sfc": "^3.1.2",
 		"typescript": "^4.6.4",

src/views/pages/login.vue

@@ -55,31 +55,20 @@
     <!-- 第三登录 -->
     <el-divider content-position="center">第三方登录</el-divider>
     <div class="login-text">
-      <el-row :gutter="20">
+      <el-row :gutter="12" >
-        <el-col :span="8">
+        <!-- thirdPartyLogoInfoList -->
-          <el-button
+         <template v-for="(item, index) in thirdPartyLogoInfoList" :key="index">
-            type="primary"
+          <el-col :span="8">
-            class="github-btn"
+            <img :src="item.logo" alt="" @click="thirdLogin(item.name)" />
-            @click="thirdLogin('github')"
+            <!-- <el-button
-            circle
+              class="github-btn"
-          ></el-button>
+              @click="thirdLogin(item.name)"
-        </el-col>
+              circle
-        <el-col :span="8">
+            ></el-button> -->
-          <el-button
+          </el-col>
-            type="primary"
+        </template>
-            class="gitee-btn"
+        
-            @click="thirdLogin('gitee')"
+        
-            circle
-          ></el-button>
-        </el-col>
-        <el-col :span="8">
-          <el-button
-            type="primary"
-            class="qq-btn"
-            @click="thirdLogin('qq')"
-            circle
-          ></el-button>
-        </el-col>
       </el-row>
     </div>
   </div>
@@ -134,6 +123,26 @@ const login = ref(null);
 const maxLoginRepeatRequest = 30; //最大请求次数
 const currentLoginRequest = ref(0); //当前请求次数
 
+const  thirdPartyLogoInfoList = ref([
+  {
+    name: "github",
+    logo: "https://www.ljsea.top/wp-content/uploads/2025/04/github-logo.png",
+  },
+  {
+    name: "gitee",
+    logo: "https://www.ljsea.top/wp-content/uploads/2025/04/gitee.png",
+  },
+  {
+    name: "qq",
+    logo: "https://wiki.connect.qq.com/wp-content/uploads/2016/12/Connect_logo_4.png",
+  },
+  {
+    name: "google",
+    logo: "https://www.ljsea.top/wp-content/uploads/2025/04/google-logo_resized.png",
+  },
+]);
+
+
 //表单数据
 var loginData = ref({
   username: "",
@@ -141,6 +150,12 @@ var loginData = ref({
   password: "",
   ip: "",
 });
+const thirdPartyPlatform = ref([
+    { label: 'QQ', value: 'qq' },
+    { label: 'Github', value: 'github' },
+    { label: 'Gitee', value: 'gitee' },
+    { label: 'Google', value: 'google' },
+]);
 
 const thirdLogin = async (type) => {
   //获取uuid
@@ -155,10 +170,15 @@ const thirdLogin = async (type) => {
     return;
   }
   let result={};
-  if(type !== "github" && type !== "qq" && type !== "gitee") {
+  //平台
-    
+  for(let i = 0; i < thirdPartyPlatform.value.length; i++) {
-    ElMessage.error("不支持的登录平台！请稍后再试："+type);
+    if (thirdPartyPlatform.value[i].value === type) {
-    return;
+        break;
+    }
+    if (i === thirdPartyPlatform.value.length - 1) {
+        ElMessage.error("不支持的登录平台！请稍后再试："+type);
+        return;
+    }
   }
   result = await getThirdPartyLoginUrl({uuid: uuid,"type": "login", "platform": type });
   if (result["code"] !== 0) {
@@ -364,4 +384,7 @@ const getMyUserInfo = async (id) => {
   background-image: url(https://wiki.connect.qq.com/wp-content/uploads/2016/12/Connect_logo_4.png);
 
 }
+.google-btn {
+  background-image: url(../../assets/img/google-logo_resized.png) !important;
+}
 </style>

src/views/pages/ucenter.vue

@@ -74,9 +74,14 @@
                     <el-tab-pane name="label5" label="第三方账号" class="user-tabpane">
                         <div>
                             <el-select v-model="activePlatformName" placeholder="请选择第三方平台" size="small" style="width: 200px;">
-                                <el-option label="QQ" value="qq"></el-option>
+                                <!-- <el-option label="QQ" value="qq"></el-option>
                                 <el-option label="Github" value="github"></el-option>
                                 <el-option label="gitee" value="gitee"></el-option>
+                                <el-option label="google" value="google"></el-option> -->
+                                <!-- thirdPartyPlatform -->
+                                <template v-for="(item, index) in thirdPartyPlatform" :key="index">
+                                    <el-option :label="item.label" :value="item.value"></el-option>
+                                </template>
                             </el-select>
                             <el-button type="primary" @click="thirdLogin(activePlatformName)">绑定</el-button>
                         </div>
@@ -158,6 +163,13 @@ const currentLoginRequest = ref(0); //当前请求次数
 
 const thirdPartyUserInfo = ref<ThirdPartyUserInfo[]>([]);
 
+const thirdPartyPlatform = ref([
+    { label: 'QQ', value: 'qq' },
+    { label: 'Github', value: 'github' },
+    { label: 'Gitee', value: 'gitee' },
+    { label: 'Google', value: 'google' },
+]);
+
 
 const reset_password = () => {
     localStorage.removeItem("ms_username");
@@ -379,9 +391,15 @@ const thirdLogin = async (type) => {
     return;
   }
   let result={};
-  if(type !== "github" && type !== "qq" && type !== "gitee") {
+  //判断登录平台是否支持,thirdPartyPlatform
-    ElMessage.error("不支持的登录平台！请稍后再试："+type);
+  for(let i = 0; i < thirdPartyPlatform.value.length; i++) {
-    return;
+    if (thirdPartyPlatform.value[i].value === type) {
+        break;
+    }
+    if (i === thirdPartyPlatform.value.length - 1) {
+        ElMessage.error("不支持的登录平台！请稍后再试："+type);
+        return;
+    }
   }
   result = await getThirdPartyLoginUrl({uuid: uuid,"type": "add", "platform": type, "token": localStorage.getItem("token") });
   if (result["code"] !== 0) {

yarn.lock

@@ -600,6 +600,13 @@
   resolved "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz"
   integrity sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==
 
+"@types/node@^22.15.3", "@types/node@>= 14":
+  version "22.15.3"
+  resolved "https://registry.npmjs.org/@types/node/-/node-22.15.3.tgz"
+  integrity sha512-lX7HFZeHf4QG/J7tBZqrCAXwz9J5RD56Y6MpP0eJkka8p+K0RY/yBTW7CYFJ4VGCclxqOLKmiGP5juQc6MKgcw==
+  dependencies:
+    undici-types "~6.21.0"
+
 "@types/trusted-types@^2.0.7":
   version "2.0.7"
   resolved "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz"
@@ -3187,6 +3194,11 @@ ufo@^1.5.4:
   resolved "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz"
   integrity sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==
 
+undici-types@~6.21.0:
+  version "6.21.0"
+  resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz"
+  integrity sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==
+
 unimport@^1.0.1:
   version "1.3.0"
   resolved "https://registry.npmjs.org/unimport/-/unimport-1.3.0.tgz"