fix: 4.15 体验问题

# Reviewed, transaction id: 6217
TencentBlueKing · Apr 18, 2024 · 69b2bd3 · 69b2bd3
1 parent ccff5ba
commit 69b2bd3
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 31 deletions.
diff --git a/webfe/package_vue/src/components/paas-module-bar.vue b/webfe/package_vue/src/components/paas-module-bar.vue
@@ -115,6 +115,7 @@
       <div slot="footer">
         <bk-button
           theme="primary"
+          :loading="delAppDialog.isLoading"
           :disabled="!formRemoveValidated"
           @click="submitRemoveModule"
         >
@@ -260,6 +261,7 @@ export default defineComponent({
     };
 
     const submitRemoveModule = async () => {
+      delAppDialog.isLoading = true;
       try {
         await store.dispatch('module/deleteModule', {
           appCode: props.appCode,
@@ -289,6 +291,7 @@ export default defineComponent({
         });
       } finally {
         delAppDialog.visiable = false;
+        delAppDialog.isLoading = false;
       }
     };
 

diff --git a/webfe/package_vue/src/router/index.js b/webfe/package_vue/src/router/index.js
@@ -409,6 +409,9 @@ const router = new Router({
       path: '/developer-center/apps/:id/cloud-module/create',
       component: appCreateCloudModule,
       name: 'appCreateCloudModule',
+      meta: {
+        isDefaultBackgroundColor: true,
+      },
     },
     {
       path: '/developer-center/apps/migration/',

diff --git a/webfe/package_vue/src/views/dev-center/index.vue b/webfe/package_vue/src/views/dev-center/index.vue
@@ -150,21 +150,11 @@
                 ext-cls="app-filter-popover-cls"
                 placement="bottom"
                 :arrow="false"
-                offset="-14, 2"
-                :tippy-options="{ 'hideOnClick': false }"
+                offset="1, 2"
+                trigger="click"
               >
                 <div class="filter-view">
                   <div class="text">{{ $t(curFilterValue) }}</div>
-                  <div
-                    :class="[
-                      'filter-right-icon',
-                      { active: sortValue.indexOf('-') !== -1 }
-                    ]"
-                    v-bk-tooltips="{ content: filterTips }"
-                    @click.stop="handleTtogleOrder"
-                  >
-                    <i :class="['paasng-icon', sortValue.indexOf('-') !== -1 ? 'paasng-shengxu' : 'paasng-jiangxu']" />
-                  </div>
                 </div>
                 <template #content>
                   <ul class="filter-navigation-list">
@@ -179,8 +169,18 @@
                   </ul>
                 </template>
               </bk-popover>
+              <div
+                :class="[
+                  'filter-right-icon',
+                  { active: sortValue.indexOf('-') !== -1 }
+                ]"
+                v-bk-tooltips="{ content: filterTips }"
+                @click.stop="handleTtogleOrder"
+              >
+                <i :class="['paasng-icon', sortValue.indexOf('-') !== -1 ? 'paasng-shengxu' : 'paasng-jiangxu']" />
+              </div>
             </section>
-            <div class="paas-search">
+            <div class="app-list-search">
               <bk-input
                 v-model="filterKey"
                 :clearable="true"
@@ -265,7 +265,11 @@
                   </span>
                 </template>
               </bk-table-column>
-              <bk-table-column prop="language" :label="$t('语言')"></bk-table-column>
+              <bk-table-column prop="language" :label="$t('语言')">
+                <template slot-scope="{ row }">
+                  {{ row.language || '--' }}
+                </template>
+              </bk-table-column>
               <bk-table-column prop="created" :label="$t('创建时间')"></bk-table-column>
               <bk-table-column :label="$t('操作')">
                 <template slot-scope="{ row }">
@@ -627,7 +631,7 @@ export default {
       isFilterConditionPresent: false,
       filterRegion: [],
       appExtraData: {},
-      tableHeaderFilterValue: 'all',
+      tableHeaderFilterValue: 'normal',
     };
   },
   computed: {
@@ -741,7 +745,7 @@ export default {
 
     addModule(appItem) {
       this.$router.push({
-        name: 'appCreateModule',
+        name: appItem.application.type === 'cloud_native' ? 'appCreateCloudModule' : 'appCreateModule',
         params: {
           id: appItem.application.code,
         },
@@ -1013,6 +1017,12 @@ export default {
 <style lang="scss" scoped>
     $customize-disabled-color: #C4C6CC;
 
+    @media (max-width: 1300px) {
+      .app-list-search {
+          width: 300px !important;
+      }
+    }
+
     .bk-apps-wrapper {
         width: calc(100% - 48px);
     }
@@ -1179,7 +1189,7 @@ export default {
         right: 482px;
     }
 
-    .paas-search {
+    .app-list-search {
         width: 320px;
     }
 
@@ -1461,19 +1471,22 @@ export default {
 
 <style lang="scss">
 section.app-filter-module {
+  display: flex;
   margin: 3px 16px 0;
   width: 117px;
   height: 32px;
   background: #EAEBF0;
   border-radius: 2px;
   .bk-tooltip {
+    flex: 1;
     display: block;
+    .tippy-active {
+      background: #FFFFFF;
+      border: 1px solid #3A84FF;
+      border-radius: 2px 0 0 2px;
+    }
   }
 
-  .filter-view {
-    width: 100%;
-    display: flex;
-  }
   .text {
     position: relative;
     padding-left: 8px;
@@ -1482,28 +1495,30 @@ section.app-filter-module {
     flex: 1;
     line-height: 32px;
     cursor: pointer;
-    &::after {
-      content: "";
-      position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      height: 14px;
-      width: 1px;
-      background-color: #DCDEE5;
-    }
     &:hover {
       background: #DCDEE5;
       border-radius: 2px 0 0 2px;
     }
   }
   .filter-right-icon {
+    position: relative;
     cursor: pointer;
     width: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
 
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 14px;
+      width: 1px;
+      background-color: #DCDEE5;
+    }
+
     i {
       color: #979BA5;
     }
@@ -1523,6 +1538,7 @@ section.app-filter-module {
   display: block;
 }
 .app-filter-popover-cls {
+  flex: 1;
   width: 87px;
   background: #FFFFFF;
   border: 1px solid #DCDEE5;