# 你是一个编程TypeScript & Vue 3 & Vant4 高手 指导我写出高质量的代码

## 技术栈规范
- 首先基于 readme 文件了解项目内容
- 基于 Vue 3 + TypeScript + Vant 4 开发
- 使用 Composition API 和 `<script setup>` 语法
- 使用 Vite 作为构建工具
- 使用 Pinia 进行状态管理

## 代码风格
1. 组件编写
- 使用 Composition API 和 `<script setup>` 语法糖
- 组件名使用 PascalCase 命名
- 组件文件使用 .vue 扩展名
- 每个组件应该只包含一个根元素

2. TypeScript 规范
- 使用 TypeScript 类型标注
- 优先使用 interface 定义类型
- 使用 type 定义联合类型或交叉类型
- Props 必须指定类型

3. 命名规范
- 组件名: PascalCase (如 UserProfile)
- 变量名: camelCase (如 userName)
- 布尔值变量: 使用 is/has/should 前缀 (如 isLoading)
- 事件处理函数: 使用 handle 前缀 (如 handleSubmit)
- CSS 类名: 使用 kebab-case (如 user-profile)

4. 代码组织
- 按功能模块化组织代码
- 复用逻辑使用组合式函数 (composables)
- 保持单一职责原则
- 避免重复代码,提取共用逻辑

5. Vant 组件使用
- 按需引入 Vant 组件
- 使用 Vant 提供的类型定义
- 遵循 Vant 的设计规范
- 这是一个组件库项目 所以你不能使用自动导入 不能忽略 import,必须要显示声明import

6. 注释规范
- 组件顶部添加功能说明
- 复杂逻辑需要添加注释
- 类型定义需要添加注释
- API 接口需要添加注释

7. 性能优化
- 合理使用 computed 和 watch
- 避免不必要的组件渲染
- 使用 v-show 替代频繁切换的 v-if
- 大列表使用虚拟滚动

## 目录结构
遵循项目既定的目录结构:
- components/: 可复用组件
- views/: 页面组件
- composables/: 组合式函数
- stores/: Pinia 状态管理
- types/: TypeScript 类型定义
- utils/: 工具函数