01
基礎題
預約保留狀態模型
測試問題
我們想驗證『座位保留』狀態是否容易理解，而不是決定視覺風格。狀態只有 available、held、confirmed、expired；hold 可轉 confirmed 或 expired，expired 可重新 hold，confirmed 不可逆。請直接輸出一份不超過 180 行、可雙擊開啟的單一 HTML 原型，讓非工程師可自由操作並用引導分頁走過兩條困難流程；每次操作後必須顯示完整狀態。不要加入持久化、測試或正式架構。
載入前 · 0 個 Skill載入後 · 版本已核對再次確認 · 0 個 Skill已確認模型套用 Skill三個環境皆已清理
未載入 Skill1896 tokens · 41328 ms
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>座位保留狀態理解原型</title>
<style>
body{font:16px system-ui,sans-serif;max-width:900px;margin:24px auto;padding:0 16px;color:#222}
button{font:inherit;padding:8px 12px;margin:3px;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
.tabs button[aria-selected="true"]{outline:3px solid #222}
.guide,.snapshot{border:1px solid #999;padding:14px;margin:12px 0}
.seats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.seat{min-height:72px}
.seat.selected{outline:4px solid #222}
.available{background:#fff}.held{background:#ffe89a}
.confirmed{background:#b8edc2}.expired{background:#ddd}
.status{font-weight:700}.message{min-height:24px}
pre{white-space:pre-wrap;margin:0}
small{display:block;color:#555}
</style>
</head>
<body>
<h1>座位保留狀態理解原型</h1>
<p>選擇座位後執行允許的操作。這是狀態驗證原型，逾時由按鈕模擬。</p>
<nav class="tabs" aria-label="困難流程">
<button id="tab1" aria-selected="true" onclick="openFlow(1)">流程一：保留後確認</button>
<button id="tab2" aria-selected="false" onclick="openFlow(2)">流程二：逾時後重保留</button>
</nav>
<section class="guide">
<h2 id="flowTitle"></h2>
<p id="flowText"></p>
<p><strong id="flowProgress"></strong></p>
<button onclick="previousStep()">上一步</button>
<button onclick="nextStep()">下一步</button>
<button onclick="resetFlow()">重設本流程</button>
</section>
<h2>所有座位</h2>
<div id="seats" class="seats"></div>
<section>
<h2>所選座位操作</h2>
<p id="selection">尚未選擇座位</p>
<button id="hold" onclick="transition('held')">保留（hold）</button>
<button id="confirm" onclick="transition('confirmed')">確認（confirm）</button>
<button id="expire" onclick="transition('expired')">模擬逾時（expire）</button>
</section>
<p id="message" class="message" role="status" aria-live="polite"></p>
<section class="snapshot">
<h2>完整狀態（每次操作後更新）</h2>
<pre id="snapshot"></pre>
</section>
<script>
const initial={A1:"available",A2:"available",A3:"held",A4:"confirmed",
B1:"expired",B2:"available",B3:"available",B4:"available"};
const labels={available:"available｜可用",held:"held｜保留中",
confirmed:"confirmed｜已確認",expired:"expired｜已逾時"};
const flows={
1:[
["步驟 1：選一個 available 座位","點選任一狀態為 available 的座位。"],
["步驟 2：建立 hold","按「保留（hold）」，確認完整狀態變成 held。"],
["步驟 3：完成確認","按「確認（confirm）」，確認狀態變成 confirmed 且不可逆。"]
],
2:[
["步驟 1：選一個 available 座位","點選任一狀態為 available 的座位。"],
["步驟 2：建立 hold","按「保留（hold）」，確認狀態變成 held。"],
["步驟 3：讓 hold 逾時","按「模擬逾時（expire）」，確認狀態變成 expired。"],
["步驟 4：重新 hold","按「保留（hold）」，確認 expired 可再次變成 held。"]
]
};
let state={...initial},selected=null,flow=1,step=0,lastAction="尚無操作";
function render(){
seats.innerHTML="";
Object.entries(state).forEach(([id,status])=>{
const b=document.createElement("button");
b.className=`seat ${status}${selected===id?" selected":""}`;
b.innerHTML=`<strong>${id}</strong><small>${labels[status]}</small>`;
b.setAttribute("aria-pressed",selected===id);
b.onclick=()=>selectSeat(id);
seats.appendChild(b);
});
const status=selected?state[selected]:null;
selection.textContent=selected?`${selected}：${labels[status]}`:"尚未選擇座位";
hold.disabled=!selected||!["available","expired"].includes(status);
confirm.disabled=!selected||status!=="held";
expire.disabled=!selected||status!=="held";
const complete=Object.fromEntries(Object.entries(state).map(([id,s])=>[id,{
status:s,allowedActions:allowed(s)
}]));
snapshot.textContent=JSON.stringify({
selectedSeat:selected,
selectedStatus:status,
lastAction,
seats:complete
},null,2);
renderGuide();
}
function allowed(s){
if(s==="available"||s==="expired")return["hold"];
if(s==="held")return["confirm","expire"];
return[];
}
function selectSeat(id){
selected=id;
lastAction=`選擇座位 ${id}`;
message.textContent=`已選擇 ${id}；完整狀態已更新。`;
render();
}
function transition(target){
if(!selected)return;
const from=state[selected];
const valid=(target==="held"&&["available","expired"].includes(from))||
(from==="held"&&["confirmed","expired"].includes(target));
if(!valid){
message.textContent=`不允許 ${from} → ${target}；狀態未改變。`;
lastAction=`拒絕 ${selected}：${from} → ${target}`;
}else{
state[selected]=target;
lastAction=`${selected}：${from} → ${target}`;
message.textContent=`操作完成：${lastAction}。`;
}
render();
}
function openFlow(n){
flow=n;step=0;
tab1.setAttribute("aria-selected",n===1);
tab2.setAttribute("aria-selected",n===2);
renderGuide();
}
function renderGuide(){
const item=flows[flow][step];
flowTitle.textContent=item[0];
flowText.textContent=item[1];
flowProgress.textContent=`流程 ${flow}，第 ${step+1}／${flows[flow].length} 步`;
}
function previousStep(){step=Math.max(0,step-1);renderGuide()}
function nextStep(){step=Math.min(flows[flow].length-1,step+1);renderGuide()}
function resetFlow(){
state={...initial};selected=null;step=0;lastAction=`重設流程 ${flow}`;
message.textContent="已恢復所有初始狀態。";render();
}
render();
</script>
</body>
</html>
已載入 Skill +2925 tokens · 64907 ms
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>座位保留狀態原型</title>
<style>
*{box-sizing:border-box}
body{margin:0;background:#f5f7fa;color:#17202a;font:16px/1.5 system-ui,sans-serif}
main{max-width:820px;margin:auto;padding:32px 20px 60px}
h1{margin:0 0 8px;font-size:28px}
h2{margin:30px 0 12px;font-size:19px}
p{margin:6px 0 16px;color:#52606d}
.card{background:white;border:1px solid #d9e2ec;border-radius:10px;padding:18px}
.state{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{padding:12px;background:#f7f9fc;border-radius:8px}
.label{display:block;color:#697786;font-size:13px}
.value{display:block;margin-top:3px;font-weight:700}
#status{font-size:24px;color:#155eef}
#message.ok{color:#137333}
#message.no{color:#b42318}
.buttons,.tabs,.steps{display:flex;flex-wrap:wrap;gap:9px}
button{border:1px solid #aeb8c4;border-radius:7px;background:white;padding:9px 13px;
color:#17202a;font:inherit;cursor:pointer}
button:hover{border-color:#155eef}
button.primary,.tab.active{background:#155eef;border-color:#155eef;color:white}
button:disabled{cursor:default;opacity:.45}
.note{font-size:14px}
.guide{margin-top:12px}
.guide-panel{display:none}
.guide-panel.active{display:block}
.step{display:flex;gap:12px;padding:11px 0;border-top:1px solid #e6ebf0}
.step:first-of-type{border-top:0}
.step-number{flex:0 0 25px;height:25px;border-radius:50%;background:#e8eef8;text-align:center}
.step.done .step-number{background:#137333;color:white}
.step.current{font-weight:700}
.rules{font-size:14px;color:#52606d}
@media(max-width:560px){.state{grid-template-columns:1fr}}
</style>
</head>
<body>
<main>
<h1>座位保留狀態原型</h1>
<p>用來驗證四種狀態與不可逆規則是否容易理解；這是一次性邏輯原型，不代表最終視覺。</p>
<h2>完整狀態</h2>
<section class="card state" aria-live="polite">
<div class="field"><span class="label">目前狀態</span><span class="value" id="status"></span></div>
<div class="field"><span class="label">現在允許</span><span class="value" id="allowed"></span></div>
<div class="field"><span class="label">上次操作</span><span class="value" id="action"></span></div>
<div class="field"><span class="label">操作結果</span><span class="value" id="message"></span></div>
</section>
<p class="rules">available → held；held → confirmed 或 expired；expired → held；confirmed 不可逆。</p>
<h2>自由操作</h2>
<section class="card">
<div class="buttons">
<button data-action="HOLD">保留座位</button>
<button data-action="CONFIRM">確認座位</button>
<button data-action="EXPIRE">讓保留到期</button>
<button id="reset">重新開始</button>
</div>
<p class="note">按鈕刻意不隱藏；不合法的操作會被拒絕，並再次顯示完整狀態。</p>
</section>
<h2>困難流程引導</h2>
<div class="tabs" role="tablist">
<button class="tab active" data-tab="recover">到期後重新保留</button>
<button class="tab" data-tab="locked">確認後不可逆</button>
</div>
<section class="card guide">
<div class="guide-panel active" id="recover">
<p>觀察到期不是終點：座位可再次保留，然後確認。</p>
<button class="primary start" data-guide="recover">開始此流程</button>
<div class="steps"></div>
</div>
<div class="guide-panel" id="locked">
<p>觀察確認後的任何變更嘗試，都不會改變 confirmed。</p>
<button class="primary start" data-guide="locked">開始此流程</button>
<div class="steps"></div>
</div>
</section>
</main>
<script>
const SeatMachine=(()=>{
const transitions={
available:{HOLD:"held"},
held:{CONFIRM:"confirmed",EXPIRE:"expired"},
expired:{HOLD:"held"},
confirmed:{}
};
const labels={HOLD:"保留座位",CONFIRM:"確認座位",EXPIRE:"讓保留到期"};
function reduce(state,action){
const next=transitions[state.status][action];
return next
? {state:{status:next},accepted:true,message:`已從 ${state.status} 變為 ${next}`}
: {state,accepted:false,message:`${state.status} 不允許「${labels[action]}」`};
}
function allowed(state){return Object.keys(transitions[state.status]);}
return {reduce,allowed,labels};
})();
let state={status:"available"};
let last={action:"尚未操作",message:"等待操作",accepted:true};
let guide=null;
const scenarios={
recover:[
["HOLD","先保留座位：available → held"],
["EXPIRE","讓保留到期：held → expired"],
["HOLD","重新保留：expired → held"],
["CONFIRM","完成確認：held → confirmed"]
],
locked:[
["HOLD","先保留座位：available → held"],
["CONFIRM","確認座位：held → confirmed"],
["EXPIRE","嘗試讓它到期：應被拒絕"],
["HOLD","嘗試再次保留：應被拒絕"]
]
};
function render(){
status.textContent=state.status;
const actions=SeatMachine.allowed(state).map(x=>SeatMachine.labels[x]);
allowed.textContent=actions.length?actions.join("、"):"無（不可逆）";
action.textContent=last.action;
message.textContent=last.message;
message.className="value "+(last.accepted?"ok":"no");
document.querySelectorAll(".guide-panel").forEach(panel=>{
const box=panel.querySelector(".steps");
box.innerHTML="";
scenarios[panel.id].forEach(([type,text],i)=>{
const row=document.createElement("div");
const active=guide?.id===panel.id&&guide.step===i;
row.className="step "+(guide?.id===panel.id&&i<guide.step?"done ":"")+(active?"current":"");
row.innerHTML=`<span class="step-number">${i+1}</span><div>${text}<br></div>`;
const b=document.createElement("button");
b.textContent=SeatMachine.labels[type];
b.disabled=!active;
b.onclick=()=>act(type,true);
row.lastChild.appendChild(b);
box.appendChild(row);
});
});
}
function act(type,fromGuide=false){
const result=SeatMachine.reduce(state,type);
state=result.state;
last={action:SeatMachine.labels[type],message:result.message,accepted:result.accepted};
if(fromGuide&&guide) guide.step++;
render();
}
function reset(message="已回到流程起點"){
state={status:"available"};
last={action:"重新開始",message,accepted:true};
guide=null;
render();
}
document.querySelectorAll("[data-action]").forEach(b=>b.onclick=()=>act(b.dataset.action));
document.querySelector("#reset").onclick=()=>reset();
document.querySelectorAll(".tab").forEach(tab=>tab.onclick=()=>{
document.querySelectorAll(".tab,.guide-panel").forEach(x=>x.classList.remove("active"));
tab.classList.add("active");
document.querySelector("#"+tab.dataset.tab).classList.add("active");
});
document.querySelectorAll(".start").forEach(b=>b.onclick=()=>{
state={status:"available"};
guide={id:b.dataset.guide,step:0};
last={action:"開始引導",message:"已回到 available，請執行第 1 步",accepted:true};
render();
});
render();
</script>
</body>
</html>