<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true"><scroll-view class="card-demo-scroll xtf-page-scroll" direction="vertical"><view class="card-demo-page xtf-safe-bottom xtf-page-scroll-content">
    <view class="card-demo-hero"><XtfText class="card-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="card-demo-title" level="display" color="inverse" text="Card" /><XtfText class="card-demo-intro" level="caption" color="inverse" text="承载结构化内容的轻量容器。" /></view>
    <view class="card-demo-section"><XtfText class="card-demo-section-title" level="h3" text="视觉层级" /><XtfText class="card-demo-section-desc" level="caption" color="secondary" text="elevated、outlined、filled、flat、glass、neo。" /><XtfCard title="Elevated" desc="elevation 可控制 0 到 8 的阴影深度。" :elevation="4"><XtfText class="card-demo-body" level="caption" color="secondary" text="默认卡片用于强调主要内容。" /></XtfCard><XtfCard class="card-demo-gap" title="Outlined" desc="清晰边框适合平级内容。" variant="outlined"><XtfText class="card-demo-body" level="caption" color="secondary" text="filled 和 glass 使用稳定的纯色近似。" /></XtfCard><view class="card-demo-row"><XtfCard class="card-demo-half" title="Filled" variant="filled" padding="sm" /><XtfCard class="card-demo-half card-demo-right" title="Neo" variant="neo" padding="sm" /></view></view>
    <view class="card-demo-section"><XtfText class="card-demo-section-title" level="h3" text="插槽与封面" /><XtfText class="card-demo-section-desc" level="caption" color="secondary" text="cover、header、默认内容及 footer 插槽可独立组合。" /><XtfCard id="basic-card-gradient" padding="none" :border-gradient="gradient" :loading="gradientLoading"><template #cover><image class="card-demo-cover" src="/static/logo.png" mode="aspectFill" /></template><template #header><view class="card-demo-slot-header"><XtfText class="card-demo-slot-title" level="h3" text="自定义 Header" /><XtfBadge standalone text="推荐" theme="success" variant="soft" /></view></template><view class="card-demo-slot-body"><XtfText class="card-demo-body" level="caption" color="secondary" text="两色渐变边框保留封面与内部操作。" /></view><template #footer><XtfButton id="basic-card-gradient-action" label="查看详情" type="light" block @click="gradientActions++" /></template></XtfCard><button id="basic-card-gradient-toggle" @click="gradient = !gradient">切换渐变边框</button><button id="basic-card-gradient-loading" @click="gradientLoading = !gradientLoading">切换骨架</button><text id="basic-card-gradient-events">详情操作={{ gradientActions }}</text></view>
    <view class="card-demo-section"><XtfText class="card-demo-section-title" level="h3" text="交互与加载" /><XtfText class="card-demo-section-desc" level="caption" color="secondary" text="点击卡片会触发原生轻微缩放反馈；加载态采用静态骨架。" /><XtfCard title="可点击卡片" desc="点按此处记录事件。" clickable hoverable @click="countAction"><XtfIcon name="touch_app" size="lg" theme="primary" /></XtfCard><view class="card-demo-gap"><XtfCard :loading="loading" title="加载内容" /></view><view class="card-demo-actions"><XtfButton :label="loading ? '结束加载' : '显示加载'" type="outline" block @click="toggleLoading" /></view><view class="card-demo-state"><XtfText class="card-demo-state-label" level="label" color="secondary" text="Card clicks" /><XtfText class="card-demo-state-value" level="h3" color="primary" :text="actionCount.toString()" /></view></view>
    <view class="card-demo-section"><XtfText level="h3" text="局部圆角与独立操作" /><button id="basic-card-radius" @click="rounded = !rounded">切换左上角</button><XtfCard id="basic-card" title="家庭账本" clickable :radius="rounded ? { topLeft: 32 } : { topLeft: 0 }" :elevation="2.8" @click="countAction"><XtfText text="卡片与内部操作分别计数" /><template #footer><XtfButton id="basic-card-inner" label="标记已读" @click.stop="innerActions++" /></template></XtfCard><text id="basic-card-events">外层={{ actionCount }} 内部={{ innerActions }}</text></view>
    <view class="card-demo-section"><XtfText level="h3" text="独立悬停反馈" /><XtfCard id="basic-card-hover" variant="outlined" hoverable title="移入鼠标提升卡片" desc="不启用 clickable，悬停仅改变位置与阴影。" @click="hoverClicks++" /><XtfCard id="basic-card-no-hover" class="card-demo-gap" variant="outlined" title="静态对照" /><text id="basic-card-hover-events">点击事件={{ hoverClicks }}</text></view>
    <view class="card-demo-section"><XtfText level="h3" text="自定义渐变与颜色变量" /><XtfCard id="basic-card-custom-gradient" title="自定义渐变" :border-gradient="customGradient ? 'linear-gradient(to right, var(--basic-card-start), var(--basic-card-end))' : true" :custom-style="{ '--basic-card-start': customColors ? '#dc2626' : '#7c3aed', '--basic-card-end': customColors ? '#0891b2' : '#f59e0b', '--xtf-color-text': '#334155' }"><XtfText text="渐变颜色与正文颜色变量独立更新。" /></XtfCard><button id="basic-card-custom-colors" @click="customColors = !customColors">切换渐变颜色变量</button><button id="basic-card-custom-default" @click="customGradient = !customGradient">切换自定义与默认渐变</button></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 XtfCard from "@/uni_modules/xtf-linkuiunix/components/xtf-card/xtf-card.uvue"
import XtfBadge from "@/uni_modules/xtf-linkuiunix/components/xtf-badge/xtf-badge.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfIcon from "@/uni_modules/xtf-linkuiunix/components/xtf-icon/xtf-icon.uvue"
const rounded = ref(true), innerActions = ref(0)
const gradient = ref(true), gradientLoading = ref(false), gradientActions = ref(0), hoverClicks = ref(0)
const customGradient = ref(true), customColors = ref(false)
const loading = ref(false); const actionCount = ref(0)
function toggleLoading(): void { loading.value = !loading.value }
function countAction(): void { actionCount.value += 1 }
</script>
<style>
.card-demo-scroll { flex: 1; width: 100%; height: 100%; min-height: 0; }.card-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }.card-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #0f766e; }.card-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }.card-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; }.card-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; }.card-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; background-color: var(--xtf-color-surface, #ffffff); border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 16rpx; }.card-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }.card-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }.card-demo-body { color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }.card-demo-gap { margin-top: 16rpx; }.card-demo-row { display: flex; flex-direction: row; margin-top: 16rpx; }.card-demo-half { display: flex; flex-direction: column; flex: 1; min-width: 0; }.card-demo-right { margin-left: 14rpx; }.card-demo-cover { width: 100%; height: 220rpx; }.card-demo-slot-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 22rpx 24rpx 0rpx; }.card-demo-slot-title { color: var(--xtf-color-text, #0f172a); font-size: 28rpx; font-weight: 700; }.card-demo-slot-body { display: flex; flex-direction: column; padding: 20rpx 24rpx; }.card-demo-actions { margin-top: 16rpx; }.card-demo-state { display: flex; flex-direction: row; align-items: center; margin-top: 16rpx; padding: 16rpx; background-color: var(--xtf-color-surface-muted, #ecfeff); border-radius: 12rpx; }.card-demo-state-label { color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }.card-demo-state-value { margin-left: 10rpx; color: #0f766e; font-size: 28rpx; font-weight: 700; }
</style>
