一、今日目標

延續 Day 10 將原本的 HTML/CSS 逐步轉換成 Angular Component 的學習，這次準備繼續完成智慧醫院管理平台首頁的「快速服務」區塊。

在前一次開發中，我已經開始建立 Header、Hero Component，並了解 Angular Component 的基本結構與使用方式。

但目前首頁仍有其他區塊尚未完成，因此這次希望先專注於快速服務卡片的設計與實作，再逐步完成整個首頁。

本次主要目標：

• 延續既有 Angular 首頁架構。
• 根據 Figma 設計完成快速服務區塊。
• 學習如何使用 HTML 建立服務卡片。
• 練習使用 CSS Flexbox 排列多張卡片。
• 學習調整卡片的寬度、高度與間距。
• 理解 :hover 與 :active 的差異。
• 了解如何將快速服務區塊整合至 Angular 首頁。

二、首頁目前完成到哪裡？

在 Day 9，我開始將 Figma 設計轉換成 HTML/CSS，完成首頁部分基本結構。

到了 Day 10，因為後續希望使用 Angular 開發整個醫院預約系統，因此開始將原本的 HTML/CSS 轉換成 Angular Component。

目前已經初步完成：

1. Header：包含 Logo、導覽列和登入按鈕。
2. Hero：包含首頁標題、介紹文字、預約掛號按鈕及圖片。
3. 快速服務：已經有初步的 HTML/CSS 結構，但還需要繼續調整。

目前的首頁結構大致是：

App
│
├── Header Component
│
├── Hero Component
│
└── Quick Service（持續開發）

這次我希望先完成快速服務區塊，再繼續處理首頁的尋找醫師、最新公告及 Footer。

原本在 Figma 設計時，我比較在意畫面是否符合預期。

但開始使用 Angular 後，我也需要思考：

這個區塊應該怎麼組織 HTML？CSS 應該如何管理？未來如果需要新增服務，是否容易修改？

因此這次除了調整畫面，也希望繼續練習如何建立清楚、容易維護的前端結構。

三、快速服務區塊的設計思考

快速服務區塊主要是讓使用者進入網站後，可以快速找到常用的醫療服務。

例如：

• 預約掛號
• 醫師查詢
• 就醫資訊

這些功能是智慧醫院管理平台的重要入口。

如果所有功能都只放在最上方的導覽列，使用者可能需要花時間尋找。

因此我在 Figma 首頁規劃快速服務卡片，希望透過比較明顯的視覺區塊，讓使用者能直接選擇需要的功能。

1. 為什麼使用卡片設計？

相較於單純的文字連結，卡片可以同時放入：

• 圖示或圖片
• 功能名稱
• 簡短說明
• 操作入口

使用者可以透過卡片快速理解每項服務的用途。

2. 為什麼需要統一卡片尺寸？

如果每張卡片的寬度、高度不同，畫面可能會顯得不整齊。

因此我希望先讓卡片具有一致的尺寸，再透過 Flexbox 控制排列方式。

在 Figma 設計中，快速服務卡片的尺寸約為：

Width：342px
Height：380px

實作時可以先以設計尺寸作為參考，再依照瀏覽器寬度調整。

我也開始理解：

Figma 的固定尺寸可以作為設計參考，但實際網頁還需要考慮不同螢幕寬度，不能只依賴固定的像素值。

四、建立快速服務區塊的 HTML 結構

這次先從 HTML 結構開始。

假設快速服務包含三張卡片，可以先建立：

<section class="quick-service">
    <h2>快速服務</h2>

    <div class="service-list">
        <a href="#" class="service-card">
            <img src="/image/appointment.png" alt="">
            <h3>預約掛號</h3>
            <p>快速預約門診服務</p>
        </a>

        <a href="#" class="service-card">
            <img src="/image/doctor.png" alt="">
            <h3>醫師查詢</h3>
            <p>尋找適合的醫師</p>
        </a>

        <a href="#" class="service-card">
            <img src="/image/info.png" alt="">
            <h3>就醫資訊</h3>
            <p>了解門診及就醫流程</p>
        </a>
    </div>
</section>

這是用來理解結構的範例，實際圖片名稱、內容與連結仍需依照專案調整。

1. 為什麼使用 section？

<section class="quick-service">

