refactor: reorganize routing and clean up unused components in Discover and MCP Servers pages

- Introduced a new routers.ts file to centralize routing logic for the Discover page.
- Updated DiscoverContent to utilize dynamic routing based on the new routers configuration.
- Removed commented-out routes and unnecessary imports from various components.
- Simplified navigation logic in MCP Servers pages by adjusting route paths.
- Cleaned up Navbar components in multiple pages for better maintainability.

src/renderer/src/App.tsx

@@ -14,13 +14,8 @@ import StyleSheetManager from './context/StyleSheetManager'
 import { ThemeProvider } from './context/ThemeProvider'
 import NavigationHandler from './handler/NavigationHandler'
 import DiscoverPage from './pages/discover'
-import FilesPage from './pages/files/FilesPage'
 import HomePage from './pages/home/HomePage'
-import KnowledgePage from './pages/knowledge/KnowledgePage'
-import McpServersPage from './pages/mcp-servers'
-import PaintingsRoutePage from './pages/paintings/PaintingsRoutePage'
 import SettingsPage from './pages/settings/SettingsPage'
-import TranslatePage from './pages/translate/TranslatePage'
 
 function App(): React.ReactElement {
   return (
@@ -38,12 +33,12 @@ function App(): React.ReactElement {
                       <Routes>
                         <Route path="/" element={<HomePage />} />
                         {/* <Route path="/agents" element={<AgentsPage />} /> */}
-                        <Route path="/paintings/*" element={<PaintingsRoutePage />} />
-                        <Route path="/translate" element={<TranslatePage />} />
-                        <Route path="/files" element={<FilesPage />} />
-                        <Route path="/knowledge" element={<KnowledgePage />} />
+                        {/* <Route path="/paintings/*" element={<PaintingsRoutePage />} /> */}
+                        {/* <Route path="/translate" element={<TranslatePage />} /> */}
+                        {/* <Route path="/files" element={<FilesPage />} /> */}
+                        {/* <Route path="/knowledge" element={<KnowledgePage />} /> */}
                         {/* <Route path="/apps" element={<AppsPage />} /> */}
-                        <Route path="/mcp-servers/*" element={<McpServersPage />} />
+                        {/* <Route path="/mcp-servers/*" element={<McpServersPage />} /> */}
                         <Route path="/settings/*" element={<SettingsPage />} />
                         <Route path="/discover/*" element={<DiscoverPage />} />
                       </Routes>

src/renderer/src/entryPoint.tsx

@@ -1,6 +1,6 @@
+import './assets/styles/tailwind.css'
 import './assets/styles/index.scss'
 import '@ant-design/v5-patch-for-react-19'
-import './assets/styles/tailwind.css'
 
 import { createRoot } from 'react-dom/client'
 

src/renderer/src/pages/discover/components/DiscoverContent.tsx

@@ -1,10 +1,9 @@
 import { Category } from '@renderer/types/cherryStore'
-import React from 'react'
+import React, { Suspense } from 'react'
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
 
 // 实际的 AgentsPage 组件 - 请确保路径正确
-import AgentsPage from '../../agents/AgentsPage'
-import AppsPage from '../../apps/AppsPage'
+import { discoverRouters } from '../routers'
 // import AssistantDetailsPage from '../../agents/AssistantDetailsPage'; // 示例详情页
 
 // 其他分类的页面组件 (如果需要)
@@ -32,14 +31,16 @@ const DiscoverContent: React.FC<DiscoverContentProps> = ({ activeTabId, currentC
   }
 
   return (
-    <Routes>
-      {/* Path for Assistant category */}
-      <Route path="assistant" element={<AgentsPage />} />
-      {/* Path for Mini-App category */}
-      <Route path="mini-app" element={<AppsPage />} />
+    <Suspense fallback={<div>Loading...</div>}>
+      <Routes>
+        {discoverRouters.map((_Route) => {
+          if (!_Route.component) return null
+          return <Route key={_Route.path} path={`/${_Route.path}`} element={<_Route.component />} />
+        })}
 
-      <Route path="*" element={<div>Discover Feature Not Found at {location.pathname}</div>} />
-    </Routes>
+        <Route path="*" element={<div>Discover Feature Not Found at {location.pathname}</div>} />
+      </Routes>
+    </Suspense>
   )
 }
 

src/renderer/src/pages/discover/hooks/useDiscoverCategories.ts

@@ -1,7 +1,9 @@
-import { Category, CherryStoreType } from '@renderer/types/cherryStore'
+import { Category } from '@renderer/types/cherryStore'
 import { useEffect, useMemo, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 
+import { discoverRouters } from '../routers'
+
 // Extended Category type for internal use in hook, including path and sidebar flag
 // Export this interface so other files can import it
 export interface InternalCategory extends Category {
@@ -10,23 +12,14 @@ export interface InternalCategory extends Category {
 }
 
 // Initial category data with path and hasSidebar
-const initialCategories: InternalCategory[] = [
-  {
-    id: CherryStoreType.ASSISTANT,
-    title: 'Assistants',
-    path: 'assistant',
-    hasSidebar: false,
-    items: []
-  },
-  {
-    id: CherryStoreType.MINI_APP,
-    title: 'Mini Apps',
-    path: 'mini-app',
-    hasSidebar: false,
-    items: []
-  }
-  // Add more categories as needed
-]
+const initialCategories: InternalCategory[] = discoverRouters.map((router) => ({
+  id: router.id,
+  title: router.title,
+  path: router.path,
+  hasSidebar: !router.component,
+  // 目前没有需要二级分类的分类
+  items: []
+}))
 
 // Helper to find category by path
 const findCategoryByPath = (path: string | undefined): InternalCategory | undefined =>

src/renderer/src/pages/discover/routers.ts

@@ -0,0 +1,44 @@
+import i18n from '@renderer/i18n'
+import { CherryStoreType } from '@renderer/types/cherryStore'
+import { lazy } from 'react'
+
+export const discoverRouters = [
+  {
+    id: CherryStoreType.ASSISTANT,
+    title: i18n.t('assistants.title'),
+    path: 'assistant',
+    component: lazy(() => import('../agents/AgentsPage'))
+  },
+  {
+    id: CherryStoreType.MINI_APP,
+    title: i18n.t('minapp.title'),
+    path: 'mini-app',
+    component: lazy(() => import('../apps/AppsPage'))
+  },
+  {
+    id: CherryStoreType.TRANSLATE,
+    title: i18n.t('translate.title'),
+    path: 'translate',
+    component: lazy(() => import('../translate/TranslatePage'))
+  },
+  {
+    id: CherryStoreType.FILES,
+    title: i18n.t('files.title'),
+    path: 'files',
+    component: lazy(() => import('../files/FilesPage'))
+  },
+  {
+    id: CherryStoreType.PAINTINGS,
+    title: i18n.t('paintings.title'),
+    path: 'paintings/*',
+    isPrefix: true,
+    component: lazy(() => import('../paintings/PaintingsRoutePage'))
+  },
+  {
+    id: CherryStoreType.MCP_SERVER,
+    title: i18n.t('common.mcp'),
+    path: 'mcp-servers/*',
+    isPrefix: true,
+    component: lazy(() => import('../mcp-servers'))
+  }
+]

src/renderer/src/pages/files/FilesPage.tsx

@@ -5,7 +5,6 @@ import {
   SortAscendingOutlined,
   SortDescendingOutlined
 } from '@ant-design/icons'
-import { NavbarCenter, NavbarMain } from '@renderer/components/app/Navbar'
 import ListItem from '@renderer/components/ListItem'
 import TextEditPopup from '@renderer/components/Popups/TextEditPopup'
 import Logger from '@renderer/config/logger'
@@ -207,9 +206,9 @@ const FilesPage: FC = () => {
 
   return (
     <Container>
-      <NavbarMain>
+      {/* <NavbarMain>
         <NavbarCenter style={{ borderRight: 'none' }}>{t('files.title')}</NavbarCenter>
-      </NavbarMain>
+      </NavbarMain> */}
       <ContentContainer id="content-container">
         <SideNav>
           {menuItems.map((item) => (

src/renderer/src/pages/mcp-servers/InstallNpxUv.tsx

@@ -81,7 +81,7 @@ const InstallNpxUv: FC<Props> = ({ mini = false }) => {
         icon={installed ? <CheckCircleOutlined /> : <WarningOutlined />}
         className="nodrag"
         color={installed ? 'green' : 'danger'}
-        onClick={() => navigate('/mcp-servers/mcp-install')}
+        onClick={() => navigate('mcp-install')}
       />
     )
   }

src/renderer/src/pages/mcp-servers/McpServersList.tsx

@@ -36,7 +36,7 @@ const McpServersList: FC = () => {
       isActive: false
     }
     addMCPServer(newServer)
-    navigate(`/mcp-servers/settings`, { state: { server: newServer } })
+    navigate(`settings`, { state: { server: newServer } })
     window.message.success({ content: t('settings.mcp.addSuccess'), key: 'mcp-list' })
   }, [addMCPServer, navigate, t])
 
@@ -119,7 +119,7 @@ const McpServersList: FC = () => {
       </ListHeader>
       <DragableList style={{ width: '100%' }} list={mcpServers} onUpdate={updateMcpServers}>
         {(server: MCPServer) => (
-          <ServerCard key={server.id} onClick={() => navigate(`/mcp-servers/settings`, { state: { server } })}>
+          <ServerCard key={server.id} onClick={() => navigate(`settings`, { state: { server } })}>
             <ServerHeader>
               <ServerName>
                 {server.logoUrl && <ServerLogo src={server.logoUrl} alt={`${server.name} logo`} />}
@@ -148,7 +148,7 @@ const McpServersList: FC = () => {
                 <Button
                   icon={<Settings2 size={16} />}
                   type="text"
-                  onClick={() => navigate(`/mcp-servers/settings`, { state: { server } })}
+                  onClick={() => navigate(`settings`, { state: { server } })}
                 />
               </StatusIndicator>
             </ServerHeader>

src/renderer/src/pages/mcp-servers/McpSettingsNavbar.tsx

@@ -75,7 +75,7 @@ export const McpSettingsNavbar = () => {
       <Button
         size="small"
         type="text"
-        onClick={() => navigate('/mcp-servers/npx-search')}
+        onClick={() => navigate('npx-search')}
         icon={<Search size={14} />}
         className="nodrag"
         style={{ fontSize: 13, height: 28, borderRadius: 20 }}>

src/renderer/src/pages/mcp-servers/index.tsx

@@ -1,11 +1,10 @@
 import { ArrowLeftOutlined } from '@ant-design/icons'
-import { NavbarCenter, NavbarMain } from '@renderer/components/app/Navbar'
 import { HStack } from '@renderer/components/Layout'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { SettingContainer } from '@renderer/pages/settings'
 import { Button } from 'antd'
 import { FC } from 'react'
-import { useTranslation } from 'react-i18next'
+// import { useTranslation } from 'react-i18next'
 import { Route, Routes, useLocation } from 'react-router'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
@@ -18,31 +17,32 @@ import NpxSearch from './NpxSearch'
 
 const McpServersPage: FC = () => {
   const { theme } = useTheme()
-  const { t } = useTranslation()
+  // const { t } = useTranslation()
 
   const location = useLocation()
   const pathname = location.pathname
-
-  const isHome = pathname === '/mcp-servers'
+  const isHome = pathname.includes('*')
 
   return (
     <Container theme={theme} style={{ padding: 0, position: 'relative' }}>
-      <NavbarMain>
-        <NavbarCenter style={{ borderRight: 'none' }}>
-          <HStack alignItems="center" gap={10}>
-            {t('common.mcp')}
-            {!isHome && (
-              <Link to="/mcp-servers">
-                <Button type="default" icon={<ArrowLeftOutlined />} shape="circle" size="small" className="nodrag" />
-              </Link>
-            )}
-          </HStack>
-        </NavbarCenter>
-        {pathname.includes('/mcp-servers') && <McpSettingsNavbar />}
-      </NavbarMain>
+      {/* <NavbarMain> */}
+      {/* <NavbarCenter style={{ borderRight: 'none' }}> */}
+      <div className="flex">
+        <HStack alignItems="center" gap={10}>
+          {/* {t('common.mcp')} */}
+          {!isHome && (
+            <Link to="*">
+              <Button type="default" icon={<ArrowLeftOutlined />} shape="circle" size="small" className="nodrag" />
+            </Link>
+          )}
+        </HStack>
+        {/* </NavbarCenter> */}
+        <McpSettingsNavbar />
+      </div>
+      {/* </NavbarMain> */}
       <MainContainer id="content-container">
         <Routes>
-          <Route path="/" element={<McpServersList />} />
+          <Route path="*" element={<McpServersList />} />
           <Route path="settings" element={<McpSettings />} />
           <Route
             path="npx-search"

src/renderer/src/pages/paintings/AihubmixPage.tsx

@@ -1,10 +1,8 @@
-import { PlusOutlined, RedoOutlined } from '@ant-design/icons'
+import { RedoOutlined } from '@ant-design/icons'
 import IcImageUp from '@renderer/assets/images/paintings/ic_ImageUp.svg'
-import { NavbarCenter, NavbarMain, NavbarRight } from '@renderer/components/app/Navbar'
 import { HStack } from '@renderer/components/Layout'
 import Scrollbar from '@renderer/components/Scrollbar'
 import TranslateButton from '@renderer/components/TranslateButton'
-import { isMac } from '@renderer/config/constant'
 import { getProviderLogo } from '@renderer/config/providers'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { usePaintings } from '@renderer/hooks/usePaintings'
@@ -19,7 +17,7 @@ import { setGenerating } from '@renderer/store/runtime'
 import type { FileType } from '@renderer/types'
 import type { PaintingAction, PaintingsState } from '@renderer/types'
 import { getErrorMessage, uuid } from '@renderer/utils'
-import { Avatar, Button, Input, InputNumber, Radio, Segmented, Select, Slider, Switch, Tooltip, Upload } from 'antd'
+import { Avatar, Input, InputNumber, Radio, Segmented, Select, Slider, Switch, Tooltip, Upload } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
 import { Info } from 'lucide-react'
 import type { FC } from 'react'
@@ -785,7 +783,7 @@ const AihubmixPage: FC<{ Options: string[] }> = ({ Options }) => {
 
   return (
     <Container>
-      <NavbarMain>
+      {/* <NavbarMain>
         <NavbarCenter style={{ borderRight: 'none' }}>{t('paintings.title')}</NavbarCenter>
         {isMac && (
           <NavbarRight style={{ justifyContent: 'flex-end' }}>
@@ -794,7 +792,7 @@ const AihubmixPage: FC<{ Options: string[] }> = ({ Options }) => {
             </Button>
           </NavbarRight>
         )}
-      </NavbarMain>
+      </NavbarMain> */}
       <ContentContainer id="content-container">
         <LeftContainer>
           <ProviderTitleContainer>

src/renderer/src/pages/translate/TranslatePage.tsx

@@ -1,5 +1,4 @@
 import { CheckOutlined, DeleteOutlined, HistoryOutlined, SendOutlined } from '@ant-design/icons'
-import { NavbarCenter, NavbarMain } from '@renderer/components/app/Navbar'
 import CopyIcon from '@renderer/components/Icons/CopyIcon'
 import { HStack } from '@renderer/components/Layout'
 import { isEmbeddingModel } from '@renderer/config/models'
@@ -431,19 +430,19 @@ const TranslatePage: FC = () => {
 
   return (
     <Container id="translate-page">
-      <NavbarMain>
-        <NavbarCenter>
-          {t('translate.title')}
-          <Button
-            className="nodrag"
-            color="default"
-            variant={historyDrawerVisible ? 'filled' : 'text'}
-            type="text"
-            icon={<HistoryOutlined />}
-            onClick={() => setHistoryDrawerVisible(!historyDrawerVisible)}
-          />
-        </NavbarCenter>
-      </NavbarMain>
+      {/* <NavbarMain> */}
+      {/* <NavbarCenter> */}
+      {/* {t('translate.title')} */}
+      <Button
+        className="nodrag"
+        color="default"
+        variant={historyDrawerVisible ? 'filled' : 'text'}
+        type="text"
+        icon={<HistoryOutlined />}
+        onClick={() => setHistoryDrawerVisible(!historyDrawerVisible)}
+      />
+      {/* </NavbarCenter> */}
+      {/* </NavbarMain> */}
       <ContentContainer id="content-container" ref={contentContainerRef} $historyDrawerVisible={historyDrawerVisible}>
         <HistoryContainner $historyDrawerVisible={historyDrawerVisible}>
           <OperationBar>

src/renderer/src/types/cherryStore.ts

@@ -4,7 +4,10 @@ export enum CherryStoreType {
   KNOWLEDGE = 'Knowledge',
   MCP_SERVER = 'MCP-Server',
   MODEL_PROVIDER = 'Model-Provider',
-  AGENT = 'Agent'
+  AGENT = 'Agent',
+  TRANSLATE = 'Translate',
+  PAINTINGS = 'Paintings',
+  FILES = 'Files'
 }
 export interface CherryStoreBaseItem {
   id: string