fix: Codecc 二次迭代，体验问题修复 (#1434)

webfe/package_vue/src/assets/css/ps-style.scss

@@ -866,7 +866,7 @@ span.ellipsis {
 }
 
 .overview-fright-plugin .app-container {
-    max-width: calc(100% - 50px) !important;
+    max-width: calc(100% - 48px) !important;
 }
 
 .card-style {

webfe/package_vue/src/assets/iconfont/demo.html

@@ -1481,6 +1481,10 @@ <h2 class="page-title">
           <span class="icon paasng-icon paasng-qianyi-xianxing"></span>
           <p class="icon-text">qianyi-xianxing</p>
         </li>
+        <li class="icon-item" title="diff-4">
+          <span class="icon paasng-icon paasng-diff-4"></span>
+          <p class="icon-text">diff-4</p>
+        </li>
       </ul>
       <h3 class="describe-title">为什么使用</h3>
       <ul class="use-describe">
@@ -3544,6 +3548,12 @@ <h3 class="describe-title">如何使用</h3>
           </svg>
           <p class="icon-text">qianyi-xianxing</p>
         </li>
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#paasng-diff-4"></use>
+          </svg>
+          <p class="icon-text">diff-4</p>
+        </li>
       </ul>
       <h3 class="describe-title">为什么使用</h3>
       <ul class="use-describe">

webfe/package_vue/src/assets/iconfont/style.css

@@ -1046,3 +1046,6 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .paasng-qianyi-xianxing:before {
 	content: "\e26f";
 }
+.paasng-diff-4:before {
+	content: "\e270";
+}

webfe/package_vue/src/common/constants.js

@@ -270,3 +270,8 @@ export const PAAS_APP_TYPE = {
   cloud_native: '云原生应用',
   engineless_app: '外链应用',
 };
+
+export const CIRCLED_NUMBERS = [
+  '①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩',
+  '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳',
+];

webfe/package_vue/src/components/pass-plugin-title.vue

@@ -8,12 +8,45 @@
       />
       <div class="title">
         {{ title }}
-        <span v-if="version">{{ version }}</span>
+        <template v-if="versionData?.version">
+          <div class="versionData-wrapper">
+            <div class="detail-bar">
+              <span class="left">{{ versionData?.version }}</span>
+              <i class="line"></i>
+              <span>{{ versionData?.source_version_name }}</span>
+              <span
+                class="commit-id"
+                @click="toCodeRepository"
+              >
+                {{ versionData?.source_hash }}
+              </span>
+            </div>
+          </div>
+          <div class="status-wrapper">
+            <round-loading v-if="versionData.status === 'pending' || versionData.status === 'initial'" />
+            <div
+              v-else
+              :class="['dot', versionData.status]"
+            />
+            <span class="pl5">{{ PLUGIN_TEST_VERSION_STATUS[versionData.status] }}</span>
+          </div>
+        </template>
+        <a
+          v-if="isPluginDoc"
+          target="_blank"
+          :href="docUrl"
+          class="plugin-doc"
+        >
+          <i class="paasng-icon paasng-question-circle" />
+          {{ $t('插件文档') }}
+        </a>
       </div>
     </div>
   </div>
 </template>
-<script>import { bus } from '@/common/bus';
+<script>
+import { bus } from '@/common/bus';
+import { PLUGIN_TEST_VERSION_STATUS } from '@/common/constants';
 
 export default {
   props: {
@@ -23,20 +56,29 @@ export default {
         return '';
       },
     },
-    version: {
-      type: String,
+    versionData: {
+      type: Object,
       default() {
-        return '';
+        return {};
       },
     },
     noShadow: {
       type: Boolean,
       default: false,
     },
+    isPluginDoc: {
+      type: Boolean,
+      default: false,
+    },
+    docUrl: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
       showBackIcon: false,
+      PLUGIN_TEST_VERSION_STATUS,
     };
   },
   watch: {
@@ -53,7 +95,7 @@ export default {
   methods: {
     goBack() {
       const type = this.$route.query.type || 'prod';
-      if (this.version || type === 'test') {
+      if (this.versionData?.version || type === 'test') {
         bus.$emit('stop-deploy', true);
         this.$router.push({
           name: 'pluginVersionManager',
@@ -63,6 +105,12 @@ export default {
         this.$router.go(-1);
       }
     },
+    toCodeRepository() {
+      const location = this.versionData?.source_location;
+      // 去除仓库.git后缀
+      const url = `${location.replace(/\.git(?=\/|$)/, '')}/commit/${this.versionData?.source_hash}`;
+      window.open(url, '_blank');
+    },
   },
 };
 </script>
@@ -71,6 +119,14 @@ export default {
   i {
     transform: translateY(0px);
   }
+  .plugin-doc {
+    position: absolute;
+    right: 24px;
+    font-size: 14px;
+    i {
+      transform: translateY(-1px);
+    }
+  }
   &.no-shadow {
     height: 52px;
     background: #fff;
@@ -83,10 +139,64 @@ export default {
   }
   .title-container {
     .title {
+      display: flex;
+      align-items: center;
       font-size: 16px;
       color: #313238;
       letter-spacing: 0;
       line-height: 24px;
+      .versionData-wrapper {
+        margin-left: 16px;
+        .detail-bar {
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          padding: 0 8px;
+          height: 24px;
+          background: #eaebf0;
+          border-radius: 2px;
+          color: #63656e;
+          .left {
+            font-weight: 700;
+          }
+          .line {
+            display: inline-block;
+            width: 1px;
+            height: 16px;
+            background: #dcdee5;
+            margin: 0 8px;
+          }
+          .commit-id {
+            color: #3a84ff;
+            margin-left: 6px;
+            cursor: pointer;
+          }
+        }
+      }
+      .status-wrapper {
+        margin-left: 16px;
+        font-size: 12px;
+        color: #63656E;
+        .bk-spin-loading {
+          transform: translateY(-1px);
+        }
+      }
+      .dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        display: inline-block;
+        margin-right: 3px;
+      }
+      .successful {
+        background: #e5f6ea;
+        border: 1px solid #3fc06d;
+      }
+      .failed,
+      .interrupted {
+        background: #ffe6e6;
+        border: 1px solid #ea3636;
+      }
     }
     .icon-cls-back {
       color: #3a84ff;

webfe/package_vue/src/components/plugin-quick-nav.vue

@@ -172,6 +172,16 @@ export default {
       const parmas = this.getTarget(data.id, data.pd_id);
       this.hideSelectData();
       this.$router.push(parmas);
+      // 如果当前为插件版本、测试阶段，返回概览页
+      if (this.$route.name === 'pluginVersionRelease') {
+        this.$router.replace({
+          name: 'pluginSummary',
+          query: {
+            id: data.id,
+            pluginTypeId: data.pd_id,
+          },
+        });
+      }
     },
     searchPlugin: debounce(function () {
       if (this.searchValue === '') {

webfe/package_vue/src/language/lang/en.js

@@ -1998,6 +1998,7 @@ export default {
   '代码分支：': 'Code branch：',
   是否确定删除: 'Are you sure to delete',
   插件指引: 'Plugin Guide',
+  插件文档: 'Plugin Documentation',
   '质量评价依照腾讯开源治理指标体系 (其中文档质量暂按100分计算)， 评分仅供参考': 'Code quality star based on Tencent Open Source Governance indicator system',
   '运行总次数:': 'No. of total runs:',
   '拦截次数:': 'Intercepted:',
@@ -2699,4 +2700,12 @@ export default {
   查看更多: 'View More',
   请输入关键词进行搜索: 'Please enter keywords to search',
   没有找到相关结果: 'No related results found',
+  指定测试未通过: 'Designated Test Failed',
+  重新测试: 'Retest',
+  '当前版本{s}，无需终止操作': 'Current version {s}, no need to terminate the operation',
+  已失败: 'Failed',
+  已成功: 'Successful',
+  '当前分支正在测试中，请先终止测试才能新建版本': 'The current branch is under testing, please terminate the test before creating a new version',
+  暂无可对比的代码版本: 'No comparable code versions available',
+  暂无已发布成功的版本: 'No successfully published versions available',
 };

webfe/package_vue/src/language/lang/zh.js

@@ -2131,6 +2131,7 @@ export default {
   '代码分支：': '代码分支：',
   是否确定删除: '是否确定删除',
   插件指引: '插件指引',
+  插件文档: '插件文档',
   '质量评价依照腾讯开源治理指标体系 (其中文档质量暂按100分计算)， 评分仅供参考。':
     '质量评价依照腾讯开源治理指标体系 (其中文档质量暂按100分计算)， 评分仅供参考。',
   '运行总次数:': '运行总次数:',
@@ -2838,4 +2839,12 @@ export default {
   查看更多: '查看更多',
   请输入关键词进行搜索: '请输入关键词进行搜索',
   没有找到相关结果: '没有找到相关结果',
+  指定测试未通过: '指定测试未通过 ',
+  重新测试: '重新测试',
+  '当前版本{s}，无需终止操作': '当前版本{s}，无需终止操作',
+  已失败: '已失败',
+  已成功: '已成功',
+  '当前分支正在测试中，请先终止测试才能新建版本': '当前分支正在测试中，请先终止测试才能新建版本',
+  暂无可对比的代码版本: '暂无可对比的代码版本',
+  暂无已发布成功的版本: '暂无已发布成功的版本',
 };

webfe/package_vue/src/views/plugin-center/create-plugin/index.vue

@@ -190,6 +190,10 @@
               disabled
               :placeholder="$t('代码仓库')"
             />
+            <i
+              v-copy="form.repositoryTemplateUrl"
+              class="paasng-icon paasng-general-copy copy-icon"
+            />
             <div class="tips">
               {{ $t('将自动创建该开源仓库，将模板代码初始化到仓库中，并将创建者初始化为仓库管理员') }}
             </div>
@@ -210,7 +214,7 @@
         >
           <BkSchemaForm
             :key="form.pd_id"
-            class="mt20 bk-form-warp"
+            class="bk-form-warp"
             v-model="schemaFormData"
             ref="bkForm"
             :http-adapter="{ request }"
@@ -356,7 +360,7 @@ export default {
       return this.form.pd_id ? curPluginData[0] : this.pluginTypeList[0];
     },
     defaultPluginType() {
-      return this.$route.query.type;
+      return this.$route.query.plugin_type;
     },
     localLanguage() {
       return this.$store.state.localLanguage;
@@ -662,6 +666,14 @@ export default {
     font-weight: Bold;
     color: #313238;
     font-size: 14px;
+    margin-bottom: 16px;
+  }
+  .copy-icon {
+    position: absolute;
+    top: 11px;
+    right: 10px;
+    color: #3A84FF;
+    cursor: pointer;
   }
   .mt16 {
     margin-top: 16px;
@@ -757,6 +769,11 @@ export default {
     color: #f5222d;
   }
 }
+.bk-form-warp :deep(.bk-form-item) {
+  .bk-form-content p.mt5 {
+    color: #979BA5 !important;
+  }
+}
 .plugin-type {
   position: relative;
 }