From 0b238cbcce972e907fb2f6864e5f0c2772aeba0c Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 15 七月 2024 14:44:51 +0800
Subject: [PATCH] Merge branch 'master' of http://47.103.154.90:83/r/WI/Web.V1.0

---
 src/views/project/ch/home/component/waterRight/center.vue |  431 ++++++++++++++++++++++++++++-------------------------
 1 files changed, 228 insertions(+), 203 deletions(-)

diff --git a/src/views/project/ch/home/component/waterRight/center.vue b/src/views/project/ch/home/component/waterRight/center.vue
index ed3b2ba..6f9f6bb 100644
--- a/src/views/project/ch/home/component/waterRight/center.vue
+++ b/src/views/project/ch/home/component/waterRight/center.vue
@@ -7,7 +7,7 @@
 				<span class="change cursor-pointer" @click="advanceExampleClick">楂樼骇绀轰緥 ></span>
 			</div>
 			<div class="cursor-pointer">
-				<span class="mr-1 changeBatch">鎹竴鎵�</span>
+				<span class="mr-1 changeBatch" @click="batchChange">鎹竴鎵�</span>
 				<i class="iconfont icon-shuaxin"></i>
 			</div>
 		</div>
@@ -16,165 +16,165 @@
 			<div
 				class="main_item flex items-center cursor-pointer"
 				v-for="(item, index) in state.exampleContent"
-				:key="item.ID"
-				:class="{ main_item_active: item.ID === state.exampleIndex }"
+				:key="index"
+				:class="{ main_item_active: item.sample_id === activeSampleId }"
 				@click="changeExample(item)"
 			>
 				<div class="left flex items-center justify-center" :class="['color' + index]">
 					<img :src="item.Icon" alt="" />
 				</div>
 				<div class="right">
-					<h4>{{ item.Title }}</h4>
-					<p>{{ item.Content }}</p>
+					<h4>{{ item.sample_title }}</h4>
+					<p>{{ item.sample_question }}</p>
 				</div>
 			</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]"
-				>
-					<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 class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" style="height: calc(100% - 88px)" 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>
-					</div>
-					<div class="mt20 w100 relative">
+		<div class="custom-drawer">
+			<el-drawer v-model="state.isShowAdvanceExample" direction="rtl" size="354">
+				<template #header style="padding: 30px 20px 26px">
+					<div class="box-border w100 bg-[#e0e7fb] relative flex items-center justify-center">
 						<div
-							class="overflow-hidden max-h-[36px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] m-[-5px]"
-							:class="{ 'set-expand-active': state.isShowExpand }"
+							class="box-border flex w-[203px] h-[32px] rounded-md items-center justify-between cursor-pointer relative border border-solid border-[#2c2d33]"
 						>
 							<div
-								v-for="item in state.exampleTabList"
+								class="tabbar-item"
+								:class="state.activeName === item.ID ? 'set-tabbar-active' : ''"
+								@click="handleTabClick(item)"
+								v-for="item in state.tabNameList"
 								:key="item.ID"
-								:class="{ 'set-label-active': state.activeLabelName === item.ID }"
-								@click="handleLabelClick(item)"
-								class="cursor-pointer m-[5px] py-[5px] px-[10px] rounded-xl border border-solid border-[#b2b2b2] bg-[#e0e7f] text-[#4c4c4c] transition-[background-color .1s, color .1s, border-color .1s]"
 							>
-								{{ item.Title }}
+								{{ item.Name }}
 							</div>
 						</div>
-						<div class="bg-[#e0e7fb] absolute right-0 top-0 text-[#131313] w-[30px] h-[26px] cursor-pointer flex items-center">
-							<i class="iconfont icon-bolangneng" title="灞曞紑" @click="handleExpandClick(1)" v-show="!state.isShowExpand"></i>
-							<i class="iconfont icon-zhongduancanshu" title="鏀剁缉" @click="handleExpandClick(2)" v-show="state.isShowExpand"></i>
+					</div>
+				</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="queryParams.sample_title" placeholder="鎼滅储鏇村" class="set-input" :prefix-icon="Search" clearable>
+							</el-input>
 						</div>
