🌍
美食地图
📍
广州地图
⭐
我们的评分本
📝
待办
<script> (function(){ "use strict"; var RATERS = ["止","雯"]; var collapsed = {}; // 折叠状态（仅本机视图，不入库） var pendingItem = null; // 当前要上传图片的条目 function uid(){ return Math.random().toString(36).slice(2,9) + Date.now().toString(36).slice(-4); } var LS_KEY = "ratingbook_autosave_v1"; // 自动保存只存评分/备注/结构，剔除图片 base64（避免超出 localStorage 配额；新拍照片仍靠「导出」持久化） function lightweight(){ return JSON.parse(JSON.stringify(APP_DATA, function(k,v){ return k==="images" ? undefined : v; })); } function mergeLight(embedded, delta){ var emb = {}; (embedded.categories||[]).forEach(function(c){ emb[c.id]=c; (c.places||[]).forEach(function(p){ emb[p.id]=p; (p.items||[]).forEach(function(it){ emb[it.id]=it; }); }); }); (delta.categories||[]).forEach(function(c){ var ec = emb[c.id]; (c.places||[]).forEach(function(p){ var ep = emb[p.id]; (p.items||[]).forEach(function(it){ var eit = emb[it.id]; if(eit) it.images = eit.images||[]; }); if(ep) p.images = ep.images||[]; }); if(ec) c.images = ec.images||[]; }); return delta; } function loadData(){ var embedded; try { embedded = JSON.parse(document.getElementById("appdata").textContent); } catch(e){ embedded = {categories:[]}; } try { var saved = localStorage.getItem(LS_KEY); if(saved){ var d = JSON.parse(saved); if(d && d.categories) return mergeLight(embedded, d); } } catch(e){} return embedded; } function saveData(){ document.getElementById("appdata").textContent = JSON.stringify(APP_DATA, null, 0); try { localStorage.setItem(LS_KEY, JSON.stringify(lightweight())); } catch(e){} markAutosaved(); // 联动：把评分本里来自广州地图的店，点亮到广州地图（去重后逐个发送） try { var gzset = {}; (APP_DATA.categories||[]).forEach(function(c){ (c.places||[]).forEach(function(p){ (p.items||[]).forEach(function(it){ if(it.gzId) gzset[it.gzId]=1; }); }); }); Object.keys(gzset).forEach(function(gid){ parent.postMessage({to:"gz", action:"light", gzId:gid}, "*"); }); } catch(e){} } var APP_DATA = loadData(); function el(tag, props, kids){ var n = document.createElement(tag); if(props) for(var k in props){ if(k==="class") n.className = props[k]; else if(k==="text") n.textContent = props[k]; else if(k==="html") n.innerHTML = props[k]; else if(k.slice(0,2)==="on" && typeof props[k]=="function") n.addEventListener(k.slice(2), props[k]); else if(props[k]!=null) n.setAttribute(k, props[k]); } if(kids) (Array.isArray(kids)?kids:[kids]).forEach(function(c){ if(c==null) return; n.appendChild(typeof c=="string" ? document.createTextNode(c) : c); }); return n; } function avg(scores){ var v = scores.filter(function(x){ return x!=null && !isNaN(x); }); if(!v.length) return null; var s = v.reduce(function(a,b){return a+b;},0); return Math.round(s/v.length*100)/100; } function placeAvg(place){ var all = []; place.items.forEach(function(it){ it.scores.forEach(function(s){ if(s!=null&&!isNaN(s)) all.push(s); }); }); if(!all.length) return null; return Math.round(all.reduce(function(a,b){return a+b;},0)/all.length*100)/100; } // ---------- 渲染 ---------- function render(){ var root = document.getElementById("root"); root.innerHTML = ""; if(!APP_DATA.categories.length){ root.appendChild(el("div",{class:"empty",text:"还没有内容，点右上角「＋ 新增分类」开始吧。"})); return; } APP_DATA.categories.forEach(function(cat){ root.appendChild(renderCat(cat)); }); } function renderCat(cat){ var isCol = collapsed[cat.id]; var body = el("div",{class:"cat-body"}); cat.places.forEach(function(p){ body.appendChild(renderPlace(cat, p)); }); body.appendChild(el("div",{class:"row-actions"},[ el("button",{class:"btn-add",text:"＋ 场所",onclick:function(){ addPlace(cat); }}), el("button",{class:"icon-btn",text:"🗑 删分类",onclick:function(){ delCat(cat); }}) ])); var head = el("div",{class:"cat-head",onclick:function(){ collapsed[cat.id] = !collapsed[cat.id]; catNode.classList.toggle("collapsed", collapsed[cat.id]); }},[ el("span",{class:"arrow",text:"▼"}), el("h2",{text:cat.name}), el("button",{class:"icon-btn",text:"✎",onclick:function(e){ e.stopPropagation(); renameCat(cat); }}) ]); var catNode = el("div",{class:"cat"+(isCol?" collapsed":"")},[head, body]); return catNode; } function renderPlace(cat, place){ var pa = placeAvg(place); var head = el("div",{class:"place-head"},[ el("span",{class:"pname",text:place.name}), el("span",{class:"pavg",text: pa!=null ? ("均 "+pa) : ""}) ]); var pthumbs = el("div",{class:"thumbs"}); (place.images||[]).forEach(function(src, idx){ var img = el("img",{src:src, class:"thumb"}); img.addEventListener("click", function(){ viewImage(src); }); var del = el("button",{class:"thumb-del",text:"×",onclick:function(e){ e.stopPropagation(); place.images.splice(idx,1); saveData(); render(); }}); pthumbs.appendChild(el("div",{class:"thumb-wrap"},[img, del])); }); var wrap = el("div",{class:"place"},[head]); if(place.images && place.images.length) wrap.appendChild(pthumbs); wrap.appendChild(el("div",{class:"row-actions"},[ el("button",{class:"icon-btn",text:"📸 照片",onclick:function(){ openImagePicker(place); }}), el("button",{class:"icon-btn",text:"📋 粘贴",onclick:function(){ pendingItem = place; toast("去相册复制图片，长按此处粘贴"); }}), el("button",{class:"icon-btn",text:"✎ 改名",onclick:function(){ renamePlace(place); }}), el("button",{class:"icon-btn",text:"🗑 删除",onclick:function(){ delPlace(cat, place); }}) ])); place.items.forEach(function(it){ wrap.appendChild(renderItem(place, it)); }); wrap.appendChild(el("button",{class:"btn-add",text:"＋ 条目",onclick:function(){ addItem(place); }})); return wrap; } function renderItem(place, it){ var a = it.scores[0], b = it.scores[1]; var avgVal = avg(it.scores); var starCell = el("div",{class:"stars",onclick:function(){ it.stars = (it.stars+1) % 4; saveData(); starCell.innerHTML = it.stars ? "⭐".repeat(it.stars) : '<span class="none">—</span>'; }, title:"点击加星（最多3颗）"}); starCell.innerHTML = it.stars ? "⭐".repeat(it.stars) : '<span class="none">—</span>'; var inA = el("input",{type:"number",step:"0.5",min:"0",max:"10",inputmode:"decimal", value: a==null?"":a, placeholder:"—"}); inA.addEventListener("input", function(){ var v = inA.value === "" ? null : parseFloat(inA.value); it.scores[0] = isNaN(v) ? null : v; updateAvg(); saveData(); }); var inB = el("input",{type:"number",step:"0.5",min:"0",max:"10",inputmode:"decimal", value: b==null?"":b, placeholder:"—"}); inB.addEventListener("input", function(){ var v = inB.value === "" ? null : parseFloat(inB.value); it.scores[1] = isNaN(v) ? null : v; updateAvg(); saveData(); }); var avgBox = el("div",{class:"avg-box"},[ el("span",{class:"v",text: avgVal!=null?avgVal:"—"}), el("span",{class:"l",text:"均分"}) ]); var noteIn = el("div",{class:"note-display",contenteditable:"true","data-placeholder":"备注（如：太甜 / 性价比高）"}); noteIn.textContent = it.note || ""; noteIn.addEventListener("input", function(){ if(noteIn.textContent.trim()==="") noteIn.innerHTML = ""; it.note = noteIn.textContent; saveData(); }); noteIn.addEventListener("paste", function(e){ e.preventDefault(); var text = (e.clipboardData || window.clipboardData).getData("text/plain"); document.execCommand("insertText", false, text); }); var scores = el("div",{class:"scores"},[ el("div",{class:"score-box a"},[ el("label",{text:"止"}), inA ]), el("div",{class:"score-box b"},[ el("label",{text:"雯"}), inB ]), avgBox ]); var thumbs = el("div",{class:"thumbs"}); (it.images||[]).forEach(function(src, idx){ var img = el("img",{src:src, class:"thumb"}); img.addEventListener("click", function(){ viewImage(src); }); var del = el("button",{class:"thumb-del",text:"×",onclick:function(e){ e.stopPropagation(); it.images.splice(idx,1); saveData(); render(); }}); thumbs.appendChild(el("div",{class:"thumb-wrap"},[img, del])); }); var node = el("div",{class:"item"+(it.fromGz?" from-gz":"")},[ el("div",{class:"iname"},[ el("span",{text:it.name}), (it.fromGz?el("span",{class:"gzmark",text:"📍地图"}):null), starCell ]), scores, el("div",{class:"note"},[noteIn]), thumbs, el("div",{class:"row-actions"},[ el("button",{class:"icon-btn",text:"📸 照片",onclick:function(){ openImagePicker(it); }}), el("button",{class:"icon-btn",text:"📋 粘贴",onclick:function(){ pendingItem = it; toast("去相册长按图片→复制，回来长按此处粘贴"); }}), el("button",{class:"icon-btn",text:"✎ 改名",onclick:function(){ renameItem(it); }}), el("button",{class:"icon-btn",text:"🗑 删除",onclick:function(){ delItem(place, it); }}), el("button",{class:"icon-btn locate-gz",text:"📍 地图",onclick:function(){ if(it.gzId) parent.postMessage({to:"gz",action:"locate",gzId:it.gzId,switch:true},"*"); }}) ]) ]); function updateAvg(){ var v = avg(it.scores); avgBox.querySelector(".v").textContent = v!=null? v : "—"; } return node; } // ---------- 增删改 ---------- function addCat(){ var name = prompt("新分类名称（如：酒店 / 游玩 / 餐厅）", "新分类"); if(name==null) return; APP_DATA.categories.push({id:uid(), name:name||"新分类", places:[]}); saveData(); render(); } function renameCat(cat){ var n=prompt("分类名",cat.name); if(n!=null){cat.name=n;saveData();render();} } function delCat(cat){ if(!confirm("删除分类「"+cat.name+"」及其下全部内容？")) return; APP_DATA.categories = APP_DATA.categories.filter(function(c){return c.id!=cat.id;}); saveData(); render(); } function addPlace(cat){ var name = prompt("场所名称", "新场所"); if(name==null) return; cat.places.push({id:uid(), name:name||"新场所", items:[]}); saveData(); render(); } function renamePlace(p){ var n=prompt("场所名",p.name); if(n!=null){p.name=n;saveData();render();} } function delPlace(cat,p){ if(!confirm("删除场所「"+p.name+"」及其下全部条目？")) return; cat.places = cat.places.filter(function(x){return x.id!=p.id;}); saveData(); render(); } function addItem(place){ var name = prompt("条目名称（酒 / 菜 / 房 / 项目）", "新条目"); if(name==null) return; place.items.push({id:uid(), name:name||"新条目", scores:[null,null], stars:0, note:""}); saveData(); render(); } function renameItem(it){ var n=prompt("条目名",it.name); if(n!=null){it.name=n;saveData();render();} } function delItem(place,it){ if(!confirm("删除条目「"+it.name+"」？")) return; place.items = place.items.filter(function(x){return x.id!=it.id;}); saveData(); render(); } // ---------- 导出 / 导入 ---------- function exportFile(){ saveData(); var html = "<!DOCTYPE html>\n" + document.documentElement.outerHTML; var blob = new Blob([html], {type:"text/html;charset=utf-8"}); var url = URL.createObjectURL(blob); var a = document.createElement("a"); a.href = url; a.download = "我们的评分本.html"; document.body.appendChild(a); a.click(); a.remove(); setTimeout(function(){ URL.revokeObjectURL(url); }, 1000); toast("已导出，去微信发给对方吧"); } function importFile(file){ var reader = new FileReader(); reader.onload = function(){ var txt = reader.result; var inc = null; try { if(/<script id="appdata"/.test(txt)){ var m = txt.match(/<script id="appdata"[^>]*>([\s\S]*?)<\/script>/); inc = JSON.parse(m[1]); } else { inc = JSON.parse(txt); } } catch(e){ alert("导入失败，文件格式不对：" + e.message); return; } if(!inc || !inc.categories) { alert("导入失败：没有找到评分数据。"); return; } mergeData(APP_DATA, inc); saveData(); render(); toast("已合并对方数据"); }; reader.readAsText(file); } // 合并策略：以 id 匹配；对方有而本地没有的 -> 追加；都有 -> 只填补本地为空的分 / 星 / 备注，本地已有则保留 function mergeData(local, inc){ inc.categories.forEach(function(cat){ var lc = local.categories.find(function(c){return c.id===cat.id;}); if(!lc){ local.categories.push(JSON.parse(JSON.stringify(cat))); return; } mergeArr(lc.places, cat.places, function(lp, p){ lp.images = lp.images || []; if(p.images && p.images.length){ p.images.forEach(function(s){ if(lp.images.indexOf(s) < 0) lp.images.push(s); }); } mergeArr(lp.items, p.items, function(li, it){ for(var k=0;k<2;k++){ if((li.scores[k]==null) && it.scores[k]!=null && !isNaN(it.scores[k])) li.scores[k]=it.scores[k]; } if(!li.stars && it.stars) li.stars = it.stars; if(!li.note && it.note) li.note = it.note; if(!li.name && it.name) li.name = it.name; li.images = li.images || []; if(it.images && it.images.length){ it.images.forEach(function(s){ if(li.images.indexOf(s) < 0) li.images.push(s); }); } }); }); }); } function mergeArr(localArr, incArr, fn){ incArr.forEach(function(o){ var lo = localArr.find(function(x){return x.id===o.id;}); if(!lo){ localArr.push(JSON.parse(JSON.stringify(o))); return; } fn(lo, o); }); } function resizeImage(file, maxW, cb){ var reader = new FileReader(); reader.onload = function(){ var img = new Image(); img.onload = function(){ var w = img.width, h = img.height; if(w > maxW){ h = Math.round(h * maxW / w); w = maxW; } var canvas = document.createElement("canvas"); canvas.width = w; canvas.height = h; canvas.getContext("2d").drawImage(img, 0, 0, w, h); cb(canvas.toDataURL("image/jpeg", 0.82)); }; img.src = reader.result; }; reader.readAsDataURL(file); } function viewImage(src){ var overlay = el("div",{class:"img-modal",onclick:function(){ overlay.remove(); }}); overlay.appendChild(el("img",{src:src, class:"img-full"})); document.body.appendChild(overlay); } function openImagePicker(item){ pendingItem = item; document.getElementById("imgInput").click(); } // ---------- toast ---------- var toastTimer; function toast(msg){ var t = document.getElementById("toast"); if(!t){ t = el("div",{class:"toast",id:"toast"}); document.body.appendChild(t); } t.textContent = msg; t.classList.add("show"); clearTimeout(toastTimer); toastTimer = setTimeout(function(){ t.classList.remove("show"); }, 1800); } var autosaveEl, autosaveTimer; function markAutosaved(){ if(!autosaveEl){ autosaveEl = el("div",{id:"autosave",text:"💾 自动保存已开启"}); autosaveEl.style.cssText = "position:fixed;right:10px;bottom:10px;z-index:60;background:rgba(63,125,110,.92);color:#fff;font-size:12px;padding:6px 10px;border-radius:12px;opacity:.7;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.15)"; document.body.appendChild(autosaveEl); } autosaveEl.textContent = "💾 已自动保存"; autosaveEl.style.opacity = "1"; clearTimeout(autosaveTimer); autosaveTimer = setTimeout(function(){ autosaveEl.textContent = "💾 自动保存已开启"; autosaveEl.style.opacity = ".7"; }, 1100); } // ---------- 绑定 ---------- document.getElementById("btnExport").addEventListener("click", exportFile); var bannerX = document.getElementById("bannerX"); if(bannerX) bannerX.addEventListener("click", function(){ var b=document.getElementById("banner"); if(b) b.style.display="none"; }); document.getElementById("btnAddCat").addEventListener("click", addCat); document.getElementById("btnImport").addEventListener("click", function(){ document.getElementById("fileInput").click(); }); document.getElementById("fileInput").addEventListener("change", function(e){ var f = e.target.files[0]; if(f) importFile(f); e.target.value = ""; }); var imgInputEl = document.getElementById("imgInput"); imgInputEl.addEventListener("change", function(e){ var files = e.target.files; if(files && files.length && pendingItem){ var n = files.length, done = 0; pendingItem.images = pendingItem.images || []; for(var i=0;i<n;i++){ (function(f){ resizeImage(f, 1000, function(dataUrl){ pendingItem.images.push(dataUrl); done++; if(done===n){ saveData(); render(); toast("已添加 "+n+" 张图片"); } }); })(files[i]); } } e.target.value = ""; }); document.addEventListener("paste", function(e){ if(!pendingItem) return; var cd = e.clipboardData || window.clipboardData; var items = cd && cd.items ? cd.items : []; for(var i=0;i<items.length;i++){ if(items[i].type && items[i].type.indexOf("image")===0){ var f = items[i].getAsFile(); if(f){ resizeImage(f, 1000, function(dataUrl){ pendingItem.images = pendingItem.images || []; pendingItem.images.push(dataUrl); saveData(); render(); toast("图片已粘贴"); }); e.preventDefault(); } break; } } }); render(); markAutosaved(); // ===== 跨应用：接收广州地图「去评分本记这家」===== window.addEventListener("message", function(e){ var d = e.data || {}; if(d.to!=="book" || d.action!=="addEntry") return; var pl = d.payload || {}; if(!pl.gzId || !pl.name) return; var CATNAME = "📍 广州探店"; var cat = APP_DATA.categories.find(function(c){ return c.name===CATNAME; }); if(!cat){ cat = {id:"c_gz", name:CATNAME, places:[]}; APP_DATA.categories.unshift(cat); } var place = cat.places.find(function(p){ return p.name===pl.district; }); if(!place){ place = {id:"p_"+pl.gzId, name:pl.district, items:[]}; cat.places.push(place); } var it = place.items.find(function(x){ return x.gzId===pl.gzId; }); if(!it){ var pre = pl.regionName ? ("📍 "+pl.regionName+" · "+pl.cuisine+"\n") : ""; it = {id:"i_"+pl.gzId, name:pl.name, scores:[null,null], stars:0, note:pre+"（来自广州地图）", gzId:pl.gzId, fromGz:true}; place.items.unshift(it); } // 记下来等于「去过」，从广州地图的想去清单里移除（共享 localStorage） try { var wl = JSON.parse(localStorage.getItem("gz_wishlist_v1")||"{}"); if(wl[pl.gzId]){ delete wl[pl.gzId]; localStorage.setItem("gz_wishlist_v1", JSON.stringify(wl)); } } catch(e){} collapsed[cat.id] = false; saveData(); render(); toast("已加入评分本「"+CATNAME+"」：" + pl.name); }); // ===== 跨应用：广州地图请求导出数据用于「导入店」===== window.addEventListener("message", function(e){ var d = e.data || {}; if(d.to!=="book" || d.action!=="exportData") return; try { parent.postMessage({to:"gz", action:"bookData", payload: APP_DATA}, "*"); } catch(e){} }); })(); </script> <div class="toast" id="toast">图片已添加</div></body></html>">