diff --git a/npm-demo/src/components/GanttTest.vue b/npm-demo/src/components/GanttTest.vue
index 685c70b..ab18df6 100644
--- a/npm-demo/src/components/GanttTest.vue
+++ b/npm-demo/src/components/GanttTest.vue
@@ -162,8 +162,8 @@ const onMilestoneDblclick = (milestone) => {
         </div>
 
         <div class="drawer-footer">
-          <button class="btn btn-primary" @click="addTask">确定</button>
-          <button class="btn btn-default" @click="showAddTaskDrawer = false">取消</button>
+          <button class="gantt-btn gantt-btn-primary" @click="addTask">确定</button>
+          <button class="gantt-btn gantt-btn-default" @click="showAddTaskDrawer = false">取消</button>
         </div>
       </div>
     </div>
@@ -311,23 +311,23 @@ const onMilestoneDblclick = (milestone) => {
   transition: all 0.3s;
 }
 
-.btn-primary {
+.gantt-btn-primary {
   background: #409eff;
   color: white;
   border-color: #409eff;
 }
 
-.btn-primary:hover {
+.gantt-btn-primary:hover {
   background: #66b1ff;
   border-color: #66b1ff;
 }
 
-.btn-default {
+.gantt-btn-default {
   background: white;
   color: #606266;
 }
 
-.btn-default:hover {
+.gantt-btn-default:hover {
   color: #409eff;
   border-color: #409eff;
 }
diff --git a/npm-webpack-demo/src/App.vue b/npm-webpack-demo/src/App.vue
index 6959968..fc297cf 100644
--- a/npm-webpack-demo/src/App.vue
+++ b/npm-webpack-demo/src/App.vue
@@ -167,8 +167,8 @@ const onMilestoneDblclick = (milestone: any) => {
     </div>
     <!-- 自定义添加任务按钮 -->
     <div>
-      <button class="btn btn-primary" @click="showAddTaskDrawer = true">添加任务</button>
-      <button class="btn btn-primary" @click="showAddMilestoneDialog = true">添加里程碑</button>
+      <button class="gantt-btn gantt-btn-primary" @click="showAddTaskDrawer = true">添加任务</button>
+      <button class="gantt-btn gantt-btn-primary" @click="showAddMilestoneDialog = true">添加里程碑</button>
     </div>
 
     <!-- 自定义抽屉组件 (原生HTML替代 el-drawer) -->
@@ -197,8 +197,8 @@ const onMilestoneDblclick = (milestone: any) => {
         </div>
 
         <div class="drawer-footer">
-          <button class="btn btn-primary" @click="addTask">确定</button>
-          <button class="btn btn-default" @click="showAddTaskDrawer = false">取消</button>
+          <button class="gantt-btn gantt-btn-primary" @click="addTask">确定</button>
+          <button class="gantt-btn gantt-btn-default" @click="showAddTaskDrawer = false">取消</button>
         </div>
       </div>
     </div>
@@ -346,23 +346,23 @@ const onMilestoneDblclick = (milestone: any) => {
   transition: all 0.3s;
 }
 
-.btn-primary {
+.gantt-btn-primary {
   background: #409eff;
   color: white;
   border-color: #409eff;
 }
 
-.btn-primary:hover {
+.gantt-btn-primary:hover {
   background: #66b1ff;
   border-color: #66b1ff;
 }
 
-.btn-default {
+.gantt-btn-default {
   background: white;
   color: #606266;
 }
 
-.btn-default:hover {
+.gantt-btn-default:hover {
   color: #409eff;
   border-color: #409eff;
 }
diff --git a/package.json b/package.json
index 4e8b9ae..d2141c5 100644
--- a/package.json
+++ b/package.json
@@ -2,11 +2,22 @@
   "name": "jordium-gantt-vue3",
   "version": "1.4.2-patch.3",
   "type": "module",
-  "main": "dist/jordium-gantt-vue3.cjs.js",
-  "module": "dist/jordium-gantt-vue3.es.js",
-  "types": "dist/jordium-gantt-vue3.d.ts",
+  "main": "npm-package/dist/jordium-gantt-vue3.cjs.js",
+  "module": "npm-package/dist/jordium-gantt-vue3.es.js",
+  "types": "npm-package/dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./npm-package/dist/index.d.ts",
+      "require": "./npm-package/dist/jordium-gantt-vue3.cjs.js",
+      "import": "./npm-package/dist/jordium-gantt-vue3.es.js"
+    },
+    "./styles": "./npm-package/dist/jordium-gantt-vue3-styles.js",
+    "./styles.js": "./npm-package/dist/jordium-gantt-vue3-styles.js",
+    "./index.css": "./npm-package/dist/assets/jordium-gantt-vue3.css",
+    "./npm-package/*": "./npm-package/*"
+  },
   "files": [
-    "dist"
+    "npm-package"
   ],
   "license": "MIT",
   "repository": {
diff --git a/scripts/generate-css-export.js b/scripts/generate-css-export.js
index 73ec745..2cb698f 100644
--- a/scripts/generate-css-export.js
+++ b/scripts/generate-css-export.js
@@ -9,7 +9,7 @@ const __dirname = path.dirname(__filename)
 
 // 构建后生成CSS导出文件
 function generateCssExport() {
-  const distDir = path.resolve(__dirname, '../../npm-package/dist')
+  const distDir = path.resolve(__dirname, '../npm-package/dist')
   const assetsDir = path.join(distDir, 'assets')
   const expectedCssFile = path.join(assetsDir, 'jordium-gantt-vue3.css')
   const outputFile = path.join(distDir, 'jordium-gantt-vue3-styles.js')
diff --git a/src/components/ConfirmTimerDialog.vue b/src/components/ConfirmTimerDialog.vue
index 7bd4785..8f3a64e 100644
--- a/src/components/ConfirmTimerDialog.vue
+++ b/src/components/ConfirmTimerDialog.vue
@@ -46,8 +46,8 @@ const messageTaskName = computed(() => {
         rows="3"
       ></textarea>
       <div class="dialog-actions">
-        <button class="btn btn-default" @click="$emit('cancel')">{{ t('cancel') }}</button>
-        <button class="btn btn-confirm" @click="onConfirm">{{ t('startTimer') }}</button>
+        <button class="gantt-btn gantt-btn-default" @click="$emit('cancel')">{{ t('cancel') }}</button>
+        <button class="gantt-btn gantt-btn-confirm" @click="onConfirm">{{ t('startTimer') }}</button>
       </div>
     </div>
   </div>
@@ -108,7 +108,7 @@ const messageTaskName = computed(() => {
   gap: 12px;
   margin-top: 8px;
 }
-.btn {
+.gantt-btn {
   min-width: 96px;
   padding: 10px 0;
   border: none;
@@ -122,11 +122,11 @@ const messageTaskName = computed(() => {
   align-items: center;
   justify-content: center;
 }
-.btn-confirm {
+.gantt-btn-confirm {
   background: #4caf50;
   color: #fff;
 }
-.btn-confirm:hover {
+.gantt-btn-confirm:hover {
   background: #43a047;
 }
 </style>
diff --git a/src/components/GanttConfirmDialog.vue b/src/components/GanttConfirmDialog.vue
index 48eef64..2390754 100644
--- a/src/components/GanttConfirmDialog.vue
+++ b/src/components/GanttConfirmDialog.vue
@@ -28,23 +28,23 @@ const onNo = () => emit('no')
       </div>
       <div class="gantt-confirm-footer">
         <template v-if="props.type === 'yes-no-cancel'">
-          <button type="button" class="btn btn-default" @click="onCancel">
+          <button type="button" class="gantt-btn gantt-btn-default" @click="onCancel">
             {{ props.cancelText }}
           </button>
           <div class="gantt-confirm-footer-right">
-            <button type="button" class="btn btn-warning" @click="onNo">
+            <button type="button" class="gantt-btn gantt-btn-warning" @click="onNo">
               {{ props.noText }}
             </button>
-            <button type="button" class="btn btn-danger" @click="onYes">
+            <button type="button" class="gantt-btn gantt-btn-danger" @click="onYes">
               {{ props.yesText }}
             </button>
           </div>
         </template>
         <template v-else>
-          <button type="button" class="btn btn-default" @click="onCancel">
+          <button type="button" class="gantt-btn gantt-btn-default" @click="onCancel">
             {{ props.cancelText }}
           </button>
-          <button type="button" class="btn btn-danger" @click="onConfirm">
+          <button type="button" class="gantt-btn gantt-btn-danger" @click="onConfirm">
             {{ props.confirmText }}
           </button>
         </template>
diff --git a/src/components/GanttToolbar.vue b/src/components/GanttToolbar.vue
index 313f0aa..eddaa6e 100644
--- a/src/components/GanttToolbar.vue
+++ b/src/components/GanttToolbar.vue
@@ -432,16 +432,16 @@ onUnmounted(() => {
       <!-- 新增按钮组 -->
       <div
         v-if="config.showAddTask !== false || config.showAddMilestone !== false"
-        class="btn-group add-btn-group"
+        class="gantt-btn-group gantt-add-btn-group"
       >
         <button
           v-if="config.showAddTask !== false"
-          class="btn-group-item"
+          class="gantt-btn-group-item"
           :title="t('addTask')"
           @click="handleAddTask"
         >
           <svg
-            class="btn-icon"
+            class="gantt-btn-icon"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -454,12 +454,12 @@ onUnmounted(() => {
         </button>
         <button
           v-if="config.showAddMilestone !== false"
-          class="btn-group-item"
+          class="gantt-btn-group-item"
           :title="t('addMilestone')"
           @click="handleAddMilestone"
         >
           <svg
-            class="btn-icon"
+            class="gantt-btn-icon"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -487,15 +487,15 @@ onUnmounted(() => {
       <!-- 展开/折叠按钮组 -->
       <div
         v-if="config.showExpandCollapse !== false"
-        class="btn-group expand-collapse-btn-group"
+        class="gantt-btn-group gantt-expand-collapse-btn-group"
       >
         <button
-          class="btn-group-item"
+          class="gantt-btn-group-item"
           :title="t('expandAll')"
           @click="handleExpandAll"
         >
           <svg
-            class="btn-icon"
+            class="gantt-btn-icon"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -506,12 +506,12 @@ onUnmounted(() => {
           {{ t('expandAll') }}
         </button>
         <button
-          class="btn-group-item"
+          class="gantt-btn-group-item"
           :title="t('collapseAll')"
           @click="handleCollapseAll"
         >
           <svg
-            class="btn-icon"
+            class="gantt-btn-icon"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -526,16 +526,16 @@ onUnmounted(() => {
       <!-- 导出按钮组 -->
       <div
         v-if="config.showExportCsv !== false || config.showExportPdf !== false"
-        class="btn-group"
+        class="gantt-btn-group"
       >
         <button
           v-if="config.showExportCsv !== false"
-          class="btn-group-item"
+          class="gantt-btn-group-item"
           :title="t('exportCsv')"
           @click="handleExportCsv"
         >
           <svg
-            class="btn-icon"
+            class="gantt-btn-icon"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -552,12 +552,12 @@ onUnmounted(() => {
 
         <button
           v-if="config.showExportPdf !== false"
-          class="btn-group-item"
+          class="gantt-btn-group-item"
           :title="t('exportPdf')"
           @click="handleExportPdf"
         >
           <svg
-            class="btn-icon"
+            class="gantt-btn-icon"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -600,7 +600,7 @@ onUnmounted(() => {
           @click="toggleLanguageDropdown"
         >
           <svg
-            class="btn-icon"
+            class="gantt-btn-icon"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -656,7 +656,7 @@ onUnmounted(() => {
         @click="handleTodayLocate"
       >
         <svg
-          class="btn-icon"
+          class="gantt-btn-icon"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -678,7 +678,7 @@ onUnmounted(() => {
       >
         <svg
           v-if="isDarkMode"
-          class="btn-icon"
+          class="gantt-btn-icon"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -696,7 +696,7 @@ onUnmounted(() => {
         </svg>
         <svg
           v-else
-          class="btn-icon"
+          class="gantt-btn-icon"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -716,7 +716,7 @@ onUnmounted(() => {
       >
         <svg
           v-if="isFullscreen"
-          class="btn-icon"
+          class="gantt-btn-icon"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -728,7 +728,7 @@ onUnmounted(() => {
         </svg>
         <svg
           v-else
-          class="btn-icon"
+          class="gantt-btn-icon"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -748,8 +748,8 @@ onUnmounted(() => {
       <div class="dialog-content">
         <p class="dialog-message">{{ t('confirmDialogMessage') }}</p>
         <div class="dialog-actions">
-          <button class="btn btn-default" @click="cancelSaveSettings">{{ t('cancel') }}</button>
-          <button class="btn btn-primary" @click="confirmSaveSettings">{{ t('confirm') }}</button>
+          <button class="gantt-btn gantt-btn-default" @click="cancelSaveSettings">{{ t('cancel') }}</button>
+          <button class="gantt-btn gantt-btn-primary" @click="confirmSaveSettings">{{ t('confirm') }}</button>
         </div>
       </div>
     </div>
@@ -812,13 +812,13 @@ onUnmounted(() => {
   background: var(--gantt-bg-active, rgba(0, 0, 0, 0.3));
 }
 
-.toolbar-icon-btn .btn-icon {
+.toolbar-icon-btn .gantt-btn-icon {
   width: 18px;
   height: 18px;
 }
 
 /* 图标样式 */
-.btn-icon {
+.gantt-btn-icon {
   width: 16px;
   height: 16px;
   stroke-width: 2;
@@ -882,7 +882,7 @@ onUnmounted(() => {
   background: var(--gantt-bg-active, rgba(64, 158, 255, 0.1));
 }
 
-.toolbar-lang-btn .btn-icon {
+.toolbar-lang-btn .gantt-btn-icon {
   width: 16px;
   height: 16px;
   stroke-width: 2;
@@ -1089,27 +1089,27 @@ onUnmounted(() => {
     font-size: 14px;
   }
 
-  .btn {
+  .gantt-btn {
     padding: 8px 12px;
     font-size: 13px;
   }
 }
 
 /* 按钮组样式 - Element Plus primary button group 风格 */
-.btn-group {
+.gantt-btn-group {
   display: inline-flex;
   margin-right: 8px;
   overflow: hidden;
   transition: all 0.2s ease;
 }
 
-.btn-group:hover,
-.btn-group:focus-within {
+.gantt-btn-group:hover,
+.gantt-btn-group:focus-within {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
 }
 
-.btn-group-item {
+.gantt-btn-group-item {
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -1130,19 +1130,19 @@ onUnmounted(() => {
   transition: all 0.2s ease;
 }
 
-.btn-group-item:first-child {
+.gantt-btn-group-item:first-child {
   border-left: 1px solid;
   border-right: none;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
 
-.btn-group-item:last-child {
+.gantt-btn-group-item:last-child {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
 
-.btn-group-item:not(:last-child)::after {
+.gantt-btn-group-item:not(:last-child)::after {
   content: '';
   position: absolute;
   right: 0;
@@ -1154,53 +1154,53 @@ onUnmounted(() => {
 }
 
 /* Primary 按钮组样式 */
-.add-btn-group .btn-group-item {
+.gantt-add-btn-group .gantt-btn-group-item {
   background: #409eff;
   border-color: #409eff;
   color: #ffffff;
 }
 
-.add-btn-group .btn-group-item::after {
+.gantt-add-btn-group .gantt-btn-group-item::after {
   background: rgba(255, 255, 255, 0.3);
 }
 
-.add-btn-group .btn-group-item:hover {
+.gantt-add-btn-group .gantt-btn-group-item:hover {
   background: #66b1ff;
   border-color: #66b1ff;
   z-index: 1;
 }
 
-.add-btn-group .btn-group-item:focus {
+.gantt-add-btn-group .gantt-btn-group-item:focus {
   background: #3a8ee6;
   border-color: #3a8ee6;
   z-index: 1;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
 }
 
-.add-btn-group .btn-group-item:active {
+.gantt-add-btn-group .gantt-btn-group-item:active {
   background: #337ecc;
   border-color: #337ecc;
 }
 
 /* 悬浮和焦点状态下隐藏分割线 */
-.btn-group:hover .btn-group-item::after,
-.btn-group:focus-within .btn-group-item::after {
+.gantt-btn-group:hover .gantt-btn-group-item::after,
+.gantt-btn-group:focus-within .gantt-btn-group-item::after {
   opacity: 0;
 }
 
 /* 普通按钮组样式 */
-.btn-group:not(.add-btn-group) .btn-group-item {
+.gantt-btn-group:not(.gantt-add-btn-group) .gantt-btn-group-item {
   border-color: #dcdfe6;
 }
 
-.btn-group:not(.add-btn-group) .btn-group-item:hover {
+.gantt-btn-group:not(.gantt-add-btn-group) .gantt-btn-group-item:hover {
   background: #ecf5ff;
   border-color: #b3d8ff;
   color: #409eff;
   z-index: 1;
 }
 
-.btn-group:not(.add-btn-group) .btn-group-item:focus {
+.gantt-btn-group:not(.gantt-add-btn-group) .gantt-btn-group-item:focus {
   background: #ecf5ff;
   border-color: #409eff;
   color: #409eff;
@@ -1208,54 +1208,54 @@ onUnmounted(() => {
   box-shadow: inset 0 0 0 1px #409eff;
 }
 
-.btn-group:not(.add-btn-group) .btn-group-item:active {
+.gantt-btn-group:not(.gantt-add-btn-group) .gantt-btn-group-item:active {
   background: #d9ecff;
   border-color: #409eff;
   color: #409eff;
 }
 
 /* 按钮组图标样式 */
-.btn-group-item .btn-icon {
+.gantt-btn-group-item .gantt-btn-icon {
   width: 16px;
   height: 16px;
   stroke-width: 2;
 }
 
 /* 暗黑模式下的按钮组样式 */
-:global(html[data-theme='dark']) .btn-group {
+:global(html[data-theme='dark']) .gantt-btn-group {
   box-shadow:
     0 1px 3px 0 rgba(0, 0, 0, 0.3),
     0 1px 2px -1px rgba(0, 0, 0, 0.3);
 }
 
-:global(html[data-theme='dark']) .btn-group:hover,
-:global(html[data-theme='dark']) .btn-group:focus-within {
+:global(html[data-theme='dark']) .gantt-btn-group:hover,
+:global(html[data-theme='dark']) .gantt-btn-group:focus-within {
   box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.5);
 }
 
-:global(html[data-theme='dark']) .add-btn-group .btn-group-item {
+:global(html[data-theme='dark']) .add-btn-group .gantt-btn-group-item {
   background: #337ecc;
   border-color: #337ecc;
   color: #ffffff;
 }
 
-:global(html[data-theme='dark']) .add-btn-group .btn-group-item:hover {
+:global(html[data-theme='dark']) .add-btn-group .gantt-btn-group-item:hover {
   background: #4d94d4;
   border-color: #4d94d4;
 }
 
-:global(html[data-theme='dark']) .add-btn-group .btn-group-item:focus {
+:global(html[data-theme='dark']) .add-btn-group .gantt-btn-group-item:focus {
   background: #2c5aa0;
   border-color: #2c5aa0;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
 }
 
-:global(html[data-theme='dark']) .add-btn-group .btn-group-item:active {
+:global(html[data-theme='dark']) .add-btn-group .gantt-btn-group-item:active {
   background: #1f4872;
   border-color: #1f4872;
 }
 
-:global(html[data-theme='dark']) .btn-group:not(.add-btn-group) .btn-group-item {
+:global(html[data-theme='dark']) .gantt-btn-group:not(.gantt-add-btn-group) .gantt-btn-group-item {
   background: #2c2c2c;
   border-color: #4c4c4c;
   color: #e5e5e5;
diff --git a/src/components/MilestoneDialog.vue b/src/components/MilestoneDialog.vue
index a0ff143..fafd8d8 100644
--- a/src/components/MilestoneDialog.vue
+++ b/src/components/MilestoneDialog.vue
@@ -394,17 +394,17 @@ const t = (key: string) => {
 
       <div class="milestone-dialog-footer">
         <div class="milestone-dialog-footer-left">
-          <button v-if="isEditMode" type="button" class="btn btn-danger" @click="handleDelete">
+          <button v-if="isEditMode" type="button" class="gantt-btn gantt-btn-danger" @click="handleDelete">
             {{ globalT.delete }}
           </button>
         </div>
         <div class="milestone-dialog-footer-right">
-          <button type="button" class="btn btn-default" @click="closeDialog">
+          <button type="button" class="gantt-btn gantt-btn-default" @click="closeDialog">
             {{ globalT.cancel }}
           </button>
           <button
             type="button"
-            class="btn btn-primary"
+            class="gantt-btn gantt-btn-primary"
             :disabled="!isFormValid"
             @click="handleSave"
           >
diff --git a/src/components/TaskDrawer.vue b/src/components/TaskDrawer.vue
index c03a52c..5ac0cba 100644
--- a/src/components/TaskDrawer.vue
+++ b/src/components/TaskDrawer.vue
@@ -935,7 +935,7 @@ function confirmTimer(desc: string) {
           <button
             v-if="isEdit && task"
             type="button"
-            class="btn btn-danger"
+            class="gantt-btn gantt-btn-danger"
             :disabled="submitting"
             @click="handleDelete"
           >
@@ -958,10 +958,10 @@ function confirmTimer(desc: string) {
           />
         </div>
         <div class="footer-right">
-          <button type="button" class="btn btn-default" @click="handleClose">{{ t.cancel }}</button>
+          <button type="button" class="gantt-btn gantt-btn-default" @click="handleClose">{{ t.cancel }}</button>
           <button
             type="button"
-            class="btn btn-primary"
+            class="gantt-btn gantt-btn-primary"
             :disabled="submitting"
             @click="handleSubmit"
           >
diff --git a/src/styles/app.css b/src/styles/app.css
index 5d2278e..98e7a1e 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -1,5 +1,5 @@
-/* 通用 .btn 基础按钮样式 */
-.btn {
+/* 通用 .gantt-btn 基础按钮样式 */
+.gantt-btn {
   padding: 10px 20px;
   border-radius: 4px;
   font-size: 14px;
@@ -17,66 +17,66 @@
   outline: none;
 }
 
-.btn:disabled {
+.gantt-btn:disabled {
   cursor: not-allowed;
   opacity: 0.6;
 }
 
-/* 通用 .btn-default 按钮样式（亮色+暗黑模式） */
-.btn-default {
+/* 通用 .gantt-btn-default 按钮样式（亮色+暗黑模式） */
+.gantt-btn-default {
   background: var(--gantt-bg-secondary, #f5f7fa);
   border-color: var(--gantt-border-medium, #dcdfe6);
   color: var(--gantt-text-secondary, #8d9095);
 }
 
-.btn-default:hover:not(:disabled) {
+.gantt-btn-default:hover:not(:disabled) {
   border-color: var(--gantt-border-dark, #c0c4cc);
   color: var(--gantt-primary, #409eff);
   background: var(--gantt-bg-hover, #f0f1f3);
 }
 
-/* 暗黑主题下 .btn-default 全局样式 */
-:global(html[data-theme='dark']) .btn-default {
+/* 暗黑主题下 .gantt-btn-default 全局样式 */
+:global(html[data-theme='dark']) .gantt-btn-default {
   background: var(--gantt-bg-tertiary, #454545) !important;
   border-color: var(--gantt-border-color, #dcdfe6) !important;
   color: var(--gantt-text-white, #ffffff) !important;
 }
 
-:global(html[data-theme='dark']) .btn-default:hover:not(:disabled) {
+:global(html[data-theme='dark']) .gantt-btn-default:hover:not(:disabled) {
   background: var(--gantt-bg-hover, rgba(255, 255, 255, 0.1)) !important;
   border-color: var(--gantt-primary, #409eff) !important;
   color: var(--gantt-primary, #409eff) !important;
 }
 
-/* 通用 .btn-primary 按钮样式 */
-.btn-primary {
+/* 通用 .gantt-btn-primary 按钮样式 */
+.gantt-btn-primary {
   background: var(--gantt-primary, #409eff);
   border-color: var(--gantt-primary, #409eff);
   color: #fff;
 }
-.btn-primary:hover:not(:disabled) {
+.gantt-btn-primary:hover:not(:disabled) {
   background: #66b1ff;
   border-color: #66b1ff;
 }
 
-/* 通用 .btn-danger 按钮样式 */
-.btn-danger {
+/* 通用 .gantt-btn-danger 按钮样式 */
+.gantt-btn-danger {
   background: var(--gantt-danger, #f56c6c);
   border-color: var(--gantt-danger, #f56c6c);
   color: #fff;
 }
-.btn-danger:hover:not(:disabled) {
+.gantt-btn-danger:hover:not(:disabled) {
   background: #f78989;
   border-color: #f78989;
 }
 
-/* 通用 .btn-warning 按钮样式 */
-.btn-warning {
+/* 通用 .gantt-btn-warning 按钮样式 */
+.gantt-btn-warning {
   background: var(--gantt-warning, #e6a23c);
   border-color: var(--gantt-warning, #e6a23c);
   color: #fff;
 }
-.btn-warning:hover:not(:disabled) {
+.gantt-btn-warning:hover:not(:disabled) {
   background: #ebb563;
   border-color: #ebb563;
 }
diff --git a/vite.config.lib.ts b/vite.config.lib.ts
index e3e5070..bdddd6f 100644
--- a/vite.config.lib.ts
+++ b/vite.config.lib.ts
@@ -15,7 +15,7 @@ const generateCssExportPlugin = () => {
 export default defineConfig({
   plugins: [vue(), generateCssExportPlugin()],
   build: {
-    outDir: '../npm-package/dist',
+    outDir: './npm-package/dist',
     emptyOutDir: true,
     lib: {
       entry: './src/index.ts',