From 4063319c045443af762f5972d4bd000231ceb975 Mon Sep 17 00:00:00 2001
From: DCloud_JSON <linju@dcloud.io>
Date: Wed, 19 Jun 2024 17:27:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20web-pc=20=E7=AB=AF?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/baseStyle.scss       |   5 +-
 pages/chat/chat.vue         |   9 +-
 pages/contacts/contacts.vue |  23 ++-
 pages/index/index.scss      | 349 ++++++++++++++++++------------------
 pages/index/index.vue       |  20 +--
 5 files changed, 204 insertions(+), 202 deletions(-)

diff --git a/common/baseStyle.scss b/common/baseStyle.scss
index 8736c11..4dfbda4 100644
--- a/common/baseStyle.scss
+++ b/common/baseStyle.scss
@@ -1,6 +1,7 @@
 /* #ifdef H5 */
 ::v-deep {
 /* #endif */
+  page,
   view,
   label
   {
@@ -16,17 +17,19 @@
     margin: 0;
   }
 
+  page,
   view,
   label,
   swiper-item {
     flex-direction: column;
   }
 
+  page,
   view,
   image,
   input,
-  scroll-view,
   swiper,
+  scroll-view,
   swiper-item,
   text,
   textarea,
diff --git a/pages/chat/chat.vue b/pages/chat/chat.vue
index e2c6ae4..b1a359d 100644
--- a/pages/chat/chat.vue
+++ b/pages/chat/chat.vue
@@ -1106,12 +1106,13 @@
 
 <style lang="scss">
 @import "@/uni_modules/uni-im/common/baseStyle.scss";
+page {
+  height: 100%;
+}
 .uni-im-chat {
   position: relative;
-  height: 100vh;
-  /* #ifdef H5 */
-  height: calc(100vh - 44px);
-  /* #endif */
+  height: 100%;
+  flex: 1;
   background-color: #efefef;
   
   .msg-list {
diff --git a/pages/contacts/contacts.vue b/pages/contacts/contacts.vue
index c689895..664a6a9 100644
--- a/pages/contacts/contacts.vue
+++ b/pages/contacts/contacts.vue
@@ -260,16 +260,19 @@
 <style lang="scss">
 @import "@/uni_modules/uni-im/common/baseStyle.scss";
 .contacts-pages {
-  flex: 1;
+  height: 100%;
+  background-color: #FFF;
   position: relative;
-  /* #ifdef H5 */
-  @media screen and (min-device-width:960px) {
-    height: 100%;
-    .user-list-box {
-      overflow: auto;
+  
+  .menu-list-box {
+    .uni-list-item {
+      cursor: pointer;
+      &:hover {
+        background-color: #FBFBFB !important;
+      }
     }
   }
-  /* #endif */
+  
   .title {
     padding: 8px;
     font-size: 14px;
@@ -348,11 +351,5 @@
   .blue {
     background-color: #5DBAFF;
   }
-  
-  @media screen and (min-device-width:960px) {
-    .activeMenu {
-      background-color: #f5f5f5 !important;
-    }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/pages/index/index.scss b/pages/index/index.scss
index 7e1701e..816fa02 100644
--- a/pages/index/index.scss
+++ b/pages/index/index.scss
@@ -1,178 +1,184 @@
- .tip{
-   flex: 1;
- }
-
- #center-view{
-   height: 100vh;
-   /* #ifdef H5 */
-   height: calc(100vh - 44px);
-   /* #endif */
-   background-color: #f5f5f5 !important;
- }
- 
- /* #ifdef H5 */
- @media screen and (min-device-width:960px){
-   .pointer {
-     cursor: pointer;
-   }
-   #page {
-     flex-direction: row;
-     justify-content: center;
-     align-items: center;
-     height: 100vh;
-     width: 100vw;
-     background-color: #2e2e3e;
-     min-width:960px;
-     
-     #left-view,
-     #center-view,
-     #right-view {
+ // .tip{
+ //   flex: 1;
+ // }
+page {
+  height: 100vh;
+  background-color: #2e2e3e;
+  /* #ifdef H5 */
+  @media screen and (min-device-width:960px){
+    padding: 20px;
+    .pointer {
+      cursor: pointer;
+    }
+  }
+  /* #endif */
+  .uni-im-index {
+    // border: 1px solid #FFF;
+    background-color: #ececec;
+    flex: 1;
+    height: 100%;
+    /* #ifdef H5 */
+    @media screen and (min-device-width:960px){
+      border-radius: 20px;
+    }
+    /* #endif */
+    overflow: hidden;
+    flex-direction: row;
+    #left-view {
+      /* #ifdef H5 */
+      & > *{
+       cursor: pointer;
+       margin-top: 36px;
+      }
+      & > *:hover{
+       /* border: 1px solid #fefefe; */
+       box-shadow: 0 0 20px 2px #fefefe;
+       border-radius: 10px;
+      }
+      /* #endif */
+      width:60px;
+      align-items: center;
+      padding-top: 100px;
+      background-color: #ececec;
+      border-radius: 20px 0 0 20px;
+    }
+    #center-view{
+      background-color: #f5f5f5;
+      width: 100%;
+      /* #ifdef H5 */
+      @media screen and (min-device-width:960px){
+        width:300px;
+      }
+      /* #endif */
+      overflow: hidden;
+      #search-bar-box {
+        flex-direction: row;
+        align-items: center;
+        height: 70px;
+        padding:0 10px;
+        #search-bar {
+          flex: 1;
+        }
+      }
+      #conversation-list-box {
+        height: 100%;
+        flex: 1;
+      }
+      #uni-im-contacts-box {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 9;
+        width: 100%;
+        height: 100%;
+        .contacts-pages ::v-deep {
+          .user-list-box {
+            overflow: auto;
+          }
+          .activeMenu {
+            background-color: #f5f5f5 !important;
+          }
+        }
+      }
+    }  
+    #right-view {
+      width: 0;
+      flex-grow: 1;
+      background-color: #FFFFFF;
+      #chat-view-box {
+        flex-grow: 1;
+        .header {
+          height: 70px;
+          background-color: #FFFFFF;
+          padding:0 20px;
+          flex-direction: row;
+          justify-content: end;
+          align-items: center;
+          .more{
+            cursor: pointer;
+          }
+        }
+        .content {
+          flex: 1;
+          ::v-deep {
+            #web-pc-chat-title
+            {
+              position: absolute;
+              z-index: 99;
+              top: -45px;
+              left: 15px;
+            }
+            .unread_count {
+              display: none;
+            }
+            .msg-list {
+              .uni-im-list {
+                .uni-im-msg {
+                  padding: 0 10px;
+                }
+              }
+            }
+          }
+        }
+        
+        .chatInfoBox {
+          z-index: 9;
+          position: absolute;
+          right:0;
+          top: 70px;
+          background-color: rgba(0,0,0,0.2);
+          height: calc(95vh - 70px);
+          align-items: flex-end;
+          width: 100%;
+          .group-info-text {
+            max-width: 250px !important;
+            text-align: left;
+            word-break: break-all;
+          }
+        }
+      }
+      #ccid-is-null-tip {
+        height: 95vh;
+        padding-top: 30vh;
+        align-items: center;
+        background-color: #efefef;
+        .img {
+          width: 130px;
+          margin-bottom: 15px;
+        }
+        .text {
+          color: #999;
+        }
+      }
+      #dynamic-component-box {
+       z-index: 9;
+       width: 100%;
        height: 95vh;
-       position: relative;
-       top: -2vh;
-       background-color: #FFFFFF;
-     }
-     
-     #center-view {
-       #conversation-list-box  .conversation-list{
-         max-height: calc(95vh - 70px);
-         .conversation-list-item{
-           margin: 5px;
-         }
-       }
-     }
-     #left-view {
-       & > *{
-         cursor: pointer;
-         margin-top: 36px;
-       }
-       & > *:hover{
-         /* border: 1px solid #fefefe; */
-         box-shadow: 0 0 20px 2px #fefefe;
-         border-radius: 10px;
-       }
-       width:60px;
-       align-items: center;
-       padding-top: 100px;
-       background-color: #ececec;
-       border-radius: 20px 0 0 20px;
-     }
-     #center-view{
-       width:300px;
-       #search-bar-box {
-         flex-direction: row;
-         align-items: center;
+       background-color: #fff;
+       position: absolute;
+       right: 0;
+       .dynamic-component-title{
+         padding-left: 15px;
          height: 70px;
-         padding:0 10px;
+         justify-content: center;
+         border: 1px solid #efefef;
        }
