yangg vor 3 Wochen
Ursprung
Commit
24ffad7553
1 geänderte Dateien mit 32 neuen und 16 gelöschten Zeilen
  1. 32 16
      src/views/report.vue

+ 32 - 16
src/views/report.vue

@@ -29,7 +29,7 @@
             <img v-else class="theme-icon"  src="../assets/night2.png" alt="切换到深色模式">
           </transition>
         </div>
-        <div class="user-info" @click="toggleDropdown">
+        <div class="user-info" v-if="!isMobile" @click="toggleDropdown">
           <div class="user-name">商户名称:{{ userInfo.merchant?.merchant_name || '未登录用户' }}</div>
           <div class="user-name">当前用户:{{ userInfo.username || '未登录用户' }}</div>
           <!-- <div class="user-role">{{ userInfo.role || '未设置角色' }}</div> -->
@@ -276,7 +276,7 @@
           <div class="search-toggle-item">
             <div class="toggle-content">
               <GlobalOutlined />
-              <span class="toggle-text" v-show="!isCompact">互联网</span>
+              <span class="toggle-text" >互联网</span><!-- v-show="!isCompact" -->
               <div class="toggle-switch">
                 <input
                   type="checkbox"
@@ -300,7 +300,7 @@
           <div class="search-toggle-item">
             <div class="toggle-content">
               <DatabaseOutlined />
-              <span class="toggle-text" v-show="!isCompact">知识库</span>
+              <span class="toggle-text" >知识库</span><!-- v-show="!isCompact" -->
               <div class="toggle-switch">
                 <input
                   type="checkbox"
@@ -498,7 +498,8 @@
       </div>
     </div>
 
-    <div 
+    <div  
+    v-if="!isMobile"
       class="right_menu" 
       :class="{ 
         collapsed: !isRightMenuVisible
@@ -849,11 +850,19 @@ const isKnowledgeLoading = ref(false);
 // 检测设备类型
 const checkMobile = () => {
   isMobile.value = window.innerWidth <= 768;
+  if (isMobile.value) {
+    isRightMenuCollapsed.value = true; // 在移动设备下自动收起右侧菜单
+    isMenuCollapsed.value = true; 
+  }else{
+    isRightMenuCollapsed.value = false;
+    isMenuCollapsed.value = false;
+  }
 };
 
-
-onUnmounted(() => {
-  window.removeEventListener('resize', checkMobile);
+// 添加窗口大小改变事件监听
+onMounted(() => {
+  checkMobile(); // 初始检查
+  window.addEventListener('resize', checkMobile);
 });
 
 const showDropdown = ref(false);
@@ -1747,6 +1756,7 @@ const updateCollapsedState = () => {
   // 添加计算属性
   const isRightMenuVisible = computed(() => {
     // 移除搜索开关对菜单显示的影响
+    checkMobile();
     return !isRightMenuCollapsed.value;
     /* return (!isRightMenuCollapsed.value && (
       (enableWebSearch.value && activeTab.value === 'search') ||
@@ -2064,6 +2074,8 @@ const updateCollapsedState = () => {
 
   // 初始化主题
   onMounted(() => {
+    console.log('onMounted');
+    checkMobile();
     // 优先使用存储的主题设置
     const savedTheme = localStorage.getItem('theme');
     if (savedTheme) {
@@ -3835,7 +3847,7 @@ const updateCollapsedState = () => {
   }
 
   .input-wrapper {
-    padding: 8px;
+    padding:5px;
   }
 
   .message-input {
@@ -4024,7 +4036,7 @@ button,
     }
 
     .toggle-text {
-      display: none;
+     /*  display: none; */
     }
 
     .toggle-switch {
@@ -4176,12 +4188,12 @@ button,
 
 @media screen and (max-width: 480px) {
   .search-toggles {
-    padding: 6px;
+    padding: 0px;
     gap: 6px;
 
     &:not(.compact) {
       .toggle-text {
-        display: none;
+       /*  display: none; */
       }
 
       .search-toggle-item {
@@ -4462,7 +4474,7 @@ button,
 
 @media screen and (max-width: 768px) {
   .model-select {
-    min-width: 80px;
+    width: 80px;
     font-size: 12px;
     padding: 2px 4px;
   }
@@ -5086,6 +5098,9 @@ button,
 <style>
 /* 移动端适配样式 */
 @media screen and (max-width: 768px) {
+  .suggestion-section{
+    padding: 20px 0 !important;
+  }
   .layout {
     flex-direction: column;
   }
@@ -5150,7 +5165,7 @@ button,
     }
     
     .logo {
-      max-width: 100px;
+      max-width: 150px;
     }
 
     .avatar {
@@ -5165,7 +5180,7 @@ button,
   }
 
   .logo-img {
-    width: 80px;
+    width: 150px;
   }
 
   .user-info-bar {
@@ -5210,8 +5225,9 @@ button,
   }
 
   .suggestion-card {
-    width: 100%;
-    margin: 10px 0;
+    width: 98% !important;
+    padding: 16px 2px !important;
+    margin: 10px  auto !important;
   }
 
   .collapse-left-button {