From 960657a251b1f19fa81447b9140257eb9a8506be Mon Sep 17 00:00:00 2001
From: root <root@fair-code-1.localdomain>
Date: Fri, 24 Jul 2026 08:59:52 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20i18n=20=E8=83=BD?=
 =?UTF-8?q?=E5=8A=9B=EF=BC=88=E7=8B=AC=E7=AB=8B=20vue-i18n=20=E5=AE=9E?=
 =?UTF-8?q?=E4=BE=8B=20+=20useLocale=20+=20=E4=B8=AD=E8=8B=B1=20locale?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 src/i18n/（独立实例，中文同步、英文懒加载）+ src/composables/useLocale.js
- 抽取所有硬编码中文为 locale 文案（zh-CN/en）
- 组件改用 useLocale 直读自身 i18n 实例（嵌入时不走 useI18n 注入）
- App.vue 接 :locale prop，watch 同步父项目语言（嵌入 mainPage 时桥接）
- 42 项测试全通过，构建正常
---
 package-lock.json                 | 68 ++++++++++++++++++++++++++-
 package.json                      |  3 +-
 src/App.vue                       | 25 ++++++++--
 src/components/DropZone.vue       | 12 +++--
 src/components/EventDetail.vue    | 50 ++++++++++----------
 src/components/EventList.vue      | 10 ++--
 src/components/HeaderBar.vue      | 12 +++--
 src/components/MonthPreview.vue   | 18 +++----
 src/components/OccurrenceGrid.vue |  4 +-
 src/components/WeekPreview.vue    | 20 ++++----
 src/composables/useLocale.js      | 14 ++++++
 src/i18n/index.js                 | 46 ++++++++++++++++++
 src/i18n/locales/en.js            | 78 +++++++++++++++++++++++++++++++
 src/i18n/locales/zh-CN.js         | 78 +++++++++++++++++++++++++++++++
 src/main.js                       |  3 +-
 15 files changed, 378 insertions(+), 63 deletions(-)
 create mode 100644 src/composables/useLocale.js
 create mode 100644 src/i18n/index.js
 create mode 100644 src/i18n/locales/en.js
 create mode 100644 src/i18n/locales/zh-CN.js

diff --git a/package-lock.json b/package-lock.json
index 20ac029..64582a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "ical.js": "^2.1.0",
-        "vue": "^3.5.0"
+        "vue": "^3.5.0",
+        "vue-i18n": "^9.13.1"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.0",
@@ -505,6 +506,47 @@
         "node": ">=18"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.14.4",
