107 lines
4.1 KiB
TypeScript
107 lines
4.1 KiB
TypeScript
import { motion } from 'framer-motion'
|
||
import { Sun, Moon, Palette } from 'lucide-react'
|
||
import { useAppStore } from '@/stores/useAppStore'
|
||
|
||
export function SettingsPage() {
|
||
const { darkMode, setDarkMode } = useAppStore()
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">设置</h1>
|
||
<p className="text-gray-500 dark:text-gray-400 mt-1">
|
||
自定义您的使用体验
|
||
</p>
|
||
</div>
|
||
|
||
{/* 主题设置 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden"
|
||
>
|
||
<div className="flex items-center gap-3 px-6 py-4 border-b border-gray-100 dark:border-gray-700">
|
||
<Palette size={20} className="text-indigo-600 dark:text-indigo-400" />
|
||
<h2 className="font-semibold text-gray-900 dark:text-white">外观设置</h2>
|
||
</div>
|
||
<div className="p-6">
|
||
<div className="mb-4">
|
||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
主题模式
|
||
</label>
|
||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||
选择您喜欢的界面主题
|
||
</p>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-4 max-w-xs">
|
||
{[
|
||
{ value: false, label: '浅色', icon: Sun },
|
||
{ value: true, label: '深色', icon: Moon },
|
||
].map((option) => {
|
||
const Icon = option.icon
|
||
const isSelected = darkMode === option.value
|
||
return (
|
||
<button
|
||
key={option.label}
|
||
onClick={() => setDarkMode(option.value)}
|
||
className={`flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all ${
|
||
isSelected
|
||
? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/30'
|
||
: 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'
|
||
}`}
|
||
>
|
||
<Icon
|
||
size={24}
|
||
className={isSelected ? 'text-indigo-600 dark:text-indigo-400' : 'text-gray-500'}
|
||
/>
|
||
<span
|
||
className={`text-sm font-medium ${
|
||
isSelected ? 'text-indigo-600 dark:text-indigo-400' : 'text-gray-700 dark:text-gray-300'
|
||
}`}
|
||
>
|
||
{option.label}
|
||
</span>
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* 联系方式 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.1 }}
|
||
className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6"
|
||
>
|
||
<h2 className="font-semibold text-gray-900 dark:text-white mb-4">联系作者</h2>
|
||
<div className="flex flex-col items-center gap-3">
|
||
<img
|
||
src="/wechat-qrcode.jpg"
|
||
alt="微信二维码"
|
||
className="w-48 rounded-lg border border-gray-200 dark:border-gray-600"
|
||
/>
|
||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||
扫一扫上面的二维码图案，加我为朋友
|
||
</p>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* 关于 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.2 }}
|
||
className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6"
|
||
>
|
||
<h2 className="font-semibold text-gray-900 dark:text-white mb-4">关于 ITTOView</h2>
|
||
<div className="space-y-2 text-sm text-gray-500 dark:text-gray-400">
|
||
<p>版本：1.0.0</p>
|
||
<p>包含 49 个项目管理过程的完整 ITTO 数据</p>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
)
|
||
}
|