v1.7.0-rc.1 Add TaskList and TaskBar Custom contextMenu

demo/App.vue

@@ -733,6 +733,12 @@ const handleTaskRowMoved = async (payload: {
   //   showMessage('保存失败，请刷新页面', 'error', { closable: true })
   // }
 }
+
+// 自定义右键菜单操作处理
+const handleCustomMenuAction = (action: string, task: Task, onClose: () => void) => {
+  showMessage(`自定义操作: ${action} - 任务: ${task.name}`, 'info', { closable: true })
+  onClose()
+}
 </script>
 
 <template>
@@ -1233,6 +1239,7 @@ const handleTaskRowMoved = async (payload: {
         :on-language-change="handleLanguageChange"
         :on-theme-change="handleThemeChange"
         :task-list-column-render-mode="taskListColumnRenderMode"
+        :use-default-context-menu="true"
         @milestone-saved="handleMilestoneSaved"
         @milestone-deleted="handleMilestoneDeleted"
         @milestone-icon-changed="handleMilestoneIconChanged"
@@ -1363,8 +1370,39 @@ const handleTaskRowMoved = async (payload: {
         </TaskListColumn>
         <TaskListColumn prop="startDate" :label="t.startDate" width="200" align="center" />
         <TaskListColumn prop="endDate" :label="t.endDate" width="200" align="center" />
+
+        <!-- 自定义 TaskBar 右键菜单 - 声明此 slot 将使用自定义菜单 -->
+        <template #task-bar-context-menu="{ task, position, visible, onClose }">
+          <Teleport to="body">
+            <div
+              v-if="visible && task"
+              class="custom-menu"
+              :style="{
+                left: `${position.x}px`,
+                top: `${position.y}px`,
+              }"
+            >
+              <div class="custom-menu-header">自定义甘特图菜单</div>
+              <div class="custom-menu-item" @click="handleCustomMenuAction('extend', task, onClose)">
+                ➡️ 延长任务
+              </div>
+              <div class="custom-menu-item" @click="handleCustomMenuAction('move', task, onClose)">
+                📅 移动任务
+              </div>
+              <div class="custom-menu-divider"></div>
+              <div class="custom-menu-item" @click="handleCustomMenuAction('copy', task, onClose)">
+                📄 复制任务
+              </div>
+              <div class="custom-menu-divider"></div>
+              <div class="custom-menu-item" @click="onClose">❌ 取消</div>
+            </div>
+          </Teleport>
+        </template>
+
+        <!-- TaskList 不声明 slot，将使用内置默认菜单 -->
       </GanttChart>
     </div>
+
     <div class="license-info">
       <span>MIT License @ 2025 JORDIUM.COM</span>
       <a href="https://opensource.org/licenses/MIT">
@@ -2739,4 +2777,84 @@ const handleTaskRowMoved = async (payload: {
 :global(html[data-theme='dark']) :deep(.task-row-info:hover) {
   background: linear-gradient(90deg, #353535 0%, #3d3d3d 100%) !important;
 }
+
+/* 自定义右键菜单样式 */
+.custom-menu {
+  position: fixed;
+  z-index: 999999 !important;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  min-width: 200px;
+  padding: 8px 0;
+  font-size: 14px;
+}
+
+.custom-menu-header {
+  padding: 10px 16px;
+  font-weight: bold;
+  color: #333;
+  background: #f8f8f8;
+  border-bottom: 1px solid #eee;
+  margin-bottom: 4px;
+}
+
+.custom-menu-item {
+  padding: 10px 16px;
+  cursor: pointer;
+  transition: background 0.2s;
+  user-select: none;
+}
+
+.custom-menu-item:hover {
+  background: #f0f0f0;
+}
+
+.custom-menu-item.danger {
+  color: #ff4d4f;
+}
+
+.custom-menu-item.danger:hover {
+  background: #fff1f0;
+}
+
+.custom-menu-divider {
+  height: 1px;
+  background: #eee;
+  margin: 4px 0;
+}
+
+/* 暗色主题下的自定义菜单 */
+:global(html[data-theme='dark']) .custom-menu {
+  background: #2a2a2a;
+  border-color: #444;
+}
+
+:global(html[data-theme='dark']) .custom-menu-header {
+  background: #1e1e1e;
+  color: #e0e0e0;
+  border-bottom-color: #444;
+}
+
+:global(html[data-theme='dark']) .custom-menu-item {
+  color: #e0e0e0;
+}
+
+:global(html[data-theme='dark']) .custom-menu-item:hover {
+  background: #353535;
+}
+
+:global(html[data-theme='dark']) .custom-menu-item.danger {
+  color: #ff6b6b;
+}
+
+:global(html[data-theme='dark']) .custom-menu-item.danger:hover {
+  background: #3a2020;
+}
+
+:global(html[data-theme='dark']) .custom-menu-divider {
+  background: #444;
+}
 </style>
+