From 27301434efa30a8d0e1bede0e662c9b89d838593 Mon Sep 17 00:00:00 2001
From: wmh <3303710797@qq.com>
Date: Thu, 14 Nov 2024 14:38:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Smart=20=E5=BA=94=E7=94=A8=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E5=8C=85=E6=97=B6=EF=BC=8C=E5=A2=9E=E5=BC=BA=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E7=9A=84=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=20&=20Co?=
 =?UTF-8?q?de=20Formatt=20(#1730)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/uploader/index.vue         | 325 +++++++++---------
 webfe/package_vue/src/language/lang/en.js     |   1 +
 webfe/package_vue/src/language/lang/zh.js     |   1 +
 .../dev-center/app/engine/packages/index.vue  | 223 ++++++------
 .../src/views/dev-center/create-app/smart.vue | 279 +++++++--------
 5 files changed, 425 insertions(+), 404 deletions(-)

diff --git a/webfe/package_vue/src/components/uploader/index.vue b/webfe/package_vue/src/components/uploader/index.vue
index cfa60f43a6..aa37f75c7b 100644
--- a/webfe/package_vue/src/components/uploader/index.vue
+++ b/webfe/package_vue/src/components/uploader/index.vue
@@ -1,7 +1,7 @@
 <template>
   <article
     class="config-upload"
-    :class="{ 'content-hover': beforeUpload, 'isdrag': isdrag }"
+    :class="{ 'content-hover': beforeUpload, isdrag: isdrag }"
   >
     <!--上传界面-->
     <section
@@ -13,7 +13,7 @@
         v-bind="{ acceptTips }"
       >
         <span class="content-icon"><i class="paasng-icon paasng-upload-2" /></span>
-        <span class="content-drop"> {{ $t('点击选择或拖拽文件至此') }} </span>
+        <span class="content-drop">{{ $t('点击选择或拖拽文件至此') }}</span>
         <span class="content-tip">{{ acceptTips }}</span>
       </slot>
     </section>
@@ -26,10 +26,12 @@
         name="upload-file"
         v-bind="{ beforeAbortUpload, file }"
       >
-        <span class="file-abort"><i
-          class="paasng-icon paasng-close-circle-shape"
-          @click="beforeAbortUpload"
-        /></span>
+        <span class="file-abort">
+          <i
+            class="paasng-icon paasng-close-circle-shape"
+            @click="beforeAbortUpload"
+          />
+        </span>
         <div class="file-info">
           <span class="info-icon"><i class="paasng-icon paasng-order-shape" /></span>
           <div class="info-name">
@@ -45,7 +47,9 @@
           <span
             class="info-status"
             :class="{ 'fail-message': file.hasError }"
-          >{{ fileStatusMap[file.status] || file.errorMsg }}</span>
+          >
+            {{ fileStatusMap[file.status] || file.errorMsg }}
+          </span>
         </div>
       </slot>
     </section>
@@ -68,7 +72,7 @@
           :disabled="!beforeUpload && !isdrag"
           type="file"
           @change="handleChange"
-        >
+        />
       </slot>
     </section>
     <!--上传提示-->
@@ -83,7 +87,8 @@
   </article>
 </template>
 
-<script>export default {
+<script>
+export default {
   name: 'ImportConfigurationUpload',
   props: {
     // 上传至服务器的名称
@@ -110,7 +115,7 @@
     },
     // 最大文件大小
     maxSize: {
-      type: Number,
+      type: [Number, String],
       default: 500, // 单位M
     },
     // 请求头
@@ -207,7 +212,7 @@
         message: '',
         success: true,
       };
-      if (file.size > (this.maxSize * 1024 * 1024)) {
+      if (file.size > this.maxSize * 1024 * 1024) {
         validate.success = false;
         validate.message = `${this.$t('文件不能超过')}${this.maxSize} MB`;
       }
@@ -217,7 +222,9 @@
       }
       if (this.validateName && !this.validateName.test(file.name)) {
         validate.success = false;
-        validate.message = this.$t('格式错误，只能包含字母(a-zA-Z)、数字(0-9)和半角连接符(-)、下划线(_)、空格( )和点(.)');
+        validate.message = this.$t(
+          '格式错误，只能包含字母(a-zA-Z)、数字(0-9)和半角连接符(-)、下划线(_)、空格( )和点(.)'
+        );
       }
       if (!validate.success) {
         this.$bkMessage({
@@ -290,7 +297,7 @@
       if (xhr.upload) {
         xhr.upload.onprogress = (e) => {
           if (e.total > 0) {
-            e.percent = Math.round(e.loaded * 100 / e.total);
+            e.percent = Math.round((e.loaded * 100) / e.total);
           }
           option.onProgress(e);
         };
@@ -386,167 +393,167 @@
 </script>
 
 <style lang="scss" scoped>
-    @import "./common";
-    $contentBackground: #f5f9ff;
-    $whiteBackground: #fff;
-    $contentTipColor: #979ba5;
-    $grayBackground: #f0f1f5;
+@import './common';
+$contentBackground: #f5f9ff;
+$whiteBackground: #fff;
+$contentTipColor: #979ba5;
+$grayBackground: #f0f1f5;
 
-    @mixin layout-flex($flexDirection, $alignItems, $justifyContent) {
-      display: flex;
-      flex-direction: $flexDirection;
-      align-items: $alignItems;
-      justify-content: $justifyContent;
-    }
-    @mixin content-hover {
-      background: $contentBackground;
+@mixin layout-flex($flexDirection, $alignItems, $justifyContent) {
+  display: flex;
+  flex-direction: $flexDirection;
+  align-items: $alignItems;
+  justify-content: $justifyContent;
+}
+@mixin content-hover {
+  background: $contentBackground;
 
-      @include border-dashed-1px($primaryFontColor);
-    }
+  @include border-dashed-1px($primaryFontColor);
+}
+
+.content-hover {
+  cursor: pointer;
+  &:hover {
+    @include content-hover;
+  }
+}
+article {
+  .isdrag {
+    @include content-hover;
+  }
+}
+.config-upload {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 2px;
+  background: $whiteBackground;
 
-    .content-hover {
+  @include layout-flex(column, center, flex-start);
+  @include border-dashed-1px($unsetColor);
+  &-content {
+    padding: 70px 0 100px 0;
+    @include layout-flex(column, center, flex-start);
+    .content-icon {
+      height: 64px;
+      width: 64px;
+      text-align: center;
+      font-size: 50px;
+      color: #979ba5;
+    }
+    .content-drop {
+      margin-top: 10px;
+      line-height: 19px;
+      font-size: 14px;
+      font-weight: bold;
+      color: $defaultFontColor;
+    }
+    .content-tip {
+      width: 440px;
+      text-align: center;
+      margin-top: 6px;
+      line-height: 16px;
+      color: #979ba5;
+      font-size: 12px;
+    }
+  }
+  &-file {
+    width: 100%;
+    padding: 80px 0;
+    .file-abort {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+      font-size: 16px;
+      text-align: center;
+      color: $slightFontColor;
+      z-index: 2;
       cursor: pointer;
       &:hover {
-        @include content-hover
-        }
-    }
-    article {
-      .isdrag {
-        @include content-hover
-        }
+        background: $grayBackground;
+        border-radius: 50%;
+      }
     }
-    .config-upload {
-      position: relative;
+    .file-info {
       width: 100%;
-      height: 100%;
-      border-radius: 2px;
-      background: $whiteBackground;
 
       @include layout-flex(column, center, flex-start);
-      @include border-dashed-1px($unsetColor);
-      &-content {
-        padding: 70px 0 100px 0;
-        @include layout-flex(column, center, flex-start);
-        .content-icon {
-          height: 64px;
-          width: 64px;
-          text-align: center;
-          font-size: 50px;
-          color: #979BA5;
-        }
-        .content-drop {
-          margin-top: 10px;
-          line-height: 19px;
-          font-size: 14px;
-          font-weight: bold;
-          color: $defaultFontColor;
-        }
-        .content-tip {
-          width: 440px;
-          text-align: center;
-          margin-top: 6px;
-          line-height: 16px;
-          color: #979ba5;
-          font-size: 12px;
-        }
+      .info-icon {
+        height: 56px;
+        width: 48px;
+        font-size: 50px;
+        color: $primaryFontColor;
       }
-      &-file {
-        width: 100%;
-        padding: 80px 0;
-        .file-abort {
-          position: absolute;
-          right: 0;
-          top: 0;
-          width: 32px;
-          height: 32px;
-          line-height: 32px;
-          font-size: 16px;
-          text-align: center;
-          color: $slightFontColor;
-          z-index: 2;
-          cursor: pointer;
-          &:hover {
-            background: $grayBackground;
-            border-radius: 50%;
-          }
-        }
-        .file-info {
-          width: 100%;
-
-          @include layout-flex(column, center, flex-start);
-          .info-icon {
-            height: 56px;
-            width: 48px;
-            font-size: 50px;
-            color: $primaryFontColor;
-          }
-          .info-name {
-            margin-top: 14px;
-            font-size: 14px;
-            font-weight: bold;
-            color: $defaultFontColor;
-            line-height: 19px;
-          }
-          .info-progress {
-            margin-top: 21px;
-            width: 76%;
-            height: 6px;
-            background: $grayBackground;
-            border-radius: 3px;
-            .progress-bar {
-              width: 10%;
-              height: 6px;
-              border-radius: 3px;
-              background: $primaryFontColor;
-              transition: width .3s ease-in-out;
-            }
-            .fail-background {
-              background: $failFontColor;
-            }
-          }
-          .info-status {
-            margin-top: 17px;
-            padding: 0 20px;
-            line-height: 16px;
-            color: $primaryFontColor;
-            word-break: break-all;
-          }
-          .fail-message {
-            color: $failFontColor;
-          }
-        }
+      .info-name {
+        margin-top: 14px;
+        font-size: 14px;
+        font-weight: bold;
+        color: $defaultFontColor;
+        line-height: 19px;
       }
-      &-input {
-        input {
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
-          cursor: pointer;
-          opacity: 0;
+      .info-progress {
+        margin-top: 21px;
+        width: 76%;
+        height: 6px;
+        background: $grayBackground;
+        border-radius: 3px;
+        .progress-bar {
+          width: 10%;
+          height: 6px;
+          border-radius: 3px;
+          background: $primaryFontColor;
+          transition: width 0.3s ease-in-out;
         }
-        .input-hide {
-          cursor: default;
+        .fail-background {
+          background: $failFontColor;
         }
       }
-      &-footer {
-        position: absolute;
-        bottom: 20px;
-        .footer-explain {
-          line-height: 16px;
-          color: $unsetIconColor;
-          &-button {
-            color: $primaryFontColor;
-            cursor: pointer;
-            z-index: 2;
-          }
-        }
+      .info-status {
+        margin-top: 17px;
+        padding: 0 20px;
+        line-height: 16px;
+        color: $primaryFontColor;
+        word-break: break-all;
       }
-      &:hover {
-        .config-upload-content .content-icon {
-          color: #3A84FF;
-        }
+      .fail-message {
+        color: $failFontColor;
       }
     }
+  }
+  &-input {
+    input {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      opacity: 0;
+    }
+    .input-hide {
+      cursor: default;
+    }
+  }
+  &-footer {
+    position: absolute;
+    bottom: 20px;
+    .footer-explain {
+      line-height: 16px;
+      color: $unsetIconColor;
+      &-button {
+        color: $primaryFontColor;
+        cursor: pointer;
+        z-index: 2;
+      }
+    }
+  }
+  &:hover {
+    .config-upload-content .content-icon {
+      color: #3a84ff;
+    }
+  }
+}
 </style>
diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
index c35c8cd6a4..e8f286f089 100644
--- a/webfe/package_vue/src/language/lang/en.js
+++ b/webfe/package_vue/src/language/lang/en.js
@@ -2888,4 +2888,5 @@ export default {
   '获取密码后，请在 “Welcome to code-server” 界面的 PASSWORD 处输入': 'After obtaining the password, please enter it in the PASSWORD field on the "Welcome to code-server" screen',
   沙箱资源不足: 'Insufficient Sandbox Resources',
   '沙箱功能正在灰度开放，目前沙箱资源已申请完。如需体验，请联系 BK 助手。': 'The sandbox feature is currently in phased rollout, and all sandbox resources have been allocated. If you wish to experience it, please contact the BK Assistant.',
+  平台不支持该增强服务: 'The platform does not support this add-on service',
 };
diff --git a/webfe/package_vue/src/language/lang/zh.js b/webfe/package_vue/src/language/lang/zh.js
index 53098bb8d2..9dda4c1a02 100644
--- a/webfe/package_vue/src/language/lang/zh.js
+++ b/webfe/package_vue/src/language/lang/zh.js
@@ -3025,4 +3025,5 @@ export default {
   '获取密码后，请在 “Welcome to code-server” 界面的 PASSWORD 处输入': '获取密码后，请在 “Welcome to code-server” 界面的 PASSWORD 处输入',
   沙箱资源不足: '沙箱资源不足',
   '沙箱功能正在灰度开放，目前沙箱资源已申请完。如需体验，请联系 BK 助手。': '沙箱功能正在灰度开放，目前沙箱资源已申请完。如需体验，请联系 BK 助手。',
+  平台不支持该增强服务: '平台不支持该增强服务',
 };
diff --git a/webfe/package_vue/src/views/dev-center/app/engine/packages/index.vue b/webfe/package_vue/src/views/dev-center/app/engine/packages/index.vue
index 9f69efb934..7959b85677 100644
--- a/webfe/package_vue/src/views/dev-center/app/engine/packages/index.vue
+++ b/webfe/package_vue/src/views/dev-center/app/engine/packages/index.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <div :class="['right-main',{ 'packages-wrapper': isCloudNativeApp }, { 'bottom-line': !isSmartApp }]">
+  <div :class="['right-main', { 'packages-wrapper': isCloudNativeApp }, { 'bottom-line': !isSmartApp }]">
     <app-top-bar
       v-if="!isCloudNativeApp"
       :title="$t('包版本管理')"
@@ -7,7 +7,12 @@
       :cur-module="curAppModule"
       :module-list="isLesscodeApp ? curAppModuleList : []"
     />
-    <div class="title" v-else>{{ isSmartApp ? $t('包版本管理') : $t('源码信息') }}</div>
+    <div
+      class="title"
+      v-else
+    >
+      {{ isSmartApp ? $t('包版本管理') : $t('源码信息') }}
+    </div>
     <paas-content-loader
       :is-loading="isPageLoading"
       placeholder="packages-loading"
@@ -20,7 +25,8 @@
           theme="default"
           @click="handleUpload"
         >
-          <i class="paasng-icon paasng-plus mr5" /> {{ $t('上传新版本') }}
+          <i class="paasng-icon paasng-plus mr5" />
+          {{ $t('上传新版本') }}
         </bk-button>
         <div
           v-if="isLesscodeApp"
@@ -36,7 +42,10 @@
             :target="lessCodeData.address_in_lesscode ? '_blank' : ''"
             class="link"
             @click="handleLessCode"
-          > {{ $t('点击前往') }} <i class="paasng-icon paasng-jump-link" /></a>
+          >
+            {{ $t('点击前往') }}
+            <i class="paasng-icon paasng-jump-link" />
+          </a>
         </div>
         <!-- <div class="bk-alert bk-alert-info mb10" v-if="isLesscodeApp">
                     <i class="bk-icon icon-info"></i>
@@ -93,7 +102,9 @@
           :render-header="$renderHeader"
         >
           <template slot-scope="props">
-            <span v-bk-tooltips="props.row.sha256_signature || '--'">{{ props.row.sha256_signature ? props.row.sha256_signature.substring(0, 8) : '--' }}</span>
+            <span v-bk-tooltips="props.row.sha256_signature || '--'">
+              {{ props.row.sha256_signature ? props.row.sha256_signature.substring(0, 8) : '--' }}
+            </span>
           </template>
         </bk-table-column>
         <bk-table-column
@@ -135,10 +146,10 @@
           >
             <bk-row class="mb15">
               <bk-col
-                class="pr0 f14 "
+                class="pr0 f14"
                 :span="2"
               >
-                <span class="confirm-key"> {{ $t('应用ID：') }} </span>
+                <span class="confirm-key">{{ $t('应用ID：') }}</span>
               </bk-col>
               <bk-col
                 class="pl0 f14"
@@ -152,7 +163,7 @@
                 class="pr0 f14"
                 :span="2"
               >
-                <span class="confirm-key"> {{ $t('应用名称：') }} </span>
+                <span class="confirm-key">{{ $t('应用名称：') }}</span>
               </bk-col>
               <bk-col
                 class="pl0 f14"
@@ -170,7 +181,8 @@
           class="package-data-box mb20"
         >
           <p class="package-data-title">
-            {{ key }}<span v-if="packageItem.is_default"> ({{ $t('主') }}) </span>
+            {{ key }}
+            <span v-if="packageItem.is_default">({{ $t('主') }})</span>
           </p>
           <bk-container
             :col="12"
@@ -178,10 +190,10 @@
           >
             <bk-row class="mb15">
               <bk-col
-                class="pr0 f14 "
+                class="pr0 f14"
                 :span="2"
               >
-                <span class="confirm-key"> {{ $t('开发语言：') }} </span>
+                <span class="confirm-key">{{ $t('开发语言：') }}</span>
               </bk-col>
               <bk-col
                 class="pl0 f14"
@@ -195,13 +207,15 @@
                 class="pr0 f14"
                 :span="2"
               >
-                <span class="confirm-key"> {{ $t('增强服务') }} </span>
+                <span class="confirm-key">{{ $t('增强服务') }}</span>
               </bk-col>
               <bk-col
                 class="f12 pr0 pl0 mt2"
                 :span="10"
               >
-                <span class="confirm-value"> {{ $t('增强服务只可新增，不可删除（即使在配置文件中删除了某增强服务，在平台也会保留该服务）') }} </span>
+                <span class="confirm-value">
+                  {{ $t('增强服务只可新增，不可删除（即使在配置文件中删除了某增强服务，在平台也会保留该服务）') }}
+                </span>
               </bk-col>
             </bk-row>
           </bk-container>
@@ -211,6 +225,10 @@
               :key="index"
               :class="uploadDialogConf.package.supported_services.includes(service.name) ? 'added' : 'not_supported'"
               class="package-data-rel"
+              v-bk-tooltips="{
+                content: $t('平台不支持该增强服务'),
+                disabled: uploadDialogConf.package.supported_services.includes(service.name),
+              }"
             >
               {{ service.name }}
               <i
@@ -230,7 +248,11 @@
           :max-size="maxPackageSize"
           :with-credentials="true"
           :name="'package'"
-          :accept-tips="$t('仅支持蓝鲸 S-mart 包，可以从“蓝鲸 S-mart”获取，上传成功后即可进行应用部署 仅支持 .tar 或 .tar.gz 格式的文件')"
+          :accept-tips="
+            $t(
+              '仅支持蓝鲸 S-mart 包，可以从“蓝鲸 S-mart”获取，上传成功后即可进行应用部署 仅支持 .tar 或 .tar.gz 格式的文件'
+            )
+          "
           :headers="uploadHeader"
           :on-upload-success="handleSuccess"
           :on-upload-error="handleError"
@@ -257,7 +279,8 @@
   </div>
 </template>
 
-<script>import appBaseMixin from '@/mixins/app-base-mixin.js';
+<script>
+import appBaseMixin from '@/mixins/app-base-mixin.js';
 import appTopBar from '@/components/paas-app-bar';
 import uploader from '@/components/uploader';
 
@@ -308,7 +331,7 @@ export default {
     },
   },
   watch: {
-    '$route'() {
+    $route() {
       this.isPageLoading = true;
       this.resetParams();
       this.getPackageList();
@@ -469,105 +492,93 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    .ps-table-bar {
-        .info-wrapper {
-            position: relative;
-            .link {
-                position: absolute;
-                font-size: 12px;
-                right: 10px;
-                top: 8px;
-            }
-        }
+.ps-table-bar {
+  .info-wrapper {
+    position: relative;
+    .link {
+      position: absolute;
+      font-size: 12px;
+      right: 10px;
+      top: 8px;
     }
-    .package-data-title {
-        font-size: 14px;
-        font-weight: 500;
-        color: #313238;
-        margin-bottom: 12px;
-    }
-
-    .package-data-desc {
-        font-size: 12px;
-        font-weight: 400;
-        color: #979ba5;
-    }
-
-    .package-data-services {
-        overflow: hidden;
-        margin-top: 10px;
-        li {
-            min-width: 100px;
-            height: 24px;
-            line-height: 24px;
-            display: inline-block;
-            background: #F0F1F5;
-            border-radius: 2px;
-            padding: 0 2px;
-            border-radius: 2px;
-            margin: 0 8px 8px 0;
-            text-align: center;
-            font-size: 12px;
-            color: #63656E;
-            padding: 0 10px;
+  }
+}
+.package-data-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #313238;
+  margin-bottom: 12px;
+}
 
-            &.added {
-                background: #E5F6EA;
-                color: #3FC06D;
-            }
+.package-data-desc {
+  font-size: 12px;
+  font-weight: 400;
+  color: #979ba5;
+}
 
-            &.deleted {
-                background: #F0F1F5;
-                color: #C4C6CC;
-            }
+.package-data-services {
+  overflow: hidden;
+  margin-top: 10px;
+  li {
+    min-width: 100px;
+    height: 24px;
+    line-height: 24px;
+    display: inline-block;
+    background: #f0f1f5;
+    border-radius: 2px;
+    padding: 0 2px;
+    border-radius: 2px;
+    margin: 0 8px 8px 0;
+    text-align: center;
+    font-size: 12px;
+    color: #63656e;
+    padding: 0 10px;
 
-            &.not_modified {
-                background: #FFF2DD;
-                color: #FF9C01;
-            }
-
-            &.not_supported {
-                background: #F0F1F5;
-                color: #C4C6CC;
-                position: relative;
-
-                &::after {
-                    content: "";
-                    width: 80%;
-                    height: 1px;
-                    background: #CCC;
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                }
-            }
-        }
+    &.added {
+      background: #e5f6ea;
+      color: #3fc06d;
     }
 
-    .package-data-rel{
-        position: relative;
+    &.deleted {
+      background: #f0f1f5;
+      color: #c4c6cc;
     }
 
-    .info-icon{
-        position: absolute;
-        top: 1px;
-        left: 87px;
-        color: #52525d;
+    &.not_modified {
+      background: #fff2dd;
+      color: #ff9c01;
     }
 
-    .mt2{
-        margin-top: 2px;
-    }
-    .packages-wrapper {
-        margin-bottom: 24px;
-        &.bottom-line {
-          border-bottom: 1px solid #eaebf0;
-        }
-        .title {
-            font-weight: 700;
-            font-size: 14px;
-            color: #313238;
-        }
+    &.not_supported {
+      background: #f0f1f5;
+      color: #c4c6cc;
     }
+  }
+}
+
+.package-data-rel {
+  position: relative;
+}
+
+.info-icon {
+  position: absolute;
+  top: 1px;
+  left: 87px;
+  color: #52525d;
+}
+
+.mt2 {
+  margin-top: 2px;
+}
+.packages-wrapper {
+  margin-bottom: 24px;
+  &.bottom-line {
+    border-bottom: 1px solid #eaebf0;
+  }
+  .title {
+    font-weight: 700;
+    font-size: 14px;
+    color: #313238;
+  }
+}
 </style>
diff --git a/webfe/package_vue/src/views/dev-center/create-app/smart.vue b/webfe/package_vue/src/views/dev-center/create-app/smart.vue
index 63c402a34f..cf66f02a71 100644
--- a/webfe/package_vue/src/views/dev-center/create-app/smart.vue
+++ b/webfe/package_vue/src/views/dev-center/create-app/smart.vue
@@ -38,10 +38,10 @@
         >
           <bk-row class="mb15">
             <bk-col
-              class="pr0 f14 "
+              class="pr0 f14"
               :span="2"
             >
-              <span class="confirm-key"> {{ $t('应用ID：') }} </span>
+              <span class="confirm-key">{{ $t('应用ID：') }}</span>
             </bk-col>
             <bk-col
               class="pl0 f14"
@@ -55,7 +55,7 @@
               class="pr0 f14"
               :span="2"
             >
-              <span class="confirm-key"> {{ $t('应用名称：') }} </span>
+              <span class="confirm-key">{{ $t('应用名称：') }}</span>
             </bk-col>
             <bk-col
               class="pl0 f14"
@@ -73,7 +73,8 @@
         class="package-data-box mb20"
       >
         <p class="package-data-title">
-          {{ key }}<span v-if="packageItem.is_default"> ({{ $t('主') }}) </span>
+          {{ key }}
+          <span v-if="packageItem.is_default">({{ $t('主') }})</span>
         </p>
         <bk-container
           :col="12"
@@ -82,10 +83,10 @@
         >
           <bk-row class="mb15">
             <bk-col
-              class="pr0 f14 "
+              class="pr0 f14"
               :span="2"
             >
-              <span class="confirm-key"> {{ $t('开发语言：') }} </span>
+              <span class="confirm-key">{{ $t('开发语言：') }}</span>
             </bk-col>
             <bk-col
               class="pl0 f14"
@@ -99,13 +100,15 @@
               class="pr0 f14"
               :span="2"
             >
-              <span class="confirm-key"> {{ $t('增强服务') }} </span>
+              <span class="confirm-key">{{ $t('增强服务') }}</span>
             </bk-col>
             <bk-col
               class="f12 pr0 pl0 mt2"
               :span="10"
             >
-              <span class="confirm-value"> {{ $t('增强服务只可新增，不可删除（即使在配置文件中删除了某增强服务，在平台也会保留该服务）') }} </span>
+              <span class="confirm-value">
+                {{ $t('增强服务只可新增，不可删除（即使在配置文件中删除了某增强服务，在平台也会保留该服务）') }}
+              </span>
             </bk-col>
           </bk-row>
         </bk-container>
@@ -118,6 +121,10 @@
             :key="index"
             :class="packageData.supported_services.includes(service.name) ? 'added' : 'not_supported'"
             class="package-data-rel"
+            v-bk-tooltips="{
+              content: $t('平台不支持该增强服务'),
+              disabled: packageData.supported_services.includes(service.name),
+            }"
           >
             {{ service.name }}
             <i
@@ -140,7 +147,11 @@
         :with-credentials="true"
         :name="'package'"
         :max-size="maxPackageSize"
-        :accept-tips="$t('仅支持蓝鲸 S-mart 包，可以从“蓝鲸 S-mart”获取，上传成功后即可进行应用部署 仅支持 .tar 或 .tar.gz 格式的文件')"
+        :accept-tips="
+          $t(
+            '仅支持蓝鲸 S-mart 包，可以从“蓝鲸 S-mart”获取，上传成功后即可进行应用部署 仅支持 .tar 或 .tar.gz 格式的文件'
+          )
+        "
         :headers="uploadHeader"
         :on-upload-success="handleSuccess"
         :on-upload-error="handleError"
@@ -150,15 +161,17 @@
           href="https://bk.tencent.com/s-mart"
           target="_blank"
           class="f12"
-        > {{ $t('什么是 S-mart 应用？') }} </a>
+        >
+          {{ $t('什么是 S-mart 应用？') }}
+        </a>
       </uploader>
     </div>
     <div
       v-if="isDataLoading"
       class="data-loading"
     >
-      <img src="/static/images/create-app-loading.svg">
-      <p> {{ $t('应用创建中，请稍候') }} </p>
+      <img src="/static/images/create-app-loading.svg" />
+      <p>{{ $t('应用创建中，请稍候') }}</p>
     </div>
     <div
       v-else
@@ -167,7 +180,7 @@
       <bk-button
         theme="primary"
         size="large"
-        style="font-size: 14px;"
+        style="font-size: 14px"
         type="submit"
         :disabled="!packageData"
         @click="handleCommit"
@@ -186,7 +199,8 @@
   </div>
 </template>
 
-<script>import uploader from '@/components/uploader';
+<script>
+import uploader from '@/components/uploader';
 export default {
   components: {
     uploader,
@@ -274,149 +288,136 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.default-info {
+  background-color: #f0f8ff;
+  border: 1px solid #a3c5fd;
+  margin-bottom: 20px;
+  font-size: 12px;
+}
+.smart-app {
+  padding-top: 20px;
+  width: 1200px;
+  margin: auto;
+}
 
-    .default-info{
-        background-color: #F0F8FF;
-        border: 1px solid #A3C5FD;
-        margin-bottom: 20px;
-        font-size: 12px;
-    }
-    .smart-app {
-        padding-top: 20px;
-        width: 1200px;
-        margin: auto;
-    }
-
-    .action-box {
-        padding: 20px;
-        text-align: center;
-    }
+.action-box {
+  padding: 20px;
+  text-align: center;
+}
 
-    .package-data-box {
-        padding: 20px;
-        border: 1px solid #dcdee5;
-        border-radius: 2px;
-    }
+.package-data-box {
+  padding: 20px;
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+}
 
-    .package-data-title {
-        font-size: 14px;
-        font-weight: 500;
-        color: #313238;
-        margin-bottom: 12px;
-    }
+.package-data-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #313238;
+  margin-bottom: 12px;
+}
 
-    .package-data-desc {
-        font-size: 12px;
-        font-weight: 400;
-        color: #979ba5;
-    }
+.package-data-desc {
+  font-size: 12px;
+  font-weight: 400;
+  color: #979ba5;
+}
 
-    .package-data-services {
-        overflow: hidden;
-        margin-top: 10px;
-        li {
-            min-width: 100px;
-            height: 24px;
-            line-height: 24px;
-            display: inline-block;
-            background: #F0F1F5;
-            border-radius: 2px;
-            padding: 0 2px;
-            border-radius: 2px;
-            margin: 0 8px 8px 0;
-            text-align: center;
-            font-size: 12px;
-            color: #63656E;
-            padding: 0 10px;
+.package-data-services {
+  overflow: hidden;
+  margin-top: 10px;
+  li {
+    min-width: 100px;
+    height: 24px;
+    line-height: 24px;
+    display: inline-block;
+    background: #f0f1f5;
+    border-radius: 2px;
+    padding: 0 2px;
+    border-radius: 2px;
+    margin: 0 8px 8px 0;
+    text-align: center;
+    font-size: 12px;
+    color: #63656e;
+    padding: 0 10px;
 
-            &.added {
-                background: #E5F6EA;
-                color: #3FC06D;
-            }
-
-            &.deleted {
-                background: #F0F1F5;
-                color: #C4C6CC;
-            }
-
-            &.not_modified {
-                background: #FFF2DD;
-                color: #FF9C01;
-            }
-
-            &.not_supported {
-                background: #F0F1F5;
-                color: #C4C6CC;
-                position: relative;
-
-                &::after {
-                    content: "";
-                    width: 80%;
-                    height: 1px;
-                    background: #CCC;
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                }
-            }
-        }
+    &.added {
+      background: #e5f6ea;
+      color: #3fc06d;
     }
 
-    .package-data-rel{
-        position: relative;
+    &.deleted {
+      background: #f0f1f5;
+      color: #c4c6cc;
     }
 
-    .info-icon{
-        position: absolute;
-        top: 1px;
-        left: 87px;
-        color: #52525d;
+    &.not_modified {
+      background: #fff2dd;
+      color: #ff9c01;
     }
 
-    .mt2{
-        margin-top: 2px;
+    &.not_supported {
+      background: #f0f1f5;
+      color: #c4c6cc;
     }
+  }
+}
 
-    .data-loading {
-        margin: 24px 0 18px;
-        line-height: 16px;
-        color: #666;
-        text-align: center;
+.package-data-rel {
+  position: relative;
+}
 
-        img {
-            width: 45px;
-            margin-bottom: -2px;
-            margin-left: 8px;
-        }
+.info-icon {
+  position: absolute;
+  top: 1px;
+  left: 87px;
+  color: #52525d;
+}
 
-        p:nth-child(2) {
-            margin-top: 16px;
-            color: #313238;
-            font-size: 16px;
-            font-weight: bold;
-        }
-    }
+.mt2 {
+  margin-top: 2px;
+}
 
-    .bk-alert {
-        background-color: #E5F6EA;
-        padding: 5px 10px;
-        border: none;
+.data-loading {
+  margin: 24px 0 18px;
+  line-height: 16px;
+  color: #666;
+  text-align: center;
 
-        .bk-alert-title {
-            line-height: 22px;
-            color: #63656E;
-        }
+  img {
+    width: 45px;
+    margin-bottom: -2px;
+    margin-left: 8px;
+  }
 
-        .paasng-icon {
-            color: #3FC06D;
-            margin-right: 5px;
-            line-height: 22px;
-            vertical-align: middle
-        }
+  p:nth-child(2) {
+    margin-top: 16px;
+    color: #313238;
+    font-size: 16px;
+    font-weight: bold;
+  }
+}
 
-        &-success {
-            display: flex;
-        }
-    }
+.bk-alert {
+  background-color: #e5f6ea;
+  padding: 5px 10px;
+  border: none;
+
+  .bk-alert-title {
+    line-height: 22px;
+    color: #63656e;
+  }
+
+  .paasng-icon {
+    color: #3fc06d;
+    margin-right: 5px;
+    line-height: 22px;
+    vertical-align: middle;
+  }
+
+  &-success {
+    display: flex;
+  }
+}
 </style>