tyapi-frontend/src/components/common/CodeDisplay.vue

<template>
  <div class="code-display h-full flex flex-col">
    <!-- 加载状态 -->
    <div v-if="loading" class="flex items-center justify-center p-8 flex-1">
      <el-skeleton :rows="10" animated />
    </div>

    <!-- 语言选择标签页 -->
    <div v-else class="flex flex-col h-full">
      <div class="flex-shrink-0 mb-4">
        <el-tabs
          v-model="activeLanguage"
          type="card"
          @tab-click="handleTabClick"
          class="custom-tabs"
        >
          <el-tab-pane
            v-for="lang in languages"
            :key="lang.key"
            :label="lang.label"
            :name="lang.key"
          >
            <template #label>
              <div class="flex items-center gap-2 px-1">
                <span class="text-sm font-medium">{{ lang.label }}</span>
                <span class="text-xs text-gray-400 font-mono">{{ lang.extension }}</span>
              </div>
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 代码内容区域 - 可滚动 -->
      <div class="flex-1 min-h-0 flex flex-col">
        <div class="flex justify-between items-center mb-3 flex-shrink-0">
          <h4 class="text-sm font-semibold text-gray-800 m-0">
            {{ languages.find(l => l.key === activeLanguage)?.label }} 示例代码
          </h4>
          <div class="flex gap-2">
            <el-button
              type="primary"
              size="small"
              @click="copyCode(activeLanguage)"
              class="text-xs"
            >
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
              </svg>
              复制代码
            </el-button>
            <el-button
              type="success"
              size="small"
              @click="downloadCurrentCode"
              :disabled="!hasExampleCodes"
              class="text-xs"
            >
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
              </svg>
              下载代码
            </el-button>
          </div>
        </div>

        <!-- 代码内容 - 可滚动 -->
        <div class="flex-1 bg-gray-900 rounded-lg overflow-hidden">
          <div class="h-full overflow-auto p-4">
            <pre class="text-sm text-gray-100 m-0 font-mono leading-relaxed whitespace-pre-wrap"><code>{{ getCodeContent(activeLanguage) }}</code></pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { computed, onMounted, ref } from 'vue'

// Props
const props = defineProps({
  // 移除 productCode，因为这是通用的API示例代码
})

// 响应式数据
const activeLanguage = ref('go')
const exampleCodes = ref({})
const loading = ref(false)

// 支持的语言列表
const languages = [
  { key: 'go', label: 'Go', extension: '.go', filename: 'demo.go' },
  { key: 'java', label: 'Java', extension: '.java', filename: 'demo.java' },
  { key: 'nodejs', label: 'Node.js', extension: '.js', filename: 'demo.js' },
  { key: 'csharp', label: 'C#', extension: '.cs', filename: 'demo.cs' },
  { key: 'python', label: 'Python', extension: '.py', filename: 'demo.py' },
  { key: 'php', label: 'PHP', extension: '.php', filename: 'demo.php' }
]

// 计算属性
const hasExampleCodes = computed(() => {
  return Object.keys(exampleCodes.value).length > 0
})

// 生命周期
onMounted(() => {
  loadExampleCodes()
})

// 方法
const handleTabClick = (tab) => {
  activeLanguage.value = tab.name
}

const loadExampleCodes = async () => {
  loading.value = true
  try {
    // 并行加载所有语言的示例代码
    const promises = languages.map(async (lang) => {
      try {
        const code = await loadCodeFile(lang.key, lang.filename)
        return { key: lang.key, code }
      } catch (error) {
        console.warn(`加载${lang.label}示例代码失败:`, error)
        return { key: lang.key, code: null }
      }
    })

    const results = await Promise.all(promises)

    // 构建示例代码对象
    results.forEach(result => {
      if (result.code) {
        exampleCodes.value[result.key] = result.code
      }
    })

  } catch (error) {
    console.error('加载示例代码失败:', error)
    ElMessage.error('加载示例代码失败')
  } finally {
    loading.value = false
  }
}

const loadCodeFile = async (langKey, filename) => {
  try {
    // 从 public 目录加载示例代码文件
    const response = await fetch(`/examples/${langKey}/${filename}`)
    if (response.ok) {
      return await response.text()
    } else {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }
  } catch (error) {
    console.warn(`加载${filename}失败:`, error)

    // 如果加载失败，返回默认的示例代码
    return getDefaultExampleCode(langKey)
  }
}

