羅馬數字轉換器技術實作

概述

羅馬數字轉換器是一個專業的雙向轉換工具，支援阿拉伯數字與羅馬數字之間的快速轉換。本工具採用純前端架構，完全在瀏覽器端運行，支援1-3999範圍內的所有有效數字轉換，並提供自動格式識別、輸入驗證、一鍵複製等專業功能。

🔒 隱私保護承諾

所有數字轉換處理都在您的瀏覽器本地進行，數據不會上傳到任何伺服器，確保您的學習資料完全安全。

技術架構與核心設計

整體架構設計

技術項目	實作方式	設計考量
前端框架	純 JavaScript (ES6+)	零依賴，最小化載入時間
轉換算法	映射表 + 迭代演算法	高效能與準確性平衡
格式識別	正則表達式 + 智能檢測	自動識別輸入類型
驗證系統	多層驗證 + 反向檢查	確保轉換結果正確性
用戶介面	響應式設計 + 雙語系統	跨設備兼容性與國際化

核心轉換邏輯

class RomanNumeralsConverter {
    constructor() {
        this.currentLanguage = 'zh';
        this.romanMap = [
            [1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
            [100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
            [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I']
        ];
        this.init();
    }
    
    // 阿拉伯數字轉羅馬數字核心算法
    toRoman(num) {
        if (num < 1 || num > 3999) return null;
        
        let result = '';
        for (let [value, numeral] of this.romanMap) {
            while (num >= value) {
                result += numeral;
                num -= value;
            }
        }
        return result;
    }
}

關鍵功能特色

🔄

雙向轉換

支援阿拉伯數字轉羅馬數字，以及羅馬數字轉阿拉伯數字的雙向轉換功能

🎯

智能識別

自動檢測輸入格式，即時顯示識別結果，無需手動選擇轉換模式

✅

完整驗證

多層輸入驗證與反向檢查機制，確保轉換結果的準確性與可靠性

📋

一鍵複製

轉換完成後可一鍵複製結果到剪貼簿，支援格式化輸出

🏛️

教育資源

內建基本符號對照表、轉換規則說明、常用範例等教育資源

⌨️

快速操作

支援Enter鍵快速轉換，提供清除、複製等便捷操作按鈕

實作細節

以下是完整程式碼實作，按功能模組分類展示。點擊卡片標題可展開查看詳細程式碼：

📦 核心羅馬數字轉換器類別

▶

核心轉換器類別負責管理整個應用的狀態和邏輯，包含轉換映射表、翻譯字典、以及所有主要方法的定義。

關鍵特性：

完整的羅馬數字映射表 (支援1-3999)
雙語翻譯字典系統
統一的錯誤處理機制
自動語言檢測與切換

class RomanNumeralsConverter {
    constructor() {
        // 初始化當前語言設定
        this.currentLanguage = 'zh';
        
        // 羅馬數字轉換映射表 - 按數值大小降序排列
        // 包含標準羅馬數字和減法表示法 (如 IV=4, IX=9)
        this.romanMap = [
            [1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
            [100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
            [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'],
            [1, 'I']
        ];
        
        // 完整的雙語翻譯字典
        this.translations = {
            zh: {
                title: '羅馬數字轉換器',
                subtitle: '阿拉伯數字與羅馬數字雙向轉換，支援自動格式識別',
                inputLabel: '輸入數字：',
                inputHint: '支援阿拉伯數字 (1-3999) 或羅馬數字 (I, V, X, L, C, D, M)',
                convert: '🔄 轉換',
                clear: '❌ 清除',
                copy: '📋 複製結果',
                basicSymbolsTitle: '🏛️ 基本符號',
                rulesTitle: '📋 轉換規則',
                rulesDesc: '羅馬數字由大到小排列，較小的數字在較大數字左側表示減法（如IV=4），右側表示加法（如VI=6）。',
                examplesTitle: '💡 轉換範例',
                autoDetect: {
                    arabic: '阿拉伯數字',
                    roman: '羅馬數字'
                },
                resultTypes: {
                    toRoman: '轉換為羅馬數字',
                    toArabic: '轉換為阿拉伯數字'
                },
                errors: {
                    empty: '請輸入一個數字',
                    invalidRoman: '無效的羅馬數字',
                    outOfRange: '請輸入 1～3999 的整數',
                    invalidCharacters: '輸入包含無效字符',
                    invalidNumber: '請輸入有效數字'
                },
                copied: '結果已複製到剪貼簿！'
            },
            en: {
                title: 'Roman Numerals Converter',
                subtitle: 'Bidirectional conversion between Arabic and Roman numerals with auto-detection',
                inputLabel: 'Enter Number:',
                inputHint: 'Supports Arabic numbers (1-3999) or Roman numerals (I, V, X, L, C, D, M)',
                convert: '🔄 Convert',
                clear: '❌ Clear',
                copy: '📋 Copy Result',
                basicSymbolsTitle: '🏛️ Basic Symbols',
                rulesTitle: '📋 Conversion Rules',
                rulesDesc: 'Roman numerals are arranged from largest to smallest. Smaller numbers to the left of larger ones indicate subtraction (e.g., IV=4), while to the right indicate addition (e.g., VI=6).',
                examplesTitle: '💡 Conversion Examples',
                autoDetect: {
                    arabic: 'Arabic Number',
                    roman: 'Roman Numeral'
                },
                resultTypes: {
                    toRoman: 'Converted to Roman Numeral',
                    toArabic: 'Converted to Arabic Number'
                },
                errors: {
                    empty: 'Please enter a value',
                    invalidRoman: 'Invalid Roman numeral',
                    outOfRange: 'Only numbers 1–3999 allowed',
                    invalidCharacters: 'Input contains invalid characters',
                    invalidNumber: 'Please enter a valid number'
                },
                copied: 'Result copied to clipboard!'
            }
        };
        
        // 初始化轉換器
        this.init();
    }
}

🌐 全域語言系統整合 🌐 Global Language System Integration

▶

與 Tool Master 全站語言系統無縫整合，支援即時語言切換而不影響當前操作狀態。

整合特性：

監聽全域語言切換事件
延遲載入確保語言系統就緒
即時更新所有 UI 文字內容
保持轉換狀態不受語言切換影響

// 設置全域語言系統監聽器
setupGlobalLanguageListener() {
    // 監聽全域語言切換事件
    window.addEventListener('languageChanged', (event) => {
        this.currentLanguage = event.detail.language;
        this.updateLanguage();
    });
    
    // 檢查全域語言系統是否已載入
    const checkGlobalLanguage = () => {
        if (window.globalI18n) {
            // 同步當前語言設定
            this.currentLanguage = window.globalI18n.currentLanguage;
            this.updateLanguage();
            return true;
        }
        return false;
    };
    
    // 如果語言系統未載入，延遲 100ms 後重試
    if (!checkGlobalLanguage()) {
        setTimeout(() => {
            checkGlobalLanguage();
        }, 100);
    }
}

// 更新所有界面語言內容
updateLanguage() {
    const t = this.translations[this.currentLanguage];
    
    // 更新所有帶有 data-i18n 屬性的元素
    document.querySelectorAll('[data-i18n]').forEach(element => {
        const key = element.getAttribute('data-i18n');
        if (t[key]) {
            element.textContent = t[key];
        }
    });
    
    // 更新輸入框提示文字
    const placeholder = this.currentLanguage === 'zh' 
        ? '1987 或 MCMLXXXVII' 
        : '1987 or MCMLXXXVII';
    document.getElementById('numberInput').placeholder = placeholder;
    
    // 更新自動檢測指示器
    this.updateAutoDetection();
}

// 初始化系統 - 必須先設置語言系統
init() {
    this.setupGlobalLanguageListener();  // 第一優先
    this.setupEventListeners();         // 設置事件監聽
    this.updateLanguage();              // 最後更新語言
}

🎯 DOM 初始化與事件綁定 🎯 DOM Initialization & Event Binding

▶

完整的 DOM 元素初始化和事件監聽器設置，包含點擊事件、鍵盤事件、輸入事件等。

事件處理特性：

Enter 鍵快速轉換支援
即時輸入格式檢測
錯誤狀態自動清除
自動檢測指示器更新

// 設置所有事件監聽器
setupEventListeners() {
    // 獲取主要操作按鈕
    const convertBtn = document.getElementById('convertBtn');
    const clearBtn = document.getElementById('clearBtn');
    const copyBtn = document.getElementById('copyBtn');
    const numberInput = document.getElementById('numberInput');
    
    // 轉換按鈕點擊事件
    convertBtn.addEventListener('click', () => this.convert());
    
    // 清除按鈕點擊事件
    clearBtn.addEventListener('click', () => this.clearInputs());
    
    // 複製按鈕點擊事件
    copyBtn.addEventListener('click', () => this.copyResults());
    
    // 輸入框 Enter 鍵支援
    numberInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            this.convert();
        }
    });
    
    // 輸入框內容變化監聽
    numberInput.addEventListener('input', () => {
        // 清除之前的錯誤狀態
        this.clearError();
        numberInput.classList.remove('error');
        
        // 更新自動檢測指示器
        this.updateAutoDetection();
    });
}

// 更新自動檢測指示器
updateAutoDetection() {
    const input = document.getElementById('numberInput').value.trim();
    const indicator = document.getElementById('autoDetectIndicator');
    const t = this.translations[this.currentLanguage];
    
    // 如果輸入為空，隱藏指示器
    if (!input) {
        indicator.classList.add('hidden');
        return;
    }
    
    // 檢測輸入類型並顯示對應指示器
    const inputType = this.detectInputType(input);
    if (inputType) {
        indicator.textContent = t.autoDetect[inputType];
        indicator.classList.remove('hidden');
    } else {
        indicator.classList.add('hidden');
    }
}

// 智能輸入類型檢測
detectInputType(input) {
    // 檢查是否為有效的阿拉伯數字
    if (/^\d+$/.test(input)) {
        const num = parseInt(input);
        if (num >= 1 && num <= 3999) {
            return 'arabic';
        }
    }
    
    // 檢查是否為有效的羅馬數字格式
    if (/^[IVXLCDM]+$/i.test(input)) {
        return 'roman';
    }
    
    return null;  // 無法識別的格式
}

⚙️ 雙向轉換算法引擎

▶

核心轉換算法實作，包含阿拉伯數字轉羅馬數字和羅馬數字轉阿拉伯數字的雙向演算法。

算法特性：

高效的映射表迭代算法
完整的減法表示法支援 (IV, IX, XL, XC, CD, CM)
反向驗證確保結果正確性
支援 1-3999 完整範圍

// 阿拉伯數字轉羅馬數字核心算法
toRoman(num) {
    // 範圍檢查 - 羅馬數字有效範圍為 1-3999
    if (num < 1 || num > 3999) return null;
    
    let result = '';
    
    // 遍歷羅馬數字映射表，從大到小處理
    for (let [value, numeral] of this.romanMap) {
        // 計算當前數值可以使用多少次該羅馬數字
        while (num >= value) {
            result += numeral;  // 添加對應的羅馬數字
            num -= value;       // 減去對應的數值
        }
    }
    
    return result;
}

// 羅馬數字轉阿拉伯數字核心算法
fromRoman(roman) {
    // 羅馬數字到阿拉伯數字的基本映射
    const map = {
        I: 1, V: 5, X: 10, L: 50, 
        C: 100, D: 500, M: 1000
    };
    
    let result = 0;
    let prev = 0;
    
    // 從右到左遍歷羅馬數字
    for (let i = roman.length - 1; i >= 0; i--) {
        const curr = map[roman[i].toUpperCase()];
        
        // 如果遇到無效字符，返回 null
        if (!curr) return null;
        
        // 減法規則：如果當前數字小於前一個數字，則減去當前數字
        // 加法規則：否則加上當前數字
        result += curr < prev ? -curr : curr;
        prev = curr;
    }
    
    // 驗證轉換結果的有效性
    if (result >= 1 && result <= 3999) {
        // 反向驗證：將結果轉回羅馬數字，檢查是否一致
        const convertedBack = this.toRoman(result);
        if (convertedBack === roman.toUpperCase()) {
            return result;
        }
    }
    
    return null;  // 驗證失敗，返回 null
}

// 主要轉換流程控制
convert() {
    this.clearError();
    
    const input = document.getElementById('numberInput').value.trim();
    const validation = this.validateInput(input);
    
    // 如果輸入驗證失敗，顯示錯誤
    if (!validation.valid) {
        this.showError(validation.message);
        return;
    }
    
    try {
        let inputDisplay, outputDisplay, resultType;
        const t = this.translations[this.currentLanguage];
        
        if (validation.type === 'arabic') {
            // 阿拉伯數字轉羅馬數字
            const roman = this.toRoman(validation.value);
            inputDisplay = validation.value.toString();
            outputDisplay = roman;
            resultType = t.resultTypes.toRoman;
        } else {
            // 羅馬數字轉阿拉伯數字
            inputDisplay = input.toUpperCase();
            outputDisplay = validation.value.toString();
            resultType = t.resultTypes.toArabic;
        }
        
        // 顯示轉換結果
        this.displayResults(inputDisplay, outputDisplay, resultType);
        
    } catch (error) {
        this.showError(this.translations[this.currentLanguage].errors.invalidNumber);
    }
}

🛡️ 輸入驗證與錯誤處理

▶

完整的輸入驗證系統，包含格式檢查、範圍驗證、字符驗證等多層防護。

驗證特性：

自動格式識別與類型判斷
完整的羅馬數字格式驗證
數值範圍檢查 (1-3999)
友善的錯誤訊息提示

// 完整的輸入驗證系統
validateInput(input) {
    const t = this.translations[this.currentLanguage];
    
    // 檢查空輸入
    if (!input) {
        return { valid: false, message: t.errors.empty };
    }
    
    // 檢查是否為阿拉伯數字
    if (/^\d+$/.test(input)) {
        const num = parseInt(input);
        
        // 範圍檢查：羅馬數字系統支援 1-3999
        if (num < 1 || num > 3999) {
            return { valid: false, message: t.errors.outOfRange };
        }
        
        return { valid: true, type: 'arabic', value: num };
    }
    
    // 檢查是否為羅馬數字格式
    if (/^[IVXLCDM]+$/i.test(input)) {
        // 嘗試轉換為阿拉伯數字進行驗證
        const result = this.fromRoman(input);
        
        if (result === null) {
            return { valid: false, message: t.errors.invalidRoman };
        }
        
        return { valid: true, type: 'roman', value: result };
    }
    
    // 包含無效字符
    return { valid: false, message: t.errors.invalidCharacters };
}

// 顯示錯誤訊息
showError(message) {
    const errorElement = document.getElementById('errorMessage');
    errorElement.textContent = message;
    errorElement.classList.remove('hidden');
    
    // 將輸入框標記為錯誤狀態
    document.getElementById('numberInput').classList.add('error');
}

// 清除錯誤狀態
clearError() {
    const errorElement = document.getElementById('errorMessage');
    errorElement.classList.add('hidden');
    
    // 移除輸入框的錯誤樣式
    const numberInput = document.getElementById('numberInput');
    numberInput.classList.remove('error');
}

// 顯示轉換結果
displayResults(input, output, type) {
    // 更新結果顯示區域
    document.getElementById('resultInput').textContent = input;
    document.getElementById('resultOutput').textContent = output;
    document.getElementById('resultType').textContent = type;
    
    // 顯示結果區域和複製按鈕
    document.getElementById('resultsSection').classList.remove('hidden');
    document.getElementById('copyBtn').classList.remove('hidden');
}

// 清除所有輸入和結果
clearInputs() {
    // 清除輸入框
    document.getElementById('numberInput').value = '';
    
    // 隱藏結果區域和複製按鈕
    document.getElementById('resultsSection').classList.add('hidden');
    document.getElementById('copyBtn').classList.add('hidden');
    
    // 隱藏自動檢測指示器
    document.getElementById('autoDetectIndicator').classList.add('hidden');
    
    // 清除錯誤狀態
    this.clearError();
}

📋 複製功能與用戶體驗

▶

一鍵複製功能實作，包含格式化輸出、視覺回饋、錯誤處理等完整用戶體驗。

體驗特性：

格式化輸出 (輸入 = 輸出)
即時視覺回饋效果
自動恢復按鈕文字
錯誤處理與降級方案

// 複製結果到剪貼簿
async copyResults() {
    // 獲取輸入和輸出內容
    const input = document.getElementById('resultInput').textContent;
    const output = document.getElementById('resultOutput').textContent;
    
    // 格式化複製文字：輸入 = 輸出
    const copyText = `${input} = ${output}`;
    
    try {
        // 使用現代剪貼簿 API 複製文字
        await navigator.clipboard.writeText(copyText);
        
        // 視覺回饋：暫時更改按鈕文字
        const copyBtn = document.getElementById('copyBtn');
        const originalText = copyBtn.textContent;
        const t = this.translations[this.currentLanguage];
        
        // 顯示成功訊息
        copyBtn.textContent = t.copied;
        copyBtn.style.background = '#27ae60';  // 綠色表示成功
        
        // 2秒後恢復原始狀態
        setTimeout(() => {
            copyBtn.textContent = originalText;
            copyBtn.style.background = '';  // 恢復原始樣式
        }, 2000);
        
    } catch (err) {
        // 複製失敗時的錯誤處理
        console.error('複製失敗:', err);
        
        // 可以在這裡添加降級方案，例如：
        // 1. 選中文字供用戶手動複製
        // 2. 顯示錯誤提示
        // 3. 使用舊版 document.execCommand('copy')
        
        // 降級方案：嘗試使用舊版 API
        this.fallbackCopyTextToClipboard(copyText);
    }
}

// 降級複製方案（支援舊瀏覽器）
fallbackCopyTextToClipboard(text) {
    const textArea = document.createElement("textarea");
    textArea.value = text;
    
    // 避免影響頁面佈局
    textArea.style.top = "0";
    textArea.style.left = "0";
    textArea.style.position = "fixed";
    textArea.style.opacity = "0";
    
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    try {
        const successful = document.execCommand('copy');
        if (successful) {
            // 成功複製的視覺回饋
            const copyBtn = document.getElementById('copyBtn');
            const originalText = copyBtn.textContent;
            const t = this.translations[this.currentLanguage];
            
            copyBtn.textContent = t.copied;
            setTimeout(() => {
                copyBtn.textContent = originalText;
            }, 2000);
        }
    } catch (err) {
        console.error('降級複製方案也失敗:', err);
    }
    
    document.body.removeChild(textArea);
}

🚀 工具初始化與啟動 🚀 Tool Initialization & Launch

▶

完整的工具初始化流程，確保所有功能正常運作並與全站系統整合。

初始化特性：

確保初始化順序正確
語言系統優先載入
事件監聽器完整設置
自動實例化啟動

// 工具完整初始化流程
init() {
    // 1. 首先設置全域語言系統監聽（最高優先級）
    this.setupGlobalLanguageListener();
    
    // 2. 設置所有 DOM 事件監聽器
    this.setupEventListeners();
    
    // 3. 最後更新語言顯示
    this.updateLanguage();
    
    // 初始化完成日誌
    console.log('羅馬數字轉換器初始化完成');
}

// 應用程式啟動點
// 當頁面載入完成後自動創建轉換器實例
document.addEventListener('DOMContentLoaded', function() {
    // 確保 DOM 完全載入後再初始化
    new RomanNumeralsConverter();
});

// 也可以直接實例化（如果 DOM 已準備就緒）
// 這種方式適用於動態載入的情況
try {
    // 檢查關鍵 DOM 元素是否存在
    if (document.getElementById('numberInput') && 
        document.getElementById('convertBtn')) {
        
        // 立即初始化轉換器
        new RomanNumeralsConverter();
        
    } else {
        // DOM 未準備就緒，等待 DOMContentLoaded 事件
        console.log('等待 DOM 載入完成...');
    }
} catch (error) {
    console.error('羅馬數字轉換器初始化失敗:', error);
}

// 全域工具可用性檢查（可選）
if (typeof window !== 'undefined') {
    // 將轉換器類別暴露到全域範圍（便於調試）
    window.RomanNumeralsConverter = RomanNumeralsConverter;
    
    // 提供全域便捷方法
    window.convertToRoman = function(num) {
        const converter = new RomanNumeralsConverter();
        return converter.toRoman(num);
    };
    
    window.convertFromRoman = function(roman) {
        const converter = new RomanNumeralsConverter();
        return converter.fromRoman(roman);
    };
}

效能優化策略

轉換算法優化

映射表優化：將常用的減法表示法 (IV, IX, XL, XC, CD, CM) 預先計算並存儲在映射表中，避免運行時重複計算
Mapping Table Optimization: Pre-calculate and store common subtractive notations (IV, IX, XL, XC, CD, CM) in the mapping table to avoid repeated runtime calculations
單次迭代算法：使用 O(1) 空間複雜度的單次迭代算法，避免遞迴調用的性能開銷
Single-pass Algorithm: Uses O(1) space complexity single-pass algorithm, avoiding performance overhead of recursive calls
早期退出策略：在輸入驗證階段即時識別無效輸入，避免進入耗時的轉換流程
Early Exit Strategy: Immediately identify invalid inputs during validation phase, avoiding time-consuming conversion processes

用戶介面優化

防抖動機制：輸入事件使用適當的防抖動處理，避免頻繁的自動檢測計算
Debounce Mechanism: Input events use appropriate debounce handling to avoid frequent auto-detection calculations
CSS 動畫優化：使用 transform 和 opacity 屬性實現流暢的動畫效果，避免重繪和重排
CSS Animation Optimization: Uses transform and opacity properties for smooth animations, avoiding repaints and reflows
事件委託：合理使用事件委託減少事件監聽器數量，提升頁面響應速度
Event Delegation: Proper use of event delegation reduces the number of event listeners, improving page responsiveness

安全性考量

輸入清理：嚴格的正則表達式驗證，防止 XSS 攻擊和惡意輸入
Input Sanitization: Strict regex validation prevents XSS attacks and malicious input
數值範圍限制：嚴格限制轉換範圍在 1-3999，防止整數溢出和性能問題
Numerical Range Limits: Strictly limits conversion range to 1-3999, preventing integer overflow and performance issues
錯誤邊界處理：完善的異常處理機制，確保應用在任何情況下都不會崩潰
Error Boundary Handling: Comprehensive exception handling ensures the application never crashes under any circumstances
本地處理：所有計算都在客戶端進行，不涉及服務器通信，保護用戶隱私
Local Processing: All calculations performed client-side with no server communication, protecting user privacy

瀏覽器兼容性

瀏覽器	最低版本	支援功能	Browser
Chrome	63+	完整支援，包含現代剪貼簿 API	Full support including modern clipboard API
Firefox	55+	完整支援，包含現代剪貼簿 API	Full support including modern clipboard API
Safari	13.1+	完整支援，包含現代剪貼簿 API	Full support including modern clipboard API
Edge	79+	完整支援，包含現代剪貼簿 API	Full support including modern clipboard API
舊版瀏覽器	IE11+	基本功能支援，使用降級複製方案	Basic functionality with fallback copy solution

未來改進方向

📚

教育模式擴展

增加互動式學習模式，包含拖拽組合、步驟分解、練習題等

📊

歷史統計

記錄轉換歷史、常用數字統計、學習進度追蹤

🔊

語音支援

添加羅馬數字的正確發音，支援多種語言朗讀

⚡

快捷鍵系統

支援完整的鍵盤快捷鍵操作，提升專業用戶使用效率

總結

羅馬數字轉換器展示了如何使用純前端技術構建一個功能完整、用戶友善的數字轉換工具。通過精心設計的雙向轉換算法、完整的輸入驗證系統、以及無縫的雙語支援，本工具不僅能夠滿足日常的數字轉換需求，更可作為學習羅馬數字系統的教育工具。未來將持續優化算法效能，擴展教育功能，為用戶提供更加優質的使用體驗。

概述

🔒 隱私保護承諾

🔒 Privacy Protection Promise

技術架構與核心設計

整體架構設計

Overall Architecture Design

核心轉換邏輯

Core Conversion Logic

關鍵功能特色

雙向轉換

Bidirectional Conversion

智能識別

Smart Detection

完整驗證

Complete Validation

一鍵複製

One-Click Copy

教育資源

Educational Resources

快速操作

Quick Operations

實作細節

📦 核心羅馬數字轉換器類別 📦 Core Roman Numerals Converter Class

🌐 全域語言系統整合 🌐 Global Language System Integration

🎯 DOM 初始化與事件綁定 🎯 DOM Initialization & Event Binding

⚙️ 雙向轉換算法引擎 ⚙️ Bidirectional Conversion Algorithm Engine

🛡️ 輸入驗證與錯誤處理 🛡️ Input Validation & Error Handling

📋 複製功能與用戶體驗 📋 Copy Functionality & User Experience