feat: add RouterGroupDialog for route management and grouping

- Introduced RouterGroupDialog component to display and manage routes in groups.
- Updated studio store to include allRoutes and methods for fetching routes.
- Added functionality to toggle route groups and search by path or key.
- Enhanced App component to include RouterGroupDialog and related state management.
- Integrated new icons and improved UI for better user experience.

src/pages/studio/components/RouterGroupDialog.tsx

@@ -0,0 +1,196 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useStudioStore } from '../store';
+import { useShallow } from 'zustand/shallow';
+import { FolderClosed, FolderOpen, Search, List } from 'lucide-react';
+import { useState, useMemo, useEffect } from 'react';
+
+interface RouteItem {
+  id: string;
+  path?: string;
+  key?: string;
+  description?: string;
+  metadata?: Record<string, any>;
+}
+
+interface GroupedRoutes {
+  [group: string]: RouteItem[];
+}
+
+type TabType = 'grouped' | 'all';
+
+export const RouterGroupDialog = () => {
+  const { showRouterGroup, setShowRouterGroup, routes, allRoutes, searchRoutes, setShowFilter, getAllRoutes } = useStudioStore(
+    useShallow((state) => ({
+      showRouterGroup: state.showRouterGroup,
+      setShowRouterGroup: state.setShowRouterGroup,
+      routes: state.routes,
+      allRoutes: state.allRoutes,
+      searchRoutes: state.searchRoutes,
+      setShowFilter: state.setShowFilter,
+      getAllRoutes: state.getAllRoutes,
+    }))
+  );
+
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
+  const [activeTab, setActiveTab] = useState<TabType>('grouped');
+
+  useEffect(() => {
+    if (showRouterGroup && activeTab === 'all') {
+      getAllRoutes();
+    }
+  }, [showRouterGroup, activeTab, getAllRoutes]);
+
+  const displayRoutes = activeTab === 'grouped' ? routes : allRoutes;
+
+  // 按 path 分组
+  const groupedRoutes = useMemo(() => {
+    const groups: GroupedRoutes = {};
+    displayRoutes.forEach((route: RouteItem) => {
+      if (!route.path) return;
+      // 获取第一级路径作为分组
+      const firstSegment = route.path.split('/').filter(Boolean)[0] || 'root';
+      if (!groups[firstSegment]) {
+        groups[firstSegment] = [];
+      }
+      groups[firstSegment].push(route);
+    });
+    return groups;
+  }, [displayRoutes]);
+
+  const toggleGroup = (group: string) => {
+    const newExpanded = new Set(expandedGroups);
+    if (newExpanded.has(group)) {
+      newExpanded.delete(group);
+    } else {
+      newExpanded.add(group);
+    }
+    setExpandedGroups(newExpanded);
+  };
+
+  const handleSearchByPath = (e: React.MouseEvent, path: string) => {
+    e.stopPropagation();
+    const keyword = `WHERE path='${path}'`;
+    searchRoutes(keyword);
+    setShowFilter(true);
+    setShowRouterGroup(false);
+  };
+
+  const handleSearchByKey = (e: React.MouseEvent, path: string, key: string) => {
+    e.stopPropagation();
+    const keyword = `WHERE path='${path}' AND key='${key}'`;
+    searchRoutes(keyword);
+    setShowFilter(true);
+    setShowRouterGroup(false);
+  };
+
+  const sortedGroups = Object.keys(groupedRoutes).sort();
+
+  const renderRouteItem = (route: RouteItem) => (
+    <div
+      key={route.id}
+      className="px-4 py-2 hover:bg-gray-50 transition-colors flex items-center justify-between"
+    >
+      <div className="flex items-center gap-2 flex-1 min-w-0">
+        <span className="font-mono text-sm text-gray-800 truncate">{route.path}</span>
+        {route.key && (
+          <>
+            <span className="text-xs text-gray-500">/</span>
+            <span className="text-sm text-gray-600 truncate">{route.key}</span>
+            <button
+              className="p-1 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200 transition-colors shrink-0"
+              title="搜索此路径和key"
+              onClick={(e) => handleSearchByKey(e, route.path!, route.key!)}
+            >
+              <Search size={14} />
+            </button>
+          </>
+        )}
+      </div>
+      {route.description && (
+        <span className="text-xs text-gray-500 truncate max-w-xs ml-2 shrink-0">
+          {route.description}
+        </span>
+      )}
+    </div>
+  );
+
+  const renderGroup = (group: string) => {
+    const isExpanded = expandedGroups.has(group);
+    const groupRoutes = groupedRoutes[group];
+    // 使用分组的第一个路由的完整 path 作为搜索关键词
+    const searchPath = groupRoutes[0]?.path || `/${group}`;
+
+    return (
+      <div key={group} className="border border-gray-200 rounded-md overflow-hidden">
+        <div
+          className="flex items-center gap-2 px-3 py-2 bg-gray-50 cursor-pointer hover:bg-gray-100 transition-colors"
+          onClick={() => toggleGroup(group)}
+        >
+          {isExpanded ? (
+            <FolderOpen size={18} className="text-gray-600" />
+          ) : (
+            <FolderClosed size={18} className="text-gray-600" />
+          )}
+          <span className="font-medium text-gray-900">/{group}</span>
+          <span className="text-xs text-gray-500">({groupRoutes.length} 个路由)</span>
+          <button
+            className="ml-auto p-1 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200 transition-colors"
+            title="搜索此路径"
+            onClick={(e) => handleSearchByPath(e, searchPath)}
+          >
+            <Search size={14} />
+          </button>
+        </div>
+        {isExpanded && (
+          <div className="divide-y divide-gray-100">
+            {groupRoutes.map(renderRouteItem)}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Dialog open={showRouterGroup} onOpenChange={setShowRouterGroup}>
+      <DialogContent className="max-w-3xl! max-h-[80vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <DialogTitle>路由分组</DialogTitle>
+        </DialogHeader>
+        {/* Tabs */}
+        <div className="flex border-b border-gray-200">
+          <button
+            className={`flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors ${
+              activeTab === 'grouped'
+                ? 'text-gray-900 border-b-2 border-gray-900'
+                : 'text-gray-500 hover:text-gray-700'
+            }`}
+            onClick={() => setActiveTab('grouped')}
+          >
+            <FolderClosed size={16} />
+            当前分组
+          </button>
+          <button
+            className={`flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors ${
+              activeTab === 'all'
+                ? 'text-gray-900 border-b-2 border-gray-900'
+                : 'text-gray-500 hover:text-gray-700'
+            }`}
+            onClick={() => setActiveTab('all')}
+          >
+            <List size={16} />
+            全部路由 ({allRoutes.length})
+          </button>
+        </div>
+        <div className="flex-1 overflow-auto space-y-2 p-2">
+          {sortedGroups.length === 0 ? (
+            <div className="text-center text-gray-500 py-8">
+              {activeTab === 'all' && allRoutes.length === 0 ? '加载中...' : '暂无路由数据'}
+            </div>
+          ) : (
+            sortedGroups.map(renderGroup)
+          )}
+        </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 } from 'lucide-react';
+import { MonitorPlay, Play, PanelLeft, PanelLeftClose, PanelRight, PanelRightClose, PanelTop, PanelTopClose, Filter, FilterX, Search, X, MoreHorizontal, Info, Code, RotateCcw, Book, FolderClosed } from 'lucide-react';
 import { Panel, Group } from 'react-resizable-panels'
 import { ViewList } from '../view/list.tsx';
 import { useShallow } from 'zustand/shallow';
@@ -9,6 +9,7 @@ import { Input } from '@/components/ui/input.tsx';
 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 { useQueryViewStore } from '../query-view/store/index.ts';
 import { toast } from 'sonner';
 import { DetailsDialog } from '../query-view/components/DetailsDialog.tsx';
@@ -115,6 +116,7 @@ export const App = () => {
     setShowFilter: state.setShowFilter,
     setShowExportDialog: state.setShowExportDialog,
     setExportRoutes: state.setExportRoutes,
+    setShowRouterGroup: state.setShowRouterGroup,
   })));
   const queryViewStore = useQueryViewStore(useShallow((state) => ({
     setShowDetailsDialog: state.setShowDetailsDialog,
@@ -188,6 +190,7 @@ export const App = () => {
   return (
     <div className="max-w-5xl mx-auto p-6 h-full overflow-hidden flex flex-col relative">
       <ExportDialog />
+      <RouterGroupDialog />
       {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">
@@ -363,7 +366,17 @@ 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'>
+      <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.setShowRouterGroup(true);
+          }}
+          className="gap-2"
+          title="路由分组"
+        >
+          <FolderClosed size={16} />
+        </Button>
         <Button
           variant="ghost"
           onClick={() => {
@@ -377,4 +390,4 @@ export const App = () => {
       </div>
     </div>
   );
-}
+}

src/pages/studio/store.ts

@@ -42,6 +42,8 @@ interface StudioState {
   setLoading: (loading: boolean) => void;
   routes: Array<RouteItem>;
   searchRoutes: (keyword: string) => Promise<void>;
+  allRoutes: Array<RouteItem>;
+  getAllRoutes: () => Promise<void>;
   run: (route: RouteItem, type?: 'normal' | 'custom') => Promise<void>;
   queryProxy?: QueryProxy;
   init: (force?: boolean) => Promise<{ queryProxy: QueryProxy }>;
@@ -72,6 +74,8 @@ interface StudioState {
   setExportRoutes: (routes?: RouteItem[]) => void;
   showApiDocs: boolean;
   setShowApiDocs: (show: boolean) => void;
+  showRouterGroup: boolean;
+  setShowRouterGroup: (show: boolean) => void;
 }
 const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 export const filterRouteInfo = (viewData: RouterViewItem) => {
@@ -108,6 +112,12 @@ export const useStudioStore = create<StudioState>()(
         const routes: any[] = await queryProxy.listRoutes(() => true, { query: keyword });
         set({ routes, searchKeyword: keyword });
       },
+      allRoutes: [],
+      getAllRoutes: async () => {
+        let queryProxy = get().queryProxy!;
+        const routes: any[] = await queryProxy.listRoutes(() => true);
+        set({ allRoutes: routes });
+      },
       searchKeyword: '',
       setSearchKeyword: (keyword: string) => set({ searchKeyword: keyword }),
       currentView: undefined,
@@ -337,6 +347,8 @@ export const useStudioStore = create<StudioState>()(
       setExportRoutes: (routes?: RouteItem[]) => set({ exportRoutes: routes }),
       showApiDocs: false,
       setShowApiDocs: (show: boolean) => set({ showApiDocs: show }),
+      showRouterGroup: false,
+      setShowRouterGroup: (show: boolean) => set({ showRouterGroup: show }),
     }),
     {
       name: 'studio-storage',