5.0

sop-website/sop-website-frontend/src/views/doc/api/index.vue

@@ -1,23 +1,19 @@
 <script setup lang="ts">
 import {
-  openMenu,
-  defaultActive,
-  apiModules,
   contentShow,
   content,
-  api,
+  docDetail,
   commonParams,
-  activeIndex,
-  requestParamsExample,
-  responseParamsExample,
   dataNodeType,
   resultData,
-  onMenuClick,
   handleChangeDocApp,
   docAppId,
   docAppList,
   docTree,
-  handleNodeClick
+  handleNodeClick,
+  showUrl,
+  showProdUrl,
+  showSandBoxUrl
 } from "./index";
 import { ApiParamTable } from "@/components/ApiParamTable";
 import MavonEditor from "mavon-editor";
@@ -27,7 +23,7 @@ const defaultProps = {
 };
 </script>
 <template>
-  <el-container>
+  <el-container class="doc-view">
     <el-aside width="300px">
       <el-select
         v-show="docAppId > 0"
@@ -43,14 +39,20 @@ const defaultProps = {
           :value="item.id"
         />
       </el-select>
+      <div style="margin-top: 10px">
+        <el-link type="primary" href="" target="_blank">签名算法</el-link>
+      </div>
       <el-tree
         :data="docTree"
         :props="defaultProps"
-        style="margin-top: 20px"
+        style="margin-top: 10px"
         @node-click="handleNodeClick"
       />
     </el-aside>
-    <el-main style="padding-top: 0">
+    <el-main
+      v-show="docDetail?.docInfoView?.url?.length > 0"
+      style="padding-top: 0"
+    >
       <div v-show="contentShow">
         <MavonEditor
           v-model="content"
@@ -62,11 +64,44 @@ const defaultProps = {
         />
       </div>
       <div v-show="!contentShow">
-        <h3>{{ api.description }}</h3>
-        <div v-if="api.remark" class="api-remark">
-          {{ api.remark }}
+        <h2>
+          {{ docDetail.docInfoView.url + `(${docDetail.docInfoView.docName})` }}
+        </h2>
+        <div v-if="docDetail.docInfoView.description">
+          <h3>接口说明</h3>
+          <div
+            class="api-description"
+            v-html="docDetail.docInfoView.description"
+          />
         </div>
-        <div>接口名：{{ api.name }} 版本号：{{ api.version }}</div>
+        <el-descriptions border style="margin-top: 20px">
+          <el-descriptions-item label="接口名称">
+            {{ docDetail.docInfoView.url }}
+          </el-descriptions-item>
+          <el-descriptions-item label="版本号">
+            {{ docDetail.docInfoView.version }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <el-descriptions
+          v-show="showUrl"
+          :column="1"
+          title="请求地址"
+          border
+          style="margin-top: 20px"
+        >
+          <el-descriptions-item v-show="showProdUrl">
+            <template #label>
+              <div class="cell-item">生产环境</div>
+            </template>
+            {{ docDetail.docInfoConfig.openProdUrl }}
+          </el-descriptions-item>
+          <el-descriptions-item v-show="showSandBoxUrl">
+            <template #label>
+              <div class="cell-item">沙箱环境</div>
+            </template>
+            {{ docDetail.docInfoConfig.openSandboxUrl }}
+          </el-descriptions-item>
+        </el-descriptions>
         <h3>公共请求参数</h3>
         <el-table :data="commonParams" border highlight-current-row>
           <el-table-column prop="name" label="名称" width="200" />
@@ -93,11 +128,7 @@ const defaultProps = {
           <el-table-column prop="example" label="示例值" width="200" />
         </el-table>
         <h3>业务请求参数</h3>
-        <api-param-table :data="api.requestParams" />
-        <h4>请求示例</h4>
-        <pre class="normal-text">
-          {{ JSON.stringify(requestParamsExample, null, 4) }}
-        </pre>
+        <ApiParamTable :data="docDetail.docInfoView.requestParams" />
         <h3>公共返回参数</h3>
         <el-table :data="resultData" border highlight-current-row>
           <el-table-column label="名称" prop="name" width="200" />
@@ -126,11 +157,7 @@ const defaultProps = {
           <el-table-column label="示例值" prop="example" width="200" />
         </el-table>
         <h4>业务返回参数</h4>
-        <ApiParamTable :data="api.responseParams" />
-        <h4>返回示例</h4>
-        <pre class="normal-text">
-          {{ JSON.stringify(responseParamsExample, null, 4) }}
-        </pre>
+        <ApiParamTable :data="docDetail.docInfoView.responseParams" />
       </div>
     </el-main>
   </el-container>