zhuhao
/
AIx_Smarttalk_WS
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 13 Wiki Activity

edit

This commit is contained in:
lyc 2025-02-18 17:32:10 +08:00
parent 327e7d78ad
commit e27f7e0018
4 changed files with 241 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/renderer/src/components/template-study/container/adjust-dialog.vue
View File

@ -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)
}

160
src/renderer/src/components/template-study/container/right.vue
View File

@ -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', () => {

174
src/renderer/src/components/typing-effect/index.vue
View File

@ -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>

1
src/renderer/src/layout/components/Aside.vue
View File

@ -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')