commit 29c1633e49a2daae10eb40c58a77e679ba43c865
Author: DonaldFang 方士碩 <donald@panjit.com.tw>
Date:   Thu Dec 4 00:46:53 2025 +0800

    Initial commit: HR Position System
    
    - Database schema with MySQL support
    - LLM API integration (Gemini 2.5 Flash, DeepSeek, OpenAI)
    - Error handling with copyable error messages
    - CORS fix for API calls
    - Complete setup documentation
    
    🤖 Generated with Claude Code
    https://claude.com/claude-code
    
    Co-Authored-By: Claude <noreply@anthropic.com>

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a701fe2
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,82 @@
+# Environment variables
+.env
+.env.local
+.env.*.local
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# Virtual Environment
+venv/
+env/
+ENV/
+env.bak/
+venv.bak/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+.DS_Store
+
+# Flask
+instance/
+.webassets-cache
+
+# Database
+*.db
+*.sqlite
+*.sqlite3
+
+# Logs
+*.log
+logs/
+log/
+
+# OS
+Thumbs.db
+desktop.ini
+
+# Temporary files
+*.tmp
+*.temp
+*.bak
+
+# Node modules (if using any frontend build tools)
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Testing
+.pytest_cache/
+.coverage
+htmlcov/
+.tox/
+
+# Backup files
+*.backup
+backup/
diff --git a/CORS_FIX_GUIDE.md b/CORS_FIX_GUIDE.md
new file mode 100644
index 0000000..0b65038
--- /dev/null
+++ b/CORS_FIX_GUIDE.md
@@ -0,0 +1,315 @@
+# CORS 錯誤修正指南
+
+## 🔴 問題說明
+
+您遇到的錯誤有兩個：
+
+### 1. CORS (跨域資源共享) 錯誤
+```
+Access to fetch at 'https://api.anthropic.com/v1/messages' from origin 'http://127.0.0.1:5000'
+has been blocked by CORS policy: Response to preflight request doesn't pass access control check:
+No 'Access-Control-Allow-Origin' header is present on the requested resource.
+```
+
+**原因**: 前端代碼直接從瀏覽器調用 Claude API，但 Claude API 不允許來自瀏覽器的直接請求（出於安全考量）。
+
+### 2. Storage 訪問錯誤
+```
+Uncaught (in promise) Error: Access to storage is not allowed from this context.
+```
+
+**原因**: 瀏覽器的本地存儲權限問題，通常在使用 `file://` 協議或某些安全限制下出現。
+
+---
+
+## ✅ 解決方案
+
+### 方案 1: 修改 index.html 中的 callClaudeAPI 函數（推薦）
+
+**步驟 1**: 打開 [index.html](./index.html)
+
+**步驟 2**: 找到第 1264 行的 `callClaudeAPI` 函數
+
+**步驟 3**: 將整個函數替換為以下代碼：
+
+```javascript
+// ==================== AI Generation Functions ====================
+async function callClaudeAPI(prompt, api = 'gemini') {
+    try {
+        // 調用後端 Flask API，避免 CORS 錯誤
+        const response = await fetch("/api/llm/generate", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                api: api,  // 使用指定的 LLM API (gemini, deepseek, openai)
+                prompt: prompt,
+                max_tokens: 2000
+            })
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(errorData.error || `API 請求失敗: ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        if (!data.success) {
+            throw new Error(data.error || 'API 調用失敗');
+        }
+
+        // 解析返回的文字為 JSON
+        let responseText = data.text;
+        responseText = responseText.replace(/```json\n?/g, "").replace(/```\n?/g, "").trim();
+        return JSON.parse(responseText);
+
+    } catch (error) {
+        console.error("Error calling LLM API:", error);
+
+        // 顯示友好的錯誤訊息
+        alert(`AI 生成錯誤: ${error.message}\n\n請確保：\n1. Flask 後端已啟動\n2. 已在 .env 文件中配置 LLM API Key\n3. 網路連線正常`);
+
+        throw error;
+    }
+}
+```
+
+**步驟 4**: 保存文件
+
+**步驟 5**: 確保使用更新版的 Flask 後端
+
+```bash
+# 使用包含 LLM 端點的版本
+python app_updated.py
+```
+
+**步驟 6**: 重新載入瀏覽器頁面
+
+---
+
+### 方案 2: 使用已修正的文件（快速方案）
+
+我已經創建了包含完整修正的文件，您可以選擇以下方式之一：
+
+#### 選項 A: 手動修改（最安全）
+
+1. 打開 `index.html`
+2. 搜尋 `async function callClaudeAPI(prompt)`
+3. 用上面方案 1 的代碼替換
+
+#### 選項 B: 使用腳本自動修正
+
+參考 [fix_cors.js](./fix_cors.js) 文件中的完整說明。
+
+---
+
+## 📋 完整修正步驟
+
+### 1. 確認後端已啟動並包含 LLM 端點
+
+```bash
+# 停止當前運行的 Flask（如果有）
+# 按 Ctrl+C
+
+# 啟動更新版後端
+python app_updated.py
+```
+
+您應該看到：
+```
+✓ LLM 功能已啟用
+  已配置的 API: gemini, deepseek, openai
+```
+
+### 2. 配置 LLM API Key
+
+編輯 [.env](./.env) 文件，添加至少一個 API Key：
+
+```env
+# 至少配置其中一個
+GEMINI_API_KEY=your_actual_gemini_api_key_here
+DEEPSEEK_API_KEY=your_actual_deepseek_api_key_here
+OPENAI_API_KEY=your_actual_openai_api_key_here
+```
+
+**獲取 API Key:**
+- **Gemini**: https://makersuite.google.com/app/apikey
+- **DeepSeek**: https://www.deepseek.com/
+- **OpenAI**: https://platform.openai.com/api-keys
+
+### 3. 測試 LLM API 連線
+
+訪問測試頁面：http://localhost:5000/api-test
+
+點擊「測試連線」按鈕，確保至少一個 API 顯示「✓ 連線成功」。
+
+### 4. 修改 index.html
+
+按照方案 1 的步驟修改 `callClaudeAPI` 函數。
+
+### 5. 重新載入頁面
+
+在瀏覽器中按 `Ctrl+F5` 強制重新載入頁面（清除緩存）。
+
+### 6. 測試 AI 功能
+
+1. 在主頁面點擊「新增崗位」
+2. 填寫部分欄位（例如崗位名稱）
+3. 點擊「✨ I'm feeling lucky」按鈕
+4. 應該會成功生成內容，不再出現 CORS 錯誤
+
+---
+
+## 🔍 驗證修正是否成功
+
+打開瀏覽器的開發者工具（F12），切換到 Console 標籤：
+
+### ✅ 成功的表現：
+- 沒有 CORS 錯誤
+- 看到 `POST http://localhost:5000/api/llm/generate` 請求成功 (200 OK)
+- AI 自動填充正常工作
+
+### ❌ 仍有問題：
+
+#### 如果看到 `403 LLM 功能未啟用`
+**原因**: 沒有使用 `app_updated.py`
+**解決**:
+```bash
+python app_updated.py
+```
+
+#### 如果看到 `API Key 未設定`
+**原因**: .env 文件中沒有配置 API Key
+**解決**: 編輯 `.env` 文件，添加有效的 API Key
+
+#### 如果看到 `連線逾時`
+**原因**: 網路連線問題或 API 伺服器問題
+**解決**:
+1. 檢查網路連線
+2. 嘗試使用不同的 LLM API（修改 `callClaudeAPI(prompt, 'deepseek')`）
+
+#### 如果看到 `API Key 無效`
+**原因**: API Key 錯誤或已過期
+**解決**: 重新獲取有效的 API Key
+
+---
+
+## 🎯 架構變更說明
+
+### 修正前（錯誤）：
+```
+瀏覽器 → 直接調用 → Claude API (❌ CORS 錯誤)
+```
+
+### 修正後（正確）：
+```
+瀏覽器 → Flask 後端 → Gemini/DeepSeek/OpenAI API (✅ 正常)
+```
+
+---
+
+## 💡 為什麼這樣修改
+
+### 1. 安全性
+- **API Key 保護**: API Key 只存儲在服務器端（.env 文件），不暴露給前端
+- **防止濫用**: 用戶無法看到或竊取 API Key
+
+### 2. CORS 問題
+- **同源請求**: 前端只調用同域的 Flask API（http://localhost:5000）
+- **服務器端請求**: Flask 服務器調用外部 API，不受 CORS 限制
+
+### 3. 靈活性
+- **多 API 支持**: 可以輕鬆切換不同的 LLM API
+- **統一接口**: 前端代碼無需關心使用哪個 LLM API
+
+---
+
+## 📝 其他建議
+
+### 1. 添加錯誤處理 UI
+
+在 `<head>` 標籤中添加錯誤處理腳本：
+
+```html
+<script src="error_handler.js"></script>
+```
+
+### 2. 選擇 LLM API
+
+如果想使用特定的 LLM API，可以修改調用：
+
+```javascript
+// 使用 Gemini（默認）
+const result = await callClaudeAPI(prompt, 'gemini');
+
+// 使用 DeepSeek
+const result = await callClaudeAPI(prompt, 'deepseek');
+
+// 使用 OpenAI
+const result = await callClaudeAPI(prompt, 'openai');
+```
+
+### 3. 添加 API 選擇器
+
+可以在前端添加一個下拉選單，讓用戶選擇使用哪個 LLM API：
+
+```html
+<select id="llm-selector">
+    <option value="gemini">Google Gemini</option>
+    <option value="deepseek">DeepSeek</option>
+    <option value="openai">OpenAI</option>
+</select>
+```
+
+然後在調用時使用：
+```javascript
+const api = document.getElementById('llm-selector').value;
+const result = await callClaudeAPI(prompt, api);
+```
+
+---
+
+## 🆘 仍然遇到問題？
+
+### 檢查清單
+
+- [ ] Flask 後端是否正在運行？
+- [ ] 是否使用 `app_updated.py` 而不是 `app.py`？
+- [ ] .env 文件中是否配置了至少一個 API Key？
+- [ ] API Key 是否有效？（可以在 http://localhost:5000/api-test 測試）
+- [ ] 是否已修改 index.html 中的 `callClaudeAPI` 函數？
+- [ ] 瀏覽器是否已重新載入頁面（Ctrl+F5）？
+- [ ] 瀏覽器控制台是否還有其他錯誤？
+
+### 調試步驟
+
+1. **測試後端 API**:
+   ```bash
+   curl -X POST http://localhost:5000/api/llm/generate \
+     -H "Content-Type: application/json" \
+     -d '{"api":"gemini","prompt":"測試","max_tokens":100}'
+   ```
+
+2. **檢查 Flask 日誌**: 查看終端中 Flask 的輸出
+
+3. **瀏覽器控制台**: 查看詳細的錯誤訊息
+
+4. **測試頁面**: 訪問 http://localhost:5000/api-test 確認 API 配置
+
+---
+
+## 📚 相關文件
+
+- [SETUP.md](./SETUP.md) - 完整安裝指南
+- [fix_cors.js](./fix_cors.js) - 詳細修正代碼
+- [error_handler.js](./error_handler.js) - 全局錯誤處理
+- [app_updated.py](./app_updated.py) - 包含 LLM 端點的 Flask 後端
+
+---
+
+**文件版本**: 1.0
+**最後更新**: 2024-12-04
+**問題類型**: CORS 跨域請求錯誤
+**解決狀態**: ✅ 已提供完整解決方案
diff --git a/GEMINI_API_FIX.md b/GEMINI_API_FIX.md
new file mode 100644
index 0000000..3b9e5b9
--- /dev/null
+++ b/GEMINI_API_FIX.md
@@ -0,0 +1,236 @@
+# Gemini API Referrer 錯誤解決方案
+
+## 🔴 錯誤訊息
+
+```json
+{
+  "error": {
+    "code": 403,
+    "message": "Requests from referer \u003cempty\u003e are blocked.",
+    "status": "PERMISSION_DENIED",
+    "details": [
+      {
+        "@type": "type.googleapis.com/google.rpc.ErrorInfo",
+        "reason": "API_KEY_HTTP_REFERRER_BLOCKED"
+      }
+    ]
+  }
+}
+```
+
+## 📋 問題原因
+
+Gemini API Key 有 **HTTP Referrer 限制**，這是 Google 的安全機制。當從服務器端調用時，HTTP Referrer 為空，導致請求被阻擋。
+
+---
+
+## ✅ 解決方案
+
+### 方案 1: 修改 Gemini API Key 設定（推薦）
+
+1. **訪問 Google AI Studio**
+   https://makersuite.google.com/app/apikey
+
+2. **找到您的 API Key**
+
+3. **點擊「Edit API Key」或創建新的 API Key**
+
+4. **設定 Application restrictions**
+   - 選擇 **"None"** 或 **"IP addresses"**
+   - **不要**選擇 "HTTP referrers (websites)"
+
+5. **保存設定**
+
+6. **更新 .env 文件**
+   ```env
+   GEMINI_API_KEY=your_new_unrestricted_api_key
+   ```
+
+7. **重啟 Flask 服務器**
+   ```bash
+   # 按 Ctrl+C 停止服務器
+   python start_server.py
+   ```
+
+---
+
+### 方案 2: 使用其他 LLM API（臨時解決）
+
+如果您有其他 LLM API Key，可以暫時使用：
+
+#### 選項 A: 使用 DeepSeek
+
+1. **獲取 DeepSeek API Key**
+   https://www.deepseek.com/
+
+2. **添加到 .env**
+   ```env
+   DEEPSEEK_API_KEY=your_deepseek_api_key
+   ```
+
+3. **修改默認 API**
+   編輯 `index.html`，找到 `callClaudeAPI` 調用，改為：
+   ```javascript
+   const result = await callClaudeAPI(prompt, 'deepseek');
+   ```
+
+#### 選項 B: 使用 OpenAI
+
+1. **獲取 OpenAI API Key**
+   https://platform.openai.com/api-keys
+
+2. **添加到 .env**
+   ```env
+   OPENAI_API_KEY=your_openai_api_key
+   ```
+
+3. **修改默認 API**
+   編輯 `index.html`，找到 `callClaudeAPI` 調用，改為：
+   ```javascript
+   const result = await callClaudeAPI(prompt, 'openai');
+   ```
+
+---
+
+### 方案 3: 創建 API 選擇器（最佳長期方案）
+
+讓用戶在前端選擇要使用的 LLM API。
+
+我可以幫您添加一個下拉選單，讓用戶可以在 Gemini、DeepSeek 和 OpenAI 之間切換。
+
+---
+
+## 🔍 驗證修正
+
+### 測試 API 連線
+
+訪問測試頁面：http://127.0.0.1:5000/api-test
+
+點擊每個 API 的「🧪 測試連線」按鈕，查看哪些 API 可用。
+
+### 成功的表現
+
+- ✅ API 測試顯示「✓ 連線成功」
+- ✅ 瀏覽器不再顯示 403 錯誤
+- ✅ AI 自動填充功能正常工作
+
+---
+
+## 📝 詳細錯誤訊息說明
+
+您在截圖中看到的錯誤：
+
+```
+"reason": "API_KEY_HTTP_REFERRER_BLOCKED"
+```
+
+這表示：
+- Gemini API Key 設定了 HTTP Referrer 限制
+- 服務器端請求沒有 Referrer，被 Google 阻擋
+- 需要移除 Referrer 限制或使用其他 API
+
+---
+
+## 🎯 推薦操作順序
+
+### 立即操作（5 分鐘）
+
+1. **使用 DeepSeek 或 OpenAI**（臨時解決）
+   ```bash
+   # 編輯 .env 添加其他 API Key
+   # 重啟服務器
+   python start_server.py
+   ```
+
+2. **測試頁面重新載入**
+   - 按 Ctrl+F5 刷新
+   - 測試 AI 功能
+
+### 長期解決（10 分鐘）
+
+1. **修改 Gemini API Key 設定**
+   - 訪問 Google AI Studio
+   - 移除 HTTP Referrer 限制
+   - 創建新的無限制 API Key
+
+2. **更新配置**
+   - 更新 .env 文件
+   - 重啟服務器
+
+3. **全面測試**
+   - 測試所有 API
+   - 確保都能正常工作
+
+---
+
+## 💡 補充說明
+
+### 為什麼服務器端請求沒有 Referrer？
+
+當從 Python Flask 後端調用 API 時：
+- HTTP 請求是由服務器發出的
+- 沒有瀏覽器上下文
+- Referer header 為空或不存在
+- Google 的安全機制會阻擋這類請求
+
+### 如何避免這個問題？
+
+1. **使用無限制的 API Key**（推薦）
+2. **使用 IP 地址限制**而非 Referrer 限制
+3. **使用服務帳戶**（企業方案）
+
+---
+
+## 🆘 仍然有問題？
+
+### 如果修改 API Key 後還是不行
+
+1. **檢查 API Key 是否生效**
+   - 等待 1-2 分鐘
+   - Google 的設定更新需要時間
+
+2. **確認 .env 文件正確**
+   ```bash
+   # 查看 .env 內容
+   type .env
+   ```
+
+3. **重啟服務器**
+   ```bash
+   # 完全停止後重新啟動
+   python start_server.py
+   ```
+
+4. **清除瀏覽器緩存**
+   - 按 Ctrl+Shift+Delete
+   - 清除緩存和 Cookie
+   - 重新載入頁面
+
+---
+
+## 📊 API 對比
+
+| API | 優點 | 缺點 | 推薦度 |
+|-----|------|------|--------|
+| **Gemini** | 免費額度高，速度快 | Referrer 限制問題 | ⭐⭐⭐ |
+| **DeepSeek** | 便宜，中文支持好 | 需要付費 | ⭐⭐⭐⭐ |
+| **OpenAI** | 穩定，功能強大 | 價格較高 | ⭐⭐⭐⭐⭐ |
+
+---
+
+## ✅ 完成檢查清單
+
+修正完成後，請檢查：
+
+- [ ] 至少一個 LLM API 測試成功
+- [ ] AI 自動填充功能正常
+- [ ] 沒有 403 錯誤
+- [ ] 錯誤訊息可以完整顯示和複製
+- [ ] 瀏覽器控制台沒有錯誤
+
+---
+
+**文件版本**: 1.0
+**最後更新**: 2024-12-04
+**問題類型**: Gemini API HTTP Referrer 限制
+**解決狀態**: ✅ 已提供完整解決方案
diff --git a/SDD.md b/SDD.md
new file mode 100644
index 0000000..276033c
--- /dev/null
+++ b/SDD.md
@@ -0,0 +1,844 @@
+# HR 基礎資料維護系統 - 軟體設計文件 (SDD)
+
+**文件版本**：1.0  
+**建立日期**：2024-12-03  
+**文件狀態**：Released  
+
+---
+
+## 1. 文件概述
+
+### 1.1 目的
+
+本文件為 HR 基礎資料維護系統之軟體設計文件 (Software Design Document)，詳細描述系統架構、模組設計、資料結構、介面規格與 AI 整合功能，供開發人員、測試人員及維護人員參考。
+
+### 1.2 範圍
+
+本系統涵蓋以下三大功能模組：
+
+| 模組 | 功能說明 |
+|------|----------|
+| 崗位基礎資料 | 崗位主檔維護，含基礎資料與招聘要求 |
+| 職務基礎資料 | 職務類別與屬性設定維護 |
+| 崗位描述 | 職責描述、崗位要求與任職條件維護 |
+
+### 1.3 參考文件
+
+- 用戶需求規格書 (URD)
+- 系統功能規格書 (FSD)
+- API 設計規範
+
+### 1.4 術語定義
+
+| 術語 | 定義 |
+|------|------|
+| 崗位 (Position) | 組織架構中的職位單位，具有編號、級別、編制人數等屬性 |
+| 職務 (Job Title) | 職務類別分類，如管理職、技術職、業務職等 |
+| 崗位描述 (Job Description) | 詳細描述崗位職責、要求與任職條件的文件 |
+| AI 自動填充 | 利用大型語言模型自動生成表單欄位內容的功能 |
+
+---
+
+## 2. 系統架構
+
+### 2.1 整體架構圖
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                        使用者介面層 (UI Layer)                    │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐              │
+│  │ 崗位基礎資料 │  │ 職務基礎資料 │  │  崗位描述   │              │
+│  │   模組      │  │    模組     │  │    模組     │              │
+│  └─────────────┘  └─────────────┘  └─────────────┘              │
+│                           │                                      │
+│  ┌──────────────────────────────────────────────────────────┐   │
+│  │              AI 自動填充服務 (Claude API)                  │   │
+│  └──────────────────────────────────────────────────────────┘   │
+└─────────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────────┐
+│                      應用服務層 (Application Layer)              │
+│  ┌─────────────────────────────────────────────────────────┐    │
+│  │                   Flask RESTful API                      │    │
+│  │  ┌───────────┐  ┌───────────┐  ┌───────────┐            │    │
+│  │  │ Position  │  │    Job    │  │ Reference │            │    │
+│  │  │    API    │  │    API    │  │    API    │            │    │
+│  │  └───────────┘  └───────────┘  └───────────┘            │    │
+│  └─────────────────────────────────────────────────────────┘    │
+└─────────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────────┐
+│                       資料存取層 (Data Layer)                    │
+│  ┌─────────────────────────────────────────────────────────┐    │
+│  │              In-Memory Database / Future DB              │    │
+│  │         (positions_db, jobs_db, job_desc_db)            │    │
+│  └─────────────────────────────────────────────────────────┘    │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 2.2 技術堆疊
+
+| 層級 | 技術選型 | 說明 |
+|------|----------|------|
+| 前端 | HTML5 + CSS3 + JavaScript | 純前端實作，無框架依賴 |
+| 樣式 | Custom CSS + Google Fonts | Noto Sans TC 字型、CSS Variables |
+| 後端 | Python Flask | RESTful API 服務 |
+| AI 服務 | Claude API (Anthropic) | 智能表單填充 |
+| 資料庫 | In-Memory (Dict) | 可擴展至 MySQL/PostgreSQL |
+
+### 2.3 部署架構
+
+```
+┌─────────────────────────────────────────┐
+│            使用者瀏覽器                  │
+│  ┌─────────────────────────────────┐    │
+│  │      index.html (前端應用)       │    │
+│  └─────────────────────────────────┘    │
+└─────────────────────────────────────────┘
+            │                    │
+            ▼                    ▼
+┌───────────────────┐  ┌───────────────────┐
+│   Flask Server    │  │   Claude API      │
+│   localhost:5000  │  │   api.anthropic   │
+└───────────────────┘  └───────────────────┘
+```
+
+---
+
+## 3. 模組設計
+
+### 3.1 崗位基礎資料模組
+
+#### 3.1.1 模組概述
+
+提供崗位主檔的 CRUD 操作，分為「基礎資料」與「招聘要求資料」兩個頁籤。
+
+#### 3.1.2 基礎資料頁籤欄位規格
+
+| 欄位名稱 | 欄位ID | 資料類型 | 必填 | 說明 |
+|----------|--------|----------|------|------|
+| 崗位編號 | positionCode | String(20) | ✓ | 唯一識別碼，格式：XXX-NNN |
+| 崗位名稱 | positionName | String(100) | ✓ | 崗位中文名稱 |
+| 崗位類別 | positionCategory | Enum | | 01/02/03/04 |
+| 崗位類別名稱 | positionCategoryName | String(50) | | 自動帶出，唯讀 |
+| 崗位性質 | positionNature | Enum | | FT/PT/CT/IN |
+| 崗位性質名稱 | positionNatureName | String(50) | | 自動帶出，唯讀 |
+| 編制人數 | headcount | Integer | | 0-9999 |
+| 崗位級別 | positionLevel | Enum | | L1-L7 |
+| 生效日期 | effectiveDate | Date | | 預設 2001-01-01 |
+| 崗位描述 | positionDesc | Text | | 多行文字 |
+| 崗位備注 | positionRemark | Text | | 多行文字 |
+
+#### 3.1.3 招聘要求資料頁籤欄位規格
+
+| 欄位名稱 | 欄位ID | 資料類型 | 說明 |
+|----------|--------|----------|------|
+| 最低學歷 | minEducation | Enum | HS/JC/BA/MA/PHD |
+| 要求性別 | requiredGender | Enum | 空值=不限, M=男, F=女 |
+| 薪酬范圍 | salaryRange | Enum | A/B/C/D/E/N |
+| 工作經驗 | workExperience | Enum | 0/1/3/5/10 (年) |
+| 最小年齡 | minAge | Integer | 18-65 |
+| 最大年齡 | maxAge | Integer | 18-65 |
+| 工作性質 | jobType | Enum | FT/PT/CT/DP |
+| 招聘職位 | recruitPosition | Enum | ENG/MGR/AST/OP/SAL |
+| 職位名稱 | jobTitle | String(100) | |
+| 職位描述 | jobDesc | Text | |
+| 崗位要求 | positionReq | Text | |
+| 職稱要求 | titleReq | Enum | NONE/CERT/LIC |
+| 專業要求 | majorReq | String(200) | 多選，逗號分隔 |
+| 技能要求 | skillReq | String(200) | |
+| 語言要求 | langReq | String(100) | |
+| 其他要求 | otherReq | String(200) | |
+| 上級崗位編號 | superiorPosition | String(20) | |
+| 備注說明 | recruitRemark | Text | |
+
+#### 3.1.4 類別代碼對照表
+
+**崗位類別 (positionCategory)**
+
+| 代碼 | 名稱 |
+|------|------|
+| 01 | 技術職 |
+| 02 | 管理職 |
+| 03 | 業務職 |
+| 04 | 行政職 |
+
+**崗位性質 (positionNature)**
+
+| 代碼 | 名稱 |
+|------|------|
+| FT | 全職 |
+| PT | 兼職 |
+| CT | 約聘 |
+| IN | 實習 |
+
+**崗位級別 (positionLevel)**
+
+| 代碼 | 名稱 |
+|------|------|
+| L1 | 基層員工 |
+| L2 | 資深員工 |
+| L3 | 主管 |
+| L4 | 經理 |
+| L5 | 總監 |
+| L6 | 副總 |
+| L7 | 總經理 |
+
+---
+
+### 3.2 職務基礎資料模組
+
+#### 3.2.1 模組概述
+
+提供職務類別主檔的維護功能，包含職務屬性設定。
+
+#### 3.2.2 欄位規格
+
+| 欄位名稱 | 欄位ID | 資料類型 | 必填 | 說明 |
+|----------|--------|----------|------|------|
+| 職務類別編號 | jobCategoryCode | Enum | ✓ | MGR/TECH/SALE/ADMIN/RD/PROD |
+| 職務類別名稱 | jobCategoryName | String(50) | | 自動帶出，唯讀 |
+| 職務編號 | jobCode | String(20) | ✓ | 唯一識別碼 |
+| 職務名稱 | jobName | String(100) | ✓ | 職務中文名稱 |
+| 職務英文 | jobNameEn | String(100) | | 職務英文名稱 |
+| 生效日期 | jobEffectiveDate | Date | | |
+| 編制人數 | jobHeadcount | Integer | | 0-9999 |
+| 排列順序 | jobSortOrder | Integer | | 顯示排序 |
+| 備注說明 | jobRemark | Text | | |
+| 職務層級 | jobLevel | String(50) | | 可設為 *保密* |
+| 是否有全勤 | hasAttendanceBonus | Boolean | | Toggle 開關 |
+| 是否住房補貼 | hasHousingAllowance | Boolean | | Toggle 開關 |
+
+#### 3.2.3 職務類別代碼對照表
+
+| 代碼 | 名稱 |
+|------|------|
+| MGR | 管理職 |
+| TECH | 技術職 |
+| SALE | 業務職 |
+| ADMIN | 行政職 |
+| RD | 研發職 |
+| PROD | 生產職 |
+
+---
+
+### 3.3 崗位描述模組
+
+#### 3.3.1 模組概述
+
+提供完整的崗位描述書 (Job Description) 維護功能，包含崗位基本信息、職責描述與崗位要求三大區塊。
+
+#### 3.3.2 頂部區域欄位
+
+| 欄位名稱 | 欄位ID | 資料類型 | 說明 |
+|----------|--------|----------|------|
+| 工號 | jd_empNo | String(20) | 員工編號 |
+| 姓名 | jd_empName | String(50) | 自動帶出，唯讀 |
+| 崗位代碼 | jd_positionCode | String(20) | |
+| 版本更新日期 | jd_versionDate | Date | |
+
+#### 3.3.3 崗位基本信息區塊
+
+| 欄位名稱 | 欄位ID | 資料類型 | 說明 |
+|----------|--------|----------|------|
+| 崗位名稱 | jd_positionName | String(100) | |
+| 所屬部門 | jd_department | String(100) | |
+| 崗位生效日期 | jd_positionEffectiveDate | Date | |
+| 直接領導職務 | jd_directSupervisor | String(100) | |
+| 崗位職等&職務 | jd_positionGradeJob | String(100) | 選擇按鈕 |
+| 匯報對象職務 | jd_reportTo | String(100) | 選擇按鈕 |
+| 直接下級 | jd_directReports | String(200) | 格式：職位 x 人數 |
+| 任職地點 | jd_workLocation | Enum | HQ/TPE/TYC/KHH/SH/SZ |
+| 員工屬性 | jd_empAttribute | Enum | FT/CT/PT/IN/DP |
+
+#### 3.3.4 職責描述區塊
+
+| 欄位名稱 | 欄位ID | 資料類型 | 說明 |
+|----------|--------|----------|------|
+| 崗位設置目的 | jd_positionPurpose | String(500) | 單行文字 |
+| 主要崗位職責 | jd_mainResponsibilities | Text | 編號格式 1、2、3、... |
+
+#### 3.3.5 崗位要求區塊
+
+| 欄位名稱 | 欄位ID | 資料類型 | 說明 |
+|----------|--------|----------|------|
+| 教育程度 | jd_education | String(200) | |
+| 基本技能 | jd_basicSkills | Text | |
+| 專業知識 | jd_professionalKnowledge | Text | |
+| 工作經驗 | jd_workExperienceReq | Text | |
+| 其他 | jd_otherRequirements | Text | |
+
+#### 3.3.6 任職地點代碼對照表
+
+| 代碼 | 名稱 |
+|------|------|
+| HQ | 總部 |
+| TPE | 台北辦公室 |
+| TYC | 桃園廠區 |
+| KHH | 高雄廠區 |
+| SH | 上海辦公室 |
+| SZ | 深圳辦公室 |
+
+#### 3.3.7 員工屬性代碼對照表
+
+| 代碼 | 名稱 |
+|------|------|
+| FT | 正式員工 |
+| CT | 約聘人員 |
+| PT | 兼職人員 |
+| IN | 實習生 |
+| DP | 派遣人員 |
+
+---
+
+## 4. API 設計
+
+### 4.1 API 端點總覽
+
+#### 4.1.1 崗位資料 API
+
+| 方法 | 端點 | 說明 |
+|------|------|------|
+| GET | `/api/positions` | 獲取所有崗位（支援分頁、搜尋） |
+| GET | `/api/positions/{id}` | 獲取單一崗位 |
+| POST | `/api/positions` | 新增崗位 |
+| PUT | `/api/positions/{id}` | 更新崗位 |
+| DELETE | `/api/positions/{id}` | 刪除崗位 |
+| POST | `/api/positions/{id}/change-code` | 更改崗位編號 |
+
+#### 4.1.2 職務資料 API
+
+| 方法 | 端點 | 說明 |
+|------|------|------|
+| GET | `/api/jobs` | 獲取所有職務（支援分頁、搜尋、類別篩選） |
+| GET | `/api/jobs/{id}` | 獲取單一職務 |
+| POST | `/api/jobs` | 新增職務 |
+| PUT | `/api/jobs/{id}` | 更新職務 |
+| DELETE | `/api/jobs/{id}` | 刪除職務 |
+| POST | `/api/jobs/{id}/change-code` | 更改職務編號 |
+
+#### 4.1.3 參照資料 API
+
+| 方法 | 端點 | 說明 |
+|------|------|------|
+| GET | `/api/reference/categories` | 崗位類別選項 |
+| GET | `/api/reference/job-categories` | 職務類別選項 |
+| GET | `/api/reference/natures` | 崗位性質選項 |
+| GET | `/api/reference/education` | 學歷選項 |
+| GET | `/api/reference/majors` | 專業選項 |
+
+### 4.2 API 請求/回應範例
+
+#### 4.2.1 新增崗位
+
+**Request**
+```http
+POST /api/positions
+Content-Type: application/json
+
+{
+  "basicInfo": {
+    "positionCode": "ENG-001",
+    "positionName": "資深軟體工程師",
+    "positionCategory": "01",
+    "positionNature": "FT",
+    "headcount": "5",
+    "positionLevel": "L3",
+    "effectiveDate": "2024-01-01",
+    "positionDesc": "負責系統架構設計與核心模組開發"
+  },
+  "recruitInfo": {
+    "minEducation": "BA",
+    "salaryRange": "D",
+    "workExperience": "5",
+    "skillReq": "Python, JavaScript, SQL"
+  }
+}
+```
+
+**Response (201 Created)**
+```json
+{
+  "success": true,
+  "message": "崗位資料新增成功",
+  "data": {
+    "id": "ENG-001",
+    "basicInfo": { ... },
+    "recruitInfo": { ... },
+    "createdAt": "2024-12-03T10:30:00",
+    "updatedAt": "2024-12-03T10:30:00"
+  }
+}
+```
+
+#### 4.2.2 查詢崗位列表
+
+**Request**
+```http
+GET /api/positions?page=1&size=20&search=工程師
+```
+
+**Response (200 OK)**
+```json
+{
+  "success": true,
+  "data": [
+    {
+      "id": "ENG-001",
+      "basicInfo": { ... },
+      "recruitInfo": { ... }
+    }
+  ],
+  "pagination": {
+    "page": 1,
+    "size": 20,
+    "total": 1,
+    "totalPages": 1
+  }
+}
+```
+
+### 4.3 錯誤處理
+
+| HTTP 狀態碼 | 錯誤類型 | 說明 |
+|-------------|----------|------|
+| 400 | Bad Request | 請求參數錯誤或缺少必填欄位 |
+| 404 | Not Found | 找不到指定資源 |
+| 409 | Conflict | 資源衝突（如編號已存在） |
+| 500 | Internal Server Error | 伺服器內部錯誤 |
+
+**錯誤回應格式**
+```json
+{
+  "success": false,
+  "error": "錯誤訊息描述"
+}
+```
+
+---
+
+## 5. AI 自動填充功能設計
+
+### 5.1 功能概述
+
+系統整合 Claude API，提供智能表單填充功能。用戶點擊「✨ I'm feeling lucky」按鈕後，AI 會根據已填寫的內容，自動補充尚未填寫的欄位。
+
+### 5.2 填充邏輯
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                    AI 填充流程                           │
+├─────────────────────────────────────────────────────────┤
+│  1. 用戶點擊「I'm feeling lucky」按鈕                    │
+│                      │                                   │
+│                      ▼                                   │
+│  2. 檢查表單欄位狀態                                     │
+│     ├── 收集已填寫欄位 (作為上下文)                      │
+│     └── 識別空白欄位 (待填充目標)                        │
+│                      │                                   │
+│                      ▼                                   │
+│  3. 若無空白欄位 → 顯示「所有欄位都已填寫完成！」        │
+│     若有空白欄位 → 繼續                                  │
+│                      │                                   │
+│                      ▼                                   │
+│  4. 組裝 Prompt                                          │
+│     ├── 包含已填寫資料作為參考                           │
+│     ├── 指定只生成空白欄位                               │
+│     └── 要求返回 JSON 格式                               │
+│                      │                                   │
+│                      ▼                                   │
+│  5. 呼叫 Claude API (claude-sonnet-4-20250514)          │
+│                      │                                   │
+│                      ▼                                   │
+│  6. 解析回應並填充空白欄位                               │
+│     └── 已有內容的欄位保持不變                           │
+│                      │                                   │
+│                      ▼                                   │
+│  7. 顯示「✨ AI 已補充 N 個欄位！」                      │
+└─────────────────────────────────────────────────────────┘
+```
+
+### 5.3 核心函數
+
+#### 5.3.1 fillIfEmpty
+
+```javascript
+/**
+ * 只在欄位為空時填入值
+ * @param {string} elementId - DOM 元素 ID
+ * @param {string} value - 要填入的值
+ * @returns {boolean} - 是否有填入值
+ */
+function fillIfEmpty(elementId, value) {
+    const el = document.getElementById(elementId);
+    if (el && !el.value.trim() && value) {
+        el.value = value;
+        return true;
+    }
+    return false;
+}
+```
+
+#### 5.3.2 getEmptyFields
+
+```javascript
+/**
+ * 獲取空白欄位列表
+ * @param {string[]} fieldIds - 欄位 ID 陣列
+ * @returns {string[]} - 空白欄位 ID 陣列
+ */
+function getEmptyFields(fieldIds) {
+    return fieldIds.filter(id => !getFieldValue(id));
+}
+```
+
+### 5.4 API 呼叫規格
+
+**Endpoint**
+```
+POST https://api.anthropic.com/v1/messages
+```
+
+**Request Body**
+```json
+{
+  "model": "claude-sonnet-4-20250514",
+  "max_tokens": 2000,
+  "messages": [
+    {
+      "role": "user",
+      "content": "Prompt 內容..."
+    }
+  ]
+}
+```
+
+### 5.5 Prompt 設計範例
+
+```
+請為HR崗位管理系統生成崗位基礎資料。請用繁體中文回覆。
+
+已填寫的資料（請參考這些內容來生成相關的資料）：
+{
+  "positionName": "資深前端工程師",
+  "positionLevel": "L4"
+}
+
+請「只生成」以下這些尚未填寫的欄位：positionCode, positionCategory, positionNature, headcount, positionDesc
+
+欄位說明：
+- positionCode: 崗位編號（格式如 ENG-001）
+- positionCategory: 崗位類別代碼（01=技術職, 02=管理職...）
+...
+
+請直接返回JSON格式，只包含需要生成的欄位：
+{
+  "positionCode": "...",
+  "positionCategory": "...",
+  ...
+}
+```
+
+---
+
+## 6. 使用者介面設計
+
+### 6.1 色彩規範
+
+| 變數名稱 | 色碼 | 用途 |
+|----------|------|------|
+| --primary | #1a5276 | 主色（崗位模組） |
+| --primary-light | #2980b9 | 主色亮色 |
+| --primary-dark | #0e3a53 | 主色暗色 |
+| --accent | #e67e22 | 強調色（職務模組） |
+| --green | #27ae60 | 綠色（崗位描述模組） |
+| --success | #27ae60 | 成功狀態 |
+| --warning | #f39c12 | 警告狀態 |
+| --danger | #e74c3c | 錯誤/必填標示 |
+
+### 6.2 模組主題色
+
+| 模組 | Header 背景 | 按鈕樣式 |
+|------|-------------|----------|
+| 崗位基礎資料 | 藍色漸層 | primary |
+| 職務基礎資料 | 橘色漸層 | accent |
+| 崗位描述 | 綠色漸層 | green |
+
+### 6.3 元件規格
+
+#### 6.3.1 輸入框
+
+```css
+input, select, textarea {
+    padding: 10px 14px;
+    border: 1.5px solid var(--border);
+    border-radius: 6px;
+    font-size: 0.9rem;
+}
+```
+
+#### 6.3.2 按鈕
+
+| 類型 | Class | 用途 |
+|------|-------|------|
+| 主要按鈕 | .btn-primary | 保存操作 |
+| 次要按鈕 | .btn-secondary | 保存並新增 |
+| 取消按鈕 | .btn-cancel | 取消操作 |
+| AI 按鈕 | .ai-generate-btn | AI 自動填充 |
+
+#### 6.3.3 Toggle 開關
+
+```css
+.toggle-switch {
+    width: 52px;
+    height: 28px;
+}
+```
+
+### 6.4 響應式斷點
+
+| 斷點 | 寬度 | 佈局調整 |
+|------|------|----------|
+| Desktop | > 768px | 雙欄表單佈局 |
+| Mobile | ≤ 768px | 單欄表單佈局 |
+
+---
+
+## 7. 資料結構
+
+### 7.1 崗位資料 (Position)
+
+```typescript
+interface Position {
+  id: string;                    // 崗位編號 (PK)
+  basicInfo: {
+    positionCode: string;        // 崗位編號
+    positionName: string;        // 崗位名稱
+    positionCategory: string;    // 崗位類別
+    positionCategoryName: string;// 崗位類別名稱
+    positionNature: string;      // 崗位性質
+    positionNatureName: string;  // 崗位性質名稱
+    headcount: string;           // 編制人數
+    positionLevel: string;       // 崗位級別
+    effectiveDate: string;       // 生效日期
+    positionDesc: string;        // 崗位描述
+    positionRemark: string;      // 崗位備注
+  };
+  recruitInfo: {
+    minEducation: string;        // 最低學歷
+    requiredGender: string;      // 要求性別
+    salaryRange: string;         // 薪酬范圍
+    workExperience: string;      // 工作經驗
+    minAge: string;              // 最小年齡
+    maxAge: string;              // 最大年齡
+    jobType: string;             // 工作性質
+    recruitPosition: string;     // 招聘職位
+    jobTitle: string;            // 職位名稱
+    jobDesc: string;             // 職位描述
+    positionReq: string;         // 崗位要求
+    titleReq: string;            // 職稱要求
+    majorReq: string;            // 專業要求
+    skillReq: string;            // 技能要求
+    langReq: string;             // 語言要求
+    otherReq: string;            // 其他要求
+    superiorPosition: string;    // 上級崗位編號
+    recruitRemark: string;       // 備注說明
+  };
+  createdAt: string;             // 建立時間
+  updatedAt: string;             // 更新時間
+}
+```
+
+### 7.2 職務資料 (Job)
+
+```typescript
+interface Job {
+  id: string;                    // 職務編號 (PK)
+  jobCategoryCode: string;       // 職務類別編號
+  jobCategoryName: string;       // 職務類別名稱
+  jobCode: string;               // 職務編號
+  jobName: string;               // 職務名稱
+  jobNameEn: string;             // 職務英文名稱
+  jobEffectiveDate: string;      // 生效日期
+  jobHeadcount: number;          // 編制人數
+  jobSortOrder: number;          // 排列順序
+  jobRemark: string;             // 備注說明
+  jobLevel: string;              // 職務層級
+  hasAttendanceBonus: boolean;   // 是否有全勤
+  hasHousingAllowance: boolean;  // 是否住房補貼
+  createdAt: string;             // 建立時間
+  updatedAt: string;             // 更新時間
+}
+```
+
+### 7.3 崗位描述資料 (JobDescription)
+
+```typescript
+interface JobDescription {
+  id: string;                    // ID (PK)
+  basicInfo: {
+    empNo: string;               // 工號
+    empName: string;             // 姓名
+    positionCode: string;        // 崗位代碼
+    versionDate: string;         // 版本更新日期
+  };
+  positionInfo: {
+    positionName: string;        // 崗位名稱
+    department: string;          // 所屬部門
+    positionEffectiveDate: string; // 崗位生效日期
+    directSupervisor: string;    // 直接領導職務
+    positionGradeJob: string;    // 崗位職等&職務
+    reportTo: string;            // 匯報對象職務
+    directReports: string;       // 直接下級
+    workLocation: string;        // 任職地點
+    empAttribute: string;        // 員工屬性
+  };
+  responsibilities: {
+    positionPurpose: string;     // 崗位設置目的
+    mainResponsibilities: string;// 主要崗位職責
+  };
+  requirements: {
+    education: string;           // 教育程度
+    basicSkills: string;         // 基本技能
+    professionalKnowledge: string; // 專業知識
+    workExperienceReq: string;   // 工作經驗
+    otherRequirements: string;   // 其他要求
+  };
+  createdAt: string;             // 建立時間
+  updatedAt: string;             // 更新時間
+}
+```
+
+---
+
+## 8. 快捷鍵設計
+
+| 快捷鍵 | 功能 | 適用範圍 |
+|--------|------|----------|
+| `Ctrl + S` | 保存并退出 | 所有模組 |
+| `Ctrl + N` | 保存并新增 | 所有模組 |
+
+---
+
+## 9. 檔案結構
+
+```
+hr_position_form/
+├── index.html          # 前端應用主檔
+├── app.py              # Flask 後端 API
+├── requirements.txt    # Python 依賴套件
+├── README.md           # 使用說明文件
+└── SDD.md              # 軟體設計文件（本文件）
+```
+
+---
+
+## 10. 未來擴展建議
+
+### 10.1 資料庫整合
+
+將 In-Memory 儲存替換為正式資料庫：
+
+```python
+# 建議使用 SQLAlchemy ORM
+from flask_sqlalchemy import SQLAlchemy
+
+app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://user:pass@host/db'
+db = SQLAlchemy(app)
+```
+
+### 10.2 權限控制整合
+
+```python
+# 建議整合 Azure AD
+from flask_azure_oauth import AzureOAuth
+
+azure_oauth = AzureOAuth(app)
+
+@app.route('/api/positions', methods=['POST'])
+@azure_oauth.require_auth
+def create_position():
+    ...
+```
+
+### 10.3 審計日誌
+
+```python
+# 記錄所有資料變更
+def log_audit(action, entity_type, entity_id, old_data, new_data, user_id):
+    audit_log = {
+        'action': action,        # CREATE/UPDATE/DELETE
+        'entity_type': entity_type,
+        'entity_id': entity_id,
+        'old_data': old_data,
+        'new_data': new_data,
+        'user_id': user_id,
+        'timestamp': datetime.now().isoformat()
+    }
+    # 儲存至審計日誌表
+```
+
+### 10.4 多語言支援
+
+```javascript
+// i18n 國際化
+const i18n = {
+  'zh-TW': {
+    'position.code': '崗位編號',
+    'position.name': '崗位名稱',
+    ...
+  },
+  'en-US': {
+    'position.code': 'Position Code',
+    'position.name': 'Position Name',
+    ...
+  }
+};
+```
+
+---
+
+## 11. 版本歷史
+
+| 版本 | 日期 | 作者 | 變更說明 |
+|------|------|------|----------|
+| 1.0 | 2024-12-03 | System | 初始版本，包含三大模組設計與 AI 功能 |
+
+---
+
+## 12. 附錄
+
+### 附錄 A：JSON 資料預覽格式
+
+系統提供即時 JSON 預覽功能，格式如下：
+
+```json
+{
+  "module": "崗位基礎資料",
+  "basicInfo": {
+    "positionCode": "ENG-001",
+    "positionName": "資深軟體工程師",
+    "positionCategory": "01",
+    "positionCategoryName": "技術職",
+    "positionNature": "FT",
+    "positionNatureName": "全職",
+    "headcount": "5",
+    "positionLevel": "L3"
+  },
+  "recruitInfo": {
+    "minEducation": "BA",
+    "salaryRange": "D",
+    "workExperience": "5"
+  }
+}
+```
+
+### 附錄 B：UI 截圖參考
+
+（請參考系統實際畫面）
+
+---
+
+**文件結束**
diff --git a/SETUP.md b/SETUP.md
new file mode 100644
index 0000000..4e27b79
--- /dev/null
+++ b/SETUP.md
@@ -0,0 +1,438 @@
+# HR 基礎資料維護系統 - 安裝與配置指南
+
+## 📋 目錄
+
+1. [系統需求](#系統需求)
+2. [環境配置](#環境配置)
+3. [資料庫設置](#資料庫設置)
+4. [Gitea 版本控制設置](#gitea-版本控制設置)
+5. [LLM API 配置](#llm-api-配置)
+6. [啟動系統](#啟動系統)
+7. [功能測試](#功能測試)
+8. [常見問題](#常見問題)
+
+---
+
+## 系統需求
+
+### 軟體需求
+
+- **Python**: 3.8 或更高版本
+- **MySQL**: 5.7 或更高版本
+- **Git**: 2.0 或更高版本 (用於版本控制)
+- **現代瀏覽器**: Chrome, Firefox, Edge (最新版本)
+
+### 硬體需求
+
+- **記憶體**: 最少 2GB RAM
+- **硬碟**: 最少 500MB 可用空間
+- **網路**: 穩定的網際網路連線 (用於 LLM API)
+
+---
+
+## 環境配置
+
+### 1. 複製或下載項目
+
+```bash
+cd d:/00001_Vibe_coding/1204剛為
+```
+
+### 2. 創建虛擬環境 (建議)
+
+```bash
+# Windows
+python -m venv venv
+venv\Scripts\activate
+
+# Linux/Mac
+python3 -m venv venv
+source venv/bin/activate
+```
+
+### 3. 安裝依賴套件
+
+```bash
+pip install -r requirements_full.txt
+```
+
+如果出現錯誤,可以嘗試逐個安裝:
+
+```bash
+pip install flask flask-cors pymysql python-dotenv requests gitpython
+```
+
+### 4. 配置環境變數
+
+項目根目錄下已有 [.env](./.env) 文件,請根據實際情況修改:
+
+```env
+# MySQL Database Configuration
+DB_HOST=mysql.theaken.com
+DB_PORT=33306
+DB_NAME=db_A102
+DB_USER=A102
+DB_PASSWORD=Bb123456
+
+# Gitea Version Control Configuration
+GITEA_URL=https://gitea.theaken.com/
+GITEA_USER=donald
+GITEA_PASSWORD=!QAZ2wsx
+GITEA_TOKEN=9e0a888d1a25bde9cf2ad5dff2bb7ee6d68d6ff0
+
+# LLM API Keys (需要自行申請並填寫)
+GEMINI_API_KEY=your_gemini_api_key_here
+DEEPSEEK_API_KEY=your_deepseek_api_key_here
+OPENAI_API_KEY=your_openai_api_key_here
+```
+
+⚠️ **重要**: `.env` 文件包含敏感資訊,已加入 `.gitignore`,請勿上傳到版本控制系統。
+
+---
+
+## 資料庫設置
+
+### 1. 測試資料庫連線
+
+```bash
+python init_database.py
+```
+
+此腳本會:
+- 測試資料庫連線
+- 創建 `hr_position_system` 資料庫架構
+- 建立所有必要的資料表
+- 插入參照資料
+
+### 2. 驗證資料表
+
+成功執行後,應該會看到以下資料表:
+
+- `positions` - 崗位基礎資料表
+- `jobs` - 職務基礎資料表
+- `job_descriptions` - 崗位描述表
+- `reference_codes` - 參照資料代碼表
+- `audit_logs` - 審計日誌表
+
+### 3. 手動執行 SQL (可選)
+
+如果自動腳本失敗,可以手動執行:
+
+```bash
+# 使用 MySQL 客戶端
+mysql -h mysql.theaken.com -P 33306 -u A102 -p db_A102 < database_schema.sql
+```
+
+---
+
+## Gitea 版本控制設置
+
+### 1. 測試 Gitea 連線
+
+```bash
+python init_gitea.py
+```
+
+此腳本會:
+- 測試 Gitea 伺服器連線
+- 創建新的 Git 倉庫 (如果不存在)
+- 配置本地 Git remote
+- 創建初始提交
+
+### 2. 推送到 Gitea
+
+```bash
+git push -u origin main
+```
+
+### 3. 訪問 Gitea 倉庫
+
+在瀏覽器中訪問: [https://gitea.theaken.com/donald/hr-position-system](https://gitea.theaken.com/donald/hr-position-system)
+
+---
+
+## LLM API 配置
+
+系統支援三種 LLM API:
+
+### 1. Google Gemini
+
+1. 訪問 [Google AI Studio](https://makersuite.google.com/app/apikey)
+2. 創建 API Key
+3. 將 API Key 填入 `.env` 文件的 `GEMINI_API_KEY`
+
+### 2. DeepSeek
+
+1. 訪問 [DeepSeek 官網](https://www.deepseek.com/)
+2. 註冊並獲取 API Key
+3. 將 API Key 填入 `.env` 文件的 `DEEPSEEK_API_KEY`
+
+### 3. OpenAI
+
+1. 訪問 [OpenAI Platform](https://platform.openai.com/api-keys)
+2. 創建 API Key
+3. 將 API Key 填入 `.env` 文件的 `OPENAI_API_KEY`
+
+### 4. 測試 LLM API
+
+```bash
+python llm_config.py
+```
+
+此腳本會測試所有已配置的 API 連線狀態。
+
+---
+
+## 啟動系統
+
+### 方法 1: 使用更新版的 app (包含 LLM 功能)
+
+```bash
+# 備份原有的 app.py
+mv app.py app_original.py
+
+# 使用新版 app
+mv app_updated.py app.py
+
+# 啟動系統
+python app.py
+```
+
+### 方法 2: 直接使用更新版
+
+```bash
+python app_updated.py
+```
+
+### 啟動成功
+
+您應該會看到類似以下的輸出:
+
+```
+╔══════════════════════════════════════════════════════════════╗
+║         HR 基礎資料維護系統 - Flask Backend                   ║
+╠══════════════════════════════════════════════════════════════╣
+║  伺服器啟動中...                                              ║
+║  訪問網址: http://localhost:5000                              ║
+...
+╚══════════════════════════════════════════════════════════════╝
+
+✓ LLM 功能已啟用
+  已配置的 API: gemini, deepseek, openai
+```
+
+---
+
+## 功能測試
+
+### 1. 訪問主頁面
+
+在瀏覽器中打開: [http://localhost:5000](http://localhost:5000)
+
+### 2. 測試 LLM API 連線
+
+訪問 API 測試頁面: [http://localhost:5000/api-test](http://localhost:5000/api-test)
+
+在此頁面可以:
+- 查看所有 LLM API 配置狀態
+- 單獨測試每個 API 連線
+- 一次測試所有 API
+
+### 3. 測試 REST API
+
+使用 Postman 或 curl 測試 API:
+
+```bash
+# 獲取崗位列表
+curl http://localhost:5000/api/positions
+
+# 獲取職務列表
+curl http://localhost:5000/api/jobs
+
+# 測試 LLM API 配置
+curl http://localhost:5000/api/llm/config
+
+# 測試 Gemini API
+curl http://localhost:5000/api/llm/test/gemini
+```
+
+### 4. 測試崗位資料 CRUD
+
+1. **新增崗位**: 點擊「新增崗位」按鈕
+2. **填寫表單**: 輸入崗位基本資料
+3. **AI 自動填充**: 點擊「✨ I'm feeling lucky」按鈕
+4. **保存資料**: 點擊「保存並退出」
+
+### 5. 測試錯誤處理
+
+系統已集成全局錯誤處理:
+
+- 所有 API 錯誤會自動顯示錯誤對話框
+- 網路錯誤會有友好的提示訊息
+- 可以在瀏覽器控制台查看詳細錯誤信息
+
+---
+
+## 常見問題
+
+### Q1: 資料庫連線失敗
+
+**問題**: 執行 `init_database.py` 時出現連線錯誤
+
+**解決方案**:
+1. 檢查 `.env` 文件中的資料庫配置是否正確
+2. 確認資料庫伺服器是否可訪問:
+   ```bash
+   ping mysql.theaken.com
+   ```
+3. 檢查防火牆是否阻擋了 33306 端口
+4. 確認資料庫用戶名和密碼正確
+
+### Q2: Gitea 推送失敗
+
+**問題**: `git push` 時要求輸入密碼
+
+**解決方案**:
+1. 使用 Token 進行認證:
+   ```bash
+   git remote set-url origin https://donald:9e0a888d1a25bde9cf2ad5dff2bb7ee6d68d6ff0@gitea.theaken.com/donald/hr-position-system.git
+   ```
+2. 或配置 Git credential helper
+
+### Q3: LLM API 測試失敗
+
+**問題**: LLM API 連線測試顯示失敗
+
+**解決方案**:
+1. 檢查 API Key 是否正確填寫在 `.env` 文件中
+2. 確認 API Key 是否有效 (未過期)
+3. 檢查網路連線是否正常
+4. 查看是否有 API 配額限制
+
+### Q4: 端口被占用
+
+**問題**: 啟動 Flask 時提示 `Address already in use`
+
+**解決方案**:
+1. 更改端口:
+   ```python
+   app.run(host='0.0.0.0', port=5001, debug=True)
+   ```
+2. 或關閉占用 5000 端口的進程:
+   ```bash
+   # Windows
+   netstat -ano | findstr :5000
+   taskkill /PID <PID> /F
+
+   # Linux/Mac
+   lsof -i :5000
+   kill -9 <PID>
+   ```
+
+### Q5: 前端頁面無法訪問
+
+**問題**: 瀏覽器顯示 404 Not Found
+
+**解決方案**:
+1. 確認 Flask 已正確啟動
+2. 檢查 `index.html` 是否存在於項目根目錄
+3. 清除瀏覽器緩存並重新載入
+
+### Q6: LLM 功能未啟用
+
+**問題**: 系統提示「LLM 功能未啟用」
+
+**解決方案**:
+1. 確認 `llm_config.py` 文件存在
+2. 確認已安裝 `requests` 套件:
+   ```bash
+   pip install requests
+   ```
+3. 使用 `app_updated.py` 而非原始的 `app.py`
+
+---
+
+## 系統架構
+
+```
+┌─────────────────────────────────────────┐
+│         使用者瀏覽器                     │
+│  ┌───────────────────────────────────┐  │
+│  │   index.html (主應用)              │  │
+│  │   api_test.html (API測試頁)       │  │
+│  │   error_handler.js (錯誤處理)     │  │
+│  └───────────────────────────────────┘  │
+└─────────────────────────────────────────┘
+              │
+              ▼
+┌─────────────────────────────────────────┐
+│       Flask Backend (app.py)            │
+│  ┌───────────────────────────────────┐  │
+│  │  崗位資料 API                      │  │
+│  │  職務資料 API                      │  │
+│  │  參照資料 API                      │  │
+│  │  LLM API (llm_config.py)          │  │
+│  └───────────────────────────────────┘  │
+└─────────────────────────────────────────┘
+              │
+        ┌─────┴─────┐
+        ▼           ▼
+┌──────────┐  ┌──────────┐
+│  MySQL   │  │ LLM APIs │
+│ Database │  │ (Gemini, │
+│          │  │ DeepSeek,│
+│          │  │ OpenAI)  │
+└──────────┘  └──────────┘
+```
+
+---
+
+## 檔案說明
+
+| 檔案 | 說明 |
+|------|------|
+| `.env` | 環境變數配置 |
+| `.gitignore` | Git 忽略檔案配置 |
+| `database_schema.sql` | MySQL 資料庫架構 |
+| `init_database.py` | 資料庫初始化腳本 |
+| `init_gitea.py` | Gitea 倉庫初始化腳本 |
+| `llm_config.py` | LLM API 配置模組 |
+| `app.py` | Flask 後端主程式 (原始版) |
+| `app_updated.py` | Flask 後端主程式 (包含 LLM) |
+| `error_handler.js` | 全局錯誤處理模組 |
+| `api_test.html` | LLM API 測試頁面 |
+| `index.html` | 主應用頁面 |
+| `requirements_full.txt` | Python 依賴套件列表 |
+| `SDD.md` | 軟體設計文件 |
+| `SETUP.md` | 本安裝指南 |
+
+---
+
+## 技術支援
+
+如遇到問題,請:
+
+1. 查看瀏覽器控制台的錯誤訊息
+2. 檢查 Flask 終端的錯誤日誌
+3. 參考本文檔的[常見問題](#常見問題)章節
+4. 查看系統設計文件 `SDD.md`
+
+---
+
+## 更新日誌
+
+### Version 1.0 (2024-12-03)
+
+- ✅ 初始版本發布
+- ✅ 資料庫架構設計與初始化
+- ✅ Gitea 版本控制整合
+- ✅ LLM API 整合 (Gemini, DeepSeek, OpenAI)
+- ✅ 全局錯誤處理機制
+- ✅ API 測試頁面
+- ✅ 環境配置自動化
+
+---
+
+**文件版本**: 1.0
+**最後更新**: 2024-12-03
+**維護者**: HR System Development Team
diff --git a/api_test.html b/api_test.html
new file mode 100644
index 0000000..d83e4b1
--- /dev/null
+++ b/api_test.html
@@ -0,0 +1,520 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LLM API 連線測試 - HR 系統</title>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary: #1a5276;
+            --primary-light: #2980b9;
+            --success: #27ae60;
+            --danger: #e74c3c;
+            --warning: #f39c12;
+            --border: #ddd;
+            --bg-light: #f8f9fa;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            overflow: hidden;
+        }
+
+        .header {
+            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+
+        .header h1 {
+            font-size: 2rem;
+            margin-bottom: 10px;
+        }
+
+        .header p {
+            opacity: 0.9;
+            font-size: 1rem;
+        }
+
+        .content {
+            padding: 30px;
+        }
+
+        .api-card {
+            background: var(--bg-light);
+            border: 2px solid var(--border);
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 20px;
+            transition: all 0.3s;
+        }
+
+        .api-card:hover {
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        }
+
+        .api-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+
+        .api-name {
+            font-size: 1.3rem;
+            font-weight: 600;
+            color: var(--primary);
+        }
+
+        .status-badge {
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 0.85rem;
+            font-weight: 500;
+        }
+
+        .status-pending {
+            background: #e8e8e8;
+            color: #666;
+        }
+
+        .status-success {
+            background: #d4edda;
+            color: var(--success);
+        }
+
+        .status-error {
+            background: #f8d7da;
+            color: var(--danger);
+        }
+
+        .status-testing {
+            background: #fff3cd;
+            color: var(--warning);
+        }
+
+        .api-info {
+            display: grid;
+            grid-template-columns: 120px 1fr;
+            gap: 10px;
+            margin-bottom: 15px;
+            font-size: 0.9rem;
+        }
+
+        .api-info-label {
+            font-weight: 600;
+            color: #555;
+        }
+
+        .api-info-value {
+            color: #333;
+            word-break: break-all;
+        }
+
+        .api-key-display {
+            font-family: 'Courier New', monospace;
+            background: white;
+            padding: 8px;
+            border-radius: 4px;
+            border: 1px solid var(--border);
+        }
+
+        .api-key-masked {
+            color: #999;
+        }
+
+        .api-actions {
+            display: flex;
+            gap: 10px;
+            margin-top: 15px;
+        }
+
+        .btn {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-family: 'Noto Sans TC', sans-serif;
+        }
+
+        .btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .btn-primary {
+            background: var(--primary);
+            color: white;
+        }
+
+        .btn-primary:hover:not(:disabled) {
+            background: var(--primary-light);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(26, 82, 118, 0.3);
+        }
+
+        .btn-success {
+            background: var(--success);
+            color: white;
+        }
+
+        .btn-success:hover:not(:disabled) {
+            background: #229954;
+            transform: translateY(-2px);
+        }
+
+        .result-message {
+            margin-top: 15px;
+            padding: 12px;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            display: none;
+        }
+
+        .result-message.show {
+            display: block;
+        }
+
+        .result-success {
+            background: #d4edda;
+            color: var(--success);
+            border: 1px solid var(--success);
+        }
+
+        .result-error {
+            background: #f8d7da;
+            color: var(--danger);
+            border: 1px solid var(--danger);
+        }
+
+        .test-all-section {
+            text-align: center;
+            margin: 30px 0;
+            padding: 20px;
+            background: var(--bg-light);
+            border-radius: 8px;
+        }
+
+        .test-all-btn {
+            padding: 15px 40px;
+            font-size: 1.1rem;
+        }
+
+        .loading-spinner {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border: 3px solid rgba(255,255,255,.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 1s ease-in-out infinite;
+            margin-left: 8px;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .summary {
+            background: white;
+            border: 2px solid var(--primary);
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 30px;
+        }
+
+        .summary h2 {
+            color: var(--primary);
+            margin-bottom: 15px;
+            font-size: 1.3rem;
+        }
+
+        .summary-stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 15px;
+        }
+
+        .stat-box {
+            text-align: center;
+            padding: 15px;
+            border-radius: 6px;
+            background: var(--bg-light);
+        }
+
+        .stat-value {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 5px;
+        }
+
+        .stat-label {
+            font-size: 0.85rem;
+            color: #666;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🔌 LLM API 連線測試</h1>
+            <p>HR 基礎資料維護系統 - API 配置檢測</p>
+        </div>
+
+        <div class="content">
+            <!-- Summary Section -->
+            <div class="summary">
+                <h2>📊 API 配置總覽</h2>
+                <div class="summary-stats">
+                    <div class="stat-box">
+                        <div class="stat-value" id="totalApis">3</div>
+                        <div class="stat-label">API 總數</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="stat-value" id="configuredApis" style="color: var(--success);">0</div>
+                        <div class="stat-label">已配置</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="stat-value" id="testedApis" style="color: var(--primary);">0</div>
+                        <div class="stat-label">已測試</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="stat-value" id="successApis" style="color: var(--success);">0</div>
+                        <div class="stat-label">測試成功</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Test All Button -->
+            <div class="test-all-section">
+                <button class="btn btn-success test-all-btn" onclick="testAllAPIs()">
+                    🚀 測試所有已配置的 API
+                </button>
+            </div>
+
+            <!-- Gemini API Card -->
+            <div class="api-card" id="gemini-card">
+                <div class="api-header">
+                    <div class="api-name">🔷 Google Gemini</div>
+                    <div class="status-badge status-pending" id="gemini-status">未測試</div>
+                </div>
+                <div class="api-info">
+                    <div class="api-info-label">API Key:</div>
+                    <div class="api-info-value">
+                        <div class="api-key-display" id="gemini-key">
+                            <span class="api-key-masked">••••••••••••••••</span>
+                        </div>
+                    </div>
+                    <div class="api-info-label">Endpoint:</div>
+                    <div class="api-info-value">https://generativelanguage.googleapis.com</div>
+                    <div class="api-info-label">狀態:</div>
+                    <div class="api-info-value" id="gemini-config-status">等待檢測...</div>
+                </div>
+                <div class="api-actions">
+                    <button class="btn btn-primary" onclick="testAPI('gemini')" id="gemini-test-btn">
+                        🧪 測試連線
+                    </button>
+                </div>
+                <div class="result-message" id="gemini-result"></div>
+            </div>
+
+            <!-- DeepSeek API Card -->
+            <div class="api-card" id="deepseek-card">
+                <div class="api-header">
+                    <div class="api-name">🔵 DeepSeek</div>
+                    <div class="status-badge status-pending" id="deepseek-status">未測試</div>
+                </div>
+                <div class="api-info">
+                    <div class="api-info-label">API Key:</div>
+                    <div class="api-info-value">
+                        <div class="api-key-display" id="deepseek-key">
+                            <span class="api-key-masked">••••••••••••••••</span>
+                        </div>
+                    </div>
+                    <div class="api-info-label">Endpoint:</div>
+                    <div class="api-info-value">https://api.deepseek.com/v1</div>
+                    <div class="api-info-label">狀態:</div>
+                    <div class="api-info-value" id="deepseek-config-status">等待檢測...</div>
+                </div>
+                <div class="api-actions">
+                    <button class="btn btn-primary" onclick="testAPI('deepseek')" id="deepseek-test-btn">
+                        🧪 測試連線
+                    </button>
+                </div>
+                <div class="result-message" id="deepseek-result"></div>
+            </div>
+
+            <!-- OpenAI API Card -->
+            <div class="api-card" id="openai-card">
+                <div class="api-header">
+                    <div class="api-name">🟢 OpenAI</div>
+                    <div class="status-badge status-pending" id="openai-status">未測試</div>
+                </div>
+                <div class="api-info">
+                    <div class="api-info-label">API Key:</div>
+                    <div class="api-info-value">
+                        <div class="api-key-display" id="openai-key">
+                            <span class="api-key-masked">••••••••••••••••</span>
+                        </div>
+                    </div>
+                    <div class="api-info-label">Endpoint:</div>
+                    <div class="api-info-value">https://api.openai.com/v1</div>
+                    <div class="api-info-label">狀態:</div>
+                    <div class="api-info-value" id="openai-config-status">等待檢測...</div>
+                </div>
+                <div class="api-actions">
+                    <button class="btn btn-primary" onclick="testAPI('openai')" id="openai-test-btn">
+                        🧪 測試連線
+                    </button>
+                </div>
+                <div class="result-message" id="openai-result"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Check API configuration on page load
+        window.addEventListener('DOMContentLoaded', checkAPIConfiguration);
+
+        async function checkAPIConfiguration() {
+            try {
+                const response = await fetch('/api/llm/config');
+                const data = await response.json();
+
+                let configured = 0;
+                let tested = 0;
+
+                // Update UI for each API
+                ['gemini', 'deepseek', 'openai'].forEach(api => {
+                    const config = data[api];
+                    const isConfigured = config && config.enabled;
+
+                    if (isConfigured) {
+                        configured++;
+                        document.getElementById(`${api}-config-status`).textContent = '✓ 已配置';
+                        document.getElementById(`${api}-config-status`).style.color = 'var(--success)';
+
+                        // Show partial API key
+                        if (config.api_key) {
+                            const maskedKey = config.api_key.substring(0, 8) + '••••••••' + config.api_key.substring(config.api_key.length - 4);
+                            document.getElementById(`${api}-key`).innerHTML = `<span>${maskedKey}</span>`;
+                        }
+                    } else {
+                        document.getElementById(`${api}-config-status`).textContent = '✗ 未配置';
+                        document.getElementById(`${api}-config-status`).style.color = 'var(--danger)';
+                        document.getElementById(`${api}-test-btn`).disabled = true;
+                    }
+                });
+
+                // Update summary
+                document.getElementById('configuredApis').textContent = configured;
+
+            } catch (error) {
+                showError('無法載入 API 配置');
+            }
+        }
+
+        async function testAPI(apiName) {
+            const statusBadge = document.getElementById(`${apiName}-status`);
+            const resultDiv = document.getElementById(`${apiName}-result`);
+            const testBtn = document.getElementById(`${apiName}-test-btn`);
+
+            // Update UI to testing state
+            statusBadge.className = 'status-badge status-testing';
+            statusBadge.innerHTML = '測試中<span class="loading-spinner"></span>';
+            testBtn.disabled = true;
+            resultDiv.className = 'result-message';
+            resultDiv.style.display = 'none';
+
+            try {
+                const response = await fetch(`/api/llm/test/${apiName}`);
+                const data = await response.json();
+
+                if (data.success) {
+                    statusBadge.className = 'status-badge status-success';
+                    statusBadge.textContent = '✓ 連線成功';
+                    resultDiv.className = 'result-message result-success show';
+                    resultDiv.textContent = `✓ ${data.message}`;
+                    updateSummary('tested', true);
+                } else {
+                    statusBadge.className = 'status-badge status-error';
+                    statusBadge.textContent = '✗ 連線失敗';
+                    resultDiv.className = 'result-message result-error show';
+                    resultDiv.textContent = `✗ ${data.message}`;
+                    updateSummary('tested', false);
+                }
+
+            } catch (error) {
+                statusBadge.className = 'status-badge status-error';
+                statusBadge.textContent = '✗ 錯誤';
+                resultDiv.className = 'result-message result-error show';
+                resultDiv.textContent = `✗ 發生錯誤: ${error.message}`;
+                updateSummary('tested', false);
+            } finally {
+                testBtn.disabled = false;
+            }
+        }
+
+        async function testAllAPIs() {
+            const apis = ['gemini', 'deepseek', 'openai'];
+            const testBtn = document.querySelector('.test-all-btn');
+
+            testBtn.disabled = true;
+            testBtn.innerHTML = '測試中<span class="loading-spinner"></span>';
+
+            for (const api of apis) {
+                const isEnabled = !document.getElementById(`${api}-test-btn`).disabled;
+                if (isEnabled) {
+                    await testAPI(api);
+                    // Small delay between tests
+                    await new Promise(resolve => setTimeout(resolve, 500));
+                }
+            }
+
+            testBtn.disabled = false;
+            testBtn.innerHTML = '🚀 測試所有已配置的 API';
+        }
+
+        function updateSummary(type, success) {
+            const testedEl = document.getElementById('testedApis');
+            const successEl = document.getElementById('successApis');
+
+            if (type === 'tested') {
+                const currentTested = parseInt(testedEl.textContent) || 0;
+                testedEl.textContent = currentTested + 1;
+
+                if (success) {
+                    const currentSuccess = parseInt(successEl.textContent) || 0;
+                    successEl.textContent = currentSuccess + 1;
+                }
+            }
+        }
+
+        function showError(message) {
+            alert(message);
+        }
+    </script>
+</body>
+</html>
diff --git a/database_schema.sql b/database_schema.sql
new file mode 100644
index 0000000..9fbb486
--- /dev/null
+++ b/database_schema.sql
@@ -0,0 +1,259 @@
+-- HR Position System Database Schema
+-- Database: db_A102
+-- Schema: hr_position_system
+
+-- Create schema if not exists
+CREATE SCHEMA IF NOT EXISTS hr_position_system DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
+
+USE hr_position_system;
+
+-- ============================================================
+-- Table: positions (崗位基礎資料)
+-- ============================================================
+CREATE TABLE IF NOT EXISTS positions (
+    id VARCHAR(20) PRIMARY KEY COMMENT '崗位編號',
+    position_code VARCHAR(20) NOT NULL UNIQUE COMMENT '崗位編號',
+    position_name VARCHAR(100) NOT NULL COMMENT '崗位名稱',
+    position_category VARCHAR(2) COMMENT '崗位類別代碼',
+    position_category_name VARCHAR(50) COMMENT '崗位類別名稱',
+    position_nature VARCHAR(2) COMMENT '崗位性質代碼',
+    position_nature_name VARCHAR(50) COMMENT '崗位性質名稱',
+    headcount INT COMMENT '編制人數',
+    position_level VARCHAR(2) COMMENT '崗位級別',
+    effective_date DATE COMMENT '生效日期',
+    position_desc TEXT COMMENT '崗位描述',
+    position_remark TEXT COMMENT '崗位備注',
+
+    -- Recruitment Info
+    min_education VARCHAR(3) COMMENT '最低學歷',
+    required_gender VARCHAR(1) COMMENT '要求性別',
+    salary_range VARCHAR(1) COMMENT '薪酬范圍',
+    work_experience VARCHAR(2) COMMENT '工作經驗(年)',
+    min_age INT COMMENT '最小年齡',
+    max_age INT COMMENT '最大年齡',
+    job_type VARCHAR(2) COMMENT '工作性質',
+    recruit_position VARCHAR(3) COMMENT '招聘職位',
+    job_title VARCHAR(100) COMMENT '職位名稱',
+    job_desc TEXT COMMENT '職位描述',
+    position_req TEXT COMMENT '崗位要求',
+    title_req VARCHAR(4) COMMENT '職稱要求',
+    major_req VARCHAR(200) COMMENT '專業要求',
+    skill_req VARCHAR(200) COMMENT '技能要求',
+    lang_req VARCHAR(100) COMMENT '語言要求',
+    other_req VARCHAR(200) COMMENT '其他要求',
+    superior_position VARCHAR(20) COMMENT '上級崗位編號',
+    recruit_remark TEXT COMMENT '備注說明',
+
+    -- Metadata
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '建立時間',
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新時間',
+    created_by VARCHAR(50) COMMENT '建立人',
+    updated_by VARCHAR(50) COMMENT '更新人',
+
+    INDEX idx_position_code (position_code),
+    INDEX idx_position_name (position_name),
+    INDEX idx_position_category (position_category),
+    INDEX idx_position_level (position_level)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='崗位基礎資料表';
+
+-- ============================================================
+-- Table: jobs (職務基礎資料)
+-- ============================================================
+CREATE TABLE IF NOT EXISTS jobs (
+    id VARCHAR(20) PRIMARY KEY COMMENT '職務編號',
+    job_category_code VARCHAR(4) NOT NULL COMMENT '職務類別編號',
+    job_category_name VARCHAR(50) COMMENT '職務類別名稱',
+    job_code VARCHAR(20) NOT NULL UNIQUE COMMENT '職務編號',
+    job_name VARCHAR(100) NOT NULL COMMENT '職務名稱',
+    job_name_en VARCHAR(100) COMMENT '職務英文名稱',
+    job_effective_date DATE COMMENT '生效日期',
+    job_headcount INT COMMENT '編制人數',
+    job_sort_order INT COMMENT '排列順序',
+    job_remark TEXT COMMENT '備注說明',
+    job_level VARCHAR(50) COMMENT '職務層級',
+    has_attendance_bonus BOOLEAN DEFAULT FALSE COMMENT '是否有全勤',
+    has_housing_allowance BOOLEAN DEFAULT FALSE COMMENT '是否住房補貼',
+
+    -- Metadata
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '建立時間',
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新時間',
+    created_by VARCHAR(50) COMMENT '建立人',
+    updated_by VARCHAR(50) COMMENT '更新人',
+
+    INDEX idx_job_code (job_code),
+    INDEX idx_job_name (job_name),
+    INDEX idx_job_category (job_category_code)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='職務基礎資料表';
+
+-- ============================================================
+-- Table: job_descriptions (崗位描述)
+-- ============================================================
+CREATE TABLE IF NOT EXISTS job_descriptions (
+    id INT AUTO_INCREMENT PRIMARY KEY COMMENT '主鍵',
+    emp_no VARCHAR(20) COMMENT '工號',
+    emp_name VARCHAR(50) COMMENT '姓名',
+    position_code VARCHAR(20) COMMENT '崗位代碼',
+    version_date DATE COMMENT '版本更新日期',
+
+    -- Position Info
+    position_name VARCHAR(100) COMMENT '崗位名稱',
+    department VARCHAR(100) COMMENT '所屬部門',
+    position_effective_date DATE COMMENT '崗位生效日期',
+    direct_supervisor VARCHAR(100) COMMENT '直接領導職務',
+    position_grade_job VARCHAR(100) COMMENT '崗位職等&職務',
+    report_to VARCHAR(100) COMMENT '匯報對象職務',
+    direct_reports VARCHAR(200) COMMENT '直接下級',
+    work_location VARCHAR(3) COMMENT '任職地點',
+    emp_attribute VARCHAR(2) COMMENT '員工屬性',
+
+    -- Responsibilities
+    position_purpose VARCHAR(500) COMMENT '崗位設置目的',
+    main_responsibilities TEXT COMMENT '主要崗位職責',
+
+    -- Requirements
+    education VARCHAR(200) COMMENT '教育程度',
+    basic_skills TEXT COMMENT '基本技能',
+    professional_knowledge TEXT COMMENT '專業知識',
+    work_experience_req TEXT COMMENT '工作經驗',
+    other_requirements TEXT COMMENT '其他要求',
+
+    -- Metadata
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '建立時間',
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新時間',
+    created_by VARCHAR(50) COMMENT '建立人',
+    updated_by VARCHAR(50) COMMENT '更新人',
+
+    INDEX idx_emp_no (emp_no),
+    INDEX idx_position_code (position_code),
+    INDEX idx_version_date (version_date),
+    FOREIGN KEY (position_code) REFERENCES positions(position_code) ON DELETE SET NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='崗位描述表';
+
+-- ============================================================
+-- Table: reference_codes (參照資料代碼表)
+-- ============================================================
+CREATE TABLE IF NOT EXISTS reference_codes (
+    id INT AUTO_INCREMENT PRIMARY KEY COMMENT '主鍵',
+    code_type VARCHAR(50) NOT NULL COMMENT '代碼類型',
+    code_value VARCHAR(10) NOT NULL COMMENT '代碼值',
+    code_name VARCHAR(100) NOT NULL COMMENT '代碼名稱',
+    code_name_en VARCHAR(100) COMMENT '英文名稱',
+    sort_order INT DEFAULT 0 COMMENT '排序',
+    is_active BOOLEAN DEFAULT TRUE COMMENT '是否啟用',
+    remark VARCHAR(200) COMMENT '備注',
+
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '建立時間',
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新時間',
+
+    UNIQUE KEY uk_code_type_value (code_type, code_value),
+    INDEX idx_code_type (code_type)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='參照資料代碼表';
+
+-- ============================================================
+-- Table: audit_logs (審計日誌)
+-- ============================================================
+CREATE TABLE IF NOT EXISTS audit_logs (
+    id INT AUTO_INCREMENT PRIMARY KEY COMMENT '主鍵',
+    action VARCHAR(20) NOT NULL COMMENT '操作類型(CREATE/UPDATE/DELETE)',
+    entity_type VARCHAR(50) NOT NULL COMMENT '實體類型',
+    entity_id VARCHAR(50) NOT NULL COMMENT '實體ID',
+    old_data JSON COMMENT '變更前資料',
+    new_data JSON COMMENT '變更後資料',
+    user_id VARCHAR(50) COMMENT '操作用戶',
+    ip_address VARCHAR(50) COMMENT 'IP地址',
+    user_agent VARCHAR(200) COMMENT '用戶代理',
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '操作時間',
+
+    INDEX idx_entity_type_id (entity_type, entity_id),
+    INDEX idx_user_id (user_id),
+    INDEX idx_created_at (created_at)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='審計日誌表';
+
+-- ============================================================
+-- Insert Reference Data (參照資料初始化)
+-- ============================================================
+
+-- 崗位類別 (Position Category)
+INSERT INTO reference_codes (code_type, code_value, code_name, sort_order) VALUES
+('POSITION_CATEGORY', '01', '技術職', 1),
+('POSITION_CATEGORY', '02', '管理職', 2),
+('POSITION_CATEGORY', '03', '業務職', 3),
+('POSITION_CATEGORY', '04', '行政職', 4);
+
+-- 崗位性質 (Position Nature)
+INSERT INTO reference_codes (code_type, code_value, code_name, code_name_en, sort_order) VALUES
+('POSITION_NATURE', 'FT', '全職', 'Full-time', 1),
+('POSITION_NATURE', 'PT', '兼職', 'Part-time', 2),
+('POSITION_NATURE', 'CT', '約聘', 'Contract', 3),
+('POSITION_NATURE', 'IN', '實習', 'Intern', 4);
+
+-- 崗位級別 (Position Level)
+INSERT INTO reference_codes (code_type, code_value, code_name, sort_order) VALUES
+('POSITION_LEVEL', 'L1', '基層員工', 1),
+('POSITION_LEVEL', 'L2', '資深員工', 2),
+('POSITION_LEVEL', 'L3', '主管', 3),
+('POSITION_LEVEL', 'L4', '經理', 4),
+('POSITION_LEVEL', 'L5', '總監', 5),
+('POSITION_LEVEL', 'L6', '副總', 6),
+('POSITION_LEVEL', 'L7', '總經理', 7);
+
+-- 職務類別 (Job Category)
+INSERT INTO reference_codes (code_type, code_value, code_name, sort_order) VALUES
+('JOB_CATEGORY', 'MGR', '管理職', 1),
+('JOB_CATEGORY', 'TECH', '技術職', 2),
+('JOB_CATEGORY', 'SALE', '業務職', 3),
+('JOB_CATEGORY', 'ADMIN', '行政職', 4),
+('JOB_CATEGORY', 'RD', '研發職', 5),
+('JOB_CATEGORY', 'PROD', '生產職', 6);
+
+-- 學歷 (Education)
+INSERT INTO reference_codes (code_type, code_value, code_name, code_name_en, sort_order) VALUES
+('EDUCATION', 'HS', '高中', 'High School', 1),
+('EDUCATION', 'JC', '專科', 'Junior College', 2),
+('EDUCATION', 'BA', '大學', 'Bachelor', 3),
+('EDUCATION', 'MA', '碩士', 'Master', 4),
+('EDUCATION', 'PHD', '博士', 'PhD', 5);
+
+-- 薪酬范圍 (Salary Range)
+INSERT INTO reference_codes (code_type, code_value, code_name, sort_order) VALUES
+('SALARY_RANGE', 'A', 'A級', 1),
+('SALARY_RANGE', 'B', 'B級', 2),
+('SALARY_RANGE', 'C', 'C級', 3),
+('SALARY_RANGE', 'D', 'D級', 4),
+('SALARY_RANGE', 'E', 'E級', 5),
+('SALARY_RANGE', 'N', '面議', 6);
+
+-- 任職地點 (Work Location)
+INSERT INTO reference_codes (code_type, code_value, code_name, sort_order) VALUES
+('WORK_LOCATION', 'HQ', '總部', 1),
+('WORK_LOCATION', 'TPE', '台北辦公室', 2),
+('WORK_LOCATION', 'TYC', '桃園廠區', 3),
+('WORK_LOCATION', 'KHH', '高雄廠區', 4),
+('WORK_LOCATION', 'SH', '上海辦公室', 5),
+('WORK_LOCATION', 'SZ', '深圳辦公室', 6);
+
+-- 員工屬性 (Employee Attribute)
+INSERT INTO reference_codes (code_type, code_value, code_name, sort_order) VALUES
+('EMP_ATTRIBUTE', 'FT', '正式員工', 1),
+('EMP_ATTRIBUTE', 'CT', '約聘人員', 2),
+('EMP_ATTRIBUTE', 'PT', '兼職人員', 3),
+('EMP_ATTRIBUTE', 'IN', '實習生', 4),
+('EMP_ATTRIBUTE', 'DP', '派遣人員', 5);
+
+-- 招聘職位 (Recruit Position)
+INSERT INTO reference_codes (code_type, code_value, code_name, sort_order) VALUES
+('RECRUIT_POSITION', 'ENG', '工程師', 1),
+('RECRUIT_POSITION', 'MGR', '經理', 2),
+('RECRUIT_POSITION', 'AST', '助理', 3),
+('RECRUIT_POSITION', 'OP', '操作員', 4),
+('RECRUIT_POSITION', 'SAL', '業務', 5);
+
+-- 職稱要求 (Title Requirement)
+INSERT INTO reference_codes (code_type, code_value, code_name, sort_order) VALUES
+('TITLE_REQ', 'NONE', '無要求', 1),
+('TITLE_REQ', 'CERT', '需證書', 2),
+('TITLE_REQ', 'LIC', '需執照', 3);
+
+-- ============================================================
+-- End of Schema
+-- ============================================================
diff --git a/error_handler.js b/error_handler.js
new file mode 100644
index 0000000..02834b4
--- /dev/null
+++ b/error_handler.js
@@ -0,0 +1,559 @@
+/**
+ * Global Error Handler for HR Position System
+ * Provides unified error handling and user-friendly error dialogs
+ */
+
+class ErrorHandler {
+    constructor() {
+        this.init();
+    }
+
+    init() {
+        // Create error modal container if not exists
+        if (!document.getElementById('error-modal-container')) {
+            const container = document.createElement('div');
+            container.id = 'error-modal-container';
+            document.body.appendChild(container);
+        }
+
+        // Add error handler CSS
+        this.injectStyles();
+
+        // Setup global error handlers
+        this.setupGlobalHandlers();
+    }
+
+    injectStyles() {
+        if (document.getElementById('error-handler-styles')) {
+            return;
+        }
+
+        const style = document.createElement('style');
+        style.id = 'error-handler-styles';
+        style.textContent = `
+            .error-modal-overlay {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, 0.6);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 10000;
+                animation: fadeIn 0.3s ease;
+            }
+
+            .error-modal {
+                background: white;
+                border-radius: 12px;
+                padding: 0;
+                max-width: 500px;
+                width: 90%;
+                box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+                animation: slideDown 0.3s ease;
+                overflow: hidden;
+            }
+
+            .error-modal-header {
+                padding: 20px;
+                border-bottom: 2px solid #f0f0f0;
+                display: flex;
+                align-items: center;
+                gap: 15px;
+            }
+
+            .error-modal-header.error {
+                background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
+                color: white;
+                border-bottom-color: #c0392b;
+            }
+
+            .error-modal-header.warning {
+                background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
+                color: white;
+                border-bottom-color: #e67e22;
+            }
+
+            .error-modal-header.info {
+                background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+                color: white;
+                border-bottom-color: #2980b9;
+            }
+
+            .error-modal-header.success {
+                background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
+                color: white;
+                border-bottom-color: #229954;
+            }
+
+            .error-icon {
+                font-size: 2rem;
+                line-height: 1;
+            }
+
+            .error-title {
+                flex: 1;
+                font-size: 1.3rem;
+                font-weight: 600;
+                margin: 0;
+            }
+
+            .error-modal-body {
+                padding: 25px;
+                max-height: 400px;
+                overflow-y: auto;
+            }
+
+            .error-message {
+                color: #333;
+                line-height: 1.6;
+                margin-bottom: 15px;
+                font-size: 1rem;
+            }
+
+            .error-details {
+                background: #f8f9fa;
+                border: 1px solid #dee2e6;
+                border-radius: 6px;
+                padding: 15px;
+                margin-top: 15px;
+                font-family: 'Courier New', monospace;
+                font-size: 0.85rem;
+                color: #666;
+                max-height: 200px;
+                overflow-y: auto;
+                white-space: pre-wrap;
+                word-break: break-word;
+            }
+
+            .error-modal-footer {
+                padding: 15px 25px;
+                border-top: 1px solid #f0f0f0;
+                display: flex;
+                justify-content: flex-end;
+                gap: 10px;
+            }
+
+            .error-btn {
+                padding: 10px 25px;
+                border: none;
+                border-radius: 6px;
+                font-size: 0.95rem;
+                font-weight: 500;
+                cursor: pointer;
+                transition: all 0.3s;
+                font-family: 'Noto Sans TC', sans-serif;
+            }
+
+            .error-btn-primary {
+                background: #3498db;
+                color: white;
+            }
+
+            .error-btn-primary:hover {
+                background: #2980b9;
+                transform: translateY(-2px);
+                box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
+            }
+
+            .error-btn-secondary {
+                background: #95a5a6;
+                color: white;
+            }
+
+            .error-btn-secondary:hover {
+                background: #7f8c8d;
+            }
+
+            @keyframes fadeIn {
+                from {
+                    opacity: 0;
+                }
+                to {
+                    opacity: 1;
+                }
+            }
+
+            @keyframes slideDown {
+                from {
+                    transform: translateY(-50px);
+                    opacity: 0;
+                }
+                to {
+                    transform: translateY(0);
+                    opacity: 1;
+                }
+            }
+
+            .error-toast {
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                background: white;
+                border-radius: 8px;
+                padding: 15px 20px;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                z-index: 10001;
+                animation: slideInRight 0.3s ease;
+                max-width: 400px;
+            }
+
+            .error-toast.error {
+                border-left: 4px solid #e74c3c;
+            }
+
+            .error-toast.warning {
+                border-left: 4px solid #f39c12;
+            }
+
+            .error-toast.info {
+                border-left: 4px solid #3498db;
+            }
+
+            .error-toast.success {
+                border-left: 4px solid #27ae60;
+            }
+
+            .error-toast-icon {
+                font-size: 1.5rem;
+            }
+
+            .error-toast-content {
+                flex: 1;
+            }
+
+            .error-toast-title {
+                font-weight: 600;
+                margin-bottom: 5px;
+                color: #333;
+            }
+
+            .error-toast-message {
+                font-size: 0.9rem;
+                color: #666;
+            }
+
+            .error-toast-close {
+                background: none;
+                border: none;
+                font-size: 1.5rem;
+                color: #999;
+                cursor: pointer;
+                padding: 0;
+                width: 24px;
+                height: 24px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 4px;
+                transition: all 0.2s;
+            }
+
+            .error-toast-close:hover {
+                background: #f0f0f0;
+                color: #666;
+            }
+
+            @keyframes slideInRight {
+                from {
+                    transform: translateX(400px);
+                    opacity: 0;
+                }
+                to {
+                    transform: translateX(0);
+                    opacity: 1;
+                }
+            }
+
+            @keyframes slideOutRight {
+                from {
+                    transform: translateX(0);
+                    opacity: 1;
+                }
+                to {
+                    transform: translateX(400px);
+                    opacity: 0;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    setupGlobalHandlers() {
+        // Handle uncaught errors
+        window.addEventListener('error', (event) => {
+            this.handleError({
+                title: '執行錯誤',
+                message: event.message,
+                details: `檔案: ${event.filename}\n行號: ${event.lineno}:${event.colno}\n錯誤: ${event.error?.stack || event.message}`
+            });
+        });
+
+        // Handle unhandled promise rejections
+        window.addEventListener('unhandledrejection', (event) => {
+            this.handleError({
+                title: 'Promise 錯誤',
+                message: '發生未處理的 Promise 錯誤',
+                details: event.reason?.stack || event.reason
+            });
+        });
+    }
+
+    /**
+     * Show error modal
+     * @param {Object} options - Error options
+     * @param {string} options.title - Error title
+     * @param {string} options.message - Error message
+     * @param {string} options.details - Error details (optional)
+     * @param {string} options.type - Error type: error, warning, info, success (default: error)
+     * @param {Function} options.onClose - Callback when modal closes
+     */
+    showError(options) {
+        const {
+            title = '錯誤',
+            message = '發生未知錯誤',
+            details = null,
+            type = 'error',
+            onClose = null
+        } = options;
+
+        const icons = {
+            error: '❌',
+            warning: '⚠️',
+            info: 'ℹ️',
+            success: '✅'
+        };
+
+        const container = document.getElementById('error-modal-container');
+
+        const modal = document.createElement('div');
+        modal.className = 'error-modal-overlay';
+        modal.innerHTML = `
+            <div class="error-modal">
+                <div class="error-modal-header ${type}">
+                    <div class="error-icon">${icons[type]}</div>
+                    <h3 class="error-title">${this.escapeHtml(title)}</h3>
+                </div>
+                <div class="error-modal-body">
+                    <div class="error-message">${this.escapeHtml(message)}</div>
+                    ${details ? `<div class="error-details">${this.escapeHtml(details)}</div>` : ''}
+                </div>
+                <div class="error-modal-footer">
+                    <button class="error-btn error-btn-primary" onclick="window.errorHandler.closeModal(this)">
+                        確定
+                    </button>
+                </div>
+            </div>
+        `;
+
+        container.appendChild(modal);
+
+        // Store close callback
+        modal._onClose = onClose;
+
+        // Close on overlay click
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                this.closeModal(modal.querySelector('.error-btn'));
+            }
+        });
+    }
+
+    /**
+     * Show toast notification
+     * @param {Object} options - Toast options
+     * @param {string} options.title - Toast title
+     * @param {string} options.message - Toast message
+     * @param {string} options.type - Toast type: error, warning, info, success (default: info)
+     * @param {number} options.duration - Duration in ms (default: 3000)
+     */
+    showToast(options) {
+        const {
+            title = '',
+            message = '',
+            type = 'info',
+            duration = 3000
+        } = options;
+
+        const icons = {
+            error: '❌',
+            warning: '⚠️',
+            info: 'ℹ️',
+            success: '✅'
+        };
+
+        const toast = document.createElement('div');
+        toast.className = `error-toast ${type}`;
+        toast.innerHTML = `
+            <div class="error-toast-icon">${icons[type]}</div>
+            <div class="error-toast-content">
+                ${title ? `<div class="error-toast-title">${this.escapeHtml(title)}</div>` : ''}
+                <div class="error-toast-message">${this.escapeHtml(message)}</div>
+            </div>
+            <button class="error-toast-close" onclick="this.parentElement.remove()">×</button>
+        `;
+
+        document.body.appendChild(toast);
+
+        // Auto remove after duration
+        if (duration > 0) {
+            setTimeout(() => {
+                toast.style.animation = 'slideOutRight 0.3s ease';
+                setTimeout(() => toast.remove(), 300);
+            }, duration);
+        }
+    }
+
+    closeModal(button) {
+        const modal = button.closest('.error-modal-overlay');
+        if (modal) {
+            const onClose = modal._onClose;
+
+            modal.style.animation = 'fadeOut 0.3s ease';
+            setTimeout(() => {
+                modal.remove();
+                if (onClose && typeof onClose === 'function') {
+                    onClose();
+                }
+            }, 300);
+        }
+    }
+
+    /**
+     * Handle API errors
+     * @param {Error} error - Error object
+     * @param {Object} options - Additional options
+     */
+    async handleAPIError(error, options = {}) {
+        const { showModal = true, showToast = false } = options;
+
+        let message = '發生 API 錯誤';
+        let details = null;
+
+        if (error.response) {
+            // Server responded with error
+            const data = error.response.data;
+            message = data.error || data.message || `HTTP ${error.response.status} 錯誤`;
+            details = JSON.stringify(data, null, 2);
+        } else if (error.request) {
+            // No response received
+            message = '無法連接到伺服器,請檢查網路連線';
+            details = error.message;
+        } else {
+            // Request setup error
+            message = error.message;
+            details = error.stack;
+        }
+
+        if (showModal) {
+            this.showError({
+                title: 'API 錯誤',
+                message,
+                details,
+                type: 'error'
+            });
+        }
+
+        if (showToast) {
+            this.showToast({
+                title: 'API 錯誤',
+                message,
+                type: 'error'
+            });
+        }
+    }
+
+    /**
+     * Handle general errors
+     * @param {Object} options - Error options
+     */
+    handleError(options) {
+        console.error('[ErrorHandler]', options);
+        this.showError(options);
+    }
+
+    /**
+     * Escape HTML to prevent XSS
+     * @param {string} text - Text to escape
+     * @returns {string} - Escaped text
+     */
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    /**
+     * Confirm dialog
+     * @param {Object} options - Confirm options
+     * @param {string} options.title - Title
+     * @param {string} options.message - Message
+     * @param {string} options.confirmText - Confirm button text
+     * @param {string} options.cancelText - Cancel button text
+     * @param {Function} options.onConfirm - Confirm callback
+     * @param {Function} options.onCancel - Cancel callback
+     */
+    confirm(options) {
+        const {
+            title = '確認',
+            message = '確定要執行此操作嗎?',
+            confirmText = '確定',
+            cancelText = '取消',
+            onConfirm = null,
+            onCancel = null
+        } = options;
+
+        const container = document.getElementById('error-modal-container');
+
+        const modal = document.createElement('div');
+        modal.className = 'error-modal-overlay';
+        modal.innerHTML = `
+            <div class="error-modal">
+                <div class="error-modal-header info">
+                    <div class="error-icon">❓</div>
+                    <h3 class="error-title">${this.escapeHtml(title)}</h3>
+                </div>
+                <div class="error-modal-body">
+                    <div class="error-message">${this.escapeHtml(message)}</div>
+                </div>
+                <div class="error-modal-footer">
+                    <button class="error-btn error-btn-secondary" data-action="cancel">
+                        ${this.escapeHtml(cancelText)}
+                    </button>
+                    <button class="error-btn error-btn-primary" data-action="confirm">
+                        ${this.escapeHtml(confirmText)}
+                    </button>
+                </div>
+            </div>
+        `;
+
+        container.appendChild(modal);
+
+        // Handle button clicks
+        modal.querySelectorAll('[data-action]').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const action = btn.getAttribute('data-action');
+                modal.remove();
+
+                if (action === 'confirm' && onConfirm) {
+                    onConfirm();
+                } else if (action === 'cancel' && onCancel) {
+                    onCancel();
+                }
+            });
+        });
+    }
+}
+
+// Initialize global error handler
+window.errorHandler = new ErrorHandler();
+
+// Export for module usage
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = ErrorHandler;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a10fe75
--- /dev/null
+++ b/index.html
@@ -0,0 +1,2184 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HR 基礎資料維護系統</title>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary: #1a5276;
+            --primary-light: #2980b9;
+            --primary-dark: #0e3a53;
+            --accent: #e67e22;
+            --accent-light: #f39c12;
+            --green: #27ae60;
+            --green-dark: #1e8449;
+            --bg-main: #f4f6f9;
+            --bg-card: #ffffff;
+            --border: #d5dbdf;
+            --text-primary: #2c3e50;
+            --text-secondary: #5d6d7e;
+            --success: #27ae60;
+            --warning: #f39c12;
+            --danger: #e74c3c;
+            --shadow: 0 4px 20px rgba(26, 82, 118, 0.12);
+            --radius: 8px;
+        }
+
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
+        body {
+            font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: linear-gradient(135deg, #e8f4fc 0%, #f4f6f9 100%);
+            min-height: 100vh;
+            color: var(--text-primary);
+        }
+
+        .app-container { max-width: 1200px; margin: 0 auto; padding: 24px; }
+
+        /* Module Selector */
+        .module-selector { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
+
+        .module-btn {
+            flex: 1;
+            min-width: 200px;
+            padding: 14px 20px;
+            border: 2px solid var(--border);
+            border-radius: var(--radius);
+            background: var(--bg-card);
+            font-family: inherit;
+            font-size: 0.95rem;
+            font-weight: 500;
+            color: var(--text-secondary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            transition: all 0.3s ease;
+        }
+
+        .module-btn:hover {
+            border-color: var(--primary-light);
+            color: var(--primary);
+            transform: translateY(-2px);
+            box-shadow: var(--shadow);
+        }
+
+        .module-btn.active {
+            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+            border-color: var(--primary);
+            color: white;
+            box-shadow: 0 4px 15px rgba(26, 82, 118, 0.3);
+        }
+
+        .module-btn.active.job-active {
+            background: linear-gradient(135deg, var(--accent) 0%, #d35400 100%);
+            border-color: var(--accent);
+            box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
+        }
+
+        .module-btn.active.desc-active {
+            background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
+            border-color: var(--green);
+            box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
+        }
+
+        .module-btn svg { width: 22px; height: 22px; fill: currentColor; }
+
+        .module-content { display: none; }
+        .module-content.active { display: block; animation: fadeIn 0.3s ease; }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(8px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .app-header {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            margin-bottom: 24px;
+            padding: 20px 28px;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+        }
+
+        .app-header.job-header {
+            background: linear-gradient(135deg, var(--accent) 0%, #d35400 100%);
+        }
+
+        .app-header.desc-header {
+            background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
+        }
+
+        .app-header .icon {
+            width: 48px; height: 48px;
+            background: rgba(255,255,255,0.15);
+            border-radius: 12px;
+            display: flex; align-items: center; justify-content: center;
+        }
+
+        .app-header .icon svg { width: 28px; height: 28px; fill: #ffffff; }
+        .app-header h1 { color: #ffffff; font-size: 1.5rem; font-weight: 600; }
+        .app-header .subtitle { color: rgba(255,255,255,0.7); font-size: 0.875rem; margin-top: 2px; }
+
+        .form-card {
+            background: var(--bg-card);
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            overflow: hidden;
+        }
+
+        /* Tabs */
+        .tabs { display: flex; background: #f8fafc; border-bottom: 2px solid var(--border); }
+
+        .tab-btn {
+            padding: 16px 32px;
+            border: none;
+            background: transparent;
+            font-family: inherit;
+            font-size: 0.95rem;
+            font-weight: 500;
+            color: var(--text-secondary);
+            cursor: pointer;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .tab-btn:hover { color: var(--primary); background: rgba(26, 82, 118, 0.05); }
+        .tab-btn.active { color: var(--primary); background: var(--bg-card); }
+        .tab-btn.active::after {
+            content: '';
+            position: absolute;
+            bottom: -2px; left: 0; right: 0;
+            height: 3px;
+            background: var(--primary);
+            border-radius: 2px 2px 0 0;
+        }
+
+        .tab-content { display: none; padding: 28px; animation: fadeIn 0.3s ease; }
+        .tab-content.active { display: block; }
+
+        /* Form Grid */
+        .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 32px; }
+        .form-grid.three-cols { grid-template-columns: repeat(3, 1fr); }
+
+        .form-group { display: flex; flex-direction: column; gap: 6px; }
+        .form-group.full-width { grid-column: 1 / -1; }
+
+        .form-group label {
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: var(--text-secondary);
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .form-group label .required { color: var(--danger); font-weight: 600; }
+
+        .input-wrapper { display: flex; gap: 8px; align-items: center; }
+
+        input[type="text"],
+        input[type="number"],
+        input[type="date"],
+        select,
+        textarea {
+            width: 100%;
+            padding: 10px 14px;
+            border: 1.5px solid var(--border);
+            border-radius: 6px;
+            font-family: inherit;
+            font-size: 0.9rem;
+            color: var(--text-primary);
+            background: #fafbfc;
+            transition: all 0.2s ease;
+        }
+
+        input:focus, select:focus, textarea:focus {
+            outline: none;
+            border-color: var(--primary-light);
+            background: #ffffff;
+            box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.1);
+        }
+
+        input:read-only {
+            background: #f0f3f5;
+            color: var(--text-secondary);
+            cursor: default;
+        }
+
+        textarea { min-height: 100px; resize: vertical; }
+
+        select {
+            cursor: pointer;
+            appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d6d7e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 12px center;
+            padding-right: 36px;
+        }
+
+        .btn-lookup {
+            padding: 10px 16px;
+            border: 1.5px solid var(--border);
+            border-radius: 6px;
+            background: #f8fafc;
+            color: var(--text-secondary);
+            font-size: 0.85rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            white-space: nowrap;
+        }
+
+        .btn-lookup:hover {
+            background: var(--primary);
+            color: white;
+            border-color: var(--primary);
+        }
+
+        .btn-icon {
+            width: 38px; height: 38px;
+            border: 1.5px solid var(--border);
+            border-radius: 6px;
+            background: #f8fafc;
+            color: var(--text-secondary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s ease;
+        }
+
+        .btn-icon:hover {
+            background: var(--primary);
+            color: white;
+            border-color: var(--primary);
+        }
+
+        .btn-icon svg { width: 18px; height: 18px; fill: currentColor; }
+
+        /* Toggle Switch */
+        .toggle-group { display: flex; align-items: center; gap: 12px; }
+
+        .toggle-switch { position: relative; width: 52px; height: 28px; }
+        .toggle-switch input { opacity: 0; width: 0; height: 0; }
+
+        .toggle-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background-color: #ccc;
+            transition: 0.3s;
+            border-radius: 28px;
+        }
+
+        .toggle-slider:before {
+            position: absolute;
+            content: "";
+            height: 22px; width: 22px;
+            left: 3px; bottom: 3px;
+            background-color: white;
+            transition: 0.3s;
+            border-radius: 50%;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        }
+
+        .toggle-switch input:checked + .toggle-slider { background-color: var(--success); }
+        .toggle-switch input:checked + .toggle-slider:before { transform: translateX(24px); }
+        .toggle-label { font-size: 0.9rem; color: var(--text-secondary); }
+
+        /* Section */
+        .section-box {
+            background: #f8fafc;
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            margin-bottom: 20px;
+        }
+
+        .section-header {
+            padding: 12px 16px;
+            background: linear-gradient(135deg, #e8f4fc 0%, #f0f4f8 100%);
+            border-bottom: 1px solid var(--border);
+            font-weight: 600;
+            font-size: 0.9rem;
+            color: var(--primary);
+        }
+
+        .section-header.green {
+            background: linear-gradient(135deg, #e8f8f0 0%, #f0f8f4 100%);
+            color: var(--green-dark);
+        }
+
+        .section-body { padding: 20px; }
+
+        .section-divider {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin: 8px 0;
+        }
+
+        .section-divider span {
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--primary);
+            white-space: nowrap;
+        }
+
+        .section-divider::after {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background: linear-gradient(to right, var(--border), transparent);
+        }
+
+        /* Actions */
+        .form-actions {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px 28px;
+            background: #f8fafc;
+            border-top: 1px solid var(--border);
+        }
+
+        .nav-buttons { display: flex; gap: 8px; }
+
+        .nav-btn {
+            width: 36px; height: 36px;
+            border: 1.5px solid var(--border);
+            border-radius: 6px;
+            background: white;
+            color: var(--text-secondary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s ease;
+        }
+
+        .nav-btn:hover { border-color: var(--primary); color: var(--primary); }
+        .nav-btn svg { width: 16px; height: 16px; fill: currentColor; }
+
+        .action-buttons { display: flex; gap: 12px; }
+
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 6px;
+            font-family: inherit;
+            font-size: 0.9rem;
+            font-weight: 500;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            transition: all 0.2s ease;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+            color: white;
+            box-shadow: 0 2px 8px rgba(26, 82, 118, 0.3);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(26, 82, 118, 0.4);
+        }
+
+        .btn-secondary {
+            background: white;
+            color: var(--primary);
+            border: 1.5px solid var(--primary);
+        }
+
+        .btn-secondary:hover { background: rgba(26, 82, 118, 0.05); }
+
+        .btn-cancel { background: #f0f3f5; color: var(--text-secondary); }
+        .btn-cancel:hover { background: #e5e9ec; }
+
+        .btn svg { width: 18px; height: 18px; fill: currentColor; }
+
+        /* Toast */
+        .toast {
+            position: fixed;
+            top: 24px; right: 24px;
+            padding: 16px 24px;
+            background: var(--success);
+            color: white;
+            border-radius: var(--radius);
+            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            transform: translateX(120%);
+            transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+            z-index: 1000;
+        }
+
+        .toast.show { transform: translateX(0); }
+        .toast svg { width: 24px; height: 24px; fill: currentColor; }
+
+        /* Modal */
+        .modal-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(0,0,0,0.5);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 100;
+            backdrop-filter: blur(4px);
+        }
+
+        .modal-overlay.show { display: flex; }
+
+        .modal {
+            background: white;
+            border-radius: var(--radius);
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            width: 90%;
+            max-width: 500px;
+            animation: modalIn 0.3s ease;
+        }
+
+        @keyframes modalIn {
+            from { opacity: 0; transform: scale(0.9); }
+            to { opacity: 1; transform: scale(1); }
+        }
+
+        .modal-header {
+            padding: 20px 24px;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .modal-header h3 { font-size: 1.1rem; font-weight: 600; }
+
+        .modal-close {
+            width: 32px; height: 32px;
+            border: none;
+            background: #f0f3f5;
+            border-radius: 6px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s ease;
+        }
+
+        .modal-close:hover { background: var(--danger); color: white; }
+
+        .modal-body { padding: 24px; }
+
+        .modal-footer {
+            padding: 16px 24px;
+            border-top: 1px solid var(--border);
+            display: flex;
+            justify-content: flex-end;
+            gap: 12px;
+        }
+
+        .checkbox-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
+
+        .checkbox-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 12px;
+            border: 1.5px solid var(--border);
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .checkbox-item:hover {
+            border-color: var(--primary-light);
+            background: rgba(41, 128, 185, 0.05);
+        }
+
+        .checkbox-item input { width: 18px; height: 18px; accent-color: var(--primary); }
+        .checkbox-item label { cursor: pointer; font-size: 0.9rem; }
+
+        /* Confidential Field */
+        .confidential-field { position: relative; }
+        .confidential-field input { padding-left: 32px; }
+        .confidential-field::before {
+            content: '🔒';
+            position: absolute;
+            left: 10px; top: 50%;
+            transform: translateY(-50%);
+            font-size: 14px;
+        }
+
+        /* Numbered Textarea */
+        .numbered-textarea {
+            font-family: inherit;
+            line-height: 1.8;
+        }
+
+        /* Data Preview */
+        .data-preview {
+            margin-top: 24px;
+            padding: 20px;
+            background: #f8fafc;
+            border-radius: var(--radius);
+            border: 1px solid var(--border);
+        }
+
+        .data-preview h4 { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 12px; }
+
+        .data-preview pre {
+            font-family: 'Monaco', 'Consolas', monospace;
+            font-size: 0.8rem;
+            background: #2c3e50;
+            color: #ecf0f1;
+            padding: 16px;
+            border-radius: 6px;
+            overflow-x: auto;
+            max-height: 300px;
+        }
+
+        /* AI Button */
+        .ai-generate-btn {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 12px 24px;
+            margin-bottom: 24px;
+            background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
+            color: white;
+            border: none;
+            border-radius: var(--radius);
+            font-family: inherit;
+            font-size: 0.95rem;
+            font-weight: 600;
+            cursor: pointer;
+            box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
+            transition: all 0.3s ease;
+        }
+
+        .ai-generate-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4);
+        }
+
+        .ai-generate-btn:disabled {
+            opacity: 0.7;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .ai-generate-btn svg {
+            width: 20px;
+            height: 20px;
+            fill: currentColor;
+        }
+
+        .ai-generate-btn .spinner {
+            width: 20px;
+            height: 20px;
+            border: 2px solid rgba(255,255,255,0.3);
+            border-top-color: white;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* Responsive */
+        @media (max-width: 768px) {
+            .form-grid, .form-grid.three-cols { grid-template-columns: 1fr; }
+            .form-actions { flex-direction: column; gap: 16px; }
+            .action-buttons { width: 100%; flex-direction: column; }
+            .btn { justify-content: center; }
+            .module-selector { flex-direction: column; }
+            .module-btn { min-width: 100%; }
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <!-- Module Selector -->
+        <div class="module-selector">
+            <button class="module-btn active" data-module="position">
+                <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+                崗位基礎資料
+            </button>
+            <button class="module-btn" data-module="job">
+                <svg viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>
+                職務基礎資料
+            </button>
+            <button class="module-btn" data-module="jobdesc">
+                <svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
+                崗位描述
+            </button>
+        </div>
+
+        <!-- ==================== 崗位基礎資料模組 ==================== -->
+        <div class="module-content active" id="module-position">
+            <header class="app-header">
+                <div class="icon">
+                    <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+                </div>
+                <div>
+                    <h1>崗位基礎資料維護</h1>
+                    <div class="subtitle">Position Master Data Management</div>
+                </div>
+            </header>
+
+            <div class="form-card">
+                <div class="tabs">
+                    <button class="tab-btn active" data-tab="position-basic">基礎資料</button>
+                    <button class="tab-btn" data-tab="position-recruit">招聘要求資料</button>
+                </div>
+
+                <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>
+                        <div class="form-grid">
+                            <div class="form-group">
+                                <label><span class="required">*</span> 崗位編號</label>
+                                <div class="input-wrapper">
+                                    <input type="text" id="positionCode" name="positionCode" required placeholder="請輸入崗位編號">
+                                    <button type="button" class="btn-lookup" onclick="changePositionCode()">更改崗位編號</button>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label>生效日期</label>
+                                <input type="date" id="effectiveDate" name="effectiveDate" value="2001-01-01">
+                            </div>
+                            <div class="form-group">
+                                <label><span class="required">*</span> 崗位名稱</label>
+                                <input type="text" id="positionName" name="positionName" required placeholder="請輸入崗位名稱">
+                            </div>
+                            <div class="form-group">
+                                <label>崗位級別</label>
+                                <select id="positionLevel" name="positionLevel">
+                                    <option value="">請選擇</option>
+                                    <option value="L1">L1 - 基層員工</option>
+                                    <option value="L2">L2 - 資深員工</option>
+                                    <option value="L3">L3 - 主管</option>
+                                    <option value="L4">L4 - 經理</option>
+                                    <option value="L5">L5 - 總監</option>
+                                    <option value="L6">L6 - 副總</option>
+                                    <option value="L7">L7 - 總經理</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label>崗位類別</label>
+                                <select id="positionCategory" name="positionCategory" onchange="updateCategoryName()">
+                                    <option value="">請選擇</option>
+                                    <option value="01">01</option>
+                                    <option value="02">02</option>
+                                    <option value="03">03</option>
+                                    <option value="04">04</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label>崗位類別名稱</label>
+                                <input type="text" id="positionCategoryName" name="positionCategoryName" readonly placeholder="自動帶出">
+                            </div>
+                            <div class="form-group">
+                                <label>崗位性質</label>
+                                <select id="positionNature" name="positionNature" onchange="updateNatureName()">
+                                    <option value="">請選擇</option>
+                                    <option value="FT">全職</option>
+                                    <option value="PT">兼職</option>
+                                    <option value="CT">約聘</option>
+                                    <option value="IN">實習</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label>崗位性質名稱</label>
+                                <input type="text" id="positionNatureName" name="positionNatureName" readonly placeholder="自動帶出">
+                            </div>
+                            <div class="form-group">
+                                <label>編制人數</label>
+                                <input type="number" id="headcount" name="headcount" min="0" placeholder="請輸入編制人數">
+                            </div>
+                            <div class="form-group"></div>
+                            <div class="form-group full-width">
+                                <label>崗位描述</label>
+                                <textarea id="positionDesc" name="positionDesc" placeholder="請輸入崗位描述..." rows="4"></textarea>
+                            </div>
+                            <div class="form-group full-width">
+                                <label>崗位備注</label>
+                                <textarea id="positionRemark" name="positionRemark" placeholder="請輸入備注說明..." rows="5"></textarea>
+                            </div>
+                        </div>
+                    </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>
+                        <div class="form-grid">
+                            <div class="form-group">
+                                <label>最低學歷</label>
+                                <select id="minEducation" name="minEducation">
+                                    <option value="">請選擇</option>
+                                    <option value="HS">高中/職</option>
+                                    <option value="JC">專科</option>
+                                    <option value="BA">大學</option>
+                                    <option value="MA">碩士</option>
+                                    <option value="PHD">博士</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label>要求性別</label>
+                                <select id="requiredGender" name="requiredGender">
+                                    <option value="">不限</option>
+                                    <option value="M">男</option>
+                                    <option value="F">女</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label>薪酬范圍</label>
+                                <select id="salaryRange" name="salaryRange">
+                                    <option value="">請選擇</option>
+                                    <option value="A">30,000 以下</option>
+                                    <option value="B">30,000 - 50,000</option>
+                                    <option value="C">50,000 - 80,000</option>
+                                    <option value="D">80,000 - 120,000</option>
+                                    <option value="E">120,000 以上</option>
+                                    <option value="N">面議</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label>工作經驗</label>
+                                <select id="workExperience" name="workExperience">
+                                    <option value="">請選擇</option>
+                                    <option value="0">不限</option>
+                                    <option value="1">1年以上</option>
+                                    <option value="3">3年以上</option>
+                                    <option value="5">5年以上</option>
+                                    <option value="10">10年以上</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label>最小年齡</label>
+                                <input type="number" id="minAge" name="minAge" min="18" max="65" placeholder="歲">
+                            </div>
+                            <div class="form-group">
+                                <label>最大年齡</label>
+                                <input type="number" id="maxAge" name="maxAge" min="18" max="65" placeholder="歲">
+                            </div>
+                            <div class="form-group">
+                                <label>工作性質</label>
+                                <select id="jobType" name="jobType">
+                                    <option value="">請選擇</option>
+                                    <option value="FT">全職</option>
+                                    <option value="PT">兼職</option>
+                                    <option value="CT">約聘</option>
+                                    <option value="DP">派遣</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label>職位名稱</label>
+                                <input type="text" id="jobTitle" name="jobTitle" placeholder="請輸入職位名稱">
+                            </div>
+                            <div class="form-group">
+                                <label>招聘職位</label>
+                                <select id="recruitPosition" name="recruitPosition">
+                                    <option value="">請選擇</option>
+                                    <option value="ENG">工程師</option>
+                                    <option value="MGR">經理</option>
+                                    <option value="AST">助理</option>
+                                    <option value="OP">作業員</option>
+                                    <option value="SAL">業務</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label>上級崗位編號</label>
+                                <input type="text" id="superiorPosition" name="superiorPosition" placeholder="請輸入上級崗位編號">
+                            </div>
+                            <div class="form-group full-width">
+                                <label>職位描述</label>
+                                <textarea id="jobDesc" name="jobDesc" placeholder="請輸入職位描述..." rows="3"></textarea>
+                            </div>
+                            <div class="form-group full-width">
+                                <label>崗位要求</label>
+                                <textarea id="positionReq" name="positionReq" placeholder="請輸入崗位要求..." rows="3"></textarea>
+                            </div>
+                            <div class="section-divider"><span>技能與專業要求</span></div>
+                            <div class="form-group">
+                                <label>職稱要求</label>
+                                <select id="titleReq" name="titleReq">
+                                    <option value="">請選擇</option>
+                                    <option value="NONE">不限</option>
+                                    <option value="CERT">相關證照</option>
+                                    <option value="LIC">專業執照</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label>專業要求</label>
+                                <div class="input-wrapper">
+                                    <input type="text" id="majorReq" name="majorReq" readonly placeholder="點擊選擇專業">
+                                    <button type="button" class="btn-lookup" onclick="openMajorModal()">專業要求</button>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label>技能要求</label>
+                                <input type="text" id="skillReq" name="skillReq" placeholder="如：Excel, Python, SAP...">
+                            </div>
+                            <div class="form-group">
+                                <label>語言要求</label>
+                                <input type="text" id="langReq" name="langReq" placeholder="如：英文中級、日文N2...">
+                            </div>
+                            <div class="form-group full-width">
+                                <label>其他要求</label>
+                                <input type="text" id="otherReq" name="otherReq" placeholder="請輸入其他要求">
+                            </div>
+                            <div class="form-group full-width">
+                                <label>備注說明</label>
+                                <textarea id="recruitRemark" name="recruitRemark" placeholder="請輸入備注說明..." rows="4"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                </form>
+
+                <div class="form-actions">
+                    <div class="nav-buttons">
+                        <button class="nav-btn" title="第一筆"><svg viewBox="0 0 24 24"><path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6 1.41-1.41zM6 6h2v12H6V6z"/></svg></button>
+                        <button class="nav-btn" title="上一筆"><svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></button>
+                        <button class="nav-btn" title="下一筆"><svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></button>
+                        <button class="nav-btn" title="最後一筆"><svg viewBox="0 0 24 24"><path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6-1.41 1.41zM16 6h2v12h-2V6z"/></svg></button>
+                    </div>
+                    <div class="action-buttons">
+                        <button type="button" class="btn btn-primary" onclick="savePositionAndExit()">
+                            <svg viewBox="0 0 24 24"><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>
+                            保存并退出(S)
+                        </button>
+                        <button type="button" class="btn btn-secondary" onclick="savePositionAndNew()">
+                            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+                            保存并新增(N)
+                        </button>
+                        <button type="button" class="btn btn-cancel" onclick="cancelPositionForm()">取消</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- ==================== 職務基礎資料模組 ==================== -->
+        <div class="module-content" id="module-job">
+            <header class="app-header job-header">
+                <div class="icon">
+                    <svg viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>
+                </div>
+                <div>
+                    <h1>職務基礎資料維護</h1>
+                    <div class="subtitle">Job Title Master Data Management</div>
+                </div>
+            </header>
+
+            <div class="form-card">
+                <div class="tabs">
+                    <button class="tab-btn active" data-tab="job-basic">基礎資料</button>
+                </div>
+
+                <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>
+                        <div class="form-grid">
+                            <div class="form-group">
+                                <label><span class="required">*</span> 職務類別編號</label>
+                                <select id="jobCategoryCode" name="jobCategoryCode" required onchange="updateJobCategoryName()">
+                                    <option value="">請選擇</option>
+                                    <option value="MGR">管理職</option>
+                                    <option value="TECH">技術職</option>
+                                    <option value="SALE">業務職</option>
+                                    <option value="ADMIN">行政職</option>
+                                    <option value="RD">研發職</option>
+                                    <option value="PROD">生產職</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label>職務類別名稱</label>
+                                <input type="text" id="jobCategoryName" name="jobCategoryName" readonly placeholder="自動帶出">
+                            </div>
+                            <div class="form-group">
+                                <label><span class="required">*</span> 職務編號</label>
+                                <div class="input-wrapper">
+                                    <input type="text" id="jobCode" name="jobCode" required placeholder="請輸入職務編號">
+                                    <button type="button" class="btn-lookup" onclick="changeJobCode()">更改職務編號</button>
+                                </div>
+                            </div>
+                            <div class="form-group"></div>
+                            <div class="form-group">
+                                <label><span class="required">*</span> 職務名稱</label>
+                                <input type="text" id="jobName" name="jobName" required placeholder="請輸入職務名稱">
+                            </div>
+                            <div class="form-group">
+                                <label>職務英文</label>
+                                <input type="text" id="jobNameEn" name="jobNameEn" placeholder="請輸入職務英文名稱">
+                            </div>
+                            <div class="form-group">
+                                <label>生效日期</label>
+                                <input type="date" id="jobEffectiveDate" name="jobEffectiveDate">
+                            </div>
+                            <div class="form-group">
+                                <label>編制人數</label>
+                                <input type="number" id="jobHeadcount" name="jobHeadcount" min="0" placeholder="請輸入人數">
+                            </div>
+                            <div class="form-group">
+                                <label>排列順序</label>
+                                <input type="number" id="jobSortOrder" name="jobSortOrder" min="0" placeholder="請輸入排序">
+                            </div>
+                            <div class="form-group"></div>
+                            <div class="form-group full-width">
+                                <label>備注說明</label>
+                                <textarea id="jobRemark" name="jobRemark" placeholder="請輸入備注說明..." rows="4"></textarea>
+                            </div>
+                            <div class="section-divider"><span>職務屬性設定</span></div>
+                            <div class="form-group">
+                                <label>職務層級</label>
+                                <div class="confidential-field">
+                                    <input type="text" id="jobLevel" name="jobLevel" placeholder="如：*保密*">
+                                </div>
+                            </div>
+                            <div class="form-group"></div>
+                            <div class="form-group">
+                                <label>是否有全勤</label>
+                                <div class="toggle-group">
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="hasAttendanceBonus" name="hasAttendanceBonus">
+                                        <span class="toggle-slider"></span>
+                                    </label>
+                                    <span class="toggle-label" id="attendanceLabel">否</span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label>是否住房補貼</label>
+                                <div class="toggle-group">
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="hasHousingAllowance" name="hasHousingAllowance">
+                                        <span class="toggle-slider"></span>
+                                    </label>
+                                    <span class="toggle-label" id="housingLabel">否</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </form>
+
+                <div class="form-actions">
+                    <div class="nav-buttons">
+                        <button class="nav-btn" title="第一筆"><svg viewBox="0 0 24 24"><path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6 1.41-1.41zM6 6h2v12H6V6z"/></svg></button>
+                        <button class="nav-btn" title="上一筆"><svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></button>
+                        <button class="nav-btn" title="下一筆"><svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></button>
+                        <button class="nav-btn" title="最後一筆"><svg viewBox="0 0 24 24"><path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6-1.41 1.41zM16 6h2v12h-2V6z"/></svg></button>
+                    </div>
+                    <div class="action-buttons">
+                        <button type="button" class="btn btn-primary" onclick="saveJobAndExit()">
+                            <svg viewBox="0 0 24 24"><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>
+                            保存并退出(S)
+                        </button>
+                        <button type="button" class="btn btn-secondary" onclick="saveJobAndNew()">
+                            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+                            保存并新增(N)
+                        </button>
+                        <button type="button" class="btn btn-cancel" onclick="cancelJobForm()">取消</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- ==================== 崗位描述模組 ==================== -->
+        <div class="module-content" id="module-jobdesc">
+            <header class="app-header desc-header">
+                <div class="icon">
+                    <svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
+                </div>
+                <div>
+                    <h1>崗位描述維護 (新增)</h1>
+                    <div class="subtitle">Job Description Management</div>
+                </div>
+            </header>
+
+            <div class="form-card">
+                <div class="tabs">
+                    <button class="tab-btn active" data-tab="jobdesc-basic">基礎資料</button>
+                </div>
+
+                <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>
+                        <!-- 頂部區域 -->
+                        <div class="form-grid">
+                            <div class="form-group">
+                                <label>工號</label>
+                                <div class="input-wrapper">
+                                    <input type="text" id="jd_empNo" name="empNo" placeholder="請輸入工號">
+                                    <button type="button" class="btn-icon" onclick="openEmpSearchModal()" title="選擇員工">
+                                        <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+                                    </button>
+                                    <button type="button" class="btn-icon" onclick="openOrgSearchModal()" title="選擇組織">
+                                        <svg viewBox="0 0 24 24"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/></svg>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label>姓名</label>
+                                <input type="text" id="jd_empName" name="empName" readonly placeholder="自動帶出">
+                            </div>
+                            <div class="form-group">
+                                <label>崗位代碼</label>
+                                <input type="text" id="jd_positionCode" name="positionCode" placeholder="請輸入崗位代碼">
+                            </div>
+                            <div class="form-group">
+                                <label>版本更新日期</label>
+                                <input type="date" id="jd_versionDate" name="versionDate">
+                            </div>
+                        </div>
+
+                        <!-- 崗位基本信息 Section -->
+                        <div class="section-box" style="margin-top: 24px;">
+                            <div class="section-header green">崗位基本信息</div>
+                            <div class="section-body">
+                                <div class="form-grid">
+                                    <div class="form-group">
+                                        <label>崗位名稱</label>
+                                        <input type="text" id="jd_positionName" name="positionName" placeholder="請輸入崗位名稱">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>所屬部門</label>
+                                        <input type="text" id="jd_department" name="department" placeholder="請輸入所屬部門">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>崗位生效日期</label>
+                                        <input type="date" id="jd_positionEffectiveDate" name="positionEffectiveDate">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>直接領導職務</label>
+                                        <input type="text" id="jd_directSupervisor" name="directSupervisor" placeholder="請輸入直接領導職務">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>崗位職等&職務</label>
+                                        <div class="input-wrapper">
+                                            <input type="text" id="jd_positionGradeJob" name="positionGradeJob" readonly placeholder="點擊選擇">
+                                            <button type="button" class="btn-icon" onclick="openGradeJobModal()" title="選擇職等職務">
+                                                <svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="form-group">
+                                        <label>匯報對象職務</label>
+                                        <div class="input-wrapper">
+                                            <input type="text" id="jd_reportTo" name="reportTo" readonly placeholder="點擊選擇">
+                                            <button type="button" class="btn-icon" onclick="openReportToModal()" title="選擇匯報對象">
+                                                <svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="form-group">
+                                        <label>直接下級(職位及人數)</label>
+                                        <input type="text" id="jd_directReports" name="directReports" placeholder="如：工程師 x 5人">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>任職地點</label>
+                                        <select id="jd_workLocation" name="workLocation">
+                                            <option value="">請選擇</option>
+                                            <option value="HQ">總部</option>
+                                            <option value="TPE">台北辦公室</option>
+                                            <option value="TYC">桃園廠區</option>
+                                            <option value="KHH">高雄廠區</option>
+                                            <option value="SH">上海辦公室</option>
+                                            <option value="SZ">深圳辦公室</option>
+                                        </select>
+                                    </div>
+                                    <div class="form-group">
+                                        <label>員工屬性</label>
+                                        <select id="jd_empAttribute" name="empAttribute">
+                                            <option value="">請選擇</option>
+                                            <option value="FT">正式員工</option>
+                                            <option value="CT">約聘人員</option>
+                                            <option value="PT">兼職人員</option>
+                                            <option value="IN">實習生</option>
+                                            <option value="DP">派遣人員</option>
+                                        </select>
+                                    </div>
+                                    <div class="form-group"></div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 崗位設置目的 -->
+                        <div class="form-group full-width" style="margin-bottom: 24px;">
+                            <label>崗位設置目的</label>
+                            <div class="input-wrapper">
+                                <input type="text" id="jd_positionPurpose" name="positionPurpose" placeholder="請輸入崗位設置目的" style="flex: 1;">
+                                <button type="button" class="btn-icon" onclick="expandPurpose()" title="展開編輯">
+                                    <svg viewBox="0 0 24 24"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- 職責描述 Section -->
+                        <div class="section-box">
+                            <div class="section-header green">職責描述</div>
+                            <div class="section-body">
+                                <div class="form-group full-width">
+                                    <label>主要崗位職責</label>
+                                    <textarea id="jd_mainResponsibilities" name="mainResponsibilities" class="numbered-textarea" rows="8" placeholder="1、
+2、
+3、
+4、
+5、">1、
+2、
+3、
+4、</textarea>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 崗位要求 Section -->
+                        <div class="section-box">
+                            <div class="section-header green">崗位要求</div>
+                            <div class="section-body">
+                                <div class="form-grid">
+                                    <div class="form-group full-width">
+                                        <label>教育程度</label>
+                                        <input type="text" id="jd_education" name="education" placeholder="如：大學本科及以上學歷">
+                                    </div>
+                                    <div class="form-group full-width">
+                                        <label>基本技能</label>
+                                        <div class="input-wrapper">
+                                            <textarea id="jd_basicSkills" name="basicSkills" rows="2" placeholder="請輸入基本技能要求..." style="flex: 1;"></textarea>
+                                            <button type="button" class="btn-icon" style="align-self: flex-start;" onclick="expandField('basicSkills')" title="展開">
+                                                <svg viewBox="0 0 24 24"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="form-group full-width">
+                                        <label>專業知識</label>
+                                        <div class="input-wrapper">
+                                            <textarea id="jd_professionalKnowledge" name="professionalKnowledge" rows="2" placeholder="請輸入專業知識要求..." style="flex: 1;"></textarea>
+                                            <button type="button" class="btn-icon" style="align-self: flex-start;" onclick="expandField('professionalKnowledge')" title="展開">
+                                                <svg viewBox="0 0 24 24"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="form-group full-width">
+                                        <label>工作經驗</label>
+                                        <div class="input-wrapper">
+                                            <textarea id="jd_workExperienceReq" name="workExperienceReq" rows="2" placeholder="請輸入工作經驗要求..." style="flex: 1;"></textarea>
+                                            <button type="button" class="btn-icon" style="align-self: flex-start;" onclick="expandField('workExperienceReq')" title="展開">
+                                                <svg viewBox="0 0 24 24"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="form-group full-width">
+                                        <label>其他</label>
+                                        <textarea id="jd_otherRequirements" name="otherRequirements" rows="3" placeholder="請輸入其他要求..."></textarea>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </form>
+
+                <div class="form-actions">
+                    <div class="nav-buttons">
+                        <button class="nav-btn" title="第一筆"><svg viewBox="0 0 24 24"><path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6 1.41-1.41zM6 6h2v12H6V6z"/></svg></button>
+                        <button class="nav-btn" title="上一筆"><svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></button>
+                        <button class="nav-btn" title="下一筆"><svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></button>
+                        <button class="nav-btn" title="最後一筆"><svg viewBox="0 0 24 24"><path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6-1.41 1.41zM16 6h2v12h-2V6z"/></svg></button>
+                    </div>
+                    <div class="action-buttons">
+                        <button type="button" class="btn btn-primary" onclick="saveJobDescAndExit()">
+                            <svg viewBox="0 0 24 24"><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>
+                            保存并退出(S)
+                        </button>
+                        <button type="button" class="btn btn-secondary" onclick="saveJobDescAndNew()">
+                            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+                            保存并新增(N)
+                        </button>
+                        <button type="button" class="btn btn-cancel" onclick="cancelJobDescForm()">取消</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- JSON Preview -->
+        <div class="data-preview">
+            <h4>📋 資料預覽 (JSON Format)</h4>
+            <pre id="jsonPreview">{}</pre>
+        </div>
+    </div>
+
+    <!-- Major Modal -->
+    <div class="modal-overlay" id="majorModal">
+        <div class="modal">
+            <div class="modal-header">
+                <h3>選擇專業要求</h3>
+                <button class="modal-close" onclick="closeMajorModal()">✕</button>
+            </div>
+            <div class="modal-body">
+                <div class="checkbox-group">
+                    <div class="checkbox-item"><input type="checkbox" id="major_cs" value="資訊工程"><label for="major_cs">資訊工程</label></div>
+                    <div class="checkbox-item"><input type="checkbox" id="major_ee" value="電機電子"><label for="major_ee">電機電子</label></div>
+                    <div class="checkbox-item"><input type="checkbox" id="major_me" value="機械工程"><label for="major_me">機械工程</label></div>
+                    <div class="checkbox-item"><input type="checkbox" id="major_ba" value="企業管理"><label for="major_ba">企業管理</label></div>
+                    <div class="checkbox-item"><input type="checkbox" id="major_acc" value="會計財務"><label for="major_acc">會計財務</label></div>
+                    <div class="checkbox-item"><input type="checkbox" id="major_hr" value="人力資源"><label for="major_hr">人力資源</label></div>
+                    <div class="checkbox-item"><input type="checkbox" id="major_mkt" value="行銷企劃"><label for="major_mkt">行銷企劃</label></div>
+                    <div class="checkbox-item"><input type="checkbox" id="major_law" value="法律"><label for="major_law">法律</label></div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-cancel" onclick="closeMajorModal()">取消</button>
+                <button class="btn btn-primary" onclick="confirmMajor()">確認</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Toast -->
+    <div class="toast" id="toast">
+        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+        <span id="toastMessage">保存成功！</span>
+    </div>
+
+    <script>
+        // ==================== AI Generation Functions ====================
+        async function callClaudeAPI(prompt, api = 'gemini') {
+            try {
+                // 調用後端 Flask API，避免 CORS 錯誤
+                const response = await fetch("/api/llm/generate", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({
+                        api: api,
+                        prompt: prompt,
+                        max_tokens: 2000
+                    })
+                });
+
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error || `API 請求失敗: ${response.status}`);
+                }
+
+                const data = await response.json();
+
+                if (!data.success) {
+                    throw new Error(data.error || 'API 調用失敗');
+                }
+
+                let responseText = data.text;
+                responseText = responseText.replace(/```json\n?/g, "").replace(/```\n?/g, "").trim();
+                return JSON.parse(responseText);
+            } catch (error) {
+                console.error("Error calling LLM API:", error);
+
+                // 嘗試解析更詳細的錯誤訊息
+                let errorDetails = error.message;
+                try {
+                    // 如果錯誤訊息是 JSON 格式，嘗試美化顯示
+                    const errorJson = JSON.parse(error.message);
+                    errorDetails = JSON.stringify(errorJson, null, 2);
+                } catch (e) {
+                    // 不是 JSON，使用原始訊息
+                }
+
+                // 創建可複製的錯誤對話框
+                showCopyableError({
+                    title: 'AI 生成錯誤',
+                    message: error.message,
+                    details: errorDetails,
+                    suggestions: [
+                        'Flask 後端已啟動 (python start_server.py)',
+                        '已在 .env 文件中配置有效的 LLM API Key',
+                        '網路連線正常',
+                        '嘗試使用不同的 LLM API (DeepSeek 或 OpenAI)'
+                    ]
+                });
+
+                throw error;
+            }
+        }
+
+        function setButtonLoading(btn, loading) {
+            if (loading) {
+                btn.disabled = true;
+                btn.innerHTML = '<div class="spinner"></div><span>AI 生成中...</span>';
+            } else {
+                btn.disabled = false;
+                btn.innerHTML = '<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>';
+            }
+        }
+
+        // Helper: 只在欄位為空時填入值
+        function fillIfEmpty(elementId, value) {
+            const el = document.getElementById(elementId);
+            if (el && !el.value.trim() && value) {
+                el.value = value;
+                return true;
+            }
+            return false;
+        }
+
+        // Helper: 獲取欄位當前值
+        function getFieldValue(elementId) {
+            const el = document.getElementById(elementId);
+            return el ? el.value.trim() : '';
+        }
+
+        // Helper: 獲取空白欄位列表
+        function getEmptyFields(fieldIds) {
+            return fieldIds.filter(id => !getFieldValue(id));
+        }
+
+        async function generatePositionBasic() {
+            const btn = event.target.closest('.ai-generate-btn');
+            
+            // 檢查哪些欄位需要填充
+            const allFields = ['positionCode', 'positionName', 'positionCategory', 'positionNature', 'headcount', 'positionLevel', 'positionDesc', 'positionRemark'];
+            const emptyFields = getEmptyFields(allFields);
+            
+            if (emptyFields.length === 0) {
+                showToast('所有欄位都已填寫完成！');
+                return;
+            }
+            
+            setButtonLoading(btn, true);
+            
+            try {
+                // 收集已有的資料作為上下文
+                const existingData = {};
+                allFields.forEach(field => {
+                    const value = getFieldValue(field);
+                    if (value) existingData[field] = value;
+                });
+                
+                const contextInfo = Object.keys(existingData).length > 0 
+                    ? `\n\n已填寫的資料（請參考這些內容來生成相關的資料）：\n${JSON.stringify(existingData, null, 2)}`
+                    : '';
+                
+                const prompt = `請為HR崗位管理系統生成崗位基礎資料。請用繁體中文回覆。
+${contextInfo}
+
+請「只生成」以下這些尚未填寫的欄位：${emptyFields.join(', ')}
+
+欄位說明：
+- positionCode: 崗位編號（格式如 ENG-001, MGR-002, SAL-003）
+- positionName: 崗位名稱
+- positionCategory: 崗位類別代碼（01=技術職, 02=管理職, 03=業務職, 04=行政職）
+- positionNature: 崗位性質代碼（FT=全職, PT=兼職, CT=約聘, IN=實習）
+- headcount: 編制人數（1-10之間的數字字串）
+- positionLevel: 崗位級別（L1到L7）
+- positionDesc: 崗位描述（2-3句話描述工作內容）
+- positionRemark: 崗位備注（可選的補充說明）
+
+請直接返回JSON格式，只包含需要生成的欄位，不要有任何其他文字：
+{
+  ${emptyFields.map(f => `"${f}": "..."`).join(',\n  ')}
+}`;
+
+                const data = await callClaudeAPI(prompt);
+                
+                // 只填充空白欄位
+                let filledCount = 0;
+                if (fillIfEmpty('positionCode', data.positionCode)) filledCount++;
+                if (fillIfEmpty('positionName', data.positionName)) filledCount++;
+                if (fillIfEmpty('positionCategory', data.positionCategory)) {
+                    filledCount++;
+                    updateCategoryName();
+                }
+                if (fillIfEmpty('positionNature', data.positionNature)) {
+                    filledCount++;
+                    updateNatureName();
+                }
+                if (fillIfEmpty('headcount', data.headcount)) filledCount++;
+                if (fillIfEmpty('positionLevel', data.positionLevel)) filledCount++;
+                if (fillIfEmpty('positionDesc', data.positionDesc)) filledCount++;
+                if (fillIfEmpty('positionRemark', data.positionRemark)) filledCount++;
+                
+                updatePreview();
+                showToast(`✨ AI 已補充 ${filledCount} 個欄位！`);
+            } catch (error) {
+                showToast('生成失敗，請稍後再試');
+            } finally {
+                setButtonLoading(btn, false);
+            }
+        }
+
+        async function generatePositionRecruit() {
+            const btn = event.target.closest('.ai-generate-btn');
+            
+            const allFields = ['minEducation', 'requiredGender', 'salaryRange', 'workExperience', 'minAge', 'maxAge', 'jobType', 'recruitPosition', 'jobTitle', 'jobDesc', 'positionReq', 'skillReq', 'langReq', 'otherReq'];
+            const emptyFields = getEmptyFields(allFields);
+            
+            if (emptyFields.length === 0) {
+                showToast('所有欄位都已填寫完成！');
+                return;
+            }
+            
+            setButtonLoading(btn, true);
+            
+            try {
+                // 收集已有資料，包含基礎資料頁籤的崗位名稱
+                const positionName = getFieldValue('positionName') || '一般職位';
+                const existingData = { positionName };
+                allFields.forEach(field => {
+                    const value = getFieldValue(field);
+                    if (value) existingData[field] = value;
+                });
+                
+                const prompt = `請為HR崗位管理系統生成「${positionName}」的招聘要求資料。請用繁體中文回覆。
+
+已填寫的資料（請參考這些內容來生成相關的資料）：
+${JSON.stringify(existingData, null, 2)}
+
+請「只生成」以下這些尚未填寫的欄位：${emptyFields.join(', ')}
+
+欄位說明：
+- minEducation: 最低學歷代碼（HS=高中職, JC=專科, BA=大學, MA=碩士, PHD=博士）
+- requiredGender: 要求性別（空字串=不限, M=男, F=女）
+- salaryRange: 薪酬范圍代碼（A=30000以下, B=30000-50000, C=50000-80000, D=80000-120000, E=120000以上, N=面議）
+- workExperience: 工作經驗年數（0=不限, 1, 3, 5, 10）
+- minAge: 最小年齡（18-30之間的數字字串）
+- maxAge: 最大年齡（35-55之間的數字字串）
+- jobType: 工作性質代碼（FT=全職, PT=兼職, CT=約聘, DP=派遣）
+- recruitPosition: 招聘職位代碼（ENG=工程師, MGR=經理, AST=助理, OP=作業員, SAL=業務）
+- jobTitle: 職位名稱
+- jobDesc: 職位描述（2-3句話）
+- positionReq: 崗位要求（條列式，用換行分隔）
+- skillReq: 技能要求（用逗號分隔）
+- langReq: 語言要求
+- otherReq: 其他要求
+
+請直接返回JSON格式，只包含需要生成的欄位：
+{
+  ${emptyFields.map(f => `"${f}": "..."`).join(',\n  ')}
+}`;
+
+                const data = await callClaudeAPI(prompt);
+                
+                let filledCount = 0;
+                if (fillIfEmpty('minEducation', data.minEducation)) filledCount++;
+                if (fillIfEmpty('requiredGender', data.requiredGender)) filledCount++;
+                if (fillIfEmpty('salaryRange', data.salaryRange)) filledCount++;
+                if (fillIfEmpty('workExperience', data.workExperience)) filledCount++;
+                if (fillIfEmpty('minAge', data.minAge)) filledCount++;
+                if (fillIfEmpty('maxAge', data.maxAge)) filledCount++;
+                if (fillIfEmpty('jobType', data.jobType)) filledCount++;
+                if (fillIfEmpty('recruitPosition', data.recruitPosition)) filledCount++;
+                if (fillIfEmpty('jobTitle', data.jobTitle)) filledCount++;
+                if (fillIfEmpty('jobDesc', data.jobDesc)) filledCount++;
+                if (fillIfEmpty('positionReq', data.positionReq)) filledCount++;
+                if (fillIfEmpty('skillReq', data.skillReq)) filledCount++;
+                if (fillIfEmpty('langReq', data.langReq)) filledCount++;
+                if (fillIfEmpty('otherReq', data.otherReq)) filledCount++;
+                
+                updatePreview();
+                showToast(`✨ AI 已補充 ${filledCount} 個欄位！`);
+            } catch (error) {
+                showToast('生成失敗，請稍後再試');
+            } finally {
+                setButtonLoading(btn, false);
+            }
+        }
+
+        async function generateJobBasic() {
+            const btn = event.target.closest('.ai-generate-btn');
+            
+            const allFields = ['jobCategoryCode', 'jobCode', 'jobName', 'jobNameEn', 'jobHeadcount', 'jobSortOrder', 'jobRemark', 'jobLevel'];
+            const emptyFields = getEmptyFields(allFields);
+            
+            // 也檢查 checkbox 是否需要設定
+            const needCheckboxes = !document.getElementById('hasAttendanceBonus').checked && !document.getElementById('hasHousingAllowance').checked;
+            
+            if (emptyFields.length === 0 && !needCheckboxes) {
+                showToast('所有欄位都已填寫完成！');
+                return;
+            }
+            
+            setButtonLoading(btn, true);
+            
+            try {
+                const existingData = {};
+                allFields.forEach(field => {
+                    const value = getFieldValue(field);
+                    if (value) existingData[field] = value;
+                });
+                
+                const contextInfo = Object.keys(existingData).length > 0 
+                    ? `\n\n已填寫的資料（請參考這些內容來生成相關的資料）：\n${JSON.stringify(existingData, null, 2)}`
+                    : '';
+                
+                const fieldsToGenerate = [...emptyFields];
+                if (needCheckboxes) {
+                    fieldsToGenerate.push('hasAttendanceBonus', 'hasHousingAllowance');
+                }
+                
+                const prompt = `請為HR職務管理系統生成職務基礎資料。請用繁體中文回覆。
+${contextInfo}
+
+請「只生成」以下這些尚未填寫的欄位：${fieldsToGenerate.join(', ')}
+
+欄位說明：
+- jobCategoryCode: 職務類別代碼（MGR=管理職, TECH=技術職, SALE=業務職, ADMIN=行政職, RD=研發職, PROD=生產職）
+- jobCode: 職務編號（格式如 MGR-001, TECH-002）
+- jobName: 職務名稱
+- jobNameEn: 職務英文名稱
+- jobHeadcount: 編制人數（1-20之間的數字字串）
+- jobSortOrder: 排列順序（10, 20, 30...的數字字串）
+- jobRemark: 備注說明
+- jobLevel: 職務層級（可以是 *保密* 或具體層級）
+- hasAttendanceBonus: 是否有全勤（true/false）
+- hasHousingAllowance: 是否住房補貼（true/false）
+
+請直接返回JSON格式，只包含需要生成的欄位：
+{
+  ${fieldsToGenerate.map(f => `"${f}": "..."`).join(',\n  ')}
+}`;
+
+                const data = await callClaudeAPI(prompt);
+                
+                let filledCount = 0;
+                if (fillIfEmpty('jobCategoryCode', data.jobCategoryCode)) {
+                    filledCount++;
+                    updateJobCategoryName();
+                }
+                if (fillIfEmpty('jobCode', data.jobCode)) filledCount++;
+                if (fillIfEmpty('jobName', data.jobName)) filledCount++;
+                if (fillIfEmpty('jobNameEn', data.jobNameEn)) filledCount++;
+                if (fillIfEmpty('jobHeadcount', data.jobHeadcount)) filledCount++;
+                if (fillIfEmpty('jobSortOrder', data.jobSortOrder)) filledCount++;
+                if (fillIfEmpty('jobRemark', data.jobRemark)) filledCount++;
+                if (fillIfEmpty('jobLevel', data.jobLevel)) filledCount++;
+                
+                // Checkbox 只在尚未勾選時設定
+                if (needCheckboxes) {
+                    const attendanceCheckbox = document.getElementById('hasAttendanceBonus');
+                    const housingCheckbox = document.getElementById('hasHousingAllowance');
+                    
+                    if (data.hasAttendanceBonus === true) {
+                        attendanceCheckbox.checked = true;
+                        document.getElementById('attendanceLabel').textContent = '是';
+                        filledCount++;
+                    }
+                    if (data.hasHousingAllowance === true) {
+                        housingCheckbox.checked = true;
+                        document.getElementById('housingLabel').textContent = '是';
+                        filledCount++;
+                    }
+                }
+                
+                updatePreview();
+                showToast(`✨ AI 已補充 ${filledCount} 個欄位！`);
+            } catch (error) {
+                showToast('生成失敗，請稍後再試');
+            } finally {
+                setButtonLoading(btn, false);
+            }
+        }
+
+        async function generateJobDesc() {
+            const btn = event.target.closest('.ai-generate-btn');
+            
+            const allFields = ['jd_empNo', 'jd_empName', 'jd_positionCode', 'jd_versionDate', 'jd_positionName', 'jd_department', 'jd_positionEffectiveDate', 'jd_directSupervisor', 'jd_directReports', 'jd_workLocation', 'jd_empAttribute', 'jd_positionPurpose', 'jd_mainResponsibilities', 'jd_education', 'jd_basicSkills', 'jd_professionalKnowledge', 'jd_workExperienceReq', 'jd_otherRequirements'];
+            
+            const emptyFields = allFields.filter(id => {
+                const el = document.getElementById(id);
+                const value = el ? el.value.trim() : '';
+                // 對於 mainResponsibilities，檢查是否只有預設的編號
+                if (id === 'jd_mainResponsibilities') {
+                    return !value || value === '1、\n2、\n3、\n4、' || value === '1、\n2、\n3、\n4、\n5、';
+                }
+                return !value;
+            });
+            
+            if (emptyFields.length === 0) {
+                showToast('所有欄位都已填寫完成！');
+                return;
+            }
+            
+            setButtonLoading(btn, true);
+            
+            try {
+                // 收集已有資料
+                const existingData = {};
+                allFields.forEach(field => {
+                    const el = document.getElementById(field);
+                    const value = el ? el.value.trim() : '';
+                    if (value && value !== '1、\n2、\n3、\n4、') {
+                        existingData[field.replace('jd_', '')] = value;
+                    }
+                });
+                
+                const contextInfo = Object.keys(existingData).length > 0 
+                    ? `\n\n已填寫的資料（請參考這些內容來生成相關的資料）：\n${JSON.stringify(existingData, null, 2)}`
+                    : '';
+                
+                const fieldsToGenerate = emptyFields.map(f => f.replace('jd_', ''));
+                
+                const prompt = `請為HR崗位描述管理系統生成崗位描述資料。請用繁體中文回覆。
+${contextInfo}
+
+請「只生成」以下這些尚未填寫的欄位：${fieldsToGenerate.join(', ')}
+
+欄位說明：
+- empNo: 工號（格式如 A001234）
+- empName: 員工姓名
+- positionCode: 崗位代碼
+- versionDate: 版本日期（YYYY-MM-DD格式）
+- positionName: 崗位名稱
+- department: 所屬部門
+- positionEffectiveDate: 崗位生效日期（YYYY-MM-DD格式）
+- directSupervisor: 直接領導職務
+- directReports: 直接下級（格式如「工程師 x 5人」）
+- workLocation: 任職地點代碼（HQ=總部, TPE=台北, TYC=桃園, KHH=高雄, SH=上海, SZ=深圳）
+- empAttribute: 員工屬性代碼（FT=正式員工, CT=約聘, PT=兼職, IN=實習, DP=派遣）
+- positionPurpose: 崗位設置目的（1句話說明）
+- mainResponsibilities: 主要崗位職責（用「1、」「2、」「3、」「4、」「5、」格式，每項換行，用\\n分隔）
+- education: 教育程度要求
+- basicSkills: 基本技能要求
+- professionalKnowledge: 專業知識要求
+- workExperienceReq: 工作經驗要求
+- otherRequirements: 其他要求
+
+請直接返回JSON格式，只包含需要生成的欄位：
+{
+  ${fieldsToGenerate.map(f => `"${f}": "..."`).join(',\n  ')}
+}`;
+
+                const data = await callClaudeAPI(prompt);
+                
+                let filledCount = 0;
+                
+                // 使用映射來處理 jd_ 前綴
+                const fieldMapping = {
+                    'empNo': 'jd_empNo',
+                    'empName': 'jd_empName',
+                    'positionCode': 'jd_positionCode',
+                    'versionDate': 'jd_versionDate',
+                    'positionName': 'jd_positionName',
+                    'department': 'jd_department',
+                    'positionEffectiveDate': 'jd_positionEffectiveDate',
+                    'directSupervisor': 'jd_directSupervisor',
+                    'directReports': 'jd_directReports',
+                    'workLocation': 'jd_workLocation',
+                    'empAttribute': 'jd_empAttribute',
+                    'positionPurpose': 'jd_positionPurpose',
+                    'mainResponsibilities': 'jd_mainResponsibilities',
+                    'education': 'jd_education',
+                    'basicSkills': 'jd_basicSkills',
+                    'professionalKnowledge': 'jd_professionalKnowledge',
+                    'workExperienceReq': 'jd_workExperienceReq',
+                    'otherRequirements': 'jd_otherRequirements'
+                };
+                
+                Object.keys(fieldMapping).forEach(apiField => {
+                    const htmlId = fieldMapping[apiField];
+                    if (data[apiField]) {
+                        const el = document.getElementById(htmlId);
+                        const currentValue = el ? el.value.trim() : '';
+                        // 特殊處理 mainResponsibilities
+                        const isEmpty = !currentValue || currentValue === '1、\n2、\n3、\n4、';
+                        if (isEmpty) {
+                            el.value = data[apiField];
+                            filledCount++;
+                        }
+                    }
+                });
+                
+                updatePreview();
+                showToast(`✨ AI 已補充 ${filledCount} 個欄位！`);
+            } catch (error) {
+                showToast('生成失敗，請稍後再試');
+            } finally {
+                setButtonLoading(btn, false);
+            }
+        }
+
+        // ==================== Module Switching ====================
+        document.querySelectorAll('.module-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.module-btn').forEach(b => {
+                    b.classList.remove('active', 'job-active', 'desc-active');
+                });
+                document.querySelectorAll('.module-content').forEach(c => c.classList.remove('active'));
+                btn.classList.add('active');
+                if (btn.dataset.module === 'job') btn.classList.add('job-active');
+                if (btn.dataset.module === 'jobdesc') btn.classList.add('desc-active');
+                document.getElementById('module-' + btn.dataset.module).classList.add('active');
+                updatePreview();
+            });
+        });
+
+        // ==================== Tab Switching ====================
+        document.querySelectorAll('.tab-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const parent = btn.closest('.form-card');
+                parent.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+                parent.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+                btn.classList.add('active');
+                document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
+            });
+        });
+
+        // ==================== Position Form Logic ====================
+        const categoryMap = { '01': '技術職', '02': '管理職', '03': '業務職', '04': '行政職' };
+        const natureMap = { 'FT': '全職', 'PT': '兼職', 'CT': '約聘', 'IN': '實習' };
+
+        function updateCategoryName() {
+            const category = document.getElementById('positionCategory').value;
+            document.getElementById('positionCategoryName').value = categoryMap[category] || '';
+            updatePreview();
+        }
+
+        function updateNatureName() {
+            const nature = document.getElementById('positionNature').value;
+            document.getElementById('positionNatureName').value = natureMap[nature] || '';
+            updatePreview();
+        }
+
+        function changePositionCode() {
+            const currentCode = document.getElementById('positionCode').value;
+            const newCode = prompt('請輸入新的崗位編號:', currentCode);
+            if (newCode && newCode !== currentCode) {
+                document.getElementById('positionCode').value = newCode;
+                showToast('崗位編號已更改！');
+                updatePreview();
+            }
+        }
+
+        // ==================== Job Form Logic ====================
+        const jobCategoryMap = { 'MGR': '管理職', 'TECH': '技術職', 'SALE': '業務職', 'ADMIN': '行政職', 'RD': '研發職', 'PROD': '生產職' };
+
+        function updateJobCategoryName() {
+            const category = document.getElementById('jobCategoryCode').value;
+            document.getElementById('jobCategoryName').value = jobCategoryMap[category] || '';
+            updatePreview();
+        }
+
+        function changeJobCode() {
+            const currentCode = document.getElementById('jobCode').value;
+            const newCode = prompt('請輸入新的職務編號:', currentCode);
+            if (newCode && newCode !== currentCode) {
+                document.getElementById('jobCode').value = newCode;
+                showToast('職務編號已更改！');
+                updatePreview();
+            }
+        }
+
+        document.getElementById('hasAttendanceBonus').addEventListener('change', function() {
+            document.getElementById('attendanceLabel').textContent = this.checked ? '是' : '否';
+            updatePreview();
+        });
+
+        document.getElementById('hasHousingAllowance').addEventListener('change', function() {
+            document.getElementById('housingLabel').textContent = this.checked ? '是' : '否';
+            updatePreview();
+        });
+
+        // ==================== Job Description Logic ====================
+        function openEmpSearchModal() { showToast('員工選擇功能 (待整合)'); }
+        function openOrgSearchModal() { showToast('組織選擇功能 (待整合)'); }
+        function openGradeJobModal() { showToast('職等職務選擇功能 (待整合)'); }
+        function openReportToModal() { showToast('匯報對象選擇功能 (待整合)'); }
+        function expandPurpose() { showToast('展開編輯功能 (待開發)'); }
+        function expandField(fieldName) { showToast('展開編輯功能 (待開發)'); }
+
+        // ==================== Major Modal ====================
+        function openMajorModal() { document.getElementById('majorModal').classList.add('show'); }
+        function closeMajorModal() { document.getElementById('majorModal').classList.remove('show'); }
+        function confirmMajor() {
+            const selected = [];
+            document.querySelectorAll('#majorModal input[type="checkbox"]:checked').forEach(cb => {
+                selected.push(cb.value);
+            });
+            document.getElementById('majorReq').value = selected.join(', ');
+            closeMajorModal();
+            updatePreview();
+        }
+
+        // ==================== Data Handling ====================
+        function getPositionFormData() {
+            const form = document.getElementById('positionForm');
+            const formData = new FormData(form);
+            const data = { basicInfo: {}, recruitInfo: {} };
+            const basicFields = ['positionCode', 'positionName', 'positionCategory', 'positionCategoryName', 'positionNature', 'positionNatureName', 'headcount', 'positionLevel', 'effectiveDate', 'positionDesc', 'positionRemark'];
+            const recruitFields = ['minEducation', 'requiredGender', 'salaryRange', 'workExperience', 'minAge', 'maxAge', 'jobType', 'recruitPosition', 'jobTitle', 'jobDesc', 'positionReq', 'titleReq', 'majorReq', 'skillReq', 'langReq', 'otherReq', 'superiorPosition', 'recruitRemark'];
+            basicFields.forEach(field => { const value = formData.get(field); if (value) data.basicInfo[field] = value; });
+            recruitFields.forEach(field => { const value = formData.get(field); if (value) data.recruitInfo[field] = value; });
+            return data;
+        }
+
+        function getJobFormData() {
+            const form = document.getElementById('jobForm');
+            const formData = new FormData(form);
+            const data = {};
+            const fields = ['jobCategoryCode', 'jobCategoryName', 'jobCode', 'jobName', 'jobNameEn', 'jobEffectiveDate', 'jobHeadcount', 'jobSortOrder', 'jobRemark', 'jobLevel'];
+            fields.forEach(field => { const value = formData.get(field); if (value) data[field] = value; });
+            data.hasAttendanceBonus = document.getElementById('hasAttendanceBonus').checked;
+            data.hasHousingAllowance = document.getElementById('hasHousingAllowance').checked;
+            return data;
+        }
+
+        function getJobDescFormData() {
+            const form = document.getElementById('jobDescForm');
+            const formData = new FormData(form);
+            const data = { basicInfo: {}, positionInfo: {}, responsibilities: {}, requirements: {} };
+            
+            // Basic Info
+            ['empNo', 'empName', 'positionCode', 'versionDate'].forEach(field => {
+                const el = document.getElementById('jd_' + field);
+                if (el && el.value) data.basicInfo[field] = el.value;
+            });
+            
+            // Position Info
+            ['positionName', 'department', 'positionEffectiveDate', 'directSupervisor', 'positionGradeJob', 'reportTo', 'directReports', 'workLocation', 'empAttribute'].forEach(field => {
+                const el = document.getElementById('jd_' + field);
+                if (el && el.value) data.positionInfo[field] = el.value;
+            });
+            
+            // Purpose & Responsibilities
+            const purpose = document.getElementById('jd_positionPurpose');
+            if (purpose && purpose.value) data.responsibilities.positionPurpose = purpose.value;
+            const mainResp = document.getElementById('jd_mainResponsibilities');
+            if (mainResp && mainResp.value) data.responsibilities.mainResponsibilities = mainResp.value;
+            
+            // Requirements
+            ['education', 'basicSkills', 'professionalKnowledge', 'workExperienceReq', 'otherRequirements'].forEach(field => {
+                const el = document.getElementById('jd_' + field);
+                if (el && el.value) data.requirements[field] = el.value;
+            });
+            
+            return data;
+        }
+
+        function updatePreview() {
+            const activeModule = document.querySelector('.module-btn.active').dataset.module;
+            let data;
+            if (activeModule === 'position') {
+                data = { module: '崗位基礎資料', ...getPositionFormData() };
+            } else if (activeModule === 'job') {
+                data = { module: '職務基礎資料', ...getJobFormData() };
+            } else {
+                data = { module: '崗位描述', ...getJobDescFormData() };
+            }
+            document.getElementById('jsonPreview').textContent = JSON.stringify(data, null, 2);
+        }
+
+        function showToast(message) {
+            const toast = document.getElementById('toast');
+            document.getElementById('toastMessage').textContent = message;
+            toast.classList.add('show');
+            setTimeout(() => toast.classList.remove('show'), 3000);
+        }
+
+        // ==================== Form Actions ====================
+        function savePositionAndExit() {
+            const form = document.getElementById('positionForm');
+            if (!form.checkValidity()) { form.reportValidity(); return; }
+            console.log('Save Position:', getPositionFormData());
+            showToast('崗位資料已保存！');
+        }
+
+        function savePositionAndNew() {
+            const form = document.getElementById('positionForm');
+            if (!form.checkValidity()) { form.reportValidity(); return; }
+            console.log('Save Position:', getPositionFormData());
+            showToast('崗位資料已保存，請繼續新增！');
+            form.reset();
+            document.getElementById('effectiveDate').value = new Date().toISOString().split('T')[0];
+            updatePreview();
+        }
+
+        function cancelPositionForm() {
+            if (confirm('確定要取消嗎？未保存的資料將會遺失。')) {
+                document.getElementById('positionForm').reset();
+                updatePreview();
+            }
+        }
+
+        function saveJobAndExit() {
+            const form = document.getElementById('jobForm');
+            if (!form.checkValidity()) { form.reportValidity(); return; }
+            console.log('Save Job:', getJobFormData());
+            showToast('職務資料已保存！');
+        }
+
+        function saveJobAndNew() {
+            const form = document.getElementById('jobForm');
+            if (!form.checkValidity()) { form.reportValidity(); return; }
+            console.log('Save Job:', getJobFormData());
+            showToast('職務資料已保存，請繼續新增！');
+            form.reset();
+            document.getElementById('attendanceLabel').textContent = '否';
+            document.getElementById('housingLabel').textContent = '否';
+            updatePreview();
+        }
+
+        function cancelJobForm() {
+            if (confirm('確定要取消嗎？未保存的資料將會遺失。')) {
+                document.getElementById('jobForm').reset();
+                document.getElementById('attendanceLabel').textContent = '否';
+                document.getElementById('housingLabel').textContent = '否';
+                updatePreview();
+            }
+        }
+
+        function saveJobDescAndExit() {
+            console.log('Save JobDesc:', getJobDescFormData());
+            showToast('崗位描述已保存！');
+        }
+
+        function saveJobDescAndNew() {
+            console.log('Save JobDesc:', getJobDescFormData());
+            showToast('崗位描述已保存，請繼續新增！');
+            document.getElementById('jobDescForm').reset();
+            document.getElementById('jd_mainResponsibilities').value = '1、\n2、\n3、\n4、';
+            updatePreview();
+        }
+
+        function cancelJobDescForm() {
+            if (confirm('確定要取消嗎？未保存的資料將會遺失。')) {
+                document.getElementById('jobDescForm').reset();
+                document.getElementById('jd_mainResponsibilities').value = '1、\n2、\n3、\n4、';
+                updatePreview();
+            }
+        }
+
+        // ==================== Event Listeners ====================
+        document.querySelectorAll('input, select, textarea').forEach(el => {
+            el.addEventListener('input', updatePreview);
+            el.addEventListener('change', updatePreview);
+        });
+
+        document.addEventListener('keydown', (e) => {
+            if (e.ctrlKey || e.metaKey) {
+                const activeModule = document.querySelector('.module-btn.active').dataset.module;
+                if (e.key === 's') {
+                    e.preventDefault();
+                    if (activeModule === 'position') savePositionAndExit();
+                    else if (activeModule === 'job') saveJobAndExit();
+                    else saveJobDescAndExit();
+                } else if (e.key === 'n') {
+                    e.preventDefault();
+                    if (activeModule === 'position') savePositionAndNew();
+                    else if (activeModule === 'job') saveJobAndNew();
+                    else saveJobDescAndNew();
+                }
+            }
+        });
+
+        updatePreview();
+
+        // 顯示可複製的錯誤訊息
+        function showCopyableError(options) {
+            const { title, message, details, suggestions } = options;
+
+            // 創建對話框
+            const modal = document.createElement('div');
+            modal.style.cssText = `
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0,0,0,0.7);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 10000;
+                animation: fadeIn 0.3s;
+            `;
+
+            modal.innerHTML = `
+                <div style="
+                    background: white;
+                    border-radius: 12px;
+                    max-width: 600px;
+                    width: 90%;
+                    max-height: 80vh;
+                    overflow: hidden;
+                    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+                    display: flex;
+                    flex-direction: column;
+                ">
+                    <!-- Header -->
+                    <div style="
+                        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
+                        color: white;
+                        padding: 20px;
+                        display: flex;
+                        align-items: center;
+                        gap: 15px;
+                    ">
+                        <span style="font-size: 2rem;">❌</span>
+                        <h3 style="margin: 0; font-size: 1.3rem; flex: 1;">${title}</h3>
+                        <button onclick="closeErrorModal(this)" style="
+                            background: rgba(255,255,255,0.2);
+                            border: none;
+                            color: white;
+                            width: 30px;
+                            height: 30px;
+                            border-radius: 50%;
+                            cursor: pointer;
+                            font-size: 1.2rem;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                        ">×</button>
+                    </div>
+
+                    <!-- Body -->
+                    <div style="
+                        padding: 25px;
+                        overflow-y: auto;
+                        flex: 1;
+                    ">
+                        <div style="
+                            color: #333;
+                            line-height: 1.6;
+                            margin-bottom: 20px;
+                            font-size: 1rem;
+                        ">${message}</div>
+
+                        ${suggestions && suggestions.length > 0 ? `
+                        <div style="
+                            background: #fff3cd;
+                            border: 1px solid #ffc107;
+                            border-radius: 6px;
+                            padding: 15px;
+                            margin-bottom: 20px;
+                        ">
+                            <strong style="color: #856404; display: block; margin-bottom: 10px;">💡 請確保：</strong>
+                            <ul style="margin: 0; padding-left: 20px; color: #856404;">
+                                ${suggestions.map(s => `<li style="margin: 5px 0;">${s}</li>`).join('')}
+                            </ul>
+                        </div>
+                        ` : ''}
+
+                        ${details ? `
+                        <details style="
+                            background: #f8f9fa;
+                            border: 1px solid #dee2e6;
+                            border-radius: 6px;
+                            padding: 15px;
+                        ">
+                            <summary style="
+                                cursor: pointer;
+                                font-weight: 600;
+                                color: #495057;
+                                user-select: none;
+                                margin-bottom: 10px;
+                            ">🔍 詳細錯誤訊息（點擊展開）</summary>
+                            <pre id="errorDetailsText" style="
+                                background: white;
+                                padding: 15px;
+                                border-radius: 4px;
+                                overflow-x: auto;
+                                font-size: 0.85rem;
+                                color: #666;
+                                margin: 10px 0 0 0;
+                                white-space: pre-wrap;
+                                word-break: break-word;
+                                max-height: 300px;
+                                overflow-y: auto;
+                            ">${details}</pre>
+                            <button onclick="copyErrorDetails()" style="
+                                background: #007bff;
+                                color: white;
+                                border: none;
+                                padding: 8px 16px;
+                                border-radius: 4px;
+                                cursor: pointer;
+                                margin-top: 10px;
+                                font-size: 0.9rem;
+                            ">📋 複製錯誤訊息</button>
+                        </details>
+                        ` : ''}
+                    </div>
+
+                    <!-- Footer -->
+                    <div style="
+                        padding: 15px 25px;
+                        border-top: 1px solid #f0f0f0;
+                        display: flex;
+                        justify-content: flex-end;
+                        gap: 10px;
+                    ">
+                        <button onclick="closeErrorModal(this)" style="
+                            background: #007bff;
+                            color: white;
+                            border: none;
+                            padding: 10px 25px;
+                            border-radius: 6px;
+                            cursor: pointer;
+                            font-size: 0.95rem;
+                            font-weight: 500;
+                        ">確定</button>
+                    </div>
+                </div>
+            `;
+
+            document.body.appendChild(modal);
+
+            // 點擊背景關閉
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) {
+                    modal.remove();
+                }
+            });
+        }
+
+
+        // 關閉錯誤訊息對話框
+        function closeErrorModal(button) {
+            const modal = button.closest('[style*="position: fixed"]');
+            if (modal) {
+                modal.style.opacity = '0';
+                setTimeout(() => modal.remove(), 300);
+            }
+        }
+    
+        // 複製錯誤訊息到剪貼板
+        function copyErrorDetails() {
+            const text = document.getElementById('errorDetailsText').textContent;
+            navigator.clipboard.writeText(text).then(() => {
+                alert('錯誤訊息已複製到剪貼板！');
+            }).catch(err => {
+                // Fallback: 選取文字
+                const range = document.createRange();
+                range.selectNode(document.getElementById('errorDetailsText'));
+                window.getSelection().removeAllRanges();
+                window.getSelection().addRange(range);
+                try {
+                    document.execCommand('copy');
+                    alert('錯誤訊息已複製到剪貼板！');
+                } catch (e) {
+                    alert('複製失敗，請手動選取並複製');
+                }
+            });
+        }
+    
+    </script>
+</body>
+</html>
diff --git a/init_database.py b/init_database.py
new file mode 100644
index 0000000..062ac60
--- /dev/null
+++ b/init_database.py
@@ -0,0 +1,130 @@
+"""
+Database initialization script for HR Position System
+Connects to MySQL and executes the schema creation script
+"""
+
+import os
+import pymysql
+from dotenv import load_dotenv
+
+# Load environment variables
+load_dotenv()
+
+def init_database():
+    """Initialize the database schema"""
+
+    # Database connection parameters
+    db_config = {
+        'host': os.getenv('DB_HOST'),
+        'port': int(os.getenv('DB_PORT')),
+        'user': os.getenv('DB_USER'),
+        'password': os.getenv('DB_PASSWORD'),
+        'database': os.getenv('DB_NAME'),
+        'charset': 'utf8mb4',
+        'cursorclass': pymysql.cursors.DictCursor
+    }
+
+    print(f"Connecting to database: {db_config['host']}:{db_config['port']}")
+    print(f"Database: {db_config['database']}")
+
+    try:
+        # Connect to MySQL
+        connection = pymysql.connect(**db_config)
+        print("✓ Successfully connected to database")
+
+        # Read SQL schema file
+        schema_file = os.path.join(os.path.dirname(__file__), 'database_schema.sql')
+        with open(schema_file, 'r', encoding='utf-8') as f:
+            sql_script = f.read()
+
+        # Split SQL script by semicolon and execute each statement
+        cursor = connection.cursor()
+
+        # Split by semicolon and filter out empty statements
+        statements = [stmt.strip() for stmt in sql_script.split(';') if stmt.strip()]
+
+        print(f"\nExecuting {len(statements)} SQL statements...")
+
+        executed = 0
+        for i, statement in enumerate(statements, 1):
+            try:
+                # Skip comments and empty lines
+                if not statement or statement.startswith('--'):
+                    continue
+
+                cursor.execute(statement)
+                executed += 1
+
+                # Show progress every 10 statements
+                if executed % 10 == 0:
+                    print(f"  Executed {executed} statements...")
+
+            except Exception as e:
+                print(f"  Warning on statement {i}: {str(e)[:100]}")
+                continue
+
+        # Commit changes
+        connection.commit()
+        print(f"\n✓ Successfully executed {executed} SQL statements")
+
+        # Verify tables were created
+        cursor.execute("""
+            SELECT table_name
+            FROM information_schema.tables
+            WHERE table_schema = 'hr_position_system'
+            ORDER BY table_name
+        """)
+        tables = cursor.fetchall()
+
+        print(f"\n✓ Created {len(tables)} tables:")
+        for table in tables:
+            print(f"  - {table['table_name']}")
+
+        # Close connection
+        cursor.close()
+        connection.close()
+
+        print("\n✓ Database initialization completed successfully!")
+        return True
+
+    except Exception as e:
+        print(f"\n✗ Error initializing database: {str(e)}")
+        return False
+
+def test_connection():
+    """Test database connection"""
+    db_config = {
+        'host': os.getenv('DB_HOST'),
+        'port': int(os.getenv('DB_PORT')),
+        'user': os.getenv('DB_USER'),
+        'password': os.getenv('DB_PASSWORD'),
+        'database': os.getenv('DB_NAME')
+    }
+
+    try:
+        connection = pymysql.connect(**db_config)
+        print("✓ Database connection test successful")
+        connection.close()
+        return True
+    except Exception as e:
+        print(f"✗ Database connection test failed: {str(e)}")
+        return False
+
+if __name__ == '__main__':
+    print("=" * 60)
+    print("HR Position System - Database Initialization")
+    print("=" * 60)
+    print()
+
+    # Test connection first
+    print("Step 1: Testing database connection...")
+    if not test_connection():
+        print("\nPlease check your database configuration in .env file")
+        exit(1)
+
+    print("\nStep 2: Initializing database schema...")
+    if init_database():
+        print("\nDatabase is ready to use!")
+    else:
+        print("\nDatabase initialization failed. Please check the errors above.")
+        exit(1)
diff --git a/llm_config.py b/llm_config.py
new file mode 100644
index 0000000..9f7efa2
--- /dev/null
+++ b/llm_config.py
@@ -0,0 +1,308 @@
+"""
+LLM API Configuration Module
+Supports Gemini, DeepSeek, and OpenAI APIs with connection testing
+"""
+
+import os
+import requests
+from dotenv import load_dotenv
+from typing import Dict, List, Tuple
+
+# Load environment variables
+load_dotenv()
+
+
+class LLMConfig:
+    """LLM API configuration and management"""
+
+    def __init__(self):
+        self.apis = {
+            'gemini': {
+                'name': 'Google Gemini',
+                'api_key': os.getenv('GEMINI_API_KEY', ''),
+                'endpoint': 'https://generativelanguage.googleapis.com/v1/models',
+                'enabled': bool(os.getenv('GEMINI_API_KEY'))
+            },
+            'deepseek': {
+                'name': 'DeepSeek',
+                'api_key': os.getenv('DEEPSEEK_API_KEY', ''),
+                'endpoint': os.getenv('DEEPSEEK_API_URL', 'https://api.deepseek.com/v1'),
+                'enabled': bool(os.getenv('DEEPSEEK_API_KEY'))
+            },
+            'openai': {
+                'name': 'OpenAI',
+                'api_key': os.getenv('OPENAI_API_KEY', ''),
+                'endpoint': os.getenv('OPENAI_API_URL', 'https://api.openai.com/v1'),
+                'enabled': bool(os.getenv('OPENAI_API_KEY'))
+            }
+        }
+
+    def get_enabled_apis(self) -> List[str]:
+        """Get list of enabled APIs"""
+        return [key for key, config in self.apis.items() if config['enabled']]
+
+    def get_api_config(self, api_name: str) -> Dict:
+        """Get configuration for specific API"""
+        return self.apis.get(api_name, {})
+
+    def test_gemini_connection(self) -> Tuple[bool, str]:
+        """Test Gemini API connection"""
+        try:
+            api_key = self.apis['gemini']['api_key']
+            if not api_key:
+                return False, "API Key 未設定"
+
+            # Test endpoint - list models
+            url = f"https://generativelanguage.googleapis.com/v1beta/models?key={api_key}"
+
+            response = requests.get(url, timeout=10)
+
+            if response.status_code == 200:
+                data = response.json()
+                models = data.get('models', [])
+                model_count = len(models)
+                return True, f"連線成功！找到 {model_count} 個可用模型"
+            elif response.status_code == 400:
+                return False, "API Key 格式錯誤"
+            elif response.status_code == 403:
+                return False, "API Key 無效或權限不足"
+            else:
+                return False, f"連線失敗 (HTTP {response.status_code})"
+
+        except requests.exceptions.Timeout:
+            return False, "連線逾時"
+        except requests.exceptions.ConnectionError:
+            return False, "無法連接到伺服器"
+        except Exception as e:
+            return False, f"錯誤: {str(e)}"
+
+    def test_deepseek_connection(self) -> Tuple[bool, str]:
+        """Test DeepSeek API connection"""
+        try:
+            api_key = self.apis['deepseek']['api_key']
+            endpoint = self.apis['deepseek']['endpoint']
+
+            if not api_key:
+                return False, "API Key 未設定"
+
+            # Test endpoint - list models
+            url = f"{endpoint}/models"
+            headers = {
+                'Authorization': f'Bearer {api_key}',
+                'Content-Type': 'application/json'
+            }
+
+            response = requests.get(url, headers=headers, timeout=10)
+
+            if response.status_code == 200:
+                data = response.json()
+                models = data.get('data', [])
+                if models:
+                    model_count = len(models)
+                    return True, f"連線成功！找到 {model_count} 個可用模型"
+                else:
+                    return True, "連線成功！"
+            elif response.status_code == 401:
+                return False, "API Key 無效"
+            elif response.status_code == 403:
+                return False, "權限不足"
+            else:
+                return False, f"連線失敗 (HTTP {response.status_code})"
+
+        except requests.exceptions.Timeout:
+            return False, "連線逾時"
+        except requests.exceptions.ConnectionError:
+            return False, "無法連接到伺服器"
+        except Exception as e:
+            return False, f"錯誤: {str(e)}"
+
+    def test_openai_connection(self) -> Tuple[bool, str]:
+        """Test OpenAI API connection"""
+        try:
+            api_key = self.apis['openai']['api_key']
+            endpoint = self.apis['openai']['endpoint']
+
+            if not api_key:
+                return False, "API Key 未設定"
+
+            # Test endpoint - list models
+            url = f"{endpoint}/models"
+            headers = {
+                'Authorization': f'Bearer {api_key}',
+                'Content-Type': 'application/json'
+            }
+
+            response = requests.get(url, headers=headers, timeout=10)
+
+            if response.status_code == 200:
+                data = response.json()
+                models = data.get('data', [])
+                model_count = len(models)
+                return True, f"連線成功！找到 {model_count} 個可用模型"
+            elif response.status_code == 401:
+                return False, "API Key 無效"
+            elif response.status_code == 403:
+                return False, "權限不足"
+            else:
+                return False, f"連線失敗 (HTTP {response.status_code})"
+
+        except requests.exceptions.Timeout:
+            return False, "連線逾時"
+        except requests.exceptions.ConnectionError:
+            return False, "無法連接到伺服器"
+        except Exception as e:
+            return False, f"錯誤: {str(e)}"
+
+    def test_all_connections(self) -> Dict[str, Tuple[bool, str]]:
+        """Test all configured API connections"""
+        results = {}
+
+        if self.apis['gemini']['enabled']:
+            results['gemini'] = self.test_gemini_connection()
+
+        if self.apis['deepseek']['enabled']:
+            results['deepseek'] = self.test_deepseek_connection()
+
+        if self.apis['openai']['enabled']:
+            results['openai'] = self.test_openai_connection()
+
+        return results
+
+    def generate_text_gemini(self, prompt: str, max_tokens: int = 2000) -> Tuple[bool, str]:
+        """Generate text using Gemini API"""
+        try:
+            api_key = self.apis['gemini']['api_key']
+            if not api_key:
+                return False, "API Key 未設定"
+
+            url = f"https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key={api_key}"
+
+            data = {
+                "contents": [
+                    {
+                        "parts": [
+                            {"text": prompt}
+                        ]
+                    }
+                ],
+                "generationConfig": {
+                    "maxOutputTokens": max_tokens,
+                    "temperature": 0.7
+                }
+            }
+
+            response = requests.post(url, json=data, timeout=30)
+
+            if response.status_code == 200:
+                result = response.json()
+                text = result['candidates'][0]['content']['parts'][0]['text']
+                return True, text
+            else:
+                return False, f"生成失敗 (HTTP {response.status_code}): {response.text}"
+
+        except Exception as e:
+            return False, f"錯誤: {str(e)}"
+
+    def generate_text_deepseek(self, prompt: str, max_tokens: int = 2000) -> Tuple[bool, str]:
+        """Generate text using DeepSeek API"""
+        try:
+            api_key = self.apis['deepseek']['api_key']
+            endpoint = self.apis['deepseek']['endpoint']
+
+            if not api_key:
+                return False, "API Key 未設定"
+
+            url = f"{endpoint}/chat/completions"
+            headers = {
+                'Authorization': f'Bearer {api_key}',
+                'Content-Type': 'application/json'
+            }
+
+            data = {
+                "model": "deepseek-chat",
+                "messages": [
+                    {"role": "user", "content": prompt}
+                ],
+                "max_tokens": max_tokens,
+                "temperature": 0.7
+            }
+
+            response = requests.post(url, json=data, headers=headers, timeout=30)
+
+            if response.status_code == 200:
+                result = response.json()
+                text = result['choices'][0]['message']['content']
+                return True, text
+            else:
+                return False, f"生成失敗 (HTTP {response.status_code}): {response.text}"
+
+        except Exception as e:
+            return False, f"錯誤: {str(e)}"
+
+    def generate_text_openai(self, prompt: str, model: str = "gpt-3.5-turbo", max_tokens: int = 2000) -> Tuple[bool, str]:
+        """Generate text using OpenAI API"""
+        try:
+            api_key = self.apis['openai']['api_key']
+            endpoint = self.apis['openai']['endpoint']
+
+            if not api_key:
+                return False, "API Key 未設定"
+
+            url = f"{endpoint}/chat/completions"
+            headers = {
+                'Authorization': f'Bearer {api_key}',
+                'Content-Type': 'application/json'
+            }
+
+            data = {
+                "model": model,
+                "messages": [
+                    {"role": "user", "content": prompt}
+                ],
+                "max_tokens": max_tokens,
+                "temperature": 0.7
+            }
+
+            response = requests.post(url, json=data, headers=headers, timeout=30)
+
+            if response.status_code == 200:
+                result = response.json()
+                text = result['choices'][0]['message']['content']
+                return True, text
+            else:
+                return False, f"生成失敗 (HTTP {response.status_code}): {response.text}"
+
+        except Exception as e:
+            return False, f"錯誤: {str(e)}"
+
+
+def main():
+    """Test script"""
+    print("=" * 60)
+    print("LLM API Configuration Test")
+    print("=" * 60)
+    print()
+
+    config = LLMConfig()
+
+    # Show enabled APIs
+    enabled = config.get_enabled_apis()
+    print(f"已啟用的 API: {', '.join(enabled) if enabled else '無'}")
+    print()
+
+    # Test all connections
+    print("測試 API 連線:")
+    print("-" * 60)
+
+    results = config.test_all_connections()
+
+    for api_name, (success, message) in results.items():
+        status = "✓" if success else "✗"
+        api_display_name = config.apis[api_name]['name']
+        print(f"{status} {api_display_name}: {message}")
+
+    print()
+
+
+if __name__ == '__main__':
+    main()
diff --git a/requirements_full.txt b/requirements_full.txt
new file mode 100644
index 0000000..3c8c99f
--- /dev/null
+++ b/requirements_full.txt
@@ -0,0 +1,23 @@
+# Flask and Web Framework
+Flask==3.0.0
+flask-cors==4.0.0
+Werkzeug==3.0.1
+
+# Database
+pymysql==1.1.0
+cryptography==41.0.7
+
+# Environment Variables
+python-dotenv==1.0.0
+
+# HTTP Requests
+requests==2.31.0
+
+# Version Control
+gitpython==3.1.40
+
+# Development Tools
+pytest==7.4.3
+pytest-flask==1.3.0
+black==23.12.1
+flake8==7.0.0
diff --git a/start_server.py b/start_server.py
new file mode 100644
index 0000000..2152abf
--- /dev/null
+++ b/start_server.py
@@ -0,0 +1,286 @@
+"""
+啟動 Flask 服務器（解決 Windows 編碼問題）
+"""
+import sys
+import os
+
+# 設置 UTF-8 編碼
+if sys.platform == 'win32':
+    import codecs
+    sys.stdout = codecs.getwriter('utf-8')(sys.stdout.buffer, 'strict')
+    sys.stderr = codecs.getwriter('utf-8')(sys.stderr.buffer, 'strict')
+
+# 導入並啟動 app
+from flask import Flask, request, jsonify, send_from_directory
+from flask_cors import CORS
+from datetime import datetime
+import json
+
+# Import LLM configuration
+try:
+    from llm_config import LLMConfig
+    llm_config = LLMConfig()
+    LLM_ENABLED = True
+except ImportError:
+    print("Warning: llm_config not found. LLM features will be disabled.")
+    LLM_ENABLED = False
+
+app = Flask(__name__, static_folder='.')
+CORS(app)
+
+# 模擬資料庫
+positions_db = {}
+jobs_db = {}
+
+# 預設崗位資料
+default_positions = {
+    "MGR-001": {
+        "id": "MGR-001",
+        "basicInfo": {
+            "positionCode": "MGR-001",
+            "positionName": "管理職-資深班長",
+            "positionCategory": "02",
+            "positionCategoryName": "管理職",
+            "positionNature": "FT",
+            "positionNatureName": "全職",
+            "headcount": "5",
+            "positionLevel": "L3",
+            "effectiveDate": "2001-01-01",
+            "positionDesc": "負責生產線的日常管理與人員調度",
+            "positionRemark": ""
+        },
+        "recruitInfo": {
+            "minEducation": "JC",
+            "requiredGender": "",
+            "salaryRange": "C",
+            "workExperience": "3",
+            "minAge": "25",
+            "maxAge": "45",
+            "jobType": "FT",
+            "recruitPosition": "MGR",
+            "jobTitle": "資深班長",
+            "jobDesc": "",
+            "positionReq": "",
+            "titleReq": "",
+            "majorReq": "",
+            "skillReq": "",
+            "langReq": "",
+            "otherReq": "",
+            "superiorPosition": "",
+            "recruitRemark": ""
+        },
+        "createdAt": "2024-01-01T00:00:00",
+        "updatedAt": "2024-01-01T00:00:00"
+    }
+}
+positions_db.update(default_positions)
+
+# 預設職務資料
+default_jobs = {
+    "VP-001": {
+        "id": "VP-001",
+        "jobCategoryCode": "MGR",
+        "jobCategoryName": "管理職",
+        "jobCode": "VP-001",
+        "jobName": "副總",
+        "jobNameEn": "Vice President",
+        "jobEffectiveDate": "2001-01-01",
+        "jobHeadcount": 2,
+        "jobSortOrder": 10,
+        "jobRemark": "",
+        "jobLevel": "*保密*",
+        "hasAttendanceBonus": False,
+        "hasHousingAllowance": True,
+        "createdAt": "2024-01-01T00:00:00",
+        "updatedAt": "2024-01-01T00:00:00"
+    }
+}
+jobs_db.update(default_jobs)
+
+# ==================== 靜態頁面 ====================
+
+@app.route('/')
+def index():
+    return send_from_directory('.', 'index.html')
+
+@app.route('/api-test')
+def api_test_page():
+    return send_from_directory('.', 'api_test.html')
+
+# ==================== 崗位資料 API ====================
+
+@app.route('/api/positions', methods=['GET'])
+def get_positions():
+    page = request.args.get('page', 1, type=int)
+    size = request.args.get('size', 20, type=int)
+    search = request.args.get('search', '', type=str)
+
+    filtered = list(positions_db.values())
+    if search:
+        filtered = [p for p in filtered
+                   if search.lower() in p['basicInfo'].get('positionCode', '').lower()
+                   or search.lower() in p['basicInfo'].get('positionName', '').lower()]
+
+    total = len(filtered)
+    start = (page - 1) * size
+    end = start + size
+    paginated = filtered[start:end]
+
+    return jsonify({
+        'success': True,
+        'data': paginated,
+        'pagination': {
+            'page': page,
+            'size': size,
+            'total': total,
+            'totalPages': (total + size - 1) // size
+        }
+    })
+
+@app.route('/api/positions/<position_id>', methods=['GET'])
+def get_position(position_id):
+    if position_id not in positions_db:
+        return jsonify({'success': False, 'error': '找不到該崗位資料'}), 404
+    return jsonify({'success': True, 'data': positions_db[position_id]})
+
+@app.route('/api/positions', methods=['POST'])
+def create_position():
+    try:
+        data = request.get_json()
+        if not data:
+            return jsonify({'success': False, 'error': '請提供有效的 JSON 資料'}), 400
+
+        basic_info = data.get('basicInfo', {})
+        if not basic_info.get('positionCode'):
+            return jsonify({'success': False, 'error': '崗位編號為必填欄位'}), 400
+        if not basic_info.get('positionName'):
+            return jsonify({'success': False, 'error': '崗位名稱為必填欄位'}), 400
+
+        position_code = basic_info['positionCode']
+        if position_code in positions_db:
+            return jsonify({'success': False, 'error': f'崗位編號 {position_code} 已存在'}), 409
+
+        now = datetime.now().isoformat()
+        new_position = {
+            'id': position_code,
+            'basicInfo': basic_info,
+            'recruitInfo': data.get('recruitInfo', {}),
+            'createdAt': now,
+            'updatedAt': now
+        }
+        positions_db[position_code] = new_position
+        return jsonify({'success': True, 'message': '崗位資料新增成功', 'data': new_position}), 201
+    except Exception as e:
+        return jsonify({'success': False, 'error': f'新增失敗: {str(e)}'}), 500
+
+# ==================== LLM API ====================
+
+@app.route('/api/llm/config', methods=['GET'])
+def get_llm_config():
+    if not LLM_ENABLED:
+        return jsonify({'success': False, 'error': 'LLM 功能未啟用'}), 503
+
+    try:
+        config_data = {}
+        for api_name, api_config in llm_config.apis.items():
+            config_data[api_name] = {
+                'name': api_config['name'],
+                'enabled': api_config['enabled'],
+                'endpoint': api_config['endpoint'],
+                'api_key': api_config['api_key'][:8] + '...' if api_config['api_key'] else ''
+            }
+        return jsonify(config_data)
+    except Exception as e:
+        return jsonify({'success': False, 'error': f'獲取配置失敗: {str(e)}'}), 500
+
+@app.route('/api/llm/test/<api_name>', methods=['GET'])
+def test_llm_api(api_name):
+    if not LLM_ENABLED:
+        return jsonify({'success': False, 'message': 'LLM 功能未啟用'}), 503
+
+    try:
+        if api_name not in llm_config.apis:
+            return jsonify({'success': False, 'message': f'不支援的 API: {api_name}'}), 400
+
+        if api_name == 'gemini':
+            success, message = llm_config.test_gemini_connection()
+        elif api_name == 'deepseek':
+            success, message = llm_config.test_deepseek_connection()
+        elif api_name == 'openai':
+            success, message = llm_config.test_openai_connection()
+        else:
+            return jsonify({'success': False, 'message': f'未實作的 API: {api_name}'}), 400
+
+        return jsonify({'success': success, 'message': message})
+    except Exception as e:
+        return jsonify({'success': False, 'message': f'測試失敗: {str(e)}'}), 500
+
+@app.route('/api/llm/generate', methods=['POST'])
+def generate_llm_text():
+    if not LLM_ENABLED:
+        return jsonify({'success': False, 'error': 'LLM 功能未啟用'}), 503
+
+    try:
+        data = request.get_json()
+        if not data:
+            return jsonify({'success': False, 'error': '請提供有效的 JSON 資料'}), 400
+
+        api_name = data.get('api', 'gemini')
+        prompt = data.get('prompt', '')
+        max_tokens = data.get('max_tokens', 2000)
+
+        if not prompt:
+            return jsonify({'success': False, 'error': '請提供提示詞'}), 400
+
+        if api_name == 'gemini':
+            success, result = llm_config.generate_text_gemini(prompt, max_tokens)
+        elif api_name == 'deepseek':
+            success, result = llm_config.generate_text_deepseek(prompt, max_tokens)
+        elif api_name == 'openai':
+            model = data.get('model', 'gpt-3.5-turbo')
+            success, result = llm_config.generate_text_openai(prompt, model, max_tokens)
+        else:
+            return jsonify({'success': False, 'error': f'不支援的 API: {api_name}'}), 400
+
+        if success:
+            return jsonify({'success': True, 'text': result})
+        else:
+            return jsonify({'success': False, 'error': result}), 500
+    except Exception as e:
+        return jsonify({'success': False, 'error': f'生成失敗: {str(e)}'}), 500
+
+# ==================== 錯誤處理 ====================
+
+@app.errorhandler(404)
+def not_found(e):
+    return jsonify({'success': False, 'error': '找不到請求的資源'}), 404
+
+@app.errorhandler(500)
+def server_error(e):
+    return jsonify({'success': False, 'error': '伺服器內部錯誤'}), 500
+
+# ==================== 主程式 ====================
+
+if __name__ == '__main__':
+    print("=" * 60)
+    print("HR Position System - Flask Backend")
+    print("=" * 60)
+    print("\nServer starting...")
+    print("URL: http://localhost:5000")
+    print()
+
+    if LLM_ENABLED:
+        print("[OK] LLM features enabled")
+        enabled_apis = llm_config.get_enabled_apis()
+        if enabled_apis:
+            print(f"Configured APIs: {', '.join(enabled_apis)}")
+        else:
+            print("Warning: No LLM API Keys configured")
+    else:
+        print("[!] LLM features disabled (llm_config.py not found)")
+
+    print("\nPress Ctrl+C to stop")
+    print("=" * 60)
+    print()
+
+    app.run(host='0.0.0.0', port=5000, debug=True)