Enhance Form and Page components with dynamic title binding and devel…

…oper controls; update styles and types for improved layout and functionality

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

@@ -18,6 +18,7 @@ import Model from './model'
 import type { Component } from '@/types'
 import type { IPropsPureForm } from '@/components/base/PureForm/types'
 import type { IPropsBreadcrumb, IPropsAnchor } from './types'
+import { Bind, Dot } from '@/utils'
 
 const Index = (props: Component.FormComponent) => {
 	const { parent, parentNamespace, model, id, form, onBack } = props
@@ -30,11 +31,11 @@ const Index = (props: Component.FormComponent) => {
 
 	const title = useMemo(() => {
 		if (x.setting?.config?.viewTitle && x.type === 'view') {
-			return x.setting.config.viewTitle
+			return Bind(x.setting.config.viewTitle, x.data) || x.setting.config.viewTitle
 		}
 
 		if (x.setting?.config?.editTitle && x.type === 'edit') {
-			return x.setting.config.editTitle
+			return Bind(x.setting.config.editTitle, x.data) || x.setting.config.editTitle
 		}
 
 		return page_title_prefix + x.setting.name

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

@@ -0,0 +1,33 @@
+import { Tooltip } from 'antd'
+import { Fragment } from 'react'
+import { Icon } from '@/widgets'
+
+import { useGlobal } from '@/context/app'
+import { getLocale } from '@umijs/max'
+import { IDevControls } from '../types'
+
+const Index = (props: IDevControls) => {
+	const is_cn = getLocale() === 'zh-CN'
+	const { enableXterm, enableAIEdit } = props
+	return (
+		<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'>
+						<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'>
+						<Icon className='icon_option' name='icon-message-square' size={18}></Icon>
+					</a>
+				</Tooltip>
+			)}
+		</Fragment>
+	)
+}
+
+export default window.$app.memo(Index)

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

@@ -1,6 +1,6 @@
 ._local {
 	width: 100%;
-      
+
 	&.with_rows {
 		width: calc(100% + 16px);
 
@@ -12,12 +12,12 @@
 	}
 
 	:global {
-            .page_content_wrap{
-                  margin: 0 auto;
-                  padding: 0 32px;
-                  padding-bottom: 80px;
-                  max-width: var(--max_width);
-            }
+		.page_content_wrap {
+			margin: 0 auto;
+			padding: 0 32px;
+			padding-bottom: 80px;
+			max-width: var(--max_width);
+		}
 
 		.header {
 			position: sticky;
@@ -60,11 +60,9 @@
 				margin-right: -15px;
 
 				.option_item {
-					margin-left: 3px;
 					width: 36px;
 					height: 36px;
 					border-radius: 50%;
-
 					&:hover {
 						background-color: var(--color_bg_nav);
 					}

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

@@ -12,16 +12,24 @@ import styles from './index.less'
 
 import type { CSSProperties } from 'react'
 import type { IProps, IPropsLeft } from './types'
+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 title = page_title ?? usePageTitle(toJS(global.menu), toJS(global.menu_key_path), global.current_nav)
 
+	const appEnableXterm =
+		global.app_info?.mode == 'development' && global.app_info?.optional?.devControls?.enableXterm
+	const appEnableAIEdit =
+		global.app_info?.mode == 'development' && global.app_info?.optional?.devControls?.enableAIEdit
+
+	const enableXterm = props.enableXterm ?? appEnableXterm
+	const enableAIEdit = props.enableAIEdit ?? appEnableAIEdit
+
 	useTitle(`${global.app_info.name} - ${global.menu[global.current_nav]?.name} - ${title}`)
 
 	const toggleVisibleMenu = useMemoizedFn(() => (global.visible_menu = !global.visible_menu))
-
 	const props_left: IPropsLeft = {
 		title,
 		visible_menu: global.visible_menu,
@@ -50,6 +58,7 @@ const Index = (props: IProps) => {
 					<div className='options_wrap flex align_center'>
 						{customAction}
 						<Actions actions={actions}></Actions>
+						<DevControls enableXterm={enableXterm} enableAIEdit={enableAIEdit}></DevControls>
 					</div>
 				</header>
 				<div className='page_wrap'>{children}</div>

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

@@ -11,6 +11,8 @@ export interface IProps {
 	withRows?: boolean
 	customAction?: ReactNode
 	full?: Common.Config['full']
+	enableXterm?: boolean
+	enableAIEdit?: boolean
 }
 
 export interface IPropsLeft {
@@ -22,3 +24,8 @@ export interface IPropsLeft {
 export interface IPropsActions {
 	actions: IProps['actions']
 }
+
+export interface IDevControls {
+	enableXterm?: boolean
+	enableAIEdit?: boolean
+}

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

@@ -82,20 +82,22 @@ const Index = (props: IProps) => {
 	const with_total_row = x.setting.table?.props?.withTotalRow && styles.withTotalRow
 
 	if (parent === 'Page') {
-		const props_custom_action: IPropsCustomAction = {
-			setting: toJS(x.setting),
-			namespace: x.namespace.value,
-			batch_columns: toJS(x.batch_columns),
-			batch: toJS(x.batch),
-			search,
-			setBatchActive
-		}
+		// TODO: Batch Actions
+		// Batch Actions will be re-implemented in the future
+		// const props_custom_action: IPropsCustomAction = {
+		// 	setting: toJS(x.setting),
+		// 	namespace: x.namespace.value,
+		// 	batch_columns: toJS(x.batch_columns),
+		// 	batch: toJS(x.batch),
+		// 	search,
+		// 	setBatchActive
+		// }
 
 		return (
 			<Page
 				title={x.setting.name}
 				className={clsx([styles._local, compact_style, with_total_row, 'w_100'])}
-				customAction={<CustomAction {...props_custom_action}></CustomAction>}
+				// customAction={<CustomAction {...props_custom_action}></CustomAction>}
 				full={x.setting?.config?.full}
 			>
 				<Filter {...props_filter}></Filter>

packages/xgen/context/app/model.ts

@@ -61,7 +61,6 @@ export default class GlobalModel {
 	}
 
 	async getUserMenu() {
-		console.log('getUserMenu')
 		const { res, err } = await this.service.getUserMenu<App.Menus>()
 		if (err) return Promise.reject()
 		this.setMenus(res)

packages/xgen/types/app.ts

@@ -121,13 +121,57 @@ export declare namespace App {
 			/** way of token storage */
 			storage: 'sessionStorage' | 'localStorage'
 		}
+
+		/** Application mode */
+		mode?: 'development' | 'production' | 'test'
+
 		optional?: {
 			/** remote api cache, default is true */
 			remoteCache?: boolean
 			/** neo config, for chatgpt service */
-			neo?: { api: string; studio?: boolean }
+			neo?: {
+				/** Neo stream API endpoint */
+				api: string
+
+				/**
+				 * Dock position
+				 * Options:
+				 * - `right-bottom`: Floats at the bottom-right corner.（default）
+				 * - `right-top`: Sticks to the top-right corner, clicking the button opens the chat window on the right side.
+				 * - `right`: Docked to the right side.
+				 * - `left`: Docked to the left side.
+				 */
+				dock?: 'right-bottom' | 'right-top' | 'right' | 'left'
+
+				studio?: boolean // Will be deprecated
+			}
+
 			/** menu config, default is { layout:"2-columns", hide:false, showName:false }  */
 			menu?: { layout: '1-column' | '2-columns'; hide?: boolean; showName?: boolean }
+
+			/**
+			 * Developer-specific controls.
+			 */
+			devControls?: {
+				/**
+				 * Determines whether to show xterm links.
+				 * Default: `false`. Takes effect only in development mode.
+				 */
+				enableXterm?: boolean
+
+				/**
+				 * Enables the "Edit with AI" button.
+				 * Default: `false`. Takes effect only in development mode.
+				 */
+				enableAIEdit?: boolean
+
+				/**
+				 * ?? Planning, not implemented yet
+				 * Enables the "View Source Code" button.
+				 * Default: `false`. Takes effect only in development mode.
+				 */
+				enableViewSourceCode?: boolean
+			}
 		}
 	}