修改高级示例

yangyin

2024-10-15 20dd2dc0554748c4f8e507374be31e3b5ec7a270

修改高级示例

 src/components/drawer/CustomDrawer.vue

@@ -30,25 +30,32 @@
                        <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="state.businessTagList.length > 0">
                    <div class="mt20 w100 relative" v-show="state.customBusinessList.length > 0">
                        <div class="set_custom_label">
                            <div class="chanel-tags">
                                <div v-for="(item, index) in state.businessTagList" :key="index" class="flex items-center">
                                    <span class="set-group-name">{{ item.group_name }}</span>
                                    <div
                                        class="overflow-hidden min-h-[43px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center"
                                    >
                                        <div
                                            v-for="(itemChildren, index) in item.Children"
                                            :key="index"
                                            :class="{ 'set-label-active': state.activeBusinessChildName === itemChildren.group_id }"
                                            @click="handleLabelChildClick(itemChildren)"
                                            class="cursor-pointer rounded-xl bg-[#e0e7f] text-[#b2b2b2] text-[12px] transition-[background-color .1s, color .1s, border-color .1s]"
                                        >
                                            <el-divider direction="vertical" />{{ itemChildren.group_name }}
                                        </div>
                                    </div>
                                <div
                                    v-for="(item, index) in state.customBusinessList"
                                    :key="index"
                                    :class="{ 'set-group-label-active': state.activeBusinessName === item.group_id }"
                                    class="flex items-center"
                                    @click="handleBusinessClick(item)"
                                >
                                    <span class="set-group-name">{{ item.group_name }}</span
                                    ><el-divider direction="vertical" />
                                </div>
                            </div>
                        </div>
                        <div
                            class="overflow-hidden min-h-[43px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center pt-2"
                        >
                            <div
                                v-for="(itemChildren, index) in state.customBusinessChildList"
                                :key="index"
                                :class="{ 'set-label-active': state.activeBusinessChildName === itemChildren.group_id }"
                                @click="handleLabelChildClick(itemChildren)"
                                class="cursor-pointer m-[5px] py-[5px] pl-[10px] pr-[14px] rounded-xl border border-solid border-[#b2b2b2] bg-[#e0e7f] text-[#4c4c4c] transition-[background-color .1s, color .1s, border-color .1s]"
                            >
                                {{ itemChildren.group_name }}
                            </div>
                        </div>
                        <div class="mt20 w100" v-show="finalSampleList.length > 0">
