Add some github information

web/package.json

@@ -27,7 +27,8 @@
         "vue-router": "^3.1.3",
         "vuescroll": "^4.14.4",
         "vuex": "^3.1.1",
-        "vuex-persist": "^2.1.0"
+        "vuex-persist": "^2.1.0",
+        "timeline-vuejs": "1.1.1"
     },
     "devDependencies": {
         "@vue/cli-plugin-babel": "^3.11.0",

web/src/api/github.js

@@ -0,0 +1,31 @@
+import axios from "axios";
+import { Loading } from "element-ui";
+
+let loadingInstance;
+let service = axios.create();
+
+service.interceptors.request.use((config) => {
+  loadingInstance = Loading.service({ fullscreen: true });
+  return config;
+});
+
+service.interceptors.response.use((resp) => {
+  loadingInstance.close();
+  return resp;
+});
+
+export function Commits(page) {
+  return service({
+    url:
+      "https://api.github.com/repos/flipped-aurora/gin-vue-admin/commits?page=" +
+      page,
+    method: "get",
+  });
+}
+
+export function Members() {
+  return service({
+    url: "https://api.github.com/orgs/FLIPPED-AURORA/members",
+    method: "get",
+  });
+}

web/src/main.js

@@ -14,6 +14,9 @@ import vueParticleLine from 'vue-particle-line'
 import 'vue-particle-line/dist/vue-particle-line.css'
 Vue.use(vueParticleLine)
 
+// time line css
+import '../node_modules/timeline-vuejs/dist/timeline-vuejs.css'
+
 // 富文本插件
 import VueQuillEditor from 'vue-quill-editor'
 import 'quill/dist/quill.core.css'

web/src/view/test/index.vue

@@ -1,16 +1,181 @@
 <template>
-    <div>
-        动态路由测试
-    </div>
+  <div>
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-card>
+          <div slot="header">gin-vue-admin</div>
+          <div>
+            <el-row>
+              <el-col :span="8" :offset="8">
+                <a href="https://github.com/flipped-aurora/gin-vue-admin">
+                  <img
+                    class="org-img dom-center"
+                    src="@/assets/logo.png"
+                    alt="gin-vue-admin"
+                  />
+                </a>
+              </el-col>
+            </el-row>
+            <el-row :gutter="10">
+              <el-col :span="8">
+                <a href="https://github.com/flipped-aurora/gin-vue-admin">
+                  <img
+                    class="dom-center"
+                    src="https://img.shields.io/github/watchers/flipped-aurora/gin-vue-admin.svg?label=Watch"
+                    alt=""
+                  />
+                </a>
+              </el-col>
+              <el-col :span="8">
+                <a href="https://github.com/flipped-aurora/gin-vue-admin">
+                  <img
+                    class="dom-center"
+                    src="https://img.shields.io/github/stars/flipped-aurora/gin-vue-admin.svg?style=social"
+                    alt=""/></a
+              ></el-col>
+              <el-col :span="8">
+                <a href="https://github.com/flipped-aurora/gin-vue-admin">
+                  <img
+                    class="dom-center"
+                    src="https://img.shields.io/github/forks/flipped-aurora/gin-vue-admin.svg?label=Fork"
+                    alt=""/></a
+              ></el-col>
+            </el-row>
+          </div>
+        </el-card>
+        <el-card style="margin-top: 20px">
+          <div slot="header">flipped-aurora团队</div>
+          <div>
+            <el-row>
+              <el-col :span="8" :offset="8">
+                <a href="https://github.com/flipped-aurora">
+                  <img
+                    class="org-img"
+                    src="@/assets/flipped-aurora.png"
+                    alt="flipped-aurora"
+                  />
+                </a>
+              </el-col>
+            </el-row>
+            <el-row style="margin-left: 40px" :gutter="20">
+              <template v-for="(item, index) in members">
+                <el-col :span="8" :key="index">
+                  <a :href="item.html_url">
+                    <img class="avatar-img" :src="item.avatar_url" />
+                    <a class="author-name" style="">{{ item.login }}</a>
+                  </a>
+                </el-col>
+              </template>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card>
+          <div slot="header">
+            提交记录
+          </div>
+          <div>
+            <Timeline
+              :timeline-items="dataTimeline"
+              :message-when-no-items="messageWhenNoItems"
+              :uniqueTimeline="true"
+              :unique-year="true"
+              :show-day-and-month="true"
+              order="desc"
+              dateLocale="zh-CN"
+            />
+          </div>
+          <el-button class="load-more" @click="loadMore" type="text"
+            >Load more</el-button
+          >
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
+import { Commits, Members } from "@/api/github";
+import Timeline from "timeline-vuejs";
 export default {
-    name:"Test"
-    
-}
+  name: "Test",
+  components: {
+    Timeline,
+  },
+  data() {
+    return {
+      messageWhenNoItems: "There arent commits",
+      members: [],
+      dataTimeline: [],
+      page: 0,
+    };
+  },
+  created() {
+    this.loadCommits();
+    this.loadMembers();
+  },
+  methods: {
+    loadMore() {
+      this.page++;
+      this.loadCommits();
+    },
+    loadCommits() {
+      Commits(this.page).then(({ data }) => {
+        data.forEach((element) => {
+          if (element.commit.message) {
+            this.dataTimeline.push({
+              from: new Date(element.commit.author.date),
+              title: element.commit.author.name,
+              showDayAndMonth: true,
+              description: `<a style="color: #26191b" href="${element.html_url}">${element.commit.message}</a>`,
+            });
+          }
+        });
+      });
+    },
+    loadMembers() {
+      Members().then(({ data }) => {
+        this.members = data;
+        this.members.sort();
+      });
+    },
+  },
+};
 </script>
 
 <style scoped>
+.load-more {
+  margin-left: 120px;
+}
 
-</style>
+.avatar-img {
+  float: left;
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  margin-top: 15px;
+}
+
+.org-img {
+  height: 150px;
+  width: 150px;
+}
+
+.author-name {
+  float: left;
+  line-height: 65px !important;
+  margin-left: 10px;
+  color: darkblue;
+  line-height: 100px;
+  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
+    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+}
+
+.dom-center {
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+</style>