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

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>
   )
 }

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}