gm/CTStruct
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: per_line 전용 UI 블록 분리 (노드 설정 내 별도 섹션)

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
이규민
2026-06-05 17:25:41 +09:00
parent c215f28a2f
commit e332e357b9
1 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
ui/builder.html
View File

@@ -245,6 +245,13 @@ input,textarea,button,select{font-family:inherit}
.ftpl-role{font-size:9px;border-radius:3px;padding:1px 5px;font-weight:700;margin-left:2px;letter-spacing:.03em} .ftpl-role{font-size:9px;border-radius:3px;padding:1px 5px;font-weight:700;margin-left:2px;letter-spacing:.03em}
.ftpl-role.collect{background:var(--accent-bg);color:var(--accent)} .ftpl-role.collect{background:var(--accent-bg);color:var(--accent)}
.ftpl-role.fixed{background:var(--surface-alt);color:var(--muted);border:1px solid var(--border)} .ftpl-role.fixed{background:var(--surface-alt);color:var(--muted);border:1px solid var(--border)}
/* per_line 전용 UI */
.perline-block{display:flex;align-items:center;gap:7px;padding:5px 6px;background:var(--surface-alt);border:1px solid var(--border);border-radius:5px}
.perline-lbl{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.perline-inp{width:72px;font-size:14px;font-weight:600;border:1.5px solid var(--border);border-radius:5px;padding:3px 7px;outline:none;background:var(--surface);text-align:center;color:var(--text)}
.perline-inp:focus{border-color:var(--border-focus)}
.perline-inp::placeholder{font-size:10px;font-weight:400;color:var(--muted)}
.perline-unit{font-size:11px;color:var(--muted)}
/* ── Tab 3: 구조 추출 ────────────────────────── */ /* ── Tab 3: 구조 추출 ────────────────────────── */
#panel-extractor{flex-direction:column} #panel-extractor{flex-direction:column}
@@ -894,7 +901,7 @@ function renderDetail(){
${availSet.length?`<select class="add-sel" onchange="addSetting('${node.id}',this.value);this.selectedIndex=0"> ${availSet.length?`<select class="add-sel" onchange="addSetting('${node.id}',this.value);this.selectedIndex=0">
<option value="">＋ 옵션 추가</option>${setOpts}</select>`:''} <option value="">＋ 옵션 추가</option>${setOpts}</select>`:''}
</div> </div>
<div class="body-sec-body">${renderStructSettings(node)}${settingItems}</div> <div class="body-sec-body">${renderStructSettings(node)}${renderPerLineSetting(node)}${settingItems}</div>
</div> </div>
</div>`; </div>`;
} }
@@ -967,7 +974,6 @@ function setPerLine(nid, val){
function renderStructSettings(node){ function renderStructSettings(node){
const nid=node.id, nl=node.nameNewline??true; const nid=node.id, nl=node.nameNewline??true;
const col=node.settings?.attributes?.collect==='true'; const col=node.settings?.attributes?.collect==='true';
const pl=node.settings?.attributes?.per_line||'';
return ` return `
<div class="struct-sep"> <div class="struct-sep">
<div class="sep-bar-row"> <div class="sep-bar-row">
@@ -980,16 +986,19 @@ function renderStructSettings(node){
<span class="sep-chip${!col?' on':''}" onclick="setCollect('${nid}',false)" title="값이 항상 고정 출력됩니다">🔒 고정</span> <span class="sep-chip${!col?' on':''}" onclick="setCollect('${nid}',false)" title="값이 항상 고정 출력됩니다">🔒 고정</span>
<span class="sep-chip${col?' on':''}" onclick="setCollect('${nid}',true)" title="합치기 시 값이 수집됩니다">📥 수집</span> <span class="sep-chip${col?' on':''}" onclick="setCollect('${nid}',true)" title="합치기 시 값이 수집됩니다">📥 수집</span>
</div> </div>
<div class="sep-bar-row"> </div>`;
<span class="sep-bar-lbl">한 줄에</span> }
<input type="number" min="1" max="99"
style="width:52px;font-size:12px;border:1px solid var(--border);border-radius:4px;padding:2px 5px;outline:none;background:var(--surface-alt);text-align:center" function renderPerLineSetting(node){
value="${esc(pl)}" placeholder="∞" const nid=node.id;
oninput="setPerLine('${nid}',this.value)" const pl=node.settings?.attributes?.per_line||'';
onfocus="this.style.borderColor='var(--border-focus)'" return `
onblur="this.style.borderColor='var(--border)'"> <div class="perline-block">
<span style="font-size:11px;color:var(--muted)">개씩</span> <span class="perline-lbl">한 줄에</span>
</div> <input class="perline-inp" type="number" min="1" max="999"
value="${esc(pl)}" placeholder="∞"
oninput="setPerLine('${nid}',this.value)">
<span class="perline-unit">개씩 출력</span>
</div>`; </div>`;
} }