sync: soul-admin 页面 | 原因: 前端页面修改
This commit is contained in:
卡若
@@ -1643,45 +1643,133 @@ export function ContentPage() {
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="hooks" className="space-y-4">
|
||||
<TabsContent value="ranking" className="space-y-4">
|
||||
{/* 内容显示规则 */}
|
||||
<Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">引流钩子配置</CardTitle>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-white text-base flex items-center gap-2">
|
||||
<Settings2 className="w-4 h-4 text-[#38bdac]" />
|
||||
内容显示规则
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid w-full max-w-sm items-center gap-1.5">
|
||||
<Label htmlFor="hook-chapter" className="text-gray-300">
|
||||
触发章节
|
||||
</Label>
|
||||
<Select defaultValue="3">
|
||||
<SelectTrigger id="hook-chapter" className="bg-[#0a1628] border-gray-700 text-white">
|
||||
<SelectValue placeholder="选择章节" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-[#0f2137] border-gray-700">
|
||||
<SelectItem value="1" className="text-white hover:bg-[#38bdac]/20 focus:bg-[#38bdac]/20">
|
||||
第一章
|
||||
</SelectItem>
|
||||
<SelectItem value="2" className="text-white hover:bg-[#38bdac]/20 focus:bg-[#38bdac]/20">
|
||||
第二章
|
||||
</SelectItem>
|
||||
<SelectItem value="3" className="text-white hover:bg-[#38bdac]/20 focus:bg-[#38bdac]/20">
|
||||
第三章 (默认)
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="text-gray-400 text-sm whitespace-nowrap">未付费预览比例</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="1"
|
||||
max="100"
|
||||
className="bg-[#0a1628] border-gray-700 text-white w-20"
|
||||
value={previewPercent}
|
||||
onChange={(e) => setPreviewPercent(Math.max(1, Math.min(100, Number(e.target.value) || 20)))}
|
||||
disabled={previewPercentLoading}
|
||||
/>
|
||||
<span className="text-gray-500 text-sm">%</span>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleSavePreviewPercent}
|
||||
disabled={previewPercentSaving}
|
||||
className="bg-[#38bdac] hover:bg-[#2da396] text-white"
|
||||
>
|
||||
{previewPercentSaving ? '保存中...' : '保存'}
|
||||
</Button>
|
||||
<span className="text-xs text-gray-500">小程序未付费用户默认显示文章前 {previewPercent}% 内容</span>
|
||||
</div>
|
||||
<div className="grid w-full gap-1.5">
|
||||
<Label htmlFor="message" className="text-gray-300">
|
||||
引流文案
|
||||
</Label>
|
||||
<Textarea
|
||||
placeholder="输入引导用户加群的文案..."
|
||||
id="message"
|
||||
className="bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500"
|
||||
defaultValue="阅读更多精彩内容，请加入Soul创业实验派对群..."
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 排行榜 */}
|
||||
<Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-white text-base flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-amber-400" />
|
||||
内容排行榜
|
||||
<span className="text-xs text-gray-500 font-normal ml-2">按热度排行 · 共 {rankedSections.length} 节</span>
|
||||
</CardTitle>
|
||||
<div className="flex items-center gap-1 text-sm">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={rankingPage <= 1}
|
||||
onClick={() => setRankingPage((p) => Math.max(1, p - 1))}
|
||||
className="text-gray-400 hover:text-white h-7 w-7 p-0"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
<span className="text-gray-400 min-w-[60px] text-center">{rankingPage} / {rankingTotalPages}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={rankingPage >= rankingTotalPages}
|
||||
onClick={() => setRankingPage((p) => Math.min(rankingTotalPages, p + 1))}
|
||||
className="text-gray-400 hover:text-white h-7 w-7 p-0"
|
||||
>
|
||||
<ChevronRightIcon className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-0">
|
||||
{/* 表头 */}
|
||||
<div className="grid grid-cols-[40px_40px_1fr_80px_80px_80px_60px] gap-2 px-3 py-2 text-xs text-gray-500 border-b border-gray-700/50">
|
||||
<span>排名</span>
|
||||
<span>置顶</span>
|
||||
<span>标题</span>
|
||||
<span className="text-right">点击量</span>
|
||||
<span className="text-right">付款数</span>
|
||||
<span className="text-right">热度</span>
|
||||
<span className="text-right">操作</span>
|
||||
</div>
|
||||
{rankingPageSections.map((s, idx) => {
|
||||
const globalRank = (rankingPage - 1) * RANKING_PAGE_SIZE + idx + 1
|
||||
const isPinned = pinnedSectionIds.includes(s.id)
|
||||
return (
|
||||
<div
|
||||
key={s.id}
|
||||
className={`grid grid-cols-[40px_40px_1fr_80px_80px_80px_60px] gap-2 px-3 py-2.5 items-center border-b border-gray-700/30 hover:bg-[#162840] transition-colors ${isPinned ? 'bg-amber-500/5' : ''}`}
|
||||
>
|
||||
<span className={`text-sm font-bold ${globalRank <= 3 ? 'text-amber-400' : 'text-gray-500'}`}>
|
||||
{globalRank <= 3 ? ['🥇', '🥈', '🥉'][globalRank - 1] : `#${globalRank}`}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={`h-6 w-6 p-0 ${isPinned ? 'text-amber-400' : 'text-gray-600 hover:text-amber-400'}`}
|
||||
onClick={() => handleTogglePin(s.id)}
|
||||
disabled={pinnedLoading}
|
||||
title={isPinned ? '取消置顶' : '强制置顶（精选推荐/首页最新更新）'}
|
||||
>
|
||||
{isPinned ? <Star className="w-3.5 h-3.5 fill-current" /> : <Pin className="w-3.5 h-3.5" />}
|
||||
</Button>
|
||||
<div className="min-w-0">
|
||||
<span className="text-white text-sm truncate block">{s.title}</span>
|
||||
<span className="text-gray-600 text-xs">{s.partTitle} · {s.chapterTitle}</span>
|
||||
</div>
|
||||
<span className="text-right text-sm text-blue-400 font-mono">{s.clickCount ?? 0}</span>
|
||||
<span className="text-right text-sm text-green-400 font-mono">{s.payCount ?? 0}</span>
|
||||
<span className="text-right text-sm text-amber-400 font-mono">{(s.hotScore ?? 0).toFixed(1)}</span>
|
||||
<div className="text-right">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-500 hover:text-[#38bdac] h-6 px-1"
|
||||
onClick={() => handleShowSectionOrders({ id: s.id, title: s.title, price: s.price })}
|
||||
title="付款记录"
|
||||
>
|
||||
<BookOpen className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{rankingPageSections.length === 0 && (
|
||||
<div className="py-8 text-center text-gray-500">暂无数据</div>
|
||||
)}
|
||||
</div>
|
||||
<Button className="bg-[#38bdac] hover:bg-[#2da396] text-white">保存配置</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
Reference in New Issue
Block a user