@@ -102,18 +102,18 @@ header p{font-size:14px;color:#aaa;margin-top:6px}
@@ -128,8 +128,30 @@ header p{font-size:14px;color:#aaa;margin-top:6px}
可选效果
-
-
+
+ 勾缝线
+
+
+
+ 踢脚线
+
+
@@ -163,13 +185,13 @@ header p{font-size:14px;color:#aaa;margin-top:6px}
const $=id=>document.getElementById(id);
const state={options:null,type:'wood',file:null,originalUrl:null,room:null,pattern:null,floor:null,timer:null,lastStatus:null};
-function show错误(title, detail){
+function showError(title, detail){
$('errorBox').style.display='block';
$('errorDetail').textContent=(title||'生成失败')+(detail?'\n\n'+detail:'');
$('resultPlaceholder').style.display='flex';
$('resultPlaceholder').innerHTML='生成失败';
}
-function clear错误(){ $('errorBox').style.display='none'; $('errorDetail').textContent=''; }
+function clearError(){ $('errorBox').style.display='none'; $('errorDetail').textContent=''; }
function setProgress(step,msg,width){
$('statusBox').style.display='block';
$('stepLabel').textContent=step;
@@ -196,6 +218,14 @@ function selectIn(container,item,el,key){
function checkReady(){
$('generateBtn').disabled=!(state.file&&state.pattern&&state.floor);
}
+state.materialSource='image';
+$('materialSourceOptions').onclick=e=>{
+ const opt=e.target.closest('.option');
+ if(!opt)return;
+ [...$('materialSourceOptions').querySelectorAll('.option')].forEach(x=>x.classList.remove('selected'));
+ opt.classList.add('selected');
+ state.materialSource=opt.dataset.source;
+};
// Material source selector
state.materialSource='image';
$('materialSourceOptions').onclick=e=>{
@@ -206,7 +236,7 @@ $('materialSourceOptions').onclick=e=>{
state.materialSource=opt.dataset.source;
};
function render尺寸s(floor){
- const el=$('size可选效果'); el.innerHTML=''; state.sizeVariant=null;
+ const el=$('sizeOptions'); el.innerHTML=''; state.sizeVariant=null;
const variants=floor.variants||[];
$('sizePanel').style.display='block';
// Collect all sizes: main entry first, then variants
@@ -225,7 +255,7 @@ function cardText(f){
return [f.name,f.color_tone,f.finish,f.material,f.sku].filter(Boolean).join(' ');
}
function renderRooms(){
- const el=$('room可选效果'); el.innerHTML='';
+ const el=$('roomOptions'); el.innerHTML='';
(state.options.rooms||[]).forEach((r,i)=>{
const div=document.createElement('div');
div.className='option';
@@ -235,8 +265,8 @@ function renderRooms(){
if(i===0)div.click();
});
}
-function render铺设方式s(){
- const el=$('pattern可选效果'); el.innerHTML=''; state.pattern=null;
+function renderPatterns(){
+ const el=$('patternOptions'); el.innerHTML=''; state.pattern=null;
patternList().forEach((p,i)=>{
const div=document.createElement('div');
div.className='option';
@@ -247,7 +277,7 @@ function render铺设方式s(){
});
}
function renderFloors(){
- const el=$('floor可选效果'); el.innerHTML=''; state.floor=null;
+ const el=$('floorOptions'); el.innerHTML=''; state.floor=null;
const q=$('floorSearch').value.trim().toLowerCase();
const list=floorList().filter(f=>!q||cardText(f).toLowerCase().includes(q)).slice(0,200);
if(list.length===0){el.innerHTML='
没有匹配的地板款式
';checkReady();return}
@@ -263,15 +293,14 @@ function renderFloors(){
}
function setType(type){
state.type=type;
- [...$('type可选效果').querySelectorAll('.option')].forEach(x=>x.classList.toggle('selected',x.dataset.type===type));
- $('floorTitle').textContent=type==='tile'?'选择Tile / Stone款式':type==='vinyl'?'选择Luxury Vinyl款式':type==='special'?'AI Test地板 (含AI描述)':'选择Hardwood款式';
- const groutDisabled=type!=='tile'&&type!=='vinyl'&&type!=='special';
- $('grout').disabled=groutDisabled;
- $('groutToggle').classList.toggle('disabled',groutDisabled);
- if(groutDisabled){$('grout').checked=false;$('groutToggle').classList.remove('selected')}
- render铺设方式s(); renderFloors(); checkReady();
+ [...$('typeOptions').querySelectorAll('.option')].forEach(x=>x.classList.toggle('selected',x.dataset.type===type));
+ $('floorTitle').textContent=type==='tile'?'选择瓷砖款式':type==='vinyl'?'选择乙烯基地板款式':type==='special'?'特殊测试地板 (含AI描述)':'选择木地板款式';
+ const groutDisabled=type!=='tile'&&type!=='special';
+ $('groutSelect').disabled=groutDisabled;
+ if(groutDisabled)$('groutSelect').value='';
+ renderPatterns(); renderFloors(); checkReady();
}
-async function load可选效果(){
+async function loadOptions(){
setProgress('加载选项','正在读取数据库中的地板款式...', '8%');
const res=await fetch('/floor/options');
const text=await res.text();
@@ -371,16 +400,12 @@ $('fileInput').onchange=()=>{if($('fileInput').files[0])handleFile($('fileInput'
$('uploadZone').ondragover=e=>{e.preventDefault();$('uploadZone').classList.add('dragover')};
$('uploadZone').ondragleave=()=>$('uploadZone').classList.remove('dragover');
$('uploadZone').ondrop=e=>{e.preventDefault();$('uploadZone').classList.remove('dragover');if(e.dataTransfer.files[0])handleFile(e.dataTransfer.files[0])};
-$('type可选效果').onclick=e=>{const opt=e.target.closest('.option');if(opt)setType(opt.dataset.type)};
+$('typeOptions').onclick=e=>{const opt=e.target.closest('.option');if(opt)setType(opt.dataset.type)};
$('floorSearch').oninput=renderFloors;
-$('grout').onchange=()=>$('groutToggle').classList.toggle('selected',$('grout').checked);
-$('baseboard').onchange=()=>$('baseboardToggle').classList.toggle('selected',$('baseboard').checked);
-$('groutToggle').onclick=e=>{if(e.target.tagName!=='INPUT'&&!$('grout').disabled){$('grout').checked=!$('grout').checked;$('grout').onchange()}};
-$('baseboardToggle').onclick=e=>{if(e.target.tagName!=='INPUT'){$('baseboard').checked=!$('baseboard').checked;$('baseboard').onchange()}};
$('generateBtn').onclick=async()=>{
if(!state.file||!state.floor||!state.pattern)return;
- clearInterval(state.timer); clear错误();
+ clearInterval(state.timer); clearError();
$('generateBtn').classList.add('loading');
$('generateBtn').disabled=true;
$('compare').style.display='none';
@@ -398,8 +423,9 @@ $('generateBtn').onclick=async()=>{
fd.append('floor_id',floorId);
fd.append('pattern_code',patternCode);
fd.append('room_code',roomCode);
- fd.append('grout_lines',$('grout').checked?'true':'false');
- fd.append('white_baseboard',$('baseboard').checked?'true':'false');
+ fd.append('grout_lines',$('groutSelect').value||'');
+ fd.append('white_baseboard',$('baseboardSelect').value||'');
+ fd.append('material_source',state.materialSource||'image');
fd.append('material_source',state.materialSource||'image');
const submitted=`提交参数:\nfloor_id: ${floorId}\npattern_code: ${patternCode}\nroom_code: ${roomCode}\ngrout_lines: ${$('grout').checked}\nwhite_baseboard: ${$('baseboard').checked}`;
setProgress('提交任务',submitted, '10%');
@@ -414,14 +440,14 @@ $('generateBtn').onclick=async()=>{
clearInterval(state.timer); state.timer=null;
$('generateBtn').classList.remove('loading');
$('generateBtn').disabled=false;
- show错误(err.message, state.lastStatus ? JSON.stringify(state.lastStatus,null,2) : '');
+ showError(err.message, state.lastStatus ? JSON.stringify(state.lastStatus,null,2) : '');
}),2500);
}catch(err){
if(state.liveInterval){clearInterval(state.liveInterval);$('liveTimer').style.display='none'}
$('generateBtn').classList.remove('loading');
$('generateBtn').disabled=false;
$('statusBox').style.display='none';
- show错误(err.message,'');
+ showError(err.message,'');
}
};
@@ -434,7 +460,7 @@ window.addEventListener('touchmove',e=>{if(dragging)updateCompare(e.touches[0].c
window.addEventListener('touchend',()=>dragging=false);
window.addEventListener('resize',()=>{if($('compare').style.display==='block')$('beforeImg').style.width=$('compare').offsetWidth+'px'});
-load可选效果().catch(err=>show错误('选项加载失败',err.message));
+loadOptions().catch(err=>showError('选项加载失败',err.message));