tydata-webview-v2/src/views/VantThemeTest.vue

<template>
    <!-- Vant 主题色测试页面 -->
    <div class="vant-theme-test p-4">
        <van-nav-bar title="Vant主题色测试" left-arrow @click-left="onClickLeft" />

        <div class="mt-4 space-y-4">
            <!-- 按钮组件测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">按钮组件</h3>
                <div class="flex gap-2 flex-wrap">
                    <van-button type="primary">主要按钮</van-button>
                    <van-button type="success">成功按钮</van-button>
                    <van-button type="warning">警告按钮</van-button>
                    <van-button type="danger">危险按钮</van-button>
                </div>
            </div>

            <!-- 开关组件测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">开关组件</h3>
                <div class="flex items-center gap-4">
                    <van-switch v-model="switchValue" />
                    <span>开关状态: {{ switchValue ? '开启' : '关闭' }}</span>
                </div>
            </div>

            <!-- 复选框组件测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">复选框组件</h3>
                <div class="space-y-2">
                    <van-checkbox v-model="checkboxValue1">选项1</van-checkbox>
                    <van-checkbox v-model="checkboxValue2">选项2</van-checkbox>
                </div>
            </div>

            <!-- 单选框组件测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">单选框组件</h3>
                <div class="space-y-2">
                    <van-radio v-model="radioValue" name="1">选项1</van-radio>
                    <van-radio v-model="radioValue" name="2">选项2</van-radio>
                </div>
            </div>

            <!-- 滑动条组件测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">滑动条组件</h3>
                <van-slider v-model="sliderValue" />
                <p class="text-sm text-gray-600 mt-2">当前值: {{ sliderValue }}</p>
            </div>

            <!-- 进度条组件测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">进度条组件</h3>
                <van-progress :percentage="progressValue" />
                <p class="text-sm text-gray-600 mt-2">进度: {{ progressValue }}%</p>
            </div>

            <!-- 评分组件测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">评分组件</h3>
                <van-rate v-model="rateValue" />
                <p class="text-sm text-gray-600 mt-2">评分: {{ rateValue }} 星</p>
            </div>

            <!-- 步进器组件测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">步进器组件</h3>
                <van-stepper v-model="stepperValue" />
                <p class="text-sm text-gray-600 mt-2">当前值: {{ stepperValue }}</p>
            </div>

            <!-- 标签组件测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">标签组件</h3>
                <div class="flex gap-2 flex-wrap">
                    <van-tag type="primary">主要标签</van-tag>
                    <van-tag type="success">成功标签</van-tag>
                    <van-tag type="warning">警告标签</van-tag>
                    <van-tag type="danger">危险标签</van-tag>
                </div>
            </div>

            <!-- 徽章组件测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">徽章组件</h3>
                <div class="flex gap-4">
                    <van-badge content="5">
                        <div class="w-8 h-8 bg-gray-200 rounded"></div>
                    </van-badge>
                    <van-badge content="99+">
                        <div class="w-8 h-8 bg-gray-200 rounded"></div>
                    </van-badge>
                </div>
            </div>

            <!-- 通知栏组件测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">通知栏组件</h3>
                <van-notice-bar left-icon="volume-o" text="这是一条通知栏消息，用于测试主题色配置效果。" />
            </div>

            <!-- 轮播图组件测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">轮播图组件</h3>
                <van-swipe :autoplay="3000" indicator-color="white">
                    <van-swipe-item>
                        <div
                            class="h-32 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white">
                            轮播图 1
                        </div>
                    </van-swipe-item>
                    <van-swipe-item>
                        <div
                            class="h-32 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center text-white">
                            轮播图 2
                        </div>
                    </van-swipe-item>
                    <van-swipe-item>
                        <div
                            class="h-32 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center text-white">
                            轮播图 3
                        </div>
                    </van-swipe-item>
                </van-swipe>
            </div>

            <!-- 加载组件测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">加载组件</h3>
                <div class="flex gap-4 items-center">
                    <van-loading type="spinner" />
                    <van-loading type="circular" />
                    <span>加载中...</span>
                </div>
            </div>

            <!-- 步骤条组件测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">步骤条组件</h3>
                <van-steps :active="2" active-icon="success" inactive-icon="arrow">
                    <van-step>步骤一</van-step>
                    <van-step>步骤二</van-step>
                    <van-step>步骤三</van-step>
                </van-steps>
            </div>

            <!-- 弹窗测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">弹窗组件</h3>
                <van-button type="primary" @click="showDialog = true">显示弹窗</van-button>
                <van-dialog v-model:show="showDialog" title="主题色测试" message="这是一个测试弹窗，用于验证主题色配置效果。"
                    show-cancel-button />
            </div>

            <!-- 动作面板测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">动作面板组件</h3>
                <van-button type="primary" @click="showActionSheet = true">显示动作面板</van-button>
                <van-action-sheet v-model:show="showActionSheet" :actions="actions" @select="onSelect" />
            </div>

            <!-- Toast 测试 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">Toast 提示组件</h3>
                <div class="flex gap-2 flex-wrap">
                    <van-button type="primary" @click="showSuccessToast">成功提示</van-button>
                    <van-button type="warning" @click="showFailToast">失败提示</van-button>
                    <van-button type="default" @click="showTextToast">文字提示</van-button>
                    <van-button type="success" @click="showLoadingToastHandler">加载提示</van-button>
                </div>
            </div>

            <!-- 颜色说明 -->
            <div class="card">
                <h3 class="text-lg font-bold mb-3">主题色说明</h3>
                <div class="space-y-2">
                    <div class="flex items-center gap-2">
                        <div class="w-4 h-4 rounded" style="background-color: var(--van-theme-primary);"></div>
                        <span>主色调: <span class="font-mono">var(--van-theme-primary)</span></span>
                    </div>
                    <p class="text-sm text-gray-600">
                        以上所有组件的主色调都已配置为 <span class="font-mono">#5d7eeb</span>，通过 <span
                            class="font-mono">var(--van-theme-primary)</span>
                        CSS变量统一管理。包括按钮、开关、复选框、单选框等组件的激活状态。通过修改CSS变量可以轻松更改整个主题。
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
// 测试数据
const switchValue = ref(true)
const checkboxValue1 = ref(true)
const checkboxValue2 = ref(false)
const radioValue = ref('1')
const sliderValue = ref(50)
const progressValue = ref(75)
const rateValue = ref(4)
const stepperValue = ref(1)
const showDialog = ref(false)
const showActionSheet = ref(false)