-						<div class="mt20 w100">
-							<div class="w100 pb-[20px]" v-for="item in state.exampleContentList" :key="item.ID">
-								<div class="cursor-pointer flex box-border p-[12px] w100 rounded bg-[#f5f7fd] transition-[background-color .2s]">
-									<i
-										class="iconfont icon-chazhaobiaodanliebiao pl-[2px] w-[16px] h-[16px] font12 text-[#fff] transform-[scale(.85)] rounded-[50%]"
-										:style="`background-color:${item.BgColor}`"
-									></i>
-									<div class="ml-6 flex-1 min-w-0">
-										<div class="text-sm text-[#000] m-0 p-0 font-bold">{{ item.Title }}</div>
-										<div class="mt-[6px] text-[13px] text-[#666] h-[20px] whitespace-nowrap text-ellipsis overflow-hidden">
-											{{ item.Content }}
-										</div>
-									</div>
+						<div class="mt20 w100 relative">
+							<div
+								class="overflow-hidden max-h-[36px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] m-[-5px]"
+								:class="{ 'set-expand-active': state.isShowExpand }"
+							>
+								<div
+									v-for="item in state.exampleTabList"
+									:key="item.ID"
+									:class="{ 'set-label-active': state.activeLabelName === item.ID }"
+									@click="handleLabelClick(item)"
+									class="cursor-pointer m-[5px] py-[5px] px-[10px] rounded-xl border border-solid border-[#b2b2b2] bg-[#e0e7f] text-[#4c4c4c] transition-[background-color .1s, color .1s, border-color .1s]"
+								>
+									{{ item.Title }}
 								</div>
 							</div>
-						</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 == 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>
-					</div>
-					<div class="mt20 w100 relative">
-						<div
-							class="overflow-hidden max-h-[36px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] m-[-5px]"
-							:class="{ 'set-expand-active': state.isShowExpand }"
-						>
-							<div
-								v-for="item in state.instructList"
-								:key="item.ID"
-								:class="{ 'set-label-active': state.activeInstructName === item.ID }"
-								@click="handleInstructClick(item)"
-								class="cursor-pointer m-[5px] py-[5px] px-[10px] rounded-xl border border-solid border-[#b2b2b2] bg-[#e0e7f] text-[#4c4c4c] transition-[background-color .1s, color .1s, border-color .1s]"
-							>
-								{{ item.Title }}
+							<div class="bg-[#e0e7fb] absolute right-0 top-0 text-[#131313] w-[30px] h-[26px] cursor-pointer flex items-center">
+								<i class="iconfont icon-bolangneng" title="灞曞紑" @click="handleExpandClick(1)" v-show="!state.isShowExpand"></i>
+								<i class="iconfont icon-zhongduancanshu" title="鏀剁缉" @click="handleExpandClick(2)" v-show="state.isShowExpand"></i>
 							</div>
-						</div>
-						<div class="bg-[#e0e7fb] absolute right-0 top-0 text-[#131313] w-[30px] h-[26px] cursor-pointer flex items-center">
-							<i class="iconfont icon-bolangneng" title="灞曞紑" @click="handleExpandClick(1)" v-show="!state.isShowExpand"></i>
-							<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="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>
-									</div>
-									<div class="example-body ellipsis">{{ item.Content }}</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 class="mt20 w100">
+								<div class="w100 pb-[20px]" v-for="item in queryData" :key="item.sample_id">
+									<div
+										class="cursor-pointer flex box-border p-[12px] w100 rounded bg-[#f5f7fd] transition-[background-color .2s]"
+										@click="changeExample(item)"
+									>
+										<i
+											class="iconfont icon-chazhaobiaodanliebiao pl-[2px] w-[16px] h-[16px] font12 text-[#fff] transform-[scale(.85)] rounded-[50%]"
+											:style="`background-color:${item.BgColor}`"
+										></i>
+										<div class="ml-6 flex-1 min-w-0">
+											<div class="text-sm text-[#000] m-0 p-0 font-bold">{{ item.sample_title }}</div>
+											<div class="mt-[6px] text-[13px] text-[#666] h-[20px] whitespace-nowrap text-ellipsis overflow-hidden">
+												{{ item.sample_question }}
 											</div>
 										</div>
-										<el-button type="primary" class="set-button">浣跨敤</el-button>
 									</div>
 								</div>
 							</div>
 						</div>
 					</div>
 				</div>
