178 lines
3.7 KiB
Markdown
178 lines
3.7 KiB
Markdown
# 主题系统使用文档
|
||
|
||
## 概述
|
||
|
||
这个主题系统可以根据网站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` 事件
|
||
|
||
## 扩展功能
|
||
|
||
- 可以添加主题持久化存储
|
||
- 可以添加主题预览功能
|
||
- 可以集成用户偏好设置
|
||
- 可以添加主题动画过渡效果
|