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>
42 lines
954 B
TypeScript
42 lines
954 B
TypeScript
/**
|
|
* StatusBar 状态栏组件 (移动端)
|
|
* 设计稿参考: UIDesignSpec.md 3.1
|
|
*/
|
|
import React from 'react';
|
|
import { Signal, Wifi, BatteryFull } from 'lucide-react';
|
|
|
|
export interface StatusBarProps {
|
|
time?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export const StatusBar: React.FC<StatusBarProps> = ({
|
|
time = '9:41',
|
|
className = '',
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={`
|
|
flex items-center justify-between
|
|
h-status-bar px-6
|
|
bg-bg-page safe-area-top
|
|
${className}
|
|
`}
|
|
>
|
|
{/* Time */}
|
|
<span className="text-body font-semibold text-text-primary">
|
|
{time}
|
|
</span>
|
|
|
|
{/* Status Icons */}
|
|
<div className="flex items-center gap-1">
|
|
<Signal size={16} className="text-text-primary" />
|
|
<Wifi size={16} className="text-text-primary" />
|
|
<BatteryFull size={16} className="text-text-primary" />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StatusBar;
|