5.0

sop-website/sop-website-frontend/src/api/doc.ts

@@ -0,0 +1,32 @@
+import { createUrl, http } from "@/utils/http";
+import type { Result } from "@/model";
+
+// 后端请求接口
+const apiUrl: any = createUrl({
+  listApp: "/website/listDocApp",
+  listDocTree: "/doc/info/tree"
+});
+
+interface DocApp {
+  id: number;
+  appName: string;
+}
+
+/**
+ * 接口管理
+ */
+export const api: any = {
+  /**
+   * 分页查询
+   */
+  listApp(): Promise<Result<Array<DocApp>>> {
+    return http.get<Result<Array<DocApp>>, any>(apiUrl.listApp, {});
+  },
+  /**
+   * 查询文档树
+   * @param data
+   */
+  listDocTree(params: object) {
+    return http.get<Result<Array<any>>, any>(apiUrl.listDocTree, { params });
+  }
+};

sop-website/sop-website-frontend/src/model/index.ts

@@ -0,0 +1,16 @@
+export interface Result<T> {
+  success: boolean;
+  data: T;
+  msg: "";
+  code: "";
+}
+
+export interface PageResult {
+  success: boolean;
+  msg: "";
+  code: "";
+  data: {
+    total: 0;
+    list: Array<any>;
+  };
+}

sop-website/sop-website-frontend/src/utils/http/index.ts

@@ -14,6 +14,24 @@ import NProgress from "../progress";
 import { getToken, formatToken } from "@/utils/auth";
 import { useUserStoreHook } from "@/store/modules/user";
 
+export const baseUrl = (url: string) => {
+  if (!url) {
+    throw new Error("url不能为空");
+  }
+  if (url.startsWith("/")) {
+    url = url.substring(1);
+  }
+  return `/api/${url}`;
+};
+
+export const createUrl = (data: object) => {
+  const ret = {};
+  for (const dataKey in data) {
+    ret[dataKey] = baseUrl(data[dataKey]);
+  }
+  return ret;
+};
+
 // 相关配置请参考：www.axios-js.com/zh-cn/docs/#axios-request-config-1
 const defaultConfig: AxiosRequestConfig = {
   // 请求超时时间

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

@@ -1,4 +1,5 @@
 import { ref } from "vue";
+import { api as docApi } from "@/api/doc";
 
 export const defaultActive = ref("overview.md");
 export const activeIndex = ref("1");
@@ -11,6 +12,10 @@ export const api = ref<any>({});
 export const requestParamsExample = ref({});
 export const responseParamsExample = ref({});
 
+export const docAppId = ref(0);
+export const docAppList = ref([]);
+export const docTree = ref([]);
+
 /*
     参数	            类型	    是否必填	    最大长度	    描述	            示例值
     app_id	        String	是	        32	    支付宝分配给开发者的应用ID	2014072300007148
@@ -152,3 +157,32 @@ export function loadMarkdown(path) {
     contentShow.value = true;
   });
 }
+
+export function handleChangeDocApp(id) {
+  loadDocTree(id);
+}
+
+export function handleNodeClick(node) {
+  console.log(node);
+}
+
+function loadDocApp() {
+  docApi.listApp().then(resp => {
+    docAppList.value = resp.data;
+    if (docAppList.value.length > 0) {
+      loadDocTree(docAppList.value[0].id);
+    }
+  });
+}
+
+function loadDocTree(id) {
+  docAppId.value = id;
+  const params = {
+    docAppId: id
+  };
+  docApi.listDocTree(params).then(resp => {
+    docTree.value = resp.data;
+  });
+}
+
+loadDocApp();

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

@@ -12,15 +12,45 @@ import {
   responseParamsExample,
   dataNodeType,
   resultData,
-  onMenuClick
+  onMenuClick,
+  handleChangeDocApp,
+  docAppId,
+  docAppList,
+  docTree,
+  handleNodeClick
 } from "./index";
 import { ApiParamTable } from "@/components/ApiParamTable";
 import MavonEditor from "mavon-editor";
+const defaultProps = {
+  children: "children",
+  label: "docTitle"
+};
 </script>
 <template>
   <el-container>
-    <el-aside width="300px">left</el-aside>
-    <el-main>
+    <el-aside width="300px">
+      <el-select
+        v-show="docAppId > 0"
+        v-model="docAppId"
+        placeholder="Select"
+        size="large"
+        @change="handleChangeDocApp"
+      >
+        <el-option
+          v-for="item in docAppList"
+          :key="item.id"
+          :label="item.appName"
+          :value="item.id"
+        />
+      </el-select>
+      <el-tree
+        :data="docTree"
+        :props="defaultProps"
+        style="margin-top: 20px"
+        @node-click="handleNodeClick"
+      />
+    </el-aside>
+    <el-main style="padding-top: 0">
       <div v-show="contentShow">
         <MavonEditor
           v-model="content"

sop-website/sop-website-frontend/vite.config.ts

@@ -24,7 +24,14 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
       port: VITE_PORT,
       host: "0.0.0.0",
       // 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
-      proxy: {},
+      proxy: {
+        "/api": {
+          // 这里填写后端地址
+          target: "http://127.0.0.1:8082",
+          changeOrigin: true,
+          rewrite: path => path.replace(/^\/api/, "")
+        }
+      },
       // 预热文件以提前转换和缓存结果，降低启动期间的初始页面加载时长并防止转换瀑布
       warmup: {
         clientFiles: ["./index.html", "./src/{views,components}/*"]