diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts
index da17c86632..49052fcf56 100644
--- a/core/core-frontend/src/locales/en.ts
+++ b/core/core-frontend/src/locales/en.ts
@@ -67,6 +67,27 @@ export default {
     template_center: 'Template center',
     org_center: 'Organization management center'
   },
+  api_pagination: {
+    paging_ettings: 'Paging Settings',
+    parameter_name: 'Parameter name',
+    built_in_parameter_name: 'Built-in parameter name',
+    request_parameter_name: 'Request parameter name',
+    parameter_default_value: 'Parameter default value',
+    parsing_path: 'Parsing path',
+    total_number: 'Total number',
+    total_number_de: 'Total number de',
+    number_of_pages: 'Total number of pages',
+    number__size: 'Page number + size',
+    cursor__size: 'Cursor + size',
+    page_number: 'Page number',
+    pagination_size: 'Pagination size',
+    cursor: 'Cursor',
+    pagination_method: 'Pagination method',
+    response: 'Response',
+    please_enter_jsonpath: 'Please enter JsonPath',
+    enter_parameter_name: 'Please enter parameter name',
+    enter_default_value: 'Please enter default value'
+  },
   operate_log: {
     name: 'Operation log',
     search_by_operate_info: 'Search by operation details',
diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts
index 2c6cef515a..6ce62d9f22 100644
--- a/core/core-frontend/src/locales/tw.ts
+++ b/core/core-frontend/src/locales/tw.ts
@@ -67,6 +67,27 @@ export default {
     template_center: '模板中心',
     org_center: '組織管理中心'
   },
+  api_pagination: {
+    paging_ettings: '分頁設定',
+    parameter_name: '參數名',
+    built_in_parameter_name: '內建參數名',
+    request_parameter_name: '請求參數名',
+    parameter_default_value: '參數預設值',
+    parsing_path: '解析路徑',
+    total_number: '總數',
+    total_number_de: '總數量',
+    number_of_pages: '總頁數',
+    number_plus_size: '頁碼+大小',
+    cursor_plus_size: '遊標+大小',
+    page_number: '頁碼',
+    pagination_size: '分頁大小',
+    cursor: '遊標',
+    pagination_method: '分頁方式',
+    response: '回應',
+    please_enter_jsonpath: '請輸入 JsonPath',
+    enter_parameter_name: '請輸入參數名稱',
+    enter_default_value: '請輸入預設值'
+  },
   operate_log: {
     name: '操作日誌',
     search_by_operate_info: '透過操作詳情搜尋',
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index 6dcc933e7b..fbfa9a1b08 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -68,6 +68,27 @@ export default {
     template_center: '模板中心',
     org_center: '组织管理中心'
   },
+  api_pagination: {
+    paging_ettings: '分页设置',
+    parameter_name: '参数名',
+    built_in_parameter_name: '内置参数名',
+    request_parameter_name: '请求参数名',
+    parameter_default_value: '参数默认值',
+    parsing_path: '解析路径',
+    total_number: '总数',
+    total_number_de: '总数量',
+    number_of_pages: '总页数',
+    number__size: '页码+大小',
+    cursor__size: '游标+大小',
+    page_number: '页码',
+    pagination_size: '分页大小',
+    cursor: '游标',
+    pagination_method: '分页方式',
+    response: '响应',
+    please_enter_jsonpath: '请输入 JsonPath',
+    enter_parameter_name: '请输入参数名称',
+    enter_default_value: '请输入默认值'
+  },
   operate_log: {
     name: '操作日志',
     search_by_operate_info: '通过操作详情搜索',
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestForm.vue b/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestForm.vue
index d2661b0eb5..ec6b3f0723 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestForm.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestForm.vue
@@ -3,6 +3,7 @@ import { ref, watch, onBeforeMount, PropType, toRefs } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import ApiKeyValue from './ApiKeyValue.vue'
 import ApiBody from './ApiBody.vue'
+import Pagination from './Pagination.vue'
 import ApiVariable from './ApiVariable.vue'
 import ApiAuthConfig from './ApiAuthConfig.vue'
 import { Body } from './ApiTestModel.js'
@@ -191,6 +192,9 @@ const emits = defineEmits(['changeId'])
         </el-tooltip>
         <api-auth-config :request="apiRequest" />
       </el-tab-pane>
+      <el-tab-pane key="pagination" :label="t('api_pagination.paging_ettings')" name="pagination">
+        <Pagination />
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/Pagination.vue b/core/core-frontend/src/views/visualized/data/datasource/form/Pagination.vue
new file mode 100644
index 0000000000..a026ee0b11
--- /dev/null
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/Pagination.vue
@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { cloneDeep } from 'lodash-es'
+import { useI18n } from '@/hooks/web/useI18n'
+
+const { t } = useI18n()
+const numberToken = ref('empty')
+const options = [
+  {
+    value: 'number',
+    label: t('api_pagination.number__size')
+  },
+  {
+    value: 'token',
+    label: t('api_pagination.cursor__size')
+  },
+  {
+    value: 'empty',
+    label: t('chart.line_symbol_none')
+  }
+]
+
+const requestData = ref([
+  {
+    parameterName: t('api_pagination.page_number'),
+    builtInParameterName: '${pageToken}',
+    requestParameterName: '',
+    parameterDefaultValue: ''
+  },
+  {
+    parameterName: t('api_pagination.pagination_size'),
+    builtInParameterName: '${pageSize}',
+    requestParameterName: '',
+    parameterDefaultValue: ''
+  }
+])
+
+const defaultPathArr = [
+  {
+    value: 'number',
+    label: t('api_pagination.total_number_de')
+  },
+  {
+    value: 'page',
+    label: t('api_pagination.number_of_pages')
+  }
+]
+
+const resolutionPathOptions = ref(cloneDeep(defaultPathArr))
+
+const responseData = ref([
+  {
+    parameterName: t('api_pagination.total_number'),
+    resolutionPath: '',
+    resolutionPathType: 'number'
+  }
+])
+
+const handleNumberSizeChange = () => {
+  resolutionPathOptions.value =
+    numberToken.value === 'number' ? cloneDeep(defaultPathArr) : [cloneDeep(defaultPathArr)[0]]
+  responseData.value[0].resolutionPathType = 'number'
+  requestData.value[0].parameterName =
+    numberToken.value === 'number' ? t('api_pagination.page_number') : t('api_pagination.cursor')
+  responseData.value[0].parameterName =
+    numberToken.value === 'number' ? t('api_pagination.total_number') : t('api_pagination.cursor')
+}
+</script>
+
+<template>
+  <div class="api-pagination">
+    <span class="type">{{ t('api_pagination.pagination_method') }}</span>
+    <el-select v-model="numberToken" @change="handleNumberSizeChange" style="width: 100%">
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+    <template v-if="numberToken !== 'empty'">
+      <div class="table-title request">{{ t('datasource.request') }}</div>
+      <el-table header-cell-class-name="header-cell" :data="requestData" style="width: 100%">
+        <el-table-column prop="parameterName" :label="t('api_pagination.parameter_name')" />
+        <el-table-column
+          prop="builtInParameterName"
+          :label="t('api_pagination.built_in_parameter_name')"
+        />
+        <el-table-column :label="t('api_pagination.request_parameter_name')" width="220">
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.requestParameterName"
+              style="width: 100%"
+              :placeholder="t('api_pagination.enter_parameter_name')"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('api_pagination.parameter_default_value')" width="220">
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.parameterDefaultValue"
+              style="width: 100%"
+              :placeholder="t('api_pagination.enter_default_value')"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="table-title response">{{ t('api_pagination.response') }}</div>
+      <el-table header-cell-class-name="header-cell" :data="responseData" style="width: 100%">
+        <el-table-column
+          prop="parameterName"
+          :label="t('api_pagination.parameter_name')"
+          width="160"
+        />
+        <el-table-column prop="resolutionPath" :label="t('api_pagination.parsing_path')">
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.resolutionPath"
+              style="width: 100%"
+              :placeholder="t('api_pagination.please_enter_jsonpath')"
+              ><template #prepend>
+                <el-select
+                  class="bg-white"
+                  v-model="scope.row.resolutionPathType"
+                  style="width: 89px"
+                >
+                  <el-option
+                    v-for="item in resolutionPathOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select> </template
+            ></el-input>
+          </template>
+        </el-table-column>
+      </el-table>
+    </template>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.api-pagination {
+  margin-top: -8px;
+  .type {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    margin-bottom: 8px;
+  }
+
+  .table-title {
+    width: 100%;
+    height: 30px;
+    padding: 4px 12px;
+
+    &.request {
+      background: #ebf1ff;
+      margin-top: 16px;
+      border-top: 1px solid #dddedf;
+    }
+
+    &.response {
+      background: #e6f7f5;
+    }
+  }
+
+  .bg-white {
+    :deep(.ed-input__wrapper) {
+      background: white;
+    }
+  }
+}
+</style>