workspace/code/allapp/allapp-rn/test.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>家庭菜单</title>
<style>
body{
  margin:0;
  font-family: sans-serif;
  background:#f2f2f2;
}
.header{
  background:#4CAF50;
  color:white;
  padding:15px;
  text-align:center;
  font-size:18px;
}
.page{
  display:none;
  padding:15px;
  padding-bottom:80px;
}
.page.active{
  display:block;
}
.card{
  background:white;
  padding:12px;
  margin-bottom:10px;
  border-radius:8px;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
}
button{
  background:#4CAF50;
  border:none;
  color:white;
  padding:6px 10px;
  border-radius:6px;
  margin-top:5px;
}
.tabs{
  position:fixed;
  bottom:0;
  width:100%;
  display:flex;
  background:white;
  border-top:1px solid #ddd;
}
.tab{
  flex:1;
  padding:12px;
  text-align:center;
}
.tab.active{
  background:#dcedc8;
}
input,select{
  width:100%;
  padding:6px;
  margin-top:5px;
}
.small{
  font-size:12px;
  color:#666;
}
</style>
</head>
<body>

<div class="header">家庭做饭助手</div>

<!-- 菜谱 -->
<div class="page active" id="recipePage">
  <h3>菜谱</h3>
  <div id="recipeList"></div>
</div>

<!-- 下单 -->
<div class="page" id="orderPage">
  <h3>下单</h3>
  <div id="orderList"></div>
</div>

<!-- 库存 -->
<div class="page" id="inventoryPage">
  <h3>库存</h3>
  <input id="name" placeholder="食材名称">
  <input id="qty" type="number" placeholder="数量">
  <button onclick="addInventory()">添加主料</button>
  <div id="inventoryList"></div>
</div>

<div class="tabs">
  <div class="tab active" onclick="switchTab(0)">菜谱</div>
  <div class="tab" onclick="switchTab(1)">下单</div>
  <div class="tab" onclick="switchTab(2)">库存</div>
</div>

<script>

let inventory = [
  { id:1, name:"鸡蛋", qty:4 },
  { id:2, name:"番茄", qty:2 }
];

let recipes = [
  {
    id:1,
    name:"番茄炒蛋",
    ingredients:[
      { name:"鸡蛋", qty:2, type:"main" },
      { name:"番茄", qty:1, type:"main" },
      { name:"盐", type:"seasoning" }
    ]
  }
];

function renderInventory(){
  let div=document.getElementById("inventoryList");
  div.innerHTML="";
  inventory.forEach(i=>{
    div.innerHTML+=`
      <div class="card">
        ${i.name} - 剩余 ${i.qty}
      </div>
    `;
  });
}

function renderRecipes(){
  let div=document.getElementById("recipeList");
  div.innerHTML="";
  recipes.forEach(r=>{
    div.innerHTML+=`
      <div class="card">
        <b>${r.name}</b>
        <div class="small">
          ${r.ingredients.map(i=> i.type==="main" ? i.name+" "+i.qty : i.name+"(调料)").join(", ")}
        </div>
        <button onclick="order(${r.id})">做这道菜</button>
      </div>
    `;
  });
}

function order(id){
  let recipe=recipes.find(r=>r.id===id);
  let canCook=true;

  recipe.ingredients.forEach(i=>{
    if(i.type==="main"){
      let stock=inventory.find(s=>s.name===i.name);
      if(!stock || stock.qty<i.qty){
        canCook=false;
      }
    }
  });

  if(!canCook){
    alert("主料不足，做不了 😢");
    return;
  }

  recipe.ingredients.forEach(i=>{
    if(i.type==="main"){
      let stock=inventory.find(s=>s.name===i.name);
      stock.qty-=i.qty;
    }
  });

  alert("开做！🍳");
  renderInventory();
}

function addInventory(){
  let name=document.getElementById("name").value;
  let qty=parseInt(document.getElementById("qty").value);

  if(!name||!qty) return;

  let existing=inventory.find(i=>i.name===name);
  if(existing){
    existing.qty+=qty;
  }else{
    inventory.push({id:inventory.length+1,name,qty});
  }

  renderInventory();
}

function switchTab(i){
  document.querySelectorAll(".page").forEach((p,index)=>{
    p.classList.toggle("active",index===i);
  });
  document.querySelectorAll(".tab").forEach((t,index)=>{
    t.classList.toggle("active",index===i);
  });
}

renderInventory();
renderRecipes();

</script>
</body>
</html>