admin-ui/src/components/markdown/plugins/impl/ToolsLoadingCard.vue

<template>
  <el-collapse v-model="activeCollapse" class="tools-collapse">
    <el-collapse-item :name="collapseKey" class="tools-collapse-item">
      <template #title>
        <div class="collapse-header">
          <el-tag :type="getRequestTagType()" size="small" class="type-tag">
            {{ toolData.requestType }}
          </el-tag>
          <span class="tool-name">{{ toolData.toolName || '未知工具' }}</span>
        </div>
      </template>

      <div class="collapse-content">
        <div v-if="toolData.data">
          <pre class="json-content">{{ formatData(toolData.data) }}</pre>
        </div>
        <el-empty v-else description="暂无数据" />
      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

type Props = {
  data: string
}

interface ToolData {
  requestType: string // request/response
  toolName: string // 工具名
  data: string // 参数或返回结果
}

const props = defineProps<Props>()

const activeCollapse = ref<string[]>([])
const collapseKey = ref('tool-collapse')
const toolData = ref<ToolData>({
  requestType: '',
  toolName: '',
  data: ''
})



// 解析传入的数据
onMounted(() => {
  try {
    const decodedData = decodeURIComponent(props.data)
    const lines = decodedData.trim().split('\n')

    if (lines.length >= 2) {
      toolData.value = {
        requestType: lines[0] || 'request',
        toolName: lines[1] || '未知工具',
        data: lines[2] || '' // 第三行为参数/结果，可能不存在
      }
    } else {
      toolData.value = {
        requestType: 'error',
        toolName: '数据格式错误',
        data: '应为2-3行格式：request/response、工具名、参数/结果'
      }
    }
  } catch (e) {
    console.error('解析工具数据失败:', e)
    toolData.value = {
      requestType: 'error',
      toolName: '数据解析失败',
      data: '解析错误'
    }
  }
})

// 获取请求类型标签类型
const getRequestTagType = () => {
  const type = toolData.value.requestType.toLowerCase()
  switch (type) {
    case 'request':
      return 'primary'
    case 'response':
      return 'success'
    case 'error':
      return 'danger'
    default:
      return 'info'
  }
}



// 格式化数据显示
const formatData = (data: string) => {
  try {
    // 尝试解析为JSON并格式化
    const parsed = JSON.parse(data)
    return JSON.stringify(parsed, null, 2)
  } catch {
    // 如果不是JSON，直接返回原始数据
    return data
  }
}
</script>

<style scoped>
.tools-collapse {
  border: 1px solid var(--el-border-color-light);
  border-radius: 6px;
  overflow: hidden;
  margin: 8px 0;
}

.tools-collapse-item {
  border: none;
}

.tools-collapse-item :deep(.el-collapse-item__header) {
  padding: 0;
  border: none;
  background: transparent;
  height: auto;
  min-height: 16px;
  position: relative;
}

.tools-collapse-item :deep(.el-collapse-item__content) {
  padding: 0;
  border: none;
}

/* 调整展开箭头位置 */
:deep(.el-collapse-item__arrow) {
	margin-top: 8px;
	margin-bottom: 8px;
}

.collapse-header {
  padding: 2px 8px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.type-tag {
  font-size: 10px;
  flex-shrink: 0;
  padding: 1px 4px;
  line-height: 1;
  height: auto;
}

.tool-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  word-break: break-all;
  flex: 1;
  line-height: 1;
  padding: 0;
  margin: 0;
}

.collapse-content {
  padding: 4px 8px 4px 8px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.json-content {
  background-color: var(--el-fill-color-light);
  border: 1px solid var(--el-border-color-light);
  border-radius: 3px;
  padding: 4px 6px;
  margin: 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 11px;
  line-height: 1.2;
  color: var(--el-text-color-primary);
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
  max-height: 120px;
  overflow-y: auto;
}


</style>