feat: 实现ai api log弹窗

src/views/AIApiLog/src/components/LogDialog.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+const dialogVisible = ref(false)
+
+const openDialog = () => {
+  dialogVisible.value = true
+}
+defineExpose({
+  openDialog
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogVisible" class="log-dialog" title="AI API Log" width="1000" top="10vh">
+    <div class="request-section">
+      <div class="title">Request Content</div>
+      <div class="content">
+        Hello, I would like to check the status of my package. The tracking number is ABC123456789.
+      </div>
+    </div>
+    <el-divider style="margin: 16px 0" />
+    <div class="response-section">
+      <div class="title">Request Content</div>
+      <p class="content">
+        Hey there! For the package with tracking number ABC123456789, the latest update is: [insert
+        latest tracking status here, e.g., shipped, in transit, arrived at the delivery hub, out for
+        delivery, etc.]. You can see more details by clicking this link: [insert detailed tracking
+        link here].Hey there! For the package with tracking number ABC123456789, the latest update
+        is: [insert latest tracking status here, e.g., shipped, in transit, arrived at the delivery
+        hub, out for delivery, etc.]. You can see more details by clicking this link: [insert
+        detailed tracking link here].Hey there! For the package with tracking number ABC123456789,
+        the latest update is: [insert latest tracking status here, e.g., shipped, in transit,
+        arrived at the delivery hub, out for delivery, etc.]. You can see more details by clicking
+        this link: [insert detailed tracking link here].Hey there! For the package with tracking
+        number ABC123456789, the latest update is: [insert latest tracking status here, e.g.,
+        shipped, in transit, arrived at the delivery hub, out for delivery, etc.]. You can see more
+        details by clicking this link: [insert detailed tracking link here].Hey there! For the
+        package with tracking number ABC123456789, the latest update is: [insert latest tracking
+        status here, e.g., shipped, in transit, arrived at the delivery hub, out for delivery,
+        etc.]. You can see more details by clicking this link: [insert detailed tracking link
+        here].Hey there! For the package with tracking number ABC123456789, the latest update is:
+        [insert latest tracking status here, e.g., shipped, in transit, arrived at the delivery hub,
+        out for delivery, etc.]. You can see more details by clicking this link: [insert detailed
+        tracking link here].
+      </p>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.title {
+  margin-bottom: 8px;
+
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 22px;
+}
+.content {
+  line-height: 21px;
+}
+.request-section {
+  padding: 16px;
+  padding-bottom: 0;
+}
+.response-section {
+  padding: 16px;
+  padding-top: 0;
+  .content {
+    padding: 8px 16px 20px 16px;
+    border-radius: 6px;
+    background-color: var(--color-share-link-bg);
+  }
+}
+</style>
+<style>
+.log-dialog {
+  height: 80%;
+  .el-dialog__body {
+    padding: 0;
+  }
+}
+</style>

src/views/AIApiLog/src/components/TableView/src/TableView.vue

@@ -6,6 +6,7 @@ import DownloadDialog from './components/DownloadDialog.vue'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import dayjs from 'dayjs'
 import { formatTimezone, formatNumber } from '@/utils/tools'
+import LogDialog from '../../LogDialog.vue'
 
 const props = defineProps({
   height: {
@@ -62,7 +63,8 @@ const getTableColumns = async () => {
     if (res.code === 200) {
       tableData.value.columns = [
         { type: 'checkbox', width: 50, fixed: 'left' },
-        ...handleColumns(res.data.OperationTableColumns)
+        ...handleColumns(res.data.OperationTableColumns),
+        { title: 'Action', width: 102, fixed: 'right', slots: { default: 'action' } }
       ]
       tableOriginColumnsField.value = res.data.OperationTableColumns
     }
@@ -332,6 +334,12 @@ const handleCheckAllChange = ({ records }: any) => {
   selectedNumber.value = records.length
   selectedTableData.value = records
 }
+
+const logDialogRef = ref()
+const handleLogDetail = (row) => {
+  logDialogRef.value.openDialog(row)
+}
+
 defineExpose({
   SearchOperationLog
 })
@@ -368,6 +376,19 @@ defineExpose({
       <template #empty v-if="!tableLoadingTableData && tableData.data.length === 0">
         <VEmpty></VEmpty>
       </template>
+      <!-- action操作栏的插槽 -->
+      <template #action="{ row }">
+        <el-button
+          style="height: 24px; padding: 8px 4px; font-size: 12px"
+          @click="handleLogDetail(row)"
+        >
+          <span
+            style="margin-right: 2px; font-size: 15px"
+            class="font_family icon-icon_save_b"
+          ></span
+          >AI API Log
+        </el-button>
+      </template>
     </vxe-grid>
     <vxe-grid :height="10" ref="allTableRef" class="all-table" v-bind="allTable"> </vxe-grid>
     <div class="bottom-pagination">
@@ -387,6 +408,7 @@ defineExpose({
       </div>
     </div>
     <DownloadDialog @export="getExportTableData" ref="downloadDialogRef" />
+    <LogDialog ref="logDialogRef" />
   </div>
 </template>
 

src/views/ChatLog/src/ChatLog.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useCalculatingHeight } from '@/hooks/calculatingHeight'
 import TableView from './components/TableView'
+import LogDialog from '@/views/AIApiLog/src/components/LogDialog.vue'
 
 const OperationSearch = ref()
 const filterRef: Ref<HTMLElement | null> = ref(null)
@@ -94,6 +95,11 @@ const DateChange = (date: any) => {
   searchData.value.endDate = date[1]
   tableRef.value.SearchOperationLog(searchData.value)
 }
+
+const logDialogRef = ref()
+const openDialog = () => {
+  logDialogRef.value.openDialog()
+}
 </script>
 <template>
   <div class="dashboard">
@@ -185,6 +191,7 @@ const DateChange = (date: any) => {
       </div>
     </div>
     <TableView :height="containerHeight" ref="tableRef"></TableView>
+    <LogDialog ref="logDialogRef" />
   </div>
 </template>