UI 规则

本规则针对所有 *.tsx 组件文件，规范了 Shadcn/UI 组件的使用、图标库的选择和通知系统的实现。通过统一的 UI 规范，保证界面风格的一致性和用户体验的流畅性。

ui-rules.mdc


---
globs: *.tsx
alwaysApply: false
---
 
# UI & Component Rules
 
## Shadcn/UI Base Components
 
- Color theme: Use `zinc` color palette
- Base Component: Choose proper ui components from `@/components/ui/`
- Do not use Card component unless I request it
 
## Custom Components
 
- Class combination: Always provide `className` prop and use `cn()` utility to merge Tailwind classes
 
## Icon Standards
 
- Iconify React: Use `import { Icon } from "@iconify/react"` for all icons
- Lucide preference: Default to Lucide icons: `<Icon icon="lucide:circle-user" />`
- Custom SVGs: Store custom SVG icons as separate `.tsx` files in `@/components/icon/`
 
## Toast Notifications
 
- Sonner library: Use `import { toast } from 'sonner'` for all notifications
- Toast types: Use semantic methods: `toast.success()`, `toast.error()`, `toast.info()`, `toast.warning()`
 
## ui/calendar default
 
Add `timeZone`, `defaultMonth`, `startMonth`, `endMonth` props as default:
 
```
<Calendar
  ...
  timeZone="UTC"
  defaultMonth={defaultMonth}
  startMonth={new Date(2000, 1)}
  endMonth={new Date(new Date().getFullYear() + 10, 12)}
  ...
/>
```