|
|
<template>
|
|
|
<div class="resources-container">
|
|
|
<!-- 使用通用顶部导航栏组件 -->
|
|
|
<TopNavbar />
|
|
|
|
|
|
<!-- 主要内容区域 -->
|
|
|
<div class="resources-main">
|
|
|
<div class="resources-content">
|
|
|
<!-- 侧边栏 -->
|
|
|
<aside class="resources-sidebar">
|
|
|
<!-- 上传按钮 -->
|
|
|
<div class="upload-section">
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
size="large"
|
|
|
class="upload-btn animate-glow"
|
|
|
@click="showUploadDialog = true"
|
|
|
>
|
|
|
<el-icon><Upload /></el-icon>
|
|
|
上传资源
|
|
|
</el-button>
|
|
|
</div>
|
|
|
|
|
|
<!-- 资源分类 -->
|
|
|
<div class="categories-section card-light">
|
|
|
<h3 class="section-title">资源分类</h3>
|
|
|
<div class="categories-list">
|
|
|
<div
|
|
|
class="category-item"
|
|
|
:class="{ active: selectedCategory === null }"
|
|
|
@click="selectCategory(null)"
|
|
|
>
|
|
|
<el-icon class="category-icon">
|
|
|
<Folder />
|
|
|
</el-icon>
|
|
|
<span class="category-name">全部资源</span>
|
|
|
<span class="resource-count">{{ allResourcesCount }}</span>
|
|
|
</div>
|
|
|
<div
|
|
|
v-for="category in categories"
|
|
|
:key="category.id"
|
|
|
class="category-item"
|
|
|
:class="{ active: selectedCategory === category.id }"
|
|
|
@click="selectCategory(category.id)"
|
|
|
>
|
|
|
<el-icon class="category-icon">
|
|
|
<Folder />
|
|
|
</el-icon>
|
|
|
<span class="category-name">{{ category.name }}</span>
|
|
|
<span class="resource-count">{{ category.resourceCount || 0 }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 文件类型筛选 -->
|
|
|
<div class="file-types-section card-light">
|
|
|
<h3 class="section-title">文件类型</h3>
|
|
|
<div class="file-types-list">
|
|
|
<el-tag
|
|
|
v-for="type in fileTypes"
|
|
|
:key="type.name"
|
|
|
class="file-type-tag"
|
|
|
:class="{ active: selectedFileType === type.name }"
|
|
|
@click="selectFileType(type.name)"
|
|
|
>
|
|
|
<el-icon>
|
|
|
<Document />
|
|
|
</el-icon>
|
|
|
{{ type.label }}
|
|
|
</el-tag>
|
|
|
</div>
|
|
|
</div>
|
|
|
</aside>
|
|
|
|
|
|
<!-- 资源列表区域 -->
|
|
|
<main class="resources-area">
|
|
|
<!-- 搜索和筛选栏 -->
|
|
|
<div class="search-section card-light">
|
|
|
<div class="search-bar">
|
|
|
<el-input
|
|
|
v-model="searchKeyword"
|
|
|
placeholder="搜索资源标题或描述..."
|
|
|
size="large"
|
|
|
class="search-input"
|
|
|
@keyup.enter="loadResources"
|
|
|
clearable
|
|
|
>
|
|
|
<template #prefix>
|
|
|
<el-icon><Search /></el-icon>
|
|
|
</template>
|
|
|
<template #append>
|
|
|
<el-button @click="loadResources">搜索</el-button>
|
|
|
</template>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
|
|
|
<div class="filter-options">
|
|
|
<el-select v-model="sortBy" placeholder="排序方式" size="default" @change="loadResources">
|
|
|
<el-option label="最新上传" value="latest" />
|
|
|
<el-option label="下载最多" value="downloads" />
|
|
|
<el-option label="点赞最多" value="likes" />
|
|
|
<el-option label="文件大小" value="size" />
|
|
|
</el-select>
|
|
|
|
|
|
<el-button @click="refreshResources" circle>
|
|
|
<el-icon><Refresh /></el-icon>
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 加载状态 -->
|
|
|
<div v-loading="loading" class="loading-container">
|
|
|
<!-- 资源列表 -->
|
|
|
<div class="resources-list" v-if="!loading">
|
|
|
<div
|
|
|
v-for="resource in resources"
|
|
|
:key="resource.id"
|
|
|
class="resource-card card-light animate-fade-in-up"
|
|
|
@click="goToResourceDetail(resource.id)"
|
|
|
>
|
|
|
<div class="resource-header">
|
|
|
<div class="file-icon">
|
|
|
<el-icon :size="32" :color="getFileTypeColor(resource.fileType)">
|
|
|
<Document />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
|
|
|
<div class="resource-info">
|
|
|
<h3 class="resource-title">{{ resource.title }}</h3>
|
|
|
<p class="resource-description">{{ resource.description }}</p>
|
|
|
|
|
|
<div class="resource-meta">
|
|
|
<span class="file-size">{{ formatFileSize(resource.fileSize) }}</span>
|
|
|
<span class="file-type">{{ getFileTypeLabel(resource.fileType) }}</span>
|
|
|
<span class="upload-time">{{ formatDate(resource.createdAt) }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="resource-actions" @click.stop>
|
|
|
<el-button type="primary" @click="downloadResource(resource)" :loading="resource.downloading">
|
|
|
<el-icon><Download /></el-icon>
|
|
|
下载
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
:text="!resource.isLiked"
|
|
|
:type="resource.isLiked ? 'danger' : 'default'"
|
|
|
@click="toggleLike(resource)"
|
|
|
:loading="resource.liking"
|
|
|
>
|
|
|
<el-icon><Star /></el-icon>
|
|
|
{{ resource.likeCount }}
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="resource-footer">
|
|
|
<div class="uploader-info">
|
|
|
<el-avatar :size="24" :src="resource.avatar">
|
|
|
{{ resource.nickname?.charAt(0) }}
|
|
|
</el-avatar>
|
|
|
<span class="uploader-name">{{ resource.nickname }}</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="resource-stats">
|
|
|
<span class="stat-item">
|
|
|
<el-icon><Download /></el-icon>
|
|
|
{{ resource.downloadCount }}
|
|
|
</span>
|
|
|
<span class="stat-item">
|
|
|
<el-icon><Star /></el-icon>
|
|
|
{{ resource.likeCount }}
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 空状态 -->
|
|
|
<div v-if="resources.length === 0 && !loading" class="empty-state">
|
|
|
<el-empty description="暂无资源">
|
|
|
<el-button type="primary" @click="showUploadDialog = true">
|
|
|
上传第一个资源
|
|
|
</el-button>
|
|
|
</el-empty>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 分页 -->
|
|
|
<div v-if="totalPages > 1" class="pagination-container">
|
|
|
<el-pagination
|
|
|
v-model:current-page="currentPage"
|
|
|
v-model:page-size="pageSize"
|
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
|
:total="totalResources"
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
@size-change="loadResources"
|
|
|
@current-change="loadResources"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 上传资源对话框 -->
|
|
|
<el-dialog
|
|
|
v-model="showUploadDialog"
|
|
|
title="上传资源"
|
|
|
width="600px"
|
|
|
class="upload-dialog"
|
|
|
>
|
|
|
<el-form :model="uploadForm" :rules="uploadRules" ref="uploadFormRef" label-position="top">
|
|
|
<el-form-item label="资源标题" prop="title">
|
|
|
<el-input
|
|
|
v-model="uploadForm.title"
|
|
|
placeholder="请输入资源标题"
|
|
|
size="large"
|
|
|
maxlength="100"
|
|
|
show-word-limit
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="资源分类" prop="categoryId">
|
|
|
<el-select
|
|
|
v-model="uploadForm.categoryId"
|
|
|
placeholder="请选择分类"
|
|
|
size="large"
|
|
|
style="width: 100%"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="category in categories"
|
|
|
:key="category.id"
|
|
|
:label="category.name"
|
|
|
:value="category.id"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="资源描述" prop="description">
|
|
|
<el-input
|
|
|
v-model="uploadForm.description"
|
|
|
type="textarea"
|
|
|
:rows="3"
|
|
|
placeholder="请输入资源描述..."
|
|
|
maxlength="500"
|
|
|
show-word-limit
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="上传文件" prop="file">
|
|
|
<el-upload
|
|
|
ref="uploadRef"
|
|
|
class="upload-area"
|
|
|
drag
|
|
|
:auto-upload="false"
|
|
|
:limit="1"
|
|
|
:on-change="handleFileChange"
|
|
|
:on-remove="handleFileRemove"
|
|
|
accept=".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.zip,.rar"
|
|
|
>
|
|
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
<div class="el-upload__text">
|
|
|
将文件拖到此处，或<em>点击选择文件</em>
|
|
|
</div>
|
|
|
<template #tip>
|
|
|
<div class="el-upload__tip">
|
|
|
支持 PDF、Word、PPT、Excel、压缩包等格式，文件大小不超过 50MB
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-upload>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
<template #footer>
|
|
|
<el-button @click="showUploadDialog = false">取消</el-button>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
@click="handleUploadResource"
|
|
|
:loading="uploading"
|
|
|
>
|
|
|
{{ uploading ? '上传中...' : '上传' }}
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { ref, reactive, onMounted, watch } from 'vue'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
import type { FormInstance, FormRules, UploadInstance, UploadProps } from 'element-plus'
|
|
|
import {
|
|
|
Upload,
|
|
|
Search,
|
|
|
Refresh,
|
|
|
Download,
|
|
|
Star,
|
|
|
Setting,
|
|
|
Folder,
|
|
|
Document,
|
|
|
UploadFilled
|
|
|
} from '@element-plus/icons-vue'
|
|
|
import { useUserStore } from '@/stores/user'
|
|
|
import {
|
|
|
getResources,
|
|
|
uploadResource,
|
|
|
downloadResource as downloadResourceAPI,
|
|
|
likeResource,
|
|
|
type Resource as BaseResource
|
|
|
} from '@/api/resources'
|
|
|
import { getCategories } from '@/api/forum'
|
|
|
import type { ApiResponse, Category } from '@/types'
|
|
|
import TopNavbar from '@/components/TopNavbar.vue'
|
|
|
|
|
|
// 扩展Resource接口，添加UI状态
|
|
|
interface ExtendedResource extends BaseResource {
|
|
|
downloading?: boolean
|
|
|
liking?: boolean
|
|
|
}
|
|
|
|
|
|
const router = useRouter()
|
|
|
const userStore = useUserStore()
|
|
|
|
|
|
// 响应式数据
|
|
|
const loading = ref(false)
|
|
|
const uploading = ref(false)
|
|
|
const showUploadDialog = ref(false)
|
|
|
const searchKeyword = ref('')
|
|
|
const selectedCategory = ref<number | null>(null)
|
|
|
const selectedFileType = ref<string | null>(null)
|
|
|
const sortBy = ref('latest')
|
|
|
const currentPage = ref(1)
|
|
|
const pageSize = ref(10)
|
|
|
const totalResources = ref(0)
|
|
|
const totalPages = ref(0)
|
|
|
const allResourcesCount = ref(0) // 总资源数量，用于"全部资源"显示
|
|
|
|
|
|
// 数据列表
|
|
|
const resources = ref<ExtendedResource[]>([])
|
|
|
const categories = ref<any[]>([])
|
|
|
|
|
|
// 上传表单
|
|
|
const uploadFormRef = ref<FormInstance>()
|
|
|
const uploadRef = ref<UploadInstance>()
|
|
|
const uploadForm = reactive({
|
|
|
title: '',
|
|
|
description: '',
|
|
|
categoryId: null as number | null,
|
|
|
file: null as File | null
|
|
|
})
|
|
|
|
|
|
// 表单验证规则
|
|
|
const uploadRules: FormRules = {
|
|
|
title: [
|
|
|
{ required: true, message: '请输入资源标题', trigger: 'blur' },
|
|
|
{ min: 2, max: 100, message: '标题长度在 2 到 100 个字符', trigger: 'blur' }
|
|
|
],
|
|
|
categoryId: [
|
|
|
{ required: true, message: '请选择资源分类', trigger: 'change' }
|
|
|
],
|
|
|
description: [
|
|
|
{ required: true, message: '请输入资源描述', trigger: 'blur' },
|
|
|
{ min: 10, max: 500, message: '描述长度在 10 到 500 个字符', trigger: 'blur' }
|
|
|
],
|
|
|
file: [
|
|
|
{ required: true, message: '请选择要上传的文件', trigger: 'change' }
|
|
|
]
|
|
|
}
|
|
|
|
|
|
// 文件类型
|
|
|
const fileTypes = ref([
|
|
|
{ name: 'pdf', label: 'PDF' },
|
|
|
{ name: 'doc', label: 'Word' },
|
|
|
{ name: 'ppt', label: 'PPT' },
|
|
|
{ name: 'excel', label: 'Excel' },
|
|
|
{ name: 'zip', label: '压缩包' }
|
|
|
])
|
|
|
|
|
|
// 方法
|
|
|
const selectCategory = (categoryId: number | null) => {
|
|
|
selectedCategory.value = selectedCategory.value === categoryId ? null : categoryId
|
|
|
currentPage.value = 1
|
|
|
loadResources()
|
|
|
}
|
|
|
|
|
|
const selectFileType = (fileType: string | null) => {
|
|
|
selectedFileType.value = selectedFileType.value === fileType ? null : fileType
|
|
|
currentPage.value = 1
|
|
|
loadResources()
|
|
|
}
|
|
|
|
|
|
const refreshResources = () => {
|
|
|
currentPage.value = 1
|
|
|
loadResources()
|
|
|
ElMessage.success('刷新成功')
|
|
|
}
|
|
|
|
|
|
// 跳转到资源详情页面
|
|
|
const goToResourceDetail = (resourceId: number) => {
|
|
|
router.push(`/resources/${resourceId}`)
|
|
|
}
|
|
|
|
|
|
// 加载资源列表
|
|
|
const loadResources = async () => {
|
|
|
try {
|
|
|
loading.value = true
|
|
|
const params = {
|
|
|
page: currentPage.value,
|
|
|
size: pageSize.value,
|
|
|
category: selectedCategory.value || undefined,
|
|
|
keyword: searchKeyword.value || undefined
|
|
|
}
|
|
|
|
|
|
console.log('正在请求资源列表，参数:', params)
|
|
|
console.log('请求URL: /resources')
|
|
|
|
|
|
const response = await getResources(params) as any as ApiResponse<{
|
|
|
total: number
|
|
|
list: BaseResource[]
|
|
|
pages: number
|
|
|
}>
|
|
|
|
|
|
console.log('资源列表API响应:', response)
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
resources.value = response.data.list.map(item => ({
|
|
|
...item,
|
|
|
downloading: false,
|
|
|
liking: false
|
|
|
}))
|
|
|
totalResources.value = response.data.total
|
|
|
totalPages.value = response.data.pages
|
|
|
|
|
|
// 只有在未选择分类时才更新总数（即显示所有资源时）
|
|
|
if (!selectedCategory.value && !searchKeyword.value.trim()) {
|
|
|
allResourcesCount.value = response.data.total || 0
|
|
|
}
|
|
|
|
|
|
console.log('资源列表加载成功:', {
|
|
|
total: totalResources.value,
|
|
|
pages: totalPages.value,
|
|
|
list: resources.value
|
|
|
})
|
|
|
} else {
|
|
|
console.error('资源列表API返回错误:', response)
|
|
|
ElMessage.error(response.message || '获取资源列表失败')
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('获取资源列表失败:', error)
|
|
|
ElMessage.error('获取资源列表失败')
|
|
|
} finally {
|
|
|
loading.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 加载分类列表
|
|
|
const loadCategories = async () => {
|
|
|
try {
|
|
|
console.log('正在请求分类列表...')
|
|
|
const response = await getCategories() as any as ApiResponse<{
|
|
|
total: number
|
|
|
list: Category[]
|
|
|
}>
|
|
|
console.log('分类列表API响应:', response)
|
|
|
console.log(response.code)
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
categories.value = response.data.list
|
|
|
console.log('分类列表加载成功:', categories.value)
|
|
|
|
|
|
// 加载每个分类的资源数量
|
|
|
await loadCategoryResourceCounts()
|
|
|
} else {
|
|
|
console.error('分类列表API返回错误:', response)
|
|
|
ElMessage.error(response.message || '获取分类列表失败')
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('获取分类列表失败:', error)
|
|
|
ElMessage.error('获取分类列表失败')
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 加载每个分类的资源数量
|
|
|
const loadCategoryResourceCounts = async () => {
|
|
|
try {
|
|
|
for (const category of categories.value) {
|
|
|
try {
|
|
|
const response = await getResources({
|
|
|
category: category.id,
|
|
|
page: 1,
|
|
|
size: 1
|
|
|
}) as any as ApiResponse<{
|
|
|
total: number
|
|
|
list: any[]
|
|
|
pages: number
|
|
|
}>
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
// 直接修改分类对象的resourceCount属性
|
|
|
category.resourceCount = response.data.total || 0
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error(`加载分类${category.name}的资源数量失败:`, error)
|
|
|
category.resourceCount = 0
|
|
|
}
|
|
|
}
|
|
|
console.log('分类资源数量加载完成:', categories.value.map(c => ({ name: c.name, count: c.resourceCount })))
|
|
|
} catch (error) {
|
|
|
console.error('加载分类资源数量失败:', error)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 下载资源
|
|
|
const downloadResource = async (resource: ExtendedResource) => {
|
|
|
try {
|
|
|
resource.downloading = true
|
|
|
const response = await downloadResourceAPI(resource.id) as any as ApiResponse<{
|
|
|
fileUrl: string
|
|
|
fileName: string
|
|
|
fileType: string
|
|
|
}>
|
|
|
|
|
|
console.log('下载资源API响应:', response)
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
const downloadUrl = response.data.fileUrl
|
|
|
// 创建下载链接
|
|
|
const link = document.createElement('a')
|
|
|
link.href = downloadUrl
|
|
|
link.download = response.data.fileName
|
|
|
document.body.appendChild(link)
|
|
|
link.click()
|
|
|
document.body.removeChild(link)
|
|
|
|
|
|
// 更新下载次数
|
|
|
resource.downloadCount++
|
|
|
ElMessage.success('下载开始')
|
|
|
} else {
|
|
|
ElMessage.error(response.message || '下载失败')
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('下载失败:', error)
|
|
|
ElMessage.error('下载失败')
|
|
|
} finally {
|
|
|
resource.downloading = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 点赞/取消点赞
|
|
|
const toggleLike = async (resource: ExtendedResource) => {
|
|
|
try {
|
|
|
resource.liking = true
|
|
|
const response = await likeResource(resource.id) as any as ApiResponse<null>
|
|
|
|
|
|
console.log('点赞API响应:', response)
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
resource.isLiked = !resource.isLiked
|
|
|
resource.likeCount += resource.isLiked ? 1 : -1
|
|
|
ElMessage.success(resource.isLiked ? '点赞成功' : '取消点赞')
|
|
|
} else {
|
|
|
ElMessage.error(response.message || '操作失败')
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('点赞操作失败:', error)
|
|
|
ElMessage.error('操作失败')
|
|
|
} finally {
|
|
|
resource.liking = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 文件选择处理
|
|
|
const handleFileChange: UploadProps['onChange'] = (uploadFile) => {
|
|
|
if (uploadFile.raw) {
|
|
|
// 检查文件大小（50MB限制）
|
|
|
if (uploadFile.raw.size > 50 * 1024 * 1024) {
|
|
|
ElMessage.error('文件大小不能超过 50MB')
|
|
|
uploadRef.value?.clearFiles()
|
|
|
return
|
|
|
}
|
|
|
uploadForm.file = uploadFile.raw
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 文件移除处理
|
|
|
const handleFileRemove = () => {
|
|
|
uploadForm.file = null
|
|
|
}
|
|
|
|
|
|
// 上传资源
|
|
|
const handleUploadResource = async () => {
|
|
|
if (!uploadFormRef.value) return
|
|
|
|
|
|
try {
|
|
|
await uploadFormRef.value.validate()
|
|
|
|
|
|
if (!uploadForm.file) {
|
|
|
ElMessage.error('请选择要上传的文件')
|
|
|
return
|
|
|
}
|
|
|
|
|
|
uploading.value = true
|
|
|
|
|
|
const response = await uploadResource({
|
|
|
file: uploadForm.file,
|
|
|
title: uploadForm.title,
|
|
|
description: uploadForm.description,
|
|
|
categoryId: uploadForm.categoryId!
|
|
|
}) as any as ApiResponse<{ resourceId: number }>
|
|
|
|
|
|
console.log('上传资源API响应:', response)
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
ElMessage.success('资源上传成功！')
|
|
|
showUploadDialog.value = false
|
|
|
resetUploadForm()
|
|
|
loadResources() // 重新加载资源列表
|
|
|
} else {
|
|
|
ElMessage.error(response.message || '上传失败')
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('上传失败:', error)
|
|
|
ElMessage.error('上传失败')
|
|
|
} finally {
|
|
|
uploading.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 重置上传表单
|
|
|
const resetUploadForm = () => {
|
|
|
uploadForm.title = ''
|
|
|
uploadForm.description = ''
|
|
|
uploadForm.categoryId = null
|
|
|
uploadForm.file = null
|
|
|
uploadRef.value?.clearFiles()
|
|
|
uploadFormRef.value?.clearValidate()
|
|
|
}
|
|
|
|
|
|
// 格式化文件大小
|
|
|
const formatFileSize = (bytes: number) => {
|
|
|
if (bytes === 0) return '0 B'
|
|
|
const k = 1024
|
|
|
const sizes = ['B', 'KB', 'MB', 'GB']
|
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
|
|
}
|
|
|
|
|
|
// 格式化日期
|
|
|
const formatDate = (dateString: string) => {
|
|
|
const date = new Date(dateString)
|
|
|
return date.toLocaleString('zh-CN')
|
|
|
}
|
|
|
|
|
|
// 获取文件类型标签
|
|
|
const getFileTypeLabel = (mimeType: string) => {
|
|
|
const typeMap: { [key: string]: string } = {
|
|
|
'application/pdf': 'PDF',
|
|
|
'application/msword': 'Word',
|
|
|
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'Word',
|
|
|
'application/vnd.ms-powerpoint': 'PPT',
|
|
|
'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'PPT',
|
|
|
'application/vnd.ms-excel': 'Excel',
|
|
|
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'Excel',
|
|
|
'application/zip': 'ZIP',
|
|
|
'application/x-rar-compressed': 'RAR'
|
|
|
}
|
|
|
return typeMap[mimeType] || '文件'
|
|
|
}
|
|
|
|
|
|
// 获取文件类型颜色
|
|
|
const getFileTypeColor = (mimeType: string) => {
|
|
|
const colorMap: { [key: string]: string } = {
|
|
|
'application/pdf': '#ff4757',
|
|
|
'application/msword': '#2e86de',
|
|
|
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': '#2e86de',
|
|
|
'application/vnd.ms-powerpoint': '#ff6348',
|
|
|
'application/vnd.openxmlformats-officedocument.presentationml.presentation': '#ff6348',
|
|
|
'application/vnd.ms-excel': '#2ed573',
|
|
|
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': '#2ed573',
|
|
|
'application/zip': '#a4b0be',
|
|
|
'application/x-rar-compressed': '#a4b0be'
|
|
|
}
|
|
|
return colorMap[mimeType] || '#6c5ce7'
|
|
|
}
|
|
|
|
|
|
// 用户操作处理
|
|
|
const handleCommand = (command: string) => {
|
|
|
if (command === 'logout') {
|
|
|
userStore.logout()
|
|
|
router.push('/login')
|
|
|
} else if (command === 'profile') {
|
|
|
router.push('/profile')
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 监听对话框关闭，重置表单
|
|
|
watch(showUploadDialog, (newVal) => {
|
|
|
if (!newVal) {
|
|
|
resetUploadForm()
|
|
|
}
|
|
|
})
|
|
|
|
|
|
// 页面加载时获取数据
|
|
|
onMounted(async () => {
|
|
|
console.log('资源页面加载完成')
|
|
|
await loadCategories()
|
|
|
await loadResources()
|
|
|
await loadTotalResourcesCount()
|
|
|
})
|
|
|
|
|
|
// 加载总资源数量
|
|
|
const loadTotalResourcesCount = async () => {
|
|
|
try {
|
|
|
const response = await getResources({ page: 1, size: 1 }) as any as ApiResponse<{
|
|
|
total: number
|
|
|
list: any[]
|
|
|
pages: number
|
|
|
}>
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
allResourcesCount.value = response.data.total || 0
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('加载总资源数失败:', error)
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.resources-container {
|
|
|
min-height: 100vh;
|
|
|
background: var(--gradient-bg);
|
|
|
}
|
|
|
|
|
|
/* 主要内容区域 */
|
|
|
.resources-main {
|
|
|
padding: 32px 24px;
|
|
|
}
|
|
|
|
|
|
.resources-content {
|
|
|
max-width: 1400px;
|
|
|
margin: 0 auto;
|
|
|
display: grid;
|
|
|
grid-template-columns: 280px 1fr;
|
|
|
gap: 32px;
|
|
|
}
|
|
|
|
|
|
/* 侧边栏样式 */
|
|
|
.resources-sidebar {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 24px;
|
|
|
}
|
|
|
|
|
|
.upload-section {
|
|
|
position: sticky;
|
|
|
top: 100px;
|
|
|
}
|
|
|
|
|
|
.upload-btn {
|
|
|
width: 100%;
|
|
|
height: 52px;
|
|
|
border-radius: 16px;
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
|
|
|
.section-title {
|
|
|
color: var(--gray-800);
|
|
|
font-size: 16px;
|
|
|
font-weight: 700;
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
.categories-list {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
|
|
|
.category-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 12px;
|
|
|
padding: 12px 16px;
|
|
|
border-radius: 12px;
|
|
|
cursor: pointer;
|
|
|
transition: var(--transition-base);
|
|
|
}
|
|
|
|
|
|
.category-item:hover {
|
|
|
background: var(--primary-50);
|
|
|
}
|
|
|
|
|
|
.category-item.active {
|
|
|
background: var(--primary-100);
|
|
|
color: var(--primary-700);
|
|
|
}
|
|
|
|
|
|
.category-icon {
|
|
|
color: var(--primary-500);
|
|
|
}
|
|
|
|
|
|
.category-name {
|
|
|
flex: 1;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.resource-count {
|
|
|
font-size: 12px;
|
|
|
color: var(--gray-500);
|
|
|
background: var(--gray-100);
|
|
|
padding: 2px 8px;
|
|
|
border-radius: 12px;
|
|
|
}
|
|
|
|
|
|
.file-types-list {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
|
|
|
.file-type-tag {
|
|
|
cursor: pointer;
|
|
|
transition: var(--transition-base);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 4px;
|
|
|
}
|
|
|
|
|
|
.file-type-tag:hover {
|
|
|
transform: translateY(-1px);
|
|
|
}
|
|
|
|
|
|
.file-type-tag.active {
|
|
|
background: var(--primary-100);
|
|
|
color: var(--primary-700);
|
|
|
}
|
|
|
|
|
|
/* 资源区域样式 */
|
|
|
.resources-area {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 24px;
|
|
|
}
|
|
|
|
|
|
.search-section {
|
|
|
padding: 24px;
|
|
|
display: flex;
|
|
|
gap: 16px;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.search-bar {
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.filter-options {
|
|
|
display: flex;
|
|
|
gap: 12px;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.resources-list {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 16px;
|
|
|
}
|
|
|
|
|
|
.resource-card {
|
|
|
padding: 24px;
|
|
|
transition: var(--transition-base);
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.resource-card:hover {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: var(--shadow-purple);
|
|
|
}
|
|
|
|
|
|
.resource-header {
|
|
|
display: flex;
|
|
|
gap: 16px;
|
|
|
align-items: flex-start;
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
.file-icon {
|
|
|
flex-shrink: 0;
|
|
|
width: 48px;
|
|
|
height: 48px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
background: var(--gray-50);
|
|
|
border-radius: 12px;
|
|
|
}
|
|
|
|
|
|
.resource-info {
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.resource-title {
|
|
|
font-size: 18px;
|
|
|
font-weight: 700;
|
|
|
color: var(--gray-800);
|
|
|
margin: 0 0 8px 0;
|
|
|
line-height: 1.4;
|
|
|
}
|
|
|
|
|
|
.resource-description {
|
|
|
color: var(--gray-600);
|
|
|
line-height: 1.6;
|
|
|
margin: 0 0 12px 0;
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 2;
|
|
|
-webkit-box-orient: vertical;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.resource-meta {
|
|
|
display: flex;
|
|
|
gap: 16px;
|
|
|
font-size: 12px;
|
|
|
color: var(--gray-500);
|
|
|
}
|
|
|
|
|
|
.resource-actions {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 8px;
|
|
|
align-items: flex-end;
|
|
|
}
|
|
|
|
|
|
.resource-footer {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding-top: 16px;
|
|
|
border-top: 1px solid var(--gray-200);
|
|
|
}
|
|
|
|
|
|
.uploader-info {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
|
|
|
.uploader-name {
|
|
|
font-size: 14px;
|
|
|
color: var(--gray-600);
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.resource-stats {
|
|
|
display: flex;
|
|
|
gap: 16px;
|
|
|
}
|
|
|
|
|
|
.stat-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 4px;
|
|
|
font-size: 14px;
|
|
|
color: var(--gray-500);
|
|
|
}
|
|
|
|
|
|
/* 分页 */
|
|
|
.pagination-container {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
padding: 32px 0;
|
|
|
}
|
|
|
|
|
|
/* 表单行样式 */
|
|
|
.form-row {
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
gap: 16px;
|
|
|
}
|
|
|
|
|
|
.empty-state {
|
|
|
text-align: center;
|
|
|
padding: 60px 20px;
|
|
|
}
|
|
|
|
|
|
/* 上传对话框样式 */
|
|
|
.upload-dialog :deep(.el-upload-dragger) {
|
|
|
border: 2px dashed var(--primary-300);
|
|
|
border-radius: 12px;
|
|
|
background: var(--primary-50);
|
|
|
transition: var(--transition-base);
|
|
|
}
|
|
|
|
|
|
.upload-dialog :deep(.el-upload-dragger:hover) {
|
|
|
border-color: var(--primary-400);
|
|
|
background: var(--primary-100);
|
|
|
}
|
|
|
|
|
|
/* 响应式设计 */
|
|
|
@media (max-width: 1024px) {
|
|
|
.resources-content {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
|
|
|
.resources-sidebar {
|
|
|
order: 2;
|
|
|
}
|
|
|
|
|
|
.resources-area {
|
|
|
order: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
.nav-menu {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.resources-main {
|
|
|
padding: 16px;
|
|
|
}
|
|
|
|
|
|
.resources-content {
|
|
|
gap: 16px;
|
|
|
}
|
|
|
|
|
|
.search-section {
|
|
|
flex-direction: column;
|
|
|
align-items: stretch;
|
|
|
}
|
|
|
|
|
|
.filter-options {
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.resource-header {
|
|
|
flex-direction: column;
|
|
|
gap: 12px;
|
|
|
}
|
|
|
|
|
|
.resource-actions {
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
}
|
|
|
}
|
|
|
</style> |
