Merge branch 'gin-vue-admin_v2_dev' of...

Merge branch 'gin-vue-admin_v2_dev' of https://github.com/flipped-aurora/gin-vue-admin into gin-vue-admin_v2_dev

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

+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;
+}, (error) => {
+    loadingInstance.close();
+    return error;
+});
+
+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",
+    });
+}
\ No newline at end of file

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/layout/aside/historyComponent/history.vue

@@ -38,7 +38,7 @@ export default {
            const obj = {}
            obj.name = route.name
            obj.meta = route.meta
-        this.historys.push(obj)
+           this.historys.push(obj)
        }
            this.activeValue = this.$route.name
         },

web/src/view/layout/aside/index.vue

@@ -2,7 +2,7 @@
   <div>
     <el-scrollbar style="height:calc(100vh)">
       <el-menu
-        :class="['el-menu-vertical',!isCollapse&&'noCollapse']"
+        class="el-menu-vertical"
         :collapse="isCollapse"
         :collapse-transition="true"
         :default-active="active"

web/src/view/layout/index.vue

@@ -7,6 +7,8 @@
       </el-aside>
       <!-- 分块滑动功能 -->
       <el-main class="main-cont main-right">
+        <transition mode="out-in" name="el-fade-in-linear">
+          <div class="topfix" :style="{width: `calc(100% - ${isCollapse?'54px':'220px'})`}">
         <el-header class="header-cont">
           <div @click="totalCollapse" class="menu-total">
             <i class="el-icon-s-unfold" v-if="isCollapse"></i>
@@ -37,7 +39,26 @@
                 <el-dropdown-item @click.native="LoginOut" icon="el-icon-table-lamp">登 出</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
-            <el-dialog
+ 
+          </div>
+        </el-header>
+        <!-- 当前面包屑用路由自动生成可根据需求修改 -->
+        <!--
+        :to="{ path: item.path }" 暂时注释不用-->
+        <HistoryComponent />
+        </div>
+        </transition>
+        <transition mode="out-in" name="el-fade-in-linear">
+          <keep-alive>
+            <router-view v-if="$route.meta.keepAlive" class="admin-box"></router-view>
+          </keep-alive>
+        </transition>
+        <transition mode="out-in" name="el-fade-in-linear">
+            <router-view v-if="!$route.meta.keepAlive" class="admin-box"></router-view>
+        </transition>
+      </el-main>
+    </el-container>
+               <el-dialog
               title="修改密码"
               :visible.sync="showPassword"
               @close="clearPassword"
@@ -59,23 +80,6 @@
                 <el-button type="primary" @click="savePassword">确 定</el-button>
               </div>
             </el-dialog>
-          </div>
-
-        </el-header>
-        <!-- 当前面包屑用路由自动生成可根据需求修改 -->
-        <!--
-        :to="{ path: item.path }" 暂时注释不用-->
-        <HistoryComponent />
-        <transition mode="out-in" name="el-fade-in-linear">
-          <keep-alive>
-            <router-view v-if="$route.meta.keepAlive" class="admin-box"></router-view>
-          </keep-alive>
-        </transition>
-        <transition mode="out-in" name="el-fade-in-linear">
-            <router-view v-if="!$route.meta.keepAlive" class="admin-box"></router-view>
-        </transition>
-      </el-main>
-    </el-container>
   </el-container>
 </template>
 
@@ -221,8 +225,15 @@ $mainHight: 100vh;
 .dropdown-group {
   min-width: 100px;
 }
+.topfix{
+  position:fixed;
+  top:0;
+  box-sizing: border-box;
+  z-index: 999;
+}
 .admin-box{
   background-color: rgb(255,255,255);
+  margin-top: 100px;
 }
 .el-scrollbar__wrap {
   padding-bottom: 17px;
@@ -260,7 +271,6 @@ $mainHight: 100vh;
     }
     .router-history{
       background: #fff;
-      margin-top: 1px;
       padding: 0 6px;
     }
     &.el-main {

web/src/view/test/index.vue

 <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 dom-center"
+                    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>
\ No newline at end of file
+.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>