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:
160
index.html
160
index.html
@@ -98,10 +98,27 @@
|
||||
|
||||
<form id="positionForm">
|
||||
<div class="tab-content active" id="tab-position-basic">
|
||||
<button type="button" class="ai-generate-btn" onclick="generatePositionBasic()">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||||
<span>✨ I'm feeling lucky</span>
|
||||
</button>
|
||||
<!-- AI 錦囊：三個可自定義的 AI 生成按鈕 -->
|
||||
<div class="ai-bags-container">
|
||||
<div class="ai-bag" data-module="positionBasic" data-bag="1" onclick="executeAIBag('positionBasic', 1)">
|
||||
<div class="bag-icon">🎁</div>
|
||||
<div class="bag-title">錦囊一</div>
|
||||
<div class="bag-subtitle">簡化版</div>
|
||||
<button class="bag-edit-btn" onclick="editBagPrompt(event, 'positionBasic', 1)">⚙️</button>
|
||||
</div>
|
||||
<div class="ai-bag" data-module="positionBasic" data-bag="2" onclick="executeAIBag('positionBasic', 2)">
|
||||
<div class="bag-icon">🎁</div>
|
||||
<div class="bag-title">錦囊二</div>
|
||||
<div class="bag-subtitle">標準版</div>
|
||||
<button class="bag-edit-btn" onclick="editBagPrompt(event, 'positionBasic', 2)">⚙️</button>
|
||||
</div>
|
||||
<div class="ai-bag" data-module="positionBasic" data-bag="3" onclick="executeAIBag('positionBasic', 3)">
|
||||
<div class="bag-icon">🎁</div>
|
||||
<div class="bag-title">錦囊三</div>
|
||||
<div class="bag-subtitle">詳細版</div>
|
||||
<button class="bag-edit-btn" onclick="editBagPrompt(event, 'positionBasic', 3)">⚙️</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<!-- 事業體 -->
|
||||
<div class="form-group">
|
||||
@@ -212,10 +229,27 @@
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="tab-position-recruit">
|
||||
<button type="button" class="ai-generate-btn" onclick="generatePositionRecruit()">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||||
<span>✨ I'm feeling lucky</span>
|
||||
</button>
|
||||
<!-- AI 錦囊：三個可自定義的 AI 生成按鈕 -->
|
||||
<div class="ai-bags-container">
|
||||
<div class="ai-bag" data-module="positionRecruit" data-bag="1" onclick="executeAIBag('positionRecruit', 1)">
|
||||
<div class="bag-icon">🎁</div>
|
||||
<div class="bag-title">錦囊一</div>
|
||||
<div class="bag-subtitle">基本需求</div>
|
||||
<button class="bag-edit-btn" onclick="editBagPrompt(event, 'positionRecruit', 1)">⚙️</button>
|
||||
</div>
|
||||
<div class="ai-bag" data-module="positionRecruit" data-bag="2" onclick="executeAIBag('positionRecruit', 2)">
|
||||
<div class="bag-icon">🎁</div>
|
||||
<div class="bag-title">錦囊二</div>
|
||||
<div class="bag-subtitle">標準需求</div>
|
||||
<button class="bag-edit-btn" onclick="editBagPrompt(event, 'positionRecruit', 2)">⚙️</button>
|
||||
</div>
|
||||
<div class="ai-bag" data-module="positionRecruit" data-bag="3" onclick="executeAIBag('positionRecruit', 3)">
|
||||
<div class="bag-icon">🎁</div>
|
||||
<div class="bag-title">錦囊三</div>
|
||||
<div class="bag-subtitle">完整需求</div>
|
||||
<button class="bag-edit-btn" onclick="editBagPrompt(event, 'positionRecruit', 3)">⚙️</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label>最低學歷</label>
|
||||
@@ -402,10 +436,27 @@
|
||||
|
||||
<form id="jobForm">
|
||||
<div class="tab-content active" id="tab-job-basic">
|
||||
<button type="button" class="ai-generate-btn" onclick="generateJobBasic()">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||||
<span>✨ I'm feeling lucky</span>
|
||||
</button>
|
||||
<!-- AI 錦囊：三個可自定義的 AI 生成按鈕 -->
|
||||
<div class="ai-bags-container">
|
||||
<div class="ai-bag" data-module="jobBasic" data-bag="1" onclick="executeAIBag('jobBasic', 1)">
|
||||
<div class="bag-icon">🎁</div>
|
||||
<div class="bag-title">錦囊一</div>
|
||||
<div class="bag-subtitle">簡化版</div>
|
||||
<button class="bag-edit-btn" onclick="editBagPrompt(event, 'jobBasic', 1)">⚙️</button>
|
||||
</div>
|
||||
<div class="ai-bag" data-module="jobBasic" data-bag="2" onclick="executeAIBag('jobBasic', 2)">
|
||||
<div class="bag-icon">🎁</div>
|
||||
<div class="bag-title">錦囊二</div>
|
||||
<div class="bag-subtitle">標準版</div>
|
||||
<button class="bag-edit-btn" onclick="editBagPrompt(event, 'jobBasic', 2)">⚙️</button>
|
||||
</div>
|
||||
<div class="ai-bag" data-module="jobBasic" data-bag="3" onclick="executeAIBag('jobBasic', 3)">
|
||||
<div class="bag-icon">🎁</div>
|
||||
<div class="bag-title">錦囊三</div>
|
||||
<div class="bag-subtitle">完整版</div>
|
||||
<button class="bag-edit-btn" onclick="editBagPrompt(event, 'jobBasic', 3)">⚙️</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label><span class="required">*</span> 職務類別編號</label>
|
||||
@@ -546,10 +597,27 @@
|
||||
<div class="form-card">
|
||||
<form id="deptFunctionForm">
|
||||
<div class="tab-content active">
|
||||
<button type="button" class="ai-generate-btn" onclick="generateDeptFunction()">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||||
<span>✨ I'm feeling lucky</span>
|
||||
</button>
|
||||
<!-- AI 錦囊：三個可自定義的 AI 生成按鈕 -->
|
||||
<div class="ai-bags-container">
|
||||
<div class="ai-bag" data-module="deptFunction" data-bag="1" onclick="executeAIBag('deptFunction', 1)">
|
||||
<div class="bag-icon">🎁</div>
|
||||
<div class="bag-title">錦囊一</div>
|
||||
<div class="bag-subtitle">基本版</div>
|
||||
<button class="bag-edit-btn" onclick="editBagPrompt(event, 'deptFunction', 1)">⚙️</button>
|
||||
</div>
|
||||
<div class="ai-bag" data-module="deptFunction" data-bag="2" onclick="executeAIBag('deptFunction', 2)">
|
||||
<div class="bag-icon">🎁</div>
|
||||
<div class="bag-title">錦囊二</div>
|
||||
<div class="bag-subtitle">標準版</div>
|
||||
<button class="bag-edit-btn" onclick="editBagPrompt(event, 'deptFunction', 2)">⚙️</button>
|
||||
</div>
|
||||
<div class="ai-bag" data-module="deptFunction" data-bag="3" onclick="executeAIBag('deptFunction', 3)">
|
||||
<div class="bag-icon">🎁</div>
|
||||
<div class="bag-title">錦囊三</div>
|
||||
<div class="bag-subtitle">完整版</div>
|
||||
<button class="bag-edit-btn" onclick="editBagPrompt(event, 'deptFunction', 3)">⚙️</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="csv-buttons" style="margin-bottom: 15px;">
|
||||
<button type="button" class="btn btn-secondary" onclick="importDeptFunctionCSV()">匯入 CSV</button>
|
||||
@@ -732,10 +800,27 @@
|
||||
|
||||
<form id="jobDescForm">
|
||||
<div class="tab-content active" id="tab-jobdesc-basic">
|
||||
<button type="button" class="ai-generate-btn" onclick="generateJobDesc()">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||||
<span>✨ I'm feeling lucky</span>
|
||||
</button>
|
||||
<!-- AI 錦囊：三個可自定義的 AI 生成按鈕 -->
|
||||
<div class="ai-bags-container">
|
||||
<div class="ai-bag" data-module="jobDesc" data-bag="1" onclick="executeAIBag('jobDesc', 1)">
|
||||
<div class="bag-icon">🎁</div>
|
||||
<div class="bag-title">錦囊一</div>
|
||||
<div class="bag-subtitle">基本版</div>
|
||||
<button class="bag-edit-btn" onclick="editBagPrompt(event, 'jobDesc', 1)">⚙️</button>
|
||||
</div>
|
||||
<div class="ai-bag" data-module="jobDesc" data-bag="2" onclick="executeAIBag('jobDesc', 2)">
|
||||
<div class="bag-icon">🎁</div>
|
||||
<div class="bag-title">錦囊二</div>
|
||||
<div class="bag-subtitle">標準版</div>
|
||||
<button class="bag-edit-btn" onclick="editBagPrompt(event, 'jobDesc', 2)">⚙️</button>
|
||||
</div>
|
||||
<div class="ai-bag" data-module="jobDesc" data-bag="3" onclick="executeAIBag('jobDesc', 3)">
|
||||
<div class="bag-icon">🎁</div>
|
||||
<div class="bag-title">錦囊三</div>
|
||||
<div class="bag-subtitle">完整版</div>
|
||||
<button class="bag-edit-btn" onclick="editBagPrompt(event, 'jobDesc', 3)">⚙️</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 頂部區域 -->
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
@@ -4024,5 +4109,40 @@ ${contextInfo}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<!-- ==================== Prompt 編輯模態框 ==================== -->
|
||||
<div class="modal-overlay" id="promptEditModal">
|
||||
<div class="modal" style="max-width: 700px;">
|
||||
<div class="modal-header">
|
||||
<h3 id="promptModalTitle">編輯 Prompt</h3>
|
||||
<button class="modal-close" onclick="closePromptEditModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>錦囊標題</label>
|
||||
<input type="text" id="promptTitle" placeholder="例如：簡化版、標準版、詳細版">
|
||||
</div>
|
||||
<div class="form-group" style="margin-top: 16px;">
|
||||
<label>副標題（選填）</label>
|
||||
<input type="text" id="promptSubtitle" placeholder="例如：僅必填欄位、常用欄位">
|
||||
</div>
|
||||
<div class="form-group" style="margin-top: 16px;">
|
||||
<label>Prompt 內容</label>
|
||||
<textarea id="promptContent" rows="12" placeholder="請輸入 AI Prompt 內容 可使用的變數： {existingData} - 當前表單已填寫的資料 {positionName} - 崗位名稱"></textarea>
|
||||
</div>
|
||||
<div style="margin-top: 12px; padding: 12px; background: #f8fafc; border-radius: 6px; font-size: 0.85rem; color: #64748b;">
|
||||
<strong>提示：</strong>Prompt 會自動替換以下變數：<br>
|
||||
• <code>{existingData}</code> → 當前表單已填寫的資料（JSON 格式）<br>
|
||||
• <code>{positionName}</code> → 崗位名稱（用於招聘要求頁籤）
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" onclick="resetToDefaultPrompt()">重置為預設</button>
|
||||
<button class="btn btn-cancel" onclick="closePromptEditModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="savePromptEdit()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user