feat: 应用api调用(未完成版)

index.html

@@ -8,7 +8,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4711453_n5pnpk71gp.css" />
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4711453_j7wtxbx0oer.css" />
     <title>Model Link</title>
   </head>
 

src/apis/agent-analyze.ts

@@ -43,3 +43,37 @@ export function fetchGetMonthSendMessageCount<T>(agentId: string, channel: strin
 export function fetchGetMonthConsumePointCount<T>(agentId: string, channel: string[]) {
   return request.post<T>(`/agentDataAnalyzeRest/getPointUsageCount.json?agentId=${agentId}&channel=${channel}`)
 }
+
+/**
+ * @params { agentId: 应用Id timeRange: { rangType: 类型, startTime: 开始时间, endTime: 结束时间 }}
+ * @returns API渠道积分使用情况
+ */
+export function fetchGetAPIChannelPointUsageCount<T>(payload: {
+  agentId: string
+  timeRange: {
+    rangType: 'today' | 'week' | 'month' | 'customize'
+    startTime: string
+    endTime: string
+  }
+}) {
+  return request.post<T>('/agentDataAnalyzeRest/getApiChannelPointUsageCount.json', payload)
+}
+
+/**
+ * @params { reportRequestType：导出类型 agentId: 应用Id timeRange: { rangType: 类型, startTime: 开始时间, endTime: 结束时间 }}
+ * @returns API调用积分消耗报表导出
+ */
+export function fetchReportAPIChannelPointUsage<T>(payload: {
+  reportRequestType: string
+  agentId: string
+  timeRange: {
+    rangType: 'today' | 'week' | 'month' | 'customize'
+    startTime: string
+    endTime: string
+  }
+}) {
+  return request.post<T>('/formReportingRest/report.json', payload, {
+    responseType: 'blob',
+    timeout: 0,
+  })
+}

src/apis/agent-application.ts

@@ -187,3 +187,10 @@ export function fetchGetAutoPlayByAgentId<T>(agentId: string) {
 export function fetchUpdateAutoPlay<T>(agentId: string, autoPlay: 'Y' | 'N') {
   return request.post<T>(`/agentApplicationRest/enableAutoPlay.json?agentId=${agentId}&autoPlay=${autoPlay}`)
 }
+
+/**
+ * @returns 获取API配置
+ */
+export function fetchGetAPIProfile<T>() {
+  return request.post<T>('/agentApplicationRest/getApiProfile.json')
+}

src/locales/langs/en.yaml

@@ -112,6 +112,7 @@ common_module:
   forever_effective: 'Forever Effective'
   year: ' Year'
   month: ' Month'
+  today: 'Today'
   alipay: 'Alipay'
   wechat: 'WeChat'
   analysis: 'Analysis'
@@ -128,6 +129,10 @@ common_module:
   payment_success: 'Payment success'
   back: 'Back'
   time: 'Time(s)'
+  export_data: 'Export Data'
+  not_generated: 'Not generated'
+  export_successfully: 'Export successfully'
+  export_failed: 'Export failed'
 
   dialogue_module:
     continue_question_message: 'You can keep asking questions'
@@ -376,6 +381,13 @@ personal_space_module:
         removal_prompt_title: 'Are you sure you want to remove the app from the app plaza'
         removal_prompt_content: 'After removal, platform users will not be able to experience this application through the app plaza. If you need to relist it, please reconfigure it'
         successfully_configured_published: 'Configuration successful, published to App Store'
+        api_call: 'API call'
+        api_call_desc: 'You can use apis to connect to agents interfaces'
+        interface_document: 'Interface document'
+        click_to_generate: 'Click to generate'
+        agentId: 'AgentId'
+        api_call_details: 'API call details'
+        api_call_datetime: 'Call datetime'
 
       agent_sale_module:
         application_square_release_setting: 'The application plaza publishes the configuration'
@@ -416,6 +428,8 @@ personal_space_module:
     upload_knowledge_document_btn_text: 'Import file'
     batch_delete_knowledge_document_btn_text: 'Batch deletion'
     not_find_knowledge_document_message: 'No knowledge base file found'
+    not_all_files_train_complete_tip: 'Some of the files are not valid. Please remove the invalid files and try adding again.'
+    cannot_add_tip_when_file_is_training: 'Currently, the files are being trained and cannot be added'
 
     create_knowledge_modal_title: 'Create a knowledge base'
     edit_knowledge_modal_title: 'Edit knowledge base'

src/locales/langs/zh-cn.yaml

@@ -111,6 +111,7 @@ common_module:
   forever_effective: '永远有效'
   year: '年'
   month: '个月'
+  today: '今日'
   alipay: '支付宝'
   wechat: '微信'
   analysis: '分析'
@@ -127,6 +128,10 @@ common_module:
   payment_success: '支付成功'
   back: '返回'
   time: '次'
+  export_data: '导出数据'
+  not_generated: '未生成'
+  export_successfully: '导出成功'
+  export_failed: '导出失败'
 
   dialogue_module:
     continue_question_message: '你可以继续提问'
@@ -374,6 +379,13 @@ personal_space_module:
         removal_prompt_title: '确定要下架在应用广场的应用？'
         removal_prompt_content: '下架后，平台用户将无法通过应用广场体验本应用，如需再次上架请重新配置。'
         successfully_configured_published: '配置成功，已发布至应用广场'
+        api_call: 'API调用'
+        api_call_desc: '可使用API对接应用接口'
+        interface_document: '接口文档'
+        click_to_generate: '点击生成'
+        agentId: '应用ID'
+        api_call_details: 'API调用明细'
+        api_call_datetime: '调用时间'
 
       agent_sale_module:
         application_square_release_setting: '应用广场发布配置'
@@ -414,6 +426,8 @@ personal_space_module:
     upload_knowledge_document_btn_text: '导入文件'
     batch_delete_knowledge_document_btn_text: '批量删除'
     not_find_knowledge_document_message: '未找到知识库文件'
+    not_all_files_train_complete_tip: '存在不可用文件，请删除文件后再添加'
+    cannot_add_tip_when_file_is_training: '文件正在学习中，不可添加'
 
     create_knowledge_modal_title: '创建知识库'
     edit_knowledge_modal_title: '编辑知识库'

src/locales/langs/zh-hk.yaml

@@ -111,6 +111,7 @@ common_module:
   forever_effective: '永遠有效'
   year: '年'
   month: '個月'
+  today: '今日'
   alipay: '支付寶'
   wechat: '微信'
   analysis: '分析'
@@ -127,6 +128,10 @@ common_module:
   payment_success: '支付成功'
   back: '返回'
   time: '次'
+  export_data: '導出數據'
+  not_generated: '未生成'
+  export_successfully: '導出成功'
+  export_failed: '導出失敗'
 
   dialogue_module:
     continue_question_message: '你可以繼續提問'
@@ -374,6 +379,13 @@ personal_space_module:
         removal_prompt_title: '確定要下架在應用廣場的應用？'
         removal_prompt_content: '下架後，平臺用戶將無法通過應用廣場體驗本應用，如需再次上架請重新配置。'
         successfully_configured_published: '配置成功，已發布至應用廣場'
+        api_call: 'API調用'
+        api_call_desc: '可使用API對接應用接口'
+        interface_document: '接口文檔'
+        click_to_generate: '點擊生成'
+        agentId: '應用ID'
+        api_call_details: 'API調用明細'
+        api_call_datetime: '調用時間'
 
       agent_sale_module:
         application_square_release_setting: '應用廣場發佈配寘'
@@ -414,6 +426,8 @@ personal_space_module:
     upload_knowledge_document_btn_text: '導入文件'
     batch_delete_knowledge_document_btn_text: '批量刪除'
     not_find_knowledge_document_message: '未找到知識庫文件'
+    not_all_files_train_complete_tip: '存在不可用文件，請刪除文件後再添加'
+    cannot_add_tip_when_file_is_training: '文件正在學習中，不可添加'
 
     create_knowledge_modal_title: '創建知識庫'
     edit_knowledge_modal_title: '編輯知識庫'

src/views/personal-space/personal-app-setting/components/agent-publish.vue → src/views/personal-space/personal-app-setting/components/agent-publish/agent-publish.vue

 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { Computer, PreviewOpen, AllApplication, SettingOne } from '@icon-park/vue-next'
+import { Computer, PreviewOpen, AllApplication, SettingOne, Api } from '@icon-park/vue-next'
 import useTableScrollY from '@/composables/useTableScrollY'
 import { copyToClip } from '@/utils/copy'
 import { formatDateTime } from '@/utils/date-formatter'
@@ -14,7 +14,8 @@ import {
   fetchRemoveSalePublishApplication,
 } from '@/apis/agent-application'
 import { defaultPersonalAppConfigState, usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
-import { ApplicationMallInfo } from '../../personal-app/types'
+import { ApplicationMallInfo } from '../../../personal-app/types'
+import ApiCallDrawer from './components/api-call-drawer.vue'
 
 const { t } = useI18n()
 
@@ -34,6 +35,7 @@ const applicationMallInfo = ref<ApplicationMallInfo>({
   isSale: '',
   launchTime: '',
 })
+const isShowAPICallDrawer = ref(false)
 
 watch(
   () => saleApplicationsInfo.value,
@@ -76,6 +78,9 @@ function handleClickChannelPublishTableAction(actionType: string) {
     case 'unSaleApplication':
       handleUnSaleApplication()
       break
+    case 'APIConfiguration':
+      handleAPIConfiguration()
+      break
   }
 }
 
@@ -139,10 +144,14 @@ function handleGetApplicationInfo() {
 function handleToApplicationSquare() {
   router.push({ name: 'ApplicationsSquare' })
 }
+
+function handleAPIConfiguration() {
+  isShowAPICallDrawer.value = true
+}
 </script>
 
 <template>
-  <div ref="pageContentWrapRef" class="h-full w-full overflow-hidden p-5">
+  <div id="drawer-target" ref="pageContentWrapRef" class="relative h-full w-full overflow-hidden p-5">
     <table class="w-full text-left" :max-height="tableContentY">
       <thead>
         <tr>
@@ -279,25 +288,6 @@ function handleToApplicationSquare() {
               </div>
             </div>
             <div v-show="applicationMallInfo?.isSale === 'Y'" class="flex">
-              <!-- <div
-                class="flex cursor-pointer items-center justify-start rounded-[5px] border-[1px] border-[#000DFF] bg-[#f7f7f9] px-[12px] py-[4px] text-[14px] text-[#000DFF] hover:opacity-80"
-                @click="handleClickChannelPublishTableAction('accessPage')"
-              >
-                <PreviewOpen theme="outline" size="16" fill="#000DFF" :stroke-width="4" class="mr-[6px]" />
-                <span>{{
-                  t('personal_space_module.agent_module.agent_setting_module.agent_publish_module.access_page')
-                }}</span>
-              </div>
-              <div
-                class="hover:text-theme-color hover:border-theme-color ml-[16px] flex cursor-pointer items-center justify-start rounded-md border bg-[#f7f7f9] px-[12px] py-[4px] text-[14px]"
-                @click="handleClickChannelPublishTableAction('copyLink')"
-              >
-                <CustomIcon icon="pepicons-pop:share-android-circle" class="mr-[6px]" />
-
-                <span>{{
-                  t('personal_space_module.agent_module.agent_setting_module.agent_publish_module.share_link')
-                }}</span>
-              </div> -->
               <div
                 class="hover:text-theme-color hover:border-theme-color flex cursor-pointer items-center justify-start rounded-md border bg-[#f7f7f9] px-[12px] py-[4px] text-[14px]"
                 @click="handleClickChannelPublishTableAction('modifySetting')"
@@ -321,9 +311,46 @@ function handleToApplicationSquare() {
             </div>
           </td>
         </tr>
+
+        <tr>
+          <td class="border-[1px] border-[#efeff5]">
+            <div class="flex items-center justify-start p-[12px]">
+              <Api theme="filled" size="24" fill="#000dff" :stroke-width="3" />
+              <div class="ml-[12px]">
+                <div class="flex">
+                  <span class="flex items-center gap-[4px]">
+                    {{ t('personal_space_module.agent_module.agent_setting_module.agent_publish_module.api_call') }}
+                  </span>
+                </div>
+
+                <div class="text-[#84868c]">
+                  {{ t('personal_space_module.agent_module.agent_setting_module.agent_publish_module.api_call_desc') }}
+                </div>
+              </div>
+            </div>
+          </td>
+          <td class="border-[1px] border-[#efeff5] p-[12px]">
+            <span class="text-[#84868c]">---</span>
+          </td>
+          <td class="border-[1px] border-[#efeff5] p-[12px]">
+            <div class="flex">
+              <div
+                class="flex cursor-pointer items-center justify-start rounded-[5px] border-[1px] border-[#000DFF] bg-[#f7f7f9] px-[12px] py-[4px] text-[14px] text-[#000DFF] hover:opacity-80"
+                @click="handleClickChannelPublishTableAction('APIConfiguration')"
+              >
+                <SettingOne theme="outline" size="16" fill="#000dff" :stroke-width="3" class="mr-[3px]" />
+                <span>
+                  {{ t('common_module.config') }}
+                </span>
+              </div>
+            </div>
+          </td>
+        </tr>
       </tbody>
     </table>
 
+    <ApiCallDrawer v-model:is-show="isShowAPICallDrawer" />
+
     <SaleApplicationsConfigurationModal
       v-model="isShowSaleApplicationsConfigurationModal"
       :sale-applications-data="saleApplicationsInfo"

src/views/personal-space/personal-app-setting/components/agent-publish/columns.tsx

+import i18n from '@/locales'
+import { ApiCallDetailItem } from './type'
+
+const t = i18n.global.t
+
+export function createApiCallDetailColumns() {
+  return [
+    {
+      title: () => (
+        <span>
+          {t('personal_space_module.agent_module.agent_setting_module.agent_publish_module.api_call_datetime')}
+        </span>
+      ),
+      key: 'dateTime',
+      align: 'center',
+      ellipsis: {
+        tooltip: true,
+      },
+      render(row: ApiCallDetailItem) {
+        return row.dateTime || '--'
+      },
+    },
+    {
+      title: () => <span>{t('analysis_module.consume_points')}</span>,
+      key: 'count',
+      align: 'center',
+      ellipsis: {
+        tooltip: true,
+      },
+      render(row: ApiCallDetailItem) {
+        return row.count.toFixed(2) || '--'
+      },
+    },
+  ]
+}

src/views/personal-space/personal-app-setting/components/agent-publish/components/api-call-drawer.vue

+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { createApiCallDetailColumns } from '../columns'
+import { ApiCallDetailItem, ApiProfileInfo } from '../type'
+import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
+import { copyToClip } from '@/utils/copy'
+import { fetchGetAPIProfile } from '@/apis/agent-application'
+import { fetchGetAPIChannelPointUsageCount, fetchReportAPIChannelPointUsage } from '@/apis/agent-analyze'
+
+enum RangType {
+  today = 'today',
+  week = 'week',
+  month = 'month',
+  customize = 'customize',
+}
+
+const { t } = useI18n()
+
+const personalAppConfigStore = usePersonalAppConfigStore()
+
+const isShow = defineModel<boolean>('isShow', { required: true })
+
+const apiProfileLoading = ref(false)
+const apiCallDetailLoading = ref(false)
+const apiProfileInfo = ref<ApiProfileInfo>({
+  apiKey: '',
+  apiSecret: '',
+})
+const currentRangType = ref(RangType.today)
+const selectDateRange = ref<[string, string]>(['', ''])
+const rangTypeOptionList = [
+  {
+    label: t('common_module.today'),
+    value: RangType.today,
+  },
+  {
+    label: t('common_module.last_week'),
+    value: RangType.week,
+  },
+  {
+    label: t('common_module.last_month'),
+    value: RangType.month,
+  },
+  {
+    label: t('common_module.custom'),
+    value: RangType.customize,
+  },
+]
+const apiCallDetailColumns = createApiCallDetailColumns()
+const apiCallDetailData = ref<ApiCallDetailItem[]>([])
+
+const disableDateRange = (ts: number, type: 'start' | 'end', range: [number, number] | null) => {
+  if (type === 'start' && range !== null) {
+    return range[1] - ts >= 86400000 * 365 || ts > Date.now()
+  }
+  if (type === 'end' && range !== null) {
+    return ts - range[0] >= 86400000 * 365 || ts > Date.now()
+  }
+
+  return ts > Date.now()
+}
+
+watch(
+  () => isShow.value,
+  async (newVal) => {
+    if (newVal) {
+      await handleGetAPIProfile()
+      await handleGetAPIChannelPointUsageCount()
+    }
+  },
+)
+
+async function handleGetAPIProfile() {
+  apiProfileLoading.value = true
+
+  const res = await fetchGetAPIProfile<ApiProfileInfo>()
+
+  if (res.code === 0) {
+    apiProfileInfo.value = res.data
+    apiProfileLoading.value = false
+  }
+}
+
+async function handleGetAPIChannelPointUsageCount() {
+  apiCallDetailLoading.value = true
+
+  const res = await fetchGetAPIChannelPointUsageCount<ApiCallDetailItem[]>({
+    agentId: personalAppConfigStore.baseInfo.agentId,
+    timeRange: {
+      rangType: currentRangType.value,
+      startTime: selectDateRange.value[0],
+      endTime: selectDateRange.value[1],
+    },
+  })
+
+  if (res.code === 0) {
+    apiCallDetailLoading.value = false
+    apiCallDetailData.value = res.data
+  }
+}
+
+function handleCopyText(text: string) {
+  copyToClip(text)
+  window.$message.success(t('common_module.copy_success_message'))
+}
+
+async function handleUpdateRangType(rangType: string) {
+  if (rangType !== RangType.customize) {
+    selectDateRange.value = ['', '']
+    await handleGetAPIChannelPointUsageCount()
+  }
+}
+
+async function handleUpdateDateRange(_value: [number, number], formattedValue: [string, string]) {
+  if (formattedValue[0] && formattedValue[1]) {
+    selectDateRange.value = formattedValue
+    await handleGetAPIChannelPointUsageCount()
+  }
+}
+
+async function handleExportAPIChannelPointUsageData() {
+  fetchReportAPIChannelPointUsage({
+    reportRequestType: 'API_CHANNEL_POINT_USAGE',
+    agentId: personalAppConfigStore.baseInfo.agentId,
+    timeRange: {
+      rangType: currentRangType.value,
+      startTime: selectDateRange.value[0],
+      endTime: selectDateRange.value[1],
+    },
+  })
+    .then((res) => {
+      const excelUrl = window.URL.createObjectURL(new Blob([res.data as any], { type: 'application/vnd.ms-excel' }))
+      window.open(excelUrl)
+      window.$message.success(t('common_module.export_successfully'))
+    })
+    .catch(() => {
+      window.$message.error(t('common_module.export_failed'))
+    })
+}
+</script>
+
+<template>
+  <n-drawer
+    v-model:show="isShow"
+    :width="861"
+    :show-mask="'transparent'"
+    :trap-focus="false"
+    :block-scroll="false"
+    content-class="rounded-[10px]"
+    class="shadow-none!"
+    to="#drawer-target"
+  >
+    <n-drawer-content
+      :title="t('personal_space_module.agent_module.agent_setting_module.agent_publish_module.api_call')"
+      header-class="border-b-0! p-5! pt-6! text-[16px]! font-600!"
+      body-content-class="px-5! py-0!"
+      footer-class="border-t-0! py-2!"
+      :native-scrollbar="false"
+      closable
+    >
+      <div class="flex min-h-[calc(100vh-56px-62px-20px)] flex-col rounded-[10px] bg-[#fafbfc] p-5">
+        <div class="mb-5 flex justify-end pr-5">
+          <n-button type="primary" :bordered="false">
+            {{ t('personal_space_module.agent_module.agent_setting_module.agent_publish_module.interface_document') }}
+          </n-button>
+        </div>
+        <div class="text-font-color flex h-full flex-col gap-5 text-[14px]">
+          <div class="rounded-[10px] border border-[#e7e7e7] bg-white p-5">
+            <div class="mb-[7px] flex items-center justify-between">
+              <p class="font-600">App Key</p>
+              <span class="text-theme-color cursor-pointer hover:opacity-80" @click="handleGetAPIProfile">
+                {{
+                  t('personal_space_module.agent_module.agent_setting_module.agent_publish_module.click_to_generate')
+                }}
+              </span>
+            </div>
+
+            <div class="rounded-theme h-9 w-full cursor-default border px-3">
+              <div v-show="!apiProfileLoading" class="flex h-full w-full items-center justify-between">
+                <span>{{ apiProfileInfo.apiKey || t('common_module.not_generated') }}</span>
+
+                <n-popover trigger="hover">
+                  <template #trigger>
+                    <i
+                      v-show="apiProfileInfo.apiKey"
+                      class="iconfont icon-copy text-gray-font-color hover:text-theme-color cursor-pointer leading-4"
+                      @click="handleCopyText(apiProfileInfo.apiKey)"
+                    />
+                  </template>
+                  <span>{{ t('common_module.data_table_module.copy') }}</span>
+                </n-popover>
+              </div>
+
+              <div v-show="apiProfileLoading" class="flex h-full w-full items-center">
+                <div class="bg-px-api_profile_loading-gif h-[10px] w-[54px] bg-contain bg-no-repeat" />
+              </div>
+            </div>
+
+            <p class="font-600 mb-[7px] mt-[20px]">App Secret</p>
+            <div class="rounded-theme h-9 w-full cursor-default border px-3">
+              <div v-show="!apiProfileLoading" class="flex h-full w-full items-center justify-between">
+                <span>{{ apiProfileInfo.apiSecret || t('common_module.not_generated') }}</span>
+
+                <n-popover trigger="hover">
+                  <template #trigger>
+                    <i
+                      v-show="apiProfileInfo.apiSecret"
+                      class="iconfont icon-copy text-gray-font-color hover:text-theme-color cursor-pointer leading-4"
+                      @click="handleCopyText(apiProfileInfo.apiSecret)"
+                    />
+                  </template>
+                  <span>{{ t('common_module.data_table_module.copy') }}</span>
+                </n-popover>
+              </div>
+
+              <div v-show="apiProfileLoading" class="flex h-full w-full items-center">
+                <div class="bg-px-api_profile_loading-gif h-[10px] w-[54px] bg-contain bg-no-repeat" />
+              </div>
+            </div>
+          </div>
+
+          <div class="rounded-[10px] border border-[#e7e7e7] bg-white p-5">
+            <p class="font-600 mb-2">
+              {{ t('personal_space_module.agent_module.agent_setting_module.agent_publish_module.agentId') }}
+            </p>
+            <div class="rounded-theme flex h-9 w-full cursor-default items-center justify-between border px-3">
+              <span>{{ personalAppConfigStore.baseInfo.agentId }}</span>
+
+              <n-popover trigger="hover">
+                <template #trigger>
+                  <i
+                    class="iconfont icon-copy text-gray-font-color hover:text-theme-color cursor-pointer leading-4"
+                    @click="handleCopyText(personalAppConfigStore.baseInfo.agentId)"
+                  />
+                </template>
+                <span>{{ t('common_module.data_table_module.copy') }}</span>
+              </n-popover>
+            </div>
+          </div>
+
+          <div class="flex flex-col rounded-[10px] border border-[#e7e7e7] bg-white p-5">
+            <p class="font-600 mb-2">
+              {{ t('personal_space_module.agent_module.agent_setting_module.agent_publish_module.api_call_details') }}
+            </p>
+
+            <div class="my-4.5 flex items-center justify-between">
+              <div class="flex gap-3">
+                <n-select
+                  v-model:value="currentRangType"
+                  :options="rangTypeOptionList"
+                  class="w-[124px]! text-[#84868c]! time-range-select"
+                  @update:value="handleUpdateRangType"
+                />
+
+                <n-date-picker
+                  v-show="currentRangType === 'customize'"
+                  :is-date-disabled="disableDateRange"
+                  type="daterange"
+                  clearable
+                  class="w-[250px]! customize-date-picker"
+                  @update:value="handleUpdateDateRange"
+                />
+              </div>
+
+              <n-button
+                type="primary"
+                :bordered="false"
+                :disabled="!apiCallDetailData.length"
+                @click="handleExportAPIChannelPointUsageData"
+              >
+                {{ t('common_module.export_data') }}
+              </n-button>
+            </div>
+
+            <n-data-table
+              :columns="apiCallDetailColumns"
+              :bordered="true"
+              :bottom-bordered="true"
+              :single-line="false"
+              :max-height="283"
+              :loading="apiCallDetailLoading"
+              :data="apiCallDetailData"
+              virtual-scroll
+            >
+              <template #empty>
+                <div class="flex h-[283px] items-center justify-center">
+                  <div class="flex flex-col items-center justify-center">
+                    <div class="bg-px-empty_list-png mb-5 h-[68px] w-[68px]" />
+                    <p class="select-none text-[#84868c]">{{ t('common_module.empty_data') }}</p>
+                  </div>
+                </div>
+              </template>
+            </n-data-table>
+          </div>
+        </div>
+      </div>
+
+      <template #footer></template>
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<style lang="scss" scoped>
+:deep(.time-range-select .n-base-selection),
+:deep(.customize-date-picker.n-date-picker .n-input) {
+  --n-height: 36px !important;
+}
+
+:deep(.n-input .n-input__input-el) {
+  height: 36px !important;
+}
+</style>

src/views/personal-space/personal-app-setting/components/agent-publish/type.d.ts

+export interface ApiProfileInfo {
+  apiKey: string
+  apiSecret: string
+}
+
+export interface ApiCallDetailItem {
+  dateTime: Date
+  count: number
+}

src/views/personal-space/personal-app-setting/personal-app-setting.vue

@@ -5,7 +5,7 @@ import { Emitter } from 'mitt'
 import { useI18n } from 'vue-i18n'
 import PageNarBar from './components/page-narbar.vue'
 import AgentConfig from './components/agent-config/agent-config.vue'
-import AgentPublish from './components/agent-publish.vue'
+import AgentPublish from './components/agent-publish/agent-publish.vue'
 import AgentAnalysis from './components/agent-analysis/agent-analysis.vue'
 import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
 import { PersonalAppConfigState } from '@/store/types/personal-app-config'

types/locales.d.ts

@@ -112,6 +112,7 @@ declare namespace I18n {
       forever_effective: string
       year: string
       month: string
+      today: string
       alipay: string
       wechat: string
       analysis: string
@@ -127,6 +128,10 @@ declare namespace I18n {
       payment_success: string
       back: string
       time: string
+      export_data: string
+      not_generated: string
+      export_successfully: string
+      export_failed: string
 
       dialogue_module: {
         continue_question_message: string
@@ -378,6 +383,13 @@ declare namespace I18n {
             removal_prompt_title: string
             removal_prompt_content: string
             successfully_configured_published: string
+            api_call: string
+            api_call_desc: string
+            interface_document: string
+            click_to_generate: string
+            agentId: string
+            api_call_details: string
+            api_call_datetime: string
           }
         }
 
@@ -422,6 +434,8 @@ declare namespace I18n {
           upload_knowledge_document_btn_text: string
           batch_delete_knowledge_document_btn_text: string
           not_find_knowledge_document_message: string
+          not_all_files_train_complete_tip: string
+          cannot_add_tip_when_file_is_training: string
 
           create_knowledge_modal_title: string
           edit_knowledge_modal_title: string