-       #search-bar {
-         flex: 1;
-       }
-       #uni-im-contacts-box {
-         z-index: 10;
-         height: 95vh;
+       .system-notice-box{
          width: 100%;
-         position: absolute;
-         background-color: #f5f5f5;
-         /* pc端隐藏删除好友的按钮，后续改成长按（右键）可见 */
-          .delete-btn{
-           display: none;
-         }
        }
-     }
-     
-     #right-view {
-       width: calc(100% - 370px);
-       border-radius: 0 20px 20px 0;
-       overflow: hidden;
-       position: relative;
-       #chat-view-box {
-         #ccid-is-null-tip{
-           height: 95vh;
-           padding-top: 30vh;
-           align-items: center;
-           background-color: #efefef;
-           .img {
-             width: 130px;
-             margin-bottom: 15px;
-           }
-           .text {
-             color: #999;
-           }
-         }
-       }
-       #chat-header{
-         height: 70px;
-         padding:0 20px;
-         flex-direction: row;
-         justify-content: end;
-         align-items: center;
-         .more{
-           cursor: pointer;
-         }
-       }
-       #chat-view {
-         max-height:calc(95vh - 70px);
-       }
-       #chat-view  #uni-im-chat{
-         #web-pc-chat-title
-         {
-           position: absolute;
-           z-index: 9;
-           top: -45px;
-           left: 15px;
-         }
-         .unread_count {
-           display: none;
-         }
-         .msg-list .uni-im-list .uni-im-msg{
-           padding:0 10px;
-         }
-       }
-       .chatInfoBox {
-         z-index: 999;
-         position: absolute;
-         right:0;
-         top: 70px;
-         background-color: rgba(0,0,0,0.2);
-         height: calc(95vh - 70px);
-         align-items: flex-end;
-         width: 100%;
-          .group-info-text{
-           max-width: 250px !important;
-           text-align: left;
-           word-break: break-all;
-         }
-       }
-       #dynamic-component-box {
-         z-index: 9;
+       .create-group-box .header-box{
          width: 100%;
-         height: 95vh;
-         background-color: #fff;
-         position: absolute;
-         right: 0;
-         .dynamic-component-title{
-           padding-left: 15px;
-           height: 70px;
-           justify-content: center;
-           border: 1px solid #efefef;
-         }
-         .system-notice-box{
-           width: 100%;
-         }
-         .create-group-box .header-box{
+         .uni-searchbar {
            width: 100%;
-           .uni-searchbar {
-             width: 100%;
-           }
          }
        }
-     }
-   }
-   
-   #foot {
-     position: fixed;
-     bottom: 10px;
+      }
+    }
+  }
+  #foot {
+    display: none;
+    position: fixed;
+    bottom: 0;
      flex-direction: row;
      color: #FFFFFF;
      .uni-link:hover{
@@ -192,11 +198,10 @@
        }
      }
    }
