fix examList

src/App.vue

@@ -1,7 +1,20 @@
 <template>
-  <router-view />
+  <template v-if="route.name === 'Login'">
+    <router-view />
+  </template>
+  <template v-else>
+    <Layout>
+      <router-view />
+    </Layout>
+  </template>
 </template>
 
+<script lang="ts" setup>
+import Layout from "@/components/Layout";
+import { useRoute } from "vue-router";
+const route = useRoute();
+</script>
+
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

src/components/HelloWorld.vue

@@ -1,135 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
-          target="_blank"
-          rel="noopener"
-          >typescript</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts">
-// import { defineComponent } from "vue";
-
-import { ref } from "vue";
-
-// export default defineComponent({
-//   name: "HelloWorld",
-//   props: {
-//     msg: String,
-//   },
-// });
-const msg = ref("");
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Layout.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="wp">
+    <div class="hd">
+      <div class="logo"><img src="img/logo.png" /></div>
+      <span class="y">
+        欢迎您，<span id="user-name">{{ userName }}</span>
+        <span class="pipe">|</span><a href="/">退出</a>
+      </span>
+    </div>
+    <div class="cont">
+      <slot />
+    </div>
+    <div class="ft">
+      Copyright © 2011-2020 www.qmth.com.cn, All Rights Reserved
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { store } from "@/store";
+const {
+  user: { userName },
+} = store.env;
+</script>

src/features/ExamList/ExamList.vue

@@ -1,64 +1,71 @@
 <template>
-  <div class="wp">
-    <div class="hd">
-      <div class="logo"><img src="img/logo.png" /></div>
-      <span class="y">
-        欢迎您，<span id="user-name"></span> <span class="pipe">|</span
-        ><a href="login.html">退出</a>
-      </span>
-    </div>
-    <div class="cont">
-      <div class="title cl" style="background: #fff">
-        <span class="y"
-          >共有<b id="total-count">{{ examList.length }}</b
-          >场考试，请选择</span
-        >
-        <h2>考试列表</h2>
-      </div>
-      <table cellpadding="0" cellspacing="0" width="100%" class="tablelist">
-        <thead>
-          <th>ID</th>
-          <th>考试名称</th>
-          <th>创建时间</th>
-          <th>操作</th>
-        </thead>
-        <tbody id="exam-list">
-          <tr v-for="(exam, index) in examList" :key="index">
-            <td>{{ exam.id }}</td>
-            <td>{{ exam.name }}</td>
-            <td>{{ exam.examTime }}</td>
-            <td><a-button @click="selectExam(exam)">进入考试</a-button></td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="page">
-        <span class="back" id="previous-button">上页</span>
-        <div id="page-list"></div>
-        <span class="next" id="next-button">下页</span>
-      </div>
-    </div>
-    <div class="ft">
-      Copyright © 2011-2020 www.qmth.com.cn, All Rights Reserved
-    </div>
+  <div class="title cl" style="background: #fff">
+    <span class="y"
+      >共有<b id="total-count">{{ examList.items.length }}</b
+      >场考试，请选择</span
+    >
+    <h2>考试列表</h2>
   </div>
+  <table cellpadding="0" cellspacing="0" width="100%" class="tablelist">
+    <thead>
+      <th>ID</th>
+      <th>考试名称</th>
+      <th>创建时间</th>
+      <th>操作</th>
+    </thead>
+    <tbody id="exam-list">
+      <tr v-for="(exam, index) in showExams.items" :key="index">
+        <td>{{ exam.id }}</td>
+        <td>{{ exam.name }}</td>
+        <td>{{ exam.examTime }}</td>
+        <td><a-button @click="selectExam(exam)">进入考试</a-button></td>
+      </tr>
+    </tbody>
+  </table>
+  <a-pagination
+    style="margin-top: 20px; float: right"
+    v-model:current="currentPage"
+    :total="examList.items.length"
+    show-less-items
+    @change="pageChange"
+  />
 </template>
 
 <script setup lang="ts">
 import { store } from "@/store";
-import { onMounted, ref } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { getExams } from "@/api/api";
 import { useRouter } from "vue-router";
 const router = useRouter();
 
-let examList = ref([]);
-// TODO: add pager
+let currentPage = ref(1);
+let pageSize = 10;
+let examList = reactive({ items: [] });
+let showExams = reactive({ items: [] });
 
 onMounted(async () => {
-  const exams = await getExams(1, 1000);
-  console.log(exams);
-  examList.value = exams.data;
+  await fetchData();
 });
 
+const fetchData = async () => {
+  const exams = await getExams(currentPage.value, 1000);
+  examList.items = exams.data;
+  showExams.items = examList.items.slice(
+    (currentPage.value - 1) * pageSize,
+    currentPage.value * pageSize
+  );
+};
+
+const pageChange = (page, pageSize) => {
+  console.log(page, pageSize);
+  currentPage.value = page;
+  // fetchData();
+  showExams.items = examList.items.slice(
+    (page - 1) * pageSize,
+    page * pageSize
+  );
+};
+
 const selectExam = (exam) => {
   store.env.exam = exam;
   store.env.examId = exam.id;

src/features/Home/Home.vue

@@ -1,36 +1,22 @@
 <template>
-  <div class="wp">
-    <div class="hd">
-      <div class="logo"><img src="img/logo.png" /></div>
-      <span class="y">
-        欢迎您，<span id="user-name">{{ userName }}</span>
-        <span class="pipe">|</span><a href="login.html">退出</a>
-      </span>
-    </div>
-    <div class="cont">
-      <div class="title cl" id="exam-title">
-        <em class="id"></em><span class="name">{{ userName }}</span
-        ><span class="pipe">|</span>
-        <span class="time"></span>
-      </div>
-      <div class="list">
-        <h3>功能选择</h3>
-        <ul class="cl">
-          <li class="l1">
-            <router-link to="/exam-list"><span></span>考试切换</router-link>
-          </li>
-          <li class="l2">
-            <a href="/sync"><span></span>数据同步</a>
-          </li>
-          <li class="l3">
-            <router-link to="/image"><span></span>图片下载</router-link>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div class="ft">
-      Copyright © 2011-2020 www.qmth.com.cn, All Rights Reserved
-    </div>
+  <div class="title cl" id="exam-title">
+    <em class="id"></em><span class="name">{{ userName }}</span
+    ><span class="pipe">|</span>
+    <span class="time"></span>
+  </div>
+  <div class="list">
+    <h3>功能选择</h3>
+    <ul class="cl">
+      <li class="l1">
+        <router-link to="/exam-list"><span></span>考试切换</router-link>
+      </li>
+      <li class="l2">
+        <a href="/sync"><span></span>数据同步</a>
+      </li>
+      <li class="l3">
+        <router-link to="/image"><span></span>图片下载</router-link>
+      </li>
+    </ul>
   </div>
 </template>
 

src/features/Login/Login.vue

@@ -5,7 +5,7 @@
       <a-form @submit="loginAction">
         <div>
           <a-select
-            style="width: 100%"
+            style="width: 100%; text-align: left"
             v-model:value="server"
             :options="servers"
             placeholder="请选择服务地址"

src/types/global.d.ts

@@ -44,5 +44,6 @@ declare module "vue" {
     ATooltip: typeof import("ant-design-vue")["Tooltip"];
     ASelect: typeof import("ant-design-vue")["Select"];
     AProgress: typeof import("ant-design-vue")["Progress"];
+    APagination: typeof import("ant-design-vue")["Pagination"];
   }
 }