应采用AST分析提取项目特征、配置IDE Live Templates、CLI动态渲染模板及LLM提示工程四步法实现风格感知式组件生成，确保命名、props、样式、导出和类型严格匹配现有规范。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您希望新生成的 Vue 或 React 组件能严格匹配项目中已有的命名规范、props 结构、样式语法（如 stylus/scss）、导出方式及 TypeScript 类型定义，则不能依赖通用模板或 IDE 默认骨架。以下是实现风格感知式组件自动生成的操作路径：
一、基于 AST 分析提取项目代码特征
该方法通过解析现有组件源码，构建项目专属的代码模式画像，作为后续生成的依据。它不依赖人工描述，而是从真实代码中自动归纳结构规律。
1、在项目根目录执行 npx @babel/parser 与 @babel/traverse 安装命令，确保具备 AST 解析能力。
2、新建 scripts/analyze-component-features.js 文件，调用 parse() 加载 src/components/ 下任意三个典型 .vue 文件内容。
3、遍历 AST 节点，识别并记录：script 中 defineProps 的泛型写法（如 defineProps<{ loading: boolean }>()）、emits 声明格式（数组或对象）、style 标签的 lang 属性值（如 lang="stylus"）、class 名是否含 BEM 前缀、index.ts 是否存在且导出方式为 export { default } from './X.vue'。
4、将提取结果序列化为 .component-profile.json，存于项目根目录供后续模板引擎读取。
二、配置 Live Templates 并注入上下文变量
此方案适用于 WebStorm / IntelliJ 系列 IDE，利用 Live Templates 的动态变量机制，在补全时实时读取项目 profile，调整占位符默认值和结构分支。
1、进入 Settings → Editor → Live Templates，点击右上角 “+” 创建新模板组，命名为 ProjectAware。
2、在该组下新增 Live Template，Abbreviation 设为 vue3-proj，Template text 中嵌入条件逻辑占位符，例如：$PROFILE.lang$ 替换 style 的 lang 属性，$PROFILE.propsType$ 控制 defineProps 泛型或运行时声明。
3、点击 Edit variables，为每个 $XXX$ 变量绑定表达式：如 fileText("component-profile.json").propsType，要求 IDE 支持 JSON 路径提取。
4、在 Define 中限定作用域为 Vue files 和 HTML files，保存后在 .vue 文件中输入 vue3-proj 并按 Tab 键触发。
三、使用 CLI 工具加载本地 profile 动态渲染模板
该方法脱离 IDE 限制，支持团队统一规范，通过 Node.js 脚本读取 .component-profile.json，并结合 EJS 或 Handlebars 渲染模板，确保所有成员生成结构一致。
1、在项目 scripts/ 目录下创建 generate-component.js，使用 fs.readFileSync('.component-profile.json', 'utf8') 加载配置。
2、定义模板字符串，其中包含条件块，例如：<% if (profile.hasIndex) { %>export { default } from './<%= name %>.vue'<% } %>。
3、调用 ejs.render(template, { name: argv._[0], profile }) 生成完整 .vue 内容与可选的 index.ts 文件。
4、将脚本注册为 npm script："gen:comp": "node scripts/generate-component.js"，执行 npm run gen:comp ButtonPrimary 即按项目约定生成组件目录及文件。
四、集成 LLM 提示工程实现语义化生成
当需根据自然语言描述（如“带 loading 状态和 click 回调的按钮组件”）生成代码时，此方法将项目 profile 作为 system prompt 注入大模型调用链，强制输出符合当前风格的代码。
1、准备提示词模板，在 system 消息中嵌入 .component-profile.json 全部内容，并明确指令：“仅使用 profile 中声明的 props 类型语法、样式语言、导出方式，不得引入未定义的依赖或语法。”
2、使用 fetch 调用本地部署的 Ollama 或 API 接口，发送 user 消息：“生成一个名为 DialogConfirm 的组件，含 title、content、onConfirm、onCancel 四个 prop。”
3、接收响应后，用正则提取 <template>.*?</template>、<script setup>.*?</script>、<style.*?>.*?</style> 三段内容。
4、校验提取内容是否包含 profile 中指定的 class 命名规则（如含 -dialog- 子串）、是否使用 defineEmits<...>() 而非数组形式，任一失败则丢弃响应并重试。
