+
+ );
+ }
+
+ return (
+ <>
+ 专题未找到
+返回 专题列表
+
+
+
+
+
+
+
+
+ 专题合集
+ /
+ {topic.title}
+
+ {topic.title}
+{topic.description}
+
+
+
+ {topic.articleCount} 篇文章
+
+
+
+ {dayjs(topic.createdAt).format("YYYY 年 MM 月")}
+
+
+
+
+
+ );
+};
diff --git a/src/pages/topics/index.tsx b/src/pages/topics/index.tsx
new file mode 100644
index 0000000..2b17499
--- /dev/null
+++ b/src/pages/topics/index.tsx
@@ -0,0 +1,204 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { ITopic } from "../../interfaces";
+
+const cardStyle: React.CSSProperties = {
+ display: "block",
+ background: "#fff",
+ borderRadius: "8px",
+ overflow: "hidden",
+ textDecoration: "none",
+ color: "inherit",
+ boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+ transition: "all 0.3s ease",
+ height: "100%",
+};
+
+const cardHoverStyle: React.CSSProperties = {
+ boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+ transform: "translateY(-4px)",
+};
+
+const coverStyle: React.CSSProperties = {
+ position: "relative",
+ height: "180px",
+ overflow: "hidden",
+ background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+};
+
+const coverOverlayStyle: React.CSSProperties = {
+ position: "absolute",
+ bottom: "0",
+ left: "0",
+ right: "0",
+ height: "60%",
+ background: "linear-gradient(to top, rgba(0,0,0,0.4), transparent)",
+};
+
+const imgStyle: React.CSSProperties = {
+ width: "100%",
+ height: "100%",
+ objectFit: "cover",
+};
+
+const contentStyle: React.CSSProperties = {
+ padding: "20px",
+};
+
+const titleStyle: React.CSSProperties = {
+ fontSize: "1.25rem",
+ fontWeight: "600",
+ marginBottom: "12px",
+ color: "#333",
+ lineHeight: "1.4",
+};
+
+const descStyle: React.CSSProperties = {
+ fontSize: "0.9rem",
+ color: "#666",
+ lineHeight: "1.6",
+ marginBottom: "16px",
+ display: "-webkit-box",
+ WebkitLineClamp: 2,
+ WebkitBoxOrient: "vertical",
+ overflow: "hidden",
+};
+
+const metaStyle: React.CSSProperties = {
+ display: "flex",
+ alignItems: "center",
+ gap: "16px",
+ fontSize: "0.85rem",
+ color: "#999",
+};
+
+const badgeStyle: React.CSSProperties = {
+ display: "inline-flex",
+ alignItems: "center",
+ gap: "4px",
+ padding: "4px 12px",
+ background: "#f8f9fa",
+ borderRadius: "20px",
+ fontWeight: "500",
+};
+
+const pageHeaderStyle: React.CSSProperties = {
+ padding: "40px 0",
+ textAlign: "center",
+ marginBottom: "20px",
+};
+
+const pageTitleStyle: React.CSSProperties = {
+ fontSize: "2.5rem",
+ fontWeight: "700",
+ color: "#333",
+ marginBottom: "12px",
+};
+
+const pageSubtitleStyle: React.CSSProperties = {
+ fontSize: "1.1rem",
+ color: "#999",
+};
+
+interface TopicCardProps {
+ topic: ITopic;
+}
+
+const TopicCard: React.FC
+
+ + + 专题文章 +
+ + {tableQueryResult.isLoading && ( +
+ 加载中...
+
+ )}
+
+ {!tableQueryResult.data?.data?.length && !tableQueryResult.isFetching && (
+
+ 暂无文章
+
+ )}
+
+ {tableQueryResult?.data?.data.map((item) => (
+
+ {}}
+ isItemFavorited={item.favorited}
+ isItemLoading={false}
+ />
+
+ ))}
+
+ 
+
+
+
+
+
+ );
+};
+
+export const TopicsPage: React.FC = () => {
+ const [topics] = useState{topic.title}
+{topic.description}
+
+
+
+ {topic.articleCount} 篇文章
+
+
+
+
+ );
+};
+
+
+ 专题合集
+精选技术专题，深度系统学习
+
+
+
+
+
+ {topics.map((topic) => (
+
+
+
+ ))}
+