-			</div>
-		</el-drawer>
+				<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="instructParams.template_title"
+								placeholder="鎼滅储鏇村"
+								class="set-input"
+								:prefix-icon="Search"
+								clearable
+							>
+							</el-input>
+						</div>
+						<div class="mt20 w100 relative">
+							<div
+								class="overflow-hidden max-h-[36px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] m-[-5px]"
+								:class="{ 'set-expand-active': state.isShowExpand }"
+							>
+								<div
+									v-for="item in state.instructList"
+									:key="item.ID"
+									:class="{ 'set-label-active': state.activeInstructName === item.ID }"
+									@click="handleInstructClick(item)"
+									class="cursor-pointer m-[5px] py-[5px] px-[10px] rounded-xl border border-solid border-[#b2b2b2] bg-[#e0e7f] text-[#4c4c4c] transition-[background-color .1s, color .1s, border-color .1s]"
+								>
+									{{ item.Title }}
+								</div>
+							</div>
+							<div class="bg-[#e0e7fb] absolute right-0 top-0 text-[#131313] w-[30px] h-[26px] cursor-pointer flex items-center">
+								<i class="iconfont icon-bolangneng" title="灞曞紑" @click="handleExpandClick(1)" v-show="!state.isShowExpand"></i>
+								<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 showInstructList" :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.template_title }}</span>
+										</div>
+										<div class="example-body ellipsis">{{ item.template_value }}</div>
+										<div class="example-bottom">
+											<span class="example-item">{{ item.template_type }}</span>
+											<el-button type="primary" class="set-button" @click="templateUseClick(item)">浣跨敤</el-button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</el-drawer>
+		</div>
+		<el-dialog v-model="state.useInstructDialog" :title="state.instructInfo?.template_title" width="500" :before-close="handleClose">
+			<el-input v-model="state.inputInstruct" :rows="10" type="textarea"></el-input>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="handleClose">鍙栨秷</el-button>
+					<el-button type="primary" @click="submitInstruct"> 纭 </el-button>
+				</div>
+			</template>
+		</el-dialog>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue';
-import { onMounted, reactive } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { getSelectSample, getUserTemplateList } from '/@/api/ai/chat';
+import { activeRoomId, activeSampleId, roomConfig, setRoomConfig } from '/@/stores/chatRoom';
+import emitter from '/@/utils/mitt';
+import { useSearch } from '/@/hooks/useSearch';
+import { debounce, getRecentDateRange } from '/@/utils/util';
+
 let state = reactive({
-	exampleContent: [
-		{
-			ID: 1,
-			Icon: '/static/images/wave/ChatImg.png',
-			Title: '瑙h鏉庡洓鐨勫弽搴�',
-			Content: '寮犱笁鎵撲簡鏉庡洓涓�宸存帉,鏉庡洓瀵瑰紶涓夎:"浣犳槸涓嶆槸娌″悆楗�",鏉庡洓璇磋繖鍙ヨ瘽鍚箟鏄�?',
-		},
-		{
-			ID: 2,
-			Icon: '/static/images/wave/ChatImg.png',
-			Title: '瑙i噴鍔姏涓庡唴鍗风殑鍖哄埆',
-			Content: '鎬庝箞瑙i噴鍔姏鍜屽唴鍗风殑鍖哄埆?',
-		},
-		{
-			ID: 3,
-			Icon: '/static/images/wave/ChatImg.png',
-			Title: '鍏朵粬闂',
-			Content: '璇锋悳绱綘鎯崇煡閬撶殑闂',
-		},
-		{
-			ID: 4,
-			Icon: '/static/images/wave/ChatImg.png',
-			Title: '缁欏疂瀹濆彇鏈夋枃鍖栧唴娑电殑鍚嶅瓧',
-			Content: '璇蜂互璇楃粡涓殑鍏告晠缁欑敺瀹濆疂鍙栧悕锛屽椤撅紝鍚嶅瓧瑕佹眰3涓瓧锛岀粰5涓悕瀛椾緵鎴戦�夋嫨銆�',
-		},
-	],
+	exampleContent: [],
+	exampleRandomContent: [],
 	tabNameList: [
 		{ ID: 1, Name: '鎻愰棶绀轰緥' },
 		{ ID: 2, Name: '鎸囦护妯℃澘' },
 	],
-	exampleIndex: 0,
 	isShowAdvanceExample: false,
 	activeName: 1,
-	searchInput: '',
 	exampleTabList: [
 		{
 			ID: 1,
@@ -243,96 +243,62 @@
 			Title: '鍙戠幇鎺㈢储',
 		},
 	],
-	exampleContentList: [
-		{
-			ID: 1,
-			Title: '濡備綍鎻愬崌鑷繁鐨勮亴鍦虹珵浜夊姏锛�',
-			Content:
-				'鑱屽満绔炰簤鍔涙槸琛¢噺涓�涓汉鏄惁鎴愬姛鐨勯噸瑕佹爣鍑嗐�傝亴鍦虹珵浜夊姏鐨勬彁鍗囷紝闇�瑕侀暱鏈熺殑鍔姏鍜屽潥鎸併�備笅闈㈡槸涓�浜涙彁鍗囪亴鍦虹珵浜夊姏鐨勬柟娉曪細1. 淇濇寔涓撴敞锛氫笓娉ㄤ簬鑷繁鐨勫伐浣滐紝涓嶆柇瀛︿範鏂版妧鑳斤紝鎻愬崌鎶�鑳芥按骞炽��2. 淇濇寔瀛︿範锛氫笉鏂涔犳柊鐭ヨ瘑锛屼笉鏂彁鍗囪嚜宸辩殑涓撲笟鐭ヨ瘑銆�3. 淇濇寔鐑儏锛氫繚鎸佺Н鏋佸悜涓婄殑蹇冩�侊紝涓嶆柇杩芥眰鏂颁簨鐗┿��4. 淇濇寔閫傚綋鐨勪紤鎭細閫傚綋鐨勪紤鎭彲浠ヨ韬綋鏇村姞鍋ュ悍锛屾彁楂樺伐浣滄晥鐜囥��5. 淇濇寔绉瀬鐨勬�佸害锛氱Н鏋佺殑鎬佸害鍙互婵�鍙戝憳宸ョ殑鍒涢�犲姏锛屾彁鍗囧伐浣滅殑绉瀬鎬с��',
-		},
-		{
-			ID: 2,
-			Title: '鐖辨姢鍔ㄧ墿瑙嗛鍓ф湰',
-			Content: '璇锋媴浠荤紪鍓э紝鎴戦渶瑕佹媿鎽勪竴涓叧浜庣埍鎶ゅ姩鐗╃殑瑙嗛锛岃缁欐垜鐢熸垚鎷嶆憚鍐呭鍜岃剼鏈�',
-		},
-		{
-			ID: 3,
-			Title: '娉㈢矑浜岃薄鎬�',
-			Content: '瑙i噴涓�涓嬫尝绮掍簩璞℃�х悊璁�',
-		},
-		{
-			ID: 4,
-			Title: '濡備綍鎻愬崌鑷繁鐨勮亴鍦虹珵浜夊姏锛�',
-			Content:
-				'鑱屽満绔炰簤鍔涙槸琛¢噺涓�涓汉鏄惁鎴愬姛鐨勯噸瑕佹爣鍑嗐�傝亴鍦虹珵浜夊姏鐨勬彁鍗囷紝闇�瑕侀暱鏈熺殑鍔姏鍜屽潥鎸併�備笅闈㈡槸涓�浜涙彁鍗囪亴鍦虹珵浜夊姏鐨勬柟娉曪細1. 淇濇寔涓撴敞锛氫笓娉ㄤ簬鑷繁鐨勫伐浣滐紝涓嶆柇瀛︿範鏂版妧鑳斤紝鎻愬崌鎶�鑳芥按骞炽��2. 淇濇寔瀛︿範锛氫笉鏂涔犳柊鐭ヨ瘑锛屼笉鏂彁鍗囪嚜宸辩殑涓撲笟鐭ヨ瘑銆�3. 淇濇寔鐑儏锛氫繚鎸佺Н鏋佸悜涓婄殑蹇冩�侊紝涓嶆柇杩芥眰鏂颁簨鐗┿��4. 淇濇寔閫傚綋鐨勪紤鎭細閫傚綋鐨勪紤鎭彲浠ヨ韬綋鏇村姞鍋ュ悍锛屾彁楂樺伐浣滄晥鐜囥��5. 淇濇寔绉瀬鐨勬�佸害锛氱Н鏋佺殑鎬佸害鍙互婵�鍙戝憳宸ョ殑鍒涢�犲姏锛屾彁鍗囧伐浣滅殑绉瀬鎬с��',
-		},
-		{
-			ID: 5,
-			Title: '鎸戦�夊悎閫傜殑绀肩墿',
-			Content: '璇峰コ瀹㈡埛鍚冮キ锛屽噯澶囬�佷竴涓皬绀肩墿锛岄�変粈涔堢ぜ鐗╁悎閫傚憿',
-		},
-		{
-			ID: 6,
-			Title: '瑙f柟绋媥虏-y虏=49',
-			Content: '姝f暣鏁皒,y婊¤冻x^2-y^2=49锛屾眰x鍜寉鐨勫��',
-		},
-		{
-			ID: 7,
-			Title: '璁$畻鐞冧綋浣撶Н',
-			Content: '璁$畻鐞冧綋浣撶Н',
-		},
-		{
-			ID: 8,
-			Title: '鐖辨姢鍔ㄧ墿瑙嗛鍓ф湰',
-			Content: '璇锋媴浠荤紪鍓э紝鎴戦渶瑕佹媿鎽勪竴涓叧浜庣埍鎶ゅ姩鐗╃殑瑙嗛锛岃缁欐垜鐢熸垚鎷嶆憚鍐呭鍜岃剼鏈�',
-		},
-		{
-			ID: 9,
-			Title: '璇楁剰缈昏瘧锛氭棩鏈堜笌鐖�',
-			Content: '缈昏瘧涓鸿嫳鏂囷細娴笘涓囧崈锛屽惥鐖辨湁涓夛紝鏃ャ�佹湀銆佸嵖锛屾棩涓烘湞锛屾湀涓烘毊锛屽嵖涓烘湞鏈濇毊鏆��',
-		},
-	],
-	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: ['鏂囧鏋勬��', '璇█缈昏瘧'],
-		},
-	],
-
 	activeLabelName: 0,
 	activeInstructName: 0,
 	isShowExpand: false,
