5.0

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

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import {
+  openMenu,
+  defaultActive,
+  apiModules,
+  contentShow,
+  content,
+  api,
+  commonParams,
+  activeIndex,
+  requestParamsExample,
+  responseParamsExample,
+  dataNodeType,
+  resultData,
+  onMenuClick
+} from "./index";
+import { ApiParamTable } from "@/components/ApiParamTable";
+import MavonEditor from "mavon-editor";
+</script>
+<template>
+  <el-container>
+    <el-aside width="300px">left</el-aside>
+    <el-main>
+      <div v-show="contentShow">
+        <MavonEditor
+          v-model="content"
+          :box-shadow="false"
+          :subfield="false"
+          default-open="preview"
+          :editable="false"
+          :toolbars-flag="false"
+        />
+      </div>
+      <div v-show="!contentShow">
+        <h3>{{ api.description }}</h3>
+        <div v-if="api.remark" class="api-remark">
+          {{ api.remark }}
+        </div>
+        <div>接口名：{{ api.name }} 版本号：{{ api.version }}</div>
+        <h3>公共请求参数</h3>
+        <el-table :data="commonParams" border highlight-current-row>
+          <el-table-column prop="name" label="名称" width="200" />
+          <el-table-column prop="type" label="类型" width="100" />
+          <el-table-column prop="required" label="必须" width="60">
+            <template #default="scope">
+              <span :class="scope.row.required ? 'danger' : ''">
+                {{ scope.row.required ? `是` : `否` }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="maxLength" label="最大长度" width="85" />
+          <el-table-column prop="description" label="描述">
+            <template #default="scope">
+              <span v-if="scope.row.name === 'sign'">
+                商户请求参数的签名串，详见
+                <el-button type="primary" link>签名</el-button>
+              </span>
+              <span v-else>
+                {{ scope.row.description }}
+              </span>
+            </template>
+          </el-table-column>
+          <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>
+        <h3>公共返回参数</h3>
+        <el-table :data="resultData" border highlight-current-row>
+          <el-table-column label="名称" prop="name" width="200" />
+          <el-table-column label="类型" prop="type" width="100">
+            <template #default="scope">
+              <span v-if="scope.row.name === 'data'">
+                {{ dataNodeType }}
+              </span>
+              <span v-else>
+                {{ scope.row.type }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="描述" prop="description">
+            <template #default="scope">
+              <span
+                v-if="scope.row.name === 'code' || scope.row.name === 'msg'"
+              >
+                {{ dataNodeType }}
+              </span>
+              <span v-else>
+                {{ scope.row.description }}
+              </span>
+            </template>
+          </el-table-column>
+          <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>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+<style lang="scss" scoped>
+h3 {
+  margin: 20px 0;
+}
+h4 {
+  margin: 10px 0;
+}
+</style>