0 ? "100%" : "0",
+ background: `rgba(0, 0, 0, ${shadowOpacity.get()})`,
+ pointerEvents: "none",
+ zIndex: -1,
+ transform: "translateX(-100%)",
+ }}
+ />
+
+ {canGoBack && (
+
+ )}
+
+ {children}
+
+ );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index 77f3aaa..c52bbf4 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,3 +2,6 @@ export * from "./Header";
export * from "./Footer";
export * from "./Layout";
export * from "./Error";
+export * from "./BottomNav";
+export * from "./PageTransition";
+export * from "./AnimatedPage";
diff --git a/src/data/mockData.ts b/src/data/mockData.ts
new file mode 100644
index 0000000..4d82e94
--- /dev/null
+++ b/src/data/mockData.ts
@@ -0,0 +1,272 @@
+import { IArticle } from "../interfaces";
+import { getTopicArticleSlugs } from "./mockTopics";
+
+export const mockArticles: IArticle[] = [
+ {
+ slug: "welcome-to-react",
+ title: "欢迎来到React世界",
+ description: "本文将带你入门React，了解组件化开发的基本概念和优势。",
+ body: "React是一个用于构建用户界面的JavaScript库...",
+ tagList: ["react", "javascript", "frontend"],
+ createdAt: "2024-01-15T10:00:00Z",
+ updatedAt: "2024-01-15T10:00:00Z",
+ favorited: false,
+ favoritesCount: 42,
+ author: {
+ username: "reactdev",
+ bio: "React爱好者",
+ image: "https://api.dicebear.com/7.x/avataaars/svg?seed=reactdev",
+ following: false,
+ },
+ },
+ {
+ slug: "react-component-basics",
+ title: "React组件基础",
+ description: "学习React组件的基本结构、Props和State的使用方法。",
+ body: "组件是React应用的基本构建块...",
+ tagList: ["react", "components", "basics"],
+ createdAt: "2024-01-20T14:30:00Z",
+ updatedAt: "2024-01-22T09:15:00Z",
+ favorited: true,
+ favoritesCount: 128,
+ author: {
+ username: "johndoe",
+ bio: "全栈开发者",
+ image: "https://api.dicebear.com/7.x/avataaars/svg?seed=johndoe",
+ following: true,
+ },
+ },
+ {
+ slug: "state-management-101",
+ title: "状态管理入门",
+ description: "了解React中的状态管理，从useState到useReducer。",
+ body: "状态管理是React开发中的核心概念...",
+ tagList: ["react", "state", "hooks"],
+ createdAt: "2024-02-01T11:00:00Z",
+ updatedAt: "2024-02-05T16:45:00Z",
+ favorited: false,
+ favoritesCount: 89,
+ author: {
+ username: "janedoe",
+ bio: "前端工程师",
+ image: "https://api.dicebear.com/7.x/avataaars/svg?seed=janedoe",
+ following: false,
+ },
+ },
+ {
+ slug: "typescript-for-beginners",
+ title: "TypeScript初学者指南",
+ description: "从零开始学习TypeScript，掌握类型安全的JavaScript开发。",
+ body: "TypeScript是JavaScript的超集...",
+ tagList: ["typescript", "javascript", "tutorial"],
+ createdAt: "2024-01-25T09:00:00Z",
+ updatedAt: "2024-02-10T13:30:00Z",
+ favorited: true,
+ favoritesCount: 256,
+ author: {
+ username: "tsmaster",
+ bio: "TypeScript专家",
+ image: "https://api.dicebear.com/7.x/avataaars/svg?seed=tsmaster",
+ following: false,
+ },
+ },
+ {
+ slug: "advanced-typescript-patterns",
+ title: "TypeScript高级模式",
+ description: "深入探索TypeScript的高级类型系统和设计模式。",
+ body: "本文将介绍一些高级的TypeScript模式...",
+ tagList: ["typescript", "patterns", "advanced"],
+ createdAt: "2024-02-15T10:00:00Z",
+ updatedAt: "2024-02-18T11:20:00Z",
+ favorited: false,
+ favoritesCount: 167,
+ author: {
+ username: "typescriptpro",
+ bio: "热爱TypeScript",
+ image: "https://api.dicebear.com/7.x/avataaars/svg?seed=typescriptpro",
+ following: true,
+ },
+ },
+ {
+ slug: "building-a-fullstack-app",
+ title: "构建全栈应用",
+ description: "使用React和Node.js构建一个完整的Web应用。",
+ body: "全栈开发需要掌握前端和后端技术...",
+ tagList: ["fullstack", "react", "nodejs"],
+ createdAt: "2024-02-05T08:00:00Z",
+ updatedAt: "2024-02-12T15:00:00Z",
+ favorited: false,
+ favoritesCount: 312,
+ author: {
+ username: "fullstackdev",
+ bio: "全栈开发者",
+ image: "https://api.dicebear.com/7.x/avataaars/svg?seed=fullstackdev",
+ following: false,
+ },
+ },
+ {
+ slug: "nodejs-backend-basics",
+ title: "Node.js后端基础",
+ description: "学习使用Node.js和Express构建RESTful API。",
+ body: "Node.js让JavaScript可以运行在服务器端...",
+ tagList: ["nodejs", "backend", "express"],
+ createdAt: "2024-02-08T14:00:00Z",
+ updatedAt: "2024-02-20T10:30:00Z",
+ favorited: true,
+ favoritesCount: 198,
+ author: {
+ username: "backenddev",
+ bio: "后端工程师",
+ image: "https://api.dicebear.com/7.x/avataaars/svg?seed=backenddev",
+ following: false,
+ },
+ },
+ {
+ slug: "mastering-flexbox",
+ title: "精通Flexbox布局",
+ description: "彻底掌握CSS Flexbox布局的所有属性和技巧。",
+ body: "Flexbox是现代CSS布局的基石...",
+ tagList: ["css", "flexbox", "layout"],
+ createdAt: "2024-02-12T11:00:00Z",
+ updatedAt: "2024-02-25T09:00:00Z",
+ favorited: false,
+ favoritesCount: 445,
+ author: {
+ username: "cssmaster",
+ bio: "CSS魔法师",
+ image: "https://api.dicebear.com/7.x/avataaars/svg?seed=cssmaster",
+ following: true,
+ },
+ },
+ {
+ slug: "css-grid-in-depth",
+ title: "CSS Grid深度解析",
+ description: "全面学习CSS Grid布局系统，创建复杂的响应式布局。",
+ body: "CSS Grid是一个强大的二维布局系统...",
+ tagList: ["css", "grid", "responsive"],
+ createdAt: "2024-02-18T15:00:00Z",
+ updatedAt: "2024-03-01T14:20:00Z",
+ favorited: true,
+ favoritesCount: 378,
+ author: {
+ username: "gridmaster",
+ bio: "布局专家",
+ image: "https://api.dicebear.com/7.x/avataaars/svg?seed=gridmaster",
+ following: false,
+ },
+ },
+ {
+ slug: "rest-api-best-practices",
+ title: "REST API最佳实践",
+ description: "学习设计和构建高质量的RESTful API。",
+ body: "一个好的API设计应该是直观、一致和易用的...",
+ tagList: ["api", "rest", "backend"],
+ createdAt: "2024-02-20T10:00:00Z",
+ updatedAt: "2024-03-05T11:15:00Z",
+ favorited: false,
+ favoritesCount: 234,
+ author: {
+ username: "apidesigner",
+ bio: "API设计师",
+ image: "https://api.dicebear.com/7.x/avataaars/svg?seed=apidesigner",
+ following: false,
+ },
+ },
+ {
+ slug: "api-authentication",
+ title: "API认证策略",
+ description: "了解JWT、OAuth等API认证方式的实现原理。",
+ body: "安全是API设计中最重要的考虑因素之一...",
+ tagList: ["api", "security", "authentication"],
+ createdAt: "2024-02-28T13:00:00Z",
+ updatedAt: "2024-03-08T16:45:00Z",
+ favorited: true,
+ favoritesCount: 567,
+ author: {
+ username: "securityexpert",
+ bio: "安全专家",
+ image: "https://api.dicebear.com/7.x/avataaars/svg?seed=securityexpert",
+ following: true,
+ },
+ },
+ {
+ slug: "unit-testing-react",
+ title: "React单元测试",
+ description: "使用Jest和Testing Library进行React组件测试。",
+ body: "测试是保证代码质量的关键...",
+ tagList: ["testing", "react", "jest"],
+ createdAt: "2024-03-01T09:00:00Z",
+ updatedAt: "2024-03-10T14:30:00Z",
+ favorited: false,
+ favoritesCount: 289,
+ author: {
+ username: "testmaster",
+ bio: "测试工程师",
+ image: "https://api.dicebear.com/7.x/avataaars/svg?seed=testmaster",
+ following: false,
+ },
+ },
+ {
+ slug: "e2e-testing-with-cypress",
+ title: "使用Cypress进行端到端测试",
+ description: "学习使用Cypress进行完整的端到端测试。",
+ body: "端到端测试模拟真实用户交互...",
+ tagList: ["testing", "cypress", "e2e"],
+ createdAt: "2024-03-05T14:00:00Z",
+ updatedAt: "2024-03-12T10:00:00Z",
+ favorited: true,
+ favoritesCount: 356,
+ author: {
+ username: "qaengineer",
+ bio: "QA工程师",
+ image: "https://api.dicebear.com/7.x/avataaars/svg?seed=qaengineer",
+ following: false,
+ },
+ },
+ {
+ slug: "react-hooks-deep-dive",
+ title: "React Hooks深度解析",
+ description: "深入理解React Hooks的工作原理和高级用法。",
+ body: "Hooks彻底改变了React组件的写法...",
+ tagList: ["react", "hooks", "advanced"],
+ createdAt: "2024-03-08T11:00:00Z",
+ updatedAt: "2024-03-15T09:30:00Z",
+ favorited: false,
+ favoritesCount: 523,
+ author: {
+ username: "reactexpert",
+ bio: "React核心贡献者",
+ image: "https://api.dicebear.com/7.x/avataaars/svg?seed=reactexpert",
+ following: true,
+ },
+ },
+ {
+ slug: "performance-optimization-react",
+ title: "React性能优化指南",
+ description: "学习如何优化React应用的性能。",
+ body: "性能优化是React开发中的重要课题...",
+ tagList: ["react", "performance", "optimization"],
+ createdAt: "2024-03-12T15:00:00Z",
+ updatedAt: "2024-03-18T12:00:00Z",
+ favorited: true,
+ favoritesCount: 412,
+ author: {
+ username: "perfexpert",
+ bio: "性能优化专家",
+ image: "https://api.dicebear.com/7.x/avataaars/svg?seed=perfexpert",
+ following: false,
+ },
+ },
+];
+
+export const getTopicArticles = (topicSlug: string): IArticle[] => {
+ const articleSlugs = getTopicArticleSlugs(topicSlug);
+ return mockArticles.filter(article => articleSlugs.includes(article.slug));
+};
+
+export const getMockArticles = (limit: number = 10, offset: number = 0) => {
+ return {
+ articles: mockArticles.slice(offset, offset + limit),
+ articlesCount: mockArticles.length,
+ };
+};
diff --git a/src/data/mockTopics.ts b/src/data/mockTopics.ts
new file mode 100644
index 0000000..6abfe9a
--- /dev/null
+++ b/src/data/mockTopics.ts
@@ -0,0 +1,76 @@
+import { ITopic } from "../interfaces";
+
+export const mockTopics: ITopic[] = [
+ {
+ id: "1",
+ slug: "getting-started-with-react",
+ title: "React 入门指南",
+ description: "从零开始学习React，掌握现代前端开发的核心概念和最佳实践。包括组件化开发、状态管理、Hooks等重要知识点。",
+ coverImage: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?auto=format&fit=crop&q=80&w=800&h=400",
+ articleCount: 8,
+ createdAt: "2024-01-15T10:00:00Z",
+ updatedAt: "2024-02-20T15:30:00Z",
+ },
+ {
+ id: "2",
+ slug: "typescript-best-practices",
+ title: "TypeScript 最佳实践",
+ description: "深入探索TypeScript的高级用法，包括类型体操、泛型编程、装饰器等，让你的代码更加类型安全。",
+ coverImage: "https://images.unsplash.com/photo-1516116216624-53e697fedbea?auto=format&fit=crop&q=80&w=800&h=400",
+ articleCount: 12,
+ createdAt: "2024-01-20T09:00:00Z",
+ updatedAt: "2024-02-25T14:00:00Z",
+ },
+ {
+ id: "3",
+ slug: "fullstack-development",
+ title: "全栈开发之路",
+ description: "从前端到后端，全面掌握现代全栈开发技术栈。涵盖React、Node.js、数据库设计等核心内容。",
+ coverImage: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&q=80&w=800&h=400",
+ articleCount: 15,
+ createdAt: "2024-02-01T11:00:00Z",
+ updatedAt: "2024-03-01T10:00:00Z",
+ },
+ {
+ id: "4",
+ slug: "css-modern-layouts",
+ title: "现代CSS布局技巧",
+ description: "探索Flexbox、Grid、Container Queries等现代CSS布局技术，打造响应式和优雅的用户界面。",
+ coverImage: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=800&h=400",
+ articleCount: 6,
+ createdAt: "2024-02-10T08:00:00Z",
+ updatedAt: "2024-02-28T16:00:00Z",
+ },
+ {
+ id: "5",
+ slug: "api-design-principles",
+ title: "RESTful API 设计原则",
+ description: "学习如何设计清晰、一致、易用的RESTful API，包括资源命名、状态码使用、版本控制等。",
+ coverImage: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&q=80&w=800&h=400",
+ articleCount: 10,
+ createdAt: "2024-02-15T12:00:00Z",
+ updatedAt: "2024-03-05T11:00:00Z",
+ },
+ {
+ id: "6",
+ slug: "testing-strategies",
+ title: "前端测试策略",
+ description: "从单元测试到端到端测试，建立完善的前端测试体系。使用Jest、Testing Library、Cypress等工具。",
+ coverImage: "https://images.unsplash.com/photo-1576444356170-66073046b1bc?auto=format&fit=crop&q=80&w=800&h=400",
+ articleCount: 7,
+ createdAt: "2024-02-20T14:00:00Z",
+ updatedAt: "2024-03-08T09:00:00Z",
+ },
+];
+
+export const getTopicArticleSlugs = (topicSlug: string): string[] => {
+ const topicArticleMap: Record
= {
+ "getting-started-with-react": ["welcome-to-react", "react-component-basics", "state-management-101", "react-hooks-deep-dive", "performance-optimization-react"],
+ "typescript-best-practices": ["typescript-for-beginners", "advanced-typescript-patterns"],
+ "fullstack-development": ["building-a-fullstack-app", "nodejs-backend-basics", "rest-api-best-practices"],
+ "css-modern-layouts": ["mastering-flexbox", "css-grid-in-depth"],
+ "api-design-principles": ["rest-api-best-practices", "api-authentication"],
+ "testing-strategies": ["unit-testing-react", "e2e-testing-with-cypress"],
+ };
+ return topicArticleMap[topicSlug] || [];
+};
diff --git a/src/hooks/useSwipeBack.ts b/src/hooks/useSwipeBack.ts
new file mode 100644
index 0000000..034f814
--- /dev/null
+++ b/src/hooks/useSwipeBack.ts
@@ -0,0 +1,135 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+interface UseSwipeBackOptions {
+ enabled?: boolean;
+ threshold?: number;
+ edgeWidth?: number;
+}
+
+export const useSwipeBack = (options: UseSwipeBackOptions = {}) => {
+ const { enabled = true, threshold = 100, edgeWidth = 30 } = options;
+ const navigate = useNavigate();
+ const startX = useRef(0);
+ const startY = useRef(0);
+ const currentX = useRef(0);
+ const isSwipe = useRef(false);
+ const canGoBack = useRef(false);
+
+ useEffect(() => {
+ if (!enabled) return;
+
+ const handleTouchStart = (e: TouchEvent) => {
+ const touch = e.touches[0];
+ startX.current = touch.clientX;
+ startY.current = touch.clientY;
+ currentX.current = touch.clientX;
+
+ canGoBack.current = window.history.length > 1;
+
+ if (startX.current < edgeWidth && canGoBack.current) {
+ isSwipe.current = true;
+ document.body.style.cursor = "grabbing";
+ }
+ };
+
+ const handleTouchMove = (e: TouchEvent) => {
+ if (!isSwipe.current) return;
+
+ const touch = e.touches[0];
+ currentX.current = touch.clientX;
+
+ const deltaX = currentX.current - startX.current;
+ const deltaY = Math.abs(touch.clientY - startY.current);
+
+ if (deltaY > Math.abs(deltaX) * 0.5) {
+ isSwipe.current = false;
+ return;
+ }
+
+ if (deltaX > 0) {
+ e.preventDefault();
+ }
+ };
+
+ const handleTouchEnd = () => {
+ if (!isSwipe.current) return;
+
+ document.body.style.cursor = "";
+
+ const deltaX = currentX.current - startX.current;
+
+ if (deltaX > threshold && canGoBack.current) {
+ navigate(-1);
+ }
+
+ isSwipe.current = false;
+ };
+
+ const handleMouseDown = (e: MouseEvent) => {
+ if (e.button !== 0) return;
+
+ startX.current = e.clientX;
+ startY.current = e.clientY;
+ currentX.current = e.clientX;
+
+ canGoBack.current = window.history.length > 1;
+
+ if (startX.current < edgeWidth && canGoBack.current) {
+ isSwipe.current = true;
+ document.body.style.cursor = "grabbing";
+ document.addEventListener("mousemove", handleMouseMove);
+ document.addEventListener("mouseup", handleMouseUp);
+ }
+ };
+
+ const handleMouseMove = (e: MouseEvent) => {
+ if (!isSwipe.current) return;
+
+ currentX.current = e.clientX;
+ const deltaX = currentX.current - startX.current;
+ const deltaY = Math.abs(e.clientY - startY.current);
+
+ if (deltaY > Math.abs(deltaX) * 0.5) {
+ isSwipe.current = false;
+ return;
+ }
+
+ if (deltaX > 0) {
+ e.preventDefault();
+ }
+ };
+
+ const handleMouseUp = () => {
+ if (!isSwipe.current) return;
+
+ document.body.style.cursor = "";
+ document.removeEventListener("mousemove", handleMouseMove);
+ document.removeEventListener("mouseup", handleMouseUp);
+
+ const deltaX = currentX.current - startX.current;
+
+ if (deltaX > threshold && canGoBack.current) {
+ navigate(-1);
+ }
+
+ isSwipe.current = false;
+ };
+
+ document.addEventListener("touchstart", handleTouchStart, { passive: true });
+ document.addEventListener("touchmove", handleTouchMove, { passive: false });
+ document.addEventListener("touchend", handleTouchEnd);
+ document.addEventListener("mousedown", handleMouseDown);
+
+ return () => {
+ document.removeEventListener("touchstart", handleTouchStart);
+ document.removeEventListener("touchmove", handleTouchMove);
+ document.removeEventListener("touchend", handleTouchEnd);
+ document.removeEventListener("mousedown", handleMouseDown);
+ document.removeEventListener("mousemove", handleMouseMove);
+ document.removeEventListener("mouseup", handleMouseUp);
+ };
+ }, [enabled, threshold, edgeWidth, navigate]);
+
+ return { isSwiping: isSwipe.current };
+};
diff --git a/src/interfaces/index.d.ts b/src/interfaces/index.d.ts
index a15cc74..7615602 100644
--- a/src/interfaces/index.d.ts
+++ b/src/interfaces/index.d.ts
@@ -33,3 +33,14 @@ export interface IAuthor {
image: string;
username: string;
}
+
+export interface ITopic {
+ id: string;
+ slug: string;
+ title: string;
+ description: string;
+ coverImage: string;
+ articleCount: number;
+ createdAt: string;
+ updatedAt: string;
+}
diff --git a/src/pages/topic/detail.tsx b/src/pages/topic/detail.tsx
new file mode 100644
index 0000000..96ae7a9
--- /dev/null
+++ b/src/pages/topic/detail.tsx
@@ -0,0 +1,231 @@
+import React from "react";
+import { useParams, Link } from "react-router-dom";
+import { useTable, useUpdate, useDelete, useGetIdentity } from "@refinedev/core";
+import { IArticle, IUser } from "../../interfaces";
+import { mockTopics } from "../../data/mockTopics";
+import { getTopicArticles } from "../../data/mockData";
+import { ArticleList } from "../../components/article";
+import dayjs from "dayjs";
+
+const ArticleSkeleton: React.FC = () => (
+
+);
+
+const TopicDetailSkeleton: React.FC = () => (
+
+);
+
+const EmptyState: React.FC<{ title?: string; description?: string }> = ({
+ title = "暂无文章",
+ description = "该专题还没有添加任何文章"
+}) => (
+
+
+
+
+
{title}
+
{description}
+
+
+
+
+
+
专题不存在
+
+ 您访问的专题可能已被删除或不存在
+
+
+ 返回专题列表
+
+
+
+
+
+
+
+
+
+
+
返回专题列表
+
+
{topic.title}
+
{topic.description}
+
+ {topic.articleCount} 篇文章
+ ·
+ 更新于 {dayjs(topic.updatedAt).format("YYYY年MM月DD日")}
+
+
+
+
+
+
+
+
+
+
+
+ 专题文章
+
+
+ {tableQueryResult.isFetching && !displayArticles.length && (
+
+ )}
+
+ {!displayArticles.length && !tableQueryResult.isFetching && (
+
+ )}
+
+ {displayArticles.map((item) => {
+ return (
+
+
{
+ item.favorited ? unFavArticle(slug) : favArticle(slug);
+ }}
+ isItemFavorited={item.favorited}
+ isItemLoading={favoriteUnFavoriteIslLoading}
+ />
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+);
+
+const PullToRefresh: React.FC<{ isRefreshing: boolean; pullDistance: number }> = ({ isRefreshing, pullDistance }) => {
+ const maxPull = 80;
+ const progress = Math.min(pullDistance / maxPull, 1);
+
+ return (
+ 10 || isRefreshing ? 1 : 0
+ }}
+ transition={{ duration: 0.2 }}
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ overflow: "hidden",
+ background: "transparent",
+ }}
+ >
+ {isRefreshing ? (
+
+
+ 刷新中...
+
+ ) : (
+
+
+ {progress >= 1 ? "释放刷新" : "下拉刷新"}
+
+ )}
+
+ );
+};
+
+const TopicCard: React.FC<{ topic: ITopic; index: number }> = ({ topic, index }) => {
+ return (
+
+
+
+
+
+ {topic.articleCount} 篇文章
+
+
+
{topic.title}
+
{topic.description}
+
+
+ 更新于 {dayjs(topic.updatedAt).format("YYYY年MM月DD日")}
+
+
+
+
+
+
+
+
+ 专题合集
+
+
+ 发现精彩内容，深入探索感兴趣的主题
+
+
+
+
+
+
+ {isLoading ? (
+
+ ) : (
+
+ {topics.map((topic, index) => (
+
+ ))}
+
+ )}
+
+
+