diff --git a/docs/GITHUB-PAGES-EN.md b/docs/GITHUB-PAGES-EN.md
new file mode 100644
index 0000000..cbbd28f
--- /dev/null
+++ b/docs/GITHUB-PAGES-EN.md
@@ -0,0 +1,61 @@
+# GitHub Pages Deployment Guide
+
+This project has been configured with automatic deployment of GitHub Pages, and users can experience the complete Gantt charting function online.
+
+## 🌐 Online visit
+
+**Demo Address**: https://nelson820125.github.io/jordium-gantt-vue3/
+
+## 🔧 Deployment Configuration
+
+### Automated deployment
+
+Projects are automatically deployed to GitHub Pages using GitHub Actions:
+
+- **Triggering condition**: Push to `main` or `master` branch
+- **Build Command**: `npm run build:pages`
+- **Deployment Directory**: `./dist`
+- **Workflows**: `.github/workflows/deploy-github-pages.yml`
+
+### Enable GitHub Pages manually
+
+1. Enter the GitHub repository settings page
+2. Find the "Pages" setting options
+3. Select "Source" as "GitHub Actions"
+4. Push code to the main branch and automatically trigger deployment
+
+## 📁 Construct the product
+
+- **Development and Construction**: `npm run build` → `dist/`
+- **GitHub Pages**: `npm run build:pages` → `dist/` (contains the correct base path)
+- **NPM package build**: `npm run build:lib` → `npm-package/dist/`
+
+## 🛠️ Local Preview
+
+```bash
+# Installation dependencies
+npm install
+
+# Start the development server
+npm run dev
+
+# Build and preview the production version
+npm run build:pages
+npm run preview
+```
+
+## 🔄 Update deployment
+
+GitHub Actions will automatically:
+
+1. Check out the code
+2. Install Node.js and dependencies
+3. Build demo application
+4. Deploy to GitHub Pages
+
+## 📝 Notes
+
+- Deployment usually takes 1-5 minutes to take effect
+- Make sure GitHub Pages is enabled in repository settings
+- Custom domain names need to be configured in the `demo/public/CNAME` file
+- Static resource paths use relative paths to ensure normal loading in the Pages environment
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index 70ec47c..5412092 100644
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { useI18n } from '../composables/useI18n'
+const { t } = useI18n()
 
 interface Props {
   modelValue?: string | [string, string]
@@ -97,7 +99,7 @@ watch(
       singleValue.value = (newValue as string) || ''
     }
   },
-  { immediate: true },
+  { immediate: true }
 )
 
 // 处理单日期输入变化（预留，当前版本不使用）
@@ -464,6 +466,7 @@ const yearList = computed(() => {
   return years
 })
 
