# C6 — Implementation Plan

> 對應 design：[design-C6.md](design-C6.md)
> 級別：小（FE-only）
> 預估工時：FE 1 天

---

## Pre-flight 驗證

```bash
cd ~/Projects/Billows/Audit-Manager/compliance-manager-fe

# 1. 找專案建立 / 編輯表單檔
find src/views/project -name "*.vue" | xargs grep -l "audit_systems\|devices\|資訊系統\|受評範圍" | head

# 2. 找專案詳情 / 規劃頁
find src/views -name "*.vue" -path "*project*" | head -10

# 3. 找列表頁
find src/views -name "*ProjectList*" -o -name "*ProjectsView*" | head

# 4. 確認 ProjectService API call payload
grep -rn "audit_systems\|devices" src/service/ src/stores/ | head -10

# 5. 確認 C4 + C5 已準備好
# C4 BE schema 已 ship
# C5 SSP tab deep link `?tab=ssp&section=scope` 已實作
```

---

## 任務清單

### T1 — 專案建立表單拿掉受評範圍 section（FE）

**檔案**（pre-flight 確認）：`src/views/project/CreateProject*.vue` 或對應 dialog

**動作**：
- 拿掉 `<DevicesPicker>` / `<InfoSystemsPicker>` section（含 imports）
- 拿掉對應 form state（`selectedDevices`, `selectedAuditSystems`）
- form submit payload 內拿掉 `devices` / `audit_systems` 兩個 fields
- 表單最下方加 hint 文字：`$t('lang.project_create.hint_scope_in_ssp')`

**Commit message**：`fix(project-create): C6 拿掉受評範圍 section + 加引導文案`

---

### T2 — 專案編輯表單拿掉受評範圍 section（FE）

**檔案**：`src/views/project/EditProject*.vue`

**動作**：同 T1

**Commit message**：`fix(project-edit): C6 拿掉受評範圍 section`

---

### T3 — 專案詳情頁範圍 card 改 readonly + 引導 link（FE）

**檔案**：`src/views/project/ProjectDetail*.vue` 或 `Planning*.vue`

**動作**：
- 找原本「受評範圍」card / accordion
- 拿掉編輯按鈕 + inline 編輯邏輯
- 改成顯示「設備 X / 資訊系統 Y / 外部利用 Z」摘要
- 加「前往 SSP 編輯」button → tab 切換到 SSP（emit event 或 router push with query）

**Deep link 整合**：
```javascript
function navigateToSspScope() {
  router.push({
    name: 'project-planning',
    params: { project_uid },
    query: { tab: 'ssp', section: 'scope' }
  })
}
```

**Commit message**：`fix(project-detail): C6 受評範圍 card 改 readonly + 引導 link 跳 SSP tab`

---

### T4 — 列表頁設備數 / 系統數 column 確認（FE）

**檔案**：`src/views/project/ProjectList*.vue`

**動作**：
- 確認 column 仍顯示 device / system count
- 資料源由 Response 內 `devices.length` / `audit_systems.length` 推算（C3 已改 derived）
- 若 columns 用的是其他欄位（如 dto.device_count 之類），確認該欄位仍正常

**Commit message**（若需改）：`tweak(project-list): C6 設備數 / 系統數 column 確認資料源`

---

### T5 — i18n 文案

**檔案**：
- `src/config/locales/i18n/zh-tw/project.json`
- `src/config/locales/i18n/en/project.json`

**新增 key**（對齊 design-C6.md §4.2）：
```json
{
  "project_create": {
    "hint_scope_in_ssp": "建立專案後，請至「專案規劃 → SSP」頁籤設定受評範圍（設備 / 資訊系統 / 外部利用服務）"
  },
  "project_detail": {
    "scope_card_title": "受評範圍",
    "scope_card_summary": "設備 {deviceCount} 項 / 資訊系統 {systemCount} 項 / 外部利用 {leveragedCount} 項",
    "scope_card_action": "前往 SSP 編輯",
    "scope_card_empty": "尚未設定範圍"
  }
}
```

英文版對應翻譯。

**Commit message**：`feat(i18n): C6 新增專案受評範圍引導文案`

---

### T6 — store / service cleanup（FE）

**檔案**：
- `src/stores/projectStore.js`（或對應）
- `src/service/ProjectService.js`

**動作**：
- 拿掉 `selectedDevices` / `selectedAuditSystems` state（如果是 store 的話）
- API call signature 簡化（不送 devices / audit_systems）
- 測試（如果有 Vitest unit test）同步更新

**Commit message**：`refactor(project-store): C6 移除 device / audit_system 建立流程 state`

---

### T7 — Changelog (FE)

**檔案**：FE repo `docs/changelog/YYYY-MM-DD-feat-project-scope-moved-to-ssp.md`

```markdown
---
type: feat
breaking: false
modules: [project-ui]
---

## 需求說明
C6：拿掉專案設定 UI 內的「受評範圍」section（設備 / 資訊系統 picker），改在 SSP tab 維護。
配合 BE C4 schema 改動 + C5 SSP tab 上線。

## 變更範圍
### FE
- 專案建立 / 編輯表單拿掉 DevicesPicker + InfoSystemsPicker
- 專案詳情頁範圍 card 改 readonly + 「前往 SSP 編輯」link
- store / service 拿掉相關 state
- i18n 新增引導文案

## UX 差異
- 建立專案表單：少一個 section（受評範圍）+ 表單底部加 hint
- 詳情頁範圍 card：不能 inline 編輯，點按鈕跳 SSP tab
- 列表頁：顯示 derived 後的設備數 / 系統數
```

---

## 測試規格

| 測試 | 內容 |
|------|------|
| Manual smoke | 建專案 → 不選範圍 → 建立成功 → 看到底部 hint |
| Manual smoke | 進詳情頁 → 看到「受評範圍 0/0/0」+ 引導 link |
| Manual smoke | 點引導 link → 跳到 SSP tab + 自動展開 scope section |
| Manual smoke | 編輯專案 → 看不到「受評範圍」section |
| Vitest (if exists) | ProjectCreate 表單 API payload 內無 devices / audit_systems |

---

## 完成標準（DoD）

- [ ] 建立表單拿掉 section + 加 hint
- [ ] 編輯表單拿掉 section
- [ ] 詳情頁 card 改 readonly + 引導 link
- [ ] 列表頁 column 仍正常顯示
- [ ] i18n zh-tw + en 文案新增
- [ ] store / service cleanup
- [ ] Manual smoke 全過
- [ ] Changelog 完成
- [ ] README tracker (C6) 狀態更新

---

## 風險 / Rollback

| 風險 | 緩解 |
|------|------|
| user 抱怨「找不到設備設定」 | i18n hint + 詳情頁範圍 card 引導 link 雙重提示 |
| 深 link `?tab=ssp&section=scope` 沒被 C5 接住 | C6 開工前先 verify C5 SSP tab 已支援該 query 參數 |
| 既有專案 detail 頁 card 渲染 break | empty fallback：scope_card_empty 文案 |

**Rollback**：FE-only，`git revert` 即可。不影響後端資料。