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
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
/**
|
|
* BottomNav 底部导航组件 (移动端)
|
|
* 设计稿参考: UIDesignSpec.md 3.6
|
|
*/
|
|
import React from 'react';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
export interface NavItem {
|
|
id: string;
|
|
label: string;
|
|
icon: LucideIcon;
|
|
href?: string;
|
|
badge?: number;
|
|
}
|
|
|
|
export interface BottomNavProps {
|
|
items: NavItem[];
|
|
activeId: string;
|
|
onItemClick?: (id: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export const BottomNav: React.FC<BottomNavProps> = ({
|
|
items,
|
|
activeId,
|
|
onItemClick,
|
|
className = '',
|
|
}) => {
|
|
return (
|
|
<nav
|
|
className={`
|
|
fixed bottom-0 left-0 right-0 z-bottom-nav
|
|
flex justify-around items-center
|
|
h-bottom-nav px-[21px] py-3
|
|
safe-area-bottom
|
|
${className}
|
|
`}
|
|
style={{
|
|
background: 'linear-gradient(180deg, transparent 0%, #0B0B0E 50%)',
|
|
}}
|
|
>
|
|
{items.map((item) => {
|
|
const isActive = item.id === activeId;
|
|
const Icon = item.icon;
|
|
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => onItemClick?.(item.id)}
|
|
className={`
|
|
flex flex-col items-center gap-1
|
|
transition-colors duration-200
|
|
${isActive ? 'text-accent-indigo' : 'text-text-secondary'}
|
|
`}
|
|
>
|
|
<div className="relative">
|
|
<Icon size={24} />
|
|
{item.badge !== undefined && item.badge > 0 && (
|
|
<span
|
|
className="
|
|
absolute -top-1 -right-1
|
|
min-w-[16px] h-4 px-1
|
|
flex items-center justify-center
|
|
bg-accent-coral text-white
|
|
text-[10px] font-semibold
|
|
rounded-full
|
|
"
|
|
>
|
|
{item.badge > 99 ? '99+' : item.badge}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<span className="text-nav">{item.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default BottomNav;
|