remilia/jinshen-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(production): 重构产品详情页代码

Browse Source 
- 将文档列表调整为单独的vue组件
This commit is contained in:
R2m1liA
2025-09-03 17:06:14 +08:00
parent 80d2ade9bb
commit d8abb0a50e
2 changed files with 66 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
app/components/DocumentList.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div class="document-list">
<el-card v-for="(doc, index) in documents" :key="index" class="document-card">
<div class="document-info">
<h3>{{ doc.caption || doc.name }}</h3>
<div class="document-content">
<span v-if="doc.size" class="document-meta">大小: {{ formatFileSize(doc.size) }} </span>
<span v-if="doc.ext" class="document-meta">格式: {{ formatFileExtension(doc.ext) }}</span>
<el-button
class="download-button" type="primary"
@click="handleDownload(doc.name, doc.url)">
下载
</el-button>
</div>
</div>
</el-card>
</div>
</template>
<script setup lang="ts">
defineProps({
documents: {
type: Array as () => Array<StrapiMedia>,
default: () => []
}
})
const handleDownload = async (fileName: string, fileUrl: string) => {
const response = await fetch(fileUrl)
const blob = await response.blob()
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = fileName
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(url)
}
</script>
<style scoped>
.document-list {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
}
.document-meta {
font-size: 0.8rem;
color: var(--el-text-color-secondary);
}
.download-button {
margin-left: auto;
}
.document-content {
display: flex;
align-items: center;
gap: 1rem;
}
</style>

53
app/pages/productions/[...slug].vue
View File

@ -36,22 +36,7 @@
<question-list :questions="production.questions" />
</el-tab-pane>
<el-tab-pane label="相关文档" name="documents">
<div class="document-list">
<el-card v-for="(doc, index) in production.documents" :key="index" class="document-card">
<div class="document-info">
<h3>{{ doc.caption || doc.name }}</h3>
<div class="document-content">
<span v-if="doc.size" class="document-meta">大小: {{ formatFileSize(doc.size) }}</span>
<span v-if="doc.ext" class="document-meta">格式: {{ formatFileExtension(doc.ext) }}</span>
<el-button
class="download-button" type="primary"
@click="downloadFile(doc.name, useStrapiMedia(doc.url || ''))">
下载
</el-button>
</div>
</div>
</el-card>
</div>
<document-list :documents="production.documents" />
</el-tab-pane>
</el-tabs>
</div>
@ -94,20 +79,6 @@ const activeName = ref('details') // 默认选中概览标签
// 获取路由参数（slug 或 id）
const documentId = computed(() => route.params.slug as string)
const downloadFile = async (filename: string, url: string) => {
const response = await fetch(url)
const blob = await response.blob()
const fileUrl = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = fileUrl
link.download = filename
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(fileUrl)
}
onMounted(async () => {
try {
const response = await findOne<Production>('productions', documentId.value, {
@ -203,28 +174,6 @@ useHead({
margin: 0;
}
.document-list {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}
.document-meta {
color: var(--el-text-color-secondary);
font-size: 0.8rem;
}
.download-button {
margin-left: auto;
}
.document-content {
display: flex;
align-items: center;
gap: 1rem;
}
.loading {
display: flex;
justify-content: center;