别再像个傻子一样天天手敲 Prompt 了！我用“拖拽连线”把 AI 驯服成了无情的 CRUD 机器（鳌虾 2.0 震撼发布）

前言

在 AI 代码生成工具层出不穷的今天，程序员面临着一个核心问题：如何更高效、更精准地让 AI 理解我们的需求？ 传统的 AI 对话模式需要我们反复描述项目背景、手动关联各种文档和技能规范。这种模式不仅效率低下，还容易因为信息不完整导致 AI 产生“幻觉”，生成结果与预期相差甚远。

鳌虾（Aoxia-code） 正是为解决这些痛点而生。

在 1.0 版本中，鳌虾作为一个 npm 全局工具，首创了“可视化拖拽生成 AI 指令”的工作流，广受好评（详见1.0版本介绍）。 今天，我们正式推出 鳌虾 Aoxia-code 2.0！这一次，鳌虾完成了架构级的蜕变：从独立的 npm 工具，全面进化为沉浸式的 VS Code 插件，并重磅推出了基于流程图的复杂逻辑编排功能，让单页面真正串联成完整的业务流！

什么是鳌虾 2.0？

传统代码生成器通常依赖“硬编码模板（EJS/FreeMarker）”，一旦业务逻辑发生变化，模板就变得极难维护。 而 鳌虾 走的是另一条路： 元数据编排 + 技能规范约束 + AI 生成 。

在鳌虾 2.0 中，你不再需要手敲冗长的 Prompt。你只需在 VS Code 内部通过拖拽组件搭建页面骨架，再通过连线配置页面间的跳转逻辑。鳌虾会自动将这些视觉化的设计意图，结合项目中的技能规范文件，编译成一段高度结构化的 AI 指令。把这段指令发给 Trae/Cursor，完美契合你期望的源码瞬间生成！

鳌虾 2.0 核心演进与全景功能

一、 沉浸式 VS Code 插件体验与全局快捷键

鳌虾 2.0 告别了过去 npm install -g 启动本地服务的繁琐流程。 现在，你只需在 VS Code 插件市场搜索并安装 Aoxia-code Extension tool。按下 Ctrl+Alt+X （Mac 为 Cmd+Option+X）即可在编辑器内部瞬间唤出可视化工作台。它能原生读取你当前工作区的目录结构和规范文件，体验如丝般顺滑。

二、 极其强大的物理/虚拟混合目录树

在前端开发中，对项目目录的把控至关重要。鳌虾 2.0 彻底重构了左侧栏目录树：

• 挂载任意目录：在欢迎页或侧边栏，你可以通过一个精美的输入框直接指定想要读取的项目路径（如 src/views），留空则默认加载整个项目。
• 深层智能读取与过滤：最高支持 8 级深度的文件树探测！同时内置了极其严格的黑名单规则（自动过滤 node_modules、.git、.husky 等无关产物），保证树形结构清爽无比，甚至能精确显示目录下的 .vue、.ts 等业务代码文件。
• 无感内联新建与 AI 翻译：想新建目录？点击加号，直接在树节点上内联输入（类似操作系统重命名）。你可以随意输入中文（如“测试业务”），鳌虾会自动在发给 AI 的指令中注入要求，让大模型在写代码时为你自动翻译成规范的英文（Kebab-case）文件夹名，丝滑无比！

三、 ️ 独创的全局与页面级流转拓扑图 (Flow Designer)

在 1.0 版本中，我们解决了“如何快速生成单个页面”的问题。但真实的业务往往是多页面联动的。 鳌虾 2.0 引入了基于流程图的可视化拓扑连线引擎，分为两个维度：

(这里非常适合放一张截图：FlowDesigner 的流程拓扑连线界面，展示模块之间或页面之间带有箭头和路由说明的连线)

1. 系统级拓扑：宏观编排不同业务模块（Feature）之间的流转关系，系统架构一目了然。
2. 页面级拓扑（模块内）：双击进入模块后，你可以通过拖拽连线，配置列表页到详情页的交互逻辑。
   • 支持多种交互类型：路由跳转（Route）、弹窗打开（Dialog）、抽屉滑出（Drawer）。
   • 精准的 AI 翻译：这些连线数据最终会被鳌虾编译成明确的 AI 指令。例如连线后会生成：“当触发【查看详情】时，请使用【抽屉 (Drawer)】方式打开【详情页】”。AI 接收后，会自动为你写好 Drawer 组件引入和 v-model 状态控制逻辑！

