设置界面使用弹窗

src/renderer/src/App.tsx

@@ -16,7 +16,6 @@ import FilesPage from './pages/files/FilesPage'
 import HomePage from './pages/home/HomePage'
 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 {
@@ -37,7 +36,6 @@ function App(): JSX.Element {
                     <Route path="/files" element={<FilesPage />} />
                     <Route path="/knowledge" element={<KnowledgePage />} />
                     <Route path="/apps" element={<AppsPage />} />
-                    <Route path="/settings/*" element={<SettingsPage />} />
                   </Routes>
                 </HashRouter>
               </TopViewContainer>

src/renderer/src/components/Popups/SettingsPopup.tsx

@@ -0,0 +1,66 @@
+import SettingsPage, { SettingsTab } from '@renderer/pages/settings/SettingsPage'
+import { Modal } from 'antd'
+import { FC, useState } from 'react'
+import styled, { createGlobalStyle } from 'styled-components'
+
+interface Props {
+  actionButton?: React.ReactNode
+  activeTab?: SettingsTab
+}
+
+const SettingsPopup: FC<Props> = (props) => {
+  const [open, setOpen] = useState(false)
+  const [activeTab, setActiveTab] = useState<SettingsTab | undefined>(props.activeTab)
+
+  const onOpen = () => {
+    if (props.activeTab) {
+      setActiveTab(props.activeTab)
+    }
+    setOpen(true)
+  }
+
+  const onCancel = () => {
+    setOpen(false)
+  }
+
+  return (
+    <>
+      <div onClick={onOpen}>{props.actionButton}</div>
+      <GlobalStyle />
+      <StyledModal
+        transitionName="ant-move-down"
+        width="80vw"
+        title={null}
+        open={open}
+        onCancel={onCancel}
+        footer={null}>
+        <SettingsPage activeTab={activeTab} onTabChange={setActiveTab} />
+      </StyledModal>
+    </>
+  )
+}
+
+const GlobalStyle = createGlobalStyle`
+  .ant-modal-mask {
+    backdrop-filter: blur(10px);
+    background-color: transparent !important;
+  }
+`
+
+const StyledModal = styled(Modal)`
+  min-width: 900px;
+  max-width: 1300px;
+  padding-bottom: 0;
+
+  .ant-modal-content {
+    padding: 0;
+    overflow: hidden;
+    border-radius: 12px;
+  }
+  .ant-modal-close {
+    top: 4px;
+    right: 4px;
+  }
+`
+
+export default SettingsPopup

src/renderer/src/components/app/Sidebar.tsx

@@ -1,10 +1,10 @@
 import { FileSearchOutlined, FolderOutlined, PictureOutlined, TranslationOutlined } from '@ant-design/icons'
 import { isMac } from '@renderer/config/constant'
-import { isLocalAi, UserAvatar } from '@renderer/config/env'
+import { UserAvatar } from '@renderer/config/env'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import useAvatar from '@renderer/hooks/useAvatar'
 import { useMinapps } from '@renderer/hooks/useMinapps'
-import { modelGenerating, useRuntime } from '@renderer/hooks/useRuntime'
+import { useRuntime } from '@renderer/hooks/useRuntime'
 import { useSettings } from '@renderer/hooks/useSettings'
 import type { MenuProps } from 'antd'
 import { Tooltip } from 'antd'
@@ -18,14 +18,13 @@ import styled from 'styled-components'
 import DragableList from '../DragableList'
 import MinAppIcon from '../Icons/MinAppIcon'
 import MinApp from '../MinApp'
+import SettingsPopup from '../Popups/SettingsPopup'
 import UserPopup from '../Popups/UserPopup'
 
 const Sidebar: FC = () => {
-  const { pathname } = useLocation()
   const avatar = useAvatar()
   const { minappShow } = useRuntime()
   const { t } = useTranslation()
-  const navigate = useNavigate()
   const { windowStyle, sidebarIcons } = useSettings()
   const { theme, toggleTheme } = useTheme()
   const { pinned } = useMinapps()
@@ -37,11 +36,6 @@ const Sidebar: FC = () => {
 
   const showPinnedApps = pinned.length > 0 && sidebarIcons.visible.includes('minapp')
 
-  const to = async (path: string) => {
-    await modelGenerating()
-    navigate(path)
-  }
-
   return (
     <Container
       id="app-sidebar"
@@ -73,13 +67,15 @@ const Sidebar: FC = () => {
             )}
           </Icon>
         </Tooltip>
-        <Tooltip title={t('settings.title')} mouseEnterDelay={0.8} placement="right">
-          <StyledLink onClick={() => to(isLocalAi ? '/settings/assistant' : '/settings/provider')}>
-            <Icon className={pathname.startsWith('/settings') ? 'active' : ''}>
-              <i className="iconfont icon-setting" />
-            </Icon>
-          </StyledLink>
-        </Tooltip>
+        <SettingsPopup
+          actionButton={
+            <Tooltip title={t('settings.title')} mouseEnterDelay={0.8} placement="right">
+              <Icon>
+                <i className="iconfont icon-setting" />
+              </Icon>
+            </Tooltip>
+          }
+        />
       </Menus>
     </Container>
   )

src/renderer/src/pages/settings/ProviderSettings/index.tsx

@@ -164,7 +164,7 @@ const ProviderListContainer = styled.div`
   display: flex;
   flex-direction: column;
   min-width: calc(var(--settings-width) + 10px);
-  height: calc(100vh - var(--navbar-height));
+  height: calc(75vh - var(--navbar-height));
   border-right: 0.5px solid var(--color-border);
 `
 
@@ -180,19 +180,18 @@ const ProviderListItem = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 5px 10px;
+  padding: 8px 8px;
   width: 100%;
   cursor: grab;
-  border-radius: var(--list-item-border-radius);
+  border-radius: 8px;
   font-size: 14px;
   transition: all 0.2s ease-in-out;
-  border: 0.5px solid transparent;
   &:hover {
-    background: var(--color-background-soft);
+    background: var(--color-primary-mute);
   }
   &.active {
-    background: var(--color-background-soft);
-    border: 0.5px solid var(--color-border);
+    background: var(--color-primary-mute);
+    color: var(--color-primary);
     font-weight: bold !important;
   }
 `