From 1c8d56aea079196ed48f406a635a6f1bbf29f23f Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 09 Apr 2026 16:57:24 +0800
Subject: [PATCH] feat(example): 添加侧边菜单示例页面
---
example/App.tsx | 78 +++++++++++++++++++++++++++++++++++++-
1 files changed, 75 insertions(+), 3 deletions(-)
diff --git a/example/App.tsx b/example/App.tsx
index 6b7b9cb..28ba3e3 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -1,8 +1,80 @@
+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={{ padding: '20px' }}>
- <h1>admin2-components</h1>
- <p>组件展示示例（待开发）</p>
+ <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>
);
}
--
Gitblit v1.9.1