- }
- /* #endif */ 
+}
 
 .windows {
-   #center-view #conversation-list-box  .conversation-list-item .uni-list-chat__container{
-     padding-right: 10px;
-   }
- } 
\ No newline at end of file
+  #center-view #conversation-list-box  .conversation-list-item .uni-list-chat__container {
+    padding-right: 10px;
+  }
+} 
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 784c36a..fa4f8f7 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -36,7 +36,7 @@
 			<!-- #ifdef H5 -->
       <template v-if="isWidescreen">
         <!-- 搜索会话用户、聊天记录... -->
-        <view id="search-bar-box">
+        <view id="search-bar-box" v-show="!contactsViewIsShow">
         	<uni-search-bar v-model="keyword" id="search-bar" radius="5" placeholder="搜索" clearButton="auto" cancelButton="none"></uni-search-bar>
         	<uni-icons class="pointer" @click="beforeJoinGroup" color="#aaa" size="26" type="plus"></uni-icons>
         </view>
@@ -69,17 +69,13 @@
 			<!-- 聊天窗口 -->
 			<view id="chat-view-box">
 				<template v-if="!contactsViewIsShow && currentConversationId">
-					<view id="chat-header" v-if="!contactsViewIsShow || filteredConversationId">
-						<uni-icons @click="showChatInfo" class="more" type="more-filled" size="20"></uni-icons>
-					</view>
-					<view id="chat-view">
-						<chat-filtered
-              v-if="filteredConversationId"
-              ref="chat-filtered"
-              @to-chat="toChat($event)"
-            />
-            <chat-view v-else ref="chat-view"></chat-view>
-					</view>
+          <chat-filtered v-if="filteredConversationId" class="content" ref="chat-filtered" @to-chat="toChat($event)"/>
+          <template v-else>
+            <view class="header">
+            	<uni-icons @click="showChatInfo" class="more" type="more-filled" size="20"></uni-icons>
+            </view>
+            <chat-view class="content" ref="chat-view"></chat-view>
+					</template>
 					<view v-if="chatInfoIsShow" class="chatInfoBox" @click.stop="chatInfoIsShow = false">
             <view @click.native.stop>
               <uni-im-group-info v-if="currentConversation.group_id" ref="group-info"></uni-im-group-info>
-- 
GitLab