From 84e6caa846862b1e8dee83e9919c7be4b0aa6fcc Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Sun, 2 Mar 2025 19:51:20 +0800
Subject: [PATCH] refactor: Extract StyleSheetManager into a separate context
 component

- Move StyleSheetManager logic from App.tsx to a new dedicated context component
- Simplify App.tsx by importing the new StyleSheetManager
- Preserve existing prop validation and filtering logic
---
 src/renderer/src/App.tsx                      | 15 +++--------
 .../src/context/StyleSheetManager.tsx         | 25 +++++++++++++++++++
 2 files changed, 28 insertions(+), 12 deletions(-)
 create mode 100644 src/renderer/src/context/StyleSheetManager.tsx

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 3ea5c8de..e820866b 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -1,15 +1,14 @@
 import '@renderer/databases'
 
-import isPropValid from '@emotion/is-prop-valid'
 import store, { persistor } from '@renderer/store'
 import { Provider } from 'react-redux'
 import { HashRouter, Route, Routes } from 'react-router-dom'
 import { PersistGate } from 'redux-persist/integration/react'
-import { StyleSheetManager } from 'styled-components'
 
 import Sidebar from './components/app/Sidebar'
 import TopViewContainer from './components/TopView'
 import AntdProvider from './context/AntdProvider'
+import StyleSheetManager from './context/StyleSheetManager'
 import { SyntaxHighlighterProvider } from './context/SyntaxHighlighterProvider'
 import { ThemeProvider } from './context/ThemeProvider'
 import NavigationHandler from './handler/NavigationHandler'
@@ -21,18 +20,11 @@ import KnowledgePage from './pages/knowledge/KnowledgePage'
 import PaintingsPage from './pages/paintings/PaintingsPage'
 import SettingsPage from './pages/settings/SettingsPage'
 import TranslatePage from './pages/translate/TranslatePage'
+
 function App(): JSX.Element {
   return (
     <Provider store={store}>
-      <StyleSheetManager
-        shouldForwardProp={(prop, element) => {
-          // 对于 HTML 元素，使用 isPropValid 检查
-          if (typeof element === 'string') {
-            return isPropValid(prop)
-          }
-          // 对于自定义组件，允许所有非特殊属性通过
-          return prop !== '$' && !prop.startsWith('$')
-        }}>
+      <StyleSheetManager>
         <ThemeProvider>
           <AntdProvider>
             <SyntaxHighlighterProvider>
@@ -40,7 +32,6 @@ function App(): JSX.Element {
                 <TopViewContainer>
                   <HashRouter>
                     <NavigationHandler />
-                    {/* 添加导航处理组件 */}
                     <Sidebar />
                     <Routes>
                       <Route path="/" element={<HomePage />} />
diff --git a/src/renderer/src/context/StyleSheetManager.tsx b/src/renderer/src/context/StyleSheetManager.tsx
new file mode 100644
index 00000000..04083c79
--- /dev/null
+++ b/src/renderer/src/context/StyleSheetManager.tsx
@@ -0,0 +1,25 @@
+import isPropValid from '@emotion/is-prop-valid'
+import { ReactNode } from 'react'
+import { StyleSheetManager as StyledComponentsStyleSheetManager } from 'styled-components'
+
+interface StyleSheetManagerProps {
+  children: ReactNode
+}
+
+const StyleSheetManager = ({ children }: StyleSheetManagerProps): JSX.Element => {
+  return (
+    <StyledComponentsStyleSheetManager
+      shouldForwardProp={(prop, element) => {
+        // 对于 HTML 元素，使用 isPropValid 检查
+        if (typeof element === 'string') {
+          return isPropValid(prop)
+        }
+        // 对于自定义组件，允许所有非特殊属性通过
+        return prop !== '$' && !prop.startsWith('$')
+      }}>
+      {children}
+    </StyledComponentsStyleSheetManager>
+  )
+}
+
+export default StyleSheetManager