update: api配置

src/api/system/apiPage.ts

@@ -3,4 +3,24 @@ import server from '@/utils/request';
 // 获取tree数据-第一层
 export const getTreeOne_api = () => server.get(`/v3/api-docs/swagger-config`);
 // 获取tree数据-第二层
-export const getTreeTwo_api = (name:string) => server.get(`/v3/api-docs/${name}`);
+export const getTreeTwo_api = (name: string) => server.get(`/v3/api-docs/${name}`);
+
+
+/**
+   * 获取已授权的接口ID
+   * @param id 第三方平台的ID
+   */
+export const getApiGranted_api = (id: string) => server.get(`/application/${id}/granted`);
+/**
+   * 获取可授权的接口ID
+   */
+export const apiOperations_api = () => server.get(`/application/operations`);
+
+/**
+ * 新增可授权的接口ID
+ */
+export const addOperations_api = (data:object) => server.patch(`/application/operations/_batch`,data);
+/**
+ * 删除可授权的接口ID
+ */
+export const delOperations_api = (data:object) => server.remove(`/application/operations/_batch`,{},{data});

src/components/Table/index.vue

@@ -41,7 +41,7 @@
                     </div>
                 </div>
                 <div v-else>
-                    <a-table rowKey="id" :rowSelection="rowSelection" :columns="[..._columns]" :dataSource="_dataSource" :pagination="false">
+                    <a-table rowKey="operationId" :rowSelection="rowSelection" :columns="[..._columns]" :dataSource="_dataSource" :pagination="false">
                         <template #bodyCell="{ column, record }">
                             <!-- <template v-if="column.key === 'action'">
                                 <a-space>

src/router/menu.ts

@@ -29,7 +29,7 @@ export default [
     },
     {
         path: '/system/Api',
-        component: () => import('@/views/system/Apply/Api/index.vue')
+        component: () => import('@/views/system/Platforms/index.vue')
     },
 
     // end: 测试用, 可删除

src/views/system/Apply/Api/components/ApiDoes.vue

@@ -84,6 +84,7 @@ import type { apiDetailsType } from '../typing';
 import InputCard from './InputCard.vue';
 import { PropType } from 'vue';
 
