feat: 新增登录

This commit is contained in:
何嘉悦 2025-05-24 00:32:38 +08:00
parent 9f1958c032
commit c3346a15c2
21 changed files with 498 additions and 189 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -51,7 +51,7 @@ export function useCollapseToggle(threshold: number = COLLAPSE_THRESHOLD) {
// 使用示例与特性说明 // 使用示例与特性说明
// <script setup lang="ts"> // <script setup lang="ts">
// import { useCollapseToggle } from '@/composables/useCollapseToggle'; // import { useCollapseToggle } from '@/hooks/useCollapseToggle';
// import { COLLAPSE_THRESHOLD } from '@/config/index'; (可传,不传入全局配置走) // import { COLLAPSE_THRESHOLD } from '@/config/index'; (可传,不传入全局配置走)
// const { changeCollapseIcon } = useCollapseToggle(designStore, COLLAPSE_THRESHOLD); // const { changeCollapseIcon } = useCollapseToggle(designStore, COLLAPSE_THRESHOLD);
// </script> // </script>

View File

@ -76,8 +76,9 @@ export function useSafeArea(options: SafeAreaOptions): { isInSafeArea: Ref<boole
// 使用示例 // 使用示例
// 外部组件中 // 外部组件中
// const isListening = ref(false); // 响应式开关 // import { useSafeArea } from '@/hooks/useSafeArea';
// const isListening = ref(false); // 响应式开关
// const { isInSafeArea } = useSafeArea({ // const { isInSafeArea } = useSafeArea({
// direction: 'left', // direction: 'left',
// size: 50, // size: 50,

View File

@ -30,7 +30,7 @@ export function useScreenStore() {
// 使用步骤 // 使用步骤
/** 适配移动端开始 */ /** 适配移动端开始 */
// import { useScreenStore } from "@/hooks/screen/index.ts"; // import { useScreenStore } from "@/hooks/useScreen";
// 获取当前为[移动端、IPad、PC端]仓库,可以使用 watchEffect(() => {}) 进行监听。 // 获取当前为[移动端、IPad、PC端]仓库,可以使用 watchEffect(() => {}) 进行监听。
// const { isMobile } = useScreenStore(); // const { isMobile } = useScreenStore();
/** 适配移动端结束 */ /** 适配移动端结束 */

View File

@ -0,0 +1,36 @@
import { ref } from 'vue';
type TimeGreeting = '凌晨' | '清晨' | '早上' | '中午' | '下午' | '傍晚' | '晚上';
// 时间分段配置按顺序排列find会返回第一个匹配项
const timeRanges: Array<[start: number, end: number, label: TimeGreeting]> = [
[0, 5, '凌晨'],
[5, 7, '清晨'],
[7, 12, '早上'],
[12, 14, '中午'],
[14, 18, '下午'],
[18, 21, '傍晚'],
[21, 24, '晚上'],
];
/**
* Vue组合式函数
* @returns
*/
export function useTimeGreeting() {
// 直接计算初始值(合并初始化逻辑)
const currentHour = new Date().getHours();
const greeting = timeRanges.find(([s, e]) => currentHour >= s && currentHour < e)?.[2] || '晚上';
// 使用ref保持响应式即使不更新组件仍可正确绑定
return ref<TimeGreeting>(greeting);
}
// 示例用法在Vue组件中
// <script setup lang="ts">
// import { useTimeGreeting } from '@/hooks/useTimeGreeting';
// const timeGreeting = useTimeGreeting();
// </script>
// <template>
// <div>{{ timeGreeting }}好,欢迎~</div>
// </template>

View File

@ -44,8 +44,9 @@ useWindowWidthObserver();
<style lang="scss" scoped> <style lang="scss" scoped>
.layout-container { .layout-container {
width: 100%; width: 100%;
height: 100%; height: 100vh;
position: relative; position: relative;
overflow: hidden;
.layout-header { .layout-header {
padding: 0; padding: 0;
@ -53,6 +54,7 @@ useWindowWidthObserver();
.layout-main { .layout-main {
padding: 0; padding: 0;
height: 100%;
} }
.layout-container-main { .layout-container-main {

View File

@ -1,12 +1,19 @@
<!-- Aside 侧边栏 --> <!-- Aside 侧边栏 -->
<script setup lang="ts"> <script setup lang="ts">
import type { GroupableOptions } from 'vue-element-plus-x/types/Conversations'; import type { GroupableOptions } from 'vue-element-plus-x/types/Conversations';
import { useRoute } from 'vue-router';
import logo from '@/assets/images/logo.png'; import logo from '@/assets/images/logo.png';
import Collapse from '@/layouts/components/Header/components/Collapse.vue'; import Collapse from '@/layouts/components/Header/components/Collapse.vue';
import { useDesignStore } from '@/store'; import { useDesignStore } from '@/store';
import { useChatStore } from '@/store/modules/chat';
const route = useRoute();
const chatStore = useChatStore();
const designStore = useDesignStore(); const designStore = useDesignStore();
const chatId = computed(() => Number(route.params?.id));
const conversationsList = computed(() => chatStore.chatMap[chatId.value] ?? []);
/* 创建会话 开始 */ /* 创建会话 开始 */
function handleCreatChat() { function handleCreatChat() {
console.log('创建新会话'); console.log('创建新会话');
@ -15,76 +22,6 @@ function handleCreatChat() {
/* 会话组件 开始 */ /* 会话组件 开始 */
const active = ref('m1'); const active = ref('m1');
const conversationsList = ref([
{
key: 'm1',
label: '菜单测试项目 1',
group: '工作',
},
{
key: 'm2',
label: '菜单测试项目 2',
disabled: true,
group: '工作',
},
{
key: 'm3',
label: '菜单测试项目 3',
group: '工作',
},
{
key: 'm4',
label: '菜单测试项目 4',
group: '学习',
},
{
key: 'm5',
label: '菜单测试项目 5',
group: '学习',
},
{
key: 'm6',
label: '菜单测试项目 6',
group: '学习',
},
{
key: 'm7',
label: '菜单测试项目 7',
group: '学习',
},
{
key: 'm8',
label: '菜单测试项目 8',
group: '个人',
},
{
key: 'm9',
label: '菜单测试项目 9',
group: '个人',
},
{
key: 'm10',
label: '菜单测试项目 10',
group: '个人',
},
{
key: 'm11',
label: '菜单测试项目 11',
group: '个人',
},
{
key: 'm12',
label: '菜单测试项目 12',
},
{
key: 'm13',
label: '菜单测试项目 13',
},
{
key: 'm14',
label: '菜单测试项目 14',
},
]);
// //
const customGroupOptions: GroupableOptions = { const customGroupOptions: GroupableOptions = {

View File

@ -54,10 +54,10 @@ onMounted(() => {
<!-- 右边 --> <!-- 右边 -->
<div class="right-box flex h-full items-center pr-20px flex-shrink-0 mr-auto flex-row"> <div class="right-box flex h-full items-center pr-20px flex-shrink-0 mr-auto flex-row">
<!-- <Avatar v-if="userStore.token" /> --> <Avatar v-if="userStore.token" />
<!-- <LoginBtn v-else /> --> <LoginBtn v-else />
<Avatar /> <!-- <Avatar />
<LoginBtn /> <LoginBtn /> -->
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,84 +0,0 @@
<!-- 对话首页 -->
<script setup lang="ts">
const senderValue = ref('');
const isSelect = ref(false);
function handleSend() {
console.log(senderValue.value);
}
</script>
<template>
<div class="chat-home-container">
<div class="chat-home-wrap">
<div class="chat-home-welecome">
<div
class="welecome-text min-h-45px text-center mt-0px mr-auto ml-auto mb-32px font-size-32px text-align-center font-600"
>
早上好Hjy
</div>
</div>
<Sender
v-model="senderValue"
class="chat-home-sender"
:auto-size="{
maxRows: 9,
minRows: 3,
}"
variant="updown"
clearable
allow-speech
@submit="handleSend"
>
<template #prefix>
<div class="flex-1 flex items-center gap-8px flex-none w-fit overflow-hidden">
<div
class="flex items-center gap-4px px-12px py-8px rounded-15px cursor-pointer font-size-12px border-1px border-gray border-solid hover:bg-[rgba(0,0,0,.04)]"
>
<el-icon>
<Paperclip />
</el-icon>
</div>
<div
:class="{ isSelect }"
class="flex items-center gap-4px px-10px py-8px rounded-15px cursor-pointer font-size-12px border-1px border-gray border-solid hover:bg-[rgba(0,0,0,.04)]"
@click="isSelect = !isSelect"
>
<el-icon>
<ElementPlus />
</el-icon>
<span>深度思考</span>
</div>
</div>
</template>
</Sender>
</div>
</div>
</template>
<style scoped lang="scss">
.chat-home-container {
padding: 0 16px;
width: calc(100% - 32px);
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
height: calc(100vh - var(--header-container-default-heigth));
.chat-home-wrap {
width: 100%;
max-width: 800px;
min-height: 450px;
display: flex;
flex-direction: column;
align-items: center;
// background-color: antiquewhite;
.chat-home-sender {
width: 100%;
}
}
}
</style>

View File

@ -1,19 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import { BubbleList, Sender } from 'vue-element-plus-x'; import { Sender } from 'vue-element-plus-x';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { createSession } from '@/api'; import { createSession } from '@/api';
import { send } from '@/api/chat'; 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 { ModelEnum } from '@/constants/enums';
import { useUserStore } from '@/store'; import { useUserStore } from '@/store';
import { useChatStore } from '@/store/modules/chat'; import { useChatStore } from '@/store/modules/chat';
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const chatId = computed(() => Number(route.params?.id));
const senderValue = ref('');
const userStore = useUserStore(); const userStore = useUserStore();
const chatStore = useChatStore(); const chatStore = useChatStore();
const chatList = computed(() => chatStore.chatMap[chatId.value] ?? []);
const senderValue = ref('');
const isSelect = ref(false);
const isLoginDialogVisible = ref(false);
const chatId = computed(() => Number(route.params?.id));
if (chatId.value) { if (chatId.value) {
chatStore.requestChatList(chatId.value); chatStore.requestChatList(chatId.value);
} }
@ -83,12 +88,76 @@ async function handleSend() {
</script> </script>
<template> <template>
<div class="chat-container"> <div class="chat-home-container">
<BubbleList :list="chatList"> <div class="chat-home-wrap">
<template #content="{ item }"> <WelecomeText />
{{ item.content }} <Sender
v-model="senderValue"
class="chat-home-sender"
:auto-size="{
maxRows: 9,
minRows: 3,
}"
:loading="loading"
variant="updown"
clearable
allow-speech
@submit="handleSend"
>
<template #prefix>
<div class="flex-1 flex items-center gap-8px flex-none w-fit overflow-hidden">
<div
class="flex items-center gap-4px px-12px py-8px rounded-15px cursor-pointer font-size-12px border-1px border-gray border-solid hover:bg-[rgba(0,0,0,.04)]"
>
<el-icon>
<Paperclip />
</el-icon>
</div>
<div
:class="{ isSelect }"
class="flex items-center gap-4px px-10px py-8px rounded-15px cursor-pointer font-size-12px border-1px border-gray border-solid hover:bg-[rgba(0,0,0,.04)]"
@click="isSelect = !isSelect"
>
<el-icon>
<ElementPlus />
</el-icon>
<span>深度思考</span>
</div>
</div>
</template> </template>
</BubbleList> </Sender>
<Sender v-model="senderValue" :loading="loading" @submit="handleSend" /> </div>
<!-- 登录弹框 -->
<LoginDialog v-model:visible="isLoginDialogVisible" />
</div> </div>
</template> </template>
<style lang="scss" scoped>
.chat-home-container {
padding: 0 16px;
width: calc(100% - 32px);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
overflow-anchor: none;
.chat-home-wrap {
position: relative;
width: 100%;
max-width: 800px;
min-height: 450px;
display: flex;
flex-direction: column;
align-items: center;
.chat-home-sender {
width: 100%;
}
}
}
</style>

View File

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { LoginDTO } from '@/api/auth/types';
import type { FormInstance } from 'element-plus'; import type { FormInstance } from 'element-plus';
import { login } from '@/api'; import type { LoginDTO } from '@/api/auth/types';
import { useUserStore } from '@/store';
import { reactive, ref } from 'vue'; import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { login } from '@/api';
import { useUserStore } from '@/store';
const userStore = useUserStore(); const userStore = useUserStore();

View File

@ -5,24 +5,19 @@ import { jwtGuard } from './permissions';
const routes: Readonly<RouteRecordRaw>[] = [ const routes: Readonly<RouteRecordRaw>[] = [
{ {
path: '/', path: '/',
redirect: '/chat', redirect: 'chat',
component: () => import('@/layouts/index.vue'), component: () => import('@/layouts/index.vue'),
children: [ children: [
{ {
path: '', path: '/chat',
name: 'chat',
component: () => import('@/pages/chat/index.vue'),
},
{
path: '/chat:id',
name: 'chatWithoutId', name: 'chatWithoutId',
component: () => import('@/pages/chat/index.vue'), component: () => import('@/pages/chat/index.vue'),
}, },
{
path: ':id',
name: '/chat',
component: () => import('@/pages/chat/index.vue'),
},
{
path: '/chat/home',
name: 'chatHome',
component: () => import('@/pages/chat/home/index.vue'),
},
], ],
}, },
{ {

View File

@ -7,5 +7,6 @@ store.use(piniaPluginPersistedstate);
export default store; export default store;
// export * from './modules/chat';
export * from './modules/design'; export * from './modules/design';
export * from './modules/user'; export * from './modules/user';

View File

@ -5,3 +5,9 @@
} }
} }
} }
// el 弹框不知道为啥宽度会变大
.el-popup-parent--hidden {
overflow: hidden;
width: 100% !important;
}

View File

@ -1,3 +1,4 @@
@use './media.scss';
@use './btn-style.scss'; @use './btn-style.scss';
@use 'reset-css'; @use 'reset-css';
@use './element-plus.scss'; @use './element-plus.scss';

14
src/styles/media.scss Normal file
View File

@ -0,0 +1,14 @@
// // 媒体查询
// @media (min-width: 400px) and (max-width: 599px) {
// // 设置欢迎语的底部距离
// .welcome-text {
// margin-bottom: 28px;
// }
// }
// @media (min-width: 600px) {
// .welcome-text {
// margin-bottom: 32px;
// }
// }

View File

@ -7,3 +7,4 @@
} }

12
types/components.d.ts vendored
View File

@ -3,22 +3,32 @@
// Generated by unplugin-vue-components // Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399 // Read more: https://github.com/vuejs/core/pull/3399
// biome-ignore lint: disable // biome-ignore lint: disable
export {}; export {}
/* prettier-ignore */ /* prettier-ignore */
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
Components: typeof import('./../src/components/LoginDialog/components/index.vue')['default']
ElAvatar: typeof import('element-plus/es')['ElAvatar'] ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElButton: typeof import('element-plus/es')['ElButton']
ElContainer: typeof import('element-plus/es')['ElContainer'] ElContainer: typeof import('element-plus/es')['ElContainer']
ElEmpty: typeof import('element-plus/es')['ElEmpty'] ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader'] ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon'] ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage'] ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
ElMain: typeof import('element-plus/es')['ElMain'] ElMain: typeof import('element-plus/es')['ElMain']
GlassDialog: typeof import('./../src/components/LoginDialog/components/GlassDialog/index.vue')['default']
IconSelect: typeof import('./../src/components/IconSelect/index.vue')['default'] IconSelect: typeof import('./../src/components/IconSelect/index.vue')['default']
LoginDialog: typeof import('./../src/components/LoginDialog/index.vue')['default']
Popover: typeof import('./../src/components/Popover/index.vue')['default'] Popover: typeof import('./../src/components/Popover/index.vue')['default']
QrCodeLogin: typeof import('./../src/components/LoginDialog/components/QrCodeLogin/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
SvgIcon: typeof import('./../src/components/SvgIcon/index.vue')['default'] SvgIcon: typeof import('./../src/components/SvgIcon/index.vue')['default']
VerificationCode: typeof import('./../src/components/LoginDialog/components/FormLogin/VerificationCode.vue')['default']
WelecomeText: typeof import('./../src/components/WelecomeText/index.vue')['default']
} }
} }