feat: ✨ 新增登录
This commit is contained in:
parent
9f1958c032
commit
c3346a15c2
@ -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>
|
||||||
96
src/components/LoginDialog/components/QrCodeLogin/index.vue
Normal file
96
src/components/LoginDialog/components/QrCodeLogin/index.vue
Normal 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>
|
||||||
158
src/components/LoginDialog/index.vue
Normal file
158
src/components/LoginDialog/index.vue
Normal 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>
|
||||||
20
src/components/WelecomeText/index.vue
Normal file
20
src/components/WelecomeText/index.vue
Normal 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>
|
||||||
@ -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>
|
||||||
|
|||||||
@ -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,
|
||||||
|
|||||||
@ -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();
|
||||||
/** 适配移动端结束 */
|
/** 适配移动端结束 */
|
||||||
|
|||||||
36
src/hooks/useTimeGreeting.ts
Normal file
36
src/hooks/useTimeGreeting.ts
Normal 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>
|
||||||
@ -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 {
|
||||||
|
|||||||
@ -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 = {
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
|
||||||
@ -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
|
||||||
</template>
|
v-model="senderValue"
|
||||||
</BubbleList>
|
class="chat-home-sender"
|
||||||
<Sender v-model="senderValue" :loading="loading" @submit="handleSend" />
|
: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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
</Sender>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 登录弹框 -->
|
||||||
|
<LoginDialog v-model:visible="isLoginDialogVisible" />
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
|||||||
@ -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();
|
||||||
|
|
||||||
|
|||||||
@ -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'),
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@ -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';
|
||||||
|
|||||||
@ -5,3 +5,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// el 弹框不知道为啥宽度会变大
|
||||||
|
.el-popup-parent--hidden {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
@ -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
14
src/styles/media.scss
Normal 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;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
@ -7,3 +7,4 @@
|
|||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
12
types/components.d.ts
vendored
12
types/components.d.ts
vendored
@ -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']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user