diff --git a/src/views/system/Api/components/ApiDoes.vue b/src/views/system/Api/components/ApiDoes.vue
new file mode 100644
index 00000000..df806b0c
--- /dev/null
+++ b/src/views/system/Api/components/ApiDoes.vue
@@ -0,0 +1,316 @@
+<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.row.required) + '' }}</span>
+                    </template>
+                    <template #type="slotProps">
+                        <span>{{ slotProps.row.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>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+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[];
+    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: [],
+    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);
+        function findData(schemaName: string) {
+            if (!schemaName || !schemas[schemaName]) {
+                return [];
+            }
+            const result: schemaObjType[] = [];
+            const schema = schemas[schemaName];
+            const basicType = ['string', 'integer', 'boolean'];
+            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);
+            });
+            console.log(result);
+
+            return result;
+        }
+
+        respParamsCard.tableData = findData(schemaName);
+        // console.log(respParamsCard.tableData);
+    },
+});
+
+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>
diff --git a/src/views/system/Api/components/ApiTest.vue b/src/views/system/Api/components/ApiTest.vue
new file mode 100644
index 00000000..46c87dbe
--- /dev/null
+++ b/src/views/system/Api/components/ApiTest.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="api-test-container">
+        <div class="top">
+            <h5>{{ selectApi.summary }}</h5>
+            <div class="input">
+                <InputCard :value="selectApi.method" />
+                <a-input :value="selectApi?.url" disabled />
+                <span class="send">发送</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { apiDetailsType } from '../typing';
+import InputCard from './InputCard.vue';
+import { PropType } from 'vue';
+
+const props = defineProps({
+    selectApi: {
+        type: Object as PropType<apiDetailsType>,
+        required: true,
+    },
+});
+const { selectApi } = toRefs(props);
+</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;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/system/Api/components/ChooseApi.vue b/src/views/system/Api/components/ChooseApi.vue
new file mode 100644
index 00000000..bb6e5548
--- /dev/null
+++ b/src/views/system/Api/components/ChooseApi.vue
@@ -0,0 +1,65 @@
+<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.row)"
+                    >{{ slotProps.row.url }}</span
+                >
+            </template>
+        </JTable>
+
+        <a-button type="primary">保存</a-button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { TableProps } from 'ant-design-vue';
+
+const emits = defineEmits(['update:clickApi'])
+const props = defineProps({
+    tableData: Array,
+    clickApi: Object
+});
+
+const columns = [
+    {
+        title: 'API',
+        dataIndex: 'url',
+        key: 'url',
+        scopedSlots: true,
+    },
+    {
+        title: '说明',
+        dataIndex: 'summary',
+        key: 'summary',
+    },
+];
+const rowSelection: TableProps['rowSelection'] = {
+    onChange: (selectedRowKeys, selectedRows) => {
+        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+    },
+};
+
+const jump = (row:object) => {
+    emits('update:clickApi',row)
+};
+</script>
+
+<style lang="less" scoped>
+.choose-api-container {
+    height: 100%;
+    
+    :deep(.jtable-body-header) {
+        display: none !important;
+    }
+}
+
+</style>
diff --git a/src/views/system/Api/components/InputCard.vue b/src/views/system/Api/components/InputCard.vue
new file mode 100644
index 00000000..c1742737
--- /dev/null
+++ b/src/views/system/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>
diff --git a/src/views/system/Api/components/LeftTree.vue b/src/views/system/Api/components/LeftTree.vue
new file mode 100644
index 00000000..598887f3
--- /dev/null
+++ b/src/views/system/Api/components/LeftTree.vue
@@ -0,0 +1,96 @@
+<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 { treeNodeTpye } from '../typing';
+
+const emits = defineEmits(['select']);
+
+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) => {
+    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>
diff --git a/src/views/system/Api/index.vue b/src/views/system/Api/index.vue
new file mode 100644
index 00000000..1d4fce58
--- /dev/null
+++ b/src/views/system/Api/index.vue
@@ -0,0 +1,84 @@
+<template>
+    <a-card class="api-page-container">
+        api
+        <a-row :gutter="24">
+            <a-col :span="5">
+                <LeftTree @select="treeSelect" />
+            </a-col>
+            <a-col :span="19">
+                <ChooseApi
+                    v-show="!selectedApi.url"
+                    v-model:click-api="selectedApi"
+                    :table-data="tableData"
+                />
+
+                <div
+                    class="api-details"
+                    v-show="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 type { treeNodeTpye, apiObjType, apiDetailsType } 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 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;
+        for (const key in method) {
+            if (Object.prototype.hasOwnProperty.call(method, key)) {
+                table.push({
+                    ...method[key],
+                    url,
+                    method: key,
+                });
+            }
+        }
+    });
+    tableData.value = table;
+};
+
+const activeKey = ref('does');
+const schemas = ref({});
+const initSelectedApi:apiDetailsType = {
+    url: '',
+    method: '',
+    summary: '',
+    parameters: [],
+    responses: {},
+    requestBody: {}
+};
+const selectedApi = ref<apiDetailsType>(initSelectedApi);
+
+watch(tableData, () => (selectedApi.value = initSelectedApi));
+</script>
+
+<style scoped>
+.api-page-container {
+    height: 100%;
+}
+</style>
diff --git a/src/views/system/apiPage/index.d.ts b/src/views/system/Api/typing.d.ts
similarity index 100%
rename from src/views/system/apiPage/index.d.ts
rename to src/views/system/Api/typing.d.ts
diff --git a/src/views/system/Apply/Api/components/ApiDoes.vue b/src/views/system/Apply/Api/components/ApiDoes.vue
new file mode 100644
index 00000000..df806b0c
--- /dev/null
+++ b/src/views/system/Apply/Api/components/ApiDoes.vue
@@ -0,0 +1,316 @@
+<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.row.required) + '' }}</span>
+                    </template>
+                    <template #type="slotProps">
+                        <span>{{ slotProps.row.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>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+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[];
+    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: [],
+    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);
+        function findData(schemaName: string) {
+            if (!schemaName || !schemas[schemaName]) {
+                return [];
+            }
+            const result: schemaObjType[] = [];
+            const schema = schemas[schemaName];
+            const basicType = ['string', 'integer', 'boolean'];
+            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);
+            });
+            console.log(result);
+
+            return result;
+        }
+
+        respParamsCard.tableData = findData(schemaName);
+        // console.log(respParamsCard.tableData);
+    },
+});
+
+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>
diff --git a/src/views/system/Apply/Api/components/ApiTest.vue b/src/views/system/Apply/Api/components/ApiTest.vue
new file mode 100644
index 00000000..46c87dbe
--- /dev/null
+++ b/src/views/system/Apply/Api/components/ApiTest.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="api-test-container">
+        <div class="top">
+            <h5>{{ selectApi.summary }}</h5>
+            <div class="input">
+                <InputCard :value="selectApi.method" />
+                <a-input :value="selectApi?.url" disabled />
+                <span class="send">发送</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { apiDetailsType } from '../typing';
+import InputCard from './InputCard.vue';
+import { PropType } from 'vue';
+
+const props = defineProps({
+    selectApi: {
+        type: Object as PropType<apiDetailsType>,
+        required: true,
+    },
+});
+const { selectApi } = toRefs(props);
+</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;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/system/Apply/Api/components/ChooseApi.vue b/src/views/system/Apply/Api/components/ChooseApi.vue
new file mode 100644
index 00000000..bb6e5548
--- /dev/null
+++ b/src/views/system/Apply/Api/components/ChooseApi.vue
@@ -0,0 +1,65 @@
+<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.row)"
+                    >{{ slotProps.row.url }}</span
+                >
+            </template>
+        </JTable>
+
+        <a-button type="primary">保存</a-button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { TableProps } from 'ant-design-vue';
+
+const emits = defineEmits(['update:clickApi'])
+const props = defineProps({
+    tableData: Array,
+    clickApi: Object
+});
+
+const columns = [
+    {
+        title: 'API',
+        dataIndex: 'url',
+        key: 'url',
+        scopedSlots: true,
+    },
+    {
+        title: '说明',
+        dataIndex: 'summary',
+        key: 'summary',
+    },
+];
+const rowSelection: TableProps['rowSelection'] = {
+    onChange: (selectedRowKeys, selectedRows) => {
+        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+    },
+};
+
+const jump = (row:object) => {
+    emits('update:clickApi',row)
+};
+</script>
+
+<style lang="less" scoped>
+.choose-api-container {
+    height: 100%;
+    
+    :deep(.jtable-body-header) {
+        display: none !important;
+    }
+}
+
+</style>
diff --git a/src/views/system/Apply/Api/components/InputCard.vue b/src/views/system/Apply/Api/components/InputCard.vue
new file mode 100644
index 00000000..c1742737
--- /dev/null
+++ b/src/views/system/Apply/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>
diff --git a/src/views/system/Apply/Api/components/LeftTree.vue b/src/views/system/Apply/Api/components/LeftTree.vue
new file mode 100644
index 00000000..598887f3
--- /dev/null
+++ b/src/views/system/Apply/Api/components/LeftTree.vue
@@ -0,0 +1,96 @@
+<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 { treeNodeTpye } from '../typing';
+
+const emits = defineEmits(['select']);
+
+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) => {
+    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>
diff --git a/src/views/system/Apply/Api/index.vue b/src/views/system/Apply/Api/index.vue
new file mode 100644
index 00000000..990c0d77
--- /dev/null
+++ b/src/views/system/Apply/Api/index.vue
@@ -0,0 +1,84 @@
+<template>
+    <a-card class="api-page-container">
+        apply/api
+        <a-row :gutter="24">
+            <a-col :span="5">
+                <LeftTree @select="treeSelect" />
+            </a-col>
+            <a-col :span="19">
+                <ChooseApi
+                    v-show="!selectedApi.url"
+                    v-model:click-api="selectedApi"
+                    :table-data="tableData"
+                />
+
+                <div
+                    class="api-details"
+                    v-show="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 type { treeNodeTpye, apiObjType, apiDetailsType } 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 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;
+        for (const key in method) {
+            if (Object.prototype.hasOwnProperty.call(method, key)) {
+                table.push({
+                    ...method[key],
+                    url,
+                    method: key,
+                });
+            }
+        }
+    });
+    tableData.value = table;
+};
+
+const activeKey = ref('does');
+const schemas = ref({});
+const initSelectedApi:apiDetailsType = {
+    url: '',
+    method: '',
+    summary: '',
+    parameters: [],
+    responses: {},
+    requestBody: {}
+};
+const selectedApi = ref<apiDetailsType>(initSelectedApi);
+
+watch(tableData, () => (selectedApi.value = initSelectedApi));
+</script>
+
+<style scoped>
+.api-page-container {
+    height: 100%;
+}
+</style>
diff --git a/src/views/system/Apply/Api/typing.d.ts b/src/views/system/Apply/Api/typing.d.ts
new file mode 100644
index 00000000..7937398b
--- /dev/null
+++ b/src/views/system/Apply/Api/typing.d.ts
@@ -0,0 +1,25 @@
+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;
+}
\ No newline at end of file
diff --git a/src/views/system/DataSource/Management/index.vue b/src/views/system/DataSource/Management/index.vue
index a859ddd7..c9d62113 100644
--- a/src/views/system/DataSource/Management/index.vue
+++ b/src/views/system/DataSource/Management/index.vue
@@ -6,9 +6,11 @@
                 placeholder="请输入"
                 style="margin-bottom: 24px"
             />
