feat: update @kevisual/api to version 0.0.62 and add ProxyStatusDialog component for monitoring proxy status
This commit is contained in:
@@ -41,7 +41,7 @@
|
||||
"zustand": "^5.0.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@kevisual/api": "^0.0.60",
|
||||
"@kevisual/api": "^0.0.62",
|
||||
"@kevisual/context": "^0.0.8",
|
||||
"@kevisual/js-filter": "^0.0.5",
|
||||
"@kevisual/kv-login": "^0.1.15",
|
||||
|
||||
10
pnpm-lock.yaml
generated
10
pnpm-lock.yaml
generated
@@ -88,8 +88,8 @@ importers:
|
||||
version: 5.0.11(@types/react@19.2.14)(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
|
||||
devDependencies:
|
||||
'@kevisual/api':
|
||||
specifier: ^0.0.60
|
||||
version: 0.0.60(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
|
||||
specifier: ^0.0.62
|
||||
version: 0.0.62(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
|
||||
'@kevisual/context':
|
||||
specifier: ^0.0.8
|
||||
version: 0.0.8
|
||||
@@ -528,8 +528,8 @@ packages:
|
||||
'@jridgewell/trace-mapping@0.3.31':
|
||||
resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
|
||||
|
||||
'@kevisual/api@0.0.60':
|
||||
resolution: {integrity: sha512-NTFDx1ns/iGli2fUJLJZRWu8nf5VkXV+sOQUqGGAJvrvGATvXSuITu6mD4P/aDQakx4hzQUPr9wDTZoNk7+RqQ==}
|
||||
'@kevisual/api@0.0.62':
|
||||
resolution: {integrity: sha512-GB8Ho2absXoXoZP2GKyuoRqRqjdwtV0JR512DXBaKJR2sIPn1KvuglbBiX+zPjDBBskv/ApvZKOoSwj1OmkrKQ==}
|
||||
|
||||
'@kevisual/context@0.0.8':
|
||||
resolution: {integrity: sha512-DTJpyHI34NE76B7g6f+QlIqiCCyqI2qkBMQE736dzeRDGxOjnbe2iQY9W+Rt2PE6kmymM3qyOmSfNovyWyWrkA==}
|
||||
@@ -2902,7 +2902,7 @@ snapshots:
|
||||
'@jridgewell/resolve-uri': 3.1.2
|
||||
'@jridgewell/sourcemap-codec': 1.5.5
|
||||
|
||||
'@kevisual/api@0.0.60(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))':
|
||||
'@kevisual/api@0.0.62(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))':
|
||||
dependencies:
|
||||
'@kevisual/context': 0.0.8
|
||||
'@kevisual/js-filter': 0.0.5
|
||||
|
||||
135
src/pages/studio/components/ProxyStatusDialog.tsx
Normal file
135
src/pages/studio/components/ProxyStatusDialog.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { useStudioStore } from '../store';
|
||||
import { useShallow } from 'zustand/shallow';
|
||||
import { Activity, RefreshCw, CheckCircle, XCircle } from 'lucide-react';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { cloneDeep } from 'es-toolkit';
|
||||
import { RouterViewItem } from '@kevisual/api/proxy';
|
||||
|
||||
export const ProxyStatusDialog = () => {
|
||||
const { showProxyStatus, setShowProxyStatus, getQueryProxyStatus } = useStudioStore(
|
||||
useShallow((state) => ({
|
||||
showProxyStatus: state.showProxyStatus,
|
||||
setShowProxyStatus: state.setShowProxyStatus,
|
||||
getQueryProxyStatus: state.getQueryProxyStatus,
|
||||
}))
|
||||
);
|
||||
|
||||
const [statusList, setStatusList] = useState<RouterViewItem[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
const loadStatus = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const status = await getQueryProxyStatus();
|
||||
console.log('Loaded proxy status:', status);
|
||||
setStatusList(cloneDeep(status));
|
||||
} catch (error) {
|
||||
console.error('Failed to load proxy status:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (showProxyStatus) {
|
||||
loadStatus();
|
||||
// 每5秒刷新一次
|
||||
intervalRef.current = setInterval(loadStatus, 5000);
|
||||
} else {
|
||||
// 关闭弹窗时清除定时器
|
||||
if (intervalRef.current) {
|
||||
clearInterval(intervalRef.current);
|
||||
intervalRef.current = null;
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (intervalRef.current) {
|
||||
clearInterval(intervalRef.current);
|
||||
intervalRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [showProxyStatus]);
|
||||
|
||||
const getStatusStyle = (status?: string) => {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
return {
|
||||
icon: <CheckCircle size={14} />,
|
||||
className: 'bg-green-100 text-green-700 border-green-200',
|
||||
};
|
||||
case 'error':
|
||||
return {
|
||||
icon: <XCircle size={14} />,
|
||||
className: 'bg-red-100 text-red-700 border-red-200',
|
||||
};
|
||||
default:
|
||||
return {
|
||||
icon: null,
|
||||
className: 'bg-gray-100 text-gray-700 border-gray-200',
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={showProxyStatus} onOpenChange={setShowProxyStatus}>
|
||||
<DialogContent className="max-w-2xl! max-h-[80vh] overflow-hidden flex flex-col">
|
||||
<DialogHeader className="flex flex-row items-center justify-between">
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Activity size={20} />
|
||||
Proxy Router 状态
|
||||
<button
|
||||
className="p-1 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-200 transition-colors"
|
||||
title="刷新"
|
||||
onClick={loadStatus}
|
||||
disabled={loading}
|
||||
>
|
||||
<RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
|
||||
</button>
|
||||
</DialogTitle>
|
||||
|
||||
</DialogHeader>
|
||||
<div className="flex-1 overflow-auto">
|
||||
{loading ? (
|
||||
<div className="text-center text-gray-500 py-8">加载中...</div>
|
||||
) : statusList.length === 0 ? (
|
||||
<div className="text-center text-gray-500 py-8">暂无数据</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{statusList.map((item) => {
|
||||
const statusStyle = getStatusStyle(item.routerStatus);
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className="p-3 border border-gray-200 rounded-md hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-medium text-gray-900">{item.title}</span>
|
||||
<span className="text-xs text-gray-500">{item.id}</span>
|
||||
</div>
|
||||
{item.type === 'api' && item.api?.url && (
|
||||
<div className="mt-2">
|
||||
<span className="text-xs text-gray-500">URL: </span>
|
||||
<span className="text-xs font-mono text-gray-700">{item.api?.url}</span>
|
||||
</div>
|
||||
)}
|
||||
{item.routerStatus && (
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs border ${statusStyle.className}`}>
|
||||
{statusStyle.icon}
|
||||
{item.routerStatus}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
import { filterRouteInfo, useStudioStore } from './store.ts';
|
||||
import { use, useEffect, useState } from 'react';
|
||||
import { MonitorPlay, Play, PanelLeft, PanelLeftClose, PanelRight, PanelRightClose, PanelTop, PanelTopClose, Filter, FilterX, Search, X, MoreHorizontal, Info, Code, RotateCcw, Book, FolderClosed } from 'lucide-react';
|
||||
import { MonitorPlay, Play, PanelLeft, PanelLeftClose, PanelRight, PanelRightClose, PanelTop, PanelTopClose, Filter, FilterX, Search, X, MoreHorizontal, Info, Code, RotateCcw, Book, FolderClosed, Activity } from 'lucide-react';
|
||||
import { Panel, Group } from 'react-resizable-panels'
|
||||
import { ViewList } from '../view/list.tsx';
|
||||
import { useShallow } from 'zustand/shallow';
|
||||
@@ -10,6 +10,7 @@ import { Button } from '@/components/ui/button.tsx';
|
||||
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu.tsx';
|
||||
import { ExportDialog } from './components/ExportDialog';
|
||||
import { RouterGroupDialog } from './components/RouterGroupDialog';
|
||||
import { ProxyStatusDialog } from './components/ProxyStatusDialog';
|
||||
import { useQueryViewStore } from '../query-view/store/index.ts';
|
||||
import { toast } from 'sonner';
|
||||
import { DetailsDialog } from '../query-view/components/DetailsDialog.tsx';
|
||||
@@ -117,6 +118,7 @@ export const App = () => {
|
||||
setShowExportDialog: state.setShowExportDialog,
|
||||
setExportRoutes: state.setExportRoutes,
|
||||
setShowRouterGroup: state.setShowRouterGroup,
|
||||
setShowProxyStatus: state.setShowProxyStatus,
|
||||
})));
|
||||
const queryViewStore = useQueryViewStore(useShallow((state) => ({
|
||||
setShowDetailsDialog: state.setShowDetailsDialog,
|
||||
@@ -191,6 +193,7 @@ export const App = () => {
|
||||
<div className="max-w-5xl mx-auto p-6 h-full overflow-hidden flex flex-col relative">
|
||||
<ExportDialog />
|
||||
<RouterGroupDialog />
|
||||
<ProxyStatusDialog />
|
||||
{loading && <div className="text-center text-gray-500 mb-4">加载中...</div>}
|
||||
{store.showFilter && (
|
||||
<div className="mb-3 animate-in fade-in slide-in-from-top-2 duration-300">
|
||||
@@ -367,6 +370,16 @@ export const App = () => {
|
||||
})}
|
||||
</div>
|
||||
<div className='h-12 absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex items-center justify-end px-4 gap-2'>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
store.setShowProxyStatus(true);
|
||||
}}
|
||||
className="gap-2"
|
||||
title="Proxy 状态"
|
||||
>
|
||||
<Activity size={16} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
|
||||
@@ -8,8 +8,10 @@ import { use } from '@kevisual/context'
|
||||
import { persist } from 'zustand/middleware';
|
||||
import { app } from '@/agents'
|
||||
import { cloneDeep } from 'es-toolkit'
|
||||
import { nanoid } from 'nanoid';
|
||||
import { nanoid, customAlphabet } from 'nanoid';
|
||||
import { Result } from '@kevisual/query';
|
||||
const letterAndNumber = 'abcdefghijklmnopqrstuvwxy';
|
||||
const nanoid8 = customAlphabet(letterAndNumber, 8);
|
||||
const historyReplace = (url: string) => {
|
||||
if (window.history.replaceState) {
|
||||
window.history.replaceState(null, '', url);
|
||||
@@ -76,6 +78,9 @@ interface StudioState {
|
||||
setShowApiDocs: (show: boolean) => void;
|
||||
showRouterGroup: boolean;
|
||||
setShowRouterGroup: (show: boolean) => void;
|
||||
showProxyStatus: boolean;
|
||||
setShowProxyStatus: (show: boolean) => void;
|
||||
getQueryProxyStatus: () => Promise<RouterViewItem[]>;
|
||||
}
|
||||
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
export const filterRouteInfo = (viewData: RouterViewItem) => {
|
||||
@@ -349,6 +354,18 @@ export const useStudioStore = create<StudioState>()(
|
||||
setShowApiDocs: (show: boolean) => set({ showApiDocs: show }),
|
||||
showRouterGroup: false,
|
||||
setShowRouterGroup: (show: boolean) => set({ showRouterGroup: show }),
|
||||
showProxyStatus: false,
|
||||
setShowProxyStatus: (show: boolean) => set({ showProxyStatus: show }),
|
||||
getQueryProxyStatus: async () => {
|
||||
let queryProxy = get().queryProxy!;
|
||||
const status = queryProxy.routerViewItems.map(item => {
|
||||
return {
|
||||
id: item.id || nanoid8(),
|
||||
...item,
|
||||
}
|
||||
})
|
||||
return status;
|
||||
}
|
||||
}),
|
||||
{
|
||||
name: 'studio-storage',
|
||||
|
||||
@@ -206,8 +206,8 @@ export const ViewList = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full h-full max-w-4xl p-4 border border-gray-200 rounded-md shadow-sm">
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<div className="w-full h-full max-w-4xl py-4 border border-gray-200 rounded-md shadow-sm overflow-hidden">
|
||||
<div className="flex items-center px-4 space-x-2 mb-4">
|
||||
<Button onClick={() => store.setShowApiDocs(true)} title='文档' variant="outline" size="icon" className="h-8 w-8 cursor-pointer border-gray-300">
|
||||
<Book size={16} />
|
||||
</Button>
|
||||
@@ -228,7 +228,7 @@ export const ViewList = () => {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-col px-4 overscroll-auto scrollbar" style={{ height: 'calc(100% - 32px)' }}>
|
||||
{filteredViews.length === 0 ? (
|
||||
<div className="text-center py-4 text-gray-500">
|
||||
{searchTerm ? '未找到匹配的视图' : '暂无视图'}
|
||||
|
||||
Reference in New Issue
Block a user