diff --git a/src/dashboard-front/bk.config.js b/src/dashboard-front/bk.config.js
index 593e45ec1..cb11bb11d 100644
--- a/src/dashboard-front/bk.config.js
+++ b/src/dashboard-front/bk.config.js
@@ -1,4 +1,5 @@
 const mockServer = require('./mock-server');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 // const { DefinePlugin } = require('webpack');
 
 module.exports = {
@@ -23,12 +24,10 @@ module.exports = {
     };
   },
 
-  // chainWebpack: config => {
-  //   config
-  //   .plugin('feature-flags')
-  //   .use(DefinePlugin, [{
-  //     "__VUE_PROD_DEVTOOLS__": true,
-  //   }]);
-  //   return config
-  // }
+  chainWebpack: config => {
+    config
+    .plugin('monaco')
+    .use(new MonacoWebpackPlugin());
+    return config
+  }
 };
diff --git a/src/dashboard-front/package.json b/src/dashboard-front/package.json
index 91db675bd..d54de83f0 100644
--- a/src/dashboard-front/package.json
+++ b/src/dashboard-front/package.json
@@ -48,6 +48,7 @@
     "mitt": "^3.0.1",
     "moment": "^2.29.4",
     "monaco-editor": "^0.44.0",
+    "monaco-editor-webpack-plugin": "^7.0.0",
     "pinia": "^2.0.23",
     "request": "^2.88.2",
     "semver": "^7.6.0",
diff --git a/src/dashboard-front/src/components/ag-editor.vue b/src/dashboard-front/src/components/ag-editor.vue
index 086958dad..3361d6837 100644
--- a/src/dashboard-front/src/components/ag-editor.vue
+++ b/src/dashboard-front/src/components/ag-editor.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="codemirror">
     <div id="monacoEditor" class="monaco-editor" ref="monacoEditor" :style="style"></div>
+    <div class="tools">
+      <cog-shape class="tool-icon" v-if="showFormat" @click="handleFormat" />
+      <copy-shape class="tool-icon" v-if="showCopy" @click="handleCopy" />
+      <filliscreen-line class="tool-icon" v-if="showFullScreen" @click="handleFullScreen" />
+    </div>
   </div>
 </template>
 <script setup>
@@ -8,6 +13,8 @@
 import { ref, onMounted, toRefs, computed, watch, onBeforeMount } from 'vue';
 // 引入monaco编辑器
 import * as monaco from 'monaco-editor';
+import { copy } from '@/common/util';
+import { CogShape, CopyShape, FilliscreenLine } from 'bkui-vue/lib/icon';
 
 let editor = null; // 编辑器实例
 const monacoEditor = ref(null);
@@ -27,6 +34,10 @@ const props = defineProps({
   width: { type: [String, Number], default: '100%' },
   height: { type: [String, Number], default: '100%' },
   theme: { type: String, default: 'vs-dark' },
+  minimap: { type: Boolean, default: true },
+  showFormat: { type: Boolean, default: false },
+  showCopy: { type: Boolean, default: false },
+  showFullScreen: { type: Boolean, default: false },
 });
 
 const { modelValue, language, readOnly, width, height, theme } = toRefs(props);
@@ -95,6 +106,9 @@ const initEditor = () => {
     readOnly: readOnly.value, // 是否只读  取值 true | false
     lineHeight: 24,
     glyphMargin: true,  // 是否显示行号左侧装饰，用于显示当前行的错误信息等级：error | warning
+    minimap: {
+      enabled: props.minimap, // 小地图
+    },
   });
 
   editorMounted(); // 编辑器初始化后
@@ -182,6 +196,46 @@ const switchFontSize = () => {
   });
 };
 
