源码按钮

src/components/d2-container/components/d2-source.vue

@@ -1,18 +1,56 @@
 <template>
-  <div class="d2-source">
+  <div
+    class="d2-source"
+    :class="{ 'd2-source--active': isActive }"
+    @click="handleClick">
     <d2-icon name="code"/> SourceCode
   </div>
 </template>
 
+<script>
+export default {
+  props: {
+    // 文件路径
+    filename: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      isActive: false
+    }
+  },
+  mounted () {
+    // 一秒后显示按钮
+    setTimeout(() => {
+      this.isActive = true
+    }, 1000)
+  },
+  methods: {
+    // 点击按钮的时候跳转到源代码
+    handleClick () {
+      const file = this.filename.split('?')[0]
+      const url = file
+        ? `https://github.com/d2-projects/d2-admin/blob/master/${file}`
+        : 'https://github.com/d2-projects/d2-admin'
+      this.$open(url)
+    }
+  }
+}
+</script>
+
 <style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
 .d2-source {
   $borderRadius: 4px;
   $paddingLR: 15px;
   $paddingTB: 7px;
   $fontSize: 12px;
+  $rightOuter: $paddingLR / 2;
+  opacity: 0;
   position: absolute;
-  right: - $borderRadius;
+  right: - $borderRadius - $rightOuter;
   bottom: 20px;
   font-size: $fontSize;
   line-height: $fontSize;
@@ -25,7 +63,11 @@
   color: #FFF;
   transition: all .3s;
   @extend %unable-select;
+  &.d2-source--active {
+    opacity: 1;
+  }
   &:hover {
+    right: - $borderRadius;
     background-color: rgba(#000, .9);
   }
 }

src/components/d2-container/index.js

@@ -53,7 +53,9 @@ export default {
           scroll: e => this.$emit('scroll', e)
         }
       }, slots),
-      h(d2Source)
+      h(d2Source, {
+        props: this.$attrs
+      })
     ])
   }
 }

src/pages/index/page.vue

@@ -1,5 +1,7 @@
 <template>
-  <d2-container class="page">
+  <d2-container
+    class="page"
+    :filename="filename">
     <d2-page-cover
       :title="`D2 Admin ${version}`"
       sub-title="优雅的中后台集成方案">
@@ -43,6 +45,11 @@ export default {
     D2HelpBtn,
     D2Badge
   },
+  data () {
+    return {
+      filename: __filename
+    }
+  },
   computed: {
     ...mapState('d2admin/releases', [
       'version'