diff --git a/packages/core/pipeline/src/core/executor.ts b/packages/core/pipeline/src/core/executor.ts
index 667ec3cfb..f9fd1d8ed 100644
--- a/packages/core/pipeline/src/core/executor.ts
+++ b/packages/core/pipeline/src/core/executor.ts
@@ -52,8 +52,10 @@ export class Executor {
     this.lastStatusMap = new RunnableCollection(lastRuntime?.pipeline);
   }
 
-  cancel() {
+  async cancel() {
     this.canceled = true;
+    this.runtime?.cancel(this.pipeline);
+    await this.onChanged(this.runtime);
   }
 
   async run(runtimeId: any = 0, triggerType: string) {
diff --git a/packages/core/pipeline/src/core/run-history.ts b/packages/core/pipeline/src/core/run-history.ts
index 855deffb1..8fa378378 100644
--- a/packages/core/pipeline/src/core/run-history.ts
+++ b/packages/core/pipeline/src/core/run-history.ts
@@ -92,6 +92,19 @@ export class RunHistory {
     this.logError(runnable, e);
   }
 
+  cancel(runnable: Runnable) {
+    const now = new Date().getTime();
+    const status = runnable.status;
+    _.merge(status, {
+      status: ResultType.canceled,
+      endTime: now,
+      result: ResultType.canceled,
+      message: "用户取消",
+    });
+
+    this.log(runnable, "任务取消");
+  }
+
   log(runnable: Runnable, text: string) {
     // @ts-ignore
     this._loggers[runnable.id].info(`[${runnable.title}]<id:${runnable.id}> [${runnable.runnableType}]`, text);
diff --git a/packages/core/pipeline/src/d.ts/pipeline.ts b/packages/core/pipeline/src/d.ts/pipeline.ts
index a73497c2f..148c12cec 100644
--- a/packages/core/pipeline/src/d.ts/pipeline.ts
+++ b/packages/core/pipeline/src/d.ts/pipeline.ts
@@ -106,6 +106,7 @@ export enum ResultType {
   start = "start",
   success = "success",
   error = "error",
+  canceled = "canceled",
   skip = "skip",
   none = "none",
 }
diff --git a/packages/ui/certd-client/src/views/certd/pipeline/api.ts b/packages/ui/certd-client/src/views/certd/pipeline/api.ts
index 948d0049d..ffc64ffd8 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/api.ts
+++ b/packages/ui/certd-client/src/views/certd/pipeline/api.ts
@@ -67,6 +67,14 @@ export function Trigger(id: any) {
   });
 }
 
+export function Cancel(historyId: any) {
+  return request({
+    url: apiPrefix + "/cancel",
+    method: "post",
+    params: { historyId }
+  });
+}
+
 export async function GetFiles(pipelineId: number) {
   return request({
     url: historyApiPrefix + "/files",
diff --git a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/history-timeline-item.vue b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/history-timeline-item.vue
index 6b8ec8489..11568b9d5 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/history-timeline-item.vue
+++ b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/history-timeline-item.vue
@@ -9,6 +9,8 @@
 
       <a-tag v-if="isCurrent" class="pointer" color="green" :closable="true" @close="cancel">当前</a-tag>
       <a-tag v-else-if="!editMode" class="pointer" color="blue" @click="view">查看</a-tag>
+
+      <a-tag v-if="status.value === 'start'" class="pointer" color="red" @click="cancelTask">取消</a-tag>
     </p>
   </a-timeline-item>
 </template>
@@ -16,6 +18,8 @@
 <script lang="ts">
 import { defineComponent, ref, provide, Ref, watch, computed } from "vue";
 import { statusUtil } from "/@/views/certd/pipeline/pipeline/utils/util.status";
+import * as api from "../../api";
+import { Modal, notification } from "ant-design-vue";
 export default defineComponent({
   name: "PiHistoryTimelineItem",
   props: {
@@ -38,7 +42,7 @@ export default defineComponent({
     }
   },
   emits: ["view", "cancel"],
-  setup(props, ctx) {
+  setup(props: any, ctx: any) {
     const status = computed(() => {
       return statusUtil.get(props.runnable?.status?.result);
     });
@@ -49,10 +53,25 @@ export default defineComponent({
     function cancel() {
       ctx.emit("cancel");
     }
+    function cancelTask() {
+      Modal.confirm({
+        title: "确认取消",
+        content: "确认取消该任务吗？",
+        okText: "确认",
+        cancelText: "取消",
+        onOk: async () => {
+          await api.Cancel(props.runnable.id);
+        }
+      });
+      notification.success({
+        message: "任务取消成功"
+      });
+    }
     return {
       status,
       cancel,
-      view
+      view,
+      cancelTask
     };
   }
 });
diff --git a/packages/ui/certd-server/src/modules/pipeline/controller/pipeline-controller.ts b/packages/ui/certd-server/src/modules/pipeline/controller/pipeline-controller.ts
index be244b30d..d98b4c67b 100644
--- a/packages/ui/certd-server/src/modules/pipeline/controller/pipeline-controller.ts
+++ b/packages/ui/certd-server/src/modules/pipeline/controller/pipeline-controller.ts
@@ -11,6 +11,7 @@ import { CrudController } from '../../../basic/crud-controller';
 import { PipelineService } from '../service/pipeline-service';
 import { PipelineEntity } from '../entity/pipeline';
 import { Constants } from '../../../basic/constants';
+import { HistoryService } from '../service/history-service';
 
 /**
  * 证书
@@ -20,6 +21,8 @@ import { Constants } from '../../../basic/constants';
 export class PipelineController extends CrudController<PipelineService> {
   @Inject()
   service: PipelineService;
+  @Inject()
+  historyService: HistoryService;
 
   getService() {
     return this.service;
@@ -77,4 +80,11 @@ export class PipelineController extends CrudController<PipelineService> {
     await this.service.trigger(id);
     return this.ok({});
   }
+
+  @Post('/cancel', { summary: Constants.per.authOnly })
+  async cancel(@Query('historyId') historyId) {
+    await this.historyService.checkUserId(historyId, this.ctx.user.id);
+    await this.service.cancel(historyId);
+    return this.ok({});
+  }
 }
diff --git a/packages/ui/certd-server/src/modules/pipeline/service/pipeline-service.ts b/packages/ui/certd-server/src/modules/pipeline/service/pipeline-service.ts
index 2aff0361f..879543128 100644
--- a/packages/ui/certd-server/src/modules/pipeline/service/pipeline-service.ts
+++ b/packages/ui/certd-server/src/modules/pipeline/service/pipeline-service.ts
@@ -4,7 +4,7 @@ import { In, Repository } from 'typeorm';
 import { BaseService } from '../../../basic/base-service';
 import { PipelineEntity } from '../entity/pipeline';
 import { PipelineDetail } from '../entity/vo/pipeline-detail';
-import { Executor, Pipeline, RunHistory } from '@certd/pipeline';
+import { Executor, Pipeline, ResultType, RunHistory } from '@certd/pipeline';
 import { AccessService } from './access-service';
 import { DbStorage } from './db-storage';
 import { StorageService } from './storage-service';
@@ -235,7 +235,13 @@ export class PipelineService extends BaseService<PipelineEntity> {
   async cancel(historyId: number) {
     const executor = runningTasks.get(historyId);
     if (executor) {
-      executor.cancel();
+      await executor.cancel();
+    } else {
+      const entity = await this.historyService.info(historyId);
+      const pipeline: Pipeline = JSON.parse(entity.pipeline);
+      pipeline.status.status = ResultType.canceled;
+      const runtime = new RunHistory(historyId, null, pipeline);
+      await this.saveHistory(runtime);
     }
   }