fix: 探针7-5体验问题修复 (#1455)

webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/comps/probe/index.vue

@@ -53,19 +53,24 @@
         <span>{{ $t('健康探测') }}：</span>
       </div>
       <div class="view-content">
-        <!-- 存活探测 -->
-        <probe-view
-          class="mr24"
-          :title="$t('存活探测')"
-          :data="processData"
-          :probe-type="'liveness'"
-        />
-        <!-- 就绪探测 -->
-        <probe-view
-          :title="$t('就绪探测')"
-          :data="processData"
-          :probe-type="'readiness'"
-        />
+        <template v-if="probeList.length">
+          <!-- 存活探测 -->
+          <probe-view
+            class="mr24"
+            :title="$t('存活探测')"
+            :data="processData"
+            :probe-type="'liveness'"
+          />
+          <!-- 就绪探测 -->
+          <probe-view
+            :title="$t('就绪探测')"
+            :data="processData"
+            :probe-type="'readiness'"
+          />
+        </template>
+        <span v-else class="probe-tag">
+          {{ $t('未启用') }}
+        </span>
       </div>
     </div>
   </div>
@@ -133,7 +138,8 @@ export default {
     },
     // 探针校验
     async probeValidate() {
-      return await this.$refs.livenessRef?.validateFun() && this.$refs.readinessRef?.validateFun();
+      await this.$refs.livenessRef?.validateFun();
+      await this.$refs.readinessRef?.validateFun();
     },
     handlerProbeChange() {
       if (this.probeList.includes(LIVENESS)) {
@@ -234,6 +240,16 @@ export default {
     .mr24 {
       margin-right: 24px;
     }
+    .probe-tag {
+      display: inline-block;
+      height: 22px;
+      padding: 0 8px;
+      font-size: 12px;
+      line-height: 22px;
+      color: #63656E;
+      background: #F0F1F5;
+      border-radius: 2px;
+    }
   }
 }
 </style>

webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/comps/probe/probe-form.vue

@@ -12,7 +12,8 @@
         :required="true"
         :property="'method'"
         :desc="{
-          html: methodHtml
+          content: `<p>${$t('成功条件')}：</p><p>HTTP Get：${$t('请求状态码为')} 2xx / 3xx</p><p>TCP Socket：${$t('指定端口可访问')}</p>`,
+          allowHTML: true,
         }"
         :error-display-type="'normal'"
       >
@@ -184,14 +185,14 @@ export default {
   },
   data() {
     return {
-      curMethod: 'http_get',
+      curMethod: 'tcp_socket',
       formData: {
         http_get: {
-          port: 80,
-          path: '/ping',
+          port: '',
+          path: '/',
         },
         tcp_socket: {
-          port: 80,
+          port: '',
         },
         initial_delay_seconds: 0,
         timeout_seconds: 1,
@@ -269,13 +270,6 @@ export default {
     };
   },
   computed: {
-    methodHtml() {
-      return `
-        <p>${this.$t('成功条件')}：</p>
-        <p>HTTP Get：${this.$t('请求状态码为')} 2xx / 3xx</p>
-        <p>TCP Socket：${this.$t('指定端口可访问')}</p>
-      `;
-    },
     localLanguage() {
       return this.$store.state.localLanguage;
     },
@@ -302,7 +296,7 @@ export default {
   },
   methods: {
     init() {
-      this.curMethod = this.formData.http_get ? 'http_get' : 'tcp_socket';
+      this.curMethod = this.formData.tcp_socket ? 'tcp_socket' : 'http_get';
     },
     // 处理表单数据，探测方法， http_get 和 tcp_socket 只能同时有一个
     formattParams() {
@@ -324,13 +318,13 @@ export default {
     setProbeMethodValue(type) {
       if (type === 'http_get') {
         this.formData[type] = {
-          port: 80,
-          path: '/ping',
+          port: '',
+          path: '/',
         };
         this.formData.tcp_socket = null;
       } else {
         this.formData[type] = {
-          port: 80,
+          port: '',
         };
         this.formData.http_get = null;
       }

webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/deploy-hook.vue

@@ -98,7 +98,7 @@
             class="pt20"
             style="position: relative;"
           >
-            <span :class="['hook-tag', { 'enabled': preFormData.enabled } ]">
+            <span :class="['hook-tag', { 'enabled': preFormData.enabled }]">
               {{ preFormData.enabled ? $t('已启用') : $t('未启用') }}
             </span>
           </bk-form-item>
@@ -107,18 +107,15 @@
             :label="`${$t('启动命令')}：`"
             style="position: relative;"
           >
-            <div v-if="preFormData.command.length">
+            <div class="hook-tag-cls" v-if="preFormData.command.length">
               <bk-tag
                 v-for="item in preFormData.command"
                 :key="item"
               >
                 {{ item }}
               </bk-tag>
             </div>
-            <div
-              v-else
-              class="pl10"
-            >
+            <div v-else>
               --
             </div>
           </bk-form-item>
@@ -128,18 +125,15 @@
             class="pt20 hook-form-cls"
             style="position: relative;"
           >
-            <div v-if="preFormData.args.length">
+            <div class="hook-tag-cls" v-if="preFormData.args.length">
               <bk-tag
                 v-for="item in preFormData.args"
                 :key="item"
               >
                 {{ item }}
               </bk-tag>
             </div>
-            <div
-              v-else
-              class="pl10"
-            >
+            <div v-else>
               --
             </div>
           </bk-form-item>
@@ -436,7 +430,6 @@ export default {
   }
 }
 .hook-tag {
-  margin-left: 6px;
   display: inline-block;
   height: 22px;
   padding: 0 8px;
@@ -453,4 +446,7 @@ export default {
 .deploy-hook-container {
   min-height: 200px;
 }
+.hook-tag-cls .bk-tag:first-child {
+  margin-left: 0px;
+}
 </style>

webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/deploy-process.vue

@@ -661,7 +661,7 @@
                 <span class="form-text">{{ formData.image || '--' }}</span>
               </bk-form-item>
               <bk-form-item :label="`${$t('启动命令')}：`">
-                <span v-if="formData.command && formData.command.length">
+                <span class="process-tag-cls" v-if="formData.command && formData.command.length">
                   <bk-tag
                     v-for="item in formData.command"
                     :key="item"
@@ -677,7 +677,7 @@
                 </span>
               </bk-form-item>
               <bk-form-item :label="`${$t('命令参数')}：`">
-                <span v-if="formData.args && formData.args.length">
+                <span class="process-tag-cls" v-if="formData.args && formData.args.length">
                   <bk-tag
                     v-for="item in formData.args"
                     :key="item"
@@ -1638,7 +1638,9 @@ export default {
 .form-detail {
   .form-text {
     color: #313238;
-    padding-left: 10px;
+  }
+  .process-tag-cls .bk-tag:first-child {
+    margin-left: 0px;
   }
 }
 .env-name {