[新增] 测试页面基本构成

src/router/routes.js

@@ -168,6 +168,16 @@ export default [
           }
         ]
       },
+      {
+        path: "code/:homeworkId/:projectId/test/unit/:unitTestId",
+        component: () =>
+          import("@/views/student/Code/ProjectDetail/Test/UnitTestDetail")
+      },
+      {
+        path: "code/:homeworkId/:projectId/test/functional/:functionalTestId",
+        component: () =>
+          import("@/views/student/Code/ProjectDetail/Test/FunctionalTestDetail")
+      },
       {
         path: "document",
         component: () => import("@/views/student/Document")

src/views/student/Code/ProjectDetail/Test/FunctionalTestDetail.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <page-header
+      :routes="[
+        { name: '代码作业', path: 'code' },
+        { name: '项目列表', path: `code/${$route.params.homeworkId}` },
+        {
+          name: '项目详情',
+          path: `code/${$route.params.homeworkId}/${
+            $route.params.projectId
+          }/test`
+        },
+        { name: '页面测试' }
+      ]"
+    >
+      <template slot="title">
+        页面测试 #{{ testDetail.id }}
+      </template>
+      <template slot="content">
+        <pass-tag :pass="testDetail.isPassAll" />
+      </template>
+      <template slot="extraContent">
+        <div class="tag">{{ displayUnixTime(testDetail.time) }}</div>
+      </template>
+      <template slot="action">
+        <a class="button is-primary"></a>
+      </template>
+    </page-header>
+    <page-body>
+      <div v-for="item in testDetail.detail" :key="item.id" class="gap-section">
+        <div class="page-section">
+          <div>
+            <pass-tag :pass="item.isPass" />
+            <strong style="padding-left: 10px">
+              页面测试用例 : #{{ item.id }}
+            </strong>
+          </div>
+          <div class="code-section">{{ item.message }}</div>
+        </div>
+      </div>
+    </page-body>
+  </div>
+</template>
+
+<script>
+import PageHeader from "@/components/PageHeader";
+import PageBody from "@/components/PageBody/index";
+import { getFunctionalDetail } from "@/api/codehw";
+import timeMixins from "@/mixins/time";
+import PassTag from "@/views/student/Code/ProjectDetail/components/PassTag";
+export default {
+  components: { PassTag, PageBody, PageHeader },
+  data() {
+    return {
+      testDetail: { detail: [] },
+      showModal: false
+    };
+  },
+  mixins: [timeMixins],
+  mounted() {
+    const { functionalTestId } = this.$route.params;
+    getFunctionalDetail(functionalTestId).then(
+      value => (this.testDetail = value.data)
+    );
+  }
+};
+</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/Test/UnitTestDetail.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <page-header
+      :routes="[
+        { name: '代码作业', path: 'code' },
+        { name: '项目列表', path: `code/${$route.params.homeworkId}` },
+        {
+          name: '项目详情',
+          path: `code/${$route.params.homeworkId}/${
+            $route.params.projectId
+          }/test`
+        },
+        { name: '页面测试' }
+      ]"
+    >
+      <template slot="title">
+        单元测试 #{{ testDetail.id }}
+      </template>
+      <template slot="content">
+        <pass-tag :pass="testDetail.isPassAll" />
+      </template>
+      <template slot="extraContent">
+        <div class="tag">{{ displayUnixTime(testDetail.time) }}</div>
+      </template>
+    </page-header>
+    <page-body>
+      <div v-for="item in testDetail.detail" :key="item.id" class="gap-section">
+        <div class="page-section">
+          <div>
+            <pass-tag :pass="item.isPass" />
+            <strong style="padding-left: 10px">
+              页面测试用例 : #{{ item.id }}
+            </strong>
+          </div>
+          <div class="code-section">{{ item.message }}</div>
+        </div>
+      </div>
+    </page-body>
+  </div>
+</template>
+
+<script>
+import PageHeader from "@/components/PageHeader";
+import PageBody from "@/components/PageBody/index";
+import { getUnitTestDetail } from "@/api/codehw";
+import timeMixins from "@/mixins/time";
+import PassTag from "@/views/student/Code/ProjectDetail/components/PassTag";
+export default {
+  components: { PassTag, PageBody, PageHeader },
+  data() {
+    return {
+      testDetail: { detail: [] }
+    };
+  },
+  mixins: [timeMixins],
+  mounted() {
+    const { unitTestId } = this.$route.params;
+    getUnitTestDetail(unitTestId).then(value => (this.testDetail = value.data));
+  }
+};
+</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/TestDetail.vue

@@ -3,23 +3,45 @@
     <div class="column">
       <div class="page-section">
         <h5 class="title is-5">单元测试:</h5>
-        <div
+        <router-link
           class="test-item"
           :key="item.id"
+          :to="`${$route.path}/unit/${item.id}`"
           v-for="item in projectDetail.unitTestList"
+          tag="div"
         >
           <div><strong>UNIT TEST : #</strong> {{ item.id }}</div>
           <pass-tag :pass="item.isPassAll" />
-          <span>{{ item.time }}</span>
-        </div>
+          <span style="padding-left: 10px">{{
+            displayUnixTime(item.time)
+          }}</span>
+        </router-link>
+      </div>
+    </div>
+    <div class="column">
+      <div class="page-section">
+        <h5 class="title is-5">页面测试:</h5>
+        <router-link
+          class="test-item"
+          :key="item.id"
+          :to="`${$route.path}/functional/${item.id}`"
+          v-for="item in projectDetail.functionTestList"
+          tag="div"
+        >
+          <div><strong>FUNCTIONAL TEST : #</strong> {{ item.id }}</div>
+          <pass-tag :pass="item.isPassAll" />
+          <span style="padding-left: 10px">{{
+            displayUnixTime(item.time)
+          }}</span>
+        </router-link>
       </div>
     </div>
-    <div class="column"><div class="page-section">b</div></div>
   </div>
 </template>
 
 <script>
 import PassTag from "@/views/student/Code/ProjectDetail/components/PassTag";
+import timeMixins from "@/mixins/time";
 export default {
   components: { PassTag },
   props: {
@@ -30,7 +52,8 @@ export default {
         functionTestList: []
       })
     }
-  }
+  },
+  mixins: [timeMixins]
 };
 </script>
 
@@ -39,9 +62,15 @@ export default {
 .test-item {
   padding: $default-margin $default-margin-between;
   margin: 0 -#{$default-margin-between};
+  cursor: pointer;
+}
+
+.test-item:hover,
+.test-item:nth-child(even):hover {
+  background-color: #dde3ef;
 }
 
-.test-item:nth-child(odd) {
-  background-color: blue;
+.test-item:nth-child(even) {
+  background-color: rgba(244, 247, 252, 0.6);
 }
 </style>

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

@@ -1,7 +1,11 @@
 <template>
   <div>
     <page-header
-      :routes="[{ name: '项目详情', path: 'code' }]"
+      :routes="[
+        { name: '代码作业', path: 'code' },
+        { name: '项目列表', path: `code/${$route.params.homeworkId}` },
+        { name: '项目详情' }
+      ]"
       :tab-list="[
         {
           name: '构建',

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

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <page-header :routes="[{ name: '项目列表', path: 'codehw' }]">
+    <page-header
+      :routes="[{ name: '代码作业', path: 'code' }, { name: '项目列表' }]"
+    >
       <template slot="title"
         >项目列表</template
       >