昨天我們替微光採集瓶的色票加上了專屬名稱，並讓心情名稱順利顯示在月度色卡與時光相簿中。

但在回頭審視整個頁面時，我發現了兩個需要改善的體驗問題：

1. 儀式感被削弱了：主畫面上放著一個隨時能點擊的「查看本月微光色卡」按鈕。這原本是我在開發與測試階段為了方便檢查成果而留下來的，但在實際使用時，隨手就能點開看色卡，容易沖淡「月底才能封存總結」的期待與神秘感。
2. 畫面垂直過長，需要滾動：隨著時光檢索、調色盤、心情標籤與各類按鈕陸續加入，主畫面的內容逐漸增加。使用者可能必須往下滑動才能找到輸入框與採集按鈕，在操作上有些不便。

今天（Day 27），我們要來做一次「減法設計」——移除臨時按鈕、重整頂部導覽，並壓縮元件間距，讓採集流程更加緊湊流暢。

一、設計思路：把焦點還給核心流程

在動手改 code 之前，我先釐清了主畫面的優先順序。使用者進到這個畫面，最核心的目的只有四個動作：

看見瓶子 ➔ 挑選心情 ➔ 寫下美好 ➔ 放入微光

其他像是「時光相簿」、「時光檢索」，都屬於次級操作，不應該過度佔用瓶身與輸入框之間的空間。

因此我進行三個版面調整：

1. 移除手動查看色卡的按鈕：移除主畫面上的快捷入口，讓月度色卡回歸月底封存與次月首日補領的流程，不再隨時都能從主畫面開啟。
2. 次級入口移至頂部導覽列：將「時光相簿」移到右上角，與左上角的「← 首頁」對齊，讓次要功能集中在頁面頂部。
3. 收合調色盤與標籤高度：將心情名稱與「✎ 自訂名稱」按鈕合併在同一行，減少垂直空間的占用。

二、版面重整與結構調整

1. 頂部導覽列：左右分立

原本的返回按鈕獨立放置，現在將「時光相簿」也收整進來，讓次級操作集中在頂部，瓶身下方不再需要額外放置導覽按鈕。

<!-- 頂部導覽列：左側返回首頁，右側時光相簿 -->
<nav class="top-nav">
  <button class="btn-nav-action" @click="showLanding = true">
    ← 首頁
  </button>
  <button class="btn-nav-action" @click="showAlbum = true">
    時光相簿 ({{ archivedCards.length }})
  </button>
</nav>

這樣一來，使用者可以從頂部進入相簿或返回首頁，而主畫面的視覺重心則能留給瓶身與採集操作。

2. 時光檢索與瓶身微縮

檢索列不再佔用過大的上下邊距，瓶身高度也從 220px 微調為 185px。這樣的尺寸在視覺上依然保有玻璃瓶的輕盈感，同時也為下方的採集元件保留更多空間。

<!-- 緊湊型時光檢索列 -->
<div class="filter-bar">
  <label for="filterDateInput" class="filter-label">檢索：</label>
  <input
    id="filterDateInput"
    type="date"
    v-model="filterDate"
    class="filter-date-input"
  />
  <button
    v-if="filterDate"
    class="btn-reset-filter"
    @click="resetFilter"
  >
    重設
  </button>
</div>

瓶身高度則調整為：

.bottle {
  width: 145px;
  height: 185px;
}

重新分配各個元件的空間，讓瓶子、調色盤與輸入區之間的比例更加協調。

3. 一行式的心情標籤呈現

原本分佔兩行的「當前顏色文字」與「修改心情名稱按鈕」，現在整合進同一個彈性容器，減少額外的垂直空間。

