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
2025-03-02 11:42:08 +08:00 · 2025-03-02 11:42:08 +08:00 · 3bc8dfdf8c
commit 3bc8dfdf8c
parent ed96940e82
7 changed files with 114 additions and 31 deletions
--- 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'),
--- 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",
--- 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>
  )
 }
--- 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>
--- 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) => {
            // 防止上下键移动光标
--- 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}
--- 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"