save

src/components/ProjectBuildCard/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="custom-card">
+    <div class="state" :class="stateClass">{{stateMessage}}</div>
+    <div class="branch">
+      <p>所属分支</p>
+      <p>{{branchId}}</p>
+    </div>
+    <div v-if="buildState" class="mirror">
+      <p>所属镜像</p>
+      <p>{{mirrorId}}</p>
+    </div>
+    <div class="message">
+      <p>commit message</p>
+      <div>{{commitMessage}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectBuildCard",
+  props: {
+    buildId: {
+      type: Number,
+      default: 0
+    },
+    buildState: {
+      type: Number,
+      default: 0
+    },
+    branchId: {
+      type: Number,
+      default: 2131242345
+    },
+    commitMessage: {
+      type: String,
+      default: "commit"
+    },
+    buildMessage: {
+      type: String,
+      default: "build"
+    },
+    mirrorId: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    stateMessage() {
+      switch (this.buildState) {
+        case 0:
+          return "构建中";
+        case 1:
+          return "构建成功";
+        case -1:
+          return "构建失败";
+        default:
+          return "构建中";
+      }
+    },
+    stateClass() {
+      switch (this.buildState) {
+        case 0:
+          return "process";
+        case 1:
+          return "success";
+        case -1:
+          return "fail";
+        default:
+          return "process";
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/app";
+.custom-card {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #ffffff;
+  box-shadow: $default-shadow;
+  border-radius: $default-radius;
+  color: #152935;
+  border: $default-border;
+  .state {
+    max-width: 100%;
+    text-align: center;
+  }
+  .process {
+    background-color: $yellow;
+  }
+  .success {
+    background-color: $green;
+  }
+  .fail {
+    background-color: $orange;
+  }
+  .branch {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+  }
+  .mirror {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+  }
+  .message {
+  }
+}
+</style>

src/router/routes.js

@@ -144,8 +144,29 @@ export default [
         component: () => import("@/views/student/Code/index")
       },
       {
-        path: "code/detail",
-        component: () => import("@/views/student/Code/detail")
+        path: "code/:homeworkId",
+        component: () => import("@/views/student/Code/ProjectList/index")
+      },
+      {
+        path: "code/:homeworkId/:projectId",
+        component: () => import("@/views/student/Code/ProjectDetail/index"),
+        children: [
+          {
+            path: "build",
+            component: () =>
+              import("@/views/student/Code/ProjectDetail/BuildDetail")
+          },
+          {
+            path: "deploy",
+            component: () =>
+              import("@/views/student/Code/ProjectDetail/DeployDetail")
+          },
+          {
+            path: "test",
+            component: () =>
+              import("@/views/student/Code/ProjectDetail/TestDetail")
+          }
+        ]
       },
       {
         path: "document",

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

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <project-build-card v-bind:buildState="1"></project-build-card>
+  </div>
+</template>
+
+<script>
+import ProjectBuildCard from "@/components/ProjectBuildCard/index";
+export default {
+  name: "BuildDetail",
+  components: { ProjectBuildCard },
+  props: {
+    projectDetail: {
+      type: Object,
+      default: () => {}
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,3 @@
+<template>
+  <h1>DEPLOY</h1>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+  <h1>TEST</h1>
+</template>

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

@@ -1,30 +1,25 @@
 <template>
   <div>
-    <page-header :routes="[{ name: '项目详情', path: 'codehw' }]">
-      <template slot="title">项目详情</template>
-      <template slot="content">代码作业项目详情</template>
+    <page-header
+      :routes="[{ name: '项目详情', path: 'code' }]"
+      :tab-list="[
+        { name: '构建', path: `code/${$route.params.homeworkId}/${$route.params.projectId}/build` },
+        { name: '部署', path: `code/${$route.params.homeworkId}/${$route.params.projectId}/deploy` },
+        { name: '测试', path:  `code/${$route.params.homeworkId}/${$route.params.projectId}/test` }
+      ]"
+    >
+      <template slot="title">项目名称</template>
+      <template slot="content">
+        <div>项目详情</div>
+      </template>
     </page-header>
     <page-body>
-      <div class="tabs">
-        <ul>
-          <li class="is-active">
-            <a>Pictures</a>
-          </li>
-          <li>
-            <a>Music</a>
-          </li>
-          <li>
-            <a>Videos</a>
-          </li>
-          <li>
-            <a>Documents</a>
-          </li>
-        </ul>
-      </div>
+      <router-view :projectDetail="projectDetail"/>
     </page-body>
   </div>
 </template>
 
+
 <script>
 import { mapState } from "vuex";
 import { getProjectDetail } from "@/api/codehw";

src/views/student/Code/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <page-header :routes="[{ name: '代码作业', path: 'codehw' }]">
+    <page-header :routes="[{ name: '代码作业', path: 'code' }]">
       <template slot="title">代码作业</template>
       <template slot="content">您仍剩余 {{ codeHomeworkList.length }} 份代码作业待完成</template>
     </page-header>