直接写可运行的vue 3.4 + ts按钮组件，支持loading、disabled、size，严格按指定行修改，emit固定trace_id格式。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用DeepSeek生成前端组件时，空话套话会让代码无法直接粘贴进项目——比如“支持多种状态”“具备良好扩展性”这种描述，既没写清disabled怎么透传，也没说明slot怎么命名，更没交代size变更时class如何响应。
删掉所有角色声明和功能形容词
把提示词第一行的“作为资深Vue开发者”“你是一个UI组件专家”整行删除，不留空行。DeepSeek-R1看到这类句式会立刻切换到通用知识库模式，输出一堆“建议使用Composition API”“注意响应式原理”之类的教科书废话。
直接从任务切入：写一个带加载态、禁用态、尺寸控制的按钮组件，基于Vue 3.4 + TypeScript 5.4，用<script setup>语法。</script>
后面所有描述里禁用“灵活”“优雅”“高性能”“可复用”等无指向性形容词。这些词在模型训练数据里常与空实现绑定，一出现就触发模板反射。
用真实组件示例代替抽象要求
方法一：贴你团队正在用的Button.vue最简可用版
输入：<button type="primary" size="small" loading>提交</button>
输出：完整可运行代码，含props定义、emits声明、class拼接逻辑、loading状态下的icon渲染、disabled时pointer-events: none + opacity处理。
方法二：用Element Plus官网“禁用状态”片段作输入
输入：type=primary, disabled=true, children='提交'
输出：必须包含v-bind="$attrs"透传、computed计算classes、watch监听loading变化并触发动画类——模型能识别这是企业级UI库的约束体系，不会漏掉attrs透传这种关键细节。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
【禁用v-model修饰符说明】不要写“支持v-model”，要明确写“不支持v-model，因该组件无双向绑定需求；若强行使用，控制台报错‘[Vue warn] v-model is not supported on this component’”。
强制指定边界与拒绝项
第一步：明确写出只允许修改以下3处
• 第12–15行的size class映射逻辑
• 第28行的loading图标SVG内联写法
• 第41行的click事件emit参数结构
第二步：加硬约束
“其余所有行不得增删空格、注释、换行符，保留原始缩进和变量命名。”
第三步：注明拒绝项
“不接受引入任何第三方图标库；不接受把size枚举值从'small'|'medium'|'large'改成number类型；不接受用defineExpose暴露内部ref。”
这三步做完，模型就无法用“建议你封装成useButton组合式函数”这种安全但无用的回答来应付。
插入一行仅本项目知晓的业务规则
在提示词末尾单独起一行，写一个下游系统强依赖、且无法编造的细节：
“点击后必须 emit { type: 'submit', payload: { trace_id: string } }，因埋点SDK正则校验为^tr-[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}$”
这个trace_id格式是你们网关层硬编码校验的，模型无法凭空捏造，只能老老实实把payload结构写进emits定义里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
