From 405ca6db1169374b8b1e45995662a2608c97a76c Mon Sep 17 00:00:00 2001
From: Max <shadow.iqka@qq.com>
Date: Wed, 11 Dec 2024 17:21:39 +0800
Subject: [PATCH] Implement sidebar functionality in Container component; add
 event listeners for sidebar visibility toggle, update styles for sidebar
 layout, and enhance DevControls with sidebar interaction options

---
 .../base/Page/components/DevControls.tsx      | 10 +++++--
 .../layouts/components/Container/index.less   | 28 +++++++++++++++++++
 .../layouts/components/Container/index.tsx    | 25 +++++++++++++++--
 packages/xgen/layouts/types.ts                |  2 ++
 packages/xgen/types/action.ts                 |  1 +
 5 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/packages/xgen/components/base/Page/components/DevControls.tsx b/packages/xgen/components/base/Page/components/DevControls.tsx
index 2e2cb32d..fe0fb538 100644
--- a/packages/xgen/components/base/Page/components/DevControls.tsx
+++ b/packages/xgen/components/base/Page/components/DevControls.tsx
@@ -13,7 +13,10 @@ 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>
@@ -21,7 +24,10 @@ const Index = (props: IDevControls) => {
 
 			{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
index afad1e16..dac857b3 100644
--- 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
index 008692f0..0ef32115 100644
--- 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,7 +9,24 @@ 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'
@@ -16,12 +34,15 @@ const Index = (props: IPropsContainer & { children: React.ReactNode }) => {
 				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
index e895701a..096623f3 100644
--- 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
index 3e62819e..db76d69b 100644
--- 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 {