From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/MarkdownView/index.vue | 204 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 204 insertions(+), 0 deletions(-)
diff --git a/src/components/MarkdownView/index.vue b/src/components/MarkdownView/index.vue
new file mode 100644
index 0000000..86fc939
--- /dev/null
+++ b/src/components/MarkdownView/index.vue
@@ -0,0 +1,204 @@
+<template>
+ <div ref="contentRef" class="markdown-view" v-html="renderedMarkdown"></div>
+</template>
+
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+import MarkdownIt from 'markdown-it'
+import 'highlight.js/styles/vs2015.min.css'
+import hljs from 'highlight.js'
+
+// 瀹氫箟缁勪欢灞炴��
+const props = defineProps({
+ content: {
+ type: String,
+ required: true
+ }
+})
+
+const message = useMessage() // 娑堟伅寮圭獥
+const { copy } = useClipboard({ legacy: true }) // 鍒濆鍖� copy 鍒扮矘璐存澘
+const contentRef = ref()
+
+const md = new MarkdownIt({
+ highlight: function (str, lang) {
+ if (lang && hljs.getLanguage(lang)) {
+ try {
+ const copyHtml = `<div id="copy" data-copy='${str}' style="position: absolute; right: 10px; top: 5px; color: #fff;cursor: pointer;">澶嶅埗</div>`
+ return `<pre style="position: relative;">${copyHtml}<code class="hljs">${hljs.highlight(lang, str, true).value}</code></pre>`
+ } catch (__) {}
+ }
+ return ``
+ }
+})
+
+/** 娓叉煋 markdown */
+const renderedMarkdown = computed(() => {
+ return md.render(props.content)
+})
+
+/** 鍒濆鍖� **/
+onMounted(async () => {
+ // 娣诲姞 copy 鐩戝惉
+ contentRef.value.addEventListener('click', (e: any) => {
+ if (e.target.id === 'copy') {
+ copy(e.target?.dataset?.copy)
+ message.success('澶嶅埗鎴愬姛!')
+ }
+ })
+})
+</script>
+
+<style lang="scss">
+.markdown-view {
+ font-family: PingFang SC;
+ font-size: 0.95rem;
+ font-weight: 400;
+ line-height: 1.6rem;
+ letter-spacing: 0em;
+ text-align: left;
+ color: #3b3e55;
+ max-width: 100%;
+
+ pre {
+ position: relative;
+ }
+
+ pre code.hljs {
+ width: auto;
+ }
+
+ code.hljs {
+ border-radius: 6px;
+ padding-top: 20px;
+ width: auto;
+ @media screen and (min-width: 1536px) {
+ width: 960px;
+ }
+
+ @media screen and (max-width: 1536px) and (min-width: 1024px) {
+ width: calc(100vw - 400px - 64px - 32px * 2);
+ }
+
+ @media screen and (max-width: 1024px) and (min-width: 768px) {
+ width: calc(100vw - 32px * 2);
+ }
+
+ @media screen and (max-width: 768px) {
+ width: calc(100vw - 16px * 2);
+ }
+ }
+
+ p,
+ code.hljs {
+ margin-bottom: 16px;
+ }
+
+ p {
+ //margin-bottom: 1rem !important;
+ margin: 0;
+ margin-bottom: 3px;
+ }
+
+ /* 鏍囬閫氱敤鏍煎紡 */
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: var(--color-G900);
+ margin: 24px 0 8px;
+ font-weight: 600;
+ }
+
+ h1 {
+ font-size: 22px;
+ line-height: 32px;
+ }
+
+ h2 {
+ font-size: 20px;
+ line-height: 30px;
+ }
+
+ h3 {
+ font-size: 18px;
+ line-height: 28px;
+ }
+
+ h4 {
+ font-size: 16px;
+ line-height: 26px;
+ }
+
+ h5 {
+ font-size: 16px;
+ line-height: 24px;
+ }
+
+ h6 {
+ font-size: 16px;
+ line-height: 24px;
+ }
+
+ /* 鍒楄〃锛堟湁搴忥紝鏃犲簭锛� */
+ ul,
+ ol {
+ margin: 0 0 8px 0;
+ padding: 0;
+ font-size: 16px;
+ line-height: 24px;
+ color: #3b3e55; // var(--color-CG600);
+ }
+
+ li {
+ margin: 4px 0 0 20px;
+ margin-bottom: 1rem;
+ }
+
+ ol > li {
+ list-style-type: decimal;
+ margin-bottom: 1rem;
+ // 琛ㄨ揪寮�,淇鏈夊簭鍒楄〃搴忓彿灞曠ず涓嶅叏鐨勯棶棰�
+ // &:nth-child(n + 10) {
+ // margin-left: 30px;
+ // }
+
+ // &:nth-child(n + 100) {
+ // margin-left: 30px;
+ // }
+ }
+
+ ul > li {
+ list-style-type: disc;
+ font-size: 16px;
+ line-height: 24px;
+ margin-right: 11px;
+ margin-bottom: 1rem;
+ color: #3b3e55; // var(--color-G900);
+ }
+
+ ol ul,
+ ol ul > li,
+ ul ul,
+ ul ul li {
+ // list-style: circle;
+ font-size: 16px;
+ list-style: none;
+ margin-left: 6px;
+ margin-bottom: 1rem;
+ }
+
+ ul ul ul,
+ ul ul ul li,
+ ol ol,
+ ol ol > li,
+ ol ul ul,
+ ol ul ul > li,
+ ul ol,
+ ul ol > li {
+ list-style: square;
+ }
+}
+</style>
--
Gitblit v1.8.0