feat：精选资源
This commit is contained in:
小张
parent
6a8078e272
commit
5de4c9596f
88
src/api/modules/resource.ts
Normal file
88
src/api/modules/resource.ts
Normal file
@ -0,0 +1,88 @@
|
||||
// 精选资源相关API
|
||||
import { ApiRequest } from '../request'
|
||||
import type { ApiResponseWithResult } from '../types'
|
||||
|
||||
// 精选资源数据类型
|
||||
export interface FeaturedResource {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
type: number // 0: 视频, 1: 图片
|
||||
fileUrl: string
|
||||
thumbnailUrl: string
|
||||
duration: number | null
|
||||
fileSize: number
|
||||
metadata: string | null
|
||||
izFeatured: number
|
||||
status: number
|
||||
createdBy: string | null
|
||||
createdTime: string | null
|
||||
updatedBy: string | null
|
||||
updatedTime: string | null
|
||||
}
|
||||
|
||||
// 精选资源API类
|
||||
export class ResourceApi {
|
||||
/**
|
||||
* 获取精选资源列表
|
||||
*/
|
||||
static async getFeaturedResources(): Promise<ApiResponseWithResult<FeaturedResource[]>> {
|
||||
try {
|
||||
console.log('🚀 获取精选资源列表')
|
||||
|
||||
const response = await ApiRequest.get<any>('/aiol/aiolResource/feature')
|
||||
|
||||
console.log('✅ 精选资源响应:', response)
|
||||
console.log('✅ 响应数据结构:', response.data)
|
||||
|
||||
// 适配实际的响应格式
|
||||
if (response.data && response.data.success && response.data.code === 200) {
|
||||
return {
|
||||
code: response.data.code,
|
||||
message: response.data.message,
|
||||
data: {
|
||||
result: response.data.result
|
||||
}
|
||||
}
|
||||
} else {
|
||||
throw new Error(response.data?.message || '获取精选资源失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ 获取精选资源失败:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据类型筛选精选资源
|
||||
* @param type 资源类型 0: 视频, 1: 图片
|
||||
*/
|
||||
static async getFeaturedResourcesByType(type?: number): Promise<ApiResponseWithResult<FeaturedResource[]>> {
|
||||
try {
|
||||
console.log('🚀 根据类型获取精选资源:', { type })
|
||||
|
||||
const params = type !== undefined ? { type } : {}
|
||||
const response = await ApiRequest.get<any>('/aiol/aiolResource/feature', params)
|
||||
|
||||
console.log('✅ 按类型筛选精选资源响应:', response)
|
||||
|
||||
// 适配实际的响应格式
|
||||
if (response.data && response.data.success && response.data.code === 200) {
|
||||
return {
|
||||
code: response.data.code,
|
||||
message: response.data.message,
|
||||
data: {
|
||||
result: response.data.result
|
||||
}
|
||||
}
|
||||
} else {
|
||||
throw new Error(response.data?.message || '按类型获取精选资源失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ 按类型获取精选资源失败:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ResourceApi
|
||||
190
src/views/ResourceTest.vue
Normal file
190
src/views/ResourceTest.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div class="resource-test-page">
|
||||
<h1>精选资源API测试</h1>
|
||||
|
||||
<div class="test-controls">
|
||||
<button @click="testFeaturedResources" :disabled="loading">
|
||||
{{ loading ? '加载中...' : '测试精选资源API' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-message">
|
||||
<h3>错误信息：</h3>
|
||||
<pre>{{ error }}</pre>
|
||||
</div>
|
||||
|
||||
<div v-if="data" class="result-section">
|
||||
<h3>API响应数据：</h3>
|
||||
<pre>{{ JSON.stringify(data, null, 2) }}</pre>
|
||||
</div>
|
||||
|
||||
<div v-if="resources.length > 0" class="resources-section">
|
||||
<h3>解析后的资源列表：</h3>
|
||||
<div class="resource-grid">
|
||||
<div v-for="resource in resources" :key="resource.id" class="resource-card">
|
||||
<div class="resource-info">
|
||||
<h4>{{ resource.name }}</h4>
|
||||
<p><strong>类型:</strong> {{ resource.type === 0 ? '视频' : '图片' }}</p>
|
||||
<p><strong>时长:</strong> {{ resource.duration ? formatDuration(resource.duration) : 'N/A' }}</p>
|
||||
<p><strong>大小:</strong> {{ formatFileSize(resource.fileSize) }}</p>
|
||||
<p><strong>状态:</strong> {{ resource.status === 0 ? '正常' : '异常' }}</p>
|
||||
</div>
|
||||
<div class="resource-thumbnail">
|
||||
<img :src="resource.thumbnailUrl" :alt="resource.name" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ResourceApi, type FeaturedResource } from '@/api/modules/resource'
|
||||
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const data = ref<any>(null)
|
||||
const resources = ref<FeaturedResource[]>([])
|
||||
|
||||
const testFeaturedResources = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
data.value = null
|
||||
resources.value = []
|
||||
|
||||
console.log('🚀 开始测试精选资源API...')
|
||||
|
||||
const response = await ResourceApi.getFeaturedResources()
|
||||
|
||||
console.log('✅ API响应:', response)
|
||||
data.value = response
|
||||
|
||||
if (response.code === 200 && response.data?.result) {
|
||||
resources.value = response.data.result
|
||||
console.log('✅ 解析到资源数量:', resources.value.length)
|
||||
console.log('✅ 资源详情:', resources.value)
|
||||
} else {
|
||||
console.warn('⚠️ 响应格式异常:', response)
|
||||
}
|
||||
|
||||
} catch (err: any) {
|
||||
console.error('❌ API测试失败:', err)
|
||||
error.value = err.message || '未知错误'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const formatDuration = (seconds: number): string => {
|
||||
const hours = Math.floor(seconds / 3600)
|
||||
const minutes = Math.floor((seconds % 3600) / 60)
|
||||
const secs = seconds % 60
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
|
||||
} else {
|
||||
return `${minutes}:${secs.toString().padStart(2, '0')}`
|
||||
}
|
||||
}
|
||||
|
||||
const formatFileSize = (bytes: number): string => {
|
||||
if (bytes === 0) return '0 Bytes'
|
||||
const k = 1024
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.resource-test-page {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.test-controls {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #0088D1;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: #ffe6e6;
|
||||
border: 1px solid #ff9999;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.result-section,
|
||||
.resources-section {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.resource-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.resource-card {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.resource-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.resource-info h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.resource-info p {
|
||||
margin: 4px 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.resource-thumbnail {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.resource-thumbnail img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user