fix:修复开场白路由跳转后页面空白

chat-client/src/views/permission/prologueManage/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <div v-if="isComponentActive" class="prologue-manage-container">
   <el-card>
     <el-form :model="form" label-width="120px">
       <el-form-item>
@@ -15,7 +16,7 @@
         </el-select>
       </el-form-item>
       <el-form-item :label="t('vabI18n.prologue.openingContent')">
-        <el-input type="textarea" v-model="form.content" rows="8"></el-input>
+        <el-input type="textarea" v-model="form.content" :rows="8"></el-input>
       </el-form-item>
 
       <!-- 新增推荐问题 -->
@@ -28,8 +29,8 @@
         <el-table-column :label="t('vabI18n.prologue.recommendation')" prop="questionContent" />
         <el-table-column :label="t('vabI18n.prologue.action')" width="180">
           <template v-slot="scope">
-            <el-button size="mini" @click="editRecommend(scope.row)">{{t('vabI18n.prologue.edit')}}</el-button>
-            <el-button size="mini" type="danger" @click="deleteRecommend(scope.row)">{{t('vabI18n.prologue.delete')}}</el-button>
+            <el-button size="small" @click="editRecommend(scope.row)">{{t('vabI18n.prologue.edit')}}</el-button>
+            <el-button size="small" type="danger" @click="deleteRecommend(scope.row)">{{t('vabI18n.prologue.delete')}}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -53,7 +54,7 @@
   <!-- 编辑推荐问题弹窗 -->
   <el-dialog v-model="editdialogVisible" :title="t('vabI18n.prologue.dialog.editTitle')">
     <el-form :model="currentRecommendation" label-width="120px">
-      <el-form-item label="t('vabI18n.prologue.dialog.questionContent')">
+      <el-form-item :label="t('vabI18n.prologue.dialog.questionContent')">
         <el-input v-model="currentRecommendation.questionContent" />
       </el-form-item>
     </el-form>
@@ -63,10 +64,11 @@
     </span>
   </el-dialog>
 
+  </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, watch, onMounted } from 'vue'
+  import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
   import { ElMessage, ElMessageBox } from 'element-plus'
   import { getRemark, saveRemark, getRecommendations, editRecommendation, deleteRecommendation, addRecommendation } from '@/api/prologue'
   import { useI18n } from 'vue-i18n'
@@ -75,6 +77,8 @@
 
   defineOptions({
     name: 'prologueManage',
+    // 添加这个配置确保组件在路由切换时正确处理
+    inheritAttrs: false,
   })
 
   const form = ref({
@@ -98,7 +102,7 @@
       if (res.data) {
         form.value.content = res.data.content
         ElMessage.success(t('vabI18n.prologue.message.loadSuccess'))
-        await loadRecommendations() // 获取推荐问题列表
+        await safeLoadRecommendations() // 获取推荐问题列表
       } else {
         form.value.content = ''
         ElMessage.error(t('vabI18n.prologue.message.notFound'))
@@ -125,7 +129,7 @@
   watch(
     () => form.value.chatType,
     () => {
-      load()
+      safeLoad()
     }
   )
 
@@ -193,13 +197,69 @@
       try {
         await deleteRecommendation(row.id) // 根据 id 删除推荐问题
         ElMessage.success(t('vabI18n.prologue.message.deleteSuccess'))
-        await loadRecommendations() // 重新加载推荐问题列表
+        await safeLoadRecommendations() // 重新加载推荐问题列表
       } catch (error) {
         ElMessage.error(t('vabI18n.prologue.message.deleteFailed'))
       }
     })
   }
 
+  // 用于防止组件销毁后异步请求仍然执行
+  const isComponentActive = ref(true)
+
+  // 安全的异步操作包装器
+  const safeAsyncOperation = async (operation: () => Promise<void>) => {
+    if (!isComponentActive.value) return
+    try {
+      await operation()
+    } catch (error) {
+      if (isComponentActive.value) {
+        console.error('Async operation failed:', error)
+      }
+    }
+  }
+
+  // 修改异步函数以使用安全包装器
+  const safeLoad = () => safeAsyncOperation(load)
+  const safeLoadRecommendations = () => safeAsyncOperation(loadRecommendations)
+
   // 在组件加载时获取初始的开场白内容
-  onMounted(load)
+  onMounted(() => {
+    nextTick(() => {
+      safeLoad()
+    })
+  })
+
+  // 组件卸载前清理
+  onBeforeUnmount(() => {
+    isComponentActive.value = false
+    // 重置所有响应式数据
+    form.value = {
+      chatType: '1',
+      content: '',
+    }
+    recommendations.value = []
+    dialogVisible.value = false
+    editdialogVisible.value = false
+  })
 </script>
+
+<style lang="scss" scoped>
+.prologue-manage-container {
+  width: 100%;
+  min-height: 100vh;
+  padding: 20px;
+
+  .el-card {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  }
+
+  .dialog-footer {
+    text-align: right;
+  }
+
+  .el-table {
+    margin-top: 20px;
+  }
+}
+</style>