fix: 修改高级示例

yangyin

2024-07-22 9858689def164c9959e7e9cba2f56a9ba69681c7

 src/components/drawer/CustomDrawer.vue

@@ -30,13 +30,13 @@
                  <el-input v-model="queryParams.sample_title" placeholder="搜索更多" class="set-input" :prefix-icon="Search" clearable>
                  </el-input>
               </div>
               <div class="mt20 w100 relative" v-show="customTagList.length > 0">
               <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="{ 'set-expand-active': state.isShowExpand }"
                  >
                     <div
                        v-for="item in customTagList"
                        v-for="item in state.customTagList"
                        :key="item.section_id"
                        :class="{ 'set-label-active': state.activeLabelName === item.section_id }"
                        @click="handleLabelClick(item)"
@@ -50,7 +50,7 @@
                     <i class="iconfont icon-zhongduancanshu" title="收缩" @click="handleExpandClick(2)" v-show="state.isShowExpand"></i>
                  </div>
                  <div class="mt20 w100">
                     <div class="w100 pb-[20px]" v-for="item in showSampleList" :key="item.sample_id">
                     <div class="w100 pb-[20px]" v-for="item in finalSampleList" :key="item.sample_id">
                        <div
                           class="cursor-pointer flex box-border p-[12px] w100 rounded bg-[#f5f7fd] transition-[background-color .2s]"
                           @click="changeExample(item)"
@@ -77,13 +77,13 @@
                  <el-input v-model="instructParams.template_title" placeholder="搜索更多" class="set-input" :prefix-icon="Search" clearable>
                  </el-input>
               </div>
               <div class="mt20 w100 relative" v-show="customOfficeList.length > 0">
               <div class="mt20 w100 relative" v-show="state.customOfficeList.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="{ 'set-expand-active': state.isShowExpand }"
                  >
                     <div
                        v-for="item in customOfficeList"
                        v-for="item in state.customOfficeList"
                        :key="item.section_id"
                        :class="{ 'set-label-active': state.activeInstructName === item.section_id }"
                        @click="handleInstructClick(item)"
@@ -132,8 +132,9 @@
import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue';
import { getSelectSample, getUserTemplateList } from '/@/api/ai/chat';
import { useSearch } from '/@/hooks/useSearch';
import { activeRoomId, activeSampleId, setRoomConfig } from '/@/stores/chatRoom';
import { activeRoomId, activeSampleId, sectionAList, setRoomConfig } from '/@/stores/chatRoom';
import { debounce } from '/@/utils/util';
import emitter from '/@/utils/mitt';
let state = reactive({
   tabNameList: [
      { ID: 1, Name: '提问示例' },
@@ -141,8 +142,8 @@
   ],
   activeName: 1,

   activeLabelName: 0,
   activeInstructName: 0,
   activeLabelName: 'knowledge_base', //默认选择第一个
   activeInstructName: 'office_assistant', //默认选择第一个
   isShowExpand: false,
   useInstructDialog: false,
   instructInfo: {},
@@ -153,26 +154,17 @@
   listInstructLoading: false,
   listSampleExpand: false,
   listInstructExpand: false,
   customTagList: [],
   customOfficeList: [],
});
const instructContentList = ref([]); //指令列表
const exampleList = ref([]); //示例列表
const isShow = defineModel('isShow', {
   type: Boolean,
});
const props = defineProps({
   customTagList: {
      type: Array,
      default: () => [],
   },
   customOfficeList: {
      type: Array,
      default: () => [],
   },
});
let { customTagList, customOfficeList } = toRefs(props);

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

//获取模版列表
const getSelectListSample = async () => {
@@ -223,13 +215,6 @@
//标签点击事件(提问示例)
const handleLabelClick = (item) => {
   state.activeLabelName = item.section_id;
   const exampleShowLabelList = [];
   exampleList.value.forEach((exampleItem) => {
      if (exampleItem.section_a_id == item.section_id) {
         exampleShowLabelList.push(exampleItem);
      }
   });
   showSampleList.value = exampleShowLabelList;
};
//标签点击事件(指令模板)
const handleInstructClick = (item) => {
@@ -287,6 +272,9 @@
});
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);
});

watch(
   () => queryParams.value.sample_title,
@@ -309,6 +297,40 @@
   }
);
//#endregion

//#region ====================== 获取tag ======================

const tagListClick = (val) => {
   if (val.length > 0) {
      const selectTagList = [];
      const officeList = [];
      val.forEach((item) => {
         if (item.section_id != 'office_assistant') {
            selectTagList.push(item);
         } else {
            officeList.push(item);
         }
      });
      state.customTagList = selectTagList;
      state.customOfficeList = officeList;
   } else {
      state.customTagList = [];
      state.customOfficeList = [];
   }
};

watch(
   () => sectionAList.value,
   (val) => {
      tagListClick(val);
   },
   {
      immediate: true,
   }
);

//#endregion

defineExpose({ getTableData });
</script>
<style scoped lang="scss">