seecoder-devcloud-frontend/src/views/Project/Commit.vue

<template>
  <div class="container">
    <el-row class="row-item title">
      <h2>commit记录</h2>
    </el-row>
    <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 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-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>
      </div>
    </div>
  </div>
</template>

<script>
import { ProjectAPI } from '@/api';
import { copy } from '@/utils/clipboard';
import {
  createGitgraph, templateExtend, TemplateName, Mode,
} from '@gitgraph/js';
import { formatter } from '../../utils/time';

export default {
  name: 'Commit.vue',
  data() {
    return {
      branches: [],
      originCommits: [],
      displayCommits: [],
      authors: [],
      lastBranch: '',
      currentBranch: '',
      currentAuthors: [],
      keyword: '',
      showGraph: true,
      canShowGraph: true,
    };
  },
  async mounted() {
    this.branches = await ProjectAPI.getAllBranches(this.$store.state.workspace.currentProjectId);
    if (this.branches.length !== 0) {
      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);
        const author = this.originCommits[i].gitlabUsername;
        if (this.authors.indexOf(author) === -1) {
          this.authors.push(author);
        }
      }
      this.displayCommits = this.originCommits;
    },
    clickCommitCard(id) {
      // console.log(id);
      this.$router.push({
        path: `/project/${this.$store.state.workspace.currentProjectId}/commit-detail`,
        query: {
          id,
        },
      });
    },
    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));
      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);
    },
  },
};
</script>

<style scoped>
.container {
  margin: 50px 100px;
  width: 80%;
}
.row-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}
.id {
  width: fit-content;
  height: 20px;
  background-color: #2185d0;
  color: #fff;
  border: 0 solid transparent;
  border-radius: .28571429rem;
}
.node {
  width: 15px;
  color: #FFFFFF;
  border-radius: 3px;
  font-size: 14px;
  text-align: center;
}
.bug {
  background-color: chocolate;
}
.none{
  background-color: #ccc;
}
.requirement {
  background-color: #42b983;
}
.view-text{
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow:ellipsis;
}
.el-row{
  margin-bottom: 20px;
}
</style>