Add 404 page and login overlays

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

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import Vditor from 'vditor'
 import 'vditor/dist/index.css'
 
@@ -34,13 +34,17 @@ export default {
     loading: {
       type: Boolean,
       default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, { emit }) {
     const vditorInstance = ref(null)
     const text = ref('')
 
-    const isDisabled = computed(() => props.loading || !text.value.trim())
+    const isDisabled = computed(() => props.loading || props.disabled || !text.value.trim())
 
     const submit = () => {
       if (!vditorInstance.value || isDisabled.value) return
@@ -79,12 +83,39 @@ export default {
           'image'
         ],
         toolbarConfig: { pin: true },
-        input(value) {
-          text.value = value
-        }
-      })
+       input(value) {
+         text.value = value
+       }
+     })
+      if (props.disabled || props.loading) {
+        vditorInstance.value.disabled()
+      }
     })
 
+    watch(
+      () => props.loading,
+      val => {
+        if (!vditorInstance.value) return
+        if (val) {
+          vditorInstance.value.disabled()
+        } else if (!props.disabled) {
+          vditorInstance.value.enable()
+        }
+      }
+    )
+
+    watch(
+      () => props.disabled,
+      val => {
+        if (!vditorInstance.value) return
+        if (val) {
+          vditorInstance.value.disabled()
+        } else if (!props.loading) {
+          vditorInstance.value.enable()
+        }
+      }
+    )
+
     return { submit, isDisabled }
   }
 }

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

@@ -0,0 +1,39 @@
+<template>
+  <div class="login-overlay" @click="goLogin">
+    <div class="login-overlay-text">
+      请先登录，点击跳转到登录页面
+    </div>
+  </div>
+</template>
+
+<script>
+import { useRouter } from 'vue-router'
+
+export default {
+  name: 'LoginOverlay',
+  setup() {
+    const router = useRouter()
+    const goLogin = () => {
+      router.push('/login')
+    }
+    return { goLogin }
+  }
+}
+</script>
+
+<style scoped>
+.login-overlay {
+  position: absolute;
+  top: 0;
+  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;
+}
+</style>

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

@@ -32,6 +32,10 @@ export default {
     loading: {
       type: Boolean,
       default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, { emit }) {
@@ -48,6 +52,18 @@ export default {
       }
     )
 
+    watch(
+      () => props.disabled,
+      val => {
+        if (!vditorInstance.value) return
+        if (val) {
+          vditorInstance.value.disabled()
+        } else if (!props.loading) {
+          vditorInstance.value.enable()
+        }
+      }
+    )
+
     watch(
       () => props.modelValue,
       val => {
@@ -118,6 +134,9 @@ export default {
         },
         after() {
           vditorInstance.value.setValue(props.modelValue)
+          if (props.loading || props.disabled) {
+            vditorInstance.value.disabled()
+          }
         }
       })
     })