@yorha2b-lab/autodev 1.0.11 → 1.0.13

package/bin/autodev.js

@@ -6,9 +6,11 @@ const figlet = require('figlet')
 const { program } = require('commander')
 
 console.log(chalk.cyan(figlet.textSync('AutoDev', { horizontalLayout: 'full' })))
-console.log(chalk.gray('--------------------------------------------------'))
+console.log(chalk.gray('Booting System...'))
 console.log(chalk.white(' [System] ') + chalk.green('YoRHa No.2 Type B Unit: ') + chalk.cyan('Online'))
-console.log(chalk.white(' [Mission] ') + chalk.yellow('Generate Frontend CRUD: ') + chalk.cyan('Awaiting Command'))
+console.log(chalk.white(' [System] ') + chalk.green('Scanner Type 9S Unit: ') + chalk.cyan('Standby'))
+console.log(chalk.white(' [Mission] ') + chalk.yellow('Frontend Architecture Construction: ') + chalk.cyan('Awaiting Command'))
+console.log(chalk.white(' [Bunker] ') + chalk.magenta('Glory to mankind. (人类荣光永存)'))
 console.log(chalk.gray('--------------------------------------------------\n'))
 
 program.version('1.0.0').description('AI驱动的前端CRUD代码生成器')
@@ -20,13 +22,13 @@ program
     .action(() => {
         const tplConfig = path.resolve(__dirname, '../config.js')
         const tplEnv = path.resolve(__dirname, '../.env.example')
-        fs.copyFileSync(tplConfig, path.join(process.cwd(), 'config.js'))
         fs.copyFileSync(tplEnv, path.join(process.cwd(), '.env'))
+        fs.copyFileSync(tplConfig, path.join(process.cwd(), 'config.js'))
+        fs.mkdirSync(path.join(process.cwd(), 'swagger'), { recursive: true })
         fs.mkdirSync(path.join(process.cwd(), 'screenShot'), { recursive: true })
         fs.mkdirSync(path.join(process.cwd(), 'screenPart'), { recursive: true })
-        fs.mkdirSync(path.join(process.cwd(), 'swagger'), { recursive: true })
-        console.log('✅ 已生成 config.js')
-        console.log('✅ 已生成 .env')
+        console.log(chalk.cyan('📡 Operator 6O: 呼叫 2B，环境配置文件已下发至本地终端！'))
+        console.log(chalk.green('🤖 Pod 042: [报告] config.js 与 .env 存储完毕。'))
     })
 
 program

package/package.json

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

package/src/commands/watch-api.js

@@ -1,5 +1,7 @@
 const fs = require('fs')
+const ora = require('ora')
 const path = require('path')