// 动作面板选项
const actions = [
    { name: '选项一', color: 'var(--van-theme-primary)' },
    { name: '选项二', color: 'var(--van-theme-primary)' },
    { name: '选项三', color: 'var(--van-theme-primary)' },
]

// 选择动作面板选项
const onSelect = (action) => {
    console.log('选择了:', action.name)
    showActionSheet.value = false
}

// Toast 测试方法
const showSuccessToast = () => {
    showToast({
        type: 'success',
        message: '操作成功！',
        duration: 2000
    })
}

const showFailToast = () => {
    showToast({
        type: 'fail',
        message: '操作失败，请重试',
        duration: 2000
    })
}

const showTextToast = () => {
    showToast({
        message: '这是一条普通的文字提示',
        duration: 2000
    })
}

const showLoadingToastHandler = () => {
    const toast = showLoadingToast({
        message: "加载中...",
        forbidClick: true,
        duration: 0, // 设置为 0 表示不会自动关闭
        loadingType: "spinner",
    });

    // 3秒后关闭加载提示
    setTimeout(() => {
        toast.close()
        showToast({
            type: 'success',
            message: '加载完成！'
        })
    }, 3000)
}

// 返回上一页
const onClickLeft = () => {
    window.history.back()
}
</script>

<style lang="scss" scoped>
.vant-theme-test {
    min-height: 100vh;
    background-color: #f8f8f8;
}
</style>