@yorha2b-lab/autodev 1.0.25 → 1.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/README_EN.md +194 -0
- package/package.json +1 -1
- package/src/prompts/watch-api.js +2 -1
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# Auto CRUD Copilot
|
|
2
2
|
|
|
3
|
+
[English](./README_EN.md) | 简体中文
|
|
4
|
+
|
|
3
5
|
[](https://www.npmjs.com/package/@yorha2b-lab/autodev)
|
|
4
6
|
[](https://www.npmjs.com/package/@yorha2b-lab/autodev)
|
|
5
7
|
[](https://github.com/yorha2b-lab/auto-crud-copilot/stargazers)
|
package/README_EN.md
ADDED
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
# Auto CRUD Copilot
|
|
2
|
+
|
|
3
|
+
English | [简体中文](./README.md)
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@yorha2b-lab/autodev)
|
|
6
|
+
[](https://www.npmjs.com/package/@yorha2b-lab/autodev)
|
|
7
|
+
[](https://github.com/yorha2b-lab/auto-crud-copilot/stargazers)
|
|
8
|
+
[](https://github.com/yorha2b-lab/auto-crud-copilot/blob/main/LICENSE)
|
|
9
|
+
|
|
10
|
+
An AI-powered frontend CRUD code generator based on vision models (Umi+Antd) 🚀
|
|
11
|
+
|
|
12
|
+
<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;">
|
|
13
|
+
</video>
|
|
14
|
+
|
|
15
|
+
Say goodbye to repetitive work! Why do you need Auto CRUD Copilot?
|
|
16
|
+
Stop writing Tables/Forms manually: Screenshot to code, boost your development efficiency, and say goodbye to tedious copy-paste.
|
|
17
|
+
Eliminate API integration pain: Automatically read Response data, and let AI help you bridge frontend-backend field naming differences.
|
|
18
|
+
Decoupled architecture: Core logic separated from UI frameworks, supporting React/Vue/Angular.
|
|
19
|
+
|
|
20
|
+
## ✨ Features
|
|
21
|
+
|
|
22
|
+
- 🖼️ **Visual Recognition**: Automatically recognize page structures from screenshots and generate corresponding CRUD code
|
|
23
|
+
- 🔧 **Smart Generation**: Support multiple frontend framework templates including React, Vue, and Angular
|
|
24
|
+
- 📊 **Table Components**: Automatically generate editable, sortable, and filterable data tables
|
|
25
|
+
- 📝 **Form Components**: Intelligently generate search forms and modal forms
|
|
26
|
+
- 🔌 **API Alignment**: Automatically align Response interfaces with frontend field mappings
|
|
27
|
+
- 🎨 **UI Components**: Support various UI component types (input, select, date picker, etc.)
|
|
28
|
+
- 📱 **Responsive**: Generated code supports responsive layout
|
|
29
|
+
|
|
30
|
+
## 🚀 Quick Start
|
|
31
|
+
|
|
32
|
+
### Installation
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm install -g @yorha2b-lab/autodev
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Environment Setup
|
|
39
|
+
|
|
40
|
+
Quick start
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
autodev init
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Create a `.env` file and configure the following environment variables:
|
|
47
|
+
|
|
48
|
+
```bash
|
|
49
|
+
# AI Model API Configuration
|
|
50
|
+
API_KEY=your_api_key_here
|
|
51
|
+
BASE_URL=your_api_base_url_here
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
🚗 **Get API Key**: [Alibaba Cloud Bailian Console](https://bailian.console.aliyun.com/cn-beijing?tab=doc#/doc/)
|
|
55
|
+
|
|
56
|
+
### Basic Usage
|
|
57
|
+
|
|
58
|
+
1. **Generate Complete CRUD Pages**
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
# Put page screenshots in the screenShot directory
|
|
62
|
+
autodev watch:page
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
2. **Generate Partial UI Components**
|
|
66
|
+
|
|
67
|
+
```bash
|
|
68
|
+
# Put component screenshots in the screenPart directory
|
|
69
|
+
autodev watch:part
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
3. **Align API Fields**
|
|
73
|
+
|
|
74
|
+
```bash
|
|
75
|
+
autodev watch:api
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## 📖 Detailed Usage Guide
|
|
79
|
+
|
|
80
|
+
### watch:page Command
|
|
81
|
+
|
|
82
|
+
Monitor screenshot files in the `screenShot` directory and automatically generate complete CRUD pages.
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
autodev watch:page -t react
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Parameters:
|
|
89
|
+
- `-t, --template <type>`: Specify frontend framework template, default is `react`
|
|
90
|
+
|
|
91
|
+
### watch:part Command
|
|
92
|
+
|
|
93
|
+
Monitor screenshot files in the `screenPart` directory and automatically generate partial UI components.
|
|
94
|
+
|
|
95
|
+
```bash
|
|
96
|
+
autodev watch:part -t vue
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### watch:api Command
|
|
100
|
+
|
|
101
|
+
Monitor JSON files in the `response` directory (named after modules) and automatically align real API fields.
|
|
102
|
+
|
|
103
|
+
```bash
|
|
104
|
+
autodev watch:api
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## 📁 Project Structure
|
|
108
|
+
|
|
109
|
+
```
|
|
110
|
+
your-project/
|
|
111
|
+
├── screenShot/ # Page screenshot directory
|
|
112
|
+
├── screenPart/ # Component screenshot directory
|
|
113
|
+
├── response/ # Response directory
|
|
114
|
+
├── mock/ # Generated Mock data
|
|
115
|
+
├── src/
|
|
116
|
+
│ ├── pages/ # Generated page code
|
|
117
|
+
│ ├── components/ # Generated component code
|
|
118
|
+
│ ├── hooks/ # Generated Hook code
|
|
119
|
+
└── config.js # Configuration file
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## ⚙️ Configuration
|
|
123
|
+
|
|
124
|
+
You can configure the following options in `config.js`:
|
|
125
|
+
|
|
126
|
+
```javascript
|
|
127
|
+
module.exports = {
|
|
128
|
+
// Whether to generate Mock data
|
|
129
|
+
needMock: false,
|
|
130
|
+
|
|
131
|
+
// AI model types to use
|
|
132
|
+
visionModel: 'qwen3.5-plus',
|
|
133
|
+
textModel: 'qwen-turbo',
|
|
134
|
+
|
|
135
|
+
// Target project directory paths
|
|
136
|
+
hooksDir: 'src/hooks',
|
|
137
|
+
pagesDir: 'src/pages',
|
|
138
|
+
utilsDir: 'src/utils',
|
|
139
|
+
componentsDir: 'src/components',
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## 🎯 Supported UI Components
|
|
144
|
+
|
|
145
|
+
- Input
|
|
146
|
+
- InputNumber
|
|
147
|
+
- Select
|
|
148
|
+
- Radio
|
|
149
|
+
- Checkbox
|
|
150
|
+
- DatePicker
|
|
151
|
+
- RangePicker
|
|
152
|
+
- Cascader
|
|
153
|
+
- AutoComplete
|
|
154
|
+
- TextArea
|
|
155
|
+
- Upload
|
|
156
|
+
|
|
157
|
+
## 🤝 Contributing
|
|
158
|
+
|
|
159
|
+
Contributions are welcome! Please read [CONTRIBUTING.md](CONTRIBUTING.md) to learn how to participate in project development.
|
|
160
|
+
|
|
161
|
+
## 📄 License
|
|
162
|
+
|
|
163
|
+
This project is licensed under the [MIT](LICENSE) license.
|
|
164
|
+
|
|
165
|
+
## 🙏 Acknowledgments
|
|
166
|
+
|
|
167
|
+
Thanks to the following open-source projects:
|
|
168
|
+
|
|
169
|
+
- [OpenAI](https://openai.com/) - Providing powerful AI capabilities
|
|
170
|
+
- [Ant Design](https://ant.design/) - Excellent enterprise-level UI design language
|
|
171
|
+
- [UmiJS](https://umijs.org/) - Enterprise-level frontend application framework
|
|
172
|
+
|
|
173
|
+
## 📞 Contact
|
|
174
|
+
|
|
175
|
+
If you have any questions or suggestions, feel free to submit an [Issue](https://github.com/yorha2b-lab/auto-crud-copilot/issues).
|
|
176
|
+
|
|
177
|
+
## 🛠️ FAQ
|
|
178
|
+
|
|
179
|
+
**Q: Is this tool free?**
|
|
180
|
+
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.
|
|
181
|
+
|
|
182
|
+
---
|
|
183
|
+
|
|
184
|
+
## ⚖️ Disclaimer
|
|
185
|
+
|
|
186
|
+
Auto CRUD Copilot is a **fan-made, non-commercial, open-source tool**.
|
|
187
|
+
|
|
188
|
+
- 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.**
|
|
189
|
+
- This project is not affiliated with, endorsed by, or representative of Square Enix in any way.
|
|
190
|
+
- Please support the original masterpiece: [NieR:Automata Official Site](https://nierautomata.square-enix-games.com/).
|
|
191
|
+
|
|
192
|
+
**Glory to Mankind.**
|
|
193
|
+
|
|
194
|
+
⭐ If this project helps you, please give it a Star to show your support!
|
package/package.json
CHANGED
package/src/prompts/watch-api.js
CHANGED