From 945b4de42c59747067708e91a87d25547a610d26 Mon Sep 17 00:00:00 2001 From: MyPrototypeWhat Date: Mon, 5 Jan 2026 15:05:03 +0800 Subject: [PATCH] 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/components/layout/AppShell.tsx | 3 +- .../WebSearchSettings/BasicSettings.tsx | 4 +- .../WebSearchProviderSettings.tsx | 5 +- .../settings/WebSearchSettings/index.tsx | 21 ++--- src/renderer/src/routeTree.gen.ts | 85 +++++++++++++++++-- src/renderer/src/routes/settings/notes.tsx | 2 +- .../src/routes/settings/websearch/general.tsx | 6 ++ .../src/routes/settings/websearch/index.tsx | 8 ++ .../websearch/provider.$providerId.tsx | 6 ++ 9 files changed, 116 insertions(+), 24 deletions(-) create mode 100644 src/renderer/src/routes/settings/websearch/general.tsx create mode 100644 src/renderer/src/routes/settings/websearch/index.tsx create mode 100644 src/renderer/src/routes/settings/websearch/provider.$providerId.tsx diff --git a/src/renderer/src/components/layout/AppShell.tsx b/src/renderer/src/components/layout/AppShell.tsx index 37cd987f4a..ddc9198328 100644 --- a/src/renderer/src/components/layout/AppShell.tsx +++ b/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' diff --git a/src/renderer/src/pages/settings/WebSearchSettings/BasicSettings.tsx b/src/renderer/src/pages/settings/WebSearchSettings/BasicSettings.tsx index 166c2db77d..3a14c7aea5 100644 --- a/src/renderer/src/pages/settings/WebSearchSettings/BasicSettings.tsx +++ b/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 diff --git a/src/renderer/src/pages/settings/WebSearchSettings/WebSearchProviderSettings.tsx b/src/renderer/src/pages/settings/WebSearchSettings/WebSearchProviderSettings.tsx index 884c43e6b4..3fce99c79f 100644 --- a/src/renderer/src/pages/settings/WebSearchSettings/WebSearchProviderSettings.tsx +++ b/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) { diff --git a/src/renderer/src/pages/settings/WebSearchSettings/index.tsx b/src/renderer/src/pages/settings/WebSearchSettings/index.tsx index a21de63764..fa4f7e9fc6 100644 --- a/src/renderer/src/pages/settings/WebSearchSettings/index.tsx +++ b/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 = () => { navigate('/settings/websearch/general')} + onClick={() => navigate({ to: '/settings/websearch/general' })} icon={} 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 ? ( {provider.name} @@ -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 ? ( {provider.name} @@ -151,11 +152,7 @@ const WebSearchSettings: FC = () => { )} - - } /> - } /> - } /> - + diff --git a/src/renderer/src/routeTree.gen.ts b/src/renderer/src/routeTree.gen.ts index b5357bda95..ab8672e768 100644 --- a/src/renderer/src/routeTree.gen.ts +++ b/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, } diff --git a/src/renderer/src/routes/settings/notes.tsx b/src/renderer/src/routes/settings/notes.tsx index 7e8e012eef..bff74d3d99 100644 --- a/src/renderer/src/routes/settings/notes.tsx +++ b/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')({ diff --git a/src/renderer/src/routes/settings/websearch/general.tsx b/src/renderer/src/routes/settings/websearch/general.tsx new file mode 100644 index 0000000000..531e916ee6 --- /dev/null +++ b/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 +}) diff --git a/src/renderer/src/routes/settings/websearch/index.tsx b/src/renderer/src/routes/settings/websearch/index.tsx new file mode 100644 index 0000000000..d722636bba --- /dev/null +++ b/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' }) + } +}) diff --git a/src/renderer/src/routes/settings/websearch/provider.$providerId.tsx b/src/renderer/src/routes/settings/websearch/provider.$providerId.tsx new file mode 100644 index 0000000000..dbfab96c98 --- /dev/null +++ b/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 +})