diff --git a/app/vip/components/dashboard/TopicCards.tsx b/app/vip/components/dashboard/TopicCards.tsx
index 7c375eb..fdc6c7e 100644
--- a/app/vip/components/dashboard/TopicCards.tsx
+++ b/app/vip/components/dashboard/TopicCards.tsx
@@ -4,6 +4,8 @@ import Link from "next/link";
 import { TOPICS } from "@/app/data/vip.mock";
 import styles from "../vip.module.css";
 
+type TopicItem = (typeof TOPICS)[number];
+
 export function TopicCards() {
   return (
     <section className={styles.section}>
@@ -12,7 +14,8 @@ export function TopicCards() {
         className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
         style={{ animationDelay: "0.2s", animationFillMode: "both" }}
       >
-        {TOPICS.map((t) => {
+        {TOPICS.map((t: TopicItem) => {
+          const { id, href } = t;
           const content = (
             <>
               <span className={styles.topicIcon}>{t.icon}</span>
@@ -20,21 +23,18 @@ export function TopicCards() {
               <span className={styles.topicDesc}>{t.desc}</span>
             </>
           );
-          if (t.href) {
-            return (
-              <Link
-                key={t.id}
-                href={t.href}
-                className={styles.topicCard}
-                target={t.href.startsWith("http") ? "_blank" : undefined}
-                rel={t.href.startsWith("http") ? "noopener noreferrer" : undefined}
-              >
-                {content}
-              </Link>
-            );
-          }
-          return (
-            <div key={t.id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
+          return href ? (
+            <Link
+              key={id}
+              href={href}
+              className={styles.topicCard}
+              target={href.startsWith("http") ? "_blank" : undefined}
+              rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
+            >
+              {content}
+            </Link>
+          ) : (
+            <div key={id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
               {content}
             </div>
           );
diff --git a/app/vip/components/landing/TopicEbookShowcase.tsx b/app/vip/components/landing/TopicEbookShowcase.tsx
index 834f525..868c353 100644
--- a/app/vip/components/landing/TopicEbookShowcase.tsx
+++ b/app/vip/components/landing/TopicEbookShowcase.tsx
@@ -18,6 +18,7 @@ export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
         style={{ animationDelay: "0.2s", animationFillMode: "both", marginBottom: "1.5rem" }}
       >
         {TOPICS_DISPLAY.map((t) => {
+          const { id, href } = t;
           const isLocked = "locked" in t && t.locked && onLockedClick;
           const content = (
             <span className={styles.topicCardInner}>
@@ -32,7 +33,7 @@ export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
           if (isLocked) {
             return (
               <button
-                key={t.id}
+                key={id}
                 type="button"
                 className={styles.topicCard}
                 onClick={onLockedClick}
@@ -42,21 +43,21 @@ export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
               </button>
             );
           }
-          if (t.href) {
+          if (href) {
             return (
               <Link
-                key={t.id}
-                href={t.href}
+                key={id}
+                href={href}
                 className={styles.topicCard}
-                target={t.href.startsWith("http") ? "_blank" : undefined}
-                rel={t.href.startsWith("http") ? "noopener noreferrer" : undefined}
+                target={href.startsWith("http") ? "_blank" : undefined}
+                rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
               >
                 {content}
               </Link>
             );
           }
           return (
-            <div key={t.id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
+            <div key={id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
               {content}
             </div>
           );
@@ -69,27 +70,28 @@ export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
         className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
         style={{ animationDelay: "0.22s", animationFillMode: "both", marginBottom: "1.5rem" }}
       >
-        {VIDEO_COURSES_DISPLAY.map((v) =>
-          v.href ? (
+        {VIDEO_COURSES_DISPLAY.map((v) => {
+          const { id, href, icon, title, desc } = v;
+          return href ? (
             <Link
-              key={v.id}
-              href={v.href}
+              key={id}
+              href={href}
               className={styles.topicCard}
-              target={v.href.startsWith("http") ? "_blank" : undefined}
-              rel={v.href.startsWith("http") ? "noopener noreferrer" : undefined}
+              target={href.startsWith("http") ? "_blank" : undefined}
+              rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
             >
-              <span className={styles.topicIcon}>{v.icon}</span>
-              <span className={styles.topicTitle}>{v.title}</span>
-              <span className={styles.topicDesc}>{v.desc}</span>
+              <span className={styles.topicIcon}>{icon}</span>
+              <span className={styles.topicTitle}>{title}</span>
+              <span className={styles.topicDesc}>{desc}</span>
             </Link>
           ) : (
-            <div key={v.id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.9 }}>
-              <span className={styles.topicIcon}>{v.icon}</span>
-              <span className={styles.topicTitle}>{v.title}</span>
-              <span className={styles.topicDesc}>{v.desc}</span>
+            <div key={id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.9 }}>
+              <span className={styles.topicIcon}>{icon}</span>
+              <span className={styles.topicTitle}>{title}</span>
+              <span className={styles.topicDesc}>{desc}</span>
             </div>
-          )
-        )}
+          );
+        })}
       </div>
 
       {/* 电子书展示 */}
@@ -105,6 +107,7 @@ export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
         }}
       >
         {EBOOKS_DISPLAY.map((e) => {
+          const { id, href } = e;
           const cardContent = (
             <>
               <span style={{ fontSize: "1.5rem", marginBottom: "0.5rem", display: "block" }}>📖</span>
@@ -117,10 +120,10 @@ export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
               </div>
             </>
           );
-          return e.href ? (
+          return href ? (
             <Link
-              key={e.id}
-              href={e.href}
+              key={id}
+              href={href}
               className={styles.card}
               style={{
                 display: "block",
@@ -133,7 +136,7 @@ export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
             </Link>
           ) : (
             <div
-              key={e.id}
+              key={id}
               className={styles.card}
               style={{
                 display: "block",
diff --git a/app/vip/components/landing/TopicEntries.tsx b/app/vip/components/landing/TopicEntries.tsx
index 50b5648..e63b961 100644
--- a/app/vip/components/landing/TopicEntries.tsx
+++ b/app/vip/components/landing/TopicEntries.tsx
@@ -12,7 +12,8 @@ export function TopicEntries() {
         className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
         style={{ animationDelay: "0.2s", animationFillMode: "both" }}
       >
-        {TOPICS.map((t, i) => {
+        {TOPICS.map((t) => {
+          const { id, href } = t;
           const content = (
             <>
               <span className={styles.topicIcon}>{t.icon}</span>
@@ -20,21 +21,18 @@ export function TopicEntries() {
               <span className={styles.topicDesc}>{t.desc}</span>
             </>
           );
-          if (t.href) {
-            return (
-              <Link
-                key={t.id}
-                href={t.href}
-                className={styles.topicCard}
-                target={t.href.startsWith("http") ? "_blank" : undefined}
-                rel={t.href.startsWith("http") ? "noopener noreferrer" : undefined}
-              >
-                {content}
-              </Link>
-            );
-          }
-          return (
-            <div key={t.id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
+          return href ? (
+            <Link
+              key={id}
+              href={href}
+              className={styles.topicCard}
+              target={href.startsWith("http") ? "_blank" : undefined}
+              rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
+            >
+              {content}
+            </Link>
+          ) : (
+            <div key={id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
               {content}
             </div>
           );