From 12988261bd3ffb0954e8fc52817e4d4f95bf08ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Liu=20=E5=AE=87=E9=98=B3?= Date: Tue, 12 Nov 2024 21:11:10 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=EF=BC=9A=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/project.ts | 6 ++++-- src/app/page.tsx | 5 ++++- src/components/Header/index.tsx | 21 +++++++++++++-------- src/components/Swiper/index.tsx | 5 ++++- src/components/Typed/index.tsx | 24 +++++++++++++----------- src/stores/modules/config.ts | 11 +++++++++-- 6 files changed, 47 insertions(+), 25 deletions(-) diff --git a/src/api/project.ts b/src/api/project.ts index bf97cb6..17734cb 100644 --- a/src/api/project.ts +++ b/src/api/project.ts @@ -1,4 +1,6 @@ import Request from "@/utils/request"; -import { Web } from "@/types/app/project"; +import { Layout, Web } from "@/types/app/project"; -export const getWebDataAPI = () => Request("GET", "/project/web") \ No newline at end of file +export const getWebDataAPI = () => Request("GET", "/project/web") + +export const getThemeDataAPI = () => Request("GET", "/project/layout") \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 8aa5378..55080f1 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,16 +5,19 @@ import Container from "@/components/Container"; import ArticleLayout from "@/components/ArticleLayout"; import Sidebar from "@/components/Sidebar"; +import { getThemeDataAPI } from '@/api/project' + interface Props { searchParams: { page: number }; }; export default async ({ searchParams }: Props) => { const page = searchParams.page || 1; + const { data } = await getThemeDataAPI() return ( <> - + {/* 星空背景组件 */} {/* 打字机组件 */} diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index f0f9c39..38659e0 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -14,18 +14,23 @@ import { BsFillMoonStarsFill, BsTextIndentLeft } from "react-icons/bs"; import { Cate } from '@/types/app/cate'; import { getCateListAPI } from '@/api/cate'; -import { getWebDataAPI } from '@/api/project'; +import { getWebDataAPI, getThemeDataAPI } from '@/api/project'; import { useConfigStore } from '@/stores'; const Header = () => { // 是否暗黑模式 - const { isDark, setIsDark, web, setWeb } = useConfigStore() - - // 获取网站配置 - const getWebData = async () => { - const { data } = await getWebDataAPI(); - setWeb(data) + const { isDark, setIsDark, web, setWeb, setTheme } = useConfigStore() + + // 获取项目配置 + const getConfigData = async () => { + const { data: web } = await getWebDataAPI(); + setWeb(web) + + const { data: theme } = await getThemeDataAPI(); + console.log(theme); + + setTheme(theme) } const patchName = usePathname(); @@ -42,7 +47,7 @@ const Header = () => { } useEffect(() => { - getWebData() + getConfigData() getCateList() window.scrollTo(0, 0); diff --git a/src/components/Swiper/index.tsx b/src/components/Swiper/index.tsx index 79c35f1..3b1cc82 100644 --- a/src/components/Swiper/index.tsx +++ b/src/components/Swiper/index.tsx @@ -1,6 +1,7 @@ import { ReactNode } from 'react' import Ripple from '@/components/Ripple' import { randomImage } from '@/utils' +import { getThemeDataAPI } from '@/api/project' interface Props { src?: string, // 图片列表 @@ -8,7 +9,9 @@ interface Props { children?: ReactNode } -export default ({ src, isRipple = true, children }: Props) => { +export default async ({ src, isRipple = true, children }: Props) => { + const { data } = await getThemeDataAPI() + const sty = { backgroundImage: `url(${src ? src : randomImage()})`, } diff --git a/src/components/Typed/index.tsx b/src/components/Typed/index.tsx index 38f5b95..7b32efe 100644 --- a/src/components/Typed/index.tsx +++ b/src/components/Typed/index.tsx @@ -5,22 +5,24 @@ import { useConfigStore } from '@/stores' import Typed from 'typed.js'; export default ({ className }: { className?: string }) => { - const store = useConfigStore() + const { theme } = useConfigStore() const el = useRef(null); useEffect(() => { - const typed = new Typed(el.current, { - strings: ["System.out.print(\"有些梦虽然遥不可及，但并不是不可能实现!\");", - "print(\" 互联网从不缺乏天才, 而努力才是最终的入场券!\")", - "console.log(\"再渺小的星光，也有属于他的光芒!\")"], - typeSpeed: 100, - backSpeed: 30, - loop: true - }); + if (theme.swiperText) { + const strings = JSON.parse(theme.swiperText || '{}') - return () => typed.destroy(); - }, []); + const typed = new Typed(el.current, { + strings, + typeSpeed: 100, + backSpeed: 30, + loop: true + }); + + return () => typed.destroy(); + } + }, [theme]); return } \ No newline at end of file diff --git a/src/stores/modules/config.ts b/src/stores/modules/config.ts index cd842b7..1ca3473 100644 --- a/src/stores/modules/config.ts +++ b/src/stores/modules/config.ts @@ -1,6 +1,6 @@ import { create } from 'zustand' import { persist, createJSONStorage } from 'zustand/middleware' -import { Web } from '@/types/app/project'; +import { Layout, Web } from '@/types/app/project'; interface ConfigState { // 是否暗黑模式 @@ -10,6 +10,10 @@ interface ConfigState { // 网站配置 web: Web; setWeb: (data: Web) => void; + + // 主题配置 + theme: Layout; + setTheme: (data: Layout) => void; } export default create( @@ -19,7 +23,10 @@ export default create( setIsDark: (status: boolean) => set(() => ({ isDark: status })), web: {} as Web, - setWeb: (data: Web) => set(() => ({ web: data })) + setWeb: (data: Web) => set(() => ({ web: data })), + + theme: {} as Layout, + setTheme: (data: Layout) => set(() => ({ theme: data })) }), { name: 'config_storage',