fix: 修改换一批

yangyin

2024-06-30 ca49563e9bf4bb5ffd3b8ab9bb89c385f41a8be1

fix: 修改换一批

 src/api/ai/chat.ts

@@ -169,3 +169,14 @@
        },
    });
};
// 获取AI对话测试例子列表
export const getSelectSample = async (params, req: any = request) => {
    return req({
        url: '/section/get_section_sample',
        method: 'POST',
        data: params,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
    });
};

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

@@ -7,7 +7,7 @@
                <span class="change cursor-pointer" @click="advanceExampleClick">高级示例 ></span>
            </div>
            <div class="cursor-pointer">
                <span class="mr-1 changeBatch">换一批</span>
                <span class="mr-1 changeBatch" @click="batchChange">换一批</span>
                <i class="iconfont icon-shuaxin"></i>
            </div>
        </div>
@@ -16,16 +16,16 @@
            <div
                class="main_item flex items-center cursor-pointer"
                v-for="(item, index) in state.exampleContent"
                :key="item.ID"
                :class="{ main_item_active: item.ID === state.exampleIndex }"
                :key="index"
                :class="{ main_item_active: item.sample_id === state.exampleIndex }"
                @click="changeExample(item)"
            >
                <div class="left flex items-center justify-center" :class="['color' + index]">
                    <img :src="item.Icon" alt="" />
                </div>
                <div class="right">
                    <h4>{{ item.Title }}</h4>
                    <p>{{ item.Content }}</p>
                    <h4>{{ item.sample_title }}</h4>
                    <p>{{ item.sample_question }}</p>
                </div>
            </div>
        </div>
@@ -139,34 +139,10 @@

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { onMounted, reactive } from 'vue';
import { onMounted, reactive, computed } from 'vue';
import { getSelectSample } from '/@/api/ai/chat';
let state = reactive({
    exampleContent: [
        {
            ID: 1,
            Icon: '/static/images/wave/ChatImg.png',
            Title: '解读李四的反应',
            Content: '张三打了李四一巴掌,李四对张三说:"你是不是没吃饭",李四说这句话含义是?',
        },
        {
            ID: 2,
            Icon: '/static/images/wave/ChatImg.png',
            Title: '解释努力与内卷的区别',
            Content: '怎么解释努力和内卷的区别?',
        },
        {
            ID: 3,
            Icon: '/static/images/wave/ChatImg.png',
            Title: '其他问题',
            Content: '请搜索你想知道的问题',
        },
        {
            ID: 4,
            Icon: '/static/images/wave/ChatImg.png',
            Title: '给宝宝取有文化内涵的名字',
            Content: '请以诗经中的典故给男宝宝取名，姓顾，名字要求3个字，给5个名字供我选择。',
        },
    ],
    exampleContent: [],
    tabNameList: [
        { ID: 1, Name: '提问示例' },
        { ID: 2, Name: '指令模板' },
@@ -326,13 +302,42 @@
    isShowExpand: false,
});
onMounted(() => {
    state.exampleContentList.forEach((item) => {
        item.BgColor = randomHexColor();
    });
    getSelectListSample();
});
const groupedArray = computed(() => {
    const groups = [];
    let i = 0;
    while (state.exampleContent.length > i) {
        groups.push(state.exampleContent.slice(i, (i += 4)));
    }
    return groups;
});

const getSelectListSample = async () => {
    const res = await getSelectSample({
        section_b_id: '',
    });
    // console.log(res, 63);
    const array = [];
    res.samples.forEach((sample, index) => {
        sample.Icon = '/static/images/wave/ChatImg.png';
        sample.BgColor = randomHexColor();
        if (index < 4) {
            array.push(sample);
        }
    });
    state.exampleContent = array;
};

const changeExample = (item) => {
    state.exampleIndex = item.ID;
    state.exampleIndex = item.sample_id;
};
const batchChange = () => {
    const batch = [];
    for (let i = 0; i < groupedArray.value.length; i++) {
        batch.push(state.exampleContent[state.exampleIndex]);
        state.exampleIndex = (state.exampleIndex + 1) % state.exampleContent.length;
    }
};
//高级示例
const advanceExampleClick = () => {