feat: 集成 TanStack Query 与 Router 开发工具并重构上下文管理

- 添加 TanStack Query 上下文管理，初始化并导出查询客户端实例。
- 添加 TanStack Query 开发工具面板支持，集成 React Devtools 以提供查询调试功能。
- 导出上下文和开发工具模块以支持 TanStack Query 集成
- 添加 TanStack Router 开发工具面板支持，集成 React Devtools 以提供路由调试功能。
- 导出 tanstack-router 开发工具模块的全部功能。
- 重构路由配置以使用统一的查询上下文，移除重复的查询客户端实例化并确保服务端渲染集成正确引用上下文中的查询客户端。
- 移除旧版 devtools 组件导入并替换为通过集成模块导入的现代化 devtools 插件。

src/integrations/tanstack-query/context.tsx

@@ -0,0 +1,8 @@
+import { QueryClient } from '@tanstack/react-query'
+
+export function getContext() {
+  const queryClient = new QueryClient()
+  return {
+    queryClient,
+  }
+}

src/integrations/tanstack-query/devtools.tsx

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

src/integrations/tanstack-query/index.ts

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

src/integrations/tanstack-router/devtools.tsx

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

src/integrations/tanstack-router/index.ts

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

src/router.tsx

@@ -1,15 +1,15 @@
-import { QueryClient } from '@tanstack/react-query'
 import { createRouter } from '@tanstack/react-router'
 import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
+import { getContext as getQueryContext } from './integrations/tanstack-query'
 import { routeTree } from './routeTree.gen'
 
 export const getRouter = () => {
-  const queryClient = new QueryClient()
+  const queryContext = getQueryContext()
 
   const router = createRouter({
     routeTree,
     context: {
-      queryClient,
+      ...queryContext,
     },
 
     scrollRestoration: true,
@@ -18,7 +18,7 @@ export const getRouter = () => {
 
   setupRouterSsrQueryIntegration({
     router,
-    queryClient,
+    queryClient: queryContext.queryClient,
   })
 
   return router

src/routes/__root.tsx

@@ -1,8 +1,8 @@
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
 import { createRootRoute, HeadContent, Scripts } from '@tanstack/react-router'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
 import type { ReactNode } from 'react'
+import { devtools as queryDevtools } from '@/integrations/tanstack-query'
+import { devtools as routerDevtools } from '@/integrations/tanstack-router'
 import appCss from '@/styles.css?url'
 
 export const Route = createRootRoute({
@@ -43,16 +43,7 @@ function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
           config={{
             position: 'bottom-right',
           }}
-          plugins={[
+          plugins={[routerDevtools, queryDevtools]}
-            {
-              name: 'TanStack Router',
-              render: <TanStackRouterDevtoolsPanel />,
-            },
-            {
-              name: 'TanStack Query',
-              render: <ReactQueryDevtoolsPanel />,
-            },
-          ]}
         />
         <Scripts />
       </body>