@yorha2b-lab/autodev 1.0.24 → 1.0.26

package/README.md

@@ -1,5 +1,7 @@
 # Auto CRUD Copilot
 
+[English](./README_EN.md) | 简体中文
+
 [![NPM Version](https://img.shields.io/npm/v/@yorha2b-lab/autodev.svg?style=flat-square)](https://www.npmjs.com/package/@yorha2b-lab/autodev)
 [![NPM Downloads](https://img.shields.io/npm/dm/@yorha2b-lab/autodev.svg?style=flat-square)](https://www.npmjs.com/package/@yorha2b-lab/autodev)
 [![GitHub Stars](https://img.shields.io/github/stars/yorha2b-lab/auto-crud-copilot.svg?style=flat-square)](https://github.com/yorha2b-lab/auto-crud-copilot/stargazers)
@@ -12,7 +14,7 @@
 
 拒绝重复劳动！为什么你需要 Auto CRUD Copilot？
 告别手写 Table/Form：截图即代码，提升你的开发效率，告别烦人的复制粘贴。
-拒绝接口联调痛苦：自动读取 Swagger，AI 帮你抹平前后端字段命名差异。
+拒绝接口联调痛苦：自动读取 Response，AI 帮你抹平前后端字段命名差异。
 架构解耦：核心逻辑与 UI 框架分离，React/Vue/Angular 均可适配。
 
 ## ✨ 特性
@@ -21,7 +23,7 @@
 - 🔧 **智能生成**: 支持React、Vue、Angular等多种前端框架模板
 - 📊 **表格组件**: 自动生成可编辑、可排序、可筛选的数据表格
 - 📝 **表单组件**: 智能生成搜索表单和模态框表单
-- 🔌 **API对齐**: 自动对齐Swagger接口与前端字段映射
+- 🔌 **API对齐**: 自动对齐Response接口与前端字段映射
 - 🎨 **UI组件**: 支持多种UI组件类型（输入框、选择器、日期等）
 - 📱 **响应式**: 生成的代码支持响应式布局
 
@@ -70,7 +72,6 @@ autodev watch:part
 3. **对齐API字段**
 
 ```bash
-# 将Swagger文档放入swagger目录
 autodev watch:api
 ```
 
@@ -97,7 +98,7 @@ autodev watch:part -t vue
 
 ### watch:api 命令
 
-监听 `swagger` 目录下的API文档，自动对齐真实接口字段。
+监听 `response` 目录下的与模块同名的json文件，自动对齐真实接口字段。
 
 ```bash
 autodev watch:api
@@ -109,7 +110,7 @@ autodev watch:api
 your-project/
 ├── screenShot/          # 页面截图目录
 ├── screenPart/          # 组件截图目录
-├── swagger/             # API文档目录
+├── response/            # Response目录
 ├── mock/                # 生成的Mock数据
 ├── src/
 │   ├── pages/           # 生成的页面代码

package/README_EN.md

@@ -0,0 +1,194 @@
+# Auto CRUD Copilot
+
+English | [简体中文](./README.md)
+
+[![NPM Version](https://img.shields.io/npm/v/@yorha2b-lab/autodev.svg?style=flat-square)](https://www.npmjs.com/package/@yorha2b-lab/autodev)
+[![NPM Downloads](https://img.shields.io/npm/dm/@yorha2b-lab/autodev.svg?style=flat-square)](https://www.npmjs.com/package/@yorha2b-lab/autodev)
+[![GitHub Stars](https://img.shields.io/github/stars/yorha2b-lab/auto-crud-copilot.svg?style=flat-square)](https://github.com/yorha2b-lab/auto-crud-copilot/stargazers)
+[![License](https://img.shields.io/npm/l/@yorha2b-lab/autodev.svg?style=flat-square)](https://github.com/yorha2b-lab/auto-crud-copilot/blob/main/LICENSE)
+
+An AI-powered frontend CRUD code generator based on vision models (Umi+Antd) 🚀
+
+<video src="https://github.com/user-attachments/assets/6d42fce1-c815-482b-8c6a-4a3b9415ba47.mp4" controls="controls" muted="muted" style="max-width: 100%; display: block; margin: 20px auto;">
+</video>
+
+Say goodbye to repetitive work! Why do you need Auto CRUD Copilot?
+Stop writing Tables/Forms manually: Screenshot to code, boost your development efficiency, and say goodbye to tedious copy-paste.
+Eliminate API integration pain: Automatically read Response data, and let AI help you bridge frontend-backend field naming differences.
+Decoupled architecture: Core logic separated from UI frameworks, supporting React/Vue/Angular.
+
+## ✨ Features
+
+- 🖼️ **Visual Recognition**: Automatically recognize page structures from screenshots and generate corresponding CRUD code
+- 🔧 **Smart Generation**: Support multiple frontend framework templates including React, Vue, and Angular
+- 📊 **Table Components**: Automatically generate editable, sortable, and filterable data tables
+- 📝 **Form Components**: Intelligently generate search forms and modal forms
+- 🔌 **API Alignment**: Automatically align Response interfaces with frontend field mappings
+- 🎨 **UI Components**: Support various UI component types (input, select, date picker, etc.)
+- 📱 **Responsive**: Generated code supports responsive layout
+
+## 🚀 Quick Start
+
+### Installation
+
+```bash
+npm install -g @yorha2b-lab/autodev
+```
+
+### Environment Setup
+
+Quick start
+
+```bash
+autodev init
+```
+
+Create a `.env` file and configure the following environment variables:
+
+```bash
+# AI Model API Configuration
+API_KEY=your_api_key_here
+BASE_URL=your_api_base_url_here
+```
+
+🚗 **Get API Key**: [Alibaba Cloud Bailian Console](https://bailian.console.aliyun.com/cn-beijing?tab=doc#/doc/)
+
+### Basic Usage
+
+1. **Generate Complete CRUD Pages**
+
+```bash
+# Put page screenshots in the screenShot directory
+autodev watch:page
+```
+
+2. **Generate Partial UI Components**
+
+```bash
+# Put component screenshots in the screenPart directory
+autodev watch:part
+```
+
+3. **Align API Fields**
+
+```bash
+autodev watch:api
+```
+
+## 📖 Detailed Usage Guide
+
+### watch:page Command
+
+Monitor screenshot files in the `screenShot` directory and automatically generate complete CRUD pages.
+
+```bash
+autodev watch:page -t react
+```
+
+Parameters:
+- `-t, --template <type>`: Specify frontend framework template, default is `react`
+
+### watch:part Command
+
+Monitor screenshot files in the `screenPart` directory and automatically generate partial UI components.
+
+```bash
+autodev watch:part -t vue
+```
+
+### watch:api Command
+
+Monitor JSON files in the `response` directory (named after modules) and automatically align real API fields.
+
+```bash
+autodev watch:api
+```
+
+## 📁 Project Structure
+
+```
+your-project/
+├── screenShot/          # Page screenshot directory
+├── screenPart/          # Component screenshot directory
+├── response/            # Response directory
+├── mock/                # Generated Mock data
+├── src/
+│   ├── pages/           # Generated page code
+│   ├── components/      # Generated component code
+│   ├── hooks/           # Generated Hook code
+└── config.js            # Configuration file
+```
+
+## ⚙️ Configuration
+
+You can configure the following options in `config.js`:
+
+```javascript
+module.exports = {
+    // Whether to generate Mock data
+    needMock: false,
+
+    // AI model types to use
+    visionModel: 'qwen3.5-plus',
+    textModel: 'qwen-turbo',
+
+    // Target project directory paths
+    hooksDir: 'src/hooks',
+    pagesDir: 'src/pages',
+    utilsDir: 'src/utils',
+    componentsDir: 'src/components',
+}
+```
+
+## 🎯 Supported UI Components
+
+- Input
+- InputNumber
+- Select
+- Radio
+- Checkbox
+- DatePicker
+- RangePicker
+- Cascader
+- AutoComplete
+- TextArea
+- Upload
+
+## 🤝 Contributing
+
+Contributions are welcome! Please read [CONTRIBUTING.md](CONTRIBUTING.md) to learn how to participate in project development.
+
+## 📄 License
+
+This project is licensed under the [MIT](LICENSE) license.
+
+## 🙏 Acknowledgments
+
+Thanks to the following open-source projects:
+
+- [OpenAI](https://openai.com/) - Providing powerful AI capabilities
+- [Ant Design](https://ant.design/) - Excellent enterprise-level UI design language
+- [UmiJS](https://umijs.org/) - Enterprise-level frontend application framework
+
+## 📞 Contact
+
+If you have any questions or suggestions, feel free to submit an [Issue](https://github.com/yorha2b-lab/auto-crud-copilot/issues).
+
+## 🛠️ FAQ
+
+**Q: Is this tool free?**
+A: The tool itself is open-source and free, but the AI models it calls (such as GPT-4v, Qwen-VL) may require you to configure your own API Key. We recommend using cost-effective models like Alibaba Cloud's Qwen-VL.
+
+---
+
+## ⚖️ Disclaimer
+
+Auto CRUD Copilot is a **fan-made, non-commercial, open-source tool**.
+
+- The themes, names (YoRHa, 2B, etc.), and catchphrases included in this project are inspired by **NieR:Automata**, which is a trademark and copyright of **Square Enix Co., Ltd. / PlatinumGames Inc.**
+- This project is not affiliated with, endorsed by, or representative of Square Enix in any way.
+- Please support the original masterpiece: [NieR:Automata Official Site](https://nierautomata.square-enix-games.com/).
+
+**Glory to Mankind.**
+
+⭐ If this project helps you, please give it a Star to show your support!

package/bin/autodev.js

@@ -25,7 +25,7 @@ program
         const tplEnv = path.resolve(__dirname, '../.env.example')
         const targetEnv = path.join(process.cwd(), '.env')
         const targetConfig = path.join(process.cwd(), 'config.js')
-        fs.mkdirSync(path.join(process.cwd(), 'swagger'), { recursive: true })
+        fs.mkdirSync(path.join(process.cwd(), 'response'), { recursive: true })
         fs.mkdirSync(path.join(process.cwd(), 'screenShot'), { recursive: true })
         fs.mkdirSync(path.join(process.cwd(), 'screenPart'), { recursive: true })
         if (fs.existsSync(targetEnv)) {
@@ -61,7 +61,7 @@ program
 
 program
     .command('watch:api')
-    .description('监听 Swagger，自动对齐真实接口字段')
+    .description('监听 Response，自动对齐真实接口字段')
     .action(() => {
         const watchApi = require('../src/commands/watch-api')
         watchApi()

package/package.json

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

package/src/commands/watch-api.js

@@ -7,11 +7,11 @@ const chokidar = require('chokidar')
 const watchApi = () => {
 
     const { getConfig } = require('../utils/utils.js')
-    const { alignSwaggerFields } = require('../services/llm.js')
+    const { alignResponseFields } = require('../services/llm.js')
 
     const config = getConfig()
 
-    const watcher = chokidar.watch('./swagger', {
+    const watcher = chokidar.watch('./response', {
         persistent: true,
         ignored: /(^|[\/\\])\../,
         awaitWriteFinish: {
@@ -23,13 +23,13 @@ const watchApi = () => {
     watcher.on('add', async filePath => {
         const startTime = Date.now()
         const fileName = path.basename(filePath, path.extname(filePath))
-        const spinner = ora(chalk.cyan(`🤖 Pod 153: [报告] 侦测到未知的 Swagger 数据源 [${fileName}]，开始进行语义对齐...`))
+        const spinner = ora(chalk.cyan(`🤖 Pod 153: [报告] 侦测到未知的 Response 数据源 [${fileName}]，开始进行语义对齐...`))
         spinner.start()
 
         try {
-            const swaggerStr = fs.readFileSync(filePath, 'utf8')
+            const responseStr = fs.readFileSync(filePath, 'utf8')
             let resourceStr = fs.readFileSync(`./${config.pagesDir}/${fileName}/resource.js`, 'utf8')
-            const result = await alignSwaggerFields(swaggerStr, resourceStr)
+            const result = await alignResponseFields(responseStr, resourceStr)
             Object.entries(result).forEach(([oldField, newField]) => {
                 if (oldField === newField) return
                 const regex = new RegExp(`(dataIndex|name)\\s*:\\s*['"]${oldField}['"]`, 'g')

package/src/prompts/watch-api.js

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

package/src/services/llm.js

@@ -117,12 +117,12 @@ module.exports = {
     },
 
     /**
-     * 对齐 Swagger 接口字段与前端字段
-     * @param {string} swaggerStr - 真实接口响应数据
+     * 对齐 Response 接口字段与前端字段
+     * @param {string} responseStr - 真实接口响应数据
      * @param {string} resourceStr - 前端 resource.js 内容
      * @returns {Object} 字段映射对象 { oldName: newName }
      */
-    alignSwaggerFields: async (swaggerStr, resourceStr) => {
+    alignResponseFields: async (responseStr, resourceStr) => {
         const config = getConfig()
         const apiPrompt = require('../prompts/watch-api.js')
         const { API_DESIGNER } = require('../prompts/system.js')
@@ -130,7 +130,7 @@ module.exports = {
             config.textModel,
             [
                 { role: 'system', content: API_DESIGNER },
-                { role: 'user', content: apiPrompt(swaggerStr, resourceStr) }
+                { role: 'user', content: apiPrompt(responseStr, resourceStr) }
             ]
         )
     }

package/templates/react/components/index.js

@@ -9,7 +9,7 @@ const AliyunOSSUpload = ({ style, value, disabled, onChange }) => {
 
     const init = async () => {
         try {
-            const result = await initOss()
+            const result = await initOSS()
             setOSSData(result)
         } catch (err) {
             console.log(err)