abearxiong
eafe815d8f
- Added fullscreen toggle functionality to the QueryView component. - Introduced new icons for maximizing and minimizing the view. - Updated the QueryView component to handle details display with tab management. - Refactored the store to manage details data and active tabs. - Improved the handling of view data in the studio, including filtering unnecessary fields. - Created new routes for ID and console views, integrating them into the routing structure. - Added dynamic basename calculation based on the current URL path. - Enhanced the query module to utilize context keys for better state management. - Updated the UI components for better user experience and accessibility.
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
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>
|
|
}
|