<template>
<div class="generalTemplate" id="generalTemplate" v-if="sceneTemplate">
<!-- 八个场景 -->
<div class="sceneStyle">
<!-- 直接开始AI问答 -->
<div class="sonItem">
<div class="skipDirectly" @click="skipAskprogram">
<div class="skipImage">
<img :src="require('@/assets/images/ask/skip.png')" width="40px" alt="" srcset="" />
</div>
<div class="skip"> {{ $t('generalAsk.startAI') }}</div>
</div>
</div>
<div class="sonItem" v-for="(item, index) in sceneData" :key="index"
@click="sonItemAskprogram($event, item.sentencePattern, item.showPattern)">
<el-tooltip class="item" effect="dark" :content="$t('generalAsk.EditPhrasing')" placement="top">
<div class="editImage">
<img :src="require('@/assets/images/ask/edit.png')" @click="item.showPattern = !item.showPattern"
onClick="event.stopPropagation()" width="25px" alt="" srcset="" />
</div>
</el-tooltip>
<!-- 场景标题 -->
<div class="itemScene" :style="{ 'background': (!item.showPattern ? 'rgb(244 246 248)' : '') }">
<span class="title"> {{ $t('generalAsk.scene') }} {{ index + 1 }} : </span>
<span class="content" style="font-weight:bold;">{{ $t(item.scene) }}</span>
</div>
<div class="itemSentencePattern" :style="{ 'background': (!item.showPattern ? 'rgb(244 246 248)' : '') }"
v-show="item.showPattern">
<span class="title"> {{ $t('generalAsk.Phrasing') }} </span>
<span class="content">{{ $t(item.sentencePattern) }}</span>
</div>
<div class="itemSentencePattern" :style="{ 'background': (!item.showPattern ? 'rgb(244 246 248)' : '') }"
v-show="!item.showPattern">
<span class="title"> {{ $t('generalAsk.Phrasing') }}</span>
<span class="content" id="mySpan" onClick="event.stopPropagation()"
v-html="replacedPattern($t(item.sentencePattern))"></span>
</div>
</div>
</div>
<!-- 四个模板 -->
<div class="templateStyle">
<div class="sonItem" @click="sonItemAskprogram1($event, item.templatePattern, item.showPattern)"
v-for="(item, index) in templateData" :key="index">
<el-tooltip class="item" effect="dark" :content="$t('generalAsk.EditPhrasing')" placement="top-start">
<div class="editImage">
<img :src="require('@/assets/images/ask/edit.png')" @click="item.showPattern = !item.showPattern"
onClick="event.stopPropagation()" width="25px" alt="" srcset="" />
</div>
</el-tooltip>
<div class="itemTemplate" :style="{ 'background': (!item.showPattern ? 'rgb(244 246 248)' : '') }"><span
class="title">{{ $t('generalAsk.scene') }}{{ index + 8 }} : </span>
<span class="content" style="font-weight:bold;">{{ $t(item.template) }}</span>
</div>
<div class="itemTemplatePattern" :style="{ 'background': (!item.showPattern ? 'rgb(244 246 248)' : '') }"
v-show="item.showPattern">
<span class="title">{{ $t('generalAsk.Phrasing') }}</span>
<span class="content">{{ $t(item.templatePattern) }}</span>
</div>
<div class="itemTemplatePattern" :style="{ 'background': (!item.showPattern ? 'rgb(244 246 248)' : '') }"
v-show="!item.showPattern">
<span class="title">{{ $t('generalAsk.Phrasing') }} </span>
<span class="content" id="mySpan" onClick="event.stopPropagation()"
v-html="replacedPattern($t(item.templatePattern))"></span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'generalTempalte',
data() {
return {
sceneTemplate: true,
editPattenshow: true,
sceneData: [{
scene: 'generalAsk.ObtainConcept',
sentencePattern: 'generalAsk.explainTheApplication',
showPattern: true
}, {
scene: 'generalAsk.Getskills',
sentencePattern: 'generalAsk.providePractical',
showPattern: true
}, {
scene: 'generalAsk.GetGuidance',
sentencePattern: 'generalAsk.provideSuggestions',
showPattern: true
}, {
scene: 'generalAsk.Seekanswers',
sentencePattern: 'generalAsk.solveIt',
showPattern: true
}, {
scene: 'generalAsk.Findrelevantcases',
sentencePattern: 'generalAsk.representativeCases',
showPattern: true
}, {
scene: 'generalAsk.Gettrends',
sentencePattern: 'generalAsk.summarizetrends',
showPattern: true
}, {
scene: 'generalAsk.operationalProcedures',
sentencePattern: 'generalAsk.brieflyDescribe',
showPattern: true
}],
templateData: [{
template: 'generalAsk.WorkSummary',
templatePattern: 'generalAsk.generateWorkSummary',
showPattern: true
}, {
template: 'generalAsk.ProgressReport',
templatePattern: 'generalAsk.ProjectProgressReport',
showPattern: true
}, {
template: 'generalAsk.DepartmentWeeklyReport',
templatePattern: 'generalAsk.WeeklyReport',
showPattern: true
}, {
template: 'generalAsk.AnnualPerformanceReport',
templatePattern: 'generalAsk.PerformanceReport',
showPattern: true
},]
}
},
computed: {
replacedPattern() {
return sentencePattern => {
var str = sentencePattern
var reg = new RegExp("XXX", "g");
var a = str.replace(reg, "");
const pattern = /\((.*?)\)/g;
const replacedText = '<input type="text" placeholder="$1" value="" idData="$1" class="emptyOut"/>';
var replacedStr = a.replace(pattern, replacedText);
return replacedStr
};
}
},
components: {
},
watch: {
'$i18n.locale': {
handler(val) {
this.sceneTemplate = false
this.$nextTick(() => {
this.sceneTemplate = true
this.$nextTick(() => {
this.selectSpan()
})
})
},
deep: true
},
// templateData: {
// handler(val) {
// },
// deep: true
// },
},
mounted() {
// 将所有"XXX"和括号内的内容改为蓝色并添加下划线
this.selectSpan()
},
methods: {
// 返回
transferData() {
for (let i = 0; i < this.sceneData.length; i++) {
if (this.sceneData[i].showPattern == false) {
this.sceneData[i].showPattern = true
}
}
for (let i = 0; i < this.templateData.length; i++) {
if (this.templateData[i].showPattern == false) {
this.templateData[i].showPattern = true
}
}
},
replaceString(originalStr, replaceArr) {
// 检查原始字符串中是否存在括号
if (!/\(|\)/.test(originalStr)) return originalStr;
let index = 0; // 记录当前遍历到数组的哪个位置
let startIndex = -1; // 记录当前左括号在原始字符串中的位置
let startCount = 0; // 记录当前左括号的嵌套层数
// 遍历字符串进行替换
for (let i = 0; i < originalStr.length; i++) {
if (originalStr[i] === '(') {
if (startIndex === -1) {
startIndex = i;
}
startCount++;
} else if (originalStr[i] === ')') {
startCount--;
if (startCount === 0) {
const newStr = originalStr.slice(0, startIndex) + replaceArr[index] + originalStr.slice(i + 1);
originalStr = newStr;
index++; // 更新数组中待替换元素的位置
i = startIndex + replaceArr[index - 1].length - 1; // 跳过已经替换的部分
startIndex = -1; // 重置startIndex
}
}
}
return originalStr
},
// 点击场景跳转到通用问答
sonItemAskprogram(event, itm, showPattern) {
const item = this.$t(itm)
if (showPattern) {
this.$emit('sessionSonitem', item);
} else {
if (!!(event.target)) {
if (!!(event.target.querySelector('.itemSentencePattern'))) {
const content = event.target.querySelector('.itemSentencePattern').innerText;
// .attributes.documentURI
const reg = new RegExp("XXX", "g");
const reg2 = new RegExp("句式 : ", "g");
const a = content.replace(reg, "");
// 句子句子句子句子句子句子句子
let delectvalue = a.replace(reg2, "");
const regex = /\((.*?)\)/g;
const matches = a.match(regex);
const result = matches.map(match => match.slice(1, -1));
// 数组数组数组数组数组数组数组数组数组
let inputValue = []
for (let i = 0; i < result.length; i++) {
inputValue.push(event.target.querySelector(`input[idData="${result[i]}"`).value)
}
if (inputValue[0] == '') {
this.$emit('sessionSonitem', item);
} else {
const newStr = this.replaceString(delectvalue, inputValue);
this.$emit('sessionSonitem', newStr);
}
} else {
return this.$message({
message: '点击蓝色部分发送',
type: 'warning'
});
}
}
}
this.$emit('sessionSkip', false);
},
sonItemAskprogram1(event, itm, showPattern) {
const item = this.$t(itm)
if (showPattern) {
this.$emit('sessionSonitem', item);
} else {
// this.$emit('sessionSonitem', item);
if (!!(event.target)) {
if (!!(event.target.querySelector('.itemTemplatePattern'))) {
const content = event.target.querySelector('.itemTemplatePattern').innerText;
// .attributes.documentURI
const reg = new RegExp("XXX", "g");
const reg2 = new RegExp("句式 : ", "g");
const a = content.replace(reg, "");
// 句子句子句子句子句子句子句子
let delectvalue = a.replace(reg2, "");
const regex = /\((.*?)\)/g;
const matches = a.match(regex);
const result = matches.map(match => match.slice(1, -1));
// 数组数组数组数组数组数组数组数组数组
let inputValue = []
for (let i = 0; i < result.length; i++) {
inputValue.push(event.target.querySelector(`input[idData="${result[i]}"`).value)
}
if (inputValue[0] == '') {
this.$emit('sessionSonitem', item);
} else {
const newStr = this.replaceString(delectvalue, inputValue);
this.$emit('sessionSonitem', newStr);
}
} else {
return this.$message({
message: '点击蓝色部分发送',
type: 'warning'
});
}
}
}
this.$emit('sessionSkip', false);
},
// 点击跳转到通用问答
skipAskprogram() {
this.$emit('sessionSkip', false);
this.$emit('textarea', '')
},
// 将所有"XXXX"和括号内的内容改为蓝色并添加下划线
selectSpan() {
var generalTemplate = document.getElementById("generalTemplate");
var spans = generalTemplate.querySelectorAll("span");
// 将所有"XXXX"和括号内的内容改为蓝色并添加下划线
spans.forEach(function (span) {
span.innerHTML = span.innerHTML.replace(/(X|\(.*?\))/g, function (match) {
var emphasizedSpan = document.createElement("span");
emphasizedSpan.textContent = match;
emphasizedSpan.style.color = "#409EFF";
emphasizedSpan.style.textDecoration = "underline";
return emphasizedSpan.outerHTML;
});
});
}
}
}
</script>
<style lang="less" scoped>
.generalTemplate {
display: flex;
flex-direction: column;
width: 100%;
.sceneStyle {
display: flex;
flex-direction: row;
justify-content: flex-start;
/* 左对齐 */
flex-wrap: wrap;
/* 换行 */
.sonItem {
margin-left: 15px;
margin-top: 10px;
min-height: 160px;
/* 每个元素右间距设置为20px */
/* 计算每个元素的宽度:20px是前三个元素的间距(margin-right)和,除以4即为每个元素的宽度 */
width: calc((100% - 88px) / 4);
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.39);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
display: flex;
flex-direction: column;
.skipDirectly {
display: flex;
height: 160px;
flex-direction: column;
justify-content: center;
align-items: center;
.skip {
margin-top: 2px;
font-size: 20px;
font-weight: 550;
}
}
@keyframes scaleDraw {
/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
0% {
transform: scale(1);
/*开始为原始大小*/
}
25% {
transform: scale(1.1);
/*放大1.1倍*/
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.1);
}
}
.skipDirectly {
animation-name: scaleDraw;
-webkit-animation-name: scaleDraw;
/*关键帧名称*/
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
/*动画的速度曲线*/
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
/*动画播放的次数*/
animation-duration: 5s;
-webkit-animation-duration: 5s;
/*动画所花费的时间*/
/*可以简写为*/
// animation: scaleDraw 5s ease-in-out infinite;
// -webkit-animation: scaleDraw 5s ease-in-out infinite;
}
.editImage {
margin-right: 0;
margin-left: auto;
}
.itemScene {
margin: 0px 20px 25px 20px;
font-size: 16px;
}
.itemSentencePattern {
margin: 0px 20px 10px 20px;
font-size: 16px;
}
}
.sonItem:hover {
background-color: rgb(236, 245, 255);
transform: scale(1.05);
}
}
.templateStyle {
display: flex;
flex-direction: row;
justify-content: flex-start;
/* 左对齐 */
flex-wrap: wrap;
.sonItem {
margin-left: 15px;
min-height: 260px;
margin-top: 10px;
/* 每个元素右间距设置为20px */
/* 计算每个元素的宽度:20px是前三个元素的间距(margin-right)和,除以4即为每个元素的宽度 */
width: calc((100% - 88px) / 4);
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
display: flex;
flex-direction: column;
.editImage {
margin-right: 0;
margin-left: auto;
}
.itemTemplate {
margin: 0px 20px 25px 20px;
font-size: 16px;
}
.itemTemplatePattern {
margin: 0px 20px 10px 20px;
font-size: 16px;
}
}
.sonItem:hover {
background-color: rgb(236, 245, 255);
transform: scale(1.05);
}
}
}
.title {
font-weight: 600;
letter-spacing: 1px;
font-size: 17px;
}
.content {
letter-spacing: 2px;
font-size: 16px;
font-family: Helvetica;
}
</style>
generalAsk: {
clearChatlog: "清除聊天记录",
returnTemplate: "返回通用问答模板",
ObtainConcept: "获取某个基本概念",
explainTheApplication: "请解释XXX(关键字)在XXX(领域)中的应用或意义。",
Getskills: "获取一些实用技巧",
providePractical: "请提供XXX(数字)个在XXX(领域)中实用的XXX(技巧类型)",
GetGuidance: "获取指导意见",
provideSuggestions:
"作为一个XXX(身份),我想了解XXX(目标),请给我提供一些建议。",
Seekanswers: "有问题寻求答案",
solveIt: "在XXX(领域)中,我遇到了XXX(问题),请问如何解决?",
Findrelevantcases: "查找相关案例",
representativeCases: "请提供XXX(数字)个XXX(领域)中具有代表性的案例。",
Gettrends: "获取最新趋势和发展",
summarizetrends: "请概述XXX(领域)中近年来的最新趋势和主要发展。",
operationalProcedures: "询问操作步骤或流程",
brieflyDescribe: "请简要描述完成XXX(任务)所需要的操作步骤或流程。",
WorkSummary: "工作总结",
generateWorkSummary:
"我是XXX(个人情况),目前工作情况是XXX(基本信息),请帮我生成一份XXX(时间范围)的XXX(部门名称)工作总结,内容包括完成的任务、遇到的问题和解决方案。",
ProgressReport: "项目进展报告",
ProjectProgressReport:
"我是XXX(个人情况),当前项目的大致情况是XXX(基本信息),请为我撰写一份关于XXX(项目名称)的进展报告, 内容包括已完成的工作、未来的计划、以及可能的风险。",
DepartmentWeeklyReport: "部门周报",
WeeklyReport:
"我是XXX(个人情况),这周工作的大致情况是XXX(基本信息),请为我生成XXX(部门名称)上周的工作周报, 内容包括完成的任务、遇到的问题和解决方案。",
AnnualPerformanceReport: "年度业绩报告",
PerformanceReport:
"我是XXX(个人情况),今年的业绩情况是XXX(基本信息),请提供一份年度业绩报告,涉及营收、净利润、同比增长幅度等关键指标。",
startAI: "直接开始AI问答",
EditPhrasing: "点击编辑句式,根据提示问出你想要的问题,点击蓝色部分发送",
scene: "场景",
Phrasing: "句式 : ",
loadingText: '正在上传,请耐心等待...'
},