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.
This commit is contained in:
196
src/pages/studio/components/RouterGroupDialog.tsx
Normal file
196
src/pages/studio/components/RouterGroupDialog.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user