|
|
@@ -1,9 +1,13 @@
|
|
|
<template>
|
|
|
<el-container class="code-container">
|
|
|
<el-header>
|
|
|
- <el-button plain type="primary" @click="handlePreview" :loading="loading.preview"
|
|
|
- :disabled="isPreviewed">预览</el-button>
|
|
|
- <el-button plain type="primary" @click="handleDownload" :loading="loading.download">下载</el-button>
|
|
|
+ <el-button link type="primary" @click="handlePreview" :loading="loading.preview" v-show="!isPreviewed"><el-icon>
|
|
|
+ <ArrowDown />
|
|
|
+ </el-icon>预览</el-button>
|
|
|
+ <el-button link type="primary" class="btn-download" @click="handleDownload" :loading="loading.download">
|
|
|
+ <el-icon>
|
|
|
+ <Download />
|
|
|
+ </el-icon>下载</el-button>
|
|
|
</el-header>
|
|
|
<el-main v-if="isPreviewed" v-loading="loading.preview">
|
|
|
<pre class="pre">
|
|
|
@@ -14,9 +18,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, defineProps, reactive, nextTick, computed } from 'vue'
|
|
|
import hljs from 'highlight.js';
|
|
|
import 'highlight.js/styles/default.css';
|
|
|
+import { ArrowDown, Download } from '@element-plus/icons-vue'
|
|
|
|
|
|
const props = defineProps({
|
|
|
src: {
|
|
|
@@ -25,10 +29,6 @@ const props = defineProps({
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-const filePath = computed(() => {
|
|
|
- return new URL(props.src + '?raw', import.meta.url).href
|
|
|
-})
|
|
|
-
|
|
|
const isPreviewed = ref(false)
|
|
|
|
|
|
const codeBlock = ref(null)
|
|
|
@@ -42,8 +42,9 @@ function handlePreview() {
|
|
|
loading.preview = true
|
|
|
isPreviewed.value = true
|
|
|
nextTick(() => {
|
|
|
- import(filePath.value).then(fileRaw => {
|
|
|
- codeBlock.value.textContent = fileRaw.default
|
|
|
+ fetch(props.src).then(async (response) => {
|
|
|
+ const fileContent = await response.text();
|
|
|
+ codeBlock.value.textContent = fileContent
|
|
|
hljs.highlightElement(codeBlock.value)
|
|
|
loading.preview = false
|
|
|
}).catch(() => {
|
|
|
@@ -56,9 +57,10 @@ function handlePreview() {
|
|
|
|
|
|
function handleDownload() {
|
|
|
loading.download = true
|
|
|
- const fileName = props.src.slice(props.src.lastIndexOf('/') + 1)
|
|
|
- import(filePath.value).then(fileRaw => {
|
|
|
- const blob = new Blob([fileRaw.default], { type: 'text/plain' })
|
|
|
+ let fileName = props.src.slice(props.src.lastIndexOf('/') + 1, -4)
|
|
|
+ fetch(props.src).then(async (response) => {
|
|
|
+ const fileContent = await response.text();
|
|
|
+ const blob = new Blob([fileContent], { type: 'text/plain' })
|
|
|
const url = URL.createObjectURL(blob);
|
|
|
const link = document.createElement('a');
|
|
|
link.href = url;
|
|
|
@@ -69,8 +71,9 @@ function handleDownload() {
|
|
|
document.body.removeChild(link);
|
|
|
loading.download = false
|
|
|
}).catch(() => {
|
|
|
- ElMessage.error('下载失败')
|
|
|
- loading.download = false
|
|
|
+ ElMessage.error('获取失败')
|
|
|
+ loading.preview = false
|
|
|
+ isPreviewed.value = false
|
|
|
})
|
|
|
}
|
|
|
|
|
|
@@ -82,9 +85,23 @@ function handleDownload() {
|
|
|
border-radius: 5px;
|
|
|
|
|
|
.el-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ position: relative;
|
|
|
+ height: 50px;
|
|
|
+ text-align: center;
|
|
|
border-bottom: 1px solid var(--el-border-color);
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-download {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.el-main {
|
