From c3346a15c2307876603ceee7742dcb234c1a7bd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=95=E5=98=89=E6=82=A6?= <2834007710@qq.com>
Date: Sat, 24 May 2025 00:32:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/FormLogin/VerificationCode.vue |  46 +++++
 .../components/QrCodeLogin/index.vue          |  96 +++++++++++
 src/components/LoginDialog/index.vue          | 158 ++++++++++++++++++
 src/components/WelecomeText/index.vue         |  20 +++
 src/hooks/useCollapseToggle.ts                |   2 +-
 src/hooks/useSafeArea.ts                      |   3 +-
 src/hooks/useScreen.ts                        |   2 +-
 src/hooks/useTimeGreeting.ts                  |  36 ++++
 src/layouts/LayoutVertical/index.vue          |   4 +-
 src/layouts/components/Aside/index.vue        |  77 +--------
 src/layouts/components/Header/index.vue       |   8 +-
 src/pages/chat/home/index.vue                 |  84 ----------
 src/pages/chat/index.vue                      |  91 ++++++++--
 src/pages/login/index.vue                     |   6 +-
 src/router/index.ts                           |  19 +--
 src/store/index.ts                            |   1 +
 src/styles/element-plus.scss                  |   6 +
 src/styles/index.scss                         |   1 +
 src/styles/media.scss                         |  14 ++
 src/styles/var.scss                           |   1 +
 types/components.d.ts                         |  12 +-
 21 files changed, 498 insertions(+), 189 deletions(-)
 create mode 100644 src/components/LoginDialog/components/FormLogin/VerificationCode.vue
 create mode 100644 src/components/LoginDialog/components/QrCodeLogin/index.vue
 create mode 100644 src/components/LoginDialog/index.vue
 create mode 100644 src/components/WelecomeText/index.vue
 create mode 100644 src/hooks/useTimeGreeting.ts
 delete mode 100644 src/pages/chat/home/index.vue
 create mode 100644 src/styles/media.scss

