style: 调整聊天侧边栏样式

web/package-lock.json

@@ -21,6 +21,7 @@
         "pinia": "^2.1.4",
         "qs": "^6.11.1",
         "sortablejs": "^1.15.0",
+        "vant": "^4.5.0",
         "vue": "^3.2.13",
         "vue-router": "^4.0.15"
       },
@@ -2260,6 +2261,19 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
+    "node_modules/@vant/use": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.5.2.tgz",
+      "integrity": "sha512-CBK61iT568dCHUwFFsErGbW6/5tmrPnZJKGtcSy7Tjcrmws8Ku+YZo7IUFD9Xkj9MfSJ4pfhQ7pU2KouP5Cojg==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
@@ -10429,6 +10443,19 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "node_modules/vant": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-4.5.0.tgz",
+      "integrity": "sha512-MK7TlTvp+n0HRFAi7SoRZwTt1pquJ2aUa8nQ899Mf+x9gi8OLYrMFqEQX+l1e4Cl4RO0vD1Q5w9rs4+Wehesog==",
+      "dependencies": {
+        "@vant/popperjs": "^1.3.0",
+        "@vant/use": "^1.5.1",
+        "@vue/shared": "^3.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
@@ -13000,6 +13027,17 @@
         "@types/node": "*"
       }
     },
+    "@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
+    "@vant/use": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.5.2.tgz",
+      "integrity": "sha512-CBK61iT568dCHUwFFsErGbW6/5tmrPnZJKGtcSy7Tjcrmws8Ku+YZo7IUFD9Xkj9MfSJ4pfhQ7pU2KouP5Cojg==",
+      "requires": {}
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
@@ -19428,6 +19466,16 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vant": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-4.5.0.tgz",
+      "integrity": "sha512-MK7TlTvp+n0HRFAi7SoRZwTt1pquJ2aUa8nQ899Mf+x9gi8OLYrMFqEQX+l1e4Cl4RO0vD1Q5w9rs4+Wehesog==",
+      "requires": {
+        "@vant/popperjs": "^1.3.0",
+        "@vant/use": "^1.5.1",
+        "@vue/shared": "^3.0.0"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",

web/package.json

@@ -21,6 +21,7 @@
     "pinia": "^2.1.4",
     "qs": "^6.11.1",
     "sortablejs": "^1.15.0",
+    "vant": "^4.5.0",
     "vue": "^3.2.13",
     "vue-router": "^4.0.15"
   },

web/src/components/ConfigDialog.vue

@@ -81,8 +81,8 @@ const showDialog = computed(() => {
 })
 const form = ref({})
 const top = computed(() => {
-  if (window.innerHeight < 768) {
+  if (window.innerHeight < 1024) {
-    return '1vh';
+    return '5vh';
   } else {
     return '15vh';
   }

web/src/views/ChatPlus.vue

@@ -304,7 +304,7 @@ const getRoleById = function (rid) {
 const resizeElement = function () {
   chatBoxHeight.value = window.innerHeight - 51 - 82 - 38;
   mainWinHeight.value = window.innerHeight - 51;
-  leftBoxHeight.value = window.innerHeight - 51 - 100;
+  leftBoxHeight.value = window.innerHeight - 43 - 47 - 44;
 };
 
 // 新建会话
@@ -782,9 +782,12 @@ $borderColor = #4676d0;
             width: 100%
             justify-content: flex-start
             padding: 8px 12px
-            border-bottom: 1px solid #3c3c3c
+            //border-bottom: 1px solid #3c3c3c
             cursor: pointer
 
+            &:hover {
+              background-color #343540
+            }
 
             .avatar {
               width: 28px;
@@ -826,7 +829,7 @@ $borderColor = #4676d0;
           }
 
           .chat-list-item.active {
-            background-color: #363535;
+            background-color: #343540;
 
             .btn {
               display inline
@@ -840,7 +843,7 @@ $borderColor = #4676d0;
         display: flex;
         justify-content: flex-end;
         align-items: center;
-        padding 5px 20px;
+        padding 0 20px 10px 20px;
         border-top 1px solid #3c3c3c;
 
         .user-info {