fix: 会话优化

src/views/session/sessionRecordsManager/index.vue

@@ -5,13 +5,13 @@
     <a-row :gutter="[5, 5]" style="margin-top: 3px">
       <a-col :span="4">
         <a-card>
-              <a-select
-                v-model="selectValue"
-                :options="dialogs"
-                :field-names="fieldNames"
-                @change="dialogChange"
-              >
-              </a-select>
+          <a-select
+            v-model="selectValue"
+            :options="dialogs"
+            :field-names="fieldNames"
+            @change="dialogChange"
+          >
+          </a-select>
         </a-card>
         <a-card style="height: 50px">
           <template #cover>
@@ -24,9 +24,9 @@
               >
                 +新建会话
               </a-button>
-              <a-button type="text" shape="circle" class="card-btn-2">
+              <!-- <a-button type="text" shape="circle" class="card-btn-2">
                 <icon-search />
-              </a-button>
+              </a-button> -->
             </div>
           </template>
         </a-card>
@@ -45,13 +45,13 @@
               @click="querySessionDetail(session)"
               :class="{ isLeftActive: activeSessionId === session.id }"
             >
-              <div class="text" :class="{ light: theme === 'dark' }">{{
-                  session.name
-                }}
+              <div class="text" :class="{ light: theme === 'dark' }"
+                >{{ session.name }}
               </div>
