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

12
npm-demo/src/components/GanttTest.vue
View File

@@ -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;
}

16
npm-webpack-demo/src/App.vue
View File

@@ -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;
}

19
package.json
View File

@@ -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": {

2
scripts/generate-css-export.js
View File

@@ -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')

10
src/components/ConfirmTimerDialog.vue
View File

@@ -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>

10
src/components/GanttConfirmDialog.vue
View File

@@ -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>

108
src/components/GanttToolbar.vue
View File

@@ -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;

6
src/components/MilestoneDialog.vue
View File

@@ -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"
>

6
src/components/TaskDrawer.vue
View File

@@ -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"
>

36
src/styles/app.css
View File

@@ -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;
}

2
vite.config.lib.ts
View File

@@ -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',