feat: 历史记录增加删除功能优化

feat:  历史记录增加删除功能优化

Author: wangdan-fit2cloud

ui/src/components/ai-chat/index.vue

@@ -146,7 +146,7 @@
           ref="quickInputRef"
           v-model="inputValue"
           placeholder="请输入"
-          :autosize="{ minRows: 1, maxRows: 4 }"
+          :autosize="{ minRows: 1, maxRows: common.isMobile() ? 4 : 10 }"
           type="textarea"
           :maxlength="100000"
           @keydown.enter="sendChatHandle($event)"
@@ -173,7 +173,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, nextTick, computed, watch, reactive } from 'vue'
+import { ref, nextTick, computed, watch, reactive, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import LogOperationButton from './LogOperationButton.vue'
 import OperationButton from './OperationButton.vue'
@@ -215,7 +215,7 @@ const props = defineProps({
 
 const emit = defineEmits(['refresh', 'scroll'])
 
-const { application } = useStore()
+const { application, common } = useStore()
 
 const ParagraphSourceDialogRef = ref()
 const aiChatRef = ref()
@@ -622,11 +622,7 @@ defineExpose({
   position: relative;
   color: var(--app-text-color);
   box-sizing: border-box;
-  &.chart-log {
-    .ai-chat__content {
-      padding-bottom: 0;
-    }
-  }
+
   &__content {
     padding-top: 0;
     box-sizing: border-box;

ui/src/components/common-list/index.vue

@@ -6,6 +6,8 @@
           @click.prevent="clickHandle(item, index)"
           :class="current === item[props.valueKey] ? 'active' : ''"
           class="cursor"
+          @mouseenter="mouseenter(item)"
+          @mouseleave="mouseleave()"
         >
           <slot :row="item" :index="index"> </slot>
         </li>
@@ -44,7 +46,14 @@ watch(
   { immediate: true }
 )
 
-const emit = defineEmits(['click'])
+const emit = defineEmits(['click', 'mouseenter', 'mouseleave'])
+
+function mouseenter(row: any) {
+  emit('mouseenter', row)
+}
+function mouseleave() {
+  emit('mouseleave')
+}
 
 function clickHandle(row: any, index: number) {
   current.value = row[props.valueKey]

ui/src/views/chat/embed/index.vue

@@ -43,14 +43,16 @@
               v-loading="left_loading"
               :defaultActive="currentChatId"
               @click="clickListHandle"
+              @mouseenter="mouseenter"
+              @mouseleave="mouseId = ''"
             >
               <template #default="{ row }">
                 <div class="flex-between">
                   <auto-tooltip :content="row.abstract">
                     {{ row.abstract }}
                   </auto-tooltip>
-                  <div @click.stop>
-                    <el-button text @click.stop="deleteLog(row)">
+                  <div @click.stop v-if="mouseId === row.id">
+                    <el-button style="padding: 0" link @click.stop="deleteLog(row)">
                       <el-icon><Delete /></el-icon>
                     </el-button>
                   </div>
@@ -101,6 +103,11 @@ const paginationConfig = reactive({
 const currentRecordList = ref<any>([])
 const currentChatId = ref('new') // 当前历史记录Id 默认为'new'
 
+const mouseId = ref('')
+
+function mouseenter(row: any) {
+  mouseId.value = row.id
+}
 function deleteLog(row: any) {
   log.asyncDelChatClientLog(applicationDetail.value.id, row.id, left_loading).then(() => {
     if (currentChatId.value === row.id) {
@@ -247,9 +254,6 @@ onMounted(() => {
     overflow: hidden;
   }
   .new-chat-button {
-    // position: absolute;
-    // bottom: 80px;
-    // left: 18px;
     z-index: 11;
   }
   // 历史对话弹出层
@@ -305,9 +309,6 @@ onMounted(() => {
     .ai-chat__operate {
       padding-top: 12px;
     }
-    .ai-chat__content {
-      padding-bottom: 104px;
-    }
   }
 }
 </style>

ui/src/views/chat/pc/index.vue

@@ -23,19 +23,22 @@
                 v-loading="left_loading"
                 :defaultActive="currentChatId"
                 @click="clickListHandle"
+                @mouseenter="mouseenter"
+                @mouseleave="mouseId = ''"
               >
                 <template #default="{ row }">
                   <div class="flex-between">
                     <auto-tooltip :content="row.abstract">
                       {{ row.abstract }}
                     </auto-tooltip>
-                    <div @click.stop>
-                      <el-button text @click.stop="deleteLog(row)">
+                    <div @click.stop v-if="mouseId === row.id">
+                      <el-button style="padding: 0" link @click.stop="deleteLog(row)">
                         <el-icon><Delete /></el-icon>
                       </el-button>
                     </div>
                   </div>
                 </template>
+
                 <template #empty>
                   <div class="text-center">
                     <el-text type="info">暂无历史记录</el-text>
@@ -150,7 +153,11 @@ const paginationConfig = ref({
 const currentRecordList = ref<any>([])
 const currentChatId = ref('new') // 当前历史记录Id 默认为'new'
 const currentChatName = ref('新建对话')
+const mouseId = ref('')
 
+function mouseenter(row: any) {
+  mouseId.value = row.id
+}
 function deleteLog(row: any) {
   log.asyncDelChatClientLog(applicationDetail.value.id, row.id, left_loading).then(() => {
     if (currentChatId.value === row.id) {