feat: 1.14 版本前端开发

src/dashboard-front/src/components/resource-detail/index.vue

@@ -654,27 +654,28 @@
     </bk-container>
 
     <!-- <template v-if="localData.proxy?.banckend_id"> -->
-    <template v-for="plugin in localData.plugins" :key="plugin.id">
-      <p class="title mt15" :class="{ 'ag-diff': checkPluginsDiff() }">
-        {{ $t('插件:{name}', { name: plugin.name }) }}
-      </p>
-      <bk-container class="ag-kv-box" :col="14" :margin="6">
-        <bk-row
-          v-for="key in Object.keys(plugin.config)"
-          :key="key"
-          :class="{ 'ag-diff': checkPluginsDiff() }"
-        >
-          <bk-col :span="5">
-            <label class="ag-key">{{ key }}:</label>
-          </bk-col>
-          <bk-col :span="9">
-            <div class="ag-value">
-              {{ plugin.config[key] || "--" }}
-            </div>
-          </bk-col>
-        </bk-row>
-      </bk-container>
-    </template>
+    <div :class="{ 'container-diff': checkPluginsDiff() }" v-if="localData.plugins?.length">
+      <template v-for="plugin in localData.plugins" :key="plugin.id">
+        <p class="title mt15" :class="{ 'ag-diff': checkPluginsDiff() }">
+          {{ $t('插件:{name}', { name: plugin.name }) }}
+        </p>
+        <bk-container class="ag-kv-box" :col="14" :margin="6">
+          <bk-row
+            v-for="key in Object.keys(plugin.config)"
+            :key="key"
+          >
+            <bk-col :span="5">
+              <label class="ag-key">{{ key }}:</label>
+            </bk-col>
+            <bk-col :span="9">
+              <div class="ag-value">
+                {{ plugin.config[key] || "--" }}
+              </div>
+            </bk-col>
+          </bk-row>
+        </bk-container>
+      </template>
+    </div>
     <!-- </template> -->
   </div>
 </template>
@@ -883,7 +884,10 @@ const checkDiff = (path: any) => {
 //   );
 // };
 
-const checkPluginsDiff = () => {};
+const checkPluginsDiff = () => {
+  const keys = Object.keys(diffMap.value);
+  return keys.some(item => item.startsWith('localData.plugins'));
+};
 
 // 网关标签
 const labels = computed(() => common.gatewayLabels || []);
@@ -1041,6 +1045,11 @@ initLocalData();
   }
 }
 
+.container-diff {
+  background: rgba(255, 156, 1, 0.1);
+  padding: 2px 8px;
+  margin: 18px 0;
+}
 .ag-kv-box {
   &.box-diff {
     background: #fbf4e9;

src/dashboard-front/src/views/resource/setting/index.vue

@@ -209,6 +209,12 @@
               :label="t('标签')"
               :show-overflow-tooltip="false"
               prop="labels"
+              :filter="{
+                list: labelsList,
+                checked: chooseLabels,
+                filterFn: handleMethodFilter,
+                btnSave: false,
+              }"
               width="180">
               <template #default="{ row }">
                 <span class="text-warp" v-if="!row?.isEditLabel" @click="handleEditLabel(row)">
@@ -530,7 +536,7 @@ const route = useRoute();
 const router = useRouter();
 const chooseMethod = ref<string[]>([]);
 const filterData = ref<any>({ keyword: '', order_by: '' });
-
+const chooseLabels = ref<string[]>([]);
 const tableEmptyConf = ref<TableEmptyConfType>({
   keyword: '',
   isAbnormal: false,
@@ -721,6 +727,16 @@ const tableDataKey = ref(-1);
 //   }
 // };
 
+const labelsList = computed(() => {
+  tableDataKey.value = +new Date();
+  return labelsData.value?.map((item: any) => {
+    return {
+      text: item.name,
+      value: item.id,
+    };
+  });
+});
+
 // 列表hooks
 const {
   tableData,
@@ -757,15 +773,17 @@ const handleClearFilterKey = () => {
   filterData.value = cloneDeep({ keyword: '', order_by: '' });
   searchValue.value = [];
   chooseMethod.value = [];
+  chooseLabels.value = [];
 };
 
 const updateTableEmptyConfig = () => {
   tableEmptyConf.value.isAbnormal = pagination.value.abnormal;
-  if ((searchValue.value.length || chooseMethod.value?.length) && !tableData.value.length) {
+  if ((searchValue.value.length || chooseMethod.value?.length || chooseLabels.value?.length)
+  && !tableData.value.length) {
     tableEmptyConf.value.keyword = 'placeholder';
     return;
   }
-  if (searchValue.value.length || chooseMethod.value?.length) {
+  if (searchValue.value.length || chooseMethod.value?.length || chooseLabels.value?.length) {
     tableEmptyConf.value.keyword = '$CONSTANT';
     return;
   }
@@ -1271,6 +1289,18 @@ watch(
   },
 );
 
+watch(
+  () => chooseLabels.value,
+  (v) => {
+    if (!v?.length) { // 重置
+      filterData.value.label_ids = undefined;
+    } else { // 选择
+      filterData.value.label_ids = v?.join(',');
+    }
+  },
+  { deep: true, immediate: true },
+);
+
 watch(
   () => chooseMethod.value,
   (v) => {

src/dashboard-front/src/views/stage/overview/detail-mode/resource-info.vue

@@ -189,7 +189,7 @@ const labels = ref<any[]>([]);
 
 // 网关id
 const apigwId = computed(() => common.apigwId);
-const isLoading = ref(false);
+const isLoading = ref(true);
 
 const pagination = ref({
   current: 1,
@@ -327,6 +327,11 @@ watch(
 );
 
 const getPageData = () => {
+  if (!resourceVersionList.value?.length) {
+    pagination.value.count = 0;
+    return [];
+  }
+
   isLoading.value = true;
   let curAllData = resourceVersionList.value;
   if (searchValue.value) {