5.0

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

@@ -0,0 +1,32 @@
+import { createUrl, http } from "@/utils/http";
+import type { Result } from "@/model";
+
+// 后端请求接口
+const apiUrl: any = createUrl({
+  addApp: "/doc/app/add",
+  listApp: "/doc/app/list"
+});
+
+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 表单内容
+   */
+  addApp(data: object) {
+    return http.post<Result<any>, any>(apiUrl.addApp, { data });
+  }
+};

sop-admin/sop-admin-frontend/src/style/sidebar.scss

@@ -50,7 +50,7 @@
     height: 100vh;
     min-height: 100%;
     margin-left: $sideBarWidth;
-    background: #f0f2f5;
+    //background: #f0f2f5;
 
     /* main-content 属性动画 */
     transition: margin-left var(--pure-transition-duration);

sop-admin/sop-admin-frontend/src/views/doc/list/index.ts

@@ -0,0 +1,56 @@
+import { ref } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { api } from "@/api/doc";
+
+export const tabsData = ref<Array<any>>([
+  {
+    id: "",
+    appName: ""
+  }
+]);
+
+export const activeName = ref(0);
+
+export const handleClick = data => {
+  const id = data.props.name;
+  loadContent(id);
+};
+
+export const handleAddApp = () => {
+  ElMessageBox.prompt("请输入Torna应用token", "添加应用", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    inputPattern: /\w+/,
+    inputErrorMessage: "请输入Torna应用token"
+  })
+    .then(({ value }) => {
+      const data = {
+        tornaToken: value
+      };
+      api.addApp(data).then(() => {
+        ElMessage.success("添加成功");
+        loadTabs(true);
+      });
+    })
+    .catch(() => {});
+};
+
+const loadTabs = showLast => {
+  api.listApp().then(resp => {
+    tabsData.value = resp.data;
+    const length = tabsData.value.length;
+    if (length > 0) {
+      const showData = showLast
+        ? tabsData.value[length - 1]
+        : tabsData.value[0];
+      activeName.value = showData.id;
+      loadContent(showData.id);
+    }
+  });
+};
+
+const loadContent = id => {
+  console.log(id);
+};
+
+loadTabs(false);

sop-admin/sop-admin-frontend/src/views/doc/list/index.vue

@@ -1,6 +1,23 @@
 <script setup lang="ts">
-const a = 1;
+import { activeName, handleClick, handleAddApp, tabsData } from "./index";
 </script>
 <template>
-  <el-card>1</el-card>
+  <el-card shadow="never">
+    <el-tabs
+      v-show="tabsData.length > 0"
+      v-model="activeName"
+      type="card"
+      @tab-click="handleClick"
+    >
+      <el-tab-pane
+        v-for="item in tabsData"
+        :key="item.id"
+        :label="item.appName"
+        :name="item.id"
+      />
+    </el-tabs>
+  </el-card>
+  <div v-show="tabsData.length === 0" style="margin: 20px">
+    <el-button type="primary" @click="handleAddApp">添加应用</el-button>
+  </div>
 </template>