From e27f7e00182bd07e6c42af1ec3a6a5431def4c68 Mon Sep 17 00:00:00 2001
From: lyc <ly_cheng2023@163.com>
Date: Tue, 18 Feb 2025 17:32:10 +0800
Subject: [PATCH] edit

---
 .../container/adjust-dialog.vue               |  16 +-
 .../template-study/container/right.vue        | 160 ++++++++++------
 .../src/components/typing-effect/index.vue    | 174 +++++++++++++-----
 src/renderer/src/layout/components/Aside.vue  |   1 -
 4 files changed, 241 insertions(+), 110 deletions(-)

diff --git a/src/renderer/src/components/template-study/container/adjust-dialog.vue b/src/renderer/src/components/template-study/container/adjust-dialog.vue
index 32f207d..8113b8f 100644
--- a/src/renderer/src/components/template-study/container/adjust-dialog.vue
+++ b/src/renderer/src/components/template-study/container/adjust-dialog.vue
@@ -1,9 +1,9 @@
 <template>
-  <el-dialog v-model="isDialog" :show-close="false" width="800" append-to-body destroy-on-close>
+  <el-dialog v-model="model" :show-close="false" width="800" append-to-body destroy-on-close>
     <template #header>
       <div class="custom-header flex">
         <span>{{ item.name }}</span>
-        <i class="iconfont icon-guanbi" @click="isDialog = false"></i>
+        <i class="iconfont icon-guanbi" @click="model = false"></i>
       </div>
     </template>
     <div class="dialog-content">
@@ -56,7 +56,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import { ref, reactive, onMounted, watch, onUnmounted } from 'vue'
 import { completion, docList } from '@/api/mode/index'
 import { sessionStore } from '@/utils/store'
 import { dataSetJson } from '@/utils/comm.js'
@@ -68,7 +68,7 @@ const userInfo = useUserStore().user
 
 const textarea = ref('')
 