section 用來表示網頁中具有特定主題的內容區塊。

例如首頁可能包含：

Home
│
├── Hero
├── Quick Service
├── Doctor Search
└── News

每個區塊都有自己的主題，因此可以使用 section 組織內容。

2. 為什麼使用 div？

<div class="service-list">

div 本身沒有特定的語意，主要用來將多個元素分組，方便進行 CSS 排版。

這裡使用 service-list 包住三張服務卡片，讓 CSS 可以一次控制所有卡片的排列。

3. 為什麼使用 a？

<a href="#" class="service-card">

因為快速服務卡片的主要用途是導覽到其他頁面，所以可以使用 a 元素。

不過目前範例中的 href="#" 只是暫時佔位，並不是正式的功能連結。

等到後續學習 Angular Router 後，可以改成：

<a routerLink="/appointments/new" class="service-card">

這裡的路由只是示範，實際路徑需要配合 app.routes.ts 設定，並在使用該模板的 Component 中引入 RouterLink。

因此目前先完成 HTML/CSS 的結構，後續再加入正式的頁面導覽功能。

五、使用 CSS Flexbox 排列服務卡片

完成 HTML 後，接著需要將三張卡片排列成符合 Figma 設計的樣子。

原本如果沒有設定 CSS，HTML 元素通常會依照預設排版規則顯示。

因此這次主要使用 Flexbox 來控制卡片排列。

1. 使用 display: flex

.service-list {
    display: flex;
}

設定 display: flex 後，直接子元素會成為 Flex Items。

在這個例子中，三張服務卡片就會沿著預設的主軸方向排列。

2. 使用 justify-content

.service-list {
    display: flex;
    justify-content: center;
}

justify-content 用來控制 Flex Items 在主軸方向上的排列方式。

常見的設定包括：

因為快速服務區塊希望整體卡片位於頁面中間，因此可以先使用：

justify-content: center;

3. 使用 gap 控制卡片間距

.service-list {
    display: flex;
    justify-content: center;
    gap: 24px;
}

gap 用來設定 Flex Items 之間的距離。

例如：

gap: 24px;

代表卡片之間保留 24px 的間距。

這次我希望優先使用 gap 控制卡片間距，而不是逐一替每張卡片設定 margin-right。

因為如果未來增加或減少卡片數量，使用 gap 會比較容易維護。

六、設定卡片的尺寸與外觀

完成排列後，接著需要調整每張卡片的大小與樣式。

例如：

.service-card {
    width: 342px;
    min-height: 380px;
    padding: 24px;

    background-color: white;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    text-align: center;
    text-decoration: none;
    color: #34404a;
}

這裡主要練習幾個 CSS 屬性。

1. width 與 min-height

width: 342px;
min-height: 380px;

width 用來控制卡片寬度。

min-height 則代表卡片至少具有指定高度，但如果內容比較多，卡片仍然可以繼續增加高度。

原本我比較習慣直接使用：

height: 380px;

不過如果文字內容增加，固定高度可能讓內容受到限制。

因此可以視實際情況使用 min-height。

2. padding

padding: 24px;

padding 用來控制卡片內容與邊框之間的內距。

如果沒有適當的內距，卡片中的圖片與文字可能會太靠近邊緣。

3. border-radius

border-radius: 20px;

這個屬性可以讓卡片呈現圓角。

圓角大小會影響卡片整體的視覺風格，因此需要依照 Figma 設計調整。

4. box-shadow

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

box-shadow 可以增加卡片的陰影效果。

這裡四個主要參數分別代表：

0       → 水平位移
4px     → 垂直位移
12px    → 模糊半徑
rgba()  → 陰影顏色

透過適當的陰影，可以讓白色卡片和背景產生層次感。

七、加入卡片 Hover 與 Active 效果

完成基本卡片外觀後，我希望使用者將滑鼠移到卡片上時，可以知道這個區塊是可以點擊的。

因此開始練習 CSS 的偽類選擇器。

1. :hover

:hover 主要用來設定滑鼠移到元素上方時的樣式。

例如：

.service-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
}

這裡使用兩個效果：

box-shadow

讓滑鼠移入時的陰影更加明顯。

transform: translateY(-4px)

讓卡片在視覺上向上移動 4px。

這樣可以讓卡片呈現比較明顯的互動回饋。

