udpate

src/routes/$id.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import App from '@/app/page'
+
+export const Route = createFileRoute('/$id')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <App />
+}

src/routes/__root.tsx

@@ -0,0 +1,38 @@
+import { Link, Outlet, createRootRoute, useLocation } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { Toaster } from '@/components/ui/sonner'
+import { Load } from '@kevisual/context/load'
+import * as query from '@/modules/query';
+export const Route = createRootRoute({
+  component: RootComponent,
+})
+Load.npm({ pkg: 'eruda' });
+
+function RootComponent() {
+  // 这里预加载一下 query 模块，避免在代码分割自动threeshaking;
+  query;
+
+  return (
+    <div className='h-full overflow-hidden'>
+
+      <div className="p-2 flex gap-2 text-lg">
+        <Link
+          to="/"
+          activeProps={{
+            className: 'font-bold',
+          }}
+          activeOptions={{ exact: true }}
+        >
+          首页
+        </Link>
+      </div>
+      <hr />
+      <main className='h-[calc(100%-4rem)] overflow-auto scrollbar'>
+        <Outlet />
+      </main>
+      <TanStackRouterDevtools position="bottom-left" />
+      <Toaster />
+    </div>
+
+  )
+}

src/routes/console.tsx

@@ -0,0 +1,45 @@
+import { useContextKey } from '@kevisual/context';
+import { createFileRoute } from '@tanstack/react-router'
+import type Eruda from 'eruda';
+import { useEffect, useRef } from 'react';
+export const Route = createFileRoute('/console')({
+  component: RouteComponent,
+})
+
+
+function RouteComponent() {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    init();
+    return () => {
+      deinit();
+    }
+  }, [])
+  const deinit = async () => {
+    const eruda: typeof Eruda = await useContextKey('eruda');
+    eruda.destroy();
+  }
+  const init = async () => {
+    console.log('正在初始化控制台...');
+    const eruda: typeof Eruda = await useContextKey('eruda');
+    console.log('eruda', eruda);
+    if (!ref.current) return;
+    eruda.init({
+      container: ref.current!,
+      tool: ['console'],
+      inline: true,
+    });
+    const consoleTool = eruda.get('console');
+    consoleTool.html('<span style="color:red">Red</span>');
+  }
+
+  return <div className='w-full overflow-hidden' style={{
+    height: 'calc(100% - 48px)'
+  }} >
+    <div className='min-w-150 w-[80%] mx-auto h-full py-4'>
+      <div className='relative w-full h-full border'>
+        <div ref={ref}></div>
+      </div>
+    </div>
+  </div>
+}

src/routes/index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+import App from '@/app/page'
+export const Route = createFileRoute('/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <App />
+}

src/routes/view.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+import App from '../app/query-view/page'
+export const Route = createFileRoute('/view')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <App />
+}