From 4e1f3c42d2e361e8773f101a8d069112ae3fd62c Mon Sep 17 00:00:00 2001
From: miaoSpring <539943419@qq.com>
Date: Fri, 17 Jan 2025 03:27:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=95=A5=E5=BE=AE=E4=BC=98=E5=8C=96mar?=
 =?UTF-8?q?kdown=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/markdownRender.vue      | 43 ++++++++++++++++++++++++++++++
 pages/posts/post-[id].vue          |  7 ++++-
 pages/user/main/post/edit-[id].vue |  9 ++++---
 3 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 components/markdownRender.vue

diff --git a/components/markdownRender.vue b/components/markdownRender.vue
new file mode 100644
index 0000000..d0a18b7
--- /dev/null
+++ b/components/markdownRender.vue
@@ -0,0 +1,43 @@
+<!-- todo: 对于这个代码，未来要用组件进行渲染 -->
+
+<template>
+    <div class="md-render-wrapper markdown-body">
+        <div v-html="renderedData" :key="_key"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import useMarkdownit from '~/hooks/useMarkdownit';
+
+const props = defineProps<{
+    data: string
+}>()
+
+const _key = ref(Math.random())
+
+const markdownIt = await useMarkdownit()
+
+const renderedData = computed(() => {
+    return markdownIt.render(props.data)
+})
+
+watch(() => renderedData.value, () => {
+    _key.value = Math.random()
+})
+
+</script>
+
+<style>
+.md-render-wrapper {
+    code {
+        box-sizing: border-box;
+        display: inline-block;
+        width: 100%;
+        text-wrap: auto;
+        background-color: #e7e7e7;
+        padding: 5px;
+        padding-left: 10px;
+        border-radius: 5px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/posts/post-[id].vue b/pages/posts/post-[id].vue
index b8c9e90..921bb21 100644
--- a/pages/posts/post-[id].vue
+++ b/pages/posts/post-[id].vue
@@ -3,7 +3,7 @@
         <div class="md" v-if="isInit">
             <div class="md-title">{{ title }}</div>
             <div class="md-divider"></div>
-            <div v-html="renderedData"></div>
+            <markdown-render :data="content"></markdown-render>
         </div>
         <div v-else class="md-skeleton-item">
             <el-skeleton :rows="12" />
@@ -14,6 +14,7 @@
 <script setup lang="ts">
 import useMarkdownit from '~/hooks/useMarkdownit';
 import usePostStore from '~/hooks/pinia/usePostStore';
+import markdownRender from '~/components/markdownRender.vue';
 import type { postContent } from '~/types/post';
 
 const postStore = usePostStore()
@@ -24,6 +25,8 @@ const isInit = ref(false)
 
 const title = ref('')
 
+const content = ref('')
+
 const renderedData = ref('')
 
 const id = route.params.id as string
@@ -54,6 +57,8 @@ onMounted(async () => {
 
     const postsData = await _p
 
+    content.value = postsData.data
+
     renderedData.value = markdownIt.render(postsData.data)
 
     title.value = postsData.title
diff --git a/pages/user/main/post/edit-[id].vue b/pages/user/main/post/edit-[id].vue
index 566d628..b212d8c 100644
--- a/pages/user/main/post/edit-[id].vue
+++ b/pages/user/main/post/edit-[id].vue
@@ -14,10 +14,11 @@
                 <div class="flex-end">
                     <el-text v-if="message" :type="message.type" style="user-select: none;">{{ message.message
                         }}</el-text>
-                    <el-button @click="handleClickDelete" style="margin-left: 10px;" v-if="!isNewPost">
-                        delete
-                    </el-button><el-button @click="handleSubmit" style="margin-left: 10px;">
-                        upload
+                    <el-button @click="handleClickDelete" style="margin-left: 10px;" v-if="!isNewPost" type="danger">
+                        删除文章
+                    </el-button>
+                    <el-button @click="handleSubmit" style="margin-left: 10px;" type="primary">
+                        {{ isNewPost ? "上传文章" : "更新文章" }}
                     </el-button>
                 </div>
             </el-col>