diff --git a/README-EN.md b/README-EN.md
index 1919243..832dbf0 100644
--- a/README-EN.md
+++ b/README-EN.md
@@ -11,17 +11,17 @@
 
 ## 🖼️ Demo Show
 
-![Gantt Chart Overview](https://cdn.jsdelivr.net/gh/nelson820125/my-github-cdn@master/screenshots/demo.gif)
+![Gantt Chart Overview](design/screenshots/demo.gif)
 
 ## 🎨 Theme Support
 
 ### Light Theme
 
-![Light Theme](https://cdn.jsdelivr.net/gh/nelson820125/my-github-cdn@master/screenshots/light-theme.png)
+![Light Theme](design/screenshots/light-theme.png)
 
 ### Dark Theme
 
-![Dark Theme](https://cdn.jsdelivr.net/gh/nelson820125/my-github-cdn@master/screenshots/dark-theme.png)
+![Dark Theme](design/screenshots/dark-theme.png)
 
 ## 🚀 Features
 
diff --git a/README.md b/README.md
index 4371b3d..b6687fd 100644
--- a/README.md
+++ b/README.md
@@ -13,17 +13,17 @@
  
 ## 🖼️ Demo展示
 
-![甘特图概览](https://cdn.jsdelivr.net/gh/nelson820125/my-github-cdn@master/screenshots/demo.gif)
+![甘特图概览](design/screenshots/demo.gif)
 
 ## 🎨 主题支持
 
 ### 亮色主题
 
-![亮色主题](https://cdn.jsdelivr.net/gh/nelson820125/my-github-cdn@master/screenshots/light-theme.png)
+![亮色主题](design/screenshots/light-theme.png)
 
 ### 暗色主题
 
-![暗色主题](https://cdn.jsdelivr.net/gh/nelson820125/my-github-cdn@master/screenshots/dark-theme.png)
+![暗色主题](design/screenshots/dark-theme.png)
 
 ## 🚀 插件特点
 
diff --git a/demo/App.vue b/demo/App.vue
index 6c2520a..529de2e 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -1,17 +1,15 @@
 <script setup lang="ts">
 import { ref, onMounted, nextTick } from 'vue'
-//import GanttChart from '../src/components/GanttChart.vue'
-//import TaskDrawer from '../src/components/TaskDrawer.vue'
-//import MilestoneDialog from '../src/components/MilestoneDialog.vue'
+import GanttChart from '../src/components/GanttChart.vue'
+import TaskDrawer from '../src/components/TaskDrawer.vue'
+import MilestoneDialog from '../src/components/MilestoneDialog.vue'
 import demoData from './data.json'
 import packageInfo from '../package.json'
 // 导入主题变量
-//import '../src/styles/theme-variables.css'
+import '../src/styles/theme-variables.css'
 import VersionHistoryDrawer from './VersionHistoryDrawer.vue'
-//import { useMessage } from '../src/composables/useMessage'
-//import type { Task } from '../src/models/Task'
-import { GanttChart, TaskDrawer, MilestoneDialog, useMessage, Task } from 'jordium-gantt-vue3'
-import 'jordium-gantt-vue3/dist/jordium-gantt-vue3.css'
+import { useMessage } from '../src/composables/useMessage'
+import type { Task } from '../src/models/Task'
 
 const { showMessage } = useMessage()
 
diff --git a/design/screenshots/dark-theme.png b/design/screenshots/dark-theme.png
new file mode 100644
index 0000000..739469f
Binary files /dev/null and b/design/screenshots/dark-theme.png differ
diff --git a/design/screenshots/demo.gif b/design/screenshots/demo.gif
new file mode 100644
index 0000000..c273785
Binary files /dev/null and b/design/screenshots/demo.gif differ
diff --git a/design/screenshots/light-theme.png b/design/screenshots/light-theme.png
new file mode 100644
index 0000000..f5284ce
Binary files /dev/null and b/design/screenshots/light-theme.png differ
diff --git a/packageDemo/App.vue b/packageDemo/App.vue
index 948088e..187be8d 100644
--- a/packageDemo/App.vue
+++ b/packageDemo/App.vue
@@ -109,14 +109,14 @@ const handleMilestoneDelete = async (milestoneId: number) => {
     window.dispatchEvent(
       new CustomEvent('milestone-deleted', {
         detail: { milestoneId },
-      })
+      }),
     )
 
     // 触发强制更新事件，确保Timeline重新渲染
     window.dispatchEvent(
       new CustomEvent('milestone-data-changed', {
         detail: { milestones: milestones.value },
-      })
+      }),
     )
   }
 
@@ -248,7 +248,7 @@ const handleTaskAdd = (newTask: Task) => {
     const maxId = Math.max(
       ...tasks.value.map(t => t.id || 0),
       ...milestones.value.map(m => m.id || 0),
-      0
+      0,
     )
     newTask.id = maxId + 1
   }
@@ -379,7 +379,7 @@ function handleTaskbarDragOrResizeEnd(newTask) {
       `开始: ${oldTask.startDate} → ${newTask.startDate}\n` +
       `结束: ${oldTask.endDate} → ${newTask.endDate}`,
     'info',
-    { closable: true }
+    { closable: true },
   )
 }
 function handleMilestoneDragEnd(newMilestone) {
@@ -389,7 +389,7 @@ function handleMilestoneDragEnd(newMilestone) {
     `里程碑【${newMilestone.name}】\n` +
       `开始: ${oldMilestone.endDate} → ${newMilestone.startDate}`,
     'info',
-    { closable: true }
+    { closable: true },
   )
 }
 
diff --git a/public/assets/gantt-title-icon.svg b/public/assets/gantt-title-icon.svg
new file mode 100644
index 0000000..e69de29
diff --git a/public/assets/gitee.png b/public/assets/gitee.png
new file mode 100644
index 0000000..7758144
Binary files /dev/null and b/public/assets/gitee.png differ
diff --git a/public/assets/gitee.svg b/public/assets/gitee.svg
new file mode 100644
index 0000000..8e44815
--- /dev/null
+++ b/public/assets/gitee.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750864628544" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5058" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z" fill="#C71D23" p-id="5059"></path></svg>
\ No newline at end of file
diff --git a/public/assets/github.png b/public/assets/github.png
new file mode 100644
index 0000000..22f4407
Binary files /dev/null and b/public/assets/github.png differ
diff --git a/public/assets/github.svg b/public/assets/github.svg
new file mode 100644
index 0000000..e104009
--- /dev/null
+++ b/public/assets/github.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750864675427" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6018" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667" fill="#231F20" p-id="6019"></path></svg>
\ No newline at end of file
diff --git a/public/assets/jordium-gantt-vue3-logo.png b/public/assets/jordium-gantt-vue3-logo.png
new file mode 100644
index 0000000..0038628
Binary files /dev/null and b/public/assets/jordium-gantt-vue3-logo.png differ
diff --git a/public/assets/jordium-gantt-vue3-logo.svg b/public/assets/jordium-gantt-vue3-logo.svg
new file mode 100644
index 0000000..6678d51
--- /dev/null
+++ b/public/assets/jordium-gantt-vue3-logo.svg
@@ -0,0 +1,12 @@
+<svg class="gantt-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="2" y="4" width="20" height="2" rx="1" fill="#409eff" />
+  <rect x="2" y="8" width="12" height="2" rx="1" fill="#67c23a" />
+  <rect x="2" y="12" width="16" height="2" rx="1" fill="#e6a23c" />
+  <rect x="2" y="16" width="8" height="2" rx="1" fill="#f56c6c" />
+  <rect x="2" y="20" width="14" height="2" rx="1" fill="#909399" />
+  <circle cx="22" cy="5" r="1" fill="#409eff" />
+  <circle cx="16" cy="9" r="1" fill="#67c23a" />
+  <circle cx="20" cy="13" r="1" fill="#e6a23c" />
+  <circle cx="12" cy="17" r="1" fill="#f56c6c" />
+  <circle cx="18" cy="21" r="1" fill="#909399" />
+</svg>
diff --git a/public/assets/npm.png b/public/assets/npm.png
new file mode 100644
index 0000000..19b040a
Binary files /dev/null and b/public/assets/npm.png differ
diff --git a/public/assets/npm.svg b/public/assets/npm.svg
new file mode 100644
index 0000000..e142468
--- /dev/null
+++ b/public/assets/npm.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1751368683402" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4438" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M117.149737 906.850263V117.160081h789.690182v789.690182z m148.521374-641.706667v492.533657h248.873374V367.843556h145.025293v389.906101h98.735321V265.143596z" fill="#CB3837" p-id="4439"></path></svg>
\ No newline at end of file
diff --git a/public/vite.svg b/public/assets/vite.svg
similarity index 100%
rename from public/vite.svg
rename to public/assets/vite.svg
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 619aa15..dd501a2 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -134,7 +134,7 @@ const handleTaskRowHover = (taskId: number | null) => {
   window.dispatchEvent(
     new CustomEvent('timeline-task-hover', {
       detail: taskId,
-    })
+    }),
   )
 }
 
