你正为已上线内部运营平台编写reviewpanel.vue组件，需严格适配vue 3 + vite 4.5.1 + ts 5.4环境，遵循团队tailwind原子类规范与真实api交互逻辑，确保eslint校验通过、props类型对齐、事件结构准确、加载态符合wcag标准且可直接集成。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要让ChatGPT生成的前端代码不是能跑就行的Demo，而是能直接放进你正在维护的Vue 3 + Vite项目里、用ESLint校验通过、适配你团队已有的Tailwind原子类命名规范、且组件Props接口和父级调用方式完全对齐的真实交付物。
锁定真实项目结构与构建链路
第一步：在提示词开头写明当前项目根目录下的关键路径与版本约束，例如：“你正为一个已上线的内部运营平台编写组件，项目结构为src/views/audit/ReviewPanel.vue，Vite版本4.5.1，TypeScript 5.4，已启用defineComponent + <script setup lang="ts">语法糖”。</script>
第二步：明确指定构建产物依赖项。比如：“该组件将被src/views/audit/ReviewPage.vue通过
【漏掉props类型定义或事件结构，生成的组件在TSX中会立即报错，无法通过编译】
绑定真实UI规范与设计系统
方法一：直接引用你团队Figma设计稿中的原子参数
“按钮使用Primary Button样式：padding-y=10px、font-size=14px、bg=#3b82f6、hover:bg=#2563eb、text-white、rounded-md；禁用状态时opacity=0.5且cursor=not-allowed”。
方法二：嵌入你已有的CSS类名体系
“所有卡片容器必须使用tw-card类（已全局定义为@apply bg-white border border-gray-200 rounded-xl shadow-sm），内部分隔线用tw-divider（@apply border-t border-gray-100 mt-4 pt-4）”。
这一步操作起来很简单，直接把Figma标注截图里的字号/间距/色值复制进提示词就行，别写“类似Ant Design风格”这种模糊描述。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
注入真实交互逻辑与错误边界
① 第一步：列出你当前页面已存在的副作用函数
“父组件已注入useAuditApi()组合式函数，其返回的approveItem(id: string)方法会触发HTTP PATCH /api/v1/audit/{id}/status，成功后返回{ code: 0, data: { status: 'approved' } }，失败时抛出AxiosError，响应体含message字段”。
② 第二步：强制要求错误处理路径显式写出
“点击‘通过’按钮后，需先调用approveItem(id)，若catch到error且error.response?.data?.message === 'insufficient_permission'，则调用toast.error('权限不足，请联系管理员')并return，不执行后续逻辑”。
③ 第三步：规定加载态与禁用时机
“按钮在approveItem调用期间必须添加loading状态（使用Iconify的i-mdi-loading图标），且整个按钮区域disabled，防止重复提交”。
注意：如果只写“要有加载状态”，ChatGPT大概率用v-if控制整个按钮显隐，而不是加disabled+loading图标——这会导致表单焦点丢失、键盘Tab键跳过该控件，违反WCAG 2.1标准。
声明真实调试环境与验证方式
在提示词末尾加一句：“生成代码后，请确认以下三点可直接验证：1. 在Chrome DevTools Console中执行console.log(ReviewPanel.name)输出'ReviewPanel'；2. 打开Vite热更新日志，确认无[plugin:vue] Component is missing template警告；3. 运行pnpm run lint，ESLint no-unused-vars与vue/multi-word-component-names规则全部通过”。
这一步不做，AI可能输出带<script>标签但没写template的组件，或者用驼峰命名Reviewpanel.vue文件——你在VS Code里右键“在终端中打开”就会立刻报错。</script>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
