branchErp/src/config/theme/README.md

主题系统使用文档

概述

这个主题系统可以根据网站URL自动切换主题色，支持多环境和多品牌的主题配置。

功能特性

• 🎨 基于URL自动切换主题
• 🔄 支持运行时动态切换主题
• 🎯 同时更新CSS变量和UI框架主题
• 📱 支持多环境配置（开发、测试、生产）
• 🛠️ 提供完整的工具函数和组件

配置文件

主题配置 (src/config/theme/index.js)

export const themeConfigs = {
  default: {
    name: '体制外主题',
    primary: '#BA4A8F',
    // ... 其他颜色
  },
  main: {
    name: '体制内主题', 
    primary: '#1890FF',
    // ... 其他颜色
  }
  // ... 更多主题
};

URL映射规则

export const urlThemeMapping = {
  'main': ['main.fontree.com', 'fontree-main.com'],
  'default': ['fontree.com', 'www.fontree.com'],
  'test': ['test.fontree.com', 'staging'],
  'dev': ['localhost', '127.0.0.1']
};

使用方法

1. 自动主题切换

系统会在应用启动时自动检测URL并应用相应主题，无需手动配置。

2. 手动切换主题

import { switchTheme } from '@/utils/theme.js';

// 切换到指定主题
switchTheme('main'); // 切换到体制内主题
switchTheme('test'); // 切换到测试主题

3. 在Vue组件中使用

<template>
  <div>
    <p>当前主题: {{ currentTheme?.config.name }}</p>
    <button @click="switchTheme('main')">切换到体制内主题</button>
  </div>
</template>

<script setup>
import { useTheme } from '@/utils/theme.js';

const { currentTheme, switchTheme } = useTheme();
</script>

4. 使用主题切换组件

<template>
  <ThemeSwitch />
</template>

<script setup>
import ThemeSwitch from '@/components/ThemeSwitch.vue';
</script>

5. 在CSS中使用主题变量

.my-component {
  background-color: var(--theme-primary);
  color: var(--theme-success);
  border: 1px solid var(--theme-darker);
}

6. 监听主题变化

import { onThemeChange } from '@/utils/theme.js';

// 监听主题变化
const unsubscribe = onThemeChange((themeInfo) => {
  console.log('主题已切换:', themeInfo.key, themeInfo.config);
});

// 取消监听
unsubscribe();

CSS变量列表

系统会自动设置以下CSS变量：

• --theme-primary: 主题主色
• --theme-darker: 主题深色
• --theme-dark: 主题更深色
• --theme-success: 成功色
• --theme-warning: 警告色
• --theme-error: 错误色
• --theme-info: 信息色

添加新主题

1. 在 themeConfigs 中添加新主题配置
2. 在 urlThemeMapping 中添加URL匹配规则
3. 重启应用即可生效

// 添加新主题
export const themeConfigs = {
  // ... 现有主题
  custom: {
    name: '自定义主题',
    primary: '#FF6B35',
    darker: '#FF8C69',
    // ... 其他颜色
  }
};

// 添加URL映射
export const urlThemeMapping = {
  // ... 现有映射
  'custom': ['custom.fontree.com', 'my-custom-domain.com']
};

调试和测试

在浏览器控制台中可以看到主题切换的日志信息：

当前URL: http://localhost:3000
当前hostname: localhost
匹配到主题: dev (开发环境主题)
CSS变量已更新: {primary: "#13C2C2", ...}
主题系统初始化完成: {...}

注意事项

1. 主题系统会在应用启动时自动初始化
2. URL匹配是模糊匹配，会检查hostname和完整URL
3. 如果没有匹配到任何规则，会使用默认主题
4. 主题切换会同时更新CSS变量和UI框架配置
5. 所有主题变化都会触发 themeChanged 事件

扩展功能

• 可以添加主题持久化存储
• 可以添加主题预览功能
• 可以集成用户偏好设置
• 可以添加主题动画过渡效果