AI导哈

菜单管理Web应用

一个高性能、可扩展的企业级Web应用，用于Table1837Tavern.bar的菜单管理，支持OCR处理和动态数据操作。

  • by BVEnterprisess
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 bventerprisess/table1837-tavern-app

使用说明

表1837酒馆-企业Web应用程序

🍾 企业级架构

Table1837Tavern.bar的高性能、可扩展的web应用程序，具有以下特点：

  • 🎨 零延迟动态数据操作
  • 📷 OCR驱动的菜单管理 （FluxImagen集成）
  • 🛡️ 企业安全 （JWT、RBAC、RLS）
  • ⚡ 痴迷于表演 （虚拟滚动、缓存、CDN）
  • 🌐 MCP服务器架构 用于全系统控制

🏢 系统架构

flowchart TB
    subgraph "Frontend (Vercel)"
        A[React + TypeScript]
        B[TailwindCSS + Framer Motion]
        C[React Query + Zustand]
        D[Virtual Scrolling]
    end
    
    subgraph "Backend API"
        E[Express.js + TypeScript]
        F[JWT Authentication]
        G[OCR Processing]
        H[Rate Limiting]
    end
    
    subgraph "Database (Supabase)"
        I[PostgreSQL]
        J[Row Level Security]
        K[Real-time subscriptions]
        L[Full-text search]
    end
    
    subgraph "External Services"
        M[FluxImagen OCR]
        N[Vercel Deployment]
        O[GitHub Actions]
    end
    
    A --> E
    E --> I
    G --> M
    O --> N

🚀 快速开始

先决条件

  • Node.js 18+
  • PostgreSQL（或Supabase帐户）
  • FluxImagen API密钥
  • Vercel帐户（用于部署）

1.克隆和安装

git clone https://github.com/BVEnterprisess/table1837-tavern-app.git
cd table1837-tavern-app
npm install

2.环境设置

服务器（.env）:

# Database
SUPABASE_URL=your_supabase_project_url
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
SUPABASE_ANON_KEY=your_anon_key

# Authentication
JWT_SECRET=your_super_secure_jwt_secret_key_here
JWT_EXPIRES_IN=7d

# OCR Integration
FLUX_IMAGEN_API_KEY=your_flux_imagen_api_key
FLUX_IMAGEN_ENDPOINT=https://api.flux-imagen.com/v1/ocr

# Monitoring
ALERT_WEBHOOK_URL=your_alert_webhook_url
DEPLOY_WEBHOOK_URL=your_deploy_webhook_url

# Optional
REDIS_URL=redis://localhost:6379
NODE_ENV=development
PORT=3001

客户端（.env）:

VITE_API_URL=http://localhost:3001/api

3.数据库设置

# Run the schema setup in your Supabase SQL editor
psql -f database/schema.sql

4.发展

# Start both client and server
npm run dev

# Or separately:
npm run client:dev  # Frontend on :5173
npm run server:dev  # Backend on :3001

5.生产建设

npm run build
npm start

🔐 验证系统

基于角色的访问控制（RBAC）

  • 老板：完全系统访问、OCR上传、菜单管理、用户管理
  • 经理：菜单更新、OCR处理、部分管理员访问
  • 员工：只读菜单访问

演示凭据

Boss:    boss@table1837.com / password
Manager: manager@table1837.com / password  
Staff:   staff@table1837.com / password

📷 OCR管道

上传流程

  1. 老板/经理选择菜单类型（酒单、特色菜、鸡尾酒、酒馆）
  2. 上传图像（JPEG/PNG/WebP/TIFF，最大10MB）
  3. 图像优化并发送到FluxImagen
  4. OCR结果解析和结构化
  5. 批量插入数据库的项目
  6. 自动部署已触发

支持的菜单类型

  • wine_list -葡萄酒收藏，包括年份、地区、ABV
  • featured_menu -厨师的季节性选择
  • signature_cocktails -含酒精的高级鸡尾酒
  • tavern_menu -经典的舒适美食和丰盛的菜肴

⚡ 性能特点

前端优化

  • 虚拟滚动：平稳处理500多种物品
  • 无限负载：分页数据提取
  • 主动缓存：5分钟客户端，10分钟CDN缓存
  • 代码拆分：供应商、用户界面、查询、虚拟捆绑包
  • 图像优化：带回退的WebP

后端优化

  • 数据库索引：全文搜索，价格范围
  • 速率限制：100个请求/15分钟每个IP
  • 压缩：Gzip响应
  • 查询优化：批量操作，准备报表

📊 菜单类别

酒单

  • 特性：年份过滤、地区搜索、价格排序
  • 领域: vintage, region, alcohol_content, tags
  • 标签: red, white, sparkling, featured, reserve

招牌鸡尾酒

  • 特性：酒精含量显示，香料水平指示器
  • 领域: alcohol_content, spice_level, preparation_time
  • 标签: signature, premium, classic, seasonal

特色菜单

  • 特性：厨师的季节性选择、准备时间
  • 领域: preparation_time, spice_level, nutritional_info
  • 标签: featured, seasonal, chef_special

