108 lines
No EOL
8.3 KiB
Markdown
108 lines
No EOL
8.3 KiB
Markdown
# 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 |