<template><XtfConfigProvider class="demo-theme-root" :theme="demoTheme"><scroll-view class="demo-scroll xtf-page-scroll" direction="vertical"><view class="demo-page xtf-page-scroll-content"><view class="demo-hero"><text class="demo-kicker">XTF LINKUI / COMPONENTS</text><text class="demo-title">Index List</text><text class="demo-intro">数据驱动的分组列表和索引导航。</text></view><view class="demo-section"><text class="demo-heading">城市列表</text><XtfIndexList ref="list" :data-source="groups" height="760rpx" clickable @item-click="onClick" @index-select="onIndex" /><button class="demo-index-add" size="mini" @click="addGroup">新增 / 删除 D 分组</button><button class="demo-index-reverse" size="mini" @click="groups.reverse()">倒序分组</button><button class="demo-index-last" size="mini" @click="list?.scrollTo(groups[groups.length - 1].name)">跳到末组</button><text class="demo-result">{{ result }}</text></view></view></scroll-view></XtfConfigProvider></template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
import XtfConfigProvider from '@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue'
const demoTheme = useDemoTheme()
import { ref } from "vue"
import XtfIndexList from "@/uni_modules/xtf-linkuiunix/components/xtf-index-list/xtf-index-list.uvue"
const list = ref<any>(null)
const result = ref("点击列表项查看结果")
const groups = ref([{ name: "A", items: [{ name: "安阳", desc: "河南" }, { name: "鞍山", desc: "辽宁" }] }, { name: "B", items: [{ name: "北京", desc: "直辖市" }, { name: "保定", desc: "河北" }] }, { name: "C", items: [{ name: "成都", desc: "四川" }, { name: "重庆", desc: "直辖市" }] }] as Array<any>)
function onClick(payload: any): void { result.value = "已选择：" + payload.item.name.toString() }
function addGroup(): void { const index = groups.value.findIndex((group: any): boolean => group.name == "D"); if (index >= 0) groups.value.splice(index, 1); else groups.value.push({ name: "D", items: [{ name: "大连", desc: "辽宁" }] }); result.value = "当前索引：" + groups.value.map((group: any): string => group.name).join("、") }
function onIndex(payload: any): void { result.value = "已切换索引：" + payload.name + "（" + payload.index + "）" }
</script>
<style>.demo-scroll { flex: 1; width: 100%; }.demo-page { display: flex; flex-direction: column; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }.demo-hero { display: flex; flex-direction: column; padding: 30rpx; border-radius: 16rpx; background-color: #0f766e; }.demo-kicker, .demo-intro { color: #ffffff; font-size: 22rpx; }.demo-title { margin-top: 8rpx; color: #ffffff; font-size: 48rpx; font-weight: 700; }.demo-intro { margin-top: 10rpx; }.demo-section { display: flex; flex-direction: column; margin-top: 18rpx; padding: 22rpx; border-radius: 14rpx; background-color: var(--xtf-color-surface, #ffffff); }.demo-heading { margin-bottom: 16rpx; color: var(--xtf-color-text, #0f172a); font-size: 28rpx; font-weight: 700; }.demo-result { margin-top: 14rpx; color: #0f766e; font-size: 23rpx; }</style>
