flat:AI+

components/md-render/md-render.vue

@@ -0,0 +1,178 @@
+<template>
+    <view class="markdown-body">
+        <rich-text class="markdownRich" id="markdown-content" :nodes="renderedHtml" @itemclick="handleItemClick" />
+    </view>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { parseMarkdown, codeDataList } from '@/utils/markdownParser';
+
+const props = defineProps({
+    content: {
+        type: String,
+        default: '',
+    },
+});
+
+const renderedHtml = computed(() => parseMarkdown(props.content));
+
+const handleItemClick = (e) => {
+    let { attrs } = e.detail.node;
+    let { 'data-copy-index': codeDataIndex, class: className, href } = attrs;
+    if (href) {
+        window.open(href);
+        return;
+    }
+    if (className == 'copy-btn') {
+        uni.setClipboardData({
+            data: codeDataList[codeDataIndex],
+            showToast: false,
+            success() {
+                uni.showToast({
+                    title: '复制成功',
+                    icon: 'none',
+                });
+            },
+        });
+    }
+};
+</script>
+
+<style lang="scss">
+.markdown-body {
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        // line-height: 1;
+    }
+    ul {
+        // display: block;
+        padding-inline-start: 40rpx;
+        li {
+            margin-bottom: -30rpx;
+        }
+
+        li:nth-child(1) {
+            margin-top: -40rpx;
+        }
+    }
+}
+.markdown-body {
+    user-select: text;
+    -webkit-user-select: text;
+    white-space: pre-wrap;
+}
+
+/* 表格 */
+table {
+    // display: block; /* 让表格可滚动 */
+    // width: 100%;
+    // overflow-x: auto;
+    // white-space: nowrap; /* 防止单元格内容换行 */
+    border-collapse: collapse;
+}
+
+th,
+td {
+    padding: 16rpx;
+    border: 2rpx solid #ddd;
+    font-size: 24rpx;
+}
+
+th {
+    background-color: #007bff;
+    color: white;
+    font-weight: bold;
+}
+
+/* 隔行变色 */
+tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+/* 鼠标悬停效果 */
+tr:hover {
+    background-color: #f1f1f1;
+    transition: 0.3s;
+}
+
+/* 代码块 */
+pre,
+code {
+    user-select: text;
+}
+.code-container {
+    position: relative;
+    border-radius: 10rpx;
+    overflow: hidden;
+    // background: #0d1117;
+    padding: 8rpx;
+    color: #c9d1d9;
+    font-size: 28rpx;
+    height: fit-content;
+    margin-top: -140rpx;
+    margin-bottom: -140rpx;
+}
+
+.code-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10rpx 20rpx;
+    background: #161b22;
+    color: #888;
+    font-size: 24rpx;
+    border-radius: 10rpx 10rpx 0 0;
+}
+
+.copy-btn {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ddd;
+    border: none;
+    padding: 6rpx 16rpx;
+    font-size: 24rpx;
+    cursor: pointer;
+    border-radius: 6rpx;
+}
+.copy-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    color: #259939;
+    text-decoration: underline;
+}
+
+pre.hljs {
+    padding: 0 24rpx;
+    margin: 0;
+    border-radius: 0 0 16rpx 16rpx;
+    background-color: #f8f8f8;
+    padding: 20rpx;
+    overflow-x: auto;
+    font-size: 24rpx;
+    margin-top: 10rpx;
+    margin-top: -66rpx;
+}
+pre code {
+    margin: 0;
+    padding: 0;
+    display: block;
+    white-space: pre-wrap; /* 允许自动换行 */
+    word-break: break-word;
+}
+
+ol {
+    list-style: decimal-leading-zero;
+    padding-left: 60rpx;
+}
+
+.line-num {
+    display: inline-block;
+    text-align: right;
+    color: #666;
+    margin-right: 20rpx;
+    display: inline-block;
+    text-align: right;
+}
+</style>