pro-components-guide
🎯Skillfrom jobsys/newbie-next
|Provides comprehensive documentation and interactive guidance for using Pro Components in a React application with Ant Design, demonstrating usage patterns, configuration options, and best practices.
Installation
npx skills add https://github.com/jobsys/newbie-next --skill pro-components-guideSkill Details
Overview
# jobsys-newbie-next
AI-friendly React components built with Ant Design 5.x and Pro Components.
Features
- ✅ AI 友好：完整的 TypeScript 类型定义、详细的 JSDoc 注释、丰富的使用示例
- ✅ 自动化发版：基于 Changesets 的版本管理和 CI/CD 自动化
- ✅ 完整测试：单元测试、集成测试，覆盖率 > 80%
- ✅ Playground：交互式组件展示和文档
Installation
```bash
pnpm add jobsys-newbie-next
```
Quick Start
1. 使用 NewbieProvider
```tsx
import { NewbieProvider } from 'jobsys-newbie-next'
function App() {
return (
themeMode="system"
primaryColor="blue"
density="normal"
config={{
locale: 'zh_CN',
}}
>
)
}
```
2. 使用 NewbieSearch
```tsx
import { NewbieSearch } from 'jobsys-newbie-next'
import type { NewbieProColumn } from 'jobsys-newbie-next'
function SearchExample() {
const columns: NewbieProColumn[] = [
{ title: '姓名', dataIndex: 'name', valueType: 'text' },
{ title: '年龄', dataIndex: 'age', valueType: 'digit', sorter: true },
]
return (
columns={columns}
onSubmit={(query, sort) => {
console.log('Search query:', query)
console.log('Sort config:', sort)
}}
/>
)
}
```
Components
NewbieProvider
Global configuration provider that supports default props override for all components.
Features:
- Global configuration management (Theme, Color, Density)
- Component-level default props override
- Deep merge configuration
- Ant Design locale support
- Automatic Ant Design Token translation
Example:
```tsx
themeMode="dark"
primaryColor="#00ff00"
density="compact"
config={{
locale: 'zh_CN',
}}
>
```
NewbieSearch
Advanced search component with condition filtering, sorting, and persistence.
Features:
- Condition filtering system (equal, notEqual, like, between, etc.)
- Expandable search items (tiled selection)
- Multi-field sorting functionality with drag-and-drop
- Custom render support for complex search scenarios
- Search record persistence
- Responsive layout
Props:
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| columns | Search/Table field configurations | NewbieProColumn[] | [] |
| onSubmit | Submit callback | (query: QueryForm, sort: SortForm) => void | - |
| autoQuery | Whether to trigger search automatically on change | boolean | false |
| disableConditions | Global toggle to disable condition selectors | boolean | false |
NewbieProColumn:
Inherits from ProColumns with additional properties:
| Property | Description | Type |
| --- | --- | --- |
| title| Field label | string |
| dataIndex | Unique field identifier | string |
| valueType | Field type | 'text'\|'digit'\|'date'\|'dateTime'\|'select'\|'cascader'\|'textarea' |
| sorter | Enable sorting for this field | boolean |
| fieldProps | Additional props passed to the input component | any |
Example:
```tsx
columns={[
{ title: '姓名', dataIndex: 'name', valueType: 'text' },
{
title: '分数',
dataIndex: 'score',
valueType: 'digit',
sorter: true
},
]}
onSubmit={(query, sort) => {
// query format: { name: { value: '...', condition: '...', type: 'input' } }
console.log(query, sort)
}}
/>
```
SlideVerify
High-performance slider verification component with behavior trajectory tracking.
Features:
- High performance: Smooth dragging with optimized rendering.
- Trajectory tracking: Records
(x, y, t)points during sliding for backend security analysis. - Mobile support: Full touch event support.
- Customizable: Adjustable height, handle width, and text labels.
- Reset capability: Programmatic reset support via ref.
Props:
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| active | Whether the slider is active | boolean | true |
| onVerify | Callback after success