feat: 版本分支图

package.json

@@ -11,6 +11,7 @@
     "mock": "node mock/index.js"
   },
   "dependencies": {
+    "@gitgraph/js": "^1.4.0",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "diff2html": "^3.4.16",

src/views/Project/Commit.vue

@@ -3,98 +3,98 @@
     <el-row class="row-item title">
       <h2>commit记录</h2>
     </el-row>
-<!--    {{currentBranch}}-->
-<!--    {{currentAuthors}}-->
-<!--    {{displayCommits}}-->
     <div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-select v-model="currentBranch" class="m-2" placeholder="Select" size="large">
+            <el-option
+              v-for="(branch, index) in branches"
+              :key="index"
+              :label="branch.name"
+              :value="branch.name"
+              @change="onSearch"
+            />
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-select
+            v-model="currentAuthors"
+            multiple
+            collapse-tags
+            placeholder="选择处理人"
+          >
+            <el-option
+              v-for="(author, index) in authors"
+              :key="index"
+              :label="author"
+              :value="author"
+            />
+          </el-select>
+        </el-col>
+        <el-col :span="8">
+          <el-input v-model="keyword" placeholder="输入检索message内容或Hash" clearable />
+        </el-col>
+        <el-col :span="2">
+          <el-button type="primary" @click="onSearch">过滤</el-button>
+        </el-col>
+        <el-col v-if="!showGraph" :span="2">
+          <el-button type="primary" @click="showGraph = canShowGraph">图形</el-button>
+        </el-col>
+        <el-col v-else :span="2">
+          <el-button type="info" @click="showGraph = false">隐藏</el-button>
+        </el-col>
+
+      </el-row>
       <div v-if="originCommits.length === 0">
         <el-empty description="暂无commit记录！"></el-empty>
       </div>
       <div v-else>
         <el-row :gutter="20">
-          <el-col :span="6">
-            <el-select v-model="currentBranch" class="m-2" placeholder="Select" size="large">
-              <el-option
-                v-for="(branch, index) in branches"
-                :key="index"
-                :label="branch.name"
-                :value="branch.name"
-                @change="onSearch"
-              />
-            </el-select>
-          </el-col>
-
-          <el-col :span="6">
-              <el-select
-                v-model="currentAuthors"
-                multiple
-                collapse-tags
-                placeholder="选择处理人"
-              >
-                <el-option
-                  v-for="(author, index) in authors"
-                  :key="index"
-                  :label="author"
-                  :value="author"
-                />
-              </el-select>
-          </el-col>
-
-          <el-col :span="10">
-<!--            <el-date-picker-->
-<!--              v-model="value1"-->
-<!--              type="daterange"-->
-<!--              range-separator="To"-->
-<!--              start-placeholder="Start date"-->
-<!--              end-placeholder="End date"-->
-<!--            />-->
-<!--            <el-date-picker v-model="value1" type="date" placeholder="Pick a day" />-->
-            <el-input v-model="keyword" placeholder="输入检索message内容或Hash" clearable />
+          <el-col style="padding-bottom: 20px; text-align: center; overflow: auto; transform: scaleY(-1)" v-show="(showGraph)" :span="6">
+            <div style="transform: scaleY(-1)" id="graph-container"></div>
           </el-col>
+          <el-col :span="(showGraph)?18:24">
+            <ElTimeline>
+              <ElTimelineItem
+                v-for="(git, index) in displayCommits"
+                :key="index"
+                :timestamp="git.timestamp"
+                placement="top"
+                :color="git.relatedType === 'bug_id' ? 'chocolate' : (git.relatedType === 'none' ? '#ccc': '#42b983')"
+                size="large">
+                <ElCard shadow="hover"
+                        @click="clickCommitCard(git.id)"
+                        style="height: 35px;"
+                        body-style="padding: 5px 20px">
+                  <h3 class="view-text">{{git.title}}</h3>
+                  <div >
 
-          <el-col :span="2">
-            <el-button type="primary" @click="onSearch">过滤</el-button>
+                    <el-row style="padding: 0;margin: 0; border: 0">
+                      <el-col :span="6">
+                        <el-link
+                          target="_blank"
+                          type="info"
+                          @click.stop.prevent="copy(git.id)"
+                        >
+                          <span style="color: #888">{{git.id.substring(0, 8)}}</span>
+                          <i class="el-icon-document-copy"></i>
+                        </el-link>
+                      </el-col>
+                      <el-col :span="12">
+                        处理人：<span style="font-weight: bold">{{git.gitlabUsername}}</span>
+                      </el-col>
+                      <el-col :span="6">
+                        类型：
+                        <span v-if="git.relatedType === 'bug_id'" class="node bug">缺陷</span>
+                        <span v-else-if="git.relatedType === 'none'" class="node none">无类型</span>
+                        <span v-else class="node requirement">需求</span></el-col>
+                    </el-row>
+                  </div>
+                </ElCard>
+              </ElTimelineItem>
+            </ElTimeline>
           </el-col>
-
         </el-row>
-        <ElTimeline>
-          <ElTimelineItem
-            v-for="(git, index) in displayCommits"
-            :key="index"
-            :timestamp="git.timestamp"
-            placement="top"
-            :color="git.relatedType === 'bug_id' ? 'chocolate' : (git.relatedType === 'none' ? '#ccc': '#42b983')"
-            size="large">
-            <ElCard shadow="hover"
-                    @click="clickCommitCard(git.id)">
-              <h3 class="view-text">{{git.title}}</h3>
-<!--              <h3 class="id">{{git.id}}</h3>-->
-<!--              <div class="view-text" style="margin-top: 10px; font-size: 16px; color: #444">{{git.message}}</div>-->
-              <div style="margin-top: 10px">
-                <el-row>
-                  <el-col :span="6">
-                    <el-link
-                      target="_blank"
-                      type="info"
-                      @click.stop.prevent="copy(git.id)"
-                    >
-                      <span style="color: #888">{{git.id.substring(0, 8)}}</span>
-                      <i class="el-icon-document-copy"></i>
-                    </el-link>
-                  </el-col>
-                  <el-col :span="12">
-                    处理人：<span style="font-weight: bold">{{git.gitlabUsername}}</span>
-                  </el-col>
-                  <el-col :span="6">
-                    类型：
-                    <span v-if="git.relatedType === 'bug_id'" class="node bug">缺陷</span>
-                    <span v-else-if="git.relatedType === 'none'" class="node none">无类型</span>
-                    <span v-else class="node requirement">需求</span></el-col>
-                </el-row>
-              </div>
-            </ElCard>
-          </ElTimelineItem>
-        </ElTimeline>
       </div>
     </div>
   </div>
@@ -102,8 +102,10 @@
 
 <script>
 import { ProjectAPI } from '@/api';
-import { useRouter } from 'vue-router';
 import { copy } from '@/utils/clipboard';
+import {
+  createGitgraph, templateExtend, TemplateName, Mode,
+} from '@gitgraph/js';
 import { formatter } from '../../utils/time';
 
 export default {
@@ -118,6 +120,8 @@ export default {
       currentBranch: '',
       currentAuthors: [],
       keyword: '',
+      showGraph: true,
+      canShowGraph: true,
     };
   },
   async mounted() {
@@ -126,12 +130,14 @@ export default {
       this.currentBranch = this.branches[0].name;
       this.lastBranch = this.currentBranch;
       await this.loadBranch();
+      await this.generateGitGraph();
     }
   },
   methods: {
     copy,
     async loadBranch() {
       this.originCommits = await ProjectAPI.getCommitsByBranch(this.$store.state.workspace.currentProjectId, this.currentBranch);
+      // console.log(this.originCommits);
       this.authors = [];
       for (let i = 0; i < this.originCommits.length; i += 1) {
         this.originCommits[i].timestamp = formatter(this.originCommits[i].timestamp);
@@ -143,7 +149,7 @@ export default {
       this.displayCommits = this.originCommits;
     },
     clickCommitCard(id) {
-      console.log(id);
+      // console.log(id);
       this.$router.push({
         path: `/project/${this.$store.state.workspace.currentProjectId}/commit-detail`,
         query: {
@@ -154,11 +160,83 @@ export default {
     async onSearch() {
       if (this.currentBranch !== this.lastBranch) {
         await this.loadBranch();
+        this.lastBranch = this.currentBranch;
+        await this.generateGitGraph();
       }
       this.displayCommits = this.originCommits
         .filter((commit) => (this.currentAuthors.length === 0 || this.currentAuthors.indexOf(commit.gitlabUsername) >= 0)
           && (commit.id.startsWith(this.keyword) || commit.title.indexOf(this.keyword) >= 0));
-      console.log('search');
+      this.canShowGraph = this.keyword === '' && this.currentAuthors.length === 0;
+      this.showGraph = this.showGraph && this.canShowGraph;
+    },
+    async generateGitGraph() {
+      if (this.originCommits.length === 0) {
+        return;
+      }
+
+      const graphContainer = document.getElementById('graph-container');
+      graphContainer.innerHTML = '';
+      if (graphContainer == null) {
+        console.log('null container');
+      }
+      const gitgraph = createGitgraph(graphContainer, {
+        /* options */
+        // mode: Mode.Compact, // compact 模式，在 tooltip 顯示提交信息
+        template: templateExtend(TemplateName.Metro, {
+          commit: {
+            message: {
+              displayAuthor: false,
+              displayHash: false,
+            },
+          },
+          branch: {
+            label: {
+              display: false,
+            },
+          },
+        }),
+      });
+      // const gitgraph = createGitgraph(graphContainer);
+
+      const sonMap = {};
+      for (let i = 0; i < this.originCommits.length; i += 1) {
+        const commit = this.originCommits[i];
+        for (let j = 0; j < commit.parents.length; j += 1) {
+          const parentCommit = commit.parents[j];
+          if (!Object.prototype.hasOwnProperty.call(sonMap, parentCommit)) {
+            sonMap[parentCommit] = [commit.id];
+          } else {
+            sonMap[parentCommit].push(commit.id);
+          }
+        }
+      }
+
+      let curBranchNum = 0;
+      const branchPrefix = 'b';
+
+      const graphCommits = [];
+      for (let i = 0; i < this.originCommits.length; i += 1) {
+        const originCommit = this.originCommits[i];
+        const graphCommit = {};
+        if (!Object.prototype.hasOwnProperty.call(sonMap, originCommit.id)) {
+          const newBranchName = branchPrefix + curBranchNum;
+          curBranchNum += 1;
+          graphCommit.refs = [newBranchName];
+        } else {
+          graphCommit.refs = [];
+        }
+        graphCommit.hash = originCommit.id;
+        graphCommit.parents = originCommit.parents;
+        // const date = new Date(originCommit.timestamp);
+        // const time = date.getTime();
+        graphCommit.author = {
+          name: originCommit.gitlabUsername,
+          // timestamp: time,
+        };
+        graphCommit.subject = '';
+        graphCommits.push(graphCommit);
+      }
+      gitgraph.import(graphCommits);
     },
   },
 };
@@ -167,7 +245,7 @@ export default {
 <style scoped>
 .container {
   margin: 50px 100px;
-  width: 50%;
+  width: 80%;
 }
 .row-item {
   display: flex;

yarn.lock

@@ -870,6 +870,18 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@gitgraph/core@1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@gitgraph/core/-/core-1.5.0.tgz#fc27924b82eabc5fa1f90480df5239e0c84dcafa"
+  integrity sha512-8CeeHbkKoFHM1y9vfjYiHyEpzl1mEhVrg5c/eFgDBsntOYswoDKU2yOf6DjtVINcE60wmcuynBSJqjMkQo07Ww==
+
+"@gitgraph/js@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@gitgraph/js/-/js-1.4.0.tgz#27d92664841af1d886e1b970742d3f0b80df2867"
+  integrity sha512-7wxTTCFnRVjsqj+Zt09+3F79WhH4MK46ZS20AwbcB/MJFshSMeMH4nYmNDPa9McVsiL+cFsvW1pmZoquAOoHMw==
+  dependencies:
+    "@gitgraph/core" "1.5.0"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.npm.taobao.org/@hapi/address/download/@hapi/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"