style: 让AI API Log中Content内容使用JSON格式展示

package.json

@@ -43,6 +43,7 @@
     "sass-loader": "^16.0.2",
     "vue": "^3.4.29",
     "vue-draggable-plus": "^0.5.3",
+    "vue-json-pretty": "^2.4.0",
     "vue-router": "^4.3.3",
     "vue3-puzzle-vcode": "^1.1.7",
     "vue3-virtual-scroller": "^0.2.3",

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

@@ -1,17 +1,58 @@
 <script setup lang="ts">
+import VueJsonPretty from 'vue-json-pretty'
+import 'vue-json-pretty/lib/styles.css'
+
 const dialogVisible = ref(false)
 
+const test = {
+  id: 'msg_01LxDyhUhqWiN5TT4Bopg9Qn',
+  type: 'message',
+  role: 'assistant',
+  model: 'claude-3-7-sonnet-20250219',
+  content: [
+    {
+      type: 'text',
+      text: '{\n  "can_query": "false",\n  "reason": "用户的问题 \'how about Xiamen?\' 过于简短和模糊，无法确定具体的查询意图。用户可能是想查询与厦门(Xiamen)相关的货物运输信息，但没有提供任何具体的参考号码(如提单号、集装箱号、订舱号等)或其他查询条件。",\n  "response": "I\'d be happy to provide information about shipments to or from Xiamen, but I need more specific details to assist you better. \n\nCould you please provide:\n- A specific reference number (like a bill of lading, container number, or booking number)\n- Or clarify what exactly you\'d like to know about Xiamen shipments?\n\nFor example, you might be looking for:\n- Shipments currently en route to/from Xiamen\n- Shipping schedules for Xiamen\n- Transit times to/from Xiamen\n\nWith more details, I can provide you with the specific information you need."\n}'
+    }
+  ],
+  stop_reason: 'end_turn',
+  stop_sequence: null,
+  usage: {
+    input_tokens: 4490,
+    cache_creation_input_tokens: 0,
+    cache_read_input_tokens: 0,
+    output_tokens: 266,
+    service_tier: 'standard'
+  },
+  id1: 'msg_01LxDyhUhqWiN5TT4Bopg9Qn',
+  type1: 'message',
+  ro1le: 'assistant',
+  model1: 'claude-3-7-sonnet-20250219',
+  cont1ent: [
+    {
+      type: 'text',
+      text: '{\n  "can_query": "false",\n  "reason": "用户的问题 \'how about Xiamen?\' 过于简短和模糊，无法确定具体的查询意图。用户可能是想查询与厦门(Xiamen)相关的货物运输信息，但没有提供任何具体的参考号码(如提单号、集装箱号、订舱号等)或其他查询条件。",\n  "response": "I\'d be happy to provide information about shipments to or from Xiamen, but I need more specific details to assist you better. \n\nCould you please provide:\n- A specific reference number (like a bill of lading, container number, or booking number)\n- Or clarify what exactly you\'d like to know about Xiamen shipments?\n\nFor example, you might be looking for:\n- Shipments currently en route to/from Xiamen\n- Shipping schedules for Xiamen\n- Transit times to/from Xiamen\n\nWith more details, I can provide you with the specific information you need."\n}'
+    }
+  ],
+  st1op_reason: 'end_turn',
+  sto1p_sequence: null,
+  us1age: {
+    input_tokens: 4490,
+    cache_creation_input_tokens: 0,
+    cache_read_input_tokens: 0,
+    output_tokens: 266,
+    service_tier: 'standard'
+  }
+}
+
 const requestContent = ref()
-// const requestList = ref([])
 const responseContent = ref()
-// const responseList = ref()
 const requestContentRef = ref<HTMLElement | null>(null)
 const responseHeight = ref(580)
 const openDialog = (request, response) => {
   dialogVisible.value = true
   requestContent.value = request
-  responseContent.value =
-    response.choices?.[0]?.message?.content || response.content?.[0]?.text || response
+  responseContent.value = response
   nextTick(() => {
     if (requestContentRef.value) {
       const height = requestContentRef.value.scrollHeight
@@ -43,19 +84,13 @@ defineExpose({
       <div class="title">Request Content</div>
       <div class="content" ref="requestContentRef">
         {{ requestContent }}
-        <!-- <p v-for="(item, index) in requestList" :key="index">
-          {{ item }}
-        </p> -->
       </div>
     </div>
     <el-divider style="margin: 16px 0" />
     <div class="response-section">
       <div class="title">Response Content</div>
       <div class="content" :style="{ height: responseHeight + 'px' }">
-        <!-- <p v-for="(item, index) in responseList" :key="index">
-          {{ item }}
-        </p> -->
-        {{ responseContent }}
+        <vue-json-pretty :data="test" :deep="4" />
       </div>
     </div>
   </el-dialog>