From 2e5203c69abe8b97abcc9e10cb7e5f3ba91418ae Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Mon, 24 Mar 2025 03:29:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96md=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/markdownRender.vue  | 164 ++++++++++++++++++++++++++++++++-
 components/user/postEditor.vue |  57 +++++++++++-
 utils/html2VNode.ts            |   2 +-
 3 files changed, 216 insertions(+), 7 deletions(-)

diff --git a/components/markdownRender.vue b/components/markdownRender.vue
index cf40be0..2a0bef0 100644
--- a/components/markdownRender.vue
+++ b/components/markdownRender.vue
@@ -63,7 +63,7 @@ const VNodeArr = computed(() => {
             },
         }
     )
-    const res = h2v.rander(renderedData)
+    const res = h2v.render(renderedData)
     return {
         setup: () => {
             return () => res
@@ -92,11 +92,167 @@ const VNodeArr = computed(() => {
 
     hr {
         display: block;
-        margin: 0;
+        margin: 1em 0;
+        padding-top: 1em;
         unicode-bidi: isolate;
         overflow: hidden;
-        border-style: inset;
-        border-width: 0;
+        height: auto;
+    }
+
+    /* 恢复标题样式 */
+    h1, h2, h3, h4, h5, h6 {
+        margin-top: 1em;
+        margin-bottom: 0.5em;
+        font-weight: bold;
+        line-height: 1.25;
+        color: #111;
+    }
+    
+    h1 {
+        font-size: 2em;
+        border-bottom: 1px solid #eaecef;
+        padding-bottom: 0.3em;
+    }
+    
+    h2 {
+        font-size: 1.5em;
+        border-bottom: 1px solid #eaecef;
+        padding-bottom: 0.3em;
+    }
+    
+    h3 {
+        font-size: 1.25em;
+    }
+    
+    h4 {
+        font-size: 1em;
+    }
+    
+    h5 {
+        font-size: 0.875em;
+    }
+    
+    h6 {
+        font-size: 0.85em;
+        color: #6a737d;
+    }
+
+    /* 恢复段落样式 */
+    p {
+        margin-top: 0;
+        margin-bottom: 1em;
+        line-height: 1.6;
+    }
+
+    /* 恢复列表样式 */
+    ul, ol {
+        margin-top: 0;
+        margin-bottom: 1em;
+        padding-left: 2em;
+    }
+    
+    ul {
+        list-style-type: disc;
+    }
+    
+    ol {
+        list-style-type: decimal;
+    }
+    
+    li {
+        margin-bottom: 0.25em;
+    }
+    
+    li > ul, li > ol {
+        margin-top: 0.25em;
+        margin-bottom: 0;
+    }
+
+    /* 恢复链接样式 */
+    a {
+        color: #0366d6;
+        text-decoration: none;
+        
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    /* 恢复引用块样式 */
+    blockquote {
+        margin: 0 0 1em;
+        padding: 0 1em;
+        color: #6a737d;
+        border-left: 0.25em solid #dfe2e5;
+        
+        > :first-child {
+            margin-top: 0;
+        }
+        
+        > :last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    /* 恢复表格样式 */
+    table {
+        display: block;
+        width: 100%;
+        overflow: auto;
+        margin-top: 0;
+        margin-bottom: 1em;
+        border-spacing: 0;
+        border-collapse: collapse;
+    }
+    
+    th {
+        font-weight: 600;
+        padding: 6px 13px;
+        border: 1px solid #dfe2e5;
+    }
+    
+    td {
+        padding: 6px 13px;
+        border: 1px solid #dfe2e5;
+    }
+    
+    tr {
+        background-color: #fff;
+        border-top: 1px solid #c6cbd1;
+        
+        &:nth-child(2n) {
+            background-color: #f6f8fa;
+        }
+    }
+
+    /* 恢复行内代码样式 */
+    code:not(pre code) {
+        padding: 0.2em 0.4em;
+        margin: 0;
+        font-size: 85%;
+        background-color: rgba(27, 31, 35, 0.05);
+        border-radius: 3px;
+        font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+    }
+
+    /* 恢复图片样式 */
+    img {
+        max-width: 100%;
+        box-sizing: border-box;
+        background-color: #fff;
+    }
+
+    /* 恢复预格式化文本样式 */
+    pre {
+        padding: 16px;
+        overflow: auto;
+        font-size: 85%;
+        line-height: 1.45;
+        background-color: #f6f8fa;
+        border-radius: 3px;
+        margin-top: 0;
+        margin-bottom: 1em;
+        word-wrap: normal;
     }
 }
 </style>
\ No newline at end of file
diff --git a/components/user/postEditor.vue b/components/user/postEditor.vue
index 232124f..de82b50 100644
--- a/components/user/postEditor.vue
+++ b/components/user/postEditor.vue
@@ -8,7 +8,7 @@
                 </el-input>
             </el-col>
             <el-col :span="12">
-                <el-input-tag v-model:model-value="tags" placeholder="添加标签" :disabled="disabled"/>
+                <el-input-tag v-model:model-value="tags" placeholder="添加标签" :disabled="disabled" />
             </el-col>
         </el-row>
         <el-row>
@@ -18,7 +18,31 @@
                 </el-input>
             </el-col>
         </el-row>
-        <el-input type="textarea" v-model:model-value="content" placeholder="content" :autosize="{ minRows: 15 }" :disabled="disabled"/>
+        <el-row>
+            <el-col :span="16"></el-col>
+            <el-col :span="8">
+                <div
+                    class="switch-button overflow-hidden  z-10 border-0 border-gray-300 rounded-bl-sm rounded-tr-sm flex select-none">
+                    <div class="switch-button-item" :class="{ 'switch-button-item-active': isEditing }"
+                        @click="isEditing = true">
+                        编辑
+                    </div>
+                    <div class="switch-button-item" :class="{ 'switch-button-item-active': !isEditing }"
+                        @click="isEditing = false">
+                        预览
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col>
+                <el-input v-if="isEditing" type="textarea" v-model:model-value="content" placeholder="content"
+                    :autosize="{ minRows: 15 }" :disabled="disabled" />
+                <div class=" border-1 border-gray-300 rounded-sm p-2" v-else>
+                    <markdown-render :data="content ?? ''" />
+                </div>
+            </el-col>
+        </el-row>
     </div>
 </template>
 
@@ -33,6 +57,8 @@ const summary = defineModel<string>('summary')
 const tags = defineModel<string[]>('tags')
 const content = defineModel<string>('content')
 
+const isEditing = ref(true)
+
 </script>
 
 <style scoped>
@@ -42,3 +68,30 @@ const content = defineModel<string>('content')
     gap: 5px;
 }
 </style>
+
+<style lang="scss" scoped>
+.switch-button {
+
+    &-item {
+        width: 50%;
+        height: 100%;
+        background-color: #fff;
+        cursor: pointer;
+        transition: all .15s ease;
+        padding: 0 5px;
+
+        &:hover {
+            background-color: #f0f0f0;
+        }
+
+        &-active {
+            color: #0077ff;
+            background-color: #d3e7ff;
+
+            &:hover {
+                background-color: #c3e0ff;
+            }
+        }
+    }
+}
+</style>
diff --git a/utils/html2VNode.ts b/utils/html2VNode.ts
index 11de16a..14960ad 100644
--- a/utils/html2VNode.ts
+++ b/utils/html2VNode.ts
@@ -11,7 +11,7 @@ export default class Html2VNode {
     public use(middleware: middlewareType) {
         this.middlewareList.push(middleware)
     }
-    public rander(htmlString: string) {
+    public render(htmlString: string) {
         const html2ObjResult = this.html2Obj(htmlString);
         const middlewareMap = this.buildMiddlewareMap(html2ObjResult);
         const wrinklesResult = this.wrinkles(html2ObjResult)