WI/Web.V1.0.git

			@@ -17,9 +17,9 @@
			<div class="main">
			<div
			class="main_item flex cursor-pointer"
			v-for="(item, index) in state.applicationScenarios"
			v-for="item in state.applicationScenarios"
			:key="item.section_id"
			:class="{ main_item_active: item.section_id === state.scenariosIndex }"
			:class="{ main_item_active: item.section_id === activeSectionAId }"
			@click="changeScenarios(item)"
			>
			<div :class="['iconfont icon-' + item.Icon]"></div>
			@@ -30,33 +30,52 @@
			</div>
			</div>
			</div>
			<div class="set-page">
			<el-pagination size="small" background layout="prev, pager, next" class="mt-4" />
			</div>
			</div>
			</template>

			<script setup lang="ts">
			import { onMounted, reactive } from 'vue';
			import { onMounted, reactive, computed } from 'vue';
			import { getSectionList } from '/@/api/ai/chat';
			import router from '/@/router';
			import { activeSectionAId } from '/@/stores/chatRoom';

			let state = reactive({
			applicationScenarios: [],
			scenariosIds: [],
			scenariosIndex: 0,
			});
			const changeScenarios = (item) => {
			state.scenariosIndex = item.ID;
			const changeScenarios = async (item) => {
			activeSectionAId.value = item.section_id;
			};
			const getMainSectionList = async () => {
			const res = await getSectionList();
			let result = res.sections;
			let result = [];
			const iconList = ['biaodan', 'putong', 'zhongduancanshuchaxun', 'shidu'];
			res.sections.forEach((sectionItem, index) => {
			sectionItem.Icon = iconList[index];
			if (index < 4) {
			result.push(sectionItem);
			}
			});
			state.applicationScenarios = res.sections;
			state.scenariosIds = result.map((item) => item.ID);
			};
			state.applicationScenarios = result;

			res.sections?.[0] && changeScenarios(res.sections[0]);
			// state.scenariosIds = result.map((item) => item.section_id);
			};
			const groupedArray = computed(() => {
			const groups = [];
			let i = 0;
			while (state.applicationScenarios.length > i) {
			groups.push(state.applicationScenarios.slice(i, (i += 4)));
			}
			return groups;
			});
			const nextPage = () => {
			const index = Math.floor(Math.random() * groupedArray.value.length);
			state.applicationScenarios = groupedArray.value[index];
			};
			// 查看更多
			const lookMore = () => {
			router.push({
			@@ -184,5 +203,11 @@
			}
			}
			}
			.set-page {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10px 0px;
			}
			}
			</style>