@yorha2b-lab/autodev 1.0.0

package/src/core/task-queue.js

@@ -0,0 +1,38 @@
+const createTaskQueue = (concurrency = 1) => {
+
+    let running = 0
+    let queue = []
+    let onIdleCallback = null
+
+    const next = async () => {
+
+        if (running >= concurrency || queue.length === 0) return
+
+        const task = queue.shift()
+        running++
+
+        try {
+            await task()
+        } catch (err) {
+            console.error('任务执行异常:', err)
+        } finally {
+            running--
+            next()
+            if (running === 0 && queue.length === 0 && onIdleCallback) {
+                onIdleCallback()
+            }
+        }
+    }
+
+    return {
+        add: (task) => {
+            queue.push(task)
+            next()
+        },
+        onIdle: (callback) => {
+            onIdleCallback = callback
+        }
+    }
+}
+
+module.exports = { createTaskQueue }

package/src/prompts/mock.js

@@ -0,0 +1,5 @@
+module.exports = (columns, fileName) => `
+根据这些字段生成一个简单的get接口mock数据: ${JSON.stringify(columns)},
+格式如下：
+'/api/${fileName}': {data:模块对象列表},
+`

package/src/prompts/system.js

@@ -0,0 +1,9 @@
+const commonPrompt = '你必须严格按照用户的JSON结构输出,严禁输出任何思考过程（</think>内容）,严禁解释、输出Markdown标签。必须输出合法的、带双引号的标准JSON。'
+
+const UI_DESIGNER = `你是一个专业的UI设计师。${commonPrompt}`
+
+const MOCK_DESIGNER = `你是一个专业的Mock数据生成器。${commonPrompt}`
+
+const API_DESIGNER = `你是一个资深前端与后端接口对接专家。${commonPrompt}`
+
+module.exports = { UI_DESIGNER, API_DESIGNER, MOCK_DESIGNER }

package/src/prompts/watch-api.js

@@ -0,0 +1,11 @@
+module.exports = (swaggerStr, resourceStr) => `
+swaggerStr: ${swaggerStr}
+resourceStr: ${resourceStr}
+resourceStr是前端目前猜测的字段名列表(请从resourceStr中提取dataIndex和name)，
+swaggerStr是后端的真实响应。
+请比对两者，找出现有前端字段名应该被替换为哪个真实的后端字段名。
+匹配规则: 1.完全相同 2.下划线/驼峰转换 3.语义相似。
+请只输出一个JSON对象, Key为前端猜测的旧名字, Value为Swagger里的真实新名字。
+例如：{"key_1": "key1"}
+如果没有找到对应的，请不要包含在结果中。
+`.trim()

package/src/prompts/watch-page.js

@@ -0,0 +1,39 @@
+module.exports = `
+识别图片内容（搜索项，表格列，是否有勾选框，查询下拉选项，统计条等页面结构）
+⚠️⚠️⚠️注意:
+1.变量使用驼峰命名法
+    【严禁中文】绝对不允许使用中文作为变量名或函数名
+    【严禁js关键字】绝对不允许使用js关键字作为变量名或函数名(export/delete/const...)
+2.标签页:
+    tabs: [{tab:'tab1',key:'tab1'}]
+    表格上方的Button请务必归类为functionButton,只有当一组水平排列的项下方有明显的长横线(Ink Bar),或者呈现明显的'卡片包裹感'(Card style)时才识别为tabs
+3.搜索项：
+    formItems: [{ label: '文本', name: '对应的英文名词' }],
+    ⚠️⚠️⚠️注意：
+    如果是下拉框,请加入type:'select',options:_CODE_对应的英文名词Options_CODE_
+    如果是时间范围查询,请加入type:'daterange',name:'对应的英文名词start,对应的英文名词end'
+4.表格:
+    {
+        pagination: true/false,
+        rowSelection: true/false,
+        staticInfo:{has:true/false,text:''},
+        operation: [{label:'操作',action:'操作动词+ByRecord'}],
+        columns: [{ title: '普通列', dataIndex:'对应的英文名词' }],
+    }
+    ⚠️⚠️⚠️注意：
+    请不要在columns里加上操作列
+    如果列需要排序请加上sorter:true
+    如果是时间列,请加入render:_CODE_text=>timeRender({time:text})_CODE_
+    如果是序号列直接渲染为{ title: '序号',render: _CODE_(_, record, index) => index + 1_CODE_ }
+    如果是下拉框列(所对应的查询项明确是下拉框),请加入render:_CODE_text=>对应的options.find(item=>item.value===text)?.label_CODE_
+    如果列需要过滤请加上filters:[],onFilter: _CODE_(value, record) => record[对应的英文名词].includes(value)_CODE_
+5.功能按钮
+    functionButtion:[{btn:'btn',action:'操作动词'}]
+    如果和表格行操作重复请在action加上BySelected前缀
+    如果是导出功能,对应的动词为export+对应的英文名词,没有名词则为exportData
+6.下拉选项字典
+    optionDict:{_CODE_对应的英文名词Options_CODE:[]]}
+    数组值为对应列展示的内容组成的类似{label:'',value:''}的数组
+最后输出一个JSON对象,不要包含任何Markdown标签,格式如下
+    { tabs: [], table: {}, formItems: [], optionDict: {}, functionButton: []}
+`