@@ -186,7 +186,7 @@ const handleMilestoneIconChange = (milestoneId: number, icon: string) => {
   window.dispatchEvent(
     new CustomEvent('milestone-icon-changed', {
       detail: { milestoneId, icon },
-    })
+    }),
   )
 }
 
@@ -204,7 +204,7 @@ const handleMilestoneSave = (updatedMilestone: any) => {
   window.dispatchEvent(
     new CustomEvent('milestone-data-updated', {
       detail: { milestone: updatedMilestone },
-    })
+    }),
   )
 }
 
@@ -217,14 +217,14 @@ const handleMilestoneDelete = (milestoneId: number) => {
   window.dispatchEvent(
     new CustomEvent('milestone-deleted', {
       detail: { milestoneId },
-    })
+    }),
   )
 
   // 广播里程碑数据变化事件，确保Timeline重新渲染
   window.dispatchEvent(
     new CustomEvent('milestone-data-changed', {
       detail: { milestoneId },
-    })
+    }),
   )
 }
 
@@ -239,7 +239,7 @@ const handleMilestoneUpdate = (updatedMilestone: any) => {
   window.dispatchEvent(
     new CustomEvent('milestone-data-updated', {
       detail: { milestone: updatedMilestone },
-    })
+    }),
   )
 }
 
