's'

app/vip/components/landing/LandingCTA.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import { formatRestoreDateShort } from "@/config/promo.config";
 import styles from "../vip.module.css";
 
@@ -9,6 +10,11 @@ type LandingCTAProps = {
 };
 
 export function LandingCTA({ onJoin, onLogin }: LandingCTAProps) {
+  const [restoreDate, setRestoreDate] = useState<string>("");
+  useEffect(() => {
+    setRestoreDate(formatRestoreDateShort());
+  }, []);
+
   return (
     <section className={styles.section} style={{ paddingBottom: "2rem" }}>
       <div
@@ -23,7 +29,7 @@ export function LandingCTA({ onJoin, onLogin }: LandingCTAProps) {
         }}
       >
         <h2 style={{ fontSize: "1.35rem", margin: "0 0 0.5rem", color: "var(--foreground)" }}>
-          限时特惠 · {formatRestoreDateShort()}恢复原价
+          限时特惠 · {restoreDate || "—"}恢复原价
         </h2>
         <p style={{ fontSize: "0.9rem", color: "var(--muted-foreground)", margin: "0 0 1rem" }}>
           阶梯定价 · 数字交付 · 不支持退款

app/vip/components/landing/TopicEbookShowcase.tsx

@@ -108,18 +108,49 @@ export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
       >
         {EBOOKS_DISPLAY.map((e) => {
           const { id, href } = e;
+          const isFree = "free" in e && e.free;
+          const isLocked = "locked" in e && e.locked && onLockedClick;
           const cardContent = (
             <>
               <span style={{ fontSize: "1.5rem", marginBottom: "0.5rem", display: "block" }}>📖</span>
-              <div style={{ fontWeight: 600, color: "var(--foreground)", marginBottom: "0.25rem" }}>
+              <div style={{ fontWeight: 600, color: "var(--foreground)", marginBottom: "0.25rem", display: "flex", alignItems: "center", gap: "0.5rem", flexWrap: "wrap" }}>
                 《{e.title}》
+                {isFree && (
+                  <span className={styles.freeBadge}>
+                    免费
+                  </span>
+                )}
+                {isLocked && (
+                  <span title="VIP专享" style={{ fontSize: "1rem" }}>🔒</span>
+                )}
               </div>
               <div style={{ fontSize: "0.9rem", color: "var(--muted-foreground)" }}>{e.desc}</div>
-              <div style={{ marginTop: "0.75rem", fontSize: "0.85rem", color: "var(--muted-foreground)" }}>
-                阅读 →
+              <div style={{ marginTop: "0.75rem", fontSize: "0.85rem", color: isLocked ? "var(--muted-foreground)" : "var(--muted-foreground)" }}>
+                {isLocked ? "开通VIP解锁 →" : "阅读 →"}
               </div>
             </>
           );
+          if (isLocked) {
+            return (
+              <button
+                key={id}
+                type="button"
+                onClick={onLockedClick}
+                className={styles.card}
+                style={{
+                  display: "block",
+                  padding: "1.25rem",
+                  cursor: "pointer",
+                  border: "none",
+                  font: "inherit",
+                  textAlign: "left",
+                  width: "100%",
+                }}
+              >
+                {cardContent}
+              </button>
+            );
+          }
           return href ? (
             <Link
               key={id}

app/vip/components/vip.module.css

@@ -178,6 +178,15 @@
   border-color: rgba(245, 158, 11, 0.3);
 }
 
+.freeBadge {
+  font-size: 0.7rem;
+  padding: 0.15rem 0.5rem;
+  border-radius: 9999px;
+  background: var(--muted);
+  color: var(--accent);
+  font-weight: 500;
+}
+
 /* 星球登录信息卡片 */
 .loginCard {
   margin-top: 1.25rem;