僑外生特區 Mockup 文件

模擬頁面摘要

• 功能名稱：僑外生特區（新創專區與熱門新創廠商徵才）
• 使用者角色：求職者（訪客／僑外生）
• 範圍：單一頁面 Mockup，含導航列、主視覺、文字區、廠商橫幅、職缺區（標題、篩選、職缺卡片列表）
• 目標應用：Storybook 僅供預覽，不整合至 main-site / main-web
• 建立日期：2026/02/02

開發進度與設計來源

開發進度

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

設計來源

• Pixso 連結：https://pixso.net/app/design/o3-L8bMaNBZZjcUYQznbUA?item-id=18741:21841

功能概述

僑外生特區為求職者專區頁面，提供：

1. 導航列：Mock 導航列（nav_employee 對應）
2. 新創專區區塊：
   • 專區主視覺（Hero）
   • ERIC 文字區（背景 #E4FDFF，友善雇主 × 新創公司說明）
   • 廠商區橫幅
3. 職缺區：
   • 標題：「熱門新創廠商徵才中」
   • 篩選列：關鍵字搜尋、地區篩選、職務類別
   • 職缺工作卡片列表（7 筆 Mock 資料，可依篩選更新顯示）

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

Business Rules（顯示邏輯）

本頁面包含公司清單與職缺清單。若未來接回真實 API，需遵循以下顯示規則（與公司搜尋頁行為一致）：

說明：即使公司有歡迎外籍人士的職缺，若公司驗證尚未完成，職缺會出現在職缺列表中，但該公司不會出現在公司列表中。此邏輯與「公司搜尋頁：未完成驗證之公司不顯示」保持一致。

Navigation / Storybook Map

• Mockup 元件：storybook/src/mockups/overseas-student-zone-demo.vue
• 無生產環境路由：本 Mockup 僅存在於 Storybook，不新增 main-site / main-web 路由

流程圖

User Flow（使用者流程）

flowchart TD
    A[進入僑外生特區頁面] --> B[瀏覽主視覺與文字區]
    B --> C[捲動至職缺區]
    C --> D[檢視熱門新創廠商徵才標題]
    D --> E[使用篩選：關鍵字／地區]
    E --> F[檢視職缺卡片列表]
    F --> G[點擊職缺卡片]
    G --> H[導向職缺詳情（Mock 無實際導向）]

System Flow（系統流程）

sequenceDiagram
    participant 使用者
    participant Mockup 頁面
    participant Mock 資料

    使用者->>Mockup 頁面: 進入 Storybook 故事
    Mockup 頁面->>Mock 資料: 讀取 Mock 職缺列表
    Mock 資料-->>Mockup 頁面: 回傳 7 筆職缺
    Mockup 頁面-->>使用者: 渲染完整頁面

    使用者->>Mockup 頁面: 輸入篩選關鍵字／地區
    Mockup 頁面->>Mockup 頁面: 前端篩選 Mock 資料
    Mockup 頁面-->>使用者: 更新職缺列表顯示

Navigation Flow（Story 導航）

flowchart LR
    A[Storybook 首頁] --> B[Mockups / 僑外生特區 / 僑外生特區]
    B --> C[預設：僑外生特區完整頁]

Page Skeleton Documentation

頁面結構

1. 導航列（nav_employee）

   • 高度約 93px，白底、底線
   • 文案：「僑外生特區 | Mock 導航列」

2. 新創專區 mockup

   • 專區主視覺：全寬區塊，最小高度約 433px（響應式 280px ～ 433px），漸層背景
   • ERIC 文字區：背景 #E4FDFF，內層 max-width 與 padding，標題與說明文字
   • 廠商區：全寬橫幅區塊，灰底佔位

3. 職缺區

   • 背景 #FAFAFA，內層 max-width 1200px、置中
   • 標題：「熱門新創廠商徵才中」（Inter Bold 36px／Tailwind 等效）
   • 篩選列：關鍵字 input、地區 select，白底卡片樣式
   • 職缺列表：垂直排列，間距 20px，每張卡片：
     • 白底、圓角 10px、陰影 0 3px 6px rgba(0,0,0,0.1)
     • 內容：職缺標題、公司名稱、地點、職缺類型

使用技術與規範

• 樣式：Tailwind CSS，Layout → Size → Font → Color → State 順序
• 響應式：mobile-first，md / lg 斷點
• 元件：純 Vue 3 + Tailwind，無引用 main-site / main-web 元件

Mock Data Schemas

職缺卡片（Job Card）

範例 Mock 資料（7 筆）

• 前端工程師、新創科技股份有限公司、台北市、全職
• 後端開發工程師、創新軟體有限公司、新北市、全職
• 產品經理、數位新創公司、台北市、全職
• UI/UX 設計師、設計新創工作室、台中市、全職
• 資料分析師、數據科技公司、台北市、全職
• 行銷專員、新創行銷團隊、新北市、全職
• 人資專員、友善雇主企業、台北市、全職

篩選邏輯：依關鍵字（title / company）與地區（location）於前端過濾上述 Mock 列表，無 API 呼叫。

Implementation Notes

• Mock 資料僅用於 UI：所有職缺與篩選結果皆來自元件內 Mock 常數，不連接任何 API。
• 不修改生產環境：本 Mockup 僅存在於 Storybook 目錄（storybook/src/mockups/、storybook/src/stories/mockups/overseas-student-zone/），未修改 main-site 或 main-web。
• CRUD 行為：篩選僅影響前端顯示，重新整理 Story 即還原為初始 7 筆；無持久化。
• 設計依據：版面與區塊依 Pixso 設計稿（item-id=18741:21841）之 DSL 結構實作。
• 語系：UI 文案為繁體中文。

API 修改需求說明：動態篩選選單 (Filtered Options)

需求背景

為避免前端篩選出「空集合」，僑外生專區的搜尋下拉選單（地點、職缺類別）必須根據「目前專區內存在的資料」動態產出，而非固定清單。

API 修改方式

建議提供以下任一方式：

1. 專用的篩選元資料（Metadata）API
   回傳專區內實際存在的地點、職缺類別等選項，供前端渲染下拉選單。
2. 擴充現有的職缺列表 API
   在職缺列表回應中附加可用的篩選選項（metadata），或提供 query parameter 僅取得篩選選項。

Next Steps

1. 與設計確認與 Pixso 稿一致（主視覺、廠商區圖片等）。
2. 若未來要接回生產環境：於 main-site 新增路由與頁面，並以真實 API 取代 Mock 資料；需依前述 Business Rules 實作職缺與公司列表的顯示邏輯（公司驗證未完成時，職缺可顯示、公司不顯示）。
3. 可依需求擴充篩選條件（職缺類型、薪資區間等）或分頁。