<!-- 基础用法 -->
<re-config-provider class="demo-default demo-provider-card"> <text class="demo-provider-card__title">默认配置</text> <text class="demo-provider-card__desc">默认使用亮色主题、`zh-CN` 语言和 1000 层级基线。</text> </re-config-provider>
<!-- 暗色主题 -->
<re-config-provider class="demo-dark demo-provider-card" theme="dark" customStyle="padding: 14px; border-radius: 12px;"> <text class="demo-provider-card__title demo-provider-card__title--dark">暗色主题内容</text> <text class="demo-provider-card__desc demo-provider-card__desc--dark">主题变量作用于整个插槽树，适合页面级或区域级切换。</text> </re-config-provider>
<!-- 语言切换 -->
<re-config-provider class="demo-locale demo-provider-card" :locale="activeLocale" customStyle="padding: 14px; border-radius: 12px;"> <text class="demo-provider-card__title">{{ activeLocalePreview.title }}</text> <text class="demo-provider-card__desc">{{ activeLocalePreview.description }}</text> <text class="demo-provider-card__meta">locale = {{ activeLocale }}</text> <view class="demo-locale-pill-row"> <text v-for="(action, index) in activeLocalePreview.actions" :key="index" class="demo-locale-pill">{{ action }}</text> </view> <text class="demo-provider-card__desc">{{ activeLocalePreview.status }}</text> </re-config-provider>
<!-- 自定义层级 -->
<re-config-provider class="demo-zindex demo-provider-card" :zIndex="2000" customStyle="padding: 14px; border-radius: 12px;"> <text class="demo-provider-card__title">层级值：2000</text> <text class="demo-provider-card__desc">用于弹窗、抽屉、Toast 等浮层组件的统一基线管理。</text> </re-config-provider>
<!-- 主题变量覆盖 -->
<re-config-provider class="demo-theme-vars demo-provider-card" theme="dark" :themeVars="brandThemeVars" customStyle="padding: 14px; border-radius: 12px;"> <text class="demo-provider-card__title demo-provider-card__title--dark">自定义主题变量</text> <text class="demo-provider-card__desc demo-provider-card__desc--dark">把暗色底座和品牌主色组合到同一作用域下。</text> </re-config-provider>
<!-- 自定义样式 -->
<re-config-provider class="demo-custom-style demo-provider-card" customStyle="padding: 16px; background-color: #f5f5f5; border-radius: 12px;"> <text class="demo-provider-card__title">自定义样式</text> <text class="demo-provider-card__desc">可以直接定制容器内联样式，便于和业务布局融合。</text> </re-config-provider>
<!-- 嵌套配置 -->
<re-config-provider class="demo-nested-outer demo-provider-card" locale="zh-CN" customStyle="padding: 12px; border-radius: 12px; background-color: #f8fafc;">
<re-config-provider class="demo-nested-inner demo-provider-card demo-provider-card--inner" theme="dark" :zIndex="2600" customStyle="padding: 12px; border-radius: 10px; margin-top: 10px;">
<!-- 完整配置 -->
<re-config-provider class="demo-full demo-provider-card" theme="dark" locale="zh-CN" :zIndex="3000" :themeVars="fullThemeVars" customStyle="padding: 12px; border-radius: 12px;"> <text class="demo-provider-card__title demo-provider-card__title--dark">完整配置</text> <text class="demo-provider-card__desc demo-provider-card__desc--dark">一个组件即可同时接管主题、文案、层级和样式入口。</text> </re-config-provider>
