feat: comment ui

open-isle-cli/src/assets/global.css

@@ -17,4 +17,39 @@ body {
   margin: 0;
   padding: 0;
   font-family: 'Roboto', sans-serif;
+}
+
+
+/*************************
+ * Vditor 自定义皮肤覆写
+ *************************/
+/*
+  思路：
+  1. 用 CSS 变量快速改大色块；
+  2. 再用选择器去掉边框 / 阴影。
+  注意顺序：一定写在官方 index.css 之后才能生效。
+*/
+
+.comment-editor-container .vditor {
+  /* 去掉整体背景与边框，让它融入父容器 */
+  --panel-background-color: transparent;
+  --border-color: transparent;
+  --textarea-background-color: transparent;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* 工具栏彻底无边框、透明背景 */
+.comment-editor-container .vditor-toolbar {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* 编辑区（wysiwyg / ir / sv）背景透明 */
+.comment-editor-container .vditor-content,
+.comment-editor-container .vditor-wysiwyg,
+.comment-editor-container .vditor-ir,
+.comment-editor-container .vditor-textarea {
+  background: transparent !important;
 }

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

@@ -81,18 +81,15 @@
         </div>
       </div>
 
-      <div class="comments-container">
-        <CommentItem
-          v-for="comment in comments"
-          :key="comment.id"
-          :comment="comment"
-          :level="0"
-          ref="postItems"
-        />
-      </div>
       <div class="comment-editor-container">
         <div id="vditor" ref="vditorElement"></div>
-        <button class="comment-submit" @click="postComment">发布评论</button>
+        <div class="comment-bottom-container">
+          <div class="comment-submit" @click="postComment">发布评论</div>
+        </div>
+      </div>
+
+      <div class="comments-container">
+        <CommentItem v-for="comment in comments" :key="comment.id" :comment="comment" :level="0" ref="postItems" />
       </div>
     </div>
 
@@ -241,8 +238,43 @@ export default {
 
     onMounted(() => {
       vditorInstance.value = new Vditor('vditor', {
-        placeholder: '写点什么...',
+        placeholder: '说点什么...',
-        height: 200
+        height: 120,
+
+        /* ===================== 主题相关 ===================== */
+        // 编辑区主题（classic|dark|light）。classic = 很淡、和浅色页面更搭
+        theme: 'classic',
+        // 预览区主题：light / dark / wechat / ant-design
+        preview: {
+          theme: {
+            current: 'light', 
+          },
+          actions: [], 
+          markdown: { toc: false }, 
+        },
+
+        /* ===================== 功能裁剪 ===================== */
+        toolbar: [
+          'emoji',
+          'bold',
+          'italic',
+          'strike',
+          '|',
+          'list',
+          'line',
+          'quote',
+          'code',
+          'inline-code',
+          '|',
+          'undo',
+          'redo',
+          '|',
+          'link',
+          'image',
+        ],
+        toolbarConfig: {
+          pin: true,
+        },
       })
       updateCurrentIndex()
     })
@@ -511,4 +543,31 @@ export default {
 .copy-link:hover {
   background-color: #e2e2e2;
 }
+
+.comment-editor-container {
+  margin-top: 20px;
+  margin-bottom: 50px;
+  border: 1px solid #e2e2e2;
+}
+
+.comment-bottom-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding: 10px;
+}
+
+.comment-submit {
+  background-color: var(--primary-color);
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 10px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.comment-submit:hover {
+  background-color: var(--primary-color-hover);
+}
+
 </style>