修改 customDrawer

wujingjing

2024-07-22 bc4ab46fb5c4cb4435efabfe4b316be4ace5b026

 src/components/drawer/CustomDrawer.vue

@@ -1,10 +1,7 @@
<template>
   <div class="relative h100" :style="`width: ${rightBox}px;transition:width 0.7s ease-in;`">
      <div class="retract_icon" @click="handleRetractClick">
         <i
            class="text-[#fff] transition-all"
            :class="isShowAdvanceExample ? 'ywicon icon-zuoyoujiantou1' : 'ywicon icon-zuoyoujiantou'"
         ></i>
   <div class="relative h100" :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>
      <div class="pc-mouldboard column exampleSlide">
         <div class="header flex items-center justify-center">
@@ -33,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="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 state.exampleTabList"
                        :key="item.ID"
                        :class="{ 'set-label-active': state.activeLabelName === item.ID }"
                        v-for="item in state.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">
@@ -80,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="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 state.instructList"
                        :key="item.ID"
                        :class="{ 'set-label-active': state.activeInstructName === item.ID }"
                        v-for="item in state.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">
@@ -132,86 +129,20 @@

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { onMounted, reactive, ref, toRefs, 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';
import emitter from '/@/utils/mitt';
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: '提问示例' },
      { 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,
@@ -220,32 +151,30 @@
   inputInstruct: '', //可修改指令
   exampleRandomContent: [],
   exampleContent: [],
   listSampleLoading: false,
   listInstructLoading: false,
   listSampleExpand: false,
   listInstructExpand: false,
   customTagList: [],
   customOfficeList: [],
});
const instructContentList = ref([]); //指令列表
const exampleList = ref([]); //示例列表
const props = defineProps({
   isShowAdvanceExample: {
      type: Boolean,
      default: false, //是否显示高级示例
   },
   rightBox: {
      type: Number,
      default: 0, //右侧距离
   },

const isShow = defineModel('isShow', {
   type: Boolean,
});
const { isShowAdvanceExample, rightBox } = toRefs(props);
onMounted(() => {
   getSelectListSample();
   getUserTemplate();
});
const emits = defineEmits<{
   (event: 'closeExampleClick', data): void;
   (event: 'advanceExampleClick', data): void;
}>();

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

//获取模版列表
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;
@@ -260,6 +189,7 @@
   });
   exampleList.value = res.samples;
   state.exampleContent = array;
   state.listSampleExpand = true;
};
//随机生成颜色
const randomHexColor = () => {
@@ -268,26 +198,30 @@
      .padEnd(6, '0')}`;
};
const changeExample = (item) => {
   emitter.emit('updateChatInput', item.sample_question);
   emit('updateChatInput', item.sample_question);
   setRoomConfig(activeRoomId.value, 'isAnswerByLLM', false);
   activeSampleId.value = item.sample_id;
};
//获取用户模板
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;
};

//展开收起
@@ -298,16 +232,27 @@
      state.isShowExpand = false;
   }
};
const handleRetractClick = () => {
   if (isShowAdvanceExample.value) {
      emits('closeExampleClick', false);
   } else {
      emits('advanceExampleClick', true);
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 = () => {
   emits('closeExampleClick', false);
   isShow.value = false;
};
//#region ====================== templateUseClick ======================
const templateUseClick = (row) => {
@@ -320,7 +265,7 @@
};
const submitInstruct = () => {
   setRoomConfig(activeRoomId.value, 'isAnswerByLLM', true);
   emitter.emit('updateChatInput', state.inputInstruct);
   emit('updateChatInput', state.inputInstruct);
   handleClose();
};
//#endregion
@@ -353,6 +298,41 @@
   }
);
//#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">
.exampleSlide {