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>

權限矩陣.md

@@ -0,0 +1,236 @@
+# 系統權限矩陣 - 那都AI寫的，不要問我
+
+## 系統概述
+本系統為「人力資源崗位管理系統」(HR Position Management System)，採用三級權限架構設計，確保資料安全性與操作權限的合理分配。
+
+---
+
+## 角色定義
+
+### 1. 一般使用者 (User)
+- **測試帳號**: A003 / employee
+- **使用對象**: 一般員工、HR專員
+- **主要職責**: 查詢崗位資訊、建立崗位描述、查看部門職責
+
+### 2. 管理者 (Admin)
+- **測試帳號**: A002 / hr_manager
+- **使用對象**: 部門主管、HR經理
+- **主要職責**: 管理部門職責、審核崗位資料、匯出報表
+
+### 3. 最高管理者 (Super Admin)
+- **測試帳號**: A001 / admin
+- **使用對象**: 系統管理員、HR總監
+- **主要職責**: 系統設定、使用者管理、完整權限控制
+
+---
+
+## 功能權限矩陣
+
+| 功能模組 | 功能項目 | 一般使用者 | 管理者 | 最高管理者 | 說明 |
+|---------|---------|:---------:|:-----:|:---------:|------|
+| **崗位管理** | 查看崗位清單 | ✅ | ✅ | ✅ | 所有角色可查看 |
+| | 搜尋/篩選崗位 | ✅ | ✅ | ✅ | 所有角色可搜尋 |
+| | 查看崗位詳情 | ✅ | ✅ | ✅ | 所有角色可查看詳情 |
+| | 建立新崗位 | ❌ | ✅ | ✅ | 需要管理權限 |
+| | 編輯崗位資訊 | ❌ | ✅ | ✅ | 需要管理權限 |
+| | 刪除崗位 | ❌ | ❌ | ✅ | 僅最高管理者 |
+| **職位描述 (JD)** | 查看 JD | ✅ | ✅ | ✅ | 所有角色可查看 |
+| | 建立 JD | ✅ | ✅ | ✅ | 所有角色可建立 |
+| | 編輯自己的 JD | ✅ | ✅ | ✅ | 可編輯自己建立的 |
+| | 編輯所有 JD | ❌ | ✅ | ✅ | 管理者以上 |
+| | 刪除 JD | ❌ | ✅ | ✅ | 管理者以上 |
+| | 使用 AI 生成 JD | ✅ | ✅ | ✅ | 所有角色可使用 AI |
+| **部門職責** | 查看部門職責 | ✅ | ✅ | ✅ | 所有角色可查看 |
+| | 建立部門職責 | ❌ | ✅ | ✅ | 管理者以上 |
+| | 編輯部門職責 | ❌ | ✅ | ✅ | 管理者以上 |
+| | 刪除部門職責 | ❌ | ❌ | ✅ | 僅最高管理者 |
+| | 匯出部門職責 | ✅ | ✅ | ✅ | 所有角色可匯出 |
+| **崗位清單** | 查看清單 | ✅ | ✅ | ✅ | 所有角色可查看 |
+| | 篩選/排序 | ✅ | ✅ | ✅ | 所有角色可使用 |
+| | 匯出 CSV | ✅ | ✅ | ✅ | 所有角色可匯出 |
+| | 批量操作 | ❌ | ✅ | ✅ | 管理者以上 |
+| **報表匯出** | 匯出基本報表 | ✅ | ✅ | ✅ | 所有角色可匯出 |
+| | 匯出完整資料 | ❌ | ✅ | ✅ | 管理者以上 |
+| | 匯出統計報表 | ❌ | ✅ | ✅ | 管理者以上 |
+| **系統管理** | 查看系統設定 | ❌ | ❌ | ✅ | 僅最高管理者 |
+| | 修改系統設定 | ❌ | ❌ | ✅ | 僅最高管理者 |
+| | LLM 模型設定 | ❌ | ❌ | ✅ | 僅最高管理者 |
+| | 測試 API 連線 | ❌ | ❌ | ✅ | 僅最高管理者 |
+| **使用者管理** | 查看使用者清單 | ❌ | ❌ | ✅ | 僅最高管理者 |
+| | 新增使用者 | ❌ | ❌ | ✅ | 僅最高管理者 |
+| | 編輯使用者 | ❌ | ❌ | ✅ | 僅最高管理者 |
+| | 刪除使用者 | ❌ | ❌ | ✅ | 僅最高管理者 |
+| | 修改權限 | ❌ | ❌ | ✅ | 僅最高管理者 |
+| **AI 功能** | 使用 AI 生成 | ✅ | ✅ | ✅ | 所有角色可使用 |
+| | 選擇 AI 模型 | ❌ | ❌ | ✅ | 僅最高管理者設定 |
+| | 查看 AI 使用記錄 | ❌ | ✅ | ✅ | 管理者以上 |
+
+---
+
+## 資料訪問權限
+
+### 資料可見性
+
+| 資料類型 | 一般使用者 | 管理者 | 最高管理者 |
+|---------|:---------:|:-----:|:---------:|
+| 所有崗位資料 | ✅ 唯讀 | ✅ 可編輯 | ✅ 完全控制 |
+| 部門職責資料 | ✅ 唯讀 | ✅ 可編輯 | ✅ 完全控制 |
+| 自己建立的 JD | ✅ 可編輯 | ✅ 可編輯 | ✅ 可編輯 |
+| 他人建立的 JD | ✅ 唯讀 | ✅ 可編輯 | ✅ 可編輯 |
+| 使用者資料 | ❌ | ❌ | ✅ 完全控制 |
+| 系統設定 | ❌ | ❌ | ✅ 完全控制 |
+| 操作日誌 | ❌ | ✅ 唯讀 | ✅ 完全控制 |
+
+### 資料操作權限
+
+| 操作類型 | 一般使用者 | 管理者 | 最高管理者 |
+|---------|:---------:|:-----:|:---------:|
+| **C**reate (新增) | 僅 JD | 崗位、部門職責、JD | 所有資料 |
+| **R**ead (讀取) | 基本資料 | 包含統計資料 | 所有資料 |
+| **U**pdate (更新) | 僅自己的 JD | 大部分資料 | 所有資料 |
+| **D**elete (刪除) | ❌ | 部分資料 | 所有資料 |
+
+---
+
+## 頁面/模組訪問權限
+
+| 頁面模組 | 一般使用者 | 管理者 | 最高管理者 |
+|---------|:---------:|:-----:|:---------:|
+| 🏠 首頁 (登入頁) | ✅ | ✅ | ✅ |
+| 📝 崗位說明書管理 | ✅ | ✅ | ✅ |
+| 🎯 部門職責管理 | ✅ 唯讀 | ✅ | ✅ |
+| 📋 崗位清單 | ✅ | ✅ | ✅ |
+| ⚙️ 管理者頁面 | ❌ | ⚠️ 部分功能 | ✅ |
+
+### 管理者頁面功能細分
+
+| 管理者頁面功能 | 一般使用者 | 管理者 | 最高管理者 |
+|--------------|:---------:|:-----:|:---------:|
+| 使用者管理 | ❌ | ❌ | ✅ |
+| LLM 模型設定 | ❌ | ❌ | ✅ |
+| 崗位資料管理 | ❌ | ✅ 唯讀 | ✅ |
+| 匯出完整資料 | ❌ | ✅ | ✅ |
+| 查看統計資訊 | ❌ | ✅ | ✅ |
+
+---
+
+## 特殊權限說明
+
+### 1. AI 功能使用
+
+所有角色都可以使用 AI 生成功能，但有以下限制：
+
+- **一般使用者**: 可使用 AI 生成 JD，但每日限額 50 次
+- **管理者**: 可使用 AI 生成，每日限額 200 次
+- **最高管理者**: 無限制，且可設定使用的 AI 模型
+
+### 2. 匯出功能
+
+| 匯出類型 | 一般使用者 | 管理者 | 最高管理者 |
+|---------|:---------:|:-----:|:---------:|
+| 基本 CSV 匯出 | ✅ | ✅ | ✅ |
+| 完整資料匯出 | ❌ | ✅ | ✅ |
+| 含敏感資訊匯出 | ❌ | ❌ | ✅ |
+
+### 3. 批量操作
+
+- **一般使用者**: 無批量操作權限
+- **管理者**: 可批量編輯崗位狀態、部門歸屬
+- **最高管理者**: 可批量刪除、批量匯入
+
+---
+
+## 權限繼承規則
+
+```
+最高管理者 (Super Admin)
+    ↓ 繼承所有權限
+管理者 (Admin)
+    ↓ 繼承所有權限
+一般使用者 (User)
+```
+
+**規則說明**:
+- 高階角色自動繼承低階角色的所有權限
+- 最高管理者擁有系統所有功能的完整權限
+- 權限提升需要最高管理者審核批准
+
+---
+
+## 安全性措施
+
+### 1. 登入安全
+- ✅ 密碼加密儲存 (bcrypt)
+- ✅ 登入失敗次數限制 (5次鎖定30分鐘)
+- ✅ Session 逾時自動登出 (30分鐘無操作)
+- ✅ IP 白名單 (可選)
+
+### 2. 操作追蹤
+- ✅ 所有資料修改記錄操作者
+- ✅ 關鍵操作留存日誌 (刪除、權限變更)
+- ✅ 管理者以上角色操作全程記錄
+
+### 3. 資料保護
+- ✅ 敏感資料加密儲存
+- ✅ API 呼叫需要認證 Token
+- ✅ CORS 限制來源
+- ✅ SQL Injection 防護
+- ✅ XSS 防護
+
+---
+
+## 權限變更流程
+
+### 申請權限提升
+
+```mermaid
+graph LR
+    A[使用者提出申請] --> B[直屬主管審核]
+    B --> C[HR部門審核]
+    C --> D[最高管理者核准]
+    D --> E[權限變更]
+    E --> F[通知使用者]
+```
+
+### 權限審核週期
+
+- **一般使用者**: 無需定期審核
+- **管理者**: 每季審核一次
+- **最高管理者**: 每半年審核一次
+
+---
+
+## 測試帳號資訊
+
+| 角色 | 工號 | 密碼 | 姓名 | 權限等級 |
+|-----|------|------|------|---------|
+| 一般使用者 | A003 | employee | 一般員工 | ★☆☆ |
+| 管理者 | A002 | hr_manager | 人資主管 | ★★☆ |
+| 最高管理者 | A001 | admin | 系統管理員 | ★★★ |
+
+---
+
+## 附註
+
+- ✅ = 有權限
+- ❌ = 無權限
+- ⚠️ = 部分權限
+
+**最後更新**: 2024-12-04
+**文件版本**: v1.0
+**維護者**: AI (所以有問題不要問我)
+
+---
+
+## 權限擴充建議
+
+未來可考慮新增以下角色：
+
+1. **部門管理者**: 僅能管理自己部門的崗位
+2. **唯讀管理者**: 可查看所有資料但無編輯權限
+3. **稽核員**: 專門查看操作日誌和系統使用情況
+4. **外部顧問**: 有時效性的臨時訪問權限
+
+---
+
+> **免責聲明**: 本權限矩陣由 AI 自動生成，如有疏漏或不合理之處，請找開發 AI 的公司，不要找我。¯\\\_(ツ)\_/¯