forked from gxwebsoft/mp-10550
feat(theme): 实现主题切换系统并优化经销商相关页面
- 新增主题切换系统，支持智能主题和手动选择 - 更新经销商首页、团队、订单、提现等页面样式 - 添加主题相关的Hook和样式工具函数 - 优化部分组件样式以适配新主题
This commit is contained in:
191
docs/THEME_SYSTEM_GUIDE.md
Normal file
191
docs/THEME_SYSTEM_GUIDE.md
Normal file
@@ -0,0 +1,191 @@
|
||||
# 🎨 主题切换系统使用指南
|
||||
|
||||
## 📖 功能概述
|
||||
|
||||
我们为你的小程序实现了一套完整的主题切换系统，用户可以选择不同的渐变主题来个性化界面。
|
||||
|
||||
## 🎯 功能特点
|
||||
|
||||
### ✨ 智能主题
|
||||
- **自动选择**：根据用户ID自动分配个性化主题
|
||||
- **8种精美主题**：海洋蓝紫、日落橙红、清新蓝绿、自然绿青、温暖橙黄、梦幻紫粉、经典蓝白、优雅灰黑
|
||||
- **持久化存储**：用户选择会自动保存
|
||||
|
||||
### 🎨 手动选择
|
||||
- **实时预览**：选择主题时立即看到效果
|
||||
- **一键保存**：保存后自动返回上级页面
|
||||
- **全局应用**：主题会应用到所有支持的页面
|
||||
|
||||
## 🚀 如何使用
|
||||
|
||||
### 1. 访问主题设置页面
|
||||
|
||||
用户可以通过以下方式进入主题设置：
|
||||
|
||||
```javascript
|
||||
// 在任何页面中跳转到主题设置
|
||||
Taro.navigateTo({
|
||||
url: '/user/theme/index'
|
||||
})
|
||||
```
|
||||
|
||||
### 2. 在用户中心添加入口
|
||||
|
||||
你可以在用户中心页面添加"主题设置"入口：
|
||||
|
||||
```jsx
|
||||
<Cell
|
||||
title="主题设置"
|
||||
extra="个性化界面"
|
||||
onClick={() => Taro.navigateTo({ url: '/user/theme/index' })}
|
||||
/>
|
||||
```
|
||||
|
||||
### 3. 在组件中使用主题
|
||||
|
||||
#### 使用 useThemeStyles Hook
|
||||
|
||||
```jsx
|
||||
import { useThemeStyles } from '@/hooks/useTheme'
|
||||
|
||||
const MyComponent = () => {
|
||||
const themeStyles = useThemeStyles()
|
||||
|
||||
return (
|
||||
<View style={themeStyles.primaryBackground}>
|
||||
<Text style={{ color: themeStyles.textColor }}>
|
||||
这里会应用当前主题的样式
|
||||
</Text>
|
||||
<Button style={themeStyles.primaryButton}>
|
||||
主题按钮
|
||||
</Button>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
#### 使用 useTheme Hook
|
||||
|
||||
```jsx
|
||||
import { useTheme } from '@/hooks/useTheme'
|
||||
|
||||
const MyComponent = () => {
|
||||
const { currentTheme, setTheme, isAutoTheme } = useTheme()
|
||||
|
||||
return (
|
||||
<View style={{ background: currentTheme.background }}>
|
||||
<Text style={{ color: currentTheme.textColor }}>
|
||||
当前主题：{currentTheme.description}
|
||||
</Text>
|
||||
{isAutoTheme && <Text>使用智能主题</Text>}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## 🎨 可用主题列表
|
||||
|
||||
| 主题名称 | 主色调 | 描述 | 适用场景 |
|
||||
|---------|--------|------|----------|
|
||||
| ocean | 蓝紫色 | 海洋蓝紫 - 科技感与专业感 | 商务、科技类应用 |
|
||||
| sunset | 橙红色 | 日落橙红 - 活力与热情 | 社交、娱乐类应用 |
|
||||
| fresh | 蓝绿色 | 清新蓝绿 - 清新与活力 | 健康、运动类应用 |
|
||||
| nature | 绿青色 | 自然绿青 - 生机与成长 | 环保、教育类应用 |
|
||||
| warm | 橙黄色 | 温暖橙黄 - 温馨与舒适 | 生活、家居类应用 |
|
||||
| dream | 紫粉色 | 梦幻紫粉 - 浪漫与梦幻 | 时尚、美妆类应用 |
|
||||
| classic | 蓝白色 | 经典蓝白 - 简约与专业 | 办公、工具类应用 |
|
||||
| elegant | 灰黑色 | 优雅灰黑 - 高端与品质 | 奢侈品、艺术类应用 |
|
||||
|
||||
## 🔧 开发者指南
|
||||
|
||||
### 添加新主题
|
||||
|
||||
在 `src/styles/gradients.ts` 中添加新主题：
|
||||
|
||||
```typescript
|
||||
export const gradientThemes: GradientTheme[] = [
|
||||
// 现有主题...
|
||||
{
|
||||
name: 'custom',
|
||||
primary: '#your-primary-color',
|
||||
secondary: '#your-secondary-color',
|
||||
background: 'linear-gradient(135deg, #color1 0%, #color2 100%)',
|
||||
textColor: '#ffffff',
|
||||
description: '自定义主题 - 你的描述'
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### 在新页面中应用主题
|
||||
|
||||
```jsx
|
||||
import { useThemeStyles } from '@/hooks/useTheme'
|
||||
|
||||
const NewPage = () => {
|
||||
const themeStyles = useThemeStyles()
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-50">
|
||||
{/* 使用主题背景的头部 */}
|
||||
<View
|
||||
className="px-4 py-6 relative overflow-hidden"
|
||||
style={themeStyles.primaryBackground}
|
||||
>
|
||||
<Text className="text-lg font-bold" style={{ color: themeStyles.textColor }}>
|
||||
页面标题
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 其他内容 */}
|
||||
<View className="p-4">
|
||||
<Button style={themeStyles.primaryButton}>
|
||||
主题按钮
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## 📱 用户体验
|
||||
|
||||
### 智能主题算法
|
||||
|
||||
系统会根据用户ID生成一个稳定的主题选择：
|
||||
|
||||
```typescript
|
||||
// 用户ID为 "12345" 的用户总是会得到相同的主题
|
||||
const theme = gradientUtils.getThemeByUserId("12345")
|
||||
```
|
||||
|
||||
### 主题持久化
|
||||
|
||||
- 用户选择会保存在本地存储中
|
||||
- 重新打开应用时会自动应用上次选择的主题
|
||||
- 支持"智能主题"和"手动选择"两种模式
|
||||
|
||||
## 🎉 效果展示
|
||||
|
||||
### 智能主题模式
|
||||
- 每个用户都有独特的个性化主题
|
||||
- 基于用户ID算法分配，确保稳定性
|
||||
- 提升用户归属感和个性化体验
|
||||
|
||||
### 手动选择模式
|
||||
- 用户可以自由选择喜欢的主题
|
||||
- 实时预览效果
|
||||
- 一键保存并应用
|
||||
|
||||
## 🔄 更新日志
|
||||
|
||||
### v1.0.0 (2025-01-18)
|
||||
- ✅ 实现8种精美渐变主题
|
||||
- ✅ 智能主题自动分配算法
|
||||
- ✅ 主题切换页面UI
|
||||
- ✅ useTheme 和 useThemeStyles Hooks
|
||||
- ✅ 主题持久化存储
|
||||
- ✅ 小程序兼容性优化
|
||||
|
||||
---
|
||||
|
||||
**现在你的用户可以享受个性化的主题体验了！** 🎨✨
|
||||
Reference in New Issue
Block a user