From 3bc8dfdf8cb5fc39cf811c344947ebaa2e187cf1 Mon Sep 17 00:00:00 2001
From: lizhixuan <zhixuan.li@banosuperapp.com>
Date: Sun, 2 Mar 2025 11:42:08 +0800
Subject: [PATCH] feat: Enhance Styled Components configuration and prop
 handling

- Add Babel plugin for styled-components with performance and naming optimizations
- Integrate @emotion/is-prop-valid for improved prop filtering in StyleSheetManager
- Update Antd Input components to use variant="borderless" instead of deprecated bordered prop
- Add new dependencies for styled-components configuration
---
 electron.vite.config.ts                       | 19 +++++-
 package.json                                  |  2 +
 src/renderer/src/App.tsx                      | 63 +++++++++++--------
 .../components/Popups/AddAssistantPopup.tsx   |  2 +-
 .../components/Popups/SelectModelPopup.tsx    |  2 +-
 .../windows/mini/home/components/InputBar.tsx |  2 +-
 yarn.lock                                     | 55 +++++++++++++++-
 7 files changed, 114 insertions(+), 31 deletions(-)

diff --git a/electron.vite.config.ts b/electron.vite.config.ts
index 08708635..c5f0e76b 100644
--- a/electron.vite.config.ts
+++ b/electron.vite.config.ts
@@ -43,7 +43,24 @@ export default defineConfig({
     plugins: [externalizeDepsPlugin()]
   },
   renderer: {
-    plugins: [react(), ...visualizerPlugin('renderer')],
+    plugins: [
+      react({
+        babel: {
+          plugins: [
+            [
+              'styled-components',
+              {
+                displayName: true, // 开发环境下启用组件名称
+                fileName: false, // 不在类名中包含文件名
+                pure: true, // 优化性能
+                ssr: false // 不需要服务端渲染
+              }
+            ]
+          ]
+        }
+      }),
+      ...visualizerPlugin('renderer')
+    ],
     resolve: {
       alias: {
         '@renderer': resolve('src/renderer/src'),
diff --git a/package.json b/package.json
index e3342288..a4827a5b 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
     "@electron/notarize": "^2.5.0",
+    "@emotion/is-prop-valid": "^1.3.1",
     "@google/generative-ai": "^0.21.0",
     "@llm-tools/embedjs": "patch:@llm-tools/embedjs@npm%3A0.1.28#~/.yarn/patches/@llm-tools-embedjs-npm-0.1.28-8e4393fa2d.patch",
     "@llm-tools/embedjs-libsql": "^0.1.28",
@@ -104,6 +105,7 @@
     "antd": "^5.22.5",
     "applescript": "^1.0.0",
     "axios": "^1.7.3",
+    "babel-plugin-styled-components": "^2.1.4",
     "browser-image-compression": "^2.0.2",
     "dayjs": "^1.11.11",
     "dexie": "^4.0.8",
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 84d877c6..3ea5c8de 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -1,9 +1,11 @@
 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'
@@ -19,35 +21,44 @@ 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}>
-      <ThemeProvider>
-        <AntdProvider>
-          <SyntaxHighlighterProvider>
-            <PersistGate loading={null} persistor={persistor}>
-              <TopViewContainer>
-                <HashRouter>
-                  <NavigationHandler />
-                  {/* 添加导航处理组件 */}
-                  <Sidebar />
-                  <Routes>
-                    <Route path="/" element={<HomePage />} />
-                    <Route path="/agents" element={<AgentsPage />} />
-                    <Route path="/paintings" element={<PaintingsPage />} />
-                    <Route path="/translate" element={<TranslatePage />} />
-                    <Route path="/files" element={<FilesPage />} />
-                    <Route path="/knowledge" element={<KnowledgePage />} />
-                    <Route path="/apps" element={<AppsPage />} />
-                    <Route path="/settings/*" element={<SettingsPage />} />
-                  </Routes>
-                </HashRouter>
-              </TopViewContainer>
-            </PersistGate>
-          </SyntaxHighlighterProvider>
-        </AntdProvider>
-      </ThemeProvider>
+      <StyleSheetManager
+        shouldForwardProp={(prop, element) => {
+          // 对于 HTML 元素，使用 isPropValid 检查
+          if (typeof element === 'string') {
+            return isPropValid(prop)
+          }
+          // 对于自定义组件，允许所有非特殊属性通过
+          return prop !== '$' && !prop.startsWith('$')
+        }}>
+        <ThemeProvider>
+          <AntdProvider>
+            <SyntaxHighlighterProvider>
+              <PersistGate loading={null} persistor={persistor}>
+                <TopViewContainer>
+                  <HashRouter>
+                    <NavigationHandler />
+                    {/* 添加导航处理组件 */}
+                    <Sidebar />
+                    <Routes>
+                      <Route path="/" element={<HomePage />} />
+                      <Route path="/agents" element={<AgentsPage />} />
+                      <Route path="/paintings" element={<PaintingsPage />} />
+                      <Route path="/translate" element={<TranslatePage />} />
+                      <Route path="/files" element={<FilesPage />} />
+                      <Route path="/knowledge" element={<KnowledgePage />} />
+                      <Route path="/apps" element={<AppsPage />} />
+                      <Route path="/settings/*" element={<SettingsPage />} />
+                    </Routes>
+                  </HashRouter>
+                </TopViewContainer>
+              </PersistGate>
+            </SyntaxHighlighterProvider>
+          </AntdProvider>
+        </ThemeProvider>
+      </StyleSheetManager>
     </Provider>
   )
 }
diff --git a/src/renderer/src/components/Popups/AddAssistantPopup.tsx b/src/renderer/src/components/Popups/AddAssistantPopup.tsx
index 0b785d3f..e33c534b 100644
--- a/src/renderer/src/components/Popups/AddAssistantPopup.tsx
+++ b/src/renderer/src/components/Popups/AddAssistantPopup.tsx
@@ -110,7 +110,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
           allowClear
           autoFocus
           style={{ paddingLeft: 0 }}
-          bordered={false}
+          variant="borderless"
           size="middle"
         />
       </HStack>
diff --git a/src/renderer/src/components/Popups/SelectModelPopup.tsx b/src/renderer/src/components/Popups/SelectModelPopup.tsx
index e985c8ba..f7811dd5 100644
--- a/src/renderer/src/components/Popups/SelectModelPopup.tsx
+++ b/src/renderer/src/components/Popups/SelectModelPopup.tsx
@@ -295,7 +295,7 @@ const PopupContainer: React.FC<PopupContainerProps> = ({ model, resolve }) => {
           allowClear
           autoFocus
           style={{ paddingLeft: 0 }}
-          bordered={false}
+          variant="borderless"
           size="middle"
           onKeyDown={(e) => {
             // 防止上下键移动光标
diff --git a/src/renderer/src/windows/mini/home/components/InputBar.tsx b/src/renderer/src/windows/mini/home/components/InputBar.tsx
index 4f218a48..cb29c6af 100644
--- a/src/renderer/src/windows/mini/home/components/InputBar.tsx
+++ b/src/renderer/src/windows/mini/home/components/InputBar.tsx
@@ -27,7 +27,7 @@ const InputBar = forwardRef<HTMLDivElement, InputBarProps>(
         <Input
           value={text}
           placeholder={placeholder}
-          bordered={false}
+          variant="borderless"
           autoFocus
           onKeyDown={handleKeyDown}
           onChange={handleChange}
diff --git a/yarn.lock b/yarn.lock
index f9859b10..5d93bdff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -179,6 +179,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-annotate-as-pure@npm:^7.22.5":
+  version: 7.25.9
+  resolution: "@babel/helper-annotate-as-pure@npm:7.25.9"
+  dependencies:
+    "@babel/types": "npm:^7.25.9"
+  checksum: 10c0/095b6ba50489d797733abebc4596a81918316a99e3632755c9f02508882912b00c2ae5e468532a25a5c2108d109ddbe9b7da78333ee7cc13817fc50c00cf06fe
+  languageName: node
+  linkType: hard
+
 "@babel/helper-compilation-targets@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/helper-compilation-targets@npm:7.25.9"
@@ -192,7 +201,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.25.9":
+"@babel/helper-module-imports@npm:^7.22.5, @babel/helper-module-imports@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/helper-module-imports@npm:7.25.9"
   dependencies:
@@ -264,6 +273,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-jsx@npm:^7.22.5":
+  version: 7.25.9
+  resolution: "@babel/plugin-syntax-jsx@npm:7.25.9"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/d56597aff4df39d3decda50193b6dfbe596ca53f437ff2934622ce19a743bf7f43492d3fb3308b0289f5cee2b825d99ceb56526a2b9e7b68bf04901546c5618c
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-arrow-functions@npm:^7.24.7":
   version: 7.25.9
   resolution: "@babel/plugin-transform-arrow-functions@npm:7.25.9"
@@ -532,6 +552,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/is-prop-valid@npm:^1.3.1":
+  version: 1.3.1
+  resolution: "@emotion/is-prop-valid@npm:1.3.1"
+  dependencies:
+    "@emotion/memoize": "npm:^0.9.0"
+  checksum: 10c0/123215540c816ff510737ec68dcc499c53ea4deb0bb6c2c27c03ed21046e2e69f6ad07a7a174d271c6cfcbcc9ea44e1763e0cf3875c92192f7689216174803cd
+  languageName: node
+  linkType: hard
+
 "@emotion/memoize@npm:^0.8.1":
   version: 0.8.1
   resolution: "@emotion/memoize@npm:0.8.1"
@@ -539,6 +568,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/memoize@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "@emotion/memoize@npm:0.9.0"
+  checksum: 10c0/13f474a9201c7f88b543e6ea42f55c04fb2fdc05e6c5a3108aced2f7e7aa7eda7794c56bba02985a46d8aaa914fcdde238727a98341a96e2aec750d372dadd15
+  languageName: node
+  linkType: hard
+
 "@emotion/unitless@npm:0.8.1":
   version: 0.8.1
   resolution: "@emotion/unitless@npm:0.8.1"
@@ -3002,6 +3038,7 @@ __metadata:
     "@electron-toolkit/tsconfig": "npm:^1.0.1"
     "@electron-toolkit/utils": "npm:^3.0.0"
     "@electron/notarize": "npm:^2.5.0"
+    "@emotion/is-prop-valid": "npm:^1.3.1"
     "@google/generative-ai": "npm:^0.21.0"
     "@hello-pangea/dnd": "npm:^16.6.0"
     "@kangfenmao/keyv-storage": "npm:^0.1.0"
@@ -3036,6 +3073,7 @@ __metadata:
     apache-arrow: "npm:^18.1.0"
     applescript: "npm:^1.0.0"
     axios: "npm:^1.7.3"
+    babel-plugin-styled-components: "npm:^2.1.4"
     browser-image-compression: "npm:^2.0.2"
     dayjs: "npm:^1.11.11"
     dexie: "npm:^4.0.8"
@@ -3705,6 +3743,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-styled-components@npm:^2.1.4":
+  version: 2.1.4
+  resolution: "babel-plugin-styled-components@npm:2.1.4"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
+    "@babel/helper-module-imports": "npm:^7.22.5"
+    "@babel/plugin-syntax-jsx": "npm:^7.22.5"
+    lodash: "npm:^4.17.21"
+    picomatch: "npm:^2.3.1"
+  peerDependencies:
+    styled-components: ">= 2"
+  checksum: 10c0/553f35f5feb4b51fda9c9aeef8a31c1b66f430687ab17830b7cdacfe7e93f912aef55bf59e402f4e0a1fa7ad039768ab3626512bbb9bf1f76fcc67ba47e7a56e
+  languageName: node
+  linkType: hard
+
 "bail@npm:^2.0.0":
   version: 2.0.2
   resolution: "bail@npm:2.0.2"