perf: 任务支持拖动排序

packages/ui/certd-client/package.json

@@ -55,7 +55,7 @@
     "vue-cropperjs": "^5.0.0",
     "vue-i18n": "^9.10.2",
     "vue-router": "^4.3.0",
-    "vuedraggable": "^2.24.3"
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@certd/pipeline": "^1.24.1",

packages/ui/certd-client/src/style/common.less

@@ -74,6 +74,9 @@ h1, h2, h3, h4, h5, h6 {
 .ml-5{
   margin-left:5px;
 }
+.ml-10{
+  margin-left:10px;
+}
 .ml-20{
   margin-left:20px;
 }
@@ -84,6 +87,9 @@ h1, h2, h3, h4, h5, h6 {
 .mr-5{
   margin-right: 5px;
 }
+.mr-10{
+  margin-right: 10px;
+}
 .mr-20{
   margin-right: 20px;
 }

packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/task-form/index.vue

@@ -43,25 +43,22 @@
                   <a-button type="primary" @click="stepAdd(currentTask)">添加步骤</a-button>
                 </template>
               </a-descriptions>
-              <a-list class="step-list" item-layout="horizontal" :data-source="currentTask.steps">
+              <v-draggable v-model="currentTask.steps" class="step-list" handle=".handle">
-                <template #renderItem="{ item, index }">
+                <template #item="{ element, index }">
-                  <a-list-item>
+                  <div class="step-row">
-                    <template #actions>
+                    <div class="text">
-                      <a key="edit" @click="stepEdit(currentTask, item, index)">编辑</a>
-                      <a key="edit" @click="stepCopy(currentTask, item, index)">复制</a>
-                      <a key="remove" @click="stepDelete(currentTask, index)">删除</a>
-                    </template>
-                    <a-list-item-meta>
-                      <template #title>
-                        {{ item.title }}
-                      </template>
-                      <template #avatar>
                       <fs-icon icon="ion:flash"></fs-icon>
+                      <h4 class="title">{{ element.title }}</h4>
+                    </div>
+                    <div class="action">
+                      <a key="edit" @click="stepEdit(currentTask, element, index)">编辑</a>
+                      <a key="edit" @click="stepCopy(currentTask, element, index)">复制</a>
+                      <a key="remove" @click="stepDelete(currentTask, index)">删除</a>
+                      <fs-icon class="icon-button handle" title="拖动排序" icon="ion:move-outline"></fs-icon>
+                    </div>
+                  </div>
                 </template>
-                    </a-list-item-meta>
+              </v-draggable>
-                  </a-list-item>
-                </template>
-              </a-list>
             </a-form-item>
           </div>
         </a-form>
@@ -85,10 +82,10 @@ import { nanoid } from "nanoid";
 import PiStepForm from "../step-form/index.vue";
 import { Modal } from "ant-design-vue";
 import { CopyOutlined } from "@ant-design/icons-vue";
-
+import VDraggable from "vuedraggable";
 export default {
   name: "PiTaskForm",
-  components: { CopyOutlined, PiStepForm },
+  components: { CopyOutlined, PiStepForm, VDraggable },
   props: {
     editMode: {
       type: Boolean,
@@ -268,5 +265,42 @@ export default {
   .ant-list .ant-list-item .ant-list-item-meta .ant-list-item-meta-title {
     margin: 0;
   }
+  .ant-list .ant-list-item .ant-list-item-action {
+    display: flex;
+    > li {
+      display: flex;
+      align-items: center;
+    }
+  }
+  .step-list {
+    padding: 10px;
+    .icon-button {
+      font-size: 18px;
+      color: #1677ff;
+      cursor: pointer;
+    }
+
+    .step-row {
+      padding: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .text {
+        display: flex;
+        > * {
+          margin: 0px;
+          margin-right: 15px;
+        }
+      }
+      .action {
+        display: flex;
+        align-items: center;
+        > * {
+          margin-right: 15px;
+          font-size: 14px;
+        }
+      }
+    }
+  }
 }
 </style>

packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue

@@ -67,10 +67,9 @@
                 <div class="title">
                   <pi-editable v-model="stage.title" :disabled="!editMode"></pi-editable>
                 </div>
-                <div class="tasks">
+                <v-draggable v-model="stage.tasks" item-key="id" class="tasks" handle=".handle">
+                  <template #item="{ element: task, index: taskIndex }">
                     <div
-                    v-for="(task, taskIndex) of stage.tasks"
-                    :key="task.id"
                       class="task-container"
                       :class="{
                         'first-task': taskIndex === 0
@@ -82,7 +81,7 @@
                       </div>
                       <div class="task">
                         <a-button shape="round" @click="taskEdit(stage, index, task, taskIndex)">
-                        <a-popover title="步骤">
+                          <a-popover title="步骤" :trigger="editMode ? 'none' : 'hover'">
                             <!--                          :open="true"-->
                             <template #content>
                               <div v-for="(item, index) of task.steps" class="flex-o w-100">
@@ -98,14 +97,23 @@
                               </div>
                             </template>
                             <span class="flex-o w-100">
-                            <span class="ellipsis flex-1" :class="{ 'mr-15': editMode }">{{ task.title }}</span>
+                              <span class="ellipsis flex-1 task-title" :class="{ 'in-edit': editMode }">{{ task.title }}</span>
                               <pi-status-show :status="task.status?.result"></pi-status-show>
                             </span>
                           </a-popover>
                         </a-button>
-                      <fs-icon v-if="editMode" class="copy" title="复制" icon="ion:copy-outline" @click="taskCopy(stage, index, task)"></fs-icon>
+                        <fs-icon
+                          v-if="editMode"
+                          class="action copy"
+                          title="复制"
+                          icon="ion:copy-outline"
+                          @click="taskCopy(stage, index, task)"
+                        ></fs-icon>
+                        <fs-icon v-if="editMode" class="handle action drag" title="拖动排序" icon="ion:move-outline"></fs-icon>
                       </div>
                     </div>
+                  </template>
+                  <template #footer>
                     <div v-if="editMode" class="task-container is-add">
                       <div class="line">
                         <div class="flow-line"></div>
@@ -119,7 +127,8 @@
                         </a-tooltip>
                       </div>
                     </div>
-                </div>
+                  </template>
+                </v-draggable>
               </div>
 
               <div v-if="editMode" class="stage last-stage">
@@ -235,6 +244,7 @@ import PiTriggerForm from "./component/trigger-form/index.vue";
 import PiNotificationForm from "./component/notification-form/index.vue";
 import PiTaskView from "./component/task-view/index.vue";
 import PiStatusShow from "./component/status-show.vue";
+import VDraggable from "vuedraggable";
 import _ from "lodash-es";
 import { message, Modal, notification } from "ant-design-vue";
 import { nanoid } from "nanoid";
@@ -245,7 +255,7 @@ import { FsIcon } from "@fast-crud/fast-crud";
 export default defineComponent({
   name: "PipelineEdit",
   // eslint-disable-next-line vue/no-unused-components
-  components: { FsIcon, PiHistoryTimelineItem, PiTaskForm, PiTriggerForm, PiTaskView, PiStatusShow, PiNotificationForm },
+  components: { FsIcon, PiHistoryTimelineItem, PiTaskForm, PiTriggerForm, PiTaskView, PiStatusShow, PiNotificationForm, VDraggable },
   props: {
     pipelineId: {
       type: [Number, String],
@@ -785,14 +795,28 @@ export default defineComponent({
               height: 100%;
               z-index: 2;
 
-              .copy {
+              .task-title {
+                &.in-edit {
+                  margin-right: 28px;
+                }
+              }
+
+              .action {
                 position: absolute;
                 right: 60px;
                 top: 18px;
+                //font-size: 18px;
                 cursor: pointer;
+                z-index: 10;
                 &:hover {
                   color: #1890ff;
                 }
+                &.copy {
+                  right: 80px;
+                }
+                &.drag {
+                  right: 60px;
+                }
               }
 
               .ant-btn {

packages/ui/certd-server/src/plugins/plugin-host/lib/ssh.ts

@@ -195,8 +195,8 @@ export class SshClient {
                 this.logger.info('请注意：windows下，文件目录分隔应该写成\\而不是/');
                 this.logger.info('--------------------------');
               }
-              const spec = await conn.exec('echo %COMSPEC%');
+              const isCmd = await this.isCmd(conn);
-              if (spec.toString().trim() === '%COMSPEC%') {
+              if (!isCmd) {
                 mkdirCmd = `New-Item -ItemType Directory -Path "${filePath}" -Force`;
               } else {
                 mkdirCmd = `if not exist "${filePath}" mkdir "${filePath}"`;