refactor: 移除旧版 devtools 集成,改用组件化方式

- 移除 TanStack Query 开发工具的集成配置
- 移除对 tanstack-query devtools 的导出
- 移除 TanStack Router 开发工具插件的集成配置
- 移除 tanstack-router 开发工具集成的导出
- 移除旧的 devtools 集成方式,改用新的组件化方式引入 TanStack Router 和 Query 的开发工具面板。
This commit is contained in:
2026-01-21 16:11:46 +08:00
parent d922c2c242
commit e49e8606da
5 changed files with 12 additions and 19 deletions

View File

@@ -1,7 +0,0 @@
import type { TanStackDevtoolsReactPlugin } from '@tanstack/react-devtools'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
export const devtools = {
name: 'TanStack Query',
render: <ReactQueryDevtoolsPanel />,
} satisfies TanStackDevtoolsReactPlugin

View File

@@ -1 +0,0 @@
export * from './devtools'

View File

@@ -1,7 +0,0 @@
import type { TanStackDevtoolsReactPlugin } from '@tanstack/react-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
export const devtools = {
name: 'TanStack Router',
render: <TanStackRouterDevtoolsPanel />,
} satisfies TanStackDevtoolsReactPlugin

View File

@@ -1 +0,0 @@
export * from './devtools'

View File

@@ -1,15 +1,15 @@
import { TanStackDevtools } from '@tanstack/react-devtools'
import type { QueryClient } from '@tanstack/react-query'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import {
createRootRouteWithContext,
HeadContent,
Scripts,
} from '@tanstack/react-router'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import type { ReactNode } from 'react'
import { ErrorComponent } from '@/components/Error'
import { NotFoundComponent } from '@/components/NotFount'
import { devtools as queryDevtools } from '@/integrations/tanstack-query'
import { devtools as routerDevtools } from '@/integrations/tanstack-router'
import appCss from '@/styles.css?url'
export interface RouterContext {
@@ -54,7 +54,16 @@ function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
config={{
position: 'bottom-right',
}}
plugins={[routerDevtools, queryDevtools]}
plugins={[
{
name: 'TanStack Router',
render: <TanStackRouterDevtoolsPanel />,
},
{
name: 'TanStack Query',
render: <ReactQueryDevtoolsPanel />,
},
]}
/>
<Scripts />
</body>