@yorha2b-lab/autodev 1.0.20 → 1.0.22

package/package.json

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

package/templates/react/components/MyBaseForm.js

@@ -2,32 +2,39 @@ import { formNode } from './index'
 import { Form, Space, Button } from 'antd'
 import { PlusOutlined, PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons'
 
-export const MyBaseForm = ({ item, form }) => {
+const getValueFromEvent = e => {
+    if (Array.isArray(e)) {
+        return e
+    }
+    return e?.fileList
+}
 
-    const renderFormContent = ({ item }) => {
+const renderFormContent = ({ item }) => {
 
-        if (!item.name) {
-            return item.value
-        }
+    if (!item.name) {
+        return item.value
+    }
 
-        const inputNode = (
-            <Form.Item noStyle name={item.name} rules={item.rules} initialValue={item.value} valuePropName={item.valuePropName}>
-                {formNode({ item })}
-            </Form.Item>
+    const inputNode = (
+        <Form.Item noStyle name={item.name} rules={item.rules} initialValue={item.value} {...(item.type === 'upload' ? { getValueFromEvent, valuePropName: 'fileList' } : { valuePropName: item.valuePropName })}>
+            {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>
         )
+    }
 
-        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 inputNode
-    }
 
+export const MyBaseForm = ({ item, form }) => {
     return (
         item.isList ?
             <Form.List name={item.name} initialValue={item.value}>

package/templates/react/components/index.js

@@ -1,4 +1,70 @@
-import { Tree, Radio, Input, Upload, Select, Cascader, Checkbox, DatePicker, InputNumber, TreeSelect, AutoComplete } from 'antd'
+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 initOss = async () => {
+    /* 初始化OSS客户端，请自行实现 */
+}
+
+const AliyunOSSUpload = ({ style, value, disabled, onChange }) => {
+
+    const [OSSData, setOSSData] = useState()
+
+    const init = async () => {
+        try {
+            const result = await initOss()
+            setOSSData(result)
+        } catch (err) {
+            console.log(err)
+        }
+    }
+
+    useEffect(() => {
+        init()
+    }, [])
+
+    const handleChange = ({ fileList }) => onChange?.([...fileList])
+
+    const onRemove = file => {
+        const files = (value || []).filter(v => v.url !== file.url)
+        onChange?.(files)
+    }
+
+    const getExtraData = file => ({
+        key: file.url,
+        policy: OSSData?.policy,
+        Signature: OSSData?.signature,
+        OSSAccessKeyId: OSSData?.accessId,
+    })
+
+    const beforeUpload = async file => {
+        if (!OSSData) {
+            return false
+        }
+        const expire = Number(OSSData.expire) * 1000
+        if (expire < Date.now()) {
+            await init()
+        }
+        file.url = `${OSSData.dir}/${file.name}`.replace(/\/\//g, '/')
+        return file
+    }
+
+    const uploadProps = {
+        onRemove,
+        name: 'file',
+        beforeUpload,
+        fileList: value,
+        data: getExtraData,
+        action: OSSData?.host,
+        onChange: handleChange,
+    }
+
+    return (
+        <Upload {...uploadProps} disabled={disabled} style={style}>
+            <Button icon={<UploadOutlined />}>选择文件</Button>
+        </Upload>
+    )
+}
 
 export const formNode = ({ item }) => {
 
@@ -14,6 +80,8 @@ export const formNode = ({ item }) => {
             return <DatePicker {...commonProps} />
         case 'number':
             return <InputNumber  {...commonProps} />
+        case 'ossUpload':
+            return <AliyunOSSUpload {...commonProps} />
         case 'daterange':
             return <DatePicker.RangePicker {...commonProps} />
         case 'radio':