@yorha2b-lab/autodev 3.2.0 → 3.3.0

package/example/example.json

@@ -21,7 +21,7 @@
         "columns": [
             {
                 "title": "职业",
-                "dataIndex": "jobName",
+                "dataIndex": "job",
                 "type": "text"
             },
             {
@@ -29,35 +29,50 @@
                 "dataIndex": "firstAwakening",
                 "type": "text"
             },
+            {
+                "title": "一觉立绘",
+                "dataIndex": "firstAwakeningImage",
+                "type": "image"
+            },
             {
                 "title": "二觉",
                 "dataIndex": "secondAwakening",
                 "type": "text"
             },
+            {
+                "title": "二觉立绘",
+                "dataIndex": "secondAwakeningImage",
+                "type": "image"
+            },
             {
                 "title": "三觉",
                 "dataIndex": "thirdAwakening",
                 "type": "text"
             },
+            {
+                "title": "三觉立绘",
+                "dataIndex": "thirdAwakeningImage",
+                "type": "image"
+            },
             {
                 "title": "武器类型",
                 "dataIndex": "weaponType",
-                "type": "enum"
+                "type": "tag"
             },
             {
                 "title": "职业类型",
                 "dataIndex": "jobType",
-                "type": "enum"
+                "type": "tag"
             },
             {
                 "title": "登场时间",
-                "dataIndex": "launchDate",
+                "dataIndex": "releaseDate",
                 "type": "date"
             }
         ],
-        "pagination": true,
-        "expandable": true,
         "rowSelection": true,
