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>

extract_hierarchical_data.py

@@ -0,0 +1,123 @@
+"""
+從 excel_table copy.md 提取階層式關聯資料
+用於實現下拉選單的連動功能
+"""
+import re
+import json
+from collections import OrderedDict, defaultdict
+
+# 讀取文件
+with open('excel_table copy.md', 'r', encoding='utf-8') as f:
+    content = f.read()
+
+# 解析表格
+lines = content.strip().split('\n')
+data = []
+
+for line in lines[2:]:  # 跳過標題和分隔線
+    if line.strip():
+        # 使用正則表達式分割，處理可能的空白單元格
+        cols = [col.strip() for col in line.split('|')[1:-1]]  # 去掉首尾的空字符串
+        if len(cols) == 4:
+            data.append({
+                '事業體': cols[0],
+                '處級單位': cols[1],
+                '部級單位': cols[2],
+                '崗位名稱': cols[3]
+            })
+
+# 建立階層關聯
+# 事業體 -> 處級單位的對應
+business_to_division = defaultdict(set)
+# 處級單位 -> 部級單位的對應
+division_to_department = defaultdict(set)
+# 部級單位 -> 崗位名稱的對應
+department_to_position = defaultdict(set)
+
+# 也建立完整的階層路徑
+full_hierarchy = []
+
+for row in data:
+    business = row['事業體']
+    division = row['處級單位']
+    department = row['部級單位']
+    position = row['崗位名稱']
+
+    if business and division:
+        business_to_division[business].add(division)
+
+    if division and department:
+        division_to_department[division].add(department)
+
+    if department and position:
+        department_to_position[department].add(position)
+
+    # 記錄完整路徑
+    if business and division and department and position:
+        full_hierarchy.append({
+            'business': business,
+            'division': division,
+            'department': department,
+            'position': position
+        })
+
+# 轉換為列表並排序
+def convert_to_sorted_list(d):
+    return {k: sorted(list(v)) for k, v in d.items()}
+
+business_to_division_dict = convert_to_sorted_list(business_to_division)
+division_to_department_dict = convert_to_sorted_list(division_to_department)
+department_to_position_dict = convert_to_sorted_list(department_to_position)
+
+# 統計資訊
+print("=" * 80)
+print("階層關聯統計")
+print("=" * 80)
+print(f"事業體數量: {len(business_to_division_dict)}")
+print(f"處級單位數量: {len(division_to_department_dict)}")
+print(f"部級單位數量: {len(department_to_position_dict)}")
+print(f"完整階層路徑數量: {len(full_hierarchy)}")
+print()
+
+# 顯示幾個範例
+print("範例關聯:")
+print("-" * 80)
+for business, divisions in list(business_to_division_dict.items())[:3]:
+    print(f"事業體: {business}")
+    print(f"  -> 處級單位: {divisions}")
+    print()
+
+# 生成 JavaScript 物件
+js_code = """// 自動生成的階層關聯資料
+
+// 事業體 -> 處級單位的對應
+const businessToDivision = """
+
+js_code += json.dumps(business_to_division_dict, ensure_ascii=False, indent=2)
+js_code += """;
+
+// 處級單位 -> 部級單位的對應
+const divisionToDepartment = """
+
+js_code += json.dumps(division_to_department_dict, ensure_ascii=False, indent=2)
+js_code += """;
+
+// 部級單位 -> 崗位名稱的對應
+const departmentToPosition = """
+
+js_code += json.dumps(department_to_position_dict, ensure_ascii=False, indent=2)
+js_code += """;
+
+// 完整階層資料（用於反向查詢）
+const fullHierarchyData = """
+
+js_code += json.dumps(full_hierarchy, ensure_ascii=False, indent=2)
+js_code += ";\n"
+
+# 儲存到文件
+with open('hierarchical_data.js', 'w', encoding='utf-8') as f:
+    f.write(js_code)
+
+print("=" * 80)
+print("已儲存到 hierarchical_data.js")
+print("=" * 80)