[更新] 初步完成build界面

src/views/student/Code/ProjectDetail/BuildDetail.vue

@@ -1,17 +1,64 @@
 <template>
-  <div><project-build-card v-bind:buildState="1"></project-build-card></div>
+  <div>
+    <div v-if="detailLoading"><page-section-loading show /></div>
+    <div v-else>
+      <div
+        v-for="item in projectDetail.buildList"
+        :key="item.id"
+        class="gap-section"
+      >
+        <div class="page-section">
+          <div class="level">
+            <div class="level-left">
+              <build-tag :build-state="item.buildState" />
+              <strong style="padding-left: 10px">
+                {{ item.commitMessage }} · #{{ item.branchId }}
+              </strong>
+            </div>
+            <div v-if="item.buildState === 1" class="level-right">
+              <strong>mirror : {{ item.mirrorId }}</strong>
+            </div>
+          </div>
+          <div class="code-section">{{ item.buildMessage }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import ProjectBuildCard from "@/components/ProjectBuildCard/index";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
+import BuildTag from "@/views/student/Code/ProjectDetail/components/BuildTag";
 export default {
   name: "BuildDetail",
-  components: { ProjectBuildCard },
+  components: { BuildTag, PageSectionLoading },
   props: {
     projectDetail: {
       type: Object,
       default: () => {}
+    },
+    detailLoading: {
+      type: Boolean,
+      default: false
     }
   }
 };
 </script>
+
+<style lang="scss" scoped>
+@import "../../../../assets/scss/app";
+.gap-section {
+  padding-bottom: $default-margin-between;
+}
+
+.gap-section:last-child {
+  padding-bottom: 0;
+}
+
+.code-section {
+  margin: $default-margin-between -#{$default-margin-between} -#{$default-margin-between};
+  padding: $default-margin-between;
+  background-color: #2d3044;
+  color: #cacff1;
+}
+</style>

src/views/student/Code/ProjectDetail/components/BuildTag.vue

@@ -0,0 +1,25 @@
+<template>
+  <div style="display: inline-block">
+    <div v-if="buildState === 1" class="tag is-success" style="width: 55px;">
+      <strong style="color: white;">构建成功</strong>
+    </div>
+    <div v-if="buildState === -1" class="tag is-danger" style="width: 55px;">
+      <strong style="color: white;">构建失败</strong>
+    </div>
+    <div v-if="buildState === 0" class="tag" style="width: 55px;">
+      <strong>正在构建</strong>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BuildTag",
+  props: {
+    buildState: {
+      type: Number,
+      default: 0
+    }
+  }
+};
+</script>

src/views/student/Code/ProjectDetail/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <page-header
+      :loading="detailLoading"
       :routes="[
         { name: '代码作业', path: 'code' },
         { name: '项目列表', path: `code/${$route.params.homeworkId}` },
@@ -9,9 +10,7 @@
       :tab-list="[
         {
           name: '构建',
-          path: `code/${$route.params.homeworkId}/${
-            $route.params.projectId
-          }`
+          path: `code/${$route.params.homeworkId}/${$route.params.projectId}`
         },
         {
           name: '部署',
@@ -27,11 +26,12 @@
         }
       ]"
     >
-      <template slot="title"
-        >项目名称</template
-      >
+      <template slot="title">
+        {{ projectDetail.name }}
+      </template>
       <template slot="content">
-        <div>项目详情</div>
+        <strong>git 地址 : </strong>
+        <a :href="projectDetail.url">{{ projectDetail.url }}</a>
       </template>
     </page-header>
     <page-body>

src/views/student/Code/ProjectList/index.vue

@@ -1,18 +1,23 @@
 <template>
   <div>
     <page-header
+      :loading="projectListLoading"
       :routes="[{ name: '代码作业', path: 'code' }, { name: '项目列表' }]"
     >
-      <template slot="title"
-        >项目列表</template
-      >
-      <template slot="content"
-        >共有 {{ projectList.length }} 个项目</template
-      >
+      <template slot="title">
+        项目列表
+      </template>
+      <template slot="content">
+        共有 {{ projectList.length }} 个项目
+      </template>
     </page-header>
     <page-body>
       <div class="columns is-multiline is-desktop">
+        <div v-if="projectListLoading" class="column is-4-desktop">
+          <card loading />
+        </div>
         <div
+          v-else
           :key="item.projectId"
           v-for="item in projectList"
           class="column is-4"
@@ -45,12 +50,15 @@ export default {
   },
   data() {
     return {
-      projectList: []
+      projectList: [],
+      projectListLoading: false
     };
   },
   async mounted() {
+    this.projectListLoading = true;
     const list = await getProjectList(this.course.id);
     this.projectList = list.data;
+    this.projectListLoading = false;
   }
 };
 </script>

src/views/student/Code/index.vue

@@ -1,19 +1,26 @@
 <template>
   <div>
-    <page-header :routes="[{ name: '代码作业', path: 'code' }]">
-      <template slot="title"
-        >代码作业</template
-      >
-      <template slot="content"
-        >您仍剩余 {{ codeHomeworkList.length }} 份代码作业待完成</template
-      >
+    <page-header
+      :loading="codeHomeworkListLoading"
+      :routes="[{ name: '代码作业', path: 'code' }]"
+    >
+      <template slot="title">
+        代码作业
+      </template>
+      <template slot="content">
+        您仍剩余 {{ codeHomeworkList.length }} 份代码作业待完成
+      </template>
     </page-header>
     <page-body>
       <div class="columns is-multiline is-desktop">
+        <div v-if="codeHomeworkListLoading" class="column is-4-desktop">
+          <card loading />
+        </div>
         <div
+          v-else
           :key="item.homeworkId"
           v-for="item in codeHomeworkList"
-          class="column is-4"
+          class="column is-4-desktop"
         >
           <router-link :to="`${$route.path}/${item.homeworkId}`">
             <card hoverable>{{ item.description }}</card>
@@ -43,12 +50,15 @@ export default {
   },
   data() {
     return {
-      codeHomeworkList: []
+      codeHomeworkList: [],
+      codeHomeworkListLoading: false
     };
   },
   async mounted() {
+    this.codeHomeworkListLoading = true;
     const list = await getCodeHomeworkList(this.course.id);
     this.codeHomeworkList = list.data;
+    this.codeHomeworkListLoading = false;
   }
 };
 </script>