增加搜索功能

yangyin

2024-07-06 f1549ac432b865a905b9eb21b071c0fa49e9c6bc

增加搜索功能

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

@@ -50,7 +50,8 @@
            <div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" v-show="state.activeName == 1">
                <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="state.searchInput" placeholder="搜索更多" class="set-input" :prefix-icon="Search"> </el-input>
                        <el-input v-model="queryParams.searchInput" placeholder="搜索更多" class="set-input" :prefix-icon="Search" clearable>
                        </el-input>
                    </div>
                    <div class="mt20 w100 relative">
                        <div
@@ -72,8 +73,11 @@
                            <i class="iconfont icon-zhongduancanshu" title="收缩" @click="handleExpandClick(2)" v-show="state.isShowExpand"></i>
                        </div>
                        <div class="mt20 w100">
                            <div class="w100 pb-[20px]" v-for="item in state.exampleContentList" :key="item.sample_id">
                                <div class="cursor-pointer flex box-border p-[12px] w100 rounded bg-[#f5f7fd] transition-[background-color .2s]" @click="changeExample(item)">
                            <div class="w100 pb-[20px]" v-for="item in queryData" :key="item.sample_id">
                                <div
                                    class="cursor-pointer flex box-border p-[12px] w100 rounded bg-[#f5f7fd] transition-[background-color .2s]"
                                    @click="changeExample(item)"
                                >
                                    <i
                                        class="iconfont icon-chazhaobiaodanliebiao pl-[2px] w-[16px] h-[16px] font12 text-[#fff] transform-[scale(.85)] rounded-[50%]"
                                        :style="`background-color:${item.BgColor}`"
@@ -93,7 +97,8 @@
            <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="state.searchInput" placeholder="搜索更多" class="set-input" :prefix-icon="Search"> </el-input>
                        <el-input v-model="queryParams.instructInput" placeholder="搜索更多" class="set-input" :prefix-icon="Search" clearable>
                        </el-input>
                    </div>
                    <div class="mt20 w100 relative">
                        <div
@@ -141,10 +146,13 @@

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { computed, onMounted, reactive } from 'vue';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { getSelectSample, getUserTemplateList } from '/@/api/ai/chat';
import { activeSampleId } from '/@/stores/chatRoom';
import emitter from '/@/utils/mitt';
import { useSearch } from '/@/hooks/useSearch';
import { debounce, getRecentDateRange } from '/@/utils/util';

let state = reactive({
    exampleContent: [],
    exampleRandomContent: [],
@@ -154,7 +162,6 @@
    ],
    isShowAdvanceExample: false,
    activeName: 1,
    searchInput: '',
    exampleTabList: [
        {
            ID: 1,
@@ -223,13 +230,14 @@
            Title: '发现探索',
        },
    ],
    exampleContentList: [],

    instructContentList: [],

    activeLabelName: 0,
    activeInstructName: 0,
    isShowExpand: false,
});
const exampleList = ref([]);
onMounted(() => {
    getSelectListSample();
    getUserTemplate();
@@ -242,6 +250,7 @@
    }
    return groups;
});
//获取模版列表
const getSelectListSample = async () => {
    const res = await getSelectSample({
        section_b_id: '',
@@ -257,7 +266,7 @@
            array.push(sample);
        }
    });
    state.exampleContentList = res.samples;
    exampleList.value = res.samples;
    state.exampleContent = array;
};

@@ -307,6 +316,22 @@
        .toString(16)
        .padEnd(6, '0')}`;
};
//#region ====================== 搜索聊天室 ======================
const queryParams = ref({
    searchInput: '',
    instructInput: '',
});
const { query, queryData } = useSearch(exampleList, queryParams);

const debounceQuery = debounce(query);

watch(
    () => queryParams.value.searchInput,
    (val) => {
        debounceQuery();
    }
);
//#endregion
</script>
<style scoped lang="scss">
.pc-prompts {