Add frontend component library and UI development tasks

- 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>
2026-02-03 17:44:22 +08:00
parent dd06502004
commit f166c04422
22 changed files with 2509 additions and 1 deletions
@@ -0,0 +1,61 @@
+/**
+ * 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;
@@ -0,0 +1,66 @@
+/**
+ * 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;