@@ -77,32 +84,39 @@
            <div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" v-show="state.activeName == 2">
                <div class="flex flex-col w100 h100 pt-0 pr-[15px] pb-0 pl-[20px] overflow-auto">
                    <div class="flex items-center w100 h-[30px] border border-solid border-[#b2b2b2] transition-[border-color 1s] rounded-2xl">
                        <el-input v-model="instructParams.template_title" placeholder="搜索更多" class="set-input" :prefix-icon="Search" clearable>
                        <el-input v-model="officeParams.template_title" placeholder="搜索更多" class="set-input" :prefix-icon="Search" clearable>
                        </el-input>
                    </div>
                    <div class="mt20 w100 relative" v-show="state.customOfficeList.length > 0">
                        <div class="set_custom_label">
                            <div class="chanel-tags">
                                <div v-for="(item, index) in state.customOfficeList" :key="index" class="flex items-center">
                                    <span class="set-group-name">{{ item.group_name }}</span>
                                    <div
                                        class="overflow-hidden min-h-[43px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center"
                                    >
                                        <div
                                            v-for="(itemChildren, index) in item.Children"
                                            :key="index"
                                            :class="{ 'set-label-active': state.activeOfficeChildName === itemChildren.group_id }"
                                            @click="handleOfficeChildClick(itemChildren)"
                                            class="cursor-pointer rounded-xl bg-[#e0e7f] text-[#b2b2b2] text-[12px] transition-[background-color .1s, color .1s, border-color .1s]"
                                        >
                                            <el-divider direction="vertical" />{{ itemChildren.group_name }}
                                        </div>
                                    </div>
                                <div
                                    v-for="(item, index) in state.customOfficeList"
                                    :key="index"
                                    :class="{ 'set-group-label-active': state.activeOfficeName === item.group_id }"
                                    class="flex items-center"
                                    @click="handleOfficeClick(item)"
                                >
                                    <span class="set-group-name">{{ item.group_name }}</span
                                    ><el-divider direction="vertical" />
                                </div>
                            </div>
                        </div>
                        <div
                            class="overflow-hidden min-h-[43px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center pt-2"
                        >
                            <div
                                v-for="(itemChildren, index) in state.customOfficeChildList"
                                :key="index"
                                :class="{ 'set-label-active': state.activeOfficeChildName === itemChildren.group_id }"
                                @click="handleOfficeChildClick(itemChildren)"
                                class="cursor-pointer m-[5px] py-[5px] pl-[10px] pr-[14px] rounded-xl border border-solid border-[#b2b2b2] bg-[#e0e7f] text-[#4c4c4c] transition-[background-color .1s, color .1s, border-color .1s]"
                            >
                                {{ itemChildren.group_name }}
                            </div>
                        </div>
                        <div class="mt20 w100">
                            <div class="w100 pb-[20px] flex overflow-auto flex-col" v-for="item in showInstructList" :key="item.group_id">
                            <div class="w100 pb-[20px] flex overflow-auto flex-col" v-for="item in finalOfficeList" :key="item.group_id">
                                <div class="bg-[#f5f7fd] p-[12px] transition-[background-color .2s] flex flex-col rounded-2xl">
                                    <div class="flex justify-between">
                                        <span class="set-title">{{ item.template_title }}</span>
@@ -127,22 +141,29 @@
                    <div class="mt20 w100 relative" v-show="state.knowledgeBaseList.length > 0">
                        <div class="set_custom_label">
                            <div class="chanel-tags">
                                <div v-for="(item, index) in state.knowledgeBaseList" :key="index" class="flex items-center">
                                    <span class="set-group-name">{{ item.group_name }}</span>
                                    <div
                                        class="overflow-hidden min-h-[43px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center"
                                    >
                                        <div
                                            v-for="(itemChildren, index) in item.Children"
                                            :key="index"
                                            :class="{ 'set-label-active': state.activeKnowledgeChildName === itemChildren.group_id }"
                                            @click="handleKnowledgeChildClick(itemChildren)"
                                            class="cursor-pointer rounded-xl bg-[#e0e7f] text-[#b2b2b2] text-[12px] transition-[background-color .1s, color .1s, border-color .1s]"
                                        >
                                            <el-divider direction="vertical" />{{ itemChildren.group_name }}
                                        </div>
                                    </div>
                                <div
                                    v-for="(item, index) in state.knowledgeBaseList"
                                    :key="index"
                                    :class="{ 'set-group-label-active': state.activeKnowledgeName === item.group_id }"
                                    class="flex items-center"
                                    @click="handleKnowledgeClick(item)"
                                >
                                    <span class="set-group-name">{{ item.group_name }}</span
                                    ><el-divider direction="vertical" />
                                </div>
                            </div>
                        </div>
                        <div
                            class="overflow-hidden min-h-[43px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center pt-2"
                        >
                            <div
                                v-for="(itemChildren, index) in state.customKnowledgeChildList"
                                :key="index"
                                :class="{ 'set-label-active': state.activeKnowledgeChildName === itemChildren.group_id }"
                                @click="handleKnowledgeChildClick(itemChildren)"
                                class="cursor-pointer m-[5px] py-[5px] pl-[10px] pr-[14px] rounded-xl border border-solid border-[#b2b2b2] bg-[#e0e7f] text-[#4c4c4c] transition-[background-color .1s, color .1s, border-color .1s]"
                            >
                                {{ itemChildren.group_name }}
                            </div>
                        </div>
                        <div class="mt20 w100" v-show="finalKnowledgeList.length > 0">