2. transition

如果直接使用 transform，樣式改變可能會顯得比較突然。

因此可以加入：

.service-card {
    transition: transform 0.2s ease,
                box-shadow 0.2s ease;
}

讓卡片在狀態變化時比較平順。

3. :active

:active 通常表示元素正在被啟用，例如滑鼠按住卡片的期間。

例如：

.service-card:active {
    transform: scale(0.98);
}

這個設定可以讓卡片在按下時稍微縮小。

因此我開始了解：

• :hover：滑鼠移到元素上方時的狀態。
• :active：元素正在被啟用時的狀態。
• transition：控制 CSS 樣式變化的過渡效果。

不過 Hover 與 Active 只能提供視覺回饋，不代表卡片已經具有真正的頁面導覽功能。

後續仍需要透過 Angular Router 設定實際的導覽行為。

八、開始考慮不同螢幕大小

快速服務區塊在 Figma 桌面版設計中，主要以多張卡片並排呈現。

但實際開發時，我也需要考慮：

如果使用者用比較小的螢幕開啟網站，三張卡片是否會超出畫面？

如果每張卡片都固定為 342px，再加上卡片之間的間距，可能在較窄的視窗產生橫向溢出。

因此可以考慮使用：

.service-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
}

其中：

flex-wrap: wrap;

代表當容器寬度不足時，Flex Items 可以換行。

卡片寬度也可以改成：

.service-card {
    width: 342px;
    max-width: 100%;
}

讓卡片在較小的容器中不會超出容器寬度。

這次先理解基本的響應式設計概念，後續首頁完成後，再統一檢查不同螢幕尺寸的排版。

九、將快速服務區塊整合到 Angular

在 Day 10，我已經開始理解 Angular Component 的基本結構。

這次則希望將快速服務區塊延續到目前的 Angular 專案中。

可以考慮建立：

quick-service
├── quick-service.html
├── quick-service.css
└── quick-service.ts

若使用 Angular CLI，可以輸入：

ng generate component quick-service

1. quick-service.ts

例如：

import { Component } from '@angular/core';

@Component({
  selector: 'app-quick-service',
  imports: [],
  templateUrl: './quick-service.html',
  styleUrl: './quick-service.css'
})
export class QuickService {}

這裡的設定與 Day 10 建立 Header、Hero Component 的方式相似。

2. 加入 App Component

如果目前首頁內容仍直接組合在 App Component 中，可以在 app.ts 引入：

import { QuickService } from './quick-service/quick-service';

再加入 Component 的 imports：

imports: [Header, Hero, QuickService]

這裡假設既有的 Header、Hero 都已經正確引入。

接著在 app.html 中使用：

<app-header></app-header>

<main>
    <app-hero></app-hero>
    <app-quick-service></app-quick-service>
</main>

這樣快速服務區塊就可以和 Header、Hero 一樣，成為 Angular 首頁的其中一個 Component。

不過，如果未來使用 Angular Router，首頁的各個區塊也可以改由 Home Component 統一組合。

目前先以既有的專案架構為主，不需要為了建立快速服務而大幅重構整個專案。

十、開發過程中需要注意的問題

這個部分主要整理本次實作時需要檢查的問題，等完成實際開發後，再補上遇到的錯誤與解決過程。

1. 卡片間距與 Figma 不一致

需要檢查：

• 父容器的寬度。
• Flexbox 的排列方式。
• 卡片之間的 gap。
• 卡片本身的 padding。

因為有時候畫面看起來間距不正確，不一定是卡片本身的問題，也可能是父容器的設定造成的。

2. 圖片大小不一致

如果三張卡片的圖片比例不同，可能會影響整體排版。

因此需要統一圖片顯示區域的尺寸，並根據圖片內容選擇合適的 object-fit。

3. 文字無法置中

除了 text-align: center，也需要考慮卡片內部元素的排列方式。

如果文字與圖片需要垂直排列，可以使用：

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

這樣就能控制卡片內部的元素排列。

4. Hover 效果影響版面

使用 transform 時，元素的視覺位置會發生變化。

因此需要檢查卡片之間是否保留足夠的距離，避免 Hover 時與其他卡片產生視覺上的重疊。

5. Angular Component 無法顯示

如果新增 Component 後出現：

NG8001: 'app-quick-service' is not a known element