-const isDialog = defineModel()
+const model = defineModel()
 
 const props = defineProps({
   item: {
@@ -91,6 +91,12 @@ const props = defineProps({
   }
 })
 
+watch(model, (newVal) =>{
+  if(newVal){
+    msgList.value.length = 0
+  }
+})
+
 const emit = defineEmits(['saveEdit'])
 
 const loaded = ref(false)
@@ -150,7 +156,7 @@ const getCompletion = async (val) => {
 }
 
 const saveAdjust = (item) =>{
-  isDialog.value = false
+  model.value = false
   emitter.emit('onSaveAdjust', item.msg)
 }
 
diff --git a/src/renderer/src/components/template-study/container/right.vue b/src/renderer/src/components/template-study/container/right.vue
index 42d3a4d..cd42072 100644
--- a/src/renderer/src/components/template-study/container/right.vue
+++ b/src/renderer/src/components/template-study/container/right.vue
@@ -4,12 +4,12 @@
     <div class="container-right-header flex">
       <el-dropdown @command="changeTemplate" :hide-on-click="false">
         <span class="el-dropdown-link">
-          {{ curTemplate.ex3 ? `平台-${curTemplate.name}` : `个人-${curTemplate.name}` }}
+          {{ curTemplate.ex3 ? `${curTemplate.name}(平台)` : `${curTemplate.name}(个人)` }}
           <i class="iconfont icon-xiangxia"></i>
         </span>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item v-for="item in templateList" :command="item" :key="item.id">{{ item.ex3 ? `平台-${item.name}` : `个人-${item.name}`
+            <el-dropdown-item v-for="item in templateList" :command="item" :key="item.id">{{ item.ex3 ? `${item.name}(平台)` : `${item.name}(个人)`
               }}</el-dropdown-item>
           </el-dropdown-menu>
         </template>
@@ -29,9 +29,9 @@
       </div>
     </div>
     <!--List-->
-    <div class="container-right-list" ref="listRef">
-      <template v-for="(item, index) in childTempList">
-        <div class="template-item" v-loading="item.loading">
+    <div class="container-right-list" ref="outerContainer">
+      <template v-for="(item, index) in childTempList" >
+        <div class="template-item" v-loading="item.loading" ref="messageElements">
           <div class="item-header">
             <div>
               <span class="blue">#</span>{{ item.name }}
@@ -50,13 +50,21 @@
           <div class="item-text">
             {{ item.prompt }}
           </div>
-          <div class="item-text text-answer" v-if="item.answer">
+          <div class="item-text text-answer">
             <div class="item-icon">
               <i class="iconfont icon-ai"></i>
             </div>
             <div class="item-answer">
-              <TypingEffect v-if="isStarted[index]" :text="item.answer" :delay="10" :aiShow="item.aiShow"
-                @complete="handleCompleteText($event, index)" @updateScroll="scrollToBottom($event, index)" />
+              <!-- <TypingEffect v-if="isStarted[index]" :text="item.answer" :delay="10" :aiShow="item.aiShow"
+                @complete="handleCompleteText($event, index)" @updateScroll="scrollToBottom($event, index)" /> -->
+                <TypingEffect
+                  :text="item.answer"
+                  :showTypewriter="item.showTypewriter"
+                  :speed="30"
+                  :charsPerFrame="10"
+                  @scroll="handleScroll(index)"
+                  @done="handleDone"
+                />
             </div>
           </div>
           <div class="ai-btn" v-if="item.answer">
@@ -184,8 +192,8 @@ const getChildTemplate = () => {
     tempLoading.value = false
   })
 }
-const isStarted = ref([]);
-const listRef = ref()
+
+
 // 查询模板结果
 const getTempResult = () => {
   tempResult({ mainModelId: curTemplate.id, pageNum: 1, pageSize: 10000, ex1: curNode.id }).then(res => {
@@ -193,40 +201,84 @@ const getTempResult = () => {
     childTempList.value.forEach(item => {
       rows.forEach(el => {
         if (item.id == el.modelId) {
-          item.answer = getResult(el.content)
+          item.answer = el.content
+          item.showTypewriter = false
           item.resultId = el.id
         }
       })
     })
-    if (rows.length > 0) {
-      isStarted.value = new Array(rows.length).fill(true)
-    }
 
   })
 }
+const messageElements = ref([]); // 存储所有消息元素的引用
 
-const scrollToBottom = (height, index) => {
 
-  if (listRef.value) {
-    let sum = 0
-    let listDom = listRef.value.children
-
-    if (index == 0) {
-      // 220 去掉头部
-      let screenHeight = window.innerHeight - 220
-      if (height > screenHeight) {
-        listRef.value.scrollTop = (height - screenHeight + 50)
+// 处理页面滚动
+const outerContainer = ref()
+let lastScrollTime = 0;
+const scrollInterval = 100
+const handleScroll  = (index) => {
+  const now = Date.now();
+  if (now - lastScrollTime >= scrollInterval) {
+    const container = document.querySelector('.container-right-list');
+    if(isAgain.value){
+      scrollToTmp(index)
+    }
+    else{
+     
+      if (container) {
+        // 平滑滚动到底部
+        requestAnimationFrame(() => {
+          container.scrollTo({
+            top: container.scrollHeight,
+            behavior: 'smooth',
+          });
+        });
       }
     }
-    else {
-      for (let i = 0; i < index; i++) {
-        sum += listDom[i].clientHeight
-      }
-      listRef.value.scrollTop = sum + height
-    }
+    
+    lastScrollTime = now;
+  }
+ 
+}
+
+const tmpViewHeight = container.clientHeight
+const scrollToTmp = (index) =>{
+  const container = document.querySelector('.container-right-list');
+
+
+
+  const beforHeight = messageElements.value.slice(0, index + 1).reduce((sum, item) => sum + item.clientHeight, 0);
+  console.log(beforHeight,'beforHeight', viewHeight)
+  if(beforHeight > tmpViewHeight){
+    container.scrollTo({
+      top: beforHeight - tmpViewHeight,
+      behavior: 'smooth',
+    });
+  }
+
+  const item =  messageElements.value[index]
+      // console.log(item.scrollTop, item.offsetHeight)
+   
+}
+
+// 打字机完成后触发
+const handleDone = () =>{
+  if(isAgain.value){
+    isAgain.value = false
   }
 }
 
+
+const  handleComplete = (index) => {
+  // if (index < childTempList.value.length - 1) {
+  //   document.querySelector(`.template-item:nth-child(${index + 2})`).scrollIntoView({ behavior: 'smooth' });
+  // } else {
+  //   outerContainer.value.scrollTop = outerContainer.value.scrollHeight;
+  // }
+}
+
+
 // 模板切换
 const changeTemplate = (val) => {
   ElMessageBox.confirm(
@@ -295,21 +347,22 @@ const onEdit = (index, item) => {
 }
 
 // 重新研读
-
 const prompt = ref('')
 
 // 重新研读
 const isAgain = ref(false)
 const againResult = async (index, item) => {
+
   isAgain.value = true
-  isStarted.value[index] = false
   childTempList.value[index].answer = ''
+  childTempList.value[index].showTypewriter = true
 
-  if (index == 0) {
-    listRef.value.scrollTop = 0
-
-  } else {
-    scrollToBottom(50, index)
+  // 滚动到该项的位置
+  if (messageElements.value[index]) {
+    messageElements.value[index].scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    });
   }
 
   try {
@@ -338,8 +391,9 @@ const againResult = async (index, item) => {
       data = res.data
     }
 
-    childTempList.value[index].answer = getResult(data.answer);
-    isStarted.value[index] = true
+    childTempList.value[index].answer = data.answer;
+   
+    onEditResult(data.answer, index)
 
   } finally {
     childTempList.value[index].loading = false
@@ -350,12 +404,11 @@ const againResult = async (index, item) => {
 const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 // 一键研读
 const getCompletion = async () => {
-  isStarted.value = new Array(childTempList.length).fill(false)
-  isStarted.value[0] = true
 
   childTempList.value.forEach(item => {
     if (item.answer) {
       item.answer = ''
+      item.showTypewriter = true
     }
   })
 
@@ -385,25 +438,19 @@ const getCompletion = async () => {
         data = res.data
       }
 
-      item.answer = getResult(data.answer)
-      onSaveTemp(item)
+      item.answer = data.answer
+
+      await onSaveTemp(item)
     } finally {
       item.loading = false
     }
   }
 }
 
-const handleCompleteText = async (answer, index) => {
-  if (index < childTempList.value.length - 1) {
-    isStarted.value[index + 1] = true; // 开始显示下一个文本
-  }
-  if (isAgain.value) {
-    try {
-      await editTempResult({ id: childTempList.value[index].resultId, content: answer })
-    } finally {
-      isAgain.value = false
-    }
-  }
+// 保存编辑后的研读内容
+const onEditResult = async (answer, index) => {
+
+  await editTempResult({ id: childTempList.value[index].resultId, content: answer })
 }
 
 // 替换分析结果
@@ -436,11 +483,6 @@ const onSaveTemp = async (item) => {
   }
 }
 
-// 去掉字符串中的 ### **
-let getResult = (str) => {
-  let newStr = str.replace(/#+|(\*\*)/g, '');
-  return newStr
-}
 
 // 操作之后获取字模板
 emitter.on('onGetChild', () => {
diff --git a/src/renderer/src/components/typing-effect/index.vue b/src/renderer/src/components/typing-effect/index.vue
index 2438ce0..e2e479d 100644
--- a/src/renderer/src/components/typing-effect/index.vue
+++ b/src/renderer/src/components/typing-effect/index.vue
@@ -1,70 +1,146 @@
 <template>
   <div class="typing-effect" ref="typingEffectRef">
     <!-- <span v-html="displayedText"></span> -->
-    <el-input
-    v-model="displayedText"
-    :autosize="{ minRows: 2 }"
-    type="textarea"
-    readonly
-    resize="none"
-    style="width: 100%;"
-    input-style="border:none;outline: none;box-shadow:none;color:000;fontSize:14px"
-  />
+    <!-- <el-input
+      v-model="currentText"
+      :autosize="{ minRows: 2 }"
+      type="textarea"
+      readonly
+      resize="none"
+      style="width: 100%;"
+      input-style="border:none;outline: none;box-shadow:none;color:000;fontSize:14px"
+    /> -->
+    <v-md-editor v-model="currentText" mode="preview" />
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch, nextTick } from 'vue';
+import { ref, onMounted, watch, onUnmounted } from 'vue';
 
 const props = defineProps({
   text: {
-    type: [String, Object],
-    required: true
+    type: String,
+    required: true,
   },
-  delay: {
+  speed: {
     type: Number,
-    default: 100 // 默认每个字符出现的延迟时间，单位是毫秒
+    default: 50, // 默认每个字符的展示间隔时间（毫秒）
+  },
+  charsPerFrame: {
+    type: Number,
+    default: 1, // 默认每次展示的字符数
+  },
+  showTypewriter: {
+    type: Boolean,
+    default: true, // 是否展示打字机效果
   },
-  aiShow: {
-    type: [Boolean] // 为true 只展示
-  }
 });
-const typingEffectRef = ref(null);
-const emit = defineEmits(['complete', 'updateScroll']);
-const displayedText = ref('');
-const index = ref(0);
 
-const type = async () => {
-  await nextTick()
-  if(!props.aiShow) {
-    displayedText.value = props.text
-    return
-  }
-  if (index.value <= props.text.length) {
-    displayedText.value += props.text.charAt(index.value);
-    index.value++;
-    setTimeout(() => {
-      type();
-      emit('updateScroll', typingEffectRef.value.clientHeight); // 每次添加新字符后滚动到底部
-    }, props.delay);
+// 定义 emits
+const emit = defineEmits(['scroll']);
+
+// 数据
+const textContainer = ref(null); // 用于绑定 DOM 元素
+const currentText = ref(''); // 当前展示的文本
+const currentCharIndex = ref(0); // 当前展示到的字符索引
+const isTyping = ref(false); // 是否正在展示
+const animationFrameId = ref(null); // 用于存储 requestAnimationFrame 的 ID
+
+// 打字机效果逻辑
+const typeText = () => {
+
+  if (currentCharIndex.value < props.text.length) {
+    // 每次展示 charsPerFrame 个字符
+    currentText.value += props.text.slice(
+      currentCharIndex.value,
+      currentCharIndex.value + props.charsPerFrame
+    );
+    currentCharIndex.value += props.charsPerFrame;
+    emit('scroll'); // 触发滚动事件
+    // 使用 requestAnimationFrame 递归调用
+    animationFrameId.value = requestAnimationFrame(() => {
+      setTimeout(() => {
+        typeText();
+      }, props.speed);
+    });
   } else {
-    // 当所有字符都显示完毕时，触发 complete 事件
-    emit('complete',displayedText.value);
+    isTyping.value = false;
   }
 };
 
-onMounted(() => {
-  resetAndType();
-});
-
-const resetAndType = () =>{
-  displayedText.value = '';
-  index.value = 0;
-  type();
+// 直接展示全部内容
+const showFullText = () =>{
+  currentText.value = props.text
 }
 
+// 启动打字机效果
+const startTypeWriter = () => {
+  isTyping.value = true;
+  currentText.value = '';
+  currentCharIndex.value = 0;
+  typeText();
+};
+
+// 监听 text 的变化
+watch(
+  () => props.text,
+  () => {
+    if(props.showTypewriter){
+      startTypeWriter();
+    } else {
+      showFullText();
+    }
+  }
+);
+
+// 组件挂载时启动打字机效果
+onMounted(() => {
+  // startTypeWriter();
+});
+
+// 组件卸载时取消动画帧
+onUnmounted(() => {
+  if (animationFrameId.value) {
+    cancelAnimationFrame(animationFrameId.value);
+  }
+});
+
+// const typingEffectRef = ref(null);
+// const emit = defineEmits(['complete', 'updateScroll']);
+// const displayedText = ref('');
+// const index = ref(0);
+
+// const type = async () => {
+//   await nextTick()
+//   if(!props.aiShow) {
+//     displayedText.value = props.text
+//     return
+//   }
+//   if (index.value <= props.text.length) {
+//     displayedText.value += props.text.charAt(index.value);
+//     index.value++;
+//     setTimeout(() => {
+//       type();
+//       emit('updateScroll', typingEffectRef.value.clientHeight); // 每次添加新字符后滚动到底部
+//     }, props.delay);
+//   } else {
+//     // 当所有字符都显示完毕时，触发 complete 事件
+//     emit('complete',displayedText.value);
+//   }
+// };
+
+// onMounted(() => {
+//   resetAndType();
+// });
+
+// const resetAndType = () =>{
+//   displayedText.value = '';
+//   index.value = 0;
+//   type();
+// }
+
 // 监听 props 的变化，以便当传入的 text 或 delay 发生改变时重新开始打字机效果
-watch([() => props.text, () => props.delay], resetAndType);
+// watch([() => props.text, () => props.delay], resetAndType);
 
 
 
@@ -74,4 +150,12 @@ watch([() => props.text, () => props.delay], resetAndType);
 :deep(.el-textarea__inner:hover){
   box-shadow: none;
 }
+
+.typing-effect{
+  :deep(.github-markdown-body){
+    padding: 0;
+    font-size: 14px;
+  }
+}
+
 </style>
\ No newline at end of file
diff --git a/src/renderer/src/layout/components/Aside.vue b/src/renderer/src/layout/components/Aside.vue
index 8aa998e..b5a73b2 100644
--- a/src/renderer/src/layout/components/Aside.vue
+++ b/src/renderer/src/layout/components/Aside.vue
@@ -86,7 +86,6 @@ const defaultImg = ['/img/avatar-default.jpg','/images/img-avatar.png','/src/ass
 
 //是否是基地人员
 const isStadium = () => {
-  console.log('isStadium',userStore.roles )
   let user = userStore.user
   let roles = user.roles
   return  roles.some(item => item.roleKey === 'stadium')