<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>面食制作记录</title>
<style>
*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,sans-serif}
body{background:#f7f3ec;padding:14px;color:#222}
h1{text-align:center;font-size:20px;margin-bottom:16px;color:#6b4423}
.box{background:#fff;border-radius:12px;padding:14px;margin-bottom:12px;box-shadow:0 1px 4px #00000014}
input,textarea{width:100%;border:1px solid #ddd;border-radius:8px;padding:10px;margin:6px 0;font-size:15px}
textarea{min-height:70px;resize:vertical}
.btns{display:flex;gap:8px;margin:8px 0}
button{flex:1;border:none;background:#8b5a2b;color:#fff;padding:10px;border-radius:8px;font-size:15px}
button.gray{background:#aaa}
button.orange{background:#e08944}
.item{background:#fff;border-radius:10px;padding:12px;margin:10px 0}
.item-name{font-weight:bold;font-size:17px;margin-bottom:8px}
.block{padding:8px;border-radius:6px;margin:4px 0;line-height:1.6}
.gan{background:#fff8ee}
.shi{background:#f0f7ff}
.step{background:#f1fff4}
.note{background:#fff2f2}
.img-wrap{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.img-wrap img{width:80px;height:80px;object-fit:cover;border-radius:6px;cursor:pointer}
.img-preview{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:999;display:none;align-items:center;justify-content:center}
.img-preview img{max-width:90%;max-height:90%}
.del{color:#ff4444;font-size:14px;margin-top:8px;cursor:pointer}
#search{margin-bottom:10px}
.file-input{margin:4px 0}
.convert-row{display:flex;gap:6px;align-items:center;margin:6px 0;flex-wrap:wrap}
.convert-row input{flex:1;margin:0}
.tip{font-size:13px;color:#777;margin:4px 0}
</style>
</head>
<body>
<h1>🍞 面食制作记录</h1>
<input id="search" placeholder="🔍 搜索配方名称..." oninput="render()">

<div class="box">
<input id="name" placeholder="配方名字，例如：奶香馒头">

<div class="convert-row">
  <input id="baseFlour" placeholder="基准面粉(g)，如500">
  <input id="targetFlour" placeholder="想要面粉(g)，如750">
  <button class="orange" onclick="calcScale()">换算配比</button>
</div>
<div class="tip">💡 换算只自动修改【干料、湿料】里带数字+g的内容，步骤和备注不动</div>

<textarea id="ganliao" placeholder="【干料】面粉500g、糖20g、盐3g、奶粉30g"></textarea>
<textarea id="shiliao" placeholder="【湿料】水260g、酵母5g、油15g"></textarea>
<textarea id="step" placeholder="【制作步骤】第1步...第2步..."></textarea>
<textarea id="remark" placeholder="【备注】温度、醒发时间、小贴士"></textarea>

<div class="file-input">
<input type="file" id="imgInput" accept="image/*" multiple onchange="addImg()">
<small>📷 上传过程图/成品图，点击图片可放大查看</small>
</div>
<div class="btns">
<button onclick="saveItem()">保存配方</button>
<button class="gray" onclick="clearForm()">清空</button>
</div>
</div>

<div id="list"></div>
<div class="img-preview" id="previewBox" onclick="closePreview()">
  <img id="previewImg" src="">
</div>

<script>
let data = JSON.parse(localStorage.getItem('mianShiBook')) || []
let tempImgs = []
let currentPreviewSrc = ""

// 图片上传
function addImg(){
  const files = document.getElementById('imgInput').files
  for(let f of files){
    const reader = new FileReader()
    reader.onload = e=>{
      tempImgs.push(e.target.result)
    }
    reader.readAsDataURL(f)
  }
}

// 配比换算核心
function calcScale(){
  const base = Number(document.getElementById('baseFlour').value)
  const target = Number(document.getElementById('targetFlour').value)
  if(!base || !target || base<=0){
    alert('请填写有效的基准面粉重量和目标面粉重量')
    return
  }
  const rate = target / base
  // 替换干料
  let ganText = document.getElementById('ganliao').value
  ganText = ganText.replace(/(\d+\.?\d*)g/g, (match, num)=>{
    const newNum = (Number(num)*rate).toFixed(1).replace(/\.0$/,'')
    return newNum + 'g'
  })
  document.getElementById('ganliao').value = ganText
  // 替换湿料
  let shiText = document.getElementById('shiliao').value
  shiText = shiText.replace(/(\d+\.?\d*)g/g, (match, num)=>{
    const newNum = (Number(num)*rate).toFixed(1).replace(/\.0$/,'')
    return newNum + 'g'
  })
  document.getElementById('shiliao').value = shiText
}

// 保存配方
function saveItem(){
  const name = document.getElementById('name').value.trim()
  const gan = document.getElementById('ganliao').value.trim()
  const shi = document.getElementById('shiliao').value.trim()
  const step = document.getElementById('step').value.trim()
  const remark = document.getElementById('remark').value.trim()
  if(!name){
    alert('请填写配方名称')
    return
  }
  data.unshift({
    id:Date.now(),
    name,gan,shi,step,remark,
    imgs:[...tempImgs]
  })
  localStorage.setItem('mianShiBook',JSON.stringify(data))
  clearForm()
  render()
  alert('保存成功！')
}

// 清空表单
function clearForm(){
  document.getElementById('name').value=''
  document.getElementById('baseFlour').value=''
  document.getElementById('targetFlour').value=''
  document.getElementById('ganliao').value=''
  document.getElementById('shiliao').value=''
  document.getElementById('step').value=''
  document.getElementById('remark').value=''
  document.getElementById('imgInput').value=''
  tempImgs = []
}

// 渲染列表
function render(){
  const kw = document.getElementById('search').value.toLowerCase()
  const wrap = document.getElementById('list')
  const filter = data.filter(x=>x.name.toLowerCase().includes(kw))
  wrap.innerHTML = filter.map(it=>{
    let imgHtml = ''
    if(it.imgs && it.imgs.length>0){
      imgHtml = `<div class="img-wrap">${it.imgs.map(i=>`<img src="${i}" onclick="openPreview('${i}')">`).join('')}</div>`
    }
    return `
    <div class="item">
      <div class="item-name">${it.name}</div>
      <div class="block gan">干料：${it.gan||'无'}</div>
      <div class="block shi">湿料：${it.shi||'无'}</div>
      <div class="block step">步骤：${it.step||'无'}</div>
      <div class="block note">备注：${it.remark||'无'}</div>
      ${imgHtml}
      <div class="del" onclick="del(${it.id})">🗑️ 删除这条配方</div>
    </div>`
  }).join('')
}

// 删除
function del(id){
  if(!confirm('确定删除这条配方？'))return
  data = data.filter(x=>x.id!==id)
  localStorage.setItem('mianShiBook',JSON.stringify(data))
  render()
}

// 图片放大预览
function openPreview(src){
  currentPreviewSrc = src
  document.getElementById('previewImg').src = src
  document.getElementById('previewBox').style.display = 'flex'
}
function closePreview(){
  document.getElementById('previewBox').style.display = 'none'
}

render()
</script>
</body>
</html>
