編輯會員資料 - 國籍與身分種類 Mockup PRD

模擬頁面摘要

功能名稱：編輯會員資料 - 國籍、特殊身份與在台外籍工作身份
使用者角色：求職者（會員）
範圍：單一表單區塊 Mockup，含特殊身份（複選）、居住地區、國籍、在台外籍工作身份（條件顯示）
目標應用：Storybook 僅供預覽，不整合至 main-site / main-web
建立日期：2026/02/03

開發進度與設計來源

開發進度

前端 PR #：TBD / 待開發後補上
後端 PR #：TBD / 待開發後補上

設計來源

Pixso 連結：待補上（原參考 item-id=18731:27372）

功能概述

編輯會員資料區塊為會員帳號設定中的表單區，提供：

特殊身份（選填）：複選框，可多選
- 二度就業
- 原住民
- 身心障礙
- 中高齡就業
- 低收入戶或中低收入戶
- 含 (i) 說明：勾選以下項目，可幫助企業獲得政府僱用獎助，增加面試機會
居住地區（必填）：下拉選單，選擇地區
國籍（必填）：下拉選單，選擇國家
在台外籍工作身份（條件必填）：僅在「居住地區已選擇”台灣地區“」且「國籍已選擇且非台灣」時顯示
- 外國專業人士
- 僑生 / 港澳生 (在學中)
- 外籍留學生 (在學中)
- 僑外生 (畢業尋職中)
- 獲准居留之新住民
- 移工 (留才久用候選人)
- 其他
- 含 (i) 說明：WPORT 顯示名稱、法律分類與聘僱重點

所有資料均為 Mock，不連接真實 API。

拆開特殊身份與工作身份帶來的影響

影響項目	說明
1. 履歷特殊身份	會影響履歷中的特殊身份，需移動到會員資料
2. 找工作 Filter	會影響找工作中的 filter
3. Filter 複選	Filter 會變成可複選
4. 職缺 Filter	職缺 filter 也會更改
5. 找人才 Filter	找人才 filter 也會新增國籍、外籍人士工作種類
6. 既有身份資料	原本身份勾選外籍人士的人要怎樣處理（待確認）
7. 職缺歡迎外國人	原本職缺勾歡迎外國人全勾選（待確認）

Story 標題	路徑	說明
Mockups/帳號設定/編輯會員-國籍與身分種類	`storybook/src/stories/mockups/account/EditMemberNationalityIdentity.stories.ts`	預設：編輯會員資料表單區塊

Mockup 元件：storybook/src/mockupcomponents/MockupEditMemberNationalityIdentity.vue
生產環境路由參考：/account-setting/edit-member（僅供對照，本 Mockup 不修改生產頁面）

流程圖

User Flow（使用者流程）

flowchart TD
    A[進入編輯會員資料區塊] --> B[勾選特殊身份（選填）]
    B --> C[選擇居住地區（必填）]
    C --> D[選擇國籍（必填）]
    D --> E{居住地在台灣且國籍不是台灣？}
    E -->|是| F[選擇在台外籍工作身份（必填）]
    F --> G[完成表單]
    E -->|否| G

System Flow（系統流程）

sequenceDiagram
    participant 使用者
    participant Mockup 元件
    participant Mock 表單狀態

    使用者->>Mockup 元件: 進入 Storybook 故事
    Mockup 元件->>Mock 表單狀態: 初始化 form ref
    Mockup 元件-->>使用者: 渲染表單

    使用者->>Mockup 元件: 選擇居住地區／國籍
    Mockup 元件->>Mockup 元件: clearIdentityTypeWhenHidden
    Mockup 元件->>Mockup 元件: isIdentityTypeVisible 計算
    Mockup 元件-->>使用者: 若符合條件則顯示工作身份下拉

    使用者->>Mockup 元件: 勾選特殊身份／選擇工作身份
    Mockup 元件->>Mock 表單狀態: v-model 更新
    Mockup 元件-->>使用者: 即時反映選擇狀態

flowchart LR
    A[Storybook 首頁] --> B[Mockups / 帳號設定 / 編輯會員-國籍與身分種類]
    B --> C[預設：編輯會員資料表單]

Page Skeleton Documentation

表單區塊結構

