feat: ✨ 新增登录弹框

src/components/LoginDialog/components/FormLogin/AccountPassword.vue

@@ -0,0 +1,98 @@
+<!-- 账号密码登录表单 -->
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus';
+import type { LoginDTO } from '@/api/auth/types';
+import { reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { login } from '@/api';
+import { useUserStore } from '@/store';
+
+const userStore = useUserStore();
+
+const formRef = ref<FormInstance>();
+
+const formModel = reactive<LoginDTO>({
+  username: '',
+  password: '',
+});
+
+const rules = reactive<FormRules<LoginDTO>>({
+  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+});
+
+const router = useRouter();
+async function handleSubmit() {
+  try {
+    await formRef.value?.validate();
+    const res = await login(formModel);
+    console.log(res, 'res');
+    res.data.token && userStore.setToken(res.data.token);
+    res.data.userInfo && userStore.setUserInfo(res.data.userInfo);
+    router.replace('/');
+  }
+  catch (error) {
+    console.error('请求错误:', error);
+  }
+}
+</script>
+
+<template>
+  <div class="custom-form">
+    <el-form ref="formRef" :model="formModel" :rules="rules">
+      <el-form-item prop="username">
+        <el-input v-model="formModel.username" placeholder="请输入用户名" clearable>
+          <template #prefix>
+            <el-icon>
+              <User />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="formModel.password"
+          placeholder="请输入密码"
+          clearable
+          type="password"
+          show-password
+        >
+          <template #prefix>
+            <el-icon>
+              <Lock />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" style="width: 100%" @click="handleSubmit">
+          登录
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.custom-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.login-btn {
+  margin-top: 24px;
+  padding: 12px;
+  background: #409eff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+</style>

src/components/LoginDialog/components/QrCodeLogin/index.vue

@@ -1,96 +1,275 @@
-<!-- 二维码登录组件 -->
 <script lang="ts" setup>
-const emit = defineEmits(['refresh']);
+import { Check, Picture as IconPicture, Refresh } from '@element-plus/icons-vue';
+import { useCountdown } from '@vueuse/core';
+import { useQRCode } from '@vueuse/integrations/useQRCode';
+import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
 
-const qrCodeUrl = ref('https://example.com/generate-qr'); // 实际需动态生成
+// 响应式状态
-const countdown = ref(60);
+const urlText = shallowRef('');
+const qrCodeUrl = useQRCode(urlText);
 const isExpired = ref(false);
-let timer: number | null = null;
+const isScanned = ref(false); // 新增：是否已扫码
+const isConfirming = ref(false); // 新增：是否进入确认登录阶段
+const confirmCountdownSeconds = shallowRef(180); // 确认登录倒计时（3分钟）
 
-function startCountdown() {
+// 二维码倒计时实例
-  timer = setInterval(() => {
+const { start: qrStart, stop: qrStop } = useCountdown(shallowRef(60), {
-    countdown.value--;
+  interval: 1000,
-    if (countdown.value <= 0) {
+  onComplete: () => {
     isExpired.value = true;
-      clearInterval(timer!);
+    stopPolling(); // 二维码过期时停止轮询
-    }
+  },
-  }, 1000);
-}
-
-function handleRefresh() {
-  isExpired.value = false;
-  countdown.value = 60;
-  emit('refresh');
-  startCountdown();
-}
-
-onMounted(() => {
-  startCountdown();
 });
 
+// 确认登录倒计时实例
+const { start: confirmStart, stop: confirmStop } = useCountdown(confirmCountdownSeconds, {
+  interval: 1000,
+  onComplete: () => {
+    isExpired.value = true;
+    isConfirming.value = false;
+    stopPolling(); // 确认倒计时结束时停止轮询
+  },
+});
+
+// 轮询相关
+let scanPolling: number | null = null;
+let confirmPolling: number | null = null;
+
+// 模拟后端接口 这里返回新的二维码地址
+async function fetchNewQRCode() {
+  await new Promise(resolve => setTimeout(resolve, 500));
+  return `https://login-api.com/qr/${Date.now()}`;
+}
+// 模拟后端接口 这里返回是否已扫码
+async function checkScanStatus() {
+  // 模拟扫码状态接口（实际应调用后端接口）
+  await new Promise(resolve => setTimeout(resolve, 300));
+  return Math.random() > 0.3; // 30%概率未扫码，70%概率已扫码
+}
+
+// 模拟后端接口 这里返回扫码后是否已确认
+async function checkConfirmStatus() {
+  // 模拟确认登录接口（实际应调用后端接口）
+  await new Promise(resolve => setTimeout(resolve, 200));
+  return Math.random() > 0.5; // 50%概率已确认
+}
+
+// 模拟登录逻辑 如果在客户端已确认，则会调用这个方法进行登录
+async function mockLogin() {
+  // 模拟登录成功逻辑
+  console.log('模拟调用登录接口...');
+  await new Promise(resolve => setTimeout(resolve, 500));
+  console.log('模拟调用登录成功...');
+}
+
+/** 停止所有轮询 */
+function stopPolling() {
+  if (scanPolling)
+    clearInterval(scanPolling);
+  if (confirmPolling)
+    clearInterval(confirmPolling);
+  scanPolling = null;
+  confirmPolling = null;
+}
+
+/** 刷新二维码 */
+async function handleRefresh() {
+  isExpired.value = false;
+  isScanned.value = false;
+  isConfirming.value = false;
+  stopPolling();
+  qrStart(shallowRef(60));
+  const newUrl = await fetchNewQRCode();
+  urlText.value = newUrl;
+}
+
+/** 启动扫码状态轮询 */
+function startScanPolling() {
+  scanPolling = setInterval(async () => {
+    if (!isExpired.value && !isScanned.value) {
+      const scanned = await checkScanStatus();
+      if (scanned) {
+        isScanned.value = true;
+        isConfirming.value = true;
+        confirmStart(confirmCountdownSeconds); // 启动确认倒计时
+        startConfirmPolling(); // 开始确认登录轮询
+        stopPolling(); // 停止扫码轮询
+      }
+    }
+  }, 2000); // 每2秒轮询一次
+}
+
+/** 启动确认登录轮询 */
+function startConfirmPolling() {
+  confirmPolling = setInterval(async () => {
+    if (isConfirming.value && !isExpired.value) {
+      const confirmed = await checkConfirmStatus();
+      if (confirmed) {
+        stopPolling();
+        confirmStop();
+        await mockLogin();
+        handleRefresh(); // 登录成功后刷新二维码
+      }
+    }
+  }, 2000); // 每2秒轮询一次
+}
+
+/** 组件初始化 */
+onMounted(async () => {
+  const initialUrl = await fetchNewQRCode();
+  urlText.value = initialUrl;
+  qrStart();
+  startScanPolling(); // 初始启动扫码轮询
+});
+
+/** 组件卸载清理 */
 onBeforeUnmount(() => {
-  if (timer)
+  qrStop();
-    clearInterval(timer);
+  confirmStop();
+  stopPolling();
 });
 </script>
 
 <template>
   <div class="qr-wrapper">
-    <img v-show="!isExpired" :src="qrCodeUrl" alt="登录二维码" class="qr-img">
+    <div class="tip">
-    <div v-show="isExpired" class="expired-overlay">
+      请使用手机扫码登录
+    </div>
+
+    <div class="qr-img-wrapper">
+      <el-image v-loading="!qrCodeUrl" :src="qrCodeUrl" alt="登录二维码" class="qr-img">
+        <template #error>
+          <el-icon><IconPicture /></el-icon>
+        </template>
+      </el-image>
+
+      <!-- 过期覆盖层 -->
+      <div v-if="isExpired" class="expired-overlay" @click.stop="handleRefresh">
         <div class="expired-content">
-        <p>二维码已过期</p>
+          <p class="expired-text">
-        <button class="refresh-btn" @click="handleRefresh">
+            二维码失效
-          刷新二维码
+          </p>
-        </button>
+          <el-button class="refresh-btn" link>
+            <el-icon><Refresh /></el-icon>
+            点击刷新
+          </el-button>
+        </div>
+      </div>
+
+      <!-- 扫码成功覆盖层 -->
+      <div v-if="isScanned && !isExpired" class="scanned-overlay">
+        <div class="scanned-content">
+          <p class="scanned-text">
+            <el-icon class="success-icon">
+              <Check />
+            </el-icon>
+            已扫码
+          </p>
+
+          <p class="scanned-text">
+            请在手机端确认登录
+          </p>
         </div>
       </div>
-    <div v-show="!isExpired" class="countdown">
-      剩余时间：{{ countdown }}秒
     </div>
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .qr-wrapper {
-  position: relative;
+  display: flex;
-  text-align: center;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+
+  .tip {
+    font-size: 16px;
+    font-weight: 500;
+    color: #303133;
   }
 
+  .qr-img-wrapper {
+    position: relative;
+    width: 180px;
+    height: 180px;
+    border-radius: 16px;
+    overflow: hidden;
+    padding: 12px;
+    border: 1px solid #f0f2f5;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+
     .qr-img {
-  width: 240px;
+      width: 100%;
-  height: 240px;
+      height: 100%;
-  margin-bottom: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .el-icon {
+        font-size: 18px;
+        color: #909399;
+      }
     }
 
-.expired-overlay {
+    .expired-overlay,
+    .scanned-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-  background: rgba(255, 255, 255, 0.9);
       display: flex;
       align-items: center;
       justify-content: center;
-  border-radius: 8px;
+      border-radius: 16px;
     }
 
+    .expired-overlay {
+      background: hsla(0, 0%, 100%, 0.95);
+      cursor: pointer;
+
       .expired-content {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
         text-align: center;
+
+        .expired-text {
+          font-size: 14px;
+          color: #909399;
+        }
+      }
     }
 
-.refresh-btn {
+    .scanned-overlay {
-  margin-top: 16px;
+      background: hsla(120, 60%, 97%, 0.95);
-  padding: 8px 16px;
+      cursor: default;
-  background: #409eff;
+
-  color: white;
+      .scanned-content {
-  border: none;
+        display: flex;
-  border-radius: 4px;
+        flex-direction: column;
-  cursor: pointer;
+        gap: 8px;
+        align-items: center;
+
+        .success-icon {
+          font-size: 18px;
+          color: #67c23a;
         }
 
-.countdown {
+        .scanned-text {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          gap: 8px;
           color: #606266;
         }
+
+        .countdown-text {
+          font-size: 12px;
+          color: #909399;
+        }
+      }
+    }
+  }
+}
 </style>

src/components/LoginDialog/index.vue

@@ -1,158 +1,290 @@
-<!-- 优化高度稳定性的毛玻璃弹框组件 -->
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import logoPng from '@/assets/images/logo.png';
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import AccountPassword from './components/FormLogin/AccountPassword.vue';
 import QrCodeLogin from './components/QrCodeLogin/index.vue';
 
+// 使用 defineModel 定义双向绑定的 visible（需 Vue 3.4+）
+const visible = defineModel<boolean>('visible');
+const showMask = ref(false); // 控制遮罩层显示的独立状态
 const isQrMode = ref(false);
-const isDialogVisible = ref(true);
 
+// 监听 visible 变化，控制遮罩层显示时机
+watch(
+  visible,
+  (newVal) => {
+    if (newVal) {
+      // 恢复默认
+      isQrMode.value = false;
+      // 显示时立即展示遮罩
+      showMask.value = true;
+    }
+  },
+  { immediate: true },
+);
+
+// 切换登录模式
 function toggleLoginMode() {
   isQrMode.value = !isQrMode.value;
 }
 
-function refreshQr() {
+// 点击遮罩层关闭对话框（触发过渡动画）
-  console.log('Refreshing QR code');
+function handleMaskClick() {
+  visible.value = false; // 触发离开动画
+}
+
+// 过渡动画结束回调
+function onAfterLeave() {
+  if (!visible.value) {
+    showMask.value = false; // 动画结束后隐藏遮罩
+  }
 }
 </script>
 
 <template>
-  <div v-show="isDialogVisible" class="mask">
+  <!-- 使用 Teleport 将内容传送至 body -->
-    <div class="glass-dialog">
+  <Teleport to="body">
+    <div v-show="showMask" class="mask" @click.self="handleMaskClick">
+      <!-- 仅对弹框应用过渡动画 -->
+      <Transition name="dialog-zoom" @after-leave="onAfterLeave">
+        <div v-show="visible" class="glass-dialog">
           <div class="left-section">
-        <div class="logo">
+            <div class="logo-wrap">
-          <img :src="logoPng" alt="通义" class="logo-img">
+              <img :src="logoPng" class="logo-img">
+              <span class="logo-text"> Element Plus X</span>
             </div>
             <div class="ad-banner">
-          <h3>下载豆包电脑版</h3>
+              <SvgIcon name="p-bangong" class-name="animate-up-down" />
-          <p>你的全能AI助手，助力每日工作学习</p>
-          <button class="download-btn">
-            下载电脑版
-          </button>
             </div>
           </div>
           <div class="right-section">
-        <div class="mode-toggle" @click="toggleLoginMode">
+            <div class="mode-toggle" @click.stop="toggleLoginMode">
-          {{ isQrMode ? "切换到账号登录" : "切换到扫码登录" }}
+              <SvgIcon v-if="!isQrMode" name="erweimadenglu" />
+              <SvgIcon v-else name="zhanghaodenglu" />
             </div>
             <div class="content-wrapper">
-          <div v-if="!isQrMode" class="form-container">
+              <span class="content-title"> 登录后免费使用完整功能 </span>
-            <div class="form-box">
+
-              <slot name="form" />
+              <div v-if="!isQrMode" class="form-box">
+                <!-- 表单容器，父组件可以自定定义表单插槽 -->
+                <slot name="form">
+                  <!-- 父组件不用插槽则显示默认表单 默认账号密码登录 -->
+                  <div class="form-container">
+                    <el-divider content-position="center">
+                      账号密码登录
+                    </el-divider>
+                    <AccountPassword />
                   </div>
+                </slot>
               </div>
               <div v-else class="qr-container">
-            <QrCodeLogin @refresh="refreshQr" />
+                <QrCodeLogin />
               </div>
             </div>
           </div>
         </div>
+      </Transition>
     </div>
+  </Teleport>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+/* 动画样式（仅作用于弹框） */
+.dialog-zoom-enter-active,
+.dialog-zoom-leave-active {
+  transition: all 0.3s ease-in-out;
+  transform-origin: center;
+}
+
+.dialog-zoom-enter-from,
+.dialog-zoom-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.dialog-zoom-enter-to,
+.dialog-zoom-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* 遮罩层样式 */
 .mask {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
-  background: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(3px);
-  z-index: 999;
+  z-index: 99999;
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
+  user-select: none;
+  opacity: 1;
+  transition: opacity 0.3s;
 }
 
+.mask[hidden] {
+  opacity: 0;
+}
+
+/* 对话框容器样式 */
 .glass-dialog {
   display: flex;
-  width: 800px;
+  width: fit-content;
-  height: 500px; /* 固定高度 */
+  height: var(--login-dialog-height);
   background-color: #ffffff;
-  backdrop-filter: blur(12px);
+  border-radius: var(--login-dialog-border-radius);
-  border-radius: 24px;
+  overflow: hidden;
-  padding: 32px;
+  padding: var(--login-dialog-padding);
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
   z-index: 1000;
   max-width: 90%;
-  /* 移除max-height限制，保持固定高度 */
 }
 
+/* 以下样式与原代码一致，未修改 */
 .left-section {
-  flex: 1;
+  width: calc(var(--login-dialog-width) / 2);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 24px;
+  padding: var(--login-dialog-section-padding);
-  background: linear-gradient(135deg, #f0f5ff, #e6f0ff);
+  background: linear-gradient(
-  border-radius: 24px;
+    233deg,
+    rgba(113, 161, 255, 0.6) 17.67%,
+    rgba(154, 219, 255, 0.6) 70.4%
+  );
+}
+
+.left-section .logo-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 24px;
+  gap: 8px;
+}
+
+.left-section .logo-wrap .logo-img {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  padding: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
+  background: var(--login-dialog-logo-background);
+}
+
+.left-section .logo-wrap .logo-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--login-dialog-logo-text-color);
+}
+
+.left-section .ad-banner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.left-section .ad-banner .svg-icon {
+  position: absolute;
+  width: 100%;
+  height: 310px;
 }
 
 .right-section {
-  flex: 1;
+  width: calc(var(--login-dialog-width) / 2);
   position: relative;
-  padding: 24px;
+  padding: var(--login-dialog-section-padding);
   display: flex;
   flex-direction: column;
 }
 
-/* 内容包装器：用于控制滚动 */
+.right-section .content-wrapper {
-.content-wrapper {
   flex: 1;
-  overflow-y: auto; /* 内容过多时滚动 */
+  overflow: hidden;
   padding: 8px 0;
 }
 
-.mode-toggle {
+.right-section .content-title {
+  position: absolute;
+  width: 100%;
+  font-size: 20px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 55px;
+}
+
+.right-section .mode-toggle {
   position: absolute;
   top: 16px;
   right: 16px;
   cursor: pointer;
-  color: #606266;
+  color: var(--login-dialog-mode-toggle-color);
   transition: color 0.3s;
+  font-size: 24px;
 }
 
-.mode-toggle:hover {
+.right-section .form-container,
-  color: #409eff;
+.right-section .qr-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
 }
 
-.form-container,
+.right-section .form-box {
-.qr-container {
+  justify-self: center;
-  margin-top: 48px;
+  align-self: center;
+  height: 100%;
+  width: 260px;
+  padding: var(--login-dialog-section-padding);
+  border-radius: var(--login-dialog-border-radius);
 }
 
-.form-box {
-  border: 1px solid #e4e7ed;
-  padding: 24px;
-  border-radius: 24px;
-}
-
-/* 媒体查询：小于800px时隐藏左侧区域 */
 @media (max-width: 800px) {
   .left-section {
-    display: none;
+    display: none !important;
   }
 
   .glass-dialog {
-    padding: 16px; /* 减少内边距但保持高度 */
+    padding: var(--login-dialog-padding);
-    height: 500px; /* 明确保持高度 */
+    height: var(--login-dialog-height);
   }
 
   .right-section {
-    padding: 16px;
+    padding: calc(var(--login-dialog-section-padding) - 8px);
-  }
-
-  .mode-toggle {
-    position: static; /* 恢复绝对定位避免遮挡内容 */
-    text-align: right;
-    margin-bottom: 12px;
   }
 
   .content-wrapper {
-    /* 小屏幕调整滚动区域内边距 */
     padding: 4px 0;
   }
 }
+
+.animate-up-down {
+  animation: upDown 5s linear 0ms infinite;
+}
+
+@keyframes upDown {
+  0% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-20px);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
 </style>

src/layouts/components/Header/components/LoginBtn.vue

@@ -1,17 +1,26 @@
 <!-- LoginBtn 登录按钮 -->
 <script setup lang="ts">
+import LoginDialog from '@/components/LoginDialog/index.vue';
+
+const isLoginDialogVisible = ref(false);
 function handleClickLogin() {
   console.log('handleClickLogin');
+  isLoginDialogVisible.value = true;
 }
 </script>
 
 <template>
+  <div class="login-btn-wrapper">
     <div
-    class="login-btn bg-#191c1f c-#fff font-size-14px rounded-8px flex-center text-overflow p-10px pl-12px pr-12px min-w-49px h-16px cursor-pointer hover:bg-#232629"
+      class="login-btn bg-#191c1f c-#fff font-size-14px rounded-8px flex-center text-overflow p-10px pl-12px pr-12px min-w-49px h-16px cursor-pointer hover:bg-#232629 select-none"
       @click="handleClickLogin"
     >
       登录
     </div>
+
+    <!-- 登录弹框 -->
+    <LoginDialog v-model:visible="isLoginDialogVisible" />
+  </div>
 </template>
 
 <style scoped lang="scss"></style>

src/layouts/components/Header/components/TitleEditing.vue

@@ -7,6 +7,9 @@ function handleClickTitle() {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     inputErrorMessage: '请输入对话名称',
+    confirmButtonClass: 'el-button--primary',
+    cancelButtonClass: 'el-button--info',
+    roundButton: true,
     inputValidator: (value) => {
       if (!value) {
         return false;

src/pages/chat/index.vue

@@ -3,7 +3,6 @@ import { Sender } from 'vue-element-plus-x';
 import { useRoute, useRouter } from 'vue-router';
 import { createSession } from '@/api';
 import { send } from '@/api/chat';
-import LoginDialog from '@/components/LoginDialog/index.vue';
 import WelecomeText from '@/components/WelecomeText/index.vue';
 import { ModelEnum } from '@/constants/enums';
 import { useUserStore } from '@/store';
@@ -16,7 +15,6 @@ const chatStore = useChatStore();
 
 const senderValue = ref('');
 const isSelect = ref(false);
-const isLoginDialogVisible = ref(false);
 
 const chatId = computed(() => Number(route.params?.id));
 if (chatId.value) {
@@ -128,9 +126,6 @@ async function handleSend() {
         </template>
       </Sender>
     </div>
-
-    <!-- 登录弹框 -->
-    <LoginDialog v-model:visible="isLoginDialogVisible" />
   </div>
 </template>
 

src/styles/element-plus.scss

@@ -11,3 +11,11 @@
   overflow: hidden;
   width: 100% !important;
 }
+
+
+// messagebox 样式
+.is-message-box {
+  .el-message-box { 
+    border-radius: 16px;
+  }
+}