feat: ai-hub与bbs单点登录联通

Yi.Ai.Vue3/src/components/LoginDialog/index.vue

@@ -1,14 +1,16 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { getUserInfo } from '@/api';
 import logoPng from '@/assets/images/logo.png';
 import SvgIcon from '@/components/SvgIcon/index.vue';
+import { SSO_CLIENT_ID, SSO_SEVER_URL } from '@/config/sso.ts';
 import { useUserStore } from '@/stores';
 import { useLoginFormStore } from '@/stores/modules/loginForm';
-import AccountPassword from './components/FormLogin/AccountPassword.vue';
+import { useSessionStore } from '@/stores/modules/session.ts';
 import RegistrationForm from './components/FormLogin/RegistrationForm.vue';
 import QrCodeLogin from './components/QrCodeLogin/index.vue';
 
-const userStore = useUserStore();
 const loginFromStore = useLoginFormStore();
 
 const loginFormType = computed(() => loginFromStore.LoginFormType);
@@ -17,6 +19,9 @@ const loginFormType = computed(() => loginFromStore.LoginFormType);
 const visible = defineModel<boolean>('visible');
 const showMask = ref(false); // 控制遮罩层显示的独立状态
 const isQrMode = ref(false);
+const userStore = useUserStore();
+const router = useRouter();
+const sessionStore = useSessionStore();
 
 // 监听 visible 变化，控制遮罩层显示时机
 watch(
@@ -49,6 +54,68 @@ function onAfterLeave() {
     showMask.value = false; // 动画结束后隐藏遮罩
   }
 }
+
+function handleThirdPartyLogin() {
+  const redirectUri = encodeURIComponent(`${window.location.origin}/chat`);
+  const popup = window.open(
+    `${SSO_SEVER_URL}/login?client_id=${SSO_CLIENT_ID}&redirect_uri=${redirectUri}`,
+    'SSOLogin',
+    'width=800,height=600',
+  );
+
+  // 使用标志位防止重复执行
+  let isHandled = false;
+
+  const messageHandler = async (event: any) => {
+    // 验证来源 + 防重复
+    if (
+      event.origin !== new URL(SSO_SEVER_URL).origin
+      || event.data.type !== 'SSO_LOGIN_SUCCESS'
+      || isHandled
+    ) {
+      return;
+    }
+    isHandled = true;
+    try {
+      const { token } = event.data;
+      userStore.setToken(token);
+
+      const resUserInfo = await getUserInfo();
+      userStore.setUserInfo(resUserInfo.data);
+
+      // 关闭弹窗
+      if (popup && !popup.closed)
+        popup.close();
+
+      // 清理监听
+      window.removeEventListener('message', messageHandler);
+
+      // 后续逻辑
+      ElMessage.success('登录成功');
+      userStore.closeLoginDialog();
+      await sessionStore.requestSessionList(1, true);
+      await router.replace('/');
+    }
+    catch (error) {
+      console.error('登录处理失败:', error);
+      ElMessage.error('登录失败');
+    }
+  };
+
+  // 先移除旧监听，再添加新监听
+  window.removeEventListener('message', messageHandler);
+  window.addEventListener('message', messageHandler);
+
+  // 超时自动清理
+  setTimeout(() => {
+    if (!isHandled) {
+      window.removeEventListener('message', messageHandler);
+      if (popup && !popup.closed)
+        popup.close();
+      ElMessage.warning('登录超时');
+    }
+  }, 30000); // 30秒超时
+}
 </script>
 
 <template>
@@ -61,14 +128,15 @@ function onAfterLeave() {
           <div class="left-section">
             <div class="logo-wrap">
               <img :src="logoPng" class="logo-img">
-              <span class="logo-text">Element Plus X</span>
+              <span class="logo-text">YiXin-Ai</span>
             </div>
             <div class="ad-banner">
               <SvgIcon name="p-bangong" class-name="animate-up-down" />
             </div>
           </div>
           <div class="right-section">
-            <div class="mode-toggle" @click.stop="toggleLoginMode">
+            <!--            隐藏二维码登录 -->
+            <div v-if="false" class="mode-toggle" @click.stop="toggleLoginMode">
               <SvgIcon v-if="!isQrMode" name="erweimadenglu" />
               <SvgIcon v-else name="zhanghaodenglu" />
             </div>
@@ -80,11 +148,25 @@ function onAfterLeave() {
                   <div v-if="loginFormType === 'AccountPassword'" class="form-container">
                     <span class="content-title"> 登录后免费使用完整功能 </span>
 
-                    <el-divider content-position="center">
+                    <el-divider v-if="false" content-position="center">
                       账号密码登录
                     </el-divider>
 
-                    <AccountPassword />
+                    <AccountPassword v-if="false" />
+
+                    <!-- 新增：第三方登录按钮 -->
+                    <div class="third-party-login">
+                      <el-divider content-position="center">
+                        点击下方登录
+                      </el-divider>
+                      <div class="third-party-buttons">
+                        <el-tooltip content="使用意社区账号登录" placement="top">
+                          <div class="third-party-btn" @click="handleThirdPartyLogin">
+                            <img :src="logoPng" class="third-party-icon" alt="">
+                          </div>
+                        </el-tooltip>
+                      </div>
+                    </div>
                   </div>
 
                   <div v-if="loginFormType === 'RegistrationForm'" class="form-container">
@@ -254,6 +336,41 @@ function onAfterLeave() {
   border-radius: var(--login-dialog-border-radius);
 }
 
+/* 新增：第三方登录样式 */
+.third-party-login {
+  width: 100%;
+  margin-top: 20px;
+}
+
+.third-party-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 10px;
+}
+
+.third-party-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  cursor: pointer;
+  background-color: #f5f7fa;
+  border-radius: 50%;
+  transition: all 0.3s;
+
+  &:hover {
+    background-color: #e4e7ed;
+    transform: scale(1.1);
+  }
+}
+
+.third-party-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+}
 @media (width <= 800px) {
   .left-section {
     display: none !important;