package/src/prompts/watch-part.js

@@ -0,0 +1,26 @@
+module.exports = `
+识别图片页面结构输出一个JSON对象,不要包含任何Markdown标签
+1.表格
+    { columns:[{ title: '普通列', dataIndex:'对应的英文名词' }]}
+    ⚠️⚠️⚠️注意：
+    请不要在columns里加上操作列
+    如果列需要排序请加上sorter:true
+    如果是时间列,请加入render:_CODE_text=>timeRender({time:text})_CODE_
+    如果是序号列直接渲染为{ title: '序号',render: _CODE_(_, record, index) => index + 1_CODE_ }
+    如果是下拉框列(所对应的查询项明确是下拉框),请加入render:_CODE_text=>对应的options.find(item=>item.value===text)?.label_CODE_
+    如果列需要过滤请加上filters:[],onFilter: _CODE_(value, record) => record[对应的英文名词].includes(value)_CODE_
+2.查询表单
+    formItems: [{ label: '文本', name: '对应的英文名词' }],
+    ⚠️⚠️⚠️注意：
+    如果是下拉框,请加入type:'select',options:_CODE_对应的英文名词Options_CODE_
+    如果是时间范围查询,请加入type:'daterange',name:'对应的英文名词start,对应的英文名词end'
+3.下拉选项字典
+    optionDict:{_CODE_对应的英文名词Options_CODE:[]]}
+    数组值为对应列展示的内容组成的类似{label:'',value:''}的数组
+4.弹窗表单
+    modalItems:[{label:'基础项',name:'对应的英文名词',type:'text',rules:[{required:true,message:'字段不能为空'}]}]
+    ⚠️⚠️⚠️注意:
+    type:text/date/daterange/radio/checkbox/select/auto/textarea,如果是text可以省略
+    如果type是auto/radio/select/checkbox,请加入options:_CODE_对应的英文名词Options_CODE_
+    ** 只输出modalItems就可以，不需要对应的formItems和columns **
+`

package/src/services/llm.js

@@ -0,0 +1,66 @@
+const JSON5 = require('json5')
+const sharp = require('sharp')
+const OpenAI = require('openai')
+const config = require('../../config.js')
+const mockPrompt = require('../prompts/mock.js')
+const apiPrompt = require('../prompts/watch-api.js')
+const { UI_DESIGNER, API_DESIGNER, MOCK_DESIGNER } = require('../prompts/system.js')
+
+const openai = new OpenAI({ apiKey: process.env.API_KEY, baseURL: process.env.BASE_URL })
+
+const askAI = async (model, messages, retryCount = 0) => {
+
+    if (retryCount > 3) throw new Error('AI 重试次数耗尽，请检查网络或图片')
+
+    try {
+        const response = await openai.chat.completions.create({ model, messages, response_format: { type: 'json_object' } })
+        let raw = response.choices[0].message.content.trim()
+        raw = raw.replace(/^```json\n?/, '').replace(/\n?```$/, '')
+        const match = raw.match(/[\{\[][\s\S]*[\}\]]/)
+        return JSON5.parse(match ? match[0] : raw)
+    } catch (err) {
+        console.warn(`[解析失败，第 ${retryCount + 1} 次重试...]`, err.message)
+        return askAI(model, messages, retryCount + 1)
+    }
+}
+
+module.exports = {
+    generateMock: async (columns, fileName) => {
+        return askAI(
+            config.textModel,
+            [
+                { role: 'system', content: MOCK_DESIGNER },
+                { role: 'user', content: mockPrompt(columns, fileName) }
+            ]
+        )
+    },
+    recognizePage: async (prompt, filePath) => {
+        const compressedBuffer = await sharp(filePath)
+            .resize(1280, null, { withoutEnlargement: true })
+            .jpeg({ quality: 80 })
+            .toBuffer()
+        const base64Image = compressedBuffer.toString('base64')
+        return askAI(
+            config.visionModel,
+            [
+                { role: 'system', content: UI_DESIGNER },
+                {
+                    role: 'user',
+                    content: [
+                        { type: 'text', text: prompt },
+                        { type: 'image_url', image_url: { url: `data:image/png;base64,${base64Image}` } }
+                    ]
+                }
+            ]
+        )
+    },
+    alignSwaggerFields: async (swaggerStr, resourceStr) => {
+        return askAI(
+            config.textModel,
+            [
+                { role: 'system', content: API_DESIGNER },
+                { role: 'user', content: apiPrompt(swaggerStr, resourceStr) }
+            ]
+        )
+    }
+}