@@ -301,7 +301,7 @@ watch(
   () => [timelineConfig.value.startDate, timelineConfig.value.endDate],
   () => {
     timelineData.value = generateTimelineData()
-  }
+  },
 )
 
 // 保证每次时间轴数据变化后都自动居中今日（仅初始化和外部props变更时触发，不因任务/里程碑变更触发）
@@ -316,7 +316,7 @@ watch(
       })
     }
   },
-  { deep: true }
+  { deep: true },
 )
 
 // 将今日定位到时间线中间位置
@@ -329,7 +329,7 @@ const scrollToTodayCenter = (retry = 0) => {
   const startNormalized = new Date(
     timelineStart.getFullYear(),
     timelineStart.getMonth(),
-    timelineStart.getDate()
+    timelineStart.getDate(),
   )
 
   // 计算今天距离时间线开始日期的天数
@@ -412,7 +412,7 @@ const scrollToToday = () => {
   const startNormalized = new Date(
     timelineStart.getFullYear(),
     timelineStart.getMonth(),
-    timelineStart.getDate()
+    timelineStart.getDate(),
   )
 
   // 计算今天距离时间线开始日期的天数
@@ -463,7 +463,7 @@ const updateTask = (updatedTask: Task) => {
   window.dispatchEvent(
     new CustomEvent('task-updated', {
       detail: updatedTask,
-    })
+    }),
   )
 }
 
@@ -493,7 +493,7 @@ const handleDrawerSubmit = (task: Task) => {
     window.dispatchEvent(
       new CustomEvent('task-added', {
         detail: task,
-      })
+      }),
     )
   }
 
@@ -599,7 +599,7 @@ onMounted(() => {
   // 监听TaskList的垂直滚动事件
   window.addEventListener(
     'task-list-vertical-scroll',
-    handleTaskListVerticalScroll as EventListener
+    handleTaskListVerticalScroll as EventListener,
   )
   // 监听语言变化
   window.addEventListener('locale-changed', handleLocaleChange as EventListener)
@@ -652,7 +652,7 @@ watch(
       updateSvgSize()
     })
   },
-  { immediate: true }
+  { immediate: true },
 )
 
 // 拖拽滑动相关状态
@@ -762,7 +762,7 @@ const handleTimelineScroll = (event: Event) => {
     window.dispatchEvent(
       new CustomEvent('timeline-vertical-scroll', {
         detail: { scrollTop },
-      })
+      }),
     )
   }
 
@@ -795,7 +795,7 @@ 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)
@@ -823,7 +823,7 @@ const handleTaskDelete = (taskId: number) => {
   window.dispatchEvent(
     new CustomEvent('task-deleted', {
       detail: taskId,
-    })
+    }),
   )
 
   // 关闭抽屉
diff --git a/vite.config.lib.ts b/vite.config.lib.ts
index da388cc..ddee0bb 100644
--- a/vite.config.lib.ts
+++ b/vite.config.lib.ts
@@ -5,6 +5,8 @@ import vue from '@vitejs/plugin-vue'
 export default defineConfig({
   plugins: [vue()],
   build: {
+    outDir: './npm-package/dist',
+    emptyOutDir: true,
     lib: {
       entry: './src/index.ts',
       name: 'JordiumGanttVue3',