jackyu66gitandCursor
2fb1dfee14
Archive the differentiated YuXinGu product docs, AI engineering system, design contract, and Go/Vue scaffold. Next execution prioritizes Cece-parity over early innovation (see .ai/product/STRATEGY.md). Co-authored-by: Cursor <cursoragent@cursor.com>
425 lines
14 KiB
JavaScript
425 lines
14 KiB
JavaScript
var c=document.getElementById('c'),ctx=c.getContext('2d');
|
|
var ei=document.getElementById('ei'),ed=document.getElementById('editor');
|
|
var SCALE=1,ox=0,oy=0;
|
|
var dragging=false,dragX=0,dragY=0;
|
|
var selected=null,editing=null;
|
|
var colors=['#8B5CF6','#4A90E2','#5CB85C','#E8985A','#E54D42','#06B6D4','#F59E0B','#EC4899'];
|
|
var STORAGE_KEY='yuxingu_maps';
|
|
|
|
// ---- Multi-map state ----
|
|
var maps=[],currentIdx=-1;
|
|
|
|
function defaultTree(){
|
|
return {
|
|
id:'root',text:'新建脑图',color:colors[0],children:[]
|
|
};
|
|
}
|
|
|
|
function defaultTemplate(){
|
|
return {
|
|
id:'root',text:'愈心谷小程序',color:colors[0],
|
|
children:[
|
|
{id:'b1',text:'愈心魔方',color:colors[0],children:[
|
|
{id:'b1a',text:'急救魔方'},{id:'b1b',text:'亲子魔方'},{id:'b1c',text:'成长魔方'},
|
|
{id:'b1d',text:'解构魔方'},{id:'b1e',text:'艺术魔方'},{id:'b1f',text:'情感魔方'}
|
|
]},
|
|
{id:'b2',text:'私域活动',color:colors[1],children:[
|
|
{id:'b2a',text:'心理研学'},{id:'b2b',text:'心灵旅修'}
|
|
]},
|
|
{id:'b3',text:'心理咨询',color:colors[2]},
|
|
{id:'b4',text:'心理评估',color:colors[3],children:[
|
|
{id:'b4a',text:'AI面部识别'},{id:'b4b',text:'脑机接口'}
|
|
]},
|
|
{id:'b5',text:'健康管理',color:colors[4]}
|
|
]
|
|
};
|
|
}
|
|
|
|
// ---- Persistence ----
|
|
function loadMaps(){
|
|
try{
|
|
var d=localStorage.getItem(STORAGE_KEY);
|
|
return d?JSON.parse(d):[];
|
|
}catch(e){return [];}
|
|
}
|
|
|
|
function saveMaps(){
|
|
try{localStorage.setItem(STORAGE_KEY,JSON.stringify(maps))}catch(e){}
|
|
// sync to server (all maps)
|
|
fetch('/save',{method:'POST',body:JSON.stringify(maps)}).catch(function(){});
|
|
}
|
|
|
|
function syncServer(){
|
|
fetch('/load').then(function(r){return r.json()}).then(function(data){
|
|
if(Array.isArray(data)&&data.length>0){
|
|
maps=data;saveMaps();renderSidebar();
|
|
if(currentIdx<0||currentIdx>=maps.length)switchMap(0);
|
|
}
|
|
}).catch(function(){});
|
|
}
|
|
|
|
// ---- Sidebar ----
|
|
function renderSidebar(){
|
|
var sl=document.getElementById('slist');
|
|
sl.innerHTML='';
|
|
maps.forEach(function(m,i){
|
|
var d=document.createElement('div');
|
|
d.className='item'+(i===currentIdx?' active':'');
|
|
d.innerHTML='<span>'+escHtml(m.name||'脑图'+(i+1))+'</span><span class="del" data-idx="'+i+'" onclick="event.stopPropagation();deleteMap('+i+')">✕</span>';
|
|
d.onclick=function(){switchMap(i)};
|
|
sl.appendChild(d);
|
|
});
|
|
}
|
|
|
|
function escHtml(s){return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');}
|
|
|
|
function switchMap(idx){
|
|
if(idx<0||idx>=maps.length)return;
|
|
currentIdx=idx;
|
|
tree=JSON.parse(JSON.stringify(maps[idx].tree));
|
|
selected=null;
|
|
renderSidebar();
|
|
layout();draw();
|
|
// close sidebar on mobile after selection
|
|
if(window.innerWidth<=600)closeSidebar();
|
|
}
|
|
|
|
function newMap(){
|
|
var name=prompt('脑图名称：','脑图'+(maps.length+1));
|
|
if(!name)return;
|
|
maps.push({name:name,tree:defaultTree()});
|
|
saveMaps();
|
|
renderSidebar();
|
|
switchMap(maps.length-1);
|
|
}
|
|
|
|
function renameMap(){
|
|
if(currentIdx<0)return;
|
|
var name=prompt('新名称：',maps[currentIdx].name);
|
|
if(!name)return;
|
|
maps[currentIdx].name=name;
|
|
saveMaps();renderSidebar();
|
|
}
|
|
|
|
function deleteMap(idx){
|
|
if(!confirm('删除「'+maps[idx].name+'」？不可恢复。'))return;
|
|
maps.splice(idx,1);
|
|
saveMaps();renderSidebar();
|
|
if(maps.length===0){maps.push({name:'愈心谷小程序',tree:defaultTemplate()});saveMaps();renderSidebar();}
|
|
if(currentIdx>=maps.length)currentIdx=maps.length-1;
|
|
switchMap(currentIdx);
|
|
}
|
|
|
|
var _saveTimer=null;
|
|
function autoSave(){
|
|
if(currentIdx<0)return;
|
|
maps[currentIdx].tree=JSON.parse(JSON.stringify(exportTree(tree)));
|
|
saveMaps();
|
|
var h=document.getElementById('saveHint');
|
|
if(h){h.textContent='💾 已自动保存';h.style.color='#aaa';
|
|
clearTimeout(_saveTimer);
|
|
_saveTimer=setTimeout(function(){h.textContent='';},2000);}
|
|
}
|
|
|
|
// ---- Tree export ----
|
|
function exportTree(node){
|
|
var o={id:node.id,text:node.text};
|
|
if(node.color)o.color=node.color;
|
|
if(node.children)o.children=node.children.map(exportTree);
|
|
return o;
|
|
}
|
|
|
|
// ---- Layout & Draw ----
|
|
var tree=defaultTemplate();
|
|
var NODE_W=120,NODE_H=34,HGAP=60,VGAP=14;
|
|
|
|
function uid(){return 'n'+Date.now()+Math.random().toString(36).slice(2,6)}
|
|
|
|
function getColor(node,parentColor){
|
|
if(node.color)return node.color;
|
|
if(parentColor)return parentColor;
|
|
return colors[0];
|
|
}
|
|
|
|
function layoutHeight(node){
|
|
if(!node.children||node.children.length===0)return NODE_H;
|
|
var h=0;
|
|
for(var i=0;i<node.children.length;i++)h+=layoutHeight(node.children[i]);
|
|
return h+(node.children.length-1)*VGAP;
|
|
}
|
|
|
|
function layoutNode(node,x,y,parentColor){
|
|
node._x=x;node._y=y;node._w=NODE_W;node._h=NODE_H;
|
|
node._color=getColor(node,parentColor);
|
|
if(node.children&&node.children.length>0){
|
|
var totalH=0;
|
|
for(var i=0;i<node.children.length;i++)totalH+=layoutHeight(node.children[i]);
|
|
totalH+=(node.children.length-1)*VGAP;
|
|
var cy=y-(totalH-NODE_H)/2;
|
|
for(var i=0;i<node.children.length;i++){
|
|
var cnode=node.children[i];
|
|
var ch=layoutHeight(cnode);
|
|
layoutNode(cnode,x+NODE_W+HGAP,cy+(ch-NODE_H)/2,node._color);
|
|
cy+=ch+VGAP;
|
|
}
|
|
}
|
|
}
|
|
|
|
function layout(){
|
|
var totalH=layoutHeight(tree);
|
|
layoutNode(tree,40,-totalH/2,tree.color);
|
|
}
|
|
|
|
function hitTest(mx,my){
|
|
function hit(node){
|
|
if(!node._x)return null;
|
|
if(mx>=node._x&&mx<=node._x+node._w&&my>=node._y&&my<=node._y+node._h)return node;
|
|
if(node.children)for(var i=0;i<node.children.length;i++){var h=hit(node.children[i]);if(h)return h;}
|
|
return null;
|
|
}
|
|
return hit(tree);
|
|
}
|
|
|
|
function draw(){
|
|
var W=c.width=c.offsetWidth||window.innerWidth-200;
|
|
var H=c.height=c.offsetHeight||window.innerHeight-42;
|
|
ctx.clearRect(0,0,W,H);
|
|
ctx.save();
|
|
ctx.translate(W/2+ox,H/2+oy);
|
|
ctx.scale(SCALE,SCALE);
|
|
drawTree(tree);
|
|
ctx.restore();
|
|
updatePlusButtons();
|
|
}
|
|
|
|
function drawTree(node){
|
|
var x=node._x,y=node._y,w=node._w,h=node._h,col=node._color;
|
|
var isRoot=node===tree,isSel=node===selected;
|
|
if(node.children)for(var i=0;i<node.children.length;i++){
|
|
var c=node.children[i];
|
|
ctx.beginPath();
|
|
ctx.moveTo(x+w,y+h/2);
|
|
ctx.bezierCurveTo(
|
|
x+w+HGAP/2,y+h/2,
|
|
c._x-HGAP/2,c._y+c._h/2,
|
|
c._x,c._y+c._h/2
|
|
);
|
|
ctx.strokeStyle=col;ctx.lineWidth=isRoot?3:2;ctx.stroke();
|
|
drawTree(c);
|
|
}
|
|
var rx=6;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x+rx,y);ctx.lineTo(x+w-rx,y);ctx.arcTo(x+w,y,x+w,y+rx,rx);
|
|
ctx.lineTo(x+w,y+h-rx);ctx.arcTo(x+w,y+h,x+w-rx,y+h,rx);
|
|
ctx.lineTo(x+rx,y+h);ctx.arcTo(x,y+h,x,y+h-rx,rx);
|
|
ctx.lineTo(x,y+rx);ctx.arcTo(x,y,x+rx,y,rx);ctx.closePath();
|
|
if(isRoot){
|
|
ctx.fillStyle=col;ctx.fill();
|
|
ctx.strokeStyle='rgba(0,0,0,0.15)';ctx.lineWidth=1;ctx.stroke();
|
|
ctx.fillStyle='#fff';
|
|
}else{
|
|
ctx.fillStyle='#fff';ctx.fill();
|
|
ctx.strokeStyle=col;ctx.lineWidth=isSel?3:1.5;ctx.stroke();
|
|
ctx.fillStyle='#333';
|
|
}
|
|
ctx.font=(isRoot?'bold ':'')+'13px -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif';
|
|
ctx.textAlign='center';ctx.textBaseline='middle';
|
|
ctx.fillText(node.text,x+w/2,y+h/2);
|
|
}
|
|
|
|
function updatePlusButtons(){
|
|
var pc=document.getElementById('plusChild'), ps=document.getElementById('plusSibling');
|
|
if(!selected){
|
|
pc.style.display='none'; ps.style.display='none'; return;
|
|
}
|
|
var rect=c.getBoundingClientRect();
|
|
var n=selected, col=n._color||colors[0];
|
|
// Child + (right edge)
|
|
var cx=rect.left + c.width/2 + ox + (n._x+n._w+8)*SCALE;
|
|
var cy=rect.top + c.height/2 + oy + (n._y+n._h/2)*SCALE;
|
|
pc.style.display='block'; pc.style.left=(cx-10)+'px'; pc.style.top=(cy-10)+'px';
|
|
pc.style.background=col;
|
|
// Sibling + (bottom edge) — not for root
|
|
if(selected!==tree){
|
|
var sx=rect.left + c.width/2 + ox + (n._x+n._w/2)*SCALE;
|
|
var sy=rect.top + c.height/2 + oy + (n._y+n._h+8)*SCALE;
|
|
ps.style.display='block'; ps.style.left=(sx-10)+'px'; ps.style.top=(sy-10)+'px';
|
|
ps.style.background=col;
|
|
}else{ps.style.display='none';}
|
|
}
|
|
|
|
// ---- Canvas events ----
|
|
c.addEventListener('mousedown',function(e){
|
|
var rect=c.getBoundingClientRect();
|
|
var sx=(e.clientX-rect.left-c.width/2-ox)/SCALE;
|
|
var sy=(e.clientY-rect.top-c.height/2-oy)/SCALE;
|
|
var node=hitTest(sx,sy);
|
|
if(node){selected=node;draw();}
|
|
else{dragging=true;dragX=e.clientX;dragY=e.clientY;}
|
|
});
|
|
c.addEventListener('mousemove',function(e){
|
|
if(dragging){ox+=e.clientX-dragX;oy+=e.clientY-dragY;dragX=e.clientX;dragY=e.clientY;draw();}
|
|
});
|
|
c.addEventListener('mouseup',function(){dragging=false;});
|
|
c.addEventListener('mouseleave',function(){dragging=false;});
|
|
c.addEventListener('wheel',function(e){
|
|
e.preventDefault();
|
|
SCALE=Math.max(0.3,Math.min(3,SCALE*(e.deltaY>0?0.9:1.1)));
|
|
draw();
|
|
},{passive:false});
|
|
c.addEventListener('dblclick',function(e){
|
|
var rect=c.getBoundingClientRect();
|
|
var sx=(e.clientX-rect.left-c.width/2-ox)/SCALE;
|
|
var sy=(e.clientY-rect.top-c.height/2-oy)/SCALE;
|
|
var node=hitTest(sx,sy);
|
|
if(node){
|
|
editing=node;
|
|
var cx=rect.left+c.width/2+ox+node._x*SCALE;
|
|
var cy=rect.top+c.height/2+oy+node._y*SCALE;
|
|
ed.style.display='block';ed.style.left=cx+'px';ed.style.top=cy+'px';
|
|
ei.value=node.text;ei.focus();ei.select();
|
|
}
|
|
});
|
|
|
|
// Touch
|
|
c.addEventListener('touchstart',function(e){
|
|
if(e.touches.length===1){
|
|
var rect=c.getBoundingClientRect();
|
|
var sx=(e.touches[0].clientX-rect.left-c.width/2-ox)/SCALE;
|
|
var sy=(e.touches[0].clientY-rect.top-c.height/2-oy)/SCALE;
|
|
var node=hitTest(sx,sy);
|
|
if(node){selected=node;draw();}
|
|
else{dragging=true;dragX=e.touches[0].clientX;dragY=e.touches[0].clientY;}
|
|
}
|
|
},{passive:false});
|
|
c.addEventListener('touchmove',function(e){
|
|
if(dragging&&e.touches.length===1){
|
|
e.preventDefault();
|
|
ox+=e.touches[0].clientX-dragX;oy+=e.touches[0].clientY-dragY;
|
|
dragX=e.touches[0].clientX;dragY=e.touches[0].clientY;draw();
|
|
}
|
|
},{passive:false});
|
|
c.addEventListener('touchend',function(){dragging=false;});
|
|
|
|
// ---- Mobile: sidebar toggle ----
|
|
function toggleSidebar(){
|
|
var sb=document.querySelector('.sidebar');
|
|
var ov=document.getElementById('overlay');
|
|
sb.classList.toggle('open');
|
|
ov.classList.toggle('show');
|
|
}
|
|
function closeSidebar(){
|
|
document.querySelector('.sidebar').classList.remove('open');
|
|
document.getElementById('overlay').classList.remove('show');
|
|
}
|
|
|
|
// ---- Mobile: double-tap to edit ----
|
|
var _lastTap=0;
|
|
c.addEventListener('touchend',function(e){
|
|
var now=Date.now();
|
|
if(now-_lastTap<300){
|
|
// double tap
|
|
e.preventDefault();
|
|
var rect=c.getBoundingClientRect();
|
|
var sx=(e.changedTouches[0].clientX-rect.left-c.width/2-ox)/SCALE;
|
|
var sy=(e.changedTouches[0].clientY-rect.top-c.height/2-oy)/SCALE;
|
|
var node=hitTest(sx,sy);
|
|
if(node){
|
|
editing=node;
|
|
var cx=rect.left+c.width/2+ox+node._x*SCALE;
|
|
var cy=rect.top+c.height/2+oy+node._y*SCALE;
|
|
ed.style.display='block';ed.style.left=cx+'px';ed.style.top=cy+'px';
|
|
ei.value=node.text;ei.focus();ei.select();
|
|
}
|
|
}
|
|
_lastTap=now;
|
|
// close sidebar when tapping canvas
|
|
if(window.innerWidth<=600)closeSidebar();
|
|
});
|
|
|
|
// ---- Mobile: pinch-to-zoom ----
|
|
var _pinchDist=0;
|
|
c.addEventListener('touchstart',function(e){
|
|
if(e.touches.length===2){
|
|
_pinchDist=Math.hypot(
|
|
e.touches[0].clientX-e.touches[1].clientX,
|
|
e.touches[0].clientY-e.touches[1].clientY
|
|
);
|
|
}
|
|
},{passive:false});
|
|
c.addEventListener('touchmove',function(e){
|
|
if(e.touches.length===2){
|
|
e.preventDefault();
|
|
var d=Math.hypot(
|
|
e.touches[0].clientX-e.touches[1].clientX,
|
|
e.touches[0].clientY-e.touches[1].clientY
|
|
);
|
|
var ratio=d/(_pinchDist||1);
|
|
SCALE=Math.max(0.3,Math.min(3,SCALE*ratio));
|
|
_pinchDist=d;
|
|
draw();
|
|
}
|
|
},{passive:false});
|
|
|
|
// ---- Keyboard shortcuts ----
|
|
document.addEventListener('keydown',function(e){
|
|
if(e.target.tagName==='INPUT'||e.target.tagName==='TEXTAREA')return; // 编辑中不触发
|
|
if(e.key==='Delete'||e.key==='Backspace'){
|
|
e.preventDefault();
|
|
delNode();
|
|
}
|
|
});
|
|
|
|
// ---- Actions ----
|
|
function commitEdit(){if(editing)editing.text=ei.value||'新节点';ed.style.display='none';editing=null;draw();autoSave();}
|
|
function cancelEdit(){ed.style.display='none';editing=null;}
|
|
|
|
function addChild(){
|
|
if(!selected){alert('请先选中一个节点');return;}
|
|
if(!selected.children)selected.children=[];
|
|
selected.children.push({id:uid(),text:'新节点'});
|
|
layout();draw();selected=selected.children[selected.children.length-1];draw();autoSave();
|
|
}
|
|
|
|
function addSibling(){
|
|
if(!selected||selected===tree){alert('请选中一个非根节点');return;}
|
|
function fp(node,target){
|
|
if(node.children)for(var i=0;i<node.children.length;i++){
|
|
if(node.children[i].id===target.id)return node;
|
|
var f=fp(node.children[i],target);if(f)return f;
|
|
}
|
|
return null;
|
|
}
|
|
var parent=fp(tree,selected);
|
|
if(!parent)return;
|
|
var idx=parent.children.indexOf(selected);
|
|
parent.children.splice(idx+1,0,{id:uid(),text:'新节点'});
|
|
layout();draw();selected=parent.children[idx+1];draw();autoSave();
|
|
}
|
|
|
|
function delNode(){
|
|
if(!selected||selected===tree){alert('不能删除根节点');return;}
|
|
function rm(node,target){
|
|
if(node.children)for(var i=0;i<node.children.length;i++){
|
|
if(node.children[i].id===target.id){node.children.splice(i,1);return true;}
|
|
if(rm(node.children[i],target))return true;
|
|
}
|
|
return false;
|
|
}
|
|
rm(tree,selected);selected=null;layout();draw();autoSave();
|
|
}
|
|
|
|
function zoomIn(){SCALE=Math.min(3,SCALE*1.15);draw();}
|
|
function zoomOut(){SCALE=Math.max(0.3,SCALE*0.85);draw();}
|
|
function goHome(){window.location.href='index.html';}
|
|
|
|
// ---- Init ----
|
|
(function init(){
|
|
maps=loadMaps();
|
|
if(maps.length===0){maps.push({name:'愈心谷小程序',tree:defaultTemplate()});saveMaps();}
|
|
renderSidebar();
|
|
switchMap(0);
|
|
syncServer();
|
|
window.addEventListener('resize',function(){draw();});
|
|
})();
|