From adcec30f2ec82732404f91c2c8a094caa9ae1f4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A1=E8=8B=A5?= <karuo@MacBook-Pro.local>
Date: Sun, 8 Mar 2026 17:20:52 +0800
Subject: [PATCH] =?UTF-8?q?sync:=20soul-admin=20=E9=A1=B5=E9=9D=A2=20|=20?=
 =?UTF-8?q?=E5=8E=9F=E5=9B=A0:=20=E5=89=8D=E7=AB=AF=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 soul-admin/src/pages/content/ContentPage.tsx | 158 +++++++++++++++----
 1 file changed, 123 insertions(+), 35 deletions(-)

diff --git a/soul-admin/src/pages/content/ContentPage.tsx b/soul-admin/src/pages/content/ContentPage.tsx
index 301a34ed..3bdd2af7 100644
--- a/soul-admin/src/pages/content/ContentPage.tsx
+++ b/soul-admin/src/pages/content/ContentPage.tsx
@@ -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>