@yorha2b-lab/autodev 7.7.8 → 7.8.1

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

@@ -1,80 +1,20 @@
-import { Table } from 'antd'
+import { Table, Space } from 'antd'
 import { DraggableContainer } from './DraggableContainer'
 import { EditableRow, EditableCell } from './EditableCell'
-import { useRef, useMemo, useEffect, useCallback } from 'react'
+import { useRef, useMemo, useEffect, useCallback, createContext } from 'react'
 
-/**
- * @component MyTable
- * @description [地堡核心战术平台] 高级数据表格组件。
- * 它是地堡系统的“火力中心”，集成了行内编辑、自动滚动定位、动态分页协议及 Optimistic UI (乐观更新) 等工业级特性。
- *
- * @param {Object} props - 平台配置参数
- * @param {number} props.total - 物资总量：用于构筑分页器的刻度
- * @param {Object} [props.rowSelection] - 战术勾选：配置行选择逻辑
- * @param {string} [props.rowKey='id'] - 唯一标识：每一行物资的数字指纹
- * @param {boolean} [props.loading=false] - 战场负载状态：显示加载动画
- * @param {Array} [props.dataSource=[]] - 物理物资包：表格展示的原始数据
- * @param {Object} props.search - 当前物流状态：包含 pageNo 和 pageSize
- * @param {Object} [props.query] - 侦察参数：包含 rowIndex 用于执行物理追踪定位
- * @param {boolean} [props.autoScroll] - 视觉引导开关：是否开启自动滚动至目标行逻辑
- * @param {Function} [props.lineFormChange] - 行级信号监听：捕获行内表单的实时变动
- * @param {Function} props.onChange - 战位协同回调：分页、排序、筛选变动时的通信协议
- * @param {boolean|Object} [props.pagination] - 分页配置：支持布尔开关或物理对象覆盖
- * @param {Function} [props.customSave] - 物理封存协议：行内编辑保存后的外部持久化回调
- * @param {Array} props.columns - 零部件清单：定义列的构筑协议，支持 editType 等扩展属性
- * @param {Object} [props.scroll={x:'max-content'}] - 滚动配置：默认开启横向物理溢出防护
- * @param {string} [props.size='middle'] - 视觉能级：表格的物理尺寸 (small/middle/large)
- * @param {Function} props.setDataSource - 状态设置器：直接操作地堡的原始数据流（支持函数式更新）
- * @param {string|Function} [props.rowClassName] - 行视觉涂装：支持静态字符串或基于逻辑的动态类名
- *
- * @param {Object} [props.renderAction] - [后期物理绑定协议] 运行时逻辑注入仓库。
- * @description
- * 这是地堡系统的“黑客骇入”接口。
- * 由于 resource.js 必须保持纯净的静态 JSON 格式以确保主权安全性，
- * 凡是涉及“查看图片”、“跳转链接”等需要运行时函数支持的列，
- * 统一通过该协议在渲染阶段执行“逻辑对冲”。
- *
- * @logic
- * 1. 物理寻址：通过 col.dataIndex 锁定目标零部件位点。
- * 2. 逻辑脱壳：删除临时标记字段 [renderAction: true]。
- * 3. 语义注入：将 index.js 中定义的真实 Action 物理焊接到 columns.render 属性上。
- *
- * @example
- * // 1. 在 resource.js 中标记：
- * { title: '图片', dataIndex: 'imgUrl', renderAction: true }
- *
- * // 2. 在 index.js 中提供弹药：
- * <MyTable
- *   total={100}
- *   columns={columns}
- *   dataSource={data}
- *   setDataSource={setData}
- *   customSave={(row) => saveApi(row)}
- *   renderAction={{
- *     imgUrl: (text, record) => <a onClick={() => showImg(record)}>查看物资</a>
- *   }}
- * />
- */
-export const MyTable = ({ size, query, total, search, options, autoScroll, onChange, setSearch, pagination, editRender = {}, renderAction, rowClassName, customSave, setDataSource, lineFormChange, columns = [], rowSelection, rowKey = 'id', loading = false, dataSource = [], draggable = false, scroll = { x: 'max-content' }, isLocalPaging = false, ...restProps }) => {
+export const TableContext = createContext(null)
+
+export const MyTable = ({ size, query, total, search, options, autoScroll, onChange, editingKey, setSearch, pagination, editRender = {}, renderAction, rowClassName, customSave, setDataSource, lineFormChange, columns = [], rowSelection, rowKey = 'id', editMode = 'cellEdit', loading = false, dataSource = [], draggable = false, scroll = { x: 'max-content' }, isLocalPaging = false, ...restProps }) => {
 
     const tableRef = useRef(null)
     const hasScrolledRef = useRef(false)
     const dataSourceRef = useRef(dataSource)
     dataSourceRef.current = dataSource
 
-    /**
-     * @description [权限侦察] 自动扫描列配置。若存在 editType 型号，则激活“骇入模式（编辑模式）”。
-     */
     const isEditable = useMemo(() => columns.some(col => col.editType), [columns])
     const hasCustomComponents = isEditable || draggable
 
-    /**
-     * @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])
@@ -87,87 +27,72 @@ export const MyTable = ({ size, query, total, search, options, autoScroll, onCha
         customSave?.(updatedRow, newData)
     }, [rowKey, customSave, setDataSource])
 
-    /**
-     * @constant components
-     * @description [零部件注册] 注入地堡特有的可编辑 Row 和 Cell 单元。
-     */
     const components = useMemo(() => {
         if (!hasCustomComponents) return undefined
         const c = { body: {} }
-        // 1. 只有有编辑列时，才挂载行内编辑单元
         if (isEditable) {
             c.body.row = EditableRow
             c.body.cell = EditableCell
         }
-        // 2. 只有开启了拖拽，才挂载拖拽容器
         if (draggable) {
-            c.body.wrapper = props => <DraggableContainer props={props} customSave={customSave} setDataSource={setDataSource} dataSourceRef={dataSourceRef} />
+            c.body.wrapper = DraggableContainer
         }
         return c
-    }, [isEditable, draggable, customSave, setDataSource])
-
+    }, [isEditable, draggable])
 
