src/api/dataChart.js

@@ -36,3 +36,8 @@ export function getConversationsThroughReact (id, data) {
 export function getConversationsByIdThroughReact (threadId) {
   return http.get(`/vanna/v0/react/direct/conversations/${threadId}`)
 }
+
+// 手工删除Redis中全部对话缓存
+export function clearConversation (data) {
+  return http.post('/vanna/v0/conversation_cleanup', data)
+}

src/views/home/homeSide.vue

@@ -33,12 +33,26 @@
           @change="onSelectConversation"
         >
           <v-list-item
-            v-for="(conversation) in conversationList"
+            v-for="(conversation, index) in conversationList"
             :key="conversation.conversation_id"
+            class="hover"
           >
             <v-list-item-content>
               <v-list-item-title>{{ conversation.conversation_title }}</v-list-item-title>
             </v-list-item-content>
+
+            <v-menu offset-x @click.stop>
+              <template v-slot:activator="{ on, attrs }">
+                <div class="hoverChange" v-bind="attrs" v-on="on">
+                  <v-icon color="primary">mdi-dots-horizontal</v-icon>
+                </div>
+              </template>
+              <v-list dense>
+                <v-list-item>
+                  <v-list-item-title @click.stop="handleDelete(conversation, index)">删除</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
           </v-list-item>
         </v-list-item-group>
       </v-list>
@@ -76,7 +90,8 @@ import {
   getConversations,
   getConversationsById,
   getConversationsThroughReact,
-  getConversationsByIdThroughReact
+  getConversationsByIdThroughReact,
+  clearConversation
 } from '@/api/dataChart'
 import { mapGetters } from 'vuex'
 export default {
@@ -106,6 +121,16 @@ export default {
     this.getConversationList()
   },
   methods: {
+    handleDelete (conversation, index) {
+      this.$confirm('提示', '确定删除该对话吗？').then(async _ => {
+        try {
+          await clearConversation({ conversation_id: conversation.conversation_id })
+          this.conversationList.splice(index, 1)
+        } catch (error) {
+          this.$snackbar.error(error)
+        }
+      })
+    },
     async getConversationList () {
       this.loading = true
       try {
@@ -156,5 +181,31 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.hover {
+  position: relative;
+  .hoverChange {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 50px;
+    display: none;
+  }
+  &:hover {
+    .hoverChange {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 200%;
+        height: 100%;
+        background: linear-gradient(to right, rgba(245, 245, 245, 0), rgba(245, 245, 245, 1));
+      }
+    }
+  }
+}
 </style>