@yorha2b-lab/autodev 7.7.1 → 7.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorha2b-lab/autodev",
-  "version": "7.7.1",
+  "version": "7.7.3",
   "description": "基于 AI 视觉与语义协议的前端 (React+Antd) 代码构筑与旧系统重构引擎",
   "bin": {
     "bunker": "bin/bunker.js"

package/src/workshop/react/briefings/raider.js

@@ -48,6 +48,7 @@ module.exports = `
     - daterange: name 必须设为 '字段英文名start,字段英文名end'。
 - 增强属性:
     - 文字单位: 若项末尾有单位（如 元/kg），必须存入 unit 属性。
+    - 说明文字: 若表单项下方有灰色说明文字如(必填，不能超过多少字)，必须存入help属性。
     - 尾操作: 若项末尾有操作按钮（如 选择、编辑 等操作），必须存入 {renderAction:true,addonAfter:'尾操作名'} 属性。
     - 必填校验: 若图片中 label 前有红色星号，必须加入 rules:[{required:true,message:'xxx不能为空'}]。
 

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

@@ -0,0 +1,21 @@
+import { SortableContainer } from 'react-sortable-hoc'
+
+const SortableBody = SortableContainer(props => <tbody {...props} />)
+
+const arrayMoveImmutable = (array, oldIndex, newIndex) => {
+    const newArray = [...array]
+    const [item] = newArray.splice(oldIndex, 1)
+    newArray.splice(newIndex, 0, item)
+    return newArray
+}
+
+export const DraggableContainer = ({ props, setDataSource }) => {
+
+    const onSortEnd = ({ oldIndex, newIndex }) => {
+        if (oldIndex !== newIndex) {
+            setDataSource(prev => arrayMoveImmutable(prev.slice(), oldIndex, newIndex))
+        }
+    }
+
+    return <SortableBody useDragHandle disableAutoscroll helperClass='row-dragging' onSortEnd={onSortEnd} {...props} />
+}

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

@@ -1,3 +1,4 @@
+import { SortableElement } from 'react-sortable-hoc'
 import { Form, Input, InputNumber, Select, Checkbox } from 'antd'
 import React, { useRef, useState, useEffect, useContext } from 'react'
 
@@ -7,6 +8,8 @@ import React, { useRef, useState, useEffect, useContext } from 'react'
  */
 const EditableContext = React.createContext(null)
 
+const SortableItem = SortableElement((props) => <tr {...props} />)
+
 /**
  * @component EditableRow
  * @description [地堡战术行容器] 每一行都是一个独立的逻辑闭环。
@@ -33,7 +36,7 @@ export const EditableRow = ({ index, record, ...props }) => {
     return (
         <Form form={form} component={false} onValuesChange={(changedValue, allValue) => props?.onValuesChange?.({ changedValue, allValue, form })}>
             <EditableContext.Provider value={form}>
-                <tr {...props} />
+                <SortableItem index={index} {...props} />
             </EditableContext.Provider>
         </Form>
     )

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

@@ -95,10 +95,10 @@ export const MyBaseForm = ({ item, form }) => {
             // 💡 单兵模式：标准 Form.Item 构筑
             <Form.Item
                 label={item.label}
-                extra={item.extra}
                 tooltip={item.tooltip}
                 labelCol={item.labelCol}
                 wrapperCol={item.wrapperCol}
+                extra={item.extra || item.help}
                 required={item.required ?? item.rules?.some(v => v.required)}
                 style={{ marginBottom: !item.name ? 0 : undefined, ...item.style }}
             >

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

@@ -0,0 +1,97 @@
+import { MyBaseForm } from './MyBaseForm'
+import { Row, Col, Form, Button, Collapse } from 'antd'
+
+const LAYOUT_PROCESSORS = {
+    section: ({ item, renderCore }) => (
+        <Col span={item.span ?? 24} style={{ marginBottom: 16 }}>
+            <div style={{ fontWeight: 'bold', marginBottom: 12, borderLeft: '4px solid #1890ff', paddingLeft: 8 }}>{item.title}</div>
+            <Row gutter={[24, 0]}>
+                {renderCore(item.childItems || [])}
+            </Row>
+        </Col>
+    ),
+    collapse: ({ item, renderCore }) => (
+        <Col span={item.span ?? 24} style={{ marginBottom: 16 }}>
+            <Collapse defaultActiveKey={['1']}>
+                <Collapse.Panel key='1' header={<span style={{ fontWeight: 'bold' }}>{item.title}</span>}>
+                    <Row gutter={[24, 0]}>
+                        {renderCore(item.childItems || [])}
+                    </Row>
+                </Collapse.Panel>
+            </Collapse>
+        </Col>
+    ),
+    default: ({ item, renderCore }) => <Row gutter={[24, 0]}>{renderCore(item.childItems || [])}</Row>
+}
+
+// 定义“零部件增强协议”处理器,以后加任何新功能，只需要在这个对象里加一个 Key，不需要动主逻辑！
+const ACTION_PROCESSORS = {
+    // 处理尾操作按钮
+    addonAfter: (item, { tableConfig, setModalTable, setSelectedTableRows }) => ({
+        props: {
+            addonAfter: (
+                <Button onClick={() => {
+                    setSelectedTableRows([])
+                    setModalTable({ visible: true, title: `选择${item.label}`, ...tableConfig[item.name] })
+                }}>
+                    {item.addonAfter}
+                </Button>
+            )
+        }
+    }),
+    // 以后想加个“前缀图标”？直接加在这里：
+    // prefix: (item) => ({ props: { prefix: <Icon type={item.prefix} /> } }),
+}
+
+const FormRenderer = ({ form, formItems, tableProps = {} }) => {
+
+    // 定义核心渲染逻辑，供递归使用
+    const renderCore = items => <FormRenderer form={form} formItems={items} tableProps={tableProps} />
+
+    // 定义单项动作注入逻辑
+    const getRenderItemProps = item => {
+        if (!item.renderAction) return {}
+        const props = {}
+        Object.keys(ACTION_PROCESSORS).forEach(key => {
+            if (item[key]) {
+                Object.assign(props, ACTION_PROCESSORS[key](item, tableProps))
+            }
+        })
+        return props
+    }
+
+    return formItems.map((item, index) => {
+        // 情况 A：发现容器型零件 (含有 layoutType)
+        if (item.layoutType && LAYOUT_PROCESSORS[item.layoutType]) {
+            const Layout = LAYOUT_PROCESSORS[item.layoutType] ?? LAYOUT_PROCESSORS.default
+            return (
+                <Layout
+                    item={item}
+                    key={item.name || index}
+                    renderCore={renderCore} // 注入渲染能力，让 Layout 自己去 Map
+                />
+            )
+        }
+
+        // 情况 B：标准作战零件
+        return (
+            <Col span={item.span ?? 6} key={item.name || index}>
+                <MyBaseForm item={{ ...item, ...getRenderItemProps(item) }} form={form} />
+            </Col>
+        )
+    })
+}
+
+export const MyForm = ({ formItems, externalForm, labelCol, wrapperCol, tableProps, layout = 'horizontal', onValuesChange }) => {
+
+    const [internalForm] = Form.useForm()
+    const form = externalForm || internalForm
+
+    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} formItems={formItems} tableProps={tableProps} />
+            </Row>
+        </Form>
+    )
+}

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

@@ -0,0 +1,31 @@
+import { Modal } from 'antd'
+import { useState } from 'react'
+
+export const MyModal = ({ width, title, okText, footer, record, visible, children, handleOk, setModal, cancelText, okButtonProps }) => {
+
+    const [pending, setPending] = useState(false)
+
+    const handleCancel = () => setModal({ visible: false })
+
+    const ctx = { record, pending, handleOk, handleCancel, setModal, setPending }
+
+    return (
+        <Modal
+            centered
+            title={title}
+            width={width}
+            open={visible}
+            destroyOnClose
+            okText={okText}
+            onOk={handleOk}
+            cancelText={cancelText}
+            onCancel={handleCancel}
+            confirmLoading={pending}
+            okButtonProps={okButtonProps}
+            footer={typeof footer === 'function' ? footer(ctx) : footer}
+            bodyStyle={{ paddingBottom: 0, maxHeight: '80vh', overflowY: 'auto' }}
+        >
+            {children}
+        </Modal>
+    )
+}

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

@@ -1,97 +1,8 @@
 import dayjs from 'dayjs'
-import { MyBaseForm } from './MyBaseForm'
+import { MyForm } from './MyForm'
+import { Form, Modal } from 'antd'
 import { MyModalTable } from './MyModalTable'
 import { useRef, useMemo, useState, useEffect } from 'react'
-import { Row, Col, Form, Modal, Button, Collapse } from 'antd'
-
-const LAYOUT_PROCESSORS = {
-    section: ({ item, renderCore }) => (
-        <Col span={item.span ?? 24} style={{ marginBottom: 16 }}>
-            <div style={{ fontWeight: 'bold', marginBottom: 12, borderLeft: '4px solid #1890ff', paddingLeft: 8 }}>{item.title}</div>
-            <Row gutter={[24, 0]}>
-                {renderCore(item.childItems || [])}
-            </Row>
-        </Col>
-    ),
-    collapse: ({ item, renderCore }) => (
-        <Col span={item.span ?? 24} style={{ marginBottom: 16 }}>
-            <Collapse defaultActiveKey={['1']}>
-                <Collapse.Panel key='1' header={<span style={{ fontWeight: 'bold' }}>{item.title}</span>}>
-                    <Row gutter={[24, 0]}>
-                        {renderCore(item.childItems || [])}
-                    </Row>
-                </Collapse.Panel>
-            </Collapse>
-        </Col>
-    ),
-    default: ({ item, renderCore }) => <Row gutter={[24, 0]}>{renderCore(item.childItems || [])}</Row>
-}
-
-// 定义“零部件增强协议”处理器,以后加任何新功能，只需要在这个对象里加一个 Key，不需要动主逻辑！
-const ACTION_PROCESSORS = {
-    // 处理尾操作按钮
-    addonAfter: (item, { tableConfig, setModalTable, setSelectedTableRows }) => ({
-        props: {
-            addonAfter: (
-                <Button onClick={() => {
-                    setSelectedTableRows([])
-                    setModalTable({ visible: true, title: `选择${item.label}`, ...tableConfig[item.name] })
-                }}>
-                    {item.addonAfter}
-                </Button>
-            )
-        }
-    }),
-    // 以后想加个“前缀图标”？直接加在这里：
-    // prefix: (item) => ({ props: { prefix: <Icon type={item.prefix} /> } }),
-}
-
-const FormRenderer = ({ form, formItems, tableConfig, setModalTable, setSelectedTableRows }) => {
-
-    // 定义核心渲染逻辑，供递归使用
-    const renderCore = items => (
-        <FormRenderer
-            form={form}
-            formItems={items}
-            tableConfig={tableConfig}
-            setModalTable={setModalTable}
-            setSelectedTableRows={setSelectedTableRows}
-        />
-    )
-
-    // 定义单项动作注入逻辑
-    const getRenderItemProps = item => {
-        if (!item.renderAction) return {}
-        const props = {}
-        Object.keys(ACTION_PROCESSORS).forEach(key => {
-            if (item[key]) {
-                Object.assign(props, ACTION_PROCESSORS[key](item, { tableConfig, setModalTable, setSelectedTableRows }))
-            }
-        })
-        return props
-    }
-
-    return formItems.map((item, index) => {
-        // 情况 A：发现容器型零件 (含有 layoutType)
-        if (item.layoutType && LAYOUT_PROCESSORS[item.layoutType]) {
-            const Layout = LAYOUT_PROCESSORS[item.layoutType] ?? LAYOUT_PROCESSORS.default
-            return (
-                <Layout
-                    item={item}
-                    key={item.name || index}
-                    renderCore={renderCore} // 注入渲染能力，让 Layout 自己去 Map
-                />
-            )
-        }
-
-        // 情况 B：标准作战零件
-        return (
-            <Col span={item.span ?? 6} key={item.name || index}>
-                <MyBaseForm item={{ ...item, ...getRenderItemProps(item) }} form={form} />
-            </Col>
-        )
-    })
-}
 
 const flattenFormItems = items => {
     if (!Array.isArray(items)) return []
@@ -242,11 +153,15 @@ 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)}
-            <Form form={form} layout={layout} preserve={false} labelCol={labelCol} wrapperCol={wrapperCol} onValuesChange={(changed, all) => onValuesChange?.({ changed, all, form, record })}>
-                <Row gutter={[24, 0]}>
-                    <FormRenderer form={form} formItems={formItems} tableConfig={tableConfig} setModalTable={setModalTable} setSelectedTableRows={setSelectedTableRows} />
-                </Row>
-            </Form>
+            <MyForm
+                layout={layout}
+                externalForm={form}
+                labelCol={labelCol}
+                formItems={formItems}
+                wrapperCol={wrapperCol}
+                tableProps={{ tableConfig, setModalTable, setSelectedTableRows }}
+                onValuesChange={(changed, all) => onValuesChange?.({ changed, all, form, record })}
+            />
             {extra?.footer?.(ctx)}
         </Modal>
     )

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

@@ -1,4 +1,5 @@
-import { Space, Table } from 'antd'
+import { Table } from 'antd'
+import { DraggableContainer } from './DraggableContainer'
 import { EditableRow, EditableCell } from './EditableCell'
 import { useRef, useMemo, useEffect, useCallback } from 'react'
 
@@ -54,12 +55,10 @@ import { useRef, useMemo, useEffect, useCallback } from 'react'
  *   }}
  * />
  */
-export const MyTable = ({ size, query, total, search, autoScroll, onChange, setSearch, pagination, renderAction, rowClassName, customSave, setDataSource, lineFormChange, columns = [], rowSelection, rowKey = 'id', loading = false, dataSource = [], scroll = { x: 'max-content' }, isLocalPaging = false, ...restProps }) => {
+export const MyTable = ({ size, query, total, search, autoScroll, onChange, pagination, renderAction, rowClassName, customSave, setDataSource, lineFormChange, columns = [], rowSelection, rowKey = 'id', loading = false, dataSource = [], scroll = { x: 'max-content' }, isLocalPaging = false, ...restProps }) => {
 
     const tableRef = useRef(null)
     const hasScrolledRef = useRef(false)
-    const dataSourceRef = useRef(dataSource)
-    dataSourceRef.current = dataSource
 
     /**
      * @description [权限侦察] 自动扫描列配置。若存在 editType 型号，则激活“骇入模式（编辑模式）”。
@@ -69,18 +68,19 @@ export const MyTable = ({ size, query, total, search, autoScroll, onChange, setS
     /**
      * @function handleSave
      * @description [原子级物理封存] 执行数据更新协议。
+     * 采用函数式状态更新（prev => ...）以彻底消除闭航陷阱（Stale Closure），确保数据高频修改时的绝对准确。
+     *
      * @param {Object} row - 修改后的行片段
      */
     const handleSave = useCallback((row) => {
-        const prev = dataSourceRef.current
-        const index = prev.findIndex(item => row[rowKey] === item[rowKey])
-        if (index === -1) return
-        const item = prev[index]
-        const updatedRow = { ...item, ...row }
-        const newData = [...prev]
-        newData.splice(index, 1, updatedRow)
-        setDataSource(newData)
-        customSave?.(updatedRow, newData)
+        setDataSource(prev => {
+            const newData = [...prev]
+            const index = newData.findIndex(item => row[rowKey] === item[rowKey])
+            const item = newData[index]
+            newData.splice(index, 1, { ...item, ...row })
+            customSave?.({ ...item, ...row }, newData)
+            return newData
+        })
     }, [rowKey, customSave, setDataSource])
 
     /**
@@ -91,8 +91,9 @@ export const MyTable = ({ size, query, total, search, autoScroll, onChange, setS
         body: {
             row: EditableRow,
             cell: EditableCell,
+            wrapper: props => <DraggableContainer props={props} setDataSource={setDataSource} />,
         }
-    }), [])
+    }), [setDataSource])
 
     /**
      * @constant mergedColumns
@@ -102,37 +103,10 @@ export const MyTable = ({ size, query, total, search, autoScroll, onChange, setS
     const mergedColumns = useMemo(() => {
         return columns.map(col => {
             if (!col.editType) {
-                let currentCol = { ...col }
                 if (col.renderAction && renderAction?.[col.dataIndex]) {
-                    currentCol.render = renderAction[col.dataIndex]
-                }
-                if (col.search) {
-                    currentCol = {
-                        ...currentCol,
-                        filterSearch: true,
-                        onFilter: (value, record) => col.remote ? undefined : col.customFilter({ value, record, dataIndex: col.dataIndex }),
-                        filterDropdown: ({ close, confirm, selectedKeys, clearFilters, setSelectedKeys }) => (
-                            <Space direction='vertical' style={{ padding: 12 }}>
-                                {col.customFilterDropdown({ dataIndex: col.dataIndex, selectedKeys, setSelectedKeys })}
-                                <div style={{ display: 'flex' }}>
-                                    <a style={{ marginLeft: 'auto', marginRight: 8 }} onClick={() => {
-                                        if (col.remote) {
-                                            setSearch(prev => ({ ...prev, pageNo: 1, [col.dataIndex]: col.formatFilter?.(selectedKeys) ?? selectedKeys?.toString() }))
-                                        }
-                                        confirm()
-                                    }}>确定</a>
-                                    <a onClick={() => {
-                                        if (col.remote) {
-                                            setSearch(prev => ({ ...prev, pageNo: 1, [col.dataIndex]: undefined }))
-                                        }
-                                        clearFilters()
-                                    }}>重置</a>
-                                </div>
-                            </Space>
-                        ),
-                    }
+                    return { ...col, render: renderAction[col.dataIndex] }
                 }
-                return currentCol
+                return col
             }
             return {
                 ...col,
@@ -141,7 +115,6 @@ export const MyTable = ({ size, query, total, search, autoScroll, onChange, setS
                     handleSave,
                     title: col.title,
                     rules: col.rules,
-                    extra: col.extra,
                     options: col.options,
                     editType: col.editType,
                     dataIndex: col.dataIndex,
@@ -174,7 +147,7 @@ export const MyTable = ({ size, query, total, search, autoScroll, onChange, setS
             }),
             ...(typeof pagination === 'object' ? pagination : {})
         }
-    }, [total, search, pagination])
+    }, [total, search, pagination, isLocalPaging])
 
     /**
      * @description [视觉追踪协议] 当检测到 query.rowIndex 信号时，执行“物理重定向”。