# 主题系统使用文档

## 概述

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

## 功能特性

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

## 配置文件

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

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

### URL映射规则

```javascript
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. 手动切换主题

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

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

### 3. 在Vue组件中使用

```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. 使用主题切换组件

```vue
<template>
  <ThemeSwitch />
</template>

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

### 5. 在CSS中使用主题变量

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

### 6. 监听主题变化

```javascript
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. 重启应用即可生效

```javascript
// 添加新主题
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` 事件

## 扩展功能

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