王明 / Food-Labeling-Management-Platform

QUICK_START.md 7.4 KB

快速启动指南 / Quick Start Guide

🎯 系统概述 / System Overview

食品标签打印系统 (简化版) / Food Label Printing System (Simplified Version)

面向欧美市场的极简企业级SaaS工具，专注于核心标签打印功能。 Minimalist enterprise SaaS tool for North American/European markets, focused on core label printing functionality.

🚀 如何使用 / How to Use

1. 登录系统 / Login

  • 访问应用后会看到登录页面 / Visit the app to see the login page
  • 输入任意邮箱和密码即可登录（演示模式）/ Enter any email and password to login (demo mode)
  • 系统会保存登录状态 / System saves login state

2. 选择店铺 / Select Store

  • 登录后选择工作店铺 / Select your working store after login
  • 4个可选店铺位置 / 4 available store locations
  • 店铺信息会显示在Dashboard / Store info displayed on Dashboard

3. Dashboard（主页）

4个统计卡片 / 4 Statistics Cards:

  • 今日标签 (247个) / Today's Labels (247)
  • 待办任务 (8个) / Open Tasks (8)
  • 系统警报 (5个) / Alerts (5)
  • 设备状态 (4台打印机) / Devices Status (4 printers)

2个快速操作 / 2 Quick Actions:

  • 扫描打印 / Scan & Print
  • 批量打印 / Batch Print

4. Labels（标签管理）- 核心功能

创建标签 / Create Labels:

  1. 选择标签类型（6种）/ Select label type (6 types):

    • 营养标签 / Nutrition Label
    • 过敏原标签 / Allergen Label
    • 储存标签 / Storage Label
    • 保质期标签 / Expiry Date Label
    • 批次追踪标签 / Batch Tracking Label
    • 制备标签 / Preparation Label

  2. 选择食品项目 / Select food item

  3. 查看预览 / Preview label

  4. 确认打印 / Confirm and print

查看历史 / View History:

  • 查看已打印标签 / View printed labels
  • 显示标签状态（活跃/过期）/ Display label status (Active/Expired)
  • 显示打印者和时间 / Show printer and time

5. Tasks（任务管理）

  • 查看所有任务 / View all tasks
  • 执行任务（温度检查、卫生检查等）/ Execute tasks (temperature checks, hygiene inspections, etc.)
  • 上传照片 / Upload photos
  • 报告问题 / Report issues

6. More（更多设置）

可用功能 / Available Features:

  • 👤 个人资料 / My Profile
  • 📚 培训材料 / Training Materials
  • 🖨️ 打印机设置 / Printer Settings
  • 📍 位置/店铺 / Location
  • 🔄 同步状态 / Sync Status
  • 🌐 语言切换 / Language (English/中文)
  • ❓ 支持与帮助 / Support
  • 🚪 退出登录 / Logout

🌍 语言切换 / Language Switching

切换方法 / How to Switch:

  1. 底部导航 → More / Bottom Nav → More
  2. 点击"Language / 语言" / Click "Language / 语言"
  3. 选择 English 或 中文（简体）/ Select English or 中文（简体）
  4. 整个界面立即切换 / Entire UI switches immediately

支持的翻译 / Supported Translations:

  • ✅ 1400+ 翻译键值对 / 1400+ translation keys
  • ✅ 所有界面文本 / All UI text
  • ✅ 所有按钮和标签 / All buttons and labels
  • ✅ 所有提示和说明 / All tooltips and instructions

📱 设计规范 / Design Specifications

字体 / Typography

  • 字体家族 / Font Family: Inter (Google Fonts)
  • 字重 / Weights: 400 (Regular), 500 (Medium), 600 (Semi-bold), 700 (Bold)
  • 基础字号 / Base Size: 16px

颜色系统 / Color System

  • 主色调 / Primary: #2563eb (蓝色 / Blue)
  • 背景色 / Background: #ffffff (白色 / White)
  • 次要背景 / Secondary BG: #f9fafb (浅灰 / Light Gray)
  • 文字色 / Text: #111827 (深灰 / Dark Gray)
  • 次要文字 / Secondary Text: #6b7280 (中灰 / Medium Gray)

