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