From 9f6212d61eba53eb4da504876f5a01b93a80fc1c Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 09 Apr 2026 18:19:50 +0800
Subject: [PATCH] docs(skill): 将 playwright-patterns.md 翻译为中文
---
example/pages/side-menu/SideMenuPage.tsx | 113 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 113 insertions(+), 0 deletions(-)
diff --git a/example/pages/side-menu/SideMenuPage.tsx b/example/pages/side-menu/SideMenuPage.tsx
new file mode 100644
index 0000000..0da4975
--- /dev/null
+++ b/example/pages/side-menu/SideMenuPage.tsx
@@ -0,0 +1,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;
--
Gitblit v1.9.1