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>
67 lines
1.4 KiB
TypeScript
67 lines
1.4 KiB
TypeScript
/**
|
|
* MobileLayout 移动端布局组件
|
|
* 设计稿参考: UIDesignSpec.md 3.1
|
|
* 尺寸: 402x874
|
|
*/
|
|
import React from 'react';
|
|
import { StatusBar } from '../navigation/StatusBar';
|
|
import { BottomNav, NavItem } from '../navigation/BottomNav';
|
|
|
|
export interface MobileLayoutProps {
|
|
children: React.ReactNode;
|
|
navItems?: NavItem[];
|
|
activeNavId?: string;
|
|
onNavItemClick?: (id: string) => void;
|
|
showStatusBar?: boolean;
|
|
showBottomNav?: boolean;
|
|
className?: string;
|
|
contentClassName?: string;
|
|
}
|
|
|
|
export const MobileLayout: React.FC<MobileLayoutProps> = ({
|
|
children,
|
|
navItems = [],
|
|
activeNavId = '',
|
|
onNavItemClick,
|
|
showStatusBar = true,
|
|
showBottomNav = true,
|
|
className = '',
|
|
contentClassName = '',
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={`
|
|
min-h-screen bg-bg-page
|
|
flex flex-col
|
|
${className}
|
|
`}
|
|
>
|
|
{/* Status Bar */}
|
|
{showStatusBar && <StatusBar />}
|
|
|
|
{/* Content Area */}
|
|
<main
|
|
className={`
|
|
flex-1 overflow-y-auto
|
|
px-6 py-4
|
|
${showBottomNav ? 'pb-[99px]' : ''}
|
|
${contentClassName}
|
|
`}
|
|
>
|
|
{children}
|
|
</main>
|
|
|
|
{/* Bottom Navigation */}
|
|
{showBottomNav && navItems.length > 0 && (
|
|
<BottomNav
|
|
items={navItems}
|
|
activeId={activeNavId}
|
|
onItemClick={onNavItemClick}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MobileLayout;
|