You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.1 KiB
113 lines
3.1 KiB
import React, { useState } from 'react'
|
|
import { View, Text } from '@tarojs/components'
|
|
import { Popup, Button } from '@nutui/nutui-react-taro'
|
|
import { gradientThemes, GradientTheme } from '@/styles/gradients'
|
|
|
|
interface GradientThemeSelectorProps {
|
|
visible: boolean
|
|
onClose: () => void
|
|
onSelect: (theme: GradientTheme) => void
|
|
currentTheme?: GradientTheme
|
|
}
|
|
|
|
const GradientThemeSelector: React.FC<GradientThemeSelectorProps> = ({
|
|
visible,
|
|
onClose,
|
|
onSelect,
|
|
currentTheme
|
|
}) => {
|
|
const [selectedTheme, setSelectedTheme] = useState<GradientTheme | null>(currentTheme || null)
|
|
|
|
const handleThemeSelect = (theme: GradientTheme) => {
|
|
setSelectedTheme(theme)
|
|
}
|
|
|
|
const handleConfirm = () => {
|
|
if (selectedTheme) {
|
|
onSelect(selectedTheme)
|
|
onClose()
|
|
}
|
|
}
|
|
|
|
const renderThemeItem = (theme: GradientTheme) => {
|
|
const isSelected = selectedTheme?.name === theme.name
|
|
|
|
return (
|
|
<View
|
|
key={theme.name}
|
|
className={`p-3 rounded-lg border-2 ${isSelected ? 'border-blue-500' : 'border-gray-200'}`}
|
|
onClick={() => handleThemeSelect(theme)}
|
|
>
|
|
{/* 渐变预览 */}
|
|
<View
|
|
className="w-full h-16 rounded-lg mb-2"
|
|
style={{
|
|
background: theme.background
|
|
}}
|
|
>
|
|
<View className="w-full h-full flex items-center justify-center">
|
|
<Text className="text-white text-xs font-bold drop-shadow-sm">
|
|
预览
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* 主题信息 */}
|
|
<View className="text-center">
|
|
<Text className="text-sm font-semibold text-gray-800 mb-1">
|
|
{theme.description.split(' - ')[0]}
|
|
</Text>
|
|
<Text className="text-xs text-gray-500">
|
|
{theme.description.split(' - ')[1]}
|
|
</Text>
|
|
</View>
|
|
|
|
{/* 选中标识 */}
|
|
{isSelected && (
|
|
<View className="absolute top-1 right-1 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
|
|
<Text className="text-white text-xs">✓</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Popup
|
|
visible={visible}
|
|
position="bottom"
|
|
onClose={onClose}
|
|
style={{ height: '70vh' }}
|
|
>
|
|
<View className="p-4">
|
|
<View className="flex items-center justify-between mb-4">
|
|
<Text className="text-lg font-bold">选择主题</Text>
|
|
<Button size="small" fill="outline" onClick={onClose}>
|
|
取消
|
|
</Button>
|
|
</View>
|
|
|
|
<Text className="text-sm text-gray-600 mb-4">
|
|
选择您喜欢的渐变主题，让界面更符合您的个人风格
|
|
</Text>
|
|
|
|
{/* 主题网格 */}
|
|
<View className="grid grid-cols-2 gap-3 mb-6">
|
|
{gradientThemes.map(renderThemeItem)}
|
|
</View>
|
|
|
|
{/* 确认按钮 */}
|
|
<Button
|
|
type="primary"
|
|
block
|
|
disabled={!selectedTheme}
|
|
onClick={handleConfirm}
|
|
>
|
|
应用主题
|
|
</Button>
|
|
</View>
|
|
</Popup>
|
|
)
|
|
}
|
|
|
|
export default GradientThemeSelector
|