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>
62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
/**
|
||
* DesktopLayout 桌面端布局组件
|
||
* 设计稿参考: UIDesignSpec.md 3.2
|
||
* 尺寸: 1440x900，侧边栏260px
|
||
*/
|
||
import React from 'react';
|
||
import { Sidebar, SidebarSection } from '../navigation/Sidebar';
|
||
|
||
export interface DesktopLayoutProps {
|
||
children: React.ReactNode;
|
||
logo?: React.ReactNode;
|
||
sidebarSections: SidebarSection[];
|
||
activeNavId: string;
|
||
onNavItemClick?: (id: string) => void;
|
||
sidebarFooter?: React.ReactNode;
|
||
headerContent?: React.ReactNode;
|
||
className?: string;
|
||
contentClassName?: string;
|
||
}
|
||
|
||
export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
|
||
children,
|
||
logo,
|
||
sidebarSections,
|
||
activeNavId,
|
||
onNavItemClick,
|
||
sidebarFooter,
|
||
headerContent,
|
||
className = '',
|
||
contentClassName = '',
|
||
}) => {
|
||
return (
|
||
<div className={`min-h-screen bg-bg-page ${className}`}>
|
||
{/* Sidebar */}
|
||
<Sidebar
|
||
logo={logo}
|
||
sections={sidebarSections}
|
||
activeId={activeNavId}
|
||
onItemClick={onNavItemClick}
|
||
footer={sidebarFooter}
|
||
/>
|
||
|
||
{/* Main Content */}
|
||
<div className="ml-sidebar">
|
||
{/* Header (optional) */}
|
||
{headerContent && (
|
||
<header className="px-8 py-4 border-b border-border-subtle bg-bg-page sticky top-0 z-10">
|
||
{headerContent}
|
||
</header>
|
||
)}
|
||
|
||
{/* Content Area */}
|
||
<main className={`p-8 ${contentClassName}`}>
|
||
{children}
|
||
</main>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default DesktopLayout;
|