+const handleFormat = () => {
+  if (language.value === 'json') { // 格式化 JSON 文档
+    editor.trigger('a', 'editor.action.formatDocument');
+  }
+  // yaml 格式 需 npm i yamljs 拓展支持
+};
+
+const handleCopy = () => {
+  copy(editor.getValue());
+};
+
+// 全屏开关变量
+let isFullScreen = false;
+const handleFullScreen = () => {
+  const domNode = editor.getDomNode();
+  const container = (domNode.parentNode).parentNode;
+  const toolsDom = container.querySelector('.tools');
+
+  if (isFullScreen) {
+    document.body.style.overflow = '';
+    container.style.position = 'relative';
+    container.style.zIndex = '0';
+    toolsDom.style.zIndex = '0';
+    editor.layout();
+    isFullScreen = false;
+  } else {
+    document.body.style.overflow = 'hidden';
+    container.style.position = 'fixed';
+    container.style.zIndex = '6003';
+    container.style.overflow = 'hidden';
+    container.style.width = '100%';
+    container.style.height = '100%';
+    container.style.left = 0;
+    container.style.top = 0;
+    toolsDom.style.zIndex = '6004';
+    editor.layout();
+    isFullScreen = true;
+  }
+};
+
 defineExpose({
   setValue,
   setCursorPos,
@@ -196,10 +250,24 @@ defineExpose({
 });
 
 </script>
-<style scoped>
+<style scoped lang="scss">
 .codemirror,
 .monaco-editor {
   width: 100%;
   height: 100%;
 }
+.codemirror {
+  position: relative;
+  .tools {
+    position: absolute;
+    top: 5px;
+    right: 28px;
+    .tool-icon {
+      cursor: pointer;
+      font-size: 16px;
+      color: #979BA5;
+      margin-left: 12px;
+    }
+  }
+}
 </style>
diff --git a/src/dashboard-front/src/http/online-test.ts b/src/dashboard-front/src/http/online-test.ts
index 8c655e6e2..3a5023727 100644
--- a/src/dashboard-front/src/http/online-test.ts
+++ b/src/dashboard-front/src/http/online-test.ts
@@ -46,3 +46,10 @@ export const getUserAuthType = () => fetch.get(`${BK_DASHBOARD_URL}/settings/use
  * @returns
  */
 export const resourceSchema = (gatewayId: number, stageId: number, resourceId: number) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${gatewayId}/releases/stages/${stageId}/resources/${resourceId}/schema/`);
+
+/**
+ *  在线调试历史记录列表
+ * @param apigwId 网关id
+ * @returns
+ */
+export const getTestHistories = (apigwId: number, data: any) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/tests/histories/?${json2Query(data)}`);
diff --git a/src/dashboard-front/src/http/report.ts b/src/dashboard-front/src/http/report.ts
index f10f05b66..d17f2f3df 100644
--- a/src/dashboard-front/src/http/report.ts
+++ b/src/dashboard-front/src/http/report.ts
@@ -1,5 +1,5 @@
 import fetch from './fetch';
-import { json2Query } from '@/common/util';
+import { json2Query, blobDownLoad } from '@/common/util';
 
 const { BK_DASHBOARD_URL } = window;
 
@@ -20,3 +20,13 @@ export const getApigwStages = (apigwId: number, params: any) => fetch.get(`${BK_
  * @param apigwId 网关id
  */
 export const getApigwResources = (apigwId: number, params: any) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/resources/?${json2Query(params)}`);
+
+/**
+ *  日志导出
+ * @param apigwId 网关id
+ * @param data 导出参数
+ */
+export const exportLogs = async (apigwId: number, data: any) => {
+  const res = await fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/logs/export/`, data, { responseType: 'blob' });
+  return blobDownLoad(res);
+};
diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
index 26855fc6a..80d4298e7 100644
--- a/src/dashboard-front/src/language/lang.ts
+++ b/src/dashboard-front/src/language/lang.ts
@@ -1300,6 +1300,12 @@ const lang: ILANG = {
   '查看日志': ['View logs'],
   '发布人': ['Releaser'],
   '发布资源': ['Release resource'],
+  '响应状态码': ['Response status code'],
+  '调用时间': ['Call time'],
+  '请求记录': ['Request record'],
+  '检索项：': ['Search terms:'],
+  '清除': ['Clear away'],
+  '下载日志': ['Download log'],
   '下架': ['Unpublish'],
   '今天': ['Today'],
   '近7天': ['Last 7 days'],
diff --git a/src/dashboard-front/src/views/online-debug/components/doc.vue b/src/dashboard-front/src/views/online-debug/components/doc.vue
index 461a86f4e..eae5ab7ba 100644
--- a/src/dashboard-front/src/views/online-debug/components/doc.vue
+++ b/src/dashboard-front/src/views/online-debug/components/doc.vue
@@ -58,7 +58,7 @@
           <!-- eslint-disable-next-line vue/no-v-html -->
           <div class="ag-markdown-view" id="markdown" :key="renderHtmlIndex" v-html="curComponent.markdownHtml"></div>
         </bk-tab-panel>
-        <bk-tab-panel
+        <!-- <bk-tab-panel
           :name="'sdk'"
           :label="t('SDK及示例')"
           v-if="userStore.featureFlags?.ENABLE_SDK"
@@ -80,10 +80,9 @@
             </div>
 
             <h3 class="f16 mt20"> {{ t('SDK使用样例') }} </h3>
-            <!-- eslint-disable-next-line vue/no-v-html -->
             <div class="ag-markdown-view mt20" :key="renderHtmlIndex" v-html="sdkMarkdownHtml"></div>
           </div>
-        </bk-tab-panel>
+        </bk-tab-panel> -->
       </bk-tab>
     </div>
 
@@ -91,6 +90,8 @@
 </template>
 
 <script setup lang="ts">
+/* eslint-disable max-len */
+
 import { ref, computed, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useUser, useCommon } from '@/store';
@@ -146,7 +147,7 @@ const userList = computed(() => {
 });
 const chatName = computed(() => `${t('[蓝鲸网关API咨询] 网关')}${curApigw.value?.name}`);
 const chatContent = computed(() => `${t('网关API文档')}:${location.href}`);
-const SDKInfo = computed(() => t('网关当前环境【{curStageText}】对应的资源版本未生成 SDK，可联系网关负责人生成 SDK', { curStageText: props.stageName }));
+// const SDKInfo = computed(() => t('网关当前环境【{curStageText}】对应的资源版本未生成 SDK，可联系网关负责人生成 SDK', { curStageText: props.stageName }));
 
 const md = new MarkdownIt({
   linkify: false,
diff --git a/src/dashboard-front/src/views/online-debug/components/payload-body.vue b/src/dashboard-front/src/views/online-debug/components/payload-body.vue
index ecd588e31..b45be62a8 100644
--- a/src/dashboard-front/src/views/online-debug/components/payload-body.vue
+++ b/src/dashboard-front/src/views/online-debug/components/payload-body.vue
@@ -47,7 +47,16 @@
     <edit-table v-show="type === 'data'" ref="dataRef" :list="fromDataList" />
     <edit-table v-show="type === 'urlencoded'" ref="urlencodedRef" :list="urlencodedList" />
     <div class="raw-content" v-show="type === 'raw'">
-      <editor-monaco v-model="editorText" theme="Visual Studio" ref="resourceEditorRef" />
+      <editor-monaco
+        v-model="editorText"
+        theme="Visual Studio"
+        language="json"
+        ref="resourceEditorRef"
+        :minimap="false"
+        :show-format="true"
+        :show-copy="true"
+        :show-full-screen="true"
+      />
     </div>
   </div>
 </template>
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 636565784..11dd0ed28 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
@@ -9,9 +9,10 @@
         <div class="history-search">
           <bk-input
             class="search-input"
-            v-model="name"
+            v-model="filterData.resource_name"
             type="search"
             :placeholder="t('请输入资源名称')"
+            @blur="getList()"
           />
 
           <bk-date-picker
@@ -42,14 +43,16 @@
             :row-style="{ cursor: 'pointer' }"
             :show-overflow-tooltip="true"
           >
-            <bk-table-column :label="t('资源名称')" prop="name"></bk-table-column>
-            <bk-table-column :label="t('响应状态码')" prop="status">
+            <bk-table-column :label="t('资源名称')" prop="resource_name"></bk-table-column>
+            <bk-table-column :label="t('响应状态码')" prop="status_code">
               <template #default="{ data }">
-                <span :class="['dot', String(data?.status)?.startsWith('2') ? 'success' : 'failure']"></span>
-                {{ data?.status }}
+                <span
+                  :class="['dot', String(data?.response?.status_code)?.startsWith('2') ? 'success' : 'failure']">
+                </span>
+                {{ data?.response?.status_code }}
               </template>
             </bk-table-column>
-            <bk-table-column :label="t('调用时间')" prop="time"></bk-table-column>
+            <bk-table-column :label="t('调用时间')" prop="created_time"></bk-table-column>
             <bk-table-column :label="t('操作')">
               <template #default="{ row }">
                 <bk-button theme="primary" text @click="(e: any) => handleRowClick(e, row)">
@@ -57,10 +60,16 @@
                 </bk-button>
               </template>
             </bk-table-column>
-            <!-- eslint-disable-next-line vue/no-unused-vars -->
-            <template #expandRow="row">
+            <template #expandRow>
               <div class="details">
-                <editor-monaco v-model="editorText" theme="Visual Studio" ref="resourceEditorRef" />
+                <editor-monaco
+                  v-model="editorText"
+                  theme="Visual Studio"
+                  ref="resourceEditorRef"
+                  language="json"
+                  :minimap="false"
+                  :show-copy="true"
+                />
               </div>
             </template>
           </bk-table>
@@ -73,59 +82,27 @@
 <script lang="ts" setup>
 import { ref, shallowRef, reactive, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useAccessLog } from '@/store';
+import { useAccessLog, useCommon } from '@/store';
 import editorMonaco from '@/components/ag-editor.vue';
+import { getTestHistories } from '@/http';
 
 const { t } = useI18n();
+const common = useCommon();
 
 const isShow = ref<boolean>(false);
-const name = ref<string>('');
+const filterData = ref<any>({
+  resource_name: '',
+  time_start: '',
+  time_end: '',
+});
 const dateTimeRange = ref([]);
 const dateKey = ref('dateKey');
 const AccessLogStore = useAccessLog();
 const shortcutSelectedIndex = shallowRef(-1);
 const tableRef = ref(null);
 const resourceEditorRef: any = ref<InstanceType<typeof editorMonaco>>();
-const tableList = ref<any>([
-  {
-    id: 1,
-    name: 'bk_login_is_login',
-    status: 200,
-    time: '2024-12-12 12:00:00',
-  },
-  {
-    id: 2,
-    name: 'bk_login_is_login',
-    status: 200,
-    time: '2024-12-12 12:00:00',
-  },
-  {
-    id: 3,
-    name: 'bk_login_is_login',
-    status: 400,
-    time: '2024-12-12 12:00:00',
-  },
-  {
-    id: 4,
-    name: 'bk_login_is_login',
-    status: 500,
-    time: '2024-12-12 12:00:00',
-  },
-]);
-const editorText = ref<string>(`{
-	"type": "team",
-	"test": {
-		"testPage": "tools/testing/run-tests.htm",
-		"enabled": true
-	},
-    "search": {
-        "excludeFolders": [
-			".git",
-			"tools/testing/qunit",
-			"tools/testing/chutzpah",
-			"server.net"
-        ]
-}`);
+const tableList = ref<any>([]);
+const editorText = ref<string>('');
 const tableEmptyConf = reactive<any>({
   keyword: '',
   isAbnormal: false,
@@ -144,21 +121,23 @@ const handleShortcutChange = (value: Record<string, any>, index: number) => {
   updateTableEmptyConfig();
 };
 
-// const formatDatetime = (timeRange: number[]) => {
-//   return [+new Date(`${timeRange[0]}`) / 1000, +new Date(`${timeRange[1]}`) / 1000];
-// };
+const formatDatetime = (timeRange: number[]) => {
+  return [+new Date(`${timeRange[0]}`) / 1000, +new Date(`${timeRange[1]}`) / 1000];
+};
 
 const setSearchTimeRange = () => {
-  // let timeRange = dateTimeRange.value;
-  // // 选择的是时间快捷项，需要实时计算时间值
-  // if (shortcutSelectedIndex.value !== -1) {
-  //   timeRange = AccessLogStore.datepickerShortcuts[shortcutSelectedIndex.value].value();
-  // }
-  // const formatTimeRange = formatDatetime(timeRange);
-  // filterData.value = Object.assign(filterData.value, {
-  //   time_start: formatTimeRange[0] || '',
-  //   time_end: formatTimeRange[1] || '',
-  // });
+  let timeRange = dateTimeRange.value;
+  // 选择的是时间快捷项，需要实时计算时间值
+  if (shortcutSelectedIndex.value !== -1) {
+    timeRange = AccessLogStore.datepickerShortcuts[shortcutSelectedIndex.value].value();
+  }
+  const formatTimeRange = formatDatetime(timeRange);
+  filterData.value = Object.assign(filterData.value, {
+    time_start: formatTimeRange[0] || '',
+    time_end: formatTimeRange[1] || '',
+  });
+
+  getList();
 };
 
 const handleTimeChange = () => {
@@ -179,8 +158,28 @@ const handleRowClick = (e: Event, row: Record<string, any>) => {
   });
 };
 
+const clear = () => {
+  filterData.value.resource_name = '';
+  filterData.value.time_start = '';
+  filterData.value.time_end = '';
+  shortcutSelectedIndex.value = -1;
+  dateTimeRange.value = [];
+};
+
 const show = () => {
+  clear();
   isShow.value = true;
+  getList();
+};
+
+const getList = async () => {
+  const data = {
+    offset: 0,
+    limit: 10000,
+    ...filterData.value,
+  };
+  const res = await getTestHistories(common.apigwId, data);
+  tableList.value = res;
 };
 
 defineExpose({
diff --git a/src/dashboard-front/src/views/online-debug/components/response-content.vue b/src/dashboard-front/src/views/online-debug/components/response-content.vue
index 9e2638d88..944cec4c2 100644
--- a/src/dashboard-front/src/views/online-debug/components/response-content.vue
+++ b/src/dashboard-front/src/views/online-debug/components/response-content.vue
@@ -85,7 +85,14 @@
               </bk-select>
             </div>
             <div class="response-content">
-              <editor-monaco v-model="editorText" theme="Visual Studio" ref="resourceEditorRef" />
+              <editor-monaco
+                v-model="editorText"
+                theme="Visual Studio"
+                ref="resourceEditorRef"
+                :minimap="false"
+                :show-copy="true"
+                :show-full-screen="true"
+              />
             </div>
           </div>
         </template>
diff --git a/src/dashboard-front/src/views/operate-data/access-log/index.vue b/src/dashboard-front/src/views/operate-data/access-log/index.vue
index edbf89e8b..99964d55a 100644
--- a/src/dashboard-front/src/views/operate-data/access-log/index.vue
+++ b/src/dashboard-front/src/views/operate-data/access-log/index.vue
@@ -69,7 +69,16 @@
             </div>
           </template>
         </bk-collapse-panel>
-
+        <div class="search-term" v-show="!!searchConditions?.length">
+          <funnel class="icon" />
+          <span class="title">{{ t('检索项：') }}</span>
+          <bk-tag closable v-for="item in searchConditions" :key="item" @close="handleTagClose(item)">
+            {{ item }}
+          </bk-tag>
+          <bk-button theme="primary" text @click="handleClearSearch">
+            {{ t('清除') }}
+          </bk-button>
+        </div>
         <bk-collapse-panel :name="2" class="collapse-panel mb32" @change="handlePanelChange">
           <template #header>
             <div class="collapse-panel-header">
@@ -104,6 +113,11 @@
                 <span>{{ table?.list?.length }}</span>
                 {{ t('条') }}
               </span>
+              <span class="download-logs" @click="handleDownload">
+                <i class="apigateway-icon icon-ag-download">
+                </i>
+                {{ t('下载日志') }}
+              </span>
               <bk-alert
                 class="flex1"
                 theme="warning"
@@ -164,10 +178,10 @@
                           {{ formatValue(row[field], field) }}
                         </span>
 
-                        <span class="opt-btns" v-if="field === 'request_id'">
+                        <span class="opt-btns" v-if="showOpts(field)">
                           <copy-shape v-bk-tooltips="t('复制')" @click="handleRowCopy(field, row)" class="opt-copy" />
-                          <enlarge-line v-bk-tooltips="t('添加到本次检索')" @click="handleKeySearch(row)" />
-                          <narrow-line v-bk-tooltips="t('从本次检索中排除')" @click="handleRemoveKey(row)" />
+                          <enlarge-line v-bk-tooltips="t('添加到本次检索')" @click="handleInclude(field, row)" />
+                          <narrow-line v-bk-tooltips="t('从本次检索中排除')" @click="handleExclude(field, row)" />
                         </span>
 
                       </dd>
@@ -216,6 +230,7 @@ import {
   fetchApigwStages,
   // fetchApigwAccessLogShareLink,
   getApigwResources,
+  exportLogs,
 } from '@/http';
 import {
   AngleUpFill,
@@ -223,7 +238,9 @@ import {
   EnlargeLine,
   NarrowLine,
   InfoLine,
+  Funnel,
 } from 'bkui-vue/lib/icon';
+import { Message } from 'bkui-vue';
 
 const { t } = i18n.global;
 const { getChartIntervalOption } = userChartIntervalOption();
@@ -269,6 +286,20 @@ const table = ref({
 });
 const includeObj = ref<string[]>([]);
 const excludeObj = ref<string[]>([]);
+
+const searchConditions = computed(() => {
+  const res: string[] = [];
+  includeObj.value?.forEach((item: string) => {
+    const tempArr = item?.split(':');
+    res.push(`${tempArr[0]}=${tempArr[1]}`);
+  });
+  excludeObj.value?.forEach((item: string) => {
+    const tempArr = item?.split(':');
+    res.push(`${tempArr[0]}!=${tempArr[1]}`);
+  });
+  return res;
+});
+
 // const searchUsage = ref({
 //   showed: false,
 // });
@@ -537,13 +568,12 @@ const handleRowCopy = (field:  string, row: any) => {
   copy(copyStr);
 };
 
-const handleKeySearch = (row: any) => {
-  const { request_id } = row;
-
-  includeObj.value?.push(`request_id:${request_id}`);
+const handleInclude = (field:  string, row: any) => {
+  const fieldStr = `${field}:${row[field]}`;
+  includeObj.value?.push(fieldStr);
   includeObj.value = Array.from(new Set(includeObj.value));
 
-  const index = excludeObj.value?.indexOf(`request_id:${request_id}`);
+  const index = excludeObj.value?.indexOf(fieldStr);
   if (index !== -1) {
     excludeObj.value?.splice(index, 1);
   }
@@ -551,13 +581,13 @@ const handleKeySearch = (row: any) => {
   getSearchData();
 };
 
-const handleRemoveKey = (row: any) => {
-  const { request_id } = row;
+const handleExclude = (field:  string, row: any) => {
+  const fieldStr = `${field}:${row[field]}`;
 
-  excludeObj.value?.push(`request_id:${request_id}`);
+  excludeObj.value?.push(fieldStr);
   excludeObj.value = Array.from(new Set(excludeObj.value));
 
-  const index = includeObj.value?.indexOf(`request_id:${request_id}`);
+  const index = includeObj.value?.indexOf(fieldStr);
   if (index !== -1) {
     includeObj.value?.splice(index, 1);
   }
@@ -565,6 +595,67 @@ const handleRemoveKey = (row: any) => {
   getSearchData();
 };
 
+const showOpts = (field: string) => {
+  const fieldArr = ['request_id', 'app_code', 'client_ip', 'resource_name', 'method', 'status'];
+  if (fieldArr?.includes(field)) {
+    return true;
+  }
+  return false;
+};
+
+const handleTagClose = (item: string) => {
+  if (!item) return;
+
+  if (item?.indexOf('!=') !== -1) { // 排除项
+    const tempArr = item?.split('!=');
+    const field = `${tempArr[0]}:${tempArr[1]}`;
+
+    const index = excludeObj.value?.indexOf(field);
+    if (index !== -1) {
+      excludeObj.value?.splice(index, 1);
+    }
+  } else {
+    const tempArr = item?.split('=');
+    const field = `${tempArr[0]}:${tempArr[1]}`;
+
+    const index = includeObj.value?.indexOf(field);
+    if (index !== -1) {
+      includeObj.value?.splice(index, 1);
+    }
+  }
+  getSearchData();
+};
+
+const handleClearSearch = () => {
+  includeObj.value = [];
+  excludeObj.value = [];
+  getSearchData();
+};
+
+const handleDownload = async (e: Event) => {
+  e.stopPropagation();
+  try {
+    const exportParams = {
+      ...searchParams.value,
+      query: keyword.value,
+      offset: (pagination.value.current - 1) * pagination.value.limit,
+      limit: 10000,
+    };
+    const res = await exportLogs(apigwId.value, exportParams);
+    if (res.success) {
+      Message({
+        message: t('导出成功'),
+        theme: 'success',
+      });
+    }
+  } catch ({ error }: any) {
+    Message({
+      message: error.message || t('导出失败'),
+      theme: 'error',
+    });
+  }
+};
+
 // const handleClickCopyLink = async ({ request_id }: any) => {
 //   const params = { request_id };
 //   isShareLoading.value = true;
@@ -706,12 +797,20 @@ onBeforeUnmount(() => {
       .panel-total {
         color: #63656e;
         font-size: 12px;
-        margin-left: 10px;
-        margin-right: 14px;
+        margin: 0 10px;
         span {
           font-weight: bold;
         }
       }
+      .download-logs {
+        margin-right: 14px;
+        color: #3A84FF;
+        font-size: 12px;
+        .icon-ag-download {
+          font-size: 16px;
+          margin-right: -4px;
+        }
+      }
       .panel-title-icon {
         transition: .2s;
       }
@@ -721,6 +820,29 @@ onBeforeUnmount(() => {
     }
   }
 
+  .search-term {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    .icon {
+      padding-top: 2px;
+      margin-right: 4px;
+      color: #979BA5;
+      font-size: 16px;
+    }
+    .title {
+      font-size: 12px;
+      color: #63656E;
+    }
+    :deep(.bk-tag) {
+      background-color: #EAEBF0;
+      border-radius: 2px;
+      &:not(:nth-last-child(1)) {
+        margin-right: 8px;
+      }
+    }
+  }
+
   .mb16 {
     margin-bottom: 16px;
   }