package/src/utils/utils.js

@@ -0,0 +1,69 @@
+const fs = require('fs')
+const path = require('path')
+const config = require('../../config.js')
+
+
+/**
+ * 大模型输出的标准 JSON 无法携带 render: (text) => <Tag> 等箭头函数。
+ * 我们在 Prompt 中要求大模型用 _CODE_ 占位符包裹函数字符串，
+ * 在此处用正则剥离外层的双引号和占位符，将其还原为真正的可执行 JS 代码。
+ */
+const cleanCode = str => {
+    return str
+        .replace(/"(\w+)":/g, '$1:') // 去掉 key 的双引号
+        .replace(/"/g, "'")          // 双引号全部转单引号
+        .replace(/['"]_CODE_([\s\S]*?)_CODE_['"]/g, '$1') // 去掉 _CODE_ 包裹的代码
+        .replace(/_CODE_/g, '')      // 兜底清理
+        .replace(/[ \t]+$/gm, '')    // 去除每一行行尾的多余空格
+        .replace(/\n{3,}/g, '\n\n')  // 将3个或以上的换行符压缩成2个换行符
+        .replace(/^\s+/, '')         // 去掉文件头部的空行
+        .trim() + '\n'
+}
+
+const copyHooks = options => {
+    const targetDir = path.join(process.cwd(), config.hooksDir)
+    if (!fs.existsSync(targetDir)) fs.mkdirSync(targetDir, { recursive: true })
+    const hookDir = path.join(__dirname, `../../templates/${options.template}/hooks`)
+    fs.readdirSync(hookDir).forEach(file => fs.copyFileSync(path.join(hookDir, file), path.join(targetDir, file)))
+}
+
+const copyComponents = options => {
+    const targetDir = path.join(process.cwd(), config.componentsDir)
+    if (!fs.existsSync(targetDir)) fs.mkdirSync(targetDir, { recursive: true })
+    const componentsDir = path.join(__dirname, `../../templates/${options.template}/components`)
+    fs.readdirSync(componentsDir).forEach(file => fs.copyFileSync(path.join(componentsDir, file), path.join(targetDir, file)))
+}
+
+const getExistingMenus = (dir = config.pagesDir) => {
+    const pagesDir = path.join(process.cwd(), dir)
+    if (!fs.existsSync(pagesDir)) return []
+    return fs.readdirSync(pagesDir)
+        .filter(file => fs.statSync(path.join(pagesDir, file)).isDirectory())
+        .map(file => ({ label: file, key: file }))
+}
+
+const generateSmartImports = (codeStr, hasTabs) => {
+    const hooksLib = ['useTableQuery']
+    const reactLib = ['useState', 'useEffect', 'useRef', 'useMemo']
+    const componentsLib = ['MyTable', 'MyModalForm', 'MySearchForm']
+    const antdLib = ['Card', 'Space', 'Modal', 'Button', 'Alert', 'Table', 'Input', 'Select']
+
+    const usedAntd = antdLib.filter(name => new RegExp(`\\b${name}\\b`).test(codeStr))
+    const usedHooks = hooksLib.filter(name => new RegExp(`\\b${name}\\b`).test(codeStr))
+    const usedReact = reactLib.filter(name => new RegExp(`\\b${name}\\b`).test(codeStr))
+    const usedComps = componentsLib.filter(name => new RegExp(`\\b${name}\\b`).test(codeStr))
+
+    const imports = [
+        usedReact.length && `import { ${usedReact.join(', ')} } from 'react'`,
+        `import { Link, history } from 'umi'`,
+        `import { request } from '../../utils/request'`,
+        `import { ${hasTabs ? 'tabs, ' : ''}columns, formItems, modalItems } from './resource'`,
+        ...usedHooks.map(hook => `import { ${hook} } from '../../hooks/${hook}'`),
+        ...usedComps.map(comp => `import { ${comp} } from '../../components/${comp}'`),
+        usedAntd.length && `import { Form,${usedAntd.join(', ')} } from 'antd'`
+    ].sort((a, b) => a.length - b.length)
+
+    return imports.filter(Boolean).join('\n')
+}
+
+module.exports = { copyHooks, cleanCode, copyComponents, getExistingMenus, generateSmartImports }

package/templates/react/components/EditableCell.js

@@ -0,0 +1,76 @@
+import { Form, Input, InputNumber, Select, Checkbox } from 'antd'
+import React, { useRef, useState, useEffect, useContext } from 'react'
+
+const EditableContext = React.createContext(null)
+
+export const EditableRow = ({ index, ...props }) => {
+    const [form] = Form.useForm()
+    return (
+        <Form form={form} component={false}>
+            <EditableContext.Provider value={form}>
+                <tr {...props} />
+            </EditableContext.Provider>
+        </Form>
+    )
+}
+
+export const EditableCell = ({ title, record, editable, children, dataIndex, handleSave, rules = [], options = [], editType = 'text', ...restProps }) => {
+
+    const inputRef = useRef(null)
+    const form = useContext(EditableContext)
+
+    const [editing, setEditing] = useState(false)
+
+    useEffect(() => {
+        if (editing) {
+            inputRef.current?.focus()
+        }
+    }, [editing])
+
+    const toggleEdit = () => {
+        setEditing(!editing)
+        form.setFieldsValue({ [dataIndex]: record[dataIndex] })
+    }
+
+    const save = async () => {
+        try {
+            const values = await form.validateFields()
+            toggleEdit()
+            handleSave({ ...record, ...values })
+        } catch (errInfo) {
+            console.log('保存失败:', errInfo)
+        }
+    }
+
+    let inputNode
+
+    switch (editType) {
+        case 'number':
+            inputNode = <InputNumber ref={inputRef} onPressEnter={save} onBlur={save} />
+            break
+        case 'select':
+            inputNode = <Select ref={inputRef} options={options} onBlur={save} open={true} />
+            break;
+        case 'checkbox':
+            inputNode = <Checkbox.Group options={options} onChange={save} />
+            break;
+        default:
+            inputNode = <Input ref={inputRef} onPressEnter={save} onBlur={save} />
+    }
+
+    return (
+        <td {...restProps}>
+            {editable ? (
+                editing ? (
+                    <Form.Item rules={rules} name={dataIndex} style={{ margin: 0 }}>
+                        {inputNode}
+                    </Form.Item>
+                ) : (
+                    <div onClick={toggleEdit} className='editable-cell-value-wrap' style={{ paddingRight: 24, minHeight: 32, cursor: 'pointer' }}>
+                        {children}
+                    </div>
+                )
+            ) : (children)}
+        </td>
+    )
+}

package/templates/react/components/MyBaseForm.js

@@ -0,0 +1,47 @@
+import { Form } from 'antd'
+import { formNode } from './index'
+
+export const MyBaseForm = ({ item, form }) => {
+
+    const renderFormContent = item => {
+
+        if (!item.name) {
+            return typeof item.render === 'function' ? item.render(item) : (item.value ?? '-')
+        }
+
+        const inputNode = (
+            <Form.Item noStyle name={item.name} rules={item.rules} initialValue={item.value}>
+                {formNode({ item })}
+            </Form.Item>
+        )
+
+        if (item.unit) {
+            return (
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <div style={{ flex: 1, minWidth: 0 }}>{inputNode}</div>
+                    <span style={{ color: '#888', whiteSpace: 'nowrap' }}>{item.unit}</span>
+                </div>
+            )
+        }
+
+        return inputNode
+    }
+
+    return (
+        <Form.Item
+            name={item.name}
+            label={item.label}
+            rules={item.rules}
+            extra={item.extra}
+            tooltip={item.tooltip}
+            labelCol={item.labelCol}
+            initialValue={item.value}
+            wrapperCol={item.wrapperCol}
+            valuePropName={item.valuePropName}
+            required={item.required ?? !!item.rules}
+            style={{ marginBottom: !item.name ? 0 : undefined, ...item.style }}
+        >
+            {item.render ? (typeof item.render === 'function' ? item.render(item, form) : item.render) : renderFormContent({ item })}
+        </Form.Item>
+    )
+}

package/templates/react/components/MyModalForm.js

@@ -0,0 +1,51 @@
+import { formNode } from './index'
+import { useState, useEffect } from 'react'
+import { Row, Col, Form, Modal, } from 'antd'
+import { MyBaseForm } from './MyBaseForm'
+
+export const MyModalForm = ({ width, title, submit, record, visible, setModal, labelCol, formItems, wrapperCol, onValuesChange }) => {
+
+    const [form] = Form.useForm()
+    const [pending, setPending] = useState(false)
+
+    useEffect(() => {
+        if (visible) {
+            form.resetFields()
+            if (record && Object.keys(record).length > 0) {
+                form.setFieldsValue(record)
+            }
+        }
+    }, [visible, record, form])
+
+    const handleOk = async () => {
+        try {
+            const values = await form.validateFields()
+            if (submit) {
+                setPending(true)
+                await submit({ ...record, ...values })
+                setPending(false)
+            }
+        } catch (error) {
+            console.log('表单校验失败:', error)
+        }
+    }
+
+    const handleCancel = () => {
+        setModal({ visible: false })
+        form.resetFields()
+    }
+
+    return (
+        <Modal centered title={title} width={width} open={visible} onOk={handleOk} destroyOnHidden onCancel={handleCancel} confirmLoading={pending}>
+            <Form form={form} preserve={false} labelCol={labelCol} wrapperCol={wrapperCol} onValuesChange={(changed, all) => onValuesChange?.({ changed, all, form, record })}>
+                <Row gutter={[24, 0]}>
+                    {formItems.map((item, index) =>
+                        <Col span={item.span ?? 24} key={item.name || index}>
+                            <MyBaseForm item={item} form={form} />
+                        </Col>
+                    )}
+                </Row>
+            </Form>
+        </Modal>
+    )
+}

package/templates/react/components/MyModalTable.js

@@ -0,0 +1,40 @@
+import { Modal } from 'antd'
+import { MyTable } from './MyTable'
+import { MySearchForm } from './MySearchForm'
+import { useTableQuery } from '../hooks/useTableQuery'
+
+
+export const MyModalTable = ({ onOk, title, width, footer, visible, request, columns, setModal, formItems, rowSelection, extraParams = {} }) => {
+
+    const { total, loading, dataSource, search, setSearch } = useTableQuery(async params => await request({ ...params, ...extraParams }), {})
+
+    const handleSearch = values => setSearch({ ...search, ...values, pageNo: 1 })
+
+    const handleTableChange = (pagination, filters, sorter) => setSearch({ ...search, pageNo: pagination.current, pageSize: pagination.pageSize, orderBy: sorter.column ? sorter.field : undefined })
+
+    const handleOk = () => {
+        if (onOk) {
+            onOk({ selectedRows: rowSelection?.selectedRows, dataSource })
+        }
+        setModal({ visible: false })
+    }
+
+    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} />}
+            <MyTable
+                loading={loading}
+                columns={columns}
+                scroll={{ y: 400 }}
+                dataSource={dataSource}
+                rowSelection={rowSelection}
+                onChange={handleTableChange}
+                pagination={{
+                    total: total,
+                    showSizeChanger: true,
+                    current: search.pageNo,
+                    pageSize: search.pageSize,
+                }} />
+        </Modal>
+    )
+}

