diff --git a/components.d.ts b/components.d.ts
index 2ef70390..705ade7d 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -32,8 +32,11 @@ declare module '@vue/runtime-core' {
     ASpin: typeof import('ant-design-vue/es')['Spin']
     ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATable: typeof import('ant-design-vue/es')['Table']
+    ATabPane: typeof import('ant-design-vue/es')['TabPane']
+    ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATree: typeof import('ant-design-vue/es')['Tree']
     ATreeSelect: typeof import('ant-design-vue/es')['TreeSelect']
     AUpload: typeof import('ant-design-vue/es')['Upload']
     BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
diff --git a/src/api/link/accessConfig.js b/src/api/link/accessConfig.js
new file mode 100644
index 00000000..0b972bb5
--- /dev/null
+++ b/src/api/link/accessConfig.js
@@ -0,0 +1,33 @@
+import server from '@/utils/request';
+
+export const getProviders = () => server.get(`/gateway/device/providers`);
+
+export const detail = (id) => server.get(`/gateway/device/${id}`);
+
+export const getNetworkList = (networkType, data, params) =>
+    server.get(
+        `/network/config/${networkType}/_alive?include=${params.include}`,
+        data,
+    );
+
+export const getProtocolList = (transport, params) =>
+    server.get(`/protocol/supports/${transport ? transport : ''}`, params);
+
+export const getConfigView = (id, transport) =>
+    server.get(`/protocol/${id}/transport/${transport}`);
+
+export const getChildConfigView = (id) =>
+    server.get(`/protocol/${id}/transports`);
+
+export const save = (data) => server.post(`/gateway/device`, data);
+
+export const update = (data) => server.patch(`/gateway/device`, data);
+
+export const list = (data) =>
+    server.post(`/gateway/device/detail/_query`, data);
+
+export const undeploy = (id) => server.post(`/gateway/device/${id}/_shutdown`);
+
+export const deploy = (id) => server.post(`/gateway/device/${id}/_startup`);
+
+export const del = (id) => server.remove(`/gateway/device/${id}`);
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 525ac2e8..fd37bff5 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -59,6 +59,10 @@ export default [
         path: '/link/certificate/detail/add',
         component: () => import('@/views/link/Certificate/Detail/index.vue')
     },
+    {
+        path: '/link/accessConfig',
+        component: () => import('@/views/link/AccessConfig/index.vue')
+    },
     {
         path: '/link/accessConfig/detail/add',
         component: () => import('@/views/link/AccessConfig/Detail/index.vue')
diff --git a/src/views/account/Center/bind/index.vue b/src/views/account/Center/bind/index.vue
index 2344c4a0..a564e14a 100644
--- a/src/views/account/Center/bind/index.vue
+++ b/src/views/account/Center/bind/index.vue
@@ -4,7 +4,7 @@
         <div class="content">
             <div class="title">第三方账户绑定</div>
             <!-- 已登录-绑定三方账号 -->
-            <template v-if="false">
+            <template v-if="!token">
                 <div class="info">
                     <a-card style="width: 280px">
                         <template #title>
@@ -28,14 +28,21 @@
                             </div>
                         </template>
                         <div class="info-body">
-                            <img :src="getImage('/bind/wechat-webapp.png')" />
+                            <img
+                                :src="
+                                    accountInfo?.avatar ||
+                                    getImage('/bind/wechat-webapp.png')
+                                "
+                            />
                             <p>用户名：-</p>
-                            <p>名称：微信昵称</p>
+                            <p>名称：{{ accountInfo?.name || '-' }}</p>
                         </div>
                     </a-card>
                 </div>
                 <div class="btn">
-                    <a-button type="primary">立即绑定</a-button>
+                    <a-button type="primary" @click="handleBind"
+                        >立即绑定</a-button
+                    >
                 </div>
             </template>
             <!-- 未登录-绑定三方账号 -->
@@ -74,23 +81,25 @@
                             </a-form-item>
                             <a-form-item
                                 label="验证码"
-                                v-bind="validateInfos.captcha"
+                                v-bind="validateInfos.verifyCode"
                             >
                                 <a-input
-                                    v-model:value="formData.captcha"
+                                    v-model:value="formData.verifyCode"
                                     placeholder="请输入验证码"
                                 >
                                     <template #addonAfter>
-                                        <span style="cursor: pointer">
-                                            图形验证码
-                                        </span>
+                                        <img
+                                            :src="captcha.base64"
+                                            @click="getCode"
+                                            style="cursor: pointer"
+                                        />
                                     </template>
                                 </a-input>
                             </a-form-item>
                             <a-form-item>
                                 <a-button
                                     type="primary"
-                                    @click="handleSubmit"
+                                    @click="handleLoginBind"
                                     style="width: 100%"
                                 >
                                     登录并绑定账户
@@ -105,34 +114,58 @@
 </template>
 
 <script setup lang="ts">
-import { getImage } from '@/utils/comm';
+import { getImage, LocalStore } from '@/utils/comm';
+import { TOKEN_KEY } from '@/utils/variable';
 import { Form } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
-import { applicationInfo } from '@/api/bind';
+import { applicationInfo, bindAccount } from '@/api/bind';
+import { code, authLogin } from '@/api/login';
 
 const useForm = Form.useForm;
 
 interface formData {
     username: string;
     password: string;
-    captcha: string;
+    verifyCode: string;
 }
 
-// 三方应用信息
-const getAppInfo = async () => {
-    // const code: string = '73ab60c88979a1475963a5dde31e374b';
+const token = computed(() => LocalStore.get(TOKEN_KEY));
+
+// 已登录直接绑定
+const getUrlCode = () => {
     const url = new URLSearchParams(window.location.href);
-    const code = url.get('code') as string;
+    return url.get('code') as string;
+};
+// 三方应用信息
+const accountInfo = ref({
+    avatar: '',
+    name: '',
+});
+const getAppInfo = async () => {
+    const code = getUrlCode();
     const res = await applicationInfo(code);
-    console.log('getAppInfo: ', res);
+    accountInfo.value = res?.result?.result;
 };
 getAppInfo();
 
-// 登录表单
+/**
+ * 立即绑定
+ */
+const handleBind = async () => {
+    const code = getUrlCode();
+    const res = await bindAccount(code);
+    console.log('bindAccount: ', res);
+    message.success('绑定成功');
+    goRedirect();
+    setTimeout(() => window.close(), 1000);
+};
+
+// 未登录-先登录再绑定
 const formData = ref<formData>({
     username: '',
     password: '',
-    captcha: '',
+    verifyCode: '',
 });
 const formRules = ref({
     username: [
@@ -147,7 +180,7 @@ const formRules = ref({
             message: '请输入密码',
         },
     ],
-    captcha: [
+    verifyCode: [
         {
             required: true,
             message: '请输入验证码',
@@ -160,17 +193,40 @@ const { resetFields, validate, validateInfos } = useForm(
     formRules.value,
 );
 
+/**
+ * 获取图形验证码
+ */
+const captcha = ref({
+    base64: '',
+    key: '',
+});
+const getCode = async () => {
+    const res: any = await code();
+    captcha.value = res.result;
+};
+getCode();
+
 /**
  * 登录并绑定账户
  */
-const handleSubmit = () => {
+const handleLoginBind = () => {
     validate()
-        .then(() => {
-            console.log('toRaw:', toRaw(formData.value));
-            console.log('formData.value:', formData.value);
+        .then(async () => {
+            const code = getUrlCode();
+            const params = {
+                ...formData.value,
+                verifyKey: captcha.value.key,
+                bindCode: code,
+                expires: 3600000,
+            };
+            const res = await authLogin(params);
+            console.log('res: ', res);
+            message.success('登录成功');
+            goRedirect();
+            setTimeout(() => window.close(), 1000);
         })
         .catch((err) => {
-            console.log('error', err);
+            getCode();
         });
 };
 
diff --git a/src/views/home/components/dialogs/FuncTestDialog.vue b/src/views/home/components/dialogs/FuncTestDialog.vue
index 3866a107..dc7f1b62 100644
--- a/src/views/home/components/dialogs/FuncTestDialog.vue
+++ b/src/views/home/components/dialogs/FuncTestDialog.vue
@@ -30,18 +30,10 @@
                 重置
             </a-button>
         </div>
-        <a-table
-            :columns="columns"
-            :data-source="tableData"
-            :row-selection="{
-                onChange: (selectedRowKeys, selectedRows) =>
-                    (selectItem = selectedRows),
-                type: 'radio',
-            }"
-        >
-        </a-table>
+        <JTable :columns="columns"> 
+            
+        </JTable>
 
-        
         <template #footer>
             <a-button key="back" @click="visible = false">取消</a-button>
             <a-button key="submit" type="primary" @click="handleOk"
@@ -90,9 +82,7 @@ const productList = ref<[productItem] | []>([]);
 const getOptions = () => {
     productList.value = [];
 };
-const clickSearch = ()=>{
-
-}
+const clickSearch = () => {};
 const clickReset = () => {
     Object.entries(form.value).forEach(([prop]) => {
         form.value[prop] = '';
@@ -102,27 +92,27 @@ const clickReset = () => {
 // 表格部分
 const columns = [
     {
-        name: 'deviceId',
+        title: '设备Id',
         dataIndex: 'deviceId',
         key: 'deviceId',
     },
     {
-        name: 'deviceName',
+        title: '设备名称',
         dataIndex: 'deviceName',
         key: 'deviceName',
     },
     {
-        name: 'productName',
+        title: '产品名称',
         dataIndex: 'productName',
         key: 'productName',
     },
     {
-        name: 'createTime',
+        title: '注册时间',
         dataIndex: 'createTime',
         key: 'createTime',
     },
     {
-        name: 'status',
+        title: '状态',
         dataIndex: 'status',
         key: 'status',
     },
diff --git a/src/views/link/AccessConfig/Detail/data.ts b/src/views/link/AccessConfig/Detail/data.ts
index 7dc2fe8a..6a29f551 100644
--- a/src/views/link/AccessConfig/Detail/data.ts
+++ b/src/views/link/AccessConfig/Detail/data.ts
@@ -1,21 +1,30 @@
-const MetworkTypeMapping = new Map();
-MetworkTypeMapping.set('websocket-server', 'WEB_SOCKET_SERVER');
-MetworkTypeMapping.set('http-server-gateway', 'HTTP_SERVER');
-MetworkTypeMapping.set('udp-device-gateway', 'UDP');
-MetworkTypeMapping.set('coap-server-gateway', 'COAP_SERVER');
-MetworkTypeMapping.set('mqtt-client-gateway', 'MQTT_CLIENT');
-MetworkTypeMapping.set('mqtt-server-gateway', 'MQTT_SERVER');
-MetworkTypeMapping.set('tcp-server-gateway', 'TCP_SERVER');
 
-const ProcotoleMapping = new Map();
-ProcotoleMapping.set('websocket-server', 'WebSocket');
-ProcotoleMapping.set('http-server-gateway', 'HTTP');
-ProcotoleMapping.set('udp-device-gateway', 'UDP');
-ProcotoleMapping.set('coap-server-gateway', 'CoAP');
-ProcotoleMapping.set('mqtt-client-gateway', 'MQTT');
-ProcotoleMapping.set('mqtt-server-gateway', 'MQTT');
-ProcotoleMapping.set('tcp-server-gateway', 'TCP');
-ProcotoleMapping.set('child-device', '');
+const ProtocolMapping = new Map();
+ProtocolMapping.set('websocket-server', 'WebSocket');
+ProtocolMapping.set('http-server-gateway', 'HTTP');
+ProtocolMapping.set('udp-device-gateway', 'UDP');
+ProtocolMapping.set('coap-server-gateway', 'CoAP');
+ProtocolMapping.set('mqtt-client-gateway', 'MQTT');
+ProtocolMapping.set('mqtt-server-gateway', 'MQTT');
+ProtocolMapping.set('tcp-server-gateway', 'TCP');
+ProtocolMapping.set('child-device', '');
+ProtocolMapping.set('OneNet', 'HTTP');
+ProtocolMapping.set('Ctwing', 'HTTP');
+ProtocolMapping.set('modbus-tcp', 'MODBUS_TCP');
+ProtocolMapping.set('opc-ua', 'OPC_UA');
+ProtocolMapping.set('edge-child-device', 'EdgeGateway');
+ProtocolMapping.set('official-edge-gateway', 'MQTT');
+
+const NetworkTypeMapping = new Map();
+NetworkTypeMapping.set('websocket-server', 'WEB_SOCKET_SERVER');
+NetworkTypeMapping.set('http-server-gateway', 'HTTP_SERVER');
+NetworkTypeMapping.set('udp-device-gateway', 'UDP');
+NetworkTypeMapping.set('coap-server-gateway', 'COAP_SERVER');
+NetworkTypeMapping.set('mqtt-client-gateway', 'MQTT_CLIENT');
+NetworkTypeMapping.set('mqtt-server-gateway', 'MQTT_SERVER');
+NetworkTypeMapping.set('tcp-server-gateway', 'TCP_SERVER');
+NetworkTypeMapping.set('official-edge-gateway', 'MQTT_SERVER');
+
 
 const descriptionList = {
     'udp-device-gateway':
@@ -96,4 +105,4 @@ const columnsHTTP = [
       },
 ]
 
-export { MetworkTypeMapping, ProcotoleMapping, descriptionList, columnsMQTT, columnsHTTP };
+export { NetworkTypeMapping, ProtocolMapping, descriptionList, columnsMQTT, columnsHTTP };
diff --git a/src/views/link/AccessConfig/Detail/index.vue b/src/views/link/AccessConfig/Detail/index.vue
index 57a64f6b..97c13e2e 100644
--- a/src/views/link/AccessConfig/Detail/index.vue
+++ b/src/views/link/AccessConfig/Detail/index.vue
@@ -1,62 +1,93 @@
 <template>
-    <a-card :bordered="false">
-        <TitleComponent data="自定义设备接入"></TitleComponent>
-        <div>
-            <a-row :gutter="[24, 24]">
-                <a-col :span="12" v-for="item in items" :key="item.id">
-                    <div class="provider">
-                        <div class="box">
-                            <div class="left">
-                                <div class="images">
-                                    <img :src="backMap.get(item.id)" />
-                                </div>
-                                <div class="context">
-                                    <div class="title">{{ item.name }}</div>
-                                    <div class="desc">
-                                        <a-tooltip :title="item.description">
-                                            {{ item.description || '' }}
-                                        </a-tooltip>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="right">
-                                <a-button
-                                    type="primary"
-                                    @click="goProviders(item)"
-                                    >接入</a-button
-                                >
-                            </div>
-                        </div>
-                    </div>
-                </a-col>
-            </a-row>
-        </div>
-    </a-card>
+    <a-spin :spinning="loading">
+        <a-card :bordered="false">
+            <div v-if="type">
+                <Provider
+                    @onClick="goProviders"
+                    :dataSource="dataSource"
+                ></Provider>
+            </div>
+            <div v-else>
+                <div v-if="!id"><a @click="goBack">返回</a></div>
+                <AccessNetwork :provider="provider" :data="data" />
+            </div>
+        </a-card>
+    </a-spin>
 </template>
 
 <script lang="ts" setup name="AccessConfigDetail">
 import { getImage } from '@/utils/comm';
 import TitleComponent from '@/components/TitleComponent/index.vue';
+import AccessNetwork from '../components/Network.vue';
+import Provider from '../components/Provider/index.vue';
+import { getProviders, detail } from '@/api/link/accessConfig';
 
-const items = [
-    { id: 'mqtt-server-gateway', name: '测试1', description: '测试1' },
-    { id: 'websocket-server', name: '测试2', description: '测试' },
-    { id: 'coap-server-gateway', name: '测试3', description: '测试' },
-];
+// const router = useRouter();
+const route = useRoute();
 
-const backMap = new Map();
-backMap.set('mqtt-server-gateway', getImage('/access/mqtt.png'));
-backMap.set('websocket-server', getImage('/access/websocket.png'));
-backMap.set('coap-server-gateway', getImage('/access/coap.png'));
-backMap.set('tcp-server-gateway', getImage('/access/tcp.png'));
-backMap.set('child-device', getImage('/access/child-device.png'));
-backMap.set('http-server-gateway', getImage('/access/http.png'));
-backMap.set('udp-device-gateway', getImage('/access/udp.png'));
-backMap.set('mqtt-client-gateway', getImage('/access/mqtt-broke.png'));
+const id = route.query.id;
 
-const goProviders = (value: object) => {
-    console.log(111, value);
+const dataSource = ref([]);
+const type = ref(false);
+const loading = ref(true);
+const provider = ref({});
+const data = ref({});
+
+const goProviders = (param: object) => {
+    provider.value = param;
+    type.value = false;
 };
+
+const goBack = () => {
+    provider.value = {};
+    type.value = true;
+};
+
+const queryProviders = async () => {
+    const resp = await getProviders();
+    if (resp.status === 200) {
+        dataSource.value = resp.result.filter(
+            (item) =>
+                item.channel === 'network' || item.channel === 'child-device',
+        );
+    }
+};
+
+const getProvidersData = async () => {
+    if (id) {
+        getProviders().then((response) => {
+            if (response.status === 200) {
+                dataSource.value = response.result.filter(
+                    (item) =>
+                        item.channel === 'network' ||
+                        item.channel === 'child-device',
+                );
+                detail(id).then((resp) => {
+                    if (resp.status === 200) {
+                        const dt = response.result.find(
+                            (item) => item?.id === resp.result.provider,
+                        );
+                        provider.value = dt;
+                        data.value = resp.result;
+                        type.value = false;
+                    }
+                });
+                loading.value = false;
+            } else {
+                loading.value = false;
+            }
+        });
+    } else {
+        type.value = true;
+        queryProviders();
+        loading.value = false;
+    }
+};
+
+onMounted(() => {
+    loading.value = true;
+    getProvidersData();
+});
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/link/AccessConfig/components/AccessCard/index.vue b/src/views/link/AccessConfig/components/AccessCard/index.vue
new file mode 100644
index 00000000..a21d5585
--- /dev/null
+++ b/src/views/link/AccessConfig/components/AccessCard/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <a-card hoverable :class="['card-render', checked === data.id ? 'checked' : '']" @click="checkedChange(data.id)">
+    <div class="title">
+      <a-tooltip placement="topLeft" :title="data.name">{{ data.name }}</a-tooltip>
+    </div>
+    <slot name="other"></slot>
+    <div class="desc">
+      <a-tooltip placement="topLeft" :title="data.description">{{ data.description }}</a-tooltip>
+    </div>
+    <div class="checked-icon">
+      <div><a-icon type="check" /></div>
+    </div>
+  </a-card>
+</template>
+
+<script>
+export default {
+  name: "AccessCard",
+  props: ['data', 'checked'],
+  methods: {
+    checkedChange(id){
+      this.$emit('checkedChange', id)
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.card-render {
+  width: 100%;
+  overflow: hidden;
+  background: url("/public/images/access/access.png") no-repeat;
+  background-size: 100% 100%;
+  min-height: 105px;
+
+  .title {
+    width: calc(100% - 88px);
+    overflow: hidden;
+    font-weight: 800;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .desc {
+    width: 100%;
+    margin-top: 10px;
+    color: rgba(0, 0, 0, 0.55);
+    font-weight: 400;
+    font-size: 13px;
+    overflow: hidden;
+     white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .checked-icon {
+    position: absolute;
+    right: -22px;
+    bottom: -22px;
+    z-index: 2;
+    display: none;
+    width: 44px;
+    height: 44px;
+    color: #fff;
+    background-color: red;
+    background-color: #2f54eb;
+    transform: rotate(-45deg);
+
+    > div {
+      position: relative;
+      height: 100%;
+      transform: rotate(45deg);
+      font-size: 12px;
+      padding: 4px 0 0 6px;
+    }
+  }
+  &.checked {
+    position: relative;
+    color: #2f54eb;
+    border-color: #2f54eb;
+
+    .checked-icon {
+      display: block;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/link/AccessConfig/components/Network.vue b/src/views/link/AccessConfig/components/Network.vue
new file mode 100644
index 00000000..8bb9b232
--- /dev/null
+++ b/src/views/link/AccessConfig/components/Network.vue
@@ -0,0 +1,733 @@
+<template>
+    <div style="margin-top: 10px">
+        <a-steps :current="stepCurrent">
+            <a-step v-for="item in steps" :key="item" :title="item" />
+        </a-steps>
+        <div class="steps-content">
+            <div class="steps-box" v-if="current === 0">
+                <div class="alert">
+                    <a-icon type="info-circle" style="margin-right: 10px" />
+                    选择与设备通信的网络组件
+                </div>
+                <div class="search">
+                    <a-input-search
+                        allowClear
+                        placeholder="请输入"
+                        style="width: 300px"
+                        @search="networkSearch"
+                    />
+                    <a-button type="primary" @click="addNetwork">新增</a-button>
+                </div>
+                <div class="card-item">
+                    <a-row :gutter="[24, 24]" v-if="networkList.length > 0">
+                        <a-col
+                            :span="8"
+                            v-for="item in networkList"
+                            :key="item.id"
+                        >
+                            <access-card
+                                @checkedChange="checkedChange"
+                                :checked="networkCurrent"
+                                :data="{
+                                    ...item,
+                                    description: item.description
+                                        ? item.description
+                                        : descriptionList[provider.id],
+                                }"
+                            >
+                                <div slot="other" class="other">
+                                    <a-tooltip placement="topLeft">
+                                        <div
+                                            slot="title"
+                                            v-if="
+                                                (item.addresses || []).length >
+                                                1
+                                            "
+                                        >
+                                            <div
+                                                v-for="i in item.addresses ||
+                                                []"
+                                                :key="i.address"
+                                                class="item"
+                                            >
+                                                <a-badge
+                                                    :color="
+                                                        i.health === -1
+                                                            ? 'red'
+                                                            : 'green'
+                                                    "
+                                                />{{ i.address }}
+                                            </div>
+                                        </div>
+                                        <div
+                                            v-for="i in (
+                                                item.addresses || []
+                                            ).slice(0, 1)"
+                                            :key="i.address"
+                                            class="item"
+                                        >
+                                            <a-badge
+                                                :color="
+                                                    i.health === -1
+                                                        ? 'red'
+                                                        : 'green'
+                                                "
+                                                :text="i.address"
+                                            />
+                                            <span
+                                                v-if="
+                                                    (item.addresses || [])
+                                                        .length > 1
+                                                "
+                                                >...</span
+                                            >
+                                        </div>
+                                    </a-tooltip>
+                                </div>
+                            </access-card>
+                        </a-col>
+                    </a-row>
+                    <a-empty v-else description="暂无数据" />
+                </div>
+            </div>
+            <div class="steps-box" v-else-if="current === 1">
+                <div class="alert">
+                    <a-icon type="info-circle" style="margin-right: 10px" />
+                    使用选择的消息协议，对网络组件通信数据进行编解码、认证等操作
+                </div>
+                <div class="search">
+                    <a-input-search
+                        allowClear
+                        placeholder="请输入"
+                        style="width: 300px"
+                        @search="procotolSearch"
+                    />
+                    <a-button type="primary" @click="addProcotol"
+                        >新增</a-button
+                    >
+                </div>
+                <div class="card-item">
+                    <a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
+                        <a-col
+                            :span="8"
+                            v-for="item in procotolList"
+                            :key="item.id"
+                        >
+                            <access-card
+                                @checkedChange="procotolChange"
+                                :checked="procotolCurrent"
+                                :data="item"
+                            >
+                            </access-card>
+                        </a-col>
+                    </a-row>
+                    <a-empty v-else description="暂无数据" />
+                </div>
+            </div>
+            <div class="steps-box" v-else>
+                <div class="card-last">
+                    <a-row :gutter="[24, 24]">
+                        <a-col :span="12">
+                            <title-component data="基本信息" />
+                            <div>
+                                <a-form :form="form" layout="vertical">
+                                    <a-form-item label="名称">
+                                        <a-input
+                                            allowClear
+                                            placeholder="请输入名称"
+                                            v-decorator="[
+                                                'name',
+                                                {
+                                                    initialValue: data.name,
+                                                    rules: [
+                                                        {
+                                                            required: true,
+                                                            message:
+                                                                '请输入名称!',
+                                                        },
+                                                    ],
+                                                },
+                                            ]"
+                                        />
+                                    </a-form-item>
+                                    <a-form-item label="说明">
+                                        <a-textarea
+                                            placeholder="请输入说明"
+                                            :rows="4"
+                                            v-decorator="[
+                                                'description',
+                                                {
+                                                    initialValue:
+                                                        data.description,
+                                                },
+                                            ]"
+                                        />
+                                    </a-form-item>
+                                </a-form>
+                            </div>
+                        </a-col>
+                        <a-col :span="12">
+                            <div class="config-right">
+                                <div class="config-right-item">
+                                    <div class="config-right-item-title">
+                                        接入方式
+                                    </div>
+                                    <div class="config-right-item-context">
+                                        {{ provider.name }}
+                                    </div>
+                                    <div class="config-right-item-context">
+                                        {{ provider.description }}
+                                    </div>
+                                </div>
+                                <div class="config-right-item">
+                                    <div class="config-right-item-title">
+                                        消息协议
+                                    </div>
+                                    <div class="config-right-item-context">
+                                        {{
+                                            procotolList.find(
+                                                (i) => i.id === procotolCurrent,
+                                            ).name
+                                        }}
+                                    </div>
+                                    <div
+                                        class="config-right-item-context"
+                                        v-if="config.document"
+                                    >
+                                        {{ config.document }}
+                                    </div>
+                                </div>
+                                <div
+                                    class="config-right-item"
+                                    v-if="
+                                        networkList.find(
+                                            (i) => i.id === networkCurrent,
+                                        ) &&
+                                        (
+                                            networkList.find(
+                                                (i) => i.id === networkCurrent,
+                                            ).addresses || []
+                                        ).length > 0
+                                    "
+                                >
+                                    <div class="config-right-item-title">
+                                        网络组件
+                                    </div>
+                                    <div
+                                        v-for="i in (networkList.find(
+                                            (i) => i.id === networkCurrent,
+                                        ) &&
+                                            networkList.find(
+                                                (i) => i.id === networkCurrent,
+                                            ).addresses) ||
+                                        []"
+                                        :key="i.address"
+                                    >
+                                        <a-badge
+                                            :color="
+                                                i.health === -1
+                                                    ? 'red'
+                                                    : 'green'
+                                            "
+                                            :text="i.address"
+                                        />
+                                    </div>
+                                </div>
+                                <div
+                                    class="config-right-item"
+                                    v-if="
+                                        config.routes &&
+                                        config.routes.length > 0
+                                    "
+                                >
+                                    <div class="config-right-item-title">
+                                        {{
+                                            data.provider ===
+                                                'mqtt-server-gateway' ||
+                                            data.provider ===
+                                                'mqtt-client-gateway'
+                                                ? 'topic'
+                                                : 'URL信息'
+                                        }}
+                                    </div>
+                                    <a-table
+                                        :pagination="false"
+                                        :rowKey="generateUUID()"
+                                        :data-source="config.routes || []"
+                                        bordered
+                                        :columns="columnsMQTT"
+                                        :scroll="{ y: 300 }"
+                                    >
+                                        <template
+                                            slot="stream"
+                                            slot-scope="text, record"
+                                        >
+                                            <span
+                                                v-if="
+                                                    record.upstream &&
+                                                    record.downstream
+                                                "
+                                                >上行、下行</span
+                                            >
+                                            <span v-else-if="record.upstream"
+                                                >上行</span
+                                            >
+                                            <span v-else-if="record.downstream"
+                                                >下行</span
+                                            >
+                                        </template>
+                                    </a-table>
+                                </div>
+                            </div>
+                        </a-col>
+                    </a-row>
+                </div>
+            </div>
+        </div>
+        <div class="steps-action">
+            <a-button
+                v-if="[0, 1].includes(current)"
+                type="primary"
+                @click="next"
+            >
+                下一步
+            </a-button>
+            <a-button v-if="current === 2" type="primary" @click="save">
+                保存
+            </a-button>
+            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
+                上一步
+            </a-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup name="AccessNetwork">
+import {
+    getNetworkList,
+    getProtocolList,
+    getConfigView,
+    save,
+    update,
+    getChildConfigView,
+} from '@/api/link/accessConfig';
+import {
+    descriptionList,
+    NetworkTypeMapping,
+    ProtocolMapping,
+} from '../Detail/data';
+import AccessCard from './AccessCard/index.vue';
+import TitleComponent from '@/components/TitleComponent/index.vue';
+import { message, Form } from 'ant-design-vue';
+
+function generateUUID() {
+    var d = new Date().getTime();
+    if (
+        typeof performance !== 'undefined' &&
+        typeof performance.now === 'function'
+    ) {
+        d += performance.now(); //use high-precision timer if available
+    }
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+        /[xy]/g,
+        function (c) {
+            var r = (d + Math.random() * 16) % 16 | 0;
+            d = Math.floor(d / 16);
+            return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
+        },
+    );
+}
+
+const props = defineProps({
+    provider: {
+        type: Object,
+        default: () => {},
+    },
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+
+
+const current = ref(0);
+const stepCurrent = ref(0);
+const steps = ref(['网络组件', '消息协议', '完成']);
+const networkList = ref([]);
+const procotolList = ref([]);
+const allProcotolList = ref([]);
+const networkCurrent = ref('');
+const procotolCurrent = ref('');
+let config = ref({});
+let columnsMQTT = ref([]);
+const form = reactive({
+    name: 'access',
+    description: '',
+});
+
+const queryNetworkList = async (id: string, params: object, data = {}) => {
+  console.log('queryNetworkList',NetworkTypeMapping.get(id), data, params);
+  
+    const resp = await getNetworkList(NetworkTypeMapping.get(id), data, params);
+    if (resp.status === 200) {
+        networkList.value = resp.result;
+    }
+};
+
+// const  queryProcotolList=async(id:string, params:object) =>{
+const queryProcotolList = async (id: string, params = {}) => {
+    const resp = await getProtocolList(ProtocolMapping.get(id), {
+        ...params,
+        'sorts[0].name': 'createTime',
+        'sorts[0].order': 'desc',
+    });
+    if (resp.status === 200) {
+        procotolList.value = resp.result;
+        allProcotolList.value = resp.result;
+    }
+};
+
+const addNetwork = () => {
+    // const url = this.$store.state.permission.routes['Link/Type/Detail']
+    const url = '/demo';
+    const tab = window.open(
+        `${window.location.origin + window.location.pathname}#${url}?type=${
+            NetworkTypeMapping.get(props.provider?.id) || ''
+        }`,
+    );
+    tab.onTabSaveSuccess = (value) => {
+        if (value.success) {
+            networkCurrent.value = value.result.id;
+            queryNetworkList(props.provider?.id, {
+                include: networkCurrent.value || '',
+            });
+        }
+    };
+};
+const addProcotol = () => {
+    // const url = this.$store.state.permission.routes['Link/Protocol']
+    const url = '/demo';
+    const tab = window.open(
+        `${window.location.origin + window.location.pathname}#${url}?save=true`,
+    );
+    tab.onTabSaveSuccess = (value) => {
+        if (value.success) {
+            procotolCurrent.value = value.result?.id;
+            queryProcotolList(props.provider?.id);
+        }
+    };
+};
+
+const checkedChange = (id: string) => {
+    networkCurrent.value = id;
+};
+
+const networkSearch = (value: string) => {
+  console.log('networkSearch',
+        props.provider.id,
+        {
+            include: networkCurrent.value || '',
+        },
+        {
+            terms: [
+                {
+                    column: 'name$LIKE',
+                    value: `%${value}%`,
+                },
+            ],
+        },
+    );
+  
+    queryNetworkList(
+        props.provider.id,
+        {
+            include: networkCurrent.value || '',
+        },
+        {
+            terms: [
+                {
+                    column: 'name$LIKE',
+                    value: `%${value}%`,
+                },
+            ],
+        },
+    );
+};
+const procotolChange = (id: string) => {
+    if (!props.data.id) {
+        procotolCurrent.value = id;
+    }
+};
+
+const procotolSearch = (value: string) => {
+    if (value) {
+        const list = allProcotolList.value.filter((i) => {
+            return (
+                i.name &&
+                i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
+            );
+        });
+        procotolList.value = list;
+    } else {
+        procotolList.value = allProcotolList.value;
+    }
+};
+
+const saveData = () => {
+    form.validateFields(async (err, values) => {
+        if (!err) {
+            let resp = undefined;
+            if (props.data && props.data.id) {
+                resp = await update({
+                    ...props.data,
+                    name: values.name,
+                    description: values.description,
+                    protocol: procotolCurrent.value,
+                    channel: 'network', // 网络组件
+                    channelId: networkCurrent.value,
+                });
+            } else {
+                resp = await save({
+                    name: values.name,
+                    description: values.description,
+                    provider: props.provider.id,
+                    protocol: procotolCurrent.value,
+                    transport:
+                        props.provider?.id === 'child-device'
+                            ? 'Gateway'
+                            : ProtocolMapping.get(props.provider.id),
+                    channel: 'network', // 网络组件
+                    channelId: networkCurrent.value,
+                });
+            }
+            if (resp.status === 200) {
+                message.success('操作成功！');
+                // 回到列表页面
+                if (window.onTabSaveSuccess) {
+                    window.onTabSaveSuccess(resp);
+                    setTimeout(() => window.close(), 300);
+                } else {
+                    // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
+                }
+            }
+        }
+    });
+};
+const next = async () => {
+    if (current.value === 0) {
+        if (!networkCurrent.value) {
+            message.error('请选择网络组件！');
+        } else {
+            queryProcotolList(props.provider.id);
+            current.value -= current.value;
+        }
+    } else if (current.value === 1) {
+        if (!procotolCurrent.value) {
+            message.error('请选择消息协议！');
+        } else {
+            const resp =
+                props.provider.channel !== 'child-device'
+                    ? await getConfigView(
+                          procotolCurrent.value,
+                          ProtocolMapping.get(props.provider.id),
+                      )
+                    : await getChildConfigView(procotolCurrent.value);
+            if (resp.status === 200) {
+                config.value = resp.result;
+                current.value += current.value;
+                columnsMQTT = [
+                    {
+                        title: '分组',
+                        dataIndex: 'group',
+                        key: 'group',
+                        ellipsis: true,
+                        align: 'center',
+                        width: 100,
+                        customRender: (value, row, index) => {
+                            const obj = {
+                                children: value,
+                                attrs: {},
+                            };
+                            const list = (config && config.routes) || [];
+                            const arr = list.filter((res) => {
+                                return res.group == row.group;
+                            });
+                            if (
+                                index == 0 ||
+                                list[index - 1].group !== row.group
+                            ) {
+                                obj.attrs.rowSpan = arr.length;
+                            } else {
+                                obj.attrs.rowSpan = 0;
+                            }
+                            return obj;
+                        },
+                    },
+                    {
+                        title: 'topic',
+                        dataIndex: 'topic',
+                        key: 'topic',
+                        ellipsis: true,
+                    },
+                    {
+                        title: '上下行',
+                        dataIndex: 'stream',
+                        key: 'stream',
+                        ellipsis: true,
+                        align: 'center',
+                        width: 100,
+                        scopedSlots: { customRender: 'stream' },
+                    },
+                    {
+                        title: '说明',
+                        dataIndex: 'description',
+                        key: 'description',
+                        ellipsis: true,
+                    },
+                ];
+            }
+        }
+    }
+};
+const prev = () => {
+    const currentValue = current.value;
+    current.value -= currentValue;
+};
+
+onMounted(() => {
+    if (props.data && props.data.id) {
+        if (props.data.provider !== 'child-device') {
+            procotolCurrent.value = props.data.protocol;
+            current.value = 0;
+            networkCurrent.value = props.data.channelId;
+            console.log(11111111,props.provider.id, {
+                include: networkCurrent.value,
+            });
+            
+            queryNetworkList(props.provider.id, {
+                include: networkCurrent.value,
+            });
+            procotolCurrent.value = props.data.protocol;
+            steps.value = ['网络组件', '消息协议', '完成'];
+        } else {
+            steps.value = ['消息协议', '完成'];
+            current.value = 1;
+            queryProcotolList(props.provider.id);
+        }
+    } else {
+        if (props.provider?.id) {
+            if (props.provider.channel !== 'child-device') {
+                console.log(3333333, props.provider.id, {
+                    include: '',
+                });
+
+                queryNetworkList(props.provider.id, {
+                    include: '',
+                });
+                steps.value = ['网络组件', '消息协议', '完成'];
+                current.value = 0;
+            } else {
+                console.log(444444,props.provider.id);
+
+                steps.value = ['消息协议', '完成'];
+                current.value = 1;
+                queryProcotolList(props.provider.id);
+            }
+        }
+    }
+});
+
+// watch(
+//     () => props.modelValue,
+//     (v) => {
+//         keystoreBase64.value = v;
+//     },
+//     {
+//         deep: true,
+//         immediate: true,
+//     },
+// );
+// watch: {
+//     current(val) {
+//       if (this.provider.channel !== 'child-device') {
+//         this.stepCurrent = val
+//       } else {
+//         this.stepCurrent = val - 1
+//       }
+//     },
+//   },
+</script>
+
+<style lang="less" scoped>
+.steps-content {
+    margin: 20px;
+}
+.steps-box {
+    min-height: 400px;
+    .card-item {
+        padding-right: 5px;
+        max-height: 480px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    .card-last {
+        padding-right: 5px;
+        max-height: 580px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+}
+.steps-action {
+    width: 100%;
+    margin-top: 24px;
+    margin-left: 20px;
+}
+.alert {
+    height: 40px;
+    padding-left: 10px;
+    color: rgba(0, 0, 0, 0.55);
+    line-height: 40px;
+    background-color: #f6f6f6;
+}
+.search {
+    display: flex;
+    margin: 15px 0;
+    justify-content: space-between;
+}
+
+.other {
+    width: 100%;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .item {
+        width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+
+.config-right {
+    padding: 20px;
+    color: rgba(0, 0, 0, 0.8);
+    background: rgba(0, 0, 0, 0.04);
+
+    .config-right-item {
+        margin-bottom: 10px;
+
+        .config-right-item-title {
+            width: 100%;
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+
+        .config-right-item-context {
+            margin: 5px 0;
+            color: rgba(0, 0, 0, 0.8);
+        }
+    }
+}
+</style>
diff --git a/src/views/link/AccessConfig/components/Provider/index.vue b/src/views/link/AccessConfig/components/Provider/index.vue
new file mode 100644
index 00000000..d73dad78
--- /dev/null
+++ b/src/views/link/AccessConfig/components/Provider/index.vue
@@ -0,0 +1,145 @@
+<template>
+    <TitleComponent data="自定义设备接入"></TitleComponent>
+    <div>
+        <a-row :gutter="[24, 24]">
+            <a-col :span="12" v-for="item in dataSource" :key="item.id">
+                <div class="provider">
+                    <div class="box">
+                        <div class="left">
+                            <div class="images">
+                                <img :src="backMap.get(item.id)" />
+                            </div>
+                            <div class="context">
+                                <div class="title">
+                                    {{ item.name }}
+                                </div>
+                                <div class="desc">
+                                    <a-tooltip :title="item.description">
+                                        {{ item.description || '' }}
+                                    </a-tooltip>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="right">
+                            <a-button type="primary" @click="click(item)"
+                                >接入</a-button
+                            >
+                        </div>
+                    </div>
+                </div>
+            </a-col>
+        </a-row>
+    </div>
+</template>
+
+<script lang="ts" setup name="AccessConfigProvider">
+import TitleComponent from '@/components/TitleComponent/index.vue';
+import { getImage } from '@/utils/comm';
+
+const props = defineProps({
+    dataSource: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const emit = defineEmits(['onClick']);
+
+const backMap = new Map();
+backMap.set('mqtt-server-gateway', getImage('/access/mqtt.png'));
+backMap.set('websocket-server', getImage('/access/websocket.png'));
+backMap.set('modbus-tcp', getImage('/access/modbus.png'));
+backMap.set('coap-server-gateway', getImage('/access/coap.png'));
+backMap.set('tcp-server-gateway', getImage('/access/tcp.png'));
+backMap.set('Ctwing', getImage('/access/ctwing.png'));
+backMap.set('child-device', getImage('/access/child-device.png'));
+backMap.set('opc-ua', getImage('/access/opc-ua.png'));
+backMap.set('http-server-gateway', getImage('/access/http.png'));
+backMap.set('fixed-media', getImage('/access/video-device.png'));
+backMap.set('udp-device-gateway', getImage('/access/udp.png'));
+backMap.set('OneNet', getImage('/access/onenet.png'));
+backMap.set('gb28181-2016', getImage('/access/gb28181.png'));
+backMap.set('mqtt-client-gateway', getImage('/access/mqtt-broke.png'));
+backMap.set('edge-child-device', getImage('/access/child-device.png'));
+backMap.set('official-edge-gateway', getImage('/access/edge.png'));
+
+const click = (value: object) => {
+    emit('onClick', value);
+};
+
+</script>
+
+<style lang="less" scoped>
+.provider {
+    position: relative;
+    width: 100%;
+    padding: 20px;
+    background: url('/public/images/access/background.png') no-repeat;
+    background-size: 100% 100%;
+    border: 1px solid #e6e6e6;
+
+    &::before {
+        position: absolute;
+        top: 0;
+        left: 40px;
+        display: block;
+        width: 15%;
+        min-width: 64px;
+        height: 2px;
+        background-image: url('/public/images/access/rectangle.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        // border: 1px #8da1f4 solid;
+        // border-bottom-left-radius: 10%;
+        // border-bottom-right-radius: 10%;
+        content: ' ';
+    }
+
+    &:hover {
+        box-shadow: 0 0 24px rgba(#000, 0.1);
+    }
+}
+
+.box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    .left {
+        display: flex;
+        width: calc(100% - 70px);
+        .images {
+            width: 64px;
+            height: 64px;
+
+            img {
+                width: 100%;
+            }
+        }
+
+        .context {
+            width: calc(100% - 84px);
+            margin: 10px;
+
+            .title {
+                font-weight: 600;
+            }
+
+            .desc {
+                width: 100%;
+                margin-top: 10px;
+                overflow: hidden;
+                color: rgba(0, 0, 0, 0.55);
+                font-weight: 400;
+                font-size: 13px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+    .right {
+        width: 70px;
+    }
+}
+</style>
diff --git a/src/views/link/AccessConfig/index.vue b/src/views/link/AccessConfig/index.vue
index 5ce2ef66..e1509f3b 100644
--- a/src/views/link/AccessConfig/index.vue
+++ b/src/views/link/AccessConfig/index.vue
@@ -1,11 +1,18 @@
 <template>
-  <a-button type="primary" @click="handlAdd">新增</a-button>
+    <a-button type="primary" @click="handlAdd">新增</a-button>
 </template>
 <script lang="ts" setup name="AccessConfigPage">
+const router = useRouter();
 
-const handlAdd = (e: any) => {
-  console.log(111,e);
-  
+// const handlAdd = () => {
+//     router.push({
+//         path: '/link/accessConfig/detail/add',
+//         query: {
+//             id: '1610475400026861568',
+//         },
+//     });
+// };
+const handlAdd = () => {
+  router.push('/link/accessConfig/detail/add');
 }
-
 </script>
diff --git a/src/views/link/Certificate/Detail/CertificateFile.vue b/src/views/link/Certificate/Detail/CertificateFile.vue
index b6ffb26c..ae64c8f0 100644
--- a/src/views/link/Certificate/Detail/CertificateFile.vue
+++ b/src/views/link/Certificate/Detail/CertificateFile.vue
@@ -64,16 +64,14 @@ const handleChange = (info: UploadChangeParam) => {
         message.success('上传成功！');
         const result = info.file.response?.result;
         keystoreBase64.value = result;
-        console.log(1114, result);
         loading.value = false;
         emit('change', result);
         emit('update:modelValue', result);
     }
 };
 const textChange = (val: any) => {
-    val.name = props.name;
-    emit('change', val);
-    // emit('update:modelValue', val);
+    emit('change', keystoreBase64.value);
+    emit('update:modelValue', keystoreBase64.value);
 };
 
 watch(
diff --git a/src/views/link/Certificate/Detail/index.vue b/src/views/link/Certificate/Detail/index.vue
index ec301a57..1cb904b1 100644
--- a/src/views/link/Certificate/Detail/index.vue
+++ b/src/views/link/Certificate/Detail/index.vue
@@ -10,10 +10,8 @@
                     :label-col="{ span: 8 }"
                     :wrapper-col="{ span: 16 }"
                     autocomplete="off"
-                    @finish="onFinish"
-                    :rules="formRules"
                 >
-                    <a-form-item label="证书标准" name="type">
+                    <a-form-item label="证书标准" v-bind="validateInfos.type">
                         <a-radio-group v-model:value="formData.type">
                             <a-radio-button
                                 class="form-radio-button"
@@ -24,25 +22,29 @@
                         </a-radio-group>
                     </a-form-item>
 
-                    <a-form-item label="证书名称" name="name">
+                    <a-form-item label="证书名称" v-bind="validateInfos.name">
                         <a-input
                             placeholder="请输入证书名称"
                             v-model:value="formData.name"
                         />
                     </a-form-item>
-                    <a-form-item label="证书文件" name="cert">
+                    <a-form-item
+                        label="证书文件"
+                        v-bind="validateInfos['configs.cert']"
+                    >
                         <CertificateFile
                             name="cert"
-                            v-model:modelValue="formData.cert"
-                            @change="changeFileValue"
+                            v-model:modelValue="formData.configs.cert"
                             placeholder='证书格式以"-----BEGIN CERTIFICATE-----"开头，以"-----END CERTIFICATE-----"结尾"'
                         />
                     </a-form-item>
-                    <a-form-item label="证书私钥" name="key">
+                    <a-form-item
+                        label="证书私钥"
+                        v-bind="validateInfos['configs.key']"
+                    >
                         <CertificateFile
                             name="key"
-                            v-model:modelValue="formData.key"
-                            @change="changeFileValue"
+                            v-model:modelValue="formData.configs.key"
                             placeholder='证书私钥格式以"-----BEGIN (RSA|EC) PRIVATE KEY-----"开头，以"-----END(RSA|EC) PRIVATE KEY-----"结尾。'
                         />
                     </a-form-item>
@@ -61,6 +63,8 @@
                             class="form-submit"
                             html-type="submit"
                             type="primary"
+                            @click.prevent="onSubmit"
+                            :loading="loading"
                             >保存</a-button
                         >
                     </a-form-item>
@@ -89,7 +93,7 @@
 </template>
 
 <script lang="ts" setup name="CertificateDetail">
-import { message } from 'ant-design-vue';
+import { message, Form } from 'ant-design-vue';
 import { getImage } from '@/utils/comm';
 import CertificateFile from './CertificateFile.vue';
 import type { UploadChangeParam } from 'ant-design-vue';
@@ -101,57 +105,65 @@ import {
 } from '@/utils/variable';
 import { save } from '@/api/link/certificate';
 
+const router = useRouter();
+
+const useForm = Form.useForm;
+
+const fileLoading = ref(false);
 const loading = ref(false);
 
 const formData = reactive({
     type: 'common',
     name: '',
-    cert: '',
-    key: '',
-    // configs: {
-    //     cert: '',
-    //     key: '',
-    // },
+    configs: {
+        cert: '',
+        key: '',
+    },
     description: '',
 });
 
-const formRules = {
-    type: [{ required: true, message: '请选择证书标准', trigger: 'blur' }],
-    name: [
-        { required: true, message: '请输入证书名称', trigger: 'blur' },
-        { max: 64, message: '最多可输入64个字符' },
-    ],
-    cert: [{ required: true, message: '请输入或上传文件', trigger: 'blur' }],
-    key: [{ required: true, message: '请输入或上传文件', trigger: 'blur' }],
-    description: [{ max: 200, message: '最多可输入200个字符' }],
-};
+const { resetFields, validate, validateInfos } = useForm(
+    formData,
+    reactive({
+        type: [{ required: true, message: '请选择证书标准', trigger: 'blur' }],
+        name: [
+            { required: true, message: '请输入证书名称', trigger: 'blur' },
+            { max: 64, message: '最多可输入64个字符' },
+        ],
+        'configs.cert': [
+            { required: true, message: '请输入或上传文件', trigger: 'blur' },
+        ],
+        'configs.key': [
+            { required: true, message: '请输入或上传文件', trigger: 'blur' },
+        ],
+        description: [{ max: 200, message: '最多可输入200个字符' }],
+    }),
+);
 
-const onFinish = async (values: any) => {
-    values.configs = {
-        cert: formData.cert,
-        key: formData.key,
-    };
-    delete values.cert;
-    delete values.key;
-
-    const response = await save(values)
-      if (response.status === 200) {
-        message.success('操作成功')
-      }
-
-};
-
-const changeFileValue = (v: any) => {
-    formData[v.name] = v.data;
+const onSubmit = () => {
+    validate()
+        .then(async (res) => {
+            const params = toRaw(formData);
+            loading.value = true;
+            const response = await save(params);
+            if (response.status === 200) {
+                message.success('操作成功');
+                router.push('/link/certificate');
+            }
+            loading.value = false;
+        })
+        .catch((err) => {
+            loading.value = false;
+        });
 };
 
 const handleChange = (info: UploadChangeParam) => {
-    loading.value = true;
+    fileLoading.value = true;
     if (info.file.status === 'done') {
         message.success('上传成功！');
         const result = info.file.response?.result;
-        formData.cert = result;
-        loading.value = false;
+        formData.configs.cert = result;
+        fileLoading.value = false;
     }
 };
 </script>
diff --git a/src/views/link/Certificate/index.vue b/src/views/link/Certificate/index.vue
index 757828d4..c289ab74 100644
--- a/src/views/link/Certificate/index.vue
+++ b/src/views/link/Certificate/index.vue
@@ -3,8 +3,11 @@
 </template>
 <script lang="ts" setup name="CertificatePage">
 
-const handlAdd = (e: any) => {
-  console.log(111,e);
+const router = useRouter();
+
+
+const handlAdd = () => {
+  router.push('/link/certificate/detail/add');
   
 }
 
diff --git a/src/views/system/apiPage/components/ApiDoes.vue b/src/views/system/apiPage/components/ApiDoes.vue
new file mode 100644
index 00000000..a894042d
--- /dev/null
+++ b/src/views/system/apiPage/components/ApiDoes.vue
@@ -0,0 +1,139 @@
+<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 style="display: flex; justify-content: space-between">
+            <span class="label">请求数据类型</span>
+            <span class="value">{{
+                getContent(selectApi.requestBody) ||
+                'application/x-www-form-urlencoded'
+            }}</span>
+            <span class="label">响应数据类型</span>
+            <span class="value">{{ `["/"]` }}</span>
+        </p>
+
+        <div class="api-card">
+            <h5>请求参数</h5>
+            <div class="content">
+                <JTable
+                    :columns="columns.request"
+                    :dataSource="selectApi.parameters"
+                    noPagination
+                    model="TABLE"
+                >
+                    <template #required="slotProps">
+                        <span>{{ slotProps.row.required + '' }}</span>
+                    </template>
+                    <template #type="slotProps">
+                        <span>{{ slotProps.row.schema.type }}</span>
+                    </template>
+                </JTable>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { apiDetailsType } from '../index';
+import InputCard from './InputCard.vue';
+import { PropType } from 'vue';
+
+const props = defineProps({
+    selectApi: {
+        type: Object as PropType<apiDetailsType>,
+        required: true,
+    },
+});
+const { selectApi } = toRefs(props);
+
+const columns = {
+    request: [
+        {
+            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,
+        },
+    ],
+};
+
+console.log(selectApi.value);
+const getContent = (data: any) => {
+    if (!data) return '';
+    return Object.keys(data.content)[0];
+};
+</script>
+
+<style lang="less" scoped>
+.api-does-container {
+    .top {
+        width: 100%;
+
+        h5 {
+            font-weight: bold;
+            font-size: 16px;
+        }
+
+        .input {
+            display: flex;
+        }
+    }
+
+    .api-card {
+        h5 {
+            position: relative;
+            padding-left: 10px;
+
+            &::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/apiPage/components/ApiTest.vue b/src/views/system/apiPage/components/ApiTest.vue
new file mode 100644
index 00000000..b0bb47d0
--- /dev/null
+++ b/src/views/system/apiPage/components/ApiTest.vue
@@ -0,0 +1,42 @@
+<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 />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { apiDetailsType } from '../index';
+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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/apiPage/components/ChooseApi.vue b/src/views/system/apiPage/components/ChooseApi.vue
new file mode 100644
index 00000000..24362336
--- /dev/null
+++ b/src/views/system/apiPage/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/apiPage/components/InputCard.vue b/src/views/system/apiPage/components/InputCard.vue
new file mode 100644
index 00000000..c1742737
--- /dev/null
+++ b/src/views/system/apiPage/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/apiPage/components/LeftTree.vue b/src/views/system/apiPage/components/LeftTree.vue
index acdd1f5a..cbae4bea 100644
--- a/src/views/system/apiPage/components/LeftTree.vue
+++ b/src/views/system/apiPage/components/LeftTree.vue
@@ -15,51 +15,62 @@
 import { TreeProps } from 'ant-design-vue';
 
 import { getTreeOne_api, getTreeTwo_api } from '@/api/system/apiPage';
+import { treeNodeTpye } from '../index';
 
-type treeNodeTpye = {
-    name: string;
-    url: string;
-    children?: treeNodeTpye[];
-};
 const emits = defineEmits(['select']);
 
-const treeData: TreeProps['treeData'] = ref([]);
+const treeData = ref<TreeProps['treeData']>([]);
 
 const getTreeData = () => {
     let tree: treeNodeTpye[] = [];
-    getTreeOne_api().then((resp) => {
-        tree = resp.urls.map((item) => ({
+    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, i) => {
-                tree[i].children = combData(item.paths);
+            values.forEach((item: any, i) => {
+                tree[i].children = combData(item?.paths);
             });
-            console.log(tree);
-            treeData.value = tree
+            treeData.value = tree;
         });
     });
 };
-const clickSelectItem = (key, { node }) => {
-    emits('select', node);
+const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => {
+    emits('select', node.node.dataRef);
 };
 
 onMounted(() => {
     getTreeData();
 });
 
-const combData = (dataSource: object): object[] => {
-    const apiList: object[] = [];
+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 = apiList.find((item) => item.name === name);
-        if (!apiObj) {
-            apiObj = { name, link: key, methods: dataSource[key], key };
+        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);
         }
     });
@@ -68,4 +79,17 @@ const combData = (dataSource: object): object[] => {
 };
 </script>
 
-<style lang="less" scoped></style>
+<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/apiPage/index.d.ts b/src/views/system/apiPage/index.d.ts
new file mode 100644
index 00000000..e206edd0
--- /dev/null
+++ b/src/views/system/apiPage/index.d.ts
@@ -0,0 +1,22 @@
+export type treeNodeTpye = {
+    name: string;
+    key: string;
+    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: [];
+    requestBody?: any;
+}
\ No newline at end of file
diff --git a/src/views/system/apiPage/index.vue b/src/views/system/apiPage/index.vue
index 92339a94..cb82abca 100644
--- a/src/views/system/apiPage/index.vue
+++ b/src/views/system/apiPage/index.vue
@@ -1,15 +1,78 @@
 <template>
-    <a-card class="api-page-container" >
-        <LeftTree />
+    <a-card class="api-page-container">
+        <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"
+                        >返回</a-button
+                    >
+                    <a-tabs v-model:activeKey="activeKey" type="card">
+                        <a-tab-pane key="does" tab="文档">
+                            <ApiDoes :select-api="selectedApi" />
+                        </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">
+<script setup lang="ts" name="apiPage">
+import { treeNodeTpye, apiObjType, apiDetailsType } from './index';
 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) => {
+    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 initSelectedApi = {
+    url: '',
+    method: '',
+    summary: '',
+};
+const selectedApi = ref<apiDetailsType>(initSelectedApi);
+
+watch(tableData, () => (selectedApi.value = initSelectedApi));
 </script>
 
 <style scoped>
 .api-page-container {
     height: 100%;
 }
-</style>
\ No newline at end of file
+</style>