alighasami/jordium-gantt-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

支持workspace模式导入文件，css类名改名以避免和外部模块冲突

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