<div class="palette-container">
  <!-- 選色按鈕 -->
  <div class="palette">
    <button
      v-for="color in paletteColors"
      :key="color"
      class="color-dot"
      :class="{ 'is-active': selectedColor === color }"
      :style="{ backgroundColor: color }"
      @click="selectColor(color)"
    ></button>
  </div>

  <!-- 單行呈現：選中文字 + 編輯小按鈕 -->
  <div class="label-info-row">
    <span class="selected-label">{{ labelOf(selectedColor) }}</span>
    <button class="btn-edit-inline" @click="showLabelEditor = true">
      ✎ 自訂名稱
    </button>
  </div>
</div>

透過 display: flex 與 align-items: center，心情名稱和編輯按鈕可以在同一行對齊，不需要各自佔據一整行。

三、CSS 關鍵優化：壓縮垂直間距，改善單屏版面

要讓畫面更緊湊，除了調整個別元件的高度，外層容器的排版與間距也很重要。

1. 外層容器配置

.page-wrap {
  max-width: 460px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 12px 18px 20px;
  box-sizing: border-box;
  background: #0b0f14;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

這裡使用 min-height: 100vh，讓容器至少具有與視窗相同的高度；搭配 box-sizing: border-box，可以讓 padding 計入容器的尺寸計算。

不過，min-height: 100vh 並不代表內容一定不會超出畫面，因此還需要配合瓶身高度、標題間距、檢索列與輸入區的 margin 一起調整。

2. 頂部導覽列：左右推開

.top-nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 10px;
  box-sizing: border-box;
}

.btn-nav-action {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-serif);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 4px 6px;
  transition: color 0.25s ease;
}

.btn-nav-action:hover {
  color: var(--gold);
}

透過 justify-content: space-between，兩個導覽入口分別靠向左右兩側，讓版面更有秩序，也避免它們擠在同一個位置。

3. 單行心情標籤與編輯按鈕

.label-info-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-edit-inline {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-serif);
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.2s ease;
}

.btn-edit-inline:hover {
  color: var(--gold);
}

這裡主要是透過 flex 將兩個元件排列在同一行，並縮小按鈕的 padding，避免不必要的空間占用。

四、首頁垂直置中的留白調整

在調整完採集內頁後，我也回頭檢查了首頁 Hero 區塊。先前首頁內容偏向螢幕上半部，下方留白較多，整體視覺重心不夠平衡。

因此今天也替首頁補上垂直置中規則：

.landing-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - 40px);
  box-sizing: border-box;
  padding: 20px 8px;
}

其中，justify-content: center 負責將首頁內容沿著垂直方向置中，而 min-height 則讓首頁在一般視窗尺寸下保有足夠的高度。

調整後，首頁的標題、三步驟引導與開始按鈕能更集中地呈現在畫面中央，讓整體的視覺風格更加一致。

五、成果展示

1. 更緊湊的採集主畫面

   移除冗餘按鈕並重新分配間距後，主畫面的版面更加緊湊。在目前測試的畫面尺寸下，使用者不需要滾動，就能看到瓶身、調色盤、文字框與採集按鈕，讓整個採集流程更加流暢。

2. 左右分立的頂部導覽

   左側返回首頁、右側時光相簿，功能清楚不搶主視覺焦點。

   

3. 垂直置中的首頁 Hero

   調整首頁的垂直排列方式後，標題、引導步驟與開始按鈕更加集中，改善先前內容偏上的視覺問題。

   

今日小結

有時候，前端開發最重要的一步不是「加功能」，而是學會適時做減法。

移除測試用的按鈕，讓月度色卡回歸月底回顧的儀式；重新調整元件間距與版面配置，則讓使用者能更順暢地完成採集流程。這次的調整讓我體會到，前端開發不只是增加功能，也需要重新檢視既有設計，才能讓整體體驗更加完整。

明日預告

明天（Day 28）將著手實作月底封存後的光珠清空機制。當月度色卡保存至時光相簿後，瓶中的光珠也會一併清空，讓瓶子重新回到乾淨的起點。同時也會處理封存後的日期補漏問題，避免系統再次自動生成白色光珠，確保舊月份的回憶妥善保存，也讓新月份能順利開始！