@@ -196,9 +217,18 @@
        { ID: 3, Name: '知识库' },
    ],
    activeName: 1,
    activeBusinessChildName: '', //场景
    activeOfficeChildName: '', //办公
    activeKnowledgeChildName: '', //知识库
    activeBusinessName: '', //场景
    activeBusinessChildName: '',
    customBusinessList: [],
    customBusinessChildList: [],
    activeOfficeName: '', //办公
    activeOfficeChildName: '',
    customOfficeList: [],
    customOfficeChildList: [],
    activeKnowledgeName: '', //知识库
    activeKnowledgeChildName: '',
    knowledgeBaseList: [],
    customKnowledgeChildList: [],
    useInstructDialog: false,
    instructInfo: {},
    inputInstruct: '', //可修改指令
@@ -208,19 +238,17 @@
    listInstructLoading: false,
    listSampleExpand: false,
    listInstructExpand: false,
    knowledgeBaseList: [],
    customTagChildList: [],
    customOfficeList: [],
    businessTagList: [],
});
const instructContentList = ref([]); //指令列表
const exampleList = ref([]); //示例列表
//#region ====================== 传参 ======================
const isShow = defineModel('isShow', {
    type: Boolean,
});

const emit = defineEmits(['updateChatInput']);
const rightBox = computed(() => (isShow.value ? 354 : 0));
const emit = defineEmits(['updateChatInput']);
//#endregion
//#region ====================== 业务场景/办公助手/知识库的list ======================
const instructContentList = ref([]); //指令列表
const exampleList = ref([]); //示例列表
//获取模版列表
const getSelectListSample = async () => {
    state.listSampleLoading = true;
@@ -259,35 +287,71 @@
    });
    instructContentList.value = res.templates;
};
//切换到指令/提问
const handleTabClick = (item) => {
//#endregion
//#region ====================== 默认选择第一个的场景的子场景 ======================
//tags标签切换
const handleTabClick = async (item) => {
    state.activeName = item.ID;
    if (state.activeName == 2) {
        if (state.listInstructExpand) return;
        await getUserTemplate();
        state.listInstructExpand = true;
    }
    tagListClick(sectionAList.value);
    getTableData();
};
//场景子场景
const handleBusinessClick = (item) => {
    state.activeBusinessName = item.group_id;
    state.customBusinessChildList = item.Children;
    if (item.Children.length > 0) {
        state.activeBusinessChildName = item.Children[0].group_id ?? '';
    } else {
        state.activeBusinessChildName = '';
        state.customBusinessChildList = [];
    }
};
const handleLabelChildClick = (item) => {
    state.activeBusinessChildName = item.group_id;
};
//办公子场景
const handleOfficeClick = (item) => {
    state.activeOfficeName = item.group_id;
    state.customOfficeChildList = item.Children;
    if (item.Children.length > 0) {
        state.activeOfficeChildName = item.Children[0].group_id ?? '';
    } else {
        state.activeOfficeChildName = '';
        state.customOfficeChildList = [];
    }
};
const handleOfficeChildClick = (item) => {
    state.activeOfficeChildName = item.group_id;
};
//知识库子场景
const handleKnowledgeClick = (item) => {
    state.activeKnowledgeName = item.group_id;
    state.customKnowledgeChildList = item.Children;
    if (item.Children.length > 0) {
        state.activeKnowledgeChildName = item.Children[0].group_id ?? '';
    } else {
        state.activeKnowledgeChildName = '';
        state.customKnowledgeChildList = [];
    }
};
const handleKnowledgeChildClick = (item) => {
    state.activeKnowledgeChildName = item.group_id;
};
//#endregion
//打开高级示例
const toggleShow = async () => {
    isShow.value = !isShow.value;
    if (!isShow.value) {
        loadingData.value = true;
        await getMainSectionList().finally(() => {
            loadingData.value = false;
        });

        getTableData();
    }
    getTableData();
};
//关闭高级示例
const handleCloseTemplate = () => {
    isShow.value = false;
};
//获取主场景列表
const getMainSectionList = async () => {
    const res = await getSectionList();
    const iconList = [
@@ -309,27 +373,19 @@
};
const loadingData = ref(false);
const getTableData = async () => {
    loadingData.value = true;

    try {
    if (!isShow.value) {
        loadingData.value = true;
        await getMainSectionList().finally(() => {
            loadingData.value = false;
        });
        if (state.activeName == 1 || state.activeName == 3) {
            if (state.listSampleExpand) return;
            await getSelectListSample();
            state.listSampleExpand = true;
        }
        if (state.activeName == 2) {
            if (state.listInstructExpand) return;
            await getUserTemplate();
            state.listInstructExpand = true;
        }
    } finally {
        loadingData.value = false;
    }
};
//关闭高级示例
const handleCloseTemplate = () => {
    isShow.value = false;
};

//#region ====================== templateUseClick ======================
const templateUseClick = (row) => {
    state.useInstructDialog = true;
@@ -362,15 +418,18 @@
    }
);
//办公
const instructParams = ref({
const officeParams = ref({
    template_title: '',
});
const { query: queryInstruct, queryData: showInstructList } = useSearch(instructContentList, instructParams);

const { query: queryInstruct, queryData: showInstructList } = useSearch(instructContentList, officeParams);
const finalOfficeList = computed(() => {
    const result = showInstructList.value.filter((item) => item.template_group == state.activeOfficeChildName);
    return result ?? [];
});
const instructQuery = debounce(queryInstruct);

watch(
    () => instructParams.value.template_title,
    () => officeParams.value.template_title,
    (val) => {
        instructQuery();
    }
@@ -387,7 +446,7 @@
const knowledgeQuery = debounce(queryKnowledge);

watch(
    () => instructParams.value.template_title,
    () => officeParams.value.template_title,
    (val) => {
        knowledgeQuery();
    }
@@ -420,8 +479,10 @@
                    Children: 'Children',
                    ParentID: 'p_group_id',
                });
                state.activeBusinessChildName = treeBusinessList[0].Children[0].group_id ?? '';
                state.businessTagList = treeBusinessList; //业务场景
                state.customBusinessList = treeBusinessList; //业务场景数据源
                state.activeBusinessName = treeBusinessList[0].group_id; //默认选中第一个业务场景
                state.customBusinessChildList = treeBusinessList[0].Children; //默认选中第一个业务场景的第一个子场景的数据源
                state.activeBusinessChildName = treeBusinessList[0].Children[0].group_id;
                break;
            case 2:
                const treeOfficeList = convertListToTree(officeList, {
@@ -429,8 +490,10 @@
                    Children: 'Children',
                    ParentID: 'p_group_id',
                });
                state.activeOfficeChildName = treeOfficeList[0].Children[0].group_id ?? '';
                state.customOfficeList = treeOfficeList; //办公助手
                state.customOfficeList = treeOfficeList; //办公助手数据源
                state.activeOfficeName = treeOfficeList[0].group_id; //默认选中第一个办公助手
                state.customOfficeChildList = treeOfficeList[0].Children; //默认选中第一个办公助手的第一个子场景的数据源
                state.activeOfficeChildName = treeOfficeList[0].Children[0].group_id; //默认选中第一个办公助手的第一个子场景
                break;
            case 3:
                const treeTagList = convertListToTree(selectTagList, {
@@ -438,14 +501,25 @@
                    Children: 'Children',
                    ParentID: 'p_group_id',
                });
                state.knowledgeBaseList = treeTagList; //知识库
                state.activeKnowledgeChildName = treeTagList[0].Children[0].group_id ?? '';
                state.knowledgeBaseList = treeTagList; //知识库数据源
                state.activeKnowledgeName = treeTagList[0].group_id; //默认选中第一个知识库
                state.customKnowledgeChildList = treeTagList[0].Children; //默认选中第一个知识库的第一个子场景的数据源
                state.activeKnowledgeChildName = treeTagList[0].Children[0].group_id; //默认选中第一个知识库的第一个子场景
                break;
        }
    } else {
        state.knowledgeBaseList = [];
        state.customBusinessList = [];
        state.customBusinessChildList = [];
        state.customOfficeChildList = [];
        state.customKnowledgeChildList = [];
        state.activeBusinessName = '';
        state.activeBusinessChildName = '';
        state.activeOfficeName = '';
        state.activeOfficeChildName = '';
        state.activeKnowledgeName = '';
        state.activeKnowledgeChildName = '';
        state.customOfficeList = [];
        state.businessTagList = [];
        state.knowledgeBaseList = [];
    }
};
//#endregion
@@ -454,7 +528,6 @@
</script>
<style scoped lang="scss">
.exampleSlide {
    // position: absolute;
    right: 0;
    top: 0;
    height: 100%;
@@ -463,8 +536,7 @@
    z-index: 100;
}
.set_custom_label {
    // height: 141px;
    min-height: 53px;
    min-height: 38px;
    box-sizing: border-box;
    background-color: #f2f4f8;
    border-bottom: 1px solid #eee;
@@ -473,9 +545,12 @@
        position: relative;
        overflow: hidden;
        font-size: 12px;
        color: #000;
        display: flex;
        flex-wrap: wrap;
        line-height: 26px;
        padding: 6px;
        color: #4c4c4c;
        cursor: pointer;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
@@ -571,6 +646,8 @@
        color: #1c86ff;
    }
    .set-label-active {
        border-color: #1c86ff;
        background-color: #ccdcfb;
        color: #1c86ff;
    }
    .example-body {

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

@@ -5,8 +5,8 @@
                <div class="w100 h100 overflow-hidden">
                    <div class="pc-chatRoom w100 h100">
                        <div class="homeBox w100 h-full">
                            <div class="flex items-center h-full ">
                                <div class="flex items-center flex-column" style="overflow: unset !important;">
                            <div class="flex items-center h-full">
                                <div class="flex items-center flex-column" style="overflow: unset !important">
                                    <waterTop ref="topRef" />
                                    <waterCenter
                                        @advanceExampleClick="advanceExampleClick"
@@ -14,14 +14,10 @@
                                        ref="waterCenterRef"
                                        @updateChatInput="updateChatInput"
                                    />
                                    <waterBottom  />
                                    <waterBottom />
                                </div>

                                <CustomDrawer
                                    v-model:isShow="state.isShowAdvanceExample"
                                    ref="customDrawerrRef"
                                    @updateChatInput="updateChatInput"
                                />
                                <CustomDrawer v-model:isShow="state.isShowAdvanceExample" ref="customDrawerRef" @updateChatInput="updateChatInput" />
                            </div>
                        </div>
                        <!-- <p class="declare">
@@ -44,22 +40,20 @@
import CustomDrawer from '/@/components/drawer/CustomDrawer.vue';
let state = reactive({
    isShowAdvanceExample: false,

});

const topRef = ref(null);
const waterCenterRef = ref(null);
const customDrawerrRef = ref(null);
const customDrawerRef = ref(null);
const updateChatInput = (val) => {
    topRef.value.updateChatInput(val);
};
const advanceExampleClick = (status: boolean) => {
    state.isShowAdvanceExample = status;
    if (status) {
        customDrawerrRef.value.getTableData();
        customDrawerRef.value.getTableData();
    }
};

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