Merge pull request #410 from WoJiaoFuXiaoYun/main

feat: vditor add loading

frontend/src/components/PostEditor.vue

@@ -19,10 +19,9 @@ import { clearVditorStorage } from '../utils/clearVditorStorage'
 import { hatch } from 'ldrs'
 hatch.register()
 
-
 export default {
   name: 'PostEditor',
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'update:loading'],
   props: {
     modelValue: {
       type: String,
@@ -43,6 +42,8 @@ export default {
   },
   setup(props, { emit }) {
     const vditorInstance = ref(null)
+    let vditorRender = false
+
     const getEditorTheme = getEditorThemeUtil
     const getPreviewTheme = getPreviewThemeUtil
     const applyTheme = () => {
@@ -54,6 +55,7 @@ export default {
     watch(
       () => props.loading,
       val => {
+        if (!vditorRender) return
         if (val) {
           vditorInstance.value.disabled()
         } else {
@@ -91,12 +93,15 @@ export default {
     )
 
     onMounted(() => {
+      emit('update:loading', true)
       vditorInstance.value = createVditor(props.editorId, {
         placeholder: '请输入正文...',
         input(value) {
           emit('update:modelValue', value)
         },
         after() {
+          vditorRender = true
+          emit('update:loading', false)
           vditorInstance.value.setValue(props.modelValue)
           if (props.loading || props.disabled) {
             vditorInstance.value.disabled()
@@ -120,6 +125,7 @@ export default {
 .post-editor-container {
   border: 1px solid var(--normal-border-color);
   position: relative;
+  min-height: 200px;
 }
 
 .editor-loading-overlay {

frontend/src/views/NewPostPageView.vue

@@ -3,7 +3,7 @@
     <div class="new-post-form">
       <input class="post-title-input" v-model="title" placeholder="标题" />
       <div class="post-editor-container">
-        <PostEditor v-model="content" :loading="isAiLoading" :disabled="!isLogin" />
+        <PostEditor v-model="content" v-model:loading="isAiLoading" :disabled="!isLogin" />
         <LoginOverlay v-if="!isLogin" />
       </div>
       <div class="post-options">