feat: login overlay ui fix

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

@@ -2,11 +2,7 @@
   <div class="comment-editor-container">
     <div :id="editorId" ref="vditorElement"></div>
     <div class="comment-bottom-container">
-      <div
-        class="comment-submit"
-        :class="{ disabled: isDisabled }"
-        @click="submit"
-      >
+      <div class="comment-submit" :class="{ disabled: isDisabled }" @click="submit">
         <template v-if="!loading">
           发布评论
         </template>
@@ -83,13 +79,10 @@ export default {
           'image'
         ],
         toolbarConfig: { pin: true },
-       input(value) {
-         text.value = value
-       }
-     })
-      if (props.disabled || props.loading) {
-        vditorInstance.value.disabled()
-      }
+        input(value) {
+          text.value = value
+        }
+      })
     })
 
     watch(
@@ -127,12 +120,14 @@ export default {
   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;
@@ -141,14 +136,17 @@ export default {
   font-size: 14px;
   cursor: pointer;
 }
+
 .comment-submit.disabled {
   background-color: var(--primary-color-disabled);
   opacity: 0.5;
   cursor: not-allowed;
 }
+
 .comment-submit.disabled:hover {
   background-color: var(--primary-color-disabled);
 }
+
 .comment-submit:hover {
   background-color: var(--primary-color-hover);
 }

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

@@ -1,8 +1,13 @@
 <template>
-  <div class="login-overlay" @click="goLogin">
+  <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>
   </div>
 </template>
 
@@ -28,12 +33,29 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(255, 255, 255, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
-  cursor: pointer;
   z-index: 15;
 }
+
+.login-overlay-icon {
+  margin-right: 10px;
+}
+
+.login-overlay-button {
+  padding: 4px 8px;
+  border-radius: 5px;
+  background-color: var(--primary-color);
+  color: white;
+  cursor: pointer;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.login-overlay-button:hover {
+  background-color: var(--primary-color-hover);
+}
+
 </style>