Day23 [travel-storage] 真正進入使用後，才發現新專案的破陋不堪阿

/* 刪掉的部分（templates/trip.html） */
/* 手機上在內嵌文件裡往下滑時，頁首收起、文件往上補滿；往上滑再出現 */
.nav,.framepanel{transition:transform .2s ease}
.doc-away .nav,.doc-away .framepanel{transform:translateY(calc(-1 * var(--nav-h)))}
/* ... */

html.ts-tabs .daybar,html.ts-tabs .ntoc{top:0}
/* ... */
.daybar{position:sticky;top:45px;z-index:30;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin:0 -18px;padding:6px 18px;border-bottom:1px solid var(--rule)}

- **固定一層、不隨捲動收起**：頁首固定在頂端；建議行程的日期列、備註的目錄貼在頁首正下方，和頁首合成一層，不做「往下收、往上露」
- **分頁頂端直接是內容**：不放說明文字、去程／回程／住宿摘要；班機寫在指南 `DAYS` 第一天／最後一天的 `flight`，畫在當天最上面
- 旅行頁不放「← 總覽」：旅途中只看當次

const first = tabs.find(t => t.getAttribute('aria-selected') === 'true') || tabs[0];
FIRST_TAB[id] = first.id;
[first, ...tabs.filter(t => t !== first)].forEach(t => NAV.push({ p: id + ':' + t.id, label: t.textContent.trim(), doc: id, tab: t.id }));

/* 很窄的手機：漢堡只留 ☰，日期只留強調那一點的小字，避免日期蓋到漢堡 */
@media (max-width:420px){
  .nav .in{gap:6px}
  #curName{display:none}
  .menubtn{padding:0 12px}
  .dates .pt:not(.hot):not(.now) small{display:none}
}

// 旅行頁不放「← 總覽」：旅途中只看當次，總覽用不到
const homeLink = session.scope === 'site' && path !== '/' && !path.startsWith('/trips/');
return withSession(decorate(res, { homeLink }), env, session);

/* 旅行頁不放「← 總覽」：Worker 已不注入；這裡再藏一次，離線快取裡的舊版頁面也看不到 */
#ts-home{display:none!important}

{
  d:'1/1', w:'四', title:'抵達', stay:'地區一', areas:'地區一', flight:{label:'去程', no:'航班', dep:'桃園 T1 10:50', arr:'機場 14:00'},
  // ...
}

function flightLine(f){
  return `<div class="flight"><span class="fl">✈ ${esc(f.label)}</span><b class="mono">${esc(f.no)}</b>` +
    `<span class="fr">${esc(f.dep)} → ${esc(f.arr)}</span></div>`;
}
// ...
  ${d.flight ? flightLine(d.flight) : ''}
  ${d.areas ? areasLine(d.areas) : ''}

<div class="frow">
  <label class="asel"><span>地區</span><select id="areasel" aria-label="選擇地區"></select></label>
  <button class="fsum" id="fsum" aria-expanded="false" aria-controls="fpanel"></button>
</div>

$('#areasel').innerHTML = '<option value="all">全部</option>' +
  AREAS.map(a => `<option value="${a.id}">${esc(a.short || a.name)}</option>`).join('');

function selectArea(id){
  curArea = AREAS.some(a => a.id === id) ? id : 'all';
  $('#areasel').value = curArea;
  document.querySelectorAll('#areas .area').forEach(a =>
    a.classList.toggle('away', curArea !== 'all' && a.id !== curArea));
  onFilterChange();
}
$('#areasel').addEventListener('change', e => {
  selectArea(e.target.value);
  closeFilter();
  // 選某一區就直接捲到那一區；「全部」回到最上面
  if (curArea === 'all') scrollTo({ top: 0 });
  // ...
});

