windows提交

src/components/menubox/help.vue

@@ -1,12 +1,54 @@
 <template>
-    <div class="help">
-        <h1>更新日志</h1>
-        <MarkdownFile></MarkdownFile>
+    <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>
 
@@ -16,6 +58,18 @@
     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;
@@ -24,4 +78,25 @@
 .help p {
     font-size: 16px;
 }
-</style>
+
+/* 如果需要，可以进一步美化滚动条 */
+/* 适用于 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>