-              <div class="time">{{
+              <div class="time"
+                >{{
                   moment(new Date(session.create_time)).format(
-                    "YYYY-MM-DD HH:mm:ss"
+                    'YYYY-MM-DD HH:mm:ss'
                   )
                 }}
               </div>
@@ -61,7 +61,15 @@
       </a-col>
       <a-col :span="15">
         <a-card class="center">
-          <div v-if="sessionDetailList.length === 0">
+          <div
+            v-if="sessionDetailList.length === 0"
+            style="
+              width: 90%;
+              overflow: auto;
+              height: 65vh;
+              margin: 0px auto 20px;
+            "
+          >
             <div class="center-title">智能问答</div>
             <div class="center-content">
               我可以理解和学习人类的语言，具备多轮对话的能力，现在和我开始交流吧~
@@ -134,7 +142,12 @@
             id="home"
             v-else
             class="chat-list"
-            style="width: 90%; overflow: auto; height: 60vh; margin: 0px auto"
+            style="
+              width: 90%;
+              overflow: auto;
+              height: 65vh;
+              margin: 0px auto 20px;
+            "
           >
             <div class="chat-item" v-for="sessionDetail in sessionDetailList">
               <a-comment
@@ -142,10 +155,7 @@
                 avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
               >
                 <template #content>
-                  <div>{{
-                      sessionDetail.content
-                    }}
-                  </div>
+                  <div>{{ sessionDetail.content }} </div>
                 </template>
               </a-comment>
               <a-comment
@@ -157,9 +167,8 @@
                     class="chat-item-answer"
                     style="background-color: rgba(63, 64, 79, 1)"
                   >
-                    <div :class="{ light: theme === 'light' }">{{
-                        sessionDetail.content
-                      }}
+                    <div :class="{ light: theme === 'light' }"
+                      >{{ sessionDetail.content }}
                     </div>
                   </a-card>
                 </template>
@@ -174,16 +183,16 @@
                     auto-size
                     v-model="displayedText"
                     class="chat-item-answer"
-                    style="background-color:rgba(192,172,172,0.88)"
+                    style="background-color: rgba(192, 172, 172, 0.88)"
                   >
                   </a-textarea>
                 </template>
               </a-comment>
             </div>
           </a-scrollbar>
-
-          <div class="center-bottom">
-            <a-textarea
+          <div class="chat_bottom">
+            <div class="center-bottom">
+              <!-- <a-textarea
               v-model="inputMsg"
               @keydown.shift.enter="sendMessage"
               style="height: 180px"
@@ -192,7 +201,30 @@
               allow-clear
               show-word-limit
             >
-            </a-textarea>
+            </a-textarea> -->
+              <a-textarea
+                v-model="inputMsg"
+                @keydown.enter="sendMessage"
+                placeholder="输入您想了解的内容，Shift+Enter换行，Enter发送"
+                allow-clear
+                show-word-limit
+                :disabled="chatDis"
+                :auto-size="{
+                  minRows: 12,
+                  maxRows: 5,
+                }"
+              />
+            </div>
+            <div style="margin-left: 10px">
+              <!-- <icon-send size="32" /> -->
+              <a-button
+                :disabled="chatDis"
+                @click="sentClick"
+                type="primary"
+                size="large"
+                >发送</a-button
+              >
+            </div>
           </div>
         </a-card>
       </a-col>
@@ -216,23 +248,19 @@
           <div class="right-tag">
             <a-space>
               <a-button type="primary" shape="round" size="mini" class="btn"
-              >全部
-              </a-button
-              >
+                >全部
+              </a-button>
               <a-button type="outline" shape="round" size="mini" class="btn"
-              >文档创作
-              </a-button
-              >
+                >文档创作
+              </a-button>
               <a-button type="outline" shape="round" size="mini" class="btn"
-              >知识学习
-              </a-button
-              >
+                >知识学习
+              </a-button>
             </a-space>
             <a-space style="margin-top: 10px">
               <a-button type="outline" shape="round" size="mini" class="btn"
-              >效率提升
-              </a-button
-              >
+                >效率提升
+              </a-button>
             </a-space>
           </div>
           <div class="right-list">
@@ -270,288 +298,312 @@
   </div>
 </template>
 <script setup lang="ts">
-import { IconClose, IconSearch, IconTiktokColor } from "@arco-design/web-vue/es/icon";
-import { useAppStore } from "@/store";
-import { computed, nextTick, onMounted, reactive, ref } from "vue";
-import { Message } from "@arco-design/web-vue";
-import moment from "moment";
-import AddSession from "@/views/session/sessionManager/components/addSession.vue";
-import { chatApi, getDialogListApi, getSessionDetailsApi, sessionListApi } from "@/api/session";
-
-const sessionDetailList = ref([]); //根据会话id出来的会话详情
-const sessionList = ref([]); //会话列表
-const modalObj = reactive({ add: false });
-
-const currIndex = ref(0);
-const displayedText = ref(""); // 正在显示的文字
-let timer: number | null = null;
-const streamStr = ref("");
-const inputMsg = ref("");
-const activeSessionId = ref("");
-const fieldNames = { value: "id", label: "name" };
-const dialogs = ref([]);
-const selectValue = ref("");
-const DialogList = async () => {
-  const { code, data } = await getDialogListApi();
-  if (code === 200) {
-    if (data) {
-      selectValue.value = data[0].id;
-      dialogs.value = data;
-      querySessionList()
+  import {
+    IconClose,
+    IconSearch,
+    IconTiktokColor,
+  } from '@arco-design/web-vue/es/icon';
+  import { useAppStore } from '@/store';
+  import { computed, nextTick, onMounted, reactive, ref } from 'vue';
+  import { Message } from '@arco-design/web-vue';
+  import moment from 'moment';
+  import AddSession from '@/views/session/sessionManager/components/addSession.vue';
+  import {
+    chatApi,
+    getDialogListApi,
+    getSessionDetailsApi,
+    sessionListApi,
+  } from '@/api/session';
+
+  const sessionDetailList = ref([]); //根据会话id出来的会话详情
+  const sessionList = ref([]); //会话列表
+  const modalObj = reactive({ add: false });
+  const chatDis = ref(false);
+
+  const currIndex = ref(0);
+  const displayedText = ref(''); // 正在显示的文字
+  let timer: number | null = null;
+  const streamStr = ref('');
+  const inputMsg = ref('');
+  const activeSessionId = ref('');
+  const fieldNames = { value: 'id', label: 'name' };
+  const dialogs = ref([]);
+  const selectValue = ref('');
+  const DialogList = async () => {
+    const { code, data } = await getDialogListApi();
+    if (code === 200) {
+      if (data) {
+        selectValue.value = data[0].id;
+        dialogs.value = data;
+        querySessionList();
+      }
     }
-  }
-};
-const dialogChange = (value) => {
-  querySessionList()
-};
-const sendMessage = async (event) => {
-  event.preventDefault();
-  if (!activeSessionId.value) {
-    Message.warning("请选择会话");
-    return;
-  }
-  if (inputMsg.value) {
-    const { code, data } = await chatApi({
-      conversation_id: activeSessionId.value,
-      messages: inputMsg.value
-    });
-    const res = await getSessionDetailsApi(activeSessionId.value);
-    if (res.code === 200) {
-      sessionDetailList.value = res.data.message.map((item, index) => {
-        if (index === res.data.message.length - 1) {
-          item.role = "last";
-          displayedText.value = "";
-          currIndex.value = 0;
-          streamStr.value = item.content;
-          startDisplayStr();
-        }
-        return item;
+  };
+  const dialogChange = (value) => {
+    querySessionList();
+  };
+  const sentClick = (event) => {
+    sendMessage(event);
+  };
+  const sendMessage = async (event) => {
+    event.preventDefault();
+    chatDis.value = true;
+    if (!activeSessionId.value) {
+      Message.warning('请选择会话');
+      return;
+    }
+    if (inputMsg.value) {
+      const data = await chatApi({
+        conversation_id: activeSessionId.value,
+        messages: inputMsg.value,
       });
-      refreshScroll();
+      if (data) {
+        chatDis.value = false;
+
+        // inputMsg.value = '';
+        // querySessionDetail({ id: activeSessionId.value });
+      }
+      const res = await getSessionDetailsApi(activeSessionId.value);
+      if (res.code === 200) {
+        sessionDetailList.value = res.data.message.map((item, index) => {
+          if (index === res.data.message.length - 1) {
+            item.role = 'last';
+            displayedText.value = '';
+            currIndex.value = 0;
+            streamStr.value = item.content;
+            startDisplayStr();
+          }
+          return item;
+        });
+        refreshScroll();
+      }
+      inputMsg.value = '';
+    } else {
+      Message.warning('消息不能为空');
     }
-    inputMsg.value = "";
-  } else {
-    Message.warning("消息不能为空");
-  }
-};
-const querySessionDetail = async (session) => {
-  activeSessionId.value = session.id;
-  const { code, data } = await getSessionDetailsApi(session.id);
-  if (code === 200) {
-    sessionDetailList.value = data.message;
-    refreshScroll(); //刷新滚动条位置
-  }
-};
-const scrollbar = ref(null);
-const refreshScroll = () => {
-  nextTick(() => {
-    const container = document.getElementById("home");
-    scrollbar.value.scrollTop(container.scrollHeight);
+  };
+  const querySessionDetail = async (session) => {
+    activeSessionId.value = session.id;
+    const { code, data } = await getSessionDetailsApi(session.id);
+    if (code === 200) {
+      sessionDetailList.value = data.message;
+      refreshScroll(); //刷新滚动条位置
+    }
+  };
+  const scrollbar = ref(null);
+  const refreshScroll = () => {
+    nextTick(() => {
+      const container = document.getElementById('home');
+      scrollbar.value.scrollTop(container.scrollHeight);
+    });
+  };
+  // 查询会话列表
+  const querySessionList = async () => {
+    const { code, data } = await sessionListApi(selectValue.value);
+    if (code === 200) {
+      sessionList.value = data;
+    } else {
+      Message.warning('查询失败');
+    }
+  };
+  //新增会话之后刷新会话列表
+  const addSession = () => {
+    querySessionList();
+  };
+  onMounted(() => {
+    DialogList();
   });
-};
-// 查询会话列表
-const querySessionList = async () => {
-  const { code, data } = await sessionListApi(selectValue.value);
-  if (code === 200) {
-    sessionList.value = data;
-  } else {
-    Message.warning("查询失败");
-  }
-};
-//新增会话之后刷新会话列表
-const addSession = () => {
-  querySessionList();
-};
-onMounted(() => {
-  DialogList();
-});
-const appStore = useAppStore();
-const theme = computed(() => {
-  return appStore.theme;
-});
-//文字动态输出
-const startDisplayStr = () => {
-  if (timer) {
-    clearTimeout(timer!);
-  }
-  const res = streamStr.value;
-  // 将数组中的字符串拼接起来
-  if (currIndex.value < res.length) {
-    displayedText.value += res[currIndex.value];
-    currIndex.value++;
-    setTimeout(startDisplayStr, 100);
-  } else {
-    clearTimeout(timer!);
-    timer = null;
-  }
-};
+  const appStore = useAppStore();
+  const theme = computed(() => {
+    return appStore.theme;
+  });
+  //文字动态输出
+  const startDisplayStr = () => {
+    if (timer) {
+      clearTimeout(timer!);
+    }
+    const res = streamStr.value;
+    // 将数组中的字符串拼接起来
+    if (currIndex.value < res.length) {
+      displayedText.value += res[currIndex.value];
+      currIndex.value++;
+      setTimeout(startDisplayStr, 100);
+    } else {
+      clearTimeout(timer!);
+      timer = null;
+    }
+  };
 </script>
 <style scoped lang="scss">
-.isLeftActive {
-  background-color: lightgrey;
-}
-
-.light {
-  color: white !important;
-}
+  .isLeftActive {
+    background-color: lightgrey;
+  }
 
-.dark {
-  color: gray !important;
-}
+  .light {
+    color: white !important;
+  }
 
-.container {
+  .dark {
+    color: gray !important;
+  }
 
-.top-title {
-  line-height: 60px;
-  font-size: 25px;
-  font-family: 黑体;
-}
+  .container {
+    .top-title {
+      line-height: 60px;
+      font-size: 25px;
+      font-family: 黑体;
+    }
 
-.center,
-.right {
-  box-sizing: border-box;
-  height: calc(100vh - 100px);
-}
+    .center,
+    .right {
+      box-sizing: border-box;
+      height: calc(100vh - 100px);
+    }
 
-.left {
-  /* height: calc(100vh - 160px);
+    .left {
+      /* height: calc(100vh - 160px);
         overflow-y: auto;
         overflow-x: hidden;*/
-  border: 0px;
-
-.left-list {
-
-.item {
-  cursor: pointer;
-
-.text,
-.time {
-  line-height: 30px;
-}
-
-.text {
-  color: black;
-  padding-left: 10px;
-}
-
-.time {
-  color: gray;
-  font-size: 12px;
-  padding-left: 10px;
-}
-
-}
-}
-}
-.card-btn-1 {
-  margin: 10px;
-  width: 75%;
-}
-
-.card-btn-2 {
-  margin: 10px 10px;
-}
-
-.center {
-  position: relative;
-
-.center-title {
-  line-height: 60px;
-  font-size: 25px;
-  font-family: 黑体;
-  color: deepskyblue;
-}
-
-.center-content {
-  font-size: 14px;
-  color: gray;
-}
-
-.center-question {
-  margin-top: 20px;
-  display: flex;
-  justify-content: space-between;
-
-.center-question-left {
-  margin-top: 5px;
-  margin-left: 20px;
-}
-
-.center-question-right {
-  margin-right: 20px;
-}
-
-}
-.center-list {
-  margin-top: 10px;
-
-.item {
-  border-radius: 10px;
-  margin-top: 10px;
-  padding: 10px;
-  height: 120px;
-  background-color: lightcyan;
-
-.item-title {
-  text-align: center;
-  line-height: 40px;
-  font-size: 20px;
-  font-family: 黑体;
-  color: black;
-}
-
-}
-}
-.center-bottom {
-  position: absolute;
-  width: 90%;
-  bottom: 20px;
-  left: 5%;
-}
-
-}
-.right {
-
-.right-top {
-  display: flex;
-  justify-content: space-between;
-
-.right-title {
-  font-size: 25px;
-  font-family: 黑体;
-  color: black;
-}
-
-.right-btn {
-  position: relative;
-  left: 20px;
-  top: 0px;
-}
-
-}
-.right-tag {
-  margin-top: 20px;
-}
+      border: 0px;
+
+      .left-list {
+        .item {
+          cursor: pointer;
+
+          .text,
+          .time {
+            line-height: 30px;
+          }
+
+          .text {
+            color: black;
+            padding-left: 10px;
+          }
+
+          .time {
+            color: gray;
+            font-size: 12px;
+            padding-left: 10px;
+          }
+        }
+      }
+    }
+    .card-btn-1 {
+      margin: 10px;
+      width: 75%;
+    }
 
-.right-list {
+    .card-btn-2 {
+      margin: 10px 10px;
+    }
 
-.right-item {
-  border-radius: 10px;
-  margin-top: 10px;
-  padding: 10px;
-  height: 120px;
-  background-color: lightcyan;
+    .center {
+      position: relative;
+
+      .center-title {
+        line-height: 60px;
+        font-size: 25px;
+        font-family: 黑体;
+        color: deepskyblue;
+      }
+
+      .center-content {
+        font-size: 14px;
+        color: gray;
+      }
+
+      .center-question {
+        margin-top: 20px;
+        display: flex;
+        justify-content: space-between;
+
+        .center-question-left {
+          margin-top: 5px;
+          margin-left: 20px;
+        }
 
-.item-title {
-  text-align: center;
-  line-height: 40px;
-  font-size: 20px;
-  font-family: 黑体;
-  color: black;
-}
+        .center-question-right {
+          margin-right: 20px;
+        }
+      }
+      .center-list {
+        margin-top: 10px;
+
+        .item {
+          border-radius: 10px;
+          margin-top: 10px;
+          padding: 10px;
+          height: 120px;
+          background-color: lightcyan;
+
+          .item-title {
+            text-align: center;
+            line-height: 40px;
+            font-size: 20px;
+            font-family: 黑体;
+            color: black;
+          }
+        }
+      }
+      .chat_bottom {
+        display: flex;
+        align-items: center;
+        .center-bottom {
+          // position: absolute;
+          // width: 90%;
+          // bottom: 20px;
+          // left: 5%;
+          background: #fff;
+          border: 1px solid #00000014;
+          border-radius: 24px;
+          display: flex;
+          flex: 1 1;
+          flex-direction: column;
+          overflow: hidden;
+          :deep(.arco-textarea-wrapper) {
+            border-radius: 24px;
+          }
+        }
+      }
+    }
+    .right {
+      .right-top {
+        display: flex;
+        justify-content: space-between;
+
+        .right-title {
+          font-size: 25px;
+          font-family: 黑体;
+          color: black;
+        }
 
-}
-}
-}
-}
+        .right-btn {
+          position: relative;
+          left: 20px;
+          top: 0px;
+        }
+      }
+      .right-tag {
+        margin-top: 20px;
+      }
+
+      .right-list {
+        .right-item {
+          border-radius: 10px;
+          margin-top: 10px;
+          padding: 10px;
+          height: 120px;
+          background-color: lightcyan;
+
+          .item-title {
+            text-align: center;
+            line-height: 40px;
+            font-size: 20px;
+            font-family: 黑体;
+            color: black;
+          }
+        }
+      }
+    }
+  }
 </style>