@yorha2b-lab/autodev 7.7.8 → 7.8.0

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

@@ -1,80 +1,18 @@
-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'
 
-/**
- * @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 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,75 +25,65 @@ 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} />
         }
         return c
     }, [isEditable, draggable, customSave, setDataSource])
 
-
-    /**
-     * @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,
+                    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>
+                    ),
                 }
+            }
+            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,
                 }),
@@ -163,11 +91,6 @@ export const MyTable = ({ size, query, total, search, options, autoScroll, onCha
         })
     }, [columns, options, handleSave, editRender, renderAction])
 
-    /**
-     * @constant paginationConfig
-     * @description [后勤对齐协议] 自动将地堡的 search 状态映射为 Antd 分页模型。
-     * 具备类型自适应能力：支持 boolean 开关或 Object 属性覆盖。
-     */
     const paginationConfig = useMemo(() => {
 
         if (!pagination) return false
@@ -184,21 +107,15 @@ export const MyTable = ({ size, query, total, search, options, autoScroll, onCha
         }
     }, [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
@@ -221,8 +138,7 @@ export const MyTable = ({ size, query, total, search, options, autoScroll, onCha
                 components={components}
                 rowSelection={rowSelection}
                 pagination={paginationConfig}
-                // 💡 信号注入：将行监听协议绑定至底层 tr
-                onRow={(record, index) => ({ record, index, draggable, ...(typeof lineFormChange === 'function' ? { onValuesChange: lineFormChange } : {}) })}
+                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]

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

@@ -1,29 +1,16 @@
+import { MyBaseForm } from './MyBaseForm'
 import { AliyunOSSUpload } from './AliyunOSSUpload'
 import { Tree, Form, 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 }) => {
 
     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 })}
+                {item.groups.map((subItem, ind) => (
+                    <Form.Item noStyle key={subItem.name}>
+                        <div style={{ flex: 1, minWidth: 0, marginRight: 8 }}><MyBaseForm item={subItem} key={subItem.name} /></div>
+                        {ind < item.groups.length - 1 && <span style={{ color: '#888', whiteSpace: 'nowrap', marginRight: 8 }}>{item.separator}</span>}
                     </Form.Item>
                 ))}
             </Input.Group>