组件规范 / Component Specs

  • 按钮高度 / Button Height: 最小 48px / Minimum 48px (h-12)
  • 圆角 / Border Radius: 0.625rem
  • 容器宽度 / Container Width: 最大 480px / Max 480px
  • 间距单位 / Spacing Unit: 4px (Tailwind default)

🏗️ 技术架构 / Technical Architecture

前端框架 / Frontend

  • React 18.3.1
  • TypeScript
  • React Router 7.13.0

样式系统 / Styling

  • Tailwind CSS v4
  • Custom CSS Variables
  • Radix UI Components

状态管理 / State Management

  • React Context (语言切换 / Language switching)
  • localStorage (用户数据 / User data)

📋 标签打印流程 / Label Printing Workflow

1. Dashboard
   ↓
2. Labels > 创建 / Create
   ↓
3. 选择标签类型 / Select Label Type
   ↓
4. 选择食品项目 / Select Food Item
   ↓
5. 查看预览 / Preview Label
   ↓
6. 确认打印 / Confirm Print
   ↓
7. 成功提示 / Success Message
   ↓
8. 返回历史 / View in History

🎨 界面特点 / UI Features

✨ 极简设计 / Minimalist Design

  • 清晰的信息层级 / Clear information hierarchy
  • 充足的留白空间 / Ample white space
  • 直观的图标系统 / Intuitive icon system

📱 移动优先 / Mobile First

  • 响应式设计 / Responsive design
  • 触摸友好的交互 / Touch-friendly interactions
  • 480px 最大宽度优化 / Optimized for 480px max-width

🎯 用户体验 / User Experience

  • 底部导航易于触及 / Bottom nav within thumb reach
  • 卡片式设计便于点击 / Card-based design for easy tapping
  • 清晰的视觉反馈 / Clear visual feedback
  • Toast 通知提示 / Toast notifications

📦 移除的功能 / Removed Features

为了专注于核心功能，以下功能已移除： To focus on core functionality, the following features were removed:

  • ❌ 温湿度监控 / Temperature & Humidity Monitoring
  • ❌ 电子标签设备管理 / Electronic Label Device Management
  • ❌ 推送通知 / Push Notifications
  • ❌ 环境监测仪表板 / Environmental Monitoring Dashboard

🔮 未来扩展 / Future Expansion

可以考虑添加的功能： Features that can be considered for addition:

  1. 后端集成 / Backend Integration

    • Supabase 数据库 / Supabase Database
    • 实时数据同步 / Real-time data sync
    • 用户认证系统 / User authentication

  2. 高级功能 / Advanced Features

    • 真实打印机集成 / Real printer integration
    • 条形码/二维码扫描 / Barcode/QR scanning
    • 离线模式 / Offline mode
    • 高级报表分析 / Advanced reporting

  3. 多语言支持 / Multi-language

    • 西班牙语 / Spanish
    • 法语 / French
    • 德语 / German
    • 日语 / Japanese

💡 使用建议 / Usage Tips

最佳实践 / Best Practices:

  1. 每天查看Dashboard了解工作概况 / Check Dashboard daily for overview
  2. 使用标签历史追踪打印记录 / Use label history to track printed records
  3. 及时完成待办任务 / Complete pending tasks promptly
  4. 定期查看培训材料提升技能 / Review training materials regularly

常见操作 / Common Operations:

  • 快速打印 / Quick Print: Dashboard → 快速操作 / Quick Actions
  • 查找标签 / Find Label: Labels → 历史 / History
  • 切换店铺 / Switch Store: More → Location
  • 查看帮助 / Get Help: More → Support

📞 支持信息 / Support Information

如需帮助，请访问： For help, please visit:

  • 应用内支持 / In-app Support: More → Support
  • 用户指南 / User Guide: Training Materials
  • 常见问题 / FAQ: Support section

版本 / Version: 1.0.0
更新日期 / Last Updated: 2026年2月27日 / February 27, 2026
目标市场 / Target Market: 北美和欧洲 / North America & Europe