From 013ba12301b81015e8023120a7ead3c646d4d28c Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期五, 05 七月 2024 17:41:18 +0800
Subject: [PATCH] fix: 修改应用场景详情

---
 src/views/project/ch/home/component/waterRight/center.vue |  108 ++++++++++++++++++++++++++---------------------------
 1 files changed, 53 insertions(+), 55 deletions(-)

diff --git a/src/views/project/ch/home/component/waterRight/center.vue b/src/views/project/ch/home/component/waterRight/center.vue
index 952529c..34a25d4 100644
--- a/src/views/project/ch/home/component/waterRight/center.vue
+++ b/src/views/project/ch/home/component/waterRight/center.vue
@@ -17,7 +17,7 @@
 				class="main_item flex items-center cursor-pointer"
 				v-for="(item, index) in state.exampleContent"
 				:key="index"
-				:class="{ main_item_active: item.sample_id === state.exampleIndex }"
+				:class="{ main_item_active: item.sample_id === activeSampleId }"
 				@click="changeExample(item)"
 			>
 				<div class="left flex items-center justify-center" :class="['color' + index]">
@@ -30,22 +30,24 @@
 			</div>
 		</div>
 		<el-drawer v-model="state.isShowAdvanceExample" direction="rtl" size="354">
-			<div class="box-border w100 bg-[#e0e7fb] relative flex items-center justify-center" style="padding: 30px 20px 26px">
-				<div
-					class="box-border flex w-[203px] h-[32px] rounded-md items-center justify-between cursor-pointer relative border border-solid border-[#2c2d33]"
-				>
+			<template #header style="padding: 30px 20px 26px">
+				<div class="box-border w100 bg-[#e0e7fb] relative flex items-center justify-center">
 					<div
-						class="tabbar-item"
-						:class="state.activeName === item.ID ? 'set-tabbar-active' : ''"
-						@click="handleTabClick(item)"
-						v-for="item in state.tabNameList"
-						:key="item.ID"
+						class="box-border flex w-[203px] h-[32px] rounded-md items-center justify-between cursor-pointer relative border border-solid border-[#2c2d33]"
 					>
-						{{ item.Name }}
+						<div
+							class="tabbar-item"
+							:class="state.activeName === item.ID ? 'set-tabbar-active' : ''"
+							@click="handleTabClick(item)"
+							v-for="item in state.tabNameList"
+							:key="item.ID"
+						>
+							{{ item.Name }}
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" style="height: calc(100% - 88px)" v-show="state.activeName == 1">
+			</template>
+			<div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" v-show="state.activeName == 1">
 				<div class="flex flex-col w100 h100 pt-0 pr-[15px] pb-0 pl-[20px] overflow-auto">
 					<div class="flex items-center w100 h-[30px] border border-solid border-[#b2b2b2] transition-[border-color 1s] rounded-2xl">
 						<el-input v-model="state.searchInput" placeholder="鎼滅储鏇村" class="set-input" :prefix-icon="Search"> </el-input>
@@ -88,7 +90,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" style="height: calc(100% - 88px)" v-show="state.activeName == 2">
+			<div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" v-show="state.activeName == 2">
 				<div class="flex flex-col w100 h100 pt-0 pr-[15px] pb-0 pl-[20px] overflow-auto">
 					<div class="flex items-center w100 h-[30px] border border-solid border-[#b2b2b2] transition-[border-color 1s] rounded-2xl">
 						<el-input v-model="state.searchInput" placeholder="鎼滅储鏇村" class="set-input" :prefix-icon="Search"> </el-input>
@@ -113,18 +115,18 @@
 							<i class="iconfont icon-zhongduancanshu" title="鏀剁缉" @click="handleExpandClick(2)" v-show="state.isShowExpand"></i>
 						</div>
 						<div class="mt20 w100">
-							<div class="w100 pb-[20px] flex overflow-auto flex-col" v-for="item in state.instructContentList" :key="item.ID">
+							<div
+								class="w100 pb-[20px] flex overflow-auto flex-col"
+								v-for="item in state.instructContentList"
+								:key="item.template_id"
+							>
 								<div class="bg-[#f5f7fd] p-[12px] transition-[background-color .2s] flex flex-col rounded-2xl">
 									<div class="flex justify-between">
-										<span class="set-title">{{ item.Title }}</span>
+										<span class="set-title">{{ item.template_title }}</span>
 									</div>
-									<div class="example-body ellipsis">{{ item.Content }}</div>
+									<div class="example-body ellipsis">{{ item.template_value }}</div>
 									<div class="example-bottom">
-										<div class="flex w-[190px] items-center flex-nowrap">
-											<div v-for="exampleItem in item.exampleBottomList" :key="item.ID">
-												<span class="example-item">{{ exampleItem }}</span>
-											</div>
-										</div>
+										<span class="example-item">{{ item.template_type }}</span>
 										<el-button type="primary" class="set-button">浣跨敤</el-button>
 									</div>
 								</div>
