1448 lines
37 KiB
Vue
1448 lines
37 KiB
Vue
<template>
|
||
<div class="list-page-container">
|
||
<div class="list-page-card">
|
||
<!-- 页面头部 -->
|
||
<div class="list-page-header">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h1 class="list-page-title">{{ product?.name || '产品详情' }}</h1>
|
||
<p class="list-page-subtitle">{{ product?.description || '查看产品详细信息' }}</p>
|
||
</div>
|
||
<div class="list-page-actions">
|
||
<el-button @click="$router.back()">返回</el-button>
|
||
<el-button
|
||
v-if="product?.documentation"
|
||
type="info"
|
||
@click="downloadDocumentation"
|
||
:loading="downloading"
|
||
>
|
||
<el-icon><Download /></el-icon>
|
||
{{ product?.documentation?.pdf_file_path ? '下载PDF文档' : '下载接口文档' }}
|
||
</el-button>
|
||
<el-button
|
||
v-if="!isSubscribed"
|
||
type="primary"
|
||
@click="handleSubscribe"
|
||
:loading="subscribing"
|
||
>
|
||
订阅产品
|
||
</el-button>
|
||
<el-button
|
||
v-else
|
||
type="danger"
|
||
@click="handleCancelSubscription"
|
||
:loading="cancelling"
|
||
>
|
||
取消订阅
|
||
</el-button>
|
||
<el-button
|
||
v-if="isSubscribed"
|
||
type="warning"
|
||
@click="goToApiDebugger"
|
||
>
|
||
前往在线调试
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产品详情内容 -->
|
||
<div class="list-page-table">
|
||
<div v-if="loading" class="flex justify-center items-center py-12">
|
||
<el-loading size="large" />
|
||
</div>
|
||
|
||
<div v-else-if="!product" class="text-center py-12">
|
||
<el-empty description="产品不存在" />
|
||
</div>
|
||
|
||
<div v-else class="product-detail-content">
|
||
<!-- 基本信息 -->
|
||
<div class="detail-section">
|
||
<h3 class="section-title">基本信息</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div class="info-item">
|
||
<label class="info-label">产品编号</label>
|
||
<span class="info-value">{{ product.code }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label class="info-label">产品名称</label>
|
||
<span class="info-value">{{ product.name }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label class="info-label">产品分类</label>
|
||
<span class="info-value">{{ product.category?.name || '未分类' }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label class="info-label">产品类型</label>
|
||
<span class="info-value">
|
||
<el-tag :type="product.is_package ? 'success' : 'info'" size="small">
|
||
{{ product.is_package ? '组合包' : '单品' }}
|
||
</el-tag>
|
||
</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label class="info-label">价格</label>
|
||
<span class="info-value price">¥{{ formatPrice(product.price) }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label class="info-label">状态</label>
|
||
<span class="info-value">
|
||
<el-tag :type="product.is_enabled ? 'success' : 'danger'" size="small">
|
||
{{ product.is_enabled ? '已启用' : '已禁用' }}
|
||
</el-tag>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产品描述 -->
|
||
<div class="detail-section">
|
||
<h3 class="section-title">产品描述</h3>
|
||
<div class="description-content">
|
||
{{ product.description || '暂无描述' }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 组合包信息 -->
|
||
<div v-if="product.is_package && product.package_items && product.package_items.length > 0" class="detail-section">
|
||
<h3 class="section-title">组合包内容</h3>
|
||
<div class="package-items-container">
|
||
<div class="package-summary">
|
||
<el-alert
|
||
title="此组合包包含以下产品"
|
||
type="info"
|
||
:closable="false"
|
||
show-icon
|
||
>
|
||
<template #default>
|
||
<p>共 {{ product.package_items.length }} 个产品，总价值 ¥{{ calculatePackageTotalPrice() }}</p>
|
||
</template>
|
||
</el-alert>
|
||
</div>
|
||
|
||
<div class="package-items-grid">
|
||
<div
|
||
v-for="item in product.package_items"
|
||
:key="item.id"
|
||
class="package-item-card"
|
||
@click="openProductDetail(item.product_id)"
|
||
>
|
||
<div class="package-item-header">
|
||
<div class="package-item-info">
|
||
<h4 class="package-item-name">{{ item.product_name }}</h4>
|
||
</div>
|
||
<div class="package-item-quantity">
|
||
<el-tag type="primary" size="small">{{ item.product_code }}</el-tag>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="package-item-price">
|
||
<span class="price-label">价值：</span>
|
||
<span class="price-value">¥{{ formatPrice(item.price) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 内容Tab -->
|
||
<div class="detail-section">
|
||
<el-tabs v-model="activeTab" type="card" class="content-tabs">
|
||
<!-- 产品内容Tab -->
|
||
<el-tab-pane label="产品内容" name="content">
|
||
<div class="tab-content">
|
||
<div class="content-richtext" v-html="product.content || '<p>暂无内容</p>'"></div>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<!-- 请求方式Tab -->
|
||
<el-tab-pane label="请求方式" name="basic_info">
|
||
<div class="tab-content">
|
||
<!-- 请求URL信息 -->
|
||
<div v-if="product.documentation?.request_url" class="request-url-section">
|
||
<h4 class="request-url-title">请求地址</h4>
|
||
<div class="request-url-content">
|
||
<div class="request-method">
|
||
<el-tag :type="getMethodTagType(product.documentation?.request_method)" size="small">
|
||
{{ product.documentation?.request_method || 'POST' }}
|
||
</el-tag>
|
||
</div>
|
||
<div class="request-url">
|
||
<code>{{ product.documentation?.request_url }}</code>
|
||
<el-button
|
||
type="text"
|
||
size="small"
|
||
@click="copyRequestUrl"
|
||
class="copy-btn"
|
||
>
|
||
<el-icon><DocumentCopy /></el-icon>
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<!-- 时间戳备注 -->
|
||
<div class="timestamp-note">
|
||
<el-alert
|
||
title="时间戳说明"
|
||
type="info"
|
||
:closable="false"
|
||
show-icon
|
||
size="small"
|
||
>
|
||
<template #default>
|
||
<p>URL中的 <code>t=13位时间戳</code> 参数需要实时生成当前时间，当前时间戳：<strong>{{ currentTimestamp }}</strong></p>
|
||
</template>
|
||
</el-alert>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="product.documentation?.basic_info" class="doc-content" ref="basicInfoRef" v-html="renderMarkdown(product.documentation.basic_info)"></div>
|
||
<div v-else class="doc-content" ref="basicInfoRef" v-html="renderMarkdown(getDefaultBasicInfo())"></div>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<!-- 请求参数Tab -->
|
||
<el-tab-pane label="请求参数" name="request_params">
|
||
<div class="tab-content">
|
||
<div v-if="product.documentation?.request_params" class="doc-content" ref="requestParamsRef" v-html="renderMarkdown(product.documentation.request_params)"></div>
|
||
<div v-else class="no-content">
|
||
<el-empty description="暂无请求参数说明" />
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<!-- 返回字段说明Tab -->
|
||
<el-tab-pane label="返回字段说明" name="response_fields">
|
||
<div class="tab-content">
|
||
<div v-if="product.documentation?.response_fields">
|
||
<div class="tab-content-actions">
|
||
<el-button
|
||
size="small"
|
||
@click="downloadMarkdown('response_fields')"
|
||
class="download-btn"
|
||
>
|
||
下载文档
|
||
</el-button>
|
||
</div>
|
||
<div class="doc-content" ref="responseFieldsRef" v-html="renderMarkdown(product.documentation.response_fields)"></div>
|
||
</div>
|
||
<div v-else class="no-content">
|
||
<el-empty description="暂无返回字段说明" />
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<!-- 响应示例Tab -->
|
||
<el-tab-pane label="响应示例" name="response_example">
|
||
<div class="tab-content">
|
||
<div v-if="product.documentation?.response_example">
|
||
<div class="tab-content-actions">
|
||
<el-button
|
||
size="small"
|
||
@click="downloadMarkdown('response_example')"
|
||
class="download-btn"
|
||
>
|
||
下载示例
|
||
</el-button>
|
||
</div>
|
||
<div class="doc-content" ref="responseExampleRef" v-html="renderMarkdown(product.documentation.response_example)"></div>
|
||
</div>
|
||
<div v-else class="no-content">
|
||
<el-empty description="暂无响应示例" />
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<!-- 错误代码Tab -->
|
||
<el-tab-pane label="错误代码" name="error_codes">
|
||
<div class="tab-content">
|
||
<div v-if="product.documentation?.error_codes" class="doc-content" ref="errorCodesRef" v-html="renderMarkdown(product.documentation.error_codes)"></div>
|
||
<div v-else class="doc-content" ref="errorCodesRef" v-html="renderMarkdown(getDefaultErrorCodes())"></div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { productApi, subscriptionApi } from '@/api'
|
||
import { DocumentCopy, Download } from '@element-plus/icons-vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { marked } from 'marked'
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
|
||
// 响应式数据
|
||
const loading = ref(false)
|
||
const product = ref(null)
|
||
const userSubscriptions = ref([])
|
||
const subscribing = ref(false)
|
||
const cancelling = ref(false)
|
||
const downloading = ref(false)
|
||
const activeTab = ref('content')
|
||
const currentTimestamp = ref('')
|
||
|
||
// DOM 引用
|
||
const basicInfoRef = ref(null)
|
||
const requestParamsRef = ref(null)
|
||
const responseFieldsRef = ref(null)
|
||
const responseExampleRef = ref(null)
|
||
const errorCodesRef = ref(null)
|
||
|
||
// 计算属性
|
||
const isSubscribed = computed(() => {
|
||
if (!product.value || !userSubscriptions.value.length) return false
|
||
return userSubscriptions.value.some(sub => sub.product_id === product.value.id)
|
||
})
|
||
|
||
// 获取当前产品的订阅信息
|
||
const currentSubscription = computed(() => {
|
||
if (!product.value || !userSubscriptions.value.length) return null
|
||
return userSubscriptions.value.find(sub => sub.product_id === product.value.id)
|
||
})
|
||
|
||
// 初始化
|
||
onMounted(() => {
|
||
loadUserSubscriptions()
|
||
loadProductDetail().then(() => {
|
||
addCollapsibleFeatures()
|
||
})
|
||
startTimestampUpdate()
|
||
})
|
||
|
||
// 组件卸载时清理定时器
|
||
onUnmounted(() => {
|
||
if (timestampTimer.value) {
|
||
clearInterval(timestampTimer.value)
|
||
}
|
||
})
|
||
|
||
// 时间戳更新定时器
|
||
const timestampTimer = ref(null)
|
||
|
||
// 开始时间戳更新
|
||
const startTimestampUpdate = () => {
|
||
// 立即更新一次
|
||
currentTimestamp.value = getCurrentTimestamp()
|
||
|
||
// 每秒更新一次
|
||
timestampTimer.value = setInterval(() => {
|
||
currentTimestamp.value = getCurrentTimestamp()
|
||
}, 1000)
|
||
}
|
||
|
||
// 加载用户订阅
|
||
const loadUserSubscriptions = async () => {
|
||
try {
|
||
const response = await subscriptionApi.getMySubscriptions({ page: 1, page_size: 1000 })
|
||
userSubscriptions.value = response.data?.items || []
|
||
} catch (error) {
|
||
console.error('加载用户订阅失败:', error)
|
||
}
|
||
}
|
||
|
||
// 加载产品详情
|
||
const loadProductDetail = async () => {
|
||
const productId = route.params.id
|
||
if (!productId) {
|
||
ElMessage.error('产品ID不存在')
|
||
router.push('/products')
|
||
return
|
||
}
|
||
|
||
loading.value = true
|
||
try {
|
||
// 添加 with_document 参数获取文档信息
|
||
const response = await productApi.getProductDetail(productId, { with_document: true })
|
||
product.value = response.data
|
||
} catch (error) {
|
||
console.error('加载产品详情失败:', error)
|
||
ElMessage.error('加载产品详情失败')
|
||
router.push('/products')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 格式化价格
|
||
const formatPrice = (price) => {
|
||
if (!price) return '0.00'
|
||
return Number(price).toFixed(2)
|
||
}
|
||
|
||
// 计算组合包总价
|
||
const calculatePackageTotalPrice = () => {
|
||
if (!product.value?.package_items || !product.value.package_items.length) {
|
||
return '0.00'
|
||
}
|
||
|
||
const total = product.value.package_items.reduce((sum, item) => {
|
||
return sum + item.price
|
||
}, 0)
|
||
|
||
return formatPrice(total)
|
||
}
|
||
|
||
// Markdown渲染方法
|
||
const renderMarkdown = (content) => {
|
||
if (!content) return '<p>暂无内容</p>'
|
||
try {
|
||
return marked(content)
|
||
} catch (error) {
|
||
console.error('Markdown渲染失败:', error)
|
||
return content
|
||
}
|
||
}
|
||
|
||
// 添加折叠功能到文档内容
|
||
const addCollapsibleFeatures = () => {
|
||
nextTick(() => {
|
||
const refs = [basicInfoRef, requestParamsRef, responseFieldsRef, responseExampleRef, errorCodesRef]
|
||
|
||
refs.forEach(ref => {
|
||
if (!ref.value) return
|
||
|
||
const container = ref.value
|
||
|
||
// 为子产品标题（h2）添加折叠功能
|
||
const h2Elements = container.querySelectorAll('h2')
|
||
h2Elements.forEach((h2) => {
|
||
// 检查是否已经有折叠按钮
|
||
if (h2.querySelector('.collapse-toggle')) return
|
||
|
||
// 检查下一个兄弟元素是否是已经处理过的折叠内容
|
||
if (h2.nextElementSibling?.classList.contains('collapsible-content')) return
|
||
|
||
// 查找下一个 h2、h1 或分隔线（hr）之间的内容
|
||
let nextSibling = h2.nextElementSibling
|
||
let contentEnd = null
|
||
|
||
// 找到下一个 h2、h1 或分隔线（hr）
|
||
while (nextSibling) {
|
||
if (nextSibling.tagName === 'H2' || nextSibling.tagName === 'H1' || nextSibling.tagName === 'HR') {
|
||
contentEnd = nextSibling
|
||
break
|
||
}
|
||
nextSibling = nextSibling.nextElementSibling
|
||
}
|
||
|
||
// 如果找到内容，创建折叠容器
|
||
if (h2.nextElementSibling && h2.nextElementSibling !== contentEnd) {
|
||
// 创建折叠按钮（放在 h2 内部，作为可点击的标题）
|
||
const toggleBtn = document.createElement('button')
|
||
toggleBtn.className = 'collapse-toggle'
|
||
toggleBtn.innerHTML = '<span class="collapse-icon">▼</span>'
|
||
toggleBtn.setAttribute('aria-expanded', 'true')
|
||
toggleBtn.setAttribute('title', '点击展开/折叠')
|
||
|
||
// 将按钮插入到 h2 内部（在文本前面）
|
||
const h2Text = h2.textContent
|
||
h2.innerHTML = ''
|
||
h2.appendChild(toggleBtn)
|
||
h2.appendChild(document.createTextNode(' ' + h2Text))
|
||
h2.style.cursor = 'pointer'
|
||
h2.style.userSelect = 'none'
|
||
|
||
// 创建内容容器
|
||
const contentWrapper = document.createElement('div')
|
||
contentWrapper.className = 'collapsible-content'
|
||
|
||
// 移动内容到容器中
|
||
let sibling = h2.nextElementSibling
|
||
while (sibling && sibling !== contentEnd) {
|
||
const nextSibling = sibling.nextElementSibling
|
||
contentWrapper.appendChild(sibling)
|
||
sibling = nextSibling
|
||
}
|
||
|
||
// 插入内容容器到 h2 后面
|
||
h2.parentNode.insertBefore(contentWrapper, h2.nextSibling)
|
||
|
||
// 添加点击事件（h2 和按钮都可以点击）
|
||
const toggleCollapse = () => {
|
||
const isExpanded = toggleBtn.getAttribute('aria-expanded') === 'true'
|
||
contentWrapper.style.display = isExpanded ? 'none' : 'block'
|
||
toggleBtn.setAttribute('aria-expanded', !isExpanded)
|
||
toggleBtn.querySelector('.collapse-icon').textContent = isExpanded ? '▶' : '▼'
|
||
}
|
||
|
||
toggleBtn.addEventListener('click', (e) => {
|
||
e.stopPropagation()
|
||
toggleCollapse()
|
||
})
|
||
|
||
h2.addEventListener('click', (e) => {
|
||
if (e.target !== toggleBtn && !toggleBtn.contains(e.target)) {
|
||
toggleCollapse()
|
||
}
|
||
})
|
||
}
|
||
})
|
||
|
||
// 为 JSON 代码块（pre）添加折叠功能
|
||
const preElements = container.querySelectorAll('pre')
|
||
preElements.forEach(pre => {
|
||
// 检查是否已经有折叠按钮
|
||
if (pre.previousElementSibling?.classList.contains('code-collapse-toggle')) return
|
||
|
||
// 创建折叠按钮
|
||
const toggleBtn = document.createElement('button')
|
||
toggleBtn.className = 'code-collapse-toggle'
|
||
toggleBtn.innerHTML = '<span class="collapse-icon">▼</span> <span class="collapse-text">展开/折叠代码</span>'
|
||
toggleBtn.setAttribute('aria-expanded', 'true')
|
||
|
||
// 插入按钮
|
||
pre.parentNode.insertBefore(toggleBtn, pre)
|
||
|
||
// 添加点击事件
|
||
toggleBtn.addEventListener('click', () => {
|
||
const isExpanded = toggleBtn.getAttribute('aria-expanded') === 'true'
|
||
pre.style.display = isExpanded ? 'none' : 'block'
|
||
toggleBtn.setAttribute('aria-expanded', !isExpanded)
|
||
toggleBtn.querySelector('.collapse-icon').textContent = isExpanded ? '▶' : '▼'
|
||
})
|
||
})
|
||
})
|
||
})
|
||
}
|
||
|
||
// 监听 activeTab 变化，重新添加折叠功能
|
||
watch(activeTab, () => {
|
||
addCollapsibleFeatures()
|
||
})
|
||
|
||
// 监听产品数据变化，重新添加折叠功能
|
||
watch(() => product.value?.documentation, () => {
|
||
addCollapsibleFeatures()
|
||
}, { deep: true })
|
||
|
||
// 订阅产品
|
||
const handleSubscribe = async () => {
|
||
if (!product.value) return
|
||
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
`确定要订阅产品"${product.value.name}"吗？`,
|
||
'确认订阅',
|
||
{
|
||
confirmButtonText: '确定订阅',
|
||
cancelButtonText: '取消',
|
||
type: 'info'
|
||
}
|
||
)
|
||
|
||
subscribing.value = true
|
||
|
||
await productApi.subscribeProduct(product.value.id)
|
||
ElMessage.success('订阅成功')
|
||
|
||
// 重新加载用户订阅
|
||
await loadUserSubscriptions()
|
||
} catch (error) {
|
||
if (error !== 'cancel') {
|
||
console.error('订阅失败:', error)
|
||
const errorMessage = error.response?.data?.message || error.message || '订阅失败'
|
||
ElMessage.error(errorMessage)
|
||
}
|
||
} finally {
|
||
subscribing.value = false
|
||
}
|
||
}
|
||
|
||
// 取消订阅
|
||
const handleCancelSubscription = async () => {
|
||
if (!product.value || !currentSubscription.value) return
|
||
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
`确定要取消订阅产品"${product.value.name}"吗？取消后将无法继续使用该产品的API服务。`,
|
||
'取消订阅确认',
|
||
{
|
||
confirmButtonText: '确定取消',
|
||
cancelButtonText: '我再想想',
|
||
type: 'warning'
|
||
}
|
||
)
|
||
|
||
cancelling.value = true
|
||
|
||
await subscriptionApi.cancelMySubscription(currentSubscription.value.id)
|
||
ElMessage.success('取消订阅成功')
|
||
|
||
// 重新加载用户订阅
|
||
await loadUserSubscriptions()
|
||
} catch (error) {
|
||
if (error !== 'cancel') {
|
||
console.error('取消订阅失败:', error)
|
||
const errorMessage = error.response?.data?.message || error.message || '取消订阅失败'
|
||
ElMessage.error(errorMessage)
|
||
}
|
||
} finally {
|
||
cancelling.value = false
|
||
}
|
||
}
|
||
|
||
// 前往在线调试
|
||
const goToApiDebugger = () => {
|
||
if (!product.value) return
|
||
router.push({
|
||
name: 'ApiDebugger',
|
||
query: { productId: product.value.id }
|
||
})
|
||
}
|
||
|
||
// 获取请求方法标签类型
|
||
const getMethodTagType = (method) => {
|
||
switch (method) {
|
||
case 'GET':
|
||
return 'info'
|
||
case 'POST':
|
||
return 'primary'
|
||
case 'PUT':
|
||
return 'warning'
|
||
case 'DELETE':
|
||
return 'danger'
|
||
default:
|
||
return 'info'
|
||
}
|
||
}
|
||
|
||
// 复制请求URL
|
||
const copyRequestUrl = () => {
|
||
if (!product.value?.documentation?.request_url) {
|
||
ElMessage.warning('请求地址不存在')
|
||
return
|
||
}
|
||
navigator.clipboard.writeText(product.value.documentation.request_url).then(() => {
|
||
ElMessage.success('请求地址已复制到剪贴板')
|
||
}).catch(err => {
|
||
console.error('复制失败:', err)
|
||
ElMessage.error('复制失败')
|
||
})
|
||
}
|
||
|
||
// 获取当前时间戳
|
||
const getCurrentTimestamp = () => {
|
||
return Date.now().toString()
|
||
}
|
||
|
||
// 打开产品详情页（新标签页）
|
||
const openProductDetail = (productId) => {
|
||
if (!productId) {
|
||
ElMessage.warning('产品ID不存在')
|
||
return
|
||
}
|
||
const url = `/products/${productId}`
|
||
window.open(url, '_blank')
|
||
}
|
||
|
||
// 获取默认的请求方式内容
|
||
const getDefaultBasicInfo = () => {
|
||
return `## 请求头
|
||
|
||
| 字段名 | 类型 | 必填 | 描述 |
|
||
|--------|------|------|------|
|
||
| Access-Id | string | 是 | 账号的 Access-Id |
|
||
|
||
对于业务请求参数
|
||
|
||
通过加密后得到 Base64 字符串，将其放入到请求体中，字段名为 \`data\`，以此方式进行传参。
|
||
|
||
\`\`\`json
|
||
{
|
||
"data": "xxxx(base64)"
|
||
}
|
||
\`\`\`
|
||
|
||
对接响应得到的公共参数
|
||
|
||
\`\`\`json
|
||
{
|
||
"code": "int",
|
||
"message": "string",
|
||
"transaction_id": "string", // 流水号
|
||
"data": "string"
|
||
}
|
||
\`\`\`
|
||
|
||
**data** 字段为加密的数据，需要解密后查看。
|
||
|
||
## 加密和解密机制
|
||
|
||
账户获得的密钥（**Access Key**）是一个 16 进制字符串，使用 AES-128 加密算法。
|
||
|
||
### 加密过程：
|
||
|
||
- 加密模式：**AES-CBC 模式**。
|
||
- 密钥长度：**128 位（16 字节）**。
|
||
- 填充方式：**PKCS7 填充**。
|
||
- **IV（初始化向量）**：IV 长度为 16 字节（128 位），每次加密时随机生成。
|
||
- 加密后，将 **IV** 和密文拼接在一起进行传输。
|
||
- 最后，将拼接了 IV 的密文通过 **Base64 编码**，方便在网络或文件中传输。
|
||
|
||
### 解密过程：
|
||
|
||
- 解密时，首先从 Base64 解码后的数据中提取前 16 字节作为 **IV**。
|
||
- 然后使用提取的 **IV**，通过 AES-CBC 模式解密剩余部分的密文。
|
||
- 解密后去除 **PKCS7 填充**，即可得到原始明文。`
|
||
}
|
||
|
||
// 获取默认的错误代码内容
|
||
const getDefaultErrorCodes = () => {
|
||
return `## 错误代码
|
||
|
||
| code | message |
|
||
|------|---------|
|
||
| 0 | 业务成功 |
|
||
| 1000 | 查询为空 |
|
||
| 1001 | 接口异常 |
|
||
| 1002 | 参数解密失败 |
|
||
| 1003 | 基础参数校验不正确 |
|
||
| 1004 | 未经授权的IP |
|
||
| 1005 | 缺少Access-Id |
|
||
| 1006 | 未经授权的AccessId |
|
||
| 1007 | 账户余额不足，无法请求 |
|
||
| 1008 | 未开通此产品 |
|
||
| 2001 | 业务失败 |`
|
||
}
|
||
|
||
// 下载接口文档
|
||
const downloadDocumentation = async () => {
|
||
if (!product.value) {
|
||
ElMessage.warning('产品信息不存在')
|
||
return
|
||
}
|
||
|
||
downloading.value = true
|
||
try {
|
||
// 根据是否有PDF文件路径判断文件类型
|
||
const hasPDF = product.value.documentation?.pdf_file_path
|
||
|
||
// 使用原生fetch以获取完整的响应信息（包括headers）
|
||
const token = localStorage.getItem('access_token')
|
||
const tokenType = localStorage.getItem('token_type') || 'Bearer'
|
||
const headers = {
|
||
'Authorization': token ? `${tokenType} ${token}` : ''
|
||
}
|
||
|
||
const response = await fetch(`/api/v1/products/${product.value.id}/documentation/download`, {
|
||
headers
|
||
})
|
||
|
||
if (!response.ok) {
|
||
throw new Error('下载失败')
|
||
}
|
||
|
||
// 获取Content-Type
|
||
const contentType = response.headers.get('content-type') || ''
|
||
const isPDF = contentType.includes('application/pdf') || hasPDF
|
||
|
||
// 获取文件内容
|
||
const blob = await response.blob()
|
||
|
||
// 创建下载链接
|
||
const url = URL.createObjectURL(blob)
|
||
const link = document.createElement('a')
|
||
link.href = url
|
||
const extension = isPDF ? 'pdf' : 'md'
|
||
const filename = `${product.value.name || '产品'}_接口文档.${extension}`
|
||
link.download = filename
|
||
|
||
// 触发下载
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
|
||
// 清理
|
||
document.body.removeChild(link)
|
||
URL.revokeObjectURL(url)
|
||
|
||
ElMessage.success('文档下载成功')
|
||
} catch (error) {
|
||
console.error('下载接口文档失败:', error)
|
||
ElMessage.error('下载接口文档失败')
|
||
} finally {
|
||
downloading.value = false
|
||
}
|
||
}
|
||
|
||
// 下载 Markdown 文档
|
||
const downloadMarkdown = (type) => {
|
||
if (!product.value?.documentation) {
|
||
ElMessage.warning('文档内容不存在')
|
||
return
|
||
}
|
||
|
||
let content = ''
|
||
let filename = ''
|
||
|
||
if (type === 'response_fields') {
|
||
content = product.value.documentation.response_fields || ''
|
||
filename = `${product.value.name || '产品'}_返回字段说明.md`
|
||
} else if (type === 'response_example') {
|
||
content = product.value.documentation.response_example || ''
|
||
filename = `${product.value.name || '产品'}_响应示例.md`
|
||
}
|
||
|
||
if (!content) {
|
||
ElMessage.warning('该部分内容为空，无法下载')
|
||
return
|
||
}
|
||
|
||
// 创建 Blob 对象
|
||
const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' })
|
||
|
||
// 创建下载链接
|
||
const url = URL.createObjectURL(blob)
|
||
const link = document.createElement('a')
|
||
link.href = url
|
||
link.download = filename
|
||
|
||
// 触发下载
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
|
||
// 清理
|
||
document.body.removeChild(link)
|
||
URL.revokeObjectURL(url)
|
||
|
||
ElMessage.success('文档下载成功')
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.product-detail-content {
|
||
padding: 0;
|
||
}
|
||
|
||
.detail-section {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.detail-section:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid rgba(226, 232, 240, 0.6);
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #64748b;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 16px;
|
||
color: #1e293b;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.info-value.price {
|
||
color: #dc2626;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.description-content {
|
||
background: rgba(248, 250, 252, 0.5);
|
||
border: 1px solid rgba(226, 232, 240, 0.4);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
line-height: 1.6;
|
||
color: #475569;
|
||
}
|
||
|
||
.documentation-content {
|
||
background: rgba(255, 255, 255, 0.8);
|
||
border: 1px solid rgba(226, 232, 240, 0.6);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
}
|
||
|
||
.subscription-info {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
/* 组合包样式 */
|
||
.package-items-container {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.package-summary {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.package-items-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.package-item-card {
|
||
background: rgba(255, 255, 255, 0.8);
|
||
border: 1px solid rgba(226, 232, 240, 0.6);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
transition: all 0.2s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.package-item-card:hover {
|
||
border-color: rgba(59, 130, 246, 0.5);
|
||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
|
||
transform: translateY(-2px);
|
||
background: rgba(255, 255, 255, 0.95);
|
||
}
|
||
|
||
.package-item-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.package-item-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.package-item-name {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
margin: 0 0 4px 0;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.package-item-code {
|
||
font-size: 12px;
|
||
color: #64748b;
|
||
margin: 0;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
.package-item-quantity {
|
||
flex-shrink: 0;
|
||
margin-left: 12px;
|
||
}
|
||
|
||
.package-item-price,
|
||
.package-item-total {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.package-item-price:last-child,
|
||
.package-item-total:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.price-label,
|
||
.total-label {
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
}
|
||
|
||
.price-value {
|
||
font-size: 14px;
|
||
color: #1e293b;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.total-value {
|
||
font-size: 16px;
|
||
color: #dc2626;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Tab样式 */
|
||
.content-tabs {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.content-tabs :deep(.el-tabs__header) {
|
||
margin-bottom: 0;
|
||
background: linear-gradient(135deg, #464daa 0%, #a1a6f6 100%);
|
||
border-radius: 12px 12px 0 0;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.content-tabs :deep(.el-tabs__nav-wrap) {
|
||
padding: 0;
|
||
}
|
||
|
||
.content-tabs :deep(.el-tabs__nav) {
|
||
border: none;
|
||
}
|
||
|
||
.content-tabs :deep(.el-tabs__item) {
|
||
color: rgba(255, 255, 255, 0.9);
|
||
font-weight: 500;
|
||
padding: 16px 24px;
|
||
border: none;
|
||
background: transparent;
|
||
position: relative;
|
||
}
|
||
|
||
.content-tabs :deep(.el-tabs__item:hover) {
|
||
color: #ffffff;
|
||
background: rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
.content-tabs :deep(.el-tabs__item.is-active) {
|
||
color: #ffffff;
|
||
background: rgba(255, 255, 255, 0.25);
|
||
border-bottom: 2px solid #ffffff;
|
||
}
|
||
|
||
.content-tabs :deep(.el-tabs__active-bar) {
|
||
display: none;
|
||
}
|
||
|
||
.content-tabs :deep(.el-tabs__content) {
|
||
background: #ffffff;
|
||
border-radius: 0 0 12px 12px;
|
||
border: 1px solid #e5e7eb;
|
||
border-top: none;
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.tab-content {
|
||
padding: 24px;
|
||
min-height: 400px;
|
||
}
|
||
|
||
.doc-content {
|
||
padding: 20px;
|
||
background: #fafafa;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 8px;
|
||
line-height: 1.7;
|
||
color: #374151;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.doc-content :deep(h1) {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: #111827;
|
||
margin: 24px 0 16px 0;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid #e5e7eb;
|
||
}
|
||
|
||
.doc-content :deep(h2) {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: #111827;
|
||
margin: 20px 0 12px 0;
|
||
padding-bottom: 6px;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.doc-content :deep(h3) {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #374151;
|
||
margin: 16px 0 8px 0;
|
||
}
|
||
|
||
.doc-content :deep(h4) {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #374151;
|
||
margin: 12px 0 6px 0;
|
||
}
|
||
|
||
.doc-content :deep(p) {
|
||
margin: 12px 0;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.doc-content :deep(table) {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 20px 0;
|
||
font-size: 14px;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.doc-content :deep(th) {
|
||
background: linear-gradient(135deg, #7179e6 0%, #8b91f0 100%);
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
padding: 12px 16px;
|
||
text-align: left;
|
||
border: none;
|
||
}
|
||
|
||
.doc-content :deep(td) {
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
border-right: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.doc-content :deep(td:last-child) {
|
||
border-right: none;
|
||
}
|
||
|
||
.doc-content :deep(tr:last-child td) {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.doc-content :deep(tr:nth-child(even)) {
|
||
background-color: #f9fafb;
|
||
}
|
||
|
||
.doc-content :deep(code) {
|
||
background-color: #f3f4f6;
|
||
color: #dc2626;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.doc-content :deep(pre) {
|
||
background: #1f2937;
|
||
color: #f9fafb;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
overflow-x: auto;
|
||
margin: 20px 0;
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.doc-content :deep(pre code) {
|
||
background-color: transparent;
|
||
color: #f9fafb;
|
||
padding: 0;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.doc-content :deep(ul),
|
||
.doc-content :deep(ol) {
|
||
margin: 12px 0;
|
||
padding-left: 24px;
|
||
}
|
||
|
||
.doc-content :deep(li) {
|
||
margin: 6px 0;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.doc-content :deep(blockquote) {
|
||
border-left: 4px solid #667eea;
|
||
margin: 16px 0;
|
||
padding: 12px 20px;
|
||
background: #f8fafc;
|
||
border-radius: 0 8px 8px 0;
|
||
color: #475569;
|
||
}
|
||
|
||
/* 折叠功能样式 */
|
||
.doc-content :deep(.collapse-toggle) {
|
||
background: none;
|
||
border: none;
|
||
padding: 0;
|
||
margin-right: 8px;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #667eea;
|
||
font-size: 14px;
|
||
transition: transform 0.2s ease;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.doc-content :deep(.collapse-toggle:hover) {
|
||
color: #4f46e5;
|
||
}
|
||
|
||
.doc-content :deep(.collapse-toggle .collapse-icon) {
|
||
display: inline-block;
|
||
transition: transform 0.2s ease;
|
||
font-size: 12px;
|
||
width: 16px;
|
||
text-align: center;
|
||
}
|
||
|
||
.doc-content :deep(h2 .collapse-toggle) {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.doc-content :deep(.collapsible-content) {
|
||
margin-left: 24px;
|
||
margin-top: 8px;
|
||
margin-bottom: 16px;
|
||
padding-left: 16px;
|
||
border-left: 2px solid #e5e7eb;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.doc-content :deep(.code-collapse-toggle) {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: #f3f4f6;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 6px;
|
||
padding: 8px 12px;
|
||
margin: 12px 0 8px 0;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
color: #374151;
|
||
transition: all 0.2s ease;
|
||
user-select: none;
|
||
}
|
||
|
||
.doc-content :deep(.code-collapse-toggle:hover) {
|
||
background: #e5e7eb;
|
||
border-color: #d1d5db;
|
||
}
|
||
|
||
.doc-content :deep(.code-collapse-toggle .collapse-icon) {
|
||
font-size: 12px;
|
||
color: #667eea;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.doc-content :deep(.code-collapse-toggle .collapse-text) {
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Tab 标签下载按钮样式 */
|
||
.tab-content-actions {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.download-btn {
|
||
padding: 6px 12px;
|
||
min-height: auto;
|
||
color: #409eff;
|
||
}
|
||
|
||
.download-btn:hover {
|
||
color: #66b1ff;
|
||
}
|
||
|
||
.no-content {
|
||
padding: 60px 0;
|
||
text-align: center;
|
||
background: #f9fafb;
|
||
border-radius: 8px;
|
||
border: 2px dashed #d1d5db;
|
||
}
|
||
|
||
/* 请求URL样式 */
|
||
.request-url-section {
|
||
margin-bottom: 20px;
|
||
padding: 16px;
|
||
background: #f8fafc;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.request-url-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
margin-bottom: 12px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.request-url-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.request-method {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.request-url {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: #ffffff;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 6px;
|
||
padding: 4px 8px;
|
||
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||
font-size: 13px;
|
||
color: #374151;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.copy-btn {
|
||
flex-shrink: 0;
|
||
padding: 4px 8px;
|
||
background-color: #e0e7ff;
|
||
border-radius: 6px;
|
||
color: #4f46e5;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.copy-btn:hover {
|
||
background-color: #d1d5db;
|
||
}
|
||
|
||
.copy-btn :deep(.el-icon) {
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* 时间戳备注样式 */
|
||
.timestamp-note {
|
||
margin-top: 16px;
|
||
padding-top: 16px;
|
||
border-top: 1px dashed #e5e7eb;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.detail-section {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.info-value.price {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.package-items-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
.package-item-card {
|
||
padding: 12px;
|
||
}
|
||
|
||
.package-item-name {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.package-item-price,
|
||
.package-item-total {
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.price-value,
|
||
.total-value {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.content-tabs :deep(.el-tabs__header) {
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.content-tabs :deep(.el-tabs__item) {
|
||
padding: 12px 16px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.tab-content {
|
||
padding: 16px;
|
||
min-height: 300px;
|
||
}
|
||
|
||
.doc-content {
|
||
padding: 16px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.doc-content :deep(h1) {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.doc-content :deep(h2) {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.doc-content :deep(h3) {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.doc-content :deep(table) {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.doc-content :deep(th),
|
||
.doc-content :deep(td) {
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
/* 请求URL移动端样式 */
|
||
.request-url-section {
|
||
padding: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.request-url-title {
|
||
font-size: 14px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.request-url-content {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
}
|
||
|
||
.request-url {
|
||
width: 100%;
|
||
font-size: 12px;
|
||
padding: 6px 8px;
|
||
}
|
||
|
||
.copy-btn {
|
||
padding: 6px 10px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.copy-btn :deep(.el-icon) {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
</style>
|