1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
| import { lazy, type ReactNode } from 'react';
| import {
| ApartmentOutlined,
| AppstoreOutlined,
| AuditOutlined,
| ContactsOutlined,
| DashboardOutlined,
| ProfileOutlined,
| SafetyCertificateOutlined,
| SafetyOutlined,
| SettingOutlined,
| TeamOutlined,
| UnorderedListOutlined,
| } from '@ant-design/icons';
|
| /**
| * 页面组件统一按路由懒加载：首屏只加载布局与当前页面，
| * 其余页面在切换菜单时按需加载，避免所有页面打进同一个入口 chunk。
| */
| const Orders = lazy(() => import('@/pages/business/orders'));
| const CustomerList = lazy(() => import('@/pages/customers/list'));
| const Dashboard = lazy(() => import('@/pages/dashboard'));
| const AuditLogs = lazy(() => import('@/pages/platform/audit-logs'));
| const Departments = lazy(() => import('@/pages/system/departments'));
| const Roles = lazy(() => import('@/pages/system/roles'));
| const Users = lazy(() => import('@/pages/system/users'));
|
| export interface AppRouteItem {
| /** 完整路径，同时作为菜单 key */
| path: string;
| title: string;
| icon?: ReactNode;
| /** 页面组件。仅作为分组的路由可以不传 */
| element?: ReactNode;
| hideInMenu?: boolean;
| children?: AppRouteItem[];
| }
|
| /**
| * 路由 / 菜单唯一数据源。
| * 新增页面时在这里配置即可，侧边栏、面包屑会自动生效。
| */
| export const appRoutes: AppRouteItem[] = [
| {
| path: '/dashboard',
| title: '工作台',
| icon: <DashboardOutlined />,
| element: <Dashboard />,
| },
| {
| path: '/customers',
| title: '客户管理',
| icon: <ContactsOutlined />,
| children: [
| {
| path: '/customers/list',
| title: '客户列表',
| icon: <UnorderedListOutlined />,
| element: <CustomerList />,
| },
| ],
| },
| {
| path: '/system',
| title: '用户与权限',
| icon: <SafetyCertificateOutlined />,
| children: [
| {
| path: '/system/users',
| title: '用户管理',
| icon: <TeamOutlined />,
| element: <Users />,
| },
| {
| path: '/system/roles',
| title: '角色管理',
| icon: <SafetyOutlined />,
| element: <Roles />,
| },
| {
| path: '/system/departments',
| title: '部门管理',
| icon: <ApartmentOutlined />,
| element: <Departments />,
| },
| ],
| },
| {
| path: '/business',
| title: '业务管理',
| icon: <AppstoreOutlined />,
| children: [
| {
| path: '/business/orders',
| title: '订单管理',
| icon: <ProfileOutlined />,
| element: <Orders />,
| },
| ],
| },
| {
| path: '/platform',
| title: '平台管理',
| icon: <SettingOutlined />,
| children: [
| {
| path: '/platform/audit-logs',
| title: '审计日志',
| icon: <AuditOutlined />,
| element: <AuditLogs />,
| },
| ],
| },
| ];
|
| /** 从路由树中找到某个路径的完整面包屑链路。 */
| export const findBreadcrumb = (
| pathname: string,
| routes: AppRouteItem[] = appRoutes,
| parent: AppRouteItem[] = [],
| ): AppRouteItem[] | null => {
| for (const route of routes) {
| const trail = [...parent, route];
| if (route.path === pathname) return trail;
| if (route.children) {
| const result = findBreadcrumb(pathname, route.children, trail);
| if (result) return result;
| }
| }
| return null;
| };
|
| /** 找到分组下第一个可访问的页面路径。 */
| export const findFirstPath = (item: AppRouteItem): string | null => {
| if (item.children?.length) {
| for (const child of item.children) {
| if (child.hideInMenu) continue;
| const target = findFirstPath(child);
| if (target) return target;
| }
| return null;
| }
|
| return item.path;
| };
|
|
