225 lines
8.9 KiB
TypeScript
225 lines
8.9 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Switch } from "@/components/ui/switch"
|
|
import { Slider } from "@/components/ui/slider"
|
|
import { useStore } from "@/lib/store"
|
|
import { Save, Settings, Users, DollarSign } from "lucide-react"
|
|
|
|
export default function SettingsPage() {
|
|
const { settings, updateSettings } = useStore()
|
|
const [localSettings, setLocalSettings] = useState({
|
|
sectionPrice: settings.sectionPrice,
|
|
baseBookPrice: settings.baseBookPrice,
|
|
distributorShare: settings.distributorShare,
|
|
authorInfo: settings.authorInfo,
|
|
})
|
|
|
|
useEffect(() => {
|
|
setLocalSettings({
|
|
sectionPrice: settings.sectionPrice,
|
|
baseBookPrice: settings.baseBookPrice,
|
|
distributorShare: settings.distributorShare,
|
|
authorInfo: settings.authorInfo,
|
|
})
|
|
}, [settings])
|
|
|
|
const handleSave = () => {
|
|
updateSettings(localSettings)
|
|
alert("设置已保存！")
|
|
}
|
|
|
|
return (
|
|
<div className="p-8 max-w-4xl mx-auto">
|
|
<div className="flex justify-between items-center mb-8">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-white">系统设置</h2>
|
|
<p className="text-gray-400 mt-1">配置全站基础参数与开关</p>
|
|
</div>
|
|
<Button onClick={handleSave} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
|
|
<Save className="w-4 h-4 mr-2" />
|
|
保存设置
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
{/* 基础信息 */}
|
|
<Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
|
|
<CardHeader>
|
|
<CardTitle className="text-white flex items-center gap-2">
|
|
<Settings className="w-5 h-5 text-[#38bdac]" />
|
|
基础信息
|
|
</CardTitle>
|
|
<CardDescription className="text-gray-400">网站显示的基本信息配置</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="author-name" className="text-gray-300">
|
|
主理人名称
|
|
</Label>
|
|
<Input
|
|
id="author-name"
|
|
className="bg-[#0a1628] border-gray-700 text-white"
|
|
value={localSettings.authorInfo.name}
|
|
onChange={(e) =>
|
|
setLocalSettings((prev) => ({
|
|
...prev,
|
|
authorInfo: { ...prev.authorInfo, name: e.target.value },
|
|
}))
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="live-time" className="text-gray-300">
|
|
直播时间
|
|
</Label>
|
|
<Input
|
|
id="live-time"
|
|
className="bg-[#0a1628] border-gray-700 text-white"
|
|
value={localSettings.authorInfo.liveTime}
|
|
onChange={(e) =>
|
|
setLocalSettings((prev) => ({
|
|
...prev,
|
|
authorInfo: { ...prev.authorInfo, liveTime: e.target.value },
|
|
}))
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="description" className="text-gray-300">
|
|
简介描述
|
|
</Label>
|
|
<Input
|
|
id="description"
|
|
className="bg-[#0a1628] border-gray-700 text-white"
|
|
value={localSettings.authorInfo.description}
|
|
onChange={(e) =>
|
|
setLocalSettings((prev) => ({
|
|
...prev,
|
|
authorInfo: { ...prev.authorInfo, description: e.target.value },
|
|
}))
|
|
}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 价格设置 */}
|
|
<Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
|
|
<CardHeader>
|
|
<CardTitle className="text-white flex items-center gap-2">
|
|
<DollarSign className="w-5 h-5 text-[#38bdac]" />
|
|
价格设置
|
|
</CardTitle>
|
|
<CardDescription className="text-gray-400">配置书籍和章节的定价</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label className="text-gray-300">单节价格 (元)</Label>
|
|
<Input
|
|
type="number"
|
|
className="bg-[#0a1628] border-gray-700 text-white"
|
|
value={localSettings.sectionPrice}
|
|
onChange={(e) =>
|
|
setLocalSettings((prev) => ({
|
|
...prev,
|
|
sectionPrice: Number.parseFloat(e.target.value) || 1,
|
|
}))
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label className="text-gray-300">整本价格 (元)</Label>
|
|
<Input
|
|
type="number"
|
|
className="bg-[#0a1628] border-gray-700 text-white"
|
|
value={localSettings.baseBookPrice}
|
|
onChange={(e) =>
|
|
setLocalSettings((prev) => ({
|
|
...prev,
|
|
baseBookPrice: Number.parseFloat(e.target.value) || 9.9,
|
|
}))
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 分销设置 */}
|
|
<Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
|
|
<CardHeader>
|
|
<CardTitle className="text-white flex items-center gap-2">
|
|
<Users className="w-5 h-5 text-[#38bdac]" />
|
|
分销设置
|
|
</CardTitle>
|
|
<CardDescription className="text-gray-400">配置分销比例和奖励规则</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center">
|
|
<Label className="text-gray-300">分销者分成比例</Label>
|
|
<span className="text-2xl font-bold text-[#38bdac]">{localSettings.distributorShare}%</span>
|
|
</div>
|
|
<Slider
|
|
value={[localSettings.distributorShare]}
|
|
onValueChange={([value]) =>
|
|
setLocalSettings((prev) => ({
|
|
...prev,
|
|
distributorShare: value,
|
|
}))
|
|
}
|
|
max={100}
|
|
step={5}
|
|
className="w-full"
|
|
/>
|
|
<div className="flex justify-between text-sm text-gray-400">
|
|
<span>作者获得: {100 - localSettings.distributorShare}%</span>
|
|
<span>分销者获得: {localSettings.distributorShare}%</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 功能开关 */}
|
|
<Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
|
|
<CardHeader>
|
|
<CardTitle className="text-white">功能开关</CardTitle>
|
|
<CardDescription className="text-gray-400">控制系统核心模块的启用状态</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="maintenance-mode" className="flex flex-col space-y-1">
|
|
<span className="text-white">维护模式</span>
|
|
<span className="font-normal text-xs text-gray-500">启用后前台将显示维护中页面</span>
|
|
</Label>
|
|
<Switch id="maintenance-mode" />
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="payment-enabled" className="flex flex-col space-y-1">
|
|
<span className="text-white">全站支付</span>
|
|
<span className="font-normal text-xs text-gray-500">关闭后所有支付功能将暂停</span>
|
|
</Label>
|
|
<Switch id="payment-enabled" defaultChecked />
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="referral-enabled" className="flex flex-col space-y-1">
|
|
<span className="text-white">分销系统</span>
|
|
<span className="font-normal text-xs text-gray-500">是否允许用户生成邀请链接</span>
|
|
</Label>
|
|
<Switch id="referral-enabled" defaultChecked />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|