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
| import { useState } from 'react';
| import type { ReactNode } from 'react';
| import { SideMenuPage } from './pages/side-menu/SideMenuPage';
|
| /** 组件配置 */
| const components: Array<{ name: string; path: string; component: ReactNode }> = [
| {
| name: 'CSideMenu',
| path: '/pages/side-menu/SideMenuPage.tsx',
| component: <SideMenuPage />,
| },
| ];
|
| /**
| * 组件展示主页面
| * 左侧：组件列表
| * 右侧：iframe 展示组件示例
| */
| function App() {
| const [activeIndex, setActiveIndex] = useState(0);
|
| return (
| <div style={{ display: 'table', width: '100%', height: '100vh' }}>
| {/* 左侧组件列表 */}
| <div
| style={{
| display: 'table-cell',
| width: '200px',
| borderRight: '1px solid #eee',
| padding: '16px',
| background: '#fafafa',
| verticalAlign: 'top',
| }}
| >
| <h3 style={{ marginTop: 0 }}>组件列表</h3>
| <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
| {components.map((comp, index) => (
| <li key={comp.name} style={{ marginBottom: '8px' }}>
| <button
| onClick={() => setActiveIndex(index)}
| style={{
| width: '100%',
| padding: '8px 12px',
| textAlign: 'left',
| background: activeIndex === index ? '#1890ff' : '#fff',
| color: activeIndex === index ? '#fff' : '#333',
| border: '1px solid #d9d9d9',
| borderRadius: '4px',
| cursor: 'pointer',
| fontSize: '14px',
| }}
| >
| {comp.name}
| </button>
| </li>
| ))}
| </ul>
| </div>
|
| {/* 右侧 iframe 容器 */}
| <div
| style={{
| display: 'table-cell',
| background: '#fff',
| verticalAlign: 'top',
| }}
| >
| <iframe
| src={`http://localhost:5173/#/preview/${components[activeIndex].path}`}
| style={{
| width: '100%',
| height: '100%',
| border: 'none',
| }}
| title={components[activeIndex].name}
| />
| </div>
| </div>
| );
| }
|
| export default App;
|
|