四、 四大智能数据模型导入（告别手抄字段）

前端开发的第一步往往是看接口文档写字段。鳌虾内置了强大的解析引擎，支持四种零成本导入方式：

• API 直连 (Apifox) ：只需输入 Access Token 和项目 ID，鳌虾能直接拉取项目内的接口和数据模型，实现真正的无缝对接。
• JSON 解析 ：支持解析标准的 OpenAPI 3.0 JSON 格式。
• SQL 智能解析 ：直接把后端的 CREATE TABLE 语句贴进来！鳌虾会自动提取字段名、注释作为 Label，甚至能根据字段类型自动推导前端组件（比如 datetime 变日期选择器， varchar 变输入框，注释里带“状态”自动推导为下拉框）。
• Java 实体类解析 ：复制后端的 Entity/DTO 代码，鳌虾能识别 @ApiModelProperty 等注解，秒变前端结构字典。

五、 所见即所得的页面设计器 (Page Designer)

解析完字段后，进入可视化拼装环节：

• 丰富的基础物料 ：支持表单、表格、搜索栏、栅格布局（Grid-1, Grid-2）等多种组件。
• 灵活的嵌套拖拽 ：基于 vuedraggable 实现。你可以在 Tabs 标签页中嵌套布局容器，在布局容器中放置表格或表单，极其自由。
• 多端响应式预览 ：支持一键切换 PC 端和移动端视图，确保组件布局在不同设备下都合理。

六、 智能读取与增强正则的技能体系 (Skill Config)

如何让 AI 生成的代码符合团队规范？

鳌虾 2.0 继承并强化了 1.0 的规范读取能力。它会自动扫描并读取当前 VS Code 工作区下的技能文件，优先级为： .trae/skills > .trae/rules > .cursor/rules > .windsurf/rules > .aocode/rules > docs/rules

• 无遗漏的 <rules> 提取：只要在技能文件中标注了 <rules>...</rules> 或 [CODE_RULES_START]...[CODE_RULES_END] 标签，鳌虾 2.0 会通过强大的正则匹配（支持多块扫描），完整提取并编号所有规则片段，精准输送给大模型。
• 页面级技能分配：你可以为不同页面动态绑定没有任何默认干扰的规范。生成代码前，这些规范会被强制注入到最终的 Prompt 中，让 AI 始终在统一的框架下生成代码，从根本上减少“幻觉”。

工具对比：鳌虾 vs 传统 AI 编程

鳌虾 2.0 的终极工作流体验

(这里可以作为总结，放一张最终生成 AI 指令后，代码在 VS Code 中自动写入过程的录屏动图)

1. 唤出面板 ：在 VS Code 中 Ctrl+Shift+P 执行 Aoxia: Open Aoxia。
2. 一键导模型 ：贴入 SQL，生成带中文名称的数据字典。
3. 拖拽组装 ：左侧拖出栅格，右侧配好搜索栏和表格。
4. 连线画逻辑 ：切换到“流程拓扑”，把列表页连向新增页，设置交互为“抽屉”。
5. 绑定技能 ：为页面勾选 .trae/skills/table-spec.md 规范。
6. 生成并发送 ：点击生成指令，直接发送给右侧的 Trae/Cursor 对话框。
7. 收工 ：看着 AI 在你的编辑器里“唰唰唰”把包含弹窗、表格、表单且完全符合团队规范的完美代码写完。

立即体验

鳌虾 2.0 插件现已正式上架 VS Code 官方插件市场！ 打开 VS Code 扩展面板，搜索 Aoxia-code Extension tool 即可安装体验！（开发者：Zhang-Lab）

欢迎大家下载体验！如果有任何建议或发现了 Bug，欢迎在评论区留言交流！如果觉得好用，别忘了在插件市场留下一个五星好评哦~ ⭐️⭐️⭐️⭐️⭐️