Update remote soul-content with local content

app/my/purchases/page.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import Link from "next/link"
+import { ChevronLeft, BookOpen, CheckCircle } from "lucide-react"
+import { useStore } from "@/lib/store"
+import { bookData, getAllSections } from "@/lib/book-data"
+
+export default function MyPurchasesPage() {
+  const { user, isLoggedIn } = useStore()
+
+  if (!isLoggedIn || !user) {
+    return (
+      <div className="min-h-screen bg-[#0a1628] text-white flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-gray-400 mb-4">请先登录</p>
+          <Link href="/" className="text-[#38bdac] hover:underline">
+            返回首页
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  const allSections = getAllSections()
+  const purchasedCount = user.hasFullBook ? allSections.length : user.purchasedSections.length
+
+  return (
+    <div className="min-h-screen bg-[#0a1628] text-white">
+      {/* Header */}
+      <header className="sticky top-0 z-50 bg-[#0a1628]/90 backdrop-blur-md border-b border-gray-800">
+        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center">
+          <Link href="/" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
+            <ChevronLeft className="w-5 h-5" />
+            <span>返回</span>
+          </Link>
+          <h1 className="flex-1 text-center text-lg font-semibold">我的购买</h1>
+          <div className="w-16" />
+        </div>
+      </header>
+
+      <main className="max-w-4xl mx-auto px-4 py-8">
+        {/* Stats */}
+        <div className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-6 border border-gray-700/50 mb-8">
+          <div className="grid grid-cols-2 gap-6">
+            <div className="text-center">
+              <p className="text-3xl font-bold text-white">{purchasedCount}</p>
+              <p className="text-gray-400 text-sm">已购买章节</p>
+            </div>
+            <div className="text-center">
+              <p className="text-3xl font-bold text-[#38bdac]">
+                {user.hasFullBook ? "全书" : `${purchasedCount}/${allSections.length}`}
+              </p>
+              <p className="text-gray-400 text-sm">{user.hasFullBook ? "已解锁" : "进度"}</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Purchased sections */}
+        {user.hasFullBook ? (
+          <div className="bg-gradient-to-r from-[#38bdac]/20 to-[#0f2137] rounded-xl p-6 border border-[#38bdac]/30 text-center mb-8">
+            <CheckCircle className="w-12 h-12 text-[#38bdac] mx-auto mb-3" />
+            <h3 className="text-xl font-semibold text-white mb-2">您已购买整本书</h3>
+            <p className="text-gray-400">全部55节内容已解锁,可随时阅读</p>
+          </div>
+        ) : user.purchasedSections.length === 0 ? (
+          <div className="text-center py-12">
+            <BookOpen className="w-16 h-16 text-gray-600 mx-auto mb-4" />
+            <p className="text-gray-400 mb-4">您还没有购买任何章节</p>
+            <Link href="/chapters" className="text-[#38bdac] hover:underline">
+              去浏览章节
+            </Link>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <h2 className="text-gray-400 text-sm mb-4">已购买的章节</h2>
+            {bookData.map((part) => {
+              const purchasedInPart = part.chapters.flatMap((c) =>
+                c.sections.filter((s) => user.purchasedSections.includes(s.id)),
+              )
+
+              if (purchasedInPart.length === 0) return null
+
+              return (
+                <div key={part.id} className="bg-[#0f2137]/40 rounded-xl border border-gray-800/50 overflow-hidden">
+                  <div className="px-4 py-3 bg-[#0a1628]/50">
+                    <p className="text-gray-400 text-sm">{part.title}</p>
+                  </div>
+                  <div className="divide-y divide-gray-800/30">
+                    {purchasedInPart.map((section) => (
+                      <Link
+                        key={section.id}
+                        href={`/read/${section.id}`}
+                        className="flex items-center gap-3 px-4 py-3 hover:bg-[#0f2137]/40 transition-colors"
+                      >
+                        <CheckCircle className="w-4 h-4 text-[#38bdac]" />
+                        <span className="text-gray-400 font-mono text-sm">{section.id}</span>
+                        <span className="text-gray-300">{section.title}</span>
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}