+/*
 // 月份名称
 const monthNames = [
   '一月',
@@ -480,6 +483,7 @@ const monthNames = [
   '十二月',
 ]
 const weekDays = ['日', '一', '二', '三', '四', '五', '六']
+*/
 
 // 生命周期
 onMounted(() => {
@@ -736,7 +740,7 @@ const panelStyle = computed(() => {
                 &lt;&lt;
               </button>
               <span class="el-month-picker__header-label" @click="showYearSelector($event)">
-                {{ currentYear }}年
+                {{ currentYear }}
               </span>
               <button type="button" class="el-picker-panel__icon-btn" @click="nextYear">
                 &gt;&gt;
@@ -744,7 +748,7 @@ const panelStyle = computed(() => {
             </div>
             <div class="el-month-picker__content">
               <div
-                v-for="(monthName, index) in monthNames"
+                v-for="(monthName, index) in t.monthNames"
                 :key="index"
                 class="el-month-picker__item"
                 :class="{ 'is-current': index === currentMonth }"
@@ -766,10 +770,10 @@ const panelStyle = computed(() => {
               </button>
               <span class="el-date-picker__header-label">
                 <span class="el-date-picker__header-year" @click="showYearSelector($event)">
-                  {{ currentYear }}年
+                  {{ currentYear }}
                 </span>
                 <span class="el-date-picker__header-month" @click="showMonthSelector($event)">
-                  {{ monthNames[currentMonth] }}
+                  {{ t.monthNames[currentMonth] }}
                 </span>
               </span>
               <button type="button" class="el-picker-panel__icon-btn" @click="nextMonth">
@@ -783,7 +787,7 @@ const panelStyle = computed(() => {
             <div class="el-date-picker__content">
               <!-- 星期标题 -->
               <div class="el-date-table__header">
-                <div v-for="day in weekDays" :key="day" class="el-date-table__header-cell">
+                <div v-for="day in t.weekDays" :key="day" class="el-date-table__header-cell">
                   {{ day }}
                 </div>
               </div>
diff --git a/src/components/MilestonePoint.vue b/src/components/MilestonePoint.vue
index bdf1985..4d0c321 100644
--- a/src/components/MilestonePoint.vue
+++ b/src/components/MilestonePoint.vue
@@ -2,6 +2,12 @@
 import { computed, ref, onUnmounted } from 'vue'
 import type { Milestone } from '../models/classes/Milestone'
 import { TimelineScale } from '../models/types/TimelineScale'
+import { useI18n } from '../composables/useI18n'
+const { getTranslation } = useI18n()
+
+const t = (key: string): string => {
+  return getTranslation(key)
+}
 
 interface Props {
   date: string // 里程碑日期
@@ -151,7 +157,7 @@ const handleMouseMove = (e: MouseEvent) => {
         mouseX: e.clientX,
         isDragging: isDragging.value,
       },
-    }),
+    })
   )
 
   const deltaX = e.clientX - dragStartX.value
@@ -178,7 +184,7 @@ const handleMouseUp = () => {
         mouseX: 0,
         isDragging: false,
       },
-    }),
+    })
   )
 
   // 只有在真正拖拽了（有临时数据）且状态为拖拽中时才触发更新
@@ -240,7 +246,7 @@ const handleMilestoneClick = (e: MouseEvent) => {
           scrollLeft: targetScrollLeft,
           smooth: true,
         },
-      }),
+      })
     )
   }
 }
