feat(apiList): 新增外部接口清单展示页

展示对外提供/对外调用接口清单，支持导出Excel与Markdown，数据来自后端 /sys/extApi/*。
2026-08-11 15:15:24 +08:00
parent ebb6dac446
commit 33dfb1ca9b
2 changed files with 98 additions and 0 deletions
@@ -0,0 +1,18 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/sys/extApi/list',
+  exportXls = '/sys/extApi/exportXls',
+  exportMarkdown = '/sys/extApi/exportMarkdown',
+}
+
+/**
+ * 外部接口清单
+ */
+export const list = () => defHttp.get({ url: Api.list });
+
+export const exportXls = (params?: any) =>
+  defHttp.get({ url: Api.exportXls, params, responseType: 'blob', timeout: 60000 }, { isTransformResponse: false });
+
+export const exportMarkdown = (params?: any) =>
+  defHttp.get({ url: Api.exportMarkdown, params, responseType: 'blob', timeout: 60000 }, { isTransformResponse: false });
@@ -0,0 +1,80 @@
+<template>
+  <PageWrapper title="外部接口清单">
+    <template #headerContent>
+      <div class="flex justify-between items-center">
+        <span class="flex-1">
+          应用系统间接口清单：对外提供接口（外部系统调用本系统）与对外调用接口（本系统调用外部系统）。数据由代码注解 @ExternalApi / @ExternalCall 启动时自动采集。
+        </span>
+        <div>
+          <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls">导出Excel</a-button>
+          <a-button class="ml-2" preIcon="ant-design:file-markdown-outlined" @click="onExportMarkdown">导出Markdown</a-button>
+        </div>
+      </div>
+    </template>
+    <a-card title="对外提供的接口（外部系统调用本系统）" class="mb-4">
+      <a-table :data-source="exposeList" :columns="columns" size="small" :pagination="false" row-key="source" bordered />
+    </a-card>
+    <a-card title="对外调用的接口（本系统调用外部系统）">
+      <a-table :data-source="callList" :columns="columns" size="small" :pagination="false" row-key="source" bordered />
+    </a-card>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { useMethods } from '/@/hooks/system/useMethods';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { list, exportMarkdown as exportMarkdownApi } from './apiList.api';
+
+  const { handleExportXls } = useMethods();
+  const { createMessage } = useMessage();
+
+  const exposeList = ref<any[]>([]);
+  const callList = ref<any[]>([]);
+
+  const columns = [
+    { title: '接口名称', dataIndex: 'name', width: 180 },
+    { title: '接口地址', dataIndex: 'url', width: 260 },
+    { title: 'HTTP方法', dataIndex: 'httpMethod', width: 90 },
+    { title: '调用方系统', dataIndex: 'callerSystem', width: 130 },
+    { title: '被调系统', dataIndex: 'targetSystem', width: 130 },
+    { title: '数据流向', dataIndex: 'dataFlow', width: 200 },
+    { title: '数据范围', dataIndex: 'dataScope', width: 180 },
+    { title: '认证机制', dataIndex: 'auth', width: 90 },
+    { title: '代码位置', dataIndex: 'source', width: 240 },
+    { title: '备注', dataIndex: 'remark' },
+  ];
+
+  function loadData() {
+    list().then((res: any[]) => {
+      const all = res || [];
+      exposeList.value = all.filter((i) => i.type === 'EXPOSE');
+      callList.value = all.filter((i) => i.type === 'CALL');
+    });
+  }
+
+  function onExportXls() {
+    handleExportXls('外部接口清单', '/sys/extApi/exportXls');
+  }
+
+  function onExportMarkdown() {
+    exportMarkdownApi()
+      .then((data: any) => {
+        const blob = new Blob([data], { type: 'text/markdown' });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.style.display = 'none';
+        link.href = url;
+        link.setAttribute('download', '外部接口清单.md');
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+      })
+      .catch(() => {
+        createMessage.warning('文件下载失败');
+      });
+  }
+
+  onMounted(loadData);
+</script>