feat: 对话日志

ui/src/styles/element-plus.scss

@@ -115,6 +115,9 @@
   .el-checkbox {
     height: 23px;
   }
+  tr.hightlight {
+    background: var(--el-table-current-row-bg-color);
+  }
 }
 
 .el-pagination .el-select .el-input {

ui/src/views/log/component/ChatRecordDrawer.vue

@@ -9,7 +9,11 @@
     <template #header>
       <h4>{{ data?.name }}</h4>
     </template>
-    <div v-loading="paginationConfig.current_page === 1 && loading">
+    <div
+      v-loading="paginationConfig.current_page === 1 && loading"
+      class="h-full"
+      style="padding: 24px 0"
+    >
       <div v-infinite-scroll="loadDataset" :infinite-scroll-disabled="disabledScroll">
         <AiChat :data="data" :record="recordList" log></AiChat>
       </div>
@@ -24,8 +28,8 @@
     </div>
     <template #footer>
       <div>
-        <el-button :disabled="loading">上一条</el-button>
-        <el-button :disabled="loading">下一条</el-button>
+        <el-button>上一条</el-button>
+        <el-button>下一条</el-button>
       </div>
     </template>
   </el-drawer>
@@ -44,6 +48,8 @@ const props = defineProps({
   }
 })
 
+const emit = defineEmits(['changeId', 'close'])
+
 const route = useRoute()
 const {
   params: { id }
@@ -75,6 +81,7 @@ function closeHandel() {
   currentChatId.value = ''
   paginationConfig.total = 0
   paginationConfig.current_page = 1
+  emit('close')
 }
 
 function loadDataset() {
@@ -93,11 +100,21 @@ function getChatRecord() {
     })
 }
 
+// function nextRecord(id: string) {
+//   currentChatId.value = id
+//   emit('changeId', id)
+//   recordList.value = []
+//   paginationConfig.total = 0
+//   paginationConfig.current_page = 1
+//   getChatRecord()
+// }
+
 const open = (id: string) => {
   currentChatId.value = id
   getChatRecord()
   visible.value = true
 }
+
 defineExpose({
   open
 })
@@ -106,7 +123,7 @@ defineExpose({
 .chat-record-drawer {
   .el-drawer__body {
     background: var(--app-layout-bg-color);
-    padding: 24px 0;
+    padding: 0;
   }
 }
 </style>

ui/src/views/log/component/EditContentDialog.vue

@@ -159,7 +159,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
         )
         .then((res: any) => {
           emit('updateContent', res.data)
-          loading.value = false
+          dialogVisible.value = false
         })
     } else {
       console.log('error submit!', fields)

ui/src/views/log/index.vue

@@ -26,6 +26,7 @@
         @changePage="getList"
         @row-click="rowClickHandle"
         v-loading="loading"
+        :row-class-name="setRowClass"
       >
         <el-table-column prop="abstract" label="摘要" show-overflow-tooltip />
         <el-table-column prop="chat_record_count" label="对话提问数" align="right" />
@@ -66,7 +67,7 @@
   </LayoutContainer>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, reactive, computed } from 'vue'
+import { ref, onMounted, reactive, watch, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import ChatRecordDrawer from './component/ChatRecordDrawer.vue'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
@@ -105,17 +106,67 @@ const paginationConfig = reactive({
   page_size: 20,
   total: 0
 })
-const tableData = ref([])
+const tableData = ref<any[]>([])
 
 const history_day = ref(7)
 const search = ref('')
 const detail = ref<any>(null)
 
+const currentChatId = ref('')
+
+// watch(
+//   () => currentChatId.value,
+//   (val) => {
+//     const index = tableData.value.findIndex((item: any) => item.id === val)
+//     if (isFirst(index)) {
+//       prevChatId.value = ''
+//     } else {
+//       prevChatId.value = tableData.value[index - 1]?.id
+//     }
+//     console.log(isLast(index))
+//     if (isLast(index)) {
+//       nextChatId.value = ''
+//     } else {
+//       if (tableData.value[index + 1]) {
+//         nextChatId.value = tableData.value[index + 1]?.id
+//         // } else {
+//         //   paginationConfig.current_page += 1
+//         //   getList()
+//       }
+//     }
+//   },
+//   { immediate: true }
+// )
+
+function isFirst(index: number) {
+  if (index === 0 && paginationConfig.current_page === 1) {
+    return true
+  } else {
+    return false
+  }
+}
+
+function isLast(index: number) {
+  console.log((paginationConfig.current_page - 1) * paginationConfig.page_size + index + 1)
+  if (
+    (paginationConfig.current_page - 1) * paginationConfig.page_size + index + 1 ===
+    paginationConfig.total
+  ) {
+    return true
+  } else {
+    return false
+  }
+}
+
 function rowClickHandle(row: any) {
-  // router.push({ path: `/dataset/${id}/${row.id}` })
+  currentChatId.value = row.id
   ChatRecordRef.value.open(row.id)
 }
 
+const setRowClass = ({ row }: any) => {
+  return currentChatId.value === row?.id ? 'hightlight' : ''
+}
+
 function deleteLog(row: any) {
   MsgConfirm(`是否删除对话：${row.abstract} ?`, `删除后无法恢复，请谨慎操作。`, {
     confirmButtonText: '删除',
@@ -151,6 +202,9 @@ function getList() {
   }
   logApi.getChatLog(id as string, paginationConfig, obj, loading).then((res) => {
     tableData.value = res.data.records
+    if (currentChatId.value) {
+      currentChatId.value = tableData.value[0]?.id
+    }
     paginationConfig.total = res.data.total
   })
 }