-    /**
-     * @constant mergedColumns
-     * @description [元数据重组] 将指挥官的静态列定义转化为带逻辑注入的“动态作战列”。
-     * 自动处理 Cell 级的 disabled 状态和 editable 权限。
-     */
     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>
-                        ),
-                    }
+            let currentCol = { ...col }
+            if (col.renderAction && renderAction?.[col.dataIndex]) {
+                currentCol.render = renderAction[col.dataIndex]
+            }
+            if (col.search) {
+                currentCol = {
+                    ...currentCol,
+                    filterSearch: true,
+                    ...(col.remote ? {} : { onFilter: (value, record) => 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>
+                    ),
                 }
+            }
+            if (!col.editType) {
                 return currentCol
             }
             return {
-                ...col,
+                ...currentCol,
                 onCell: (record) => ({
-                    ...col,
+                    ...currentCol,
                     record,
+                    rowKey,
+                    editMode,
                     handleSave,
+                    editingKey,
                     editRender: editRender?.[col.dataIndex],
                     options: col.options ?? options?.[col.dataIndex],
-                    // 💡 条件防御逻辑：支持针对单行的物理锁定
                     disabled: col.specialDisabled ? record.disabled : col.disabled,
                     editable: col.specialEditType ? record.needEdit && !!col.editType : !!col.editType,
                 }),
             }
         })
-    }, [columns, options, handleSave, editRender, renderAction])
+    }, [rowKey, columns, options, editMode, setSearch, editingKey, editRender, renderAction, handleSave])
 
