修改 customDrawer

wujingjing

2024-07-22 bc4ab46fb5c4cb4435efabfe4b316be4ace5b026

修改 customDrawer

 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)"
@@ -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: '提问示例' },
@@ -154,6 +155,8 @@
    listInstructLoading: false,
    listSampleExpand: false,
    listInstructExpand: false,
    customTagList: [],
    customOfficeList: [],
});
const instructContentList = ref([]); //指令列表
const exampleList = ref([]); //示例列表
@@ -161,20 +164,9 @@
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 () => {
@@ -306,6 +298,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">

 src/stores/chatRoom.ts

@@ -42,3 +42,10 @@
export const activeSampleId = ref(null);
export const activeSectionAId = ref(null);
export const activeLLMId = ref(null);



/**
 * 全局使用的 ref
 */
export const sectionAList = ref([]);

 src/views/project/ch/home/Home.vue

@@ -14,7 +14,7 @@
                                        ref="waterCenterRef"
                                        @updateChatInput="updateChatInput"
                                    />
                                    <waterBottom @tagListClick="tagListClick" />
                                    <waterBottom  />
                                </div>

                                <CustomDrawer
@@ -46,8 +46,7 @@
import CustomDrawer from '/@/components/drawer/CustomDrawer.vue';
let state = reactive({
    isShowAdvanceExample: false,
    customTagList: [],
    customOfficeList: [],

});

const topRef = ref(null);
@@ -62,24 +61,7 @@
        customDrawerrRef.value.getTableData();
    }
};
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 = [];
    }
};

</script>
<style scoped lang="scss">
.pc-chat_room {

 src/views/project/ch/home/component/waterRight/bottom.vue

@@ -57,7 +57,7 @@
import { computed, onMounted, reactive } from 'vue';
import { getSectionList } from '/@/api/ai/chat';
import router from '/@/router';
import { activeRoomId, activeSectionAId, setRoomConfig } from '/@/stores/chatRoom';
import { activeRoomId, activeSectionAId, setRoomConfig, sectionAList } from '/@/stores/chatRoom';

let state = reactive({
    applicationScenarios: [],
@@ -88,7 +88,7 @@
        sectionItem.Icon = iconList[index];
    });
    state.applicationScenarios = res.sections;
    emits('tagListClick', res.sections);
    sectionAList.value = res.sections;
    res.sections?.[0] && changeScenarios(res.sections[0]);
};
const groupedArray = computed(() => {