+
+ );
+};
diff --git a/src/pages/topic/index.tsx b/src/pages/topic/index.tsx
new file mode 100644
index 0000000..cb79907
--- /dev/null
+++ b/src/pages/topic/index.tsx
@@ -0,0 +1,232 @@
+import { useList } from "@refinedev/core";
+import { Link } from "react-router-dom";
+import { ITopic } from "../../interfaces";
+import dayjs from "dayjs";
+
+export const TopicListPage: React.FC = () => {
+ const { data: topics, isLoading } = useList
+
+
+
+ 返回专题列表
+
+
+ {displayTopic.title}
+{displayTopic.description}
+
+
+ {displayTopic.articleCount} 篇文章
+
+
+ 创建于 {dayjs(displayTopic.createdAt).format("YYYY年MM月DD日")}
+
+
+
+
+ 专题文章
+ {articlesLoading && ( +Loading articles...
+ )}
+ {!displayArticles.length && !articlesLoading && (
+
+ 该专题暂无文章...
+
+ )}
+ {displayArticles.map((article) => (
+
+
+ ))}
+
+
+ 
+
+
+
+
+
+ {article.author.username}
+
+
+ {dayjs(article.createdAt).format("MMM DD, YYYY")}
+
+
+
+ {article.title}
+{article.description}
+ Read more... +-
+ {article.tagList.map((tag, index) => (
+
- + {tag} + + ))} +
+
+ );
+};
+
+
+
+ + 专题专栏 +
++ 探索精选技术专题，深度学习专业领域知识 +
+
+ {isLoading && (
+
+
+
+ )}
+
+ Loading...
+
+ Loading topics...
+
+ {displayTopics.map((topic) => (
+
+
+
+
+ ))}
+ {
+ e.currentTarget.style.transform = "translateY(-8px)";
+ e.currentTarget.style.boxShadow =
+ "0 20px 40px rgba(0,0,0,0.15)";
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.transform = "translateY(0)";
+ e.currentTarget.style.boxShadow =
+ "0 1px 3px rgba(0,0,0,0.1)";
+ }}
+ >
+
+
+
+ 
{
+ e.currentTarget.style.transform = "scale(1.05)";
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.transform = "scale(1)";
+ }}
+ />
+
+
+
+ {topic.articleCount} 篇
+
+
+
+ + {topic.title} +
++ {topic.description} +
+
+
+
+ {dayjs(topic.createdAt).format("YYYY年MM月DD日")}
+
+
+ 查看专题
+
+
+
+