<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 Bar</text><text class="demo-intro">侧边索引定位分组内容。</text></view><view class="demo-section"><text class="demo-heading">通讯录索引</text><XtfIndexBar ref="bar" :index-list="letters" height="760rpx" @change="onChange"><view v-for="letter in letters" :key="letter" class="index-group"><view :id="'xtf-index-anchor-' + letter" class="index-anchor"><text class="index-anchor-text">{{ letter }}</text></view><text v-for="name in names(letter)" :key="name" class="index-name">{{ name }}</text></view></XtfIndexBar><button class="demo-index-special" size="mini" @click="toggleSpecial">新增 / 删除 # 分组</button><button class="demo-index-jump" size="mini" @click="bar?.scrollTo(letters[letters.length - 1])">跳到末组</button><text class="demo-result">当前索引：{{ current }}</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 XtfIndexBar from "@/uni_modules/xtf-linkuiunix/components/xtf-index-bar/xtf-index-bar.uvue"
const letters = ref(["A", "B", "C", "D", "E"] as Array<any>)
const bar = ref<any>(null)
const current = ref("A")
const data: UTSJSONObject = { A: ["安琪", "艾伦", "安然"], B: ["白雪", "白云"], C: ["陈明", "程程"], D: ["杜鹃", "丁一"], E: ["恩熙"], "#": ["未命名联系人"] }
function names(letter: any): Array<any> { const value = data[letter.toString()]; return Array.isArray(value) ? value as Array<any> : [] as Array<any> }
function onChange(payload: { index: number; name: string }): void { current.value = payload.name }
function toggleSpecial(): void { const index = letters.value.indexOf("#"); if (index < 0) letters.value.push("#"); else letters.value.splice(index, 1); current.value = "待选择" }
</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: #2563eb; }.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; }.index-group { display: flex; flex-direction: column; }.index-anchor { display: flex; flex-direction: row; padding: 14rpx 18rpx; background-color: #e0f2fe; }.index-anchor-text { color: #0369a1; font-weight: 700; }.index-name { padding: 18rpx; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: var(--xtf-color-border, #e2e8f0); color: var(--xtf-color-text-secondary, #334155); font-size: 25rpx; }.demo-result { margin-top: 14rpx; color: #2563eb; font-size: 23rpx; }</style>
