@yorha2b-lab/autodev 7.7.8 → 7.8.1

package/src/workshop/react/standardParts/MyBaseForm.js

@@ -3,13 +3,6 @@ import { formNode } from './index'
 import { Form, Button } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
 
-/**
- * @function getValueFromEvent
- * @description [数据拦截协议] 专门针对上传类组件的物理补丁。
- * 修正 Antd 默认将 Event 对象存入 Form 的行为，强制提取物理文件列表 (fileList)。
- * @param {Object|Array} e - 原始触发事件或文件数组
- * @returns {Array} 归一化后的文件列表
- */
 const getValueFromEvent = e => {
     if (Array.isArray(e)) {
         return e
@@ -17,33 +10,20 @@ const getValueFromEvent = e => {
     return e?.fileList
 }
 
-/**
- * @function renderFormContent
- * @description [中枢渲染逻辑] 负责装配 Form.Item 的内核。
- * 具备“路径递归”与“单位挂件”两大核心功能。
- *
- * @param {Object} params - 渲染参数
- * @param {Object} params.item - 零部件配置对象
- * @param {Array} [params.prefixName=[]] - 物理路径前缀，用于支持 Form.List 的深层嵌套
- * @returns {React.ReactNode} 装配完成的输入单元
- */
-const renderFormContent = ({ item, prefixName = [] }) => {
+const renderFormContent = ({ item, form, prefixName = [] }) => {
 
-    // 💡 物理占位逻辑：若无 name 属性，则直接输出原始 value 文本
     if (!item.name) {
-        return item.value
+        return <span dangerouslySetInnerHTML={{ __html: item.value }} />
     }
 
-    // 💡 路径自动对齐：支持字符串或数组格式的 name，自动合并前缀实现“逻辑寻址”
     const namePath = Array.isArray(prefixName) ? [...prefixName, ...(Array.isArray(item.name) ? item.name : [item.name])] : item.name
 
     const inputNode = (
         <Form.Item noStyle name={namePath} rules={item.rules} dependencies={item.dependencies} initialValue={item.value} {...(['upload', 'ossUpload'].includes(item.type) ? { getValueFromEvent, valuePropName: 'fileList' } : { valuePropName: item.valuePropName })}>
-            {formNode({ item })}
+            {formNode({ item, form })}
         </Form.Item>
     )
 
-    // 💡 视觉单位挂件逻辑：实现类似“金额(元)”的自动横向排版
     if (item.unit) {
         return (
             <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
@@ -56,43 +36,21 @@ const renderFormContent = ({ item, prefixName = [] }) => {
     return inputNode
 }
 
-/**
- * @component MyBaseForm
- * @description [地堡通用零部件单元] 表单系统的物理外壳。
- * 具备“单兵作战（Item）”与“集群协同（List）”两种模式切换能力。
- *
- * @param {Object} props - 组件属性
- * @param {Object} props.item - 构筑协议对象
- * @param {Object} props.form - Antd Form 实例，用于实现复杂的跨组件联动
- * @param {boolean} [props.item.isList] - 模式切换：是否开启动态增减列表模式
- * @param {Function} [props.item.render] - 逻辑劫持：支持自定义渲染函数，可完全改写渲染行为
- *
- * @example
- * // 模式 A：标准表单项
- * <MyBaseForm item={{ label: '姓名', name: 'name' }} />
- *
- * // 模式 B：动态列表项
- * <MyBaseForm item={{ isList: true, name: 'users', render: (field) => <Input {...field} /> }} />
- */
 export const MyBaseForm = ({ item, form }) => {
     return (
         item.isList ?
-            // 💡 集群模式：处理动态数组类型的表单构筑
             <Form.List name={item.name} initialValue={item.value}>
                 {(fields, { add, remove }) => (
                     <div style={{ display: 'flex', flexDirection: 'column' }}>
                         {fields.map((field, index) => (
                             <Fragment key={field.key}>
-                                {/* 物理映射：将 field 控制器回传给指挥官自定义的 render 逻辑 */}
                                 {item.render(field, index, { add, remove }, form, renderFormContent)}
                             </Fragment>
                         ))}
-                        {/* 零信号兜底：若列表为空，显示添加按钮 */}
                         {fields.length === 0 && <Button type='dashed' onClick={() => add()} block icon={<PlusOutlined />}>添加{item.label || '项'}</Button>}
                     </div>
                 )}
             </Form.List> :
-            // 💡 单兵模式：标准 Form.Item 构筑
             <Form.Item
                 label={item.label}
                 tooltip={item.tooltip}
@@ -102,12 +60,7 @@ export const MyBaseForm = ({ item, form }) => {
                 required={item.required ?? item.rules?.some(v => v.required)}
                 style={{ marginBottom: !item.name ? 0 : undefined, ...item.style }}
             >
-                {/*
-                  逻辑优先级：
-                  1. 优先使用 item.render 执行语义劫持
-                  2. 否则使用 renderFormContent 进行标准构筑
-                */}
-                {item.render ? (typeof item.render === 'function' ? item.render(item, form) : item.render) : renderFormContent({ item })}
+                {item.render ? (typeof item.render === 'function' ? item.render(item, form) : item.render) : renderFormContent({ item, form })}
             </Form.Item>
     )
 }

package/src/workshop/react/standardParts/MyDescription.js

@@ -1,16 +1,16 @@
 import { Form, Descriptions } from 'antd'
 import { MyBaseForm } from './MyBaseForm'
 
-export const MyDescription = ({ title, column, descriptions, form: externalForm, onValuesChange }) => {
+export const MyDescription = ({ title, column, layout = 'vertical', labelStyle, contentStyle, descriptions, form: externalForm, onValuesChange }) => {
 
     const [internalForm] = Form.useForm()
     const form = externalForm || internalForm
 
     return (
         <Form form={form} preserve={false} component={false} onValuesChange={onValuesChange}>
-            <Descriptions title={title} column={column}>
+            <Descriptions title={title} column={column} layout={layout} labelStyle={labelStyle} contentStyle={contentStyle}>
                 {descriptions.map(item => (
-                    <Descriptions.Item key={item.label} label={item.name ? undefined : item.label}>
+                    <Descriptions.Item key={item.label} span={item.span ?? 1} label={item.name ? undefined : item.label}>
                         {item.name ? <MyBaseForm item={item} form={form} /> : item.value}
                     </Descriptions.Item>))}
             </Descriptions>

package/src/workshop/react/standardParts/MyForm.js

@@ -1,5 +1,10 @@
+import dayjs from 'dayjs'
 import { MyBaseForm } from './MyBaseForm'
+import { flattenFormItems } from '../utils/utils'
 import { Row, Col, Form, Button, Collapse } from 'antd'
+import { useEffect, useContext, createContext } from 'react'
+
+const FormContext = createContext({})
 
 const LAYOUT_PROCESSORS = {
     section: ({ item, renderCore }) => (
@@ -24,15 +29,17 @@ const LAYOUT_PROCESSORS = {
     default: ({ item, renderCore }) => <Row gutter={[24, 0]}>{renderCore(item.childItems || [])}</Row>
 }
 
-// 定义“零部件增强协议”处理器,以后加任何新功能，只需要在这个对象里加一个 Key，不需要动主逻辑！
 const ACTION_PROCESSORS = {
-    // 处理尾操作按钮
-    addonAfter: (item, { tableConfig, setModalTable, setSelectedTableRows }) => ({
+    addonAfter: (item, { customClick, tableConfig = {}, setModalTable, setSelectedTableRows }) => ({
         props: {
             addonAfter: (
                 <Button onClick={() => {
-                    setSelectedTableRows([])
-                    setModalTable({ visible: true, title: `选择${item.label}`, ...tableConfig[item.name] })
+                    if (typeof customClick === 'function') {
+                        customClick()
+                        return
+                    }
+                    setSelectedTableRows?.([])
+                    setModalTable?.({ visible: true, title: `选择${item.label}`, ...tableConfig[item.name] })
                 }}>
                     {item.addonAfter}
                 </Button>
@@ -43,12 +50,12 @@ const ACTION_PROCESSORS = {
     // prefix: (item) => ({ props: { prefix: <Icon type={item.prefix} /> } }),
 }
 
-const FormRenderer = ({ form, options, formItems, renderAction, tableProps = {} }) => {
+const FormRenderer = ({ form, options, formItems }) => {
+
+    const { tableProps, renderAction } = useContext(FormContext)
 
-    // 定义核心渲染逻辑，供递归使用
-    const renderCore = items => <FormRenderer form={form} options={options} formItems={items} renderAction={renderAction} tableProps={tableProps} />
+    const renderCore = items => <FormRenderer form={form} options={options} formItems={items} />
 
-    // 定义单项动作注入逻辑
     const getRenderItemProps = item => {
         if (!item.renderAction) return {}
         const props = {}
@@ -61,14 +68,12 @@ const FormRenderer = ({ form, options, formItems, renderAction, tableProps = {}
     }
 
     return formItems.map((item, index) => {
-        // 💡 保持纯粹不可变：通过解构浅拷贝，绝不污染原始 formItems 对象！
         const processedItem = {
             ...item,
             ...(item.renderAction && renderAction?.[item.name] ? { render: renderAction[item.name] } : {}),
             ...(['select', 'radio', 'checkbox'].includes(item.type) && !item.options ? { options: options?.[item.name] || [] } : {})
         }
 
-        // 情况 A：发现容器型零件 (含有 layoutType)
         if (processedItem.layoutType && LAYOUT_PROCESSORS[processedItem.layoutType]) {
             const Layout = LAYOUT_PROCESSORS[processedItem.layoutType] ?? LAYOUT_PROCESSORS.default
             return (
@@ -80,7 +85,6 @@ const FormRenderer = ({ form, options, formItems, renderAction, tableProps = {}
             )
         }
 
-        // 情况 B：标准作战零件
         return (
             <Col span={processedItem.span ?? 6} key={processedItem.name || index}>
                 <MyBaseForm item={{ ...processedItem, ...getRenderItemProps(processedItem) }} form={form} />
@@ -89,16 +93,42 @@ const FormRenderer = ({ form, options, formItems, renderAction, tableProps = {}
     })
 }
 
-export const MyForm = ({ formItems = [], externalForm, labelCol, wrapperCol, tableProps, onValuesChange, layout = 'horizontal', options = {}, renderAction = {} }) => {
+export const MyForm = ({ record, formItems = [], externalForm, labelCol, wrapperCol, tableProps, onValuesChange, layout = 'horizontal', options = {}, renderAction = {} }) => {
 
     const [internalForm] = Form.useForm()
     const form = externalForm || internalForm
 
+    useEffect(() => {
+        if (record && Object.keys(record).length > 0) {
+            const itemMap = new Map(flattenFormItems(formItems).map(i => [i.name, i]))
+            const initialData = {}
+            Object.entries(record).forEach(([key, value]) => {
+                const config = itemMap.get(key)
+                if (config?.type?.includes('date') && value) {
+                    if (Array.isArray(value)) {
+                        initialData[key] = value.map(v => dayjs(v))
+                    } else if (typeof value === 'string' && value.includes(',')) {
+                        initialData[key] = value.split(',').map(v => dayjs(v))
+                    } else {
+                        initialData[key] = dayjs(value)
+                    }
+                } else if ((config?.type === 'select' && config.mode) || config?.type === 'checkbox') {
+                    initialData[key] = Array.isArray(value) ? value : value?.split(config.separator ?? ',')
+                } else {
+                    initialData[key] = value
+                }
+            })
+            form.setFieldsValue(initialData)
+        }
+    }, [form, record, formItems])
+
     return (
-        <Form form={form} layout={layout} preserve={false} labelCol={labelCol} wrapperCol={wrapperCol} onValuesChange={onValuesChange} scrollToFirstError={{ behavior: 'smooth', block: 'center' }}>
-            <Row gutter={[24, 0]}>
-                <FormRenderer form={form} options={options} formItems={formItems} renderAction={renderAction} tableProps={tableProps} />
-            </Row>
-        </Form>
+        <FormContext.Provider value={{ tableProps, renderAction }}>
+            <Form form={form} layout={layout} preserve={false} labelCol={labelCol} wrapperCol={wrapperCol} onValuesChange={onValuesChange} scrollToFirstError={{ behavior: 'smooth', block: 'center' }}>
+                <Row gutter={[24, 0]}>
+                    <FormRenderer form={form} options={options} formItems={formItems} />
+                </Row>
+            </Form>
+        </FormContext.Provider>
     )
 }

package/src/workshop/react/standardParts/MyModalForm.js

@@ -1,44 +1,9 @@
-import dayjs from 'dayjs'
 import { MyForm } from './MyForm'
 import { Form, Modal } from 'antd'
+import { useMemo, useState } from 'react'
 import { MyModalTable } from './MyModalTable'
-import { useRef, useMemo, useState, useEffect } from 'react'
+import { flattenFormItems } from '../utils/utils'
 
-const flattenFormItems = items => {
-    if (!Array.isArray(items)) return []
-    return items.flatMap(item => {
-        if (item.childItems) {
-            return flattenFormItems(item.childItems)
-        }
-        return item
-    })
-}
-
-/**
- * @component MyModalForm
- * @description [地堡核心构筑舱] 通用弹窗表单组件。
- * 集成了“语义回显自愈”、“自动时间戳转换”及“原子级提交锁定”三大核心协议。
- *
- * @param {Object} props - 构筑参数
- * @param {string} [props.title] - 舱体视觉标题
- * @param {Object} [props.labelCol] - 标签布局校准
- * @param {Object} [props.wrapperCol] - 控件布局校准
- * @param {string|number} [props.width] - 舱体物理宽度
- * @param {boolean} props.visible - 激活信号：控制弹窗的物理显示状态
- * @param {Array} props.modalItems - 零部件清单：定义表单内部的输入单元
- * @param {Object} [props.record] - 初始物资包：用于编辑模式的数据回显
- * @param {Function} props.submit - 数据发射协议：提交表单后的核心回调函数
- * @param {Function} props.setModal - 指令中心：用于更新弹窗状态（开启/关闭）
- * @param {Function} [props.onValuesChange] - 联动传感：捕获表单内部的信号波动
- *
- * @example
- * <MyModalForm
- *   title='构筑新模块'
- *   visible={visible}
- *   submit={async (vals) => await save(vals)}
- *   modalItems={[{ label: '截止日期', name: 'deadline', type: 'date' }]}
- * />
- */
 export const MyModalForm = ({ extra, width, title, layout, okText, options, footer, submit, record, visible, setModal, labelCol, modalItems, wrapperCol, cancelText, tableConfig, okButtonProps, renderAction, onValuesChange, handleModalTableOk }) => {
 
     const rowKey = tableConfig?.rowKey || 'id'
@@ -48,47 +13,6 @@ export const MyModalForm = ({ extra, width, title, layout, okText, options, foot
     const [modalTable, setModalTable] = useState({})
     const [selectedTableRows, setSelectedTableRows] = useState([])
 
-    const prevVisibleRef = useRef(false)
-
-    /**
-     * @description [数据回显协议] 当构筑舱开启时，自动对初始物资进行“语义格式化”。
-     * 将后端传输的字符串/数字时间戳重新转化为地堡可读的 `dayjs` 对象。
-     */
-    useEffect(() => {
-        if (visible && !prevVisibleRef.current) {
-            if (record && Object.keys(record).length > 0) {
-                const itemMap = new Map(flattenFormItems(modalItems).map(i => [i.name, i]))
-                const initialData = {}
-                Object.entries(record).forEach(([key, value]) => {
-                    const config = itemMap.get(key)
-                    // 语义识别：若零部件类型为日期且数值存在，执行物理转化
-                    if (config?.type?.includes('date') && value) {
-                        if (Array.isArray(value)) {
-                            // 处理范围日期
-                            initialData[key] = value.map(v => dayjs(v))
-                        } else if (typeof value === 'string' && value.includes(',')) {
-                            // 处理逗号分隔的字符串日期
-                            initialData[key] = value.split(',').map(v => dayjs(v))
-                        } else {
-                            // 处理单日期
-                            initialData[key] = dayjs(value)
-                        }
-                    } else {
-                        initialData[key] = value
-                    }
-                })
-                form.setFieldsValue(initialData)
-            }
-        }
-        prevVisibleRef.current = visible
-    }, [visible, record, form, modalItems])
-
-    /**
-     * @async
-     * @function handleOk
-     * @description [物理加压提交] 执行表单校验，并自动启动“时间戳转换协议”。
-     * 确保发射至后端的数据包符合标准 Unix 时间戳（毫秒）规范。
-     */
     const handleOk = async (extraParams = {}) => {
         try {
             const values = await form.validateFields()
@@ -97,10 +21,8 @@ export const MyModalForm = ({ extra, width, title, layout, okText, options, foot
                 const val = formattedValues[item.name]
                 if (item.type?.includes('date') && val) {
                     if (Array.isArray(val)) {
-                        // 物理压实：将范围日期转化为逗号分隔的时间戳字符串
                         formattedValues[item.name] = val.map(v => v.valueOf()).join(',')
                     } else {
-                        // 物理转化：将 dayjs 对象还原为原始数值（毫秒）
                         formattedValues[item.name] = val.valueOf()
                     }
                 }
@@ -118,10 +40,6 @@ export const MyModalForm = ({ extra, width, title, layout, okText, options, foot
 
     const modalTableOk = () => handleModalTableOk?.({ form, selectedTableRows, setModalTable })
 
-    /**
-     * @function handleCancel
-     * @description 执行“撤退协议”：关闭构筑舱并清除当前逻辑残留。
-     */
     const handleCancel = () => {
         setModal({ visible: false })
         form.resetFields()
@@ -130,7 +48,7 @@ export const MyModalForm = ({ extra, width, title, layout, okText, options, foot
     const tableRowSelection = useMemo(() => ({
         selectedRowKeys: selectedTableRows.map(row => row[rowKey]),
         onChange: (selectedRowKeys, selectedRows) => setSelectedTableRows(selectedRows),
-    }), [rowKey, modalTable, selectedTableRows])
+    }), [rowKey, selectedTableRows])
 
     const ctx = { form, record, pending, handleOk, handleCancel, setModal }
 
@@ -153,6 +71,7 @@ export const MyModalForm = ({ extra, width, title, layout, okText, options, foot
             {modalTable.visible && <MyModalTable rowKey={rowKey} {...modalTable} rowSelection={tableRowSelection} onOk={modalTableOk} setModal={setModalTable} />}
             {extra?.header?.(ctx)}
             <MyForm
+                record={record}
                 layout={layout}
                 options={options}
                 externalForm={form}

package/src/workshop/react/standardParts/MyModalTable.js

@@ -4,58 +4,17 @@ import { MySearchForm } from './MySearchForm'
 import { Form, Modal, Space, Button } from 'antd'
 import { useTableQuery } from '../hooks/useTableQuery'
 
-/**
- * @component MyModalTable
- * @description [地堡支援型作战单元] 弹窗数据选择平台。
- * 专门用于执行“关联选择”、“子数据审计”或“二级逻辑骇入”任务。
- * 具备独立的数据获取链路、可选的搜索过滤系统以及与主构筑舱（setModalForm）的跨维协同能力。
- *
- * @param {Object} props - 支援参数
- * @param {string} [props.title] - 舱体视觉标题
- * @param {Function} props.api - 弹窗内独立的数据源指令
- * @param {string|number} [props.width] - 舱体物理宽度
- * @param {Object} [props.rowSelection] - 战术勾选：用于多选物资
- * @param {boolean} props.visible - 激活信号：控制支援单元的显示状态
- * @param {Function} props.setModal - 单元注销中心：用于关闭当前弹窗
- * @param {Array} props.columns - 零部件初始清单 (别名: modalColumns)
- * @param {Function} [props.onOk] - 战果物理确认：按下确认按钮后的异步回调协议
- * @param {Object} [props.initialParams={}] - 初始战备物资：定义的初始搜索参数
- * @param {React.ReactNode} [props.footer] - 底座指令区：支持完全自定义操作按钮
- * @param {Array} [props.formItems] - 局部搜索零部件：用于在弹窗内执行精准情报过滤
- * @param {Function} props.formatResponse - 数据清洗协议：对 API 吐出的原始物资进行格式化
- * @param {boolean|Object} [props.modalPagination=true] - 局部后勤协议：弹窗内是否开启分页
- * @param {Array} [props.functionButtons] - 功能挂件组：位于表格上方的操作按钮，可直接操控表格状态
- * @param {Function} props.operate - 动态火力配置：生成操作列的函数，接收 { refresh, setModalForm } 句柄
- * @param {Function} [props.setModalForm] - [重要] 跨维调用：由主页面注入的表单控制句柄，实现“弹窗开弹窗”的非耦合交互
- *
- * @example
- * <MyModalTable
- *   title='关联用户片段'
- *   api={async params=>await fetchUsers(params)}
- *   setModalForm={setModal} // 💡 借用主页面的表单构筑舱
- *   operate={({ refresh, setModalForm }) => ({ label: '详情', onClick: (rec) => setModalForm(...) })}
- * />
- */
 export const MyModalTable = ({ api, onOk, title, width, footer, visible, operate, setModal, formItems, setModalForm, rowSelection, formatResponse, functionButtons, columns: modalColumns, rowKey = 'id', scroll = { y: 400 }, initialParams = {}, modalPagination = true, isLocalPaging = false }) => {
 
     const [form] = Form.useForm()
     const [pending, setPending] = useState(false)
 
-    /**
-     * @description [独立信号链路]
-     * 在弹窗内部启动专属的 useTableQuery，实现了与主页面逻辑的“物理隔绝”。
-     */
     const { total, loading, columns, dataSource, search, refresh, setLoading, setSearch, setDataSource } = useTableQuery({ api, cols: modalColumns, initialParams, formatResponse, isLocalPaging })
 
-    const handleSearch = values => setSearch({ ...search, ...values, pageNo: 1 })
+    const handleSearch = values => setSearch(prev => ({ ...prev, ...values, pageNo: 1 }))
 
-    const handleTableChange = (pagination, filters, sorter) => setSearch({ ...search, pageNo: pagination.current, pageSize: pagination.pageSize, orderBy: sorter.column ? sorter.field : undefined })
+    const handleTableChange = (pagination, filters, sorter) => setSearch(prev => ({ ...prev, pageNo: pagination.current, pageSize: pagination.pageSize, orderBy: sorter.column ? sorter.field : undefined }))
 
-    /**
-     * @async
-     * @function handleOk
-     * @description [确认指令闭环] 执行确认操作并启动原子级锁定（Pending），防止重复指令干扰。
-     */
     const handleOk = async () => {
         if (onOk) {
             try {
@@ -69,25 +28,13 @@ export const MyModalTable = ({ api, onOk, title, width, footer, visible, operate
         }
     }
 
-    /**
-     * @constant finalColumns
-     * @description [火力全开] 将 Hook 生成的动态列与指挥官注入的 operate 操作列进行物理合并。
-     */
     const finalColumns = useMemo(() => {
         return operate ? columns.concat(operate({ refresh, setModalForm })) : columns
     }, [columns, operate])
 
     return (
         <Modal centered destroyOnClose title={title} width={width} open={visible} onOk={handleOk} footer={footer?.({ setModal })} onCancel={() => setModal({ visible: false })} confirmLoading={pending} bodyStyle={{ paddingBottom: 0 }}>
-            {/*
-                💡 [地堡战术细节]
-                syncUrlParams={false}：确保弹窗内的搜索行为不会干扰全局 URL 信号。
-            */}
             {formItems?.length > 0 && <MySearchForm form={form} search={search} formItems={formItems} setSearch={handleSearch} syncUrlParams={false} />}
-            {/*
-                💡 [高阶赋能逻辑]
-                functionButtons 能够获得对当前表格状态 (refresh, setLoading...) 的完全控制权。
-            */}
             {functionButtons?.length > 0 && <Space style={{ marginBottom: 12 }}>{functionButtons.map(item => <Button key={item.name} type={item.type} loading={loading} disabled={item.disabled} onClick={() => item.onClick({ refresh, setLoading, setSearch, setDataSource })}>{item.name}</Button>)}</Space>}
             <MyTable
                 total={total}

package/src/workshop/react/standardParts/MyPopoverTable.js

@@ -0,0 +1,24 @@
+import { Popover } from 'antd'
+import { useState } from 'react'
+import { MyTable } from './MyTable'
+
+export const MyPopoverTable = ({ api, columns, children, formatter }) => {
+
+    const [loading, setLoading] = useState(false)
+    const [dataSource, setDataSource] = useState([])
+
+    const fetchData = async () => {
+        if (loading) return
+        setLoading(true)
+        const response = await api()
+        setLoading(false)
+        const datas = formatter(response)
+        setDataSource(datas)
+    }
+
+    return (
+        <Popover trigger='click' content={<MyTable columns={columns} loading={loading} dataSource={dataSource} />}>
+            <span onClick={fetchData}>{children}</span>
+        </Popover>
+    )
+}

package/src/workshop/react/standardParts/MySearchForm.js

@@ -4,35 +4,7 @@ import { useMemo, useState, useEffect } from 'react'
 import { Row, Col, Form, Button, Space } from 'antd'
 import { SearchOutlined, RedoOutlined } from '@ant-design/icons'
 
-/**
- * @component MySearchForm
- * @description [地堡战术搜索中心] 高级搜索表单组件。
- * 集成了“URL 状态同步（持久化）”、“日期范围物理拆解”以及“动态伸缩布局”三大核心能力。
- *
- * @param {Object} props - 指挥官指令包
- * @param {Object} props.form - Antd Form 实例，表单的主控舵盘
- * @param {Function} [props.customReset] - 逻辑劫持：自定义重置协议
- * @param {Function} [props.customFinish] - 逻辑劫持：自定义提交协议
- * @param {Array} props.formItems - 零部件清单：定义所有的搜索输入单元
- * @param {number} [props.showLimit=7] - 初始可见能级：默认展示的零部件数量
- * @param {number} [props.defaultPageSize=10] - 默认吞吐量：重置时的初始每页条数
- * @param {Function} [props.onValuesChange] - 联动传感：当表单值变动时的即时反馈
- * @param {Object} props.initialValues - 初始信号：从 URL 或缓存中解析出的初始参数
- * @param {React.ReactNode} [props.extra] - 额外挂件：在按钮区域注入自定义战术单元
- * @param {Function} props.setSearch - 状态分发器：用于更新全局搜索参数并触发重新构筑
- * @param {Object} props.search - 当前的全局搜索状态（包含 pageNo, pageSize 及各过滤项）
- * @param {boolean} props.loading - 战场负载状态：请求中时锁定按钮，防止由于重复指令导致的逻辑冲突
- * @param {boolean} [props.syncUrlParams=true] - 物理同步开关：是否将搜索状态实时镜像至 URL 链接中
- *
- * @example
- * <MySearchForm
- *   form={form}
- *   search={search}
- *   setSearch={setSearch}
- *   formItems={[{ label: '状态', name: 'status', type: 'select', options: [...] }]}
- * />
- */
-export const MySearchForm = ({ form, extra, search, options, loading, labelCol, setSearch, formItems, showLimit = 7, initialValues = {}, initialParams = {}, customReset, customFinish, renderAction, onValuesChange, syncUrlParams = true, defaultPageSize = 10 }) => {
+export const MySearchForm = ({ form, extra, options, loading, labelCol, setSearch, formItems, showLimit = 7, initialValues = {}, initialParams = {}, customReset, customFinish, renderAction, onValuesChange, syncUrlParams = true, defaultPageSize = 10 }) => {
 
     const [limit, setLimit] = useState(showLimit)
 
@@ -42,55 +14,39 @@ export const MySearchForm = ({ form, extra, search, options, loading, labelCol,
         ...(['select'].includes(item.type) ? { options: item.options ?? options?.[item.name] ?? [] } : {})
     })), [options, formItems, renderAction])
 
-    /**
-     * @function handleReset
-     * @description 执行“归零协议”：清除当前所有搜索信号，并可选择性擦除 URL 中的物理记录。
-     */
     const handleReset = () => {
         form.resetFields()
         if (syncUrlParams) {
-            // 💡 修正逻辑：只有当 formItems 里【没有任何一项】包含这个 key 时，才视为默认参数
             const defaultQueryEntries = Object.entries(initialValues).filter(([key, _]) => !formItems.some(item => item.name.includes(key)))
             const defaultQuery = Object.fromEntries(defaultQueryEntries)
             const params = new URLSearchParams(defaultQuery)
-            // 💡 执行物理重写：将 URL 恢复为仅含默认参数的状态
             const newUrl = params.toString() ? `${window.location.pathname}?${params.toString()}` : window.location.pathname
             window.history.replaceState(null, '', newUrl)
         }
         if (customReset) {
             customReset()
         } else {
-            // 逻辑重置：强制返回第一页，并恢复默认吞吐量
-            setSearch({ pageNo: 1, pageSize: search.pageSize ?? defaultPageSize, ...initialParams })
+            setSearch(prev => ({ pageNo: 1, pageSize: prev.pageSize ?? defaultPageSize, ...initialParams }))
         }
     }
 
-    /**
-     * @function handleFinish
-     * @description 执行“数据发射协议”：对原始表单数据进行脱水和转换，尤其处理复杂的日期范围协议。
-     * @param {Object} values - 原始表单数据包
-     */
     const handleFinish = values => {
         const formattedValues = { ...values }
         Object.keys(formattedValues).forEach(key => {
             const val = formattedValues[key]
             const isDateType = formItems.find(item => item.name === key)?.type?.includes('date')
-            // 💡 [黑科技 1] 日期自动转换与拆解
             if (isDateType && val) {
                 if (Array.isArray(val) && val.length > 0) {
-                    // 物理拆分：当 name 为 'start,end' 格式时，自动拆解为两个独立的后端参数
                     const [startKey, endKey] = key.split(',')
-                    formattedValues[startKey] = val[0].startOf('day').valueOf()// 修正为当日 00:00:00
-                    formattedValues[endKey] = val[1].endOf('day').valueOf()// 修正为当日 23:59:59
+                    formattedValues[startKey] = val[0].startOf('day').valueOf()
+                    formattedValues[endKey] = val[1].endOf('day').valueOf()
                     delete formattedValues[key]
                 } else {
-                    // 单日转换：转化为毫秒级数字
                     formattedValues[key] = val.valueOf()
                 }
             }
         })
         if (syncUrlParams) {
-            // 💡 [黑科技 2] 镜像至 URL
             const currentQuery = Object.fromEntries(new URLSearchParams(window.location.search).entries())
             const params = new URLSearchParams(Object.fromEntries(Object.entries({ ...currentQuery, ...formattedValues }).filter(([key, value]) => !['', null, undefined].includes(value))))
             window.history.replaceState(null, '', `${window.location.pathname}?${params.toString()}`)
@@ -98,31 +54,24 @@ export const MySearchForm = ({ form, extra, search, options, loading, labelCol,
         if (customFinish) {
             customFinish(formattedValues)
         } else {
-            setSearch({ ...search, ...formattedValues, pageNo: 1 })
+            setSearch(prev => ({ ...prev, ...formattedValues, pageNo: 1 }))
         }
     }
 
-    /**
-     * @description [信号自愈] 初始化逻辑：
-     * 将来自 URL 的字符串信号重新转化为地堡可读的 `dayjs` 对象。
-     */
     useEffect(() => {
         if (Object.values(initialValues).length > 0 && formItems.length > 0) {
             const newValues = {}
             formItems.forEach(item => {
-                // 处理单字段回显
                 if (initialValues[item.name] !== undefined) {
                     const value = initialValues[item.name]
                     newValues[item.name] = item.type?.includes('date') ? dayjs(Number(value)) : value
                 }
-                // 处理双字段（日期范围）回显：执行物理重组
                 if (item.name?.includes(',') && item.type?.includes('date')) {
                     const [startKey, endKey] = item.name.split(',')
                     if (initialValues[startKey] && initialValues[endKey]) {
                         newValues[item.name] = [dayjs(Number(initialValues[startKey])), dayjs(Number(initialValues[endKey]))]
                     }
                 }
-                // 处理多选框回显
                 if (item.hasOwnProperty('mode') && !!initialValues[item.name]) {
                     newValues[item.name] = initialValues[item.name]?.split(',')
                 }
@@ -136,22 +85,15 @@ export const MySearchForm = ({ form, extra, search, options, loading, labelCol,
             <Row gutter={24}>
                 {searchItems.slice(0, limit)?.map((item, ind) => (
                     <Col key={ind} span={item.span ?? 6}>
-                        {/* 物理装配：利用底层 MyBaseForm 单元进行渲染 */}
                         <MyBaseForm item={item} form={form} />
                     </Col>
                 ))}
-                {/*
-                  战术控制区：
-                  1. 'flex=auto' 确保按钮组始终靠右对齐。
-                  2. 'showLimit' 控制页面纵向熵值，防止过多搜索项挤占战场视野。
-                */}
                 <Col flex='auto' style={{ textAlign: 'right' }}>
                     <Form.Item>
                         <Space>
                             <Button type='primary' icon={<SearchOutlined />} loading={loading} htmlType='submit'>查询</Button>
                             <Button icon={<RedoOutlined />} onClick={handleReset} loading={loading} htmlType='reset'>重置</Button>
                             {extra}
-                            {/* 动态伸缩协议：根据当前零部件数量决定是否显示展开/收起按钮 */}
                             {formItems.length > showLimit && (<a onClick={() => setLimit(formItems.length > limit ? formItems.length : showLimit)}>{formItems.length > limit ? '展开' : '收起'}</a>)}
                         </Space>
                     </Form.Item>