@@ -139,8 +141,10 @@
 
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue';
-import { onMounted, reactive, computed } from 'vue';
-import { getSelectSample } from '/@/api/ai/chat';
+import { computed, onMounted, reactive } from 'vue';
+import { getSelectSample, getUserTemplateList } from '/@/api/ai/chat';
+import { activeSampleId } from '/@/stores/chatRoom';
+import emitter from '/@/utils/mitt';
 let state = reactive({
 	exampleContent: [],
 	exampleRandomContent: [],
@@ -148,7 +152,6 @@
 		{ ID: 1, Name: '鎻愰棶绀轰緥' },
 		{ ID: 2, Name: '鎸囦护妯℃澘' },
 	],
-	exampleIndex: 0,
 	isShowAdvanceExample: false,
 	activeName: 1,
 	searchInput: '',
@@ -221,34 +224,7 @@
 		},
 	],
 	exampleContentList: [],
-	instructContentList: [
-		{
-			ID: 1,
-			Title: '璇█妫�娴嬪櫒',
-			Content:
-				'鎴戝笇鏈涗綘鍏呭綋璇█妫�娴嬪櫒銆傛垜浼氱敤浠讳綍璇█杈撳叆涓�涓彞瀛愶紝浣犱細鍥炵瓟鎴戯紝鎴戝啓鐨勫彞瀛愭槸鐢ㄥ摢绉嶈瑷�鍐欑殑銆備笉瑕佸啓浠讳綍瑙i噴鎴栧叾浠栨枃瀛楋紝鍙渶鍥炲璇█鍚嶇О鍗冲彲',
-			exampleBottomList: ['鏂囧鏋勬��', '璇█缈昏瘧', '楂樻晥绛栧垝'],
-		},
-		{
-			ID: 2,
-			Title: '澶栬缁冧範',
-			Content: '鎴戜細鐢ㄨ嫳璇拰浣犺璇濓紝浣犱細鐢ㄨ嫳璇洖澶嶆垜鏉ョ粌涔犳垜鐨勮嫳璇彛璇�傛垜甯屾湜鎮ㄧ殑鍥炲',
-			exampleBottomList: ['鏂囧鏋勬��', '鑹烘湳鍒涗綔', '鍙戠幇鎺㈢储'],
-		},
-		{
-			ID: 3,
-			Title: '鎴戞兂璁╀綘鍏呭綋鑻辫',
-			Content: '鎴戜細鐢ㄤ换浣曡瑷�涓庝綘浜よ皥锛屼綘浼氭娴嬭瑷�锛岀炕璇戝畠骞剁敤鎴戠殑鏂囨湰鐨勬洿姝e拰鏀硅繘鐗堟湰鐢ㄨ嫳璇洖绛斻�傛垜甯屾湜浣犵敤',
-			exampleBottomList: ['鏂囧鏋勬��', '椤鹃棶涓撳', '鑱屽満鍔╂墜'],
-		},
-		{
-			ID: 4,
-			Title: '澶氳缈昏瘧',
-			Content:
-				'鎴戣姹備綘鎵紨涓�鍚嶄笓涓氱殑璇戣�呫�佹嫾鍐欑籂姝h�呮垨鏂囨湰浼樺寲鑰呯殑瑙掕壊銆傛垜灏嗙敤鍚勭璇█涓庝綘浜ゆ祦锛屼綘鍒欓渶瑕佺敤瀵瑰簲鐨勮瑷�鍦ㄦ垜鐨勬枃鏈繘琛屼慨姝e拰浼樺寲鐗堟湰銆備綘鐨勫洖绛斾粎闄愪簬淇鍜屼紭鍖栵紝涓嶅寘鎷叾浠栧唴瀹癸紝涔熶笉闇�瑕佹彁渚涜В閲娿�傚湪淇濊瘉缈昏瘧璐ㄩ噺鐨勫墠鎻愪笅锛屼綘鐨勫洖绛斿簲灏藉彲鑳界畝娲併�傛垜鐨勯鍙ヨ瘽鏄細',
-			exampleBottomList: ['鏂囧鏋勬��', '璇█缈昏瘧'],
-		},
-	],
+	instructContentList: [],
 
 	activeLabelName: 0,
 	activeInstructName: 0,
@@ -256,6 +232,7 @@
 });
 onMounted(() => {
 	getSelectListSample();
+	getUserTemplate();
 });
 const groupedArray = computed(() => {
 	const groups = [];
@@ -285,7 +262,13 @@
 };
 
 const changeExample = (item) => {
-	state.exampleIndex = item.sample_id;
+	emitter.emit('updateChatInput', item.sample_question);
+	activeSampleId.value = item.sample_id;
+};
+//鑾峰彇鐢ㄦ埛妯℃澘
+const getUserTemplate = async () => {
+	const res = await getUserTemplateList();
+	state.instructContentList = res.templates;
 };
 //鎹竴鎵�
 const batchChange = () => {
@@ -309,7 +292,7 @@
 const handleInstructClick = (item) => {
 	state.activeInstructName = item.ID;
 };
-//鎼滅储
+
 //灞曞紑鏀惰捣
 const handleExpandClick = (type) => {
 	if (type == 1) {
@@ -525,4 +508,19 @@
 		cursor: pointer;
 	}
 }
+:deep(.el-drawer__header) {
+	padding: 30px 20px 26px !important;
+	box-sizing: border-box;
+	width: 100%;
+	background-color: #e0e7fb;
+
+	position: relative;
+
+	height: unset !important;
+	margin-bottom: unset !important;
+	border-bottom: unset !important;
+}
+:deep(.el-drawer__body) {
+	overflow-x: hidden;
+}
 </style>

--
Gitblit v1.9.3