fix(access-log)：流水日志体验问题修复

src/dashboard-front/src/components/ag-icon.vue

@@ -0,0 +1,25 @@
+<template>
+  <i v-if="!svg" :class="`icon-ag-${name}`" :style="{ fontSize: `${size}px` }" class="icon apigateway-icon"></i>
+  <svg v-else :style="{ width: `${size}px`, height: `${size}px` }" class="icon svg-icon">
+    <use :xlink:href="`#icon-ag-${name}`"></use>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+
+defineProps({
+  name: {
+    type: String,
+    require: true,
+  },
+  size: {
+    type: String,
+    default: '14',
+  },
+  svg: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+</script>

src/dashboard-front/src/language/lang.ts

@@ -1515,6 +1515,7 @@ const lang: ILANG = {
   '关键字搜索': ['Keyword search'],
   '引用条件': ['Reference condition'],
   '如何使用': ['How to use'],
+  '检索出的日志条数为 0，不需要下载': ['The number of retrieved logs is 0, do not need to download'],
   '新建后端服务': ['Create backend service'],
   '于': ['at'],
   '超时时间不能为空': ['Timeout cannot be empty'],

src/dashboard-front/src/views/operate-data/access-log/index.vue

@@ -58,7 +58,7 @@
                 </bk-form-item>
                 <bk-form-item :label="t('查询语句')" class="ag-form-item-inline">
                   <SearchInput
-                    v-model:modeValue="keyword"
+                    v-model:mode-value="keyword"
                     @search="handleSearch"
                     @choose="handleChoose"
                     class="top-search-input"
@@ -76,7 +76,8 @@
           <funnel class="icon" />
           <span class="title">{{ t('检索项：') }}</span>
           <bk-tag closable v-for="item in searchConditions" :key="item" @close="handleTagClose(item)">
-            {{ item }}
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <span v-html="generateTagContent(item)"></span>
           </bk-tag>
           <bk-button theme="primary" text @click="handleClearSearch">
             {{ t('清除') }}
@@ -113,12 +114,14 @@
               <span class="panel-title">{{ t('日志详情') }}</span>
               <span class="panel-total">
                 {{ t('共') }}
-                <span>{{ table?.list?.length }}</span>
+                <span>{{ pageCount }}</span>
                 {{ t('条') }}
               </span>
-              <span class="download-logs" @click="handleDownload">
-                <i class="apigateway-icon icon-ag-download">
-                </i>
+              <span
+                :class="['download-logs', { 'disabled-logs': pageCount === 0 }]"
+                @click="handleDownload"
+                v-bk-tooltips="{ content: t('检索出的日志条数为 0，不需要下载'), disabled: pageCount !== 0 }">
+                <ag-icon name="download" size="16" />
                 {{ t('下载日志') }}
               </span>
               <bk-alert
@@ -174,17 +177,19 @@
                       </dt>
                       <dd class="value">
 
-                        <span class="respond" v-if="field === 'response_body' && row.status === 200">
+                        <span class="respond" v-if="field === 'response_body' && row.status === '200'">
                           <info-line class="respond-icon" /><span>{{ t('状态码为 200 时不记录响应正文') }}</span>
                         </span>
                         <span v-else>
                           {{ formatValue(row[field], field) }}
                         </span>
 
-                        <span class="opt-btns" v-if="showOpts(field)">
+                        <span class="opt-btns" v-if="row[field]">
                           <copy-shape v-bk-tooltips="t('复制')" @click="handleRowCopy(field, row)" class="opt-copy" />
-                          <enlarge-line v-bk-tooltips="t('添加到本次检索')" @click="handleInclude(field, row)" />
-                          <narrow-line v-bk-tooltips="t('从本次检索中排除')" @click="handleExclude(field, row)" />
+                          <template v-if="showOpts(field)">
+                            <enlarge-line v-bk-tooltips="t('添加到本次检索')" @click="handleInclude(field, row)" />
+                            <narrow-line v-bk-tooltips="t('从本次检索中排除')" @click="handleExclude(field, row)" />
+                          </template>
                         </span>
 
                       </dd>
@@ -249,6 +254,7 @@ import {
 } from 'bkui-vue/lib/icon';
 import { Message } from 'bkui-vue';
 import { useStorage } from '@vueuse/core';
+import AgIcon from '@/components/ag-icon.vue';
 
 const { t } = i18n.global;
 const { getChartIntervalOption } = userChartIntervalOption();
@@ -310,6 +316,10 @@ const searchConditions = computed(() => {
   return res;
 });
 
+const pageCount = computed(() => {
+  return pagination.value.count;
+});
+
 // const searchUsage = ref({
 //   showed: false,
 // });
@@ -434,13 +444,22 @@ const renderChart = (data: Record<string, any>) => {
       feature: {
         dataZoom: {
           show: true,
+          yAxisIndex: 'none',
+          iconStyle: {
+            opacity: 0,
+          },
         },
       },
     },
   };
   const timeDuration = timeline[timeline.length - 1] - timeline[0];
   const intervalOption = getChartIntervalOption(timeDuration, 'time', 'xAxis');
   chartInstance.value.setOption(merge(options, intervalOption));
+  chartInstance.value?.dispatchAction({
+    type: 'takeGlobalCursor',
+    key: 'dataZoomSelect',
+    dataZoomSelectActive: true,
+  });
   chartResize();
 };
 
@@ -644,13 +663,26 @@ const handleTagClose = (item: string) => {
   getSearchData();
 };
 
+const generateTagContent = (item: string) => {
+  if (!item) {
+    return;
+  }
+  if (item.indexOf('!=') !== -1) {
+    return item.replace('!=', '<span class="exclude-equal">!=</span>');
+  }
+  return item.replace('=', '<span class="include-equal">=</span>');
+};
+
 const handleClearSearch = () => {
   includeObj.value = [];
   excludeObj.value = [];
   getSearchData();
 };
 
 const handleDownload = async (e: Event) => {
+  if (pagination.value.count === 0) {
+    return;
+  }
   e.stopPropagation();
   try {
     const { params, path } = getPayload();
@@ -794,6 +826,31 @@ const initData = async () => {
 const initChart = async () => {
   chartInstance.value = markRaw(echarts.init(chartContainer.value));
   window.addEventListener('resize', chartResize);
+
+  chartInstance.value.on('datazoom', (event: {batch: {startValue: number, endValue: number}[]}) => {
+    const { startValue, endValue } = event.batch[0];
+
+    // 获取x轴缩放后的数据范围
+    const zoomedXAxisData = chartInstance.value.getOption().xAxis[0].data.slice(startValue, endValue + 1);
+    const startTime = zoomedXAxisData[0];
+    const endTime = zoomedXAxisData[zoomedXAxisData.length - 1];
+
+    if (startTime === endTime) {
+      dateTimeRange.value = [];
+      shortcutSelectedIndex.value = 1;
+      [datePickerRef.value.shortcut] = [AccessLogStore.datepickerShortcuts[1]];
+
+      chartInstance.value.dispatchAction({
+        type: 'restore',
+      });
+    } else {
+      shortcutSelectedIndex.value = -1;
+      dateTimeRange.value = [new Date(startTime), new Date(endTime)];
+    }
+
+    dateKey.value = String(+new Date());
+    handlePickerChange();
+  });
 };
 
 onMounted(() => {
@@ -842,6 +899,10 @@ onBeforeUnmount(() => {
           font-size: 16px;
           margin-right: -4px;
         }
+        &.disabled-logs {
+          color: #c4c6cc;
+          cursor: not-allowed;
+        }
       }
       .panel-title-icon {
         transition: .2s;
@@ -1003,12 +1064,15 @@ onBeforeUnmount(() => {
           }
 
           .opt-btns {
-            color: #1768EF;
-            font-size: 18px;
+            color: #979BA5;
+            font-size: 16px;
             padding-top: 3px;
             margin-left: 10px;
+            &:hover {
+              color: #1768EF;
+            }
             .opt-copy {
-              font-size: 16px;
+              font-size: 14px;
             }
             span {
               cursor: pointer;
@@ -1138,4 +1202,16 @@ onBeforeUnmount(() => {
 .access-log-popover {
   top: 10px !important;
 }
+.include-equal,
+.exclude-equal {
+  font-weight: bold;
+  font-size: 16px;
+  vertical-align: bottom;
+}
+.exclude-equal {
+  color: #EA3636;
+}
+.include-equal {
+  color: #2DCB56;
+}
 </style>