S-40 Me

學生端登入與設定設計規格

畫面用途

作為系統的導航樞紐與身分識別中心。

Mepage 🔗 ↗

閱讀完整規格 ↓

內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限

個人中心 / 設定主頁

🎨 Figma: Me_page 🔗

🎯 功能定位

作為系統的導航樞紐與身分識別中心。

• 身分識別：強化學生的等級與積分榮譽感。
• 導航功能：提供所有細節設定（提醒、權限、法規）的清晰入口。
• 帳號管理：確保帳號安全與數據透明。

🧱 畫面結構

• Header: Me ← 標題 (固定)
• Profile Card:
  • [ Avatar ] Display Name
  • Level: EK1
  • ⭐ Total Points: 45,800
• Settings List:
  • [👤] Profile (>) ← S-41
  • [⏰] Learning Reminder (>) ← S-42
  • [🎤] Microphone Permission (>) ← S-43
  • [📄] Terms / Voice Consent (>) ← S-44
• Action: [ Log Out ]
• Bottom Nav: [HOME] [STUDY] [MISSION] [ZULU] [SETTINGS (active)]

設計參考: Profile Card 使用圓角投影設計（Card Surface），視覺上從背景中浮出，強調個人空間。列表 Icon 保持統一的線性風格。

📦 區塊說明

#	區塊	元件	行為/交互	狀態	備註
1	Header	Title	頁面導航標識	靜態	簡潔有力
2	Profile Card	Avatar	點擊跳轉 S-41 修改	Loading / Error	載入失敗時顯示預設吉祥物頭像
3	Profile Card	Level Badge	僅展示	正常	與 A-30 課程體系級別聯動
4	Profile Card	Total Points	僅展示	正常	需與 S-10/S-12 數據即時同步
5	Settings List	Nav Items	點擊跳轉	Normal	每一項應配有直觀的 Icon
6	Action	Log Out	點擊彈窗確認後清除 Token 導向 S-01	Normal	登出確認

🔁 交互流程圖

流程圖

正在載入流程圖…

⚙️ 狀態管理

狀態	觸發條件	畫面表現
Data Refresh	切換至 Me 分頁	背景輕量請求 latest total_points 與 current_level
Permission Status	檢查麥克風權限	「Microphone Permission」副標題動態顯示「Enabled」或「Denied」
Offline	無網路	個人卡片顯示緩存數據，點擊子項目提示「Features unavailable offline」

🔎 邏輯自我檢查

• 數據一致性：總積分必須與 S-10 首頁顯示的數字完全一致。
• 權限聯動：如果學生在 S-43 關閉了麥克風，進入 S-20 時應自動引導回此處或彈出系統權限請求。
• 安全性：修改重要資訊前，應確保有二次驗證流程。

---