hr-position-system/docs/三個錦囊設計.md

三個錦囊功能設計

功能概述

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

UI 設計

視覺效果

┌─────────────────────────────────────────────────────────┐
│  🎁 錦囊一       🎁 錦囊二       🎁 錦囊三              │
│  [標題]         [標題]          [標題]                  │
│  ⚙️ 編輯         ⚙️ 編輯         ⚙️ 編輯                │
└─────────────────────────────────────────────────────────┘

互動流程

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

資料結構

LocalStorage 結構

{
  "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 結構更新

將單一按鈕：

<button type="button" class="ai-generate-btn" onclick="generatePositionBasic()">
    <span>✨ I'm feeling lucky</span>
</button>

改為三個錦囊：

<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 樣式

.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 錦囊

async function executeAIBag(module, bagNumber) {
    const prompts = getModulePrompts(module);
    const bagPrompt = prompts[`bag${bagNumber}`];

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

編輯 Prompt

function editBagPrompt(event, module, bagNumber) {
    event.stopPropagation();

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

優點

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

待實作功能

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