diff --git a/.meoo/browser-state/__warmup__/20260604-202821_state_text_screenshot.jpg b/.meoo/browser-state/__warmup__/20260604-202821_state_text_screenshot.jpg new file mode 100644 index 0000000..26ab2fb Binary files /dev/null and b/.meoo/browser-state/__warmup__/20260604-202821_state_text_screenshot.jpg differ diff --git a/README.md b/README.md index ebb638e..55e0337 100644 --- a/README.md +++ b/README.md @@ -105,18 +105,31 @@ src/utils/constants.ts ← 向后兼容层(状态枚举、UI映射、步骤配 5. **向后兼容**:`constants.ts` 重新导出 `animationConfig`/`paginationConfig`/`progressThresholds`,旧代码无需修改 ### 设计架构 -- **CSS变量体系**: 完整50-900色阶、6级阴影系统、毛玻璃/滚动条美化等自定义工具类 -- **动效规范**: 页面过渡(opacity+slide, 0.35s)、列表交错(stagger 0.08)、Spring弹簧交互 -- **性能降级**: `usePerformance` Hook 自动检测设备性能,低配设备仅使用opacity过渡 -- **响应式设计**: 移动优先,断点 sm(640)/md(768)/lg(1024)/xl(1280),桌面表格↔移动卡片自动切换 -- **触控优化**: 44px最小触控区域、防双击缩放、数字键盘自动唤起 + +#### CSS 变量体系 (`src/styles/index.css`) +- **色阶系统**: 完整的 50-900 色阶定义(Primary, Success, Warning, Error, Gray) +- **阴影层级**: 6级阴影系统 (`--shadow-sm` ~ `--shadow-2xl`) +- **自定义工具类**: `.glass`/`.glass-dark`(毛玻璃)、`.scrollbar-thin`/`.scrollbar-hide`(滚动条美化)、`.animate-fade-in`/`.animate-slide-in`(入场动画)、`.safe-area-top/bottom`(iOS安全区) + +#### 动效规范 (Framer Motion + constants.ts) +- **页面过渡**: `opacity: 0→1`, `y: 20→0`, `scale: 0.98→1` (Duration: 0.35s) +- **列表交错**: `staggerChildren: 0.08` +- **交互反馈**: Spring 弹簧动画 (`stiffness: 200, damping: 25`) +- **性能降级**: `usePerformance` Hook 自动检测,低性能设备仅使用 opacity 过渡 +- **硬件加速**: `will-change-transform` + `content-visibility-auto` + +#### 响应式设计 +- **断点**: `sm(640px)`, `md(768px)`, `lg(1024px)`, `xl(1280px)` +- **移动优先**: 默认样式为移动端,通过 `sm:/md:/lg:` 向上覆盖 +- **触控优化**: 最小触控区域 44x44px (`@media (pointer: coarse)`) +- **布局切换**: 桌面端表格 ↔ 移动端卡片,根据屏幕宽度自动切换 ### 布局架构 -| 角色 | 布局组件 | 导航项数 | 路由模式 | +| 角色 | 布局组件 | 导航项数 | 路由嵌套 | |------|---------|---------|---------| -| 采购商 | PurchaserLayout | 8项 | 嵌套Outlet | -| 纺织厂 | TextileLayout | 5项 | 嵌套Outlet | -| 水洗厂 | 无独立Layout | 6项 | 扁平路由 | +| 采购商 | PurchaserLayout | 8项 | 嵌套 Outlet | +| 纺织厂 | TextileLayout | 5项 | 嵌套 Outlet | +| 水洗厂 | WashingLayout | 6项 | 嵌套 Outlet | ### 后端服务 - **Meoo Cloud (Supabase)** - 云数据库 + 认证 + 实时订阅 + 文件存储 @@ -168,11 +181,12 @@ meoo-cli cloud migrate --sql "..." --name "migration_name" --changes "变更说 ``` src/ ├── App.tsx # 根组件(25条HashRouter路由 + PageErrorBoundary) -├── components/ # 共享组件(33个) -│ ├── layout/ # 布局组件(3个) +├── components/ # 共享组件(35个) +│ ├── layout/ # 布局组件(4个) │ │ ├── Sidebar.tsx # 可折叠侧边栏导航 │ │ ├── PurchaserLayout.tsx # 采购商布局(8项导航 + amber主题) -│ │ └── TextileLayout.tsx # 纺织厂布局(5项导航 + emerald主题) +│ │ ├── TextileLayout.tsx # 纺织厂布局(5项导航 + emerald主题) +│ │ └── WashingLayout.tsx # 水洗厂布局(6项导航 + violet主题) │ ├── warehouse/ # 仓库管理组件(6个) │ │ ├── WarehouseNav.tsx # 仓库类型导航 │ │ ├── ProductForm.tsx # 产品创建/编辑表单 @@ -215,13 +229,13 @@ src/ │ │ ├── YarnWarehouse.tsx # 原料纱仓库(出入库记录) │ │ ├── FabricWarehouse.tsx # 已生产坯布(Realtime订阅) │ │ └── PaymentPending.tsx # 待结款 -│ └── washing/ # 水洗厂页面(6个,扁平路由无Layout) +│ └── washing/ # 水洗厂页面(6个,WashingLayout嵌套) │ ├── Dashboard.tsx # 首页(violet主题) │ ├── PlanOverview.tsx # 水洗计划总览 │ ├── PendingFabric.tsx / CompletedFabric.tsx # 待洗/已完成 │ ├── FinishedWarehouse.tsx # 成品仓库 │ └── PaymentPending.tsx # 待结款 -├── hooks/ # 自定义Hooks(9个) +├── hooks/ # 自定义Hooks(10个) │ ├── useInventoryData.ts # 库存数据(5秒缓存+Realtime) │ ├── usePlanData.ts # 计划数据(10秒缓存+分页+Realtime) │ ├── usePlanStatusSync.ts # 计划状态自动同步(10秒测试间隔) @@ -230,7 +244,8 @@ src/ │ ├── useTheme.ts # 主题管理(暗黑模式class策略) │ ├── usePerformance.ts # 性能检测(三档动画降级) │ ├── useNetworkStatus.ts # 网络状态监听 -│ └── useVirtualScroll.ts # 虚拟滚动 +│ ├── useVirtualScroll.ts # 虚拟滚动 +│ └── useErrorHandler.ts # 统一错误处理Hook ├── config/app.ts # 应用全局配置中心(环境/缓存/分页/动画/主题色/存储键等) ├── contexts/AuthContext.tsx # 认证上下文(login/register/logout) ├── styles/index.css # 全局样式(CSS变量+工具类+移动端适配) @@ -262,12 +277,12 @@ src/ | `/textile/yarn-warehouse` | YarnWarehouse | TextileLayout | 原料纱仓库 | | `/textile/fabric-warehouse` | FabricWarehouse | TextileLayout | 已生产坯布 | | `/textile/payments` | PaymentPending | TextileLayout | 待结款 | -| `/washing` | WashingDashboard | - | 水洗厂首页 | -| `/washing/plans` | WashingPlanOverview | - | 水洗计划总览 | -| `/washing/pending` | PendingFabric | - | 待水洗坯布 | -| `/washing/completed` | CompletedFabric | - | 已完成水洗 | -| `/washing/finished-warehouse` | FinishedWarehouse | - | 成品仓库 | -| `/washing/payments` | WashingPaymentPending | - | 待结款 | +| `/washing` | WashingDashboard | WashingLayout | 水洗厂首页 | +| `/washing/plans` | WashingPlanOverview | WashingLayout | 水洗计划总览 | +| `/washing/pending` | PendingFabric | WashingLayout | 待水洗坯布 | +| `/washing/completed` | CompletedFabric | WashingLayout | 已完成水洗 | +| `/washing/finished-warehouse` | FinishedWarehouse | WashingLayout | 成品仓库 | +| `/washing/payments` | WashingPaymentPending | WashingLayout | 待结款 | | `/members` | MemberManage | - | 子账号管理 | | `/import` | ImportPlanPage | - | 分享链接导入 | | `/demo/data-sharing` | DemoDataSharing | - | 数据共享演示 |