fix: vditor fix

open-isle-cli/src/components/CommentEditor.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="comment-editor-container">
-    <div :id="editorId" ref="vditorElement"></div>
+    <div class="comment-editor-wrapper">      
+      <div :id="editorId" ref="vditorElement"></div>
+      <LoginOverlay v-if="showLoginOverlay" />
+    </div>
     <div class="comment-bottom-container">
       <div class="comment-submit" :class="{ disabled: isDisabled }" @click="submit">
         <template v-if="!loading">
@@ -19,6 +22,7 @@ import { ref, onMounted, computed, watch } from 'vue'
 import Vditor from 'vditor'
 import { themeState } from '../utils/theme'
 import 'vditor/dist/index.css'
+import LoginOverlay from './LoginOverlay.vue'
 
 export default {
   name: 'CommentEditor',
@@ -35,8 +39,13 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    showLoginOverlay: {
+      type: Boolean,
+      default: false
     }
   },
+  components: { LoginOverlay },
   setup(props, { emit }) {
     const vditorInstance = ref(null)
     const text = ref('')
@@ -63,7 +72,7 @@ export default {
     onMounted(() => {
       vditorInstance.value = new Vditor(props.editorId, {
         placeholder: '说点什么...',
-        height: 120,
+        height: 200,
         theme: getEditorTheme(),
         preview: {
           actions: [],
@@ -93,7 +102,7 @@ export default {
           text.value = value
         }
       })
-      applyTheme()
+      // applyTheme()
     })
 
     watch(
@@ -136,14 +145,13 @@ export default {
 .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;
+  padding-top: 10px;
 }
 
 .comment-submit {

open-isle-cli/src/components/CommentItem.vue

@@ -33,8 +33,7 @@
         </ReactionsGroup>
       </div>
       <div class="comment-editor-wrapper">
-        <CommentEditor v-if="showEditor" @submit="submitReply" :loading="isWaitingForReply" :disabled="!isLoggedIn" />
-        <LoginOverlay v-if="showEditor && !loggedIn" />
+        <CommentEditor v-if="showEditor" @submit="submitReply" :loading="isWaitingForReply" :disabled="!isLoggedIn" :show-login-overlay="!isLoggedIn" />
       </div>
       <div v-if="comment.reply && comment.reply.length" class="reply-toggle" @click="toggleReplies">
         <i v-if="showReplies" class="fas fa-chevron-up reply-toggle-icon"></i>

open-isle-cli/src/components/LoginOverlay.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="login-overlay">
-    <i class="fa-solid fa-user login-overlay-icon"></i>
-    <div class="login-overlay-text">
-      请先登录，点击跳转到登录页面
-    </div>
-
-    <div class="login-overlay-button" @click="goLogin">
-      登录
+    <div class="login-overlay-blur"></div>
+    <div class="login-overlay-content">
+      <i class="fa-solid fa-user login-overlay-icon"></i>
+      <div class="login-overlay-text">
+        请先登录，点击跳转到登录页面
+      </div>
+      <div class="login-overlay-button" @click="goLogin">
+        登录
+      </div>
     </div>
   </div>
 </template>
@@ -33,11 +35,31 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
+  z-index: 15;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
-  z-index: 15;
+}
+
+.login-overlay-blur {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(3px);
+  z-index: 1;
+}
+
+.login-overlay-content {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  padding: 24px 32px;
 }
 
 .login-overlay-icon {
@@ -45,7 +67,7 @@ export default {
 }
 
 .login-overlay-button {
-  padding: 4px 8px;
+  padding: 4px 12px;
   border-radius: 5px;
   background-color: var(--primary-color);
   color: white;

open-isle-cli/src/components/PostEditor.vue

@@ -155,7 +155,7 @@ export default {
           applyTheme()
         }
       })
-      applyTheme()
+      // applyTheme()
     })
 
     return {}