<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">LAYOUT</text><text class="demo-title">Row</text><text class="demo-intro">24 栅格布局，支持间距、对齐、偏移和换行。</text></view>
    <view class="demo-section"><text class="demo-heading">基础栅格</text><XtfRow :gutter="16"><XtfCol :span="8"><view class="tile tile-primary"><text class="tile-text">8</text></view></XtfCol><XtfCol :span="8"><view class="tile tile-success"><text class="tile-text">8</text></view></XtfCol><XtfCol :span="8"><view class="tile tile-warning"><text class="tile-text">8</text></view></XtfCol></XtfRow></view>
    <view class="demo-section"><text class="demo-heading">偏移与换行</text><XtfRow :gutter="16"><XtfCol :span="12" :offset="6"><view class="tile tile-info"><text class="tile-text">12 / offset 6</text></view></XtfCol><XtfCol :span="14"><view class="tile tile-primary"><text class="tile-text">14</text></view></XtfCol><XtfCol :span="10"><view class="tile tile-danger"><text class="tile-text">10</text></view></XtfCol></XtfRow></view>
    <view class="demo-section"><text class="demo-heading">响应式</text><text class="demo-copy">窄屏占满，较宽屏幕显示为两列。</text><XtfRow :gutter="16"><XtfCol :xs="24" :sm="12"><view class="tile tile-success"><text class="tile-text">xs 24 / sm 12</text></view></XtfCol><XtfCol :xs="24" :sm="12"><view class="tile tile-warning"><text class="tile-text">xs 24 / sm 12</text></view></XtfCol></XtfRow></view>
    <view class="demo-section"><text class="demo-heading">动态单位与零跨度</text><button class="demo-gutter-toggle" size="mini" @click="pixelGutter = !pixelGutter">间距 {{ pixelGutter ? '24px' : '24rpx' }}</button><button class="demo-col-toggle" size="mini" @click="hidden = !hidden">{{ hidden ? '显示' : '隐藏' }}第一列</button><XtfRow :gutter="pixelGutter ? '24px' : '24rpx'"><XtfCol :span="hidden ? 0 : 12"><view class="tile tile-primary"><text class="tile-text">第一列</text></view></XtfCol><XtfCol :span="12"><view class="tile tile-success"><text class="tile-text">第二列</text></view></XtfCol></XtfRow></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 XtfRow from "@/uni_modules/xtf-linkuiunix/components/xtf-row/xtf-row.uvue"
import XtfCol from "@/uni_modules/xtf-linkuiunix/components/xtf-col/xtf-col.uvue"
const pixelGutter = ref(false)
const hidden = ref(false)
</script>
<style>
.demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; }.demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }.demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #7c3aed; }.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: 12rpx; }.demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }.demo-heading { margin-bottom: 20rpx; color: var(--xtf-color-text, #172033); font-size: 30rpx; font-weight: 700; }.demo-copy { margin-bottom: 18rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 22rpx; }.tile { display: flex; flex-direction: row; align-items: center; justify-content: center; min-height: 96rpx; margin-bottom: 16rpx; border-radius: 10rpx; }.tile-primary { background-color: #dbeafe; }.tile-success { background-color: #dcfce7; }.tile-warning { background-color: #fef3c7; }.tile-danger { background-color: #fee2e2; }.tile-info { background-color: #e0f2fe; }.tile-text { color: #172033; font-size: 23rpx; font-weight: 700; }
</style>