@@ -274,13 +280,13 @@ const milestoneStyle = computed(() => {
     const centerPosition = calculateMilestonePositionFromTimelineData(
       milestoneDate,
       props.timelineData,
-      props.currentTimeScale,
+      props.currentTimeScale
     )
     left = centerPosition - size / 2 // 从中心位置偏移到图标左上角
   } else {
     // 日视图：保持原有逻辑
     const startDiff = Math.floor(
-      (milestoneDate.getTime() - props.startDate.getTime()) / (1000 * 60 * 60 * 24),
+      (milestoneDate.getTime() - props.startDate.getTime()) / (1000 * 60 * 60 * 24)
     )
     left = startDiff * props.dayWidth + props.dayWidth / 2 - size / 2
   }
@@ -346,7 +352,7 @@ const milestoneVisibility = computed(() => {
   if (iconRight <= leftBoundary + iconSize / 2) {
     // 检查左侧是否有其他停靠的里程碑，需要判断推挤优先级
     const leftStickyMilestones = otherMilestones.filter(
-      m => m.id !== currentId && m.stickyPosition === 'left' && m.isSticky,
+      m => m.id !== currentId && m.stickyPosition === 'left' && m.isSticky
     )
 
     // 如果有其他里程碑已经停靠在左侧，比较优先级决定推挤顺序
@@ -392,7 +398,7 @@ const milestoneVisibility = computed(() => {
   if (iconLeft >= rightBoundary - iconSize / 2) {
     // 检查右侧是否有其他停靠的里程碑，需要判断推挤优先级
     const rightStickyMilestones = otherMilestones.filter(
-      m => m.id !== currentId && m.stickyPosition === 'right' && m.isSticky,
+      m => m.id !== currentId && m.stickyPosition === 'right' && m.isSticky
     )
 
     // 如果有其他里程碑已经停靠在右侧，比较优先级决定推挤顺序
@@ -478,26 +484,26 @@ const handleMilestoneMouseLeave = () => {
 
 // 格式化日期显示
 const formatDisplayDate = (dateStr: string): string => {
-  if (!dateStr) return '未设置'
+  if (!dateStr) return t('dateNotSet') //Not Set
 
   try {
     const date = new Date(dateStr)
-    if (isNaN(date.getTime())) return '未设置'
+    if (isNaN(date.getTime())) return t('dateNotSet')
 
     const year = date.getFullYear()
     const month = String(date.getMonth() + 1).padStart(2, '0')
     const day = String(date.getDate()).padStart(2, '0')
     return `${year}-${month}-${day}`
   } catch {
-    return '未设置'
+    return t('dateNotSet')
   }
 }
 
 // Tooltip内容
 const tooltipContent = computed(() => {
-  const milestoneName = props.name || props.milestone?.name || '里程碑'
+  const milestoneName = props.name || props.milestone?.name || t('milestone')
   const targetDate = formatDisplayDate(props.date || props.milestone?.startDate || '')
-  return `里程碑：${milestoneName} - 目标日期：${targetDate}`
+  return `${t('milestone')}：${milestoneName} <br> ${t('targetDate')}：${targetDate}`
 })
 
 // 组件销毁时清理事件监听器
@@ -527,7 +533,7 @@ const calculateMilestonePositionFromTimelineData = (
       subDays: Array<{ date: Date; dayOfWeek?: number }>
     }>
   }>,
-  timeScale: TimelineScale,
+  timeScale: TimelineScale
 ) => {
   let cumulativePosition = 0
 
diff --git a/src/components/TaskBar.vue b/src/components/TaskBar.vue
index 141b423..e10ea3e 100644
--- a/src/components/TaskBar.vue
+++ b/src/components/TaskBar.vue
@@ -4,6 +4,8 @@ import type { Task } from '../models/classes/Task'
 import { TimelineScale } from '../models/types/TimelineScale'
 import TaskContextMenu from './TaskContextMenu.vue'
 
+import { useI18n } from '../composables/useI18n'
+
 interface Props {
   task: Task
   rowHeight: number
@@ -31,6 +33,11 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const { getTranslation } = useI18n()
+const t = (key: string): string => {
+  return getTranslation(key)
+}
+
 const emit = defineEmits([
   'update:task',
   'bar-mounted',
@@ -833,9 +840,9 @@ const handleBubbleMouseDown = (event: MouseEvent) => {
 
 // 格式化日期显示
 const formatDisplayDate = (dateStr: string | undefined): string => {
-  if (!dateStr) return '未设置'
+  if (!dateStr) return t('dateNotSet')
   const date = createLocalDate(dateStr)
-  if (!date) return '未设置'
+  if (!date) return t('dateNotSet')
 
   const year = date.getFullYear()
   const month = String(date.getMonth() + 1).padStart(2, '0')
@@ -1120,23 +1127,23 @@ onUnmounted(() => {
       <div class="tooltip-title">{{ task.name }}</div>
       <div class="tooltip-content">
         <div class="tooltip-row">
-          <span class="tooltip-label">计划开始:</span>
+          <span class="tooltip-label"> {{ t('startDate') }}:</span>
           <span class="tooltip-value">{{ formatDisplayDate(task.startDate) }}</span>
         </div>
         <div class="tooltip-row">
-          <span class="tooltip-label">计划结束:</span>
+          <span class="tooltip-label">{{ t('endDate') }}:</span>
           <span class="tooltip-value">{{ formatDisplayDate(task.endDate) }}</span>
         </div>
         <div class="tooltip-row">
-          <span class="tooltip-label">计划工时:</span>
+          <span class="tooltip-label">{{ t('estimatedHours') }}:</span>
           <span class="tooltip-value">{{ workHourInfo.total }}h</span>
         </div>
         <div class="tooltip-row">
-          <span class="tooltip-label">已用工时:</span>
+          <span class="tooltip-label"> {{ t('actualHours') }}:</span>
           <span class="tooltip-value">{{ workHourInfo.used }}h</span>
         </div>
         <div class="tooltip-row">
-          <span class="tooltip-label">完成率:</span>
+          <span class="tooltip-label"> {{ t('progress') }}:</span>
           <span class="tooltip-value">{{ task.progress || 0 }}%</span>
         </div>
       </div>
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 5e6039f..17a4c7f 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -235,7 +235,7 @@ const computeAllMilestonesPositions = () => {
         if (!isNaN(milestoneDate.getTime())) {
           const startDiff = Math.floor(
             (milestoneDate.getTime() - timelineConfig.value.startDate.getTime()) /
-              (1000 * 60 * 60 * 24),
+              (1000 * 60 * 60 * 24)
           )
           const left = startDiff * 30 + 30 / 2 - 12 // 30是dayWidth，12是图标半径
 
@@ -269,7 +269,7 @@ const computeAllMilestonesPositions = () => {
       if (!isNaN(milestoneDate.getTime())) {
         const startDiff = Math.floor(
           (milestoneDate.getTime() - timelineConfig.value.startDate.getTime()) /
-            (1000 * 60 * 60 * 24),
+            (1000 * 60 * 60 * 24)
         )
         const left = startDiff * 30 + 30 / 2 - 12
 
@@ -372,7 +372,7 @@ const handleTaskRowHover = (taskId: number | null) => {
   window.dispatchEvent(
     new CustomEvent('timeline-task-hover', {
       detail: taskId,
-    }),
+    })
   )
 }
 
@@ -424,7 +424,7 @@ const handleMilestoneIconChange = (milestoneId: number, icon: string) => {
   window.dispatchEvent(
     new CustomEvent('milestone-icon-changed', {
       detail: { milestoneId, icon },
-    }),
+    })
   )
 }
 
@@ -442,7 +442,7 @@ const handleMilestoneSave = (updatedMilestone: Milestone) => {
   window.dispatchEvent(
     new CustomEvent('milestone-data-updated', {
       detail: { milestone: updatedMilestone },
-    }),
+    })
   )
 }
 
@@ -455,14 +455,14 @@ const handleMilestoneDelete = (milestoneId: number) => {
   window.dispatchEvent(
     new CustomEvent('milestone-deleted', {
       detail: { milestoneId },
-    }),
+    })
   )
 
   // 广播里程碑数据变化事件，确保Timeline重新渲染
   window.dispatchEvent(
     new CustomEvent('milestone-data-changed', {
       detail: { milestoneId },
-    }),
+    })
   )
 }
 
@@ -477,7 +477,7 @@ const handleMilestoneUpdate = (updatedMilestone: Milestone) => {
   window.dispatchEvent(
     new CustomEvent('milestone-data-updated', {
       detail: { milestone: updatedMilestone },
-    }),
+    })
   )
 }
 
@@ -683,7 +683,7 @@ watch(
     if (!isUpdatingTimelineConfig) {
       timelineData.value = generateTimelineData()
     }
-  },
+  }
 )
 
 // 保证每次时间轴数据变化后都自动居中今日（仅初始化和外部props变更时触发，不因任务/里程碑变更触发）
@@ -698,7 +698,7 @@ watch(
       })
     }
   },
-  { deep: true },
+  { deep: true }
 )
 
 // 将今日定位到时间线中间位置
