问答模板测试

<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: '正在上传，请耐心等待...'
	},