diff --git a/src/components/LoginDialog/components/FormLogin/VerificationCode.vue b/src/components/LoginDialog/components/FormLogin/VerificationCode.vue
new file mode 100644
index 0000000..1ccc256
--- /dev/null
+++ b/src/components/LoginDialog/components/FormLogin/VerificationCode.vue
@@ -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>
diff --git a/src/components/LoginDialog/components/QrCodeLogin/index.vue b/src/components/LoginDialog/components/QrCodeLogin/index.vue
new file mode 100644
index 0000000..6a67c7e
--- /dev/null
+++ b/src/components/LoginDialog/components/QrCodeLogin/index.vue
@@ -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>
diff --git a/src/components/LoginDialog/index.vue b/src/components/LoginDialog/index.vue
new file mode 100644
index 0000000..90f1519
--- /dev/null
+++ b/src/components/LoginDialog/index.vue
@@ -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>
diff --git a/src/components/WelecomeText/index.vue b/src/components/WelecomeText/index.vue
new file mode 100644
index 0000000..f6f39cd
--- /dev/null
+++ b/src/components/WelecomeText/index.vue
@@ -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>
diff --git a/src/hooks/useCollapseToggle.ts b/src/hooks/useCollapseToggle.ts
index d9e44cf..d9109aa 100644
--- a/src/hooks/useCollapseToggle.ts
+++ b/src/hooks/useCollapseToggle.ts
@@ -51,7 +51,7 @@ export function useCollapseToggle(threshold: number = COLLAPSE_THRESHOLD) {
 
 // 使用示例与特性说明
 // <script setup lang="ts">
-// import { useCollapseToggle } from '@/composables/useCollapseToggle';
+// import { useCollapseToggle } from '@/hooks/useCollapseToggle';
 // import { COLLAPSE_THRESHOLD } from '@/config/index'; (可传，不传入全局配置走)
 // const { changeCollapseIcon } = useCollapseToggle(designStore, COLLAPSE_THRESHOLD);
 // </script>
diff --git a/src/hooks/useSafeArea.ts b/src/hooks/useSafeArea.ts
index 675d1fe..9192980 100644
--- a/src/hooks/useSafeArea.ts
+++ b/src/hooks/useSafeArea.ts
@@ -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({
 //   direction: 'left',
 //   size: 50,
diff --git a/src/hooks/useScreen.ts b/src/hooks/useScreen.ts
index b35fe26..9d5d6a2 100644
--- a/src/hooks/useScreen.ts
+++ b/src/hooks/useScreen.ts
@@ -30,7 +30,7 @@ export function useScreenStore() {
 
 // 使用步骤
 /** 适配移动端开始 */
-// import { useScreenStore } from "@/hooks/screen/index.ts";
+// import { useScreenStore } from "@/hooks/useScreen";
 // 获取当前为[移动端、IPad、PC端]仓库，可以使用 watchEffect(() => {}) 进行监听。
 // const { isMobile } = useScreenStore();
 /** 适配移动端结束 */
diff --git a/src/hooks/useTimeGreeting.ts b/src/hooks/useTimeGreeting.ts
new file mode 100644
index 0000000..e0f3202
--- /dev/null
+++ b/src/hooks/useTimeGreeting.ts
@@ -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>
diff --git a/src/layouts/LayoutVertical/index.vue b/src/layouts/LayoutVertical/index.vue
index 319b9ef..8468681 100644
--- a/src/layouts/LayoutVertical/index.vue
+++ b/src/layouts/LayoutVertical/index.vue
@@ -44,8 +44,9 @@ useWindowWidthObserver();
 <style lang="scss" scoped>
 .layout-container {
   width: 100%;
-  height: 100%;
+  height: 100vh;
   position: relative;
+  overflow: hidden;
 
   .layout-header {
     padding: 0;
@@ -53,6 +54,7 @@ useWindowWidthObserver();
 
   .layout-main {
     padding: 0;
+    height: 100%;
   }
 
   .layout-container-main {
diff --git a/src/layouts/components/Aside/index.vue b/src/layouts/components/Aside/index.vue
index 618ec9b..edf912c 100644
--- a/src/layouts/components/Aside/index.vue
+++ b/src/layouts/components/Aside/index.vue
@@ -1,12 +1,19 @@
 <!-- Aside 侧边栏 -->
 <script setup lang="ts">
 import type { GroupableOptions } from 'vue-element-plus-x/types/Conversations';
+import { useRoute } from 'vue-router';
 import logo from '@/assets/images/logo.png';
 import Collapse from '@/layouts/components/Header/components/Collapse.vue';
 import { useDesignStore } from '@/store';
+import { useChatStore } from '@/store/modules/chat';
 
+const route = useRoute();
+const chatStore = useChatStore();
 const designStore = useDesignStore();
 
+const chatId = computed(() => Number(route.params?.id));
+const conversationsList = computed(() => chatStore.chatMap[chatId.value] ?? []);
+
 /* 创建会话 开始 */
 function handleCreatChat() {
   console.log('创建新会话');
@@ -15,76 +22,6 @@ function handleCreatChat() {
 
 /* 会话组件 开始 */
 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 = {
diff --git a/src/layouts/components/Header/index.vue b/src/layouts/components/Header/index.vue
index 6eced35..454d2fa 100644
--- a/src/layouts/components/Header/index.vue
+++ b/src/layouts/components/Header/index.vue
@@ -54,10 +54,10 @@ onMounted(() => {
 
         <!-- 右边 -->
         <div class="right-box flex h-full items-center pr-20px flex-shrink-0 mr-auto flex-row">
-          <!-- <Avatar v-if="userStore.token" /> -->
-          <!-- <LoginBtn v-else /> -->
-          <Avatar />
-          <LoginBtn />
+          <Avatar v-if="userStore.token" />
+          <LoginBtn v-else />
+          <!-- <Avatar />
+          <LoginBtn /> -->
         </div>
       </div>
     </div>
diff --git a/src/pages/chat/home/index.vue b/src/pages/chat/home/index.vue
deleted file mode 100644
index 563a384..0000000
--- a/src/pages/chat/home/index.vue
+++ /dev/null
@@ -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>
diff --git a/src/pages/chat/index.vue b/src/pages/chat/index.vue
index 925805c..f0be3c0 100644
--- a/src/pages/chat/index.vue
+++ b/src/pages/chat/index.vue
@@ -1,19 +1,24 @@
 <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 { 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';
 import { useChatStore } from '@/store/modules/chat';
 
 const route = useRoute();
 const router = useRouter();
-const chatId = computed(() => Number(route.params?.id));
-const senderValue = ref('');
 const userStore = useUserStore();
 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) {
   chatStore.requestChatList(chatId.value);
 }
@@ -83,12 +88,76 @@ async function handleSend() {
 </script>
 
 <template>
-  <div class="chat-container">
-    <BubbleList :list="chatList">
-      <template #content="{ item }">
-        {{ item.content }}
-      </template>
-    </BubbleList>
-    <Sender v-model="senderValue" :loading="loading" @submit="handleSend" />
+  <div class="chat-home-container">
+    <div class="chat-home-wrap">
+      <WelecomeText />
+      <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>
+      </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>
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 4541ae2..e426694 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { LoginDTO } from '@/api/auth/types';
 import type { FormInstance } from 'element-plus';
-import { login } from '@/api';
-import { useUserStore } from '@/store';
+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();
 
diff --git a/src/router/index.ts b/src/router/index.ts
index ee82085..7cc867e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,24 +5,19 @@ import { jwtGuard } from './permissions';
 const routes: Readonly<RouteRecordRaw>[] = [
   {
     path: '/',
-    redirect: '/chat',
+    redirect: 'chat',
     component: () => import('@/layouts/index.vue'),
     children: [
       {
-        path: '',
+        path: '/chat',
+        name: 'chat',
+        component: () => import('@/pages/chat/index.vue'),
+      },
+      {
+        path: '/chat:id',
         name: 'chatWithoutId',
         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'),
-      },
     ],
   },
   {
diff --git a/src/store/index.ts b/src/store/index.ts
index 84a2a56..b0347c4 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -7,5 +7,6 @@ store.use(piniaPluginPersistedstate);
 
 export default store;
 
+// export * from './modules/chat';
 export * from './modules/design';
 export * from './modules/user';
diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
index bf47f72..0460685 100644
--- a/src/styles/element-plus.scss
+++ b/src/styles/element-plus.scss
@@ -5,3 +5,9 @@
     }
   }
 }
+
+// el 弹框不知道为啥宽度会变大
+.el-popup-parent--hidden {
+  overflow: hidden;
+  width: 100% !important;
+}
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 63035df..3161d21 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,3 +1,4 @@
+@use './media.scss';
 @use './btn-style.scss';
 @use 'reset-css';
 @use './element-plus.scss';
diff --git a/src/styles/media.scss b/src/styles/media.scss
new file mode 100644
index 0000000..c3c6f57
--- /dev/null
+++ b/src/styles/media.scss
@@ -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;
+//   }
+// }
+
diff --git a/src/styles/var.scss b/src/styles/var.scss
index c1507b3..0063f2c 100644
--- a/src/styles/var.scss
+++ b/src/styles/var.scss
@@ -7,3 +7,4 @@
   
 
 }
+
diff --git a/types/components.d.ts b/types/components.d.ts
index c62200b..1d50199 100644
--- a/types/components.d.ts
+++ b/types/components.d.ts
@@ -3,22 +3,32 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
-export {};
+export {}
 
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    Components: typeof import('./../src/components/LoginDialog/components/index.vue')['default']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    ElButton: typeof import('element-plus/es')['ElButton']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     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']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
+    ElInput: typeof import('element-plus/es')['ElInput']
     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']
+    LoginDialog: typeof import('./../src/components/LoginDialog/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']
     RouterView: typeof import('vue-router')['RouterView']
     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']
   }
 }