dianshang-qianduan/src/views/components/TrainingMaterialButton.vue

<template>
    <div class="material-actions">
        <el-button v-if="material && previewable" class="material-button" @click="previewVisible = true">
            <el-icon>
                <View />
            </el-icon>预览案例资料
        </el-button>
        <el-button class="material-button" :plain="!material?.url" @click="handleDownload">
            <el-icon>
                <Download />
            </el-icon>下载案例资料
        </el-button>
    </div>

    <el-dialog v-model="previewVisible" :title="material?.name || '案例资料预览'" width="min(920px, 92vw)" destroy-on-close
        append-to-body>
        <div v-if="isImage" class="image-preview"><img :src="material.url" :alt="material.name" /></div>
        <iframe v-else-if="isPdf" class="pdf-preview" :src="material.url" :title="material.name"></iframe>
    </el-dialog>
</template>

<script setup>
import { computed, ref } from "vue"
import { ElMessage } from "element-plus"
import { Download, View } from "@element-plus/icons-vue"

const props = defineProps({ materialName: { type: String, default: "" }, materialUrl: { type: String, default: "" } })
const previewVisible = ref(false)
const material = computed(() => {
    const name = String(props.materialName || "").trim()
    const url = String(props.materialUrl || "").trim()
    if (!name || !url || (name === "案例资料.rar" && url === "/file/example.rar")) return null
    return { name, url: normalizeMaterialUrl(url) }
})
const extension = computed(() => String(material.value?.name || material.value?.url || "").split(/[?#]/)[0].split(".").pop().toLowerCase())
const isImage = computed(() => ["jpg", "jpeg", "png", "gif", "webp", "bmp", "svg"].includes(extension.value))
const isPdf = computed(() => extension.value === "pdf")
const previewable = computed(() => isImage.value || isPdf.value)

function normalizeMaterialUrl(rawUrl) {
    const url = String(rawUrl || "").trim()
    if (!url) return ""
    try {
        const parsed = new URL(url)
        if (["localhost", "127.0.0.1", "::1"].includes(parsed.hostname) && parsed.pathname.startsWith("/file/")) {
            return `${parsed.pathname}${parsed.search}${parsed.hash}`
        }
    } catch {
        // Relative file paths are already resolved through the current deployment or Vite proxy.
    }
    return url
}

async function handleDownload() {
    if (!material.value?.url) { ElMessage.warning("暂无案例资料"); return }
    try {
        const response = await fetch(material.value.url)
        if (!response.ok) throw new Error(`HTTP ${response.status}`)
        const objectUrl = URL.createObjectURL(await response.blob())
        const link = document.createElement("a")
        link.href = objectUrl
        link.download = material.value.name
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        URL.revokeObjectURL(objectUrl)
    } catch (error) {
        console.warn("Case material download failed", error)
        ElMessage.error("案例资料文件不存在或暂不可下载，请联系管理员重新上传。")
    }
}
</script>

<style lang="scss" scoped>
.material-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.material-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(31, 41, 55, 0.4);
    border-radius: 10px;
    color: #1f2937;
    background: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.material-button:hover {
    color: #1f2937;
    border-color: #1f2937;
    background: #f3f4f6;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12);
}

.image-preview {
    display: flex;
    justify-content: center;
    max-height: 68vh;
    overflow: auto;
    background: #0b1720
}

.image-preview img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain
}

.pdf-preview {
    width: 100%;
    height: 68vh;
    border: 0;
    background: #fff
}
</style>