more api tests

src/App.vue

@@ -1,15 +1,18 @@
 <template>
   <TestStatus />
+  <TestSetting />
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import TestStatus from "./components/TestStatus.vue";
+import TestSetting from "./components/TestSetting.vue";
 
 export default defineComponent({
   name: "App",
   components: {
     TestStatus,
+    TestSetting,
   },
   // setup() {
   //   console.log("inside App.vue setup");

src/components/TestSetting.vue

@@ -0,0 +1,49 @@
+<template>
+  <h1>展示新前端获取setting的结果</h1>
+  <div>
+    setting:
+    <pre> {{ json }}</pre>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive, defineComponent, onMounted, toRefs } from "vue";
+export default defineComponent({
+  name: "TestSetting",
+  setup: () => {
+    const state = reactive({
+      json: "",
+    });
+
+    async function updateSetting() {
+      const settingRes = await (
+        await fetch("/mark/getSetting", { method: "POST" })
+      ).json();
+      console.log(settingRes);
+      state.json = JSON.stringify(settingRes, null, 2);
+    }
+    onMounted(() => {
+      updateSetting();
+    });
+    return toRefs(state);
+  },
+});
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>

src/components/TestStatus.vue

@@ -1,24 +1,47 @@
 <template>
   <h1>展示新前端获取status的结果</h1>
-  <div>totalCount: {{ count }}</div>
+  <div>valid: {{ valid }}</div>
+  <div>totalCount: {{ totalCount }}</div>
+  <div>personCount: {{ personCount }}</div>
+  <div>markedCount: {{ markedCount }}</div>
+  <div>problemCount: {{ problemCount }}</div>
+  <div>arbitrateCount: {{ arbitrateCount }}</div>
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, onMounted } from "vue";
+import { reactive, defineComponent, onMounted, toRefs } from "vue";
 export default defineComponent({
   name: "TestStatus",
   setup: () => {
-    const count = ref(0);
+    const state = reactive({
+      valid: false,
+      totalCount: 0,
+      personCount: 0,
+      markedCount: 0,
+      problemCount: 0,
+      arbitrateCount: 0,
+    });
 
     async function updateCount() {
-      const statusRes = await (await fetch("/mark/status")).json();
+      const statusRes = await (
+        await fetch("/mark/getStatus", { method: "POST" })
+      ).json();
+      const groupStatus = await (
+        await fetch("/mark/getGroup", { method: "POST" })
+      ).json();
+      console.log(groupStatus);
       console.log(statusRes, statusRes.totalCount);
-      count.value = statusRes.totalCount;
+      state.valid = statusRes.valid;
+      state.totalCount = statusRes.totalCount;
+      state.personCount = statusRes.personCount;
+      state.markedCount = statusRes.markedCount;
+      state.problemCount = statusRes.problemCount;
+      state.arbitrateCount = statusRes.arbitrateCount;
     }
     onMounted(() => {
       updateCount();
     });
-    return { count };
+    return toRefs(state);
   },
 });
 </script>