add whole project

.devv/STRUCTURE.md

@@ -0,0 +1,108 @@
+# This file is only for editing file nodes, do not break the structure
+## Project Description
+Dream-Machine 采购清单是一个为网络设备采购管理设计的应用，专注于 Ubiquiti 设备系列的采购跟踪。提供清晰的采购状态可视化，便于跟踪预算使用和设备采购进度。
+
+## Key Features
+- 采购清单管理：跟踪设备采购项目的状态和详情
+- 预算跟踪：显示总预算、已使用金额和剩余预算
+- 状态标记：直观图标显示采购状态
+- 多币种支持：新加坡元和美元自动换算为人民币，支持自定义汇率
+- 产品导购链接：优化设计的链接按钮直接跳转到对应产品页面
+- 高级筛选系统：按分类、采购状态、重要程度（必须/必须的必/可买/不急）和批次进行组合筛选，重要程度颜色编码：必须的必(深红色粗体)、必须(红色)、可买(黄色)、不急(绿色)
+- 全面排序功能：按多种字段排序，包括产品名称、代码、价格、重量、重要程度、分类和批次
+- 筛选排序记忆：自动保存用户的筛选和排序首选项
+- 产品重量管理：手动输入产品重量（kg），支持精确至0.001kg的小数输入，支持重量汇总和筛选
+- 汇总功能：在表格底部显示筛选项目的总价格和总重量
+- 完整CRUD功能：添加、编辑、删除采购项目，所有操作需要验证码(1408)
+- 批量编辑功能：支持选择多个项目进行批次的批量修改，提高批量管理效率
+- 打印功能：精美设计的打印模板支持打印采购清单（不含水印）
+- 数据管理系统：支持JSON和Excel两种格式的导出/导入功能，完整的数据备份、恢复和批量操作，包含模板下载和清空数据功能，按钮文本已更新为"导出为 JSON/EXCEL"和"导入 JSON/EXCEL"，文件命名使用简化timestamp格式（YYMMDDHHMMSS）确保唯一性
+- 激励图片：打石膏狗狗图片展示决心
+
+## Data Integration Status
+- 已导入完整采购清单数据（7个Ubiquiti设备项目）
+- 包含精确的SGD/USD转RMB价格：SW-02交换机(¥1404.50)、UCG-FIBER网关(¥672.00)、G4摄像头(¥1490.40)、Dream Machine SE(¥2756.00)、UPS电源(¥3492.00)、U7 Pro XGS(¥2226.00)
+- 支持"必须的必"特殊重要性等级，用于大佬哥孤品收藏价值物品
+- 完全无认证本地存储：使用localStorage和自动备份机制，支持跨设备数据同步
+- 多格式数据管理：支持JSON和Excel格式的导出/导入，完整的数据备份功能确保安全，支持替换和追加两种导入模式，包含模板下载功能，所有导出文件使用简化timestamp格式（例如：购买清单_250820134117）确保文件名唯一性
+
+## Development & Deployment
+- 完整的Makefile项目管理：提供统一的开发、构建、部署命令
+- 开发环境快速启动：make dev 一键安装依赖并启动开发服务器
+- 交互式启动脚本：start.sh (Linux/macOS) 和 start.bat (Windows) 提供用户友好的启动体验
+- 生产环境优化构建：make build 生成优化的生产版本
+- 代码质量保证：make lint 运行ESLint检查，make lint-fix 自动修复
+- 部署前检查流程：make pre-deploy 完整的部署前验证
+- 多平台部署支持：Netlify、Vercel、GitHub Pages、Docker等
+- 完整文档体系：README.md、DEPLOYMENT.md、USER_GUIDE.md、CHANGELOG.md
+- 环境配置支持：.env.example 提供配置模板
+- MIT开源许可：LICENSE 文件规范项目使用权限
+
+## Storage Integration
+Local Storage: localStorage + 自动备份机制，完全无需认证
+Data Persistence: 设备唯一标识实现跨设备数据同步
+Backup Strategy: 自动定期备份到云端（可选）
+
+## Technical Notes
+- 修复了shadcn/ui Select组件空字符串value问题：使用受控组件模式替代react-hook-form register
+- 表单组件使用状态管理Select的值，避免控制台错误和白屏问题
+- FilterSortPanel已更新支持"必须的必"重要性等级
+- 白屏问题修复：重新实现了Excel导入导出功能，使用稳定的xlsx和file-saver库
+- 综合数据管理功能：支持JSON和Excel两种格式的导出导入，智能解析，自动模板生成和数据验证
+- 数据格式转换：添加适配层在现有store格式和Excel格式之间进行转换，确保兼容性
+- Select组件value空值修复：在FilterSortPanel中过滤掉无效分类值('-', 空字符串)，确保SelectItem不会收到空value
+- 数据清理：将数据中的占位符'-'替换为有效分类'配件'和site'SG'，避免生成无效选项
+
+/src
+├── assets/          # Static resources directory, storing static files like images and fonts
+│
+├── components/      # Components directory
+│   ├── ui/         # Pre-installed shadcn/ui components, avoid modifying or rewriting unless necessary
+│   └── DataManager.tsx # 综合数据管理组件，支持JSON和Excel格式的导出/导入/清空数据功能，包含模板下载，按钮文本显示"导出为 JSON/EXCEL"和"导入 JSON/EXCEL"，文件名使用简化timestamp格式
+│
+├── features/        # Feature-based organization directory
+│   └── purchase/    # Purchase list feature components
+│       └── components/  # Purchase-related components
+│           ├── PurchaseHeader.tsx  # Header with project description, customizable exchange rate, and comprehensive data management
+│           ├── BudgetOverview.tsx  # Budget overview cards (总预算、已购买、待购买) displayed at page bottom
+│           ├── PurchaseTable.tsx   # Interactive purchase items table with filtering and sorting
+│           ├── FilterSortPanel.tsx # Advanced filtering and sorting panel with preference memory
+│           ├── AddItemForm.tsx     # 优化设计的添加项目表单对话框
+│           ├── EditItemForm.tsx    # 编辑项目表单组件（已修复重要程度更新bug，使用受控组件确保数据同步）
+│           ├── BatchEditForm.tsx   # 批量编辑表单，支持多项目批次修改
+│           ├── CodeVerification.tsx # 隐式安全确认组件，保护关键操作但不显示验证码
+│           └── DogMotivation.tsx   # 打石膏狗狗励志图片组件（采用背景虚化和彩带效果）
+│
+├── hooks/          # Custom Hooks directory
+│   ├── use-mobile.ts # Pre-installed mobile detection Hook from shadcn (import { useIsMobile } from '@/hooks/use-mobile')
+│   └── use-toast.ts  # Toast notification system hook for displaying toast messages (import { useToast } from '@/hooks/use-toast')
+│
+├── lib/            # Utility library directory
+│   ├── utils.ts    # Utility functions, including the cn function for merging Tailwind class names
+│   ├── excel-utils.ts  # Excel导入导出工具函数，支持数据转换和格式验证，文件命名使用简化timestamp
+│   ├── timestamp-utils.ts  # 时间戳工具函数，生成简化格式YYMMDDHHMMSS用于文件命名
+│   └── storage-service.ts  # 本地存储服务，提供无认证数据持久化和跨设备同步
+│
+├── pages/          # Page components directory, based on React Router structure
+│   ├── HomePage.tsx # Home page with layout: header -> table -> budget cards at bottom
+│   └── NotFoundPage.tsx # 404 error page component, displays when users access non-existent routes
+│
+├── store/          # Global state management
+│   └── purchase-store.ts  # Zustand store using local storage service for persistence
+│
+├── types/          # Type definitions
+│   ├── index.ts    # Common types used across the application
+│   └── purchase.ts # Purchase item types for Excel compatibility and data conversion
+│
+├── App.tsx         # Root component, with React Router routing system configured
+│                   # Add new route configurations in this file
+│                   # Includes catch-all route (*) for 404 page handling
+│
+├── main.tsx        # Entry file, rendering the root component and mounting to the DOM
+│
+├── index.css       # Global styles file, containing Tailwind configuration and custom styles
+│                   # Modify theme colors and design system variables in this file
+│
+└── tailwind.config.js  # Tailwind CSS v3 configuration file
+# Contains theme customization, plugins, and content paths
+# Includes shadcn/ui theme configuration