| | |
| | | <template> |
| | | <div class="relative h100" :style="`width: ${rightBox}px;transition: 0.7s ease-in;`"> |
| | | <div class="relative h100" v-loading="loadingData" :style="`width: ${rightBox}px;transition: 0.7s ease-in;`"> |
| | | <div class="retract_icon" @click="toggleShow"> |
| | | <i class="text-[#fff] transition-all" :class="isShow ? 'ywicon icon-zuoyoujiantou1' : 'ywicon icon-zuoyoujiantou'"></i> |
| | | </div> |
| | |
| | | <script setup lang="ts"> |
| | | import { Search } from '@element-plus/icons-vue'; |
| | | import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue'; |
| | | import { getSelectSample, getUserTemplateList } from '/@/api/ai/chat'; |
| | | import { getSectionList, getSelectSample, getUserTemplateList } from '/@/api/ai/chat'; |
| | | import { useSearch } from '/@/hooks/useSearch'; |
| | | import { activeRoomId, activeSampleId, sectionAList, setRoomConfig } from '/@/stores/chatRoom'; |
| | | import { debounce } from '/@/utils/util'; |
| | |
| | | state.isShowExpand = false; |
| | | } |
| | | }; |
| | | const toggleShow = () => { |
| | | const toggleShow = async() => { |
| | | isShow.value = !isShow.value; |
| | | if (!isShow.value) { |
| | | loadingData.value = true |
| | | await getMainSectionList().finally(()=>{ |
| | | loadingData.value = false; |
| | | }); |
| | | |
| | | getTableData(); |
| | | } |
| | | }; |
| | | const getTableData = () => { |
| | | if (state.activeName == 1) { |
| | | if (state.listSampleExpand) return; |
| | | getSelectListSample(); |
| | | state.listSampleExpand = true; |
| | | } |
| | | if (state.activeName == 2) { |
| | | if (state.listInstructExpand) return; |
| | | getUserTemplate(); |
| | | state.listInstructExpand = true; |
| | | const getMainSectionList = async () => { |
| | | const res = await getSectionList(); |
| | | const iconList = [ |
| | | 'biaodan', |
| | | 'putong', |
| | | 'zhongduancanshuchaxun', |
| | | 'shidu', |
| | | 'fuwenbenkuang', |
| | | 'fuwenben', |
| | | 'jiliandongxuanzeqi', |
| | | 'jinridaiban', |
| | | 'gongju', |
| | | ]; |
| | | res.sections.forEach((sectionItem, index) => { |
| | | sectionItem.Icon = iconList[index]; |
| | | }); |
| | | sectionAList.value = res.sections; |
| | | }; |
| | | const loadingData = ref(false); |
| | | const getTableData = async () => { |
| | | loadingData.value = true; |
| | | |
| | | try { |
| | | if (state.activeName == 1) { |
| | | if (state.listSampleExpand) return; |
| | | await getSelectListSample(); |
| | | state.listSampleExpand = true; |
| | | } |
| | | if (state.activeName == 2) { |
| | | if (state.listInstructExpand) return; |
| | | await getUserTemplate(); |
| | | state.listInstructExpand = true; |
| | | } |
| | | } finally { |
| | | loadingData.value = false; |
| | | } |
| | | }; |
| | | //关闭高级示例 |
| | |
| | | const { query: querySample, queryData: showSampleList } = useSearch(exampleList, queryParams); |
| | | const debounceQuery = debounce(querySample); |
| | | const finalSampleList = computed(() => { |
| | | return showSampleList.value.filter((item) => item.section_a_id == state.activeLabelName); |
| | | const result = showSampleList.value.filter((item) => item.section_a_id == state.activeLabelName); |
| | | return result; |
| | | }); |
| | | |
| | | watch( |