+	useInstructDialog: false,
+	instructInfo: {},
+	inputInstruct: '', //鍙慨鏀规寚浠�
 });
+const exampleList = ref([]); //妯$増鍒楄〃
+const instructContentList = ref([]); //鎸囦护鍒楄〃
+
 onMounted(() => {
-	state.exampleContentList.forEach((item) => {
-		item.BgColor = randomHexColor();
-	});
+	getSelectListSample();
+	getUserTemplate();
 });
+const groupedArray = computed(() => {
+	const groups = [];
+	let i = 0;
+	while (state.exampleRandomContent.length > i) {
+		groups.push(state.exampleRandomContent.slice(i, (i += 4)));
+	}
+	return groups;
+});
+//鑾峰彇妯$増鍒楄〃
+const getSelectListSample = async () => {
+	const res = await getSelectSample({
+		section_b_id: '',
+	});
+	// console.log(res, 63);
+	state.exampleRandomContent = res.samples;
+
+	const array = [];
+	res.samples.forEach((sample, index) => {
+		sample.Icon = '/static/images/wave/ChatImg.png';
+		sample.BgColor = randomHexColor();
+		if (index < 4) {
+			array.push(sample);
+		}
+	});
+	exampleList.value = res.samples;
+	state.exampleContent = array;
+};
 
 const changeExample = (item) => {
-	state.exampleIndex = item.ID;
+	emitter.emit('updateChatInput', item.sample_question);
+	setRoomConfig(activeRoomId.value,'isAnswerByLLM',false);
+	activeSampleId.value = item.sample_id;
+};
+//鑾峰彇鐢ㄦ埛妯℃澘
+const getUserTemplate = async () => {
+	const res = await getUserTemplateList();
+	instructContentList.value = res.templates;
+};
+//鎹竴鎵�
+const batchChange = () => {
+	const index = Math.floor(Math.random() * groupedArray.value.length);
+	state.exampleContent = groupedArray.value[index];
 };
 //楂樼骇绀轰緥
 const advanceExampleClick = () => {
@@ -350,7 +316,7 @@
 const handleInstructClick = (item) => {
 	state.activeInstructName = item.ID;
 };
-//鎼滅储
+
 //灞曞紑鏀惰捣
 const handleExpandClick = (type) => {
 	if (type == 1) {
@@ -365,6 +331,50 @@
 		.toString(16)
 		.padEnd(6, '0')}`;
 };
+//#region ====================== templateUseClick ======================
+const templateUseClick = (row) => {
+	state.useInstructDialog = true;
+	state.instructInfo = row;
+	state.inputInstruct = row.template_value;
+};
+const handleClose = () => {
+	state.useInstructDialog = false;
+};
+const submitInstruct = () => {
+	setRoomConfig(activeRoomId.value,'isAnswerByLLM',true);
+	emitter.emit('updateChatInput', state.inputInstruct);
+	handleClose();
+};
+//#endregion
+//#region ====================== 鎼滅储妯℃澘/鎸囦护 ======================
+const queryParams = ref({
+	sample_title: '',
+});
+const { query, queryData } = useSearch(exampleList, queryParams);
+
+const debounceQuery = debounce(query);
+
+watch(
+	() => queryParams.value.sample_title,
+	(val) => {
+		debounceQuery();
+	}
+);
+//鎸囦护
+const instructParams = ref({
+	template_title: '',
+});
+const { query: queryInstruct, queryData: showInstructList } = useSearch(instructContentList, instructParams);
+
+const instructQuery = debounce(queryInstruct);
+
+watch(
+	() => instructParams.value.template_title,
+	(val) => {
+		instructQuery();
+	}
+);
+//#endregion
 </script>
 <style scoped lang="scss">
 .pc-prompts {
@@ -566,4 +576,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