主题配置

<template>
    <!-- 全局提供, 入口处一次性载入 -->
    <mi-theme :theme="theme">
        <mi-layout>
            <!-- ... -->
        </mi-layout>
    </mi-theme>
</template>

<script lang="ts" setup>
    import { reactive } from 'vue'

    const theme = reactive({
        theme: 'light',
        primary: '#f00',
        radius: 8,
        components: {
            layout: {
                // ...
            },
            notice: {
                // ...
            },
            captcha: {
                radar: {
                    // ...
                },
                // ...
            }
            // ...
        }
    })
</script>

<template>
    <!-- 任何地方可调用该组件， 针对组件的主题配置 -->
    <mi-theme-provider :tokens="tokens">
        <mi-captcha />
    </mi-theme-provider>
</template>

<script lang="ts" setup>
    import { reactive } from 'vue'

    const tokens = reactive({
        captcha: {
            radar: {
                border: '#fff',
                dot: 'red',
                // ...
            },
            // ...
        }
    })
</script>