业务组件接入指南¶

<template>
  <div class="business-card">
    <div class="card-title">标题</div>
    <div class="card-content">内容</div>
  </div>
</template>

<style scoped lang="less">
  .business-card {
    background: var(--bams-surface-bg);
    border: 1px solid var(--bams-border-color);
    border-radius: 8px;
    padding: 16px;
    box-shadow: var(--bams-shadow-card);

    .card-title {
      color: var(--bams-text-color);
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 8px;
    }

    .card-content {
      color: var(--bams-text-secondary);
      font-size: 14px;
    }
  }
</style>

<style scoped lang="less">
  .business-button {
    background: var(--bams-button-primary-bg);
    color: var(--bams-button-primary-text);
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.2s;

    &:hover {
      background: var(--bams-primary-hover);
    }

    &:active {
      background: var(--bams-primary-active);
    }
  }
</style>

<script setup>
  import { LocalThemeContainer } from "@bams-app/theme";
  import { THEME_MODE_VARS, THEME_PRESET_VARS } from "../../theme/xxxTheme";
</script>

<template>
  <ComponentContainer :theme-mode-vars="THEME_MODE_VARS" :theme-preset-vars="THEME_PRESET_VARS">
    <div class="title">业务组件标题</div>
    <div class="content">业务组件内容</div>
  </ComponentContainer>
</template>

<script setup>
  import { ComponentContainer } from "@bams-app/components";
  import { THEME_MODE_VARS, THEME_PRESET_VARS } from "../../theme/businessComponentTheme";
</script>

<style scoped lang="less">
  .title {
    color: var(--bams-text-color);
    font-size: 16px;
    font-weight: 500;
  }

  .content {
    color: var(--bams-text-secondary);
    font-size: 14px;
  }
</style>

<template>
  <LocalThemeContainer :theme-mode-vars="THEME_MODE_VARS" :theme-preset-vars="THEME_PRESET_VARS" @theme-change="handleThemeChange" v-slot="slotState">
    <div class="title">业务组件标题</div>
    <div class="content">业务组件内容</div>
    <div class="info">当前模式：{{ slotState.mode }}</div>
  </LocalThemeContainer>
</template>

<script setup>
  import { LocalThemeContainer } from "@bams-app/theme";
  import { THEME_MODE_VARS, THEME_PRESET_VARS } from "../../theme/localThemeComponentTheme";

  const handleThemeChange = themeState => {
    console.log("主题变化", themeState);
  };
</script>

<style scoped lang="less">
  .title {
    color: var(--bams-text-color);
    font-size: 16px;
    font-weight: 500;
  }

  .content {
    color: var(--bams-text-secondary);
    font-size: 14px;
  }

  .info {
    margin-top: 16px;
    color: var(--bams-primary);
  }
</style>

<template>
  <div class="custom-component" :style="localThemeVars">
    <div class="title">自定义主题组件</div>
    <div class="content">使用局部变量</div>
  </div>
</template>

<script setup>
  import { useLocalThemeVars } from "@bams-app/theme";
  import { THEME_MODE_VARS, THEME_PRESET_VARS } from "../../theme/customComponentTheme";

  // 使用 useLocalThemeVars 获取计算后的局部变量
  const { localThemeVars } = useLocalThemeVars({
    themeModeVars: THEME_MODE_VARS,
    themePresetVars: THEME_PRESET_VARS,
  });
</script>

<style scoped lang="less">
  .custom-component {
    background: var(--bams-page-bg);
    color: var(--bams-text-color);
    border: 1px solid var(--bams-border-color);
    padding: 20px;
  }
</style>

<template>
  <div class="custom-wrapper" :style="localThemeVars">
    <!-- 组件内容 -->
  </div>
</template>

<script setup>
  import { computed } from "vue";
  import { getThemePreset, useThemeState } from "@bams-app/theme";
  import { THEME_MODE_VARS, getCustomThemeVars } from "../../theme/manualTheme";

  const { preset, resolvedMode } = useThemeState();

  const localThemeVars = computed(() => {
    const presetConfig = getThemePreset(preset.value);
    return getCustomThemeVars(resolvedMode.value, presetConfig);
  });
</script>

<style scoped lang="less">
  .custom-wrapper {
    background: var(--custom-bg);
    color: var(--custom-text);
  }
</style>

<template>
  <div ref="containerRef" :style="localThemeVars">
    <a-popover :get-popup-container="getPopupContainer"> 内容 </a-popover>
  </div>
</template>

<script setup>
  import { ref } from "vue";

  const containerRef = ref(null);

  const getPopupContainer = () => {
    return containerRef.value || document.body;
  };
</script>

<script setup>
  import { computed, watch } from "vue";
  import { getCssVar, getAllCssVars, useThemeState } from "@bams-app/theme";

  const { preset, resolvedMode } = useThemeState();

  // 响应式获取单个变量
  const primaryColor = computed(() => getCssVar("primary"));

  // 响应式获取所有变量
  const themeColors = computed(() => getAllCssVars());

  // 监听主题变化
  watch([preset, resolvedMode], () => {
    console.log("主题已更新");
  });
</script>

<template>
  <div>
    <p>当前主色: {{ primaryColor }}</p>
    <div
      :style="{
        color: themeColors.textColor,
        background: themeColors.pageBg,
      }"
    >
      主题内容
    </div>
  </div>
</template>