在Spartacus中如何根据登录用户所属企业切换主题？

前置准备：多主题样式定义 #

首先你需要将所有差异化的样式抽离为主题变量，按企业维度独立维护：

• 为每个企业创建独立的SCSS变量文件，例如_theme-<企业标识>.scss，示例内容：

// _theme-company-a.scss
$primary-color: #1890ff;
$header-background: #f0f2f5;
$button-border-radius: 4px;
// 其他所有需要差异化的样式变量

• 统一创建主题混入文件_theme-mixin.scss，所有组件的主题相关样式都使用变量定义：

@mixin apply-theme {
  cx-page-layout header {
    background: $header-background;
  }
  .btn-primary {
    background: $primary-color;
    border-radius: $button-border-radius;
  }
  // 其余所有主题相关的组件样式都在此处定义
}

步骤1：获取登录用户所属企业标识 #

Spartacus的登录用户信息可以通过UserAccountFacade获取，你可以在应用初始化阶段订阅用户信息，提取所属企业的唯一编码（可以存在B2BUnit的uid字段或自定义扩展字段中），示例代码：

import { UserAccountFacade } from '@spartacus/user/account/root';
import { take } from 'rxjs';

export class AppComponent implements OnInit {
  constructor(private userAccountFacade: UserAccountFacade) {}

  ngOnInit() {
    this.userAccountFacade.get().pipe(take(1)).subscribe(user => {
      if (user?.orgUnit?.uid) {
        // 拿到用户所属企业的唯一编码，如company_a、company_b
        const companyCode = user.orgUnit.uid;
        this.loadTheme(companyCode);
      } else {
        // 未登录状态加载默认主题
        this.loadTheme('default');
      }
    })
  }
}

步骤2：动态加载对应主题 #

根据你的业务场景，可以选择以下两种常用实现方式：

• 方式一：预编译全量主题，运行时动态切换样式文件
  这种方式适合主题差异大、变量多的场景，性能更好：
  1. 首先在angular.json中配置每个主题为独立的编译产物，关闭自动注入：

  "styles": [
    "src/styles.scss",
    {
      "input": "src/styles/themes/theme-company-a.scss",
      "bundleName": "theme-company-a",
      "inject": false
    },
    {
      "input": "src/styles/themes/theme-company-b.scss",
      "bundleName": "theme-company-b",
      "inject": false
    }
  ]
  

  2. 每个主题的入口SCSS文件引入对应变量和混入，生成完整主题样式：

  // theme-company-a.scss
  @import './_theme-company-a.scss';
  @import './_theme-mixin.scss';
  @include apply-theme();
  

  3. 实现loadTheme方法，动态创建link标签加载对应主题文件：

  loadTheme(companyCode: string) {
    // 移除已加载的旧主题
    const existThemeLink = document.getElementById('dynamic-theme');
    if (existThemeLink) {
      existThemeLink.remove();
    }
    // 创建新的主题link标签
    const themeLink = document.createElement('link');
    themeLink.id = 'dynamic-theme';
    themeLink.rel = 'stylesheet';
    // 生产环境注意适配构建后的资源路径和哈希后缀
    themeLink.href = `theme-${companyCode}.css`;
    document.head.appendChild(themeLink);
  }
  

• 方式二：CSS变量运行时替换
  这种方式适合主题差异小、变量少的场景，切换效率最高：
  1. 全局样式中用CSS变量定义默认主题：

  :root {
    --primary-color: #1890ff;
    --header-background: #f0f2f5;
    --button-border-radius: 4px;
  }
  

  2. 所有组件的主题相关样式都使用CSS变量编写：

  cx-page-layout header {
    background: var(--header-background);
  }
  .btn-primary {
    background: var(--primary-color);
    border-radius: var(--button-border-radius);
  }
  

  3. 提前在前端维护所有企业的主题变量映射，拿到企业编码后直接替换根元素的CSS变量：

  const THEME_CONFIG = {
    default: {
      '--primary-color': '#1890ff',
      '--header-background': '#f0f2f5',
      '--button-border-radius': '4px'
    },
    company_a: {
      '--primary-color': '#27ae60',
      '--header-background': '#ecf0f1',
      '--button-border-radius': '8px'
    },
    company_b: {
      '--primary-color': '#e74c3c',
      '--header-background': '#fdf2f2',
      '--button-border-radius': '2px'
    }
  }
  
  loadTheme(companyCode: string) {
    const currentTheme = THEME_CONFIG[companyCode] || THEME_CONFIG.default;
    Object.keys(currentTheme).forEach(varKey => {
      document.documentElement.style.setProperty(varKey, currentTheme[varKey]);
    })
  }
  

注意事项 #

• 建议把主题加载逻辑放在路由守卫之前执行，避免用户进入页面后出现样式跳变
• 如果使用预编译主题的方式，生产构建时需要配置资源映射，匹配带哈希后缀的主题文件名
• 未登录状态建议加载默认主题，避免页面初始加载时出现样式错乱

内容的提问来源于stack exchange，提问作者Huey