Enhance layout and styling for Chat interface components

- Added new padding for the header_chat class to improve spacing in the Chat layout. - Updated header styles to conditionally apply layout-specific padding based on the current layout context. - Refactored Actions component to dynamically adjust the Affix offset based on layout type, enhancing usability. - Cleaned up LESS styles for better readability and maintainability. These changes contribute to a more cohesive and visually appealing Chat interface, improving overall user experience.
YaoApp · Dec 23, 2024 · b847317 · b847317
1 parent 3a1c915
commit b847317
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 6 deletions.
diff --git a/packages/xgen/components/base/Page/index.less b/packages/xgen/components/base/Page/index.less
@@ -8,6 +8,10 @@
 			.header {
 				padding: 0 16px;
 			}
+
+			.header_chat {
+				padding: 0 32px;
+			}
 		}
 	}
 
@@ -26,7 +30,7 @@
 			margin-bottom: 20px;
 			padding: 0 8px;
 			height: 60px;
-			// background-color: var(--color_bg);
+			background-color: var(--color_bg);
 
 			.left_wrap {
 				.icon_wrap {
@@ -73,5 +77,9 @@
 				}
 			}
 		}
+
+		.header_chat {
+			margin-bottom: 0;
+		}
 	}
 }
diff --git a/packages/xgen/components/base/Page/index.tsx b/packages/xgen/components/base/Page/index.tsx
@@ -17,6 +17,7 @@ import DevControls from './components/DevControls'
 const Index = (props: IProps) => {
 	const { children, title: page_title, className, style, actions = [], withRows, customAction, full } = props
 	const global = useGlobal()
+	const { layout } = global
 	const title = page_title ?? usePageTitle(toJS(global.menu), toJS(global.menu_key_path), global.current_nav)
 
 	const appEnableXterm =
@@ -38,7 +39,7 @@ const Index = (props: IProps) => {
 
 	const wrap_style = full
 		? ({
-				padding: '0 60px',
+				padding: layout && layout == 'Admin' ? '0 60px' : '0 32px',
 				maxWidth: '100%'
 		  } as CSSProperties)
 		: {}
@@ -53,12 +54,22 @@ const Index = (props: IProps) => {
 				className='page_content_wrap flex flex_column transition_normal'
 				style={wrap_style}
 			>
-				<header className='header w_100 border_box flex justify_between align_center'>
+				<header
+					className={clsx([
+						'header w_100 border_box flex justify_between align_center',
+						layout == 'Chat' ? 'header_chat' : ''
+					])}
+				>
 					<Left {...props_left}></Left>
 					<div className='options_wrap flex align_center'>
 						{customAction}
 						<Actions actions={actions}></Actions>
-						<DevControls enableXterm={enableXterm} enableAIEdit={enableAIEdit}></DevControls>
+						{layout == 'Admin' && (
+							<DevControls
+								enableXterm={enableXterm}
+								enableAIEdit={enableAIEdit}
+							></DevControls>
+						)}
 					</div>
 				</header>
 				<div className='page_wrap'>{children}</div>

diff --git a/packages/xgen/components/base/PureForm/components/Actions/index.less b/packages/xgen/components/base/PureForm/components/Actions/index.less
@@ -10,7 +10,7 @@
 			margin-left: 12px;
 			min-width: 80px;
 
-                  &.primary {
+			&.primary {
 				background-color: var(--color_main);
 				color: white;
 				border: none;

diff --git a/packages/xgen/components/base/PureForm/components/Actions/index.tsx b/packages/xgen/components/base/PureForm/components/Actions/index.tsx
@@ -13,7 +13,10 @@ import { Icon } from '@/widgets'
 import styles from './index.less'
 
 import type { IPropsActions } from '../../types'
+import { useGlobal } from '@/context/app'
 const Index = (props: IPropsActions) => {
+	const global = useGlobal()
+	const { layout } = global
 	const { namespace, primary, type, id, actions, data, disabledActionsAffix } = props
 	const [stick, setStick] = useState<boolean | undefined>(false)
 	const [loading, setLoading] = useState('')
@@ -22,6 +25,7 @@ const Index = (props: IPropsActions) => {
 	const onAction = useAction()
 
 	const unLoading = useMemoizedFn(() => setLoading(''))
+	const offsetTop = layout && layout == 'Admin' ? 11 : 65
 
 	useEffect(() => {
 		window.$app.Event.on(`${namespace}/form/actions/done`, unLoading)
@@ -44,7 +48,11 @@ const Index = (props: IPropsActions) => {
 	}, [actions, data, id, type])
 
 	return (
-		<Affix offsetTop={11} style={{ zIndex: disabledActionsAffix ? 0 : 101 }} onChange={(v) => setStick(v)}>
+		<Affix
+			offsetTop={offsetTop}
+			style={{ zIndex: disabledActionsAffix ? 0 : 101 }}
+			onChange={(v) => setStick(v)}
+		>
 			<div
 				className={clsx([
 					styles._local,