package/templates/react/components/MySearchForm.js

@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import { MyBaseForm } from './MyBaseForm'
+import { Row, Col, Form, Button, Space } from 'antd'
+
+export const MySearchForm = ({ form, search, labelCol, setSearch, formItems, showLimit = 7, customReset, extraOperate, customFinish, onValuesChange, defaultPageSize = 10 }) => {
+
+    const [limit, setLimit] = useState(showLimit)
+
+    const handleReset = () => {
+        if (customReset) {
+            customReset()
+        } else {
+            setSearch({ pageNo: 1, pageSize: search.pageSize ?? defaultPageSize })
+        }
+    }
+
+    const handleFinish = values => {
+        if (customFinish) {
+            customFinish(values)
+        } else {
+            setSearch({ ...search, ...values, pageNo: 1 })
+        }
+    }
+
+    return (
+        <Form onFinish={handleFinish} labelCol={labelCol} onValuesChange={onValuesChange}>
+            <Row gutter={24}>
+                {formItems.slice(0, limit)?.map((item, ind) => (
+                    <Col key={ind} span={item.span ?? 6}>
+                        <MyBaseForm item={item} form={form} />
+                    </Col>
+                ))}
+                <Col flex='auto' style={{ textAlign: 'right' }}>
+                    <Form.Item>
+                        <Space>
+                            <Button type='primary' htmlType='submit'>查询</Button>
+                            <Button onClick={handleReset} htmlType='reset'>重置</Button>
+                            {extraOperate}
+                            {formItems.length > showLimit && (<a onClick={() => setLimit(formItems.length > limit ? formItems.length : 7)}>{formItems.length > limit ? '展开' : '收起'}</a>)}
+                        </Space>
+                    </Form.Item>
+                </Col>
+            </Row>
+        </Form>
+    )
+}

