feat: ✨ 新增登录
This commit is contained in:
何嘉悦
@@ -0,0 +1,46 @@
|
||||
<!-- 手机号验证码登录表单 -->
|
||||
<script lang="ts" setup>
|
||||
// 表单逻辑由用户自行实现
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="custom-form">
|
||||
<!-- 此处放入用户自己的表单组件 -->
|
||||
<div class="form-group">
|
||||
<label>手机号</label>
|
||||
<input type="text" placeholder="请输入手机号">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>验证码</label>
|
||||
<input type="text" placeholder="请输入验证码">
|
||||
<button>获取验证码</button>
|
||||
</div>
|
||||
<button class="login-btn">
|
||||
登录
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.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>
|
||||
@@ -0,0 +1,96 @@
|
||||
<!-- 二维码登录组件 -->
|
||||
<script lang="ts" setup>
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
const qrCodeUrl = ref('https://example.com/generate-qr'); // 实际需动态生成
|
||||
const countdown = ref(60);
|
||||
const isExpired = ref(false);
|
||||
let timer: number | null = null;
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (timer)
|
||||
clearInterval(timer);
|
||||
});
|
||||
</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>
|
||||
<div v-show="!isExpired" class="countdown">
|
||||
剩余时间：{{ countdown }}秒
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.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;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.expired-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
margin-top: 16px;
|
||||
padding: 8px 16px;
|
||||
background: #409eff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
color: #606266;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,158 @@
|
||||
<!-- 优化高度稳定性的毛玻璃弹框组件 -->
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import logoPng from '@/assets/images/logo.png';
|
||||
import QrCodeLogin from './components/QrCodeLogin/index.vue';
|
||||
|
||||
const isQrMode = ref(false);
|
||||
const isDialogVisible = ref(true);
|
||||
|
||||
function toggleLoginMode() {
|
||||
isQrMode.value = !isQrMode.value;
|
||||
}
|
||||
|
||||
function refreshQr() {
|
||||
console.log('Refreshing QR code');
|
||||
}
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="qr-container">
|
||||
<QrCodeLogin @refresh="refreshQr" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(3px);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.glass-dialog {
|
||||
display: flex;
|
||||
width: 800px;
|
||||
height: 500px; /* 固定高度 */
|
||||
background-color: #ffffff;
|
||||
backdrop-filter: blur(12px);
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
max-width: 90%;
|
||||
/* 移除max-height限制，保持固定高度 */
|
||||
}
|
||||
|
||||
.left-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
background: linear-gradient(135deg, #f0f5ff, #e6f0ff);
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.right-section {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 内容包装器：用于控制滚动 */
|
||||
.content-wrapper {
|
||||
flex: 1;
|
||||
overflow-y: auto; /* 内容过多时滚动 */
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.mode-toggle {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
cursor: pointer;
|
||||
color: #606266;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.mode-toggle:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.form-container,
|
||||
.qr-container {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.form-box {
|
||||
border: 1px solid #e4e7ed;
|
||||
padding: 24px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
/* 媒体查询：小于800px时隐藏左侧区域 */
|
||||
@media (max-width: 800px) {
|
||||
.left-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.glass-dialog {
|
||||
padding: 16px; /* 减少内边距但保持高度 */
|
||||
height: 500px; /* 明确保持高度 */
|
||||
}
|
||||
|
||||
.right-section {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.mode-toggle {
|
||||
position: static; /* 恢复绝对定位避免遮挡内容 */
|
||||
text-align: right;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
/* 小屏幕调整滚动区域内边距 */
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,20 @@
|
||||
<!-- 欢迎提示词 -->
|
||||
<script setup lang="ts">
|
||||
import { useTimeGreeting } from '@/hooks/useTimeGreeting';
|
||||
import { useUserStore } from '@/store';
|
||||
|
||||
const greeting = useTimeGreeting();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const username = computed(() => userStore.userInfo?.username ?? '我是 Element Plus X');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="welcome-text w-full flex flex-wrap items-center justify-center text-center text-lg font-semibold mb-32px mt-12px font-size-32px line-height-32px"
|
||||
>
|
||||
{{ greeting }}好，{{ username }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
Reference in New Issue
Block a user