From 0d3d30952db163a91fabaaced4f667bff281ed9f Mon Sep 17 00:00:00 2001
From: Lexcubia <lexcubia@qq.com>
Date: Sun, 20 Apr 2025 20:49:21 +0800
Subject: [PATCH] update: Enhance mobile responsiveness and sidebar
 functionality across chat components

---
 src/layouts/MainLayout.vue          |  17 +++-
 src/views/chat/ChatHeader.vue       |  60 +++++++++++-
 src/views/chat/ChatModeSelector.vue | 137 ++++++++++++++++++++--------
 src/views/chat/index.vue            |  16 ++++
 4 files changed, 189 insertions(+), 41 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index b30bab6..6ce70b0 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="main-layout">
-    <Sidebar />
+    <Sidebar class="sidebar" />
     <main class="content-area">
       <!-- 路由视图将渲染在这里 -->
       <router-view />
@@ -28,6 +28,21 @@ import Sidebar from '../components/Sidebar.vue'
   background-color: #ffffff; /* 示例背景色 */
 }
 
+.sidebar {
+  transition: all 0.3s ease;
+}
+
+/* 移动端样式 */
+@media screen and (max-width: 768px) {
+  .sidebar {
+    display: none;
+  }
+  
+  .content-area {
+    width: 100%;
+  }
+}
+
 /* 简单的侧边栏列表样式 */
 .sidebar ul {
   list-style: none;
diff --git a/src/views/chat/ChatHeader.vue b/src/views/chat/ChatHeader.vue
index 84cd7f5..5620899 100644
--- a/src/views/chat/ChatHeader.vue
+++ b/src/views/chat/ChatHeader.vue
@@ -2,6 +2,13 @@
   <div class="chat-header">
     <div class="header-content">
       <div class="title">
+        <el-button 
+          class="mobile-sidebar-toggle" 
+          :icon="Expand"
+          @click="settingsStore.toggleSidebar"
+          text
+          v-if="isMobile"
+        />
         <span class="title-text">{{ title }}</span>
         <el-tag v-if="chatStore.currentConversation?.conversationStatus === 'typing'" 
           size="small" 
@@ -49,10 +56,10 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useChatStore } from '@/store/chat'
 import { useSettingsStore } from '@/store/settings'
-import { Delete, Setting, User } from '@element-plus/icons-vue'
+import { Delete, Setting, User, Expand } from '@element-plus/icons-vue'
 import { ElMessageBox } from 'element-plus'
 import HistoryButton from '@/components/chat/HistoryButton.vue'
 import CustomerBackground from '@/components/chat/CustomerBackground.vue'
@@ -61,6 +68,7 @@ const chatStore = useChatStore()
 const settingsStore = useSettingsStore()
 const showUserInfo = ref(false)
 const customerBackgroundRef = ref(null)