區塊標題與說明
- 標題：編輯會員資料
- 說明：填寫完會員基本資料，並完成電子信箱認證，始得啟用會員履歷等功能。
特殊身份（選填）
- 標籤：特殊身份 + (i) 圖示（hover 顯示說明）
- 複選框群組：2 欄 grid，每項為圓角邊框卡片
- 選項：二度就業、原住民、身心障礙、中高齡就業、低收入戶或中低收入戶
居住地區（必填）
- 標籤：居住地區 *
- 下拉選單：選擇地區、台北市、新北市、桃園市、其他縣市
國籍（必填）
- 標籤：國籍 *
- 下拉選單：選擇國家、台灣、日本、美國、越南、印尼、泰國、菲律賓、其他
在台外籍工作身份（條件必填）
- 顯示條件：居住地區已選且國籍已選且國籍 ≠ 台灣
- 標籤：在台外籍工作身份 * + (i) 圖示（hover 顯示法律分類說明）
- 下拉選單：請選擇 + 7 個工作身份選項
頁尾說明
- 此為 Mockup，資料不連線 API，重新整理後還原。

使用技術與規範

樣式：Tailwind CSS，Layout → Size → Font → Color → State 順序
元件：純 Vue 3 + Tailwind，無引用 main-site / main-web 元件
資訊圖示：圓形 (i) 按鈕，hover/focus 顯示 tooltip

Mock Data Schemas

表單狀態（form）

欄位	型別	說明
residence_area_code	string	居住地區代碼
country_code	string	國籍代碼
identity_type	string	工作身份值（僅外籍時使用）
special_identity	string[]	特殊身份複選值陣列

特殊身份選項（MOCK_SPECIAL_IDENTITIES）

value	label
returning_worker	二度就業
indigenous	原住民
disability	身心障礙
mid_older_age	中高齡就業
low_income	低收入戶或中低收入戶

居住地區選項（MOCK_RESIDENCE_OPTIONS）

value	label
”	選擇地區
taipei	台北市
new_taipei	新北市
taoyuan	桃園市
other_tw	其他縣市

國籍選項（MOCK_COUNTRIES）

code	name
TW	台灣
JP	日本
US	美國
VN	越南
ID	印尼
TH	泰國
PH	菲律賓
OTHER	其他

工作身份選項（MOCK_IDENTITY_TYPES）

value	label
foreign_professional	外國專業人士
overseas_hk_macao_student	僑生 / 港澳生 (在學中)
intl_student_enrolled	外籍留學生 (在學中)
intl_student_job_seeker	僑外生 (畢業尋職中)
new_resident_with_residence	獲准居留之新住民
migrant_worker_retention	移工 (留才久用候選人)
other	其他

IDENTITY_GUIDE（工作身份說明用）

每項含 title、legal、summary，對應法律分類與聘僱重點說明。

Implementation Notes

Mock 資料僅用於 UI：所有選項與表單狀態皆來自元件內 Mock 常數，不連接任何 API。
不修改生產環境：本 Mockup 僅存在於 Storybook 目錄，未修改 main-site 或 main-web。
CRUD 行為：表單填寫僅存在元件 state，重新整理 Story 即還原；無持久化。
顯示邏輯：isIdentityTypeVisible = hasResidence && hasCountry && country_code !== 'TW'；國籍未選或為台灣時不顯示工作身份。
語系：UI 文案為繁體中文。

Next Steps

與設計確認與 Pixso 稿一致。
若未來要接回生產環境：
- 於 user package 會員資料編輯頁整合此表單結構
- 將特殊身份自履歷移至會員資料
- 更新找工作、職缺、找人才等頁面的 filter（複選、國籍、外籍工作種類）
確認既有會員資料遷移策略（原本身份勾選外籍人士、職缺歡迎外國人全勾選之處理方式）。

編輯會員資料 - 國籍與身分種類 Mockup PRD

編輯會員資料 - 國籍與身分種類 Mockup PRD

模擬頁面摘要

開發進度與設計來源

開發進度

設計來源

功能概述

拆開特殊身份與工作身份帶來的影響

Navigation / Storybook Map

流程圖

User Flow（使用者流程）

System Flow（系統流程）

Navigation Flow（Story 導航）

Page Skeleton Documentation

表單區塊結構

使用技術與規範

Mock Data Schemas

表單狀態（form）

特殊身份選項（MOCK_SPECIAL_IDENTITIES）

居住地區選項（MOCK_RESIDENCE_OPTIONS）

國籍選項（MOCK_COUNTRIES）

工作身份選項（MOCK_IDENTITY_TYPES）

IDENTITY_GUIDE（工作身份說明用）

Implementation Notes

Next Steps