+      "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.14.4.tgz",
+      "integrity": "sha512-vtZCt7NqWhKEtHa3SD/322DlgP5uR9MqWxnE0y8Q0tjDs9H5Lxhss+b5wv8rmuXRoHKLESNgw9d+EN9ybBbj9g==",
+      "dependencies": {
+        "@intlify/message-compiler": "9.14.4",
+        "@intlify/shared": "9.14.4"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.14.4",
+      "resolved": "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-9.14.4.tgz",
+      "integrity": "sha512-vcyCLiVRN628U38c3PbahrhbbXrckrM9zpy0KZVlDk2Z0OnGwv8uQNNXP3twwGtfLsCf4gu3ci6FMIZnPaqZsw==",
+      "dependencies": {
+        "@intlify/shared": "9.14.4",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.14.4",
+      "resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-9.14.4.tgz",
+      "integrity": "sha512-P9zv6i1WvMc9qDBWvIgKkymjY2ptIiQ065PjDv7z7fDqH3J/HBRBN5IoiR46r/ujRcU7hCuSIZWvCAFCyuOYZA==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
@@ -1018,6 +1060,11 @@
         "@vue/shared": "3.5.39"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.39",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.39.tgz",
@@ -2708,6 +2755,25 @@
         }
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "9.14.4",
+      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-9.14.4.tgz",
+      "integrity": "sha512-B934C8yUyWLT0EMud3DySrwSUJI7ZNiWYsEEz2gknTthqKiG4dzWE/WSa8AzCuSQzwBEv4HtG1jZDhgzPfWSKQ==",
+      "dependencies": {
+        "@intlify/core-base": "9.14.4",
+        "@intlify/shared": "9.14.4",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/why-is-node-running": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
diff --git a/package.json b/package.json
index a4fd11c..fb56508 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "ical.js": "^2.1.0",
-    "vue": "^3.5.0"
+    "vue": "^3.5.0",
+    "vue-i18n": "^9.13.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.0",
diff --git a/src/App.vue b/src/App.vue
index e9f7e04..c1bdd32 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,8 @@
 <script setup>
+import { watch } from 'vue'
 import { useCalendar } from './composables/useCalendar.js'
+import { useLocale } from './composables/useLocale.js'
+import { loadLocaleAsync } from './i18n/index.js'
 import DropZone from './components/DropZone.vue'
 import HeaderBar from './components/HeaderBar.vue'
 import EventList from './components/EventList.vue'
@@ -7,27 +10,41 @@ import EventDetail from './components/EventDetail.vue'
 import MonthPreview from './components/MonthPreview.vue'
 import WeekPreview from './components/WeekPreview.vue'
 
+const props = defineProps({
+  locale: { type: String, default: 'zh-CN' },
+})
+
 const { isLoaded, state, setViewMode } = useCalendar()
+const { t } = useLocale()
+
+// 跟随父项目语言开关切换本子项目 i18n 实例的 locale
+watch(
+  () => props.locale,
+  (val) => {
+    if (val) loadLocaleAsync(val)
+  },
+  { immediate: true }
+)
 </script>
 
 <template>
   <div class="ttf-app">
     <header class="ttf-header">
       <div class="ttf-header-left">
-        <h1>ICS 日程整理器</h1>
+        <h1>{{ t('app.title') }}</h1>
         <div v-if="isLoaded" class="ttf-view-switcher">
           <button
             :class="{ active: state.viewMode === 'edit' }"
             @click="setViewMode('edit')"
-          >编辑</button>
+          >{{ t('view.edit') }}</button>
           <button
             :class="{ active: state.viewMode === 'month' }"
             @click="setViewMode('month')"
-          >月预览</button>
+          >{{ t('view.month') }}</button>
           <button
             :class="{ active: state.viewMode === 'week' }"
             @click="setViewMode('week')"
-          >周预览</button>
+          >{{ t('view.week') }}</button>
         </div>
       </div>
       <HeaderBar />
diff --git a/src/components/DropZone.vue b/src/components/DropZone.vue
index bea4f6d..0ba76ef 100644
--- a/src/components/DropZone.vue
+++ b/src/components/DropZone.vue
@@ -1,8 +1,10 @@
 <script setup>
 import { ref } from 'vue'
 import { useCalendar } from '../composables/useCalendar.js'
+import { useLocale } from '../composables/useLocale.js'
 
 const { loadFile } = useCalendar()
+const { t } = useLocale()
 const dragOver = ref(false)
 const error = ref('')
 
@@ -12,11 +14,11 @@ function onDrop(e) {
   const file = e.dataTransfer.files[0]
   if (!file) return
   if (!file.name.toLowerCase().endsWith('.ics')) {
-    error.value = '请选择 .ics 文件'
+    error.value = t('dropzone.requireIcs')
     return
   }
   loadFile(file).catch((err) => {
-    error.value = '解析失败：' + (err.message || err)
+    error.value = t('dropzone.parseError') + (err.message || err)
   })
 }
 
@@ -25,7 +27,7 @@ function onPick(e) {
   const file = e.target.files[0]
   if (!file) return
   loadFile(file).catch((err) => {
-    error.value = '解析失败：' + (err.message || err)
+    error.value = t('dropzone.parseError') + (err.message || err)
   })
 }
 </script>
@@ -39,9 +41,9 @@ function onPick(e) {
     @drop.prevent="onDrop"
   >
     <div class="dropzone-content">
-      <p class="hint">拖入 .ics 文件，或</p>
+      <p class="hint">{{ t('dropzone.hint') }}</p>
       <label class="pick-btn">
-        点击选择文件
+        {{ t('dropzone.pick') }}
         <input type="file" accept=".ics" @change="onPick" hidden />
       </label>
       <p v-if="error" class="error">{{ error }}</p>
diff --git a/src/components/EventDetail.vue b/src/components/EventDetail.vue
index 99930e0..7104a83 100644
--- a/src/components/EventDetail.vue
+++ b/src/components/EventDetail.vue
@@ -1,11 +1,13 @@
 <script setup>
 import { ref, watch, computed } from 'vue'
 import { useCalendar } from '../composables/useCalendar.js'
+import { useLocale } from '../composables/useLocale.js'
 import { DOW, DOW_EN, bydayFromDate } from '../lib/weekday.js'
 import { toDate } from '../lib/date.js'
 import OccurrenceGrid from './OccurrenceGrid.vue'
 
 const { selectedEvent, updateEvent, deleteEvent, splitEvent, toggleOccurrence } = useCalendar()
+const { t } = useLocale()
 
 // 本地表单状态, 选择切换时同步
 const form = ref({})
@@ -70,7 +72,7 @@ watch(form, () => {
 function onDelete() {
   const ev = selectedEvent.value
   if (!ev) return
-  if (confirm(`确定删除"${ev.summary}"？`)) {
+  if (confirm(t('eventDetail.confirmDelete', { name: ev.summary }))) {
     deleteEvent(ev.uid)
   }
 }
@@ -79,11 +81,11 @@ function onSplit() {
   const ev = selectedEvent.value
   if (!ev || !ev.rrule) return
   if (!splitDate.value) {
-    alert('请选择拆分日期')
+    alert(t('eventDetail.requireSplitDate'))
     return
   }
   if (splitDate.value <= ev.dtstartDate || splitDate.value > ev.rrule.untilDate) {
-    alert('拆分日期必须在开始日期和结束日期之间')
+    alert(t('eventDetail.splitDateInvalid'))
     return
   }
   splitEvent(ev.uid, splitDate.value)
@@ -99,61 +101,61 @@ function onToggleOcc(date) {
 </script>
 
 <template>
-  <div v-if="!selectedEvent" class="empty">从左侧选择一个日程进行编辑</div>
+  <div v-if="!selectedEvent" class="empty">{{ t('eventDetail.empty') }}</div>
   <div v-else class="detail">
     <!-- 基本信息 -->
-    <div class="section-title">基本信息</div>
+    <div class="section-title">{{ t('eventDetail.basicTitle') }}</div>
     <div class="form-group">
-      <label>标题 (SUMMARY)</label>
+      <label>{{ t('eventDetail.summary') }}</label>
       <input type="text" v-model="form.summary" />
     </div>
     <div class="form-row">
       <div class="form-group">
-        <label>开始时间</label>
+        <label>{{ t('eventDetail.startTime') }}</label>
         <input type="time" v-model="form.dtstart_time" />
       </div>
       <div class="form-group">
-        <label>结束时间</label>
+        <label>{{ t('eventDetail.endTime') }}</label>
         <input type="time" v-model="form.dtend_time" />
       </div>
     </div>
     <div class="form-group">
-      <label>地点 (LOCATION)</label>
+      <label>{{ t('eventDetail.location') }}</label>
       <input type="text" v-model="form.location" />
     </div>
     <div class="form-group">
-      <label>描述 (DESCRIPTION)</label>
+      <label>{{ t('eventDetail.description') }}</label>
       <textarea v-model="form.description"></textarea>
     </div>
 
     <!-- 重复规则 (RRULE) -->
-    <div class="section-title">重复规则 (RRULE)</div>
+    <div class="section-title">{{ t('eventDetail.rruleTitle') }}</div>
     <div class="form-group">
       <label>
-        <input type="checkbox" v-model="form.is_recurring" /> 启用重复
+        <input type="checkbox" v-model="form.is_recurring" /> {{ t('eventDetail.enableRecur') }}
       </label>
     </div>
     <div v-if="form.is_recurring">
       <div class="form-row">
         <div class="form-group">
-          <label>频率</label>
+          <label>{{ t('eventDetail.freq') }}</label>
           <select v-model="form.freq">
-            <option value="WEEKLY">每周 (WEEKLY)</option>
-            <option value="DAILY">每天 (DAILY)</option>
+            <option value="WEEKLY">{{ t('eventDetail.freqWeekly') }}</option>
+            <option value="DAILY">{{ t('eventDetail.freqDaily') }}</option>
           </select>
         </div>
         <div class="form-group">
-          <label>间隔 (INTERVAL)</label>
+          <label>{{ t('eventDetail.interval') }}</label>
           <input type="number" v-model.number="form.interval" min="1" style="width: 80px" />
         </div>
       </div>
       <div class="form-row">
         <div class="form-group">
-          <label>重复到 (UNTIL)</label>
+          <label>{{ t('eventDetail.until') }}</label>
           <input type="date" v-model="form.until_date" />
         </div>
         <div class="form-group" v-if="form.freq === 'WEEKLY'">
-          <label>星期 (BYDAY, 由开始日期自动确定)</label>
+          <label>{{ t('eventDetail.byday') }}</label>
           <select v-model="form.byday" disabled>
             <option v-for="(d, i) in DOW_EN" :key="d" :value="d">
               {{ DOW[i] }}
@@ -164,7 +166,7 @@ function onToggleOcc(date) {
     </div>
 
     <!-- occurrence / 排除日期网格 -->
-    <div v-if="form.is_recurring" class="section-title">occurrence / 排除日期</div>
+    <div v-if="form.is_recurring" class="section-title">{{ t('eventDetail.occTitle') }}</div>
     <OccurrenceGrid
       v-if="form.is_recurring && selectedEvent.rrule"
       :event="selectedEvent"
@@ -178,17 +180,17 @@ function onToggleOcc(date) {
         class="btn btn-secondary"
         @click="showSplit = !showSplit"
       >
-        拆分此日程
+        {{ t('eventDetail.split') }}
       </button>
-      <button class="btn btn-danger" @click="onDelete">删除此日程</button>
+      <button class="btn btn-danger" @click="onDelete">{{ t('eventDetail.delete') }}</button>
     </div>
 
     <!-- 拆分面板 -->
     <div v-if="showSplit && selectedEvent.rrule" class="split-panel">
-      <p>从指定日期起，把此重复事件拆成前后两段。</p>
+      <p>{{ t('eventDetail.splitDesc') }}</p>
       <input type="date" v-model="splitDate" />
-      <button class="btn btn-primary" @click="onSplit">确认拆分</button>
-      <button class="btn btn-secondary" @click="showSplit = false">取消</button>
+      <button class="btn btn-primary" @click="onSplit">{{ t('eventDetail.splitConfirm') }}</button>
+      <button class="btn btn-secondary" @click="showSplit = false">{{ t('eventDetail.cancel') }}</button>
     </div>
   </div>
 </template>
diff --git a/src/components/EventList.vue b/src/components/EventList.vue
index 38cf710..ff52fed 100644
--- a/src/components/EventList.vue
+++ b/src/components/EventList.vue
@@ -1,9 +1,11 @@
 <script setup>
 import { useCalendar } from '../composables/useCalendar.js'
+import { useLocale } from '../composables/useLocale.js'
 import { DOW } from '../lib/weekday.js'
 import { toDate } from '../lib/date.js'
 
 const { state, stats, addEvent, selectEvent } = useCalendar()
+const { t } = useLocale()
 
 function dowFor(ev) {
   return DOW[toDate(ev.dtstartDate).getDay()]
@@ -13,9 +15,9 @@ function dowFor(ev) {
 <template>
   <div class="event-list">
     <div class="stat">
-      共 {{ stats.total }} 个日程（{{ stats.recurring }} 重复 / {{ stats.single }} 单次）
+      {{ t('eventList.stat', { total: stats.total, recurring: stats.recurring, single: stats.single }) }}
     </div>
-    <button class="add-btn" @click="addEvent">新增日程</button>
+    <button class="add-btn" @click="addEvent">{{ t('eventList.add') }}</button>
     <div class="list">
       <div
         v-for="ev in state.events"
@@ -25,9 +27,9 @@ function dowFor(ev) {
         @click="selectEvent(ev.uid)"
       >
         <div class="title">
-          {{ ev.summary || '(无标题)' }}
+          {{ ev.summary || t('eventList.untitled') }}
           <span class="badge" :class="ev.rrule ? 'badge-recur' : 'badge-single'">
-            {{ ev.rrule ? '重复' : '单次' }}
+            {{ ev.rrule ? t('eventList.recurring') : t('eventList.single') }}
           </span>
         </div>
         <div class="meta">
diff --git a/src/components/HeaderBar.vue b/src/components/HeaderBar.vue
index 9b66f53..a6ff7a4 100644
--- a/src/components/HeaderBar.vue
+++ b/src/components/HeaderBar.vue
@@ -1,14 +1,16 @@
 <script setup>
 import { useCalendar } from '../composables/useCalendar.js'
+import { useLocale } from '../composables/useLocale.js'
 import { ref } from 'vue'
 
 const { state, organize, serialize, loadFile } = useCalendar()
+const { t } = useLocale()
 const fileInput = ref(null)
 
 function onOrganize() {
   const stats = organize()
   if (stats && stats.series === 0) {
-    alert('未发现可合并的重复模式')
+    alert(t('header.noPattern'))
   }
 }
 
@@ -19,7 +21,7 @@ function onImport() {
 function onFilePicked(e) {
   const file = e.target.files[0]
   if (!file) return
-  loadFile(file).catch((err) => alert('解析失败：' + (err.message || err)))
+  loadFile(file).catch((err) => alert(t('header.parseError') + (err.message || err)))
   e.target.value = ''
 }
 
@@ -40,11 +42,11 @@ function onDownload() {
 <template>
   <div class="header-actions">
     <button class="btn btn-primary" @click="onOrganize" :disabled="state.events.length === 0">
-      整理去重
+      {{ t('header.organize') }}
     </button>
-    <button class="btn btn-secondary" @click="onImport">导入文件</button>
+    <button class="btn btn-secondary" @click="onImport">{{ t('header.import') }}</button>
     <button class="btn btn-success" @click="onDownload" :disabled="state.events.length === 0">
-      下载 ICS
+      {{ t('header.download') }}
     </button>
     <input ref="fileInput" type="file" accept=".ics" @change="onFilePicked" hidden />
   </div>
diff --git a/src/components/MonthPreview.vue b/src/components/MonthPreview.vue
index 8ce800b..35d9a69 100644
--- a/src/components/MonthPreview.vue
+++ b/src/components/MonthPreview.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { useCalendar } from '../composables/useCalendar.js'
+import { useLocale } from '../composables/useLocale.js'
 import { expandOccurrences } from '../lib/recur.js'
 import { eventColor } from '../lib/colors.js'
 import {
@@ -9,6 +10,7 @@ import {
 import { DOW } from '../lib/weekday.js'
 
 const { state, prevMonth, nextMonth, goToToday } = useCalendar()
+const { t } = useLocale()
 
 // 表头: 周一~周日
 const headers = DOW.slice(1).concat(DOW[0])
@@ -19,7 +21,7 @@ const hoverEvent = ref(null)
 // 当前预览月的年月标签
 const monthLabel = computed(function () {
   const parts = parseISODate(startOfMonth(state.previewDate))
-  return parts.year + ' 年 ' + parts.month + ' 月'
+  return t('monthPreview.monthFmt', { y: parts.year, m: parts.month })
 })
 
 // 构建月历网格 (6 行 x 7 列, 从当月首日所在周的周一开始)
@@ -77,10 +79,10 @@ function hideTooltip() {
 <template>
   <div class="month-preview">
     <div class="preview-toolbar">
-      <button class="nav-btn" @click="prevMonth">上个月</button>
+      <button class="nav-btn" @click="prevMonth">{{ t('monthPreview.prev') }}</button>
       <span class="month-label">{{ monthLabel }}</span>
-      <button class="nav-btn" @click="nextMonth">下个月</button>
-      <button class="nav-btn today-btn" @click="goToToday">回到今日</button>
+      <button class="nav-btn" @click="nextMonth">{{ t('monthPreview.next') }}</button>
+      <button class="nav-btn today-btn" @click="goToToday">{{ t('monthPreview.today') }}</button>
     </div>
     <div class="month-grid">
       <div v-for="h in headers" :key="h" class="grid-header">{{ h }}</div>
@@ -103,16 +105,16 @@ function hideTooltip() {
             @mouseenter="showTooltip(occ.event)"
             @mouseleave="hideTooltip"
           >
-            {{ occ.event.summary || '(无标题)' }}
+            {{ occ.event.summary || t('monthPreview.untitled') }}
           </div>
         </div>
       </div>
     </div>
     <!-- 自定义 tooltip -->
     <div v-if="hoverEvent" class="event-tooltip" @mouseenter="showTooltip(hoverEvent)" @mouseleave="hideTooltip">
-      <div class="tooltip-title">{{ hoverEvent.summary || '(无标题)' }}</div>
-      <div class="tooltip-row">时间: {{ hoverEvent.dtstartTime }} - {{ hoverEvent.dtendTime }}</div>
-      <div v-if="hoverEvent.location" class="tooltip-row">地点: {{ hoverEvent.location }}</div>
+      <div class="tooltip-title">{{ hoverEvent.summary || t('monthPreview.untitled') }}</div>
+      <div class="tooltip-row">{{ t('monthPreview.tooltipTime', { start: hoverEvent.dtstartTime, end: hoverEvent.dtendTime }) }}</div>
+      <div v-if="hoverEvent.location" class="tooltip-row">{{ t('monthPreview.tooltipLocation', { location: hoverEvent.location }) }}</div>
       <div v-if="hoverEvent.description" class="tooltip-desc">{{ hoverEvent.description }}</div>
     </div>
   </div>
diff --git a/src/components/OccurrenceGrid.vue b/src/components/OccurrenceGrid.vue
index 5a3a2d9..dabdb1b 100644
--- a/src/components/OccurrenceGrid.vue
+++ b/src/components/OccurrenceGrid.vue
@@ -3,11 +3,13 @@ import { computed } from 'vue'
 import { DOW } from '../lib/weekday.js'
 import { toDate } from '../lib/date.js'
 import { expandOccurrences } from '../lib/recur.js'
+import { useLocale } from '../composables/useLocale.js'
 
 const props = defineProps({
   event: { type: Object, required: true },
 })
 const emit = defineEmits(['toggle'])
+const { t } = useLocale()
 
 const occurrences = computed(() => expandOccurrences(props.event))
 
@@ -19,7 +21,7 @@ function dowFor(dateStr) {
 <template>
   <div>
     <p class="hint">
-      点击日期切换"排除/包含"状态。排除的日期（红色删除线）会写入 EXDATE。
+      {{ t('eventDetail.occHint') }}
     </p>
     <div class="occ-grid">
       <div
diff --git a/src/components/WeekPreview.vue b/src/components/WeekPreview.vue
index e557f9e..b17ee85 100644
--- a/src/components/WeekPreview.vue
+++ b/src/components/WeekPreview.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref, watch } from 'vue'
 import { useCalendar } from '../composables/useCalendar.js'
+import { useLocale } from '../composables/useLocale.js'
 import { expandOccurrences } from '../lib/recur.js'
 import { eventColor } from '../lib/colors.js'
 import {
@@ -9,6 +10,7 @@ import {
 import { DOW } from '../lib/weekday.js'
 
 const { state, prevWeek, nextWeek, goToToday } = useCalendar()
+const { t } = useLocale()
 
 const HOUR_HEIGHT = 48 // 每小时像素高度
 const headers = DOW.slice(1).concat(DOW[0]) // 周一..周日
@@ -159,10 +161,10 @@ function eventStyle(occ) {
 }
 
 function tooltip(ev) {
-  const parts = [ev.summary || '(无标题)']
+  const parts = [ev.summary || t('weekPreview.untitled')]
   parts.push(ev.dtstartTime + ' - ' + ev.dtendTime)
-  if (ev.location) parts.push('地点: ' + ev.location)
-  if (ev.description) parts.push('描述: ' + ev.description)
+  if (ev.location) parts.push(t('weekPreview.tooltipLocation', { location: ev.location }))
+  if (ev.description) parts.push(t('weekPreview.tooltipDesc', { description: ev.description }))
   return parts.join('\n')
 }
 </script>
@@ -170,14 +172,14 @@ function tooltip(ev) {
 <template>
   <div class="week-preview">
     <div class="preview-toolbar">
-      <button class="nav-btn" @click="prevWeek">上一周</button>
+      <button class="nav-btn" @click="prevWeek">{{ t('weekPreview.prev') }}</button>
       <span class="week-label">{{ weekLabel }}</span>
-      <button class="nav-btn" @click="nextWeek">下一周</button>
-      <button class="nav-btn today-btn" @click="goToToday">回到今日</button>
+      <button class="nav-btn" @click="nextWeek">{{ t('weekPreview.next') }}</button>
+      <button class="nav-btn today-btn" @click="goToToday">{{ t('weekPreview.today') }}</button>
       <button class="nav-btn collapse-btn" @click="toggleCollapse">
-        {{ offHoursCollapsed ? '展开夜间' : '折叠夜间' }}
+        {{ offHoursCollapsed ? t('weekPreview.expandNight') : t('weekPreview.collapseNight') }}
       </button>
-      <span v-if="!hasEvents" class="empty-hint">本周无日程</span>
+      <span v-if="!hasEvents" class="empty-hint">{{ t('weekPreview.noEvents') }}</span>
     </div>
     <div class="week-grid-wrapper">
       <div class="week-grid">
@@ -215,7 +217,7 @@ function tooltip(ev) {
               :style="eventStyle(occ)"
               :title="tooltip(occ.event)"
             >
-              <div class="event-title">{{ occ.event.summary || '(无标题)' }}</div>
+              <div class="event-title">{{ occ.event.summary || t('weekPreview.untitled') }}</div>
               <div class="event-time">{{ occ.event.dtstartTime }} - {{ occ.event.dtendTime }}</div>
             </div>
           </div>
diff --git a/src/composables/useLocale.js b/src/composables/useLocale.js
new file mode 100644
index 0000000..58b43c3
--- /dev/null
+++ b/src/composables/useLocale.js
@@ -0,0 +1,14 @@
+import { computed } from 'vue'
+import i18n from '../i18n/index.js'
+
+// ★ 子项目自有的语言辅助 composable。
+// 关键：直接读模块级 i18n 实例的 global composer，而非 useI18n() 注入。
+// 原因：useI18n({ useScope: 'global' }) 解析的是「当前运行 app 已安装的全局 i18n」，
+// 嵌入 mainPage 时那是父项目的实例（不含本子项目文案）-> 文案回退成 key。
+// 改为直接引用本子项目实例的 .global，无论是否 app.use() 都拿到本子项目的 t。
+export function useLocale() {
+  const { t, locale } = i18n.global
+  const isZh = computed(() => locale.value === 'zh-CN')
+  const pick = (obj) => (isZh.value ? obj.zh : obj.en)
+  return { t, locale, isZh, pick }
+}
diff --git a/src/i18n/index.js b/src/i18n/index.js
new file mode 100644
index 0000000..590970c
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,46 @@
+import { createI18n } from 'vue-i18n'
+import zhCN from './locales/zh-CN.js'
+
+// ★ timeTableFix 独立 i18n 实例。中文同步注入（默认语言）；英文动态 import() 懒加载。
+// 嵌入 mainPage 时，父项目把当前语言经 :locale prop 传入 App.vue，watch 同步到本实例，
+// 从而跟随父项目语言开关切换（不共享父的 messages，仅同步 locale 值，文案来自本子项目自有 locale）。
+// 注：组件内不用 useI18n() 注入（会解析到宿主实例），改用 ./composables/useLocale.js 直接读本实例。
+const i18n = createI18n({
+  legacy: false,
+  locale: 'zh-CN',
+  fallbackLocale: 'zh-CN',
+  messages: {
+    'zh-CN': zhCN
+  }
+})
+
+const loadedLocales = new Set(['zh-CN'])
+
+/**
+ * 懒加载并切换到目标语言。首次切换某语言时动态 import 其语言包并 mergeLocaleMessage。
+ * @param {string} locale
+ */
+export async function loadLocaleAsync(locale) {
+  if (i18n.global.locale.value === locale) return
+  if (loadedLocales.has(locale)) {
+    i18n.global.locale.value = locale
+    document.documentElement.setAttribute('lang', locale)
+    return
+  }
+
+  let messages
+  if (locale === 'en') {
+    messages = (await import('./locales/en.js')).default
+  } else {
+    i18n.global.locale.value = 'zh-CN'
+    document.documentElement.setAttribute('lang', 'zh-CN')
+    return
+  }
+
+  i18n.global.mergeLocaleMessage(locale, messages)
+  loadedLocales.add(locale)
+  i18n.global.locale.value = locale
+  document.documentElement.setAttribute('lang', locale)
+}
+
+export default i18n
diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js
new file mode 100644
index 0000000..d3348b4
--- /dev/null
+++ b/src/i18n/locales/en.js
@@ -0,0 +1,78 @@
+// 英文语言包 -- 通过动态 import() 加载，被打成独立 chunk。
+export default {
+  app: {
+    title: 'ICS Calendar Organizer'
+  },
+  view: {
+    edit: 'Edit',
+    month: 'Month',
+    week: 'Week'
+  },
+  header: {
+    organize: 'Organize & Dedupe',
+    import: 'Import File',
+    download: 'Download ICS',
+    noPattern: 'No recurring patterns found to merge',
+    parseError: 'Parse failed: '
+  },
+  dropzone: {
+    hint: 'Drop an .ics file, or',
+    pick: 'Click to select a file',
+    requireIcs: 'Please select an .ics file',
+    parseError: 'Parse failed: '
+  },
+  eventList: {
+    stat: '{total} events ({recurring} recurring / {single} single)',
+    add: 'Add Event',
+    untitled: '(Untitled)',
+    recurring: 'Recurring',
+    single: 'Single'
+  },
+  eventDetail: {
+    empty: 'Select an event from the left to edit',
+    basicTitle: 'Basic Info',
+    summary: 'Title (SUMMARY)',
+    startTime: 'Start Time',
+    endTime: 'End Time',
+    location: 'Location (LOCATION)',
+    description: 'Description (DESCRIPTION)',
+    rruleTitle: 'Recurrence Rule (RRULE)',
+    enableRecur: 'Enable recurrence',
+    freq: 'Frequency',
+    freqWeekly: 'Weekly (WEEKLY)',
+    freqDaily: 'Daily (DAILY)',
+    interval: 'Interval (INTERVAL)',
+    until: 'Until (UNTIL)',
+    byday: 'Weekday (BYDAY, auto from start date)',
+    occTitle: 'occurrence / excluded dates',
+    occHint: 'Click a date to toggle "exclude/include". Excluded dates (red strikethrough) are written to EXDATE.',
+    split: 'Split this event',
+    delete: 'Delete this event',
+    splitDesc: 'Split this recurring event into two segments from the specified date.',
+    splitConfirm: 'Confirm Split',
+    cancel: 'Cancel',
+    confirmDelete: 'Delete "{name}"?',
+    requireSplitDate: 'Please select a split date',
+    splitDateInvalid: 'Split date must be between the start and end dates'
+  },
+  monthPreview: {
+    prev: 'Prev Month',
+    next: 'Next Month',
+    today: 'Today',
+    untitled: '(Untitled)',
+    monthFmt: '{y}/{m}',
+    tooltipTime: 'Time: {start} - {end}',
+    tooltipLocation: 'Location: {location}'
+  },
+  weekPreview: {
+    prev: 'Prev Week',
+    next: 'Next Week',
+    today: 'Today',
+    expandNight: 'Show Night',
+    collapseNight: 'Hide Night',
+    noEvents: 'No events this week',
+    untitled: '(Untitled)',
+    tooltipLocation: 'Location: {location}',
+    tooltipDesc: 'Description: {description}'
+  }
+}
diff --git a/src/i18n/locales/zh-CN.js b/src/i18n/locales/zh-CN.js
new file mode 100644
index 0000000..40b1872
--- /dev/null
+++ b/src/i18n/locales/zh-CN.js
@@ -0,0 +1,78 @@
+// 中文语言包（默认语言，同步注入主 chunk）
+export default {
+  app: {
+    title: 'ICS 日程整理器'
+  },
+  view: {
+    edit: '编辑',
+    month: '月预览',
+    week: '周预览'
+  },
+  header: {
+    organize: '整理去重',
+    import: '导入文件',
+    download: '下载 ICS',
+    noPattern: '未发现可合并的重复模式',
+    parseError: '解析失败：'
+  },
+  dropzone: {
+    hint: '拖入 .ics 文件，或',
+    pick: '点击选择文件',
+    requireIcs: '请选择 .ics 文件',
+    parseError: '解析失败：'
+  },
+  eventList: {
+    stat: '共 {total} 个日程（{recurring} 重复 / {single} 单次）',
+    add: '新增日程',
+    untitled: '(无标题)',
+    recurring: '重复',
+    single: '单次'
+  },
+  eventDetail: {
+    empty: '从左侧选择一个日程进行编辑',
+    basicTitle: '基本信息',
+    summary: '标题 (SUMMARY)',
+    startTime: '开始时间',
+    endTime: '结束时间',
+    location: '地点 (LOCATION)',
+    description: '描述 (DESCRIPTION)',
+    rruleTitle: '重复规则 (RRULE)',
+    enableRecur: '启用重复',
+    freq: '频率',
+    freqWeekly: '每周 (WEEKLY)',
+    freqDaily: '每天 (DAILY)',
+    interval: '间隔 (INTERVAL)',
+    until: '重复到 (UNTIL)',
+    byday: '星期 (BYDAY, 由开始日期自动确定)',
+    occTitle: 'occurrence / 排除日期',
+    occHint: '点击日期切换"排除/包含"状态。排除的日期（红色删除线）会写入 EXDATE。',
+    split: '拆分此日程',
+    delete: '删除此日程',
+    splitDesc: '从指定日期起，把此重复事件拆成前后两段。',
+    splitConfirm: '确认拆分',
+    cancel: '取消',
+    confirmDelete: '确定删除"{name}"？',
+    requireSplitDate: '请选择拆分日期',
+    splitDateInvalid: '拆分日期必须在开始日期和结束日期之间'
+  },
+  monthPreview: {
+    prev: '上个月',
+    next: '下个月',
+    today: '回到今日',
+    untitled: '(无标题)',
+    monthFmt: '{y} 年 {m} 月',
+    tooltipTime: '时间: {start} - {end}',
+    tooltipLocation: '地点: {location}'
+  },
+  weekPreview: {
+    prev: '上一周',
+    next: '下一周',
+    today: '回到今日',
+    expandNight: '展开夜间',
+    collapseNight: '折叠夜间',
+    noEvents: '本周无日程',
+    untitled: '(无标题)',
+    tooltipLocation: '地点: {location}',
+    tooltipDesc: '描述: {description}'
+  }
+}
diff --git a/src/main.js b/src/main.js
index a014071..71e5fe0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import i18n from './i18n/index.js'
 import './styles/global.css'
 
-createApp(App).mount('#app')
+createApp(App).use(i18n).mount('#app')