From da48301af87564ea57272f3e6a7fc688068ea40e Mon Sep 17 00:00:00 2001
From: buyfakett <buyfakett@vip.qq.com>
Date: Tue, 25 Feb 2025 12:07:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8zustand=EF=BC=8C=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E5=A4=9A=E5=B1=82=E9=80=8F=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                         |  2 ++
 package.json                         |  3 ++-
 src/App.jsx                          | 11 ++++-------
 src/stores/wakatime.jsx              |  9 +++++++++
 src/view/AboutMe/LanguageSection.jsx | 11 +++++++----
 src/view/AboutMe/index.jsx           |  8 ++------
 6 files changed, 26 insertions(+), 18 deletions(-)
 create mode 100644 src/stores/wakatime.jsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5913ebf..0dd1d25 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,5 @@
+2025-02-25 使用zustand，删除多层透传
+
 2025-02-21 所有界面加上评论
 
 2025-02-21 项目升级`Tailwind CSS`到v4
diff --git a/package.json b/package.json
index 0fc5014..b6e8ebc 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
     "react-markdown": "^10.0.0",
     "react-router": "^7.2.0",
     "tailwind-merge": "^3.0.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zustand": "^5.0.3"
   },
   "scripts": {
     "start": "rsbuild dev",
diff --git a/src/App.jsx b/src/App.jsx
index 28d7521..3ec3d01 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { Route, Routes } from 'react-router';
 import AboutMe from '@/view/AboutMe';
 import { apiList, imgUrl, umamiId, umamiScript } from '@/config';
-import { waka_timeDefaultData } from '@/default_data/waka_time';
 import { buildInfo } from '@/default_data/buildInfo';
 import Tools from '@/view/Tools';
 import Urls from '@/view/Urls';
@@ -13,6 +12,7 @@ import ChangeLog from '@/util/ChangeLog';
 import Coffee from '@/view/Coffee';
 import Projects from '@/view/Projects/index';
 import Layout from '@/layout/index';
+import useWakatimeStore from '@/stores/wakatime';
 
 const App = () => {
     // semi-design的主题默认为暗色
@@ -21,7 +21,7 @@ const App = () => {
     // 判断当前环境是生产环境还是开发环境
     const isProduction = process.env.NODE_ENV === 'production';
 
-    const [wakatimeData, setwakatimeData] = useState(waka_timeDefaultData);
+    const setwakatimeData = useWakatimeStore((state) => state.setwakatimeData);
 
     useEffect(() => {
         // 动态设置 Favicon
@@ -67,10 +67,7 @@ const App = () => {
             )}
             <Routes>
                 <Route element={<Layout />}>
-                    <Route
-                        path="/"
-                        element={<AboutMe wakatimeData={wakatimeData} />}
-                    />
+                    <Route path="/" element={<AboutMe />} />
                     <Route path="/tools" element={<Tools />} />
                     <Route path="/urls" element={<Urls />} />
                     <Route path="/pictures" element={<Pictures />} />
diff --git a/src/stores/wakatime.jsx b/src/stores/wakatime.jsx
new file mode 100644
index 0000000..a78613b
--- /dev/null
+++ b/src/stores/wakatime.jsx
@@ -0,0 +1,9 @@
+import { create } from 'zustand';
+import { waka_timeDefaultData } from '@/default_data/waka_time';
+
+const useWakatimeStore = create((set) => ({
+    wakatimeData: waka_timeDefaultData,
+    setwakatimeData: (newVal) => set(() => ({ wakatimeData: newVal })),
+}));
+
+export default useWakatimeStore;
diff --git a/src/view/AboutMe/LanguageSection.jsx b/src/view/AboutMe/LanguageSection.jsx
index d3f288d..f5f7425 100644
--- a/src/view/AboutMe/LanguageSection.jsx
+++ b/src/view/AboutMe/LanguageSection.jsx
@@ -5,8 +5,11 @@ import { NumberTicker } from '@/view/magicui/NumberTicker';
 import { TypingAnimation } from '@/view/magicui/TypingAnimation';
 import SkillSection from './SkillSection';
 import { languageSkillData } from '@/config';
+import useWakatimeStore from '@/stores/wakatime';
+
+const LanguageSection = () => {
+    const wakatimeData = useWakatimeStore((state) => state.wakatimeData);
 
-const LanguageSection = ({ start_time, languages, update_time }) => {
     return (
         <>
             {/* 文字介绍 */}
@@ -34,12 +37,12 @@ const LanguageSection = ({ start_time, languages, update_time }) => {
                     target="_blank"
                     rel="wakatime"
                     className="text-gray-500 text-sm hover:text-gray-700">
-                    data statistics form {start_time}
+                    data statistics form {wakatimeData.start_time}
                     <br />
-                    last update at {update_time}
+                    last update at {wakatimeData.update_time}
                 </a>
                 <div className="space-y-4 mt-4">
-                    {languages.map((lang, index) => (
+                    {wakatimeData.languages.map((lang, index) => (
                         <motion.div
                             key={lang.name}
                             className="w-full bg-gray-800 rounded-lg overflow-hidden"
diff --git a/src/view/AboutMe/index.jsx b/src/view/AboutMe/index.jsx
index 3bd9627..7a47c2b 100644
--- a/src/view/AboutMe/index.jsx
+++ b/src/view/AboutMe/index.jsx
@@ -7,7 +7,7 @@ import { pageVariants } from '@/config';
 import OpenSourceProjects from './OpenSourceProjects';
 import Links from './Links';
 
-const AboutMe = ({ wakatimeData }) => {
+const AboutMe = () => {
     return (
         <motion.div
             className="min-h-screen dark:bg-gray-900 text-white flex flex-col items-center justify-center p-4"
@@ -20,11 +20,7 @@ const AboutMe = ({ wakatimeData }) => {
 
             <Links />
 
-            <LanguageSection
-                start_time={wakatimeData.start_time}
-                languages={wakatimeData.languages}
-                update_time={wakatimeData.update_time}
-            />
+            <LanguageSection />
 
             <WorkExperience />