yuzhiran-dev
41374f2642
- docs/design-tokens.md — 完整 Token 规范（色彩/间距/圆角/排版/组件模式） - 新增 PageLayout 组件（封装 26+ 页面的重复容器模式） - 新增 Card / StatCard 组件 - 补充 Mobile (Vue) 迁移清单和 CSS 变量映射
31 lines
789 B
TypeScript
31 lines
789 B
TypeScript
import type { ReactNode } from 'react'
|
|
|
|
interface CardProps {
|
|
children: ReactNode
|
|
className?: string
|
|
padding?: 'sm' | 'md' | 'lg'
|
|
}
|
|
|
|
export function Card({ children, className = '', padding = 'md' }: CardProps) {
|
|
const pads = { sm: 'p-4', md: 'p-6', lg: 'p-8' }
|
|
return (
|
|
<div className={`bg-card rounded-2xl border border-border shadow-sm ${pads[padding]} ${className}`}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface StatCardProps {
|
|
label: string
|
|
value: string | number
|
|
}
|
|
|
|
export function StatCard({ label, value }: StatCardProps) {
|
|
return (
|
|
<div className="bg-card rounded-xl border border-border p-6">
|
|
<div className="text-sm text-muted-foreground mb-1">{label}</div>
|
|
<div className="text-2xl font-bold text-foreground">{value}</div>
|
|
</div>
|
|
)
|
|
}
|