@@ -715,7 +715,7 @@ const scrollToTodayCenter = (retry = 0) => {
   const startNormalized = new Date(
     timelineStart.getFullYear(),
     timelineStart.getMonth(),
-    timelineStart.getDate(),
+    timelineStart.getDate()
   )
 
   // 计算今天距离时间线开始日期的天数
@@ -806,7 +806,7 @@ const scrollToToday = () => {
   const startNormalized = new Date(
     timelineStart.getFullYear(),
     timelineStart.getMonth(),
-    timelineStart.getDate(),
+    timelineStart.getDate()
   )
 
   // 计算今天距离时间线开始日期的天数
@@ -857,7 +857,7 @@ const updateTask = (updatedTask: Task) => {
   window.dispatchEvent(
     new CustomEvent('task-updated', {
       detail: updatedTask,
-    }),
+    })
   )
 }
 
@@ -917,7 +917,7 @@ const handleTaskBarContextMenu = (event: { task: Task; position: { x: number; y:
   window.dispatchEvent(
     new CustomEvent('context-menu', {
       detail: event,
-    }),
+    })
   )
 }
 
@@ -1000,7 +1000,7 @@ onMounted(() => {
   // 监听TaskList的垂直滚动事件
   window.addEventListener(
     'task-list-vertical-scroll',
-    handleTaskListVerticalScroll as EventListener,
+    handleTaskListVerticalScroll as EventListener
   )
   // 监听语言变化
   window.addEventListener('locale-changed', handleLocaleChange as EventListener)
@@ -1010,7 +1010,7 @@ onMounted(() => {
   // 监听Timeline容器resize事件（TaskList切换等）
   window.addEventListener(
     'timeline-container-resized',
-    handleTimelineContainerResized as EventListener,
+    handleTimelineContainerResized as EventListener
   )
 
   // 监听里程碑点击定位事件
@@ -1100,7 +1100,7 @@ const handleTimelineBodyScroll = (event: Event) => {
     window.dispatchEvent(
       new CustomEvent('timeline-vertical-scroll', {
         detail: { scrollTop },
-      }),
+      })
     )
   }
 }
@@ -1113,7 +1113,7 @@ watch(
       updateSvgSize()
     })
   },
