feat(websearch): enhance web search settings routing and structure

- Introduced new routes for web search settings, including general settings and provider-specific settings.
- Updated navigation logic to utilize the new route structure with parameterized paths for provider IDs.
- Refactored components to use the `@tanstack/react-router` for improved routing capabilities.
- Added redirection from `/settings/websearch/` to `/settings/websearch/general`.
- Created a new `WebSearchGeneralSettings` component for handling general settings.
- Updated the `AppShell` layout to reflect changes in imports and structure.

This commit improves the organization and accessibility of web search settings within the application.

src/renderer/src/components/layout/AppShell.tsx

@@ -1,6 +1,7 @@
 import '@renderer/databases'
 
-import { cn, Tabs, TabsList, TabsTrigger } from '@cherrystudio/ui'
+import { Tabs, TabsList, TabsTrigger } from '@cherrystudio/ui'
+import { cn } from '@renderer/utils'
 import { getDefaultRouteTitle } from '@renderer/utils/routeTitle'
 import { Plus, X } from 'lucide-react'
 import { Activity } from 'react'

src/renderer/src/pages/settings/WebSearchSettings/BasicSettings.tsx

@@ -18,10 +18,10 @@ import { useAppDispatch } from '@renderer/store'
 import { setMaxResult, setSearchWithTime } from '@renderer/store/websearch'
 import type { WebSearchProvider, WebSearchProviderId } from '@renderer/types'
 import { hasObjectKey } from '@renderer/utils'
+import { useNavigate } from '@tanstack/react-router'
 import { Slider } from 'antd'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router'
 
 import { SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '..'
 
@@ -76,7 +76,7 @@ const BasicSettings: FC = () => {
           cancelText: t('common.cancel'),
           centered: true,
           onOk: () => {
-            navigate(`/settings/websearch/provider/${provider.id}`)
+            navigate({ to: '/settings/websearch/provider/$providerId', params: { providerId: provider.id } })
           }
         })
         return

src/renderer/src/pages/settings/WebSearchSettings/WebSearchProviderSettings.tsx

@@ -1,13 +1,14 @@
 import { useTheme } from '@renderer/context/ThemeProvider'
 import type { WebSearchProviderId } from '@renderer/types'
+import { useParams } from '@tanstack/react-router'
 import type { FC } from 'react'
