i18n

2026-02-05 11:49:42 +08:00
parent ada0dfa3cc
commit e397d03850
18 changed files with 1598 additions and 490 deletions
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
    "fflate": "^0.8.2",
    "qrcode": "^1.5.4",
    "vue": "^3.4.0",
+    "vue-i18n": "^9.14.4",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,20 +2,55 @@
  <div class="app-container">
    <nav class="navbar">
      <div class="nav-content">
-        <router-link to="/" class="logo">
-          <h1>RC707的工具箱</h1>
+        <router-link :to="localePath(currentPathLocale, '')" class="logo">
+          <h1>{{ t('app.title') }}</h1>
        </router-link>
-        <div class="nav-links">
-          <router-link to="/" class="nav-link">首页</router-link>
-          <router-link to="/json-formatter" class="nav-link">JSON</router-link>
-          <router-link to="/comparator" class="nav-link">对比</router-link>
-          <router-link to="/encoder-decoder" class="nav-link">编解码</router-link>
-          <router-link to="/variable-name" class="nav-link">变量名</router-link>
-          <router-link to="/qr-code" class="nav-link">二维码</router-link>
-          <router-link to="/timestamp-converter" class="nav-link">时间戳</router-link>
-          <router-link to="/color-converter" class="nav-link">颜色</router-link>
+        <div class="nav-right">
+          <div class="nav-links">
+            <router-link :to="localePath(currentPathLocale, '')" class="nav-link">{{ t('nav.home') }}</router-link>
+            <router-link :to="localePath(currentPathLocale, 'json-formatter')" class="nav-link">{{ t('nav.json') }}</router-link>
+            <router-link :to="localePath(currentPathLocale, 'comparator')" class="nav-link">{{ t('nav.comparator') }}</router-link>
+            <router-link :to="localePath(currentPathLocale, 'encoder-decoder')" class="nav-link">{{ t('nav.encoderDecoder') }}</router-link>
+            <router-link :to="localePath(currentPathLocale, 'variable-name')" class="nav-link">{{ t('nav.variableName') }}</router-link>
+            <router-link :to="localePath(currentPathLocale, 'qr-code')" class="nav-link">{{ t('nav.qrCode') }}</router-link>
+            <router-link :to="localePath(currentPathLocale, 'timestamp-converter')" class="nav-link">{{ t('nav.timestamp') }}</router-link>
+            <router-link :to="localePath(currentPathLocale, 'color-converter')" class="nav-link">{{ t('nav.color') }}</router-link>
+          </div>
        </div>
      </div>
+      <div ref="localeDropRef" class="nav-locale">
+        <button
+          type="button"
+          class="locale-trigger"
+          :aria-expanded="localeOpen"
+          aria-haspopup="listbox"
+          aria-label="选择语言"
+          @click="localeOpen = !localeOpen"
+        >
+          {{ currentLocaleLabel }}
+        </button>
+        <Transition name="locale-drop">
+          <div
+            v-show="localeOpen"
+            class="locale-dropdown"
+            role="listbox"
+            aria-label="语言选项"
+          >
+            <button
+              v-for="opt in localeOptions"
+              :key="opt.pathLocale"
+              type="button"
+              role="option"
+              :aria-selected="currentPathLocale === opt.pathLocale"
+              class="locale-option"
+              :class="{ active: currentPathLocale === opt.pathLocale }"
+              @click="selectLocale(opt.pathLocale)"
+            >
+              {{ opt.label }}
+            </button>
+          </div>
+        </Transition>
+      </div>
    </nav>
    <main class="main-content">
      <router-view />
@@ -24,7 +59,55 @@
 </template>

 <script setup>
-// Vue 3 Composition API
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { localePath } from './router'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+
+const localeOpen = ref(false)
+const localeDropRef = ref(null)
+
+const currentPathLocale = computed(() => route.params.locale || 'zh')
+
+const localeOptions = [
+  { pathLocale: 'zh', label: '简体中文' },
+  { pathLocale: 'zh-tw', label: '繁體中文' },
+  { pathLocale: 'en', label: 'English' },
+]
+
+const currentLocaleLabel = computed(() => {
+  const opt = localeOptions.find(o => o.pathLocale === currentPathLocale.value)
+  return opt ? opt.label : '简体中文'
+})
+
+function switchLocale(newPathLocale) {
+  if (newPathLocale === currentPathLocale.value) return
+  const pathWithoutLocale = route.path.replace(/^\/[^/]+/, '') || ''
+  const segment = pathWithoutLocale.startsWith('/') ? pathWithoutLocale.slice(1) : pathWithoutLocale
+  router.push(localePath(newPathLocale, segment))
+}
+
+function selectLocale(pathLocale) {
+  switchLocale(pathLocale)
+  localeOpen.value = false
+}
+
+function onClickOutside(e) {
+  if (localeDropRef.value && !localeDropRef.value.contains(e.target)) {
+    localeOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', onClickOutside)
+})
+onUnmounted(() => {
+  document.removeEventListener('click', onClickOutside)
+})
 </script>

 <style scoped>
@@ -42,6 +125,9 @@
  top: 0;
  z-index: 100;
  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }

 .nav-content {
@@ -52,6 +138,8 @@
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
+  flex: 1;
+  min-width: 0;
 }

 .logo {
@@ -68,6 +156,12 @@
  letter-spacing: -0.02em;
 }