package/templates/react/components/MyTable.js

@@ -0,0 +1,48 @@
+import { Table } from 'antd'
+import { EditableRow, EditableCell } from './EditableCell'
+
+const components = {
+    body: {
+        row: EditableRow,
+        cell: EditableCell,
+    }
+}
+
+export const MyTable = ({ size, onSave, onChange, pagination, columns = [], rowSelection, rowKey = 'id', loading = false, dataSource = [], editable = false, scroll = { x: 'max-content' }, ...restProps }) => {
+
+    const mergedColumns = columns.map(col => {
+        if (!col.editable) {
+            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,
+            }),
+        }
+    })
+
+    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' : undefined}
+        />
+    )
+}

package/templates/react/components/index.js

@@ -0,0 +1,40 @@
+import { Radio, Input, Upload, Select, Cascader, Checkbox, DatePicker, InputNumber, AutoComplete } from 'antd'
+
+export const formNode = ({ item }) => {
+
+    if (typeof item.render === 'function') {
+        return item.render(item)
+    }
+
+    const commonProps = {
+        disabled: item.readOnly,
+        style: { width: item.width ?? '100%' },
+        placeholder: item.placeholder ?? `请${['select', 'cascader', 'date', 'daterange'].includes(item.type) ? '选择' : '输入'}`,
+        ...item.props
+    }
+
+    switch (item.type) {
+        case 'date':
+            return <DatePicker {...commonProps} />
+        case 'number':
+            return <InputNumber  {...commonProps} />
+        case 'daterange':
+            return <DatePicker.RangePicker {...commonProps} />
+        case 'radio':
+            return <Radio.Group options={item.options} {...commonProps} />
+        case 'auto':
+            return <AutoComplete options={item.options} {...commonProps} />
+        case 'checkbox':
+            return <Checkbox.Group options={item.options} {...commonProps} />
+        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} />
+        case 'upload':
+            return <Upload {...item.uploadProps} {...commonProps}>{item.content ?? '上传文件'}</Upload>
+        default:
+            return <Input allowClear {...commonProps} />
+    }
+}