-  { immediate: true },
+  { immediate: true }
 )
 
 // 拖拽滑动相关状态
@@ -1281,7 +1281,7 @@ const startAutoScroll = (direction: 'left' | 'right') => {
     window.dispatchEvent(
       new CustomEvent('timeline-auto-scroll', {
         detail: { scrollDelta: newScrollLeft - currentScrollLeft },
-      }),
+      })
     )
 
     autoScrollTimer = window.setTimeout(scroll, 16) // 约60fps
@@ -1335,14 +1335,14 @@ onUnmounted(() => {
   window.removeEventListener('task-list-hover', handleTaskListHover as EventListener)
   window.removeEventListener(
     'task-list-vertical-scroll',
-    handleTaskListVerticalScroll as EventListener,
+    handleTaskListVerticalScroll as EventListener
   )
   window.removeEventListener('locale-changed', handleLocaleChange as EventListener)
   window.removeEventListener('splitter-drag-start', handleSplitterDragStart as EventListener)
   window.removeEventListener('splitter-drag-end', handleSplitterDragEnd as EventListener)
   window.removeEventListener(
     'timeline-container-resized',
-    handleTimelineContainerResized as EventListener,
+    handleTimelineContainerResized as EventListener
   )
   window.removeEventListener('milestone-click-locate', handleMilestoneClickLocate as EventListener)
   window.removeEventListener('drag-boundary-check', handleDragBoundaryCheck as EventListener)
@@ -1436,7 +1436,7 @@ watch(
       }
     })
   },
-  { deep: true },
+  { deep: true }
 )
 
 // 处理里程碑点击定位事件
@@ -1620,7 +1620,7 @@ const handleAddSuccessor = (task: Task) => {
             class="timeline-year"
             :style="{ width: '719px' }"
           >
-            <div class="year-label">{{ yearValue }}年</div>
+            <div class="year-label">{{ yearValue }}</div>
           </div>
         </div>
 
diff --git a/src/composables/useI18n.ts b/src/composables/useI18n.ts
index 4b5b9b6..aae04ed 100644
--- a/src/composables/useI18n.ts
+++ b/src/composables/useI18n.ts
@@ -6,6 +6,7 @@ export type Locale = 'zh-CN' | 'en-US'
 // 多语言配置
 const messages = {
   'zh-CN': {
+    dateNotSet: '未设置',
     // TaskList Header
     taskName: '任务名称',
     predecessor: '前置任务',
@@ -38,8 +39,26 @@ const messages = {
     // 月份格式
     monthFormat: (month: number) => `${month}月`,
 
+    // 月份名称
+    monthNames: [
+      '一月',
+      '二月',
+      '三月',
+      '四月',
+      '五月',
+      '六月',
+      '七月',
+      '八月',
+      '九月',
+      '十月',
+      '十一月',
+      '十二月',
+    ],
+    weekDays: ['日', '一', '二', '三', '四', '五', '六'],
+
     // 其他
     milestone: '里程碑',
+    targetDate: '目标日期',
     today: '今天',
     // 里程碑对话框
     milestoneDetails: '里程碑详情',
@@ -169,6 +188,7 @@ const messages = {
     timerConfirmPlaceholder: '请输入计时说明',
   },
   'en-US': {
+    dateNotSet: 'Not set',
     // TaskList Header
     taskName: 'Task Name',
     predecessor: 'Predecessor',
@@ -199,9 +219,27 @@ const messages = {
     // 月份格式
     monthFormat: (month: number) => `M${String(month).padStart(2, '0')}`,
 
+    // Month name
+    monthNames: [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ],
+    weekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+
     // 其他
     milestone: 'Milestone',
     today: 'Today',
+    targetDate: 'Target Date',
     // 里程碑对话框
     milestoneDetails: 'Milestone Details',
     milestoneName: 'Milestone Name',
@@ -387,7 +425,7 @@ export function useI18n() {
     window.dispatchEvent(
       new CustomEvent('locale-changed', {
         detail: { locale },
-      }),
+      })
     )
   }