表1837酒馆-企业Web应用程序
 ](https://github.com/BVEnterprisess/table1837-tavern-app/actions)
🍾 企业级架构
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 install2.环境设置
服务器(.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/api3.数据库设置
# Run the schema setup in your Supabase SQL editor
psql -f database/schema.sql4.发展
# Start both client and server
npm run dev
# Or separately:
npm run client:dev # Frontend on :5173
npm run server:dev # Backend on :30015.生产建设
npm run build
npm start🔐 验证系统
基于角色的访问控制(RBAC)
- 老板:完全系统访问、OCR上传、菜单管理、用户管理
- 经理:菜单更新、OCR处理、部分管理员访问
- 员工:只读菜单访问
演示凭据
Boss: boss@table1837.com / password
Manager: manager@table1837.com / password
Staff: staff@table1837.com / password📷 OCR管道
上传流程
- 老板/经理选择菜单类型(酒单、特色菜、鸡尾酒、酒馆)
- 上传图像(JPEG/PNG/WebP/TIFF,最大10MB)
- 图像优化并发送到FluxImagen
- OCR结果解析和结构化
- 批量插入数据库的项目
- 自动部署已触发
支持的菜单类型
wine_list-葡萄酒收藏,包括年份、地区、ABVfeatured_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 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. 分叉存储库
1. 创建特征分支(`git checkout -b feature/amazing-feature`)
1. 提交更改(`git commit -m 'Add amazing feature'`)
1. 推送到分支(`git push origin feature/amazing-feature`)
1. 打开拉取请求
______________________________________________________________________
**J大师**,你的Table1837帝国现在是防弹和企业准备好了。每个组件都针对野蛮性能和零容忍可靠性进行了优化。