# 三個錦囊功能設計

## 功能概述
將原本的單一 "I'm feeling lucky" 按鈕改為三個可自定義的 AI 生成按鈕（"三個錦囊"）。

## UI 設計

### 視覺效果
```
┌─────────────────────────────────────────────────────────┐
│  🎁 錦囊一       🎁 錦囊二       🎁 錦囊三              │
│  [標題]         [標題]          [標題]                  │
│  ⚙️ 編輯         ⚙️ 編輯         ⚙️ 編輯                │
└─────────────────────────────────────────────────────────┘
```

### 互動流程
1. **點擊錦囊按鈕** → 使用預設或自定義的 prompt 調用 AI
2. **點擊編輯圖示** → 彈出對話框，顯示並可編輯當前 prompt
3. **Prompt 儲存** → 儲存至 localStorage（按模組區分）

## 資料結構

### LocalStorage 結構
```javascript
{
  "prompts": {
    "positionBasic": {
      "bag1": { "title": "簡化版", "prompt": "..." },
      "bag2": { "title": "標準版", "prompt": "..." },
      "bag3": { "title": "詳細版", "prompt": "..." }
    },
    "positionRecruit": {
      "bag1": { "title": "一般需求", "prompt": "..." },
      "bag2": { "title": "高階需求", "prompt": "..." },
      "bag3": { "title": "專業需求", "prompt": "..." }
    },
    "jobBasic": { ... },
    "deptFunction": { ... },
    "jobDesc": { ... }
  }
}
```

## 預設 Prompt 模板

### 崗位基礎資料 - 基礎資料頁籤

#### 錦囊一：簡化版（僅填必填欄位）
```
你是專業人資顧問，熟悉半導體製造業。請生成崗位基礎資料（僅必填欄位）。

已填寫的資料：{existingData}
需要生成的欄位：positionCode, positionName

請用繁體中文，返回 JSON 格式。
```

#### 錦囊二：標準版（常用欄位）
```
你是專業人資顧問，熟悉半導體製造業。請生成崗位基礎資料（標準版）。

已填寫的資料：{existingData}
需要生成的欄位：positionCode, positionName, positionCategory, positionLevel, headcount

欄位說明：
- positionCode: 崗位編號（格式如 ENG-001）
- positionName: 崗位名稱
- positionCategory: 崗位類別代碼（01=技術職, 02=管理職, 03=業務職, 04=行政職）
- positionLevel: 崗位級別（L1-L7）
- headcount: 編制人數（1-10）

請用繁體中文，返回 JSON 格式。
```

#### 錦囊三：詳細版（所有欄位）
```
你是專業人資顧問，熟悉半導體製造業的人資所有流程。請生成完整的崗位基礎資料。

已填寫的資料：{existingData}
需要生成的欄位：positionCode, positionName, positionCategory, positionNature, headcount, positionLevel, positionDesc, positionRemark

欄位說明：
- positionCode: 崗位編號（格式如 ENG-001, MGR-002）
- positionName: 崗位名稱
- positionCategory: 崗位類別代碼（01=技術職, 02=管理職, 03=業務職, 04=行政職）
- positionNature: 崗位性質代碼（FT=全職, PT=兼職, CT=約聘, IN=實習）
- headcount: 編制人數（1-10之間的數字字串）
- positionLevel: 崗位級別（L1到L7）
- positionDesc: 崗位描述（條列式，用換行分隔）
- positionRemark: 崗位備注（條列式，用換行分隔）

請用繁體中文，返回 JSON 格式，不要有任何其他文字。
```

### 崗位基礎資料 - 招聘要求頁籤

#### 錦囊一：基本需求
```
請生成「{positionName}」的基本招聘要求。

已填寫的資料：{existingData}
需要生成的欄位：minEducation, workExperience, jobType, jobTitle

請用繁體中文，返回 JSON 格式。
```