const tomap = e.target.closest('.tomap');
if (tomap) {
  // 回到這一區的示意圖，亮起這個點
  const m = document.getElementById('it-' + tomap.dataset.map).closest('.area').querySelector('details.amap');
  if (m) { m.open = true; m.scrollIntoView({ block: 'start' }); }
  highlightSpot(tomap.dataset.map);
  return;
}

/* 「回地區」與「Google 地圖」自成一行 */
.item .meta .acts{display:flex;flex-basis:100%;gap:8px;margin-top:3px}

/* 出發前／旅途中／回程：整條色帶，捲動時一眼看出進到下一段 */
.nphase{margin:48px -18px 0;padding:14px 18px;font-family:"Noto Serif TC",serif;font-size:19px;font-weight:700;letter-spacing:.18em;
  color:#fff;background:var(--ph,var(--ink));display:flex;align-items:baseline;gap:10px}
.nphase[data-phase="出發前"]{--ph:var(--sea)}
.nphase[data-phase="旅途中"]{--ph:var(--k-shop)}
.nphase[data-phase="回程"]{--ph:var(--k-night)}

`<p class="nphase" data-phase="${esc(n.phase)}">${esc(n.phase)}<small>${NOTES.filter(x => x.phase === n.phase).length} 節</small></p>`

$('#daybar').addEventListener('click', e => {
  const b = e.target.closest('.day');
  if (!b) return;
  selectDay(+b.dataset.day);
  scrollTo({ top: 0, behavior: 'instant' });   // 從中間換到別天時，回到那天的開頭
});

{
  "dayScroll": 57,
  "dayW": 59,
  "iw": 360,
  "over": [
    "BUTTON.day r=373 1/6二",
    "SPAN.dw r=370 二"
  ],
  "sw": 373
}

.days{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:5px}
.day{appearance:none;border:1px solid var(--rule);background:var(--surface);color:var(--ink);border-radius:7px;
  padding:3px 1px;cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.15;font-family:inherit;min-width:0;overflow:hidden}

- **硬性規定：手機上任何分頁都不能左右滑動**。頁面寬度永遠不能超過螢幕，包括整頁與任何一列（不用 `overflow-x` 捲動列）。格線一律 `repeat(n, minmax(0,1fr))`、子元素加 `min-width:0`；不要用 `white-space:nowrap` 撐寬。改到版面就照「推送前」的寬度檢查做，沒通過不能推

**改到版面（CSS、排列、表格、新元件）時，另外做寬度檢查**：把頁面（或取出的指南）放進 320／360／390／430px 寬的 iframe，建議行程、地區、備註、紀錄四個分頁都量 `document.documentElement.scrollWidth`，不得大於 iframe 寬度，並列出右緣超出畫面的元素（示意圖 SVG 內被裁掉的點不算）。任何一個寬度、任何一頁超出就不能推。

const html=document.documentElement.outerHTML; const res={};
for (const W of [320,360,390,430]) {
 const fr=document.createElement('iframe'); fr.style.cssText=`position:absolute;left:0;top:0;width:${W}px;height:800px;border:0`; document.body.appendChild(fr);
 fr.srcdoc='<!doctype html>'+html; await new Promise(r=>fr.onload=r); await new Promise(r=>setTimeout(r,400));
 const d=fr.contentDocument, w=fr.contentWindow; d.documentElement.classList.add('ts-tabs'); const t={};
 for (const id of ['t-plan','t-areas','t-notes']) { d.getElementById(id).click(); await new Promise(r=>setTimeout(r,80));
   const panel=d.getElementById(id.replace('t-','tab-'));
   t[id]=d.documentElement.scrollWidth+'/'+w.innerWidth+' '+[...panel.querySelectorAll('*')].filter(e=>!e.closest('svg')&&(r=>r.width>0&&r.right>w.innerWidth+1)(e.getBoundingClientRect())).slice(0,3).map(e=>e.tagName+'.'+e.className).join(',');
 }
 // ...
 res[W]=t; fr.remove();
}

Created:     2026-10-03T04:34:14.170Z
Created:     2026-10-03T07:30:02.171Z