f166c04422
- Create Tailwind CSS configuration with design tokens from UIDesignSpec - Create globals.css with CSS variables and component styles - Add React component library: - UI components: Button, Card, Tag, Input, Select, ProgressBar, Modal - Navigation: BottomNav, Sidebar, StatusBar - Layout: MobileLayout, DesktopLayout - Add constants for colors, icons, and layout - Update tasks.md with 31 UI development tasks linked to design node IDs - Configure package.json, tsconfig.json, and postcss.config.js Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
82 lines
1.8 KiB
TypeScript
82 lines
1.8 KiB
TypeScript
/**
|
|
* Card 卡片组件
|
|
* 设计稿参考: UIDesignSpec.md 3.3
|
|
*/
|
|
import React from 'react';
|
|
|
|
export interface CardProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
variant?: 'default' | 'elevated';
|
|
padding?: 'mobile' | 'desktop' | 'none';
|
|
onClick?: () => void;
|
|
hoverable?: boolean;
|
|
}
|
|
|
|
const paddingStyles = {
|
|
mobile: 'p-[14px_16px]',
|
|
desktop: 'p-[16px_20px]',
|
|
none: 'p-0',
|
|
};
|
|
|
|
export const Card: React.FC<CardProps> = ({
|
|
children,
|
|
className = '',
|
|
variant = 'default',
|
|
padding = 'mobile',
|
|
onClick,
|
|
hoverable = false,
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={`
|
|
bg-bg-card rounded-card
|
|
${paddingStyles[padding]}
|
|
${variant === 'elevated' ? 'bg-bg-elevated shadow-elevated' : ''}
|
|
${hoverable ? 'cursor-pointer transition-all duration-200 hover:bg-bg-elevated hover:shadow-card' : ''}
|
|
${onClick ? 'cursor-pointer' : ''}
|
|
${className}
|
|
`}
|
|
onClick={onClick}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const CardHeader: React.FC<{
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}> = ({ children, className = '' }) => (
|
|
<div className={`flex items-center justify-between mb-3 ${className}`}>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
export const CardTitle: React.FC<{
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}> = ({ children, className = '' }) => (
|
|
<h3 className={`text-section-title text-text-primary font-semibold ${className}`}>
|
|
{children}
|
|
</h3>
|
|
);
|
|
|
|
export const CardContent: React.FC<{
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}> = ({ children, className = '' }) => (
|
|
<div className={className}>{children}</div>
|
|
);
|
|
|
|
export const CardFooter: React.FC<{
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}> = ({ children, className = '' }) => (
|
|
<div className={`mt-4 pt-4 border-t border-border-subtle ${className}`}>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
export default Card;
|