fix: update development environment API and refine student training styles
parent
4cb3b8756b
commit
6dc199a4fc
@ -1,71 +1,123 @@
|
||||
<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>
|
||||
<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>
|
||||
<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";
|
||||
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 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);
|
||||
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}`;
|
||||
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.
|
||||
}
|
||||
} catch {
|
||||
// Relative file paths are already resolved through the current deployment or Vite proxy.
|
||||
}
|
||||
return url;
|
||||
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("案例资料文件不存在或暂不可下载，请联系管理员重新上传。");
|
||||
}
|
||||
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:8px}.material-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 10px;border-color:rgba(99,217,255,.55);border-radius:7px;color:#e9fbff;background:rgba(17,126,178,.36);font-size:13px;font-weight:800}.material-button:hover{color:#e9fbff;border-color:rgba(116,235,255,.85);background:rgba(18,146,204,.5)}.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}
|
||||
.material-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px
|
||||
}
|
||||
|
||||
.material-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
min-height: 28px;
|
||||
padding: 0 8px;
|
||||
border-color: rgba(99, 217, 255, .55);
|
||||
border-radius: var(--student-radius-sm);
|
||||
color: #e9fbff;
|
||||
background: rgba(17, 126, 178, .36);
|
||||
font-size: var(--student-step-font);
|
||||
font-weight: 800
|
||||
}
|
||||
|
||||
.material-button:hover {
|
||||
color: #e9fbff;
|
||||
border-color: rgba(116, 235, 255, .85);
|
||||
background: rgba(18, 146, 204, .5)
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
Loading…
Reference in New Issue