From 550cafa7de8a201a51db3d550735bd3398eef01b Mon Sep 17 00:00:00 2001
From: shuzhenyang <shuzhen.yang2@gientech.com>
Date: Tue, 19 Nov 2024 17:49:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=201.15=E4=BD=93=E9=AA=8C=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

optimize code

optimize code
---
 .../src/components/ag-dropdown.vue            | 11 ++++-
 .../src/views/backend-service/add.vue         |  5 ++-
 .../views/components-access/system/index.vue  | 29 ++++++-------
 .../components/request-record.vue             | 41 ++++++++++++++-----
 .../components/line-chart.vue                 | 16 ++++++--
 .../src/views/operate-records/index.vue       |  2 +-
 .../resource/setting/comps/base-info.vue      |  5 +--
 .../setting/comps/version-sideslider.vue      | 14 +++----
 .../src/views/resource/setting/index.vue      | 41 +++++++++++++++++--
 9 files changed, 116 insertions(+), 48 deletions(-)

diff --git a/src/dashboard-front/src/components/ag-dropdown.vue b/src/dashboard-front/src/components/ag-dropdown.vue
index d516af44b..5c1ceb234 100644
--- a/src/dashboard-front/src/components/ag-dropdown.vue
+++ b/src/dashboard-front/src/components/ag-dropdown.vue
@@ -19,7 +19,7 @@
             @click="handleDropdownClick(item)"
             :class="{ disabled: item.disabled }"
             :key="item.value"
-            v-bk-tooltips="{ content: item?.tooltips, disabled: !item?.tooltips }"
+            v-bk-tooltips="{ content: item?.tooltips, disabled: !item?.tooltips || !item.disabled }"
           >
             {{ item.label }}
           </bk-dropdown-item>
@@ -29,7 +29,7 @@
   </bk-dropdown>
 </template>
 <script setup lang="ts">
-import { ref, PropType, useSlots } from 'vue';
+import { ref, PropType, useSlots, watch } from 'vue';
 import { IDropList } from '@/types';
 import { AngleRight } from 'bkui-vue/lib/icon';
 
@@ -72,6 +72,13 @@ const emit = defineEmits([
   'on-change',
 ]);
 
