@yorha2b-lab/autodev 3.4.2 → 3.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorha2b-lab/autodev",
-  "version": "3.4.2",
+  "version": "3.4.4",
   "description": "基于视觉大模型的前端(react+Antd)全自动 CRUD 代码生成器",
   "bin": {
     "autodev": "bin/autodev.js"

package/src/prompts/react/watch-page.js

@@ -18,7 +18,7 @@ module.exports = `
 - ⚠️ 属性精简规则:
     - 默认输入框: 仅保留 [label, name] 属性。**严禁出现 type 属性**。
     - 非默认组件: 仅当类型为 [auto, date, radio, select, upload, checkbox, textarea, daterange] 时才允许添加 type 属性。
-**标准定义 (Columns)**:
+**标准定义 (FormItem)**:
     - date: 单日期
     - daterange: 日期范围
     - enum: 枚举类型

package/src/prompts/react/watch-part.js

@@ -26,13 +26,17 @@ module.exports = `
     - **行操作 (Operation)**: [{label:'操作名', action:'动词ByRecord'}]
 
 ## 2. 表单 (Form)
-- **基础格式**: [{ label: '文本', name: 'englishName',type:'' }]
+- **基础格式**: [{ label: '文本', name: 'englishName',type:''}]
+- **高级格式**: [{ title: '文本', layoutType:'',childItems:[{ label: '文本', name: 'englishName',type:'' }] }]
 - 禁止输出:
     - ***⚠️⚠️⚠️严禁输出columns,只允许输出formItems⚠️⚠️⚠️***
 - ⚠️ 属性精简规则:
     - 默认输入框: 仅保留 [label, name] 属性。**严禁出现 type 属性**。
     - 非默认组件: 仅当类型为 [auto, date, radio, select, upload, checkbox, textarea, daterange] 时才允许添加 type 属性。
-**标准定义 (Columns)**:
+- ⚠️ layoutType:
+    - section: 段落布局(分段title+childItems项，无明显背景色，纯文本title)
+    - collapse: 折叠布局(折叠展开title+childItems项，有明显背景色，或文本前有展开箭头)
+**标准定义 (FormItem)**:
     - date: 单日期
     - daterange: 日期范围
     - enum: 枚举类型

package/templates/react/components/MyModalForm.js

@@ -5,28 +5,26 @@ import { useMemo, useState, useEffect } from 'react'
 import { Row, Col, Form, Modal, Button, Collapse } from 'antd'
 
 const LAYOUT_PROCESSORS = {
-    // 分节布局
-    section: ({ item, children }) => (
-        <Col span={item.span ?? 24}>
-            <div className={item.className}>{item.title}</div>
-            <Row gutter={[24, 0]}>{children}</Row>
+    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}>
-            <Collapse ghost accordion defaultActiveKey={[0]}>
-                {item.childItems?.map((child, ind) => (
-                    <Collapse.Panel key={child.name || ind} header={<span style={{ fontWeight: 'bold' }}>{child.title}</span>}>
-                        <Row gutter={[24, 0]}>
-                            {renderCore(child.childItems || [child])}
-                        </Row>
-                    </Collapse.Panel>
-                ))}
+        <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: ({ children }) => <>{children}</>
+    default: ({ item, renderCore }) => <Row gutter={[24, 0]}>{renderCore(item.childItems || [])}</Row>
 }
 
 // 定义“零部件增强协议”处理器,以后加任何新功能，只需要在这个对象里加一个 Key，不需要动主逻辑！
@@ -88,7 +86,7 @@ const FormRenderer = ({ form, formItems, tableConfig, setModalTable, setSelected
 
         // 情况 B：标准作战零件
         return (
-            <Col span={item.span ?? 24} key={item.name || index}>
+            <Col span={item.span ?? 6} key={item.name || index}>
                 <MyBaseForm item={{ ...item, ...getRenderItemProps(item) }} form={form} />
             </Col>
         )
@@ -120,7 +118,7 @@ const FormRenderer = ({ form, formItems, tableConfig, setModalTable, setSelected
  *   formItems={[{ label: '截止日期', name: 'deadline', type: 'date' }]}
  * />
  */
-export const MyModalForm = ({ width, title, submit, record, visible, setModal, labelCol, formItems, wrapperCol, tableConfig, onValuesChange, handleModalTableOk }) => {
+export const MyModalForm = ({ width, title, footer, submit, record, visible, setModal, labelCol, formItems, wrapperCol, tableConfig, onValuesChange, handleModalTableOk }) => {
 
     const rowKey = tableConfig?.rowKey || 'id'
 
@@ -219,10 +217,10 @@ export const MyModalForm = ({ width, title, submit, record, visible, setModal, l
     const tableRowSelection = useMemo(() => ({
         selectedRowKeys: selectedTableRows.map(row => row[rowKey]),
         onChange: (selectedRowKeys, selectedRows) => setSelectedTableRows(selectedRows),
-    }), [rowKey, selectedTableRows])
+    }), [rowKey, modalTable, selectedTableRows])
 
     return (
-        <Modal centered title={title} width={width} open={visible} onOk={handleOk} destroyOnClose onCancel={handleCancel} confirmLoading={pending}>
+        <Modal centered title={title} width={width} open={visible} onOk={handleOk} footer={footer?.({ setModal })} destroyOnClose onCancel={handleCancel} confirmLoading={pending} bodyStyle={{ paddingBottom: 0 }}>
             {modalTable.visible && <MyModalTable rowKey={rowKey} {...modalTable} rowSelection={tableRowSelection} onOk={modalTableOk} setModal={setModalTable} />}
             <Form form={form} preserve={false} labelCol={labelCol} wrapperCol={wrapperCol} onValuesChange={(changed, all) => onValuesChange?.({ changed, all, form, record })}>
                 <Row gutter={[24, 0]}>

package/templates/react/components/MyModalTable.js

@@ -36,7 +36,7 @@ import { useTableQuery } from '../hooks/useTableQuery'
  *   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', initialParams = {}, modalPagination = true }) => {
+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)
@@ -45,7 +45,7 @@ export const MyModalTable = ({ api, onOk, title, width, footer, visible, operate
      * @description [独立信号链路]
      * 在弹窗内部启动专属的 useTableQuery，实现了与主页面逻辑的“物理隔绝”。
      */
-    const { total, loading, columns, dataSource, search, refresh, setLoading, setSearch, setDataSource } = useTableQuery({ api, cols: modalColumns, initialParams, formatResponse })
+    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 })
 
@@ -78,7 +78,7 @@ export const MyModalTable = ({ api, onOk, title, width, footer, visible, operate
     }, [columns, operate])
 
     return (
-        <Modal centered destroyOnClose title={title} width={width} open={visible} onOk={handleOk} footer={footer} onCancel={() => setModal({ visible: false })} confirmLoading={pending}>
+        <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 信号。
@@ -88,18 +88,19 @@ export const MyModalTable = ({ api, onOk, title, width, footer, visible, operate
                 💡 [高阶赋能逻辑]
                 functionButtons 能够获得对当前表格状态 (refresh, setLoading...) 的完全控制权。
             */}
-            {functionButtons?.length > 0 && <Space>{functionButtons.map(item => <Button key={item.name} type={item.type} onClick={() => item.onClick({ refresh, setLoading, setSearch, setDataSource })}>{item.name}</Button>)}</Space>}
+            {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}
                 rowKey={rowKey}
                 search={search}
+                scroll={scroll}
                 loading={loading}
-                scroll={{ y: 400 }}
                 columns={finalColumns}
                 dataSource={dataSource}
                 rowSelection={rowSelection}
                 pagination={modalPagination}
                 onChange={handleTableChange}
+                isLocalPaging={isLocalPaging}
                 setDataSource={setDataSource}
             />
         </Modal>

package/templates/react/components/MySearchForm.js

@@ -22,7 +22,6 @@ import { Row, Col, Form, Button, Space } from 'antd'
  * @param {React.ReactNode} [props.extraOperate] - 额外挂件：在按钮区域注入自定义战术单元
  * @param {boolean} props.loading - 战场负载状态：请求中时锁定按钮，防止由于重复指令导致的逻辑冲突
  * @param {boolean} [props.syncUrlParams=true] - 物理同步开关：是否将搜索状态实时镜像至 URL 链接中
- * @param {Object} props.initialParams - [重要] 战术底价：定义不可被重置协议核平的核心业务参数（如 projectId）
  *
  * @example
  * <MySearchForm
@@ -32,7 +31,7 @@ import { Row, Col, Form, Button, Space } from 'antd'
  *   formItems={[{ label: '状态', name: 'status', type: 'select', options: [...] }]}
  * />
  */
-export const MySearchForm = ({ form, search, loading, labelCol, setSearch, formItems, showLimit = 7, initialParams, initialValues, customReset, extraOperate, customFinish, onValuesChange, syncUrlParams = true, defaultPageSize = 10 }) => {
+export const MySearchForm = ({ form, search, loading, labelCol, setSearch, formItems, showLimit = 7, initialValues, initialParams, customReset, extraOperate, customFinish, onValuesChange, syncUrlParams = true, defaultPageSize = 10 }) => {
 
     const [limit, setLimit] = useState(showLimit)
 

package/templates/react/components/MyTable.js

@@ -54,7 +54,7 @@ import { useRef, useMemo, useEffect, useCallback } from 'react'
  *   }}
  * />
  */
-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' }, ...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)
@@ -138,9 +138,11 @@ export const MyTable = ({ size, query, total, search, autoScroll, onChange, pagi
         return {
             total,
             showSizeChanger: true,
-            current: Number(search?.pageNo),
-            pageSize: Number(search?.pageSize),
             showTotal: (total) => `共 ${total} 条`,
+            ...(isLocalPaging ? {} : {
+                current: Number(search?.pageNo),
+                pageSize: Number(search?.pageSize),
+            }),
             ...(typeof pagination === 'object' ? pagination : {})
         }
     }, [total, search, pagination])
@@ -183,7 +185,7 @@ export const MyTable = ({ size, query, total, search, autoScroll, onChange, pagi
                 pagination={paginationConfig}
                 components={isEditable ? components : undefined}
                 // 💡 信号注入：将行监听协议绑定至底层 tr
-                onRow={(record, index) => ({ record, index, ...(typeof onValuesChange === 'function' ? { onValuesChange: lineFormChange } : {}) })}
+                onRow={(record, index) => ({ record, index, ...(typeof lineFormChange === 'function' ? { onValuesChange: lineFormChange } : {}) })}
                 rowClassName={(record, index) => {
                     const externalClass = typeof rowClassName === 'function' ? rowClassName(record, index) : rowClassName
                     const classes = [externalClass]

package/templates/react/handlebars/MyTable.hbs

@@ -21,17 +21,15 @@
     {{#if hasPagination}}
     {{{{raw}}}}
     onChange={(pagination, filters, sorter) => {
-        if (sorter.column) {
-            const newSearch = { ...search, pageNo: pagination.current, pageSize: pagination.pageSize, orderBy: sorter.field }
-            const params = new URLSearchParams(Object.fromEntries(Object.entries({ ...query, ...newSearch }).filter(([key, value]) => !['', null, undefined].includes(value))))
-            window.history.replaceState(null, '', `${window.location.pathname}?${params.toString()}`)
-            setSearch(newSearch)
+        const newSearch = { ...search, pageNo: pagination.current ?? 1, pageSize: pagination.pageSize ?? 10 }
+        if (sorter.order) {
+            newSearch.orderBys = sorter.column
         } else {
-            const newSearch = { ...search, pageNo: pagination.current, pageSize: pagination.pageSize, orderBy: undefined }
-            const params = new URLSearchParams(Object.fromEntries(Object.entries({ ...query, ...newSearch }).filter(([key, value]) => !['', null, undefined].includes(value))))
-            window.history.replaceState(null, '', `${window.location.pathname}?${params.toString()}`)
-            setSearch(newSearch)
+            newSearch.orderBys = undefined
         }
+        const params = new URLSearchParams(Object.fromEntries(Object.entries({ ...query, ...newSearch }).filter(([key, value]) => !['', null, undefined].includes(value))))
+        window.history.replaceState(null, '', `${window.location.pathname}?${params.toString()}`)
+        setSearch(newSearch)
     }}
     {{{{/raw}}}}
     {{/if}}

package/templates/react/hooks/useTableQuery.js

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect, useCallback } from 'react'
+import { useRef, useMemo, useState, useEffect, useCallback } from 'react'
 
 /**
  * @hook useTableQuery
@@ -29,7 +29,7 @@ import { useRef, useState, useEffect, useCallback } from 'react'
  *   formatResponse: (res) => ({ data: res.list, total: res.total })
  * });
  */
-export const useTableQuery = ({ api, cols, initialParams = {}, formatResponse }) => {
+export const useTableQuery = ({ api, cols = [], initialParams = {}, formatResponse, isLocalPaging = false }) => {
 
     const [total, setTotal] = useState(0)
     const [columns, setColumns] = useState(cols)
@@ -41,6 +41,8 @@ export const useTableQuery = ({ api, cols, initialParams = {}, formatResponse })
     const apiRef = useRef(api)
     // 💡 [核心防御] 信号 ID 计数器：用于物理拦截由于网络时延导致的“竞态病毒（Race Condition）”
     const fetchIdRef = useRef(0)
+    // 💡 物理记录仪：记录上一次“真正”的过滤参数（不含分页）
+    const lastFilterRef = useRef('')
     // 💡 [核心防御] 数据解码协议引用：确保异步回调中永远能指向最新的指令地址
     const formatResponseRef = useRef(formatResponse)
 
@@ -65,6 +67,15 @@ export const useTableQuery = ({ api, cols, initialParams = {}, formatResponse })
      */
     const fetchData = useCallback(async () => {
         if (!apiRef.current) return
+
+        if (isLocalPaging) {
+            const currentFilter = JSON.stringify(Object.fromEntries(Object.entries(search).filter(([k]) => !['pageNo', 'pageSize'].includes(k))))
+            if (lastFilterRef.current === currentFilter && dataSource.length > 0) {
+                return
+            }
+            lastFilterRef.current = currentFilter
+        }
+
         setLoading(true)
         // 💡 信号加标：为本次请求分配唯一的物理 ID
         const currentFetchId = ++fetchIdRef.current
@@ -83,7 +94,7 @@ export const useTableQuery = ({ api, cols, initialParams = {}, formatResponse })
                     return prevCols
                 })
             }
-            setDataSource(data)
+            setDataSource(data ?? [])
             setTotal(total ?? 0)
         } catch (error) {
             console.error('查询失败', error)
@@ -93,11 +104,11 @@ export const useTableQuery = ({ api, cols, initialParams = {}, formatResponse })
                 setLoading(false)
             }
         }
-    }, [search])
+    }, [search, isLocalPaging, dataSource.length])
 
     useEffect(() => {
         fetchData()
     }, [fetchData])
 
-    return { total, columns, loading, dataSource, search, setSearch, setLoading, setDataSource, refresh: fetchData }
+    return { total, columns, search, loading, dataSource, setSearch, setLoading, setDataSource, refresh: fetchData }
 }