feat: 新增标签筛选功能

yangyin

2024-07-22 c3d6ccca909604632b1db43e8ecbd41f4ab2b66b

 src/components/drawer/CustomDrawer.vue

@@ -30,19 +30,19 @@
                  <el-input v-model="queryParams.sample_title" placeholder="搜索更多" class="set-input" :prefix-icon="Search" clearable>
                  </el-input>
               </div>
               <div class="mt20 w100 relative">
               <div class="mt20 w100 relative" v-show="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 state.exampleTabList"
                        :key="item.ID"
                        :class="{ 'set-label-active': state.activeLabelName === item.ID }"
                        v-for="item in customTagList"
                        :key="item.section_id"
                        :class="{ 'set-label-active': state.activeLabelName === item.section_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.section_name }}
                     </div>
                  </div>
                  <div class="bg-[#e0e7fb] absolute right-0 top-0 text-[#131313] w-[30px] h-[26px] cursor-pointer flex items-center">
@@ -77,19 +77,19 @@
                  <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="mt20 w100 relative" v-show="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 state.instructList"
                        :key="item.ID"
                        :class="{ 'set-label-active': state.activeInstructName === item.ID }"
                        v-for="item in customOfficeList"
                        :key="item.section_id"
                        :class="{ 'set-label-active': state.activeInstructName === item.section_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 }}
                        {{ item.section_name }}
                     </div>
                  </div>
                  <div class="bg-[#e0e7fb] absolute right-0 top-0 text-[#131313] w-[30px] h-[26px] cursor-pointer flex items-center">
@@ -133,7 +133,6 @@
import { getSelectSample, getUserTemplateList } from '/@/api/ai/chat';
import { useSearch } from '/@/hooks/useSearch';
import { activeRoomId, activeSampleId, setRoomConfig } from '/@/stores/chatRoom';
import emitter from '/@/utils/mitt';
import { debounce } from '/@/utils/util';
let state = reactive({
   tabNameList: [
@@ -141,74 +140,8 @@
      { ID: 2, Name: '指令模板' },
   ],
   activeName: 1,
   exampleTabList: [
      {
         ID: 1,
         Title: '工作',
      },
      {
         ID: 2,
         Title: '职场',
      },
      {
         ID: 3,
         Title: '科学',
      },
      {
         ID: 4,
         Title: '求职',
      },
      {
         ID: 5,
         Title: '新能源,汽车,数据',
      },
      {
         ID: 6,
         Title: '写作',
      },
      {
         ID: 7,
         Title: '学习',
      },
      {
         ID: 8,
         Title: '创作',
      },
   ],
   instructList: [
      {
         ID: 1,
         Title: '文学构思',
      },
      {
         ID: 2,
         Title: '语言翻译',
      },
      {
         ID: 3,
         Title: '高效策划',
      },
      {
         ID: 4,
         Title: '顾问专家',
      },
      {
         ID: 5,
         Title: '代码编程',
      },
      {
         ID: 6,
         Title: '办公写作',
      },
      {
         ID: 7,
         Title: '健康管家',
      },
      {
         ID: 8,
         Title: '发现探索',
      },
   ],
   exampleTabList: [],
   instructList: [],
   activeLabelName: 0,
   activeInstructName: 0,
   isShowExpand: false,
@@ -217,6 +150,10 @@
   inputInstruct: '', //可修改指令
   exampleRandomContent: [],
   exampleContent: [],
   listSampleLoading: false,
   listInstructLoading: false,
   listSampleExpand: false,
   listInstructExpand: false,
});
const instructContentList = ref([]); //指令列表
const exampleList = ref([]); //示例列表
@@ -224,18 +161,28 @@
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(() => {
   getSelectListSample();
   getUserTemplate();
});
onMounted(() => {});

//获取模版列表
const getSelectListSample = async () => {
   state.listSampleLoading = true;
   const res = await getSelectSample({
      section_b_id: '',
   }).finally(() => {
      state.listSampleLoading = false;
   });
   // console.log(res, 63);
   state.exampleRandomContent = res.samples;
@@ -250,6 +197,7 @@
   });
   exampleList.value = res.samples;
   state.exampleContent = array;
   state.listSampleExpand = true;
};
//随机生成颜色
const randomHexColor = () => {
@@ -264,20 +212,24 @@
};
//获取用户模板
const getUserTemplate = async () => {
   const res = await getUserTemplateList();
   state.listInstructLoading = true;
   const res = await getUserTemplateList().finally(() => {
      state.listInstructLoading = false;
   });
   instructContentList.value = res.templates;
};
//切换到指令/提问
const handleTabClick = (item) => {
   state.activeName = item.ID;
   getTableData();
};
//标签点击事件(提问示例)
const handleLabelClick = (item) => {
   state.activeLabelName = item.ID;
   state.activeLabelName = item.section_id;
};
//标签点击事件(指令模板)
const handleInstructClick = (item) => {
   state.activeInstructName = item.ID;
   state.activeInstructName = item.section_id;
};

//展开收起
@@ -290,6 +242,21 @@
};
const toggleShow = () => {
   isShow.value = !isShow.value;
   if (!isShow.value) {
      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 handleCloseTemplate = () => {
@@ -339,6 +306,7 @@
   }
);
//#endregion
defineExpose({ getTableData });
</script>
<style scoped lang="scss">
.exampleSlide {