From 1e9b5638aa36a8ce70019a9c750230ba41938327 Mon Sep 17 00:00:00 2001
From: xiaojunnuo <xiaojunnuo@qq.com>
Date: Thu, 5 Sep 2024 01:39:46 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BB=BB=E5=8A=A1=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=8B=96=E5=8A=A8=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/certd-client/package.json         |   2 +-
 .../ui/certd-client/src/style/common.less     |   6 +
 .../pipeline/component/task-form/index.vue    |  72 +++++++---
 .../views/certd/pipeline/pipeline/index.vue   | 130 +++++++++++-------
 .../src/plugins/plugin-host/lib/ssh.ts        |   4 +-
 5 files changed, 139 insertions(+), 75 deletions(-)

diff --git a/packages/ui/certd-client/package.json b/packages/ui/certd-client/package.json
index 8d423aba..89bb7e63 100644
--- a/packages/ui/certd-client/package.json
+++ b/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",
diff --git a/packages/ui/certd-client/src/style/common.less b/packages/ui/certd-client/src/style/common.less
index fc950097..df082cf3 100644
--- a/packages/ui/certd-client/src/style/common.less
+++ b/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;
 }
diff --git a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/task-form/index.vue b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/task-form/index.vue
index 1e2341f6..a477463c 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/task-form/index.vue
+++ b/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">
-                <template #renderItem="{ item, index }">
-                  <a-list-item>
-                    <template #actions>
-                      <a key="edit" @click="stepEdit(currentTask, item, index)">编辑</a>
-                      <a key="edit" @click="stepCopy(currentTask, item, index)">复制</a>
+              <v-draggable v-model="currentTask.steps" class="step-list" handle=".handle">
+                <template #item="{ element, index }">
+                  <div class="step-row">
+                    <div class="text">
+                      <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>
-                    </template>
-                    <a-list-item-meta>
-                      <template #title>
-                        {{ item.title }}
-                      </template>
-                      <template #avatar>
-                        <fs-icon icon="ion:flash"></fs-icon>
-                      </template>
-                    </a-list-item-meta>
-                  </a-list-item>
+                      <fs-icon class="icon-button handle" title="拖动排序" icon="ion:move-outline"></fs-icon>
+                    </div>
+                  </div>
                 </template>
-              </a-list>
+              </v-draggable>
             </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>
diff --git a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue
index ad73f89f..a4c0d1c8 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue
+++ b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue
@@ -67,59 +67,68 @@
                 <div class="title">
                   <pi-editable v-model="stage.title" :disabled="!editMode"></pi-editable>
                 </div>
-                <div class="tasks">
-                  <div
-                    v-for="(task, taskIndex) of stage.tasks"
-                    :key="task.id"
-                    class="task-container"
-                    :class="{
-                      'first-task': taskIndex === 0
-                    }"
-                  >
-                    <div class="line">
-                      <div class="flow-line"></div>
-                      <fs-icon v-if="editMode" class="add-stage-btn" title="添加新阶段" icon="ion:add-circle" @click="stageAdd(index)"></fs-icon>
-                    </div>
-                    <div class="task">
-                      <a-button shape="round" @click="taskEdit(stage, index, task, taskIndex)">
-                        <a-popover title="步骤">
-                          <!--                          :open="true"-->
-                          <template #content>
-                            <div v-for="(item, index) of task.steps" class="flex-o w-100">
-                              <span class="ellipsis flex-1">{{ index + 1 }}. {{ item.title }} </span>
-                              <pi-status-show v-if="!editMode" :status="item.status?.result"></pi-status-show>
-                              <fs-icon
-                                v-if="!editMode"
-                                class="pointer color-blue ml-2"
-                                title="重新运行此步骤"
-                                icon="SyncOutlined"
-                                @click="run(item.id)"
-                              ></fs-icon>
-                            </div>
-                          </template>
-                          <span class="flex-o w-100">
-                            <span class="ellipsis flex-1" :class="{ 'mr-15': 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>
-                    </div>
-                  </div>
-                  <div v-if="editMode" class="task-container is-add">
-                    <div class="line">
-                      <div class="flow-line"></div>
-                    </div>
-                    <div class="task">
-                      <a-tooltip>
-                        <a-button type="dashed" shape="round" @click="taskAdd(stage, index)">
-                          <fs-icon class="font-20" icon="ion:add-circle-outline"></fs-icon>
-                          并行任务
+                <v-draggable v-model="stage.tasks" item-key="id" class="tasks" handle=".handle">
+                  <template #item="{ element: task, index: taskIndex }">
+                    <div
+                      class="task-container"
+                      :class="{
+                        'first-task': taskIndex === 0
+                      }"
+                    >
+                      <div class="line">
+                        <div class="flow-line"></div>
+                        <fs-icon v-if="editMode" class="add-stage-btn" title="添加新阶段" icon="ion:add-circle" @click="stageAdd(index)"></fs-icon>
+                      </div>
+                      <div class="task">
+                        <a-button shape="round" @click="taskEdit(stage, index, task, taskIndex)">
+                          <a-popover title="步骤" :trigger="editMode ? 'none' : 'hover'">
+                            <!--                          :open="true"-->
+                            <template #content>
+                              <div v-for="(item, index) of task.steps" class="flex-o w-100">
+                                <span class="ellipsis flex-1">{{ index + 1 }}. {{ item.title }} </span>
+                                <pi-status-show v-if="!editMode" :status="item.status?.result"></pi-status-show>
+                                <fs-icon
+                                  v-if="!editMode"
+                                  class="pointer color-blue ml-2"
+                                  title="重新运行此步骤"
+                                  icon="SyncOutlined"
+                                  @click="run(item.id)"
+                                ></fs-icon>
+                              </div>
+                            </template>
+                            <span class="flex-o w-100">
+                              <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>
-                      </a-tooltip>
+                        <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>
-                  </div>
-                </div>
+                  </template>
+                  <template #footer>
+                    <div v-if="editMode" class="task-container is-add">
+                      <div class="line">
+                        <div class="flow-line"></div>
+                      </div>
+                      <div class="task">
+                        <a-tooltip>
+                          <a-button type="dashed" shape="round" @click="taskAdd(stage, index)">
+                            <fs-icon class="font-20" icon="ion:add-circle-outline"></fs-icon>
+                            并行任务
+                          </a-button>
+                        </a-tooltip>
+                      </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 {
diff --git a/packages/ui/certd-server/src/plugins/plugin-host/lib/ssh.ts b/packages/ui/certd-server/src/plugins/plugin-host/lib/ssh.ts
index 6f09fba8..38420908 100644
--- a/packages/ui/certd-server/src/plugins/plugin-host/lib/ssh.ts
+++ b/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%');
-              if (spec.toString().trim() === '%COMSPEC%') {
+              const isCmd = await this.isCmd(conn);
+              if (!isCmd) {
                 mkdirCmd = `New-Item -ItemType Directory -Path "${filePath}" -Force`;
               } else {
                 mkdirCmd = `if not exist "${filePath}" mkdir "${filePath}"`;