feat: update @kevisual/api to version 0.0.62 and add ProxyStatusDialog component for monitoring proxy status

package.json

@@ -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",

pnpm-lock.yaml

@@ -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
+        specifier: ^0.0.62
-        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))
+        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':
+  '@kevisual/api@0.0.62':
-    resolution: {integrity: sha512-NTFDx1ns/iGli2fUJLJZRWu8nf5VkXV+sOQUqGGAJvrvGATvXSuITu6mD4P/aDQakx4hzQUPr9wDTZoNk7+RqQ==}
+    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

src/pages/studio/components/ProxyStatusDialog.tsx

@@ -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>
+  );
+};

src/pages/studio/index.tsx

@@ -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={() => {

src/pages/studio/store.ts

@@ -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',

src/pages/view/list.tsx

@@ -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="w-full h-full max-w-4xl  py-4  border border-gray-200 rounded-md shadow-sm overflow-hidden">
-      <div className="flex items-center space-x-2 mb-4">
+      <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 ? '未找到匹配的视图' : '暂无视图'}