fix: vditor fix

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

@@ -19,7 +19,7 @@
   --text-color: black;
   --menu-width: 200px;
   --page-max-width: 1200px;
-  --page-max-width-mobile: 768px;
+  --page-max-width-mobile: 900px;
   --article-info-background-color: #f0f0f0;
 }
 

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 {}

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

@@ -59,19 +59,14 @@
         </div>
       </div>
 
-      <div class="comment-editor-wrapper">
-        <CommentEditor
-          @submit="postComment"
-          :loading="isWaitingPostingComment"
-          :disabled="!loggedIn"
-        />
-        <LoginOverlay v-if="!loggedIn" />
-      </div>
+      <CommentEditor @submit="postComment" :loading="isWaitingPostingComment" :disabled="!loggedIn"
+        :show-login-overlay="!loggedIn" />
 
       <div class="comments-container">
         <BaseTimeline :items="comments">
           <template #item="{ item }">
-            <CommentItem :key="item.id" :comment="item" :level="level + 1" :default-show-replies="item.openReplies" @deleted="onCommentDeleted" />
+            <CommentItem :key="item.id" :comment="item" :level="level + 1" :default-show-replies="item.openReplies"
+              @deleted="onCommentDeleted" />
           </template>
         </BaseTimeline>
         <!-- <CommentItem
@@ -98,12 +93,8 @@
         <div v-else class="scroller-time">{{ lastReplyTime }}</div>
       </div>
     </div>
-    <vue-easy-lightbox
-      :visible="lightboxVisible"
-      :index="lightboxIndex"
-      :imgs="lightboxImgs"
-      @hide="lightboxVisible = false"
-    />
+    <vue-easy-lightbox :visible="lightboxVisible" :index="lightboxIndex" :imgs="lightboxImgs"
+      @hide="lightboxVisible = false" />
   </div>
 </template>
 
@@ -118,7 +109,6 @@ import ArticleTags from '../components/ArticleTags.vue'
 import ArticleCategory from '../components/ArticleCategory.vue'
 import ReactionsGroup from '../components/ReactionsGroup.vue'
 import DropdownMenu from '../components/DropdownMenu.vue'
-import LoginOverlay from '../components/LoginOverlay.vue'
 import { renderMarkdown } from '../utils/markdown'
 import { API_BASE_URL, toast } from '../main'
 import { getToken, authState } from '../utils/auth'
@@ -129,7 +119,7 @@ hatch.register()
 
 export default {
   name: 'PostPageView',
-  components: { CommentItem, CommentEditor, BaseTimeline, ArticleTags, ArticleCategory, ReactionsGroup, DropdownMenu, LoginOverlay, VueEasyLightbox },
+  components: { CommentItem, CommentEditor, BaseTimeline, ArticleTags, ArticleCategory, ReactionsGroup, DropdownMenu, VueEasyLightbox },
   setup() {
     const route = useRoute()
     const postId = route.params.id
@@ -723,7 +713,7 @@ export default {
   flex-direction: row;
   gap: 10px;
   padding: 0px;
-  border-bottom: 1px solid #e2e2e2;
+  border-bottom: 1px solid var(--normal-border-color);
 }
 
 .user-avatar-container {