@yorha2b-lab/autodev 7.7.7 → 7.8.0

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

@@ -1,6 +1,11 @@
+import dayjs from 'dayjs'
 import { MyBaseForm } from './MyBaseForm'
+import { flattenFormItems } from '../utils/utils'
+import { useContext, createContext } from 'react'
 import { Row, Col, Form, Button, Collapse } from 'antd'
 
+const FormContext = createContext({})
+
 const LAYOUT_PROCESSORS = {
     section: ({ item, renderCore }) => (
         <Col span={item.span ?? 24} style={{ marginBottom: 16 }}>
@@ -24,9 +29,7 @@ const LAYOUT_PROCESSORS = {
     default: ({ item, renderCore }) => <Row gutter={[24, 0]}>{renderCore(item.childItems || [])}</Row>
 }
 
-// 定义“零部件增强协议”处理器,以后加任何新功能，只需要在这个对象里加一个 Key，不需要动主逻辑！
 const ACTION_PROCESSORS = {
-    // 处理尾操作按钮
     addonAfter: (item, { tableConfig, setModalTable, setSelectedTableRows }) => ({
         props: {
             addonAfter: (
@@ -43,12 +46,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 +64,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 +81,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 +89,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()
@@ -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 handleTableChange = (pagination, filters, sorter) => setSearch({ ...search, 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,23 @@
+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()
+        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,34 +4,6 @@ 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 }) => {
 
     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 })
         }
     }
 
-    /**
-     * @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()}`)
@@ -102,27 +58,20 @@ export const MySearchForm = ({ form, extra, search, options, loading, labelCol,
         }
     }
 
-    /**
-     * @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>