feat: 执行详情

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

@@ -0,0 +1,83 @@
+<template>
+  <el-dialog title="执行详情" v-model="dialogVisible" destroy-on-close append-to-body align-center>
+    <el-scrollbar>
+      <div class="paragraph-source-height">
+        <el-card class="mb-8" shadow="never" style="--el-card-padding: 12px 16px">
+          <div class="flex-between cursor">
+            <div class="flex align-center">
+              <el-icon class="mr-8"><CaretRight /></el-icon>
+              开始
+            </div>
+            <div class="flex align-center">
+              <span class="mr-16 color-secondary">6.01s</span>
+              <el-icon class="success" :size="16"><CircleCheck /></el-icon>
+            </div>
+          </div>
+          <el-collapse-transition>
+            <div class="card-never border-r-4 mt-8">
+              <div class="p-8-12">参数输入</div>
+              <div class="p-8-12 border-t-dashed lighter">如何快速开始</div>
+            </div>
+          </el-collapse-transition>
+        </el-card>
+      </div>
+    </el-scrollbar>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, onBeforeUnmount } from 'vue'
+import { cloneDeep } from 'lodash'
+import { arraySort } from '@/utils/utils'
+import { MdPreview } from 'md-editor-v3'
+const emit = defineEmits(['refresh'])
+
+const dialogVisible = ref(false)
+const detail = ref<any>({})
+
+const current = ref('')
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    detail.value = {}
+  }
+})
+
+const open = (data: any, id?: string) => {
+  detail.value = cloneDeep(data)
+
+  dialogVisible.value = true
+}
+onBeforeUnmount(() => {
+  dialogVisible.value = false
+})
+defineExpose({ open })
+</script>
+<style lang="scss">
+.paragraph-source {
+  padding: 0;
+
+  .el-dialog__header {
+    padding: 24px 24px 0 24px;
+  }
+  .el-dialog__body {
+    padding: 8px !important;
+  }
+  .paragraph-source-height {
+    max-height: calc(100vh - 260px);
+  }
+  .paragraph-source-card {
+    height: 260px;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .paragraph-source {
+    width: 90% !important;
+    .footer-content {
+      display: block;
+    }
+    .paragraph-source-card {
+      height: 285px;
+    }
+  }
+}
+</style>

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

@@ -7,7 +7,7 @@
       引用分段 {{ data.paragraph_list?.length || 0 }}</el-button
     >
   </div>
-  <div class="mt-8 mb-12">
+  <div class="mt-8">
     <el-space wrap>
       <el-button
         v-for="(dataset, index) in data.dataset_list"
@@ -20,16 +20,25 @@
     </el-space>
   </div>
 
-  <div class="border-t color-secondary" style="padding-top: 12px">
-    <span class="mr-8"> 消耗 tokens: {{ data?.message_tokens + data?.answer_tokens }} </span>
-    <span> 耗时: {{ data?.run_time?.toFixed(2) }} s</span>
+  <div class="border-t color-secondary flex-between mt-12" style="padding-top: 12px">
+    <div>
+      <span class="mr-8"> 消耗 tokens: {{ data?.message_tokens + data?.answer_tokens }} </span>
+      <span> 耗时: {{ data?.run_time?.toFixed(2) }} s</span>
+    </div>
+    <el-button type="primary" link @click="openExecutionDetail(data)">
+      <el-icon class="mr-4"><Document /></el-icon>
+      执行详情</el-button
+    >
   </div>
   <!-- 知识库引用 dialog -->
   <ParagraphSourceDialog ref="ParagraphSourceDialogRef" />
+  <!-- 执行详情 dialog -->
+  <ExecutionDetailDialog ref="ExecutionDetialDialogRef" />
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 import ParagraphSourceDialog from './ParagraphSourceDialog.vue'
+import ExecutionDetailDialog from './ExecutionDetailDialog.vue'
 
 const props = defineProps({
   data: {
@@ -39,9 +48,13 @@ const props = defineProps({
 })
 
 const ParagraphSourceDialogRef = ref()
+const ExecutionDetialDialogRef = ref()
 function openParagraph(row: any, id?: string) {
   ParagraphSourceDialogRef.value.open(row, id)
 }
+function openExecutionDetail(row: any, id?: string) {
+  ExecutionDetialDialogRef.value.open(row)
+}
 </script>
 <style lang="scss" scoped>
 .source_dataset-button {

ui/src/styles/app.scss

@@ -288,6 +288,10 @@ h5 {
   border-radius: 4px;
 }
 
+.border-t-dashed {
+  border-top: 1px dashed var(--el-border-color);
+}
+
 .cursor {
   cursor: pointer;
 }