cheverjohn/Dream-MachineProcurementList
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Dream-MachineProcurementList/.devv/STRUCTURE.md
Chever John fe56c5274e
add whole project
2025-08-21 11:07:54 +08:00

8.3 KiB
Raw Blame History

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