首页

CLAUDE.md

@@ -72,3 +72,58 @@ Pages must be registered in `src/app.config.ts` under the `pages` array.
 - `src/app.ts` — class-based App component, renders `this.props.children` (the current page)
 - `src/app.config.ts` — defines routes (`pages` array), window config, and app-level settings
 - `src/index.html` — H5 entry HTML template
+
+## VantUI Component API Reference (v3.7)
+
+This project uses `@antmjs/vantui` v3.7. The official docs: https://antmjs.github.io/vantui/main/
+
+**Always check the actual type definitions** in `node_modules/@antmjs/vantui/types/` when unsure about props. Key API notes for commonly used components:
+
+### Search
+- `shape`: `'square'` (default) | `'round'`
+- `background`: background color string (default `#FFFFFF`)
+- `onFocus`, `onBlur`, `onChange`, `onSearch`, `onClear`, `onCancel` — event callbacks
+- `leftIcon`, `rightIcon` — icon name or image URL
+- `showAction` + `actionText` — right-side action button
+
+### Swiper (NOT the same as Taro's native Swiper)
+- `autoPlay` — auto-play interval in ms (0 = disabled). **Not** `autoplay`
+- `loop` — infinite loop mode. **Not** `circular`
+- `paginationColor` — indicator dot color. **Not** `indicatorColor`
+- `paginationVisible` — show/hide pagination dots
+- `duration` — animation duration (default 500)
+- `width` / `height` — card dimensions
+- **No** `indicatorActiveColor` prop — only one `paginationColor`
+- `onChange` callback: `(currPage: number) => void` (not an event object)
+
+### SwiperItem
+- Minimal component, only `className` and `children`. No special props.
+
+### Grid / GridItem
+- `Grid`: `columnNum`, `border`, `gutter`, `square`, `clickable`, `center`, `iconSize`
+- `GridItem`: `icon` (string), `text` (ReactNode), `iconColor`, `dot`, `info`/`badge`, `url` + `linkType`
+
+### Tabs / Tab (v3.7)
+- `Tabs`:
+  - `active` — current tab index (number | string)
+  - `sticky` — enable sticky mode
+  - `offsetTop` — sticky offset in px. **Not** `stickyOffsetTop`
+  - `color`, `titleActiveColor`, `titleInactiveColor` — color props
+  - `type`: `'line'` | `'card'`
+  - `swipeable` — enable swipe gesture switching
+  - `animated` — enable tab switch animation
+  - `ellipsis` — text overflow ellipsis (default true)
+  - **No** `lineWidth` or `lineHeight` props
+  - `onChange`: `(e: { detail: { index: number; name?: string; title?: string } }) => void`
+- `Tab`: `title` (ReactNode), `name` (identifier), `dot`, `info`, `disabled`, `titleStyle`
+
+### Image (VantUI Image, not Taro's native Image)
+- `src`, `fit` (`'contain' | 'cover' | 'fill' | 'widthFix' | 'heightFix' | 'none'`), `width`, `height`, `radius`
+- `round` — circular image (boolean)
+- `lazyLoad`, `showError`, `showLoading`
+- `renderLoading`, `renderError` — custom render slots
+
+### Common VantUI pattern: Taro's native components vs VantUI components
+- Use `@tarojs/components` for: `View`, `Text`, `ScrollView`, `Image` (native, simpler)
+- Use `@antmjs/vantui` for: styled UI components (Search, Swiper, Tabs, Grid, Button, etc.)
+- VantUI component props extend Taro's `ViewProps`, so `onClick`/`onTap` and style props are always available