index.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <template>
  2. <div class="container_layout">
  3. <!-- 顶部导航条区域 -->
  4. <div class="layout_header">
  5. <Header />
  6. </div>
  7. <!-- 主体区域 -->
  8. <div class="layout_main">
  9. <UserMain />
  10. </div>
  11. <div>
  12. <el-drawer title="Ai助教" :visible.sync="showAiDrawer" :direction="direction" :withHeader="false"
  13. :before-close="CloseAiDrawer" size="70%">
  14. <div class="ai_robot_drawer">
  15. <div class="drawer_left">
  16. <div class="robot_head">
  17. <img src="@/assets/bg/ai_robot.gif" alt=""></img>
  18. </div>
  19. <!-- <div class="robot_go_home" @click="GoAiHome">
  20. 去主页
  21. </div> -->
  22. </div>
  23. <div class="drawer_right">
  24. <AiChat :isShowQuickList="false" ref="aiRobot"></AiChat>
  25. </div>
  26. </div>
  27. </el-drawer>
  28. </div>
  29. </div>
  30. </template>
  31. <script>
  32. import UserMain from "./components/UserMain"//主页面
  33. import Header from "../layout/components/Header.vue"//头部
  34. import AiChat from '@/components/AiRobot.vue'//ai智能对话组件
  35. export default {
  36. components: {
  37. UserMain,
  38. Header,
  39. AiChat
  40. },
  41. provide() {
  42. return {
  43. openAiRobot: this.OpenAiRobot
  44. }
  45. },
  46. data() {
  47. return {
  48. showAiDrawer:false,//是否显示ai对话框
  49. direction: 'rtl',//对话框方向
  50. isAiGenerating: false, // 标记AI是否正在生成内容
  51. }
  52. },
  53. computed:{},
  54. mounted() {
  55. },
  56. methods: {
  57. //关闭ai对话框
  58. CloseAiDrawer()
  59. {
  60. this.showAiDrawer=false;
  61. },
  62. //打开ai对话框
  63. OpenAiRobot(content)
  64. {
  65. this.showAiDrawer = true;
  66. console.log("打印打开ai对话框",);
  67. if (this.$refs.aiRobot && typeof this.$refs.aiRobot.SetInputContent === 'function') {
  68. this.isAiGenerating = this.$refs.aiRobot.loading;
  69. }
  70. // 如果AI正在生成内容,则不发起新请求
  71. if (this.isAiGenerating) {
  72. console.log("AI正在生成内容,请稍后再试");
  73. this.$message.alert("AI正在生成内容,请稍后再试");
  74. return;
  75. }
  76. // 设置AI正在生成的标志
  77. this.isAiGenerating = true;
  78. if (content) {
  79. console.log("打开ai对话框", content);
  80. // this.$refs.aiRobot.SetInputContent(content);
  81. // 添加安全检查
  82. this.$nextTick(() => {
  83. if (this.$refs.aiRobot && typeof this.$refs.aiRobot.SetInputContent === 'function') {
  84. this.$refs.aiRobot.SetInputContent(content);
  85. } else {
  86. console.warn('aiRobot 组件引用或 SetInputContent 方法不存在');
  87. }
  88. });
  89. }
  90. },
  91. //去主页
  92. GoAiHome()
  93. {
  94. },
  95. //停止对话
  96. StopMessage()
  97. {
  98. },
  99. }
  100. }
  101. </script>
  102. <style lang="scss" scoped>
  103. @import "@/styles/target.scss";
  104. </style>