lyc-dev #81
|
|
@ -142,13 +142,18 @@ const handleNodeClick = (data) => {
|
|||
|
||||
//增加一个label 之前取的label
|
||||
nodeData.label = nodeData.itemtitle
|
||||
// 父级节点 如果当前是一级节点 父级则为null
|
||||
let parent = {
|
||||
id: nodeData.parentid,
|
||||
label: nodeData.parenttitle,
|
||||
itemtitle: nodeData.parenttitle
|
||||
}
|
||||
const parentNode = nodeData.parentid ? parent : null
|
||||
let parentNode
|
||||
// 父级id == rootid 说明当前节点为一级节点
|
||||
if(nodeData.parentid == nodeData.rootid){
|
||||
parentNode = null
|
||||
}
|
||||
else{
|
||||
parentNode = {
|
||||
id: nodeData.parentid,
|
||||
label: nodeData.parenttitle,
|
||||
itemtitle: nodeData.parenttitle
|
||||
}
|
||||
}
|
||||
nodeData.parentNode = parentNode
|
||||
let curData = {
|
||||
textBook: {
|
||||
|
|
|
|||
|
|
@ -26,52 +26,52 @@
|
|||
</div>
|
||||
</div>
|
||||
<!--List-->
|
||||
<div class="container-right-list">
|
||||
<template v-for="(item, index) in childTempList">
|
||||
<div class="template-item" v-loading="item.loading">
|
||||
<div class="item-header">
|
||||
<div>
|
||||
<span class="blue">#</span>{{ item.name }}
|
||||
</div>
|
||||
<el-popover placement="bottom-end" trigger="hover" popper-class="template-custom-popover">
|
||||
<template #reference>
|
||||
<el-button link type="primary">
|
||||
<i class="iconfont icon-shenglvehao"></i></el-button>
|
||||
</template>
|
||||
<template #default>
|
||||
<el-button type="primary" link @click="editKeyWord(item)">编辑</el-button>
|
||||
<el-button type="primary" link @click="removeItem(item, true)">移除</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="item-text">
|
||||
{{ item.prompt }}
|
||||
</div>
|
||||
<div class="item-text text-answer" v-if="item.answer">
|
||||
<div class="item-icon">
|
||||
<i class="iconfont icon-ai"></i>
|
||||
</div>
|
||||
<div class="item-answer">
|
||||
<TypingEffect :text="item.oldAnswer" :delay="10" :aiShow="item.aiShow" @complete="onSaveTemp(item)" />
|
||||
</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>
|
||||
<el-button type="primary" link @click="onAdjust(index, item)">
|
||||
<i class="iconfont icon-duihua"></i>
|
||||
AI对话调整
|
||||
</el-button>
|
||||
<el-button type="primary" link @click="onEdit(index, item)">
|
||||
<i class="iconfont icon-bianji1"></i>
|
||||
手动编辑结果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty v-if="!childTempList.length" description="暂无模板数据" />
|
||||
<div class="container-right-list" ref="listRef">
|
||||
<template v-for="(item, index) in childTempList">
|
||||
<div class="template-item" v-loading="item.loading">
|
||||
<div class="item-header">
|
||||
<div>
|
||||
<span class="blue">#</span>{{ item.name }}
|
||||
</div>
|
||||
<el-popover placement="bottom-end" trigger="hover" popper-class="template-custom-popover">
|
||||
<template #reference>
|
||||
<el-button link type="primary">
|
||||
<i class="iconfont icon-shenglvehao"></i></el-button>
|
||||
</template>
|
||||
<template #default>
|
||||
<el-button type="primary" link @click="editKeyWord(item)">编辑</el-button>
|
||||
<el-button type="primary" link @click="removeItem(item, true)">移除</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="item-text">
|
||||
{{ item.prompt }}
|
||||
</div>
|
||||
<div class="item-text text-answer" v-if="item.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(index)" @updateScroll="scrollToBottom($event,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>
|
||||
<el-button type="primary" link @click="onAdjust(index, item)">
|
||||
<i class="iconfont icon-duihua"></i>
|
||||
AI对话调整
|
||||
</el-button>
|
||||
<el-button type="primary" link @click="onEdit(index, item)">
|
||||
<i class="iconfont icon-bianji1"></i>
|
||||
手动编辑结果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty v-if="!childTempList.length" description="暂无模板数据" />
|
||||
</div>
|
||||
</div>
|
||||
<!--编辑结果-->
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch, onUnmounted } from 'vue'
|
||||
import { ref, reactive, onMounted, watch, onUnmounted, nextTick } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { tempSave, completion, modelList, removeChildTemp, tempResult, editTempResult } from '@/api/mode/index'
|
||||
import { sessionStore } from '@/utils/store'
|
||||
|
|
@ -146,14 +146,16 @@ const getChildTemplate = () => {
|
|||
tempLoading.value = true
|
||||
modelList({ model: props.type, type: 2, parentId: curTemplate.id }).then(res => {
|
||||
childTempList.value = res.rows
|
||||
|
||||
if(childTempList.value.length){
|
||||
childTempList.value.forEach(item => item.answer = '')
|
||||
}
|
||||
getTempResult()
|
||||
}).finally(() => {
|
||||
tempLoading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const isStarted = ref([]);
|
||||
const listRef = ref()
|
||||
// 查询模板结果
|
||||
const getTempResult = () => {
|
||||
tempResult({ mainModelId: curTemplate.id, pageNum: 1, pageSize: 10000 }).then(res => {
|
||||
|
|
@ -161,14 +163,45 @@ const getTempResult = () => {
|
|||
childTempList.value.forEach(item => {
|
||||
rows.forEach(el => {
|
||||
if (item.id == el.modelId) {
|
||||
item.answer = el.content
|
||||
item.answer = getResult(el.content)
|
||||
item.resultId = el.id
|
||||
}
|
||||
})
|
||||
})
|
||||
if(rows.length > 0){
|
||||
isStarted.value = new Array(rows.length).fill(true)
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
const scrollToBottom = (height,index) =>{
|
||||
|
||||
if (listRef.value) {
|
||||
|
||||
let listDom = listRef.value.children
|
||||
|
||||
for(let i = 0; i < index; i++){
|
||||
sum += listDom[i].clientHeight
|
||||
}
|
||||
|
||||
listRef.value.scrollTop = sum + height
|
||||
|
||||
// isStarted.value[index] = height
|
||||
|
||||
// const sum = isStarted.value.reduce((accumulator, currentValue) => {
|
||||
// // 检查当前值是否为数字
|
||||
// if (typeof currentValue === 'number') {
|
||||
// return accumulator + currentValue;
|
||||
// }
|
||||
// // 如果不是数字，则返回累加器的当前值
|
||||
// return accumulator;
|
||||
// }, 0);
|
||||
// listRef.value.scrollTop = sum - 150;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 模板切换
|
||||
const changeTemplate = (val) => {
|
||||
ElMessageBox.confirm(
|
||||
|
|
@ -203,11 +236,11 @@ const removeItem = async (item, isChild) => {
|
|||
).then(() => {
|
||||
removeChildTemp(item.id).then(res => {
|
||||
ElMessage.success('操作成功')
|
||||
if(isChild){
|
||||
if (isChild) {
|
||||
// 获取子模板
|
||||
getChildTemplate()
|
||||
}
|
||||
else{
|
||||
else {
|
||||
// 获取主模板
|
||||
getTemplateList()
|
||||
}
|
||||
|
|
@ -215,7 +248,7 @@ const removeItem = async (item, isChild) => {
|
|||
})
|
||||
}
|
||||
else {
|
||||
editKeyWord(item,!isChild)
|
||||
editKeyWord(item, !isChild)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -240,19 +273,18 @@ const onEdit = (index, item) => {
|
|||
|
||||
const modeType = ref('课标')
|
||||
watch(() => props.type, (newVal) => {
|
||||
if (newVal == 1){
|
||||
if (newVal == 1) {
|
||||
modeType.value = '课标'
|
||||
}
|
||||
if (newVal == 2){
|
||||
if (newVal == 2) {
|
||||
modeType.value = '教材'
|
||||
}
|
||||
if (newVal == 2){
|
||||
if (newVal == 3) {
|
||||
modeType.value = '考试'
|
||||
}
|
||||
|
||||
}, { immediate: false })
|
||||
|
||||
|
||||
// 重新研读
|
||||
const params = reactive(
|
||||
{
|
||||
|
|
@ -260,17 +292,35 @@ const params = reactive(
|
|||
dataset_id: ''
|
||||
}
|
||||
)
|
||||
|
||||
// 重新研读
|
||||
const againResult = async (index, item) => {
|
||||
let sTop = isStarted.value[index]
|
||||
isStarted.value[index] = false
|
||||
childTempList.value[index].answer = ''
|
||||
|
||||
|
||||
console.log(listRef.value.scrollTop,listRef.value.children[index].clientHeight);
|
||||
|
||||
|
||||
if(index == 0){
|
||||
listRef.value.scrollTop = 0
|
||||
|
||||
}else{
|
||||
console.log( listRef.value.scrollTop - (listRef.value.children[index].clientHeight),'index')
|
||||
listRef.value.scrollTop =listRef.value.scrollTop - listRef.value.children[index].clientHeight - 50
|
||||
|
||||
}
|
||||
try {
|
||||
await nextTick()
|
||||
childTempList.value[index].loading = true
|
||||
item.aiShow = true
|
||||
childTempList.value[index].oldAnswer = ''
|
||||
params.prompt = `按照${item.name}的要求，针对${curNode.edustage}${curNode.edusubject}${modeType.value} 对${curNode.itemtitle}进行教学分析`
|
||||
const { data } = await completion(params)
|
||||
let answer = data.answer
|
||||
childTempList.value[index].oldAnswer = answer
|
||||
childTempList.value[index].answer = getResult(answer);
|
||||
//params.prompt = `按照${item.name}的要求，针对${curNode.edustage}${curNode.edusubject}${modeType.value} 对${curNode.itemtitle}进行教学分析`
|
||||
//const { data } = await completion(params)
|
||||
//childTempList.value[index].answer = getResult(data.answer);
|
||||
childTempList.value[index].answer = '根据知识库的内容，核心素\n\n综上所述，在大足石刻研学课程中应充分考虑语文学科核心素养的要求，通过实践活动提高学生语言运用能力、思维品质及文化认同'
|
||||
isStarted.value[index] = true
|
||||
|
||||
// onEditSave(item)
|
||||
} finally {
|
||||
childTempList.value[index].loading = false
|
||||
|
|
@ -278,58 +328,67 @@ const againResult = async (index, item) => {
|
|||
}
|
||||
// 一键研读
|
||||
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
|
||||
params.prompt = `按照${item.name}的要求，针对${curNode.edustage}${curNode.edusubject}${modeType.value} 对${curNode.itemtitle}进行教学分析`
|
||||
const { data } = await completion(params)
|
||||
let answer = data.answer
|
||||
item.oldAnswer = answer
|
||||
item.answer = getResult(answer);
|
||||
|
||||
item.answer = getResult(data.answer)
|
||||
onSaveTemp(item)
|
||||
} finally {
|
||||
item.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleCompleteText = (index) =>{
|
||||
if (index < childTempList.value.length - 1) {
|
||||
isStarted.value[index + 1] = true; // 开始显示下一个文本
|
||||
}
|
||||
}
|
||||
|
||||
// 替换分析结果
|
||||
emitter.on('onSaveAdjust', (item) => {
|
||||
childTempList.value[curIndex.value].oldAnswer = item
|
||||
let answer = getResult(item);
|
||||
childTempList.value[curIndex.value].oldAnswer = item
|
||||
childTempList.value[curIndex.value].answer = answer
|
||||
childTempList.value[curIndex.value].answer = item
|
||||
onEditSave(childTempList.value[curIndex.value])
|
||||
})
|
||||
|
||||
|
||||
|
||||
// 保存 重新研读后的结果
|
||||
const onEditSave = async (item) =>{
|
||||
const { res } = await editTempResult({id: item.resultId, content: item.oldAnswer})
|
||||
const onEditSave = async (item) => {
|
||||
const { res } = await editTempResult({ id: item.resultId, content: item.answer })
|
||||
ElMessage.success(res)
|
||||
getChildTemplate()
|
||||
}
|
||||
|
||||
// 保存模板
|
||||
const onSaveTemp = (item) => {
|
||||
if(item.oldAnswer == '') return
|
||||
if (item.answer == '') return
|
||||
|
||||
const data = {
|
||||
mainModelId: curTemplate.id,
|
||||
modelId: item.id,
|
||||
examDocld: '',
|
||||
content: item.oldAnswer
|
||||
content: item.answer
|
||||
}
|
||||
tempSave(data).then(res => {})
|
||||
tempSave(data).then(res => { })
|
||||
}
|
||||
|
||||
// 分析获取课标对话结果
|
||||
let getResult = (text) => {
|
||||
text = text.replace(/^\n\n(.*?)\n\n$/s, '<div>$1</div>');
|
||||
text = text.replace(/^\n(.*?)\n$/s, '<p>$1</p>');
|
||||
text = text.replace(/\*\*(.*?)\*\*/g, "<div class='text-tit'>$1</div>");
|
||||
text = text.replace(/(\d+\..*?)\n/g, "<div class='text-num'>$1</div>\n");
|
||||
return text
|
||||
// 去掉字符串中的 ### **
|
||||
let getResult = (str) => {
|
||||
let newStr = str.replace(/#+|(\*\*)/g, '');
|
||||
return newStr
|
||||
}
|
||||
|
||||
// 操作之后获取字模板
|
||||
|
|
@ -381,87 +440,85 @@ onUnmounted(() => {
|
|||
padding: 5px 15px;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
.template-item {
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
border-radius: 5px;
|
||||
|
||||
.template-item {
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
border-radius: 5px;
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
justify-content: space-between;
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
justify-content: space-between;
|
||||
|
||||
.blue {
|
||||
font-size: 22px;
|
||||
color: #409eff;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-text {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
color: #606266;
|
||||
|
||||
.item-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background: #F6F6F6;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-answer {
|
||||
flex-direction: column;
|
||||
padding-top: 5px;
|
||||
width: 100%;
|
||||
|
||||
:deep(.text-tit) {
|
||||
font-weight: bold;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
:deep(.text-num) {
|
||||
padding-left: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.text-answer {
|
||||
.blue {
|
||||
font-size: 22px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.ai-btn {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.icon-ai1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.item-text {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
color: #606266;
|
||||
|
||||
.item-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background: #F6F6F6;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-answer {
|
||||
flex-direction: column;
|
||||
padding-top: 5px;
|
||||
width: 100%;
|
||||
|
||||
:deep(.text-tit) {
|
||||
font-weight: bold;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
:deep(.text-num) {
|
||||
padding-left: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.text-answer {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.ai-btn {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.icon-ai1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="typing-effect">
|
||||
<div class="typing-effect" ref="typingEffectRef">
|
||||
<!-- <span v-html="displayedText"></span> -->
|
||||
<el-input
|
||||
v-model="displayedText"
|
||||
|
|
@ -14,11 +14,11 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { ref, onMounted, watch, nextTick } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
text: {
|
||||
type: String,
|
||||
type: [String, Object],
|
||||
required: true
|
||||
},
|
||||
delay: {
|
||||
|
|
@ -26,19 +26,27 @@ const props = defineProps({
|
|||
default: 100 // 默认每个字符出现的延迟时间，单位是毫秒
|
||||
},
|
||||
aiShow: {
|
||||
type: [Boolean]
|
||||
type: [Boolean] // 为true 只展示
|
||||
}
|
||||
});
|
||||
const emit = defineEmits(['complete']);
|
||||
const typingEffectRef = ref(null);
|
||||
const emit = defineEmits(['complete', 'updateScroll']);
|
||||
const displayedText = ref('');
|
||||
const index = ref(0);
|
||||
|
||||
const type = () => {
|
||||
if(!props.aiShow) return
|
||||
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(), props.delay);
|
||||
setTimeout(() => {
|
||||
type();
|
||||
emit('updateScroll', typingEffectRef.value.offsetHeight); // 每次添加新字符后滚动到底部
|
||||
}, props.delay);
|
||||
} else {
|
||||
// 当所有字符都显示完毕时，触发 complete 事件
|
||||
emit('complete');
|
||||
|
|
@ -46,15 +54,20 @@ const type = () => {
|
|||
};
|
||||
|
||||
onMounted(() => {
|
||||
type();
|
||||
resetAndType();
|
||||
});
|
||||
|
||||
// 监听 props 的变化，以便当传入的 text 或 delay 发生改变时重新开始打字机效果
|
||||
watch([() => props.text, () => props.delay], () => {
|
||||
const resetAndType = () =>{
|
||||
displayedText.value = '';
|
||||
index.value = 0;
|
||||
type();
|
||||
});
|
||||
}
|
||||
|
||||
// 监听 props 的变化，以便当传入的 text 或 delay 发生改变时重新开始打字机效果
|
||||
watch([() => props.text, () => props.delay], resetAndType);
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ onMounted(() =>{
|
|||
margin-bottom: 10px;
|
||||
|
||||
.img {
|
||||
width: 100px;
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
border: solid #ccc 1px;
|
||||
margin-bottom: 10px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue