feat: ✨ 新增登录弹框
This commit is contained in:
何嘉悦
parent
c3346a15c2
commit
698c48dc66
@ -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>
|
||||
@ -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(() => {
|
||||
countdown.value--;
|
||||
if (countdown.value <= 0) {
|
||||
isExpired.value = true;
|
||||
clearInterval(timer!);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function handleRefresh() {
|
||||
isExpired.value = false;
|
||||
countdown.value = 60;
|
||||
emit('refresh');
|
||||
startCountdown();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
startCountdown();
|
||||
// 二维码倒计时实例
|
||||
const { start: qrStart, stop: qrStop } = useCountdown(shallowRef(60), {
|
||||
interval: 1000,
|
||||
onComplete: () => {
|
||||
isExpired.value = true;
|
||||
stopPolling(); // 二维码过期时停止轮询
|
||||
},
|
||||
});
|
||||
|
||||
// 确认登录倒计时实例
|
||||
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)
|
||||
clearInterval(timer);
|
||||
qrStop();
|
||||
confirmStop();
|
||||
stopPolling();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="qr-wrapper">
|
||||
<img v-show="!isExpired" :src="qrCodeUrl" alt="登录二维码" class="qr-img">
|
||||
<div v-show="isExpired" class="expired-overlay">
|
||||
<div class="expired-content">
|
||||
<p>二维码已过期</p>
|
||||
<button class="refresh-btn" @click="handleRefresh">
|
||||
刷新二维码
|
||||
</button>
|
||||
</div>
|
||||
<div class="tip">
|
||||
请使用手机扫码登录
|
||||
</div>
|
||||
<div v-show="!isExpired" class="countdown">
|
||||
剩余时间：{{ countdown }}秒
|
||||
|
||||
<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 class="expired-text">
|
||||
二维码失效
|
||||
</p>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.qr-wrapper {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qr-img {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.expired-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
gap: 8px;
|
||||
|
||||
.expired-content {
|
||||
text-align: center;
|
||||
}
|
||||
.tip {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
margin-top: 16px;
|
||||
padding: 8px 16px;
|
||||
background: #409eff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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);
|
||||
|
||||
.countdown {
|
||||
color: #606266;
|
||||
.qr-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.el-icon {
|
||||
font-size: 18px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.expired-overlay,
|
||||
.scanned-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scanned-overlay {
|
||||
background: hsla(120, 60%, 97%, 0.95);
|
||||
cursor: default;
|
||||
|
||||
.scanned-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
.success-icon {
|
||||
font-size: 18px;
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.scanned-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
gap: 8px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.countdown-text {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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">
|
||||
<div class="glass-dialog">
|
||||
<div class="left-section">
|
||||
<div class="logo">
|
||||
<img :src="logoPng" alt="通义" class="logo-img">
|
||||
</div>
|
||||
<div class="ad-banner">
|
||||
<h3>下载豆包电脑版</h3>
|
||||
<p>你的全能AI助手，助力每日工作学习</p>
|
||||
<button class="download-btn">
|
||||
下载电脑版
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-section">
|
||||
<div class="mode-toggle" @click="toggleLoginMode">
|
||||
{{ isQrMode ? "切换到账号登录" : "切换到扫码登录" }}
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div v-if="!isQrMode" class="form-container">
|
||||
<div class="form-box">
|
||||
<slot name="form" />
|
||||
<!-- 使用 Teleport 将内容传送至 body -->
|
||||
<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-wrap">
|
||||
<img :src="logoPng" class="logo-img">
|
||||
<span class="logo-text"> Element Plus X</span>
|
||||
</div>
|
||||
<div class="ad-banner">
|
||||
<SvgIcon name="p-bangong" class-name="animate-up-down" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="qr-container">
|
||||
<QrCodeLogin @refresh="refreshQr" />
|
||||
<div class="right-section">
|
||||
<div class="mode-toggle" @click.stop="toggleLoginMode">
|
||||
<SvgIcon v-if="!isQrMode" name="erweimadenglu" />
|
||||
<SvgIcon v-else name="zhanghaodenglu" />
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<span class="content-title"> 登录后免费使用完整功能 </span>
|
||||
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</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;
|
||||
height: 500px; /* 固定高度 */
|
||||
width: fit-content;
|
||||
height: var(--login-dialog-height);
|
||||
background-color: #ffffff;
|
||||
backdrop-filter: blur(12px);
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
border-radius: var(--login-dialog-border-radius);
|
||||
overflow: hidden;
|
||||
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;
|
||||
background: linear-gradient(135deg, #f0f5ff, #e6f0ff);
|
||||
border-radius: 24px;
|
||||
padding: var(--login-dialog-section-padding);
|
||||
background: linear-gradient(
|
||||
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;
|
||||
}
|
||||
|
||||
/* 内容包装器：用于控制滚动 */
|
||||
.content-wrapper {
|
||||
.right-section .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 {
|
||||
color: #409eff;
|
||||
.right-section .form-container,
|
||||
.right-section .qr-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.form-container,
|
||||
.qr-container {
|
||||
margin-top: 48px;
|
||||
.right-section .form-box {
|
||||
justify-self: center;
|
||||
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; /* 减少内边距但保持高度 */
|
||||
height: 500px; /* 明确保持高度 */
|
||||
padding: var(--login-dialog-padding);
|
||||
height: var(--login-dialog-height);
|
||||
}
|
||||
|
||||
.right-section {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.mode-toggle {
|
||||
position: static; /* 恢复绝对定位避免遮挡内容 */
|
||||
text-align: right;
|
||||
margin-bottom: 12px;
|
||||
padding: calc(var(--login-dialog-section-padding) - 8px);
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@ -1,16 +1,25 @@
|
||||
<!-- 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 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"
|
||||
@click="handleClickLogin"
|
||||
>
|
||||
登录
|
||||
<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 select-none"
|
||||
@click="handleClickLogin"
|
||||
>
|
||||
登录
|
||||
</div>
|
||||
|
||||
<!-- 登录弹框 -->
|
||||
<LoginDialog v-model:visible="isLoginDialogVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -11,3 +11,11 @@
|
||||
overflow: hidden;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
// messagebox 样式
|
||||
.is-message-box {
|
||||
.el-message-box {
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user