dashboard调整

web/src/view/dashboard/dashbordTable/dashbordTable.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="commit-table">
+    <div class="commit-table-title">
+      更新日志
+    </div>
+    <div class="log">
+      <div v-for="(item,key) in dataTimeline" :key="key" class="log-item">
+        <div class="flex-1 flex"><span class="key" :class="key<3&&'top'">{{ key+1 }}</span></div>
+        <div class="flex-5 flex message">{{ item.message }}</div>
+        <div class="flex-3 flex form">{{ item.from }}</div>
+      </div>
+    </div>
+    <!-- <el-table v-loading="loading" :data="dataTimeline" style="width: 100%">
+      <el-table-column prop="from" show-overflow-tooltip label="日期" width="180" />
+      <el-table-column prop="title" show-overflow-tooltip label="推送者" width="120" />
+      <el-table-column prop="message" show-overflow-tooltip label="commit 信息" />
+    </el-table> -->
+  </div>
+</template>
+
+<script>
+import { Commits } from '@/api/github'
+import { formatTimeToStr } from '@/utils/date.js'
+export default {
+  data() {
+    return {
+      loading: true,
+      dataTimeline: [],
+    }
+  },
+  created() {
+    this.loadCommits()
+  },
+  methods: {
+    loadCommits() {
+      Commits(0).then(({ data }) => {
+        this.loading = false
+        data.forEach((element, index) => {
+          if (element.commit.message && index < 10) {
+            this.dataTimeline.push({
+              from: formatTimeToStr(element.commit.author.date, 'yyyy-MM-dd'),
+              title: element.commit.author.name,
+              showDayAndMonth: true,
+              message: element.commit.message,
+            })
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.commit-table{
+    background-color: #fff;
+    height: 400px;
+    &-title{
+        font-weight: 600;
+        margin-bottom: 12px;
+    }
+    .log{
+      &-item{
+        display: flex;
+        justify-content: space-between;
+        margin-top: 14px;
+        .key{
+          &.top{
+            background: #314659;
+            color: #FFFFFF;;
+          }
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          background: #F0F2F5;
+          text-align: center;
+          color:rgba($color: #000000, $alpha: 0.65)
+        }
+        .message{
+          color: rgba(0, 0, 0, 0.65);
+        }
+        .form{
+          color: rgba(0, 0, 0, 0.65);
+          margin-left: 12px;
+        }
+        .flex{
+          line-height: 20px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .flex-1{
+          flex:1;
+        }
+        .flex-2{
+          flex:2;
+        }
+        .flex-3{
+          flex:3;
+        }
+        .flex-4{
+          flex:4;
+        }
+        .flex-5{
+          flex:5;
+        }
+      }
+    }
+}
+</style>