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>
This commit is contained in:
82
.gitignore
vendored
Normal file
82
.gitignore
vendored
Normal file
@@ -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/
|
||||||
315
CORS_FIX_GUIDE.md
Normal file
315
CORS_FIX_GUIDE.md
Normal file
@@ -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 跨域請求錯誤
|
||||||
|
**解決狀態**: ✅ 已提供完整解決方案
|
||||||
236
GEMINI_API_FIX.md
Normal file
236
GEMINI_API_FIX.md
Normal file
@@ -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 限制
|
||||||
|
**解決狀態**: ✅ 已提供完整解決方案
|
||||||
844
SDD.md
Normal file
844
SDD.md
Normal file
@@ -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 截圖參考
|
||||||
|
|
||||||
|
（請參考系統實際畫面）
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**文件結束**
|
||||||
438
SETUP.md
Normal file
438
SETUP.md
Normal file
@@ -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
|
||||||
520
api_test.html
Normal file
520
api_test.html
Normal file
@@ -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>
|
||||||
259
database_schema.sql
Normal file
259
database_schema.sql
Normal file
@@ -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
|
||||||
|
-- ============================================================
|
||||||
559
error_handler.js
Normal file
559
error_handler.js
Normal file
@@ -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;
|
||||||
|
}
|
||||||
2184
index.html
Normal file
2184
index.html
Normal file
File diff suppressed because it is too large
Load Diff
130
init_database.py
Normal file
130
init_database.py
Normal file
@@ -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)
|
||||||
308
llm_config.py
Normal file
308
llm_config.py
Normal file
@@ -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()
|
||||||
23
requirements_full.txt
Normal file
23
requirements_full.txt
Normal file
@@ -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
|
||||||
286
start_server.py
Normal file
286
start_server.py
Normal file
@@ -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)
|
||||||
Reference in New Issue
Block a user