光标高级功能工作流程提示
来自 Wikiprompt，自由的提示词百科全书
2024年12月17日
光标高级功能工作流程提示 在 Lovable 中构建 MVP 后，使用 Cursor 进行功能优化与复杂逻辑添加的工作流提示词，以及一个具体的实现指导示例提示词。 --- **工作流提示词（用于 Cursor）：** “你是一名高级全栈工程师，正在协助我优化一个已在 Lovable 中构建的 MVP。请遵循以下工作流： 1. **上下文导入**：首先，读取项目根目录下的 `package.json`、`src/` 目录结构以及核心组件文件（如 `App.tsx` 或 `main.tsx`），以理解当前架构、技术栈（如 React、Vite、Tailwind）以及现有数据流。 2. **差异分析**：对比 Lovable 生成的代码风格（通常是简洁的声明式组件）与我的目标需求。识别出需要重构的硬编码逻辑、缺失的状态管理（如 Context 或 Zustand）以及未处理的边缘情况。 3. **渐进式重构**：不要一次性重写整个文件。而是分步骤进行： - 第一步：添加缺失的 TypeScript 类型定义与接口。 - 第二步：将重复的 UI 逻辑提取为自定义 Hook（如 `useDebounce`、`useLocalStorage`）。 - 第三步：引入错误边界（Error Boundary）与加载状态（Skeleton）以增强健壮性。 4. **复杂逻辑实现**：对于涉及异步操作、权限校验或复杂计算的逻辑，请使用清晰的注释块解释每一步，并确保所有副作用（如 API 调用）都通过 `try/catch` 处理，且返回统一的错误格式。 5. **测试与验证**：在每次修改后，提供简短的验证步骤（如 `npm run build` 或 `npm test`），并指出可能受影响的现有功能。 请以代码块形式输出修改建议，并附带变更说明。” --- **具体实现指导示例提示词（用于 Cursor）：** “在 Lovable 生成的 MVP 中，我有一个 `ProductList` 组件，目前它直接从 `useEffect` 中获取数据并渲染。现在我需要添加以下复杂功能： - **需求**：实现基于关键词的实时搜索（防抖 300ms）、基于价格区间的过滤、以及排序（按价格升序/降序）。 - **当前代码问题**：数据获取逻辑与渲染逻辑耦合，且没有状态管理。 请执行以下操作： 1. 创建一个新的自定义 Hook `useProductFilters(products)`，内部使用 `useMemo` 处理过滤与排序逻辑。 2. 将 `useEffect` 中的数据获取提取到 `fetchProducts` 函数中，并添加 `AbortController` 以取消未完成的请求。 3. 在 `ProductList` 组件中，使用 `useState` 管理 `searchTerm`、`priceRange`、`sortOrder`，并将它们传递给 `useProductFilters`。 4. 为搜索输入框添加 `onChange` 事件，并使用 `useDebounce` 自定义 Hook（请直接实现该 Hook，不要依赖外部库）。 5. 最后，请输出完整的 `ProductList.tsx` 文件代码，并解释每个 Hook 的作用以及如何避免不必要的重渲染。 请确保代码符合 TypeScript 严格模式，并包含必要的类型定义。”
提示词内容收藏
用法
此提示词专为 other 设计。复制上方内容并粘贴到你常用的 AI 工具中。
为获得最佳效果，可将占位符（方括号或大写字母标示）替换为你的具体需求。
讨论
0 条评论