+            <!-- 使用v-if用于解决异步加载数据后不展开的问题 -->
             <a-tree
+                v-if="leftData.treeData.length > 0"
                 showLine
-                autoExpandParent
+                defaultExpandAll
                 :tree-data="leftData.treeData"
                 v-model:selectedKeys="leftData.selectedKeys"
                 @select="leftData.onSelect"
@@ -16,11 +18,11 @@
                 <template #title="{ dataRef }">
                     <div
                         v-if="dataRef.root"
-                        style="
+                        :style="`
                             justify-content: space-between;
                             display: flex;
                             align-items: center;
-                        "
+                            `"
                     >
                         <span>
                             {{ dataRef.title }}
@@ -49,24 +51,34 @@
                 model="TABLE"
                 :dataSource="table.data"
             >
-                <template #previousName="slotProps">
+                <template #name="slotProps">
                     <a-input
-                        :disabled="slotProps.scale === 0"
-                        v-model:value="slotProps.previousName"
+                        :disabled="slotProps.scale !== undefined"
+                        v-model:value="slotProps.name"
                         placeholder="请输入名称"
+                        :maxlength="64"
                     />
                 </template>
                 <template #type="slotProps">
                     <a-input
                         v-model:value="slotProps.type"
                         placeholder="请输入类型"
+                        :maxlength="64"
                     />
                 </template>
                 <template #length="slotProps">
-                    <a-input-number v-model:value="slotProps.length" />
+                    <a-input-number
+                        v-model:value="slotProps.length"
+                        :min="0"
+                        :max="99999"
+                    />
                 </template>
                 <template #precision="slotProps">
-                    <a-input-number v-model:value="slotProps.precision" />
+                    <a-input-number
+                        v-model:value="slotProps.precision"
+                        :min="0"
+                        :max="99999"
+                    />
                 </template>
                 <template #notnull="slotProps">
                     <a-radio-group
@@ -98,9 +110,9 @@
                     </PermissionButton>
                 </template>
             </JTable>
-            <a-botton class="add-row" @click="table.addRow"
-                ><AIcon type="PlusOutlined" /> 新增行</a-botton
-            >
+            <a-botton class="add-row" @click="table.addRow">
+                <AIcon type="PlusOutlined" /> 新增行
+            </a-botton>
         </div>
     </a-card>
     <div class="dialogs">
@@ -155,7 +167,7 @@ import {
 } from '@/api/system/dataSource';
 import { FormInstance, message } from 'ant-design-vue';
 import { DataNode } from 'ant-design-vue/lib/tree';
-import { dictItemType, sourceItemType } from '../typing';
+import type { dbColumnType, dictItemType, sourceItemType } from '../typing';
 
 const id = useRoute().query.id as string;
 
@@ -235,8 +247,8 @@ const table = reactive({
     columns: [
         {
             title: '列名',
-            dataIndex: 'previousName',
-            key: 'previousName',
+            dataIndex: 'name',
+            key: 'name',
             scopedSlots: true,
         },
         {
@@ -276,7 +288,7 @@ const table = reactive({
             scopedSlots: true,
         },
     ],
-    data: [] as any,
+    data: [] as dbColumnType[],
 
     getTabelData: (key: string) => {
         rdbTables_api(id, key).then((resp: any) => {
@@ -284,11 +296,15 @@ const table = reactive({
         });
     },
     addRow: () => {
-        table.data.push({
+        const initData: dbColumnType = {
             precision: 0,
             length: 0,
             notnull: false,
-        });
+            type: '',
+            comment: '',
+            name: '',
+        };
+        table.data.push(initData);
     },
     clickSave: () => {
         const params = {
@@ -302,23 +318,24 @@ const table = reactive({
     clickDel: (row: any) => {},
 });
 
-const addFormRef = ref<FormInstance >();
+const addFormRef = ref<FormInstance>();
 const dialog = reactive({
     visible: false,
     form: {
         name: '',
     },
     handleOk: () => {
-        addFormRef.value && addFormRef.value.validate().then(()=>{
-            const name = dialog.form.name
-            leftData.sourceTree.unshift({
-                id:name,
-                name
-            })
-            leftData.oldKey = name;
-            leftData.selectedKeys = [name]
-            table.data = []
-        })
+        addFormRef.value &&
+            addFormRef.value.validate().then(() => {
+                const name = dialog.form.name;
+                leftData.sourceTree.unshift({
+                    id: name,
+                    name,
+                });
+                leftData.oldKey = name;
+                leftData.selectedKeys = [name];
+                table.data = [];
+            });
     },
 });
 
diff --git a/src/views/system/DataSource/index.vue b/src/views/system/DataSource/index.vue
index e78843eb..370fff33 100644
--- a/src/views/system/DataSource/index.vue
+++ b/src/views/system/DataSource/index.vue
@@ -136,7 +136,7 @@ import {
 } from '@/api/system/dataSource';
 import { message } from 'ant-design-vue';
 
-const permission = 'system/Relationship';
+const permission = 'system/DataSource';
 
 const router = useRouter();
 
diff --git a/src/views/system/DataSource/typing.d.ts b/src/views/system/DataSource/typing.d.ts
index 96040547..528249b8 100644
--- a/src/views/system/DataSource/typing.d.ts
+++ b/src/views/system/DataSource/typing.d.ts
@@ -1,7 +1,7 @@
 export type dictItemType = {
     id: string,
     name: string,
-    children?:dictItemType
+    children?: dictItemType
 }
 export type optionItemType = {
     label: string,
@@ -12,14 +12,26 @@ export type sourceItemType = {
     name: string,
     state: { text: string, value: "enabled" | 'disabled' },
     typeId: string,
-    shareConfig:{
-        url:string,
-        adminUrl:string,
-        addresses:string,
-        username:string,
-        password:string,
-        virtualHost:string,
-        schema:string
+    shareConfig: {
+        url: string,
+        adminUrl: string,
+        addresses: string,
+        username: string,
+        password: string,
+        virtualHost: string,
+        schema: string
     }
     description: string
+}
+
+// 数据库字段
+export type dbColumnType = {
+    previousName?: string,
+    type: String,
+    length: number,
+    precision: number,
+    notnull: boolean,
+    comment: string,
+    name: string,
+    scale?:number
 }
\ No newline at end of file
diff --git a/src/views/system/apiPage/components/ApiDoes.vue b/src/views/system/apiPage/components/ApiDoes.vue
index 85dfc5e0..df806b0c 100644
--- a/src/views/system/apiPage/components/ApiDoes.vue
+++ b/src/views/system/apiPage/components/ApiDoes.vue
@@ -73,7 +73,7 @@
 </template>
 
 <script setup lang="ts">
-import { apiDetailsType } from '../index';
+import type { apiDetailsType } from '../typing';
 import InputCard from './InputCard.vue';
 import { PropType } from 'vue';
 
@@ -200,7 +200,7 @@ const respParamsCard = reactive<tableCardType>({
 
         const schemaName = responseStatusCard.tableData.find(
             (item: any) => item.code === code,
-        ).schema;
+        )?.schema;
         const schemas = toRaw(props.schemas);
         function findData(schemaName: string) {
             if (!schemaName || !schemas[schemaName]) {
diff --git a/src/views/system/apiPage/components/ApiTest.vue b/src/views/system/apiPage/components/ApiTest.vue
index 5503fe6b..46c87dbe 100644
--- a/src/views/system/apiPage/components/ApiTest.vue
+++ b/src/views/system/apiPage/components/ApiTest.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { apiDetailsType } from '../index';
+import { apiDetailsType } from '../typing';
 import InputCard from './InputCard.vue';
 import { PropType } from 'vue';
 
diff --git a/src/views/system/apiPage/components/LeftTree.vue b/src/views/system/apiPage/components/LeftTree.vue
index e933c925..598887f3 100644
--- a/src/views/system/apiPage/components/LeftTree.vue
+++ b/src/views/system/apiPage/components/LeftTree.vue
@@ -15,7 +15,7 @@
 import { TreeProps } from 'ant-design-vue';
 
 import { getTreeOne_api, getTreeTwo_api } from '@/api/system/apiPage';
-import { treeNodeTpye } from '../index';
+import { treeNodeTpye } from '../typing';
 
 const emits = defineEmits(['select']);
 
diff --git a/src/views/system/apiPage/index.vue b/src/views/system/apiPage/index.vue
index 397806a5..f8eb959d 100644
--- a/src/views/system/apiPage/index.vue
+++ b/src/views/system/apiPage/index.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script setup lang="ts" name="apiPage">
-import { treeNodeTpye, apiObjType, apiDetailsType } from './index';
+import type { treeNodeTpye, apiObjType, apiDetailsType } from './typing';
 import LeftTree from './components/LeftTree.vue';
 import ChooseApi from './components/ChooseApi.vue';
 import ApiDoes from './components/ApiDoes.vue';
diff --git a/src/views/system/apiPage/typing.d.ts b/src/views/system/apiPage/typing.d.ts
new file mode 100644
index 00000000..7937398b
--- /dev/null
+++ b/src/views/system/apiPage/typing.d.ts
@@ -0,0 +1,25 @@
+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;
+}
\ No newline at end of file