refactor: 新增 ui.js 和 main.js 模組，啟用 ES6 Modules
新增檔案： - js/ui.js - UI 操作、模組切換、預覽更新、表單資料收集 - js/main.js - 主程式初始化、事件監聽器設置、快捷鍵 更新檔案： - index.html - 引用 ES6 模組 (type="module") 功能： ✅ 模組切換功能 ✅ 標籤頁切換 ✅ 表單欄位監聽 ✅ JSON 預覽更新 ✅ 快捷鍵支援 (Ctrl+S, Ctrl+N) ✅ 用戶信息載入 ✅ 登出功能 注意： - 大部分 JavaScript 代碼仍在 HTML 中（約 2400 行） - 已建立核心模組架構，便於後續逐步遷移 - 使用 ES6 Modules，需要通過 HTTP Server 運行 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
201
js/main.js
Normal file
201
js/main.js
Normal file
@@ -0,0 +1,201 @@
|
||||
/**
|
||||
* Main - 主程式
|
||||
* 初始化應用程式，設定事件監聽器
|
||||
*/
|
||||
|
||||
import { showToast } from './utils.js';
|
||||
import { switchModule, updatePreview, updateCategoryName, updateNatureName, updateJobCategoryName } from './ui.js';
|
||||
|
||||
// ==================== 初始化 ====================
|
||||
|
||||
/**
|
||||
* 載入用戶信息
|
||||
*/
|
||||
function loadUserInfo() {
|
||||
const currentUser = localStorage.getItem('currentUser');
|
||||
if (!currentUser) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const userData = JSON.parse(currentUser);
|
||||
const userName = document.getElementById('userName');
|
||||
const userRole = document.getElementById('userRole');
|
||||
const userAvatar = document.getElementById('userAvatar');
|
||||
|
||||
if (userName) userName.textContent = userData.name || '使用者';
|
||||
if (userRole) userRole.textContent = userData.role || '一般使用者';
|
||||
if (userAvatar) userAvatar.textContent = (userData.name || 'U').charAt(0).toUpperCase();
|
||||
} catch (e) {
|
||||
console.error('解析用戶資料失敗:', e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 登出功能
|
||||
*/
|
||||
function logout() {
|
||||
if (confirm('確定要登出嗎？')) {
|
||||
localStorage.removeItem('currentUser');
|
||||
window.location.href = 'login.html';
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 事件監聽器設置 ====================
|
||||
|
||||
/**
|
||||
* 設置模組切換事件
|
||||
*/
|
||||
function setupModuleSwitching() {
|
||||
document.querySelectorAll('.module-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const moduleName = btn.dataset.module;
|
||||
if (moduleName) {
|
||||
switchModule(moduleName);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 設置標籤頁切換事件
|
||||
*/
|
||||
function setupTabSwitching() {
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const parent = btn.closest('.form-card');
|
||||
if (!parent) return;
|
||||
|
||||
parent.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||||
parent.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
||||
|
||||
btn.classList.add('active');
|
||||
const targetTab = document.getElementById('tab-' + btn.dataset.tab);
|
||||
if (targetTab) {
|
||||
targetTab.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 設置表單欄位監聽
|
||||
*/
|
||||
function setupFormListeners() {
|
||||
// 監聽所有表單欄位變更，更新預覽
|
||||
document.querySelectorAll('input, select, textarea').forEach(field => {
|
||||
field.addEventListener('change', updatePreview);
|
||||
field.addEventListener('input', updatePreview);
|
||||
});
|
||||
|
||||
// 崗位類別變更
|
||||
const positionCategory = document.getElementById('positionCategory');
|
||||
if (positionCategory) {
|
||||
positionCategory.addEventListener('change', updateCategoryName);
|
||||
}
|
||||
|
||||
// 崗位性質變更
|
||||
const positionNature = document.getElementById('positionNature');
|
||||
if (positionNature) {
|
||||
positionNature.addEventListener('change', updateNatureName);
|
||||
}
|
||||
|
||||
// 職務類別變更
|
||||
const jobCategoryCode = document.getElementById('jobCategoryCode');
|
||||
if (jobCategoryCode) {
|
||||
jobCategoryCode.addEventListener('change', updateJobCategoryName);
|
||||
}
|
||||
|
||||
// Toggle 開關變更
|
||||
const hasAttendanceBonus = document.getElementById('hasAttendanceBonus');
|
||||
if (hasAttendanceBonus) {
|
||||
hasAttendanceBonus.addEventListener('change', function() {
|
||||
const label = document.getElementById('attendanceLabel');
|
||||
if (label) {
|
||||
label.textContent = this.checked ? '是' : '否';
|
||||
}
|
||||
updatePreview();
|
||||
});
|
||||
}
|
||||
|
||||
const hasHousingAllowance = document.getElementById('hasHousingAllowance');
|
||||
if (hasHousingAllowance) {
|
||||
hasHousingAllowance.addEventListener('change', function() {
|
||||
const label = document.getElementById('housingLabel');
|
||||
if (label) {
|
||||
label.textContent = this.checked ? '是' : '否';
|
||||
}
|
||||
updatePreview();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 設置快捷鍵
|
||||
*/
|
||||
function setupKeyboardShortcuts() {
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Ctrl+S 或 Cmd+S: 保存當前模組
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
|
||||
e.preventDefault();
|
||||
const activeModule = document.querySelector('.module-btn.active');
|
||||
if (!activeModule) return;
|
||||
|
||||
const moduleName = activeModule.dataset.module;
|
||||
if (moduleName === 'position' && typeof window.savePositionAndExit === 'function') {
|
||||
window.savePositionAndExit();
|
||||
} else if (moduleName === 'job' && typeof window.saveJobAndExit === 'function') {
|
||||
window.saveJobAndExit();
|
||||
} else if (moduleName === 'jobdesc' && typeof window.saveJobDescAndExit === 'function') {
|
||||
window.saveJobDescAndExit();
|
||||
} else if (moduleName === 'deptfunction' && typeof window.saveDeptFunctionAndExit === 'function') {
|
||||
window.saveDeptFunctionAndExit();
|
||||
}
|
||||
}
|
||||
|
||||
// Ctrl+N 或 Cmd+N: 保存並新增下一筆
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
|
||||
e.preventDefault();
|
||||
const activeModule = document.querySelector('.module-btn.active');
|
||||
if (!activeModule) return;
|
||||
|
||||
const moduleName = activeModule.dataset.module;
|
||||
if (moduleName === 'position' && typeof window.savePositionAndNew === 'function') {
|
||||
window.savePositionAndNew();
|
||||
} else if (moduleName === 'job' && typeof window.saveJobAndNew === 'function') {
|
||||
window.saveJobAndNew();
|
||||
} else if (moduleName === 'jobdesc' && typeof window.saveJobDescAndNew === 'function') {
|
||||
window.saveJobDescAndNew();
|
||||
} else if (moduleName === 'deptfunction' && typeof window.saveDeptFunctionAndNew === 'function') {
|
||||
window.saveDeptFunctionAndNew();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ==================== DOMContentLoaded 初始化 ====================
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('🚀 HR 系統初始化中...');
|
||||
|
||||
// 載入用戶信息
|
||||
loadUserInfo();
|
||||
|
||||
// 設置事件監聽器
|
||||
setupModuleSwitching();
|
||||
setupTabSwitching();
|
||||
setupFormListeners();
|
||||
setupKeyboardShortcuts();
|
||||
|
||||
// 初始化預覽
|
||||
updatePreview();
|
||||
|
||||
console.log('✅ HR 系統初始化完成');
|
||||
});
|
||||
|
||||
// ==================== 將函式掛載到 window ====================
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.logout = logout;
|
||||
window.loadUserInfo = loadUserInfo;
|
||||
}
|
||||
Reference in New Issue
Block a user