forked from gxwebsoft/mp-10550
114 lines
3.0 KiB
TypeScript
114 lines
3.0 KiB
TypeScript
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">
|
||
预览
|
||
</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
|