Update remote soul-content with local content

app/about/page.tsx

@@ -0,0 +1,152 @@
+"use client"
+
+import Link from "next/link"
+import { ChevronLeft, Clock, MessageCircle, BookOpen, Users, Award, TrendingUp } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useState } from "react"
+import { QRCodeModal } from "@/components/modules/marketing/qr-code-modal"
+import { useStore } from "@/lib/store"
+
+export default function AboutPage() {
+  const [showQRModal, setShowQRModal] = useState(false)
+  const { settings } = useStore()
+  const authorInfo = settings?.authorInfo || {
+    name: "卡若",
+    description: "连续创业者,私域运营专家",
+    liveTime: "06:00-09:00",
+    platform: "Soul派对房",
+  }
+
+  const milestones = [
+    { year: "2012", event: "开始做游戏推广,从魔兽世界外挂代理起步" },
+    { year: "2015", event: "转型电商,做天猫虚拟充值,月流水380万" },
+    { year: "2017", event: "团队扩张到200人,年流水3000万" },
+    { year: "2018", event: "公司破产,负债数百万,开始全国旅行反思" },
+    { year: "2019", event: "重新出发,专注私域运营和个人IP" },
+    { year: "2024", event: "在Soul派对房每日直播,分享真实商业故事" },
+  ]
+
+  const stats = [
+    { icon: BookOpen, value: "55+", label: "真实案例" },
+    { icon: Users, value: "10000+", label: "派对房听众" },
+    { icon: Award, value: "15年", label: "创业经验" },
+    { icon: TrendingUp, value: "3000万", label: "最高年流水" },
+  ]
+
+  return (
+    <div className="min-h-screen bg-[#0a1628] text-white pb-20">
+      {/* 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">
+        {/* Author Card */}
+        <div className="bg-gradient-to-br from-[#38bdac]/20 to-[#0f2137] rounded-2xl p-8 border border-[#38bdac]/30 mb-8">
+          <div className="flex flex-col md:flex-row items-center gap-6">
+            <div className="w-24 h-24 rounded-full bg-gradient-to-br from-[#38bdac] to-[#1a5a50] flex items-center justify-center text-4xl font-bold text-white">
+              {authorInfo.name.charAt(0)}
+            </div>
+            <div className="text-center md:text-left flex-1">
+              <h2 className="text-2xl font-bold text-white mb-2">{authorInfo.name}</h2>
+              <p className="text-gray-400 mb-4">{authorInfo.description}</p>
+              <div className="flex items-center justify-center md:justify-start gap-4 text-sm">
+                <span className="flex items-center gap-1 text-[#38bdac]">
+                  <Clock className="w-4 h-4" />
+                  每日 {authorInfo.liveTime}
+                </span>
+                <span className="flex items-center gap-1 text-gray-400">
+                  <MessageCircle className="w-4 h-4" />
+                  {authorInfo.platform}
+                </span>
+              </div>
+            </div>
+            <Button onClick={() => setShowQRModal(true)} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
+              <MessageCircle className="w-4 h-4 mr-2" />
+              加入派对群
+            </Button>
+          </div>
+        </div>
+
+        {/* Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+          {stats.map((stat, index) => (
+            <div
+              key={index}
+              className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-4 border border-gray-700/50 text-center"
+            >
+              <stat.icon className="w-6 h-6 text-[#38bdac] mx-auto mb-2" />
+              <p className="text-2xl font-bold text-white">{stat.value}</p>
+              <p className="text-gray-400 text-sm">{stat.label}</p>
+            </div>
+          ))}
+        </div>
+
+        {/* Introduction */}
+        <div className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-6 border border-gray-700/50 mb-8">
+          <h3 className="text-lg font-semibold text-white mb-4">关于这本书</h3>
+          <div className="space-y-4 text-gray-300 leading-relaxed">
+            <p>"这不是一本教你成功的鸡汤书。"</p>
+            <p>
+              这是我每天早上6点到9点,在Soul派对房和几百个陌生人分享的真实故事。 有人来找项目,有人来找钱,有人来找方向。
+            </p>
+            <p>
+              我见过凌晨四点还在撸运费险的年轻人,见过七十岁还在开滴滴做生意的老人,
+              见过一个月赚七八块却拼命倒卖游戏金币的大学生。
+            </p>
+            <p className="text-[#38bdac] font-semibold">"社会不是靠努力,是靠洞察与选择。"</p>
+            <p>
+              这本书,就是把那些在派对房里讲过的、能让人清醒的故事,整理成文字。每个案例都真实发生过,每个教训都是用钱换来的。
+            </p>
+          </div>
+        </div>
+
+        {/* Timeline */}
+        <div className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-6 border border-gray-700/50 mb-8">
+          <h3 className="text-lg font-semibold text-white mb-6">创业历程</h3>
+          <div className="space-y-4">
+            {milestones.map((item, index) => (
+              <div key={index} className="flex gap-4">
+                <div className="flex flex-col items-center">
+                  <div className="w-3 h-3 rounded-full bg-[#38bdac]" />
+                  {index < milestones.length - 1 && <div className="w-0.5 h-full bg-gray-700 mt-1" />}
+                </div>
+                <div className="pb-4">
+                  <p className="text-[#38bdac] font-semibold">{item.year}</p>
+                  <p className="text-gray-300">{item.event}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* CTA */}
+        <div className="bg-gradient-to-r from-[#38bdac]/10 to-[#1a3a4a]/50 rounded-2xl p-6 border border-[#38bdac]/30 text-center">
+          <h3 className="text-xl font-semibold text-white mb-2">想听更多真实故事?</h3>
+          <p className="text-gray-400 mb-6">每天早上6-9点,卡若在Soul派对房免费分享</p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button onClick={() => setShowQRModal(true)} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
+              <MessageCircle className="w-4 h-4 mr-2" />
+              加入派对群
+            </Button>
+            <Link href="/chapters">
+              <Button variant="outline" className="border-gray-600 text-white hover:bg-gray-700/50 bg-transparent">
+                <BookOpen className="w-4 h-4 mr-2" />
+                开始阅读
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </main>
+
+      <QRCodeModal isOpen={showQRModal} onClose={() => setShowQRModal(false)} />
+    </div>
+  )
+}

app/admin/content/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}

app/admin/content/page.tsx

@@ -0,0 +1,335 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Badge } from "@/components/ui/badge"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { bookData } from "@/lib/book-data"
+import {
+  FileText,
+  BookOpen,
+  Settings2,
+  ChevronRight,
+  CheckCircle,
+  Edit3,
+  Save,
+  X,
+  RefreshCw,
+  Link2,
+} from "lucide-react"
+
+interface EditingSection {
+  id: string
+  title: string
+  price: number
+  content?: string
+}
+
+export default function ContentPage() {
+  const [expandedParts, setExpandedParts] = useState<string[]>(["part-1"])
+  const [editingSection, setEditingSection] = useState<EditingSection | null>(null)
+  const [isSyncing, setIsSyncing] = useState(false)
+  const [feishuDocUrl, setFeishuDocUrl] = useState("")
+  const [showFeishuModal, setShowFeishuModal] = useState(false)
+
+  const togglePart = (partId: string) => {
+    setExpandedParts((prev) => (prev.includes(partId) ? prev.filter((id) => id !== partId) : [...prev, partId]))
+  }
+
+  const totalSections = bookData.reduce(
+    (sum, part) => sum + part.chapters.reduce((cSum, ch) => cSum + ch.sections.length, 0),
+    0,
+  )
+
+  const handleEditSection = (section: { id: string; title: string; price: number }) => {
+    setEditingSection({
+      id: section.id,
+      title: section.title,
+      price: section.price,
+      content: "",
+    })
+  }
+
+  const handleSaveSection = () => {
+    if (editingSection) {
+      // 保存到本地存储或API
+      console.log("[v0] Saving section:", editingSection)
+      alert(`已保存章节: ${editingSection.title}`)
+      setEditingSection(null)
+    }
+  }
+
+  const handleSyncFeishu = async () => {
+    if (!feishuDocUrl) {
+      alert("请输入飞书文档链接")
+      return
+    }
+    setIsSyncing(true)
+    // 模拟同步过程
+    await new Promise((resolve) => setTimeout(resolve, 2000))
+    setIsSyncing(false)
+    setShowFeishuModal(false)
+    alert("飞书文档同步成功！")
+  }
+
+  return (
+    <div className="p-8 max-w-6xl 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">
+            共 {bookData.length} 篇 · {totalSections} 节内容
+          </p>
+        </div>
+        <Button onClick={() => setShowFeishuModal(true)} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
+          <FileText className="w-4 h-4 mr-2" />
+          同步飞书文档
+        </Button>
+      </div>
+
+      {/* 飞书同步弹窗 */}
+      <Dialog open={showFeishuModal} onOpenChange={setShowFeishuModal}>
+        <DialogContent className="bg-[#0f2137] border-gray-700 text-white max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="text-white flex items-center gap-2">
+              <Link2 className="w-5 h-5 text-[#38bdac]" />
+              同步飞书文档
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label className="text-gray-300">飞书文档链接</Label>
+              <Input
+                className="bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500"
+                placeholder="https://xxx.feishu.cn/docx/..."
+                value={feishuDocUrl}
+                onChange={(e) => setFeishuDocUrl(e.target.value)}
+              />
+              <p className="text-xs text-gray-500">请确保文档已开启公开访问权限</p>
+            </div>
+            <div className="bg-[#38bdac]/10 border border-[#38bdac]/30 rounded-lg p-3">
+              <p className="text-[#38bdac] text-sm">
+                同步说明：系统将自动解析飞书文档结构，按照标题层级导入为章节内容。
+              </p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowFeishuModal(false)}
+              className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"
+            >
+              取消
+            </Button>
+            <Button
+              onClick={handleSyncFeishu}
+              disabled={isSyncing}
+              className="bg-[#38bdac] hover:bg-[#2da396] text-white"
+            >
+              {isSyncing ? (
+                <>
+                  <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
+                  同步中...
+                </>
+              ) : (
+                <>
+                  <RefreshCw className="w-4 h-4 mr-2" />
+                  开始同步
+                </>
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 章节编辑弹窗 */}
+      <Dialog open={!!editingSection} onOpenChange={() => setEditingSection(null)}>
+        <DialogContent className="bg-[#0f2137] border-gray-700 text-white max-w-2xl max-h-[80vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-white flex items-center gap-2">
+              <Edit3 className="w-5 h-5 text-[#38bdac]" />
+              编辑章节
+            </DialogTitle>
+          </DialogHeader>
+          {editingSection && (
+            <div className="space-y-4 py-4">
+              <div className="space-y-2">
+                <Label className="text-gray-300">章节标题</Label>
+                <Input
+                  className="bg-[#0a1628] border-gray-700 text-white"
+                  value={editingSection.title}
+                  onChange={(e) => setEditingSection({ ...editingSection, title: e.target.value })}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label className="text-gray-300">价格 (元)</Label>
+                <Input
+                  type="number"
+                  className="bg-[#0a1628] border-gray-700 text-white w-32"
+                  value={editingSection.price}
+                  onChange={(e) => setEditingSection({ ...editingSection, price: Number(e.target.value) })}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label className="text-gray-300">内容预览</Label>
+                <Textarea
+                  className="bg-[#0a1628] border-gray-700 text-white min-h-[200px] placeholder:text-gray-500"
+                  placeholder="此处显示章节内容，支持Markdown格式..."
+                  value={editingSection.content}
+                  onChange={(e) => setEditingSection({ ...editingSection, content: e.target.value })}
+                />
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setEditingSection(null)}
+              className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"
+            >
+              <X className="w-4 h-4 mr-2" />
+              取消
+            </Button>
+            <Button onClick={handleSaveSection} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
+              <Save className="w-4 h-4 mr-2" />
+              保存修改
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Tabs defaultValue="chapters" className="space-y-6">
+        <TabsList className="bg-[#0f2137] border border-gray-700/50 p-1">
+          <TabsTrigger
+            value="chapters"
+            className="data-[state=active]:bg-[#38bdac]/20 data-[state=active]:text-[#38bdac] text-gray-400"
+          >
+            <BookOpen className="w-4 h-4 mr-2" />
+            章节管理
+          </TabsTrigger>
+          <TabsTrigger
+            value="hooks"
+            className="data-[state=active]:bg-[#38bdac]/20 data-[state=active]:text-[#38bdac] text-gray-400"
+          >
+            <Settings2 className="w-4 h-4 mr-2" />
+            钩子配置
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="chapters" className="space-y-4">
+          {bookData.map((part, partIndex) => (
+            <Card key={part.id} className="bg-[#0f2137] border-gray-700/50 shadow-xl overflow-hidden">
+              <CardHeader
+                className="cursor-pointer hover:bg-[#162840] transition-colors"
+                onClick={() => togglePart(part.id)}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <span className="text-[#38bdac] font-mono text-sm">0{partIndex + 1}</span>
+                    <CardTitle className="text-white">{part.title}</CardTitle>
+                    <Badge variant="outline" className="text-gray-400 border-gray-600">
+                      {part.chapters.reduce((sum, ch) => sum + ch.sections.length, 0)} 节
+                    </Badge>
+                  </div>
+                  <ChevronRight
+                    className={`w-5 h-5 text-gray-400 transition-transform ${
+                      expandedParts.includes(part.id) ? "rotate-90" : ""
+                    }`}
+                  />
+                </div>
+              </CardHeader>
+
+              {expandedParts.includes(part.id) && (
+                <CardContent className="pt-0 pb-4">
+                  <div className="space-y-3 pl-8 border-l-2 border-gray-700">
+                    {part.chapters.map((chapter) => (
+                      <div key={chapter.id} className="space-y-2">
+                        <h4 className="font-medium text-gray-300">{chapter.title}</h4>
+                        <div className="space-y-1">
+                          {chapter.sections.map((section) => (
+                            <div
+                              key={section.id}
+                              className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-[#162840] text-sm group transition-colors"
+                            >
+                              <div className="flex items-center gap-2">
+                                <CheckCircle className="w-4 h-4 text-[#38bdac]" />
+                                <span className="text-gray-400">{section.title}</span>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <span className="text-[#38bdac] font-medium">
+                                  {section.price === 0 ? "免费" : `¥${section.price}`}
+                                </span>
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={() => handleEditSection(section)}
+                                  className="text-gray-500 hover:text-[#38bdac] hover:bg-[#38bdac]/10 opacity-0 group-hover:opacity-100 transition-opacity"
+                                >
+                                  <Edit3 className="w-4 h-4 mr-1" />
+                                  编辑
+                                </Button>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              )}
+            </Card>
+          ))}
+        </TabsContent>
+
+        <TabsContent value="hooks" className="space-y-4">
+          <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
+            <CardHeader>
+              <CardTitle className="text-white">引流钩子配置</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>
+              </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创业实验派对群..."
+                />
+              </div>
+              <Button className="bg-[#38bdac] hover:bg-[#2da396] text-white">保存配置</Button>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

app/admin/layout.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import type React from "react"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { LayoutDashboard, FileText, Users, CreditCard, QrCode, Settings, LogOut, Wallet } from "lucide-react"
+import { useStore } from "@/lib/store"
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname()
+  const router = useRouter()
+  const { user, isLoggedIn } = useStore()
+
+  useEffect(() => {
+    if (!isLoggedIn) {
+      // router.push("/my")
+    }
+  }, [isLoggedIn, router])
+
+  const menuItems = [
+    { icon: LayoutDashboard, label: "数据概览", href: "/admin" },
+    { icon: FileText, label: "内容管理", href: "/admin/content" },
+    { icon: Users, label: "用户管理", href: "/admin/users" },
+    { icon: CreditCard, label: "支付配置", href: "/admin/payment" },
+    { icon: Wallet, label: "提现管理", href: "/admin/withdrawals" },
+    { icon: QrCode, label: "二维码", href: "/admin/qrcodes" },
+    { icon: Settings, label: "系统设置", href: "/admin/settings" },
+  ]
+
+  return (
+    <div className="flex min-h-screen bg-[#0a1628]">
+      {/* Sidebar - 深色侧边栏 */}
+      <div className="w-64 bg-[#0f2137] flex flex-col border-r border-gray-700/50 shadow-xl">
+        <div className="p-6 border-b border-gray-700/50">
+          <h1 className="text-xl font-bold text-[#38bdac]">管理后台</h1>
+          <p className="text-xs text-gray-400 mt-1">Soul创业实验场</p>
+        </div>
+
+        <nav className="flex-1 p-4 space-y-1">
+          {menuItems.map((item) => {
+            const isActive = pathname === item.href
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
+                  isActive
+                    ? "bg-[#38bdac]/20 text-[#38bdac] font-medium"
+                    : "text-gray-400 hover:bg-gray-700/50 hover:text-white"
+                }`}
+              >
+                <item.icon className="w-5 h-5" />
+                <span className="text-sm">{item.label}</span>
+              </Link>
+            )
+          })}
+        </nav>
+
+        <div className="p-4 border-t border-gray-700/50">
+          <Link
+            href="/"
+            className="flex items-center gap-3 px-4 py-3 text-gray-400 hover:text-white rounded-lg hover:bg-gray-700/50 transition-colors"
+          >
+            <LogOut className="w-5 h-5" />
+            <span className="text-sm">返回前台</span>
+          </Link>
+        </div>
+      </div>
+
+      {/* Main Content - 深色背景 */}
+      <div className="flex-1 overflow-auto bg-[#0a1628]">{children}</div>
+    </div>
+  )
+}

app/admin/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}

app/admin/login/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}

app/admin/login/page.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { Lock, User, ShieldCheck } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { useStore } from "@/lib/store"
+
+export default function AdminLoginPage() {
+  const router = useRouter()
+  const { adminLogin } = useStore()
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  const [error, setError] = useState("")
+  const [loading, setLoading] = useState(false)
+
+  const handleLogin = async () => {
+    setError("")
+    setLoading(true)
+
+    await new Promise((resolve) => setTimeout(resolve, 500))
+
+    const success = adminLogin(username, password)
+    if (success) {
+      router.push("/admin")
+    } else {
+      setError("用户名或密码错误")
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-[#0a1628] flex items-center justify-center p-4">
+      {/* 装饰背景 */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-[#38bdac]/5 rounded-full blur-3xl" />
+        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl" />
+      </div>
+
+      <div className="w-full max-w-md relative z-10">
+        {/* Logo */}
+        <div className="text-center mb-8">
+          <div className="w-16 h-16 bg-[#38bdac]/20 rounded-2xl flex items-center justify-center mx-auto mb-4 border border-[#38bdac]/30">
+            <ShieldCheck className="w-8 h-8 text-[#38bdac]" />
+          </div>
+          <h1 className="text-2xl font-bold text-white mb-2">管理后台</h1>
+          <p className="text-gray-400">一场SOUL的创业实验场</p>
+        </div>
+
+        {/* Login form */}
+        <div className="bg-[#0f2137] rounded-2xl p-8 shadow-xl border border-gray-700/50 backdrop-blur-xl">
+          <h2 className="text-xl font-semibold text-white mb-6 text-center">管理员登录</h2>
+
+          <div className="space-y-4">
+            <div>
+              <label className="block text-gray-400 text-sm mb-2">用户名</label>
+              <div className="relative">
+                <User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+                <Input
+                  type="text"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  placeholder="请输入用户名"
+                  className="pl-10 bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500 focus:border-[#38bdac]"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-gray-400 text-sm mb-2">密码</label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+                <Input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="请输入密码"
+                  className="pl-10 bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500 focus:border-[#38bdac]"
+                  onKeyDown={(e) => e.key === "Enter" && handleLogin()}
+                />
+              </div>
+            </div>
+
+            {error && (
+              <div className="bg-red-500/10 text-red-400 text-sm p-3 rounded-lg border border-red-500/20">{error}</div>
+            )}
+
+            <Button
+              onClick={handleLogin}
+              disabled={loading}
+              className="w-full bg-[#38bdac] hover:bg-[#2da396] text-white py-5 disabled:opacity-50"
+            >
+              {loading ? "登录中..." : "登录"}
+            </Button>
+          </div>
+
+          <div className="mt-6 pt-6 border-t border-gray-700/50">
+            <p className="text-gray-500 text-xs text-center">
+              默认账号: <span className="text-gray-300 font-mono">admin</span> /{" "}
+              <span className="text-gray-300 font-mono">key123456</span>
+            </p>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <p className="text-center text-gray-500 text-xs mt-6">Soul创业实验场 · 后台管理系统</p>
+      </div>
+    </div>
+  )
+}

app/admin/page.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { useStore } from "@/lib/store"
+import { Users, BookOpen, ShoppingBag, TrendingUp } from "lucide-react"
+
+export default function AdminDashboard() {
+  const { getAllUsers, getAllPurchases } = useStore()
+  const users = getAllUsers()
+  const purchases = getAllPurchases()
+
+  const totalRevenue = purchases.reduce((sum, p) => sum + p.amount, 0)
+  const totalUsers = users.length
+  const totalPurchases = purchases.length
+
+  const stats = [
+    { title: "总用户数", value: totalUsers, icon: Users, color: "text-blue-400", bg: "bg-blue-500/20" },
+    {
+      title: "总收入",
+      value: `¥${totalRevenue.toFixed(2)}`,
+      icon: TrendingUp,
+      color: "text-[#38bdac]",
+      bg: "bg-[#38bdac]/20",
+    },
+    { title: "订单数", value: totalPurchases, icon: ShoppingBag, color: "text-purple-400", bg: "bg-purple-500/20" },
+    {
+      title: "转化率",
+      value: `${totalUsers > 0 ? ((totalPurchases / totalUsers) * 100).toFixed(1) : 0}%`,
+      icon: BookOpen,
+      color: "text-orange-400",
+      bg: "bg-orange-500/20",
+    },
+  ]
+
+  return (
+    <div className="p-8 max-w-7xl mx-auto">
+      <h1 className="text-2xl font-bold mb-8 text-white">数据概览</h1>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        {stats.map((stat, index) => (
+          <Card key={index} className="bg-[#0f2137] border-gray-700/50 shadow-xl">
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardTitle className="text-sm font-medium text-gray-400">{stat.title}</CardTitle>
+              <div className={`p-2 rounded-lg ${stat.bg}`}>
+                <stat.icon className={`w-4 h-4 ${stat.color}`} />
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold text-white">{stat.value}</div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
+          <CardHeader>
+            <CardTitle className="text-white">最近订单</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              {purchases
+                .slice(-5)
+                .reverse()
+                .map((p) => (
+                  <div
+                    key={p.id}
+                    className="flex items-center justify-between p-4 bg-[#0a1628] rounded-lg border border-gray-700/30"
+                  >
+                    <div>
+                      <p className="text-sm font-medium text-white">{p.sectionTitle || "整本购买"}</p>
+                      <p className="text-xs text-gray-500">{new Date(p.createdAt).toLocaleString()}</p>
+                    </div>
+                    <div className="text-right">
+                      <p className="text-sm font-bold text-[#38bdac]">+¥{p.amount}</p>
+                      <p className="text-xs text-gray-400">{p.paymentMethod || "微信支付"}</p>
+                    </div>
+                  </div>
+                ))}
+              {purchases.length === 0 && <p className="text-gray-500 text-center py-8">暂无订单数据</p>}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
+          <CardHeader>
+            <CardTitle className="text-white">新注册用户</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              {users
+                .slice(-5)
+                .reverse()
+                .map((u) => (
+                  <div
+                    key={u.id}
+                    className="flex items-center justify-between p-4 bg-[#0a1628] rounded-lg border border-gray-700/30"
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 rounded-full bg-[#38bdac]/20 flex items-center justify-center text-sm font-medium text-[#38bdac]">
+                        {u.nickname.charAt(0)}
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-white">{u.nickname}</p>
+                        <p className="text-xs text-gray-500">{u.phone}</p>
+                      </div>
+                    </div>
+                    <p className="text-xs text-gray-400">{new Date(u.createdAt).toLocaleDateString()}</p>
+                  </div>
+                ))}
+              {users.length === 0 && <p className="text-gray-500 text-center py-8">暂无用户数据</p>}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

app/admin/payment/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}

app/admin/payment/page.tsx

@@ -0,0 +1,375 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useStore } from "@/lib/store"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import {
+  Save,
+  RefreshCw,
+  Smartphone,
+  CreditCard,
+  ExternalLink,
+  Bitcoin,
+  Globe,
+  Copy,
+  Check,
+  HelpCircle,
+} from "lucide-react"
+
+export default function PaymentConfigPage() {
+  const { settings, updateSettings, fetchSettings } = useStore()
+  const [loading, setLoading] = useState(false)
+  const [localSettings, setLocalSettings] = useState(settings.paymentMethods)
+  const [copied, setCopied] = useState("")
+
+  useEffect(() => {
+    setLocalSettings(settings.paymentMethods)
+  }, [settings.paymentMethods])
+
+  const handleSave = async () => {
+    setLoading(true)
+    updateSettings({ paymentMethods: localSettings })
+    await new Promise((resolve) => setTimeout(resolve, 800))
+    setLoading(false)
+    alert("配置已保存！")
+  }
+
+  const handleRefresh = async () => {
+    setLoading(true)
+    await fetchSettings()
+    setLoading(false)
+  }
+
+  const handleCopy = (text: string, field: string) => {
+    navigator.clipboard.writeText(text)
+    setCopied(field)
+    setTimeout(() => setCopied(""), 2000)
+  }
+
+  const updateWechat = (field: string, value: any) => {
+    setLocalSettings((prev) => ({
+      ...prev,
+      wechat: { ...prev.wechat, [field]: value },
+    }))
+  }
+
+  const updateAlipay = (field: string, value: any) => {
+    setLocalSettings((prev) => ({
+      ...prev,
+      alipay: { ...prev.alipay, [field]: value },
+    }))
+  }
+
+  const updateUsdt = (field: string, value: any) => {
+    setLocalSettings((prev) => ({
+      ...prev,
+      usdt: { ...prev.usdt, [field]: value },
+    }))
+  }
+
+  const updatePaypal = (field: string, value: any) => {
+    setLocalSettings((prev) => ({
+      ...prev,
+      paypal: { ...prev.paypal, [field]: value },
+    }))
+  }
+
+  return (
+    <div className="p-8 max-w-5xl mx-auto">
+      <div className="flex justify-between items-center mb-8">
+        <div>
+          <h1 className="text-2xl font-bold mb-2 text-white">支付配置</h1>
+          <p className="text-gray-400">配置微信、支付宝、USDT、PayPal等支付参数</p>
+        </div>
+        <div className="flex gap-3">
+          <Button
+            variant="outline"
+            onClick={handleRefresh}
+            className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"
+          >
+            <RefreshCw className={`w-4 h-4 mr-2 ${loading ? "animate-spin" : ""}`} />
+            同步配置
+          </Button>
+          <Button onClick={handleSave} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
+            <Save className="w-4 h-4 mr-2" />
+            保存配置
+          </Button>
+        </div>
+      </div>
+
+      <div className="mb-6 bg-[#07C160]/10 border border-[#07C160]/30 rounded-xl p-4">
+        <div className="flex items-start gap-3">
+          <HelpCircle className="w-5 h-5 text-[#07C160] flex-shrink-0 mt-0.5" />
+          <div className="text-sm">
+            <p className="font-medium mb-2 text-[#07C160]">如何获取微信群跳转链接？</p>
+            <ol className="text-[#07C160]/80 space-y-1 list-decimal list-inside">
+              <li>打开微信，进入目标微信群</li>
+              <li>点击右上角"..." → "群二维码"</li>
+              <li>点击右上角"..." → "发送到电脑"</li>
+              <li>在电脑上保存二维码图片，上传到图床获取URL</li>
+              <li>或使用草料二维码等工具解析二维码获取链接</li>
+            </ol>
+            <p className="text-[#07C160]/60 mt-2">提示：微信群二维码7天后失效，建议使用活码工具</p>
+          </div>
+        </div>
+      </div>
+
+      <Tabs defaultValue="wechat" className="space-y-6">
+        <TabsList className="bg-[#0f2137] border border-gray-700/50 p-1 grid grid-cols-4 w-full">
+          <TabsTrigger
+            value="wechat"
+            className="data-[state=active]:bg-[#07C160]/20 data-[state=active]:text-[#07C160] text-gray-400"
+          >
+            <Smartphone className="w-4 h-4 mr-2" />
+            微信
+          </TabsTrigger>
+          <TabsTrigger
+            value="alipay"
+            className="data-[state=active]:bg-[#1677FF]/20 data-[state=active]:text-[#1677FF] text-gray-400"
+          >
+            <CreditCard className="w-4 h-4 mr-2" />
+            支付宝
+          </TabsTrigger>
+          <TabsTrigger
+            value="usdt"
+            className="data-[state=active]:bg-[#26A17B]/20 data-[state=active]:text-[#26A17B] text-gray-400"
+          >
+            <Bitcoin className="w-4 h-4 mr-2" />
+            USDT
+          </TabsTrigger>
+          <TabsTrigger
+            value="paypal"
+            className="data-[state=active]:bg-[#003087]/20 data-[state=active]:text-[#169BD7] text-gray-400"
+          >
+            <Globe className="w-4 h-4 mr-2" />
+            PayPal
+          </TabsTrigger>
+        </TabsList>
+
+        {/* 微信支付配置 */}
+        <TabsContent value="wechat" className="space-y-4">
+          <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <div className="space-y-1">
+                <CardTitle className="text-[#07C160] flex items-center gap-2">
+                  <Smartphone className="w-5 h-5" />
+                  微信支付配置
+                </CardTitle>
+                <CardDescription className="text-gray-400">配置微信支付参数和跳转链接</CardDescription>
+              </div>
+              <Switch checked={localSettings.wechat.enabled} onCheckedChange={(c) => updateWechat("enabled", c)} />
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {/* API配置 */}
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label className="text-gray-300">网站AppID</Label>
+                  <Input
+                    className="bg-[#0a1628] border-gray-700 text-white font-mono text-sm"
+                    value={localSettings.wechat.websiteAppId || ""}
+                    onChange={(e) => updateWechat("websiteAppId", e.target.value)}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label className="text-gray-300">商户号</Label>
+                  <Input
+                    className="bg-[#0a1628] border-gray-700 text-white font-mono text-sm"
+                    value={localSettings.wechat.merchantId || ""}
+                    onChange={(e) => updateWechat("merchantId", e.target.value)}
+                  />
+                </div>
+              </div>
+
+              {/* 跳转链接配置 - 重点 */}
+              <div className="border-t border-gray-700/50 pt-4 space-y-4">
+                <h4 className="text-white font-medium flex items-center gap-2">
+                  <ExternalLink className="w-4 h-4 text-[#38bdac]" />
+                  跳转链接配置（核心功能）
+                </h4>
+
+                <div className="space-y-2">
+                  <Label className="text-gray-300">微信收款码/支付链接</Label>
+                  <Input
+                    className="bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500"
+                    placeholder="https://收款码图片URL 或 weixin://支付链接"
+                    value={localSettings.wechat.qrCode || ""}
+                    onChange={(e) => updateWechat("qrCode", e.target.value)}
+                  />
+                  <p className="text-xs text-gray-500">用户点击微信支付后显示的二维码图片URL</p>
+                </div>
+
+                <div className="space-y-2 bg-[#07C160]/5 p-4 rounded-xl border border-[#07C160]/20">
+                  <Label className="text-[#07C160] font-medium">微信群跳转链接（支付成功后跳转）</Label>
+                  <Input
+                    className="bg-[#0a1628] border-[#07C160]/30 text-white placeholder:text-gray-500"
+                    placeholder="https://weixin.qq.com/g/... 或微信群二维码图片URL"
+                    value={localSettings.wechat.groupQrCode || ""}
+                    onChange={(e) => updateWechat("groupQrCode", e.target.value)}
+                  />
+                  <p className="text-xs text-[#07C160]/70">用户支付成功后将自动跳转到此链接，进入指定微信群</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* 支付宝配置 */}
+        <TabsContent value="alipay" className="space-y-4">
+          <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <div className="space-y-1">
+                <CardTitle className="text-[#1677FF] flex items-center gap-2">
+                  <CreditCard className="w-5 h-5" />
+                  支付宝配置
+                </CardTitle>
+                <CardDescription className="text-gray-400">已加载真实支付宝参数</CardDescription>
+              </div>
+              <Switch checked={localSettings.alipay.enabled} onCheckedChange={(c) => updateAlipay("enabled", c)} />
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label className="text-gray-300">合作者身份 (PID)</Label>
+                  <div className="flex gap-2">
+                    <Input
+                      className="bg-[#0a1628] border-gray-700 text-white font-mono text-sm"
+                      value={localSettings.alipay.partnerId || ""}
+                      onChange={(e) => updateAlipay("partnerId", e.target.value)}
+                    />
+                    <Button
+                      size="icon"
+                      variant="outline"
+                      className="border-gray-700 bg-transparent"
+                      onClick={() => handleCopy(localSettings.alipay.partnerId || "", "pid")}
+                    >
+                      {copied === "pid" ? (
+                        <Check className="w-4 h-4 text-green-500" />
+                      ) : (
+                        <Copy className="w-4 h-4 text-gray-400" />
+                      )}
+                    </Button>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <Label className="text-gray-300">安全校验码 (Key)</Label>
+                  <Input
+                    type="password"
+                    className="bg-[#0a1628] border-gray-700 text-white font-mono text-sm"
+                    value={localSettings.alipay.securityKey || ""}
+                    onChange={(e) => updateAlipay("securityKey", e.target.value)}
+                  />
+                </div>
+              </div>
+
+              <div className="border-t border-gray-700/50 pt-4 space-y-4">
+                <h4 className="text-white font-medium flex items-center gap-2">
+                  <ExternalLink className="w-4 h-4 text-[#38bdac]" />
+                  跳转链接配置
+                </h4>
+                <div className="space-y-2">
+                  <Label className="text-gray-300">支付宝收款码/跳转链接</Label>
+                  <Input
+                    className="bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500"
+                    placeholder="https://qr.alipay.com/... 或收款码图片URL"
+                    value={localSettings.alipay.qrCode || ""}
+                    onChange={(e) => updateAlipay("qrCode", e.target.value)}
+                  />
+                  <p className="text-xs text-gray-500">用户点击支付宝支付后显示的二维码</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* USDT配置 */}
+        <TabsContent value="usdt" className="space-y-4">
+          <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <div className="space-y-1">
+                <CardTitle className="text-[#26A17B] flex items-center gap-2">
+                  <Bitcoin className="w-5 h-5" />
+                  USDT配置
+                </CardTitle>
+                <CardDescription className="text-gray-400">配置加密货币收款地址</CardDescription>
+              </div>
+              <Switch checked={localSettings.usdt.enabled} onCheckedChange={(c) => updateUsdt("enabled", c)} />
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label className="text-gray-300">网络类型</Label>
+                <select
+                  className="w-full bg-[#0a1628] border border-gray-700 text-white rounded-md p-2"
+                  value={localSettings.usdt.network}
+                  onChange={(e) => updateUsdt("network", e.target.value)}
+                >
+                  <option value="TRC20">TRC20 (波场)</option>
+                  <option value="ERC20">ERC20 (以太坊)</option>
+                  <option value="BEP20">BEP20 (币安链)</option>
+                </select>
+              </div>
+              <div className="space-y-2">
+                <Label className="text-gray-300">收款地址</Label>
+                <Input
+                  className="bg-[#0a1628] border-gray-700 text-white font-mono text-sm"
+                  placeholder="T... (TRC20地址)"
+                  value={localSettings.usdt.address || ""}
+                  onChange={(e) => updateUsdt("address", e.target.value)}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label className="text-gray-300">汇率 (1 USD = ? CNY)</Label>
+                <Input
+                  type="number"
+                  className="bg-[#0a1628] border-gray-700 text-white"
+                  value={localSettings.usdt.exchangeRate}
+                  onChange={(e) => updateUsdt("exchangeRate", Number.parseFloat(e.target.value) || 7.2)}
+                />
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* PayPal配置 */}
+        <TabsContent value="paypal" className="space-y-4">
+          <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <div className="space-y-1">
+                <CardTitle className="text-[#169BD7] flex items-center gap-2">
+                  <Globe className="w-5 h-5" />
+                  PayPal配置
+                </CardTitle>
+                <CardDescription className="text-gray-400">配置PayPal收款账户</CardDescription>
+              </div>
+              <Switch checked={localSettings.paypal.enabled} onCheckedChange={(c) => updatePaypal("enabled", c)} />
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label className="text-gray-300">PayPal邮箱</Label>
+                <Input
+                  className="bg-[#0a1628] border-gray-700 text-white"
+                  placeholder="your@email.com"
+                  value={localSettings.paypal.email || ""}
+                  onChange={(e) => updatePaypal("email", e.target.value)}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label className="text-gray-300">汇率 (1 USD = ? CNY)</Label>
+                <Input
+                  type="number"
+                  className="bg-[#0a1628] border-gray-700 text-white"
+                  value={localSettings.paypal.exchangeRate}
+                  onChange={(e) => updatePaypal("exchangeRate", Number.parseFloat(e.target.value) || 7.2)}
+                />
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

app/admin/qrcodes/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}

app/admin/qrcodes/page.tsx

@@ -0,0 +1,225 @@
+"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 { Textarea } from "@/components/ui/textarea"
+import { Button } from "@/components/ui/button"
+import { useStore } from "@/lib/store"
+import { QrCode, Upload, Link, ExternalLink, Copy, Check, HelpCircle } from "lucide-react"
+
+export default function QRCodesPage() {
+  const { settings, updateSettings } = useStore()
+  const [liveQRUrls, setLiveQRUrls] = useState("")
+  const [wechatGroupUrl, setWechatGroupUrl] = useState("")
+  const [copied, setCopied] = useState("")
+
+  useEffect(() => {
+    setLiveQRUrls(settings.liveQRCodes?.[0]?.urls?.join("\n") || "")
+    setWechatGroupUrl(settings.paymentMethods?.wechat?.groupQrCode || "")
+  }, [settings])
+
+  const handleCopy = (text: string, field: string) => {
+    navigator.clipboard.writeText(text)
+    setCopied(field)
+    setTimeout(() => setCopied(""), 2000)
+  }
+
+  const handleSaveLiveQR = () => {
+    const urls = liveQRUrls
+      .split("\n")
+      .map((u) => u.trim())
+      .filter(Boolean)
+    const updatedLiveQRCodes = [...(settings.liveQRCodes || [])]
+    if (updatedLiveQRCodes[0]) {
+      updatedLiveQRCodes[0].urls = urls
+    } else {
+      updatedLiveQRCodes.push({ id: "live-1", name: "微信群活码", urls, clickCount: 0 })
+    }
+    updateSettings({ liveQRCodes: updatedLiveQRCodes })
+    alert("群活码配置已保存！")
+  }
+
+  const handleSaveWechatGroup = () => {
+    updateSettings({
+      paymentMethods: {
+        ...settings.paymentMethods,
+        wechat: {
+          ...settings.paymentMethods.wechat,
+          groupQrCode: wechatGroupUrl,
+        },
+      },
+    })
+    alert("微信群链接已保存！用户支付成功后将自动跳转")
+  }
+
+  // 测试跳转
+  const handleTestJump = () => {
+    if (wechatGroupUrl) {
+      window.open(wechatGroupUrl, "_blank")
+    } else {
+      alert("请先配置微信群链接")
+    }
+  }
+
+  return (
+    <div className="p-8 max-w-5xl mx-auto">
+      <div className="mb-8">
+        <h2 className="text-2xl font-bold text-white">微信群活码管理</h2>
+        <p className="text-gray-400 mt-1">配置微信群跳转链接，用户支付后自动跳转加群</p>
+      </div>
+
+      {/* 使用说明 */}
+      <div className="mb-6 bg-[#07C160]/10 border border-[#07C160]/30 rounded-xl p-4">
+        <div className="flex items-start gap-3">
+          <HelpCircle className="w-5 h-5 text-[#07C160] flex-shrink-0 mt-0.5" />
+          <div className="text-sm">
+            <p className="font-medium mb-2 text-[#07C160]">微信群活码配置指南</p>
+            <div className="text-[#07C160]/80 space-y-2">
+              <p className="font-medium">方法一：使用草料活码（推荐）</p>
+              <ol className="list-decimal list-inside space-y-1 pl-2">
+                <li>
+                  访问{" "}
+                  <a href="https://cli.im/url" target="_blank" className="underline" rel="noreferrer">
+                    草料二维码
+                  </a>{" "}
+                  创建活码
+                </li>
+                <li>上传微信群二维码图片，生成永久链接</li>
+                <li>复制生成的短链接填入下方配置</li>
+                <li>群满后可直接在草料后台更换新群码，链接不变</li>
+              </ol>
+              <p className="font-medium mt-3">方法二：直接使用微信群链接</p>
+              <ol className="list-decimal list-inside space-y-1 pl-2">
+                <li>微信打开目标群 → 右上角"..." → 群二维码</li>
+                <li>长按二维码 → 识别二维码 → 复制链接</li>
+                <li>或使用第三方工具解析二维码获取链接</li>
+              </ol>
+              <p className="text-[#07C160]/60 mt-2">注意：微信原生群二维码7天后失效，建议使用草料活码</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* 主要配置 - 支付后跳转 */}
+        <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl md:col-span-2">
+          <CardHeader>
+            <CardTitle className="text-[#07C160] flex items-center gap-2">
+              <QrCode className="w-5 h-5" />
+              支付成功跳转链接（核心配置）
+            </CardTitle>
+            <CardDescription className="text-gray-400">用户支付完成后自动跳转到此链接，进入指定微信群</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="wechat-group-url" className="text-gray-300 flex items-center gap-2">
+                <Link className="w-4 h-4" />
+                微信群链接 / 活码链接
+              </Label>
+              <div className="flex gap-2">
+                <Input
+                  id="wechat-group-url"
+                  placeholder="https://cli.im/xxxxx 或 https://weixin.qq.com/g/..."
+                  className="bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500 flex-1"
+                  value={wechatGroupUrl}
+                  onChange={(e) => setWechatGroupUrl(e.target.value)}
+                />
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="border-gray-700 bg-transparent hover:bg-gray-700/50"
+                  onClick={() => handleCopy(wechatGroupUrl, "group")}
+                >
+                  {copied === "group" ? (
+                    <Check className="w-4 h-4 text-green-500" />
+                  ) : (
+                    <Copy className="w-4 h-4 text-gray-400" />
+                  )}
+                </Button>
+              </div>
+              <p className="text-xs text-gray-500 flex items-center gap-1">
+                <ExternalLink className="w-3 h-3" />
+                支持格式：草料短链、微信群链接(https://weixin.qq.com/g/...)、企业微信链接等
+              </p>
+            </div>
+
+            <div className="flex gap-3">
+              <Button onClick={handleSaveWechatGroup} className="flex-1 bg-[#07C160] hover:bg-[#06AD51] text-white">
+                <Upload className="w-4 h-4 mr-2" />
+                保存配置
+              </Button>
+              <Button
+                onClick={handleTestJump}
+                variant="outline"
+                className="border-[#07C160] text-[#07C160] hover:bg-[#07C160]/10 bg-transparent"
+              >
+                <ExternalLink className="w-4 h-4 mr-2" />
+                测试跳转
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 多群轮换配置 */}
+        <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl md:col-span-2">
+          <CardHeader>
+            <CardTitle className="text-white flex items-center gap-2">
+              <QrCode className="w-5 h-5 text-[#38bdac]" />
+              多群轮换（高级配置）
+            </CardTitle>
+            <CardDescription className="text-gray-400">配置多个群链接，系统自动轮换分配，避免单群满员</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="group-urls" className="text-gray-300 flex items-center gap-2">
+                <Link className="w-4 h-4" />
+                多个群链接（每行一个）
+              </Label>
+              <Textarea
+                id="group-urls"
+                placeholder={`https://cli.im/group1\nhttps://cli.im/group2\nhttps://cli.im/group3`}
+                className="bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500 min-h-[120px] font-mono text-sm"
+                value={liveQRUrls}
+                onChange={(e) => setLiveQRUrls(e.target.value)}
+              />
+              <p className="text-xs text-gray-500">每行填写一个群链接，系统将按顺序或随机分配</p>
+            </div>
+            <div className="flex items-center justify-between p-3 bg-[#0a1628] rounded-lg border border-gray-700/50">
+              <span className="text-sm text-gray-400">已配置群数量</span>
+              <span className="font-bold text-[#38bdac]">{liveQRUrls.split("\n").filter(Boolean).length} 个</span>
+            </div>
+            <Button onClick={handleSaveLiveQR} className="w-full bg-[#38bdac] hover:bg-[#2da396] text-white">
+              <Upload className="w-4 h-4 mr-2" />
+              保存多群配置
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 常见问题 */}
+      <div className="mt-6 bg-[#0f2137] rounded-xl p-4 border border-gray-700/50">
+        <h4 className="text-white font-medium mb-3">常见问题</h4>
+        <div className="space-y-3 text-sm">
+          <div>
+            <p className="text-[#38bdac]">Q: 为什么推荐使用草料活码？</p>
+            <p className="text-gray-400">
+              A: 草料活码是永久链接，群满后可直接在后台更换新群码，无需修改网站配置。微信原生群码7天失效。
+            </p>
+          </div>
+          <div>
+            <p className="text-[#38bdac]">Q: 支付后没有跳转怎么办？</p>
+            <p className="text-gray-400">
+              A: 1) 检查链接是否正确填写 2) 部分浏览器可能拦截弹窗，用户需手动允许 3) 建议使用https开头的链接
+            </p>
+          </div>
+          <div>
+            <p className="text-[#38bdac]">Q: 如何获取企业微信群链接？</p>
+            <p className="text-gray-400">A: 企业微信后台 → 客户联系 → 加入群聊 → 获取永久有效的群二维码链接</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/admin/settings/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}

app/admin/settings/page.tsx

@@ -0,0 +1,224 @@
+"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>
+  )
+}

app/admin/users/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}

app/admin/users/page.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import { useState, useEffect, Suspense } from "react"
+import { Card, CardContent } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Badge } from "@/components/ui/badge"
+import { useStore, type User } from "@/lib/store"
+import { Search, UserPlus, Eye, Trash2 } from "lucide-react"
+
+function UsersContent() {
+  const { getAllUsers, deleteUser } = useStore()
+  const [users, setUsers] = useState<User[]>([])
+  const [searchTerm, setSearchTerm] = useState("")
+
+  useEffect(() => {
+    setUsers(getAllUsers())
+  }, [getAllUsers])
+
+  const filteredUsers = users.filter((u) => u.nickname.includes(searchTerm) || u.phone.includes(searchTerm))
+
+  const handleDelete = (userId: string) => {
+    if (confirm("确定要删除这个用户吗？")) {
+      deleteUser(userId)
+      setUsers(getAllUsers())
+    }
+  }
+
+  return (
+    <div className="p-8 max-w-7xl 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">共 {users.length} 位注册用户</p>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+            <Input
+              type="text"
+              placeholder="搜索用户..."
+              className="pl-10 bg-[#0f2137] border-gray-700 text-white placeholder:text-gray-500 w-64"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+          <Button className="bg-[#38bdac] hover:bg-[#2da396] text-white">
+            <UserPlus className="w-4 h-4 mr-2" />
+            添加用户
+          </Button>
+        </div>
+      </div>
+
+      <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
+        <CardContent className="p-0">
+          <Table>
+            <TableHeader>
+              <TableRow className="bg-[#0a1628] hover:bg-[#0a1628] border-gray-700">
+                <TableHead className="text-gray-400">用户信息</TableHead>
+                <TableHead className="text-gray-400">手机号</TableHead>
+                <TableHead className="text-gray-400">购买状态</TableHead>
+                <TableHead className="text-gray-400">分销收益</TableHead>
+                <TableHead className="text-gray-400">注册时间</TableHead>
+                <TableHead className="text-right text-gray-400">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredUsers.map((user) => (
+                <TableRow key={user.id} className="hover:bg-[#0a1628] border-gray-700/50">
+                  <TableCell>
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 rounded-full bg-[#38bdac]/20 flex items-center justify-center text-sm font-medium text-[#38bdac]">
+                        {user.nickname.charAt(0)}
+                      </div>
+                      <div>
+                        <p className="font-medium text-white">{user.nickname}</p>
+                        <p className="text-xs text-gray-500">ID: {user.id.slice(0, 8)}</p>
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-gray-300">{user.phone}</TableCell>
+                  <TableCell>
+                    {user.hasFullBook ? (
+                      <Badge className="bg-green-500/20 text-green-400 hover:bg-green-500/20 border-0">全书已购</Badge>
+                    ) : user.purchasedSections.length > 0 ? (
+                      <Badge className="bg-blue-500/20 text-blue-400 hover:bg-blue-500/20 border-0">
+                        已购 {user.purchasedSections.length} 节
+                      </Badge>
+                    ) : (
+                      <Badge variant="outline" className="text-gray-500 border-gray-600">
+                        未购买
+                      </Badge>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-white font-medium">¥{user.earnings?.toFixed(2) || "0.00"}</TableCell>
+                  <TableCell className="text-gray-400">{new Date(user.createdAt).toLocaleDateString()}</TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex items-center justify-end gap-2">
+                      <Button variant="ghost" size="sm" className="text-gray-400 hover:text-white hover:bg-gray-700/50">
+                        <Eye className="w-4 h-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="text-red-400 hover:text-red-300 hover:bg-red-500/10"
+                        onClick={() => handleDelete(user.id)}
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {filteredUsers.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={6} className="text-center py-12 text-gray-500">
+                    暂无用户数据
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export default function UsersPage() {
+  return (
+    <Suspense fallback={null}>
+      <UsersContent />
+    </Suspense>
+  )
+}

app/admin/withdrawals/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}

app/admin/withdrawals/page.tsx

@@ -0,0 +1,172 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useStore } from "@/lib/store"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Check, Clock, Wallet, History } from "lucide-react"
+
+export default function WithdrawalsPage() {
+  const { withdrawals, completeWithdrawal } = useStore()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) return null
+
+  const pendingWithdrawals = withdrawals?.filter((w) => w.status === "pending") || []
+  const historyWithdrawals =
+    withdrawals
+      ?.filter((w) => w.status !== "pending")
+      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()) || []
+
+  const totalPending = pendingWithdrawals.reduce((sum, w) => sum + w.amount, 0)
+
+  const handleApprove = (id: string) => {
+    if (confirm("确认打款并完成此提现申请吗？")) {
+      completeWithdrawal(id)
+    }
+  }
+
+  return (
+    <div className="p-8 max-w-6xl mx-auto">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-white">提现管理</h1>
+        <p className="text-gray-400 mt-1">
+          待处理 {pendingWithdrawals.length} 笔，共 ¥{totalPending.toFixed(2)}
+        </p>
+      </div>
+
+      <div className="grid gap-6">
+        {/* 待处理申请 */}
+        <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-white">
+              <div className="p-2 rounded-lg bg-orange-500/20">
+                <Clock className="w-5 h-5 text-orange-400" />
+              </div>
+              待处理申请 ({pendingWithdrawals.length})
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {pendingWithdrawals.length === 0 ? (
+              <div className="text-center py-12">
+                <Wallet className="w-12 h-12 text-gray-600 mx-auto mb-3" />
+                <p className="text-gray-500">暂无待处理申请</p>
+              </div>
+            ) : (
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="bg-[#0a1628] text-gray-400">
+                      <th className="p-4 text-left font-medium">申请时间</th>
+                      <th className="p-4 text-left font-medium">用户</th>
+                      <th className="p-4 text-left font-medium">收款方式</th>
+                      <th className="p-4 text-left font-medium">收款账号</th>
+                      <th className="p-4 text-left font-medium">金额</th>
+                      <th className="p-4 text-right font-medium">操作</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-700/50">
+                    {pendingWithdrawals.map((w) => (
+                      <tr key={w.id} className="hover:bg-[#0a1628] transition-colors">
+                        <td className="p-4 text-gray-400">{new Date(w.createdAt).toLocaleString()}</td>
+                        <td className="p-4">
+                          <div>
+                            <p className="font-medium text-white">{w.name}</p>
+                            <p className="text-xs text-gray-500 font-mono">{w.userId.slice(0, 8)}...</p>
+                          </div>
+                        </td>
+                        <td className="p-4">
+                          <Badge
+                            className={
+                              w.method === "wechat"
+                                ? "bg-green-500/20 text-green-400 hover:bg-green-500/20 border-0"
+                                : "bg-blue-500/20 text-blue-400 hover:bg-blue-500/20 border-0"
+                            }
+                          >
+                            {w.method === "wechat" ? "微信" : "支付宝"}
+                          </Badge>
+                        </td>
+                        <td className="p-4 font-mono text-gray-300">{w.account}</td>
+                        <td className="p-4">
+                          <span className="font-bold text-orange-400">¥{w.amount.toFixed(2)}</span>
+                        </td>
+                        <td className="p-4 text-right">
+                          <Button
+                            size="sm"
+                            onClick={() => handleApprove(w.id)}
+                            className="bg-[#38bdac] hover:bg-[#2da396] text-white"
+                          >
+                            <Check className="w-4 h-4 mr-1" />
+                            确认打款
+                          </Button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* 处理历史 */}
+        <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-white">
+              <div className="p-2 rounded-lg bg-gray-700/50">
+                <History className="w-5 h-5 text-gray-400" />
+              </div>
+              处理历史
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {historyWithdrawals.length === 0 ? (
+              <div className="text-center py-12">
+                <History className="w-12 h-12 text-gray-600 mx-auto mb-3" />
+                <p className="text-gray-500">暂无历史记录</p>
+              </div>
+            ) : (
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="bg-[#0a1628] text-gray-400">
+                      <th className="p-4 text-left font-medium">申请时间</th>
+                      <th className="p-4 text-left font-medium">处理时间</th>
+                      <th className="p-4 text-left font-medium">用户</th>
+                      <th className="p-4 text-left font-medium">渠道</th>
+                      <th className="p-4 text-left font-medium">金额</th>
+                      <th className="p-4 text-left font-medium">状态</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-700/50">
+                    {historyWithdrawals.map((w) => (
+                      <tr key={w.id} className="hover:bg-[#0a1628] transition-colors">
+                        <td className="p-4 text-gray-400">{new Date(w.createdAt).toLocaleString()}</td>
+                        <td className="p-4 text-gray-400">
+                          {w.completedAt ? new Date(w.completedAt).toLocaleString() : "-"}
+                        </td>
+                        <td className="p-4 font-medium text-white">{w.name}</td>
+                        <td className="p-4 text-gray-300">{w.method === "wechat" ? "微信" : "支付宝"}</td>
+                        <td className="p-4 font-medium text-white">¥{w.amount.toFixed(2)}</td>
+                        <td className="p-4">
+                          <Badge className="bg-green-500/20 text-green-400 hover:bg-green-500/20 border-0">
+                            已完成
+                          </Badge>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

app/api/config/route.ts

@@ -0,0 +1,55 @@
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  const config = {
+    paymentMethods: {
+      wechat: {
+        enabled: true,
+        qrCode: "/images/wechat-pay.png", 
+        account: "卡若",
+        appId: process.env.TENCENT_APP_ID || "1251077262", // From .env or default
+        // 敏感信息后端处理，不完全暴露给前端
+      },
+      alipay: {
+        enabled: true,
+        qrCode: "/images/alipay.png",
+        account: "卡若",
+        appId: process.env.ALIPAY_ACCESS_KEY_ID || "LTAI5t9zkiWmFtHG8qmtdysW", // Using Access Key as placeholder ID
+      },
+      usdt: {
+        enabled: true,
+        network: "TRC20",
+        address: process.env.USDT_WALLET_ADDRESS || "TWeq9xxxxxxxxxxxxxxxxxxxx", 
+        exchangeRate: 7.2
+      },
+      paypal: {
+        enabled: false,
+        email: process.env.PAYPAL_CLIENT_ID || "",
+        exchangeRate: 7.2
+      }
+    },
+    marketing: {
+      partyGroup: {
+        url: "https://soul.cn/party",
+        liveCodeUrl: "https://soul.cn/party-live",
+        qrCode: "/images/party-group-qr.png"
+      },
+      banner: {
+        text: "每日早上6-9点，Soul派对房不见不散",
+        visible: true
+      }
+    },
+    authorInfo: {
+      name: "卡若",
+      description: "私域运营与技术公司主理人",
+      liveTime: "06:00-09:00",
+      platform: "Soul"
+    },
+    system: {
+      version: "1.0.0",
+      maintenance: false
+    }
+  };
+
+  return NextResponse.json(config);
+}

app/api/content/route.ts

@@ -0,0 +1,36 @@
+import { type NextRequest, NextResponse } from "next/server"
+import fs from "fs"
+import path from "path"
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const filePath = searchParams.get("path")
+
+  if (!filePath) {
+    return NextResponse.json({ error: "Path is required" }, { status: 400 })
+  }
+
+  if (filePath.startsWith("custom/")) {
+    return NextResponse.json({ content: "", isCustom: true })
+  }
+
+  try {
+    const normalizedPath = filePath.replace(/^\/+/, "")
+    const fullPath = path.join(process.cwd(), normalizedPath)
+
+    if (!fs.existsSync(fullPath)) {
+      return NextResponse.json({ error: "File not found" }, { status: 404 })
+    }
+
+    const stats = fs.statSync(fullPath)
+    if (stats.isDirectory()) {
+      return NextResponse.json({ error: "Path is a directory" }, { status: 400 })
+    }
+
+    const content = fs.readFileSync(fullPath, "utf-8")
+    return NextResponse.json({ content, isCustom: false })
+  } catch (error) {
+    console.error("[v0] Error reading file:", error)
+    return NextResponse.json({ error: "Failed to read file" }, { status: 500 })
+  }
+}

app/api/documentation/generate/route.ts

@@ -0,0 +1,55 @@
+import { NextResponse, type NextRequest } from "next/server"
+import { getDocumentationCatalog } from "@/lib/documentation/catalog"
+import { captureScreenshots } from "@/lib/documentation/screenshot"
+import { renderDocumentationDocx } from "@/lib/documentation/docx"
+
+export const runtime = "nodejs"
+
+function getBaseUrl(request: NextRequest) {
+  const proto = request.headers.get("x-forwarded-proto") || "http"
+  const host = request.headers.get("x-forwarded-host") || request.headers.get("host")
+  if (!host) return null
+  return `${proto}://${host}`
+}
+
+function isAuthorized(request: NextRequest) {
+  const token = process.env.DOCUMENTATION_TOKEN
+  // If no token is configured, allow access (internal tool)
+  if (!token || token === "") return true
+  const header = request.headers.get("x-documentation-token")
+  const query = request.nextUrl.searchParams.get("token")
+  return header === token || query === token
+}
+
+export async function POST(request: NextRequest) {
+  if (!isAuthorized(request)) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  const baseUrl = getBaseUrl(request)
+  if (!baseUrl) {
+    return NextResponse.json({ error: "Host is required" }, { status: 400 })
+  }
+
+  try {
+    const pages = getDocumentationCatalog()
+    const screenshots = await captureScreenshots(pages, {
+      baseUrl,
+      timeoutMs: 60000,
+      viewport: { width: 430, height: 932 },
+    })
+    const docxBuffer = await renderDocumentationDocx(screenshots)
+
+    return new NextResponse(docxBuffer, {
+      status: 200,
+      headers: {
+        "Content-Type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        "Content-Disposition": `attachment; filename="app-documentation.docx"`,
+        "Cache-Control": "no-store",
+      },
+    })
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    return NextResponse.json({ error: message }, { status: 500 })
+  }
+}

app/api/menu/route.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server"
+import { getBookStructure } from "@/lib/book-file-system"
+
+export async function GET() {
+  try {
+    const structure = getBookStructure()
+    return NextResponse.json(structure)
+  } catch (error) {
+    console.error("Error generating menu:", error)
+    return NextResponse.json({ error: "Failed to generate menu" }, { status: 500 })
+  }
+}

app/api/orders/route.ts

@@ -0,0 +1,27 @@
+import { type NextRequest, NextResponse } from "next/server"
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const userId = searchParams.get("userId")
+
+    if (!userId) {
+      return NextResponse.json({ code: 400, message: "缺少用户ID" }, { status: 400 })
+    }
+
+    // In production, fetch from database
+    // For now, return mock data
+    const orders = []
+
+    console.log("[v0] Fetching orders for user:", userId)
+
+    return NextResponse.json({
+      code: 0,
+      message: "获取成功",
+      data: orders,
+    })
+  } catch (error) {
+    console.error("[v0] Get orders error:", error)
+    return NextResponse.json({ code: 500, message: "服务器错误" }, { status: 500 })
+  }
+}

app/api/payment/alipay/notify/route.ts

@@ -0,0 +1,48 @@
+import { type NextRequest, NextResponse } from "next/server"
+import { AlipayService } from "@/lib/payment/alipay"
+
+export async function POST(request: NextRequest) {
+  try {
+    const formData = await request.formData()
+    const params: Record<string, string> = {}
+
+    formData.forEach((value, key) => {
+      params[key] = value.toString()
+    })
+
+    // 初始化支付宝服务
+    const alipay = new AlipayService({
+      appId: process.env.ALIPAY_APP_ID || "wx432c93e275548671",
+      partnerId: process.env.ALIPAY_PARTNER_ID || "2088511801157159",
+      key: process.env.ALIPAY_KEY || "lz6ey1h3kl9zqkgtjz3avb5gk37wzbrp",
+      returnUrl: "",
+      notifyUrl: "",
+    })
+
+    // 验证签名
+    const isValid = alipay.verifySign(params)
+
+    if (!isValid) {
+      console.error("[v0] Alipay signature verification failed")
+      return new NextResponse("fail")
+    }
+
+    const { out_trade_no, trade_status, buyer_id, total_amount } = params
+
+    // 只处理支付成功的通知
+    if (trade_status === "TRADE_SUCCESS" || trade_status === "TRADE_FINISHED") {
+      console.log("[v0] Alipay payment success:", {
+        orderId: out_trade_no,
+        amount: total_amount,
+        buyerId: buyer_id,
+      })
+
+      // TODO: 更新订单状态、解锁内容、分配佣金
+    }
+
+    return new NextResponse("success")
+  } catch (error) {
+    console.error("[v0] Alipay notify error:", error)
+    return new NextResponse("fail")
+  }
+}

app/api/payment/callback/route.ts

@@ -0,0 +1,46 @@
+import { type NextRequest, NextResponse } from "next/server"
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { orderId, status, transactionId, amount, paymentMethod, signature } = body
+
+    console.log("[v0] Payment callback received:", {
+      orderId,
+      status,
+      transactionId,
+      amount,
+      paymentMethod,
+    })
+
+    // In production:
+    // 1. Verify signature from payment gateway
+    // 2. Update order status in database
+    // 3. Grant user access to content
+    // 4. Calculate and distribute referral commission
+
+    // Mock signature verification
+    // const isValid = verifySignature(body, signature)
+
+    // For now, accept all callbacks
+    const isValid = true
+
+    if (!isValid) {
+      return NextResponse.json({ code: 403, message: "签名验证失败" }, { status: 403 })
+    }
+
+    // Update order status
+    if (status === "success") {
+      // Grant access
+      console.log("[v0] Payment successful, granting access for order:", orderId)
+    }
+
+    return NextResponse.json({
+      code: 0,
+      message: "回调处理成功",
+    })
+  } catch (error) {
+    console.error("[v0] Payment callback error:", error)
+    return NextResponse.json({ code: 500, message: "服务器错误" }, { status: 500 })
+  }
+}

app/api/payment/create-order/route.ts

@@ -0,0 +1,88 @@
+import { type NextRequest, NextResponse } from "next/server"
+import { AlipayService } from "@/lib/payment/alipay"
+import { WechatPayService } from "@/lib/payment/wechat"
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { userId, type, sectionId, sectionTitle, amount, paymentMethod, referralCode } = body
+
+    // Validate required fields
+    if (!userId || !type || !amount || !paymentMethod) {
+      return NextResponse.json({ code: 400, message: "缺少必要参数" }, { status: 400 })
+    }
+
+    // Generate order ID
+    const orderId = `ORDER_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
+
+    // Create order object
+    const order = {
+      orderId,
+      userId,
+      type, // "section" | "fullbook"
+      sectionId: type === "section" ? sectionId : undefined,
+      sectionTitle: type === "section" ? sectionTitle : undefined,
+      amount,
+      paymentMethod, // "wechat" | "alipay" | "usdt" | "paypal"
+      referralCode,
+      status: "pending", // pending | completed | failed | refunded
+      createdAt: new Date().toISOString(),
+      expireAt: new Date(Date.now() + 30 * 60 * 1000).toISOString(), // 30 minutes
+    }
+
+    // According to the payment method, create a payment order
+    let paymentData = null
+
+    if (paymentMethod === "alipay") {
+      const alipay = new AlipayService({
+        appId: process.env.ALIPAY_APP_ID || "wx432c93e275548671",
+        partnerId: process.env.ALIPAY_PARTNER_ID || "2088511801157159",
+        key: process.env.ALIPAY_KEY || "lz6ey1h3kl9zqkgtjz3avb5gk37wzbrp",
+        returnUrl: process.env.ALIPAY_RETURN_URL || `${process.env.NEXT_PUBLIC_BASE_URL}/payment/success`,
+        notifyUrl: process.env.ALIPAY_NOTIFY_URL || `${process.env.NEXT_PUBLIC_BASE_URL}/api/payment/alipay/notify`,
+      })
+
+      paymentData = alipay.createOrder({
+        outTradeNo: orderId,
+        subject: type === "section" ? `购买章节: ${sectionTitle}` : "购买整本书",
+        totalAmount: amount,
+        body: `知识付费-书籍购买`,
+      })
+    } else if (paymentMethod === "wechat") {
+      const wechat = new WechatPayService({
+        appId: process.env.WECHAT_APP_ID || "wx432c93e275548671",
+        appSecret: process.env.WECHAT_APP_SECRET || "25b7e7fdb7998e5107e242ebb6ddabd0",
+        mchId: process.env.WECHAT_MCH_ID || "1318592501",
+        apiKey: process.env.WECHAT_API_KEY || "wx3e31b068be59ddc131b068be59ddc2",
+        notifyUrl: process.env.WECHAT_NOTIFY_URL || `${process.env.NEXT_PUBLIC_BASE_URL}/api/payment/wechat/notify`,
+      })
+
+      const clientIp = request.headers.get("x-forwarded-for") || request.headers.get("x-real-ip") || "127.0.0.1"
+
+      paymentData = await wechat.createOrder({
+        outTradeNo: orderId,
+        body: type === "section" ? `购买章节: ${sectionTitle}` : "购买整本书",
+        totalFee: amount,
+        spbillCreateIp: clientIp.split(",")[0].trim(),
+      })
+    }
+
+    return NextResponse.json({
+      code: 0,
+      message: "订单创建成功",
+      data: {
+        ...order,
+        paymentData,
+      },
+    })
+  } catch (error) {
+    console.error("[v0] Create order error:", error)
+    return NextResponse.json(
+      {
+        code: 500,
+        message: error instanceof Error ? error.message : "服务器错误",
+      },
+      { status: 500 },
+    )
+  }
+}

app/api/payment/verify/route.ts

@@ -0,0 +1,46 @@
+import { type NextRequest, NextResponse } from "next/server"
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { orderId, paymentMethod, transactionId } = body
+
+    if (!orderId) {
+      return NextResponse.json({ code: 400, message: "缺少订单号" }, { status: 400 })
+    }
+
+    // In production, verify with payment gateway API
+    // For now, simulate verification
+    console.log("[v0] Verifying payment:", { orderId, paymentMethod, transactionId })
+
+    // Simulate verification delay
+    await new Promise((resolve) => setTimeout(resolve, 500))
+
+    // Mock verification result (95% success rate)
+    const isVerified = Math.random() > 0.05
+
+    if (isVerified) {
+      return NextResponse.json({
+        code: 0,
+        message: "支付验证成功",
+        data: {
+          orderId,
+          status: "completed",
+          verifiedAt: new Date().toISOString(),
+        },
+      })
+    } else {
+      return NextResponse.json({
+        code: 1,
+        message: "支付未完成，请稍后再试",
+        data: {
+          orderId,
+          status: "pending",
+        },
+      })
+    }
+  } catch (error) {
+    console.error("[v0] Verify payment error:", error)
+    return NextResponse.json({ code: 500, message: "服务器错误" }, { status: 500 })
+  }
+}

app/api/payment/wechat/notify/route.ts

@@ -0,0 +1,59 @@
+import { type NextRequest, NextResponse } from "next/server"
+import { WechatPayService } from "@/lib/payment/wechat"
+
+export async function POST(request: NextRequest) {
+  try {
+    const xmlData = await request.text()
+
+    const wechat = new WechatPayService({
+      appId: process.env.WECHAT_APP_ID || "wx432c93e275548671",
+      appSecret: process.env.WECHAT_APP_SECRET || "25b7e7fdb7998e5107e242ebb6ddabd0",
+      mchId: process.env.WECHAT_MCH_ID || "1318592501",
+      apiKey: process.env.WECHAT_API_KEY || "wx3e31b068be59ddc131b068be59ddc2",
+      notifyUrl: "",
+    })
+
+    // 解析XML数据
+    const params = await wechat["parseXML"](xmlData)
+
+    // 验证签名
+    const isValid = wechat.verifySign(params)
+
+    if (!isValid) {
+      console.error("[v0] WeChat signature verification failed")
+      return new NextResponse(
+        "<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[签名失败]]></return_msg></xml>",
+        {
+          headers: { "Content-Type": "application/xml" },
+        },
+      )
+    }
+
+    const { out_trade_no, result_code, total_fee, openid } = params
+
+    if (result_code === "SUCCESS") {
+      console.log("[v0] WeChat payment success:", {
+        orderId: out_trade_no,
+        amount: Number.parseInt(total_fee) / 100,
+        openid,
+      })
+
+      // TODO: 更新订单状态、解锁内容、分配佣金
+    }
+
+    return new NextResponse(
+      "<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>",
+      {
+        headers: { "Content-Type": "application/xml" },
+      },
+    )
+  } catch (error) {
+    console.error("[v0] WeChat notify error:", error)
+    return new NextResponse(
+      "<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[系统错误]]></return_msg></xml>",
+      {
+        headers: { "Content-Type": "application/xml" },
+      },
+    )
+  }
+}

app/chapters/page.tsx

@@ -0,0 +1,54 @@
+import Link from "next/link"
+import { ChevronLeft } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { specialSections, FULL_BOOK_PRICE } from "@/lib/book-data"
+import { getBookStructure } from "@/lib/book-file-system"
+import { ChaptersList } from "@/components/chapters-list"
+
+import { BuyFullBookButton } from "@/components/buy-full-book-button"
+
+export const dynamic = 'force-dynamic';
+
+export default async function ChaptersPage() {
+  const parts = getBookStructure()
+
+  // Format special sections for the client component
+  const specialSectionsData = {
+    preface: { title: specialSections.preface.title },
+    epilogue: { title: specialSections.epilogue.title }
+  }
+
+  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 justify-between">
+          <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="text-lg font-semibold">目录</h1>
+          <BuyFullBookButton size="sm" price={9.9} className="bg-[#38bdac] hover:bg-[#2da396] text-white" />
+        </div>
+      </header>
+
+      {/* Content */}
+      <main className="max-w-4xl mx-auto px-4 py-8">
+        <ChaptersList parts={parts} specialSections={specialSectionsData} />
+
+        {/* Bottom CTA */}
+        <div className="mt-12 bg-gradient-to-r from-[#38bdac]/20 to-[#0f2137] rounded-2xl p-6 border border-[#38bdac]/30">
+          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+            <div>
+              <h3 className="text-white text-lg font-semibold mb-1">购买整本书,省82%</h3>
+              <p className="text-gray-400">全部55节内容,永久阅读,后续更新免费获取</p>
+            </div>
+            <BuyFullBookButton size="lg" price={9.9} className="bg-[#38bdac] hover:bg-[#2da396] text-white px-8">
+              立即购买 ¥9.9
+            </BuyFullBookButton>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

app/docs/page.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import Link from "next/link"
+import { ArrowLeft, CreditCard, Share2, FileText, Code } from "lucide-react"
+
+export default function DocsPage() {
+  return (
+    <main className="min-h-screen bg-[#0a1628] text-white pb-20">
+      <div className="sticky top-0 z-10 bg-[#0a1628]/95 backdrop-blur-md border-b border-gray-700/50">
+        <div className="max-w-2xl mx-auto flex items-center gap-4 p-4">
+          <Link href="/" className="p-2 -ml-2">
+            <ArrowLeft className="w-5 h-5" />
+          </Link>
+          <h1 className="text-lg font-semibold">开发者文档</h1>
+        </div>
+      </div>
+
+      <div className="p-4">
+        <div className="max-w-2xl mx-auto space-y-6">
+          {/* Payment Configuration */}
+          <section className="bg-[#0f2137]/60 rounded-xl p-6">
+            <div className="flex items-center gap-3 mb-4">
+              <CreditCard className="w-6 h-6 text-[#38bdac]" />
+              <h2 className="text-xl font-semibold">支付配置</h2>
+            </div>
+
+            <div className="space-y-4 text-gray-300 text-sm">
+              <div>
+                <h3 className="text-white font-medium mb-2">微信支付配置</h3>
+                <p className="mb-2">1. 登录微信开放平台获取网站AppID和AppSecret</p>
+                <p className="mb-2">2. 登录微信公众平台获取服务号AppID和AppSecret</p>
+                <p className="mb-2">3. 登录微信商户平台获取商户号和API密钥</p>
+                <div className="bg-[#0a1628] rounded-lg p-3 mt-2">
+                  <code className="text-xs text-gray-400">
+                    {`网站AppID: wx432c93e275548671
+服务号AppID: wx7c0dbf34ddba300d
+商户号: 1318592501`}
+                  </code>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-white font-medium mb-2">支付宝配置</h3>
+                <p className="mb-2">1. 登录支付宝开放平台获取合作者身份PID</p>
+                <p className="mb-2">2. 获取安全校验码Key</p>
+                <p className="mb-2">3. 开通手机网站支付功能</p>
+                <div className="bg-[#0a1628] rounded-lg p-3 mt-2">
+                  <code className="text-xs text-gray-400">
+                    {`合作者身份(PID): 2088511801157159
+安全校验码(Key): lz6ey1h3kl9...`}
+                  </code>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* Distribution System */}
+          <section className="bg-[#0f2137]/60 rounded-xl p-6">
+            <div className="flex items-center gap-3 mb-4">
+              <Share2 className="w-6 h-6 text-[#38bdac]" />
+              <h2 className="text-xl font-semibold">分销机制</h2>
+            </div>
+
+            <div className="space-y-4 text-gray-300 text-sm">
+              <p>分销比例可在后台自由设置(0-100%)</p>
+              <div className="bg-[#0a1628] rounded-lg p-4">
+                <p className="text-white mb-2">收益计算公式:</p>
+                <code className="text-[#38bdac]">分销收益 = 订单金额 × 分销比例%</code>
+              </div>
+              <p>例: 用户A通过B的邀请码购买¥9.9整本书,分销比例90%</p>
+              <p>则B获得 9.9 × 90% = ¥8.91 收益</p>
+            </div>
+          </section>
+
+          {/* Withdrawal */}
+          <section className="bg-[#0f2137]/60 rounded-xl p-6">
+            <div className="flex items-center gap-3 mb-4">
+              <FileText className="w-6 h-6 text-[#38bdac]" />
+              <h2 className="text-xl font-semibold">提现说明</h2>
+            </div>
+
+            <div className="space-y-3 text-gray-300 text-sm">
+              <p>1. 最低提现金额: ¥10</p>
+              <p>2. 提现周期: T+1到账</p>
+              <p>3. 支持提现方式: 微信、支付宝、银行卡</p>
+              <p>4. 提现手续费: 0%</p>
+            </div>
+          </section>
+
+          {/* API Reference */}
+          <section className="bg-[#0f2137]/60 rounded-xl p-6">
+            <div className="flex items-center gap-3 mb-4">
+              <Code className="w-6 h-6 text-[#38bdac]" />
+              <h2 className="text-xl font-semibold">API接口</h2>
+            </div>
+
+            <div className="space-y-4 text-gray-300 text-sm">
+              <div className="bg-[#0a1628] rounded-lg p-4">
+                <p className="text-gray-400 mb-2">获取章节内容</p>
+                <code className="text-[#38bdac]">GET /api/content?id=1.1</code>
+              </div>
+              <div className="bg-[#0a1628] rounded-lg p-4">
+                <p className="text-gray-400 mb-2">飞书文档同步</p>
+                <code className="text-[#38bdac]">POST /api/feishu/sync</code>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </main>
+  )
+}

app/documentation/capture/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}

app/documentation/capture/page.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { useEffect, useMemo, useState } from "react"
+import { useSearchParams } from "next/navigation"
+
+export default function DocumentationCapturePage() {
+  const searchParams = useSearchParams()
+  const path = searchParams.get("path") || "/"
+  const [loaded, setLoaded] = useState(false)
+  const [timeoutReached, setTimeoutReached] = useState(false)
+  const [loadError, setLoadError] = useState<string | null>(null)
+
+  const src = useMemo(() => {
+    if (!path.startsWith("/")) return `/${path}`
+    return path
+  }, [path])
+
+  useEffect(() => {
+    setLoaded(false)
+    setTimeoutReached(false)
+    setLoadError(null)
+
+    const timer = window.setTimeout(() => {
+      if (!loaded) {
+        setTimeoutReached(true)
+      }
+    }, 60000)
+
+    return () => window.clearTimeout(timer)
+  }, [src, loaded])
+
+  const handleLoad = () => {
+    setLoaded(true)
+    setTimeoutReached(false)
+  }
+
+  const handleError = () => {
+    setLoadError("页面加载失败")
+  }
+
+  return (
+    <main className="min-h-screen bg-white flex items-center justify-center">
+      <div className="w-[430px] h-[932px] border border-gray-200 bg-white relative overflow-hidden">
+        <iframe
+          data-doc-iframe="true"
+          data-loaded={loaded ? "true" : "false"}
+          src={src}
+          className="w-full h-full border-0"
+          onLoad={handleLoad}
+          onError={handleError}
+          title={`Capture: ${path}`}
+          sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+        />
+
+        {!loaded && !timeoutReached && !loadError && (
+          <div className="absolute inset-0 bg-white flex items-center justify-center">
+            <div className="text-center">
+              <div className="w-8 h-8 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin mx-auto mb-2" />
+              <p className="text-sm text-gray-500">加载中...</p>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {(timeoutReached || loadError) && (
+        <div className="fixed left-0 top-0 right-0 bg-red-600 text-white text-sm px-3 py-2 text-center">
+          {loadError || "页面加载超时"}
+        </div>
+      )}
+
+      {loaded && (
+        <div className="fixed left-0 bottom-0 right-0 bg-green-600 text-white text-xs px-3 py-1 text-center">
+          页面已加载: {path}
+        </div>
+      )}
+    </main>
+  )
+}

app/documentation/page.tsx

@@ -0,0 +1,306 @@
+"use client"
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { getDocumentationCatalog, type DocumentationPage } from "@/lib/documentation/catalog"
+import { FileText, Download, Loader2, CheckCircle, XCircle, Eye, RefreshCw } from "lucide-react"
+
+type PageStatus = "pending" | "loading" | "success" | "error"
+
+type PageState = {
+  page: DocumentationPage
+  status: PageStatus
+  error?: string
+}
+
+export default function DocumentationToolPage() {
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [progress, setProgress] = useState(0)
+  const [currentPage, setCurrentPage] = useState<string | null>(null)
+  const [pageStates, setPageStates] = useState<PageState[]>([])
+  const [previewPath, setPreviewPath] = useState<string | null>(null)
+  const [showPreview, setShowPreview] = useState(false)
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+
+  const pages = useMemo(() => getDocumentationCatalog(), [])
+
+  const groupedPages = useMemo(() => {
+    const groups: Record<string, DocumentationPage[]> = {}
+    for (const page of pages) {
+      if (!groups[page.group]) groups[page.group] = []
+      groups[page.group].push(page)
+    }
+    return groups
+  }, [pages])
+
+  useEffect(() => {
+    setPageStates(pages.map((page) => ({ page, status: "pending" })))
+  }, [pages])
+
+  const handleGenerate = async () => {
+    setError(null)
+    setIsGenerating(true)
+    setProgress(0)
+    setCurrentPage(null)
+    setPageStates(pages.map((page) => ({ page, status: "loading" })))
+
+    try {
+      // Simulate progress while waiting for the API
+      let progressValue = 0
+      const progressInterval = setInterval(() => {
+        progressValue += 2
+        const pageIndex = Math.floor((progressValue / 100) * pages.length)
+        const nextPage = pages[Math.min(pageIndex, pages.length - 1)]
+        if (nextPage) setCurrentPage(nextPage.title)
+        setProgress(Math.min(progressValue, 90))
+
+        // Update page states to show progress
+        setPageStates((prev) =>
+          prev.map((s, idx) => ({
+            ...s,
+            status: idx < pageIndex ? "success" : idx === pageIndex ? "loading" : "pending",
+          })),
+        )
+      }, 800)
+
+      // Get token from URL if provided
+      const urlParams = new URLSearchParams(window.location.search)
+      const token = urlParams.get("token") || ""
+
+      const response = await fetch(`/api/documentation/generate${token ? `?token=${token}` : ""}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...(token ? { "x-documentation-token": token } : {}),
+        },
+      })
+
+      clearInterval(progressInterval)
+
+      if (!response.ok) {
+        const text = await response.text().catch(() => "")
+        let errorMessage = `生成失败(${response.status})`
+        try {
+          const json = JSON.parse(text)
+          errorMessage = json.error || errorMessage
+        } catch {
+          if (text) errorMessage = text
+        }
+        throw new Error(errorMessage)
+      }
+
+      setProgress(100)
+      setCurrentPage("完成")
+      setPageStates(pages.map((page) => ({ page, status: "success" })))
+
+      const blob = await response.blob()
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement("a")
+      a.href = url
+      a.download = `应用功能文档_${new Date().toISOString().slice(0, 10)}.docx`
+      document.body.appendChild(a)
+      a.click()
+      a.remove()
+      URL.revokeObjectURL(url)
+    } catch (e) {
+      const message = e instanceof Error ? e.message : String(e)
+      setError(message)
+      setPageStates((prev) => prev.map((s) => ({ ...s, status: "error" })))
+    } finally {
+      setIsGenerating(false)
+    }
+  }
+
+  const handlePreview = useCallback((path: string) => {
+    setPreviewPath(path)
+    setShowPreview(true)
+  }, [])
+
+  const getStatusIcon = (status: PageStatus) => {
+    switch (status) {
+      case "pending":
+        return <div className="w-4 h-4 rounded-full bg-gray-600" />
+      case "loading":
+        return <Loader2 className="w-4 h-4 animate-spin text-teal-400" />
+      case "success":
+        return <CheckCircle className="w-4 h-4 text-green-500" />
+      case "error":
+        return <XCircle className="w-4 h-4 text-red-500" />
+    }
+  }
+
+  return (
+    <main className="min-h-screen bg-background text-foreground p-4 pb-24">
+      <div className="max-w-md mx-auto space-y-4">
+        {/* Header */}
+        <div className="flex items-center gap-3 py-2">
+          <FileText className="w-6 h-6 text-teal-400" />
+          <div>
+            <h1 className="text-lg font-semibold">文档生成器</h1>
+            <p className="text-xs text-muted-foreground">自动截图并导出专业文档</p>
+          </div>
+        </div>
+
+        {/* Info Card */}
+        <div className="bg-card border border-border rounded-xl p-4 space-y-2">
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">页面总数</span>
+            <span className="font-medium text-teal-400">{pages.length} 个</span>
+          </div>
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">分组数量</span>
+            <span className="font-medium">{Object.keys(groupedPages).length} 组</span>
+          </div>
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">输出格式</span>
+            <span className="font-medium">Word (.docx)</span>
+          </div>
+        </div>
+
+        {/* Progress */}
+        {isGenerating && (
+          <div className="bg-card border border-border rounded-xl p-4 space-y-3">
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-muted-foreground">生成进度</span>
+              <span className="font-medium text-teal-400">{Math.round(progress)}%</span>
+            </div>
+            <div className="w-full h-2 bg-muted rounded-full overflow-hidden">
+              <div
+                className="h-full bg-gradient-to-r from-teal-500 to-cyan-400 transition-all duration-300"
+                style={{ width: `${progress}%` }}
+              />
+            </div>
+            {currentPage && <p className="text-xs text-muted-foreground truncate">正在处理: {currentPage}</p>}
+          </div>
+        )}
+
+        {/* Error */}
+        {error && (
+          <div className="bg-destructive/10 border border-destructive/30 text-destructive rounded-xl p-3 text-sm">
+            <p className="font-medium mb-1">生成失败</p>
+            <p className="text-xs opacity-80">{error}</p>
+            <p className="text-xs mt-2 opacity-60">提示: 如需授权,请在URL中添加 ?token=your_token</p>
+          </div>
+        )}
+
+        {/* Generate Button */}
+        <button
+          type="button"
+          onClick={handleGenerate}
+          disabled={isGenerating}
+          className="w-full bg-gradient-to-r from-teal-500 to-cyan-500 text-white rounded-xl py-3.5 font-medium disabled:opacity-60 flex items-center justify-center gap-2 shadow-lg shadow-teal-500/20"
+        >
+          {isGenerating ? (
+            <>
+              <Loader2 className="w-5 h-5 animate-spin" />
+              <span>正在生成文档...</span>
+            </>
+          ) : (
+            <>
+              <Download className="w-5 h-5" />
+              <span>一键生成 Word 文档</span>
+            </>
+          )}
+        </button>
+
+        {/* Page List */}
+        <div className="space-y-3">
+          <h2 className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+            <span>文档目录预览</span>
+            <span className="text-xs opacity-60">({pages.length}个页面)</span>
+          </h2>
+
+          {Object.entries(groupedPages).map(([group, groupPages]) => (
+            <div key={group} className="bg-card border border-border rounded-xl overflow-hidden">
+              <div className="px-3 py-2 bg-muted/50 border-b border-border">
+                <h3 className="text-sm font-medium text-teal-400">{group}</h3>
+              </div>
+              <div className="divide-y divide-border">
+                {groupPages.map((page, index) => {
+                  const state = pageStates.find((s) => s.page.path === page.path)
+                  return (
+                    <div
+                      key={page.path}
+                      className="px-3 py-2.5 flex items-center gap-3 hover:bg-muted/30 transition-colors"
+                    >
+                      <span className="text-xs text-muted-foreground w-5">{index + 1}</span>
+                      {state && getStatusIcon(state.status)}
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium truncate">{page.title}</p>
+                        {page.subtitle && <p className="text-xs text-muted-foreground truncate">{page.subtitle}</p>}
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => handlePreview(page.path)}
+                        className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors"
+                        title="预览页面"
+                      >
+                        <Eye className="w-4 h-4" />
+                      </button>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Features */}
+        <div className="bg-card border border-border rounded-xl p-4 space-y-3">
+          <h3 className="text-sm font-medium">文档包含内容</h3>
+          <ul className="text-xs text-muted-foreground space-y-2">
+            <li className="flex items-start gap-2">
+              <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
+              <span>自动生成的目录结构</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
+              <span>所有页面的真实截图(iPhone 14 Pro Max尺寸)</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
+              <span>每个页面的功能说明与路径</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
+              <span>按功能模块分组整理</span>
+            </li>
+          </ul>
+        </div>
+
+        {/* Note */}
+        <p className="text-xs text-muted-foreground text-center">生成过程需要30-60秒，请耐心等待</p>
+      </div>
+
+      {/* Preview Modal */}
+      {showPreview && previewPath && (
+        <div className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4">
+          <div className="bg-card rounded-2xl w-full max-w-md overflow-hidden border border-border">
+            <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+              <h3 className="font-medium text-sm">页面预览</h3>
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={() => iframeRef.current?.contentWindow?.location.reload()}
+                  className="p-1.5 text-muted-foreground hover:text-foreground rounded-lg"
+                >
+                  <RefreshCw className="w-4 h-4" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setShowPreview(false)}
+                  className="p-1.5 text-muted-foreground hover:text-foreground rounded-lg"
+                >
+                  <XCircle className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+            <div className="w-full aspect-[430/932] bg-white">
+              <iframe ref={iframeRef} src={previewPath} className="w-full h-full" title="Page Preview" />
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  )
+}

app/globals.css

@@ -0,0 +1,143 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* Custom app tokens */
+  --app-bg: #0a1628;
+  --app-card: #0f2137;
+  --app-brand: #38bdac;
+  --app-brand-hover: #2da396;
+  --app-text: #ffffff;
+  --app-text-muted: #9ca3af;
+  --app-border: rgba(75, 85, 99, 0.5);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --font-sans: "Geist", "Geist Fallback";
+  --font-mono: "Geist Mono", "Geist Mono Fallback";
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Custom semantic tokens for app */
+  --color-app-bg: var(--app-bg);
+  --color-app-card: var(--app-card);
+  --color-app-brand: var(--app-brand);
+  --color-app-brand-hover: var(--app-brand-hover);
+  --color-app-text: var(--app-text);
+  --color-app-text-muted: var(--app-text-muted);
+  --color-app-border: var(--app-border);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/layout.tsx

@@ -0,0 +1,47 @@
+import type React from "react"
+import type { Metadata } from "next"
+import { Geist, Geist_Mono } from "next/font/google"
+import { Analytics } from "@vercel/analytics/next"
+import "./globals.css"
+import { LayoutWrapper } from "@/components/layout-wrapper"
+
+const _geist = Geist({ subsets: ["latin"] })
+const _geistMono = Geist_Mono({ subsets: ["latin"] })
+
+export const metadata: Metadata = {
+  title: "一场SOUL的创业实验场 - 卡若",
+  description: "来自Soul派对房的真实商业故事,每天早上6-9点免费分享",
+  generator: "v0.app",
+  icons: {
+    icon: [
+      {
+        url: "/icon-light-32x32.png",
+        media: "(prefers-color-scheme: light)",
+      },
+      {
+        url: "/icon-dark-32x32.png",
+        media: "(prefers-color-scheme: dark)",
+      },
+      {
+        url: "/icon.svg",
+        type: "image/svg+xml",
+      },
+    ],
+    apple: "/apple-icon.png",
+  },
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="zh-CN">
+      <body className={`bg-[#0a1628]`}>
+        <LayoutWrapper>{children}</LayoutWrapper>
+        <Analytics />
+      </body>
+    </html>
+  )
+}

app/my/page.tsx

@@ -0,0 +1,151 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import Link from "next/link"
+import { User, ShoppingBag, Share2, LogOut, ChevronRight, BookOpen } from "lucide-react"
+import { useStore } from "@/lib/store"
+import { AuthModal } from "@/components/modules/auth/auth-modal"
+import { getFullBookPrice } from "@/lib/book-data"
+
+export default function MyPage() {
+  const { user, isLoggedIn, logout } = useStore()
+  const [showAuthModal, setShowAuthModal] = useState(false)
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return (
+      <div className="min-h-screen bg-app-bg flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-app-brand" />
+      </div>
+    )
+  }
+
+  if (!isLoggedIn) {
+    return (
+      <main className="min-h-screen bg-app-bg text-app-text pb-20 flex flex-col items-center justify-center">
+        <div className="p-4 w-full">
+          <div className="max-w-xs mx-auto text-center">
+            <div className="w-14 h-14 mx-auto mb-3 rounded-full bg-app-card flex items-center justify-center">
+              <User className="w-7 h-7 text-app-text-muted" />
+            </div>
+            <h2 className="text-base font-semibold mb-1">登录后查看更多</h2>
+            <p className="text-app-text-muted text-xs mb-4">查看购买记录、分销收益</p>
+            <button
+              onClick={() => setShowAuthModal(true)}
+              className="bg-app-brand hover:bg-app-brand-hover text-white px-6 py-2.5 rounded-full font-medium text-sm"
+            >
+              立即登录
+            </button>
+          </div>
+        </div>
+        <AuthModal isOpen={showAuthModal} onClose={() => setShowAuthModal(false)} />
+      </main>
+    )
+  }
+
+  const fullBookPrice = getFullBookPrice()
+
+  return (
+    <main className="min-h-screen bg-app-bg text-app-text pb-20">
+      {/* User Profile Header */}
+      <div className="bg-gradient-to-b from-app-card to-app-bg p-4 pt-8">
+        <div className="max-w-xs mx-auto">
+          <div className="flex items-center gap-3 mb-3">
+            <div className="w-11 h-11 rounded-full bg-app-brand/20 flex items-center justify-center">
+              <User className="w-5 h-5 text-app-brand" />
+            </div>
+            <div>
+              <h2 className="text-sm font-semibold">{user?.nickname || "用户"}</h2>
+              <p className="text-app-text-muted text-xs">{user?.phone}</p>
+            </div>
+          </div>
+
+          {/* Stats */}
+          <div className="grid grid-cols-2 gap-2">
+            <div className="bg-app-card/60 rounded-lg p-2.5 text-center">
+              <p className="text-base font-bold text-app-brand">
+                {user?.hasFullBook ? "全部" : user?.purchasedSections.length || 0}
+              </p>
+              <p className="text-app-text-muted text-xs">已购章节</p>
+            </div>
+            <div className="bg-app-card/60 rounded-lg p-2.5 text-center">
+              <p className="text-base font-bold text-app-brand">¥{(user?.earnings || 0).toFixed(1)}</p>
+              <p className="text-app-text-muted text-xs">累计收益</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Menu Items */}
+      <div className="p-4">
+        <div className="max-w-xs mx-auto space-y-2">
+          {/* Purchase prompt */}
+          {!user?.hasFullBook && (
+            <Link href="/chapters" className="block">
+              <div className="bg-gradient-to-r from-app-brand/20 to-app-card rounded-lg p-3 border border-app-brand/30">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <BookOpen className="w-4 h-4 text-app-brand" />
+                    <span className="text-app-text text-sm">购买整本书</span>
+                  </div>
+                  <span className="text-app-brand font-bold text-sm">¥{fullBookPrice}</span>
+                </div>
+              </div>
+            </Link>
+          )}
+
+          {/* Menu List - simplified, removed settings and docs */}
+          <div className="bg-app-card/60 rounded-lg overflow-hidden">
+            <Link href="/my/purchases" className="flex items-center justify-between p-3 border-b border-app-border">
+              <div className="flex items-center gap-2">
+                <ShoppingBag className="w-4 h-4 text-app-text-muted" />
+                <span className="text-sm">我的购买</span>
+              </div>
+              <ChevronRight className="w-4 h-4 text-app-text-muted" />
+            </Link>
+
+            <Link href="/my/referral" className="flex items-center justify-between p-3">
+              <div className="flex items-center gap-2">
+                <Share2 className="w-4 h-4 text-app-text-muted" />
+                <span className="text-sm">分销收益</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <span className="text-app-brand text-xs">¥{(user?.earnings || 0).toFixed(1)}</span>
+                <ChevronRight className="w-4 h-4 text-app-text-muted" />
+              </div>
+            </Link>
+          </div>
+
+          {/* Referral Code */}
+          <div className="bg-app-card/60 rounded-lg p-3">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-app-text-muted text-xs">我的邀请码</p>
+                <code className="text-app-brand font-mono text-sm">{user?.referralCode}</code>
+              </div>
+              <button
+                onClick={() => navigator.clipboard.writeText(user?.referralCode || "")}
+                className="text-app-text-muted text-xs hover:text-app-text px-2 py-1 rounded bg-app-card"
+              >
+                复制
+              </button>
+            </div>
+          </div>
+
+          {/* Logout */}
+          <button
+            onClick={logout}
+            className="w-full flex items-center justify-center gap-2 p-2.5 text-app-text-muted hover:text-red-400 transition-colors text-sm"
+          >
+            <LogOut className="w-4 h-4" />
+            <span>退出登录</span>
+          </button>
+        </div>
+      </div>
+    </main>
+  )
+}

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>
+  )
+}

app/my/referral/page.tsx

@@ -0,0 +1,233 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import Link from "next/link"
+import { ChevronLeft, Copy, Share2, Users, Wallet, MessageCircle, ImageIcon } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useStore, type Purchase } from "@/lib/store"
+import { PosterModal } from "@/components/modules/referral/poster-modal"
+import { WithdrawalModal } from "@/components/modules/referral/withdrawal-modal"
+
+export default function ReferralPage() {
+  const { user, isLoggedIn, settings, getAllPurchases, getAllUsers } = useStore()
+  const [copied, setCopied] = useState(false)
+  const [showPoster, setShowPoster] = useState(false)
+  const [showWithdrawal, setShowWithdrawal] = useState(false)
+  const [referralPurchases, setReferralPurchases] = useState<Purchase[]>([])
+  const [referralUsers, setReferralUsers] = useState<number>(0)
+
+  useEffect(() => {
+    if (user?.referralCode) {
+      const allPurchases = getAllPurchases()
+      const allUsers = getAllUsers()
+      const usersWithMyCode = allUsers.filter((u) => u.referredBy === user.referralCode)
+      const userIds = usersWithMyCode.map((u) => u.id)
+      const myReferralPurchases = allPurchases.filter((p) => userIds.includes(p.userId))
+      setReferralPurchases(myReferralPurchases)
+      setReferralUsers(usersWithMyCode.length)
+    }
+  }, [user, getAllPurchases, getAllUsers])
+
+  if (!isLoggedIn || !user) {
+    return (
+      <div className="min-h-screen bg-app-bg text-app-text flex items-center justify-center pb-20">
+        <div className="text-center">
+          <p className="text-app-text-muted mb-4">请先登录</p>
+          <Link href="/" className="text-app-brand hover:underline">
+            返回首页
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  const referralLink = `${typeof window !== "undefined" ? window.location.origin : ""}?ref=${user.referralCode}`
+  const distributorShare = settings?.distributorShare || 90
+  const totalEarnings = user.earnings || 0
+  const pendingEarnings = user.pendingEarnings || 0
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(referralLink)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const handleShare = async () => {
+    const shareText = `我正在读《一场SOUL的创业实验场》，每天6-9点的真实商业故事，推荐给你！${referralLink}`
+    try {
+      if (typeof navigator.share === 'function' && typeof navigator.canShare === 'function') {
+        await navigator.share({
+          title: "一场SOUL的创业实验场",
+          text: "来自Soul派对房的真实商业故事",
+          url: referralLink,
+        })
+      } else {
+        await navigator.clipboard.writeText(shareText)
+        alert("分享文案已复制，快去朋友圈或Soul派对分享吧！")
+      }
+    } catch {
+      await navigator.clipboard.writeText(shareText)
+      alert("分享文案已复制！")
+    }
+  }
+
+  const handleShareToWechat = async () => {
+    const shareText = `📖 推荐一本好书《一场SOUL的创业实验场》
+
+这是卡若每天早上6-9点在Soul派对房分享的真实商业故事，55个真实案例，讲透创业的底层逻辑。
+
+👉 点击阅读: ${referralLink}
+
+#创业 #商业思维 #Soul派对`
+    await navigator.clipboard.writeText(shareText)
+    alert("朋友圈文案已复制！\n\n打开微信 → 发朋友圈 → 粘贴即可")
+  }
+
+  const handleShareToSoul = async () => {
+    const shareText = `在Soul派对房听卡若讲了好多真实的创业故事，他把这些故事整理成了一本书《一场SOUL的创业实验场》，推荐给你们～
+
+每天早上6-9点直播，这本书就是直播内容的精华版。
+
+链接: ${referralLink}`
+    await navigator.clipboard.writeText(shareText)
+    alert("Soul分享文案已复制！\n\n打开Soul → 发动态 → 粘贴即可")
+  }
+
+  return (
+    <div className="min-h-screen bg-app-bg text-app-text pb-24">
+      {/* Header */}
+      <header className="sticky top-0 z-50 bg-app-bg/90 backdrop-blur-md border-b border-app-border">
+        <div className="max-w-xs mx-auto px-4 py-3 flex items-center">
+          <Link href="/my" className="flex items-center gap-1 text-app-text-muted hover:text-app-text">
+            <ChevronLeft className="w-5 h-5" />
+          </Link>
+          <h1 className="flex-1 text-center text-sm font-semibold">分销中心</h1>
+          <div className="w-5" />
+        </div>
+      </header>
+
+      <main className="max-w-xs mx-auto px-4 py-4">
+        {/* Earnings Card */}
+        <div className="bg-gradient-to-br from-app-brand/20 to-app-card rounded-xl p-4 border border-app-brand/30 mb-3">
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-2">
+              <Wallet className="w-4 h-4 text-app-brand" />
+              <span className="text-app-text-muted text-xs">累计收益</span>
+            </div>
+            <span className="text-app-brand text-xs">{distributorShare}%返利</span>
+          </div>
+
+          <p className="text-2xl font-bold text-app-text mb-0.5">¥{totalEarnings.toFixed(2)}</p>
+          <p className="text-app-text-muted text-xs mb-3">待结算: ¥{pendingEarnings.toFixed(2)}</p>
+
+          <Button
+            disabled={totalEarnings < 10}
+            onClick={() => setShowWithdrawal(true)}
+            className="w-full bg-app-brand hover:bg-app-brand-hover text-white h-8 text-xs"
+          >
+            {totalEarnings < 10 ? `满10元可提现` : "申请提现"}
+          </Button>
+        </div>
+
+        {/* Stats */}
+        <div className="grid grid-cols-2 gap-2 mb-3">
+          <div className="bg-app-card/60 rounded-lg p-2.5 text-center">
+            <Users className="w-4 h-4 text-app-brand mx-auto mb-1" />
+            <p className="text-base font-bold text-app-text">{referralUsers}</p>
+            <p className="text-app-text-muted text-xs">邀请人数</p>
+          </div>
+          <div className="bg-app-card/60 rounded-lg p-2.5 text-center">
+            <Share2 className="w-4 h-4 text-app-brand mx-auto mb-1" />
+            <p className="text-base font-bold text-app-text">{referralPurchases.length}</p>
+            <p className="text-app-text-muted text-xs">成交订单</p>
+          </div>
+        </div>
+
+        {/* Referral link */}
+        <div className="bg-app-card/60 rounded-xl p-3 border border-app-border mb-3">
+          <p className="text-app-text text-xs font-medium mb-2">我的专属链接</p>
+          <div className="flex gap-2 mb-2">
+            <div className="flex-1 bg-app-bg rounded-lg px-2.5 py-1.5 text-app-text-muted text-xs truncate font-mono">
+              {referralLink}
+            </div>
+            <Button
+              onClick={handleCopy}
+              size="sm"
+              variant="outline"
+              className="border-app-border text-app-text hover:bg-app-card bg-transparent text-xs h-7 px-2"
+            >
+              <Copy className="w-3 h-3 mr-1" />
+              {copied ? "已复制" : "复制"}
+            </Button>
+          </div>
+          <p className="text-app-text-muted text-xs">
+            邀请码: <span className="text-app-brand font-mono">{user.referralCode}</span>
+          </p>
+        </div>
+
+        {/* Share buttons - improved for WeChat/Soul */}
+        <div className="space-y-2 mb-3">
+          <Button
+            onClick={() => setShowPoster(true)}
+            className="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-4 text-xs"
+          >
+            <ImageIcon className="w-4 h-4 mr-2" />
+            生成推广海报
+          </Button>
+          <Button
+            onClick={handleShareToWechat}
+            className="w-full bg-green-600 hover:bg-green-700 text-white py-4 text-xs"
+          >
+            <MessageCircle className="w-4 h-4 mr-2" />
+            分享到朋友圈
+          </Button>
+          <Button
+            onClick={handleShare}
+            variant="outline"
+            className="w-full border-app-border text-app-text hover:bg-app-card bg-transparent py-4 text-xs"
+          >
+            更多分享方式
+          </Button>
+        </div>
+
+        <PosterModal 
+          isOpen={showPoster} 
+          onClose={() => setShowPoster(false)} 
+          referralLink={referralLink}
+          referralCode={user.referralCode}
+          nickname={user.nickname}
+        />
+
+        <WithdrawalModal
+          isOpen={showWithdrawal}
+          onClose={() => setShowWithdrawal(false)}
+          availableAmount={totalEarnings}
+        />
+
+        {/* Recent earnings */}
+        {referralPurchases.length > 0 && (
+          <div className="bg-app-card/60 rounded-xl border border-app-border">
+            <div className="p-2.5 border-b border-app-border">
+              <p className="text-app-text text-xs font-medium">收益明细</p>
+            </div>
+            <div className="divide-y divide-app-border max-h-40 overflow-auto">
+              {referralPurchases.slice(0, 5).map((purchase) => (
+                <div key={purchase.id} className="p-2.5 flex items-center justify-between">
+                  <div>
+                    <p className="text-app-text text-xs">{purchase.type === "fullbook" ? "整本书" : "单节"}</p>
+                    <p className="text-app-text-muted text-xs">
+                      {new Date(purchase.createdAt).toLocaleDateString("zh-CN")}
+                    </p>
+                  </div>
+                  <p className="text-app-brand text-sm font-semibold">
+                    +¥{(purchase.referrerEarnings || 0).toFixed(2)}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}

app/my/settings/page.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { ArrowLeft, Phone, Bell, Shield, HelpCircle } from "lucide-react"
+import { useStore } from "@/lib/store"
+
+export default function SettingsPage() {
+  const { user, updateUser } = useStore()
+  const [nickname, setNickname] = useState(user?.nickname || "")
+  const [saved, setSaved] = useState(false)
+
+  const handleSave = () => {
+    if (user) {
+      updateUser(user.id, { nickname })
+      setSaved(true)
+      setTimeout(() => setSaved(false), 2000)
+    }
+  }
+
+  return (
+    <main className="min-h-screen bg-[#0a1628] text-white pb-20">
+      <div className="sticky top-0 z-10 bg-[#0a1628]/95 backdrop-blur-md border-b border-gray-700/50">
+        <div className="max-w-md mx-auto flex items-center gap-4 p-4">
+          <Link href="/my" className="p-2 -ml-2">
+            <ArrowLeft className="w-5 h-5" />
+          </Link>
+          <h1 className="text-lg font-semibold">账户设置</h1>
+        </div>
+      </div>
+
+      <div className="p-4">
+        <div className="max-w-md mx-auto space-y-4">
+          {/* Profile Settings */}
+          <div className="bg-[#0f2137]/60 rounded-xl p-4">
+            <h3 className="text-gray-400 text-sm mb-4">个人信息</h3>
+
+            <div className="space-y-4">
+              <div>
+                <label className="text-gray-400 text-xs">昵称</label>
+                <input
+                  type="text"
+                  value={nickname}
+                  onChange={(e) => setNickname(e.target.value)}
+                  className="w-full bg-[#0a1628] border border-gray-700 rounded-lg px-4 py-3 text-white mt-1"
+                />
+              </div>
+
+              <div>
+                <label className="text-gray-400 text-xs">手机号</label>
+                <div className="flex items-center gap-2 mt-1">
+                  <Phone className="w-4 h-4 text-gray-500" />
+                  <span className="text-gray-400">{user?.phone}</span>
+                </div>
+              </div>
+            </div>
+
+            <button
+              onClick={handleSave}
+              className="w-full mt-4 bg-[#38bdac] hover:bg-[#2da396] text-white py-3 rounded-lg font-medium"
+            >
+              {saved ? "已保存" : "保存修改"}
+            </button>
+          </div>
+
+          {/* Other Settings */}
+          <div className="bg-[#0f2137]/60 rounded-xl overflow-hidden">
+            <div className="flex items-center justify-between p-4 border-b border-gray-700/30">
+              <div className="flex items-center gap-3">
+                <Bell className="w-5 h-5 text-gray-400" />
+                <span>消息通知</span>
+              </div>
+              <div className="w-10 h-5 bg-[#38bdac] rounded-full relative">
+                <div className="w-4 h-4 bg-white rounded-full absolute right-0.5 top-0.5" />
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between p-4 border-b border-gray-700/30">
+              <div className="flex items-center gap-3">
+                <Shield className="w-5 h-5 text-gray-400" />
+                <span>隐私设置</span>
+              </div>
+            </div>
+
+            <Link href="/docs" className="flex items-center justify-between p-4">
+              <div className="flex items-center gap-3">
+                <HelpCircle className="w-5 h-5 text-gray-400" />
+                <span>帮助文档</span>
+              </div>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}

app/page.tsx

@@ -0,0 +1,26 @@
+import { BookCover } from "@/components/book-cover"
+import { BookIntro } from "@/components/book-intro"
+import { TableOfContents } from "@/components/table-of-contents"
+import { PurchaseSection } from "@/components/purchase-section"
+import { Footer } from "@/components/footer"
+import { getBookStructure } from "@/lib/book-file-system"
+
+// Force dynamic rendering if we want it to update on every request without rebuild
+// or use revalidation. For now, we can leave it default (static if no dynamic functions used, but fs usage makes it dynamic in dev usually).
+// Actually, in App Router, using fs directly in a Server Component usually makes it static at build time unless using dynamic functions.
+// To ensure it updates when files change in dev, it should be fine.
+export const dynamic = 'force-dynamic'; 
+
+export default async function HomePage() {
+  const parts = getBookStructure()
+
+  return (
+    <main className="min-h-screen bg-[#0a1628] text-white pb-20">
+      <BookCover />
+      <BookIntro />
+      <TableOfContents parts={parts} />
+      <PurchaseSection />
+      <Footer />
+    </main>
+  )
+}

app/read/[id]/page.tsx

@@ -0,0 +1,40 @@
+import { notFound } from "next/navigation"
+import { ChapterContent } from "@/components/chapter-content"
+import { getSectionBySlug, getChapterBySectionSlug } from "@/lib/book-file-system"
+import { specialSections } from "@/lib/book-data"
+
+interface ReadPageProps {
+  params: Promise<{ id: string }>
+}
+
+export const dynamic = "force-dynamic"
+export const runtime = "nodejs"
+
+export default async function ReadPage({ params }: ReadPageProps) {
+  const { id } = await params
+
+  if (id === "preface") {
+    return <ChapterContent section={specialSections.preface} partTitle="序言" chapterTitle="" />
+  }
+
+  if (id === "epilogue") {
+    return <ChapterContent section={specialSections.epilogue} partTitle="尾声" chapterTitle="" />
+  }
+
+  try {
+    const section = getSectionBySlug(id)
+    if (!section) {
+      notFound()
+    }
+
+    const context = getChapterBySectionSlug(id)
+    if (!context) {
+      notFound()
+    }
+
+    return <ChapterContent section={section} partTitle={context.part.title} chapterTitle={context.chapter.title} />
+  } catch (error) {
+    console.error("[v0] Error in ReadPage:", error)
+    notFound()
+  }
+}