Implement sidebar functionality in Container component; add event lis…

…teners for sidebar visibility toggle, update styles for sidebar layout, and enhance DevControls with sidebar interaction options
YaoApp · Dec 11, 2024 · 405ca6d · 405ca6d
1 parent 4bfc1e5
commit 405ca6d
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 4 deletions.
diff --git a/packages/xgen/components/base/Page/components/DevControls.tsx b/packages/xgen/components/base/Page/components/DevControls.tsx
@@ -13,15 +13,21 @@ const Index = (props: IDevControls) => {
 		<Fragment>
 			{enableXterm && (
 				<Tooltip title={is_cn ? '打开终端' : 'Open Terminal'} placement='bottom' key={0}>
-					<a className='option_item cursor_point flex justify_center align_center transition_normal clickable'>
+					<a
+						className='option_item cursor_point flex justify_center align_center transition_normal clickable'
+						onClick={() => window.$app.Event.emit('app/setSidebarVisible', false)}
+					>
 						<Icon className='icon_option' name='icon-terminal' size={18}></Icon>
 					</a>
 				</Tooltip>
 			)}
 
 			{enableAIEdit && (
 				<Tooltip title={is_cn ? '使用AI编辑' : 'Edit with AI'} placement='bottom' key={2}>
-					<a className='option_item cursor_point flex justify_center align_center transition_normal clickable'>
+					<a
+						className='option_item cursor_point flex justify_center align_center transition_normal clickable'
+						onClick={() => window.$app.Event.emit('app/setSidebarVisible', true)}
+					>
 						<Icon className='icon_option' name='icon-message-square' size={18}></Icon>
 					</a>
 				</Tooltip>

diff --git a/packages/xgen/layouts/components/Container/index.less b/packages/xgen/layouts/components/Container/index.less
@@ -15,6 +15,12 @@
 	&.iframe {
 		padding-bottom: 0;
 	}
+
+	transition: padding-right 0.3s ease;
+
+	&.with_sidebar {
+		padding-right: 380px;
+	}
 }
 
 ._local_showname {
@@ -34,4 +40,26 @@
 	&.iframe {
 		padding-bottom: 0;
 	}
+
+	transition: padding-right 0.3s ease;
+
+	&.with_sidebar {
+		padding-right: 380px;
+	}
+}
+
+.right_sidebar {
+	position: fixed;
+	top: 0;
+	right: 0;
+	width: 380px;
+	height: 100vh;
+	background: var(--color-bg);
+	transition: transform 0.3s ease;
+	border-left: 1px solid var(--color_border);
+	z-index: 1000;
+
+	&.hidden {
+		transform: translateX(100%);
+	}
 }
diff --git a/packages/xgen/layouts/components/Container/index.tsx b/packages/xgen/layouts/components/Container/index.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import { useState, useEffect } from 'react'
 
 import { ErrorCatcher } from '@/widgets'
 import { history } from '@umijs/max'
@@ -8,20 +9,40 @@ import styles from './index.less'
 import type { IPropsContainer } from '../../types'
 
 const Index = (props: IPropsContainer & { children: React.ReactNode }) => {
-	const { children, menu, visible_menu, show_name, hide_nav } = props
+	const { children, menu, visible_menu, show_name, hide_nav, sidebar_visible = false, sidebar_content } = props
+	const [sidebarVisible, setSidebarVisible] = useState(sidebar_visible)
+
+	useEffect(() => {
+		const onSetSidebarVisible = (visible?: boolean) => {
+			setSidebarVisible(visible !== undefined ? visible : !sidebarVisible)
+		}
+		const onToggleSidebarVisible = () => {
+			setSidebarVisible(!sidebarVisible)
+		}
+		window.$app.Event.on('app/setSidebarVisible', onSetSidebarVisible)
+		window.$app.Event.on('app/toggleSidebarVisible', onToggleSidebarVisible)
+		return () => {
+			window.$app.Event.off('app/setSidebarVisible', onSetSidebarVisible)
+			window.$app.Event.off('app/toggleSidebarVisible', onToggleSidebarVisible)
+		}
+	}, [sidebarVisible])
+
 	return (
 		<div
 			id='container'
 			className={clsx([
 				show_name ? styles._local_showname : styles._local,
 				!hide_nav && (!menu?.length || !visible_menu) && styles.no_menu,
 				hide_nav && styles.no_nav,
-				history.location.pathname.indexOf('/iframe') !== -1 ? styles.iframe : ''
+				history.location.pathname.indexOf('/iframe') !== -1 ? styles.iframe : '',
+				sidebarVisible && styles.with_sidebar
 			])}
 		>
 			<div className='content_wrap w_100 border_box' style={{ paddingBottom: 90 }}>
 				<ErrorCatcher>{children}</ErrorCatcher>
 			</div>
+
+			<div className={clsx(styles.right_sidebar, !sidebarVisible && styles.hidden)}>{sidebar_content}</div>
 		</div>
 	)
 }

diff --git a/packages/xgen/layouts/types.ts b/packages/xgen/layouts/types.ts
@@ -89,6 +89,8 @@ export interface IPropsContainer {
 	menu_layout: '1-column' | '2-columns'
 	show_name?: boolean
 	hide_nav?: boolean
+	sidebar_visible?: boolean
+	sidebar_content?: React.ReactNode
 }
 
 export interface IPropsSettingModalContent {

diff --git a/packages/xgen/types/action.ts b/packages/xgen/types/action.ts
@@ -55,6 +55,7 @@ export declare namespace Action {
 	}
 	type EventUnLoadingAI = {
 		key: `$namespace/$item.bind/unloading`
+		value?: any
 	}
 
 	interface ActionMap {