<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true"><scroll-view class="section-title-demo-scroll xtf-page-scroll" direction="vertical"><view class="section-title-demo-page xtf-safe-bottom xtf-page-scroll-content">
    <view class="section-title-demo-hero"><XtfText level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="section-title-demo-title" level="display" color="inverse" text="Section Title" /><XtfText class="section-title-demo-intro" level="caption" color="inverse" text="分区标题、眉题、说明与右侧操作。" /></view>
    <view class="section-title-demo-section"><XtfSectionTitle eyebrow="REPORT" title="门店日报" desc="订单与成交数据实时更新。" action-text="查看全部" show-arrow theme="primary" @action="handleAction" /><XtfText class="section-title-demo-note" level="caption" color="secondary" :text="eventText" /></view>
    <view class="section-title-demo-section"><XtfSectionTitle title="权益配置" variant="card" theme="success"><XtfTag size="sm" theme="success" variant="light" text="已启用" /><template #right><XtfButton size="xs" label="新建" @click.stop="handleAction" /></template></XtfSectionTitle></view>
    <view class="section-title-demo-section"><XtfSectionTitle title="风险提示" desc="需要重点关注的业务状态。" variant="soft" theme="warning" :accent-color="'#f59e0b'" show-arrow @action="handleAction" /></view>
    <view class="section-title-demo-section"><button id="basic-section-toggle" @click="accent = !accent; large = !large">切换强调与尺寸</button><XtfSectionTitle id="basic-section" title="本月账单" :accent="accent" :size="large ? 'lg' : 'sm'" :show-arrow="accent" action-text="刷新" @action="handleAction" /><text id="basic-section-events">{{ actionCount }} · {{ eventText }}</text></view>
  </view></scroll-view></XtfConfigProvider>
</template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { ref } from "vue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfText from "@/uni_modules/xtf-linkuiunix/components/xtf-text/xtf-text.uvue"
import XtfSectionTitle from "@/uni_modules/xtf-linkuiunix/components/xtf-section-title/xtf-section-title.uvue"
import XtfTag from "@/uni_modules/xtf-linkuiunix/components/xtf-tag/xtf-tag.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
const eventText = ref("等待操作")
const actionCount = ref(0), accent = ref(true), large = ref(false)
function handleAction(event: any): void { actionCount.value++; eventText.value = "已触发右侧 action / " + (event != null ? event.type : '无事件') }
</script>
<style>
.section-title-demo-scroll { flex: 1; width: 100%; }.section-title-demo-page { display: flex; flex-direction: column; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }.section-title-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #2563eb; }.section-title-demo-title { margin-top: 8rpx; }.section-title-demo-intro { margin-top: 10rpx; }.section-title-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }.section-title-demo-note { margin-top: 18rpx; }
</style>