酒馆菜单

  • 特性：经典美食，价格过滤
  • 领域: preparation_time, spice_level
  • 标签: popular, comfort_food, hearty

🖾 数据库模式

核心表

users (
  id UUID PRIMARY KEY,
  email VARCHAR UNIQUE,
  name VARCHAR,
  role ENUM('boss', 'manager', 'staff'),
  active BOOLEAN DEFAULT true
)

menu_items (
  id VARCHAR PRIMARY KEY,
  name VARCHAR NOT NULL,
  description TEXT,
  price DECIMAL(10,2),
  category ENUM('wine_list', 'featured_menu', 'signature_cocktails', 'tavern_menu'),
  tags TEXT[],
  available BOOLEAN DEFAULT true,
  -- Category-specific fields
  alcohol_content DECIMAL(4,2),
  vintage INTEGER,
  region VARCHAR,
  spice_level INTEGER CHECK (spice_level >= 0 AND spice_level <= 5),
  preparation_time INTEGER
)

menu_updates (
  id UUID PRIMARY KEY,
  user_id UUID REFERENCES users(id),
  operation ENUM('create', 'update', 'delete', 'bulk_update'),
  changes JSONB
)

性能指标

  • 全文搜索打开 name, description, tags
  • 类别和可用性过滤
  • 价格范围查询
  • 基于标签的过滤（GIN索引）

🚀 部署

Vercel部署

  1. 连接存储库:

    vercel --prod

  2. 环境变量 （Vercel仪表板）：

    • SUPABASE_URL
    • SUPABASE_SERVICE_ROLE_KEY
    • JWT_SECRET
    • FLUX_IMAGEN_API_KEY
    • ALERT_WEBHOOK_URL

  3. 生成设置:

    {
  "buildCommand": "npm run build",
  "outputDirectory": "client/dist",
  "installCommand": "npm install"
}

CI/CD管道

GitHub自动操作：

  • ✅ 运行linting和测试
  • 🛡️ 安全审计
  • 📊 性能检查
  • 🚀 部署到Vercel
  • 🚨 发送故障警报

手动部署

# Build and deploy
npm run build
vercel deploy --prod

# Database migration
psql -f database/schema.sql $DATABASE_URL

📏 API终点

公共端点

GET    /api/health                    # Health check
POST   /api/auth/login               # User authentication
GET    /api/menu/:category           # Get menu items
GET    /api/menu/:category/featured  # Get featured items

受保护的端点（老板/经理）

POST   /api/ocr/process              # OCR image processing
GET    /api/admin/menu/:category/all # All items (including inactive)
PUT    /api/admin/menu/item/:id      # Update menu item
POST   /api/admin/menu/item          # Create menu item
DELETE /api/admin/menu/item/:id      # Delete menu item (boss only)
GET    /api/admin/menu/history       # Audit log
GET    /api/admin/stats              # System statistics

📊 监控和警报

性能指标

  • API响应时间
  • 数据库查询性能
  • OCR处理时间
  • 错误率和正常运行时间

警报条件

  • 5xx服务器错误
  • OCR处理失败
  • 数据库连接问题
  • 查询性能缓慢（>2s）

日志记录

// Structured logging with Winston
logger.info('Menu item updated', {
  itemId: 'wine_001',
  userId: 'user_123',
  changes: ['name', 'price']
})

🔧 开发工具

代码质量

npm run lint          # ESLint + TypeScript
npm run type-check    # TypeScript compilation
npm test              # Jest test suite

数据库工具

-- Performance monitoring
SELECT * FROM get_table_stats();

-- Menu summary
SELECT * FROM active_menu_summary;

-- Recent activity
SELECT * FROM recent_menu_activity;

🔍 故障排除

常见问题

OCR上传失败

# Check FluxImagen API key
curl -H "Authorization: Bearer $FLUX_IMAGEN_API_KEY" \
     https://api.flux-imagen.com/v1/status

# Verify file size and format
file menu-image.jpg

数据库连接问题

# Test Supabase connection
psql $SUPABASE_URL -c "SELECT version();"

# Check RLS policies
SELECT * FROM pg_policies WHERE tablename = 'menu_items';

性能问题

# Check slow queries
SELECT query, mean_time 
FROM pg_stat_statements 
WHERE mean_time > 1000 
ORDER BY mean_time DESC;

📄 许可证和安全

  • 许可证：MIT
  • 安全：JWT身份验证、RBAC、RLS策略
  • 数据保护：静态加密，仅HTTPS
  • 合规：GDPR就绪的用户数据处理

🤝 贡献

  1. 分叉存储库
  2. 创建特征分支(git checkout -b feature/amazing-feature)
  3. 提交更改(git commit -m 'Add amazing feature')
  4. 推送到分支(git push origin feature/amazing-feature)
  5. 打开拉取请求

J大师，你的Table1837帝国现在是防弹和企业准备好了。每个组件都针对野蛮性能和零容忍可靠性进行了优化。

相关 MCP