+const chalk = require('chalk')
 const chokidar = require('chokidar')
 
 const watchApi = () => {
@@ -21,7 +23,8 @@ const watchApi = () => {
     watcher.on('add', async filePath => {
         const startTime = Date.now()
         const fileName = path.basename(filePath, path.extname(filePath))
-        console.log(`🚀 检测到新文件: ${fileName}, 开始识别...`)
+        const spinner = ora(chalk.cyan(`🤖 Pod 153: [报告] 侦测到未知的 Swagger 数据源 [${fileName}]，开始进行语义对齐...`))
+        spinner.start()
 
         try {
             const swaggerStr = fs.readFileSync(filePath, 'utf8')
@@ -35,9 +38,9 @@ const watchApi = () => {
             fs.writeFileSync(path.join(`./${config.pagesDir}/${fileName}/resource.js`), resourceStr.replace(/"(\w+)":/g, '$1:').replace(/"/g, "'"))
             const endTime = Date.now()
             //fs.unlinkSync(filePath)
-            console.log(`识别完成：耗时 ${(endTime - startTime) / 1000} 秒`)
+            spinner.succeed(chalk.green(`🤖 Pod 153: [肯定] 字段对齐协议执行完毕：耗时 ${(endTime - startTime) / 1000} 秒。9S 的骇客任务很顺利。`))
         } catch (error) {
-            console.error(`识别 ${fileName} 失败：`, error)
+            console.log(chalk.red(`🤖 Pod 153: [警告] 骇入 [${fileName}] 失败。接口数据遭遇强力防火墙：${error}`))
         }
     })
 }

package/src/commands/watch-page.js

@@ -1,20 +1,30 @@
 const fs = require('fs')
-const ora = require('ora')
+const ora = require('ora') // 命令行加载动画
 const path = require('path')
+const chalk = require('chalk')
 
+
+/**
+ * 监听截图目录，自动生成 CRUD 页面
+ * @param {Object} options - 命令行选项
+ * @param {string} options.template - 前端框架模板（react/vue/angular）
+ */
 const watchPage = options => {
 
-    const chokidar = require('chokidar')
-    const Handlebars = require('handlebars')
-    const pagePrompt = require('../prompts/watch-page.js')
-    const { createTaskQueue } = require('../core/task-queue')
-    const stringify = require('json-stringify-pretty-compact')
-    const { recognizePage, generateMock } = require('../services/llm.js')
-    const { getConfig, copyHooks, copyComponents, getExistingMenus } = require('../utils/utils.js')
+    const chokidar = require('chokidar') // 文件监听库
+    const Handlebars = require('handlebars') // 模板引擎
+    const pagePrompt = require('../prompts/watch-page.js') // 页面识别提示词
+    const { createTaskQueue } = require('../core/task-queue') // 任务队列，控制并发
+    const stringify = require('json-stringify-pretty-compact') // 格式化 JSON
+    const { recognizePage, generateMock } = require('../services/llm.js') // AI 服务
+    const { getConfig, copyHooks, copyComponents, getExistingMenus } = require('../utils/utils.js') // 工具函数
 
     const config = getConfig()
+
+    // 根据框架加载对应的编译器（react-compiler.js / vue-compiler.js 等）
     const compilerPath = path.join(__dirname, `../core/${options.template}-compiler.js`)
 
+    // 检查是否支持该框架
     if (!fs.existsSync(compilerPath)) {
         console.error(`\n❌ 糟糕！暂不支持 [${options.template}] 框架的自动生成。`)
         console.log(`💡 提示：目前仅内置了 react 编译器。`)
@@ -22,14 +32,17 @@ const watchPage = options => {
         return
     }
 
+    // 加载编译器的 index 和 resource 函数
     const { index, resource } = require(compilerPath)
 
     try {
+        // 首次运行时复制 hooks 和 components 模板到目标项目
         copyHooks(options)
         copyComponents(options)
     } catch (error) {
         console.error('❌ 程序运行出错:', error)
     }
+
     /**
      * 创建任务队列，限制并发数为 2。
      *
@@ -39,25 +52,36 @@ const watchPage = options => {
      * 3. 并发设为 2 是实测下来速度与稳定性的最佳平衡点。
      */
     const queue = createTaskQueue(2)
+
+    // 获取已有的菜单配置
     const menus = getExistingMenus()
+
+    // 加载模板文件
     const tplDir = path.join(__dirname, `../../templates/${options.template}`)
     const indexTpl = Handlebars.compile(fs.readFileSync(path.join(tplDir, 'index.hbs'), 'utf-8'))
     const resourceTpl = Handlebars.compile(fs.readFileSync(path.join(tplDir, 'resource.hbs'), 'utf-8'))
+
+    // 所有任务完成后统一更新菜单配置
     queue.onIdle(() => {
-        console.log('💾 所有排队的截图已处理完成，正在统一更新 menu 配置...')
+        console.log(chalk.green('🤖 Pod 042: [报告] 所有排队的视觉数据已解析完毕，正在向 Bunker 同步 Menu 路由配置...'))
         const constantDir = path.join(process.cwd(), config.utilsDir)
         if (!fs.existsSync(constantDir)) fs.mkdirSync(constantDir, { recursive: true })
+        // 格式化菜单配置为 JS 代码
         fs.writeFileSync(path.join(constantDir, 'constant.js'), `export const menus = ${stringify.default(menus, { indent: 4, maxLength: 50 })}`)
-        console.log('✅ Menu 配置更新成功！')
+        console.log(chalk.green('🤖 Pod 042: [肯定] Menu 配置同步成功。'))
     })
+
+    // 监听 screenShot 目录
     const watcher = chokidar.watch('./screenShot', {
-        persistent: true,
-        ignored: /(^|[\/\\])\../,
-        awaitWriteFinish: {
-            stabilityThreshold: 500,
-            pollInterval: 100
+        persistent: true, // 持续监听
+        ignored: /(^|[\/\\])\../, // 忽略隐藏文件
+        awaitWriteFinish: { // 等待文件写入完成
+            stabilityThreshold: 500, // 稳定性阈值（毫秒）
+            pollInterval: 100 // 轮询间隔
         }
     })
+
+    // 文件添加事件
     watcher.on('add', filePath => {
         queue.add(async () => {
             const startTime = Date.now()
@@ -66,27 +90,41 @@ const watchPage = options => {
             const targetDir = path.join(process.cwd(), config.pagesDir, fileName)
 
             try {
+                // 创建必要的目录
                 if (!fs.existsSync(mockDir)) fs.mkdirSync(mockDir, { recursive: true })
                 if (!fs.existsSync(targetDir)) fs.mkdirSync(targetDir, { recursive: true })
-                const spinner = ora(`🚀 Pod 042: 开始处理排队任务: ${fileName}...`)
+
+                const spinner = ora(chalk.cyan(`🤖 Pod 042: [报告] 捕获到新的视觉图像 [${fileName}]，开始执行构筑程序...`))
                 spinner.start()
+
+                // 1. 识别页面结构（调用视觉大模型）
                 const pageConfig = await recognizePage(pagePrompt, filePath)
+
+                // 2. 生成 resource.js（表格列、表单配置、字典等）
                 fs.writeFileSync(path.join(targetDir, 'resource.js'), resource({ pageConfig, resourceTpl }))
+
+                // 3. 生成 index.js（页面组件）
                 fs.writeFileSync(path.join(targetDir, 'index.js'), index({ fileName, indexTpl, pageConfig }))
+
+                // 4. 如果是新页面，添加到菜单配置
                 if (!menus.find(m => m.key === fileName)) {
                     menus.push({ label: fileName, key: fileName })
                 }
+
+                // 5. 生成 Mock 数据（可选）
                 if (config.needMock) {
-                    console.log(`🚀 开始生成 ${fileName} 的 Mock 数据...`)
+                    console.log(chalk.yellow(`🧑‍💻 9S: 交给我吧 2B！正在骇入并伪造 [${fileName}] 的 Mock 数据...`))
                     const rawContent = await generateMock(pageConfig.table.columns, fileName)
+                    // 格式化 Mock 数据
                     fs.writeFileSync(path.join(mockDir, `${fileName}.js`), `export default ${stringify.default(rawContent, { indent: 4, maxLength: 200 })}`.replaceAll(`"'`, `"`).replaceAll(`'"`, `"`))
-                    console.log(`生成 ${fileName} 的 Mock 数据耗时: ${(Date.now() - startTime) / 1000} 秒`)
+                    console.log(chalk.green(`🤖 Pod 042: [报告] Mock 数据注入完成，耗时: ${(Date.now() - startTime) / 1000} 秒`))
                 }
+
                 const endTime = Date.now()
-                //fs.unlinkSync(filePath)
-                spinner.succeed(`✅ Pod 042: 模块 [${fileName}] 装配完成！耗时 ${(endTime - startTime) / 1000} 秒`)
+                //fs.unlinkSync(filePath) // 可选：处理完成后删除截图
+                spinner.succeed(chalk.green(`🤖 Pod 042: [报告] 模块 [${fileName}] 物理装配完成！耗时 ${(endTime - startTime) / 1000} 秒`))
             } catch (error) {
-                console.error(`❌ 处理失败: ${filePath}`, error)
+                console.log(chalk.red(`🤖 Pod 042: [警告] 模块 [${fileName}] 构筑失败。原因：${error}`))
             }
         })
     })

package/src/commands/watch-part.js

@@ -1,4 +1,6 @@
 const fs = require('fs')
+const ora = require('ora')
+const chalk = require('chalk')
 const chokidar = require('chokidar')
 const stringify = require('json-stringify-pretty-compact')
 
@@ -18,7 +20,8 @@ const watchPart = () => {
     watcher.on('add', async filePath => {
         try {
             const startTime = Date.now()
-            console.log(`🚀 检测到新图片: 开始识别...`)
+            const spinner = ora(chalk.cyan(`🤖 Pod 042: [报告] 捕获到新的视觉图像，开始执行构筑程序...`))
+            spinner.start()
             const partPrompt = require('../prompts/watch-part.js')
             const pageConfig = await recognizePage(partPrompt, filePath)
             const optionDict = pageConfig.optionDict || {}
@@ -37,9 +40,9 @@ const watchPart = () => {
             })
             const finalResult = `${mainConfigStr}\n${optionsCodeStr}`
             const endTime = Date.now()
-            console.log(`🎉 识别完成！耗时 ${(endTime - startTime) / 1000} 秒\n================\n\n${finalResult}\n\n================`)
+            spinner.succeed(`🤖 Pod 042: [报告] 识别程序结束！耗时 ${(endTime - startTime) / 1000} 秒\n================\n\n${finalResult}\n\n================`)
         } catch (error) {
-            console.error('识别图片失败', error)
+            console.log(chalk.red(`🤖 Pod 042: [警告] 识别程序失败。原因：${error}`))
         } finally {
             fs.unlinkSync(filePath)
         }

package/src/core/react-compiler.js

@@ -2,53 +2,82 @@ const Handlebars = require('handlebars')
 const stringify = require('json-stringify-pretty-compact')
 const { cleanCode, generateSmartImports } = require('../utils/utils.js')
 
+// 注册 Handlebars 辅助函数，用于将对象格式化为 JSON 字符串
 Handlebars.registerHelper('stringify', (context, maxLength = 200) => context ? new Handlebars.SafeString(stringify.default(context, { indent: 4, maxLength })) : '[]')
 
+/**
+ * 生成 resource.js 文件（表格列配置、表单配置、字典等）
+ * @param {Object} param0 - 函数参数
+ * @param {Object} param0.pageConfig - 页面配置对象（包含 tabs、formItems、table 等）
+ * @param {Object} param0.resourceTpl - Handlebars 模板函数
+ * @returns {string} 生成的 resource.js 代码
+ */
 const resource = ({ pageConfig, resourceTpl }) => {
+    // 判断是否存在标签页配置
     const hasTabs = pageConfig.tabs?.length > 0
 
+    // 构建模板数据
     const viewData = {
-        hasTabs,
-        tabs: pageConfig.tabs,
-        formItems: pageConfig.formItems,
+        hasTabs, // 是否有标签页
+        tabs: pageConfig.tabs, // 标签页配置
+        formItems: pageConfig.formItems, // 表单项配置
+        // 如果有标签页，将 formItems 按 tab 分组；否则直接使用数组
         formItemsData: hasTabs ? Object.fromEntries(pageConfig.tabs.map(tab => [tab.key, pageConfig.formItems])) : pageConfig.formItems,
+        // 如果有标签页，将 columns 按 tab 分组；否则直接使用数组
         columnsData: hasTabs ? Object.fromEntries(pageConfig.tabs.map(tab => [tab.key, pageConfig.table.columns])) : pageConfig.table.columns,
+        // 提取所有下拉框字典配置
         dictBlocks: pageConfig.formItems
-            ?.filter(item => item.type === 'select')
-            ?.map(item => ({ name: item.options.replace('_CODE_', ''), data: pageConfig.optionDict[item.options] ?? [] }))
+            ?.filter(item => item.type === 'select') // 过滤出下拉框类型
+            ?.map(item => ({ name: item.options.replace('_CODE_', ''), data: pageConfig.optionDict[item.options] ?? [] })) // 转换为字典格式
     }
 
+    // 渲染模板并清理代码
     const rawCode = resourceTpl(viewData)
     return cleanCode(rawCode)
 }
 
+/**
+ * 生成 index.js 文件（页面组件）
+ * @param {Object} param0 - 函数参数
+ * @param {string} param0.fileName - 页面文件名
+ * @param {Object} param0.indexTpl - Handlebars 模板函数
+ * @param {Object} param0.pageConfig - 页面配置对象
+ * @returns {string} 生成的 index.js 代码
+ */
 const index = ({ fileName, indexTpl, pageConfig }) => {
     const hasTabs = pageConfig.tabs?.length > 0
     const hasOperate = pageConfig.table.operation?.length > 0
 
+    // 动态确定 columns 引用方式：有标签页时使用 activeKey 索引，否则直接使用 columns
     let columnsValue = hasTabs ? 'columns[activeKey]' : 'columns'
+    // 如果存在操作列，拼接到 columns 后面
     if (hasOperate) {
         columnsValue = `${columnsValue}.concat(operate)`
     }
 
+    // 构建模板数据
     const viewData = {
-        hasTabs,
-        fileName,
-        hasOperate,
-        columnsValue,
-        tabs: pageConfig.tabs,
-        hasExpandable: pageConfig.table.expandable,
-        hasPagination: pageConfig.table.pagination,
-        operations: pageConfig.table.operation || [],
-        hasRowSelection: pageConfig.table.rowSelection,
-        hasStaticInfo: pageConfig.table.staticInfo?.has,
-        staticInfoText: pageConfig.table.staticInfo?.text,
-        functionButtons: pageConfig.functionButton?.filter(item => !['查询', '重置'].includes(item.btn)) || []
+        hasTabs, // 是否有标签页
+        fileName, // 页面文件名
+        hasOperate, // 是否有操作列
+        columnsValue, // columns 引用表达式
+        tabs: pageConfig.tabs, // 标签页配置
+        hasExpandable: pageConfig.table.expandable, // 是否有展开行
+        hasPagination: pageConfig.table.pagination, // 是否有分页
+        operations: pageConfig.table.operation || [], // 操作列配置
+        hasRowSelection: pageConfig.table.rowSelection, // 是否有行选择
+        hasStaticInfo: pageConfig.table.staticInfo?.has, // 是否有静态信息
+        staticInfoText: pageConfig.table.staticInfo?.text, // 静态信息文本
+        functionButtons: pageConfig.functionButton?.filter(item => !['查询', '重置'].includes(item.btn)) || [] // 功能按钮（排除查询和重置）
     }
 
+    // 渲染模板
     const bodyCode = indexTpl(viewData)
+    // 生成智能导入语句
     const importsStr = generateSmartImports(bodyCode, hasTabs)
+    // 清理代码并返回
     return cleanCode(`${importsStr}\n\n${bodyCode}`)
 }
 
+// 导出 React 编译器的两个核心函数
 module.exports = { index, resource }

package/src/prompts/watch-page.js

@@ -29,7 +29,7 @@ module.exports = `
     如果是下拉框列(所对应的查询项明确是下拉框),请加入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:'操作动词+模块英文名词'}]
+    functionButton:[{btn:'btn',action:'操作动词+模块英文名词'}]
     如果和表格行操作重复请在action加上BySelected前缀
     如果是导出功能,对应的动词为export+对应的英文名词,没有名词则为exportData
 6.下拉选项字典

package/src/services/llm.js

@@ -1,12 +1,17 @@
 const fs = require('fs')
 const path = require('path')
 const JSON5 = require('json5')
-const sharp = require('sharp')
+const sharp = require('sharp') // 图片压缩库，用于处理截图
+const chalk = require('chalk')
 const OpenAI = require('openai')
 const { getConfig } = require('../utils/utils.js')
 
 let client = null
 
+/**
+ * 获取 OpenAI 客户端实例（单例模式）
+ * 优先使用项目根目录的 .env 文件，其次使用包内的 .env
+ */
 const getOpenAI = () => {
     if (!client) {
         const localEnv = path.resolve(process.cwd(), '.env')
@@ -19,24 +24,49 @@ const getOpenAI = () => {
     return client
 }
 
+/**
+ * 调用 AI 模型并解析响应
+ * @param {string} model - 模型名称（如 qwen3.5-plus, qwen-turbo）
+ * @param {Array} messages - 对话消息数组
+ * @param {number} retryCount - 重试次数
+ * @returns {Object} 解析后的 JSON 对象
+ */
 const askAI = async (model, messages, retryCount = 0) => {
-
-    if (retryCount > 3) throw new Error('AI 重试次数耗尽，请检查网络或图片')
+    // 最多重试 3 次，避免无限循环
+    if (retryCount > 3) throw new Error('YoRHa 司令部连接中断：请检查网络状态或黑盒共鸣情况。')
 
     try {
         const openai = getOpenAI()
-        const response = await openai.chat.completions.create({ model, messages, response_format: { type: 'json_object' } })
+        // 调用 AI 模型，强制返回 JSON 格式
+        const response = await openai.chat.completions.create({
+            model,
+            messages,
+            response_format: { type: 'json_object' }
+        })
+
         let raw = response.choices[0].message.content.trim()
+
+        // 清理可能的 Markdown 标记（```json ... ```）
         raw = raw.replace(/^```json\n?/, '').replace(/\n?```$/, '')
+
+        // 提取 JSON 内容（支持对象和数组）
         const match = raw.match(/[\{\[][\s\S]*[\}\]]/)
+
+        // 使用 JSON5 解析（支持单引号、注释等非标准 JSON）
         return JSON5.parse(match ? match[0] : raw)
     } catch (err) {
-        console.warn(`[解析失败，第 ${retryCount + 1} 次重试...]`, err.message)
+        console.warn(chalk.yellow(`[系统警告] 神经云网络连接不稳，正在尝试重新链接... (第 ${retryCount + 1} 次重试)`), err.message)
         return askAI(model, messages, retryCount + 1)
     }
 }
 
 module.exports = {
+    /**
+     * 生成 Mock 数据
+     * @param {Array} columns - 表格列配置
+     * @param {string} fileName - 文件名
+     * @returns {string} 生成的 Mock 数据字符串
+     */
     generateMock: async (columns, fileName) => {
         const config = getConfig()
         const mockPrompt = require('../prompts/mock.js')
@@ -49,10 +79,18 @@ module.exports = {
             ]
         )
     },
+
+    /**
+     * 识别页面截图并提取结构信息
+     * @param {string} prompt - 提示词
+     * @param {string} filePath - 截图文件路径
+     * @returns {Object} 识别后的页面配置对象
+     */
     recognizePage: async (prompt, filePath) => {
         const config = getConfig()
         const { UI_DESIGNER } = require('../prompts/system.js')
 
+        // 压缩图片到 1280px 宽度（避免超出 token 限制），质量 80%
         const compressedBuffer = await sharp(filePath)
             .resize(1280, null, { withoutEnlargement: true })
             .jpeg({ quality: 80 })
@@ -73,6 +111,13 @@ module.exports = {
             ]
         )
     },
+
+    /**
+     * 对齐 Swagger 接口字段与前端字段
+     * @param {string} swaggerStr - 真实接口响应数据
+     * @param {string} resourceStr - 前端 resource.js 内容
+     * @returns {Object} 字段映射对象 { oldName: newName }
+     */
     alignSwaggerFields: async (swaggerStr, resourceStr) => {
         const config = getConfig()
         const apiPrompt = require('../prompts/watch-api.js')

package/src/utils/utils.js

@@ -1,21 +1,30 @@
 const fs = require('fs')
 const path = require('path')
 
+/**
+ * 获取项目配置信息
+ * 优先读取项目根目录的 config.js，如果不存在则使用默认配置
+ * @returns {Object} 合并后的配置对象
+ */
 const getConfig = () => {
-    const localConfigPath = path.join(process.cwd(), 'config.js')
-    const defaultConfigPath = path.resolve(__dirname, '../../config.js')
+    const localConfigPath = path.join(process.cwd(), 'config.js') // 项目根目录配置
+    const defaultConfigPath = path.resolve(__dirname, '../../config.js') // 默认配置
     let config = require(defaultConfigPath)
     if (fs.existsSync(localConfigPath)) {
         const userConfig = require(localConfigPath)
-        config = { ...config, ...userConfig }
+        config = { ...config, ...userConfig } // 合并用户自定义配置
     }
     return config
 }
 
 /**
+ * 清理大模型生成的代码
  * 大模型输出的标准 JSON 无法携带 render: (text) => <Tag> 等箭头函数。
  * 我们在 Prompt 中要求大模型用 _CODE_ 占位符包裹函数字符串，
  * 在此处用正则剥离外层的双引号和占位符，将其还原为真正的可执行 JS 代码。
+ *
+ * @param {string} str - 大模型返回的 JSON 字符串
+ * @returns {string} 清理后的可执行 JS 代码
  */
 const cleanCode = str => {
     return str
@@ -29,6 +38,11 @@ const cleanCode = str => {
         .trim() + '\n'
 }
 
+/**
+ * 获取已有的页面菜单配置
+ * @param {string} dir - 页面目录路径（默认 'src/pages'）
+ * @returns {Array} 菜单数组 [{ label: '页面名', key: '页面名' }]
+ */
 const getExistingMenus = (dir = 'src/pages') => {
     const pagesDir = path.join(process.cwd(), dir)
     if (!fs.existsSync(pagesDir)) return []
@@ -37,17 +51,27 @@ const getExistingMenus = (dir = 'src/pages') => {
         .map(file => ({ label: file, key: file }))
 }
 
+/**
+ * 生成智能导入语句
+ * 根据代码中实际使用的依赖，自动生成对应的 import 语句
+ *
+ * @param {string} codeStr - 生成的代码字符串
+ * @param {boolean} hasTabs - 是否包含标签页
+ * @returns {string} 拼接后的 import 语句
+ */
 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 hooksLib = ['useTableQuery'] // 自定义 hooks 库
+    const reactLib = ['useState', 'useEffect', 'useRef', 'useMemo'] // React 核心库
+    const componentsLib = ['MyTable', 'MyModalForm', 'MySearchForm'] // 自定义组件库
+    const antdLib = ['Card', 'Space', 'Modal', 'Button', 'Alert', 'Table', 'Input', 'Select'] // Ant Design 组件库
 
+    // 检测代码中实际使用的组件
     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))
 
+    // 构建 import 语句数组
     const imports = [
         usedReact.length && `import { ${usedReact.join(', ')} } from 'react'`,
         `import { Link, history } from 'umi'`,
@@ -56,23 +80,34 @@ const generateSmartImports = (codeStr, hasTabs) => {
         ...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)
+    ].sort((a, b) => a.length - b.length) // 按长度排序（短的在前）
 
-    return imports.filter(Boolean).join('\n')
+    return imports.filter(Boolean).join('\n') // 过滤空值并拼接
 }
 
+/**
+ * 复制 hooks 模板到目标项目
+ * @param {Object} options - 命令行选项
+ * @param {string} hooksDir - hooks 目录路径（默认 'src/hooks'）
+ */
 const copyHooks = (options, hooksDir = 'src/hooks') => {
     const targetDir = path.join(process.cwd(), hooksDir)
-    if (!fs.existsSync(targetDir)) fs.mkdirSync(targetDir, { recursive: true })
+    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)))
 }
 
+/**
+ * 复制 components 模板到目标项目
+ * @param {Object} options - 命令行选项
+ * @param {string} componentsDir - components 目录路径（默认 'src/components'）
+ */
 const copyComponents = (options, componentsDir = 'src/components') => {
     const targetDir = path.join(process.cwd(), componentsDir)
-    if (!fs.existsSync(targetDir)) fs.mkdirSync(targetDir, { recursive: true })
+    if (!fs.existsSync(targetDir)) fs.mkdirSync(targetDir, { recursive: true }) // 递归创建目录
     const componentsDirectory = path.join(__dirname, `../../templates/${options.template}/components`)
     fs.readdirSync(componentsDirectory).forEach(file => fs.copyFileSync(path.join(componentsDirectory, file), path.join(targetDir, file)))
 }
 
+// 导出工具函数
 module.exports = { getConfig, copyHooks, cleanCode, copyComponents, getExistingMenus, generateSmartImports }

package/templates/react/components/EditableCell.js

@@ -23,7 +23,9 @@ export const EditableCell = ({ title, record, editable, children, dataIndex, han
 
     useEffect(() => {
         if (editing) {
-            inputRef.current?.focus()
+            if (inputRef.current && typeof inputRef.current.focus === 'function') {
+                inputRef.current.focus()
+            }
         }
     }, [editing])
 
@@ -52,7 +54,16 @@ export const EditableCell = ({ title, record, editable, children, dataIndex, han
             inputNode = <Select ref={inputRef} options={options} onBlur={save} />
             break;
         case 'checkbox':
-            inputNode = <Checkbox.Group options={options} onChange={save} />
+            inputNode = (
+                <div tabIndex={-1} onBlur={e => {
+                    // 确保失去焦点时，新的焦点不在当前 checkbox 组内部
+                    if (!e.currentTarget.contains(e.relatedTarget)) {
+                        save()
+                    }
+                }}>
+                    <Checkbox.Group ref={inputRef} options={options} />
+                </div>
+            )
             break;
         default:
             inputNode = <Input ref={inputRef} onPressEnter={save} onBlur={save} />

package/templates/react/components/MyBaseForm.js

@@ -1,16 +1,17 @@
-import { Form } from 'antd'
 import { formNode } from './index'
+import { Form, Space, Button } from 'antd'
+import { PlusOutlined, PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons'
 
 export const MyBaseForm = ({ item, form }) => {
 
     const renderFormContent = ({ item }) => {
 
         if (!item.name) {
-            return typeof item.render === 'function' ? item.render(item) : (item.value ?? '-')
+            return item.value
         }
 
         const inputNode = (
-            <Form.Item noStyle name={item.name} rules={item.rules} initialValue={item.value}>
+            <Form.Item noStyle name={item.name} rules={item.rules} initialValue={item.value} valuePropName={item.valuePropName}>
                 {formNode({ item })}
             </Form.Item>
         )
@@ -28,20 +29,31 @@ export const MyBaseForm = ({ item, form }) => {
     }
 
     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>
+        item.isList ?
+            <Form.List name={item.name} initialValue={item.value}>
+                {(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>
+                        ))}
+                        {fields.length === 0 && <Button type='dashed' onClick={() => add()} block icon={<PlusOutlined />}>添加{item.label || '项'}</Button>}
+                    </div>
+                )}
+            </Form.List> :
+            <Form.Item
+                label={item.label}
+                extra={item.extra}
+                tooltip={item.tooltip}
+                labelCol={item.labelCol}
+                wrapperCol={item.wrapperCol}
+                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

@@ -1,9 +1,9 @@
-import { formNode } from './index'
+import dayjs from 'dayjs'
+import { MyBaseForm } from './MyBaseForm'
 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 }) => {
+export const MyModalForm = ({ width, title, submit, record, visible, setModal, labelCol, formItems, wrapperCol, dateSeparator = ',', onValuesChange }) => {
 
     const [form] = Form.useForm()
     const [pending, setPending] = useState(false)
@@ -12,7 +12,11 @@ export const MyModalForm = ({ width, title, submit, record, visible, setModal, l
         if (visible) {
             form.resetFields()
             if (record && Object.keys(record).length > 0) {
-                form.setFieldsValue(record)
+                const entries = Object.entries(record).map(([key, value]) => [
+                    key,
+                    formItems.find(item => item.name === key)?.type?.includes('date') ? value?.split(dateSeparator)?.map(item => dayjs(item)) : value
+                ])
+                form.setFieldsValue(Object.fromEntries(entries))
             }
         }
     }, [visible, record, form])
@@ -27,6 +31,8 @@ export const MyModalForm = ({ width, title, submit, record, visible, setModal, l
             }
         } catch (error) {
             console.log('表单校验失败:', error)
+        } finally {
+            setPending(false)
         }
     }
 

package/templates/react/components/MyModalTable.js

@@ -4,9 +4,9 @@ import { MySearchForm } from './MySearchForm'
 import { useTableQuery } from '../hooks/useTableQuery'
 
 
-export const MyModalTable = ({ onOk, title, width, footer, visible, request, columns, setModal, formItems, rowSelection, extraParams = {} }) => {
+export const MyModalTable = ({ api, onOk, title, width, footer, visible, columns, setModal, formItems, rowSelection, formatResponse }) => {
 
-    const { total, loading, dataSource, search, setSearch } = useTableQuery(async params => await request({ ...params, ...extraParams }), {})
+    const { total, loading, dataSource, search, setSearch } = useTableQuery(api, formatResponse, {})
 
     const handleSearch = values => setSearch({ ...search, ...values, pageNo: 1 })
 
@@ -14,7 +14,7 @@ export const MyModalTable = ({ onOk, title, width, footer, visible, request, col
 
     const handleOk = () => {
         if (onOk) {
-            onOk({ selectedRows: rowSelection?.selectedRows, dataSource })
+            onOk()
         }
         setModal({ visible: false })
     }
@@ -29,12 +29,7 @@ export const MyModalTable = ({ onOk, title, width, footer, visible, request, col
                 dataSource={dataSource}
                 rowSelection={rowSelection}
                 onChange={handleTableChange}
-                pagination={{
-                    total: total,
-                    showSizeChanger: true,
-                    current: search.pageNo,
-                    pageSize: search.pageSize,
-                }} />
+                pagination={{ total: total, showSizeChanger: true, current: search.pageNo, pageSize: search.pageSize }} />
         </Modal>
     )
 }

package/templates/react/components/MySearchForm.js

@@ -1,12 +1,15 @@
-import { useState } from 'react'
+import dayjs from 'dayjs'
+import { history } from 'umi'
 import { MyBaseForm } from './MyBaseForm'
+import { useState, useEffect } from 'react'
 import { Row, Col, Form, Button, Space } from 'antd'
 
-export const MySearchForm = ({ form, search, labelCol, setSearch, formItems, showLimit = 7, customReset, extraOperate, customFinish, onValuesChange, defaultPageSize = 10 }) => {
+export const MySearchForm = ({ form, search, loading, labelCol, setSearch, formItems, showLimit = 7, dateSeparator = '\GMT\,', initialValues, customReset, extraOperate, customFinish, onValuesChange, defaultPageSize = 10 }) => {
 
     const [limit, setLimit] = useState(showLimit)
 
     const handleReset = () => {
+        history.push({ search: '' })
         if (customReset) {
             customReset()
         } else {
@@ -15,6 +18,8 @@ export const MySearchForm = ({ form, search, labelCol, setSearch, formItems, sho
     }
 
     const handleFinish = values => {
+        const params = new URLSearchParams(Object.fromEntries(Object.entries(values).filter(([key, value]) => !['', null, undefined].includes(value))))
+        history.push({ search: params.toString() })
         if (customFinish) {
             customFinish(values)
         } else {
@@ -22,8 +27,18 @@ export const MySearchForm = ({ form, search, labelCol, setSearch, formItems, sho
         }
     }
 
+    useEffect(() => {
+        if (Object.values(initialValues).length > 0) {
+            const entries = Object.entries(initialValues).map(([key, value]) => [
+                key,
+                formItems.find(item => item.name === key)?.type?.includes('date') ? value?.split(dateSeparator)?.map(item => dayjs(item)) : value
+            ])
+            form.setFieldsValue(Object.fromEntries(entries))
+        }
+    }, [])
+
     return (
-        <Form onFinish={handleFinish} labelCol={labelCol} onValuesChange={onValuesChange}>
+        <Form form={form} onFinish={handleFinish} labelCol={labelCol} onValuesChange={onValuesChange}>
             <Row gutter={24}>
                 {formItems.slice(0, limit)?.map((item, ind) => (
                     <Col key={ind} span={item.span ?? 6}>
@@ -33,10 +48,10 @@ export const MySearchForm = ({ form, search, labelCol, setSearch, formItems, sho
                 <Col flex='auto' style={{ textAlign: 'right' }}>
                     <Form.Item>
                         <Space>
-                            <Button type='primary' htmlType='submit'>查询</Button>
-                            <Button onClick={handleReset} htmlType='reset'>重置</Button>
+                            <Button type='primary' loading={loading} htmlType='submit'>查询</Button>
+                            <Button onClick={handleReset} loading={loading} htmlType='reset'>重置</Button>
                             {extraOperate}
-                            {formItems.length > showLimit && (<a onClick={() => setLimit(formItems.length > limit ? formItems.length : 7)}>{formItems.length > limit ? '展开' : '收起'}</a>)}
+                            {formItems.length > showLimit && (<a onClick={() => setLimit(formItems.length > limit ? formItems.length : showLimit)}>{formItems.length > limit ? '展开' : '收起'}</a>)}
                         </Space>
                     </Form.Item>
                 </Col>

package/templates/react/components/MyTable.js

@@ -1,4 +1,5 @@
 import { Table } from 'antd'
+import { useEffect } from 'react'
 import { EditableRow, EditableCell } from './EditableCell'
 
 const components = {
@@ -8,10 +9,10 @@ const components = {
     }
 }
 
-export const MyTable = ({ size, onSave, 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 = [], editable = false, scroll = { x: 'max-content' }, ...restProps }) => {
 
     const mergedColumns = columns.map(col => {
-        if (!col.editable) {
+        if (!col.editType) {
             return col
         }
         return {
@@ -29,6 +30,18 @@ export const MyTable = ({ size, onSave, onChange, pagination, rowClassName, colu
         }
     })
 
+    useEffect(() => {
+        /* if (query && autoScroll) {
+            //如果需要可以在这里通过query来处理滚动到目标行的操作
+            const trList = document.getElementsByClassName('ant-table-row')
+            const index = 0 //根据query来计算索引
+            const tr = trList[index]
+            if (tr) {
+                tr.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
+            }
+        } */
+    }, [])
+
     return (
         <Table
             {...restProps}

package/templates/react/components/index.js

@@ -1,11 +1,7 @@
-import { Radio, Input, Upload, Select, Cascader, Checkbox, DatePicker, InputNumber, AutoComplete } from 'antd'
+import { Tree, Radio, Input, Upload, Select, Cascader, Checkbox, DatePicker, InputNumber, TreeSelect, 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%' },
@@ -22,10 +18,14 @@ export const formNode = ({ item }) => {
             return <DatePicker.RangePicker {...commonProps} />
         case 'radio':
             return <Radio.Group options={item.options} {...commonProps} />
+        case 'treeSelect':
+            return <TreeSelect treeData={item.options} {...commonProps} />
         case 'auto':
             return <AutoComplete options={item.options} {...commonProps} />
         case 'checkbox':
             return <Checkbox.Group options={item.options} {...commonProps} />
+        case 'tree':
+            return <Tree checkable treeData={item.options} {...commonProps} />
         case 'textarea':
             return <Input.TextArea autoSize={{ minRows: 4 }} {...commonProps} />
         case 'cascader':

package/templates/react/index.hbs

@@ -1,5 +1,7 @@
 export default props => {
 
+    const query = Object.fromEntries(new URLSearchParams(location.search).entries())
+
     const [form] = Form.useForm()
     const [modal, setModal] = useState({})
     {{#if hasTabs}}
@@ -17,7 +19,7 @@ export default props => {
     const { total, loading, dataSource, search, setSearch, refresh } = useTableQuery(
          async params => await request('/api/{{fileName}}', { method: 'POST', body: params }),
          response => response?.data ?? [],
-         initParams,
+         {...initParams, ...query},
     )
 
     {{#each operations}}
@@ -85,7 +87,7 @@ export default props => {
     return (
         <Card {{#if hasTabs}}tabList={tabs} activeTabKey={activeKey} onTabChange={onTabChange}{{/if}}>
             {modal.visible && <MyModalForm {...modal} formItems={modalItems} submit={modalSubmit} setModal={setModal} />}
-            <MySearchForm form={form} search={search} setSearch={setSearch} formItems={ {{#if hasTabs}}formItems[activeKey]{{else}}formItems{{/if}} } />
+            <MySearchForm form={form} search={search} initialValues={query} loading={loading} setSearch={setSearch} formItems={ {{#if hasTabs}}formItems[activeKey]{{else}}formItems{{/if}} } />
             {{#if hasTabs}}
             {{#each tabs}}
             {activeKey === '{{this.key}}' &&
@@ -107,6 +109,7 @@ export default props => {
             {{/if}}
             <MyTable
                 rowKey='id'
+                query={query}
                 loading={loading}
                 dataSource={dataSource}
                 columns={ {{columnsValue}} }