+const emit = defineEmits(['update:paramsTable'])
 const props = defineProps({
     selectApi: {
         type: Object as PropType<apiDetailsType>,
@@ -216,6 +217,7 @@ const respParamsCard = reactive<tableCardType>({
         const tableData = findData(schemaName);
         const codeText = getCodeText(tableData, 3);
 
+        emit('update:paramsTable', tableData)
         respParamsCard.tableData = tableData;
         respParamsCard.codeText = JSON.stringify(codeText);
 

src/views/system/Apply/Api/components/ApiTest.vue

@@ -12,16 +12,16 @@
         <div class="api-card">
             <h5>请求参数</h5>
             <div class="content">
-                <VueJsoneditor
+                <!-- <VueJsoneditor
                     height="400"
                     mode="tree"
                     v-model:text="requestBody.paramsText"
-                />
+                /> -->
-                <!-- <MonacoEditor
+                <MonacoEditor
                     v-model:modelValue="requestBody.paramsText"
                     style="height: 300px; width: 100%"
                     theme="vs"
-                /> -->
+                />
             </div>
         </div>
         <div class="api-card">
@@ -47,21 +47,34 @@ import VueJsoneditor from 'vue3-ts-jsoneditor';
 import MonacoEditor from '@/components/MonacoEditor/index.vue';
 import type { apiDetailsType } from '../typing';
 import InputCard from './InputCard.vue';
-import { PropType } from 'vue';
 
-const props = defineProps({
+const props = defineProps<{
-    selectApi: {
+    selectApi: apiDetailsType;
-        type: Object as PropType<apiDetailsType>,
+    paramsTable: any[];
-        required: true,
+}>();
-    },
-});
 
 const requestBody = reactive({
-    paramsTable: [],
+    paramsTable: [] as requestObj[],
     paramsText: '',
 });
 
 const responsesContent = ref('{"a":123}');
+
+watch(
+    () => props.paramsTable,
+    (n) => {
+        const table = n?.map((item: any) => ({
+            paramsName: item.paramsName,
+            value: '',
+        }));
+        requestBody.paramsTable = table;
+    },
+);
+
+type requestObj = {
+    paramsName: string;
+    value: string;
+};
 </script>
 
 <style lang="less" scoped>

src/views/system/Apply/Api/index.vue

@@ -25,10 +25,11 @@
                             <ApiDoes
                                 :select-api="selectedApi"
                                 :schemas="schemas"
+                                v-model:params-table="paramsTable"
                             />
                         </a-tab-pane>
                         <a-tab-pane key="test" tab="调试">
-                            <ApiTest :select-api="selectedApi" />
+                            <ApiTest :select-api="selectedApi" :params-table="paramsTable" />
                         </a-tab-pane>
                     </a-tabs>
                 </div>
@@ -66,8 +67,9 @@ const treeSelect = (node: treeNodeTpye, nodeSchemas: object = {}) => {
     tableData.value = table;
 };
 
-const activeKey = ref('does');
+const activeKey = ref<'does' | 'test'>('does');
 const schemas = ref({});
+const paramsTable = ref([])
 const initSelectedApi: apiDetailsType = {
     url: '',
     method: '',
@@ -78,7 +80,10 @@ const initSelectedApi: apiDetailsType = {
 };
 const selectedApi = ref<apiDetailsType>(initSelectedApi);
 
-watch(tableData, () => (selectedApi.value = initSelectedApi));
+watch(tableData, () => {
+    activeKey.value = 'does';
+    selectedApi.value = initSelectedApi;
+});
 </script>
 
 <style scoped>

src/views/system/Apply/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        应用管理
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

src/views/system/Platforms/Api/components/ApiDoes.vue

@@ -0,0 +1,378 @@
+<template>
+    <div class="api-does-container">
+        <div class="top">
+            <h5>{{ selectApi.summary }}</h5>
+            <div class="input">
+                <InputCard :value="selectApi.method" />
+                <a-input :value="selectApi?.url" disabled />
+            </div>
+        </div>
+
+        <p>
+            <span class="label">请求数据类型</span>
+            <span>{{
+                getContent(selectApi.requestBody) ||
+                'application/x-www-form-urlencoded'
+            }}</span>
+            <span class="label">响应数据类型</span>
+            <span>{{ `["/"]` }}</span>
+        </p>
+
+        <div class="api-card">
+            <h5>请求参数</h5>
+            <div class="content">
+                <JTable
+                    :columns="requestCard.columns"
+                    :dataSource="requestCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                    <template #required="slotProps">
+                        <span>{{ Boolean(slotProps.required) + '' }}</span>
+                    </template>
+                    <template #type="slotProps">
+                        <span>{{ slotProps.schema.type }}</span>
+                    </template>
+                </JTable>
+            </div>
+        </div>
+        <div class="api-card">
+            <h5>响应状态</h5>
+            <div class="content">
+                <JTable
+                    :columns="responseStatusCard.columns"
+                    :dataSource="responseStatusCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                </JTable>
+
+                <a-tabs v-model:activeKey="responseStatusCard.activeKey">
+                    <a-tab-pane
+                        :key="key"
+                        :tab="key"
+                        v-for="key in tabs"
+                    ></a-tab-pane>
+                </a-tabs>
+            </div>
+        </div>
+
+        <div class="api-card">
+            <h5>响应参数</h5>
+            <div class="content">
+                <JTable
+                    :columns="respParamsCard.columns"
+                    :dataSource="respParamsCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                </JTable>
+            </div>
+
+            <MonacoEditor
+                v-model:modelValue="codeText"
+                style="height: 300px; width: 100%"
+                theme="vs"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import MonacoEditor from '@/components/MonacoEditor/index.vue';
+import type { apiDetailsType } from '../typing';
+import InputCard from './InputCard.vue';
+import { PropType } from 'vue';
+
+const props = defineProps({
+    selectApi: {
+        type: Object as PropType<apiDetailsType>,
+        required: true,
+    },
+    schemas: {
+        type: Object,
+        required: true,
+    },
+});
+const { selectApi } = toRefs(props);
+
+type tableCardType = {
+    columns: object[];
+    tableData: object[];
+    codeText?: any;
+    activeKey?: any;
+    getData?: any;
+};
+const requestCard = reactive<tableCardType>({
+    columns: [
+        {
+            title: '参数名',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '参数说明',
+            dataIndex: 'description',
+            key: 'description',
+        },
+        {
+            title: '请求类型',
+            dataIndex: 'in',
+            key: 'in',
+        },
+        {
+            title: '是否必须',
+            dataIndex: 'required',
+            key: 'required',
+            scopedSlots: true,
+        },
+        {
+            title: '参数类型',
+            dataIndex: 'type',
+            key: 'type',
+            scopedSlots: true,
+        },
+    ],
+    tableData: [],
+    getData: () => {
+        requestCard.tableData = props.selectApi.parameters;
+    },
+});
+const responseStatusCard = reactive<tableCardType>({
+    activeKey: '',
+    columns: [
+        {
+            title: '状态码',
+            dataIndex: 'code',
+            key: 'code',
+        },
+        {
+            title: '说明',
+            dataIndex: 'desc',
+            key: 'desc',
+        },
+        {
+            title: 'schema',
+            dataIndex: 'schema',
+            key: 'schema',
+        },
+    ],
+    tableData: [],
+    getData: () => {
+        if (!Object.keys(props.selectApi.responses).length)
+            return (responseStatusCard.tableData = []);
+
+        const tableData = <any>[];
+        Object.entries(props.selectApi.responses || {}).forEach((item: any) => {
+            const desc = item[1].description;
+            const schema = item[1].content['*/*'].schema.$ref?.split('/') || '';
+
+            tableData.push({
+                code: item[0],
+                desc,
+                schema: schema && schema.pop(),
+            });
+        });
+        responseStatusCard.activeKey = tableData[0]?.code;
+        responseStatusCard.tableData = tableData;
+    },
+});
+const tabs = computed(() =>
+    responseStatusCard.tableData
+        .map((item: any) => item.code + '')
+        .filter((code: string) => code !== '400'),
+);
+const respParamsCard = reactive<tableCardType>({
+    columns: [
+        {
+            title: '参数名称',
+            dataIndex: 'paramsName',
+        },
+        {
+            title: '参数说明',
+            dataIndex: 'desc',
+        },
+        {
+            title: '类型',
+            dataIndex: 'paramsType',
+        },
+    ],
+    tableData: [],
+    codeText: '',
+    getData: (code: string) => {
+        type schemaObjType = {
+            paramsName: string;
+            paramsType: string;
+            desc?: string;
+            children?: schemaObjType[];
+        };
+
+        const schemaName = responseStatusCard.tableData.find(
+            (item: any) => item.code === code,
+        )?.schema;
+        const schemas = toRaw(props.schemas);
+        const basicType = ['string', 'integer', 'boolean'];
+
+        const tableData = findData(schemaName);
+        const codeText = getCodeText(tableData, 3);
+
+        respParamsCard.tableData = tableData;
+        respParamsCard.codeText = JSON.stringify(codeText);
+
+        function findData(schemaName: string) {
+            if (!schemaName || !schemas[schemaName]) {
+                return [];
+            }
+            const result: schemaObjType[] = [];
+            const schema = schemas[schemaName];
+            Object.entries(schema.properties).forEach((item: [string, any]) => {
+                const paramsType =
+                    item[1].type ||
+                    (item[1].$ref && item[1].$ref.split('/').pop()) ||
+                    (item[1].items && item[1].items.$ref.split('/').pop()) ||
+                    '';
+                const schemaObj: schemaObjType = {
+                    paramsName: item[0],
+                    paramsType,
+                    desc: item[1].description || '',
+                };
+                if (!basicType.includes(paramsType))
+                    schemaObj.children = findData(paramsType);
+                result.push(schemaObj);
+            });
+
+            return result;
+        }
+        function getCodeText(arr: schemaObjType[], level: number): object {
+            const result = {};
+
+            arr.forEach((item) => {
+                switch (item.paramsType) {
+                    case 'string':
+                        result[item.paramsName] = '';
+                        break;
+                    case 'integer':
+                        result[item.paramsName] = 0;
+                        break;
+                    case 'boolean':
+                        result[item.paramsName] = true;
+                        break;
+                    case 'array':
+                        result[item.paramsName] = [];
+                        break;
+                    case 'object':
+                        result[item.paramsName] = {};
+                        break;
+                    default: {
+                        const properties = schemas[item.paramsType]
+                            .properties as object;
+                        const newArr = Object.entries(properties).map(
+                            (item: [string, any]) => ({
+                                paramsName: item[0],
+                                paramsType: level
+                                    ? (item[1].$ref &&
+                                          item[1].$ref.split('/').pop()) ||
+                                      (item[1].items &&
+                                          item[1].items.$ref
+                                              .split('/')
+                                              .pop()) ||
+                                      item[1].type ||
+                                      ''
+                                    : item[1].type,
+                            }),
+                        );
+                        result[item.paramsName] = getCodeText(
+                            newArr,
+                            level - 1,
+                        );
+                    }
+                }
+            });
+
+            return result;
+        }
+    },
+});
+
+const { codeText } = toRefs(requestCard);
+
+const getContent = (data: any) => {
+    if (data && data.content) {
+        return Object.keys(data.content || {})[0];
+    }
+    return '';
+};
+onMounted(() => {
+    requestCard.getData();
+    responseStatusCard.getData();
+});
+watch(
+    () => props.selectApi,
+    () => {
+        requestCard.getData();
+        responseStatusCard.getData();
+    },
+);
+
+watch([() => responseStatusCard.activeKey, () => props.selectApi], (n) => {
+    n[0] && respParamsCard.getData(n[0]);
+});
+</script>
+
+<style lang="less" scoped>
+.api-does-container {
+    .top {
+        width: 100%;
+
+        h5 {
+            font-weight: bold;
+            font-size: 16px;
+        }
+
+        .input {
+            display: flex;
+            margin: 24px 0;
+        }
+    }
+    p {
+        display: flex;
+        justify-content: space-between;
+        font-size: 14px;
+
+        .label {
+            font-weight: bold;
+        }
+    }
+    .api-card {
+        margin-top: 24px;
+        h5 {
+            position: relative;
+            padding-left: 10px;
+            font-weight: 600;
+            font-size: 16px;
+
+            &::before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 4px;
+                height: 100%;
+                background-color: #1d39c4;
+                border-radius: 0 3px 3px 0;
+                content: ' ';
+            }
+        }
+        .content {
+            padding-left: 10px;
+
+            :deep(.jtable-body) {
+                padding: 0;
+
+                .jtable-body-header {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/system/Platforms/Api/components/ApiTest.vue

@@ -0,0 +1,299 @@
+<template>
+    <div class="api-test-container">
+        <div class="top">
+            <h5>{{ props.selectApi.summary }}</h5>
+            <div class="input">
+                <InputCard :value="props.selectApi.method" />
+                <a-input :value="props.selectApi?.url" disabled />
+                <span class="send" @click="send">发送</span>
+            </div>
+        </div>
+
+        <div class="api-card">
+            <h5>请求参数</h5>
+            <div class="content">
+                <!-- <VueJsoneditor
+                    height="400"
+                    mode="tree"
+                    v-model:text="requestBody.paramsText"
+                /> -->
+                <div class="table" v-if="paramsTable.length">
+                    <a-form :model="requestBody.params" ref="formRef" >
+                        <a-table
+                            :columns="requestBody.tableColumns"
+                            :dataSource="paramsTable"
+                            :pagination="false"
+                            size="small"
+                        >
+                            <template #bodyCell="{ column, record, index }">
+                                <template v-if="column.key === 'name'">
+                                    <a-form-item
+                                        :name="[
+                                            'paramsTable',
+                                            index +
+                                                (requestBody.pageNum - 1) *
+                                                    requestBody.pageSize,
+                                            'name',
+                                        ]"
+                                        :rules="[
+                                            {
+                                                required: true,
+                                                message: '该字段是必填字段',
+                                            },
+                                        ]"
+                                    >
+                                        <a-input
+                                            v-model:value="record.name"
+                                        ></a-input>
+                                    </a-form-item>
+                                </template>
+                                <template v-else-if="column.key === 'value'">
+                                    <a-form-item
+                                        :name="[
+                                            'paramsTable',
+                                            index +
+                                                (requestBody.pageNum - 1) *
+                                                    requestBody.pageSize,
+                                            'value',
+                                        ]"
+                                        :rules="[
+                                            {
+                                                required: true,
+                                                message: '该字段是必填字段',
+                                            },
+                                        ]"
+                                    >
+                                        <a-input
+                                            v-model:value="record.value"
+                                        ></a-input>
+                                    </a-form-item>
+                                </template>
+                                <template v-else-if="column.key === 'action'">
+                                    <PermissionButton
+                                        type="link"
+                                        :uhasPermission="`{permission}:delete`"
+                                        :popConfirm="{
+                                            title: `确定删除`,
+                                            onConfirm: () =>
+                                                requestBody.clickDel(index),
+                                        }"
+                                    >
+                                        <AIcon type="DeleteOutlined" />
+                                    </PermissionButton>
+                                </template>
+                            </template>
+                        </a-table>
+                    </a-form>
+
+                    <a-pagination
+                        :pageSize="requestBody.pageSize"
+                        v-model:current="requestBody.pageNum"
+                        :total="requestBody.params.paramsTable.length"
+                        hideOnSinglePage
+                        style="text-align: center"
+                    />
+                    <a-button
+                        @click="requestBody.addRow"
+                        style="width: 100%; text-align: center"
+                    >
+                        <AIcon type="PlusOutlined" />新增
+                    </a-button>
+                </div>
+                <MonacoEditor
+                    v-model:modelValue="requestBody.paramsText"
+                    style="height: 300px; width: 100%"
+                    theme="vs"
+                />
+            </div>
+        </div>
+        <div class="api-card">
+            <h5>响应参数</h5>
+            <div class="content">
+                <VueJsoneditor
+                    height="400"
+                    mode="tree"
+                    v-model:text="responsesContent"
+                    :disabled="true"
+                />
+                <!-- <MonacoEditor
+                    v-model:modelValue="responsesContent"
+                    style="height: 300px; width: 100%"
+                    theme="vs"
+                /> -->
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import VueJsoneditor from 'vue3-ts-jsoneditor';
+import MonacoEditor from '@/components/MonacoEditor/index.vue';
+import type { apiDetailsType } from '../typing';
+import InputCard from './InputCard.vue';
+import { cloneDeep, toLower } from 'lodash';
+import { FormInstance } from 'ant-design-vue';
+import server from '@/utils/request'
+
+const props = defineProps<{
+    selectApi: apiDetailsType;
+}>();
+const formRef = ref<FormInstance>();
+const requestBody = reactive({
+    tableColumns: [
+        {
+            title: '参数名称',
+            dataIndex: 'name',
+            key: 'name',
+            scopedSlots: true,
+        },
+        {
+            title: '参数值',
+            dataIndex: 'value',
+            key: 'value',
+            scopedSlots: true,
+        },
+        {
+            title: '操作',
+            dataIndex: 'action',
+            key: 'action',
+            width: '80px',
+            scopedSlots: true,
+        },
+    ],
+    pageSize: 10,
+    pageNum: 1,
+    params: {
+        paramsTable: cloneDeep(props.selectApi.parameters || []) as requestObj[],
+    },
+
+    paramsText: '',
+
+    addRow: () => {
+        if (paramsTable.value.length === 10)
+            requestBody.pageNum = requestBody.pageNum + 1;
+        requestBody.params.paramsTable.push({
+            name: '',
+            value: '',
+        });
+    },
+    clickDel: (index: number) => {
+        if (paramsTable.value.length === 1 && requestBody.pageNum > 1)
+            requestBody.pageNum = requestBody.pageNum - 1;
+        requestBody.params.paramsTable.splice(index, 1);
+    },
+});
+const paramsTable = computed(() => {
+    const startIndex = (requestBody.pageNum - 1) * requestBody.pageSize;
+    const endIndex = requestBody.pageNum * requestBody.pageSize;
+    return requestBody.params.paramsTable.slice(startIndex, endIndex);
+});
+
+const responsesContent = ref('{"a":123}');
+
+const send = () => {
+    formRef.value &&
+        formRef.value.validate().then(() => {
+            const methodName = toLower(props.selectApi.method)
+            const methodObj = {
+                get: 'get',
+                post: 'post',
+                patch: 'patch',
+                put: 'put',
+                delete: 'remove'
+            }
+
+            let url = props.selectApi?.url;
+            const urlParams = {}
+            requestBody.params.paramsTable.forEach(item=>{
+                if(methodName === 'get')
+                    urlParams[item.name] = item.value
+                if(url.includes(`{${item.name}}`))
+                    url = url.replace(`{${item.name}}`, item.value)
+            })
+            const params = {
+                ...JSON.parse(requestBody.paramsText || '{}'),
+                ...urlParams
+            }
+
+            
+
+            server[methodObj[methodName]](url,params).then((resp:any)=>{
+                responsesContent.value = JSON.stringify(resp)
+            })
+
+
+
+
+        });
+};
+
+type requestObj = {
+    name: string;
+    value: string;
+};
+</script>
+
+<style lang="less" scoped>
+.api-test-container {
+    .top {
+        width: 100%;
+
+        h5 {
+            font-weight: bold;
+            font-size: 16px;
+        }
+
+        .input {
+            display: flex;
+
+            .send {
+                width: 65px;
+                padding: 4px 15px;
+                font-size: 14px;
+                color: #fff;
+                background-color: #1890ff;
+                cursor: pointer;
+            }
+        }
+    }
+    .api-card {
+        margin-top: 24px;
+        h5 {
+            position: relative;
+            padding-left: 10px;
+            font-weight: 600;
+            font-size: 16px;
+
+            &::before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 4px;
+                height: 100%;
+                background-color: #1d39c4;
+                border-radius: 0 3px 3px 0;
+                content: ' ';
+            }
+        }
+        .content {
+            padding-left: 10px;
+
+            :deep(.jtable-body) {
+                padding: 0;
+
+                .jtable-body-header {
+                    display: none;
+                }
+
+                
+            }
+            .table {
+                :deep(.ant-table-cell) {
+                    padding: 0 8px;
+                    height: 56px;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/system/Platforms/Api/components/ChooseApi.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="choose-api-container">
+        <JTable
+            :columns="columns"
+            :dataSource="props.tableData"
+            :rowSelection="rowSelection"
+            noPagination
+            model="TABLE"
+        >
+            <template #url="slotProps">
+                <span
+                    style="color: #1d39c4; cursor: pointer"
+                    @click="jump(slotProps)"
+                    >{{ slotProps.url }}</span
+                >
+            </template>
+        </JTable>
+
+        <a-button type="primary" @click="save">保存</a-button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { addOperations_api, delOperations_api } from '@/api/system/apiPage';
+import { message } from 'ant-design-vue';
+import { modeType } from '../typing';
+const emits = defineEmits(['update:clickApi', 'update:selectedRowKeys']);
+const props = defineProps<{
+    tableData: any[];
+    clickApi: any;
+    selectedRowKeys: string[];
+    sourceKeys: string[];
+    mode: modeType;
+}>();
+
+const columns = [
+    {
+        title: 'API',
+        dataIndex: 'url',
+        key: 'url',
+        scopedSlots: true,
+    },
+    {
+        title: '说明',
+        dataIndex: 'summary',
+        key: 'summary',
+    },
+];
+const rowSelection = {
+    onSelect: (record: any) => {
+        let newKeys = [...props.selectedRowKeys];
+
+        if (props.selectedRowKeys.includes(record.id)) {
+            newKeys = newKeys.filter((id) => id !== record.id);
+        } else newKeys.push(record.id);
+
+        emits('update:selectedRowKeys', newKeys);
+    },
+    selectedRowKeys: ref<string[]>([]),
+};
+const save = () => {
+    const keys = props.selectedRowKeys;
+
+    const removeKeys = props.sourceKeys.filter((key) => !keys.includes(key));
+    const addKeys = keys.filter((key) => !props.sourceKeys.includes(key));
+
+    if (props.mode === 'api') {
+        // 此时是api配置
+        removeKeys.length &&
+            delOperations_api(removeKeys)
+                .finally(() => addOperations_api(addKeys))
+                .then(() => message.success('操作成功'));
+    }
+};
+const jump = (row: any) => {
+    emits('update:clickApi', row);
+};
+
+watch(
+    () => props.selectedRowKeys,
+    (n) => {
+        rowSelection.selectedRowKeys.value = n;
+    },
+);
+</script>
+
+<style lang="less" scoped>
+.choose-api-container {
+    height: 100%;
+
+    :deep(.jtable-body-header) {
+        display: none !important;
+    }
+    :deep(.ant-alert-info) {
+        display: none !important;
+    }
+}
+</style>

src/views/system/Platforms/Api/components/InputCard.vue

@@ -0,0 +1,35 @@
+<template>
+    <span class="input-card-container" :class="props.value">
+        {{ props.value?.toLocaleUpperCase() }}
+    </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    value: String,
+});
+</script>
+
+<style lang="less" scoped>
+.input-card-container {
+    padding: 4px 15px;
+    font-size: 14px;
+    color: #fff;
+
+    &.get {
+        background-color: #1890ff;
+    }
+    &.put {
+        background-color: #fa8c16;
+    }
+    &.post {
+        background-color: #52c41a;
+    }
+    &.delete {
+        background-color: #f5222d;
+    }
+    &.patch {
+        background-color: #a0d911;
+    }
+}
+</style>

src/views/system/Platforms/Api/components/LeftTree.vue

@@ -0,0 +1,100 @@
+<template>
+    <a-tree
+        :tree-data="treeData"
+        @select="clickSelectItem"
+        showLine
+        class="left-tree-container"
+    >
+        <template #title="{ name }">
+            {{ name }}
+        </template>
+    </a-tree>
+</template>
+
+<script setup lang="ts">
+import { TreeProps } from 'ant-design-vue';
+
+import { getTreeOne_api, getTreeTwo_api } from '@/api/system/apiPage';
+import type { modeType, treeNodeTpye } from '../typing';
+
+const emits = defineEmits(['select']);
+const props = defineProps<{
+    mode:modeType
+}>()
+
+const treeData = ref<TreeProps['treeData']>([]);
+
+const getTreeData = () => {
+    let tree: treeNodeTpye[] = [];
+    getTreeOne_api().then((resp: any) => {
+        tree = resp.urls.map((item: any) => ({
+            ...item,
+            key: item.url,
+        }));
+        const allPromise = tree.map((item) => getTreeTwo_api(item.name));
+        Promise.all(allPromise).then((values) => {
+            values.forEach((item: any, i) => {
+                tree[i].children = combData(item?.paths);
+                tree[i].schemas = item.components.schemas
+            });
+            treeData.value = tree;
+        });
+    });
+};
+const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => {
+    if(!node.node.parent) return
+    emits('select', node.node.dataRef, node.node?.parent.node.schemas);
+};
+
+onMounted(() => {
+    getTreeData();
+});
+
+const combData = (dataSource: object) => {
+    const apiList: treeNodeTpye[] = [];
+    const keys = Object.keys(dataSource);
+
+    keys.forEach((key) => {
+        const method = Object.keys(dataSource[key] || {})[0];
+        const name = dataSource[key][method].tags[0];
+        let apiObj: treeNodeTpye | undefined = apiList.find(
+            (item) => item.name === name,
+        );
+        if (apiObj) {
+            apiObj.apiList?.push({
+                url: key,
+                method: dataSource[key],
+            });
+        } else {
+            apiObj = {
+                name,
+                key: name,
+                apiList: [
+                    {
+                        url: key,
+                        method: dataSource[key],
+                    },
+                ],
+            };
+            apiList.push(apiObj);
+        }
+    });
+
+    return apiList;
+};
+</script>
+
+<style lang="less">
+.left-tree-container {
+    border-right: 1px solid #e9e9e9;
+    height: calc(100vh - 150px);
+    overflow-y: auto;
+    .ant-tree-list {
+        .ant-tree-list-holder-inner {
+            .ant-tree-switcher-noop {
+                display: none !important;
+            }
+        }
+    }
+}
+</style>

src/views/system/Platforms/Api/index.vue

@@ -0,0 +1,124 @@
+<template>
+    <a-card class="api-page-container">
+        <a-row :gutter="24">
+            <a-col :span="5">
+                <LeftTree @select="treeSelect" :mode="props.mode" />
+            </a-col>
+            <a-col :span="19">
+                <ChooseApi
+                    v-show="!selectedApi.url"
+                    v-model:click-api="selectedApi"
+                    :table-data="tableData"
+                    v-model:selectedRowKeys="selectedKeys"
+                    :source-keys="selectSourceKeys" :mode="props.mode"
+                />
+
+                <div
+                    class="api-details"
+                    v-if="selectedApi.url && tableData.length > 0"
+                >
+                    <a-button
+                        @click="selectedApi = initSelectedApi"
+                        style="margin-bottom: 24px"
+                        >返回</a-button
+                    >
+                    <a-tabs v-model:activeKey="activeKey" type="card">
+                        <a-tab-pane key="does" tab="文档">
+                            <ApiDoes
+                                :select-api="selectedApi"
+                                :schemas="schemas"
+                            />
+                        </a-tab-pane>
+                        <a-tab-pane key="test" tab="调试">
+                            <ApiTest :select-api="selectedApi" />
+                        </a-tab-pane>
+                    </a-tabs>
+                </div>
+            </a-col>
+        </a-row>
+    </a-card>
+</template>
+
+<script setup lang="ts" name="apiPage">
+
+import { getApiGranted_api, apiOperations_api } from '@/api/system/apiPage';
+import type {
+    treeNodeTpye,
+    apiObjType,
+    apiDetailsType,
+    modeType,
+} from './typing';
+import LeftTree from './components/LeftTree.vue';
+import ChooseApi from './components/ChooseApi.vue';
+import ApiDoes from './components/ApiDoes.vue';
+import ApiTest from './components/ApiTest.vue';
+
+const route = useRoute();
+const props = defineProps<{
+    mode: modeType;
+}>();
+
+const tableData = ref([]);
+const treeSelect = (node: treeNodeTpye, nodeSchemas: object = {}) => {
+    schemas.value = nodeSchemas;
+    if (!node.apiList) return;
+    const apiList: apiObjType[] = node.apiList as apiObjType[];
+    const table: any = [];
+    // 将对象形式的数据转换为表格需要的形式
+    apiList?.forEach((apiItem) => {
+        const { method, url } = apiItem as any;
+        for (const key in method) {
+            if (Object.prototype.hasOwnProperty.call(method, key)) {
+                table.push({
+                    ...method[key],
+                    url,
+                    method: key,
+                    id: method[key].operationId,
+                });
+            }
+        }
+    });
+    tableData.value = table;
+};
+
+const activeKey = ref<'does' | 'test'>('does');
+const schemas = ref({});
+const initSelectedApi: apiDetailsType = {
+    url: '',
+    method: '',
+    summary: '',
+    parameters: [],
+    responses: {},
+    requestBody: {},
+};
+const selectedApi = ref<apiDetailsType>(initSelectedApi);
+
+const canSelectKeys = ref<string[]>([]); // 左侧可展示的项
+const selectedKeys = ref<string[]>([]); // 右侧默认勾选的项
+let selectSourceKeys = ref<string[]>([])
+init();
+
+function init() {
+    const code = route.query.code;
+    if (props.mode === 'appManger') {
+    } else if (props.mode === 'home') {
+    } else if (props.mode === 'api') {
+        apiOperations_api().then(resp=>{
+            selectedKeys.value = resp.result as string[]
+            selectSourceKeys.value = [...resp.result as string[]]
+        })
+    }
+    watch(tableData, () => {
+        activeKey.value = 'does';
+        selectedApi.value = initSelectedApi;
+    });
+}
+</script>
+
+<style scoped>
+.api-page-container {
+    padding: 24px;
+    height: 100%;
+    background-color: transparent;
+}
+</style>

src/views/system/Platforms/Api/typing.d.ts

@@ -0,0 +1,27 @@
+export type treeNodeTpye = {
+    name: string;
+    key: string;
+    schemas?:object;
+    link?: string;
+    apiList?: object[];
+    children?: treeNodeTpye[];
+
+};
+export type methodType = {
+    [key: string]: object
+}
+export type apiObjType = {
+    url: string,
+    method: methodType
+}
+
+export type apiDetailsType = {
+    url: string;
+    method: string;
+    summary: string;
+    parameters: any[];
+    requestBody?: any;
+    responses:object;
+}
+
+export type modeType = 'api'| 'appManger' | 'home'

src/views/system/Platforms/index.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+        <Api mode="api" />
+    </div>
+</template>
+
+<script setup lang="ts" name="Platforms">
+import Api from './Api/index.vue';
+</script>
+
+<style scoped></style>