-import { useParams } from 'react-router'
 
 import { SettingContainer, SettingGroup } from '..'
 import WebSearchProviderSetting from './WebSearchProviderSetting'
 
 const WebSearchProviderSettings: FC = () => {
-  const { providerId } = useParams<{ providerId: string }>()
+  const params = useParams({ strict: false }) as { providerId?: string }
+  const providerId = params.providerId
   const { theme } = useTheme()
 
   if (!providerId) {

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

@@ -12,16 +12,13 @@ import Scrollbar from '@renderer/components/Scrollbar'
 import { useDefaultWebSearchProvider, useWebSearchProviders } from '@renderer/hooks/useWebSearchProviders'
 import type { WebSearchProviderId } from '@renderer/types'
 import { hasObjectKey } from '@renderer/utils'
+import { Outlet, useLocation, useNavigate } from '@tanstack/react-router'
 import { Flex, Tag } from 'antd'
 import { Search } from 'lucide-react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router'
 import styled from 'styled-components'
 
-import WebSearchGeneralSettings from './WebSearchGeneralSettings'
-import WebSearchProviderSettings from './WebSearchProviderSettings'
-
 const WebSearchSettings: FC = () => {
   const { t } = useTranslation()
   const { providers } = useWebSearchProviders()
@@ -85,7 +82,7 @@ const WebSearchSettings: FC = () => {
           <ListItem
             title={t('settings.tool.websearch.title')}
             active={activeView === 'general'}
-            onClick={() => navigate('/settings/websearch/general')}
+            onClick={() => navigate({ to: '/settings/websearch/general' })}
             icon={<Search size={18} />}
             titleStyle={{ fontWeight: 500 }}
           />
@@ -98,7 +95,9 @@ const WebSearchSettings: FC = () => {
                 key={provider.id}
                 title={provider.name}
                 active={activeView === provider.id}
-                onClick={() => navigate(`/settings/websearch/provider/${provider.id}`)}
+                onClick={() =>
+                  navigate({ to: '/settings/websearch/provider/$providerId', params: { providerId: provider.id } })
+                }
                 icon={
                   logo ? (
                     <img src={logo} alt={provider.name} className="h-5 w-5 rounded object-contain" />
@@ -128,7 +127,9 @@ const WebSearchSettings: FC = () => {
                     key={provider.id}
                     title={provider.name}
                     active={activeView === provider.id}
-                    onClick={() => navigate(`/settings/websearch/provider/${provider.id}`)}
+                    onClick={() =>
+                      navigate({ to: '/settings/websearch/provider/$providerId', params: { providerId: provider.id } })
+                    }
                     icon={
                       logo ? (
                         <img src={logo} alt={provider.name} className="h-5 w-5 rounded object-contain" />
@@ -151,11 +152,7 @@ const WebSearchSettings: FC = () => {
           )}
         </MenuList>
         <RightContainer>
-          <Routes>
-            <Route index element={<Navigate to="general" replace />} />
-            <Route path="general" element={<WebSearchGeneralSettings />} />
-            <Route path="provider/:providerId" element={<WebSearchProviderSettings />} />
-          </Routes>
+          <Outlet />
         </RightContainer>
       </MainContainer>
     </Container>

src/renderer/src/routeTree.gen.ts

@@ -39,13 +39,16 @@ import { Route as SettingsApiServerRouteImport } from './routes/settings/api-ser
 import { Route as SettingsAboutRouteImport } from './routes/settings/about'
 import { Route as PaintingsSplatRouteImport } from './routes/paintings/$'
 import { Route as AppsAppIdRouteImport } from './routes/apps/$appId'
+import { Route as SettingsWebsearchIndexRouteImport } from './routes/settings/websearch/index'
 import { Route as SettingsMcpIndexRouteImport } from './routes/settings/mcp/index'
+import { Route as SettingsWebsearchGeneralRouteImport } from './routes/settings/websearch/general'
 import { Route as SettingsMcpServersRouteImport } from './routes/settings/mcp/servers'
 import { Route as SettingsMcpNpxSearchRouteImport } from './routes/settings/mcp/npx-search'
 import { Route as SettingsMcpMcpInstallRouteImport } from './routes/settings/mcp/mcp-install'
 import { Route as SettingsMcpMarketplacesRouteImport } from './routes/settings/mcp/marketplaces'
 import { Route as SettingsMcpBuiltinRouteImport } from './routes/settings/mcp/builtin'
 import { Route as SettingsMcpSplatRouteImport } from './routes/settings/mcp/$'
+import { Route as SettingsWebsearchProviderProviderIdRouteImport } from './routes/settings/websearch/provider.$providerId'
 import { Route as SettingsMcpSettingsServerIdRouteImport } from './routes/settings/mcp/settings.$serverId'
 
 const TranslateRoute = TranslateRouteImport.update({
@@ -199,11 +202,22 @@ const AppsAppIdRoute = AppsAppIdRouteImport.update({
   path: '/apps/$appId',
   getParentRoute: () => rootRouteImport,
 } as any)
+const SettingsWebsearchIndexRoute = SettingsWebsearchIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => SettingsWebsearchRoute,
+} as any)
 const SettingsMcpIndexRoute = SettingsMcpIndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => SettingsMcpRoute,
 } as any)
+const SettingsWebsearchGeneralRoute =
+  SettingsWebsearchGeneralRouteImport.update({
+    id: '/general',
+    path: '/general',
+    getParentRoute: () => SettingsWebsearchRoute,
+  } as any)
 const SettingsMcpServersRoute = SettingsMcpServersRouteImport.update({
   id: '/servers',
   path: '/servers',
@@ -234,6 +248,12 @@ const SettingsMcpSplatRoute = SettingsMcpSplatRouteImport.update({
   path: '/$',
   getParentRoute: () => SettingsMcpRoute,
 } as any)
+const SettingsWebsearchProviderProviderIdRoute =
+  SettingsWebsearchProviderProviderIdRouteImport.update({
+    id: '/provider/$providerId',
+    path: '/provider/$providerId',
+    getParentRoute: () => SettingsWebsearchRoute,
+  } as any)
 const SettingsMcpSettingsServerIdRoute =
   SettingsMcpSettingsServerIdRouteImport.update({
     id: '/settings/$serverId',
@@ -268,7 +288,7 @@ export interface FileRoutesByFullPath {
   '/settings/quickphrase': typeof SettingsQuickphraseRoute
   '/settings/selectionAssistant': typeof SettingsSelectionAssistantRoute
   '/settings/shortcut': typeof SettingsShortcutRoute
-  '/settings/websearch': typeof SettingsWebsearchRoute
+  '/settings/websearch': typeof SettingsWebsearchRouteWithChildren
   '/apps': typeof AppsIndexRoute
   '/paintings': typeof PaintingsIndexRoute
   '/settings/': typeof SettingsIndexRoute
@@ -278,8 +298,11 @@ export interface FileRoutesByFullPath {
   '/settings/mcp/mcp-install': typeof SettingsMcpMcpInstallRoute
   '/settings/mcp/npx-search': typeof SettingsMcpNpxSearchRoute
   '/settings/mcp/servers': typeof SettingsMcpServersRoute
+  '/settings/websearch/general': typeof SettingsWebsearchGeneralRoute
   '/settings/mcp/': typeof SettingsMcpIndexRoute
+  '/settings/websearch/': typeof SettingsWebsearchIndexRoute
   '/settings/mcp/settings/$serverId': typeof SettingsMcpSettingsServerIdRoute
+  '/settings/websearch/provider/$providerId': typeof SettingsWebsearchProviderProviderIdRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -306,7 +329,6 @@ export interface FileRoutesByTo {
   '/settings/quickphrase': typeof SettingsQuickphraseRoute
   '/settings/selectionAssistant': typeof SettingsSelectionAssistantRoute
   '/settings/shortcut': typeof SettingsShortcutRoute
-  '/settings/websearch': typeof SettingsWebsearchRoute
   '/apps': typeof AppsIndexRoute
   '/paintings': typeof PaintingsIndexRoute
   '/settings': typeof SettingsIndexRoute
@@ -316,8 +338,11 @@ export interface FileRoutesByTo {
   '/settings/mcp/mcp-install': typeof SettingsMcpMcpInstallRoute
   '/settings/mcp/npx-search': typeof SettingsMcpNpxSearchRoute
   '/settings/mcp/servers': typeof SettingsMcpServersRoute
+  '/settings/websearch/general': typeof SettingsWebsearchGeneralRoute
   '/settings/mcp': typeof SettingsMcpIndexRoute
+  '/settings/websearch': typeof SettingsWebsearchIndexRoute
   '/settings/mcp/settings/$serverId': typeof SettingsMcpSettingsServerIdRoute
+  '/settings/websearch/provider/$providerId': typeof SettingsWebsearchProviderProviderIdRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -347,7 +372,7 @@ export interface FileRoutesById {
   '/settings/quickphrase': typeof SettingsQuickphraseRoute
   '/settings/selectionAssistant': typeof SettingsSelectionAssistantRoute
   '/settings/shortcut': typeof SettingsShortcutRoute
-  '/settings/websearch': typeof SettingsWebsearchRoute
+  '/settings/websearch': typeof SettingsWebsearchRouteWithChildren
   '/apps/': typeof AppsIndexRoute
   '/paintings/': typeof PaintingsIndexRoute
   '/settings/': typeof SettingsIndexRoute
@@ -357,8 +382,11 @@ export interface FileRoutesById {
   '/settings/mcp/mcp-install': typeof SettingsMcpMcpInstallRoute
   '/settings/mcp/npx-search': typeof SettingsMcpNpxSearchRoute
   '/settings/mcp/servers': typeof SettingsMcpServersRoute
+  '/settings/websearch/general': typeof SettingsWebsearchGeneralRoute
   '/settings/mcp/': typeof SettingsMcpIndexRoute
+  '/settings/websearch/': typeof SettingsWebsearchIndexRoute
   '/settings/mcp/settings/$serverId': typeof SettingsMcpSettingsServerIdRoute
+  '/settings/websearch/provider/$providerId': typeof SettingsWebsearchProviderProviderIdRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -399,8 +427,11 @@ export interface FileRouteTypes {
     | '/settings/mcp/mcp-install'
     | '/settings/mcp/npx-search'
     | '/settings/mcp/servers'
+    | '/settings/websearch/general'
     | '/settings/mcp/'
+    | '/settings/websearch/'
     | '/settings/mcp/settings/$serverId'
+    | '/settings/websearch/provider/$providerId'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -427,7 +458,6 @@ export interface FileRouteTypes {
     | '/settings/quickphrase'
     | '/settings/selectionAssistant'
     | '/settings/shortcut'
-    | '/settings/websearch'
     | '/apps'
     | '/paintings'
     | '/settings'
@@ -437,8 +467,11 @@ export interface FileRouteTypes {
     | '/settings/mcp/mcp-install'
     | '/settings/mcp/npx-search'
     | '/settings/mcp/servers'
+    | '/settings/websearch/general'
     | '/settings/mcp'
+    | '/settings/websearch'
     | '/settings/mcp/settings/$serverId'
+    | '/settings/websearch/provider/$providerId'
   id:
     | '__root__'
     | '/'
@@ -477,8 +510,11 @@ export interface FileRouteTypes {
     | '/settings/mcp/mcp-install'
     | '/settings/mcp/npx-search'
     | '/settings/mcp/servers'
+    | '/settings/websearch/general'
     | '/settings/mcp/'
+    | '/settings/websearch/'
     | '/settings/mcp/settings/$serverId'
+    | '/settings/websearch/provider/$providerId'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -709,6 +745,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppsAppIdRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/settings/websearch/': {
+      id: '/settings/websearch/'
+      path: '/'
+      fullPath: '/settings/websearch/'
+      preLoaderRoute: typeof SettingsWebsearchIndexRouteImport
+      parentRoute: typeof SettingsWebsearchRoute
+    }
     '/settings/mcp/': {
       id: '/settings/mcp/'
       path: '/'
@@ -716,6 +759,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsMcpIndexRouteImport
       parentRoute: typeof SettingsMcpRoute
     }
+    '/settings/websearch/general': {
+      id: '/settings/websearch/general'
+      path: '/general'
+      fullPath: '/settings/websearch/general'
+      preLoaderRoute: typeof SettingsWebsearchGeneralRouteImport
+      parentRoute: typeof SettingsWebsearchRoute
+    }
     '/settings/mcp/servers': {
       id: '/settings/mcp/servers'
       path: '/servers'
@@ -758,6 +808,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsMcpSplatRouteImport
       parentRoute: typeof SettingsMcpRoute
     }
+    '/settings/websearch/provider/$providerId': {
+      id: '/settings/websearch/provider/$providerId'
+      path: '/provider/$providerId'
+      fullPath: '/settings/websearch/provider/$providerId'
+      preLoaderRoute: typeof SettingsWebsearchProviderProviderIdRouteImport
+      parentRoute: typeof SettingsWebsearchRoute
+    }
     '/settings/mcp/settings/$serverId': {
       id: '/settings/mcp/settings/$serverId'
       path: '/settings/$serverId'
@@ -794,6 +851,22 @@ const SettingsMcpRouteWithChildren = SettingsMcpRoute._addFileChildren(
   SettingsMcpRouteChildren,
 )
 
+interface SettingsWebsearchRouteChildren {
+  SettingsWebsearchGeneralRoute: typeof SettingsWebsearchGeneralRoute
+  SettingsWebsearchIndexRoute: typeof SettingsWebsearchIndexRoute
+  SettingsWebsearchProviderProviderIdRoute: typeof SettingsWebsearchProviderProviderIdRoute
+}
+
+const SettingsWebsearchRouteChildren: SettingsWebsearchRouteChildren = {
+  SettingsWebsearchGeneralRoute: SettingsWebsearchGeneralRoute,
+  SettingsWebsearchIndexRoute: SettingsWebsearchIndexRoute,
+  SettingsWebsearchProviderProviderIdRoute:
+    SettingsWebsearchProviderProviderIdRoute,
+}
+
+const SettingsWebsearchRouteWithChildren =
+  SettingsWebsearchRoute._addFileChildren(SettingsWebsearchRouteChildren)
+
 interface SettingsRouteChildren {
   SettingsAboutRoute: typeof SettingsAboutRoute
   SettingsApiServerRoute: typeof SettingsApiServerRoute
@@ -810,7 +883,7 @@ interface SettingsRouteChildren {
   SettingsQuickphraseRoute: typeof SettingsQuickphraseRoute
   SettingsSelectionAssistantRoute: typeof SettingsSelectionAssistantRoute
   SettingsShortcutRoute: typeof SettingsShortcutRoute
-  SettingsWebsearchRoute: typeof SettingsWebsearchRoute
+  SettingsWebsearchRoute: typeof SettingsWebsearchRouteWithChildren
   SettingsIndexRoute: typeof SettingsIndexRoute
 }
 
@@ -830,7 +903,7 @@ const SettingsRouteChildren: SettingsRouteChildren = {
   SettingsQuickphraseRoute: SettingsQuickphraseRoute,
   SettingsSelectionAssistantRoute: SettingsSelectionAssistantRoute,
   SettingsShortcutRoute: SettingsShortcutRoute,
-  SettingsWebsearchRoute: SettingsWebsearchRoute,
+  SettingsWebsearchRoute: SettingsWebsearchRouteWithChildren,
   SettingsIndexRoute: SettingsIndexRoute,
 }
 

src/renderer/src/routes/settings/notes.tsx

@@ -1,4 +1,4 @@
-import NotesSettings from '@renderer/pages/settings/NotesSettings'
+import NotesSettings from '@renderer/pages/notes/NotesSettings'
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/settings/notes')({

src/renderer/src/routes/settings/websearch/general.tsx

@@ -0,0 +1,6 @@
+import WebSearchGeneralSettings from '@renderer/pages/settings/WebSearchSettings/WebSearchGeneralSettings'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/settings/websearch/general')({
+  component: WebSearchGeneralSettings
+})

src/renderer/src/routes/settings/websearch/index.tsx

@@ -0,0 +1,8 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+
+// /settings/websearch/ 重定向到 /settings/websearch/general
+export const Route = createFileRoute('/settings/websearch/')({
+  beforeLoad: () => {
+    throw redirect({ to: '/settings/websearch/general' })
+  }
+})

src/renderer/src/routes/settings/websearch/provider.$providerId.tsx

@@ -0,0 +1,6 @@
+import WebSearchProviderSettings from '@renderer/pages/settings/WebSearchSettings/WebSearchProviderSettings'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/settings/websearch/provider/$providerId')({
+  component: WebSearchProviderSettings
+})