feat: modify commit page

src/components/Menu.vue

@@ -192,6 +192,7 @@ export default defineComponent({
 
 <style scoped>
 .menu {
+  margin-left: -20px;
   width: 100%;
   position: fixed;
   z-index: 1000;

src/components/SideBar.vue

@@ -66,6 +66,7 @@ export default {
 <style lang="scss" scoped>
 .side-bar {
   height: 100%;
+  position: fixed;
 }
 .icon {
   width: 28px;

src/views/Project/Commit.vue

@@ -7,7 +7,9 @@
 <!--    {{currentAuthors}}-->
 <!--    {{displayCommits}}-->
     <div>
-      <div v-if="originCommits.length === 0">暂无commit记录！</div>
+      <div v-if="originCommits.length === 0">
+        <el-empty description="暂无commit记录！"></el-empty>
+      </div>
       <div v-else>
         <el-row :gutter="20">
           <el-col :span="6">
@@ -27,7 +29,7 @@
                 v-model="currentAuthors"
                 multiple
                 collapse-tags
-                placeholder="Select"
+                placeholder="选择处理人"
               >
                 <el-option
                   v-for="(author, index) in authors"

src/views/Project/CommitDetails.vue

@@ -4,8 +4,11 @@
 <!--      style="display: flex;flex-direction: row;align-items: center;margin-bottom: 10px;color: #333333">-->
 <!--      <el-button plain icon="el-icon-arrow-left" @click="goBack">上一页</el-button>-->
 <!--    </el-row>-->
+    <el-button type="text" size="small" @click="goBack">
+      <i class="el-icon-back">返回上一页</i>
+    </el-button>
     <el-card shadow="never" class="description-card">
-<!--      <el-button plain icon="el-icon-arrow-left" @click="goBack" style="margin-right: 20px">返回</el-button>-->
+     <!-- <el-button plain icon="el-icon-arrow-left" @click="goBack" style="margin-right: 20px">返回</el-button> -->
       <el-link
         target="_blank"
         class="commit-id description-card-text"
@@ -14,52 +17,84 @@
         <span>{{ commitId }}</span>
         <i class="el-icon-document-copy"></i>
       </el-link>
-      <div class="description-card-text">类型：
-        <span v-if="!typeEditMode">
-          <span v-if="commitInfo.relatedType === 'bug_id'" class="type-line bug">缺陷</span>
-          <span v-else-if="commitInfo.relatedType === 'none'" class="type-line none">无类型</span>
-          <span v-else class="type-line requirement">需求</span>
-          <span v-if="commitInfo.relatedType !== 'none'" class="type-line">关联节点ID: {{commitInfo.relatedId}}</span>
-          <el-button type="primary" size="mini" class="type-line" @click="typeEditMode = true">修改关联</el-button>
-        </span>
-        <span v-if="typeEditMode">
-          <el-radio v-model="relatedTypeEdit" label="TREE_ID" size="large">需求</el-radio>
-          <el-radio v-model="relatedTypeEdit" label="BUG_ID" size="large">缺陷</el-radio>
-<!--          <el-input-->
-<!--            v-model="relatedIdEdit"-->
-<!--            class="w-50 m-2 type-line"-->
-<!--            style="width: 100px"-->
-<!--            size="small"-->
-<!--            placeholder="关联ID"-->
-<!--          />-->
-          <el-select v-model="relatedIdEdit" class="m-2 type-line" size="small" placeholder="Select">
-            <el-option
-              v-for="item in (relatedTypeEdit === 'TREE_ID'?treeList:bugList)"
-              :key="item.id"
-              :label="item.id + ' ' +(item.title === ''?'默认节点':item.title)"
-              :value="item.id"
-            />
-          </el-select>
-          <el-button type="info" size="mini" class="type-line" @click="typeEditMode = false">取消</el-button>
-          <el-button type="primary" size="mini" class="type-line" @click="saveRelated">保存</el-button>
-        </span>
-      </div>
-      <div class="description-card-text">信息：
-        <span>{{ commitInfo.message }}</span>
+      <div class="description-card-text">
+        <el-row style="height: 25px; line-height: 25px">
+          <el-col :span="1">
+            <b>类型：</b>
+          </el-col>
+          <el-col :span="23">
+            <span v-if="!typeEditMode">
+              <el-tag v-if="commitInfo.relatedType === 'bug_id'" class="type-line" color="chocolate" size="medium">缺陷</el-tag>
+              <el-tag v-else-if="commitInfo.relatedType === 'none'" class="type-line" color="#ccc" size="medium">无类型</el-tag>
+              <el-tag v-else class="type-line" color="#42b983" size="medium">需求</el-tag>
+              <span v-if="commitInfo.relatedType !== 'none'" class="type-line">关联节点ID: {{commitInfo.relatedId}}</span>
+              <el-button type="primary" size="mini" class="type-line" @click="typeEditMode = true">修改关联</el-button>
+            </span>
+            <span v-if="typeEditMode">
+              <el-radio v-model="relatedTypeEdit" label="TREE_ID" size="large">需求</el-radio>
+              <el-radio v-model="relatedTypeEdit" label="BUG_ID" size="large">缺陷</el-radio>
+    <!--          <el-input-->
+    <!--            v-model="relatedIdEdit"-->
+    <!--            class="w-50 m-2 type-line"-->
+    <!--            style="width: 100px"-->
+    <!--            size="small"-->
+    <!--            placeholder="关联ID"-->
+    <!--          />-->
+              <el-select v-model="relatedIdEdit" class="m-2 type-line" size="small" placeholder="Select">
+                <el-option
+                  v-for="item in (relatedTypeEdit === 'TREE_ID'?treeList:bugList)"
+                  :key="item.id"
+                  :label="item.id + ' ' +(item.title === ''?'默认节点':item.title)"
+                  :value="item.id"
+                />
+              </el-select>
+              <el-button type="info" size="mini" class="type-line" @click="typeEditMode = false">取消</el-button>
+              <el-button type="primary" size="mini" class="type-line" @click="saveRelated">保存</el-button>
+            </span>
+          </el-col>
+        </el-row>
       </div>
-      <div class="description-card-text">时间：
-        <span>{{ commitInfo.timestamp }}</span>
+      <div class="description-card-text">
+        <el-row>
+          <el-col :span="1">
+            <b>信息：</b>
+          </el-col>
+          <el-col :span="23">
+            <span>{{ commitInfo.message }}</span>
+          </el-col>
+        </el-row>
       </div>
-      <div class="description-card-text">提交人：
-        <span>{{ commitInfo.gitlabUsername }}</span>
+      <div class="description-card-text">
+        <el-row>
+          <el-col :span="1">
+            <b>时间：</b>
+          </el-col>
+          <el-col :span="23">
+            <span>{{ commitInfo.timestamp }}</span>
+          </el-col>
+        </el-row>
       </div>
       <div class="description-card-text">
         <el-row>
-          parents:
-          <span><el-tag v-for="(parent, index) in commitInfo.parents"
+          <el-col :span="1">
+            <b>提交人：</b>
+          </el-col>
+          <el-col :span="23">
+            <span>{{ commitInfo.gitlabUsername }}</span>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="description-card-text">
+        <el-row style="height: 35px; line-height: 35px">
+          <el-col :span="1">
+            <b>parent:</b>
+          </el-col>
+          <el-col :span="23">
+            <el-tag v-for="(parent, index) in commitInfo.parents"
                         :key="index"
                         @click="onParentTagClick(parent)"
-          >{{ parent }}</el-tag></span>
+            >{{parent}}</el-tag>
+          </el-col>
         </el-row>
       </div>
     </el-card>
@@ -114,9 +149,9 @@
             </el-table>
           </el-row>
         </el-col>
-        <el-col :span="16" style="height: 400px">
+        <el-col :span="16" style="height: 500px">
           <el-empty v-if="diffHtml === ''" description="请在左侧选择文件查看" />
-          <div v-html="diffHtml" v-cloak ></div>
+          <div v-html="diffHtml" v-cloak></div>
         </el-col>
       </el-row>
     </div>
@@ -250,9 +285,9 @@ export default {
 </script>
 
 <style scoped>
-.el-row {
+/* .el-row {
   margin-bottom: 20px;
-}
+} */
 
 [v-cloak] {
   display: none;
@@ -263,7 +298,7 @@ export default {
 }
 
 .description-card-text {
-  margin: 5px 0;
+  margin-top: 8px;
 }
 
 .commit-id {
@@ -291,5 +326,6 @@ export default {
 .type-line{
   margin: 0;
   margin-right: 20px;
+  color: #ffffff;
 }
 </style>

src/views/ProjectContainer.vue

@@ -26,6 +26,7 @@ export default {
   background-color: #FFFFFF;
   width: calc(100% - 42px);
   min-height: 60vh;
+  margin-left: 60px;
 }
 /* 用于功能页组件最外层 */
 .content{