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">
@@ -129,7 +129,7 @@

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { computed, onMounted, reactive, ref, watch } from 'vue';
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';
@@ -140,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,
@@ -227,7 +161,17 @@
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(() => {});
@@ -281,11 +225,11 @@
};
//标签点击事件(提问示例)
const handleLabelClick = (item) => {
   state.activeLabelName = item.ID;
   state.activeLabelName = item.section_id;
};
//标签点击事件(指令模板)
const handleInstructClick = (item) => {
   state.activeInstructName = item.ID;
   state.activeInstructName = item.section_id;
};

//展开收起