feat: 略微优化markdown渲染

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>

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

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>