+watch(
+  () => props.dropdownList,
+  () => {
+    dropdownList.value = props.dropdownList;
+  },
+);
+
 const handleDropdownClick = (data: IDropList) => {
   if (data.disabled) return;
   isOpen.value = false;
diff --git a/src/dashboard-front/src/views/backend-service/add.vue b/src/dashboard-front/src/views/backend-service/add.vue
index c87780afa..f2c4fbfc4 100644
--- a/src/dashboard-front/src/views/backend-service/add.vue
+++ b/src/dashboard-front/src/views/backend-service/add.vue
@@ -2,7 +2,7 @@
   <div>
     <!-- 新建/编辑sideslider -->
     <bk-sideslider
-      v-model:isShow="sidesliderConfi.isShow"
+      v-model:is-show="sidesliderConfi.isShow"
       :quick-close="true"
       ext-cls="backend-service-slider"
       width="960"
@@ -544,6 +544,9 @@ defineExpose({
     min-height: calc(100vh - 104px) !important;
     overflow-y: auto;
   }
+  :deep(.bk-sideslider-footer) {
+    margin-top: 0;
+  }
 
   .base-info {
     .base-info-form {
diff --git a/src/dashboard-front/src/views/components-access/system/index.vue b/src/dashboard-front/src/views/components-access/system/index.vue
index 9f304b78c..f56a38b57 100644
--- a/src/dashboard-front/src/views/components-access/system/index.vue
+++ b/src/dashboard-front/src/views/components-access/system/index.vue
@@ -150,7 +150,7 @@
     </bk-dialog>
 
     <bk-sideslider
-      v-model:isShow="isSliderShow"
+      v-model:is-show="isSliderShow"
       :width="640"
       :title="sliderTitle"
       quick-close
@@ -468,15 +468,18 @@ const deleteDialogTitle = computed(() => {
   return `${t('确认删除系统')}【${curSystem.value.name}】？`;
 });
 
-watch(keyword, (newVal, oldVal) => {
-  if (oldVal && !newVal && isFilter) {
-    isFilter.value = false;
-    pagination.value.offset = 1;
-    pagination.value.limit = 10;
-    displayData.value = allData.value;
-    systemList.value = getDataByPage();
-  }
-});
+watch(
+  () => keyword.value,
+  (newVal, oldVal) => {
+    if (oldVal && !newVal && isFilter) {
+      isFilter.value = false;
+      pagination.value.offset = 1;
+      pagination.value.limit = 10;
+      displayData.value = allData.value;
+      systemList.value = getDataByPage();
+    }
+  },
+);
 
 const init = () => {
   console.log('init');
@@ -485,12 +488,6 @@ const init = () => {
 
 const handleClearFilterKey = () => {
   keyword.value = '';
-  pagination.value = Object.assign(pagination.value, {
-    current: 1,
-    limit: 10,
-    count: displayData.value.length,
-  });
-  getDataByPage();
 };
 
 const handleCreateCategory = () => {
diff --git a/src/dashboard-front/src/views/online-debug/components/request-record.vue b/src/dashboard-front/src/views/online-debug/components/request-record.vue
index 48e1a9bb0..f7424a66a 100644
--- a/src/dashboard-front/src/views/online-debug/components/request-record.vue
+++ b/src/dashboard-front/src/views/online-debug/components/request-record.vue
@@ -45,6 +45,7 @@
             :row-style="{ cursor: 'pointer' }"
             :show-overflow-tooltip="true"
             :cell-class="getCellClass"
+            :pagination="pagination"
           >
             <bk-table-column :label="t('资源名称')" prop="resource_name"></bk-table-column>
             <bk-table-column :label="t('响应状态码')" prop="status_code">
@@ -86,6 +87,14 @@
                 />
               </div>
             </template>
+            <template #empty>
+              <TableEmpty
+                :keyword="tableEmptyConf.keyword"
+                :abnormal="tableEmptyConf.isAbnormal"
+                @reacquire="setSearchTimeRange"
+                @clear-filter="handleClearFilterKey"
+              />
+            </template>
           </bk-table>
         </div>
       </div>
@@ -97,6 +106,9 @@
 import { ref, shallowRef, reactive, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useAccessLog, useCommon } from '@/store';
+// @ts-ignore
+import TableEmpty from '@/components/table-empty.vue';
+// @ts-ignore
 import editorMonaco from '@/components/ag-editor.vue';
 import { getTestHistories, getTestHistoriesDetails } from '@/http';
 import { Message } from 'bkui-vue';
@@ -111,7 +123,7 @@ const filterData = ref<any>({
   time_end: '',
 });
 const dateTimeRange = ref([]);
-const dateKey = ref('dateKey');
+const dateKey = ref<string>('dateKey');
 const topDatePicker = ref(null);
 const AccessLogStore = useAccessLog();
 const shortcutSelectedIndex = shallowRef(-1);
@@ -124,12 +136,13 @@ const tableEmptyConf = reactive<any>({
   isAbnormal: false,
 });
 let expandIds: number[] = [];
+const pagination = ref<{count: number, limit: number}>({ count: 0, limit: 10 });
 
 const updateTableEmptyConfig = () => {
-  // if (!curPagination.value.count) {
-  //   tableEmptyConf.keyword = 'placeholder';
-  //   return;
-  // }
+  if (filterData.value.resource_name || filterData.value.time_end) {
+    tableEmptyConf.keyword = 'placeholder';
+    return;
+  }
   tableEmptyConf.keyword = '';
 };
 
@@ -206,17 +219,25 @@ const getList = async () => {
     limit: 10000,
     ...filterData.value,
   };
-  const res = await getTestHistories(common.apigwId, data);
-  res?.forEach((item: any) => {
+  const response = await getTestHistories(common.apigwId, data);
+  response?.forEach((item: any) => {
     item.editorText = '';
   });
-  tableList.value = res;
+  tableList.value = response;
+  pagination.value.count = response?.length || 0;
+  updateTableEmptyConfig();
+};
+
+const handleClearFilterKey = () => {
+  clear();
+  getList();
+  dateKey.value = String(+new Date());
 };
 
 const getDetails = async (id: number, row: Record<string, any>) => {
-  const res = await getTestHistoriesDetails(common.apigwId, id);
+  const response = await getTestHistoriesDetails(common.apigwId, id);
 
-  row.editorText = res?.response?.data?.curl;
+  row.editorText = response?.response?.data?.curl;
   row.isExpand = !row.isExpand;
   expandIds.push(id);
   nextTick(() => {
diff --git a/src/dashboard-front/src/views/operate-data/statistics-report/components/line-chart.vue b/src/dashboard-front/src/views/operate-data/statistics-report/components/line-chart.vue
index 018f7cade..4190b2668 100644
--- a/src/dashboard-front/src/views/operate-data/statistics-report/components/line-chart.vue
+++ b/src/dashboard-front/src/views/operate-data/statistics-report/components/line-chart.vue
@@ -255,16 +255,24 @@ const getChartOption = () => {
     chartOption.color = generateChartColor(props.chartData.series ?? []);
 
     if (props.instanceId === 'requests') {
-      // 设置图表tooltip内容
-      chartOption.tooltip.formatter = (params: any) => {
+      // 总请求数
+      chartOption.tooltip.formatter = (params: echarts.EChartOption.Tooltip.Format) => {
         return `<div>
       <p>${dayjs(params.data[0]).format('YYYY-MM-DD HH:mm:ss')}</p>
       <p><span class="tooltip-icon">${params.marker}${t('总请求数')}: </span><span>${params.data[1] !== null ? params.data[1].toLocaleString() : '0'} ${t('次')}</span></p>
       </div>`;
       };
-    } else {
+    } else if (props.instanceId === 'response_time_90th') {
+      // 资源 90th 响应耗时分布
+      chartOption.tooltip.formatter = (params: echarts.EChartOption.Tooltip.Format) => {
+        return `<div>
+      <p>${dayjs(params.data[0]).format('YYYY-MM-DD HH:mm:ss')}</p>
+      <p><span class="tooltip-icon">${params.marker}${params.seriesName}: </span><span>${params.data[1] !== null ? params.data[1].toLocaleString() : '0'} ms</span></p>
+      </div>`;
+      };
+    }  else {
       // 设置图表tooltip内容
-      chartOption.tooltip.formatter = (params: any) => {
+      chartOption.tooltip.formatter = (params: echarts.EChartOption.Tooltip.Format) => {
         return `<div>
       <p>${dayjs(params.data[0]).format('YYYY-MM-DD HH:mm:ss')}</p>
       <p><span class="tooltip-icon">${params.marker}${params.seriesName}: </span><span>${params.data[1] !== null ? params.data[1].toLocaleString() : '0'} ${t('次')}</span></p>
diff --git a/src/dashboard-front/src/views/operate-records/index.vue b/src/dashboard-front/src/views/operate-records/index.vue
index ca79f8950..70a14f549 100644
--- a/src/dashboard-front/src/views/operate-records/index.vue
+++ b/src/dashboard-front/src/views/operate-records/index.vue
@@ -72,7 +72,7 @@
           </template>
         </bk-table-column>
         <bk-table-column :label="t('操作人')" prop="username" />
-        <bk-table-column :label="t('操作时间')" prop="op_time" :sort="true" />
+        <bk-table-column :label="t('操作时间')" prop="op_time" />
         <bk-table-column :label="t('描述')" prop="comment" />
         <template #empty>
           <TableEmpty
diff --git a/src/dashboard-front/src/views/resource/setting/comps/base-info.vue b/src/dashboard-front/src/views/resource/setting/comps/base-info.vue
index b7397ce44..032961bad 100644
--- a/src/dashboard-front/src/views/resource/setting/comps/base-info.vue
+++ b/src/dashboard-front/src/views/resource/setting/comps/base-info.vue
@@ -42,7 +42,7 @@
     <bk-form-item :label="t('认证方式')">
       <bk-checkbox
         v-model="formData.auth_config.app_verified_required"
-        :disabled="!curApigwData.allow_update_gateway_auth">
+        :disabled="!common.curApigwData.allow_update_gateway_auth">
         <span class="bottom-line" v-bk-tooltips="{ content: t('请求方需提供蓝鲸应用身份信息') }">{{ t('蓝鲸应用认证') }}</span>
       </bk-checkbox>
       <bk-checkbox class="ml40" v-model="formData.auth_config.auth_verified_required">
@@ -56,7 +56,7 @@
     >
       <bk-switcher
         v-model="formData.auth_config.resource_perm_required"
-        :disabled="!curApigwData.allow_update_gateway_auth"
+        :disabled="!common.curApigwData.allow_update_gateway_auth"
         theme="primary"
         size="small"
       />
@@ -113,7 +113,6 @@ const props = defineProps({
 const formRef = ref(null);
 const { t } = useI18n();
 const common = useCommon();
-const { curApigwData } = common;
 const formData = ref({
   name: '',
   description: '',
diff --git a/src/dashboard-front/src/views/resource/setting/comps/version-sideslider.vue b/src/dashboard-front/src/views/resource/setting/comps/version-sideslider.vue
index 2f99693ba..ba920a0b7 100644
--- a/src/dashboard-front/src/views/resource/setting/comps/version-sideslider.vue
+++ b/src/dashboard-front/src/views/resource/setting/comps/version-sideslider.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="release-sideslider">
     <bk-sideslider
-      v-model:isShow="isShow"
+      v-model:is-show="isShow"
       :width="960"
       :title="t('生成资源版本')"
       quick-close
@@ -50,15 +50,15 @@
                     :description="t('版本号须符合 Semver 规范，例如：1.1.1，1.1.1-alpha.1')"
                     class="form-item-version mt-20"
                     required>
-                    <bk-popover
+                    <!-- <bk-popover
                       :content="t('由数字、字母、中折线（-）、点号（.）组成，长度小于64个字符')"
                       theme="light"
                     >
-                      <bk-input
-                        v-model="formData.version"
-                        :placeholder="t('由数字、字母、中折线（-）、点号（.）组成，长度小于64个字符')"
-                      />
-                    </bk-popover>
+                    </bk-popover> -->
+                    <bk-input
+                      v-model="formData.version"
+                      :placeholder="t('由数字、字母、中折线（-）、点号（.）组成，长度小于64个字符')"
+                    />
                     <div class="form-tips">
                       <i class="apigateway-icon icon-ag-info"></i>
                       {{ t('版本号须符合 Semver 规范，例如：1.1.1，1.1.1-alpha.1') }}
diff --git a/src/dashboard-front/src/views/resource/setting/index.vue b/src/dashboard-front/src/views/resource/setting/index.vue
index 4dc16e022..1024ec739 100644
--- a/src/dashboard-front/src/views/resource/setting/index.vue
+++ b/src/dashboard-front/src/views/resource/setting/index.vue
@@ -543,7 +543,7 @@
 
     <!-- 版本对比 -->
     <bk-sideslider
-      v-model:isShow="diffSidesliderConf.isShow"
+      v-model:is-show="diffSidesliderConf.isShow"
       :title="diffSidesliderConf.title"
       :width="diffSidesliderConf.width"
       :quick-close="true"
@@ -632,9 +632,18 @@ interface ApigwIDropList extends IDropList {
 }
 // 导出下拉
 const exportDropData = ref<ApigwIDropList[]>([
-  { value: 'all', label: t('全部资源') },
-  { value: 'filtered', label: t('已筛选资源'), disabled: false, tooltips: t('请先筛选资源') },
-  { value: 'selected', label: t('已选资源'), disabled: false, tooltips: t('请先勾选资源') }]);
+  {
+    value: 'all',
+    label: t('全部资源'),
+  },
+  {
+    value: 'filtered',
+    label: t('已筛选资源'),
+    disabled: false,
+    tooltips: t('请先筛选资源'),
+  },
+  // { value: 'selected', label: t('已选资源'), disabled: false, tooltips: t('请先勾选资源') },
+]);
 
 const route = useRoute();
 const router = useRouter();
@@ -1063,12 +1072,36 @@ const showBatch = ref<boolean>(false);
 const handleShowBatch = () => {
   showBatch.value = true;
   handleShowList();
+  exportDropData.value = [
+    {
+      value: 'all',
+      label: t('全部资源'),
+    },
+    {
+      value: 'selected',
+      label: t('已选资源'),
+      disabled: !selections.value.length,
+      tooltips: t('请先勾选资源'),
+    },
+  ];
 };
 
 // 退出批量操作
 const handleOutBatch = () => {
   showBatch.value = false;
   selections.value = [];
+  exportDropData.value = [
+    {
+      value: 'all',
+      label: t('全部资源'),
+    },
+    {
+      value: 'filtered',
+      label: t('已筛选资源'),
+      disabled: !searchValue.value.length,
+      tooltips: t('请先筛选资源'),
+    },
+  ];
 };
 
 // 版本对比