@yorha2b-lab/autodev 1.0.28 → 1.0.30

package/package.json

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

package/src/core/react-compiler.js

@@ -62,6 +62,7 @@ const index = ({ config, fileName, indexTpl, pageConfig }) => {
         hasOperate, // 是否有操作列
         columnsValue, // columns 引用表达式
         tabs: pageConfig.tabs, // 标签页配置
+        responseSuccess: config.responseSuccess, // 成功回调函数
         hasExpandable: pageConfig.table.expandable, // 是否有展开行
         hasPagination: pageConfig.table.pagination, // 是否有分页
         operations: pageConfig.table.operation || [], // 操作列配置
@@ -72,7 +73,7 @@ const index = ({ config, fileName, indexTpl, pageConfig }) => {
     }
 
     // 渲染模板
-    const bodyCode = indexTpl(viewData).replaceAll('_responseSuccess_', config.responseSuccess)
+    const bodyCode = indexTpl(viewData)
     // 生成智能导入语句
     const importsStr = generateSmartImports(bodyCode, hasTabs)
     // 清理代码并返回

package/templates/react/components/MyBaseForm.js

@@ -1,6 +1,7 @@
+import { Fragment } from 'react'
 import { formNode } from './index'
-import { Form, Space, Button } from 'antd'
-import { PlusOutlined, PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons'
+import { Form, Button } from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
 
 const getValueFromEvent = e => {
     if (Array.isArray(e)) {
@@ -9,14 +10,16 @@ const getValueFromEvent = e => {
     return e?.fileList
 }
 
-const renderFormContent = ({ item }) => {
+const renderFormContent = ({ item, prefixName = [] }) => {
 
     if (!item.name) {
         return item.value
     }
 
+    const namePath = Array.isArray(prefixName) ? [...prefixName, ...(Array.isArray(item.name) ? item.name : [item.name])] : item.name
+
     const inputNode = (
-        <Form.Item noStyle name={item.name} rules={item.rules} initialValue={item.value} {...(item.type === 'upload' ? { getValueFromEvent, valuePropName: 'fileList' } : { valuePropName: item.valuePropName })}>
+        <Form.Item noStyle name={namePath} rules={item.rules} initialValue={item.value} {...(['upload', 'ossUpload'].includes(item.type) ? { getValueFromEvent, valuePropName: 'fileList' } : { valuePropName: item.valuePropName })}>
             {formNode({ item })}
         </Form.Item>
     )
@@ -41,11 +44,9 @@ export const MyBaseForm = ({ item, form }) => {
                 {(fields, { add, remove }) => (
                     <div style={{ display: 'flex', flexDirection: 'column' }}>
                         {fields.map((field, index) => (
-                            <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align='baseline'>
-                                {item.render(field, index, { add, remove }, form)}
-                                {index !== 0 && <MinusCircleOutlined onClick={() => remove(field.name)} />}
-                                {fields.length === index + 1 && <PlusCircleOutlined onClick={() => add()} />}
-                            </Space>
+                            <Fragment key={field.key}>
+                                {item.render(field, index, { add, remove }, form, renderFormContent)}
+                            </Fragment>
                         ))}
                         {fields.length === 0 && <Button type='dashed' onClick={() => add()} block icon={<PlusOutlined />}>添加{item.label || '项'}</Button>}
                     </div>

package/templates/react/components/MyModalForm.js

@@ -12,14 +12,26 @@ export const MyModalForm = ({ width, title, submit, record, visible, setModal, l
         if (visible) {
             form.resetFields()
             if (record && Object.keys(record).length > 0) {
-                const entries = Object.entries(record).map(([key, value]) => [
-                    key,
-                    formItems.find(item => item.name === key)?.type?.includes('date') ? (value?.toString()?.includes(',') ? value?.split(',')?.map(item => dayjs(Number(item))) : dayjs(Number(value))) : value
-                ])
-                form.setFieldsValue(Object.fromEntries(entries))
+                const itemMap = new Map(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(isNaN(v) ? v : Number(v)))
+                        } else if (typeof value === 'string' && value.includes(',')) {
+                            initialData[key] = value.split(',').map(v => dayjs(Number(v)))
+                        } else {
+                            initialData[key] = dayjs(isNaN(value) ? value : Number(value))
+                        }
+                    } else {
+                        initialData[key] = value
+                    }
+                })
+                form.setFieldsValue(initialData)
             }
         }
-    }, [visible, record, form])
+    }, [visible, record, form, formItems])
 
     const handleOk = async () => {
         try {

package/templates/react/components/MyModalTable.js

@@ -4,9 +4,9 @@ import { MySearchForm } from './MySearchForm'
 import { useTableQuery } from '../hooks/useTableQuery'
 
 
-export const MyModalTable = ({ api, onOk, title, width, footer, visible, columns, setModal, formItems, rowSelection, formatResponse }) => {
+export const MyModalTable = ({ api, onOk, title, width, footer, visible, columns, setModal, formItems, rowSelection, formatResponse, extraParams = {} }) => {
 
-    const { total, loading, dataSource, search, setSearch } = useTableQuery(api, formatResponse, {})
+    const { total, loading, dataSource, search, setSearch } = useTableQuery(api, formatResponse, extraParams)
 
     const handleSearch = values => setSearch({ ...search, ...values, pageNo: 1 })
 
@@ -21,7 +21,7 @@ export const MyModalTable = ({ api, onOk, title, width, footer, visible, columns
 
     return (
         <Modal centered destroyOnHidden title={title} width={width} open={visible} onOk={handleOk} footer={footer} onCancel={() => setModal({ visible: false })}>
-            {formItems?.length > 0 && <MySearchForm search={search} formItems={formItems} setSearch={handleSearch} />}
+            {formItems?.length > 0 && <MySearchForm search={search} formItems={formItems} setSearch={handleSearch} syncUrlParams={false} />}
             <MyTable
                 loading={loading}
                 columns={columns}

package/templates/react/components/MySearchForm.js

@@ -4,12 +4,14 @@ import { MyBaseForm } from './MyBaseForm'
 import { useState, useEffect } from 'react'
 import { Row, Col, Form, Button, Space } from 'antd'
 
-export const MySearchForm = ({ form, search, loading, labelCol, setSearch, formItems, showLimit = 7, initialValues, customReset, extraOperate, customFinish, onValuesChange, defaultPageSize = 10 }) => {
+export const MySearchForm = ({ form, search, loading, labelCol, setSearch, formItems, showLimit = 7, initialValues, customReset, extraOperate, customFinish, onValuesChange, syncUrlParams = true, defaultPageSize = 10 }) => {
 
     const [limit, setLimit] = useState(showLimit)
 
     const handleReset = () => {
-        history.push({ search: '' })
+        if (syncUrlParams) {
+            history.push({ search: '' })
+        }
         if (customReset) {
             customReset()
         } else {
@@ -19,19 +21,24 @@ export const MySearchForm = ({ form, search, loading, labelCol, setSearch, formI
 
     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')
-            if (isDateType && val) {
-                if (Array.isArray(val)) {
-                    formattedValues[key] = val.map((d, i) => i === 0 ? d.startOf('day').valueOf() : d.endOf('day').valueOf()).join(',')
-                } else {
-                    formattedValues[key] = val.valueOf()
+        if (syncUrlParams) {
+            Object.keys(formattedValues).forEach(key => {
+                const val = formattedValues[key]
+                const isDateType = formItems.find(item => item.name === key)?.type?.includes('date')
+                if (isDateType && val) {
+                    if (Array.isArray(val) && val.length > 0) {
+                        const [startKey, endKey] = key.split(',')
+                        formattedValues[startKey] = val[0].startOf('day').valueOf()
+                        formattedValues[endKey] = val[1].endOf('day').valueOf()
+                        delete formattedValues[key]
+                    } else {
+                        formattedValues[key] = val.valueOf()
+                    }
                 }
-            }
-        })
-        const params = new URLSearchParams(Object.fromEntries(Object.entries(formattedValues).filter(([key, value]) => !['', null, undefined].includes(value))))
-        history.push({ search: params.toString() })
+            })
+            const params = new URLSearchParams(Object.fromEntries(Object.entries(formattedValues).filter(([key, value]) => !['', null, undefined].includes(value))))
+            history.push({ search: params.toString() })
+        }
         if (customFinish) {
             customFinish(formattedValues)
         } else {
@@ -41,11 +48,20 @@ export const MySearchForm = ({ form, search, loading, labelCol, setSearch, formI
 
     useEffect(() => {
         if (Object.values(initialValues).length > 0 && formItems.length > 0) {
-            const entries = Object.entries(initialValues).filter(([key]) => formItems.some(item => item.name === key)).map(([key, value]) => [
-                key,
-                formItems.find(item => item.name === key)?.type?.includes('date') ? (value?.toString()?.includes(',') ? value?.split(',')?.map(item => dayjs(Number(item))) : dayjs(Number(value))) : value
-            ])
-            form.setFieldsValue(Object.fromEntries(entries))
+            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]))]
+                    }
+                }
+            })
+            form.setFieldsValue(newValues)
         }
     }, [initialValues, form, formItems])
 

package/templates/react/components/MyTable.js

@@ -1,5 +1,5 @@
 import { Table } from 'antd'
-import { useRef, useEffect } from 'react'
+import { useRef, useMemo, useEffect } from 'react'
 import { EditableRow, EditableCell } from './EditableCell'
 
 const components = {
@@ -9,61 +9,81 @@ const components = {
     }
 }
 
-export const MyTable = ({ size, query, onSave, autoScroll, onChange, pagination, rowClassName, columns = [], rowSelection, rowKey = 'id', loading = false, dataSource = [], editable = false, scroll = { x: 'max-content' }, ...restProps }) => {
+export const MyTable = ({ size, query, onSave, autoScroll, onChange, pagination, rowClassName, columns = [], rowSelection, rowKey = 'id', loading = false, dataSource = [], scroll = { x: 'max-content' }, ...restProps }) => {
 
 
-    const hasScrolled = useRef(false)
+    const tableRef = useRef(null)
+    const hasScrolledRef = useRef(false)
 
-    const mergedColumns = columns.map(col => {
-        if (!col.editType) {
-            return col
-        }
-        return {
-            ...col,
-            onCell: (record) => ({
-                record,
-                title: col.title,
-                rules: col.rules,
-                handleSave: onSave,
-                options: col.options,
-                editType: col.editType,
-                editable: !!col.editType,
-                dataIndex: col.dataIndex,
-            }),
-        }
-    })
+    const isEditable = useMemo(() => columns.some(col => col.editType), [columns])
+
+    const mergedColumns = useMemo(() => {
+        return columns.map(col => {
+            if (!col.editType) {
+                return col
+            }
+            return {
+                ...col,
+                onCell: (record) => ({
+                    record,
+                    title: col.title,
+                    rules: col.rules,
+                    handleSave: onSave,
+                    options: col.options,
+                    editType: col.editType,
+                    editable: !!col.editType,
+                    dataIndex: col.dataIndex,
+                }),
+            }
+        })
+    }, [columns, onSave])
 
     useEffect(() => {
-        if (hasScrolled.current || !query || !autoScroll || !dataSource?.length) return
-        if (query && autoScroll && dataSource?.length > 0) {
-            const timer = setTimeout(() => {
-                const trList = document.getElementsByClassName('ant-table-row')
-                const tr = trList[Number(query.rowIndex)]
-                if (tr) {
-                    tr.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
-                    tr.style.transition = 'background-color 0.8s ease'
-                    tr.style.backgroundColor = '#e6f4ff'
-                    hasScrolled.current = true
-                }
-            }, 100)
-            return () => clearTimeout(timer)
-        }
-    }, [dataSource])
+        if (!autoScroll || !dataSource?.length || query?.rowIndex === undefined) return
+        if (hasScrolledRef.current === query.rowIndex) return
+        const timer = setTimeout(() => {
+            const tableElement = tableRef.current
+            if (!tableElement) return
+            const trList = tableElement.getElementsByClassName('ant-table-row')
+            const tr = trList[Number(query.rowIndex)]
+            if (tr) {
+                tr.scrollIntoView({ behavior: 'smooth', block: 'center' })
+                tr.classList.add('row-highlight-pulse')
+                setTimeout(() => tr.classList.remove('row-highlight-pulse'), 1000)
+                hasScrolledRef.current = query.rowIndex
+            }
+        }, 300)
+        return () => clearTimeout(timer)
+    }, [dataSource, query?.rowIndex, autoScroll, tableRef])
 
     return (
-        <Table
-            {...restProps}
-            rowKey={rowKey}
-            scroll={scroll}
-            loading={loading}
-            onChange={onChange}
-            columns={mergedColumns}
-            dataSource={dataSource}
-            pagination={pagination}
-            size={size ?? 'middle'}
-            rowSelection={rowSelection}
-            components={editable ? components : undefined}
-            rowClassName={editable ? () => 'editable-row' : rowClassName}
-        />
+        <div ref={tableRef}>
+            <Table
+                {...restProps}
+                rowKey={rowKey}
+                scroll={scroll}
+                loading={loading}
+                onChange={onChange}
+                columns={mergedColumns}
+                dataSource={dataSource}
+                pagination={pagination}
+                size={size ?? 'middle'}
+                rowSelection={rowSelection}
+                components={isEditable ? components : undefined}
+                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(' ')
+                }}
+            />
+            <style jsx>{`
+                :global(.row-highlight-pulse) {
+                    background-color: #e6f4ff !important;
+                    transition: background-color 0.5s ease;
+                }
+            `}</style>
+        </div>
     )
 }

package/templates/react/components/index.js

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react'
 import { UploadOutlined } from '@ant-design/icons'
 import { Button, Tree, Radio, Input, Upload, Select, Cascader, Checkbox, DatePicker, InputNumber, TreeSelect, AutoComplete } from 'antd'
 
-const AliyunOSSUpload = ({ style, value, disabled, onChange }) => {
+const AliyunOSSUpload = ({ path, style, value, disabled, onChange }) => {
 
     const [OSSData, setOSSData] = useState()
 
@@ -23,7 +23,7 @@ const AliyunOSSUpload = ({ style, value, disabled, onChange }) => {
     const handleChange = ({ fileList }) => onChange?.([...fileList])
 
     const onRemove = file => {
-        const files = (value || []).filter(v => v.url !== file.url)
+        const files = (value || []).filter(v => v.uid !== file.uid)
         onChange?.(files)
     }
 
@@ -42,7 +42,7 @@ const AliyunOSSUpload = ({ style, value, disabled, onChange }) => {
         if (expire < Date.now()) {
             await init()
         }
-        file.url = `${OSSData.dir}/${file.name}`.replace(/\/\//g, '/')
+        file.url = `${OSSData.dir ?? path}/${file.uid}_${file.name}`.replace(/\/\//g, '/')
         return file
     }
 
@@ -94,11 +94,11 @@ export const formNode = ({ item }) => {
         case 'textarea':
             return <Input.TextArea autoSize={{ minRows: 4 }} {...commonProps} />
         case 'cascader':
-            return <Cascader options={item.options} allowClear {...commonProps} />
-        case 'select':
-            return <Select allowClear mode={item.mode} options={item.options} {...commonProps} />
+            return <Cascader showSearch allowClear options={item.options} {...commonProps} />
         case 'upload':
             return <Upload {...item.uploadProps} {...commonProps}>{item.content ?? '上传文件'}</Upload>
+        case 'select':
+            return <Select allowClear showSearch mode={item.mode} options={item.options} {...commonProps} />
         default:
             return <Input allowClear {...commonProps} />
     }

package/templates/react/index.hbs

@@ -25,7 +25,7 @@ export default props => {
     {{#each operations}}
     const {{this.action}} = async record => {
         const response = await request('/api')
-        if(_responseSuccess_){
+        if({{{../responseSuccess}}}){
             refresh()
         }
     }
@@ -40,7 +40,7 @@ export default props => {
             content: '确认{{this.btn}}吗？',
             onOk: async () => {
                 const response = await request('/api')
-                if(_responseSuccess_){
+                if({{{../responseSuccess}}}){
                     refresh()
                 }
             }

package/templates/react/utils/utils.js

@@ -6,16 +6,6 @@ export const paramsFormat = params => {
     return new URLSearchParams(cleanParams).toString()
 }
 
-export const formatValue = ({ item, ind }) => {
-    if (dayjs.isDayjs(item[1])) {
-        return item[1].startOf('day').valueOf()
-    }
-    if (dayjs.isDayjs(item[1]?.[ind])) {
-        return ind === 0 ? item[1]?.[ind]?.startOf('day').valueOf() : item[1]?.[ind]?.endOf('day').valueOf()
-    }
-    return item[1]?.toString()?.trim() ?? undefined
-}
-
 export const initOSS = async (url, options) => {
     const OSS = require('ali-oss')
     const crypto = require('crypto-js')
@@ -60,7 +50,17 @@ export const exportDataToExcel = async (url, options, columns, fileName, resultK
     const response = await request(url, options)
     if (response?.[resultKey]?.length > 0) {
         const XLSX = require('xlsx')
-        const datas = response?.[resultKey]?.map(item => Object.fromEntries(columns.map(col => [col.title, col.render ? col.render(item[col.dataIndex])?.props?.children ?? col.render(item[col.dataIndex]) : item[col.dataIndex]])))
+        const datas = response?.[resultKey]?.map(item => Object.fromEntries(columns.map(col => {
+            let value = item[col.dataIndex]
+            if (col.exportRender) {
+                value = col.exportRender(value, item, index)
+            }
+            if (col.render) {
+                const rendered = col.render(value, item, index)
+                value = typeof rendered === 'object' ? (rendered?.props?.children || value) : rendered
+            }
+            return [col.title, value]
+        })))
         const workbook = XLSX.utils.book_new()
         const header = columns.map(item => item.title)
         const worksheet = XLSX.utils.json_to_sheet(datas, { header })