高级组件

输入

<preview path="./index.vue" title="示例" description="源代码"></preview>

输出

vitepress 站点配置

copy

Ant 主题配置

copy

示例

源代码

<script setup lang="ts">
import { StarTwoTone } from "@ant-design/icons-vue"
import { theme, App, Space, Tag } from "ant-design-vue"
import { useData } from "vitepress"
import { reactive } from "vue"

import JsonViewer from "@/components/JsonViewer.vue"

/** HOOKS: 获取`vitepress`当前站点配置 */
const siteConfig = useData()
/** HOOKS: 获取`ant`当前主题 配置 */
const { token: antThemeConfig } = theme.useToken()

// #region snippet

/** REACTIVE: 数据 */
const data = reactive({
    /** `vitepress`当前站点配置 */
    siteConfig,
    /** `ant`当前主题配置 */
    antThemeConfig
})

// #endregion snippet
</script>

<template>
    <App>
        <Space style="width: 100%" direction="vertical">
            <Tag class="tag" :bordered="false" :color="data.antThemeConfig.colorPrimary">
                <template #icon>
                    <StarTwoTone :two-tone-color="data.antThemeConfig.colorPrimary" />
                </template>
                vitepress 站点配置
            </Tag>

            <JsonViewer :value="data.siteConfig" :expand-depth="1" />

            <Tag class="tag" :bordered="false" :color="data.antThemeConfig.colorPrimary">
                <template #icon>
                    <StarTwoTone :two-tone-color="data.antThemeConfig.colorPrimary" />
                </template>
                Ant 主题配置
            </Tag>

            <JsonViewer :value="data.antThemeConfig" />
        </Space>
    </App>
</template>

<style lang="scss" scoped>
.tag {
    padding: 2px 10px;
    font-size: 15px;
}
</style>