-    /**
-     * @constant paginationConfig
-     * @description [后勤对齐协议] 自动将地堡的 search 状态映射为 Antd 分页模型。
-     * 具备类型自适应能力：支持 boolean 开关或 Object 属性覆盖。
-     */
     const paginationConfig = useMemo(() => {
 
         if (!pagination) return false
@@ -177,28 +102,22 @@ export const MyTable = ({ size, query, total, search, options, autoScroll, onCha
             showSizeChanger: true,
             showTotal: (total) => `共 ${total} 条`,
             ...(isLocalPaging ? {} : {
-                current: Number(search?.pageNo),
-                pageSize: Number(search?.pageSize),
+                current: Number(search?.pageNo ?? 1),
+                pageSize: Number(search?.pageSize ?? 10),
             }),
             ...(typeof pagination === 'object' ? pagination : {})
         }
     }, [total, search, pagination, isLocalPaging])
 
-    /**
-     * @description [视觉追踪协议] 当检测到 query.rowIndex 信号时，执行“物理重定向”。
-     * 表格将自动平滑滚动至目标行并注入高亮背景（#e6f4ff）。
-     */
     useEffect(() => {
         if (!autoScroll || !dataSource?.length || query?.rowIndex === undefined) return
         if (hasScrolledRef.current === query.rowIndex) return
         const timer = setTimeout(() => {
             const tableElement = tableRef.current
             if (!tableElement) return
-            // 物理侦察：查找底层 Antd 生成的行节点
             const trList = tableElement.getElementsByClassName('ant-table-row')
             const tr = trList[Number(query.rowIndex)]
             if (tr) {
-                // 物理定位：平滑引导视觉中心
                 tr.scrollIntoView({ behavior: 'smooth', block: 'center' })
                 tr.style.backgroundColor = '#e6f4ff'
                 hasScrolledRef.current = query.rowIndex
@@ -209,28 +128,29 @@ export const MyTable = ({ size, query, total, search, options, autoScroll, onCha
 
     return (
         <div ref={tableRef}>
-            <Table
-                {...restProps}
-                rowKey={rowKey}
-                scroll={scroll}
-                loading={loading}
-                onChange={onChange}
-                columns={mergedColumns}
-                dataSource={dataSource}
-                size={size ?? 'middle'}
-                components={components}
-                rowSelection={rowSelection}
-                pagination={paginationConfig}
-                // 💡 信号注入：将行监听协议绑定至底层 tr
-                onRow={(record, index) => ({ record, index, draggable, ...(typeof lineFormChange === 'function' ? { onValuesChange: lineFormChange } : {}) })}
-                rowClassName={(record, index) => {
-                    const externalClass = typeof rowClassName === 'function' ? rowClassName(record, index) : rowClassName
-                    const classes = [externalClass]
-                    if (isEditable) classes.push('editable-row')
-                    if (autoScroll && query?.rowIndex === index) classes.push('search-highlight-row')
-                    return classes.filter(Boolean).join(' ')
-                }}
-            />
+            <TableContext.Provider value={{ customSave, setDataSource, dataSourceRef }}>
+                <Table
+                    {...restProps}
+                    rowKey={rowKey}
+                    scroll={scroll}
+                    loading={loading}
+                    onChange={onChange}
+                    columns={mergedColumns}
+                    dataSource={dataSource}
+                    size={size ?? 'middle'}
+                    components={components}
+                    rowSelection={rowSelection}
+                    pagination={paginationConfig}
+                    onRow={(record, index) => ({ record, index, draggable, columns: mergedColumns, ...(typeof lineFormChange === 'function' ? { onValuesChange: lineFormChange } : {}) })}
+                    rowClassName={(record, index) => {
+                        const externalClass = typeof rowClassName === 'function' ? rowClassName(record, index) : rowClassName
+                        const classes = [externalClass]
+                        if (isEditable) classes.push('editable-row')
+                        if (autoScroll && query?.rowIndex === index) classes.push('search-highlight-row')
+                        return classes.filter(Boolean).join(' ')
+                    }}
+                />
+            </TableContext.Provider>
         </div>
     )
 }

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

@@ -1,30 +1,68 @@
+import { Fragment } from 'react'
+import { MyBaseForm } from './MyBaseForm'
 import { AliyunOSSUpload } from './AliyunOSSUpload'
-import { Tree, Form, Radio, Input, Upload, Select, Cascader, Checkbox, DatePicker, InputNumber, TreeSelect, AutoComplete } from 'antd'
+import { Tree, Radio, Input, Upload, Select, Cascader, Checkbox, DatePicker, InputNumber, TreeSelect, AutoComplete } from 'antd'
 
-/**
- * @function formNode
- * @description 智能零部件装配器：根据构筑协议（item.type）动态产出对应的 Ant Design 交互单元。
- *
- * @param {Object} params - 装配参数
- * @param {Object} params.item - 零部件配置对象
- * @param {string|number} [params.item.width] - 宽度校准
- * @param {boolean} [params.item.readOnly] - 物理锁定开关
- * @param {string} [params.item.placeholder] - 视觉占位提示
- * @param {Object} [params.item.props] - 透传给底层组件的原始控制参数
- * @param {Array} [params.item.options] - 数据字典（用于 select/radio/tree 等）
- * @param {string} params.item.type - 构筑类型（date/number/ossUpload/select/daterange 等）
- *
- * @returns {React.ReactNode} 物理装配完成的 UI 单元
- */
-export const formNode = ({ item }) => {
+const componentDict = {
+    date: { Component: DatePicker },
+    number: { Component: InputNumber },
+    ossUpload: { Component: AliyunOSSUpload },
+    default: {
+        Component: Input,
+        props: () => ({ allowClear: true })
+    },
+    daterange: {
+        Component: DatePicker.RangePicker,
+        props: () => ({ placeholder: undefined })
+    },
+    textarea: {
+        Component: Input.TextArea,
+        props: () => ({ autoSize: { minRows: 4 } })
+    },
+    upload: {
+        Component: Upload,
+        props: ({ item }) => ({ ...item.uploadProps })
+    },
+    auto: {
+        Component: AutoComplete,
+        props: ({ item }) => ({ options: item.options })
+    },
+    checkbox: {
+        Component: Checkbox.Group,
+        props: ({ item }) => ({ options: item.options })
+    },
+    radio: {
+        Component: Radio.Group,
+        props: ({ item }) => ({ options: item.options })
+    },
+    treeSelect: {
+        Component: TreeSelect,
+        props: ({ item }) => ({ treeData: item.options })
+    },
+    tree: {
+        Component: Tree,
+        props: ({ item }) => ({ checkable: true, treeData: item.options })
+    },
+    cascader: {
+        Component: Cascader,
+        props: ({ item }) => ({ allowClear: true, showSearch: true, options: item.options })
+    },
+    select: {
+        Component: Select,
+        props: ({ item }) => ({ allowClear: true, showSearch: true, mode: item.mode, options: item.options, optionFilterProp: 'label' })
+    },
+}
+
+export const formNode = ({ item, form }) => {
 
     if (item.type === 'group' && Array.isArray(item.groups)) {
         return (
             <Input.Group compact style={{ width: item.width ?? '100%', display: 'flex', ...item.style }}>
-                {item.groups.map(subItem => (
-                    <Form.Item noStyle key={subItem.name} name={subItem.name} rules={subItem.rules} initialValue={subItem.value}>
-                        {formNode({ item: subItem })}
-                    </Form.Item>
+                {item.groups.map((subItem, ind) => (
+                    <Fragment key={subItem.name}>
+                        <div style={{ flex: 1, minWidth: 0, marginRight: 8 }}><MyBaseForm item={subItem} form={form} /></div>
+                        {ind < item.groups.length - 1 && <span style={{ color: '#888', whiteSpace: 'nowrap', marginRight: 8 }}>{item.separator}</span>}
+                    </Fragment>
                 ))}
             </Input.Group>
         )
@@ -34,25 +72,15 @@ export const formNode = ({ item }) => {
         disabled: item.readOnly,
         style: { width: item.width ?? '100%' },
         placeholder: item.placeholder ?? `请${['select', 'cascader', 'date'].includes(item.type) ? '选择' : '输入'}`,
-        ...item.props
     }
 
-    const componentDict = {
-        date: <DatePicker {...commonProps} />,
-        number: <InputNumber  {...commonProps} />,
-        default: <Input allowClear {...commonProps} />,
-        ossUpload: <AliyunOSSUpload {...commonProps} />,
-        auto: <AutoComplete options={item.options} {...commonProps} />,
-        radio: <Radio.Group options={item.options} {...commonProps} />,
-        tree: <Tree checkable treeData={item.options} {...commonProps} />,
-        treeSelect: <TreeSelect treeData={item.options} {...commonProps} />,
-        checkbox: <Checkbox.Group options={item.options} {...commonProps} />,
-        textarea: <Input.TextArea autoSize={{ minRows: 4 }} {...commonProps} />,
-        daterange: <DatePicker.RangePicker {...commonProps} placeholder={undefined} />,
-        cascader: <Cascader showSearch allowClear options={item.options} {...commonProps} />,
-        upload: <Upload {...item.uploadProps} {...commonProps}>{item.content ?? '上传文件'}</Upload>,
-        select: <Select allowClear showSearch mode={item.mode} options={item.options} optionFilterProp='label' {...commonProps} />,
-    }
+    const config = componentDict[item.type] ?? componentDict.default
+    const Component = config.Component
+    const specialProps = config.props?.({ item, form }) ?? {}
 
-    return componentDict[item.type] ?? componentDict.default
+    return (
+        <Component {...commonProps} {...specialProps} {...item.props}>
+            {item.type === 'upload' && (item.content ?? '上传文件')}
+        </Component>
+    )
 }