+const isMobile = ref(false)
 
 const title = computed(() => {
   const conversation = chatStore.currentConversation
@@ -101,6 +109,19 @@ const handleSettings = () => {
   // TODO: 实现设置功能
   console.log('打开设置')
 }
+
+const checkMobile = () => {
+  isMobile.value = window.innerWidth <= 768
+}
+
+onMounted(() => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -121,7 +142,38 @@ const handleSettings = () => {
   .title {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 4px;
+    height: 100%;
+    
+    .mobile-sidebar-toggle {
+      height: 24px;
+      width: 24px;
+      padding: 0;
+      color: #666;
+      transition: all 0.3s ease;
+      border: none;
+      background: transparent !important;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: -4px;
+      
+      &:hover {
+        color: #07c160;
+        background: transparent !important;
+      }
+
+      &:focus {
+        outline: none;
+        box-shadow: none;
+      }
+
+      :deep(.el-icon) {
+        font-size: 18px;
+        margin-top: 1px;
+      }
+    }
     
     .title-text {
       font-size: 16px;
@@ -131,6 +183,8 @@ const handleSettings = () => {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      line-height: 24px;
+      padding-top: 1px;
     }
 
     .status-tag {
diff --git a/src/views/chat/ChatModeSelector.vue b/src/views/chat/ChatModeSelector.vue
index b33eb51..e7c9447 100644
--- a/src/views/chat/ChatModeSelector.vue
+++ b/src/views/chat/ChatModeSelector.vue
@@ -1,41 +1,49 @@
 <template>
-  <div class="mode-selector" :class="{ 'collapsed': settingsStore.sidebarCollapsed }">
-    <div class="mode-header">
-      <h3 class="mode-title">对话场景</h3>
-      <div class="header-actions">
-        <HistoryButton v-if="!settingsStore.sidebarCollapsed" :icon-only="true" />
-        <el-button 
-          class="collapse-btn" 
-          :icon="settingsStore.sidebarCollapsed ? Expand : Fold" 
-          text 
-          bg
-          @click="settingsStore.toggleSidebar"
-        />
+  <div>
+    <div 
+      class="mode-selector-backdrop" 
+      :class="{ visible: !settingsStore.sidebarCollapsed }"
+      @click="settingsStore.toggleSidebar"
+      v-if="isMobile"
+    ></div>
+    <div class="mode-selector" :class="{ 'collapsed': settingsStore.sidebarCollapsed }">
+      <div class="mode-header">
+        <h3 class="mode-title">对话场景</h3>
+        <div class="header-actions">
+          <HistoryButton v-if="!settingsStore.sidebarCollapsed" :icon-only="true" />
+          <el-button 
+            class="collapse-btn" 
+            :icon="settingsStore.sidebarCollapsed ? Expand : Fold" 
+            text 
+            bg
+            @click="settingsStore.toggleSidebar"
+          />
+        </div>
       </div>
-    </div>
-    <div class="mode-list">
-      <div
-        v-for="mode in chatModes"
-        :key="mode.id"
-        :class="['mode-item', { active: chatStore.currentMode === mode.id }]"
-        @click="selectMode(mode.id)"
-      >
-        <span class="emoji-icon">{{ mode.icon }}</span>
-        <span v-if="!settingsStore.sidebarCollapsed" class="mode-name">{{ mode.name }}</span>
-        <ModeSetting v-if="!settingsStore.sidebarCollapsed" @command="(cmd) => handleModeSettings(cmd, mode.id)">
-          <el-dropdown-item command="edit">
-            <el-icon><EditPen /></el-icon>
-            编辑设置
-          </el-dropdown-item>
-          <el-dropdown-item command="reset">
-            <el-icon><RefreshRight /></el-icon>
-            重置设置
-          </el-dropdown-item>
-          <el-dropdown-item command="delete" divided>
-            <el-icon><Delete /></el-icon>
-            删除场景
-          </el-dropdown-item>
-        </ModeSetting>
+      <div class="mode-list">
+        <div
+          v-for="mode in chatModes"
+          :key="mode.id"
+          :class="['mode-item', { active: chatStore.currentMode === mode.id }]"
+          @click="selectMode(mode.id)"
+        >
+          <span class="emoji-icon">{{ mode.icon }}</span>
+          <span v-if="!settingsStore.sidebarCollapsed" class="mode-name">{{ mode.name }}</span>
+          <ModeSetting v-if="!settingsStore.sidebarCollapsed" @command="(cmd) => handleModeSettings(cmd, mode.id)">
+            <el-dropdown-item command="edit">
+              <el-icon><EditPen /></el-icon>
+              编辑设置
+            </el-dropdown-item>
+            <el-dropdown-item command="reset">
+              <el-icon><RefreshRight /></el-icon>
+              重置设置
+            </el-dropdown-item>
+            <el-dropdown-item command="delete" divided>
+              <el-icon><Delete /></el-icon>
+              删除场景
+            </el-dropdown-item>
+          </ModeSetting>
+        </div>
       </div>
     </div>
   </div>
@@ -44,7 +52,7 @@
 <script setup>
 import { useChatStore } from '@/store/chat'
 import { useSettingsStore } from '@/store/settings'
-import { computed } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { Delete, EditPen, RefreshRight, Expand, Fold } from '@element-plus/icons-vue'
 import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElButton, ElMessageBox } from 'element-plus'
 import ModeSetting from '@/components/chat/ModeSetting.vue'
@@ -117,6 +125,21 @@ const handleModeSettings = (command, modeId) => {
       break
   }
 }
+
+const isMobile = ref(false)
+
+const checkMobile = () => {
+  isMobile.value = window.innerWidth <= 768
+}
+
+onMounted(() => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -139,6 +162,8 @@ $hover-color-dark: #2d2d2d;
   padding: 0;
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
+  position: relative;
+  z-index: 1000;
 
   &.collapsed {
     width: 64px;
@@ -349,6 +374,44 @@ $hover-color-dark: #2d2d2d;
   }
 }
 
+/* 移动端样式 */
+@media screen and (max-width: 768px) {
+  .mode-selector {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    transform: translateX(-100%);
+    z-index: 1000;
+
+    &.collapsed {
+      transform: translateX(-240px);
+    }
+
+    &:not(.collapsed) {
+      transform: translateX(0);
+    }
+  }
+
+  .mode-selector-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+
+    &.visible {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
+
 // @media (prefers-color-scheme: dark) {
 //   .mode-selector {
 //     background: $background-color-dark;
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index c6c2d66..278b5a5 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -55,4 +55,20 @@ const handleModeChange = (mode) => {
   background-color: #f5f5f5;
   position: relative;
 }
+
+/* 移动端样式 */
+@media screen and (max-width: 768px) {
+  .chat-container {
+    position: relative;
+  }
+
+  .chat-wrapper {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
 </style>