就需要檢查：

• Component 是否正確建立。
• selector 是否正確。
• 使用該 Component 的 standalone Component 是否已經引入。
• imports 是否包含 QuickService。

這也是延續 Day 10 所學到的 Angular Component 使用關係。

十一、這次最大的學習

這次快速服務區塊的開發，除了練習 HTML/CSS，我也希望進一步理解：

HTML 負責建立內容結構，CSS 負責控制排列與視覺效果，而 Angular Component 負責組織這些內容。

原本使用 HTML/CSS 時，我可能只會思考：

建立卡片
   ↓
調整 CSS
   ↓
完成畫面

開始使用 Angular 後，則會多考慮：

Figma 設計
   ↓
分析頁面區塊
   ↓
規劃 HTML 結構
   ↓
建立 Angular Component
   ↓
使用 CSS 完成版面
   ↓
加入基本互動效果
   ↓
整合到首頁
   ↓
檢查與測試

這也讓我逐漸理解，前端開發不只是讓畫面顯示出來，還需要考慮程式碼是否容易閱讀，以及後續是否方便擴充。

十二、今日學習

本次主要學習：

• 了解快速服務區塊的設計目的。
• 練習使用 section、div、a 組織 HTML。
• 學習使用 Flexbox 排列服務卡片。
• 理解 justify-content、align-items 和 gap。
• 練習設定卡片的寬度、高度與內距。
• 學習 border-radius 和 box-shadow。
• 理解 :hover、:active 與 transition 的差異。
• 初步認識 flex-wrap 與響應式排版。
• 複習 Angular Component 的建立與使用方式。
• 了解如何將不同區塊整合至 Angular 首頁。

十三、AI 協助

這次預計延續之前的 AI 使用方式：

自己理解需求與版面 → GPT 分析 HTML/CSS 與 Angular 概念 → Codex 協助程式碼修改 → 自己進行測試。

主要使用 AI 協助：

• 分析快速服務卡片的 HTML 結構。
• 理解 Flexbox 的排列方式。
• 比較不同 CSS 屬性的效果。
• 協助檢查卡片間距與圖片尺寸。
• 分析 Angular Component 整合方式。
• 解釋 Codex 修改後的程式碼。

我希望 AI 可以協助提升開發效率，但仍然保留自己理解程式碼的過程。

AI 是協助開發的工具，而不是取代理解程式碼的過程。

十四、今日開發流程

檢視 Figma 快速服務設計
          ↓
確認卡片內容與尺寸
          ↓
規劃 HTML 結構
          ↓
使用 Flexbox 排列卡片
          ↓
設定卡片尺寸與外觀
          ↓
加入 Hover / Active 效果
          ↓
整合 Angular Component
          ↓
檢查版面與互動
          ↓
整理開發紀錄

十五、今日成果

本次預計完成智慧醫院首頁的快速服務區塊，並進一步熟悉 Angular Component 與 HTML/CSS 的整合方式。

預期成果包括：

• 完成快速服務卡片的 HTML 結構。
• 使用 CSS Flexbox 完成卡片排列。
• 調整卡片尺寸、間距與外觀。
• 加入基本 Hover 和 Active 效果。
• 將快速服務區塊整合至 Angular 首頁。
• 為後續正式導覽功能保留擴充空間。

成果一：Figma 快速服務設計

（放入 Figma 快速服務區塊截圖）

成果二：Angular 快速服務畫面

（放入實際執行畫面）

成果三：Angular Component 結構

（放入 VS Code 專案目錄截圖）

成果四：互動效果

（可放入滑鼠 Hover 前後的比較圖或 GIF）

十六、下一步

完成快速服務區塊後，首頁還有其他內容需要繼續實作。

下一階段預計處理：

• 首頁尋找醫師區塊。
• 醫師卡片的 HTML/CSS。
• 醫師資訊排列方式。
• 首頁最新公告區塊。
• 後續整合 Footer。

希望先將首頁主要內容完成，再開始學習 Angular Router，逐步建立醫師查詢、醫師詳細資訊、登入與預約掛號等功能頁面。

目前的目標不只是完成靜態網頁，而是希望在後續加入 TypeScript、ASP.NET Core 與 Oracle，讓智慧醫院管理平台真正具備預約掛號與資料管理功能。