From 8322eea57ee4e94d0937fbc408849514ee5ce40f Mon Sep 17 00:00:00 2001 From: rockbenben Date: Fri, 6 Dec 2024 11:27:41 +0800 Subject: [PATCH] style: dark theme --- docusaurus.config.js | 5 + src/pages/_components/PromptPage.tsx | 102 +++++++----- src/pages/community-prompts.tsx | 240 ++++++++++++++------------- src/pages/feedback.tsx | 76 +++++---- src/pages/index.tsx | 20 ++- src/pages/reset-password.tsx | 55 +++--- src/pages/user/favorite.tsx | 109 +++++++----- src/pages/user/index.tsx | 41 +++-- 8 files changed, 377 insertions(+), 271 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index ac8e12e2a..55ee7afef 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -81,6 +81,11 @@ const config = { ({ // Replace with your project's social card // image: 'img/docusaurus-social-card.jpg', + colorMode: { + defaultMode: "dark", + disableSwitch: false, + respectPrefersColorScheme: false, + }, metadata: [ { name: "keywords", diff --git a/src/pages/_components/PromptPage.tsx b/src/pages/_components/PromptPage.tsx index 8462a98c4..4c77e6ee4 100644 --- a/src/pages/_components/PromptPage.tsx +++ b/src/pages/_components/PromptPage.tsx @@ -1,5 +1,5 @@ import React, { useContext, useState, useCallback } from "react"; -import { Card, Typography, Tag, Tooltip, Space, Row, Col, Badge, Button } from "antd"; +import { Card, Typography, Tag, Tooltip, Space, Row, Col, Badge, Button, ConfigProvider, theme } from "antd"; import { LinkOutlined, CopyOutlined, CheckOutlined } from "@ant-design/icons"; import Layout from "@theme/Layout"; import Link from "@docusaurus/Link"; @@ -44,51 +44,63 @@ function PromptPage({ prompt }) { await updateCopyCount(prompt.id); }, [prompt, currentLanguage]); + const isDarkMode = typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "dark"; + return ( - - - - - {title} - - - } - extra={ - website ? ( - - - - ) : null - }> - 👉 {remark} - 点击切换显示语言}> - - {mainPrompt} - - - - {tags.map((tag) => ( - - - {tag} - - - ))} - - - 请在下方回复您对本提示词的意见、想法或分享。 - {" "} - - - - - - + + + + + + {title} + + + } + extra={ + website ? ( + + + + ) : null + }> + 👉 {remark} + 点击切换显示语言}> + + {mainPrompt} + + + + {tags.map((tag) => ( + + + {tag} + + + ))} + + + 请在下方回复您对本提示词的意见、想法或分享。 + {" "} + + + + + + + ); } diff --git a/src/pages/community-prompts.tsx b/src/pages/community-prompts.tsx index a388ad260..4d65d4a88 100644 --- a/src/pages/community-prompts.tsx +++ b/src/pages/community-prompts.tsx @@ -9,7 +9,7 @@ import LoginComponent from "@site/src/pages/_components/user/login"; import ShareButtons from "@site/src/pages/_components/ShareButtons"; import { AuthContext, AuthProvider } from "@site/src/pages/_components/AuthContext"; import Layout from "@theme/Layout"; -import { Modal, Typography, Tooltip, message, Pagination, Dropdown, Space, Button, Input } from "antd"; +import { Modal, Typography, Tooltip, message, Pagination, Dropdown, Space, Button, Input, ConfigProvider, theme } from "antd"; import { UpOutlined, DownOutlined, HomeOutlined, CopyOutlined, HeartOutlined, LoginOutlined } from "@ant-design/icons"; const { Search } = Input; @@ -172,127 +172,139 @@ const CommunityPrompts = () => { const truncate = (str, num) => (str.length <= num ? str : `${str.slice(0, num)}...`); + const isDarkMode = typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "dark"; + return (
- - - 返回首页 - - {userAuth ? ( - - 我的收藏 + + + + 返回首页 - ) : ( - - )} - } menu={fieldMenuProps}> - {sortField === "id" ? 发布时间 : 支持度} - - } menu={orderMenuProps}> - {sortOrder === "asc" ? 升序 : 降序} - - - -
    - {userprompts.map((UserPrompt, index) => ( -
  • -
    -
    -
    -
    - - {UserPrompt.title} - - @{UserPrompt.owner} + {userAuth ? ( + + 我的收藏 + + ) : ( + + )} + } menu={fieldMenuProps}> + {sortField === "id" ? 发布时间 : 支持度} + + } menu={orderMenuProps}> + {sortOrder === "asc" ? 升序 : 降序} + + + +
      + {userprompts.map((UserPrompt, index) => ( +
    • +
      +
      +
      +
      + + {UserPrompt.title} + + @{UserPrompt.owner} +
      + {UserPrompt.remark &&

      👉 {UserPrompt.remark}

      } +

      + {UserPrompt.notes ? ( + + {UserPrompt.description} + + ) : ( + UserPrompt.description + )} +

      - {UserPrompt.remark &&

      👉 {UserPrompt.remark}

      } -

      - {UserPrompt.notes ? ( - - {UserPrompt.description} +

      + + + - ) : ( - UserPrompt.description - )} -

      -
      -
      - - - - - - - - - - - - - - - - + + + + + + + + + + + + +
      -
    -
    • - ))} -
-
- -
-
- - {translate({ - message: - "本页面展示的提示词均由网友分享和上传，我们无法保证内容的准确性、质量或完整性，同时也不对因内容引发的任何法律责任承担责任。如果发现有侵权或者其他问题，可以联系我们进行处理。我们将在收到通知后尽快处理。", - })} - -
- setOpen(false)}> - - - + + ))} + +
+ +
+
+ + {translate({ + message: + "本页面展示的提示词均由网友分享和上传，我们无法保证内容的准确性、质量或完整性，同时也不对因内容引发的任何法律责任承担责任。如果发现有侵权或者其他问题，可以联系我们进行处理。我们将在收到通知后尽快处理。", + })} + +
+ setOpen(false)}> + + + +
); diff --git a/src/pages/feedback.tsx b/src/pages/feedback.tsx index 27f25e969..1ac59aad2 100644 --- a/src/pages/feedback.tsx +++ b/src/pages/feedback.tsx @@ -1,6 +1,6 @@ import React, { useContext } from "react"; import Layout from "@theme/Layout"; -import { Card, Typography } from "antd"; +import { Card, Typography, ConfigProvider, theme } from "antd"; import Comments from "@site/src/pages/_components/Comments"; import Translate, { translate } from "@docusaurus/Translate"; import { AuthContext, AuthProvider } from "@site/src/pages/_components/AuthContext"; @@ -9,39 +9,49 @@ const { Title, Paragraph } = Typography; const FeedbackPage = () => { const { userAuth } = useContext(AuthContext); - + const isDarkMode = typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "dark"; return ( - -
- - - - <Translate id="feedback.welcome" description="The welcome title on the feedback page"> - 欢迎给出反馈 - </Translate> - - - - 欢迎给出建议、想法和提示词，以便不断改进 ChatGPT Shortcut，并提高个人效率和生产力。如果您需要反馈 - bug，请提供问题发生的链接和相关情况。对于提示词内容，您可以提交多种语言的内容，或简单描述您对提示词的想法。我们期待能够拓展思维或产生高质量输出的提示词。一旦您提交的提示词被发布，您的贡献将会添加到页面上。您可以通过搜索贡献者名称（用户名）来找到对应的词条。 - - - - - -
- + + +
+ + + + <Translate id="feedback.welcome" description="The welcome title on the feedback page"> + 欢迎给出反馈 + </Translate> + + + + 欢迎给出建议、想法和提示词，以便不断改进 ChatGPT Shortcut，并提高个人效率和生产力。如果您需要反馈 + bug，请提供问题发生的链接和相关情况。对于提示词内容，您可以提交多种语言的内容，或简单描述您对提示词的想法。我们期待能够拓展思维或产生高质量输出的提示词。一旦您提交的提示词被发布，您的贡献将会添加到页面上。您可以通过搜索贡献者名称（用户名）来找到对应的词条。 + + + + + +
+ + ); }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 372f9137c..602a4dbdc 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -10,6 +10,7 @@ import Layout from "@theme/Layout"; import Heading from "@theme/Heading"; import { EditOutlined, HeartOutlined, ArrowDownOutlined } from "@ant-design/icons"; +import { ConfigProvider, theme } from "antd"; import { debounce } from "lodash"; import FavoriteIcon from "@site/src/components/svgIcons/FavoriteIcon"; import styles from "@site/src/pages/styles.module.css"; @@ -432,7 +433,7 @@ function ShowcaseCards({ isDescription, showUserFavs }) { {!showAllOtherUsers && otherUsers.length > 50 && ( setShowAllOtherUsers(true)}> - {} + 加载更多 )} @@ -518,13 +519,24 @@ export default function Showcase(): JSX.Element { const toggleDescription = useCallback(() => { setIsDescription((prevIsDescription) => !prevIsDescription); }, []); + const isDarkMode = typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "dark"; return (
- - - + + + + +
diff --git a/src/pages/reset-password.tsx b/src/pages/reset-password.tsx index fbd2b6514..58ebe5382 100644 --- a/src/pages/reset-password.tsx +++ b/src/pages/reset-password.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react"; import Layout from "@theme/Layout"; -import { Form, Input, Button, message, Typography } from "antd"; +import { Form, Input, Button, message, Typography, ConfigProvider, theme } from "antd"; import Translate, { translate } from "@docusaurus/Translate"; import { resetPassword } from "@site/src/api"; @@ -36,29 +36,40 @@ const ResetPassword = () => { } }; + const isDarkMode = typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "dark"; return ( -
- - Reset Password - -
- - - - - - - - - - - - -
-
+ +
+ + Reset Password + +
+ + + + + + + + + + + + +
+
+ ); }; diff --git a/src/pages/user/favorite.tsx b/src/pages/user/favorite.tsx index b6a21ff9c..94634b97d 100644 --- a/src/pages/user/favorite.tsx +++ b/src/pages/user/favorite.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useCallback } from "react"; import Layout from "@theme/Layout"; import UserStatus from "../_components/user/UserStatus"; import UserPrompts from "../_components/user/UserPrompts"; @@ -6,51 +6,84 @@ import UserFavorite from "../_components/user/UserFavorite"; import { AuthProvider } from "../_components/AuthContext"; import { HeartOutlined, EditOutlined } from "@ant-design/icons"; import { translate } from "@docusaurus/Translate"; +import { ConfigProvider, theme } from "antd"; -function UserBookmark() { +const tabStyles = { + container: { + margin: "18px", + display: "flex", + }, + tab: { + marginRight: "10px", + cursor: "pointer", + }, + activeTab: { + color: "var(--ifm-color-primary)", + }, +}; + +const Tabs = ({ activeTab, onTabChange }) => ( +
+ onTabChange("favorites")}> + + {translate({ message: "收藏" })} + + onTabChange("prompts")}> + + {translate({ id: "myprompt", message: "我的提示词" })} + +
+); + +const UserBookmark = () => { const [activeTab, setActiveTab] = useState("favorites"); + const handleTabChange = useCallback((tab) => { + setActiveTab(tab); + }, []); + + const isDarkMode = typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "dark"; + return (
-
- -
-
-
- setActiveTab("favorites")}> - - {translate({ message: "收藏" })} - - setActiveTab("prompts")}> - - {translate({ id: "myprompt", message: "我的提示词" })} - + +
+
- - {activeTab === "favorites" && } - {activeTab === "prompts" && } -
+
+ + {activeTab === "favorites" && } + {activeTab === "prompts" && } +
+
); -} +}; -export default function FavoritePage() { - return ( - - - - ); -} +const FavoritePage = () => ( + + + +); + +export default FavoritePage; diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index 9f573ef91..2acdcbe0f 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -1,6 +1,6 @@ import React, { useContext, useState, useEffect } from "react"; import Layout from "@theme/Layout"; -import { Card, Descriptions, Form, Input, Button, message, Tabs, Spin, Space } from "antd"; +import { Card, Descriptions, Form, Input, Button, message, Tabs, Spin, Space, ConfigProvider, theme } from "antd"; import Link from "@docusaurus/Link"; import Translate, { translate } from "@docusaurus/Translate"; import { changePassword, forgotPassword, updateUsername, updateLocalStorageCache } from "@site/src/api"; @@ -10,9 +10,9 @@ import { AuthContext, AuthProvider } from "../_components/AuthContext"; const UserProfile = () => { const { userAuth, refreshUserAuth } = useContext(AuthContext); const [loading, setLoading] = useState(false); - const [editUsername, setEditUsername] = useState(false); const [newUsername, setNewUsername] = useState(userAuth?.data.username); + const handleEditUsernameClick = () => { setNewUsername(userAuth.data.username); setEditUsername(true); @@ -235,27 +235,38 @@ const UserProfile = () => { }, ]; + const isDarkMode = typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "dark"; return (
- - - 返回首页 - - - 我的收藏 - - - - - - + + + + 返回首页 + + + 个人中心 + + + + + + +
); }; -export default function UserPapge() { +export default function UserPage() { return (