feat: 實作三個錦囊 AI 功能
- 新增 AI 錦囊 CSS 樣式到 components.css - 創建 js/ai-bags.js 模組，包含： * 5個模組各3個錦囊的預設 prompt 模板 * executeAIBag() - 執行 AI 生成並填充表單 * editBagPrompt() - 編輯自定義 prompt * LocalStorage 管理自定義 prompt - 更新 index.html： * 替換 5 處 AI 按鈕為三個錦囊（崗位基礎、招聘要求、職務、部門職責、崗位描述） * 新增 Prompt 編輯模態框 - 更新 main.js 引入 ai-bags.js 並初始化 - 新增設計文檔：三個錦囊設計.md - 新增欄位對照文檔：表單欄位清單.md、更新欄位名稱.md、ID重命名對照表.md 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
263
三個錦囊設計.md
Normal file
263
三個錦囊設計.md
Normal file
@@ -0,0 +1,263 @@
|
||||
# 三個錦囊功能設計
|
||||
|
||||
## 功能概述
|
||||
將原本的單一 "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 初始化
|
||||
Reference in New Issue
Block a user