复制<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap;">
    <TxBaseSurface mode="pure" style="width: 140px; height: 80px; display: flex; align-items: center; justify-content: center;">
      纯色
    </TxBaseSurface>
    <TxBaseSurface mode="mask" :opacity="0.6" style="width: 140px; height: 80px; display: flex; align-items: center; justify-content: center;">
      遮罩
    </TxBaseSurface>
    <TxBaseSurface mode="blur" :blur="8" style="width: 140px; height: 80px; display: flex; align-items: center; justify-content: center;">
      模糊
    </TxBaseSurface>
    <TxBaseSurface mode="glass" :blur="12" :saturation="1.8" style="width: 140px; height: 80px; display: flex; align-items: center; justify-content: center;">
      毛玻璃
    </TxBaseSurface>
  </div>
</template>

 复制<script setup lang="ts">
import { ref } from 'vue'

const mode = ref<'blur' | 'glass' | 'refraction'>('refraction')
const profile = ref<'soft' | 'filmic' | 'cinematic'>('filmic')
const blur = ref(24)
const filterSaturation = ref(1.6)
const filterContrast = ref(1.05)
const filterBrightness = ref(1.02)

const refractionStrength = ref(68)
const refractionAngle = ref(-24)
const refractionHaloOpacity = ref(0.42)
</script>

<template>
  <TxBaseSurface
    :mode="mode"
    preset="card"
    :radius="18"
    :blur="blur"
    :filter-saturation="filterSaturation"
    :filter-contrast="filterContrast"
    :filter-brightness="filterBrightness"
    :refraction-profile="profile"
    :refraction-strength="refractionStrength"
    :refraction-angle="refractionAngle"
    :refraction-halo-opacity="refractionHaloOpacity"
    style="min-height: 180px; padding: 16px;"
  >
    BaseSurface Advanced
  </TxBaseSurface>
</template>

 复制<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap;">
    <TxBaseSurface fake mode="mask" :opacity="0.5" :radius="12" style="width: 200px; height: 100px;">
      <strong>伪元素背景</strong>
      <span style="font-size: 12px; opacity: 0.7;">slot 内容自然在背景上层</span>
    </TxBaseSurface>
    <TxBaseSurface fake mode="pure" :radius="12" color="var(--tx-color-primary-light-9)" style="width: 200px; height: 100px;">
      自定义颜色
    </TxBaseSurface>
  </div>
</template>

 复制<script setup lang="ts">
import { ref } from 'vue'

const animating = ref(false)
</script>

<template>
  <TxBaseSurface
    mode="glass"
    :blur="12"
    :moving="animating"
    fallback-mode="mask"
    :radius="14"
  >
    <div style="max-height: 140px; overflow-y: auto;">
      可滚动内容...
    </div>
  </TxBaseSurface>
  <TxButton @click="animating = !animating">
    {{ animating ? '停止' : '开始运动' }}
  </TxButton>
</template>

 复制<script setup lang="ts">
import { ref } from 'vue'

const animating = ref(false)
</script>

<template>
  <!-- 左：原生，运动时 backdrop-filter 失效 -->
  <div :style="{ transform: animating ? 'translateX(20px)' : '' }"
       style="backdrop-filter: blur(12px); transition: transform 1.2s;">
    原生 glass（运动时失效）
  </div>

  <!-- 右：BaseSurface 自动降级 -->
  <TxBaseSurface mode="glass" :blur="12" :moving="animating"
                 fallback-mode="mask" :radius="14">
    BaseSurface（运动时降级为 mask）
  </TxBaseSurface>
</template>