103 lines
3.1 KiB
Vue
103 lines
3.1 KiB
Vue
<template>
|
||
<div class="markdown-container help">
|
||
<vue-markdown :source="markdownContent" :options="markdownOptions"></vue-markdown>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import VueMarkdown from 'vue-markdown-render'; // 注意这里的导入路径可能因库版本而异
|
||
import {fs} from "@tauri-apps/api";
|
||
|
||
// 导入一个 highlight.js 的主题样式，例如 dracula
|
||
// 你需要安装 highlight.js：npm install highlight.js
|
||
// import 'highlight.js/styles/dracula.css'; // 你可以选择其他主题样式
|
||
export default {
|
||
name: 'MarkdownViewerComponent',
|
||
components: {
|
||
VueMarkdown
|
||
},
|
||
data() {
|
||
return {
|
||
title: 'Vue 中展示 Markdown (使用组件)',
|
||
markdownContent: "",
|
||
markdownOptions: {
|
||
gfm: true, // 启用 GitHub Flavored Markdown
|
||
breaks: true, // 将单个换行符渲染为 <br>
|
||
// highlight 选项用于代码块高亮
|
||
highlight: function(code, lang) {
|
||
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
|
||
return hljs.highlight(code, { language }).value;
|
||
}
|
||
}
|
||
};
|
||
},
|
||
mounted() {
|
||
this.loadMarkdownContent();
|
||
},
|
||
methods: {
|
||
async loadMarkdownContent() {
|
||
try {
|
||
// 确保文件路径正确，Tauri 应用中文件路径需要注意
|
||
// 如果 updatelog.md 在应用的资源目录，可能需要使用 fs.appDataDir() 或 fs.resourceDir()
|
||
// 这里假设它在应用启动的当前工作目录或通过bundle访问
|
||
var configdata = await fs.readTextFile("updatelog.md");
|
||
this.markdownContent = configdata;
|
||
} catch (error) {
|
||
console.error("Error reading markdown file:", error);
|
||
this.markdownContent = "无法加载更新日志。";
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
.help {
|
||
padding: 20px;
|
||
font-family: Arial, sans-serif;
|
||
}
|
||
|
||
/* 针对 markdown-container 增加滚动条和高度限制 */
|
||
.markdown-container {
|
||
/* 设置最大高度，例如：视口高度减去顶部或其他元素的高度 */
|
||
/* 你可以根据实际布局调整这个值，例如固定的 500px */
|
||
max-height: calc(100vh - 250px); /* 假设留出 150px 给其他内容或边距 */
|
||
overflow-y: auto; /* 当内容超出最大高度时显示垂直滚动条 */
|
||
/* 可以添加一些内边距，让滚动条不紧贴内容 */
|
||
padding-right: 15px; /* 为滚动条留出空间，避免内容被遮挡 */
|
||
box-sizing: border-box; /* 确保 padding 包含在 max-height 内 */
|
||
}
|
||
|
||
|
||
.help h1 {
|
||
font-size: 24px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.help p {
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* 如果需要，可以进一步美化滚动条 */
|
||
/* 适用于 WebKit 浏览器 (Chrome, Safari, Edge) */
|
||
.markdown-container::-webkit-scrollbar {
|
||
width: 8px;
|
||
|
||
}
|
||
|
||
.markdown-container::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.markdown-container::-webkit-scrollbar-thumb {
|
||
background: #888;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.markdown-container::-webkit-scrollbar-thumb:hover {
|
||
background: #555;
|
||
}
|
||
</style>
|