#### 錦囊二：標準需求
```
請生成「{positionName}」的標準招聘要求。

已填寫的資料：{existingData}
需要生成的欄位：minEducation, salaryRange, workExperience, jobType, recruitPosition, jobTitle, positionReq, skillReq

欄位說明：
- minEducation: 最低學歷代碼（HS=高中職, JC=專科, BA=大學, MA=碩士, PHD=博士）
- salaryRange: 薪酬范圍代碼（A=30000以下, B=30000-50000, C=50000-80000, D=80000-120000, E=120000以上, N=面議）
- workExperience: 工作經驗年數（0=不限, 1, 3, 5, 10）
- jobType: 工作性質代碼（FT=全職, PT=兼職, CT=約聘, DP=派遣）
- recruitPosition: 招聘職位代碼（ENG=工程師, MGR=經理, AST=助理, OP=作業員, SAL=業務）
- positionReq: 崗位要求（條列式，用換行分隔）
- skillReq: 技能要求（條列式，用換行分隔）

請用繁體中文，返回 JSON 格式。
```

#### 錦囊三：完整需求
```
請生成「{positionName}」的完整招聘要求資料。

已填寫的資料：{existingData}
需要生成所有空白欄位。

（完整欄位說明同標準版，包含所有 18 個欄位）

請用繁體中文，返回 JSON 格式。
```

## 實作步驟

### 1. HTML 結構更新
將單一按鈕：
```html
<button type="button" class="ai-generate-btn" onclick="generatePositionBasic()">
    <span>✨ I'm feeling lucky</span>
</button>
```

改為三個錦囊：
```html
<div class="ai-bags-container">
    <div class="ai-bag" data-bag="1" onclick="executeAIBag('positionBasic', 1)">
        <div class="bag-icon">🎁</div>
        <div class="bag-title" id="bag1-title-positionBasic">錦囊一</div>
        <button class="bag-edit-btn" onclick="editBagPrompt(event, 'positionBasic', 1)">⚙️</button>
    </div>
    <div class="ai-bag" data-bag="2" onclick="executeAIBag('positionBasic', 2)">
        <div class="bag-icon">🎁</div>
        <div class="bag-title" id="bag2-title-positionBasic">錦囊二</div>
        <button class="bag-edit-btn" onclick="editBagPrompt(event, 'positionBasic', 2)">⚙️</button>
    </div>
    <div class="ai-bag" data-bag="3" onclick="executeAIBag('positionBasic', 3)">
        <div class="bag-icon">🎁</div>
        <div class="bag-title" id="bag3-title-positionBasic">錦囊三</div>
        <button class="bag-edit-btn" onclick="editBagPrompt(event, 'positionBasic', 3)">⚙️</button>
    </div>
</div>
```

### 2. CSS 樣式
```css
.ai-bags-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.ai-bag {
    position: relative;
    padding: 20px;
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
}

.ai-bag:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.5);
}

.ai-bag .bag-icon {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 8px;
}

.ai-bag .bag-title {
    color: white;
    font-weight: 600;
    text-align: center;
    font-size: 0.95rem;
}

.ai-bag .bag-edit-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.ai-bag .bag-edit-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}
```

### 3. JavaScript 函式

#### 執行 AI 錦囊
```javascript
async function executeAIBag(module, bagNumber) {
    const prompts = getModulePrompts(module);
    const bagPrompt = prompts[`bag${bagNumber}`];

    // 使用 prompt 調用 AI
    await callClaudeAPI(bagPrompt.prompt);
}
```

#### 編輯 Prompt
```javascript
function editBagPrompt(event, module, bagNumber) {
    event.stopPropagation();

    // 顯示編輯對話框
    showPromptEditModal(module, bagNumber);
}
```

## 優點

1. ✅ **靈活性高** - 用戶可自定義每個錦囊的用途
2. ✅ **效率提升** - 三個預設選項涵蓋不同需求場景
3. ✅ **學習友好** - 顯示 prompt 有助於理解 AI 運作
4. ✅ **可擴展** - 未來可增加更多錦囊或分享功能

## 待實作功能

- [ ] HTML 結構更新（5 個模組）
- [ ] CSS 樣式新增
- [ ] JavaScript 函式實作
- [ ] LocalStorage 管理
- [ ] 編輯 Modal 對話框
- [ ] 預設 Prompt 初始化