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

@@ -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'),

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",

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,10 +21,18 @@ 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('$')
+        }}>
         <ThemeProvider>
           <AntdProvider>
             <SyntaxHighlighterProvider>
@@ -48,6 +58,7 @@ function App(): JSX.Element {
             </SyntaxHighlighterProvider>
           </AntdProvider>
         </ThemeProvider>
+      </StyleSheetManager>
     </Provider>
   )
 }

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>

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) => {
             // 防止上下键移动光标

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}

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"