e4959d584f
主要更新： - 更新代理商端文档，明确项目由品牌方分配流程 - 新增Brief配置详情页(已配置)设计稿 - 完善工作台紧急待办中品牌新任务功能 - 整理Pencil设计文件中代理商端页面顺序 - 新增后端FastAPI框架及核心API - 新增前端Next.js页面和组件库 - 添加.gitignore排除构建和缓存文件 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
/**
|
|
* Card 卡片组件
|
|
* 设计稿参考: UIDesignSpec.md 3.3
|
|
*/
|
|
import React from 'react';
|
|
|
|
export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
children: React.ReactNode;
|
|
variant?: 'default' | 'elevated';
|
|
padding?: 'mobile' | 'desktop' | 'none';
|
|
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',
|
|
hoverable = false,
|
|
onClick,
|
|
...props
|
|
}) => {
|
|
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}
|
|
{...props}
|
|
>
|
|
{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;
|