feat: 对话日志详情翻页

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

@@ -7,7 +7,7 @@
     class="chat-record-drawer"
   >
     <template #header>
-      <h4>{{ data?.name }}</h4>
+      <h4>{{ application?.name }}</h4>
     </template>
     <div
       v-loading="paginationConfig.current_page === 1 && loading"
@@ -15,7 +15,7 @@
       style="padding: 24px 0"
     >
       <div v-infinite-scroll="loadDataset" :infinite-scroll-disabled="disabledScroll">
-        <AiChat :data="data" :record="recordList" log></AiChat>
+        <AiChat :data="application" :record="recordList" log></AiChat>
       </div>
       <div style="padding: 16px 10px">
         <el-divider class="custom-divider" v-if="recordList.length > 0 && loading">
@@ -28,27 +28,50 @@
     </div>
     <template #footer>
       <div>
-        <el-button>上一条</el-button>
-        <el-button>下一条</el-button>
+        <el-button @click="pre" :disabled="pre_disable != undefined ? pre_disable : false"
+          >上一条</el-button
+        >
+        <el-button @click="next" :disabled="next_disable != undefined ? next_disable : false"
+          >下一条</el-button
+        >
       </div>
     </template>
   </el-drawer>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import logApi from '@/api/log'
 import { type chatType } from '@/api/type/application'
+import { type ApplicationFormType } from '@/api/type/application'
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 应用信息
+     */
+    application?: ApplicationFormType
+    /**
+     * 对话 记录id
+     */
+    id?: string
+    /**
+     * 下一条
+     */
+    next: () => void
+    /**
+     * 上一条
+     */
+    pre: () => void
 
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => {}
-  }
-})
+    pre_disable: boolean
 
-const emit = defineEmits(['changeId', 'close'])
+    next_disable: boolean
+  }>(),
+  {}
+)
+
+defineEmits(['update:id'])
 
 const route = useRoute()
 const {
@@ -57,7 +80,6 @@ const {
 const loading = ref(false)
 const visible = ref(false)
 const recordList = ref<chatType[]>([])
-const currentChatId = ref('')
 
 const paginationConfig = reactive({
   current_page: 1,
@@ -78,10 +100,8 @@ const disabledScroll = computed(
 
 function closeHandel() {
   recordList.value = []
-  currentChatId.value = ''
   paginationConfig.total = 0
   paginationConfig.current_page = 1
-  emit('close')
 }
 
 function loadDataset() {
@@ -92,25 +112,25 @@ function loadDataset() {
 }
 
 function getChatRecord() {
-  logApi
-    .getChatRecordLog(id as string, currentChatId.value, paginationConfig, loading)
-    .then((res) => {
+  if (props.id && visible.value) {
+    logApi.getChatRecordLog(id as string, props.id, paginationConfig, loading).then((res) => {
       paginationConfig.total = res.data.total
       recordList.value = [...recordList.value, ...res.data.records]
     })
+  }
 }
 
-// function nextRecord(id: string) {
-//   currentChatId.value = id
-//   emit('changeId', id)
-//   recordList.value = []
-//   paginationConfig.total = 0
-//   paginationConfig.current_page = 1
-//   getChatRecord()
-// }
+watch(
+  () => props.id,
+  () => {
+    recordList.value = []
+    paginationConfig.total = 0
+    paginationConfig.current_page = 1
+    getChatRecord()
+  }
+)
 
-const open = (id: string) => {
-  currentChatId.value = id
+const open = () => {
   getChatRecord()
   visible.value = true
 }

ui/src/views/log/index.vue

@@ -63,17 +63,26 @@
         </el-table-column>
       </app-table>
     </div>
-    <ChatRecordDrawer ref="ChatRecordRef" :data="detail" />
+    <ChatRecordDrawer
+      :next="nextChatRecord"
+      :pre="preChatRecord"
+      ref="ChatRecordRef"
+      v-model:id="currentChatId"
+      :application="detail"
+      :pre_disable="pre_disable"
+      :next_disable="next_disable"
+    />
   </LayoutContainer>
 </template>
 <script setup lang="ts">
 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'
+import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
 import logApi from '@/api/log'
 import { datetimeFormat } from '@/utils/time'
 import useStore from '@/stores'
+import type { Dict } from '@/api/type/common'
 const { application } = useStore()
 const route = useRoute()
 const {
@@ -99,6 +108,62 @@ const dayOptions = [
   }
 ]
 
+/**
+ * 下一页
+ */
+const nextChatRecord = () => {
+  let index = tableIndexMap.value[currentChatId.value] + 1
+  if (index >= tableData.value.length) {
+    if (
+      index + (paginationConfig.current_page - 1) * paginationConfig.page_size >=
+      paginationConfig.total - 1
+    ) {
+      MsgError('没有更多了')
+      return
+    }
+    paginationConfig.current_page = paginationConfig.current_page + 1
+    getList().then(() => {
+      index = 0
+      currentChatId.value = tableData.value[index].id
+    })
+  } else {
+    currentChatId.value = tableData.value[index].id
+  }
+}
+const pre_disable = computed(() => {
+  let index = tableIndexMap.value[currentChatId.value] - 1
+  return index < 0 && paginationConfig.current_page <= 1
+})
+
+const next_disable = computed(() => {
+  let index = tableIndexMap.value[currentChatId.value] + 1
+  return (
+    index >= tableData.value.length &&
+    index + (paginationConfig.current_page - 1) * paginationConfig.page_size >=
+      paginationConfig.total - 1
+  )
+})
+/**
+ * 上一页
+ */
+const preChatRecord = () => {
+  let index = tableIndexMap.value[currentChatId.value] - 1
+
+  if (index < 0) {
+    if (paginationConfig.current_page <= 1) {
+      MsgError('到头了')
+      return
+    }
+    paginationConfig.current_page = paginationConfig.current_page - 1
+    getList().then((ok) => {
+      index = paginationConfig.page_size - 1
+      currentChatId.value = tableData.value[index].id
+    })
+  } else {
+    currentChatId.value = tableData.value[index].id
+  }
+}
+
 const ChatRecordRef = ref()
 const loading = ref(false)
 const paginationConfig = reactive({
@@ -107,36 +172,18 @@ const paginationConfig = reactive({
   total: 0
 })
 const tableData = ref<any[]>([])
-
+const tableIndexMap = computed<Dict<number>>(() => {
+  return tableData.value
+    .map((row, index) => ({
+      [row.id]: index
+    }))
+    .reduce((pre, next) => ({ ...pre, ...next }), {})
+})
 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 }
-// )
+const currentChatId = ref<string>('')
 
 function isFirst(index: number) {
   if (index === 0 && paginationConfig.current_page === 1) {
@@ -160,7 +207,7 @@ function isLast(index: number) {
 
 function rowClickHandle(row: any) {
   currentChatId.value = row.id
-  ChatRecordRef.value.open(row.id)
+  ChatRecordRef.value.open()
 }
 
 const setRowClass = ({ row }: any) => {
@@ -200,7 +247,7 @@ function getList() {
   if (search.value) {
     obj = { ...obj, search: search.value }
   }
-  logApi.getChatLog(id as string, paginationConfig, obj, loading).then((res) => {
+  return logApi.getChatLog(id as string, paginationConfig, obj, loading).then((res) => {
     tableData.value = res.data.records
     if (currentChatId.value) {
       currentChatId.value = tableData.value[0]?.id