+.nav-right {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
 .nav-links {
  display: flex;
  gap: 0;
@@ -97,12 +191,84 @@
  background: #f5f5f5;
 }

-.nav-link.router-link-active {
+.nav-link.router-link-exact-active {
  color: #ffffff;
  background: #1a1a1a;
  border-bottom-color: #1a1a1a;
 }

+.nav-locale {
+  position: relative;
+  flex-shrink: 0;
+  margin-right: 0;
+  padding-right: 1rem;
+}
+
+.locale-trigger {
+  min-width: 5.5rem;
+  padding: 0.35rem 0.6rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: #333;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.locale-trigger:hover {
+  background: #f5f5f5;
+}
+
+.locale-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 8.5rem;
+  padding: 4px;
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  z-index: 200;
+}
+
+.locale-option {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: #333;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.15s;
+}
+
+.locale-option:hover {
+  background: #f5f5f5;
+}
+
+.locale-option.active {
+  background: #1a1a1a;
+  color: #fff;
+}
+
+.locale-drop-enter-active,
+.locale-drop-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.locale-drop-enter-from,
+.locale-drop-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
 .main-content {
  flex: 1;
  width: 100%;
@@ -125,20 +291,36 @@
    font-size: 1.125rem;
  }

-  .nav-links {
+  .navbar {
+    flex-wrap: wrap;
+  }
+
+  .nav-content {
+    flex: 1 1 100%;
+  }
+
+  .nav-right {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

+  .nav-links {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
  .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

+  .nav-locale {
+    padding-right: 0.75rem;
+  }
+
  .main-content {
    padding: 1rem;
  }
 }
 </style>
-
--- a/src/AppRoot.vue
+++ b/src/AppRoot.vue
@@ -0,0 +1,6 @@
+<template>
+  <router-view />
+</template>
+
+<script setup>
+</script>
--- a/src/components/DateTimePicker.vue
+++ b/src/components/DateTimePicker.vue
@@ -9,14 +9,14 @@
            <!-- 年月导航 -->
            <div class="date-header">
              <div class="nav-buttons">
-                <button @click="prevYear" class="nav-btn" title="上一年">«</button>
-                <button @click="prevMonth" class="nav-btn" title="上一月">‹</button>
+                <button @click="prevYear" class="nav-btn" :title="t('dateTimePicker.prevYear')">«</button>
+                <button @click="prevMonth" class="nav-btn" :title="t('dateTimePicker.prevMonth')">‹</button>
              </div>
              <div 
                v-if="!isEditingMonthYear"
                @click="startEditingMonthYear"
                class="current-month-year editable"
-                title="点击输入年月"
+                :title="t('dateTimePicker.clickInputMonthYear')"
              >
                {{ currentViewDate.getFullYear() }} - {{ String(currentViewDate.getMonth() + 1).padStart(2, '0') }}
              </div>
@@ -27,18 +27,18 @@
                @keyup.enter="confirmMonthYear"
                @keyup.esc="cancelEditingMonthYear"
                class="month-year-input"
-                placeholder="YYYY-MM"
+                :placeholder="t('dateTimePicker.placeholderMonthYear')"
                ref="monthYearInputRef"
              />
              <div class="nav-buttons">
-                <button @click="nextMonth" class="nav-btn" title="下一月">›</button>
-                <button @click="nextYear" class="nav-btn" title="下一年">»</button>
+                <button @click="nextMonth" class="nav-btn" :title="t('dateTimePicker.nextMonth')">›</button>
+                <button @click="nextYear" class="nav-btn" :title="t('dateTimePicker.nextYear')">»</button>
              </div>
            </div>
            
            <!-- 星期标题 -->
            <div class="weekdays">
-              <div class="weekday" v-for="day in ['日', '一', '二', '三', '四', '五', '六']" :key="day">
+              <div class="weekday" v-for="(day, idx) in weekdays" :key="idx">
                {{ day }}
              </div>
            </div>
@@ -62,12 +62,12 @@
            </div>
            
            <!-- 此刻按钮 -->
-            <button @click="selectNow" class="now-btn">此刻</button>
+            <button @click="selectNow" class="now-btn">{{ t('dateTimePicker.now') }}</button>
          </div>
          
          <!-- 右侧时间选择区域 -->
          <div class="time-picker-section">
-            <div class="time-header">选择时间</div>
+            <div class="time-header">{{ t('dateTimePicker.selectTime') }}</div>
            
            <div class="time-selectors">
              <!-- 小时选择 -->
@@ -117,7 +117,7 @@
            </div>
            
            <!-- 确定按钮 -->
-            <button @click="confirmSelection" class="confirm-btn">确定</button>
+            <button @click="confirmSelection" class="confirm-btn">{{ t('dateTimePicker.confirm') }}</button>
          </div>
        </div>
      </div>
@@ -132,6 +132,15 @@

 <script setup>
 import { ref, computed, watch, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t, tm } = useI18n()
+
+const weekdays = computed(() => {
+  const msg = tm('dateTimePicker')
+  const w = msg?.weekdays
+  return Array.isArray(w) ? w : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+})

 const props = defineProps({
  modelValue: {
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -0,0 +1,17 @@
+import { createI18n } from 'vue-i18n'
+import zhCN from './locales/zh-CN'
+import zhTW from './locales/zh-TW'
+import en from './locales/en'
+
+export const supportedLocales = ['zh-CN', 'zh-TW', 'en']
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: 'zh-CN',
+  fallbackLocale: 'zh-CN',
+  messages: {
+    'zh-CN': zhCN,
+    'zh-TW': zhTW,
+    en,
+  },
+})
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -0,0 +1,293 @@
+export default {
+  nav: {
+    home: 'Home',
+    json: 'JSON',
+    comparator: 'Compare',
+    encoderDecoder: 'Encode/Decode',
+    variableName: 'Variable',
+    qrCode: 'QR Code',
+    timestamp: 'Timestamp',
+    color: 'Color',
+  },
+  app: {
+    title: "RC707's Toolbox",
+    titleJson: "RC707's Toolbox - JSON",
+    titleComparator: "RC707's Toolbox - Compare",
+    titleEncoderDecoder: "RC707's Toolbox - Encode/Decode",
+    titleVariableName: "RC707's Toolbox - Variable",
+    titleQrCode: "RC707's Toolbox - QR Code",
+    titleTimestamp: "RC707's Toolbox - Timestamp",
+    titleColor: "RC707's Toolbox - Color",
+  },
+  home: {
+    heroToday: 'Today is {date}',
+    toolJson: 'JSON',
+    toolJsonDesc: 'Format, validate and beautify JSON',
+    toolComparator: 'Compare',
+    toolComparatorDesc: 'Text and JSON comparison',
+    toolEncoderDecoder: 'Encode/Decode',
+    toolEncoderDecoderDesc: 'Encoding/decoding tools',
+    toolVariableName: 'Variable',
+    toolVariableNameDesc: 'Variable name format conversion',
+    toolQrCode: 'QR Code',
+    toolQrCodeDesc: 'Generate QR codes',
+    toolTimestamp: 'Timestamp',
+    toolTimestampDesc: 'Timestamp and date string conversion',
+    toolColor: 'Color',
+    toolColorDesc: 'Color format conversion',
+  },
+  locale: {
+    zhCN: '简',
+    zhTW: '繁',
+    en: 'EN',
+  },
+  common: {
+    close: 'Close',
+    copy: 'Copy',
+    paste: 'Paste',
+    clear: 'Clear',
+    history: 'History',
+    noHistory: 'No history yet',
+    copied: 'Copied to clipboard',
+    copyFailed: 'Copy failed: ',
+    clipboardEmpty: 'Clipboard is empty',
+    pasteHint: 'Press Ctrl+V or Cmd+V to paste',
+    pasteFailed: 'Cannot access editor, please paste manually',
+    cleared: 'Cleared',
+  },
+  json: {
+    editor: 'Editor',
+    maxSize: '(max 5MB)',
+    tree: 'Tree',
+    placeholder: 'Enter or paste JSON, e.g. {"name":"toolbox","version":1.0}',
+    jsonPathPlaceholder: 'Enter JSONPath, e.g. $.key.subkey',
+    jsonPathFilter: 'JSONPath filter',
+    clearFilter: 'Clear filter',
+    copyFilterResult: 'Copy filter result',
+    expandAll: 'Expand all',
+    collapseAll: 'Collapse all',
+    format: 'Format',
+    minify: 'Minify',
+    escape: 'Escape',
+    unescape: 'Unescape',
+    emptyState: 'Enter or paste JSON on the left, tree view will show on the right',
+    noMatchedNodes: 'No matching nodes',
+    noContentToCopy: 'Nothing to copy',
+    copiedCount: 'Copied {count} match(es)',
+    contentOverLimit: 'Content exceeds 5MB limit, truncated',
+    pleaseInputJson: 'Please enter JSON',
+    inputOverLimit: 'Input exceeds 5MB limit, cannot format',
+    outputOverLimit: 'Formatted output exceeds 5MB limit',
+    formatSuccess: 'Formatted',
+    jsonError: 'JSON error: ',
+    minifyOverLimit: 'Input exceeds 5MB limit, cannot minify',
+    minifyOutputOverLimit: 'Minified output exceeds 5MB limit',
+    minifySuccess: 'Minified',
+    escapeOverLimit: 'Input exceeds 5MB limit, cannot escape',
+    escapeOutputOverLimit: 'Escaped output exceeds 5MB limit',
+    escapeSuccess: 'Escaped',
+    escapeFailed: 'Escape failed: ',
+    unescapeOverLimit: 'Input exceeds 5MB limit, cannot unescape',
+    unescapeOutputOverLimit: 'Unescaped output exceeds 5MB limit',
+    unescapeSuccess: 'Unescaped',
+    unescapeFormatSuccess: 'Unescaped and formatted',
+    unescapeFailed: 'Unescape failed: ',
+    editorEmpty: 'Editor is empty, nothing to copy',
+    pasteOverLimit: 'Pasted content exceeds 5MB limit, truncated',
+  },
+  encoder: {
+    input: 'Input',
+    output: 'Output',
+    encode: 'Encode',
+    decode: 'Decode',
+    base64: 'Base64',
+    url: 'URL',
+    unicode: 'Unicode',
+    zlib: 'Zlib',
+    titleBase64: 'Base64 encode',
+    titleUrl: 'URL encode',
+    titleUnicode: 'Unicode encode',
+    titleZlib: 'Zlib compress/decompress',
+    copyOutput: 'Copy output',
+    inputPlaceholder: 'Enter text to encode or decode',
+    outputPlaceholder: 'Encoded or decoded result will appear here',
+    pleaseInputEncode: 'Please enter text to encode',
+    encodeSuccess: 'Encoded',
+    encodeFailed: 'Encode failed: ',
+    pleaseInputDecode: 'Please enter string to decode',
+    decodeSuccess: 'Decoded',
+    decodeFailed: 'Decode failed: invalid {type} string',
+    inputEmptyCopy: 'Input is empty, nothing to copy',
+    copiedInput: 'Input copied to clipboard',
+    outputEmptyCopy: 'Output is empty, nothing to copy',
+    copiedOutput: 'Output copied to clipboard',
+    manualPaste: 'Please paste manually',
+  },
+  variable: {
+    placeholder: 'Enter variable name (any format)',
+    camelCase: 'camelCase',
+    pascalCase: 'PascalCase',
+    snakeCase: 'snake_case',
+    kebabCase: 'kebab-case',
+    constantCase: 'CONSTANT_CASE',
+    copyLabel: 'Copy {label}',
+    empty: '—',
+    noContentToCopy: 'Nothing to copy',
+    copiedLabel: '{label} copied to clipboard',
+  },
+  qr: {
+    inputPlaceholder: 'Enter content for QR code',
+    generate: 'Generate QR code',
+    download: 'Download',
+    copyImage: 'Copy image',
+    qrCode: 'QR code',
+    pleaseInput: 'Please enter content for QR code',
+    generateSuccess: 'QR code generated',
+    generateFailed: 'Failed to generate: ',
+    noQrToDownload: 'No QR code to download',
+    downloadSuccess: 'Downloaded',
+    downloadFailed: 'Download failed: ',
+    noQrToCopy: 'No QR code to copy',
+    copyImageFailed: 'Copy failed, use download instead',
+  },
+  timestamp: {
+    dateToTs: 'Date → ({tz}) Timestamp:',
+    tsToDate: 'Timestamp → ({tz}) Date',
+    currentTs: 'Current timestamp:',
+    placeholderTs: 'Enter timestamp',
+    selectDateTime: 'Select date & time',
+    resetData: 'Reset',
+    resume: 'Resume',
+    pause: 'Pause',
+    seconds: 'Seconds',
+    milliseconds: 'Milliseconds',
+    nanoseconds: 'Nanoseconds',
+    datePlaceholderSeconds: 'Format: yyyy-MM-dd HH:mm:ss',
+    datePlaceholderMs: 'Format: yyyy-MM-dd HH:mm:ss.SSS',
+    datePlaceholderNs: 'Format: yyyy-MM-dd HH:mm:ss.SSSSSSSSS',
+    dataReset: 'Data reset',
+    invalidNs: 'Please enter a valid nanosecond timestamp',
+    invalidNumber: 'Please enter a valid number',
+    invalidTs: 'Invalid timestamp',
+    convertFailed: 'Convert failed: ',
+    invalidDateFormat: 'Invalid date format',
+    noContentToCopy: 'Nothing to copy',
+    copyFailed: 'Copy failed',
+  },
+  color: {
+    rgb: 'RGB',
+    hex: 'Hex',
+    hsl: 'HSL',
+    copyRgb: 'Copy RGB',
+    pasteRgb: 'Paste RGB',
+    copyHex: 'Copy hex',
+    pasteHex: 'Paste hex',
+    copyHsl: 'Copy HSL',
+    pasteHsl: 'Paste HSL',
+    placeholderRgb: '0-255',
+    placeholderHex: 'FFFFFF',
+    placeholderH: '0-360',
+    placeholderSL: '0-100',
+    reset: 'Reset',
+    random: 'Random',
+    rgbPasted: 'RGB pasted',
+    rgbOutOfRange: 'RGB out of range (0-255)',
+    hslPasted: 'HSL pasted',
+    hslOutOfRange: 'HSL out of range (H: 0-360, S/L: 0-100)',
+    rgbCopied: 'RGB copied to clipboard',
+    hexCopied: 'Hex copied to clipboard',
+    hslCopied: 'HSL copied to clipboard',
+    pasteSuccess: 'Pasted',
+    invalidRgb: 'Clipboard is not valid RGB',
+    invalidHex: 'Clipboard is not valid hex',
+    invalidHsl: 'Clipboard is not valid HSL',
+    manualPaste: 'Please paste into input manually',
+    pasteFailed: 'Paste failed',
+  },
+  comparator: {
+    textCompare: 'Text',
+    jsonCompare: 'JSON',
+    lineMode: 'By line',
+    charMode: 'By char',
+    ignoreListOrder: 'Ignore list order',
+    compare: 'Compare',
+    startCompare: 'Compare',
+    textA: 'Text A',
+    textB: 'Text B',
+    maxSize: '(max {size})',
+    placeholderA: 'Enter or paste content A',
+    placeholderB: 'Enter or paste content B',
+    result: 'Result',
+    same: 'Same:',
+    insert: 'Insert:',
+    delete: 'Delete:',
+    modify: 'Modify:',
+    fullscreen: 'Fullscreen',
+    exitFullscreen: 'Exit fullscreen',
+    left: 'Left',
+    right: 'Right',
+    contentOverLimit: 'Content exceeds {size} limit, truncated',
+    emptyCopy: '{side} is empty, nothing to copy',
+    copiedSide: '{side} copied to clipboard',
+    pasteOverLimit: 'Paste exceeds {size} limit, truncated',
+    pleaseInput: 'Please enter content to compare',
+    inputOverLimit: 'Input exceeds {size} limit',
+    largeArrayHint: 'Large array detected, comparison may take a while...',
+    compareDone: 'Done',
+    noResultToCopy: 'No result to copy',
+    resultCopied: 'Result copied to clipboard',
+  },
+  dateTimePicker: {
+    prevYear: 'Prev year',
+    prevMonth: 'Prev month',
+    nextMonth: 'Next month',
+    nextYear: 'Next year',
+    clickInputMonthYear: 'Click to input year-month',
+    placeholderMonthYear: 'YYYY-MM',
+    weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    now: 'Now',
+    selectTime: 'Select time',
+    confirm: 'OK',
+    cancel: 'Cancel',
+  },
+  timestampTz: {
+    'UTC-12:00': 'Baker Island',
+    'UTC-11:00': 'Samoa',
+    'UTC-10:00': 'Hawaii',
+    'UTC-09:30': 'Marquesas',
+    'UTC-09:00': 'Alaska',
+    'UTC-08:00': 'Los Angeles',
+    'UTC-07:00': 'Denver',
+    'UTC-06:00': 'Chicago',
+    'UTC-05:00': 'New York',
+    'UTC-04:00': 'Caracas',
+    'UTC-03:30': 'Newfoundland',
+    'UTC-03:00': 'Buenos Aires',
+    'UTC-02:00': 'Mid-Atlantic',
+    'UTC-01:00': 'Azores',
+    'UTC+00:00': 'London',
+    'UTC+01:00': 'Paris',
+    'UTC+02:00': 'Cairo',
+    'UTC+03:00': 'Moscow',
+    'UTC+03:30': 'Tehran',
+    'UTC+04:00': 'Dubai',
+    'UTC+04:30': 'Kabul',
+    'UTC+05:00': 'Islamabad',
+    'UTC+05:30': 'New Delhi',
+    'UTC+05:45': 'Kathmandu',
+    'UTC+06:00': 'Dhaka',
+    'UTC+06:30': 'Yangon',
+    'UTC+07:00': 'Bangkok',
+    'UTC+08:00': 'Beijing',
+    'UTC+08:45': 'Eucla',
+    'UTC+09:00': 'Tokyo',
+    'UTC+09:30': 'Adelaide',
+    'UTC+10:00': 'Sydney',
+    'UTC+10:30': 'Lord Howe',
+    'UTC+11:00': 'Noumea',
+    'UTC+12:00': 'Auckland',
+    'UTC+12:45': 'Chatham',
+    'UTC+13:00': 'Samoa',
+    'UTC+14:00': 'Kiribati',
+  },
+}
--- a/src/i18n/locales/zh-CN.js
+++ b/src/i18n/locales/zh-CN.js
@@ -0,0 +1,293 @@
+export default {
+  nav: {
+    home: '首页',
+    json: 'JSON',
+    comparator: '对比',
+    encoderDecoder: '编解码',
+    variableName: '变量名',
+    qrCode: '二维码',
+    timestamp: '时间戳',
+    color: '颜色',
+  },
+  app: {
+    title: 'RC707的工具箱',
+    titleJson: 'RC707的工具箱-JSON',
+    titleComparator: 'RC707的工具箱-对比',
+    titleEncoderDecoder: 'RC707的工具箱-编解码',
+    titleVariableName: 'RC707的工具箱-变量名',
+    titleQrCode: 'RC707的工具箱-二维码',
+    titleTimestamp: 'RC707的工具箱-时间戳',
+    titleColor: 'RC707的工具箱-颜色',
+  },
+  home: {
+    heroToday: '今天是{date}',
+    toolJson: 'JSON',
+    toolJsonDesc: '格式化、验证和美化JSON数据',
+    toolComparator: '对比',
+    toolComparatorDesc: '文本和JSON对比工具',
+    toolEncoderDecoder: '编解码',
+    toolEncoderDecoderDesc: '编码/解码工具',
+    toolVariableName: '变量名',
+    toolVariableNameDesc: '变量名格式转换',
+    toolQrCode: '二维码',
+    toolQrCodeDesc: '生成二维码',
+    toolTimestamp: '时间戳',
+    toolTimestampDesc: '时间戳与时间字符串相互转换',
+    toolColor: '颜色',
+    toolColorDesc: '颜色格式转换',
+  },
+  locale: {
+    zhCN: '简体',
+    zhTW: '繁中',
+    en: 'EN',
+  },
+  common: {
+    close: '关闭',
+    copy: '复制',
+    paste: '粘贴',
+    clear: '清空',
+    history: '历史记录',
+    noHistory: '暂无历史记录',
+    copied: '已复制到剪贴板',
+    copyFailed: '复制失败：',
+    clipboardEmpty: '剪贴板内容为空',
+    pasteHint: '请按 Ctrl+V 或 Cmd+V 粘贴内容',
+    pasteFailed: '无法访问编辑器，请手动粘贴内容',
+    cleared: '已清空',
+  },
+  json: {
+    editor: '编辑器',
+    maxSize: '(最大 5MB)',
+    tree: '树形',
+    placeholder: '请输入或粘贴JSON数据，例如：{"name":"工具箱","version":1.0}',
+    jsonPathPlaceholder: '输入 JSONPath，例如: $.key.subkey',
+    jsonPathFilter: 'JSONPath 筛选',
+    clearFilter: '清除筛选',
+    copyFilterResult: '复制筛选结果',
+    expandAll: '展开全部',
+    collapseAll: '折叠全部',
+    format: '格式化',
+    minify: '压缩',
+    escape: '转义',
+    unescape: '取消转义',
+    emptyState: '在左侧输入或粘贴JSON数据，右侧将实时显示树形结构',
+    noMatchedNodes: '未找到匹配的节点',
+    noContentToCopy: '没有可复制的结果',
+    copiedCount: '已复制 {count} 个匹配结果',
+    contentOverLimit: '内容已超过 5MB 限制，已自动截断',
+    pleaseInputJson: '请输入JSON数据',
+    inputOverLimit: '输入内容超过 5MB 限制，无法格式化',
+    outputOverLimit: '格式化后的内容超过 5MB 限制，无法显示',
+    formatSuccess: '格式化成功',
+    jsonError: 'JSON格式错误：',
+    minifyOverLimit: '输入内容超过 5MB 限制，无法压缩',
+    minifyOutputOverLimit: '压缩后的内容超过 5MB 限制，无法显示',
+    minifySuccess: '压缩成功',
+    escapeOverLimit: '输入内容超过 5MB 限制，无法转义',
+    escapeOutputOverLimit: '转义后的内容超过 5MB 限制，无法显示',
+    escapeSuccess: '转义成功',
+    escapeFailed: '转义失败：',
+    unescapeOverLimit: '输入内容超过 5MB 限制，无法取消转义',
+    unescapeOutputOverLimit: '取消转义后的内容超过 5MB 限制，无法显示',
+    unescapeSuccess: '取消转义成功',
+    unescapeFormatSuccess: '取消转义并格式化成功',
+    unescapeFailed: '取消转义失败：',
+    editorEmpty: '编辑器内容为空，无法复制',
+    pasteOverLimit: '粘贴内容已超过 5MB 限制，已自动截断',
+  },
+  encoder: {
+    input: '输入',
+    output: '输出',
+    encode: '编码',
+    decode: '解码',
+    base64: 'Base64',
+    url: 'URL',
+    unicode: 'Unicode',
+    zlib: 'Zlib',
+    titleBase64: 'Base64编码',
+    titleUrl: 'URL编码',
+    titleUnicode: 'Unicode编码',
+    titleZlib: 'Zlib 压缩/解压',
+    copyOutput: '复制输出',
+    inputPlaceholder: '请输入要编码或解码的文本',
+    outputPlaceholder: '编码或解码结果将显示在这里',
+    pleaseInputEncode: '请输入要编码的文本',
+    encodeSuccess: '编码成功',
+    encodeFailed: '编码失败：',
+    pleaseInputDecode: '请输入要解码的字符串',
+    decodeSuccess: '解码成功',
+    decodeFailed: '解码失败：请检查输入是否为有效的{type}编码字符串',
+    inputEmptyCopy: '输入内容为空，无法复制',
+    copiedInput: '已复制输入到剪贴板',
+    outputEmptyCopy: '输出内容为空，无法复制',
+    copiedOutput: '已复制输出到剪贴板',
+    manualPaste: '请手动粘贴内容',
+  },
+  variable: {
+    placeholder: '请输入变量名（支持任意格式）',
+    camelCase: '小驼峰 (camelCase)',
+    pascalCase: '大驼峰 (PascalCase)',
+    snakeCase: '下划线 (snake_case)',
+    kebabCase: '横线 (kebab-case)',
+    constantCase: '常量 (CONSTANT_CASE)',
+    copyLabel: '复制{label}',
+    empty: '—',
+    noContentToCopy: '没有可复制的内容',
+    copiedLabel: '{label}已复制到剪贴板',
+  },
+  qr: {
+    inputPlaceholder: '请输入要生成二维码的内容',
+    generate: '生成二维码',
+    download: '下载',
+    copyImage: '复制图片',
+    qrCode: '二维码',
+    pleaseInput: '请输入要生成二维码的内容',
+    generateSuccess: '二维码生成成功',
+    generateFailed: '生成二维码失败：',
+    noQrToDownload: '没有可下载的二维码',
+    downloadSuccess: '下载成功',
+    downloadFailed: '下载失败：',
+    noQrToCopy: '没有可复制的二维码',
+    copyImageFailed: '复制失败，请使用下载功能',
+  },
+  timestamp: {
+    dateToTs: '日期 → ({tz}) 时间戳:',
+    tsToDate: '时间戳 → ({tz}) 日期',
+    currentTs: '当前时间戳:',
+    placeholderTs: '请输入时间戳',
+    selectDateTime: '选择日期时间',
+    resetData: '重置数据',
+    resume: '继续',
+    pause: '暂停',
+    seconds: '秒',
+    milliseconds: '毫秒',
+    nanoseconds: '纳秒',
+    datePlaceholderSeconds: '格式：yyyy-MM-dd HH:mm:ss',
+    datePlaceholderMs: '格式：yyyy-MM-dd HH:mm:ss.SSS',
+    datePlaceholderNs: '格式：yyyy-MM-dd HH:mm:ss.SSSSSSSSS',
+    dataReset: '数据已重置',
+    invalidNs: '请输入有效的纳秒级时间戳',
+    invalidNumber: '请输入有效的数字',
+    invalidTs: '无效的时间戳',
+    convertFailed: '转换失败：',
+    invalidDateFormat: '无效的时间格式',
+    noContentToCopy: '没有可复制的内容',
+    copyFailed: '复制失败',
+  },
+  color: {
+    rgb: 'RGB',
+    hex: '十六进制',
+    hsl: 'HSL',
+    copyRgb: '复制RGB',
+    pasteRgb: '粘贴RGB',
+    copyHex: '复制十六进制',
+    pasteHex: '粘贴十六进制',
+    copyHsl: '复制HSL',
+    pasteHsl: '粘贴HSL',
+    placeholderRgb: '0-255',
+    placeholderHex: 'FFFFFF',
+    placeholderH: '0-360',
+    placeholderSL: '0-100',
+    reset: '重置',
+    random: '随机颜色',
+    rgbPasted: 'RGB已粘贴并解析',
+    rgbOutOfRange: 'RGB值超出范围（0-255）',
+    hslPasted: 'HSL已粘贴并解析',
+    hslOutOfRange: 'HSL值超出范围（H: 0-360, S/L: 0-100）',
+    rgbCopied: 'RGB已复制到剪贴板',
+    hexCopied: '十六进制已复制到剪贴板',
+    hslCopied: 'HSL已复制到剪贴板',
+    pasteSuccess: '粘贴成功',
+    invalidRgb: '剪贴板内容不是有效的RGB格式',
+    invalidHex: '剪贴板内容不是有效的十六进制格式',
+    invalidHsl: '剪贴板内容不是有效的HSL格式',
+    manualPaste: '请手动粘贴到输入框',
+    pasteFailed: '粘贴失败：请手动粘贴到输入框',
+  },
+  comparator: {
+    textCompare: '文本对比',
+    jsonCompare: 'JSON对比',
+    lineMode: '行维度',
+    charMode: '字符维度',
+    ignoreListOrder: '忽略列表顺序',
+    compare: '对比',
+    startCompare: '开始对比',
+    textA: '文本 A',
+    textB: '文本 B',
+    maxSize: '(最大 {size})',
+    placeholderA: '请输入或粘贴要对比的内容 A',
+    placeholderB: '请输入或粘贴要对比的内容 B',
+    result: '对比结果',
+    same: '相同:',
+    insert: '插入:',
+    delete: '删除:',
+    modify: '修改:',
+    fullscreen: '全屏展示',
+    exitFullscreen: '退出全屏',
+    left: '左侧',
+    right: '右侧',
+    contentOverLimit: '内容已超过 {size} 限制，已自动截断',
+    emptyCopy: '{side}内容为空，无法复制',
+    copiedSide: '已复制{side}内容到剪贴板',
+    pasteOverLimit: '粘贴内容已超过 {size} 限制，已自动截断',
+    pleaseInput: '请输入要对比的内容',
+    inputOverLimit: '输入内容超过 {size} 限制，请减小输入大小',
+    largeArrayHint: '检测到大型数组，对比可能需要较长时间，请耐心等待...',
+    compareDone: '对比完成',
+    noResultToCopy: '没有对比结果可复制',
+    resultCopied: '已复制对比结果到剪贴板',
+  },
+  dateTimePicker: {
+    prevYear: '上一年',
+    prevMonth: '上一月',
+    nextMonth: '下一月',
+    nextYear: '下一年',
+    clickInputMonthYear: '点击输入年月',
+    placeholderMonthYear: 'YYYY-MM',
+    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
+    now: '此刻',
+    selectTime: '选择时间',
+    confirm: '确定',
+    cancel: '取消',
+  },
+  timestampTz: {
+    'UTC-12:00': '贝克岛',
+    'UTC-11:00': '萨摩亚',
+    'UTC-10:00': '夏威夷',
+    'UTC-09:30': '马克萨斯群岛',
+    'UTC-09:00': '阿拉斯加',
+    'UTC-08:00': '洛杉矶',
+    'UTC-07:00': '丹佛',
+    'UTC-06:00': '芝加哥',
+    'UTC-05:00': '纽约',
+    'UTC-04:00': '加拉加斯',
+    'UTC-03:30': '纽芬兰',
+    'UTC-03:00': '布宜诺斯艾利斯',
+    'UTC-02:00': '大西洋中部',
+    'UTC-01:00': '亚速尔群岛',
+    'UTC+00:00': '伦敦',
+    'UTC+01:00': '巴黎',
+    'UTC+02:00': '开罗',
+    'UTC+03:00': '莫斯科',
+    'UTC+03:30': '德黑兰',
+    'UTC+04:00': '迪拜',
+    'UTC+04:30': '喀布尔',
+    'UTC+05:00': '伊斯兰堡',
+    'UTC+05:30': '新德里',
+    'UTC+05:45': '加德满都',
+    'UTC+06:00': '达卡',
+    'UTC+06:30': '仰光',
+    'UTC+07:00': '曼谷',
+    'UTC+08:00': '北京',
+    'UTC+08:45': '尤克拉',
+    'UTC+09:00': '东京',
+    'UTC+09:30': '阿德莱德',
+    'UTC+10:00': '悉尼',
+    'UTC+10:30': '豪勋爵岛',
+    'UTC+11:00': '新喀里多尼亚',
+    'UTC+12:00': '奥克兰',
+    'UTC+12:45': '查塔姆群岛',
+    'UTC+13:00': '萨摩亚',
+    'UTC+14:00': '基里巴斯',
+  },
+}
--- a/src/i18n/locales/zh-TW.js
+++ b/src/i18n/locales/zh-TW.js
@@ -0,0 +1,293 @@
+export default {
+  nav: {
+    home: '首頁',
+    json: 'JSON',
+    comparator: '對比',
+    encoderDecoder: '編解碼',
+    variableName: '變數名',
+    qrCode: '二維碼',
+    timestamp: '時間戳',
+    color: '顏色',
+  },
+  app: {
+    title: 'RC707的工具箱',
+    titleJson: 'RC707的工具箱-JSON',
+    titleComparator: 'RC707的工具箱-對比',
+    titleEncoderDecoder: 'RC707的工具箱-編解碼',
+    titleVariableName: 'RC707的工具箱-變數名',
+    titleQrCode: 'RC707的工具箱-二維碼',
+    titleTimestamp: 'RC707的工具箱-時間戳',
+    titleColor: 'RC707的工具箱-顏色',
+  },
+  home: {
+    heroToday: '今天是{date}',
+    toolJson: 'JSON',
+    toolJsonDesc: '格式化、驗證和美化JSON資料',
+    toolComparator: '對比',
+    toolComparatorDesc: '文字和JSON對比工具',
+    toolEncoderDecoder: '編解碼',
+    toolEncoderDecoderDesc: '編碼/解碼工具',
+    toolVariableName: '變數名',
+    toolVariableNameDesc: '變數名格式轉換',
+    toolQrCode: '二維碼',
+    toolQrCodeDesc: '產生二維碼',
+    toolTimestamp: '時間戳',
+    toolTimestampDesc: '時間戳與時間字串相互轉換',
+    toolColor: '顏色',
+    toolColorDesc: '顏色格式轉換',
+  },
+  locale: {
+    zhCN: '簡體',
+    zhTW: '繁中',
+    en: 'EN',
+  },
+  common: {
+    close: '關閉',
+    copy: '複製',
+    paste: '貼上',
+    clear: '清空',
+    history: '歷史記錄',
+    noHistory: '暫無歷史記錄',
+    copied: '已複製到剪貼簿',
+    copyFailed: '複製失敗：',
+    clipboardEmpty: '剪貼簿內容為空',
+    pasteHint: '請按 Ctrl+V 或 Cmd+V 貼上內容',
+    pasteFailed: '無法存取編輯器，請手動貼上內容',
+    cleared: '已清空',
+  },
+  json: {
+    editor: '編輯器',
+    maxSize: '(最大 5MB)',
+    tree: '樹形',
+    placeholder: '請輸入或貼上JSON資料，例如：{"name":"工具箱","version":1.0}',
+    jsonPathPlaceholder: '輸入 JSONPath，例如: $.key.subkey',
+    jsonPathFilter: 'JSONPath 篩選',
+    clearFilter: '清除篩選',
+    copyFilterResult: '複製篩選結果',
+    expandAll: '展開全部',
+    collapseAll: '摺疊全部',
+    format: '格式化',
+    minify: '壓縮',
+    escape: '轉義',
+    unescape: '取消轉義',
+    emptyState: '在左側輸入或貼上JSON資料，右側將即時顯示樹形結構',
+    noMatchedNodes: '未找到符合的節點',
+    noContentToCopy: '沒有可複製的結果',
+    copiedCount: '已複製 {count} 個符合結果',
+    contentOverLimit: '內容已超過 5MB 限制，已自動截斷',
+    pleaseInputJson: '請輸入JSON資料',
+    inputOverLimit: '輸入內容超過 5MB 限制，無法格式化',
+    outputOverLimit: '格式化後的內容超過 5MB 限制，無法顯示',
+    formatSuccess: '格式化成功',
+    jsonError: 'JSON格式錯誤：',
+    minifyOverLimit: '輸入內容超過 5MB 限制，無法壓縮',
+    minifyOutputOverLimit: '壓縮後的內容超過 5MB 限制，無法顯示',
+    minifySuccess: '壓縮成功',
+    escapeOverLimit: '輸入內容超過 5MB 限制，無法轉義',
+    escapeOutputOverLimit: '轉義後的內容超過 5MB 限制，無法顯示',
+    escapeSuccess: '轉義成功',
+    escapeFailed: '轉義失敗：',
+    unescapeOverLimit: '輸入內容超過 5MB 限制，無法取消轉義',
+    unescapeOutputOverLimit: '取消轉義後的內容超過 5MB 限制，無法顯示',
+    unescapeSuccess: '取消轉義成功',
+    unescapeFormatSuccess: '取消轉義並格式化成功',
+    unescapeFailed: '取消轉義失敗：',
+    editorEmpty: '編輯器內容為空，無法複製',
+    pasteOverLimit: '貼上內容已超過 5MB 限制，已自動截斷',
+  },
+  encoder: {
+    input: '輸入',
+    output: '輸出',
+    encode: '編碼',
+    decode: '解碼',
+    base64: 'Base64',
+    url: 'URL',
+    unicode: 'Unicode',
+    zlib: 'Zlib',
+    titleBase64: 'Base64編碼',
+    titleUrl: 'URL編碼',
+    titleUnicode: 'Unicode編碼',
+    titleZlib: 'Zlib 壓縮/解壓',
+    copyOutput: '複製輸出',
+    inputPlaceholder: '請輸入要編碼或解碼的文字',
+    outputPlaceholder: '編碼或解碼結果將顯示在這裡',
+    pleaseInputEncode: '請輸入要編碼的文字',
+    encodeSuccess: '編碼成功',
+    encodeFailed: '編碼失敗：',
+    pleaseInputDecode: '請輸入要解碼的字串',
+    decodeSuccess: '解碼成功',
+    decodeFailed: '解碼失敗：請檢查輸入是否為有效的{type}編碼字串',
+    inputEmptyCopy: '輸入內容為空，無法複製',
+    copiedInput: '已複製輸入到剪貼簿',
+    outputEmptyCopy: '輸出內容為空，無法複製',
+    copiedOutput: '已複製輸出到剪貼簿',
+    manualPaste: '請手動貼上內容',
+  },
+  variable: {
+    placeholder: '請輸入變數名（支援任意格式）',
+    camelCase: '小駝峰 (camelCase)',
+    pascalCase: '大駝峰 (PascalCase)',
+    snakeCase: '底線 (snake_case)',
+    kebabCase: '橫線 (kebab-case)',
+    constantCase: '常數 (CONSTANT_CASE)',
+    copyLabel: '複製{label}',
+    empty: '—',
+    noContentToCopy: '沒有可複製的內容',
+    copiedLabel: '{label}已複製到剪貼簿',
+  },
+  qr: {
+    inputPlaceholder: '請輸入要產生二維碼的內容',
+    generate: '產生二維碼',
+    download: '下載',
+    copyImage: '複製圖片',
+    qrCode: '二維碼',
+    pleaseInput: '請輸入要產生二維碼的內容',
+    generateSuccess: '二維碼產生成功',
+    generateFailed: '產生二維碼失敗：',
+    noQrToDownload: '沒有可下載的二維碼',
+    downloadSuccess: '下載成功',
+    downloadFailed: '下載失敗：',
+    noQrToCopy: '沒有可複製的二維碼',
+    copyImageFailed: '複製失敗，請使用下載功能',
+  },
+  timestamp: {
+    dateToTs: '日期 → ({tz}) 時間戳:',
+    tsToDate: '時間戳 → ({tz}) 日期',
+    currentTs: '目前時間戳:',
+    placeholderTs: '請輸入時間戳',
+    selectDateTime: '選擇日期時間',
+    resetData: '重設資料',
+    resume: '繼續',
+    pause: '暫停',
+    seconds: '秒',
+    milliseconds: '毫秒',
+    nanoseconds: '奈秒',
+    datePlaceholderSeconds: '格式：yyyy-MM-dd HH:mm:ss',
+    datePlaceholderMs: '格式：yyyy-MM-dd HH:mm:ss.SSS',
+    datePlaceholderNs: '格式：yyyy-MM-dd HH:mm:ss.SSSSSSSSS',
+    dataReset: '資料已重設',
+    invalidNs: '請輸入有效的奈秒級時間戳',
+    invalidNumber: '請輸入有效的數字',
+    invalidTs: '無效的時間戳',
+    convertFailed: '轉換失敗：',
+    invalidDateFormat: '無效的時間格式',
+    noContentToCopy: '沒有可複製的內容',
+    copyFailed: '複製失敗',
+  },
+  color: {
+    rgb: 'RGB',
+    hex: '十六進位',
+    hsl: 'HSL',
+    copyRgb: '複製RGB',
+    pasteRgb: '貼上RGB',
+    copyHex: '複製十六進位',
+    pasteHex: '貼上十六進位',
+    copyHsl: '複製HSL',
+    pasteHsl: '貼上HSL',
+    placeholderRgb: '0-255',
+    placeholderHex: 'FFFFFF',
+    placeholderH: '0-360',
+    placeholderSL: '0-100',
+    reset: '重設',
+    random: '隨機顏色',
+    rgbPasted: 'RGB已貼上並解析',
+    rgbOutOfRange: 'RGB值超出範圍（0-255）',
+    hslPasted: 'HSL已貼上並解析',
+    hslOutOfRange: 'HSL值超出範圍（H: 0-360, S/L: 0-100）',
+    rgbCopied: 'RGB已複製到剪貼簿',
+    hexCopied: '十六進位已複製到剪貼簿',
+    hslCopied: 'HSL已複製到剪貼簿',
+    pasteSuccess: '貼上成功',
+    invalidRgb: '剪貼簿內容不是有效的RGB格式',
+    invalidHex: '剪貼簿內容不是有效的十六進位格式',
+    invalidHsl: '剪貼簿內容不是有效的HSL格式',
+    manualPaste: '請手動貼上到輸入框',
+    pasteFailed: '貼上失敗：請手動貼上到輸入框',
+  },
+  comparator: {
+    textCompare: '文字對比',
+    jsonCompare: 'JSON對比',
+    lineMode: '行維度',
+    charMode: '字元維度',
+    ignoreListOrder: '忽略列表順序',
+    compare: '對比',
+    startCompare: '開始對比',
+    textA: '文字 A',
+    textB: '文字 B',
+    maxSize: '(最大 {size})',
+    placeholderA: '請輸入或貼上要對比的內容 A',
+    placeholderB: '請輸入或貼上要對比的內容 B',
+    result: '對比結果',
+    same: '相同:',
+    insert: '插入:',
+    delete: '刪除:',
+    modify: '修改:',
+    fullscreen: '全螢幕展示',
+    exitFullscreen: '結束全螢幕',
+    left: '左側',
+    right: '右側',
+    contentOverLimit: '內容已超過 {size} 限制，已自動截斷',
+    emptyCopy: '{side}內容為空，無法複製',
+    copiedSide: '已複製{side}內容到剪貼簿',
+    pasteOverLimit: '貼上內容已超過 {size} 限制，已自動截斷',
+    pleaseInput: '請輸入要對比的內容',
+    inputOverLimit: '輸入內容超過 {size} 限制，請減小輸入大小',
+    largeArrayHint: '偵測到大型陣列，對比可能需要較長時間，請耐心等候...',
+    compareDone: '對比完成',
+    noResultToCopy: '沒有對比結果可複製',
+    resultCopied: '已複製對比結果到剪貼簿',
+  },
+  dateTimePicker: {
+    prevYear: '上一年',
+    prevMonth: '上一月',
+    nextMonth: '下一月',
+    nextYear: '下一年',
+    clickInputMonthYear: '點擊輸入年月',
+    placeholderMonthYear: 'YYYY-MM',
+    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
+    now: '此刻',
+    selectTime: '選擇時間',
+    confirm: '確定',
+    cancel: '取消',
+  },
+  timestampTz: {
+    'UTC-12:00': '貝克島',
+    'UTC-11:00': '薩摩亞',
+    'UTC-10:00': '夏威夷',
+    'UTC-09:30': '馬克薩斯群島',
+    'UTC-09:00': '阿拉斯加',
+    'UTC-08:00': '洛杉磯',
+    'UTC-07:00': '丹佛',
+    'UTC-06:00': '芝加哥',
+    'UTC-05:00': '紐約',
+    'UTC-04:00': '加拉加斯',
+    'UTC-03:30': '紐芬蘭',
+    'UTC-03:00': '布宜諾斯艾利斯',
+    'UTC-02:00': '大西洋中部',
+    'UTC-01:00': '亞速爾群島',
+    'UTC+00:00': '倫敦',
+    'UTC+01:00': '巴黎',
+    'UTC+02:00': '開羅',
+    'UTC+03:00': '莫斯科',
+    'UTC+03:30': '德黑蘭',
+    'UTC+04:00': '迪拜',
+    'UTC+04:30': '喀布爾',
+    'UTC+05:00': '伊斯蘭堡',
+    'UTC+05:30': '新德里',
+    'UTC+05:45': '加德滿都',
+    'UTC+06:00': '達卡',
+    'UTC+06:30': '仰光',
+    'UTC+07:00': '曼谷',
+    'UTC+08:00': '北京',
+    'UTC+08:45': '尤克拉',
+    'UTC+09:00': '東京',
+    'UTC+09:30': '阿德萊德',
+    'UTC+10:00': '悉尼',
+    'UTC+10:30': '豪勳爵島',
+    'UTC+11:00': '新喀里多尼亞',
+    'UTC+12:00': '奧克蘭',
+    'UTC+12:45': '查塔姆群島',
+    'UTC+13:00': '薩摩亞',
+    'UTC+14:00': '吉里巴斯',
+  },
+}
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,10 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+import AppRoot from './AppRoot.vue'
 import router from './router'
+import { i18n } from './i18n'
 import './style.css'
 // 引入 Font Awesome 6.4
 import '@fortawesome/fontawesome-free/css/all.css'

-createApp(App).use(router).mount('#app')
+createApp(AppRoot).use(router).use(i18n).mount('#app')

--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,85 +1,113 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/Home.vue'
+import { i18n } from '../i18n'
+
+// 路径中的 locale 与 i18n locale 的映射
+export const PATH_LOCALE_TO_I18N = {
+  zh: 'zh-CN',
+  'zh-tw': 'zh-TW',
+  en: 'en',
+}
+
+export const I18N_TO_PATH_LOCALE = {
+  'zh-CN': 'zh',
+  'zh-TW': 'zh-tw',
+  en: 'en',
+}
+
+export const PATH_LOCALES = ['zh', 'zh-tw', 'en']
+
+const localePath = (locale, path = '') => {
+  const base = path.startsWith('/') ? path.slice(1) : path
+  return base ? `/${locale}/${base}` : `/${locale}`
+}

 const routes = [
+  // 无前缀路径重定向到简体中文
+  { path: '/', redirect: '/zh' },
+  { path: '/json-formatter', redirect: '/zh/json-formatter' },
+  { path: '/comparator', redirect: '/zh/comparator' },
+  { path: '/encoder-decoder', redirect: '/zh/encoder-decoder' },
+  { path: '/variable-name', redirect: '/zh/variable-name' },
+  { path: '/qr-code', redirect: '/zh/qr-code' },
+  { path: '/timestamp-converter', redirect: '/zh/timestamp-converter' },
+  { path: '/color-converter', redirect: '/zh/color-converter' },
+  // 带语言前缀的路由（App 作为父级以获取 locale）
  {
-    path: '/',
-    name: 'Home',
-    component: Home,
-    meta: {
-      title: 'RC707的工具箱'
-    }
+    path: '/:locale(zh|zh-tw|en)',
+    component: () => import('../App.vue'),
+    children: [
+      {
+        path: '',
+        name: 'Home',
+        component: Home,
+        meta: { titleKey: 'app.title' },
+      },
+      {
+        path: 'json-formatter',
+        name: 'JsonFormatter',
+        component: () => import('../views/JsonFormatter.vue'),
+        meta: { titleKey: 'app.titleJson' },
+      },
+      {
+        path: 'comparator',
+        name: 'Comparator',
+        component: () => import('../views/Comparator.vue'),
+        meta: { titleKey: 'app.titleComparator' },
+      },
+      {
+        path: 'encoder-decoder',
+        name: 'EncoderDecoder',
+        component: () => import('../views/EncoderDecoder.vue'),
+        meta: { titleKey: 'app.titleEncoderDecoder' },
+      },
+      {
+        path: 'variable-name',
+        name: 'VariableNameConverter',
+        component: () => import('../views/VariableNameConverter.vue'),
+        meta: { titleKey: 'app.titleVariableName' },
+      },
+      {
+        path: 'qr-code',
+        name: 'QRCodeGenerator',
+        component: () => import('../views/QRCodeGenerator.vue'),
+        meta: { titleKey: 'app.titleQrCode' },
+      },
+      {
+        path: 'timestamp-converter',
+        name: 'TimestampConverter',
+        component: () => import('../views/TimestampConverter.vue'),
+        meta: { titleKey: 'app.titleTimestamp' },
+      },
+      {
+        path: 'color-converter',
+        name: 'ColorConverter',
+        component: () => import('../views/ColorConverter.vue'),
+        meta: { titleKey: 'app.titleColor' },
+      },
+    ],
  },
-  {
-    path: '/json-formatter',
-    name: 'JsonFormatter',
-    component: () => import('../views/JsonFormatter.vue'),
-    meta: {
-      title: 'RC707的工具箱-JSON'
-    }
-  },
-  {
-    path: '/comparator',
-    name: 'Comparator',
-    component: () => import('../views/Comparator.vue'),
-    meta: {
-      title: 'RC707的工具箱-对比'
-    }
-  },
-  {
-    path: '/encoder-decoder',
-    name: 'EncoderDecoder',
-    component: () => import('../views/EncoderDecoder.vue'),
-    meta: {
-      title: 'RC707的工具箱-编解码'
-    }
-  },
-  {
-    path: '/variable-name',
-    name: 'VariableNameConverter',
-    component: () => import('../views/VariableNameConverter.vue'),
-    meta: {
-      title: 'RC707的工具箱-变量名'
-    }
-  },
-  {
-    path: '/qr-code',
-    name: 'QRCodeGenerator',
-    component: () => import('../views/QRCodeGenerator.vue'),
-    meta: {
-      title: 'RC707的工具箱-二维码'
-    }
-  },
-  {
-    path: '/timestamp-converter',
-    name: 'TimestampConverter',
-    component: () => import('../views/TimestampConverter.vue'),
-    meta: {
-      title: 'RC707的工具箱-时间戳'
-    }
-  },
-  {
-    path: '/color-converter',
-    name: 'ColorConverter',
-    component: () => import('../views/ColorConverter.vue'),
-    meta: {
-      title: 'RC707的工具箱-颜色'
-    }
-  }
 ]

 const router = createRouter({
  history: createWebHistory(),
-  routes
+  routes,
 })

-// 路由守卫：设置页面标题
 router.beforeEach((to, from, next) => {
-  if (to.meta.title) {
-    document.title = to.meta.title
+  const pathLocale = to.params.locale
+  if (pathLocale && PATH_LOCALE_TO_I18N[pathLocale]) {
+    const i18nLocale = PATH_LOCALE_TO_I18N[pathLocale]
+    if (i18n.global.locale.value !== i18nLocale) {
+      i18n.global.locale.value = i18nLocale
+    }
+  }
+  const key = to.meta.titleKey
+  if (key) {
+    document.title = i18n.global.t(key)
  }
  next()
 })

+export { localePath }
 export default router
-
--- a/src/views/ColorConverter.vue
+++ b/src/views/ColorConverter.vue
@@ -8,7 +8,7 @@
          <i v-else class="fas fa-circle-info"></i>
          <span>{{ toastMessage }}</span>
        </div>
-        <button @click="closeToast" class="toast-close-btn" title="关闭">
+        <button @click="closeToast" class="toast-close-btn" :title="t('common.close')">
          <i class="fas fa-xmark"></i>
        </button>
      </div>
@@ -17,12 +17,12 @@
    <!-- 左侧侧栏（历史记录） -->
    <div class="sidebar" :class="{ 'sidebar-open': sidebarOpen }">
      <div class="sidebar-header">
-        <h3>历史记录</h3>
+        <h3>{{ t('common.history') }}</h3>
        <button @click="toggleSidebar" class="close-btn">×</button>
      </div>
      <div class="sidebar-content">
        <div v-if="historyList.length === 0" class="empty-history">
-          暂无历史记录
+          {{ t('common.noHistory') }}
        </div>
        <div
          v-for="(item, index) in historyList"
@@ -50,12 +50,12 @@
        <!-- RGB输入 -->
        <div class="input-group">
          <div class="input-header">
-            <label class="input-label">RGB</label>
+            <label class="input-label">{{ t('color.rgb') }}</label>
            <div class="copy-paste-buttons">
-              <button @click="copyRgb" class="copy-btn" title="复制RGB">
+              <button @click="copyRgb" class="copy-btn" :title="t('color.copyRgb')">
                <i class="far fa-copy"></i>
              </button>
-              <button @click="pasteRgb" class="paste-btn" title="粘贴RGB">
+              <button @click="pasteRgb" class="paste-btn" :title="t('color.pasteRgb')">
                <i class="far fa-paste"></i>
              </button>
            </div>
@@ -71,7 +71,7 @@
                min="0"
                max="255"
                class="rgb-input"
-                placeholder="0-255"
+                :placeholder="t('color.placeholderRgb')"
              />
            </div>
            <div class="rgb-item">
@@ -84,7 +84,7 @@
                min="0"
                max="255"
                class="rgb-input"
-                placeholder="0-255"
+                :placeholder="t('color.placeholderRgb')"
              />
            </div>
            <div class="rgb-item">
@@ -97,7 +97,7 @@
                min="0"
                max="255"
                class="rgb-input"
-                placeholder="0-255"
+                :placeholder="t('color.placeholderRgb')"
              />
            </div>
          </div>
@@ -106,12 +106,12 @@
        <!-- 十六进制输入 -->
        <div class="input-group">
          <div class="input-header">
-            <label class="input-label">十六进制</label>
+            <label class="input-label">{{ t('color.hex') }}</label>
            <div class="copy-paste-buttons">
-              <button @click="copyHex" class="copy-btn" title="复制十六进制">
+              <button @click="copyHex" class="copy-btn" :title="t('color.copyHex')">
                <i class="far fa-copy"></i>
              </button>
-              <button @click="pasteHex" class="paste-btn" title="粘贴十六进制">
+              <button @click="pasteHex" class="paste-btn" :title="t('color.pasteHex')">
                <i class="far fa-paste"></i>
              </button>
            </div>
@@ -123,7 +123,7 @@
              @input="handleHexInput"
              type="text"
              class="hex-input"
-              placeholder="FFFFFF"
+              :placeholder="t('color.placeholderHex')"
              maxlength="6"
            />
          </div>
@@ -132,12 +132,12 @@
        <!-- HSL输入 -->
        <div class="input-group">
          <div class="input-header">
-            <label class="input-label">HSL</label>
+            <label class="input-label">{{ t('color.hsl') }}</label>
            <div class="copy-paste-buttons">
-              <button @click="copyHsl" class="copy-btn" title="复制HSL">
+              <button @click="copyHsl" class="copy-btn" :title="t('color.copyHsl')">
                <i class="far fa-copy"></i>
              </button>
-              <button @click="pasteHsl" class="paste-btn" title="粘贴HSL">
+              <button @click="pasteHsl" class="paste-btn" :title="t('color.pasteHsl')">
                <i class="far fa-paste"></i>
              </button>
            </div>
@@ -153,7 +153,7 @@
                min="0"
                max="360"
                class="hsl-input"
-                placeholder="0-360"
+                :placeholder="t('color.placeholderH')"
              />
            </div>
            <div class="hsl-item">
@@ -166,7 +166,7 @@
                min="0"
                max="100"
                class="hsl-input"
-                placeholder="0-100"
+                :placeholder="t('color.placeholderSL')"
              />
              <span class="hsl-unit">%</span>
            </div>
@@ -180,7 +180,7 @@
                min="0"
                max="100"
                class="hsl-input"
-                placeholder="0-100"
+                :placeholder="t('color.placeholderSL')"
              />
              <span class="hsl-unit">%</span>
            </div>
@@ -199,8 +199,8 @@

        <!-- 操作按钮 -->
        <div class="action-buttons">
-          <button @click="resetColor" class="action-btn reset-btn">重置</button>
-          <button @click="randomColor" class="action-btn random-btn">随机颜色</button>
+          <button @click="resetColor" class="action-btn reset-btn">{{ t('color.reset') }}</button>
+          <button @click="randomColor" class="action-btn random-btn">{{ t('color.random') }}</button>
        </div>
      </div>
    </div>
@@ -210,6 +210,9 @@

 <script setup>
 import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()

 const rgb = ref({ r: 255, g: 255, b: 255 })
 const hex = ref('FFFFFF')
@@ -407,9 +410,9 @@ function handleRgbPaste(event) {
      // 保存到历史记录
      saveToHistory()
      
-      showToast('RGB已粘贴并解析', 'info', 2000)
+      showToast(t('color.rgbPasted'), 'info', 2000)
    } else {
-      showToast('RGB值超出范围（0-255）', 'error')
+      showToast(t('color.rgbOutOfRange'), 'error')
    }
  }
  // 如果不是RGB格式，允许默认粘贴行为（粘贴单个数字）
@@ -527,9 +530,9 @@ function handleHslPaste(event) {
      // 保存到历史记录
      saveToHistory()
      
-      showToast('HSL已粘贴并解析', 'info', 2000)
+      showToast(t('color.hslPasted'), 'info', 2000)
    } else {
-      showToast('HSL值超出范围（H: 0-360, S/L: 0-100）', 'error')
+      showToast(t('color.hslOutOfRange'), 'error')
    }
  }
  // 如果不是HSL格式，允许默认粘贴行为（粘贴单个数字）
@@ -588,16 +591,16 @@ async function copyRgb() {
  const rgbText = `rgb(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b})`
  try {
    await navigator.clipboard.writeText(rgbText)
-    showToast('RGB已复制到剪贴板', 'info', 2000)
+    showToast(t('color.rgbCopied'), 'info', 2000)
  } catch (err) {
-    showToast('复制失败：' + err.message)
+    showToast(t('common.copyFailed') + err.message)
  }
 }

 // 处理粘贴的文本（通用函数）
 function processPastedText(text, type) {
  if (!text || !text.trim()) {
-    showToast('剪贴板内容为空')
+    showToast(t('common.clipboardEmpty'))
    return false
  }
  
@@ -616,11 +619,11 @@ function processPastedText(text, type) {
      if (r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) {
        rgb.value = { r, g, b }
        handleRgbInput()
-        showToast('粘贴成功', 'info', 2000)
+        showToast(t('color.pasteSuccess'), 'info', 2000)
        return true
      }
    }
-    showToast('剪贴板内容不是有效的RGB格式')
+    showToast(t('color.invalidRgb'))
    return false
  } else if (type === 'hex') {
    // 移除#号并转换为大写
@@ -630,16 +633,16 @@ function processPastedText(text, type) {
    if (/^[0-9A-F]{6}$/.test(text)) {
      hex.value = text
      handleHexInput()
-      showToast('粘贴成功', 'info', 2000)
+      showToast(t('color.pasteSuccess'), 'info', 2000)
      return true
    } else if (/^[0-9A-F]{3}$/.test(text)) {
      // 支持3位十六进制
      hex.value = text.split('').map(c => c + c).join('')
      handleHexInput()
-      showToast('粘贴成功', 'info', 2000)
+      showToast(t('color.pasteSuccess'), 'info', 2000)
      return true
    }
-    showToast('剪贴板内容不是有效的十六进制格式')
+    showToast(t('color.invalidHex'))
    return false
  } else if (type === 'hsl') {
    // 支持格式：hsl(0, 0%, 100%) 或 0, 0%, 100%
@@ -654,11 +657,11 @@ function processPastedText(text, type) {
      if (h >= 0 && h <= 360 && s >= 0 && s <= 100 && l >= 0 && l <= 100) {
        hsl.value = { h, s, l }
        handleHslInput()
-        showToast('粘贴成功', 'info', 2000)
+        showToast(t('color.pasteSuccess'), 'info', 2000)
        return true
      }
    }
-    showToast('剪贴板内容不是有效的HSL格式')
+    showToast(t('color.invalidHsl'))
    return false
  }
  return false
@@ -677,9 +680,9 @@ async function pasteRgb() {
      pasteInputValue.value = ''
      if (pasteInputRef.value) {
        pasteInputRef.value.focus()
-        showToast('请按 Ctrl+V 或 Cmd+V 粘贴内容', 'info', 3000)
+        showToast(t('common.pasteHint'), 'info', 3000)
      } else {
-        showToast('粘贴失败：请手动粘贴到输入框', 'error')
+        showToast(t('color.pasteFailed'), 'error')
      }
    }
  } else {
@@ -688,9 +691,9 @@ async function pasteRgb() {
    pasteInputValue.value = ''
    if (pasteInputRef.value) {
      pasteInputRef.value.focus()
-      showToast('请按 Ctrl+V 或 Cmd+V 粘贴内容', 'info', 3000)
+      showToast(t('common.pasteHint'), 'info', 3000)
    } else {
-      showToast('请手动粘贴到输入框', 'error')
+      showToast(t('color.manualPaste'), 'error')
    }
  }
 }
@@ -700,9 +703,9 @@ async function copyHex() {
  const hexText = `#${hex.value}`
  try {
    await navigator.clipboard.writeText(hexText)
-    showToast('十六进制已复制到剪贴板', 'info', 2000)
+    showToast(t('color.hexCopied'), 'info', 2000)
  } catch (err) {
-    showToast('复制失败：' + err.message)
+    showToast(t('common.copyFailed') + err.message)
  }
 }

@@ -719,9 +722,9 @@ async function pasteHex() {
      pasteInputValue.value = ''
      if (pasteInputRef.value) {
        pasteInputRef.value.focus()
-        showToast('请按 Ctrl+V 或 Cmd+V 粘贴内容', 'info', 3000)
+        showToast(t('common.pasteHint'), 'info', 3000)
      } else {
-        showToast('粘贴失败：请手动粘贴到输入框', 'error')
+        showToast(t('color.pasteFailed'), 'error')
      }
    }
  } else {
@@ -730,9 +733,9 @@ async function pasteHex() {
    pasteInputValue.value = ''
    if (pasteInputRef.value) {
      pasteInputRef.value.focus()
-      showToast('请按 Ctrl+V 或 Cmd+V 粘贴内容', 'info', 3000)
+      showToast(t('common.pasteHint'), 'info', 3000)
    } else {
-      showToast('请手动粘贴到输入框', 'error')
+      showToast(t('color.manualPaste'), 'error')
    }
  }
 }
@@ -742,9 +745,9 @@ async function copyHsl() {
  const hslText = `hsl(${hsl.value.h}, ${hsl.value.s}%, ${hsl.value.l}%)`
  try {
    await navigator.clipboard.writeText(hslText)
-    showToast('HSL已复制到剪贴板', 'info', 2000)
+    showToast(t('color.hslCopied'), 'info', 2000)
  } catch (err) {
-    showToast('复制失败：' + err.message)
+    showToast(t('common.copyFailed') + err.message)
  }
 }

@@ -761,9 +764,9 @@ async function pasteHsl() {
      pasteInputValue.value = ''
      if (pasteInputRef.value) {
        pasteInputRef.value.focus()
-        showToast('请按 Ctrl+V 或 Cmd+V 粘贴内容', 'info', 3000)
+        showToast(t('common.pasteHint'), 'info', 3000)
      } else {
-        showToast('粘贴失败：请手动粘贴到输入框', 'error')
+        showToast(t('color.pasteFailed'), 'error')
      }
    }
  } else {
@@ -772,9 +775,9 @@ async function pasteHsl() {
    pasteInputValue.value = ''
    if (pasteInputRef.value) {
      pasteInputRef.value.focus()
-      showToast('请按 Ctrl+V 或 Cmd+V 粘贴内容', 'info', 3000)
+      showToast(t('common.pasteHint'), 'info', 3000)
    } else {
-      showToast('请手动粘贴到输入框', 'error')
+      showToast(t('color.manualPaste'), 'error')
    }
  }
 }
--- a/src/views/Comparator.vue
+++ b/src/views/Comparator.vue
@@ -8,7 +8,7 @@
          <i v-else class="fas fa-circle-info"></i>
          <span>{{ toastMessage }}</span>
        </div>
-        <button @click="closeToast" class="toast-close-btn" title="关闭">
+        <button @click="closeToast" class="toast-close-btn" :title="t('common.close')">
          <i class="fas fa-xmark"></i>
        </button>
      </div>
@@ -18,12 +18,12 @@
      <!-- 左侧侧栏（历史记录） -->
      <div class="sidebar" :class="{ 'sidebar-open': sidebarOpen }">
        <div class="sidebar-header">
-          <h3>历史记录</h3>
+          <h3>{{ t('common.history') }}</h3>
          <button @click="toggleSidebar" class="close-btn">×</button>
        </div>
        <div class="sidebar-content">
          <div v-if="historyList.length === 0" class="empty-history">
-            暂无历史记录
+            {{ t('common.noHistory') }}
          </div>
          <div
            v-for="(item, index) in historyList"
@@ -48,46 +48,46 @@
            <button
                @click="compareMode = 'text'"
                :class="['mode-btn', { active: compareMode === 'text' }]"
-                title="文本对比"
+                :title="t('comparator.textCompare')"
            >
-              文本对比
+              {{ t('comparator.textCompare') }}
            </button>
            <button
                @click="compareMode = 'json'"
                :class="['mode-btn', { active: compareMode === 'json' }]"
-                title="JSON对比"
+                :title="t('comparator.jsonCompare')"
            >
-              JSON对比
+              {{ t('comparator.jsonCompare') }}
            </button>
          </div>
          <div class="submode-selector" v-if="compareMode === 'text'">
            <button
                @click="textSubMode = 'line'"
                :class="['submode-btn', { active: textSubMode === 'line' }]"
-                title="按行对比"
+                :title="t('comparator.lineMode')"
            >
-              行维度
+              {{ t('comparator.lineMode') }}
            </button>
            <button
                @click="textSubMode = 'char'"
                :class="['submode-btn', { active: textSubMode === 'char' }]"
-                title="按字符对比"
+                :title="t('comparator.charMode')"
            >
-              字符维度
+              {{ t('comparator.charMode') }}
            </button>
          </div>
          <div class="submode-selector" v-if="compareMode === 'json'">
            <label class="switch-label">
              <input type="checkbox" v-model="ignoreListOrder" class="switch-input" />
-              <span class="switch-text">忽略列表顺序</span>
+              <span class="switch-text">{{ t('comparator.ignoreListOrder') }}</span>
            </label>
          </div>
          <div class="toolbar-actions">
-            <button @click="performCompare" class="action-btn primary" title="开始对比">
+            <button @click="performCompare" class="action-btn primary" :title="t('comparator.startCompare')">
              <i class="fas fa-code-compare"></i>
-              <span>对比</span>
+              <span>{{ t('comparator.compare') }}</span>
            </button>
-            <button @click="clearAll" class="action-btn" title="清空">
+            <button @click="clearAll" class="action-btn" :title="t('common.clear')">
              <i class="far fa-trash-can"></i>
            </button>
          </div>
@@ -98,15 +98,15 @@
          <!-- 左侧输入框 -->
          <div class="input-panel" :style="{ width: leftPanelWidth + '%' }">
            <div class="panel-header">
-              <span class="panel-label">文本 A <span class="size-limit">(最大 {{ maxInputLabel }})</span></span>
+              <span class="panel-label">{{ t('comparator.textA') }} <span class="size-limit">{{ t('comparator.maxSize', { size: maxInputLabel }) }}</span></span>
              <div class="panel-actions">
-                <button @click="copyToClipboard('left')" class="icon-btn" title="复制">
+                <button @click="copyToClipboard('left')" class="icon-btn" :title="t('common.copy')">
                  <i class="far fa-copy"></i>
                </button>
-                <button @click="pasteFromClipboard('left')" class="icon-btn" title="粘贴">
+                <button @click="pasteFromClipboard('left')" class="icon-btn" :title="t('common.paste')">
                  <i class="far fa-paste"></i>
                </button>
-                <button @click="clearInput('left')" class="icon-btn" title="清空">
+                <button @click="clearInput('left')" class="icon-btn" :title="t('common.clear')">
                  <i class="far fa-trash-can"></i>
                </button>
              </div>
@@ -124,7 +124,7 @@
                  ref="leftEditorRef"
                  v-model="leftText"
                  @input="updateLeftLineCount"
-                  placeholder="请输入或粘贴要对比的内容 A"
+                  :placeholder="t('comparator.placeholderA')"
                  class="text-editor"
              ></textarea>
            </div>
@@ -139,15 +139,15 @@
          <!-- 右侧输入框 -->
          <div class="input-panel" :style="{ width: rightPanelWidth + '%' }">
            <div class="panel-header">
-              <span class="panel-label">文本 B <span class="size-limit">(最大 {{ maxInputLabel }})</span></span>
+              <span class="panel-label">{{ t('comparator.textB') }} <span class="size-limit">{{ t('comparator.maxSize', { size: maxInputLabel }) }}</span></span>
              <div class="panel-actions">
-                <button @click="copyToClipboard('right')" class="icon-btn" title="复制">
+                <button @click="copyToClipboard('right')" class="icon-btn" :title="t('common.copy')">
                  <i class="far fa-copy"></i>
                </button>
-                <button @click="pasteFromClipboard('right')" class="icon-btn" title="粘贴">
+                <button @click="pasteFromClipboard('right')" class="icon-btn" :title="t('common.paste')">
                  <i class="far fa-paste"></i>
                </button>
-                <button @click="clearInput('right')" class="icon-btn" title="清空">
+                <button @click="clearInput('right')" class="icon-btn" :title="t('common.clear')">
                  <i class="far fa-trash-can"></i>
                </button>
              </div>
@@ -160,7 +160,7 @@
                  ref="rightEditorRef"
                  v-model="rightText"
                  @input="updateRightLineCount"
-                  placeholder="请输入或粘贴要对比的内容 B"
+                  :placeholder="t('comparator.placeholderB')"
                  class="text-editor"
              ></textarea>
            </div>
@@ -170,26 +170,26 @@
        <!-- 对比结果区域 -->
        <div class="result-container" v-if="compareResult">
          <div class="result-header">
-            <span class="result-label">对比结果</span>
+            <span class="result-label">{{ t('comparator.result') }}</span>
            <div class="result-stats">
              <span class="stat-item">
-                <span class="stat-label">相同:</span>
+                <span class="stat-label">{{ t('comparator.same') }}</span>
                <span class="stat-value same">{{ compareResult.stats.same }}</span>
              </span>
              <span class="stat-item">
-                <span class="stat-label">插入:</span>
+                <span class="stat-label">{{ t('comparator.insert') }}</span>
                <span class="stat-value insert">{{ compareResult.stats.insert }}</span>
              </span>
              <span class="stat-item">
-                <span class="stat-label">删除:</span>
+                <span class="stat-label">{{ t('comparator.delete') }}</span>
                <span class="stat-value delete">{{ compareResult.stats.delete }}</span>
              </span>
              <span class="stat-item">
-                <span class="stat-label">修改:</span>
+                <span class="stat-label">{{ t('comparator.modify') }}</span>
                <span class="stat-value modify">{{ compareResult.stats.modify }}</span>
              </span>
            </div>
-            <button @click="resultFullscreen = true" class="icon-btn" title="全屏展示">
+            <button @click="resultFullscreen = true" class="icon-btn" :title="t('comparator.fullscreen')">
              <i class="fas fa-expand"></i>
            </button>
          </div>
@@ -223,26 +223,26 @@
        <div v-if="resultFullscreen" class="result-fullscreen-overlay">
          <div class="result-fullscreen-inner">
            <div class="result-fullscreen-header">
-              <span class="result-label">对比结果</span>
+              <span class="result-label">{{ t('comparator.result') }}</span>
              <div class="result-stats" v-if="compareResult">
                <span class="stat-item">
-                  <span class="stat-label">相同:</span>
+                  <span class="stat-label">{{ t('comparator.same') }}</span>
                  <span class="stat-value same">{{ compareResult.stats.same }}</span>
                </span>
                <span class="stat-item">
-                  <span class="stat-label">插入:</span>
+                  <span class="stat-label">{{ t('comparator.insert') }}</span>
                  <span class="stat-value insert">{{ compareResult.stats.insert }}</span>
                </span>
                <span class="stat-item">
-                  <span class="stat-label">删除:</span>
+                  <span class="stat-label">{{ t('comparator.delete') }}</span>
                  <span class="stat-value delete">{{ compareResult.stats.delete }}</span>
                </span>
                <span class="stat-item">
-                  <span class="stat-label">修改:</span>
+                  <span class="stat-label">{{ t('comparator.modify') }}</span>
                  <span class="stat-value modify">{{ compareResult.stats.modify }}</span>
                </span>
              </div>
-              <button @click="resultFullscreen = false" class="icon-btn" title="退出全屏">
+              <button @click="resultFullscreen = false" class="icon-btn" :title="t('comparator.exitFullscreen')">
                <i class="fas fa-compress"></i>
              </button>
            </div>
@@ -275,6 +275,9 @@

 <script setup>
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()

 // JSON对比模式：最大 2MB（受算法复杂度限制，O(n*m) 动态规划）
 // 文本对比模式：最大 5MB（算法复杂度较低）
@@ -370,7 +373,7 @@ const applyInputLimit = (side) => {
  
  if (getByteLength(ref.value) <= maxBytes) return
  ref.value = truncateToMaxBytes(ref.value, maxBytes)
-  showToast(`内容已超过 ${maxBytesLabel} 限制，已自动截断`, 'info', 3000)
+  showToast(t('comparator.contentOverLimit', { size: maxBytesLabel }), 'info', 3000)
  if (side === 'left') updateLeftLineCount()
  else updateRightLineCount()
 }
@@ -429,14 +432,14 @@ const stopResize = () => {
 const copyToClipboard = async (side) => {
  const text = side === 'left' ? leftText.value : rightText.value
  if (!text.trim()) {
-    showToast(`${side === 'left' ? '左侧' : '右侧'}内容为空，无法复制`)
+    showToast(t('comparator.emptyCopy', { side: side === 'left' ? t('comparator.left') : t('comparator.right') }))
    return
  }
  try {
    await navigator.clipboard.writeText(text)
-    showToast(`已复制${side === 'left' ? '左侧' : '右侧'}内容到剪贴板`, 'info', 2000)
+    showToast(t('comparator.copiedSide', { side: side === 'left' ? t('comparator.left') : t('comparator.right') }), 'info', 2000)
  } catch (e) {
-    showToast('复制失败：' + e.message)
+    showToast(t('common.copyFailed') + e.message)
  }
 }

@@ -451,7 +454,7 @@ const pasteFromClipboard = async (side) => {
        
        if (getByteLength(text) > maxBytes) {
          text = truncateToMaxBytes(text, maxBytes)
-          showToast(`粘贴内容已超过 ${maxBytesLabel} 限制，已自动截断`, 'info', 3000)
+          showToast(t('comparator.pasteOverLimit', { size: maxBytesLabel }), 'info', 3000)
        }
        if (side === 'left') {
          leftText.value = text
@@ -461,13 +464,13 @@ const pasteFromClipboard = async (side) => {
          updateRightLineCount()
        }
      } else {
-        showToast('剪贴板内容为空')
+        showToast(t('common.clipboardEmpty'))
      }
    } catch (e) {
      const editorRef = side === 'left' ? leftEditorRef.value : rightEditorRef.value
      if (editorRef) {
        editorRef.focus()
-        showToast('请按 Ctrl+V 或 Cmd+V 粘贴内容', 'info', 3000)
+        showToast(t('common.pasteHint'), 'info', 3000)
      }
    }
  }
@@ -491,7 +494,7 @@ const clearAll = () => {
  compareResult.value = null
  updateLeftLineCount()
  updateRightLineCount()
-  showToast('已清空', 'info', 2000)
+  showToast(t('common.cleared'), 'info', 2000)
 }

 // 转义HTML
@@ -1751,7 +1754,7 @@ const compareJson = (textA, textB) => {
 // 执行对比
 const performCompare = () => {
  if (!leftText.value.trim() && !rightText.value.trim()) {
-    showToast('请输入要对比的内容')
+    showToast(t('comparator.pleaseInput'))
    return
  }

@@ -1762,7 +1765,7 @@ const performCompare = () => {
  const rightBytes = getByteLength(rightText.value)
  
  if (leftBytes > maxBytes || rightBytes > maxBytes) {
-    showToast(`输入内容超过 ${maxBytesLabel} 限制，请减小输入大小`, 'error', 4000)
+    showToast(t('comparator.inputOverLimit', { size: maxBytesLabel }), 'error', 4000)
    return
  }

@@ -1790,7 +1793,7 @@ const performCompare = () => {
      }
      
      if (checkLargeArray(jsonA) || checkLargeArray(jsonB)) {
-        showToast('检测到大型数组，对比可能需要较长时间，请耐心等待...', 'info', 5000)
+        showToast(t('comparator.largeArrayHint'), 'info', 5000)
      }
    } catch (e) {
      // JSON解析失败会在下面处理
@@ -1810,7 +1813,7 @@ const performCompare = () => {
    }
    // 保存到历史记录
    saveToHistory()
-    showToast('对比完成', 'info', 2000)
+    showToast(t('comparator.compareDone'), 'info', 2000)
  } catch (e) {
    showToast(e.message)
    compareResult.value = null
@@ -1820,7 +1823,7 @@ const performCompare = () => {
 // 复制结果
 const copyResult = async () => {
  if (!compareResult.value) {
-    showToast('没有对比结果可复制')
+    showToast(t('comparator.noResultToCopy'))
    return
  }

@@ -1829,9 +1832,9 @@ const copyResult = async () => {
    const rightContent = compareResult.value.right.map(l => l.content).join('\n')
    const result = `文本A:\n${leftContent}\n\n文本B:\n${rightContent}`
    await navigator.clipboard.writeText(result)
-    showToast('已复制对比结果到剪贴板', 'info', 2000)
+    showToast(t('comparator.resultCopied'), 'info', 2000)
  } catch (e) {
-    showToast('复制失败：' + e.message)
+    showToast(t('common.copyFailed') + e.message)
  }
 }

--- a/src/views/EncoderDecoder.vue
+++ b/src/views/EncoderDecoder.vue
@@ -8,7 +8,7 @@
          <i v-else class="fas fa-circle-info"></i>
          <span>{{ toastMessage }}</span>
        </div>
-        <button @click="closeToast" class="toast-close-btn" title="关闭">
+        <button @click="closeToast" class="toast-close-btn" :title="t('common.close')">
          <i class="fas fa-xmark"></i>
        </button>
      </div>
@@ -18,12 +18,12 @@
      <!-- 左侧侧栏（历史记录） -->
      <div class="sidebar" :class="{ 'sidebar-open': sidebarOpen }">
        <div class="sidebar-header">
-          <h3>历史记录</h3>
+          <h3>{{ t('common.history') }}</h3>
          <button @click="toggleSidebar" class="close-btn">×</button>
        </div>
        <div class="sidebar-content">
          <div v-if="historyList.length === 0" class="empty-history">
-            暂无历史记录
+            {{ t('common.noHistory') }}
          </div>
          <div
            v-for="(item, index) in historyList"
@@ -32,14 +32,8 @@
            @click="loadHistory(item)"
          >
            <div class="history-header">
-              <span class="history-type">{{ item.type === 'encode' ? '编码' : '解码' }}</span>
-              <span class="history-encoding">{{ 
-                item.encodingType === 'base64' ? 'Base64' : 
-                item.encodingType === 'url' ? 'URL' : 
-                item.encodingType === 'unicode' ? 'Unicode' : 
-                item.encodingType === 'zlib' ? 'Zlib' :
-                item.encodingType
-              }}</span>
+              <span class="history-type">{{ item.type === 'encode' ? t('encoder.encode') : t('encoder.decode') }}</span>
+              <span class="history-encoding">{{ encodingTypeLabel(item.encodingType) }}</span>
              <span class="history-time">{{ formatTime(item.time) }}</span>
            </div>
            <div class="history-preview">{{ truncateText(item.input, 50) }}</div>
@@ -53,52 +47,52 @@
        <div class="left-panel" :style="{ width: leftPanelWidth + '%' }">
        <div class="panel-toolbar">
          <div class="view-tabs">
-            <button class="view-tab active">输入</button>
+            <button class="view-tab active">{{ t('encoder.input') }}</button>
          </div>
          <div class="toolbar-actions">
            <div class="encoding-type-selector">
              <button
                @click="encodingType = 'base64'"
                :class="['type-btn', { active: encodingType === 'base64' }]"
-                title="Base64编码"
+                :title="t('encoder.titleBase64')"
              >
-                Base64
+                {{ t('encoder.base64') }}
              </button>
              <button
                @click="encodingType = 'url'"
                :class="['type-btn', { active: encodingType === 'url' }]"
-                title="URL编码"
+                :title="t('encoder.titleUrl')"
              >
-                URL
+                {{ t('encoder.url') }}
              </button>
              <button
                @click="encodingType = 'unicode'"
                :class="['type-btn', { active: encodingType === 'unicode' }]"
-                title="Unicode编码"
+                :title="t('encoder.titleUnicode')"
              >
-                Unicode
+                {{ t('encoder.unicode') }}
              </button>
              <button
                @click="encodingType = 'zlib'"
                :class="['type-btn', { active: encodingType === 'zlib' }]"
-                title="Zlib 压缩/解压"
+                :title="t('encoder.titleZlib')"
              >
-                Zlib
+                {{ t('encoder.zlib') }}
              </button>
            </div>
-            <button @click="copyInputToClipboard" class="toolbar-icon-btn" title="复制">
+            <button @click="copyInputToClipboard" class="toolbar-icon-btn" :title="t('common.copy')">
              <i class="far fa-copy"></i>
            </button>
-            <button @click="pasteFromClipboard" class="toolbar-icon-btn" title="粘贴">
+            <button @click="pasteFromClipboard" class="toolbar-icon-btn" :title="t('common.paste')">
              <i class="far fa-paste"></i>
            </button>
-            <button @click="encode" class="toolbar-icon-btn" title="编码">
+            <button @click="encode" class="toolbar-icon-btn" :title="t('encoder.encode')">
              <i class="fa-solid fa-code"></i>
            </button>
-            <button @click="decode" class="toolbar-icon-btn" title="解码">
+            <button @click="decode" class="toolbar-icon-btn" :title="t('encoder.decode')">
              <svg viewBox="150 -50 1100 1250" xmlns="http://www.w3.org/2000/svg" width="17" height="17"><path d="M285.352637 0.003641h111.956538v114.687184h-111.956538v282.621991a110.682235 110.682235 0 0 1-33.313896 81.282266 110.682235 110.682235 0 0 1-81.282266 33.313896 110.682235 110.682235 0 0 1 81.282266 33.313897 110.682235 110.682235 0 0 1 33.313896 81.282266v282.621991h111.956538v114.687184h-111.956538a188.050574 188.050574 0 0 1-80.007964-40.049493 93.570179 93.570179 0 0 1-34.67922-74.637691v-226.643722a110.682235 110.682235 0 0 0-33.313896-81.282267 110.682235 110.682235 0 0 0-81.282267-33.313896H0v-111.956537h55.978269a110.682235 110.682235 0 0 0 81.282266-33.313897 110.682235 110.682235 0 0 0 33.313896-81.282266V114.690825A113.776969 113.776969 0 0 1 285.261616 0.003641z m794.61835 0a113.776969 113.776969 0 0 1 114.687184 114.687184v226.643722a113.776969 113.776969 0 0 0 114.687185 114.687184H1365.323624v111.956538h-55.978268a113.776969 113.776969 0 0 0-114.687185 114.687184v226.643722a113.776969 113.776969 0 0 1-114.687184 114.687184h-111.956537V909.309175h111.956537V626.687184a113.776969 113.776969 0 0 1 114.687184-114.687184 113.776969 113.776969 0 0 1-114.687184-114.687184V114.690825h-111.956537V0.003641h111.956537zM682.661812 682.665453a54.612945 54.612945 0 0 1 55.978269 55.978269 58.799937 58.799937 0 0 1-16.019797 41.323795 54.612945 54.612945 0 0 1-80.007965 0 58.799937 58.799937 0 0 1-16.019797-41.323795 54.612945 54.612945 0 0 1 55.978269-55.978269z m-226.643721 0a54.612945 54.612945 0 0 1 55.978268 55.978269 58.799937 58.799937 0 0 1-16.019797 41.323795 52.246384 52.246384 0 0 1-40.049493 17.294099 59.164024 59.164024 0 0 1-58.708916-58.708916 52.246384 52.246384 0 0 1 17.294099-40.049493 58.799937 58.799937 0 0 1 41.505839-15.837754z m453.287443 0a58.799937 58.799937 0 0 1 41.323795 16.019797 52.246384 52.246384 0 0 1 17.294099 40.049493 59.164024 59.164024 0 0 1-58.708916 58.708916 52.246384 52.246384 0 0 1-40.049493-17.294099 58.799937 58.799937 0 0 1-16.019797-41.323795 54.612945 54.612945 0 0 1 55.978269-55.978269z" fill="#666666" p-id="26339"></path></svg>
            </button>
-            <button @click="clearAll" class="toolbar-icon-btn" title="清空">
+            <button @click="clearAll" class="toolbar-icon-btn" :title="t('common.clear')">
              <i class="far fa-trash-can"></i>
            </button>
          </div>
@@ -111,7 +105,7 @@
            ref="inputEditorRef"
            v-model="inputText"
            @input="updateInputLineCount"
-            placeholder="请输入要编码或解码的文本"
+            :placeholder="t('encoder.inputPlaceholder')"
            class="text-editor"
          ></textarea>
        </div>
@@ -132,10 +126,10 @@
      <div class="right-panel" :style="{ width: rightPanelWidth + '%' }">
        <div class="panel-toolbar">
          <div class="view-tabs">
-            <button class="view-tab active">输出</button>
+            <button class="view-tab active">{{ t('encoder.output') }}</button>
          </div>
          <div class="toolbar-actions">
-            <button @click="copyOutputToClipboard" class="toolbar-icon-btn" title="复制输出">
+            <button @click="copyOutputToClipboard" class="toolbar-icon-btn" :title="t('encoder.copyOutput')">
              <i class="far fa-copy"></i>
            </button>
          </div>
@@ -148,7 +142,7 @@
            v-model="outputText"
            readonly
            class="text-editor output-editor"
-            placeholder="编码或解码结果将显示在这里"
+            :placeholder="t('encoder.outputPlaceholder')"
          ></textarea>
        </div>
      </div>
@@ -158,7 +152,18 @@
 </template>

 <script setup>
+import { useI18n } from 'vue-i18n'
 import { ref, watch, onMounted, onUnmounted } from 'vue'
+
+const { t } = useI18n()
+
+function encodingTypeLabel(type) {
+  if (type === 'base64') return t('encoder.base64')
+  if (type === 'url') return t('encoder.url')
+  if (type === 'unicode') return t('encoder.unicode')
+  if (type === 'zlib') return t('encoder.zlib')
+  return type
+}
 import { zlibSync, decompressSync } from 'fflate'

 const inputText = ref('')
@@ -339,7 +344,7 @@ const decodeUnicode = (text) => {

 const encode = () => {
  if (!inputText.value.trim()) {
-    showToast('请输入要编码的文本')
+    showToast(t('encoder.pleaseInputEncode'))
    return
  }
  try {
@@ -366,16 +371,16 @@ const encode = () => {
      output: result
    })
    
-    showToast('编码成功', 'info', 2000)
+    showToast(t('encoder.encodeSuccess'), 'info', 2000)
  } catch (e) {
-    showToast('编码失败：' + e.message)
+    showToast(t('encoder.encodeFailed') + e.message)
    outputText.value = ''
  }
 }

 const decode = () => {
  if (!inputText.value.trim()) {
-    showToast('请输入要解码的字符串')
+    showToast(t('encoder.pleaseInputDecode'))
    return
  }
  try {
@@ -402,14 +407,10 @@ const decode = () => {
      output: result
    })
    
-    showToast('解码成功', 'info', 2000)
+    showToast(t('encoder.decodeSuccess'), 'info', 2000)
  } catch (e) {
-    const typeName = encodingType.value === 'base64' ? 'Base64' : 
-                     encodingType.value === 'url' ? 'URL' : 
-                     encodingType.value === 'unicode' ? 'Unicode' : 
-                     encodingType.value === 'zlib' ? 'Zlib' :
-                     encodingType.value
-    showToast(`解码失败：请检查输入是否为有效的${typeName}编码字符串`)
+    const typeName = encodingTypeLabel(encodingType.value)
+    showToast(t('encoder.decodeFailed', { type: typeName }))
    outputText.value = ''
  }
 }
@@ -419,34 +420,34 @@ const clearAll = () => {
  outputText.value = ''
  inputLineCount.value = 1
  outputLineCount.value = 1
-  showToast('已清空', 'info', 2000)
+  showToast(t('common.cleared'), 'info', 2000)
 }

 // 复制输入到剪贴板
 const copyInputToClipboard = async () => {
  if (!inputText.value.trim()) {
-    showToast('输入内容为空，无法复制')
+    showToast(t('encoder.inputEmptyCopy'))
    return
  }
  try {
    await navigator.clipboard.writeText(inputText.value)
-    showToast('已复制输入到剪贴板', 'info', 2000)
+    showToast(t('encoder.copiedInput'), 'info', 2000)
  } catch (e) {
-    showToast('复制失败：' + e.message)
+    showToast(t('common.copyFailed') + e.message)
  }
 }

 // 复制输出到剪贴板
 const copyOutputToClipboard = async () => {
  if (!outputText.value.trim()) {
-    showToast('输出内容为空，无法复制')
+    showToast(t('encoder.outputEmptyCopy'))
    return
  }
  try {
    await navigator.clipboard.writeText(outputText.value)
-    showToast('已复制输出到剪贴板', 'info', 2000)
+    showToast(t('encoder.copiedOutput'), 'info', 2000)
  } catch (e) {
-    showToast('复制失败：' + e.message)
+    showToast(t('common.copyFailed') + e.message)
  }
 }

@@ -459,20 +460,20 @@ const pasteFromClipboard = async () => {
        inputText.value = text
        updateInputLineCount()
      } else {
-        showToast('剪贴板内容为空')
+        showToast(t('common.clipboardEmpty'))
      }
    } catch (e) {
      if (inputEditorRef.value) {
        inputEditorRef.value.focus()
-        showToast('请按 Ctrl+V 或 Cmd+V 粘贴内容', 'info', 3000)
+        showToast(t('common.pasteHint'), 'info', 3000)
      } else {
-        showToast('无法访问编辑器，请手动粘贴内容')
+        showToast(t('encoder.manualPaste'))
      }
    }
  } else {
    if (inputEditorRef.value) {
      inputEditorRef.value.focus()
-      showToast('请按 Ctrl+V 或 Cmd+V 粘贴内容', 'info', 3000)
+      showToast(t('common.pasteHint'), 'info', 3000)
    }
  }
 }
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,7 +2,7 @@
  <div class="home-container">
    <div class="hero-section">
      <h2 class="hero-title">
-        今天是{{ `${new Date().getFullYear()}年${new Date().getMonth() + 1}月${new Date().getDate()}日` }}
+        {{ t('home.heroToday', { date: heroDate }) }}
      </h2>
      <p id="jinrishici-sentence" class="hero-subtitle"></p>
    </div>
@@ -10,7 +10,7 @@
      <router-link
        v-for="tool in tools"
        :key="tool.path"
-        :to="tool.path"
+        :to="localePath(currentPathLocale, tool.path)"
        class="tool-card"
      >
        <h3 class="tool-title">{{ tool.title }}</h3>
@@ -24,52 +24,42 @@
 </template>

 <script setup>
-import {onMounted, ref} from 'vue'
+import { onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { localePath } from '../router'

-const tools = ref([
-  {
-    path: '/json-formatter',
-    title: 'JSON',
-    description: '格式化、验证和美化JSON数据'
-  },
-  {
-    path: '/comparator',
-    title: '对比',
-    description: '文本和JSON对比工具'
-  },
-  {
-    path: '/encoder-decoder',
-    title: '编解码',
-    description: '编码/解码工具'
-  },
-  {
-    path: '/variable-name',
-    title: '变量名',
-    description: '变量名格式转换'
-  },
-  {
-    path: '/qr-code',
-    title: '二维码',
-    description: '生成二维码'
-  },
-  {
-    path: '/timestamp-converter',
-    title: '时间戳',
-    description: '时间戳与时间字符串相互转换'
-  },
-  {
-    path: '/color-converter',
-    title: '颜色',
-    description: '颜色格式转换'
+const { t, locale } = useI18n()
+const route = useRoute()
+
+const currentPathLocale = computed(() => route.params.locale || 'zh')
+
+const heroDate = computed(() => {
+  const d = new Date()
+  const y = d.getFullYear()
+  const m = d.getMonth() + 1
+  const day = d.getDate()
+  if (locale.value === 'en') {
+    return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
  }
+  return `${y}年${m}月${day}日`
+})
+
+const tools = computed(() => [
+  { path: 'json-formatter', title: t('home.toolJson'), description: t('home.toolJsonDesc') },
+  { path: 'comparator', title: t('home.toolComparator'), description: t('home.toolComparatorDesc') },
+  { path: 'encoder-decoder', title: t('home.toolEncoderDecoder'), description: t('home.toolEncoderDecoderDesc') },
+  { path: 'variable-name', title: t('home.toolVariableName'), description: t('home.toolVariableNameDesc') },
+  { path: 'qr-code', title: t('home.toolQrCode'), description: t('home.toolQrCodeDesc') },
+  { path: 'timestamp-converter', title: t('home.toolTimestamp'), description: t('home.toolTimestampDesc') },
+  { path: 'color-converter', title: t('home.toolColor'), description: t('home.toolColorDesc') },
 ])
+
 onMounted(() => {
-  let words_script = document.createElement('script');
-  words_script.charset = "utf-8";
-  words_script.src= "https://sdk.jinrishici.com/v2/browser/jinrishici.js";
-  document.body.appendChild(words_script);
-
-
+  const words_script = document.createElement('script')
+  words_script.charset = 'utf-8'
+  words_script.src = 'https://sdk.jinrishici.com/v2/browser/jinrishici.js'
+  document.body.appendChild(words_script)
 })
 </script>

--- a/src/views/JsonFormatter.vue
+++ b/src/views/JsonFormatter.vue
@@ -8,7 +8,7 @@
          <i v-else class="fas fa-circle-info"></i>
          <span>{{ toastMessage }}</span>
        </div>
-        <button @click="closeToast" class="toast-close-btn" title="关闭">
+        <button @click="closeToast" class="toast-close-btn" :title="t('common.close')">
          <i class="fas fa-xmark"></i>
        </button>
      </div>
@@ -17,12 +17,12 @@
      <!-- 左侧侧栏（历史记录） -->
      <div class="sidebar" :class="{ 'sidebar-open': sidebarOpen }">
        <div class="sidebar-header">
-          <h3>历史记录</h3>
+          <h3>{{ t('common.history') }}</h3>
          <button @click="toggleSidebar" class="close-btn">×</button>
        </div>
        <div class="sidebar-content">
          <div v-if="historyList.length === 0" class="empty-history">
-            暂无历史记录
+            {{ t('common.noHistory') }}
          </div>
          <div
            v-for="(item, index) in historyList"
@@ -42,28 +42,28 @@
        <div class="left-panel" :style="{ width: leftPanelWidth + '%' }">
          <div class="panel-toolbar">
            <div class="view-tabs">
-              <button class="view-tab active">编辑器 <span class="size-limit">(最大 5MB)</span></button>
+              <button class="view-tab active">{{ t('json.editor') }} <span class="size-limit">{{ t('json.maxSize') }}</span></button>
            </div>
            <div class="toolbar-actions">
-              <button @click="copyToClipboard" class="toolbar-icon-btn" title="复制">
+              <button @click="copyToClipboard" class="toolbar-icon-btn" :title="t('common.copy')">
                <i class="far fa-copy"></i>
              </button>
-              <button @click="pasteFromClipboard" class="toolbar-icon-btn" title="粘贴">
+              <button @click="pasteFromClipboard" class="toolbar-icon-btn" :title="t('common.paste')">
                <i class="far fa-paste"></i>
              </button>
-              <button @click="clearAll" class="toolbar-icon-btn" title="清空">
+              <button @click="clearAll" class="toolbar-icon-btn" :title="t('common.clear')">
                <i class="far fa-trash-can"></i>
              </button>
-              <button @click="formatJson" class="toolbar-icon-btn" title="格式化">
+              <button @click="formatJson" class="toolbar-icon-btn" :title="t('json.format')">
                <i class="fas fa-align-left"></i>
              </button>
-              <button @click="minifyJson" class="toolbar-icon-btn" title="压缩">
+              <button @click="minifyJson" class="toolbar-icon-btn" :title="t('json.minify')">
                <i class="fas fa-down-left-and-up-right-to-center"></i>
              </button>
-              <button @click="escapeJson" class="toolbar-icon-btn" title="转义">
+              <button @click="escapeJson" class="toolbar-icon-btn" :title="t('json.escape')">
                <i class="fas fa-code"></i>
              </button>
-              <button @click="unescapeJson" class="toolbar-icon-btn" title="取消转义">
+              <button @click="unescapeJson" class="toolbar-icon-btn" :title="t('json.unescape')">
                <svg viewBox="150 -50 1100 1250" xmlns="http://www.w3.org/2000/svg" width="17" height="17"><path d="M285.352637 0.003641h111.956538v114.687184h-111.956538v282.621991a110.682235 110.682235 0 0 1-33.313896 81.282266 110.682235 110.682235 0 0 1-81.282266 33.313896 110.682235 110.682235 0 0 1 81.282266 33.313897 110.682235 110.682235 0 0 1 33.313896 81.282266v282.621991h111.956538v114.687184h-111.956538a188.050574 188.050574 0 0 1-80.007964-40.049493 93.570179 93.570179 0 0 1-34.67922-74.637691v-226.643722a110.682235 110.682235 0 0 0-33.313896-81.282267 110.682235 110.682235 0 0 0-81.282267-33.313896H0v-111.956537h55.978269a110.682235 110.682235 0 0 0 81.282266-33.313897 110.682235 110.682235 0 0 0 33.313896-81.282266V114.690825A113.776969 113.776969 0 0 1 285.261616 0.003641z m794.61835 0a113.776969 113.776969 0 0 1 114.687184 114.687184v226.643722a113.776969 113.776969 0 0 0 114.687185 114.687184H1365.323624v111.956538h-55.978268a113.776969 113.776969 0 0 0-114.687185 114.687184v226.643722a113.776969 113.776969 0 0 1-114.687184 114.687184h-111.956537V909.309175h111.956537V626.687184a113.776969 113.776969 0 0 1 114.687184-114.687184 113.776969 113.776969 0 0 1-114.687184-114.687184V114.690825h-111.956537V0.003641h111.956537zM682.661812 682.665453a54.612945 54.612945 0 0 1 55.978269 55.978269 58.799937 58.799937 0 0 1-16.019797 41.323795 54.612945 54.612945 0 0 1-80.007965 0 58.799937 58.799937 0 0 1-16.019797-41.323795 54.612945 54.612945 0 0 1 55.978269-55.978269z m-226.643721 0a54.612945 54.612945 0 0 1 55.978268 55.978269 58.799937 58.799937 0 0 1-16.019797 41.323795 52.246384 52.246384 0 0 1-40.049493 17.294099 59.164024 59.164024 0 0 1-58.708916-58.708916 52.246384 52.246384 0 0 1 17.294099-40.049493 58.799937 58.799937 0 0 1 41.505839-15.837754z m453.287443 0a58.799937 58.799937 0 0 1 41.323795 16.019797 52.246384 52.246384 0 0 1 17.294099 40.049493 59.164024 59.164024 0 0 1-58.708916 58.708916 52.246384 52.246384 0 0 1-40.049493-17.294099 58.799937 58.799937 0 0 1-16.019797-41.323795 54.612945 54.612945 0 0 1 55.978269-55.978269z" fill="#666666" p-id="26339"></path></svg>
              </button>
            </div>
@@ -78,7 +78,7 @@
              @paste="handlePaste"
              @input="updateLineCount"
              @focus="adjustTextareaHeight"
-              placeholder='请输入或粘贴JSON数据，例如：{"name":"工具箱","version":1.0}'
+              :placeholder="t('json.placeholder')"
              class="json-editor"
            ></textarea>
          </div>
@@ -99,7 +99,7 @@
        <div class="right-panel" :style="{ width: rightPanelWidth + '%' }">
          <div class="panel-toolbar">
            <div class="view-tabs">
-              <button class="view-tab active">树形</button>
+              <button class="view-tab active">{{ t('json.tree') }}</button>
            </div>
            <div class="toolbar-actions">
              <div class="jsonpath-input-wrapper">
@@ -109,15 +109,15 @@
                  @focus="showJsonPathHistory = true"
                  @blur="handleJsonPathBlur"
                  type="text"
-                  placeholder="输入 JSONPath，例如: $.key.subkey"
+                  :placeholder="t('json.jsonPathPlaceholder')"
                  class="jsonpath-input"
-                  title="JSONPath 筛选"
+                  :title="t('json.jsonPathFilter')"
                />
                <button
                  v-if="jsonPathQuery"
                  @click="clearJsonPath"
                  class="jsonpath-clear-btn"
-                  title="清除筛选"
+                  :title="t('json.clearFilter')"
                >
                  <i class="fas fa-xmark"></i>
                </button>
@@ -140,14 +140,14 @@
                v-if="jsonPathQuery && jsonPathQuery.trim() && matchedNodes.length > 0"
                @click="copyMatchedResults"
                class="toolbar-icon-btn"
-                title="复制筛选结果"
+                :title="t('json.copyFilterResult')"
              >
                <i class="far fa-copy"></i>
              </button>
-              <button @click="expandAll" class="toolbar-icon-btn" title="展开全部">
+              <button @click="expandAll" class="toolbar-icon-btn" :title="t('json.expandAll')">
                <i class="fas fa-chevron-down"></i>
              </button>
-              <button @click="collapseAll" class="toolbar-icon-btn" title="折叠全部">
+              <button @click="collapseAll" class="toolbar-icon-btn" :title="t('json.collapseAll')">
                <i class="fas fa-chevron-up"></i>
              </button>
            </div>
@@ -155,7 +155,7 @@
          <div class="tree-container">
            <div class="tree-content">
              <div v-if="!parsedData" class="empty-state">
-                在左侧输入或粘贴JSON数据，右侧将实时显示树形结构
+                {{ t('json.emptyState') }}
              </div>
              <!-- 有 JSONPath 筛选时，直接显示匹配的节点列表 -->
              <div v-else-if="jsonPathQuery && jsonPathQuery.trim() && matchedNodes.length > 0" class="matched-nodes-list">
@@ -174,7 +174,7 @@
                />
              </div>
              <div v-else-if="jsonPathQuery && jsonPathQuery.trim() && matchedNodes.length === 0" class="empty-state">
-                未找到匹配的节点
+                {{ t('json.noMatchedNodes') }}
              </div>
              <!-- 没有筛选时，显示完整的树形结构 -->
              <JsonTreeNode
@@ -197,8 +197,11 @@

 <script setup>
 import { ref, watch, computed, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import JsonTreeNode from '../components/JsonTreeNode.vue'

+const { t } = useI18n()
+
 // 最大输入限制：5MB（JSON格式化工具的限制）
 // 主要考虑因素：
 // 1. JSON.parse 可以处理更大的 JSON（10-50MB）
@@ -689,7 +692,7 @@ const handleJsonPathBlur = () => {
 // 复制筛选结果
 const copyMatchedResults = async () => {
  if (!matchedNodes.value || matchedNodes.value.length === 0) {
-    showToast('没有可复制的结果', 'error', 2000)
+    showToast(t('json.noContentToCopy'), 'error', 2000)
    return
  }
  
@@ -700,9 +703,9 @@ const copyMatchedResults = async () => {
    
    // 复制到剪贴板
    await navigator.clipboard.writeText(jsonString)
-    showToast(`已复制 ${matchedNodes.value.length} 个匹配结果`, 'info', 2000)
+    showToast(t('json.copiedCount', { count: matchedNodes.value.length }), 'info', 2000)
  } catch (e) {
-    showToast('复制失败：' + e.message, 'error', 3000)
+    showToast(t('common.copyFailed') + e.message, 'error', 3000)
  }
 }

@@ -721,7 +724,7 @@ const truncateToMaxBytes = (str, maxBytes) => {
 const applyInputLimit = () => {
  if (getByteLength(inputJson.value) <= MAX_INPUT_BYTES) return
  inputJson.value = truncateToMaxBytes(inputJson.value, MAX_INPUT_BYTES)
-  showToast('内容已超过 5MB 限制，已自动截断', 'info', 3000)
+  showToast(t('json.contentOverLimit'), 'info', 3000)
  updateLineCount()
 }

@@ -912,13 +915,13 @@ watch(inputJson, () => {
 // 格式化JSON
 const formatJson = () => {
  if (!inputJson.value.trim()) {
-    showToast('请输入JSON数据')
+    showToast(t('json.pleaseInputJson'))
    return
  }
  
  // 检查输入大小
  if (getByteLength(inputJson.value) > MAX_INPUT_BYTES) {
-    showToast(`输入内容超过 5MB 限制，无法格式化`, 'error', 4000)
+    showToast(t('json.inputOverLimit'), 'error', 4000)
    return
  }
  
@@ -928,29 +931,29 @@ const formatJson = () => {
    
    // 检查格式化后的大小
    if (getByteLength(formatted) > MAX_INPUT_BYTES) {
-      showToast('格式化后的内容超过 5MB 限制，无法显示', 'error', 4000)
+      showToast(t('json.outputOverLimit'), 'error', 4000)
      return
    }
    
    inputJson.value = formatted
    updateLineCount()
    resetEditorScroll()
-    showToast('格式化成功', 'info', 2000)
+    showToast(t('json.formatSuccess'), 'info', 2000)
  } catch (e) {
-    showToast('JSON格式错误：' + e.message)
+    showToast(t('json.jsonError') + e.message)
  }
 }

 // 压缩JSON
 const minifyJson = () => {
  if (!inputJson.value.trim()) {
-    showToast('请输入JSON数据')
+    showToast(t('json.pleaseInputJson'))
    return
  }
  
  // 检查输入大小
  if (getByteLength(inputJson.value) > MAX_INPUT_BYTES) {
-    showToast(`输入内容超过 5MB 限制，无法压缩`, 'error', 4000)
+    showToast(t('json.minifyOverLimit'), 'error', 4000)
    return
  }
  
@@ -960,29 +963,29 @@ const minifyJson = () => {
    
    // 检查压缩后的大小（压缩后应该更小，但为了安全还是检查）
    if (getByteLength(minified) > MAX_INPUT_BYTES) {
-      showToast('压缩后的内容超过 5MB 限制，无法显示', 'error', 4000)
+      showToast(t('json.minifyOutputOverLimit'), 'error', 4000)
      return
    }
    
    inputJson.value = minified
    updateLineCount()
    resetEditorScroll()
-    showToast('压缩成功', 'info', 2000)
+    showToast(t('json.minifySuccess'), 'info', 2000)
  } catch (e) {
-    showToast('JSON格式错误：' + e.message)
+    showToast(t('json.jsonError') + e.message)
  }
 }

 // 转义JSON
 const escapeJson = () => {
  if (!inputJson.value.trim()) {
-    showToast('请输入JSON数据')
+    showToast(t('json.pleaseInputJson'))
    return
  }
  
  // 检查输入大小
  if (getByteLength(inputJson.value) > MAX_INPUT_BYTES) {
-    showToast(`输入内容超过 5MB 限制，无法转义`, 'error', 4000)
+    showToast(t('json.escapeOverLimit'), 'error', 4000)
    return
  }
  
@@ -1042,7 +1045,7 @@ const escapeJson = () => {
        const escaped = JSON.stringify(jsonToEscape)
        // 检查转义后的大小
        if (getByteLength(escaped) > MAX_INPUT_BYTES) {
-          showToast('转义后的内容超过 5MB 限制，无法显示', 'error', 4000)
+          showToast(t('json.escapeOutputOverLimit'), 'error', 4000)
          return
        }
        inputJson.value = escaped
@@ -1051,28 +1054,28 @@ const escapeJson = () => {
    
    // 最后检查一次大小（防止前面的分支没有检查）
    if (getByteLength(inputJson.value) > MAX_INPUT_BYTES) {
-      showToast('转义后的内容超过 5MB 限制，无法显示', 'error', 4000)
+      showToast(t('json.escapeOutputOverLimit'), 'error', 4000)
      return
    }
    
    updateLineCount()
    resetEditorScroll()
-    showToast('转义成功', 'info', 2000)
+    showToast(t('json.escapeSuccess'), 'info', 2000)
  } catch (e) {
-    showToast('转义失败：' + e.message)
+    showToast(t('json.escapeFailed') + e.message)
  }
 }

 // 取消转义JSON
 const unescapeJson = () => {
  if (!inputJson.value.trim()) {
-    showToast('请输入JSON数据')
+    showToast(t('json.pleaseInputJson'))
    return
  }
  
  // 检查输入大小
  if (getByteLength(inputJson.value) > MAX_INPUT_BYTES) {
-    showToast(`输入内容超过 5MB 限制，无法取消转义`, 'error', 4000)
+    showToast(t('json.unescapeOverLimit'), 'error', 4000)
    return
  }
  
@@ -1122,25 +1125,25 @@ const unescapeJson = () => {
        const formatted = JSON.stringify(parsed, null, 2)
        // 检查格式化后的大小
        if (getByteLength(formatted) > MAX_INPUT_BYTES) {
-          showToast('取消转义后的内容超过 5MB 限制，无法显示', 'error', 4000)
+          showToast(t('json.unescapeOutputOverLimit'), 'error', 4000)
          return
        }
        inputJson.value = formatted
        updateLineCount()
        resetEditorScroll()
-        showToast('取消转义并格式化成功', 'info', 2000)
+        showToast(t('json.unescapeFormatSuccess'), 'info', 2000)
        return
      } catch (e) {
        // 如果解析失败，说明只是普通字符串，保持原样
        // 检查字符串大小
        if (getByteLength(unescaped) > MAX_INPUT_BYTES) {
-          showToast('取消转义后的内容超过 5MB 限制，无法显示', 'error', 4000)
+          showToast(t('json.unescapeOutputOverLimit'), 'error', 4000)
          return
        }
        inputJson.value = unescaped
        updateLineCount()
        resetEditorScroll()
-        showToast('取消转义成功', 'info', 2000)
+        showToast(t('json.unescapeSuccess'), 'info', 2000)
        return
      }
    }
@@ -1150,42 +1153,42 @@ const unescapeJson = () => {
      const formatted = JSON.stringify(unescaped, null, 2)
      // 检查格式化后的大小
      if (getByteLength(formatted) > MAX_INPUT_BYTES) {
-        showToast('取消转义后的内容超过 5MB 限制，无法显示', 'error', 4000)
+        showToast(t('json.unescapeOutputOverLimit'), 'error', 4000)
        return
      }
      inputJson.value = formatted
      updateLineCount()
      resetEditorScroll()
-      showToast('取消转义并格式化成功', 'info', 2000)
+      showToast(t('json.unescapeFormatSuccess'), 'info', 2000)
    } else {
      // 其他类型（数字、布尔值等），转换为字符串
      const result = String(unescaped)
      // 检查结果大小
      if (getByteLength(result) > MAX_INPUT_BYTES) {
-        showToast('取消转义后的内容超过 5MB 限制，无法显示', 'error', 4000)
+        showToast(t('json.unescapeOutputOverLimit'), 'error', 4000)
        return
      }
      inputJson.value = result
      updateLineCount()
      resetEditorScroll()
-      showToast('取消转义成功', 'info', 2000)
+      showToast(t('json.unescapeSuccess'), 'info', 2000)
    }
  } catch (e) {
-    showToast('取消转义失败：' + e.message)
+    showToast(t('json.unescapeFailed') + e.message)
  }
 }

 // 复制到剪贴板
 const copyToClipboard = async () => {
  if (!inputJson.value.trim()) {
-    showToast('编辑器内容为空，无法复制')
+    showToast(t('json.editorEmpty'))
    return
  }
  try {
    await navigator.clipboard.writeText(inputJson.value)
-    showToast('已复制到剪贴板', 'info', 2000)
+    showToast(t('common.copied'), 'info', 2000)
  } catch (e) {
-    showToast('复制失败：' + e.message)
+    showToast(t('common.copyFailed') + e.message)
  }
 }

@@ -1199,7 +1202,7 @@ const pasteFromClipboard = async () => {
        // 检查大小限制
        if (getByteLength(text) > MAX_INPUT_BYTES) {
          text = truncateToMaxBytes(text, MAX_INPUT_BYTES)
-          showToast('粘贴内容已超过 5MB 限制，已自动截断', 'info', 3000)
+          showToast(t('json.pasteOverLimit'), 'info', 3000)
        }
        inputJson.value = text
        updateLineCount()
@@ -1216,7 +1219,7 @@ const pasteFromClipboard = async () => {
          // 如果不是有效JSON，不保存到历史记录
        }
      } else {
-        showToast('剪贴板内容为空')
+        showToast(t('common.clipboardEmpty'))
      }
      return
    } catch (e) {
@@ -1228,9 +1231,9 @@ const pasteFromClipboard = async () => {
  // 让现有的 handlePaste 方法处理粘贴逻辑
  if (jsonEditorRef.value) {
    jsonEditorRef.value.focus()
-    showToast('请按 Ctrl+V 或 Cmd+V 粘贴内容', 'info', 3000)
+    showToast(t('common.pasteHint'), 'info', 3000)
  } else {
-    showToast('无法访问编辑器，请手动粘贴内容')
+    showToast(t('encoder.manualPaste'))
  }
 }

@@ -1240,7 +1243,7 @@ const clearAll = () => {
  expandedNodes.value.clear()
  lineCount.value = 1
  treeLineCount.value = 1
-  showToast('已清空', 'info', 2000)
+  showToast(t('common.cleared'), 'info', 2000)
 }

 // 处理粘贴事件
@@ -1254,7 +1257,7 @@ const handlePaste = async (event) => {
      event.preventDefault()
      const truncated = truncateToMaxBytes(pastedText, MAX_INPUT_BYTES)
      inputJson.value = truncated
-      showToast('粘贴内容已超过 5MB 限制，已自动截断', 'info', 3000)
+      showToast(t('json.pasteOverLimit'), 'info', 3000)
      updateLineCount()
      return
    }
--- a/src/views/QRCodeGenerator.vue
+++ b/src/views/QRCodeGenerator.vue
@@ -8,7 +8,7 @@
          <i v-else class="fas fa-circle-check"></i>
          <span>{{ toastMessage }}</span>
        </div>
-        <button @click="closeToast" class="toast-close-btn" title="关闭">
+        <button @click="closeToast" class="toast-close-btn" :title="t('common.close')">
          <i class="fas fa-xmark"></i>
        </button>
      </div>
@@ -18,12 +18,12 @@
      <!-- 左侧侧栏（历史记录） -->
      <div class="sidebar" :class="{ 'sidebar-open': sidebarOpen }">
        <div class="sidebar-header">
-          <h3>历史记录</h3>
+          <h3>{{ t('common.history') }}</h3>
          <button @click="toggleSidebar" class="close-btn">×</button>
        </div>
        <div class="sidebar-content">
          <div v-if="historyList.length === 0" class="empty-history">
-            暂无历史记录
+            {{ t('common.noHistory') }}
          </div>
          <div
            v-for="(item, index) in historyList"
@@ -47,30 +47,30 @@
                <textarea
                  v-model="inputText"
                  @keydown.enter.prevent="generateQRCode"
-                  placeholder="请输入要生成二维码的内容"
+                  :placeholder="t('qr.inputPlaceholder')"
                  class="input-textarea"
                  rows="4"
                ></textarea>
              </div>
              <button @click="generateQRCode" class="generate-btn">
                <i class="fas fa-qrcode"></i>
-                生成二维码
+                {{ t('qr.generate') }}
              </button>
            </div>

            <!-- 二维码显示区域 -->
            <div v-if="qrCodeDataUrl" class="qr-display-section">
              <div class="qr-code-wrapper">
-                <img :src="qrCodeDataUrl" alt="二维码" class="qr-code-image" />
+                <img :src="qrCodeDataUrl" :alt="t('qr.qrCode')" class="qr-code-image" />
              </div>
              <div class="qr-actions">
                <button @click="downloadQRCode" class="action-btn">
                  <i class="fas fa-download"></i>
-                  下载
+                  {{ t('qr.download') }}
                </button>
                <button @click="copyQRCodeImage" class="action-btn">
                  <i class="far fa-copy"></i>
-                  复制图片
+                  {{ t('qr.copyImage') }}
                </button>
              </div>
            </div>
@@ -90,8 +90,11 @@

 <script setup>
 import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import QRCode from 'qrcode'

+const { t } = useI18n()
+
 // 输入文本
 const inputText = ref('')
 // 二维码数据URL
@@ -135,7 +138,7 @@ const closeToast = () => {
 // 生成二维码
 const generateQRCode = async () => {
  if (!inputText.value.trim()) {
-    showToast('请输入要生成二维码的内容', 'error')
+    showToast(t('qr.pleaseInput'), 'error')
    return
  }

@@ -155,9 +158,9 @@ const generateQRCode = async () => {
    // 保存到历史记录
    saveToHistory(inputText.value.trim())
    
-    showToast('二维码生成成功', 'success', 2000)
+    showToast(t('qr.generateSuccess'), 'success', 2000)
  } catch (error) {
-    showToast('生成二维码失败：' + error.message, 'error')
+    showToast(t('qr.generateFailed') + error.message, 'error')
    qrCodeDataUrl.value = ''
  }
 }
@@ -165,7 +168,7 @@ const generateQRCode = async () => {
 // 下载二维码
 const downloadQRCode = () => {
  if (!qrCodeDataUrl.value) {
-    showToast('没有可下载的二维码', 'error')
+    showToast(t('qr.noQrToDownload'), 'error')
    return
  }

@@ -174,16 +177,16 @@ const downloadQRCode = () => {
    link.download = `qrcode-${Date.now()}.png`
    link.href = qrCodeDataUrl.value
    link.click()
-    showToast('下载成功', 'success', 2000)
+    showToast(t('qr.downloadSuccess'), 'success', 2000)
  } catch (error) {
-    showToast('下载失败：' + error.message, 'error')
+    showToast(t('qr.downloadFailed') + error.message, 'error')
  }
 }

 // 复制二维码图片
 const copyQRCodeImage = async () => {
  if (!qrCodeDataUrl.value) {
-    showToast('没有可复制的二维码', 'error')
+    showToast(t('qr.noQrToCopy'), 'error')
    return
  }

@@ -199,10 +202,9 @@ const copyQRCodeImage = async () => {
      })
    ])
    
-    showToast('已复制到剪贴板', 'success', 2000)
+    showToast(t('common.copied'), 'success', 2000)
  } catch (error) {
-    // 降级方案：提示用户手动保存
-    showToast('复制失败，请使用下载功能', 'error')
+    showToast(t('qr.copyImageFailed'), 'error')
  }
 }

--- a/src/views/TimestampConverter.vue
+++ b/src/views/TimestampConverter.vue
@@ -25,7 +25,7 @@

        <!-- 日期转换为时间戳 -->
        <div class="conversion-row">
-          <div class="conversion-label">日期 → ({{ timezoneLabel }}) 时间戳:</div>
+          <div class="conversion-label">{{ t('timestamp.dateToTs', { tz: timezoneLabel }) }}</div>
          <div class="conversion-inputs">
            <div class="input-with-calendar">
              <input
@@ -35,7 +35,7 @@
                :placeholder="getDatePlaceholder()"
                class="input-field"
              />
-              <button @click="showDateTimePicker = true" class="calendar-btn" title="选择日期时间">
+              <button @click="showDateTimePicker = true" class="calendar-btn" :title="t('timestamp.selectDateTime')">
                <i class="far fa-calendar"></i>
              </button>
              
@@ -54,7 +54,7 @@
              readonly
              class="input-field readonly"
            />
-            <button @click="copyToClipboard(timestampOutput)" class="copy-btn" title="复制">
+            <button @click="copyToClipboard(timestampOutput)" class="copy-btn" :title="t('common.copy')">
              <i class="far fa-copy"></i>
            </button>
          </div>
@@ -62,13 +62,13 @@

        <!-- 时间戳转换为日期 -->
        <div class="conversion-row">
-          <div class="conversion-label">时间戳 → ({{ timezoneLabel }}) 日期</div>
+          <div class="conversion-label">{{ t('timestamp.tsToDate', { tz: timezoneLabel }) }}</div>
          <div class="conversion-inputs">
            <input
              v-model="timestampInput"
              @input="convertTimestampToDate"
              type="text"
-              placeholder="请输入时间戳"
+              :placeholder="t('timestamp.placeholderTs')"
              class="input-field"
            />
            <span class="arrow">→</span>
@@ -78,7 +78,7 @@
              readonly
              class="input-field readonly"
            />
-            <button @click="copyToClipboard(dateStringOutput)" class="copy-btn" title="复制">
+            <button @click="copyToClipboard(dateStringOutput)" class="copy-btn" :title="t('common.copy')">
              <i class="far fa-copy"></i>
            </button>
          </div>
@@ -86,13 +86,13 @@

        <!-- 当前时间戳显示与控制 -->
        <div class="current-timestamp-row">
-          <div class="conversion-label">当前时间戳:</div>
+          <div class="conversion-label">{{ t('timestamp.currentTs') }}</div>
          <div class="current-timestamp-controls">
            <span class="current-timestamp-value">{{ currentTimestampDisplay }}</span>
-            <button @click="togglePause" class="control-btn-icon" :title="isPaused ? '继续' : '暂停'">
+            <button @click="togglePause" class="control-btn-icon" :title="isPaused ? t('timestamp.resume') : t('timestamp.pause')">
              <i :class="isPaused ? 'fas fa-play' : 'fas fa-pause'"></i>
            </button>
-            <button @click="resetData" class="control-btn-icon" title="重置数据">
+            <button @click="resetData" class="control-btn-icon" :title="t('timestamp.resetData')">
              <i class="fas fa-rotate-right"></i>
            </button>
          </div>
@@ -113,7 +113,7 @@
          <i v-else class="fas fa-circle-check"></i>
          <span>{{ toastMessage }}</span>
        </div>
-        <button @click="closeToast" class="toast-close-btn" title="关闭">
+        <button @click="closeToast" class="toast-close-btn" :title="t('common.close')">
          <i class="fas fa-xmark"></i>
        </button>
      </div>
@@ -123,56 +123,33 @@

 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import DateTimePicker from '@/components/DateTimePicker.vue'

+const { t, tm } = useI18n()
+
 // 精度选项
-const precisionOptions = [
-  { value: 'seconds', label: '秒' },
-  { value: 'milliseconds', label: '毫秒' },
-  { value: 'nanoseconds', label: '纳秒' }
+const precisionOptions = computed(() => [
+  { value: 'seconds', label: t('timestamp.seconds') },
+  { value: 'milliseconds', label: t('timestamp.milliseconds') },
+  { value: 'nanoseconds', label: t('timestamp.nanoseconds') },
+])
+
+const TIMEZONE_VALUES = [
+  'UTC-12:00', 'UTC-11:00', 'UTC-10:00', 'UTC-09:30', 'UTC-09:00', 'UTC-08:00', 'UTC-07:00', 'UTC-06:00',
+  'UTC-05:00', 'UTC-04:00', 'UTC-03:30', 'UTC-03:00', 'UTC-02:00', 'UTC-01:00', 'UTC+00:00', 'UTC+01:00',
+  'UTC+02:00', 'UTC+03:00', 'UTC+03:30', 'UTC+04:00', 'UTC+04:30', 'UTC+05:00', 'UTC+05:30', 'UTC+05:45',
+  'UTC+06:00', 'UTC+06:30', 'UTC+07:00', 'UTC+08:00', 'UTC+08:45', 'UTC+09:00', 'UTC+09:30', 'UTC+10:00',
+  'UTC+10:30', 'UTC+11:00', 'UTC+12:00', 'UTC+12:45', 'UTC+13:00', 'UTC+14:00',
 ]

-// 所有时区选项
-const timezoneOptions = [
-  { value: 'UTC-12:00', label: 'UTC-12:00 | 贝克岛' },
-  { value: 'UTC-11:00', label: 'UTC-11:00 | 萨摩亚' },
-  { value: 'UTC-10:00', label: 'UTC-10:00 | 夏威夷' },
-  { value: 'UTC-09:30', label: 'UTC-09:30 | 马克萨斯群岛' },
-  { value: 'UTC-09:00', label: 'UTC-09:00 | 阿拉斯加' },
-  { value: 'UTC-08:00', label: 'UTC-08:00 | 洛杉矶' },
-  { value: 'UTC-07:00', label: 'UTC-07:00 | 丹佛' },
-  { value: 'UTC-06:00', label: 'UTC-06:00 | 芝加哥' },
-  { value: 'UTC-05:00', label: 'UTC-05:00 | 纽约' },
-  { value: 'UTC-04:00', label: 'UTC-04:00 | 加拉加斯' },
-  { value: 'UTC-03:30', label: 'UTC-03:30 | 纽芬兰' },
-  { value: 'UTC-03:00', label: 'UTC-03:00 | 布宜诺斯艾利斯' },
-  { value: 'UTC-02:00', label: 'UTC-02:00 | 大西洋中部' },
-  { value: 'UTC-01:00', label: 'UTC-01:00 | 亚速尔群岛' },
-  { value: 'UTC+00:00', label: 'UTC+00:00 | 伦敦' },
-  { value: 'UTC+01:00', label: 'UTC+01:00 | 巴黎' },
-  { value: 'UTC+02:00', label: 'UTC+02:00 | 开罗' },
-  { value: 'UTC+03:00', label: 'UTC+03:00 | 莫斯科' },
-  { value: 'UTC+03:30', label: 'UTC+03:30 | 德黑兰' },
-  { value: 'UTC+04:00', label: 'UTC+04:00 | 迪拜' },
-  { value: 'UTC+04:30', label: 'UTC+04:30 | 喀布尔' },
-  { value: 'UTC+05:00', label: 'UTC+05:00 | 伊斯兰堡' },
-  { value: 'UTC+05:30', label: 'UTC+05:30 | 新德里' },
-  { value: 'UTC+05:45', label: 'UTC+05:45 | 加德满都' },
-  { value: 'UTC+06:00', label: 'UTC+06:00 | 达卡' },
-  { value: 'UTC+06:30', label: 'UTC+06:30 | 仰光' },
-  { value: 'UTC+07:00', label: 'UTC+07:00 | 曼谷' },
-  { value: 'UTC+08:00', label: 'UTC+08:00 | 北京' },
-  { value: 'UTC+08:45', label: 'UTC+08:45 | 尤克拉' },
-  { value: 'UTC+09:00', label: 'UTC+09:00 | 东京' },
-  { value: 'UTC+09:30', label: 'UTC+09:30 | 阿德莱德' },
-  { value: 'UTC+10:00', label: 'UTC+10:00 | 悉尼' },
-  { value: 'UTC+10:30', label: 'UTC+10:30 | 豪勋爵岛' },
-  { value: 'UTC+11:00', label: 'UTC+11:00 | 新喀里多尼亚' },
-  { value: 'UTC+12:00', label: 'UTC+12:00 | 奥克兰' },
-  { value: 'UTC+12:45', label: 'UTC+12:45 | 查塔姆群岛' },
-  { value: 'UTC+13:00', label: 'UTC+13:00 | 萨摩亚' },
-  { value: 'UTC+14:00', label: 'UTC+14:00 | 基里巴斯' }
-]
+const timezoneOptions = computed(() => {
+  const tzNames = tm('timestampTz') || {}
+  return TIMEZONE_VALUES.map(value => ({
+    value,
+    label: `${value} | ${tzNames[value] || value}`,
+  }))
+})

 // 当前时间相关
 const currentTime = ref(new Date())
@@ -182,8 +159,8 @@ const isPaused = ref(false)
 // 时区相关
 const timezone = ref('UTC+08:00')
 const timezoneLabel = computed(() => {
-  const tz = timezoneOptions.find(opt => opt.value === timezone.value)
-  return tz ? tz.label.split('|')[1].trim() : '北京'
+  const tz = timezoneOptions.value.find(opt => opt.value === timezone.value)
+  return tz ? tz.label.split('|')[1].trim() : ''
 })

 // 时间戳转时间
@@ -234,13 +211,9 @@ const currentTimestampDisplay = computed(() => {

 // 获取日期输入框的placeholder
 const getDatePlaceholder = () => {
-  if (timestampType.value === 'seconds') {
-    return '格式：yyyy-MM-dd HH:mm:ss'
-  } else if (timestampType.value === 'milliseconds') {
-    return '格式：yyyy-MM-dd HH:mm:ss.SSS'
-  } else {
-    return '格式：yyyy-MM-dd HH:mm:ss.SSSSSSSSS'
-  }
+  if (timestampType.value === 'seconds') return t('timestamp.datePlaceholderSeconds')
+  if (timestampType.value === 'milliseconds') return t('timestamp.datePlaceholderMs')
+  return t('timestamp.datePlaceholderNs')
 }

 // 更新时间
@@ -265,7 +238,7 @@ const resetData = () => {
  dateStringInput.value = ''
  timestampOutput.value = ''
  currentTime.value = new Date()
-  showToast('数据已重置', 'success')
+  showToast(t('timestamp.dataReset'), 'success')
 }

 // 时间戳转时间字符串
@@ -296,7 +269,7 @@ const convertTimestampToDate = () => {
        nanoseconds = Number(timestampNs % BigInt(1000000))
      } catch (error) {
        dateStringOutput.value = ''
-        showToast('请输入有效的纳秒级时间戳', 'error')
+        showToast(t('timestamp.invalidNs'), 'error')
        return
      }
    } else {
@@ -304,7 +277,7 @@ const convertTimestampToDate = () => {
      
      if (isNaN(timestamp)) {
        dateStringOutput.value = ''
-        showToast('请输入有效的数字', 'error')
+        showToast(t('timestamp.invalidNumber'), 'error')
        return
      }

@@ -325,7 +298,7 @@ const convertTimestampToDate = () => {
    
    if (isNaN(date.getTime())) {
      dateStringOutput.value = ''
-      showToast('无效的时间戳', 'error')
+      showToast(t('timestamp.invalidTs'), 'error')
      return
    }

@@ -348,7 +321,7 @@ const convertTimestampToDate = () => {
    }
  } catch (error) {
    dateStringOutput.value = ''
-    showToast('转换失败：' + error.message, 'error')
+    showToast(t('timestamp.convertFailed') + error.message, 'error')
  }
 }

@@ -393,7 +366,7 @@ const convertDateToTimestamp = () => {

    if (isNaN(date.getTime())) {
      timestampOutput.value = ''
-      showToast('无效的时间格式', 'error')
+      showToast(t('timestamp.invalidDateFormat'), 'error')
      return
    }

@@ -408,7 +381,7 @@ const convertDateToTimestamp = () => {
    }
  } catch (error) {
    timestampOutput.value = ''
-    showToast('转换失败：' + error.message, 'error')
+    showToast(t('timestamp.convertFailed') + error.message, 'error')
  }
 }

@@ -421,13 +394,13 @@ const handleDateTimeConfirm = (value) => {
 // 复制到剪贴板
 const copyToClipboard = async (text) => {
  if (!text) {
-    showToast('没有可复制的内容', 'error')
+    showToast(t('timestamp.noContentToCopy'), 'error')
    return
  }

  try {
    await navigator.clipboard.writeText(text)
-    showToast('已复制到剪贴板', 'success')
+    showToast(t('common.copied'), 'success')
  } catch (error) {
    // 降级方案
    const textArea = document.createElement('textarea')
@@ -438,9 +411,9 @@ const copyToClipboard = async (text) => {
    textArea.select()
    try {
      document.execCommand('copy')
-      showToast('已复制到剪贴板', 'success')
+      showToast(t('common.copied'), 'success')
    } catch (err) {
-      showToast('复制失败', 'error')
+      showToast(t('timestamp.copyFailed'), 'error')
    }
    document.body.removeChild(textArea)
  }
--- a/src/views/VariableNameConverter.vue
+++ b/src/views/VariableNameConverter.vue
@@ -8,7 +8,7 @@
          <i v-else class="fas fa-circle-check"></i>
          <span>{{ toastMessage }}</span>
        </div>
-        <button @click="closeToast" class="toast-close-btn" title="关闭">
+        <button @click="closeToast" class="toast-close-btn" :title="t('common.close')">
          <i class="fas fa-xmark"></i>
        </button>
      </div>
@@ -23,10 +23,10 @@
              v-model="inputText"
              @input="convertVariableName"
              type="text"
-              placeholder="请输入变量名（支持任意格式）"
+              :placeholder="t('variable.placeholder')"
              class="input-field"
            />
-            <button @click="clearInput" class="clear-btn" title="清空">
+            <button @click="clearInput" class="clear-btn" :title="t('common.clear')">
              <i class="fas fa-xmark"></i>
            </button>
          </div>
@@ -36,7 +36,7 @@
        <div class="output-section">
          <div class="output-row">
            <div
-              v-for="format in formats.slice(0, 3)"
+              v-for="format in formatList.slice(0, 3)"
              :key="format.key"
              class="output-item"
            >
@@ -45,19 +45,19 @@
                <button
                  @click="copyToClipboard(format.value, format.label)"
                  class="copy-btn"
-                  :title="`复制${format.label}`"
+                  :title="t('variable.copyLabel', { label: format.label })"
                >
                  <i class="far fa-copy"></i>
                </button>
              </div>
              <div class="output-value" :class="{ empty: !format.value }">
-                {{ format.value || '—' }}
+                {{ format.value || t('variable.empty') }}
              </div>
            </div>
          </div>
          <div class="output-row">
            <div
-              v-for="format in formats.slice(3)"
+              v-for="format in formatList.slice(3)"
              :key="format.key"
              class="output-item"
            >
@@ -66,13 +66,13 @@
                <button
                  @click="copyToClipboard(format.value, format.label)"
                  class="copy-btn"
-                  :title="`复制${format.label}`"
+                  :title="t('variable.copyLabel', { label: format.label })"
                >
                  <i class="far fa-copy"></i>
                </button>
              </div>
              <div class="output-value" :class="{ empty: !format.value }">
-                {{ format.value || '—' }}
+                {{ format.value || t('variable.empty') }}
              </div>
            </div>
          </div>
@@ -84,20 +84,38 @@

 <script setup>
 import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()

 const inputText = ref('')
 const toastMessage = ref('')
 const toastType = ref('success')
 let toastTimer = null

-// 变量名格式定义
-const formats = ref([
-  { key: 'camelCase', label: '小驼峰 (camelCase)', value: '' },
-  { key: 'PascalCase', label: '大驼峰 (PascalCase)', value: '' },
-  { key: 'snake_case', label: '下划线 (snake_case)', value: '' },
-  { key: 'kebab-case', label: '横线 (kebab-case)', value: '' },
-  { key: 'CONSTANT_CASE', label: '常量 (CONSTANT_CASE)', value: '' }
-])
+const formatKeys = [
+  { key: 'camelCase', labelKey: 'variable.camelCase' },
+  { key: 'PascalCase', labelKey: 'variable.pascalCase' },
+  { key: 'snake_case', labelKey: 'variable.snakeCase' },
+  { key: 'kebab-case', labelKey: 'variable.kebabCase' },
+  { key: 'CONSTANT_CASE', labelKey: 'variable.constantCase' },
+]
+
+const formatValues = ref({
+  camelCase: '',
+  PascalCase: '',
+  snake_case: '',
+  'kebab-case': '',
+  CONSTANT_CASE: '',
+})
+
+const formatList = computed(() =>
+  formatKeys.map(({ key, labelKey }) => ({
+    key,
+    label: t(labelKey),
+    value: formatValues.value[key],
+  }))
+)

 // 显示提示
 const showToast = (message, type = 'success', duration = 3000) => {
@@ -214,31 +232,23 @@ const convertVariableName = () => {
  const words = parseToWords(inputText.value)

  if (words.length === 0) {
-    formats.value.forEach(format => {
-      format.value = ''
-    })
+    formatValues.value = {
+      camelCase: '',
+      PascalCase: '',
+      snake_case: '',
+      'kebab-case': '',
+      CONSTANT_CASE: '',
+    }
    return
  }

-  formats.value.forEach(format => {
-    switch (format.key) {
-      case 'camelCase':
-        format.value = toCamelCase(words)
-        break
-      case 'PascalCase':
-        format.value = toPascalCase(words)
-        break
-      case 'snake_case':
-        format.value = toSnakeCase(words)
-        break
-      case 'kebab-case':
-        format.value = toKebabCase(words)
-        break
-      case 'CONSTANT_CASE':
-        format.value = toConstantCase(words)
-        break
-    }
-  })
+  formatValues.value = {
+    camelCase: toCamelCase(words),
+    PascalCase: toPascalCase(words),
+    snake_case: toSnakeCase(words),
+    'kebab-case': toKebabCase(words),
+    CONSTANT_CASE: toConstantCase(words),
+  }
 }

 // 清空输入
@@ -249,16 +259,16 @@ const clearInput = () => {

 // 复制到剪贴板
 const copyToClipboard = async (text, label) => {
-  if (!text || text === '—') {
-    showToast('没有可复制的内容', 'error')
+  if (!text || text === t('variable.empty')) {
+    showToast(t('variable.noContentToCopy'), 'error')
    return
  }

  try {
    await navigator.clipboard.writeText(text)
-    showToast(`${label}已复制到剪贴板`, 'success', 2000)
+    showToast(t('variable.copiedLabel', { label }), 'success', 2000)
  } catch (error) {
-    showToast('复制失败：' + error.message, 'error')
+    showToast(t('common.copyFailed') + error.message, 'error')
  }
 }
 </script>