Merge pull request 'lyc-dev' (#242) from lyc-dev into main

Reviewed-on: #242

src/renderer/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4723712 */
-  src: url('iconfont.woff2?t=1737434703828') format('woff2'),
-       url('iconfont.woff?t=1737434703828') format('woff'),
-       url('iconfont.ttf?t=1737434703828') format('truetype');
+  src: url('iconfont.woff2?t=1739948469020') format('woff2'),
+       url('iconfont.woff?t=1739948469020') format('woff'),
+       url('iconfont.ttf?t=1739948469020') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-zhongxinshiyang:before {
+  content: "\e67b";
+}
+
 .icon-siweidaotu:before {
   content: "\e606";
 }

src/renderer/src/assets/iconfont/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "4320365",
+      "name": "重新试样",
+      "font_class": "zhongxinshiyang",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
     {
       "icon_id": "11685410",
       "name": "思维导图",

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">
@@ -15,7 +15,9 @@
             </div>
             <div class="flex-start flex" v-else>
               <div class="flex" v-loading="!item.msg">
-                <div class="chart-item robot">{{ item.msg }}</div>
+                <div class="chart-item robot">
+                  <v-md-editor v-model="item.msg" mode="preview" />
+                </div>
               </div>
               <div class="flex flex-end replace-item">
                 <span @click="saveAdjust(item)"><i class="iconfont icon-tihuan"></i>替换分析结果</span>
@@ -54,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'
@@ -66,7 +68,7 @@ const userInfo = useUserStore().user
 
 const textarea = ref('')
 
-const isDialog = defineModel()
+const model = defineModel()
 
 const props = defineProps({
   item: {
@@ -89,6 +91,12 @@ const props = defineProps({
   }
 })
 
+watch(model, (newVal) =>{
+  if(newVal){
+    msgList.value.length = 0
+  }
+})
+
 const emit = defineEmits(['saveEdit'])
 
 const loaded = ref(false)
@@ -148,7 +156,7 @@ const getCompletion = async (val) => {
 }
 
 const saveAdjust = (item) =>{
-  isDialog.value = false
+  model.value = false
   emitter.emit('onSaveAdjust', item.msg)
 }
 
@@ -158,12 +166,17 @@ const dataset_id = ref('')
 const fileList = ref([])
 const getList = () =>{
   docList({
-    userId: userInfo.userId,
-    dataset_id:  dataset_id.value
+    createUser: userInfo.userId,
+    datasetId:  dataset_id.value,
+    edustage: curNode.edustage,
+    edusubject: curNode.edusubject
   }).then( res =>{
-    fileList.value = res.rows
-    Object.assign(curFile,  fileList.value[0])
-    params.document_ids =  fileList.value[0].docId
+    if(res.rows.length){
+      fileList.value = res.rows
+
+      Object.assign(curFile,  fileList.value[0])
+      params.document_ids =  fileList.value[0].docId
+    }
   })
 }
 emitter.on('changeCurFile', (item) =>{
@@ -239,6 +252,7 @@ onUnmounted(() => {
     .robot {
       background: #409EFF;
       color: #FFF;
+      width: 100%;
     }
     .replace-item{
       font-size: 12px;
@@ -332,4 +346,13 @@ onUnmounted(() => {
   display: flex;
   margin-bottom: 10px;
 }
+
+:deep(.v-md-editor){
+  background-color: #409EFF;
+}
+:deep(.github-markdown-body) {
+  font-size: 14px;
+  padding: 10px;
+
+}
 </style>

src/renderer/src/components/template-study/container/keyword-dialog.vue

@@ -13,7 +13,7 @@
           <el-input v-model="form.name" />
         </el-form-item>
         <el-form-item label="提示词" v-if="item.ex3 == '1' ? false : true">
-          <el-input v-model="form.prompt" type="textarea" />
+          <el-input v-model="form.prompt" type="textarea" autosize  :rows="2" />
         </el-form-item>
       </el-form>
     </div>

src/renderer/src/components/template-study/container/left-dialog.vue

@@ -137,7 +137,9 @@ const curFile = reactive({})
 const getList = () => {
   docList({
     createUser: userInfo.userId,
-    datasetId: dataset_id.value
+    datasetId: dataset_id.value,
+    edustage: curNode.edustage,
+    edusubject: curNode.edusubject
   }).then((res) => {
     fileList.value = [...res.rows]
    if(res.rows.length){

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.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.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>
@@ -18,20 +18,20 @@
         <el-select v-model="curMode" placeholder="Select" class="mr-4 w-30">
           <el-option v-for="item in modeOptions" :key="item.value" :disabled="item.disabled" :label="item.label" :value="item.value" />
         </el-select>
-        <el-button type="danger" link :disabled="!(templateList.length)" @click="removeItem(curTemplate, false)">
+        <el-button type="danger" link :disabled="!(templateList.length)" @click="removeItem(curTemplate, false)" v-if="curTemplate.ex3 != 1">
           删除
         </el-button>
         <el-button type="primary" link :disabled="!(templateList.length)" @click="onAdd">
           <i class="iconfont icon-jiahao"></i>
-          {{curTemplate.ex3 === '1' ? '复制并创建个人模板' : '添加提示词'}}
+          {{ curTemplate.ex3 == 1 ? '复制并创建个人模板' : '添加提示词' }}
         </el-button>
-        <el-button type="primary" :disabled="!(childTempList.length)" @click="getCompletion">一键研读</el-button>
+        <el-button type="primary" :disabled="!(childTempList.length)" @click="getModelResult('')">一键研读</el-button>
       </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,18 +50,26 @@
           <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="15"
+                  @scroll="handleScroll(index)"
+                  @done="handleDone(index)"
+                />
             </div>
           </div>
           <div class="ai-btn" v-if="item.answer">
-            <el-button type="primary" link @click="againResult(index, item)">
-              <i class="iconfont icon-ai1"></i>
+            <el-button type="primary" link @click="getModelResult(index, item)">
+              <i class="iconfont icon-zhongxinshiyang"></i>
               重新研读
             </el-button>
             <el-button type="primary" link @click="onAdjust(index, item)">
@@ -99,7 +107,6 @@ import TypingEffect from '@/components/typing-effect/index.vue'
 import useUserStore from '@/store/modules/user'
 import emitter from '@/utils/mitt';
 import { dataSetJson } from '@/utils/comm.js'
-import { cloneDeep } from 'lodash'
 
 const props = defineProps(['type'])
 const { user } = useUserStore()
@@ -123,7 +130,7 @@ const modeOptions = ref([
   },
   {
     label: 'deepseek模型',
-    value: 3
+    value: 3,
   }
 ])
 
@@ -138,7 +145,7 @@ const modeOptions = ref([
 const isWordDialog = ref(false)
 const editItem = reactive({})
 const onAdd = () => {
-  console.log(curTemplate)
+
   Object.assign(editItem, curTemplate)
   editItem.isAdd = true
   isWordDialog.value = true
@@ -176,61 +183,253 @@ const getTemplateList = () => {
     }
   })
 }
-const getChildTemplate = () => {
+const getChildTemplate = (val) => {
   tempLoading.value = true
   modelList({ model: props.type, type: 2, parentId: curTemplate.id, ex1: curNode.edustage, ex2: curNode.edusubject }).then(res => {
     childTempList.value = res.rows
     if (childTempList.value.length) {
-      childTempList.value.forEach(item => item.answer = '')
+      childTempList.value.forEach(item => {
+        item.answer = '';
+        item.showTypewriter = false
+      })
     }
-    getTempResult()
+
+    // 获取研读结果
+    getTempResult(val)
+    
+    
   }).finally(() => {
     tempLoading.value = false
   })
 }
-const isStarted = ref([]);
-const listRef = ref()
+
+
 // 查询模板结果
-const getTempResult = () => {
-  tempResult({ mainModelId: curTemplate.id, pageNum: 1, pageSize: 10000, ex1: curNode.id }).then(res => {
+const getTempResult = (val) => {
+  tempResult({ mainModelId: curTemplate.id, pageNum: 1, pageSize: 10000, ex1: curNode.id }).then(async res => {
     let rows = res.rows
     childTempList.value.forEach(item => {
       rows.forEach(el => {
         if (item.id == el.modelId) {
-          item.answer = getResult(el.content)
+          item.answer = el.content
           item.resultId = el.id
         }
       })
     })
-    if (rows.length > 0) {
-      isStarted.value = new Array(rows.length).fill(true)
-    }
+    // val : true 新增的子模板 然后研读
+    if(val){
+      // 添加了一个子模板 要等dom 更新完成 不然滚动无效
+      await nextTick()
 
+      // 研读最后一个
+      let lastIndex = childTempList.value.length - 1
+      getModelResult(lastIndex, childTempList.value[lastIndex], true)
+    }
   })
 }
 
-const scrollToBottom = (height, index) => {
+const prompt = ref('')
 
-  if (listRef.value) {
-    let sum = 0
-    let listDom = listRef.value.children
+// 是否重新研读
+const isAgain = ref(false)
 
-    if (index == 0) {
-      // 220 去掉头部
-      let screenHeight = window.innerHeight - 220
-      if (height > screenHeight) {
-        listRef.value.scrollTop = (height - screenHeight + 50)
-      }
+// 研读
+const getModelResult = async (index, item, isLast) => {
+  /**
+   * 
+   * index: 当前项索引
+   * item: 当前项
+   * isLast: 是否最后一项 用于添加子模板后研读
+   */
+  let str = prompt.value
+  // 重新研读
+  if(index !== ''){
+    isAgain.value = true
+    // 清空研读结果
+    childTempList.value[index].answer = ''
+    // 设置需要打字机效果
+    childTempList.value[index].showTypewriter = true
+    // 滚动到该项的位置
+    if (messageElements.value[index]) {
+      messageElements.value[index].scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      });
     }
-    else {
-      for (let i = 0; i < index; i++) {
-        sum += listDom[i].clientHeight
+    // 设置当前模板prompt
+    str = str.replace('{模板标题}',item.name)
+    str = str.replace('{模板内容}',item.prompt)
+    params.prompt = str
+    params.template = item.prompt
+    // 请求数据
+    try {
+      childTempList.value[index].loading = true
+      const data = await requestModelData()
+      childTempList.value[index].answer = data.answer;
+      if(isLast){
+        await onSaveTemp(childTempList.value[index])
+      }else{
+        // 保存重新研读后的结果 
+        onEditResult(data.answer, index)
       }
-      listRef.value.scrollTop = sum + height
+  
+    } finally {
+      childTempList.value[index].loading = false
     }
+    
+  }
+  // 一键研读
+  else{
+    // 清空所有模板结果
+    childTempList.value.forEach(item => {
+      if (item.answer) {
+        item.answer = ''
+      }
+    })
+    // 设置滚动到第一个位置
+    messageElements.value[0].scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    })
+
+    processNext(0)
+
   }
 }
 
+// 打字机效果完成 后继续研读下一个
+const processNext = async (index) =>{
+  let str = prompt.value
+  // 当前项
+  const item = childTempList.value[index]
+  item.loading = true
+  str = str.replace('{模板标题}',item.name)
+  str = str.replace('{模板内容}',item.prompt)
+  params.prompt = str
+  params.template = item.prompt
+  // 请求数据
+  try {
+    const data = await requestModelData()
+    item.answer = data.answer
+    item.showTypewriter = true
+  
+
+    // 保存
+    await onSaveTemp(item)
+  } finally {
+    item.loading = false
+  }
+}
+
+// 打字机完成后触发
+const handleDone = (index) =>{
+  if(isAgain.value){
+    isAgain.value = false
+    return
+  }
+  else{
+    if(index == childTempList.value.length - 1) return
+    outerContainer.value.scrollTo({
+      top: outerContainer.value.scrollHeight,
+      behavior: 'smooth',
+    });
+    processNext(index + 1)
+  }
+}
+
+// 设置一个延迟函数 ms: 毫秒
+const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+// 请求大模型接口获取模板研读结果 知识库模型 or 教学大模型
+const requestModelData = async () =>{
+  // 教学大模型
+  let data = null
+  if (curMode.value == 1) {
+    const res = await sendChart({
+      content: params.prompt,
+      conversationId: conversation_id.value,
+      stream: false
+    })
+    // 一键研读 设置一个1s 延迟 防止百度千帆请求过于频繁
+    if(!isAdjust.value){
+      await delay(1000); // 每个请求之间延迟 1 秒
+    }
+    data = res.data
+  }
+  // 知识库模型
+  else {
+    if (curMode.value == 3) {
+      params.llm = 'deepseek-r1:8b'
+    }
+    const res = await completion(params)
+    data = res.data
+  }
+  return data
+}
+
+
+const messageElements = ref([]); // 存储所有消息元素的引用
+// 处理页面滚动
+// const animationId = ref(null)
+const animationIDs = ref([])
+
+const outerContainer = ref()
+let lastScrollTime = 0;
+const scrollInterval = 200
+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) {
+        if(index == 0){
+          const item =  messageElements.value[index]
+          if(item.clientHeight > outerContainer.value.clientHeight ){
+            item.scrollIntoView({ behavior: 'smooth', block: 'end' })
+          }
+        }
+        else{
+          // 平滑滚动到底部
+          const id = requestAnimationFrame(() => {
+            container.scrollTo({
+              top: container.scrollHeight,
+              behavior: 'smooth',
+            });
+          });
+          animationIDs.value.push(id)
+        }
+      }
+    }
+    lastScrollTime = now;
+  }
+}
+
+// 处理重新研读 滚动
+const scrollToTmp = (index) =>{
+  // 最后一个 滚到底部
+  if(index == childTempList.value.length - 1){
+    const id = requestAnimationFrame(() => {
+      outerContainer.value.scrollTo({
+        top: outerContainer.value.scrollHeight,
+        behavior: 'smooth',
+      });
+    });
+    animationIDs.value.push(id)
+  }
+  else{
+    const item =  messageElements.value[index]
+    if(item.clientHeight > outerContainer.value.clientHeight ){
+      item.scrollIntoView({ behavior: 'smooth', block: 'end' })
+    }
+  } 
+}
+
+
+
 // 模板切换
 const changeTemplate = (val) => {
   ElMessageBox.confirm(
@@ -298,122 +497,10 @@ const onEdit = (index, item) => {
   isEdit.value = true
 }
 
-// 重新研读
+// 保存编辑后的研读内容
+const onEditResult = async (answer, index) => {
 
-const prompt = ref('')
-
-// 重新研读
-const isAgain = ref(false)
-const againResult = async (index, item) => {
-  isAgain.value = true
-  isStarted.value[index] = false
-  childTempList.value[index].answer = ''
-
-  if (index == 0) {
-    listRef.value.scrollTop = 0
-
-  } else {
-    scrollToBottom(50, index)
-  }
-
-  try {
-    await nextTick()
-    childTempList.value[index].loading = true
-    item.aiShow = true
-
-    let str = cloneDeep(prompt.value)
-    str = str.replace('{模板标题}',item.name)
-    str = str.replace('{模板内容}',item.prompt)
-    params.prompt = str
-    params.template = item.prompt
-
-    let data = null;
-    // 教学大模型
-    if (curMode.value == 1) {
-      const res = await sendChart({
-        content: params.prompt,
-        conversationId: conversation_id.value,
-        stream: false
-      })
-      data = res.data
-    } else {
-      if (curMode.value == 3) {
-        params.llm = 'deepseek-r1:8b'
-      }
-      // 知识库模型
-      const res = await completion(params)
-      data = res.data
-    }
-
-    childTempList.value[index].answer = getResult(data.answer);
-    isStarted.value[index] = true
-
-  } finally {
-    childTempList.value[index].loading = false
-  }
-}
-
-
-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 = ''
-    }
-  })
-
-  for (let item of childTempList.value) {
-    try {
-      item.loading = true
-      item.aiShow = true
-      let str = cloneDeep(prompt.value)
-      str = str.replace('{模板标题}',item.name)
-      str = str.replace('{模板内容}',item.prompt)
-      params.prompt = str
-      params.template = item.prompt
-      // 教学大模型
-      let data = null
-      if (curMode.value == 1) {
-        const res = await sendChart({
-          content: params.prompt,
-          conversationId: conversation_id.value,
-          stream: false
-        })
-        await delay(1000); // 每个请求之间延迟 1 秒
-        data = res.data
-      }
-      // 知识库模型
-      else {
-        if (curMode.value == 3) {
-          params.llm = 'deepseek-r1:8b'
-        }
-        const res = await completion(params)
-        data = res.data
-      }
-
-      item.answer = getResult(data.answer)
-      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
-    }
-  }
+  await editTempResult({ id: childTempList.value[index].resultId, content: answer })
 }
 
 // 替换分析结果
@@ -446,19 +533,13 @@ const onSaveTemp = async (item) => {
   }
 }
 
-// 去掉字符串中的 ### **
-let getResult = (str) => {
-  let newStr = str.replace(/#+|(\*\*)/g, '');
-  newStr = newStr.replace(/<think>[\s\S]*?<\/think>/g, '');
-  return newStr
-}
 
-// 操作之后获取字模板
+// 操作之后获取子模板
 emitter.on('onGetChild', () => {
-  getChildTemplate()
+  getChildTemplate(true)
 })
 // 操作之后获取主模板
-emitter.on('onGetMain', () => {
+emitter.on('onGetMain====》', () => {
   getTemplateList()
 })
 
@@ -496,8 +577,8 @@ onMounted(() => {
 
   getTemplateList()
   let jsonKey = `${modeType.value}-${data.edustage}-${data.edusubject}`
-
-
+ 
+ 
   params.dataset_id = dataSetJson[jsonKey]
   if(!params.dataset_id){
     curMode.value = 1
@@ -524,7 +605,11 @@ onUnmounted(() => {
   emitter.off('onGetMain');
   emitter.off('onGetChild');
   emitter.off('onSaveAdjust');
+  // 组件卸载时取消动画帧
+  animationIDs.value.forEach(id => cancelAnimationFrame(id))
 })
+
+
 </script>
 
 <style lang="scss" scoped>
@@ -616,14 +701,15 @@ onUnmounted(() => {
 
         .iconfont {
           margin-right: 3px;
+          font-size: 18px;
         }
 
         :deep(.el-button) {
-          font-size: 13px;
+          font-size: 14px;
         }
 
-        .icon-ai1 {
-          font-size: 18px;
+        .icon-zhongxinshiyang {
+          font-size: 20px;
         }
       }
     }

src/renderer/src/components/typing-effect/index.vue

@@ -1,85 +1,109 @@
 <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
-  }
-  //限制多久内打印完ms
-  let allLength = props.text.length
-  let allTime = 3000
-  let addIndex = allLength/(allTime/props.delay);
-  //一次添加5个字符
-  for (let i = 0; i < addIndex; i++) {
-    if (index.value <= allLength) {
-      displayedText.value += props.text.charAt(index.value);
-      index.value++;
-    } else {
-      break;
-    }
-  }
-  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','done']);
+
+// 数据
+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;
+    emit('done')
   }
 };
 
-onMounted(() => {
-  resetAndType();
-});
-
-const resetAndType = () =>{
-  displayedText.value = '';
-  index.value = 0;
-  type();
+// 直接展示全部内容
+const showFullText = () =>{
+  currentText.value = props.text
 }
 
-// 监听 props 的变化，以便当传入的 text 或 delay 发生改变时重新开始打字机效果
-watch([() => props.text, () => props.delay], resetAndType);
+// 启动打字机效果
+const startTypeWriter = () => {
+  isTyping.value = true;
+  currentText.value = '';
+  currentCharIndex.value = 0;
+  typeText();
+};
 
+// 监听 text 的变化
+watch(
+  () => props.text,
+  () => {
+    if(props.showTypewriter && props.text){
+      startTypeWriter();
+    } else {
+      showFullText();
+    }
+  }
+);
 
+// 组件挂载时启动打字机效果
+onMounted(() => {
+  // startTypeWriter();
+});
+
+// 组件卸载时取消动画帧
+onUnmounted(() => {
+  if (animationFrameId.value) {
+    cancelAnimationFrame(animationFrameId.value);
+  }
+});
 
 </script>
 
@@ -87,4 +111,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>