+        "expandable": true,
+        "pagination": true,
         "operation": [
             {
                 "label": "查看",
@@ -76,7 +91,7 @@
     "formItems": [
         {
             "label": "转职职业",
-            "name": "transferJob",
+            "name": "jobTransfer",
             "type": "select"
         },
         {
@@ -91,62 +106,42 @@
         },
         {
             "label": "觉醒名称关键词",
-            "name": "awakeningNameKeyword"
+            "name": "awakeningKeyword",
+            "type": "text"
         },
         {
             "label": "登场时间",
-            "name": "launchDateStart,launchDateEnd",
+            "name": "releaseDateStart,releaseDateEnd",
             "type": "daterange"
         }
     ],
-    "staticInfo": {
-        "has": false,
-        "text": ""
-    },
+    "staticInfo": {},
     "optionDict": {
-        "transferJobOptions": [
+        "jobTransferOptions": [
             {
-                "label": "剑魂",
-                "value": "soulBender"
-            },
-            {
-                "label": "狂战士",
-                "value": "berserker"
+                "label": "选择转职",
+                "value": "selectJob"
             }
         ],
-        "weaponTypeOptions": [
-            {
-                "label": "光剑",
-                "value": "lightSword"
-            },
-            {
-                "label": "太刀",
-                "value": "katana"
-            },
-            {
-                "label": "巨剑",
-                "value": "greatSword"
-            }
-        ],
-        "jobTypeOptions": [
-            {
-                "label": "物理",
-                "value": "physical"
-            },
-            {
-                "label": "魔法",
-                "value": "magic"
-            }
-        ]
+        "weaponTypeOptions": [],
+        "jobTypeOptions": []
     },
     "functionButton": [
+        {
+            "btn": "查询",
+            "action": "search"
+        },
+        {
+            "btn": "重置",
+            "action": "reset"
+        },
         {
             "btn": "批量删除",
-            "action": "deleteBySelected"
+            "action": "batchDeleteBySelected"
         },
         {
             "btn": "批量导出",
-            "action": "exportJobData"
+            "action": "exportData"
         }
     ],
     "pageStruct": [

package/package.json

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

package/src/core/react-compiler.js

@@ -1,3 +1,4 @@
+const stringify = require('json-stringify-pretty-compact')
 const { cleanCode, generateSmartImports, formatFormItemAndColumns } = require('../utils/utils.js')
 
 /**
@@ -9,21 +10,29 @@ const { cleanCode, generateSmartImports, formatFormItemAndColumns } = require('.
  */
 const resource = ({ pageConfig, resourceTpl }) => {
 
+    const { formItems, processedColumns, dictBlocks } = formatFormItemAndColumns({ pageConfig })
+
     const hasTabs = pageConfig.tabs?.length > 0
+    const hasFormItems = pageConfig.formItems?.length > 0
+    const hasDateColumn = processedColumns.some(item => item.type === 'date')
 
-    const { formItems, processedColumns, dictBlocks } = formatFormItemAndColumns({ pageConfig })
+    const columnsData = processedColumns.map(item => {
+        delete item.type
+        return item
+    })
 
     const viewData = {
         hasTabs,
-        formItems,
+        hasFormItems,
         tabs: pageConfig.tabs,
         dictBlocks: dictBlocks.map(item => ({ name: item, data: pageConfig.optionDict[item] ?? [] })),
         formItemsData: hasTabs ? Object.fromEntries(pageConfig.tabs.map(tab => [tab.key, formItems])) : formItems,
-        columnsData: hasTabs ? Object.fromEntries(pageConfig.tabs.map(tab => [tab.key, processedColumns])) : processedColumns,
+        columnsData: hasTabs ? Object.fromEntries(pageConfig.tabs.map(tab => [tab.key, columnsData])) : columnsData,
     }
 
-    const rawCode = resourceTpl(viewData)
-    return cleanCode(rawCode)
+    const bodyCode = resourceTpl(viewData)
+    const importsStr = generateSmartImports({ module: 'resource', hasTabs, bodyCode, hasFormItems, hasDateColumn })
+    return cleanCode(`${importsStr}\n\n${bodyCode}`)
 }
 
 /**
@@ -38,23 +47,31 @@ const index = ({ config, fileName, indexTpl, pageConfig }) => {
 
     const hasTabs = pageConfig.tabs?.length > 0
     const hasFormItems = pageConfig.formItems?.length > 0
-    const hasOperate = pageConfig.table.operation?.length > 0
+    const hasOperate = pageConfig.table?.operation?.length > 0
+    const hasImageColumn = pageConfig.table?.columns?.some(item => item.type === 'image')
     const pageStruct = pageConfig.pageStruct?.filter(item => item.toLowerCase() !== 'tabs') || []
     const functionButtons = pageConfig.functionButton?.filter(item => !['查询', '重置'].includes(item.btn)) || []
     const hasFunctionButtons = functionButtons.length > 0
+    const needRenderAction = hasImageColumn
 
     let columnsValue = hasTabs ? 'columns[activeKey]' : 'columns'
     if (hasOperate) {
         columnsValue = `${columnsValue}.concat(operate)`
     }
 
+    const imgAction = Object.fromEntries(pageConfig.table?.columns?.filter(item => item.type === 'image')?.map(item => [item.dataIndex, `_CODE_(_, record) => <a onClick={() => showImg(record, '${item.dataIndex}')}>查看图片</a>_CODE_`]))
+    const renderAction = `{${stringify.default({ ...imgAction }, { indent: 4, maxLength: 120 })}}`.replace(/\n/g, '\n    ')
+
     const viewData = {
         hasTabs,
         fileName,
         hasOperate,
         columnsValue,
         hasFormItems,
+        renderAction,
+        hasImageColumn,
         functionButtons,
+        needRenderAction,
         tabs: pageConfig.tabs,
         responseSuccess: config.responseSuccess,
         hasExpandable: pageConfig.table.expandable,
@@ -67,7 +84,7 @@ const index = ({ config, fileName, indexTpl, pageConfig }) => {
     }
 
     const bodyCode = indexTpl(viewData)
-    const importsStr = generateSmartImports({ bodyCode, hasTabs, hasFormItems })
+    const importsStr = generateSmartImports({ module: 'index', hasTabs, bodyCode, hasFormItems })
     return cleanCode(`${importsStr}\n\n${bodyCode}`)
 }
 

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

@@ -34,11 +34,14 @@ module.exports = `
 - **配置项**: [pagination, expandable, rowSelection] 均为布尔值false,只有页面明确有对应功能时才为true。
 - **标准定义 (Columns)**:
     - ⚠️ **操作锁定**: 严禁在 columns 数组中包含“操作”列。
-    - date: 时间/日期列
+    - enum: 枚举列
     - money: 金额列
     - index: 序号列
-    - enum: 枚举列
+    - image: 图片列
+    - date: 时间/日期列
     - text: 普通文本（默认）
+    - tag: 标签列(有背景色的标签)
+    - badge: 徽标列(文本前有颜色小圆点)
     - **行操作 (Operation)**: [{label:'操作名', action:'动词ByRecord'}]。
 
 ### 全局功能按钮 (FunctionButton)
@@ -49,7 +52,7 @@ module.exports = `
 ## 3. 布局逻辑编排 (Page Structure)
 - **字段**: [pageStruct] 定义从上至下的物理堆叠顺序。
 - **白名单**: 只能从 [AlertInfo, MySearchForm, FunctionButtonsBlock, MyTable] 中选择。
-- **⚠️ 约束**: 严禁在 pageStruct 中包含 Tabs 或其他未定义组件；并且只有真实存在的组件才能被包含。
+- **⚠️ 约束**: 严禁在 pageStruct 中包含 其他未定义组件；并且只有真实存在的组件才能被包含。
 
 ## 4. 输出约束 (Output Format)
 - **格式**: 纯 JSON 对象，严禁 Markdown 标签包围。

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

@@ -15,11 +15,14 @@ module.exports = `
     - ***⚠️⚠️⚠️严禁输出formItems,只允许输出coloumns⚠️⚠️⚠️***
 - **标准定义 (Columns)**:
     - ⚠️ **操作锁定**: 严禁在 columns 数组中包含“操作”列。
-    - date: 时间/日期列
+    - enum: 枚举列
     - money: 金额列
     - index: 序号列
-    - enum: 枚举列
+    - image: 图片列
+    - date: 时间/日期列
     - text: 普通文本（默认）
+    - tag: 标签列(有背景色的标签)
+    - badge: 徽标列(文本前有颜色小圆点)
     - **行操作 (Operation)**: [{label:'操作名', action:'动词ByRecord'}]
 
 ## 2. 表单 (Form)

package/src/utils/utils.js

@@ -244,7 +244,9 @@ const formatFormItemAndColumns = ({ pageConfig }) => {
         money: 'text => moneyRender(text)',
         date: 'text => timeRender({time: text})',
         index: '(_, record, index) => index + 1',
-        enum: dataIndex => `text => ${dataIndex}Options.find(item => item.value === text)?.label??text`
+        tag: `text => <Tag color='magenta'>{text}</Tag>`,
+        badge: `text => <Badge status='success' text={text} />`,
+        enum: dataIndex => `text => ${dataIndex}Options.find(item => item.value === text)?.label??text`,
     }
 
     const columns = pageConfig.table?.columns ?? pageConfig?.columns ?? []
@@ -259,16 +261,17 @@ const formatFormItemAndColumns = ({ pageConfig }) => {
     }))
 
     const processedColumns = columns?.map(col => {
+        if (['image'].includes(col.type)) {
+            return { ...col, renderAction: true }
+        }
         if (col.type && codePresets[col.type]) {
             // 💡 物理注入：根据标签，强行塞入标准化的 JS 代码字符串
             const renderCode = typeof codePresets[col.type] === 'function' ? codePresets[col.type](col.dataIndex) : codePresets[col.type]
-            delete col.type
             return {
                 ...col,
                 render: `_CODE_${renderCode}_CODE_` // 重新打标，交给 cleanCode 处理
             }
         }
-        delete col.type
         return col
     })
 
@@ -302,25 +305,32 @@ const copyTemplateDir = (options, templateSubDir, targetSubDir) => {
  * @param {boolean} hasTabs - 是否包含标签页
  * @returns {string} 拼接后的 import 语句
  */
-const generateSmartImports = ({ bodyCode, hasTabs, hasFormItems }) => {
+const generateSmartImports = ({ module, hasTabs, bodyCode, hasFormItems, hasDateColumn }) => {
+
     const hooksLib = ['useTableQuery']
+    const utilsLib = ['timeRender', 'moneyRender']
     const reactLib = ['useState', 'useEffect', 'useRef', 'useMemo']
-    const componentsLib = ['MyTable', 'MyModalForm', 'MySearchForm']
-    const antdLib = ['Card', 'Space', 'Modal', 'Button', 'Alert', 'Table', 'Input', 'Select']
+    const componentsLib = ['MyTable', 'MyImage', 'MyModalForm', 'MySearchForm']
+    const antdLib = ['Tag', 'Card', 'Badge', 'Space', 'Modal', 'Alert', 'Image', 'Table', 'Input', 'Select', 'Button']
 
     const usedAntd = antdLib.filter(name => new RegExp(`\\b${name}\\b`).test(bodyCode))
+    const usedUtils = utilsLib.filter(name => new RegExp(`\\b${name}\\b`).test(bodyCode))
     const usedHooks = hooksLib.filter(name => new RegExp(`\\b${name}\\b`).test(bodyCode))
     const usedReact = reactLib.filter(name => new RegExp(`\\b${name}\\b`).test(bodyCode))
     const usedComps = componentsLib.filter(name => new RegExp(`\\b${name}\\b`).test(bodyCode))
 
     const imports = [
         usedReact.length && `import { ${usedReact.join(', ')} } from 'react'`,
-        `import { request } from '../../utils/request'`,
-        `import { formatQuery } from '../../utils/utils'`,
+        usedAntd.length && `import { ${hasFormItems && module === 'index' ? 'Form, ' : ''}${usedAntd.join(', ')} } from 'antd'`,
         ...usedHooks.map(hook => `import { ${hook} } from '../../hooks/${hook}'`),
         ...usedComps.map(comp => `import { ${comp} } from '../../components/${comp}'`),
-        usedAntd.length && `import { ${hasFormItems ? 'Form, ' : ''}${usedAntd.join(', ')} } from 'antd'`,
-        `import { ${hasTabs ? 'tabs, ' : ''}${hasFormItems ? 'formItems, ' : ''}modalItems, tableColumns} from './resource'`,
+        ...(module === 'index' ? [
+            `import { request } from '../../utils/request'`,
+            `import { formatQuery } from '../../utils/utils'`,
+            `import { ${hasTabs ? 'tabs, ' : ''}${hasFormItems ? 'formItems, ' : ''}modalItems, tableColumns} from './resource'`
+        ] : [
+            usedUtils.length && `import { ${usedUtils.join(', ')} } from '../../utils/utils'`
+        ]),
     ].sort((a, b) => a.length - b.length)
 
     return imports.filter(Boolean).join('\n')

package/templates/react/components/MyImage.js

@@ -0,0 +1,11 @@
+import { Image } from 'antd'
+
+export const MyImage = ({ img, setImg }) => {
+    return (
+        <div style={{ display: 'none' }}>
+            <Image.PreviewGroup preview={{ visible: img.visible, onVisibleChange: vis => setImg({ ...img, visible: vis }) }}>
+                {img.list.map((img, index) => (<Image key={index} src={img} />))}
+            </Image.PreviewGroup>
+        </div>
+    )
+}

package/templates/react/components/MyTable.js

@@ -35,7 +35,7 @@ import { useRef, useMemo, useEffect, useCallback } from 'react'
  *   customSave={(row) => saveApi(row)}
  * />
  */
-export const MyTable = ({ size, query, total, search, autoScroll, onChange, pagination, 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' }, ...restProps }) => {
 
     const tableRef = useRef(null)
     const hasScrolledRef = useRef(false)
@@ -82,6 +82,9 @@ export const MyTable = ({ size, query, total, search, autoScroll, onChange, pagi
     const mergedColumns = useMemo(() => {
         return columns.map(col => {
             if (!col.editType) {
+                if (col.renderAction && renderAction[col.dataIndex]) {
+                    return { ...col, render: renderAction[col.dataIndex] }
+                }
                 return col
             }
             return {
@@ -102,7 +105,7 @@ export const MyTable = ({ size, query, total, search, autoScroll, onChange, pagi
                 }),
             }
         })
-    }, [columns, handleSave])
+    }, [columns, handleSave, renderAction])
 
     /**
      * @constant paginationConfig

package/templates/react/handlebars/MyTable.hbs

@@ -8,13 +8,16 @@
     search={search}
     loading={loading}
     dataSource={dataSource}
-    columns={ {{columnsValue}} }
     setDataSource={setDataSource}
+    columns={ {{columnsValue}} }
     {{#if hasExpandable}}
     {{{{raw}}}}
     expandable={{ onExpand, expandedRowKeys, expandedRowRender, columnWidth: 24 }}
     {{{{/raw}}}}
     {{/if}}
+    {{#if needRenderAction}}
+    renderAction={{{renderAction}}}
+    {{/if}}
     {{#if hasPagination}}
     {{{{raw}}}}
     onChange={(pagination, filters, sorter) => {

package/templates/react/handlebars/handleBlock.hbs

@@ -46,6 +46,20 @@ const expandedRowRender = record => (<div>自定义渲染</div>)
 
 {{/if}}
 
+
+{{#if hasImageColumn}}
+const showImg = (record, dataIndex) => {
+    const list = record[dataIndex]?.split(',') ?? []
+    const isUrl=list.some(item=>item.startsWith('http'))
+    if(isUrl){
+        setImg({ list, visible: true })
+    }else{
+        //自行解决图片路径问题
+    }
+}
+
+{{/if}}
+
 const modalSubmit = async values => {
     let response
     if(modal.type==='add'){

package/templates/react/handlebars/stateBlock.hbs

@@ -3,6 +3,9 @@ const rowKey = 'id'
 {{#if hasFormItems}}
 const [form] = Form.useForm()
 {{/if}}
+{{#if hasImageColumn}}
+const [img, setImg] = useState({})
+{{/if}}
 {{#if hasRowSelection}}
 const [selectedRows, setSelectedRows] = useState([])
 {{/if}}

package/templates/react/index.hbs

@@ -2,10 +2,10 @@ export default props => {
 
     {{> stateBlock }}
 
-    {{> hookBlock }}
-
     {{> handleBlock }}
 
+    {{> hookBlock }}
+
     {{#if hasOperate}}
     {{> tableOperate }}
     {{/if}}
@@ -22,6 +22,7 @@ export default props => {
     return (
         <Card {{#if hasTabs}}tabList={tabs} activeTabKey={activeKey} onTabChange={onTabChange}{{/if}}>
             {modal.visible && <MyModalForm {...modal} submit={modalSubmit} setModal={setModal} />}
+            {{#if hasImageColumn}}{img.visible && <MyImage img={img} setImg={setImg}/>}{{/if}}
             {{#each pageStruct as |partialName|}}
             {{> (partialName) @root }}
             {{/each}}

package/templates/react/resource.hbs

@@ -1,5 +1,3 @@
-import { timeRender } from '../../utils/utils'
-
 {{#if hasTabs}}
 export const tabs = {{{stringify tabs 50}}}
 {{/if}}
@@ -9,7 +7,7 @@ export const {{this.name}} = {{{stringify this.data 50}}}
 
 {{/each}}
 
-{{#if formItems.length}}
+{{#if hasFormItems}}
 export const formItems = {{{stringify formItemsData 150}}}
 {{/if}}