const getDefaultExampleCode = (langKey) => {
  const defaultCodes = {
    go: `package main

import (
    "fmt"
    "net/http"
)

func main() {
    fmt.Println("Go示例代码加载中...")
    // 请检查源码文件是否存在
}`,
    java: `public class ApiClient {
    public static void main(String[] args) {
        System.out.println("Java示例代码加载中...");
        // 请检查源码文件是否存在
    }
}`,
    nodejs: `const ApiClient = require('./api-client');

console.log('Node.js示例代码加载中...');
// 请检查源码文件是否存在`,
    csharp: `using System;

public class ApiClient {
    public static void Main(string[] args) {
        Console.WriteLine("C#示例代码加载中...");
        // 请检查源码文件是否存在
    }
}`,
    python: `#!/usr/bin/env python3

class ApiClient:
    def __init__(self):
        print("Python示例代码加载中...")
        # 请检查源码文件是否存在

if __name__ == "__main__":
    client = ApiClient()`,
    php: `<?php

class ApiClient {
    public function __construct() {
        echo "PHP示例代码加载中...\n";
        // 请检查源码文件是否存在
    }
}

$client = new ApiClient();`
  }

  return defaultCodes[langKey] || '// 示例代码加载中...'
}

const getCodeContent = (langKey) => {
  const code = exampleCodes.value[langKey]
  if (!code) {
    return `// 暂无 ${languages.find(l => l.key === langKey)?.label} 示例代码`
  }

  // 过滤掉 source map 注释行
  return code.split('\n')
    .filter(line => !line.trim().startsWith('//# sourceMappingURL='))
    .join('\n')
}

const copyCode = async (langKey) => {
  const code = getCodeContent(langKey)
  try {
    await navigator.clipboard.writeText(code)
    ElMessage.success(`${languages.find(l => l.key === langKey)?.label} 代码已复制到剪贴板`)
  } catch (error) {
    console.error('复制失败:', error)
    ElMessage.error('复制失败，请手动复制')
  }
}

const downloadCurrentCode = () => {
  if (!hasExampleCodes.value) {
    ElMessage.warning('暂无示例代码可下载')
    return
  }

  const lang = languages.find(l => l.key === activeLanguage.value)
  if (!lang) {
    ElMessage.error('未找到当前语言的示例代码')
    return
  }

  const code = getCodeContent(activeLanguage.value)
  if (code && !code.includes('暂无') && !code.includes('加载中')) {
    // 过滤掉 source map 注释行，确保下载的文件也不包含
    const cleanCode = code.split('\n')
      .filter(line => !line.trim().startsWith('//# sourceMappingURL='))
      .join('\n')

    const blob = new Blob([cleanCode], { type: 'text/plain;charset=utf-8' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `天远数据API_Demo_${lang.label}${lang.extension}`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
    ElMessage.success(`${lang.label} 代码已下载`)
  } else {
    ElMessage.warning('当前语言暂无示例代码或加载失败')
  }
}
</script>

<style scoped>
.code-display {
  min-height: 400px;
}

/* 自定义标签页样式 */
:deep(.custom-tabs) {
  --el-tabs-header-height: 48px;
}

:deep(.custom-tabs .el-tabs__header) {
  margin-bottom: 0;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 8px 8px 0 0;
  padding: 0 16px;
}

:deep(.custom-tabs .el-tabs__nav-wrap) {
  padding: 0;
}

:deep(.custom-tabs .el-tabs__nav) {
  border: none;
  background: transparent;
}

:deep(.custom-tabs .el-tabs__item) {
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: none;
  border-radius: 6px 6px 0 0;
  margin-right: 4px;
  padding: 0 16px;
  transition: all 0.2s ease;
  position: relative;
}

:deep(.custom-tabs .el-tabs__item:hover) {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

:deep(.custom-tabs .el-tabs__item.is-active) {
  color: #3b82f6;
  background: white;
  border-bottom: 2px solid #3b82f6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

:deep(.custom-tabs .el-tabs__item.is-active::before) {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #3b82f6;
  border-radius: 6px 6px 0 0;
}

:deep(.custom-tabs .el-tabs__content) {
  padding: 0;
  background: white;
  border-radius: 0 0 8px 8px;
  border: 1px solid #e5e7eb;
  border-top: none;
}

:deep(.custom-tabs .el-tabs__active-bar) {
  display: none;
}

/* 代码区域样式 */
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* 滚动条样式 */
.overflow-auto::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.overflow-auto::-webkit-scrollbar-track {
  background: #374151;
  border-radius: 4px;
}

.overflow-auto::-webkit-scrollbar-thumb {
  background: #6b7280;
  border-radius: 4px;
}

.overflow-auto::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* 标签页内容区域 */
.overflow-auto::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.overflow-auto::-webkit-scrollbar-track {
  background: #374151;
  border-radius: 4px;
}

.overflow-auto::-webkit-scrollbar-thumb {
  background: #6b7280;
  border-radius: 4px;
}

.overflow-auto::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}
</style>