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
| import React, { useState, useEffect } from 'react';
| import { CSideMenu } from '../../../src';
| import type { MenuItem } from '../../../src/framework/sideMenu/types';
|
| /** 模拟菜单数据 */
| const mockTree: MenuItem = {
| key: '1',
| label: '导航1',
| type: 'folder',
| children: [
| {
| key: '1-1',
| label: '子菜单1-1',
| type: 'folder',
| children: [
| { key: '1-1-1', label: '页面1-1-1', path: '/page1-1-1', pageName: 'Page111', type: 'file' },
| { key: '1-1-2', label: '页面1-1-2', path: '/page1-1-2', pageName: 'Page112', type: 'file' },
| ],
| },
| {
| key: '1-2',
| label: '页面1-2',
| path: '/page1-2',
| pageName: 'Page12',
| type: 'file',
| },
| ],
| };
|
| /** 已打开的页面列表 */
| const mockPanesOnShelf = [
| { key: '1-1-1' },
| { key: '1-2' },
| ];
|
| /**
| * CSideMenu 组件示例页
| */
| export function SideMenuPage() {
| const [collapsed, setCollapsed] = useState(false);
| const [curActivePaneKey, setCurActivePaneKey] = useState<string | number>('1-1-1');
| const [isMobile, setIsMobile] = useState(false);
|
| // 检测移动端 - 与 CSideMenu 组件的判断逻辑一致
| useEffect(() => {
| const checkMobile = () => {
| const width = window.innerWidth;
| const screenWidth = window.screen.width;
| setIsMobile(width <= 992 && screenWidth <= 1024);
| };
| checkMobile();
| window.addEventListener('resize', checkMobile);
| return () => window.removeEventListener('resize', checkMobile);
| }, []);
|
| const handleClickMenuItem = (item: MenuItem) => {
| console.log('点击菜单项:', item);
| setCurActivePaneKey(item.key);
| };
|
| const handleSetMenuCollapse = (value: boolean | void) => {
| if (typeof value === 'boolean') {
| setCollapsed(value);
| } else {
| setCollapsed((prev) => !prev);
| }
| };
|
| return (
| <div style={{ display: 'flex', height: '100vh' }}>
| <div style={{ flexShrink: 0 }}>
| <CSideMenu
| title="管理后台"
| tree={mockTree}
| collapsed={collapsed}
| curActivePaneKey={curActivePaneKey}
| panesOnShelf={mockPanesOnShelf}
| onClickMenuItem={handleClickMenuItem}
| onSetMenuCollapse={handleSetMenuCollapse}
| />
| </div>
|
| <div style={{ flex: 1, padding: '20px', position: 'relative' }}>
| {/* 移动端折叠/展开触发器 */}
| {isMobile && (
| <button
| onClick={() => handleSetMenuCollapse()}
| style={{
| position: 'absolute',
| top: '10px',
| left: '10px',
| zIndex: 100,
| padding: '8px 12px',
| background: '#1890ff',
| color: '#fff',
| border: 'none',
| borderRadius: '4px',
| cursor: 'pointer',
| }}
| >
| {collapsed ? '展开菜单' : '收起菜单'}
| </button>
| )}
|
| <h2>CSideMenu 组件示例</h2>
| <p>当前选中: {curActivePaneKey}</p>
| <p>折叠状态: {collapsed ? '收起' : '展开'}</p>
| </div>
| </div>
| );
| }
|
| export default SideMenuPage;
|
|
