// Drink detail / calorie calculator
function DrinkDetailScreen({ drink, onBack, onStateChange }) {
const [size, setSize] = React.useState(1); // 0 small, 1 medium, 2 large
const [sweet, setSweet] = React.useState(3); // 0 无糖, 1 三分, 2 五分, 3 七分, 4 全糖
const [ice, setIce] = React.useState(2);
const [toppings, setToppings] = React.useState([INGREDIENT_LIB[0].name]);
const sizeMul = [0.7, 1, 1.3][size];
const sweetMul = [0, 0.3, 0.5, 0.7, 1][sweet];
const baseCal = drink.cal * sizeMul * (0.6 + 0.4 * sweetMul);
const toppingCal = toppings.reduce((s, n) => {
const t = INGREDIENT_LIB.find(i => i.name === n);
return s + (t ? t.cal : 0);
}, 0);
const totalCal = Math.round(baseCal + toppingCal);
const totalSugar = Math.round(drink.sugar * sizeMul * sweetMul +
toppings.reduce((s, n) => s + (INGREDIENT_LIB.find(i => i.name === n)?.sugar || 0), 0));
React.useEffect(() => {
onStateChange && onStateChange({ totalCal, totalSugar });
}, [totalCal, totalSugar]);
const sizes = [
{ label: '小杯', sub: '400ml' },
{ label: '中杯', sub: '500ml' },
{ label: '大杯', sub: '700ml' },
];
const sweetLevels = ['无糖', '三分', '五分', '七分', '全糖'];
const iceLevels = ['热', '去冰', '少冰', '正常', '多冰'];
const toggleTopping = (name) => {
setToppings(t => t.includes(name) ? t.filter(x => x !== name) : [...t, name]);
};
return (
{/* colored header area */}
{/* cup illustration + header info */}
{drink.tags.map(t => (
{t}
))}
{drink.name}
{drink.brand} · 标准 {drink.size}
参考价
¥{drink.price}
{/* live summary — big cal number, ring, sub metrics */}
{/* Sugar cubes viz */}
{/* Caffeine traffic light */}
{/* controls */}
{INGREDIENT_LIB.map(t => {
const on = toppings.includes(t.name);
return (
);
})}
{/* ingredient breakdown */}
{/* stacked bar */}
{drink.ingredients.map((ing, i) => (
))}
{drink.ingredients.map((ing, i) => (
{ing.name}
{ing.note && (
{ing.note}
)}
{ing.pct}%
{ing.cal}
))}
);
}
function MiniStat({ label, value, unit, color }) {
return (
{label}
{value}
{unit && {unit}}
);
}
function Control({ title, subtitle, children }) {
return (
{title}
{subtitle && {subtitle}}
{children}
);
}
function OptionRow({ options, value, onChange }) {
return (
{options.map((o, i) => {
const on = i === value;
return (
);
})}
);
}
function Segmented({ options, value, onChange, accent = 'var(--brand-yellow)' }) {
return (
{options.map((o, i) => (
))}
);
}
// ── Caffeine traffic light ─────────────────────────────────────
// NOTE: thresholds are placeholders — waiting on client's official grading.
// Swap values in CAFFEINE_THRESHOLDS when spec arrives.
const CAFFEINE_THRESHOLDS = {
green: { max: 100, label: '轻咖啡因', sub: '适合全天饮用' },
yellow: { max: 200, label: '中咖啡因', sub: '建议午后前饮用' },
red: { max: Infinity, label: '高咖啡因', sub: '下午 2 点后避免' },
};
function gradeCaffeine(mg) {
if (mg <= 0) return 'none';
if (mg <= CAFFEINE_THRESHOLDS.green.max) return 'green';
if (mg <= CAFFEINE_THRESHOLDS.yellow.max) return 'yellow';
return 'red';
}
function CaffeineTrafficLight({ mg }) {
const grade = gradeCaffeine(mg);
const lights = [
{ id: 'red', color: '#E06953', on: '#E06953' },
{ id: 'yellow', color: '#E8A33B', on: '#F4B63B' },
{ id: 'green', color: '#4FB07A', on: '#4FB07A' },
];
const activeLabel = grade === 'none'
? { label: '无咖啡因', sub: '任何时间都可饮用', color: 'var(--ink-3)' }
: { ...CAFFEINE_THRESHOLDS[grade],
color: grade === 'red' ? '#E06953' : grade === 'yellow' ? '#E8A33B' : '#4FB07A' };
return (
{/* label left */}
咖啡因
红绿灯
{/* lights capsule */}
{lights.map(l => {
const active = grade === l.id;
const dim = grade === 'none' || (grade !== l.id);
return (
);
})}
{/* verdict right */}
{grade === 'none' ? '⚪' :
grade === 'green' ? '🟢' :
grade === 'yellow' ? '🟡' : '🔴'}
{activeLabel.label}
咖啡因 ≈ {mg} mg/杯
·
{activeLabel.sub}
{/* burning ring */}
{/* segmented tier bar */}
{tier.emoji}
{tier.label}
{tier.sub}
{/* 4-tier bar with indicator */}
0
100
200
400
800+
糖分含量
1 块方糖 ≈ {SUGAR_PER_CUBE}g · WHO 建议每日 ≤ 25g
{/* The big highlighted number — inspired by reference */}
≈
{grams.toFixed(1)}
g
(
{cubes.toFixed(1)}
块方糖)
{/* cubes row */}
{Array.from({ length: 16 }).map((_, i) => {
const isFull = i < fullCubes;
const isPartial = i === fullCubes && hasPartial;
const isEmpty = i > fullCubes || (i === fullCubes && !hasPartial);
return (
);
})}
{cubes >= 6 && (
已超过 WHO 建议每日糖分的 {Math.round((grams / 25) * 100)}%，建议减甜
)}
);
}
// 等距 (isometric) 立体方糖 — 三面着色：顶最亮、左中、右最暗。
// fill: 0..1（部分填充用透明度过渡），dimmed: 空槽（灰色），color: 警示色或常规色
function SugarCube({ fill, dimmed, color }) {
const w = 22, h = 26;
const isWarn = color === '#E05353';
const palette = dimmed
? { top: '#EFE9DA', left: '#D8D0BB', right: '#B7AC92' }
: isWarn
? { top: '#F4A0A0', left: '#E05353', right: '#B73D3D' }
: { top: '#FBD976', left: '#F4B63B', right: '#C58E22' };
// 部分填充：整体透明度从 0.55 渐变到 1
const partialOpacity = dimmed ? 0.55 : 0.55 + 0.45 * fill;
return (
);
}
const CaffeineTrafficLightCard = CaffeineTrafficLight;
Object.assign(window, { DrinkDetailScreen, CaffeineTrafficLight, CaffeineTrafficLightCard, DetailStickyCTA, CalorieMeter, SugarCubes });