package/templates/react/hooks/useTableQuery.js

@@ -0,0 +1,40 @@
+import { useRef, useState, useEffect, useCallback } from 'react'
+
+export const useTableQuery = (api, formatResponse, initialParams = {}) => {
+
+    const [total, setTotal] = useState(0)
+    const [loading, setLoading] = useState(false)
+    const [dataSource, setDataSource] = useState([])
+    const [search, setSearch] = useState({ pageNo: 1, pageSize: 10, ...initialParams })
+
+    const apiRef = useRef(api)
+    const fetchIdRef = useRef(0)
+
+    useEffect(() => {
+        apiRef.current = api
+    }, [api])
+
+    const fetchData = useCallback(async () => {
+        if (!apiRef.current) return
+        setLoading(true)
+        const currentFetchId = ++fetchIdRef.current
+        try {
+            const response = await apiRef.current(search)
+            if (currentFetchId !== fetchIdRef.current) return
+            setDataSource(formatResponse(response))
+            setTotal(response?.total || 0)
+        } catch (error) {
+            console.error('查询失败', error)
+        } finally {
+            if (currentFetchId === fetchIdRef.current) {
+                setLoading(false)
+            }
+        }
+    }, [search])
+
+    useEffect(() => {
+        fetchData()
+    }, [fetchData])
+
+    return { total, loading, dataSource, search, setSearch, refresh: fetchData }
+}