高级实例新增主次场景之分

yangyin

2024-10-14 6df54387fdb8a35f8e7276e1e4c949ac0097c514

 src/components/drawer/CustomDrawer.vue

@@ -32,17 +32,33 @@
               </div>
               <div class="mt20 w100 relative" v-show="state.customTagList.length > 0">
                  <div
                     class="overflow-hidden max-h-[36px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] m-[-5px]"
                     class="overflow-hidden max-h-[36px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] m-[-5px] items-center"
                     :class="{ 'set-expand-active': state.isShowExpand }"
                  >
                     <div class="text-[14px]">主场景:</div>
                     <div
                        v-for="item in state.customTagList"
                        :key="item.group_id"
                        v-for="(item, index) in state.customTagList"
                        :key="index"
                        :class="{ 'set-label-active': state.activeLabelName === item.group_id }"
                        @click="handleLabelClick(item)"
                        class="cursor-pointer m-[5px] py-[5px] pl-[10px] pr-[14px] rounded-xl border border-solid border-[#b2b2b2] bg-[#e0e7f] text-[#4c4c4c] transition-[background-color .1s, color .1s, border-color .1s]"
                     >
                        {{ item.group_name }}
                     </div>
                  </div>
                  <div
                     class="overflow-hidden max-h-[46px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] m-[-5px] items-center pt-2"
                     :class="{ 'set-expand-active': state.isShowExpand }"
                  >
                     <div class="text-[14px]">次场景:</div>
                     <div
                        v-for="(itemChildren, index) in state.customTagChildList"
                        :key="index"
                        :class="{ 'set-label-active': state.activeLabelChildName === itemChildren.group_id }"
                        @click="handleLabelChildClick(itemChildren)"
                        class="cursor-pointer m-[5px] py-[5px] pl-[10px] pr-[14px] rounded-xl border border-solid border-[#b2b2b2] bg-[#e0e7f] text-[#4c4c4c] transition-[background-color .1s, color .1s, border-color .1s]"
                     >
                        {{ itemChildren.group_name }}
                     </div>
                  </div>
                  <div class="bg-[#e0e7fb] absolute right-0 top-0 text-[#131313] w-[30px] h-[26px] cursor-pointer flex items-center">
@@ -134,7 +150,7 @@
import { getSectionList, getSelectSample, getUserTemplateList } from '/@/api/ai/chat';
import { useSearch } from '/@/hooks/useSearch';
import { activeRoomId, activeSampleId, activeSectionAId, sectionAList, setRoomConfig } from '/@/stores/chatRoom';
import { debounce } from '/@/utils/util';
import { convertListToTree, debounce } from '/@/utils/util';
let state = reactive({
   tabNameList: [
      { ID: 1, Name: '提问示例' },
@@ -142,7 +158,8 @@
   ],
   activeName: 1,

   activeLabelName: 'knowledge_base', //默认选择第一个
   activeLabelName: 'office_summarize', //默认选择第一个
   activeLabelChildName: '',
   activeInstructName: 'office_assistant', //默认选择第一个
   isShowExpand: false,
   useInstructDialog: false,
@@ -155,6 +172,7 @@
   listSampleExpand: false,
   listInstructExpand: false,
   customTagList: [],
   customTagChildList: [],
   customOfficeList: [],
});
const instructContentList = ref([]); //指令列表
@@ -165,7 +183,6 @@

const emit = defineEmits(['updateChatInput']);
const rightBox = computed(() => (isShow.value ? 354 : 0));

//获取模版列表
const getSelectListSample = async () => {
   state.listSampleLoading = true;
@@ -173,7 +190,6 @@
      state.listSampleLoading = false;
   });
   state.exampleRandomContent = res.samples;

   const array = [];
   res.samples.forEach((sample, index) => {
      sample.Icon = '/static/images/wave/ChatImg.png';
@@ -210,9 +226,20 @@
   state.activeName = item.ID;
   getTableData();
};
//标签点击事件(提问示例)
//标签点击事件(提问示例)  主场景
const handleLabelClick = (item) => {
   state.activeLabelName = item.group_id;
   state.customTagChildList = item.Children;
   if (item.Children.length > 0) {
      state.activeLabelChildName = item.Children[0].group_id ?? '';
   } else {
      state.activeLabelChildName = '';
      state.customTagChildList = [];
   }
};
//次场景
const handleLabelChildClick = (item) => {
   state.activeLabelChildName = item.group_id;
};
//标签点击事件(指令模板)
const handleInstructClick = (item) => {
@@ -301,8 +328,8 @@
const { query: querySample, queryData: showSampleList } = useSearch(exampleList, queryParams);
const debounceQuery = debounce(querySample);
const finalSampleList = computed(() => {
   const result = showSampleList.value.filter((item) => item.group_id == state.activeLabelName);
   return result;
   const result = showSampleList.value.filter((item) => item.group_id == state.activeLabelChildName);
   return result ?? [];
});
watch(
   () => queryParams.value.sample_title,
@@ -339,7 +366,12 @@
            officeList.push(item);
         }
      });
      state.customTagList = selectTagList;
      const treeTagList = convertListToTree(selectTagList, {
         ID: 'group_id',
         Children: 'Children',
         ParentID: 'p_group_id',
      });
      state.customTagList = treeTagList;
      state.customOfficeList = officeList;
   } else {
      state.customTagList = [];