Refactor Form and Page components to enhance layout and action handling

- Introduced dynamic form actions in the Form component based on layout type, improving usability in different contexts.
- Updated the Page component to conditionally render actions based on the type prop, ensuring appropriate action display for Forms.
- Enhanced type definitions in Page types to accommodate new formActions prop.
- Cleaned up the Actions component to simplify layout handling and improve maintainability.

These changes contribute to a more cohesive and responsive user interface, enhancing overall user experience.

packages/xgen/components/base/Form/index.tsx

@@ -19,6 +19,9 @@ import type { Component } from '@/types'
 import type { IPropsPureForm } from '@/components/base/PureForm/types'
 import type { IPropsBreadcrumb, IPropsAnchor } from './types'
 import { Bind, Dot } from '@/utils'
+import { useGlobal } from '@/context/app'
+import { IPropsActions } from '../PureForm/types'
+import Actions from '../PureForm/components/Actions'
 
 const Index = (props: Component.FormComponent) => {
 	const { parent, parentNamespace, model, id, form, onBack } = props
@@ -29,6 +32,9 @@ const Index = (props: Component.FormComponent) => {
 	const ref_container = useRef<HTMLDivElement>(null)
 	const [is_fullscreen, { toggleFullscreen }] = useFullscreen(ref_container)
 
+	const global = useGlobal()
+	const { layout } = global
+
 	const title = useMemo(() => {
 		if (x.setting?.config?.viewTitle && x.type === 'view') {
 			return Bind(x.setting.config.viewTitle, x.data) || x.setting.config.viewTitle
@@ -115,8 +121,29 @@ const Index = (props: Component.FormComponent) => {
 	}
 
 	if (parent === 'Page') {
+		// Form actions
+		let form_actions = undefined
+		if (layout == 'Chat' && props_form.parent != 'Modal') {
+			const props_actions: IPropsActions = {
+				namespace: props_form.namespace,
+				primary: props_form.primary,
+				type: props_form.type,
+				id: props_form.id,
+				actions: props_form.actions || [],
+				data: props_form.data,
+				disabledActionsAffix: true
+			}
+			form_actions = <Actions {...props_actions}></Actions>
+		}
+
 		return (
-			<Page className={clsx([styles._local, 'w_100'])} title={title} full={x.setting?.config?.full}>
+			<Page
+				className={clsx([styles._local, 'w_100'])}
+				title={title}
+				full={x.setting?.config?.full}
+				type={'Form'}
+				formActions={form_actions}
+			>
 				<div className='flex relative'>
 					<div className='w_100 flex flex_column'>
 						{!x.setting?.config?.hideBreadcrumb && (

packages/xgen/components/base/Page/index.tsx

@@ -13,9 +13,21 @@ import styles from './index.less'
 import type { CSSProperties } from 'react'
 import type { IProps, IPropsLeft } from './types'
 import DevControls from './components/DevControls'
+import { Else, If, Then } from 'react-if'
 
 const Index = (props: IProps) => {
-	const { children, title: page_title, className, style, actions = [], withRows, customAction, full } = props
+	const {
+		children,
+		title: page_title,
+		className,
+		style,
+		actions = [],
+		withRows,
+		customAction,
+		full,
+		type,
+		formActions
+	} = props
 	const global = useGlobal()
 	const { layout } = global
 	const title = page_title ?? usePageTitle(toJS(global.menu), toJS(global.menu_key_path), global.current_nav)
@@ -63,7 +75,16 @@ const Index = (props: IProps) => {
 					<Left {...props_left}></Left>
 					<div className='options_wrap flex align_center'>
 						{customAction}
-						<Actions actions={actions}></Actions>
+
+						<If condition={type != 'Form'}>
+							<Then>
+								<Actions actions={actions}></Actions>
+							</Then>
+							<Else>
+								<div className='w_100 flex justify_end align_center'>{formActions}</div>
+							</Else>
+						</If>
+
 						{layout == 'Admin' && (
 							<DevControls
 								enableXterm={enableXterm}

packages/xgen/components/base/Page/types.ts

@@ -13,6 +13,8 @@ export interface IProps {
 	full?: Common.Config['full']
 	enableXterm?: boolean
 	enableAIEdit?: boolean
+	formActions?: ReactNode
+	type?: 'Form' | 'Table' | 'Other'
 }
 
 export interface IPropsLeft {

packages/xgen/components/base/PureForm/components/Actions/index.tsx

@@ -1,7 +1,6 @@
 import { useMemoizedFn } from 'ahooks'
 import { Affix, Button } from 'antd'
 import clsx from 'clsx'
-import { debounce } from 'lodash-es'
 import { Fragment, useEffect, useMemo, useState } from 'react'
 import { When } from 'react-if'
 
@@ -13,10 +12,7 @@ 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('')
@@ -25,7 +21,7 @@ const Index = (props: IPropsActions) => {
 	const onAction = useAction()
 
 	const unLoading = useMemoizedFn(() => setLoading(''))
-	const offsetTop = layout && layout == 'Admin' ? 11 : 65
+	const offsetTop = 11
 
 	useEffect(() => {
 		window.$app.Event.on(`${namespace}/form/actions/done`, unLoading)

packages/xgen/components/base/PureForm/index.tsx

@@ -13,6 +13,7 @@ import styles from './index.less'
 
 import type { IPropsPureForm, IPropsActions, IPropsSections, IPropsReference } from './types'
 import Frame from '../Frame'
+import { useGlobal } from '@/context/app'
 
 const { useForm } = Form
 
@@ -43,6 +44,8 @@ const Index = (props: IPropsPureForm) => {
 	const { onLoadSync, reference, showSectionDivideLine } = form_props
 	const disabled = type === 'view'
 	const [visible_flat_content, setVisibleFlatContent] = useState(!!reference?.flatContent?.defaultOpen)
+	const global = useGlobal()
+	const { layout } = global
 
 	const toggleFlatContent = useMemoizedFn(() => setVisibleFlatContent(!visible_flat_content))
 
@@ -134,10 +137,15 @@ const Index = (props: IPropsPureForm) => {
 			])}
 			ref={form_container}
 		>
-			<div className='form_title_wrap w_100 border_box flex justify_between align_center relative'>
-				<span className='title no_wrap'>{title}</span>
-				<Actions {...props_actions}></Actions>
-			</div>
+			<If condition={layout != 'Chat' || parent == 'Modal'}>
+				<Then>
+					<div className='form_title_wrap w_100 border_box flex justify_between align_center relative'>
+						<span className='title no_wrap'>{title}</span>
+						<Actions {...props_actions}></Actions>
+					</div>
+				</Then>
+			</If>
+
 			<div className='form_content_container w_100 flex relative'>
 				<If condition={frame?.url && frame?.url != ''}>
 					<Then>

packages/xgen/layouts/wrappers/Chat/style.less

@@ -20,7 +20,7 @@
 				box-shadow: var(--shadow);
 				position: fixed;
 				right: 0;
-				z-index: 1001;
+				z-index: 901;
 				border-left: none;
 				transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
@@ -68,7 +68,7 @@
 		position: fixed;
 		top: 16px;
 		right: 16px;
-		z-index: 1000;
+		z-index: 900;
 	}
 }