56 lines
1.4 KiB
Markdown
56 lines
1.4 KiB
Markdown
# member.ose.tw 前端架構（Vue）
|
||
|
||
## 1. 角色定位
|
||
- 網域：`member.ose.tw`
|
||
- 功能：會員中心前台（管理 users/公司/站台/權限）
|
||
- 注意：密碼流程不在這裡做，自動導 Authentik flow
|
||
|
||
## 2. 技術棧
|
||
- `Vue 3 + Vite`
|
||
- `Element Plus`
|
||
- `Tailwind CSS`
|
||
- `Vue Router`
|
||
- `Pinia`（建議）
|
||
|
||
## 3. 建議目錄
|
||
- `frontend/src/main.ts`
|
||
- `frontend/src/router/`
|
||
- `frontend/src/stores/`
|
||
- `frontend/src/api/`（axios client + modules）
|
||
- `frontend/src/pages/`
|
||
- `users/`
|
||
- `companies/`
|
||
- `sites/`
|
||
- `permissions/`
|
||
- `frontend/src/components/`
|
||
|
||
## 4. 第一版頁面
|
||
- 使用者列表/搜尋
|
||
- 公司列表
|
||
- 站台列表
|
||
- 權限指派（user x scope x module x action）
|
||
|
||
## 5. 權限與登入
|
||
- 透過 Authentik OIDC 登入
|
||
- 前端持有 backend session/token，不直接操作 Authentik admin API
|
||
- 「修改密碼 / 忘記密碼」按鈕導 Authentik 使用者流程頁
|
||
|
||
## 6. API 串接
|
||
- `VITE_API_BASE_URL=https://memberapi.ose.tw`
|
||
- 所有請求帶上必要 auth header
|
||
- 管理操作走 `memberapi` 的 admin 路由
|
||
|
||
## 7. UI/互動規則
|
||
- Element Plus 做表單/表格/對話框
|
||
- Tailwind 做 spacing/layout/快速樣式
|
||
- 權限編輯畫面要清楚顯示：
|
||
- scope_type（company/site）
|
||
- scope_id
|
||
- module
|
||
- action（view/edit）
|
||
|
||
## 8. 第一版不做項目
|
||
- 不做密碼重設畫面
|
||
- 不做複雜儀表板
|
||
- 不做跨系統 SSO 管理 UI
|