claude code使用技巧1

【背景说明】
我正在开发一个电商平台的前台页面，使用 Vue 3 + TypeScript + Element Plus。
项目已有商品列表页 ProductList.vue，现在需要在页面顶部添加搜索功能。

【具体需求】
1. 搜索框位于页面顶部，包含：
- 关键词输入框（placeholder: "请输入商品名称"）
- 分类下拉选择器（全部分类、数码、家电、服装、食品）
- 价格区间选择（不限、0-100、100-500、500-1000、1000以上）
- 搜索按钮

2. 搜索交互：
- 输入关键词后防抖 800ms 自动搜索
- 切换分类或价格区间立即触发搜索
- 点击搜索按钮立即搜索
- 搜索时显示 loading 状态

3. 搜索结果：
- 调用接口 GET /api/products/search?keyword=xx&category=xx&priceRange=xx
- 更新商品列表数据
- 显示搜索结果数量："找到 XX 个商品"
- 无结果时显示空状态提示

【约束条件】
- 必须使用 TypeScript，定义清晰的类型
- 使用 Composition API + <script setup> 语法
- 防抖使用 VueUse 的 useDebounceFn
- 搜索参数通过 URL 查询参数同步，支持分享链接
- 搜索历史保存到 localStorage（最多 10 条）

【输出格式】
生成完整的 SearchBar.vue 组件代码，包含：
1. template（使用 Element Plus 的 el-input、el-select）
2. script setup（TypeScript，带完整类型定义和注释）
3. scoped style（使用 flex 布局）
4. 提供接口返回数据的类型定义