---
# System prepended metadata

title: 軟體需求文件(SRD)

---

# 軟體需求文件(SRD)

<!-- > 📌 本文件為範本，需依實際專案調整。
> - <span style="color:red">紅字為說明，請刪除</span>
> - <span style="color:blue">藍字為範例，除「接受準則」外皆應修改，並改為黑字(去掉span標籤即可)</span> -->

<!-- --- -->

## 專案資訊
- **專案名稱**：早一點
- **撰寫日期**：2025/11/24
- **發展者**：
01157128 蔡翊宣
01257116 康慈軒
01257126 呂亭儀
01257153 鄭尹宣
01257161 李永聖

---

## 版次變更記錄

| 版次 | 變更項目 | 變更日期 |
|------|----------|----------|
| 0.1 |初版 |2025/10/01|
| 0.2 |User Story Map |2025/10/11|
| 0.3 |Update User Story Map |2025/11/20|
| 0.4 |Update description of wireframe|2025/11/21|
| 1.0 |最終版 |2026/01/03|

---

## 目錄
1. [接受準則 (Acceptance Criteria)](#section1)
2. [系統概述 (System Description)](#section2)
3. [操作概念 (Operational Concepts)](#section3)
4. [使用者故事地圖 (User Story Map)](#section4)
5. [使用者介面分析 (User Interface Analysis)](#section5)
6. [功能需求 (Functional Requirements)](#section6)
7. [非功能需求 (Non-functional Requirements)](#section7)

---

## <span id="section1">接受準則 (Acceptance Criteria of this document)</span>
- Clearly and properly stated（需求需清楚且適當的陳述）
- Complete（需求需完整）
- Consistent with each other（需求之間需維持一致性）
- Uniquely identified（每項需求有明確之識別）
- Appropriate to implement（需求需可被實作）
- Verifiable（需求需可被驗證）

---

## <span id="section2">系統概述 (System Description)</span>
### 系統目標
- 該系統提供北寧路早餐店數位化點餐服務，讓顧客可透過網頁平台進行餐點瀏覽、搜尋、客製化點餐與線上下單，並讓店家能管理菜單、接收訂單、更新營業資訊。
- 系統支援登入帳號（店家／顧客）與免登入點餐模式，提升使用便利性與行銷效率。
### 系統特色
- **多身分登入機制**：支援店家與顧客登入，並可選擇 Google 快速登入。
- **免登入點餐模式**：使用者可直接瀏覽並下單，降低使用門檻。
- **動態商品管理**：店家可即時上架、下架商品，更新價格與照片。
- **訂單追蹤**：顧客可即時查看餐點製作進度，店家可更新訂單狀態。
- **訂單更新通知**：店家收到新訂單和訂單狀態變為「已完成」時，系統會推播通知給使用者。
- **個人化體驗**：登入顧客可設定個人資料、收藏店家或餐點、自定義常用餐點組合。
- **響應式設計**：系統可於手機、平板與桌面裝置上使用。
### 系統框架

---

## <span id="section3">操作概念 (Operational Concepts)</span>

### 登入
使用者（包含顧客和店家）進入系統後的頁面，註冊時需選擇身分為顧客或店家。
系統提供多種登入方式，顧客也可以在不登入帳號的情況下進行點餐，方便不是長期使用的顧客（例如只是剛好在店內用餐）也能夠快速使用本系統。

### 顧客選擇餐廳
顧客可以在系統中找尋自己想吃的餐廳，點選餐廳後將進入該餐廳的菜單頁面進行點餐，同時展示該餐廳的資訊、營業時間等給顧客參考。

### 點餐
在將商品加入購物車時也能夠選擇店家有提供的客製化選項及數量。
下單時能看到自己點的餐點、總金額及新增備註，根據顧客是內用或是外帶也有不同的資訊需要填寫（若為未登入的顧客則需要在下單時填寫自己的手機號碼以便店家聯絡）。

### 收藏及訂單查詢
若你是本系統的會員，你將能夠收藏喜歡的餐廳、商品，並且自定義你的餐點組合！
也能夠在訂單查詢頁面看到你的歷史訂單及它們的狀態。

### 店家管理
使用者為店家時，能夠更新自己的店家資訊、營業時間及菜單內容，如果某商品備貨已不足時，可以隨時更新商品狀態為「已售完」。

### 訂單管理
店家可同時瀏覽內用及外帶訂單，並更新它們的狀態。

---

## <span id="section4">使用者故事地圖 (User Story Map)</span>

### 公告營業資訊
- **代號** :BF00-SHOP_STATE
- **故事** :作為一個早餐店的老闆，我希望可以在我的店的頁面上顯示基本資訊，及更新最新消息。
- **註記** :
- 基本資訊包含營業時間、店家地址等。
- **測試方法** :
- 店家基本資訊應正確顯示。
- 更新最新消息後，應在店家的頁面上顯示。
- **MVP:** 公告營業資訊

### 管理店內菜品
- **代號** :BF01-ADD
- **故事** :作為早餐店的老闆，我希望可以展示店內所有菜品，包括價格、照片、說明，這樣我可以幫助顧客了解菜品詳細資訊，作為點餐的參考。
- **註記** :
- 菜品說明包含銷量。
- 可以依照銷售量排行，方便顧客參照。
- **測試方法** :
- 確認價格顯示正確。
- 圖文相符。
- 顯示銷量正確，e.g. 500+。
- **MVP:** 公告店內菜品

### 接受訂單
- **代號** :BF03-DECIDE
- **故事** :作為一個早餐店的老闆，我希望可以在收到客人的點單時決定是否接受，並更新訂單狀態，以便我檢查目前所有的訂單狀態。
- **測試方法** :
- 選擇是/否接受訂單後應正確顯示。
- **MVP:** 決定是否接受訂單

### 更新訂單狀態
- **代號** :BF03-UPDATE_STATE
- **故事** :作為一個早餐店的老闆，我希望可以更新訂單狀態，以便我管理目前所有的訂單狀態。
- **註記** :
- 訂單狀態可手動調整為已接單、已完成等等。
- **測試方法** :
- 更改訂單狀態後，當前訂單狀態應正確顯示。
- **MVP:** 更新訂單狀態

### 商品名稱搜尋
- **代號** :BF04-SEARCH
- **故事** :作為一個點餐中的顧客，我希望我能用搜尋功能快速找到我決定吃的早餐，以便節省時間。
- **註記** :
- 可直接在搜尋結果的頁面加入品項到購物車。
- **測試方法** :
- 若無搜尋結果則應提醒使用者。
- 搜尋內容和搜尋結果應相符。
- **MVP:** 依輸入名稱做商品搜尋

### 商品瀏覽
- **代號** :BF05-BROWSE
- **故事** :身為顧客我想要瀏覽餐廳資訊和店內所有品項，以便我決定要吃甚麼。
- **註記** :
- 確認要點的項目在使用者點選後，能顯示至購物車。
- **測試方法** :
- 沒有選擇數量時有預設數量為0。
- 測試選擇的品項有正確被納入購物車裡。
- **MVP:** 瀏覽店內所有品項和相關資訊

### 商品客製化
- **代號** :BF06-CUSTOMIZE
- **故事** :作為一個點餐中的顧客，我希望我可以對我選的餐點作客製化，讓我吃得更爽。
- **註記** :
- 品項頁面可選數量和客製化項目。
- **測試方法** :
- 勾選客製化項目後應可正確加進購物車。
- **MVP:** 選擇項目數量與客製化

### 購物車
- **代號** :BF07-CART
- **故事** :身為點餐中的顧客，我想要在購物車看到我總共點了甚麼與總價格，以便我核定品項或新增/移除不想要的品項。
- **註記** :
- 要顯示每個單品/套餐價格和總價。
- **測試方法** :
- 新增/移除品項後，該品項在明細中應該出現/消失。
- 計算總價時應正確加總總額。
- **MVP:** 查看/更新購物車品項、數量、價錢

### 下單設定
- **代號** :BF08-SET
- **故事** :身為想吃早餐的顧客，我希望可以設定取餐時間，或者在內用時設定桌號後送出我的訂單。
- **註記** :
- 若外帶則設定取餐時間，內用則設定桌號。
- 下單前顯示訂單明細。
- **測試方法** :
- 設定成功時應顯示取餐時間/桌號。
- 明細應和最新版本的訂單內容相同。
- **MVP:** 確認訂單明細後送出、設定取餐時間/桌號

### 追蹤訂單
- **代號** :BF09-TRACE
- **故事** :作為一個快要餓瘋、想吃早餐的顧客，我希望能夠隨時追蹤我的訂單狀態，以讓我了解餐點狀況。
- **註記** :
- 訂單狀態為老闆設定。
- **測試方法** :
- 訂單狀態應在下單後顯示在客人的頁面上。
- 顯示的訂單狀態應和老闆設定的最新狀態同步。
- **MVP:** 可追蹤訂單狀態

### 登入之顧客
- **代號** :BF010-LOGIN_GUEST
- **故事** :作為一個已登入的顧客，我希望比起沒登入的顧客，我可以自定義個人資訊，以及收藏喜好的店家或餐點，和自定義常用餐點組合，以便我更直覺無腦的點餐。
- **註記** :
- 個人資訊包含用戶名、頭貼等。
- 直接點選收藏的店家/餐點可以直接跳轉到該店/餐點。
- 自定義的組合可在對應的早餐店選擇，選擇後一鍵加入該組合中所有品項。
- **測試方法** :
- 更新個人資訊後應正確顯示最新版本
- 新增/移除收藏的店家或餐點後，收藏清單應及時更新
- 選擇自定義組合後，加入到購物車的品項應正確
- **MVP:** 收藏喜好、自定義常用餐點組合

---

## <span id="section5">使用者介面分析 (User Interface Analysis)</span>

### 顧客
此部分展示顧客端的操作頁面設計，包含登入、瀏覽店家、點餐至結帳的完整步驟
圖中標示為紅色的元件（如頭像、加入收藏按鈕），代表僅有已登入的顧客才會顯示或能使用的功能

1. 登入頁面：使用者進入系統的首頁，提供身分驗證與進入系統的入口
- 帳號密碼輸入：提供文字輸入框讓使用者輸入帳號與密碼
- 身分選擇：設有按鈕讓使用者選擇登入身分為「顧客」或「店家」
- 功能按鈕：包含「註冊」、「登入」及「忘記密碼」功能
- 第三方登入：支援 Google 與 Facebook 快速登入按鈕
- 訪客模式：提供「在不登入帳號的情況下點餐」連結，允許未註冊使用者直接進入主頁面。

2. 顧客主頁面：顧客登入後的主要瀏覽頁面，用於尋找並選擇早餐店
- 個人頭像：顯示使用者頭像，點擊可進入個人設定頁面
- 搜尋功能：提供「搜尋餐廳」輸入框，可依關鍵字查找店家
- 店家分類：依據餐點類型進行區塊分類，如「中式」、「西式」等
- 店家列表：以卡片形式展示，每張卡片包含店家圖片、店家名稱及評分/熱度條。點擊卡片即可進入該店家的點餐頁面

3. 餐廳頁面：展示特定店家的詳細資訊與完整菜單
- 店家資訊區：顯示店家名稱、詳細資訊（地址、電話）及營業時間
- 功能按鈕：右上角提供「加入收藏」按鈕，供已登入顧客收藏喜愛的店家
- 導覽功能：右上角設有「購物車」按鈕及個人頭像
- 商品搜尋：提供該店內的「搜尋商品」輸入框
- 菜單展示：依餐點類別條列商品，每項商品顯示圖片、名稱及價格

4. 商品頁面：點擊特定餐點後進入的詳情頁，供顧客進行客製化選擇
- 商品資訊：顯示大張商品圖片、餐點名稱及價格
- 收藏功能：圖片旁設有「加入收藏/自訂義組合」按鈕（僅限已登入顧客）
- 客製化選項：提供勾選框，讓顧客選擇客製化需求
- 數量調整：提供加減按鈕與數字輸入框，調整購買數量
- 加入購物車：底部顯示即時計算的「小計金額」與「加入購物車」按鈕

5. 購物車頁面與下單頁面：顧客確認訂單內容並填寫用餐資訊的結帳頁面
- 訂單明細：列出已加入購物車的餐點，包含圖片、名稱、客製化描述及小計金額，每項商品皆提供數量調整與「刪除餐點」按鈕
- 備註欄位：提供文字輸入框填寫整筆訂單的備註事項
- 用餐資訊設定：
- 內用：選擇內用需輸入「桌號」
- 外帶：選擇外帶需設定「預計取餐時間」
- 結帳操作：顯示訂單總金額，提供「選擇支付方式」按鈕，確認無誤後點擊「前往結帳」完成下單

### 顧客個人化頁面
此部分展示已登入顧客點擊右上角頭像後，可進入的三大個人化功能頁面，包含收藏管理、自訂套餐組合以及歷史訂單查詢
1. 個人化頁面 - 收藏店家與餐點 ：整合個人基本資料與收藏清單的頁面
- 頭像與導覽：左上角為返回按鈕，中間顯示使用者頭像
- 聯絡電話：提供文字輸入框，允許使用者查看或修改聯絡電話
- 選單：右上角設有系統選單按鈕
- 收藏店家區塊：以橫向捲動方式展示顧客收藏的店家卡片（顯示店家圖片、店家名稱）
- 收藏餐點區塊：以橫向捲動方式展示顧客收藏的個別餐點卡片（顯示餐點圖片、名稱、金額）
- 登出功能：頁面最底部提供「登出」按鈕

2. 個人化頁面 - 自訂餐點組合：讓顧客建立與管理常用的餐點組合，以便快速下單
- 組合資訊卡片：每個自訂組合顯示為一個獨立區塊
- 摘要資訊：包含「餐點組合名稱」、「店家名稱」、「組合內容摘要」及「總金額」
- 一鍵下單：卡片右側設有「加入購物車」按鈕，可將整組餐點直接加入購物車
- 組合內容明細：在卡片下方列出該組合內的具體餐點（圖片、名稱、金額）
- 編輯功能：每個餐點圖片上方設有「X」按鈕，允許使用者將特定餐點從組合中移除

3. 訂單查詢頁面：顯示顧客的歷史訂單記錄與當前訂單狀態
- 訂單列表：依時間順序排列的訂單卡片
- 識別資料：訂單編號、成單時間
- 店家資訊：店家名稱
- 取餐方式：顯示「內用（桌號）」或「外帶（預計取餐時間）」
- 餐點內容：列出該筆訂單購買的品項
- 金額與備註：顯示訂單總金額及顧客備註事項
- 訂單狀態：顯示目前的處理進度（如：已送出訂單、已接單、製作中、已完成、已取消）

### 店家
此部分展示店家登入後的後台管理功能，包含基本資訊維護、菜單架構管理、餐點細節設定以及即時訂單處理流程

1. 店家管理頁面 - 店家資訊管理：店家編輯自身基本資料與營業時間配置的頁面
- 店家頭像：圓形區塊顯示目前頭像，點擊可上傳或更換照片
- 資訊輸入：提供文字輸入框修改「店家名稱」與「店家資訊」
- 營業時間設定：可針對每日設定起始與結束時間，並支援每日多個時段設定
- 系統功能：右上角設有功能選單，右下角提供「登出」按鈕

2. 店家管理頁面 - 菜單管理：店家總覽並管理店內所有販售商品的頁面
- 功能操作列：頂部提供「新增分類」與「新增餐點」按鈕，用於擴充菜單內容
- 分類展示區：依據自訂分類分區塊展示商品
- 商品卡片：每項商品以卡片形式呈現，包含圖片、名稱及金額
- 狀態控制：卡片右側提供「已售完」標籤/開關，供店家即時標示缺貨狀態
- 刪除商品：卡片右上角設有「X」按鈕，可直接移除該項商品

3. 店家管理頁面 - 餐點管理：新增新商品或編輯現有商品詳細內容的頁
- 商品圖片上傳：左側大型方塊區域用於上傳或預覽餐點圖片
- 商品基本資料：右側輸入框可填寫「餐點名稱」與「餐點金額」
- 商品分類歸屬：提供「加入分類」按鈕，設定該商品屬於哪個菜單類別
- 新增客製化選項：允許店家自訂顧客點餐時的可選項目
- 儲存：右下角提供「儲存」按鈕以完成編輯

4. 店家管理頁面 - 訂單管理：店家接收與處理即時訂單的操作中心
- 分流檢視：介面分為左右兩大欄位，分別顯示「內用」與「外帶」訂單
- 訂單卡片詳情：
- 識別標示：顯示內用「桌號」或外帶「預計取餐時間」
- 內容明細：列出該筆訂單的所有餐點項目
- 款項資訊：顯示訂單總金額及顧客備註
- 訂單狀態流程：每張卡片底部設有狀態切換按鈕，店家可依製作進度點擊更新

---

## <span id="section6">功能需求 (Functional Requirements)

詳細連結：[功能需求表格](https://docs.google.com/document/d/190YvbUXMwPD3rOb_eufJa_e0BKXiN-L1VPSGMTF8Umo/edit?tab=t.0)



## <span id="section7">非功能需求 (Non-functional Requirements)</span>
<html>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<style type="text/css">
ol {
margin: 0;
padding: 0;
}
table td,
table th {
padding: 0;
}
.c8 {
border-right-style: solid;
padding: 5pt 5pt 5pt 5pt;
border-bottom-color: #000000;
border-top-width: 1pt;
border-right-width: 1pt;
border-left-color: #000000;
vertical-align: top;
border-right-color: #000000;
border-left-width: 1pt;
border-top-style: solid;
background-color: #c9daf8;
border-left-style: solid;
border-bottom-width: 1pt;
width: 395.2pt;
border-top-color: #000000;
border-bottom-style: solid;
}
.c15 {
border-right-style: solid;
padding: 5pt 5pt 5pt 5pt;
border-bottom-color: #000000;
border-top-width: 1pt;
border-right-width: 1pt;
border-left-color: #000000;
vertical-align: top;
border-right-color: #000000;
border-left-width: 1pt;
border-top-style: solid;
background-color: #fff2cc;
border-left-style: solid;
border-bottom-width: 1pt;
width: 447pt;
border-top-color: #000000;
border-bottom-style: solid;
}
.c2 {
border-right-style: solid;
padding: 5pt 5pt 5pt 5pt;
border-bottom-color: #000000;
border-top-width: 1pt;
border-right-width: 1pt;
border-left-color: #000000;
vertical-align: top;
border-right-color: #000000;
border-left-width: 1pt;
border-top-style: solid;
background-color: #fff2cc;
border-left-style: solid;
border-bottom-width: 1pt;
width: 65.2pt;
border-top-color: #000000;
border-bottom-style: solid;
}
.c4 {
border-right-style: solid;
padding: 5pt 5pt 5pt 5pt;
border-bottom-color: #000000;
border-top-width: 1pt;
border-right-width: 1pt;
border-left-color: #000000;
vertical-align: top;
border-right-color: #000000;
border-left-width: 1pt;
border-top-style: solid;
background-color: #fff2cc;
border-left-style: solid;
border-bottom-width: 1pt;
width: 51.8pt;
border-top-color: #000000;
border-bottom-style: solid;
}
.c6 {
border-right-style: solid;
padding: 5pt 5pt 5pt 5pt;
border-bottom-color: #000000;
border-top-width: 1pt;
border-right-width: 1pt;
border-left-color: #000000;
vertical-align: top;
border-right-color: #000000;
border-left-width: 1pt;
border-top-style: solid;
border-left-style: solid;
border-bottom-width: 1pt;
width: 51.8pt;
border-top-color: #000000;
border-bottom-style: solid;
}
.c17 {
border-right-style: solid;
padding: 5pt 5pt 5pt 5pt;
border-bottom-color: #000000;
border-top-width: 1pt;
border-right-width: 1pt;
border-left-color: #000000;
vertical-align: top;
border-right-color: #000000;
border-left-width: 1pt;
border-top-style: solid;
border-left-style: solid;
border-bottom-width: 1pt;
width: 56.2pt;
border-top-color: #000000;
border-bottom-style: solid;
}
.c13 {
border-right-style: solid;
padding: 5pt 5pt 5pt 5pt;
border-bottom-color: #000000;
border-top-width: 1pt;
border-right-width: 1pt;
border-left-color: #000000;
vertical-align: top;
border-right-color: #000000;
border-left-width: 1pt;
border-top-style: solid;
border-left-style: solid;
border-bottom-width: 1pt;
width: 395.2pt;
border-top-color: #000000;
border-bottom-style: solid;
}
.c21 {
border-right-style: solid;
padding: 5pt 5pt 5pt 5pt;
border-bottom-color: #000000;
border-top-width: 1pt;
border-right-width: 1pt;
border-left-color: #000000;
vertical-align: top;
border-right-color: #000000;
border-left-width: 1pt;
border-top-style: solid;
border-left-style: solid;
border-bottom-width: 1pt;
width: 54.8pt;
border-top-color: #000000;
border-bottom-style: solid;
}
.c5 {
border-right-style: solid;
padding: 5pt 5pt 5pt 5pt;
border-bottom-color: #000000;
border-top-width: 1pt;
border-right-width: 1pt;
border-left-color: #000000;
vertical-align: top;
border-right-color: #000000;
border-left-width: 1pt;
border-top-style: solid;
border-left-style: solid;
border-bottom-width: 1pt;
width: 273.8pt;
border-top-color: #000000;
border-bottom-style: solid;
}
.c9 {
border-right-style: solid;
padding: 5pt 5pt 5pt 5pt;
border-bottom-color: #000000;
border-top-width: 1pt;
border-right-width: 1pt;
border-left-color: #000000;
vertical-align: top;
border-right-color: #000000;
border-left-width: 1pt;
border-top-style: solid;
border-left-style: solid;
border-bottom-width: 1pt;
width: 65.2pt;
border-top-color: #000000;
border-bottom-style: solid;
}
.c1 {
color: #000000;
font-weight: 400;
text-decoration: none;
vertical-align: baseline;
font-size: 11pt;
font-family: "Arial";
font-style: normal;
}
.c16 {
padding-top: 0pt;
padding-bottom: 0pt;
line-height: 1.15;
orphans: 2;
widows: 2;
text-align: left;
}
.c10 {
padding-top: 0pt;
padding-bottom: 0pt;
line-height: 1;
text-align: center;
}
.c11 {
border-spacing: 0;
border-collapse: collapse;
margin-right: auto;
}
.c0 {
padding-top: 0pt;
padding-bottom: 0pt;
line-height: 1;
text-align: left;
}
.c22 {
max-width: 451.4pt;
padding: 72pt 72pt 72pt 72pt;
}
.c3 {
height: 0pt;
}
.c7 {
height: 16.4pt;
}
.c14 {
height: 21pt;
}
.c18 {
background-color: #ffffff;
}
.c12 {
height: 11pt;
}
.c19 {
background-color: #c9daf8;
}
.c20 {
background-color: #fff2cc;
}
.title {
padding-top: 0pt;
color: #000000;
font-size: 26pt;
padding-bottom: 3pt;
font-family: "Arial";
line-height: 1.15;
page-break-after: avoid;
orphans: 2;
widows: 2;
text-align: left;
}
.subtitle {
padding-top: 0pt;
color: #666666;
font-size: 15pt;
padding-bottom: 16pt;
font-family: "Arial";
line-height: 1.15;
page-break-after: avoid;
orphans: 2;
widows: 2;
text-align: left;
}
li {
color: #000000;
font-size: 11pt;
font-family: "Arial";
}
p {
margin: 0;
color: #000000;
font-size: 11pt;
font-family: "Arial";
}
h1 {
padding-top: 20pt;
color: #000000;
font-size: 20pt;
padding-bottom: 6pt;
font-family: "Arial";
line-height: 1.15;
page-break-after: avoid;
orphans: 2;
widows: 2;
text-align: left;
}
h2 {
padding-top: 18pt;
color: #000000;
font-size: 16pt;
padding-bottom: 6pt;
font-family: "Arial";
line-height: 1.15;
page-break-after: avoid;
orphans: 2;
widows: 2;
text-align: left;
}
h3 {
padding-top: 16pt;
color: #434343;
font-size: 14pt;
padding-bottom: 4pt;
font-family: "Arial";
line-height: 1.15;
page-break-after: avoid;
orphans: 2;
widows: 2;
text-align: left;
}
h4 {
padding-top: 14pt;
color: #666666;
font-size: 12pt;
padding-bottom: 4pt;
font-family: "Arial";
line-height: 1.15;
page-break-after: avoid;
orphans: 2;
widows: 2;
text-align: left;
}
h5 {
padding-top: 12pt;
color: #666666;
font-size: 11pt;
padding-bottom: 4pt;
font-family: "Arial";
line-height: 1.15;
page-break-after: avoid;
orphans: 2;
widows: 2;
text-align: left;
}
h6 {
padding-top: 12pt;
color: #666666;
font-size: 11pt;
padding-bottom: 4pt;
font-family: "Arial";
line-height: 1.15;
page-break-after: avoid;
font-style: italic;
orphans: 2;
widows: 2;
text-align: left;
}
</style>
<p class="c16">
<span class="c1"></span>
</p>
<table class="c11">
<tr class="c3">
<td class="c21 c19" colspan="1" rowspan="1">
<p class="c10">
<span class="c1">編號</span>
</p>
</td>
<td class="c8" colspan="1" rowspan="1">
<p class="c10">
<span class="c1">效能需求說明</span>
</p>
</td>
</tr>
<tr class="c3">
<td class="c21" colspan="1" rowspan="1">
<p class="c0">
<span class="c1">PR-001</span>
</p>
</td>
<td class="c13" colspan="1" rowspan="1">
<p class="c0">
<span class="c1">系統保證100人以下活動正常運作</span>
</p>
</td>
</tr>
<tr class="c3">
<td class="c21" colspan="1" rowspan="1">
<p class="c0">
<span class="c1">PR-002</span>
</p>
</td>
<td class="c13" colspan="1" rowspan="1">
<p class="c0">
<span class="c1">系統所有功能的響應在5秒內回應</span>
</p>
</td>
</tr>
<tr class="c3">
<td class="c21" colspan="1" rowspan="1">
<p class="c0">
<span class="c1">PR-003</span>
</p>
</td>
<td class="c13" colspan="1" rowspan="1">
<p class="c0">
<span class="c1">使用 SSL 憑證</span>
</p>
</td>
</tr>
</table>
<p class="c16 c12">
<span class="c1"></span>
</p>
</body>
</html>

---