Integrate Vditor for comment posting

open-isle-cli/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.8.3",
+        "vditor": "^3.8.7",
         "vue": "^3.2.13",
         "vue-router": "^4.5.1"
       },
@@ -5036,6 +5037,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/diff-match-patch": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
+      "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -11241,6 +11248,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vditor": {
+      "version": "3.8.7",
+      "resolved": "https://registry.npmjs.org/vditor/-/vditor-3.8.7.tgz",
+      "integrity": "sha512-7loYmcj1TCkJV86qwstxzAy33GweFKdJnpiSzGGPqUzDaOcUAiaiFAjIQjxwJ3/sx7pNZf1NWLhXKabXEN7xzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "diff-match-patch": "^1.0.5"
+      },
+      "funding": {
+        "url": "https://ld246.com/sponsor"
+      }
+    },
     "node_modules/vue": {
       "version": "3.5.17",
       "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.17.tgz",

open-isle-cli/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "vditor": "^3.8.7",
     "vue": "^3.2.13",
     "vue-router": "^4.5.1"
   },

open-isle-cli/src/views/PostPageView.vue

@@ -90,6 +90,10 @@
           ref="postItems"
         />
       </div>
+      <div class="comment-editor-container">
+        <div id="vditor" ref="vditorElement"></div>
+        <button class="comment-submit" @click="postComment">发布评论</button>
+      </div>
     </div>
 
     <div class="post-page-scroller-container">
@@ -109,11 +113,15 @@
 <script>
 import { ref, computed, onMounted } from 'vue'
 import CommentItem from '../components/CommentItem.vue'
+import Vditor from 'vditor'
+import 'vditor/dist/index.css'
 
 export default {
   name: 'PostPageView',
   components: { CommentItem },
   setup() {
+    const vditorInstance = ref(null)
+    const vditorElement = ref(null)
     const tags = ref(['AI', 'Python', 'Java'])
     const comments = ref([
       {
@@ -216,7 +224,26 @@ export default {
       }
     }
 
+    const postComment = () => {
+      if (!vditorInstance.value) return
+      const text = vditorInstance.value.getValue()
+      if (!text.trim()) return
+      comments.value.push({
+        id: comments.value.length + 1,
+        userName: '你',
+        time: new Date().toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }),
+        avatar: 'https://picsum.photos/200/200',
+        text,
+        reply: []
+      })
+      vditorInstance.value.setValue('')
+    }
+
     onMounted(() => {
+      vditorInstance.value = new Vditor('vditor', {
+        placeholder: '写点什么...',
+        height: 200
+      })
       updateCurrentIndex()
     })
 
@@ -229,6 +256,8 @@ export default {
       mainContainer,
       currentIndex,
       totalPosts,
+      vditorElement,
+      postComment,
       onSliderInput,
       onScroll: updateCurrentIndex
     }