diff --git a/soul-admin/src/pages/content/ContentPage.tsx b/soul-admin/src/pages/content/ContentPage.tsx
index a309ecdd..7e27cde0 100644
--- a/soul-admin/src/pages/content/ContentPage.tsx
+++ b/soul-admin/src/pages/content/ContentPage.tsx
@@ -36,6 +36,11 @@ import {
   Plus,
   Image as ImageIcon,
   Search,
+  Trophy,
+  ChevronLeft,
+  ChevronRight as ChevronRightIcon,
+  Pin,
+  Star,
 } from 'lucide-react'
 import { get, put, post, del } from '@/api/client'
 import { ChapterTree } from './ChapterTree'
@@ -206,12 +211,20 @@ export function ContentPage() {
   const [rankingWeights, setRankingWeights] = useState({ readWeight: 0.5, recencyWeight: 0.3, payWeight: 0.2 })
   const [rankingWeightsLoading, setRankingWeightsLoading] = useState(false)
   const [rankingWeightsSaving, setRankingWeightsSaving] = useState(false)
+  const [rankingPage, setRankingPage] = useState(1)
+  const [pinnedSectionIds, setPinnedSectionIds] = useState<string[]>([])
+  const [pinnedLoading, setPinnedLoading] = useState(false)
+  const [previewPercent, setPreviewPercent] = useState(20)
+  const [previewPercentLoading, setPreviewPercentLoading] = useState(false)
+  const [previewPercentSaving, setPreviewPercentSaving] = useState(false)
 
   const tree = buildTree(sectionsList)
   const totalSections = sectionsList.length
 
   const rankedSections = [...sectionsList].sort((a, b) => (b.hotScore ?? 0) - (a.hotScore ?? 0))
   const RANKING_PAGE_SIZE = 10
+  const rankingTotalPages = Math.max(1, Math.ceil(rankedSections.length / RANKING_PAGE_SIZE))
+  const rankingPageSections = rankedSections.slice((rankingPage - 1) * RANKING_PAGE_SIZE, rankingPage * RANKING_PAGE_SIZE)
 
   const loadList = async () => {
     setLoading(true)